daoji_h5/components/service-list-item.vue

<template>
	<view class="service-list-item">
		<view @tap.stop="goDetail" class="list-item flex-warp">
			<!-- #ifdef H5 -->
			<view class="cover radius-16">
				<view class="h5-image cover radius-16" :style="{ backgroundImage : `url('${info.cover}')`}">
				</view>
			</view>
			<!-- #endif -->
			<!-- #ifndef H5 -->
			<image mode="aspectFill" lazy-load class="cover radius-16" :src="info.cover"></image>
			<!-- #endif -->
			<view class="flex-1 ml-md" :style="{maxWidth:maxWidth}">
				<view class="flex-between">
					<view class="f-title c-title text-bold max-270 ellipsis">{{ info.title }}</view>
					<view class="f-caption c-caption">超{{ info.total_sale }}人选择</view>
				</view>
				<view class="f-caption c-caption mt-sm mb-sm ellipsis" style="height: 36rpx;">{{ info.sub_title || '' }}
				</view>
				<view class="f-caption c-caption" v-if="info.material_price*1>0">物料费：¥{{info.material_price}}</view>
				<view class="flex-between">
					<view class="flex-y-center f-desc c-caption max-350 ellipsis">
						<view class="flex-y-baseline f-icontext c-orange text-bold mr-sm">
							<b class="f-caption c-orange">￥</b>
							<view class="f-md-title">
								{{ info.price }}
							</view>
						</view>
						<view class="text-delete" v-if="info.init_price">￥{{ info.init_price }}</view>
						<view class="servefc ml-md">	
							<i class="iconfont icon-shijian" :style="{ color: primaryColor }"></i>
							<span class="f-caption c-title ml-sm">{{ info.time_long }}分钟</span>
						</view>				
					</view>
					<auth @tap.stop.prevent :needAuth="userInfo && (!userInfo.phone || !userInfo.nickName)" :must="true"
						:type="!userInfo.phone ? 'phone' : 'userInfo'" @go="toChoose" style="width:190rpx">
						<view class="flex-between">
							<view></view>
							<view class="item-btn flex-center f-caption c-base" :style="{background: `linear-gradient(68deg, ${primaryColor}, ${subColor})`}">
								{{ from == 'technician-info' ? `立即预约` : `选择${$t('action.attendantName')}`}}
							</view>
						</view>
					</auth>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	export default {
		components: {},
		props: {
			from: {
				type: String,
				default () {
					return 'list'
				}
			},
			sid: {
				type: Number,
				default () {
					return 0
				}
			},
			info: {
				type: Object,
				default () {
					return {}
				}
			},
			maxWidth: {
				type: String,
				default () {
					return '490rpx'
				}
			}
		},
		data() {
			return {
				textType: {
					1: '可服务',
					2: '服务中',
					3: '可预约',
					4: '不可预约'
				},
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			userInfo: state => state.user.userInfo,
		}),
		methods: {
			// 详情
			goDetail() {
				let {
					id
				} = this.info
				let {
					sid: store_id = 0
				} = this
				let url = `/user/pages/detail?id=${id}&store_id=${store_id}`
				this.$util.goUrl({
					url
				})
			},
			// 选择技-师
			toChoose() {
				let {
					from
				} = this
				if (from == 'technician-info') {
					this.$emit('order')
					return
				}
				let {
					id
				} = this.info
				let {
					sid: store_id = 0
				} = this
				let url = `/user/pages/choose-technician?id=${id}&store_id=${store_id}`
				this.$util.goUrl({
					url
				})
			},
			toEmit(key) {
				this.$emit(key)
			}
		}
	}
</script>

<style scoped lang="scss">
	.service-list-item {
		.list-item {
			.cover {
				width: 180rpx;
				height: 180rpx;
			}

			.time-long {
				min-width: 72rpx;
				height: 30rpx;
				padding: 0 5rpx;
				background: linear-gradient(270deg, #4C545A 0%, #282B34 100%);
				border-radius: 4rpx;
				font-size: 20rpx;
				color: #FFEEB9;
				margin-right: 16rpx;
			}

			.f-icontext {
				font-size: 18rpx;
			}

			.text-delete {
				font-size: 24rpx;
				color: #B9B9B9;
			}

			.item-btn {
				min-width: 150rpx;
				height: 52rpx;
				padding: 0 10rpx;
				border-radius: 100rpx;
			}
		}
	}
	.servefc{
		display: flex;
		align-items: center;
	}	
</style>