daoji_h5/components/service-list-item.vue

180 lines
4.1 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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>