daoji_h5/components/service-list-item.vue

180 lines
4.1 KiB
Vue
Raw Normal View History

2024-03-21 05:53:51 +00:00
<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>