|
|
|
@ -1,320 +1,254 @@ |
|
|
|
<template> |
|
|
|
<view class="page__view"> |
|
|
|
|
|
|
|
<navbar title="订单详情" leftClick @leftClick="$utils.navigateBack" color="#191919" bgColor="#FFFFFF" /> |
|
|
|
<navbar title="订单详情" leftClick @leftClick="$utils.navigateBack" /> |
|
|
|
|
|
|
|
<view class="main"> |
|
|
|
|
|
|
|
<template v-if="orderData"> |
|
|
|
<productCard :data="detail"></productCard> |
|
|
|
|
|
|
|
<view class="card detail"> |
|
|
|
<view class="flex card-top"> |
|
|
|
<view class="title">订单详情</view> |
|
|
|
<view :class="['flex', 'status', `status-${status}`]">{{ statusDesc }}</view> |
|
|
|
</view> |
|
|
|
<view class="card-main"> |
|
|
|
<view class="flex product" v-for="item in orderData.appletOrderProductList" :key="item.id"> |
|
|
|
<image class="img" :src="getCoverImg(item.image)" mode="scaleToFill"></image> |
|
|
|
<view class="info"> |
|
|
|
<view class="row">{{ item.productName }}</view> |
|
|
|
<view class="flex row"> |
|
|
|
<view class="row-label">产品类型：</view> |
|
|
|
<!-- todo: check key --> |
|
|
|
<view class="row-content">{{ getTypeDesc(item.type) || '--' }}</view> |
|
|
|
</view> |
|
|
|
<view class="flex row"> |
|
|
|
<view class="row-label">产品内容：</view> |
|
|
|
<!-- todo: check key --> |
|
|
|
<view class="row-content">{{ item.content || '--' }}</view> |
|
|
|
</view> |
|
|
|
<view class="flex price"> |
|
|
|
<text class="price-label">价格：</text> |
|
|
|
<text class="price-unit">¥</text><text class="price-value">{{ item.price }}</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="flex row card-bottom"> |
|
|
|
<view class="row-label">总价格</view> |
|
|
|
<view class="flex row-content price">¥<text class="price-value">{{ orderData.orderAmount }}</text></view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view v-if="orderData.process.length" class="card service"> |
|
|
|
<view class="flex card-top"> |
|
|
|
<view class="title">售后信息</view> |
|
|
|
</view> |
|
|
|
<view class="card-main"> |
|
|
|
<uv-steps |
|
|
|
current="0" |
|
|
|
direction="column" |
|
|
|
dot |
|
|
|
activeColor="#10A934" |
|
|
|
inactiveColor="#C6C6C6" |
|
|
|
> |
|
|
|
<uv-steps-item |
|
|
|
v-for="(item, index) in orderData.process" |
|
|
|
:key="item.id" |
|
|
|
> |
|
|
|
<template #title> |
|
|
|
<view class="flex step-header"> |
|
|
|
<view :class="['step-title', index == 0 ? 'highlight' : '']">{{ item.title }}</view> |
|
|
|
<view class="step-time">{{ item.createTime }}</view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
<template #desc> |
|
|
|
<view class="step-desc">{{ item.text }}</view> |
|
|
|
</template> |
|
|
|
</uv-steps-item> |
|
|
|
</uv-steps> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="card info"> |
|
|
|
<view class="flex card-top"> |
|
|
|
<view class="title">订单信息</view> |
|
|
|
</view> |
|
|
|
<view class="card-main"> |
|
|
|
<view class="flex row"> |
|
|
|
<view class="row-label">订单编号</view> |
|
|
|
<view class="row-content">{{ orderData.orderNo }}</view> |
|
|
|
</view> |
|
|
|
<view class="flex row"> |
|
|
|
<view class="row-label">下单时间</view> |
|
|
|
<view class="row-content">{{ $dayjs(orderData.orderDate).format('YYYY-MM-DD HH:mm') }}</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
</template> |
|
|
|
<orderInfoView :data="detail"></orderInfoView> |
|
|
|
|
|
|
|
<view class="notice"> |
|
|
|
<view class="notice-header">下单须知</view> |
|
|
|
<view class="notice-content"> |
|
|
|
<!-- todo: check key --> |
|
|
|
<uv-parse :content="configList['order_instructions']"></uv-parse> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="flex bottom" v-if="[0, 1, 2, 3, 4].includes(status)"> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="bottom"> |
|
|
|
<view class="agreement"> |
|
|
|
<uv-checkbox-group |
|
|
|
v-model="checkboxValue" |
|
|
|
shape="circle" |
|
|
|
> |
|
|
|
<uv-checkbox |
|
|
|
size="40rpx" |
|
|
|
icon-size="40rpx" |
|
|
|
activeColor="#00A9FF" |
|
|
|
:name="1" |
|
|
|
></uv-checkbox> |
|
|
|
</uv-checkbox-group> |
|
|
|
<view class="desc"> |
|
|
|
我已阅读并同意 |
|
|
|
<!-- todo: 替换配置项key --> |
|
|
|
<text class="highlight" @click="$refs.modal.open('config_agreement', '退订政策')">《退订政策》</text> |
|
|
|
<!-- todo: 替换配置项key --> |
|
|
|
<text class="highlight" @click="$refs.modal.open('config_privacy', '合同范本')">《合同范本》</text> |
|
|
|
<!-- todo: 替换配置项key --> |
|
|
|
<text class="highlight" @click="$refs.modal.open('config_privacy', '预订须知')">《预订须知》</text> |
|
|
|
<!-- todo: 替换配置项key --> |
|
|
|
<text class="highlight" @click="$refs.modal.open('config_privacy', '安全提示')">《安全提示》</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="flex bar"> |
|
|
|
<button plain class="flex flex-column btn btn-service" open-type="contact"> |
|
|
|
<image class="btn-service-icon" src="@/pages_order/static/order/icon-service.png" mode="widthFix"></image> |
|
|
|
<button plain class="flex flex-column btn btn-simple" open-type="contact"> |
|
|
|
<image class="icon" src="@/pages_order/static/product/icon-service.png" mode="widthFix"></image> |
|
|
|
<view>联系客服</view> |
|
|
|
</button> |
|
|
|
<view class="flex cols"> |
|
|
|
<!-- 待支付 --> |
|
|
|
<template v-if="status == 0"> |
|
|
|
<view class="flex col price"> |
|
|
|
<view class="price-label">合计</view> |
|
|
|
<text class="price-unit">¥</text><text class="price-value">{{ orderData.orderAmount }}</text> |
|
|
|
</view> |
|
|
|
<button class="flex col btn btn-primary" @click="onPay">立即支付</button> |
|
|
|
</template> |
|
|
|
<!-- 待发货 --> |
|
|
|
<template v-else-if="status == 1"> |
|
|
|
<button class="flex col btn" @click="onApplyService">申请售后</button> |
|
|
|
<!-- 自采检测 --> |
|
|
|
<template v-if="detectProduct && detectProduct.subscribeType == 0"> |
|
|
|
<button class="flex col btn btn-primary" @click="onDetectModify">修改</button> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
<!-- 待收货 --> |
|
|
|
<template v-else-if="status == 2"> |
|
|
|
<button class="flex col btn" @click="onApplyService">申请售后</button> |
|
|
|
<!-- 检测 subscribeType: 0自采，1上门，2到店，3已取消 --> |
|
|
|
<template v-if="detectProduct"> |
|
|
|
<!-- 自采检测 --> |
|
|
|
<template v-if="detectProduct.subscribeType == 0"> |
|
|
|
<button class="flex col btn btn-primary" @click="onDetectSendBack">线上回寄试剂盒</button> |
|
|
|
</template> |
|
|
|
<template v-else> |
|
|
|
<button class="flex col btn btn-primary" @click="onDetectBook">检测预约</button> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
<!-- 其他商品 --> |
|
|
|
<template v-else> |
|
|
|
<button class="flex col btn btn-primary" @click="onConfirmReceipt">确认收货</button> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
<!-- 待评价 --> |
|
|
|
<template v-else-if="status == 3"> |
|
|
|
<button class="flex col btn" @click="onApplyService">申请售后</button> |
|
|
|
<button class="flex col btn btn-primary" @click="onComment">立即评价</button> |
|
|
|
</template> |
|
|
|
<!-- 已完成 --> |
|
|
|
<template v-else-if="status == 4"> |
|
|
|
<button class="flex col btn" @click="onApplyService">申请售后</button> |
|
|
|
</template> |
|
|
|
</view> |
|
|
|
<!-- 已支付 --> |
|
|
|
<template v-if="detail.status == 1"> |
|
|
|
<button class="col btn" @click="onContactMentor">联系导师</button> |
|
|
|
</template> |
|
|
|
<!-- 已完成 --> |
|
|
|
<template v-else-if="detail.status == 2"> |
|
|
|
<button class="col btn" @click="onApplyService">申请售后</button> |
|
|
|
</template> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<contactMentorPopup ref="contactMentorPopup"></contactMentorPopup> |
|
|
|
<agreementModal ref="modal" @confirm="onConfirmAgreement"></agreementModal> |
|
|
|
|
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { mapState } from 'vuex' |
|
|
|
|
|
|
|
// 订单状态 0待支付 1待发货 2待收货 3待评价 4已完成 |
|
|
|
const STATUS_AND_DESC_MAPPING = { |
|
|
|
0: '待支付', |
|
|
|
1: '待发货', |
|
|
|
2: '待收货', |
|
|
|
3: '待评价', |
|
|
|
4: '已完成', |
|
|
|
5: '售后', |
|
|
|
} |
|
|
|
|
|
|
|
// 产品类型（0营养剂，1预约，2课程） |
|
|
|
const TYPE_AND_DESC_MAPPING = { |
|
|
|
0: '营养剂', |
|
|
|
1: '检测', |
|
|
|
2: '课程', |
|
|
|
} |
|
|
|
import productCard from '@/pages_order/order/components/productCard.vue' |
|
|
|
import orderInfoView from '@/pages_order/order/components/orderInfoView.vue' |
|
|
|
import contactMentorPopup from '@/pages_order/order/components/contactMentorPopup.vue' |
|
|
|
import agreementModal from '@/pages_order/components/agreementModal.vue' |
|
|
|
|
|
|
|
export default { |
|
|
|
components: { |
|
|
|
productCard, |
|
|
|
orderInfoView, |
|
|
|
contactMentorPopup, |
|
|
|
agreementModal, |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
id: null, |
|
|
|
addressData: null, |
|
|
|
orderData: null, |
|
|
|
detail: {}, |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
status() { |
|
|
|
const { orderStatus, afterSales } = this.orderData || {} |
|
|
|
...mapState(['configList', 'userInfo', 'orderInfo']), |
|
|
|
productPackage() { |
|
|
|
const { time, product } = this.detail |
|
|
|
const { timeOptions } = product || {} |
|
|
|
|
|
|
|
if (afterSales) { |
|
|
|
return 5 |
|
|
|
} |
|
|
|
|
|
|
|
return orderStatus |
|
|
|
}, |
|
|
|
statusDesc() { |
|
|
|
return STATUS_AND_DESC_MAPPING[this.status] |
|
|
|
return timeOptions?.find?.(item => item.id === time) || {} |
|
|
|
}, |
|
|
|
detectProduct() { |
|
|
|
const { appletOrderProductList } = this.orderData || {} |
|
|
|
totalPrice() { |
|
|
|
const { adults, teenager, child, coupon, couponInfo } = this.detail |
|
|
|
|
|
|
|
if (appletOrderProductList?.length == 1 && appletOrderProductList?.[0]?.type == 1) { // type: 产品类型（0营养剂，1预约，2课程） |
|
|
|
return appletOrderProductList[0] |
|
|
|
} |
|
|
|
|
|
|
|
return null |
|
|
|
}, |
|
|
|
}, |
|
|
|
onShow() { |
|
|
|
console.log('onShow') |
|
|
|
const { adultsPrice, teenagerPrice, childPrice } = this.productPackage |
|
|
|
|
|
|
|
if (!this.id) { |
|
|
|
return |
|
|
|
} |
|
|
|
let total = 0 |
|
|
|
|
|
|
|
adults && (total += adults * (adultsPrice || 0)) |
|
|
|
teenager && (total += teenager * (teenagerPrice || 0)) |
|
|
|
child && (total += child * (childPrice || 0)) |
|
|
|
|
|
|
|
this.getData() |
|
|
|
coupon && (total -= (couponInfo?.price || 0)) |
|
|
|
|
|
|
|
return total |
|
|
|
}, |
|
|
|
}, |
|
|
|
onLoad(arg) { |
|
|
|
this.id = arg.id |
|
|
|
|
|
|
|
this.getData() |
|
|
|
onLoad() { |
|
|
|
// console.log('orderInfo', this.orderInfo) |
|
|
|
// this.detail = this.orderInfo |
|
|
|
// todo: check fetch by id? |
|
|
|
this.fetchOrderDetail() |
|
|
|
}, |
|
|
|
onPullDownRefresh() { |
|
|
|
this.getData() |
|
|
|
this.fetchOrderDetail() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
async getData() { |
|
|
|
try { |
|
|
|
const result = await this.$fetch('detailOrder', { id: this.id }) |
|
|
|
|
|
|
|
const { |
|
|
|
customerName, |
|
|
|
customerPhone, |
|
|
|
deliveryAddressDetail, |
|
|
|
...orderData |
|
|
|
} = result |
|
|
|
|
|
|
|
this.addressData = { |
|
|
|
name: customerName, |
|
|
|
phone: customerPhone, |
|
|
|
detail: deliveryAddressDetail, |
|
|
|
} |
|
|
|
|
|
|
|
this.orderData = orderData |
|
|
|
|
|
|
|
} catch (err) { |
|
|
|
async fetchOrderDetail() { |
|
|
|
try { |
|
|
|
|
|
|
|
this.detail = { |
|
|
|
product: { |
|
|
|
id: '001', |
|
|
|
image: new Array(6).fill('/static/image/temp-20.png').join(','), |
|
|
|
name: '新疆天山行7/9日丨醉美伊犁&吐鲁番双套餐', |
|
|
|
desc: '每天车程4小时内，含一程高铁丨喀拉峻草原、夏塔古道、昭苏天马、赛里木湖、昭苏油菜花、伊犁薰衣草丨吐鲁番坎儿井&火焰山', |
|
|
|
tags: ['坝上草原', '自然探索', '户外探索', '亲子游玩'], |
|
|
|
currentPrice: 688.99, |
|
|
|
originalPrice: 1200, |
|
|
|
registered: 4168, |
|
|
|
timeOptions: [ |
|
|
|
{ |
|
|
|
id: '0011', |
|
|
|
startDate: '08/25', |
|
|
|
endDate: '09/01', |
|
|
|
currentPrice: 1200.99, |
|
|
|
originalPrice: 2300, |
|
|
|
adultsPrice: 2400, |
|
|
|
teenagerPrice: 1800, |
|
|
|
childPrice: 1200.99, |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '0012', |
|
|
|
startDate: '09/02', |
|
|
|
endDate: '09/11', |
|
|
|
currentPrice: 1200.99, |
|
|
|
originalPrice: 2300, |
|
|
|
adultsPrice: 2400, |
|
|
|
teenagerPrice: 1800, |
|
|
|
childPrice: 1200.99, |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '0013', |
|
|
|
startDate: '09/12', |
|
|
|
endDate: '09/19', |
|
|
|
currentPrice: 1200.99, |
|
|
|
originalPrice: 2300, |
|
|
|
adultsPrice: 2400, |
|
|
|
teenagerPrice: 1800, |
|
|
|
childPrice: 1200.99, |
|
|
|
}, |
|
|
|
], |
|
|
|
itineraryHighlights: ` |
|
|
|
<p> |
|
|
|
<img style="width: 100%;" src="/static/image/temp-31.png" mode="widthFix"/> |
|
|
|
<img style="width: 100%;" src="/static/image/temp-32.png" mode="widthFix"/> |
|
|
|
<img style="width: 100%;" src="/static/image/temp-33.png" mode="widthFix"/> |
|
|
|
<img style="width: 100%;" src="/static/image/temp-34.png" mode="widthFix"/> |
|
|
|
<img style="width: 100%;" src="/static/image/temp-35.png" mode="widthFix"/> |
|
|
|
</p> |
|
|
|
`, |
|
|
|
courseObjectives: ` |
|
|
|
<p style="font-size: 36rpx;"> |
|
|
|
课程目标 |
|
|
|
<p> |
|
|
|
`, |
|
|
|
itineraryDetail: ` |
|
|
|
<p style="font-size: 36rpx;"> |
|
|
|
详细行程 |
|
|
|
<p> |
|
|
|
`, |
|
|
|
}, |
|
|
|
time: "0012", |
|
|
|
adults: 2, |
|
|
|
teenager: 1, |
|
|
|
child: 1, |
|
|
|
members: [ |
|
|
|
{ |
|
|
|
id: "001", |
|
|
|
idNo: "430223********9999", |
|
|
|
isDefault: false, |
|
|
|
isSelected: true, |
|
|
|
name: "李梓发", |
|
|
|
type: 0, |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: "002", |
|
|
|
idNo: "430223********9999", |
|
|
|
isDefault: false, |
|
|
|
isSelected: true, |
|
|
|
name: "吴彦谦", |
|
|
|
type: 0, |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: "003", |
|
|
|
idNo: "430223********9999", |
|
|
|
isDefault: false, |
|
|
|
isSelected: true, |
|
|
|
name: "冯云", |
|
|
|
type: 1, |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: "004", |
|
|
|
idNo: "430223********9999", |
|
|
|
isDefault: false, |
|
|
|
isSelected: true, |
|
|
|
name: "冯思钗", |
|
|
|
type: 2, |
|
|
|
}, |
|
|
|
], |
|
|
|
coupon: "001", |
|
|
|
discount: 88, |
|
|
|
invoice: null, |
|
|
|
name: "测试", |
|
|
|
phone: "13345678910", |
|
|
|
orderNo: 'BH872381728321983929', |
|
|
|
createTime: '2025-04-28 08:14', |
|
|
|
mentorPhone: '0731-599327-8899', |
|
|
|
status: 1, |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
console.log('orderInfo', this.detail) |
|
|
|
|
|
|
|
uni.stopPullDownRefresh() |
|
|
|
}, |
|
|
|
getTypeDesc(type) { |
|
|
|
return TYPE_AND_DESC_MAPPING[type] |
|
|
|
}, |
|
|
|
getCoverImg(image) { |
|
|
|
return image?.split?.(',')?.[0] || '' |
|
|
|
}, |
|
|
|
onPay() { |
|
|
|
|
|
|
|
const { |
|
|
|
id, |
|
|
|
title, |
|
|
|
orderAmount |
|
|
|
} = this.orderData |
|
|
|
// todo: check fetch by id? |
|
|
|
// this.detail = await this.$fetch('queryOrderById', { id: this.id }) |
|
|
|
|
|
|
|
|
|
|
|
const obj = { |
|
|
|
id, |
|
|
|
title, |
|
|
|
orderAmount, |
|
|
|
} |
|
|
|
} catch (err) { |
|
|
|
|
|
|
|
this.$refs.payPopup.open(obj) |
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
async onConfirmReceipt() { |
|
|
|
try { |
|
|
|
|
|
|
|
await this.$fetch('confirmOrder', { id: this.orderData.id }) |
|
|
|
|
|
|
|
uni.showToast({ |
|
|
|
icon: 'success', |
|
|
|
title: '确认收货成功', |
|
|
|
}); |
|
|
|
|
|
|
|
this.getData() |
|
|
|
|
|
|
|
} catch (err) { |
|
|
|
|
|
|
|
} |
|
|
|
}, |
|
|
|
onComment() { |
|
|
|
this.$utils.navigateTo(`/pages_order/comment/commentWrite?orderId=${this.orderData.id}`) |
|
|
|
uni.stopPullDownRefresh() |
|
|
|
}, |
|
|
|
onApplyService() { |
|
|
|
|
|
|
|
console.log('orderData', this.orderData) |
|
|
|
|
|
|
|
const { |
|
|
|
id, |
|
|
|
appletOrderProductList, |
|
|
|
} = this.orderData |
|
|
|
|
|
|
|
|
|
|
|
const obj = { |
|
|
|
id, |
|
|
|
appletOrderProductList: appletOrderProductList.map(item => ({ ...item, statusDesc: this.statusDesc })), |
|
|
|
} |
|
|
|
|
|
|
|
this.$refs.serviceSelectPopup.open(obj) |
|
|
|
}, |
|
|
|
onDetectModify() { |
|
|
|
// todo |
|
|
|
}, |
|
|
|
onDetectSendBack() { |
|
|
|
// todo |
|
|
|
}, |
|
|
|
onDetectBook() { |
|
|
|
// todo |
|
|
|
onContactMentor() { |
|
|
|
this.$refs.contactMentorPopup.open(this.detail.mentorPhone) |
|
|
|
}, |
|
|
|
}, |
|
|
|
} |
|
|
|
@ -322,331 +256,52 @@ |
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
|
|
|
|
.page__view { |
|
|
|
width: 100vw; |
|
|
|
min-height: 100vh; |
|
|
|
background-color: $uni-bg-color; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
/deep/ .nav-bar__view { |
|
|
|
position: fixed; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.main { |
|
|
|
padding: calc(var(--status-bar-height) + 144rpx) 32rpx 224rpx 32rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.address { |
|
|
|
padding: 24rpx 32rpx; |
|
|
|
background: #FFFFFF; |
|
|
|
border-radius: 24rpx; |
|
|
|
justify-content: flex-start; |
|
|
|
} |
|
|
|
|
|
|
|
.card { |
|
|
|
margin-top: 40rpx; |
|
|
|
padding: 32rpx; |
|
|
|
background: #FAFAFF; |
|
|
|
border: 2rpx solid #FFFFFF; |
|
|
|
border-radius: 32rpx; |
|
|
|
|
|
|
|
&-top { |
|
|
|
margin-bottom: 32rpx; |
|
|
|
justify-content: space-between; |
|
|
|
|
|
|
|
.title { |
|
|
|
font-family: PingFang SC; |
|
|
|
font-weight: 500; |
|
|
|
font-size: 36rpx; |
|
|
|
line-height: 1.4; |
|
|
|
color: #252545; |
|
|
|
} |
|
|
|
|
|
|
|
.status { |
|
|
|
display: inline-flex; |
|
|
|
min-width: 120rpx; |
|
|
|
padding: 6rpx 0; |
|
|
|
box-sizing: border-box; |
|
|
|
font-family: PingFang SC; |
|
|
|
font-weight: 400; |
|
|
|
font-size: 24rpx; |
|
|
|
line-height: 1.4; |
|
|
|
color: #252545; |
|
|
|
background: #F3F3F3; |
|
|
|
border-radius: 12rpx; |
|
|
|
|
|
|
|
&-0 { |
|
|
|
color: #FF860E; |
|
|
|
background: #FFF4E9; |
|
|
|
} |
|
|
|
|
|
|
|
&-1 { |
|
|
|
color: #2799E0; |
|
|
|
background: #EEF7FD; |
|
|
|
} |
|
|
|
|
|
|
|
&-2 { |
|
|
|
color: #7D27E0; |
|
|
|
background: #F5EEFD; |
|
|
|
} |
|
|
|
|
|
|
|
&-5 { |
|
|
|
color: #E53C29; |
|
|
|
background: #FDE7E5; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.row { |
|
|
|
justify-content: space-between; |
|
|
|
font-family: PingFang SC; |
|
|
|
font-weight: 400; |
|
|
|
font-size: 28rpx; |
|
|
|
line-height: 1.4; |
|
|
|
|
|
|
|
&-label { |
|
|
|
flex: none; |
|
|
|
color: #8B8B8B; |
|
|
|
} |
|
|
|
|
|
|
|
&-content { |
|
|
|
color: #393939; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
&.detail { |
|
|
|
|
|
|
|
.product { |
|
|
|
margin-bottom: 32rpx; |
|
|
|
column-gap: 24rpx; |
|
|
|
|
|
|
|
.img { |
|
|
|
flex: none; |
|
|
|
width: 120rpx; |
|
|
|
height: 120rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.info { |
|
|
|
flex: 1; |
|
|
|
padding: 24rpx 32rpx; |
|
|
|
background: #FFFFFF; |
|
|
|
border-radius: 32rpx; |
|
|
|
@import '../styles/style.scss'; |
|
|
|
|
|
|
|
.row { |
|
|
|
margin-bottom: 16rpx; |
|
|
|
justify-content: flex-start; |
|
|
|
column-gap: 4rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.price { |
|
|
|
justify-content: flex-start; |
|
|
|
column-gap: 8rpx; |
|
|
|
font-family: PingFang SC; |
|
|
|
font-weight: 500; |
|
|
|
line-height: 1.4; |
|
|
|
|
|
|
|
&-label { |
|
|
|
font-weight: 400; |
|
|
|
font-size: 26rpx; |
|
|
|
color: #8B8B8B; |
|
|
|
} |
|
|
|
|
|
|
|
&-unit { |
|
|
|
font-size: 24rpx; |
|
|
|
color: #7451DE; |
|
|
|
} |
|
|
|
|
|
|
|
&-value { |
|
|
|
font-size: 32rpx; |
|
|
|
color: #7451DE; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.card-bottom { |
|
|
|
.price { |
|
|
|
column-gap: 8rpx; |
|
|
|
font-family: PingFang SC; |
|
|
|
font-weight: 500; |
|
|
|
.bottom { |
|
|
|
.bar { |
|
|
|
.price { |
|
|
|
justify-content: flex-start; |
|
|
|
column-gap: 8rpx; |
|
|
|
|
|
|
|
&-label { |
|
|
|
font-size: 24rpx; |
|
|
|
line-height: 1.4; |
|
|
|
color: #7451DE; |
|
|
|
|
|
|
|
&-value { |
|
|
|
font-size: 32rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
&.info { |
|
|
|
.row + .row { |
|
|
|
margin-top: 32rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
&.service { |
|
|
|
|
|
|
|
.step { |
|
|
|
|
|
|
|
&-header { |
|
|
|
justify-content: flex-start; |
|
|
|
column-gap: 24rpx; |
|
|
|
padding-left: 24rpx; |
|
|
|
color: #626262; |
|
|
|
} |
|
|
|
|
|
|
|
&-title { |
|
|
|
font-family: PingFang SC; |
|
|
|
font-weight: 400; |
|
|
|
font-size: 30rpx; |
|
|
|
line-height: 1.4; |
|
|
|
color: #000000; |
|
|
|
|
|
|
|
&.highlight { |
|
|
|
font-weight: 500; |
|
|
|
color: #10A934; |
|
|
|
} |
|
|
|
&-unit, |
|
|
|
&-value { |
|
|
|
font-weight: 500; |
|
|
|
color: #FF4800; |
|
|
|
} |
|
|
|
|
|
|
|
&-time { |
|
|
|
font-family: PingFang SC; |
|
|
|
font-weight: 400; |
|
|
|
&-unit { |
|
|
|
font-size: 24rpx; |
|
|
|
line-height: 1.4; |
|
|
|
color: #8B8B8B; |
|
|
|
} |
|
|
|
|
|
|
|
&-desc { |
|
|
|
padding: 16rpx 0 16rpx 24rpx; |
|
|
|
font-family: PingFang SC; |
|
|
|
font-weight: 400; |
|
|
|
font-size: 24rpx; |
|
|
|
line-height: 1.4; |
|
|
|
color: #777777; |
|
|
|
&-value { |
|
|
|
font-size: 40rpx; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.notice { |
|
|
|
margin-top: 40rpx; |
|
|
|
font-family: PingFang SC; |
|
|
|
font-weight: 400; |
|
|
|
|
|
|
|
&-header { |
|
|
|
font-size: 28rpx; |
|
|
|
line-height: 1.4; |
|
|
|
color: #393939; |
|
|
|
} |
|
|
|
|
|
|
|
&-content { |
|
|
|
margin-top: 24rpx; |
|
|
|
font-size: 24rpx; |
|
|
|
line-height: 1.4; |
|
|
|
color: #BABABA; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.bottom { |
|
|
|
position: fixed; |
|
|
|
left: 0; |
|
|
|
bottom: 0; |
|
|
|
z-index: 2; |
|
|
|
|
|
|
|
width: 100vw; |
|
|
|
// height: 200rpx; |
|
|
|
padding: 24rpx 40rpx; |
|
|
|
padding-bottom: calc(env(safe-area-inset-bottom) + 24rpx); |
|
|
|
background: #FFFFFF; |
|
|
|
box-sizing: border-box; |
|
|
|
align-items: flex-start; |
|
|
|
|
|
|
|
.bar { |
|
|
|
width: 100%; |
|
|
|
column-gap: 32rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.btn { |
|
|
|
background: transparent; |
|
|
|
border: none; |
|
|
|
|
|
|
|
&-service { |
|
|
|
.btn-simple { |
|
|
|
flex: none; |
|
|
|
row-gap: 4rpx; |
|
|
|
width: auto; |
|
|
|
font-family: PingFang SC; |
|
|
|
font-weight: 400; |
|
|
|
font-size: 22rpx; |
|
|
|
line-height: 1.1; |
|
|
|
color: #999999; |
|
|
|
border: none; |
|
|
|
border-radius: unset; |
|
|
|
|
|
|
|
&-icon { |
|
|
|
.icon { |
|
|
|
width: 52rpx; |
|
|
|
height: auto; |
|
|
|
margin-bottom: 4rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.cols { |
|
|
|
flex: 1; |
|
|
|
column-gap: 32rpx; |
|
|
|
|
|
|
|
.col { |
|
|
|
flex: 1; |
|
|
|
} |
|
|
|
|
|
|
|
.btn { |
|
|
|
padding: 14rpx 0; |
|
|
|
box-sizing: border-box; |
|
|
|
font-family: PingFang SC; |
|
|
|
font-weight: 500; |
|
|
|
font-size: 36rpx; |
|
|
|
line-height: 1.4; |
|
|
|
color: #252545; |
|
|
|
border: 2rpx solid #252545; |
|
|
|
border-radius: 41rpx; |
|
|
|
|
|
|
|
&-primary { |
|
|
|
padding: 16rpx 0; |
|
|
|
color: #FFFFFF; |
|
|
|
background-image: linear-gradient(to right, #4B348F, #845CFA); |
|
|
|
border: none; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.price { |
|
|
|
column-gap: 8rpx; |
|
|
|
font-family: PingFang SC; |
|
|
|
font-weight: 400; |
|
|
|
font-size: 24rpx; |
|
|
|
line-height: 1.4; |
|
|
|
|
|
|
|
&-label { |
|
|
|
color: #626262; |
|
|
|
} |
|
|
|
|
|
|
|
&-unit, |
|
|
|
&-value { |
|
|
|
font-weight: 500; |
|
|
|
color: #7451DE; |
|
|
|
|
|
|
|
.highlight { |
|
|
|
font-size: 40rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
&-value { |
|
|
|
font-size: 40rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
</style> |
