修改茶艺师详情的页面样式
This commit is contained in:
wangxiaowei
@ -1,19 +1,18 @@
|
||||
<route lang="jsonc" type="page">
|
||||
{
|
||||
<route lang="jsonc" type="page">{
|
||||
"needLogin": true,
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
</route>
|
||||
}</route>
|
||||
|
||||
<template>
|
||||
<view :class="isReserve ? 'pb-28rpx' : ''">
|
||||
<wd-message-box selector="wd-message-box-slot"></wd-message-box>
|
||||
|
||||
<!-- 打赏茶艺师 -->
|
||||
<wd-popup v-model="showTipTeaSpecialistPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" @close="showTipTeaSpecialistPopup = false" position="bottom">
|
||||
<wd-popup v-model="showTipTeaSpecialistPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;"
|
||||
@close="showTipTeaSpecialistPopup = false" position="bottom">
|
||||
<view class='bg-[#fff] py-40rpx realtive'>
|
||||
<view class="absolute top-18rpx right-30rpx" @click="showTipTeaSpecialistPopup = false">
|
||||
<wd-img width="60rpx" height='60rpx' :src="`${OSS}icon/icon_close.png`"></wd-img>
|
||||
@ -30,23 +29,25 @@
|
||||
<view class="mt-48rpx font-400 text-30rpx leading-42rpx text-#303133 text-center">很喜欢这个茶艺师，快打个赏吧</view>
|
||||
<!-- 打赏金额 -->
|
||||
<view class="mt-62rpx flex justify-between items-center mx-30rpx" v-if="!isOtherTip">
|
||||
<view class="bg-#F0F6EF flex flex-col items-center justify-center h-240rpx px-20rpx py-24rpx w-[22%] rounded-4rpx text-center"
|
||||
<view
|
||||
class="bg-#F0F6EF flex flex-col items-center justify-center h-240rpx px-20rpx py-24rpx w-[22%] rounded-4rpx text-center"
|
||||
v-for="(item, index) in tipList" :key="index" @click="Detail.handleTipTeaSpecialist(item)">
|
||||
<wd-img width="64rpx" height='64rpx' :src="`${OSS}images/h5/tip/tip_image${index + 1}.png`"></wd-img>
|
||||
<wd-img width="64rpx" height='64rpx'
|
||||
:src="`${OSS}images/h5/tip/tip_image${index + 1}.png`"></wd-img>
|
||||
<view class="font-bold text-#006C2D text-40rpx leading-30rpx mt-20rpx">
|
||||
<price-format color="#006C2D" :first-size="40" :subscript-size="22" :show-decimal="false" :price="item.tip_price" v-if="item.tip_price > 0"></price-format>
|
||||
<view class="font-400 text-26rpx leading-36rpx text-#006C2D" v-if="item.tip_price == 0">其他金额</view>
|
||||
<price-format color="#006C2D" :first-size="40" :subscript-size="22" :show-decimal="false"
|
||||
:price="item.tip_price" v-if="item.tip_price > 0"></price-format>
|
||||
<view class="font-400 text-26rpx leading-36rpx text-#006C2D" v-if="item.tip_price == 0">其他金额
|
||||
</view>
|
||||
<view class="bg-#4C9F44 rounded-8rpx w-120rpx h-48rpx leading-48rpx text-#fff text-28rpx mt-16rpx">打赏</view>
|
||||
</view>
|
||||
<view
|
||||
class="bg-#4C9F44 rounded-8rpx w-120rpx h-48rpx leading-48rpx text-#fff text-28rpx mt-16rpx">
|
||||
打赏</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 自定义打赏金额 -->
|
||||
<view class="mx-30rpx mt-46rpx" v-if="isOtherTip">
|
||||
<wd-input
|
||||
type="text"
|
||||
placeholder="请输入1~50元的金额"
|
||||
v-model="tipMoney"
|
||||
no-border
|
||||
<wd-input type="text" placeholder="请输入1~50元的金额" v-model="tipMoney" no-border
|
||||
custom-class="!bg-[#F6F7F8] !rounded-16rpx !text-30rpx !leading-48rpx"
|
||||
custom-input-class="!h-104rpx !pl-60rpx">
|
||||
<template #prefix>
|
||||
@ -57,11 +58,15 @@
|
||||
</wd-input>
|
||||
</view>
|
||||
|
||||
<view class="font-400 text-24rpx leading-34rpx text-#909399 mt-34rpx mx-30rpx">打赏金额将给到茶艺师，是您自愿对于茶艺师的赠与</view>
|
||||
<view class="font-400 text-24rpx leading-34rpx text-#909399 mt-34rpx mx-30rpx">打赏金额将给到茶艺师，是您自愿对于茶艺师的赠与
|
||||
</view>
|
||||
|
||||
<view class="text-32rpx leading-44rpx text-center flex items-center justify-center mt-136rpx" v-if="isOtherTip">
|
||||
<view class="w-330rpx h-90rpx leading-90rpx bg-#F6F7F8 text-#303133 rounded-8rpx mr-30rpx" @click="isOtherTip = false">在想想</view>
|
||||
<view class="w-330rpx h-90rpx leading-90rpx bg-#4C9F44 text-#fff rounded-8rpx" @click="Detail.handleTipTeaSpecialistOtherMoney">打赏</view>
|
||||
<view class="text-32rpx leading-44rpx text-center flex items-center justify-center mt-136rpx"
|
||||
v-if="isOtherTip">
|
||||
<view class="w-330rpx h-90rpx leading-90rpx bg-#F6F7F8 text-#303133 rounded-8rpx mr-30rpx"
|
||||
@click="isOtherTip = false">在想想</view>
|
||||
<view class="w-330rpx h-90rpx leading-90rpx bg-#4C9F44 text-#fff rounded-8rpx"
|
||||
@click="Detail.handleTipTeaSpecialistOtherMoney">打赏</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
@ -74,22 +79,8 @@
|
||||
<view class="mt-4rpx">
|
||||
<wd-icon name="thin-arrow-left" size="30rpx" color="#121212"></wd-icon>
|
||||
</view>
|
||||
<view class="text-[#303133] text-36rpx ml-24rpx leading-48rpx">{{isReserve ? '预约茶艺师' : '茶艺师详情'}}</view>
|
||||
<view class="text-[#303133] text-36rpx ml-24rpx leading-48rpx">{{ isReserve ? '预约茶艺师' : '茶艺师详情' }}
|
||||
</view>
|
||||
</template>
|
||||
<template #right>
|
||||
<view class="flex items-center ml-114rpx">
|
||||
<!-- <view class="mr-16rpx flex items-center" @click="Detail.handleCollect">
|
||||
<template v-if="userInfo.token && info.collect > 0">
|
||||
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_sc_s.png`"></wd-img>
|
||||
</template>
|
||||
<template v-else>
|
||||
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_sc.png`"></wd-img>
|
||||
</template>
|
||||
</view> -->
|
||||
<!-- <view @click="Detail.handleShare" class="flex items-center">
|
||||
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_share.png`"></wd-img>
|
||||
</view> -->
|
||||
</view>
|
||||
</template>
|
||||
</navbar>
|
||||
@ -98,20 +89,28 @@
|
||||
<view class="pb-30rpx bg-white">
|
||||
<!-- 轮播图 -->
|
||||
<view class="mx-30rpx">
|
||||
<wd-swiper value-key="image" height="400rpx"
|
||||
:indicator="{ type: 'dots-bar' }" :list="info.image_arr" mode="aspectFit" @click="Detail.handlePreviewImage"></wd-swiper>
|
||||
<wd-swiper value-key="image" height="400rpx" :indicator="{ type: 'dots-bar' }" :list="info.image_arr"
|
||||
mode="aspectFit" @click="Detail.handlePreviewImage"></wd-swiper>
|
||||
</view>
|
||||
|
||||
<!-- 昵称显示 -->
|
||||
<view class="bg-white rounded-t-16rpx px-30rpx">
|
||||
<view class="font-bold text-34rpx leading-48rpx text-#303133 pt-36rpx">{{ info.name }}</view>
|
||||
<view class="flex items-center justify-between mt-4rpx">
|
||||
<view class="flex items-center pt-36rpx">
|
||||
<view class="flex items-center">
|
||||
<wd-rate v-model="info.star" readonly active-color="#FF5951" allow-half active-icon="star-filled" icon="star" space="4rpx"/>
|
||||
<view class="font-400 text-26rpx text-#606266 ml-8rpx">{{ info.star }} 推荐</view>
|
||||
<view class="font-bold text-34rpx leading-48rpx text-#303133 mr-30rpx">{{ info.name }}</view>
|
||||
<view class="mt-8rpx">
|
||||
<tea-specialist-level :level="info.level"></tea-specialist-level>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="font-400 text-22rpx leading-32rpx text-#6A6363">已预约 {{ Number(info.sold) > 10 ? Number(info.sold) + '+' : Number(info.sold) }}</view> -->
|
||||
</view>
|
||||
<view class="flex items-center justify-between mt-4rpx">
|
||||
<view class="flex items-center">
|
||||
<wd-rate v-model="info.star" readonly active-color="#FF5951" allow-half
|
||||
active-icon="star-filled" icon="star" space="4rpx" />
|
||||
<view class="font-400 text-26rpx text-#606266 ml-8rpx">{{ info.star }} 推荐</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="flex items-center mt-24rpx">
|
||||
<view class="flex items-center">
|
||||
@ -120,22 +119,30 @@
|
||||
<text class="ml-8rpx font-400 text-24rpx leading-4rpx text-#303133">商家认证</text>
|
||||
</view>
|
||||
|
||||
<view class="flex items-center justify-between mt-24rpx">
|
||||
<view class="bg-[#EBFBF7] w-692rpx h-64rpx rounded-12rpx p-14rpx flex items-center mt-22rpx text-[#35C1A0]">
|
||||
<wd-img :src="`${OSS}icon/icon_heart.png`" width="36rpx" height="36rpx"></wd-img>
|
||||
<text class="font-bold text-24rpx leading-34rpx ml-16rpx">服务方式</text>
|
||||
<text class="ml-20rpx font-400 text-24rpx leading-34rpx" v-if="info.server_type == 1 || info.server_type == 3">到店服务</text>
|
||||
<text class="ml-20rpx font-400 text-24rpx leading-34rpx" v-if="info.server_type == 2 || info.server_type == 3">上门服务</text>
|
||||
</view>
|
||||
|
||||
<view class="font-400 text-24rpx leading-34rpx text-#818CA9 mt-20rpx">距离您{{ info.distance }}km {{ info.is_time }}
|
||||
</view>
|
||||
|
||||
<!-- <view class="flex items-center justify-between mt-24rpx">
|
||||
<view class="flex items-center">
|
||||
<view class="mr-20rpx">
|
||||
<wd-tag color="#FF5951" bg-color="#FEF1F0" custom-class="!rounded-6rpx !px-16rpx !py-4rpx !h-40rpx !w-144rpx">{{ info.age_range }}后茶艺师</wd-tag>
|
||||
<wd-tag color="#FF5951" bg-color="#FEF1F0"
|
||||
custom-class="!rounded-6rpx !px-16rpx !py-4rpx !h-40rpx !w-144rpx">{{ info.age_range
|
||||
}}后茶艺师</wd-tag>
|
||||
</view>
|
||||
<view class="w-160rpx h-40rpx relative mr-44rpx top-6rpx">
|
||||
<view class="absolute left-0 top-0 h-36rpx flex items-start">
|
||||
<wd-img :src="`${OSS}icon/icon_gold_medal.png`" width="36rpx" height="36rpx"></wd-img>
|
||||
</view>
|
||||
<view>
|
||||
<tea-specialist-level :level="info.level"></tea-specialist-level>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="font-400 text-24rpx leading-34rpx text-#818CA9">距离您{{ info.distance }}km {{ info.is_time }}</view>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
|
||||
<view class="h-2rpx bg-#F6F7F9 mx-30rpx mt-28rpx"></view>
|
||||
@ -144,7 +151,9 @@
|
||||
<view class="flex justify-between items-center mx-88rpx text-center mt-30rpx">
|
||||
<view>
|
||||
<view class="font-400 text-28rpx leading-40rpx text-#606266">性别</view>
|
||||
<view class="font-bold text-30rpx leading-42rpx text-#303133 mt-12rpx">{{ info.sex == 1 ? '男' : '女' }}</view>
|
||||
<view class="font-bold text-30rpx leading-42rpx text-#303133 mt-12rpx">{{ info.sex == 1 ? '男' : '女'
|
||||
}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="w-4rpx h-66rpx bg-#F6F7F9"></view>
|
||||
<view>
|
||||
@ -163,39 +172,30 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 兴趣爱好 -->
|
||||
<!-- 专属圈子 -->
|
||||
<view class="mx-30rpx mt-44rpx">
|
||||
<view class="font-bold text-32rpx leading-44rpx text-#303133">
|
||||
兴趣爱好
|
||||
</view>
|
||||
<!-- <view class="font-bold text-32rpx leading-44rpx text-#303133">
|
||||
专属圈子
|
||||
</view> -->
|
||||
|
||||
<view class="bg-#FBFBFB rounded-8rpx px-28rpx py-20rpx mt-22rpx">
|
||||
<view class="bg-#FBFBFB rounded-8rpx px-28rpx pt-20rpx pb-42rpx mt-22rpx">
|
||||
<view class="flex items-center">
|
||||
<view class="mr-12rpx">
|
||||
<wd-img :src="`${OSS}icon/icon_tea2.png`" width="32rpx" height="32rpx"></wd-img>
|
||||
</view>
|
||||
<view class="font-400 text-26rpx leading-36rpx text-#606266">兴趣爱好</view>
|
||||
<view class="font-400 text-26rpx leading-36rpx text-#606266">专属圈子</view>
|
||||
</view>
|
||||
<view class="mt-20rpx font-400 text-28rpx leading-40rpx text-#303133">
|
||||
{{ info.hobby_introduce }}
|
||||
<view class="flex flex-wrap items-center mt-16rpx">
|
||||
<view class="mr-8rpx bg-[#4C9F44] text-[#fff] px-10rpx leading-34rpx font-400 text-24rpx rounded-4rpx">123</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="h-20rpx bg-#F6F7F9 mt-42rpx mb-40rpx"></view>
|
||||
|
||||
<view class="content-tab">
|
||||
<wd-tabs v-model="tab">
|
||||
<wd-tab title="费用说明"></wd-tab>
|
||||
<wd-tab title="项目介绍"></wd-tab>
|
||||
<wd-tab title="禁忌说明"></wd-tab>
|
||||
<wd-tab title="下单须知"></wd-tab>
|
||||
</wd-tabs>
|
||||
</view>
|
||||
|
||||
<view class="mx-30rpx mt-44rpx">
|
||||
<view class="mx-30rpx mt-40rpx">
|
||||
<!-- 费用说明 -->
|
||||
<view v-if="tab === 0">
|
||||
<view>
|
||||
<view class="font-bold text-32rpx leading-44rpx text-#303133">
|
||||
费用说明
|
||||
</view>
|
||||
@ -211,14 +211,16 @@
|
||||
<view class="mt-22rpx">
|
||||
<view class="flex items-center justify-between">
|
||||
<view class="w-8rpx h-8rpx rounded-8rpx bg-#6A6363 mr-14rpx"></view>
|
||||
<view class="flex-1 flex items-center justify-between font-500 text-26rpx leading-48rpx text-#303133">
|
||||
<view
|
||||
class="flex-1 flex items-center justify-between font-500 text-26rpx leading-48rpx text-#303133">
|
||||
<view>服务费</view>
|
||||
<view>￥{{ info.price }}/小时</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex items-center justify-between mt-20rpx">
|
||||
<view class="w-8rpx h-8rpx rounded-8rpx bg-#6A6363 mr-14rpx"></view>
|
||||
<view class="flex-1 flex items-center justify-between font-500 text-26rpx leading-48rpx text-#303133">
|
||||
<view
|
||||
class="flex-1 flex items-center justify-between font-500 text-26rpx leading-48rpx text-#303133">
|
||||
<view>车马费</view>
|
||||
<view>￥{{ info.mileage_price }}/公里</view>
|
||||
</view>
|
||||
@ -253,82 +255,12 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 项目介绍 -->
|
||||
<view v-if="tab === 1">
|
||||
<view class="font-bold text-32rpx leading-44rpx text-#303133">
|
||||
项目介绍
|
||||
</view>
|
||||
<view class="mt-24rpx">
|
||||
<view>
|
||||
<view class="font-bold text-28rpx leading-48rpx text-[#303133]">自饮七步</view>
|
||||
<view class="mt-24rpx font-500 text-[#303133] text-26rpx leading-48rpx">
|
||||
<view>
|
||||
<text class="mr-20rpx">① 选茶</text>
|
||||
<text class="mr-20rpx">② 择器</text>
|
||||
<text class="mr-20rpx">③ 备水</text>
|
||||
</view>
|
||||
<view>
|
||||
<text class="mr-20rpx">④ 入境</text>
|
||||
<text class="mr-20rpx">⑤ 冲泡</text>
|
||||
<text class="mr-20rpx">⑥ 品茗</text>
|
||||
<text class="mr-20rpx">⑦ 回味</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mt-24rpx">
|
||||
<view class="font-bold text-28rpx leading-48rpx text-[#303133]">茶品介绍</view>
|
||||
<view class="mt-24rpx font-500 text-[#303133] text-26rpx leading-48rpx">
|
||||
<view>
|
||||
<text class="mr-20rpx">1. 产地介绍</text>
|
||||
<text class="mr-20rpx">2. 基础属性</text>
|
||||
<text class="mr-20rpx">3. 外形品相</text>
|
||||
<text class="mr-20rpx">4. 色香表现</text>
|
||||
</view>
|
||||
<view>
|
||||
<text class="mr-20rpx">5.工艺特点</text>
|
||||
<text class="mr-20rpx">6. 滋味口感</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="h-1rpx bg-[#F6F7F9] mt-40rpx mb-24rpx"></view>
|
||||
|
||||
<!-- 禁忌说明 -->
|
||||
<view v-if="tab === 2">
|
||||
<view class="font-bold text-32rpx leading-44rpx text-#303133">
|
||||
禁忌说明
|
||||
</view>
|
||||
<view class="mt-24rpx font-500 text-26rpx leading-48rpx text-[#303133]">
|
||||
<view>绿色正规茶艺师综合服务平台，</view>
|
||||
<view>为确保平台营运的合法合规和避免不必要的纠纷禁止茶师私添加客户微信，</view>
|
||||
<view>禁止茶师私自收款(现金、微信、支付宝红包或转帐等)，</view>
|
||||
<view>禁止茶师私下接受宴请，</view>
|
||||
<view>以及从事除平台项目之外的其它内容和活动。</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 下单须知 -->
|
||||
<view v-if="tab === 3">
|
||||
<view class="font-bold text-32rpx leading-44rpx text-#303133">
|
||||
下单须知
|
||||
</view>
|
||||
<view class="mt-24rpx font-500 text-26rpx leading-48rpx text-[#303133]">
|
||||
茶艺师出发后，客户取消订单，车费不予返还，敬请谅解！
|
||||
</view>
|
||||
<view class="mt-24rpx">
|
||||
<view class="flex items-center">
|
||||
<view class="mr-14rpx">
|
||||
<wd-icon name="info-circle" size="36rpx" color="#707070"></wd-icon>
|
||||
</view>
|
||||
<view class="font-bold text-28rpx leading-48rpx text-#303133">温馨提示</view>
|
||||
</view>
|
||||
|
||||
<view class="flex items-center mt-24rpx">
|
||||
<view class="w-8rpx h-8rpx rounded-8rpx bg-#6A6363 mr-12rpx"></view>
|
||||
<view class="font-500 text-26rpx leading-48rpx text-#F29747">茶艺师需提前一小时预约，两小时起订</view>
|
||||
</view>
|
||||
<view class="w-8rpx h-8rpx bg-[#6A6363] rounded-full mr-12rpx"></view>
|
||||
<view class="font-500 text-26rpx leading-48rpx text-[#F29747]">茶艺师需提前一小时预约，两小时起订</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -336,8 +268,11 @@
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<view>
|
||||
<view v-if="!isReserve" class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center text-[#303133] mt-24rpx pt-36rpx pb-28rpx">
|
||||
<view class="w-630rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-#fff" @click="Detail.handleReserveTeaspecialist">立即邀约</view>
|
||||
<view v-if="!isReserve"
|
||||
class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center text-[#303133] mt-24rpx pt-36rpx pb-28rpx">
|
||||
<view class="w-630rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-#fff"
|
||||
@click="Detail.handleReserveTeaspecialist">
|
||||
立即预定</view>
|
||||
</view>
|
||||
|
||||
|
||||
@ -393,6 +328,7 @@
|
||||
hobby_introduce: '', // 兴趣爱好介绍
|
||||
price: 0, // 服务费
|
||||
mileage_price: 0, // 车马费
|
||||
server_type: 0, // 服务方式 1到店 2上门 3两者都有
|
||||
})
|
||||
const latitude = ref<number>(0) // 纬度
|
||||
const longitude = ref<number>(0) // 经度
|
||||
|
||||
Reference in New Issue
Block a user