180 lines
4.1 KiB
Vue
180 lines
4.1 KiB
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> |