738 lines
24 KiB
Vue
738 lines
24 KiB
Vue
<template>
|
||
<view class="content">
|
||
<myNav title="订单详情" bgColor="#fff" titleColor="#614D49" :backIcon="true" :backHome="false" :flex="false"></myNav>
|
||
|
||
<view
|
||
style="width: 100%;display: flex;flex-direction: column;align-items: center;overflow-y: auto;padding-bottom: 80rpx;">
|
||
<view class="card" style="margin-top: 40rpx;">
|
||
<view
|
||
style="width: 670rpx;height: 60rpx;border-radius: 10rpx 32rpx 0rpx 0rpx;background: linear-gradient(180deg, #FFE7D9 0%, rgba(255, 255, 255, 0) 98%);">
|
||
|
||
</view>
|
||
<image src="/static/n-zx/order-status-icon.png" style="width: 60rpx;height: 60rpx;align-self: center;"
|
||
v-if="orderDetail.status==0">
|
||
</image>
|
||
<text style="font-size: 36rpx;color:#F37155 ;font-family: SourceHanSansBold;align-self: center;"
|
||
v-if="orderDetail.status==0">待支付
|
||
</text>
|
||
<text style="font-size: 36rpx;color:#F37155 ;font-family: SourceHanSansBold;align-self: center;"
|
||
v-if="orderDetail.status== 1 ">待咨询
|
||
</text>
|
||
<text style="font-size: 36rpx;color:#F37155 ;font-family: SourceHanSansBold;align-self: center;"
|
||
v-if="orderDetail.status== 4 ">待确认
|
||
</text>
|
||
<text style="font-size: 36rpx;color:#F37155 ;font-family: SourceHanSansBold;align-self: center;"
|
||
v-if="orderDetail.status== 5 ">已完成
|
||
</text>
|
||
<text style="font-size: 36rpx;color:#00B637 ;font-family: SourceHanSansBold;align-self: center;"
|
||
v-if="orderDetail.status== 6 ">申请退款中
|
||
</text>
|
||
<text style="font-size: 36rpx;color:#00B637 ;font-family: SourceHanSansBold;align-self: center;"
|
||
v-if="orderDetail.status== 7 ">退款中
|
||
</text>
|
||
<text style="font-size: 36rpx;color:#00B637 ;font-family: SourceHanSansBold;align-self: center;"
|
||
v-if="orderDetail.status== 8 ">已退款
|
||
</text>
|
||
<text style="font-size: 36rpx;color:#00B637 ;font-family: SourceHanSansBold;align-self: center;"
|
||
v-if="orderDetail.status== 9 ">交易关闭
|
||
</text>
|
||
|
||
<view style="align-self: center;margin-top: 20rpx;" v-if="orderDetail.status==0">
|
||
<text class="order-text" style="color: #186BF9;">
|
||
{{ orderDetail.validTime.split('T').join(' ') }}</text>
|
||
<text class="order-text">前未支付，订单将自动取消</text>
|
||
</view>
|
||
<view style="align-self: center;margin-top: 20rpx;" v-if="orderDetail.status==1">
|
||
<text class="order-text" @click="toConsultAppointment">支付成功，等待执行，相关详情请查看
|
||
<text style="color: #186BF9;">《预约须知》</text>
|
||
</text>
|
||
</view>
|
||
<view style="align-self: center;margin-top: 20rpx;" v-if="orderDetail.status==4">
|
||
<text class="order-text">等待客服确认本次咨询</text>
|
||
</view>
|
||
<view style="align-self: center;margin-top: 20rpx;" v-if="orderDetail.status==5">
|
||
<text class="order-text">订单已完成</text>
|
||
</view>
|
||
<view style="align-self: center;margin-top: 20rpx;" v-if="orderDetail.status==6">
|
||
<text class="order-text">申请退款中，请耐心等待</text>
|
||
</view>
|
||
<view style="align-self: center;margin-top: 20rpx;" v-if="orderDetail.status==7">
|
||
<text class="order-text">退款已受理，将会在1个工作日内返回到支付账户</text>
|
||
</view>
|
||
<view style="align-self: center;margin-top: 20rpx;" v-if="orderDetail.status==8">
|
||
<text class="order-text">退款金额已成功返回到支付账户</text>
|
||
</view>
|
||
<view style="align-self: center;margin-top: 20rpx;" v-if="orderDetail.status==9">
|
||
<text class="order-text" v-if="orderDetail.cancelFlag == 1">支付超时,已关闭交易</text>
|
||
<text class="order-text" v-if="orderDetail.cancelFlag == 2">订单已取消</text>
|
||
</view>
|
||
|
||
|
||
<view style="padding-left: 40rpx;padding-right: 40rpx;padding-bottom: 40rpx;
|
||
width: 670rpx;box-sizing: border-box;
|
||
margin-top: 98rpx; display: flex;flex-direction: column;">
|
||
<view class="psychic-detail-row">
|
||
<text class="psychic-detail-text">咨询方式</text>
|
||
<view style="display: flex; align-items: center;">
|
||
<view v-if="orderDetail.consultationMethod == 'video' " style="width: 124rpx;height: 48rpx;border-radius: 80rpx;
|
||
box-sizing: border-box;border: 1px solid #F97559;display: flex;justify-content: center;align-items: center;">
|
||
<image src="/static/n-zx/video.png" style="width: 25.6rpx;height: 19.2rpx;"></image>
|
||
<text style="font-size: 24rpx;color: #F97559;margin-left: 8rpx;">视频</text>
|
||
</view>
|
||
|
||
<view v-if="orderDetail.consultationMethod == 'face_to_face'" style="width: 124rpx;height: 48rpx;border-radius: 80rpx;margin-left: 20rpx;
|
||
box-sizing: border-box;border: 1px solid #F97559;display: flex;justify-content: center;align-items: center;">
|
||
<image src="/static/n-zx/face-to-face-c.png" style="width: 26rpx;height: 28.66rpx;">
|
||
</image>
|
||
<text style="font-size: 24rpx;color: #F97559;margin-left: 8rpx;">面对面</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="psychic-detail-row">
|
||
<text class="psychic-detail-text">咨询时段</text>
|
||
<view>
|
||
<text class="psychic-detail-show-text" v-if="orderDetail.appointmentDate">
|
||
{{ orderDetail.appointmentDate.substring(0, 10) }}({{
|
||
getWeekDay(orderDetail.appointmentDate)
|
||
}}){{ orderDetail.startTime.substring(0, 5) }}-{{ orderDetail.endTime.substring(0, 5) }}
|
||
</text>
|
||
<image src="/static/n-zx/right-icon.png" class="right-icon" @click="showChoiceDateTimePop">
|
||
</image>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="psychic-detail-row" v-if="orderDetail.consultationMethod == 'face_to_face'">
|
||
<text class="psychic-detail-text">面询地址</text>
|
||
<view style="width: 70%;text-align: right;">
|
||
<text class="psychic-detail-show-text">{{ orderDetail.addressDetail }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<view class="card" style="margin-top: 20rpx;box-sizing: border-box;" v-if="!showDetailFlag">
|
||
<view style="padding-left: 40rpx;padding-right: 40rpx;width: 100%;box-sizing: border-box;">
|
||
<view class="psychic-detail-row">
|
||
<text class="psychic-detail-text">预约人信息</text>
|
||
<view>
|
||
<text class="psychic-detail-show-text" v-if="orderDetail.phone">{{ orderDetail.phone }}
|
||
</text>
|
||
|
||
<!-- <text class="psychic-detail-show-text" v-else>去填写</text>-->
|
||
<image src="/static/n-zx/right-icon.png" class="right-icon" style="margin-left: 10rpx;"
|
||
@click="changeDetailFlag">
|
||
</image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="expand-bottom">
|
||
<view @click="changeDetailFlag"
|
||
style="display: flex;justify-content: center;flex-direction: column;align-items: center;justify-content: center;">
|
||
<text class="expand-text">展开更多</text>
|
||
<image src="/static/n-zx/down-icon.png" style="width: 16rpx;height: 11.82rpx;"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<view class="card" style="margin-top: 20rpx;box-sizing: border-box;" v-if="showDetailFlag">
|
||
<view
|
||
style="padding-left: 40rpx;padding-right: 40rpx;width: 100%;box-sizing: border-box;padding-bottom: 40rpx;">
|
||
<view class="psychic-detail-row">
|
||
<text class="psychic-detail-text">预约人信息</text>
|
||
|
||
</view>
|
||
<view class="psychic-detail-row">
|
||
<text class="psychic-detail-title-text">预约人称呼</text>
|
||
<view style="text-align: right;">
|
||
|
||
<input type="text" class="input-text" disabled :maxlength="10"
|
||
v-model="orderDetail.appointmentName" placeholder="请输入预约人称呼" />
|
||
</view>
|
||
</view>
|
||
<view class="psychic-detail-row">
|
||
<text class="psychic-detail-title-text">出生年月</text>
|
||
|
||
<view style="display: flex;justify-content: flex-end; align-items: center;">
|
||
<picker mode="date" value="date" :disabled="true" fields="month" @change="bindDateChange">
|
||
<view class="input-text">{{ orderDetail.birthday.slice(0, 7) }}</view>
|
||
</picker>
|
||
<image src="/static/n-zx/right-icon.png" class="right-icon" style="margin-left: 20rpx;">
|
||
</image>
|
||
</view>
|
||
</view>
|
||
<view class="psychic-detail-row">
|
||
<text class="psychic-detail-title-text">联系方式</text>
|
||
<view style="text-align: right;">
|
||
<input class="input-text" type="number" v-model="orderDetail.phone" :disabled="true"
|
||
:maxlength="10" placeholder="请输入预约人联系电话" />
|
||
</view>
|
||
</view>
|
||
<view class="psychic-detail-row">
|
||
<text class="psychic-detail-title-text">性别</text>
|
||
<view style="display: flex;align-items: center;" v-if="orderDetail.sex == 1">
|
||
<view style="margin-right: 44.44rpx;display: flex;align-items: center;">
|
||
<image src="/static/n-zx/choice.png" style="width: 40rpx;height: 40rpx;"></image>
|
||
<text class="input-text" style="margin-left:10rpx ;">男</text>
|
||
</view>
|
||
<view style="display: flex;align-items: center;">
|
||
<image src="/static/n-zx/nochoice.png" style="width: 31rpx;height: 31rpx;"></image>
|
||
<text class="input-text" style="margin-left:10rpx ;">女</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view style="display: flex;align-items: center;" v-if="orderDetail.sex == 2">
|
||
<view style="margin-right: 44.44rpx;display: flex;align-items: center;">
|
||
<image src="/static/n-zx/nochoice.png" style="width: 31rpx;height: 31rpx;"></image>
|
||
<text class="input-text" style="margin-left:10rpx ;">男</text>
|
||
</view>
|
||
<view style="display: flex;align-items: center;">
|
||
<image src="/static/n-zx/choice.png" style="width: 40rpx;height: 40rpx;"></image>
|
||
<text class="input-text" style="margin-left:10rpx ;">女</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="card" style="margin-top: 20rpx;box-sizing: border-box;" v-if="showDetailFlag">
|
||
<view
|
||
style="padding-left: 40rpx;padding-right: 40rpx;width: 100%;box-sizing: border-box;padding-bottom: 40rpx;">
|
||
<view class="psychic-detail-row" style="justify-content: flex-start;">
|
||
<text class="psychic-detail-text">紧急联系人</text>
|
||
</view>
|
||
|
||
<!-- <view class="psychic-detail-row" style="justify-content: flex-start;margin-top: 20rpx;">-->
|
||
|
||
<!-- <view>-->
|
||
<!-- <text class="psychic-detail-show-text"-->
|
||
<!-- style="color: #909099;">信息严格保密，仅常机状况时联系，以保障您的生命安全和福社-->
|
||
<!-- </text>-->
|
||
<!-- </view>-->
|
||
<!-- </view>-->
|
||
|
||
<view class="psychic-detail-row">
|
||
<text class="psychic-detail-title-text">联系方式</text>
|
||
<view style="text-align: right;">
|
||
<input class="input-text" type="number" :maxlength="10" disabled
|
||
v-model="orderDetail.emergencyContactPhone" placeholder="请输入预约人联系电话" />
|
||
</view>
|
||
</view>
|
||
<view class="psychic-detail-row">
|
||
<text class="psychic-detail-title-text">与你的关系</text>
|
||
<view style="text-align: right;display: flex;align-items: center;">
|
||
<input class="input-text" type="number" disabled
|
||
v-model="orderDetail.emergencyContactTypeText" :maxlength="10"
|
||
placeholder="请输入预约人联系电话" />
|
||
<!-- <image src="/static/n-zx/right-icon.png" class="right-icon" style="margin-left: 20rpx;">-->
|
||
<!-- </image>-->
|
||
<!-- <uni-data-select style="width: 80%;outline: none;border: none;text-align: right"-->
|
||
<!-- v-model="orderDetail.emergencyContactType"-->
|
||
<!-- :localdata="range"-->
|
||
<!-- disabled-->
|
||
<!-- @change="changeEmergencyContactType"-->
|
||
<!-- :clear="false"-->
|
||
<!-- placeholder="请选择"-->
|
||
<!-- >-->
|
||
<!-- </uni-data-select>-->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="card" style="margin-top: 20rpx;box-sizing: border-box;">
|
||
<view
|
||
style="padding-left: 40rpx;padding-right: 40rpx;width: 100%;box-sizing: border-box;padding-bottom: 40rpx;">
|
||
<view class="psychic-detail-row" style="justify-content: flex-start;">
|
||
<text class="psychic-detail-text">订单信息</text>
|
||
</view>
|
||
<view class="psychic-detail-row">
|
||
<text class="psychic-detail-title-text">订单编号</text>
|
||
<view style="text-align: right;">
|
||
<uni-tag text="复制" type="primary" @click="copyContent(orderDetail.orderSn)" :inverted="true"
|
||
style="margin-right: 10rpx;" />
|
||
<text class="psychic-detail-show-text">{{orderDetail.orderSn}} </text>
|
||
</view>
|
||
</view>
|
||
<view class="psychic-detail-row">
|
||
<text class="psychic-detail-title-text">创建时间</text>
|
||
<view style="text-align: right;" v-if=" orderDetail.createTime">
|
||
<text
|
||
class="psychic-detail-show-text">{{ orderDetail.createTime.split('T').join(' ') }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="psychic-detail-row">
|
||
<text class="psychic-detail-title-text">订单原价</text>
|
||
<view style="text-align: right;">
|
||
<text class="psychic-detail-show-text">¥{{advancedFormat(orderDetail.totalAmount)}} </text>
|
||
</view>
|
||
</view>
|
||
<view class="psychic-detail-row">
|
||
<text class="psychic-detail-title-text">实付金额</text>
|
||
<view style="text-align: right;">
|
||
<text class="psychic-detail-show-text">¥{{advancedFormat(orderDetail.totalAmount)}} </text>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="psychic-detail-row" style="margin-top: 20rpx;align-items: center;">
|
||
<view style="display: flex;align-items: center;">
|
||
<image src="/static/n-zx/wx-pay-icon.png" style="width:88rpx;height: 88rpx;"></image>
|
||
<text class="input-text">微信支付</text>
|
||
</view>
|
||
<image src="/static/n-zx/choice-pay-icon.png" style="width: 48rpx;height: 48rpx;"></image>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
|
||
<!-- <view style="width: 670rpx;display: flex;align-items: center; margin-top: 22rpx">-->
|
||
<!-- <image src="/static/n-zx/choice.png" style="width: 36rpx;height: 36rpx;"></image>-->
|
||
<!-- <view-->
|
||
<!-- style="white-space: nowrap; text-overflow: ellipsis;overflow: hidden;width: 630rpx;margin-left: 10rpx;">-->
|
||
<!-- <text class="psychic-detail-title-text"> 同意</text>-->
|
||
<!-- <text class="psychic-detail-title-text" style="color:#F97559 ;">《知情同意书》、《心理咨询服务协议》</text>-->
|
||
<!-- <text class="psychic-detail-title-text">与</text>-->
|
||
<!-- <text class="psychic-detail-title-text" style="color:#F97559 ;">《专属助理服务须知》</text>-->
|
||
<!-- <text class="psychic-detail-title-text">，点击“同意"开始接受服务。</text>-->
|
||
<!-- </view>-->
|
||
<!-- </view>-->
|
||
<!-- <view class="bottom-btn" style="box-sizing: border-box;">-->
|
||
<!-- <text class="btn-text">立即预约¥600</text>-->
|
||
<!-- </view>-->
|
||
|
||
|
||
<view v-if="orderDetail.status==0||orderDetail.status==8||orderDetail.status==9"
|
||
style="margin-top: 40rpx;display: flex;justify-content: space-around;align-items: center;width: 100%">
|
||
|
||
<view v-if="orderDetail.status==0" class="btn1" @click.stop="cancelOrder(orderDetail)">
|
||
<text class="btn-text1">取消订单</text>
|
||
</view>
|
||
<view v-if="orderDetail.status==0" class="btn" @click.stop="toPay(orderDetail)">
|
||
<text class="btn-text">立即支付</text>
|
||
</view>
|
||
<view class="btn1" v-if="orderDetail.status==8||orderDetail.status==9"
|
||
@click.stop="deleteOrder(orderDetail)">
|
||
<text class="btn-text1">删除订单</text>
|
||
</view>
|
||
|
||
<view class="btn" v-if="orderDetail.status==9||orderDetail.status==8"
|
||
@click.stop="consultAgain(orderDetail)">
|
||
<text class="btn-text">再次咨询</text>
|
||
</view>
|
||
|
||
|
||
<!-- <view class="btn" v-if="orderDetail.status==8" @click.stop="findOtherDoctor">
|
||
<text class="btn-text">预约其他咨询师</text>
|
||
</view> -->
|
||
</view>
|
||
|
||
|
||
<view v-if="orderDetail.status==1||orderDetail.status==4||orderDetail.status==5"
|
||
style="margin-top: 40rpx;display: flex;justify-content: center;align-items: center;width: 100%">
|
||
<view class="btn2" v-if="orderDetail.status==1">
|
||
<button plain class="contact-btn" open-type="contact">
|
||
<text class="btn-text">联系助理</text>
|
||
</button>
|
||
</view>
|
||
|
||
<view class="btn2" v-if="orderDetail.status==4||orderDetail.status==5"
|
||
@click.stop="consultAgain(orderDetail)">
|
||
<text class="btn-text">再次咨询</text>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script setup>
|
||
import myNav from '@/components/my-nav.vue'
|
||
import {
|
||
urls
|
||
} from '@/util/apiUrl.js'
|
||
import dohttp from '@/util/requestConfig.js'
|
||
|
||
const advancedFormat = (num) => {
|
||
const divided = Number(num) / 100;
|
||
// 转换为字符串处理科学计数法（如1e-7）
|
||
const str = divided.toLocaleString('en-US', {
|
||
maximumFractionDigits: 2,
|
||
useGrouping: false
|
||
});
|
||
return str.replace(/(\.\d*?[1-9])0+$/, '$1').replace(/\.$/, '');
|
||
}
|
||
const copyContent = (content) => {
|
||
uni.setClipboardData({
|
||
data: content,
|
||
success: () => {
|
||
uni.showToast({
|
||
title: '复制成功',
|
||
duration: 1500
|
||
});
|
||
}
|
||
});
|
||
}
|
||
|
||
|
||
const cancelOrder = (item) => {
|
||
|
||
uni.showModal({
|
||
content: '确定取消该订单吗?',
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
dohttp.post(urls.cancelOrder + "?orderId=" + item.id).then((result) => {
|
||
if (result) {
|
||
item.status = 9
|
||
item.cancelFlag = 2
|
||
uni.showToast({
|
||
title: '取消成功',
|
||
duration: 1500
|
||
});
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
const consultAgain = (item) => {
|
||
dohttp.navigateTo("/pages/consult-detail/consult-detail?id=" + item.doctorId)
|
||
}
|
||
|
||
const onShareAppMessage = () => {
|
||
return {
|
||
title: '快来体验一下吧~',
|
||
path: '/pages/index/index', // 分享的路径
|
||
};
|
||
};
|
||
|
||
const onShareTimeline = () => {
|
||
return {
|
||
title: '快来体验一下吧~',
|
||
query: 'id=51', // 分享路径的参数
|
||
};
|
||
};
|
||
const deleteOrder = (item) => {
|
||
|
||
uni.showModal({
|
||
content: '是否删除该订单信息,删除后将不能恢复',
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
dohttp.post(urls.deleteOrder + "?orderId=" + item.id).then((result) => {
|
||
if (result) {
|
||
uni.showToast({
|
||
title: '删除成功',
|
||
duration: 1500
|
||
});
|
||
uni.navigateTo("/pages/order/order")
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
const findOtherDoctor = () => {
|
||
uni.switchTab({
|
||
"url": "/pages/consult/consult",
|
||
"animationType": "pop-in"
|
||
})
|
||
}
|
||
const toPay = (item) => {
|
||
let params = {
|
||
orderSn: item.orderSn
|
||
}
|
||
dohttp.get(urls.getPayParam, params).then((result) => {
|
||
console.log("urls.getPayParam", result)
|
||
uni.requestPayment({
|
||
provider: 'wxpay',
|
||
timeStamp: result.timeStamp,
|
||
nonceStr: result.nonceStr,
|
||
package: result.packageStr,
|
||
signType: result.signType,
|
||
paySign: result.paySign,
|
||
success: function(res) {
|
||
console.log('success:' + JSON.stringify(res));
|
||
},
|
||
fail: function(err) {
|
||
console.log('fail:' + JSON.stringify(err));
|
||
}
|
||
})
|
||
})
|
||
|
||
}
|
||
|
||
const getWeekDay = (dateString) => {
|
||
const date = new Date(dateString);
|
||
if (isNaN(date.getTime())) {
|
||
return '无效日期'; // 校验日期合法性[3](@ref)
|
||
}
|
||
const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
|
||
return weekDays[date.getDay()];
|
||
}
|
||
|
||
|
||
const range = ref([{
|
||
value: 1,
|
||
text: "朋友"
|
||
},
|
||
{
|
||
value: 2,
|
||
text: "子女"
|
||
},
|
||
{
|
||
value: 3,
|
||
text: "夫妻"
|
||
},
|
||
{
|
||
value: 4,
|
||
text: "父母"
|
||
},
|
||
])
|
||
const showDetailFlag = ref(false)
|
||
|
||
const toConsultAppointment = () => {
|
||
dohttp.navigateTo("/pages/consult-appointment/consult-appointment")
|
||
}
|
||
|
||
|
||
const changeDetailFlag = () => {
|
||
showDetailFlag.value = true
|
||
bgHeight.value = "fit-content"
|
||
}
|
||
const orderDetail = ref({})
|
||
onLoad((option) => {
|
||
if (option.id) {
|
||
|
||
getOrderDetail(option.id)
|
||
|
||
|
||
} else {
|
||
uni.showModal({
|
||
title: '数据异常',
|
||
content: '页面数据发生异常，即将返回主页',
|
||
showCancel: false,
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
uni.reLaunch({
|
||
url: "/pages/index/index"
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
})
|
||
const getOrderDetail = async (id) => {
|
||
dohttp.post(urls.orderDetail + "?orderId=" + id).then(res => {
|
||
orderDetail.value = res
|
||
if (orderDetail.value.emergencyContactType) {
|
||
range.value.forEach(item => {
|
||
if (item.value == orderDetail.value.emergencyContactType) {
|
||
orderDetail.value.emergencyContactTypeText = item.text
|
||
}
|
||
})
|
||
}
|
||
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.content {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background-color: #F9F6F5;
|
||
display: flex;
|
||
flex-direction: column;
|
||
font-family: SourceHanSans;
|
||
background-image: url('https://miniapp.yuxingu.com.cn/yxg-mp/pic/bg-all.png');
|
||
background-size: cover;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
.order-text {
|
||
font-size: 20rpx;
|
||
font-variation-settings: "opsz" auto;
|
||
color: #606271
|
||
}
|
||
|
||
|
||
.card {
|
||
width: 670rpx;
|
||
background-color: #ffffff;
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-sizing: border-box;
|
||
align-items: flex-start;
|
||
border-radius: 32rpx;
|
||
}
|
||
|
||
.psychic-detail-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
margin-top: 39rpx;
|
||
}
|
||
|
||
.psychic-detail-text {
|
||
font-family: SourceHanSansBold;
|
||
font-size: 28rpx;
|
||
line-height: normal;
|
||
text-align: center;
|
||
letter-spacing: 0px;
|
||
|
||
font-variation-settings: "opsz" auto;
|
||
/* 背景色/浅色背景2 */
|
||
color: #614D49;
|
||
}
|
||
|
||
.psychic-detail-show-text {
|
||
font-family: SourceHanSans;
|
||
font-size: 24rpx;
|
||
font-weight: normal;
|
||
line-height: normal;
|
||
text-align: center;
|
||
letter-spacing: 0px;
|
||
font-variation-settings: "opsz" auto;
|
||
/* 背景色/浅色背景2 */
|
||
color: #614D49;
|
||
}
|
||
|
||
.input-text {
|
||
|
||
font-family: SourceHanSans;
|
||
font-size: 28rpx;
|
||
font-weight: normal;
|
||
line-height: normal;
|
||
text-align: right;
|
||
letter-spacing: 0px;
|
||
|
||
font-variation-settings: "opsz" auto;
|
||
/* 正文色/正文辅助4 */
|
||
color: #909099;
|
||
}
|
||
|
||
.psychic-detail-title-text {
|
||
font-family: SourceHanSans;
|
||
font-size: 28rpx;
|
||
font-weight: normal;
|
||
line-height: normal;
|
||
text-align: center;
|
||
letter-spacing: 0px;
|
||
|
||
font-variation-settings: "opsz" auto;
|
||
/* 背景色/浅色背景2 */
|
||
color: #614D49;
|
||
}
|
||
|
||
.right-icon {
|
||
width: 12rpx;
|
||
height: 22rpx;
|
||
margin-left: 10rpx;
|
||
}
|
||
|
||
.bottom-btn {
|
||
|
||
width: 550rpx;
|
||
height: 96rpx;
|
||
border-radius: 2002rpx;
|
||
/* 自动布局 */
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 22rpx 40rpx;
|
||
|
||
background: linear-gradient(180deg, #E84B2A 0%, #FF846A 100%);
|
||
margin-top: 68rpx;
|
||
}
|
||
|
||
.btn-text {
|
||
font-family: SourceHanSansBold;
|
||
font-size: 36rpx;
|
||
line-height: normal;
|
||
letter-spacing: 0rpx;
|
||
|
||
/* 正文色/正文色 */
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.expand-bottom {
|
||
width: 670rpx;
|
||
margin-top: 40rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 62rpx;
|
||
border-radius: 0px 0px 10rpx 10rpx;
|
||
background: linear-gradient(180deg, #FF9079 0%, #F37155 100%);
|
||
}
|
||
|
||
|
||
.btn {
|
||
width: 282rpx;
|
||
height: 96rpx;
|
||
border-radius: 2002rpx;
|
||
|
||
|
||
/* 自动布局 */
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: linear-gradient(180deg, #E84B2A 0%, #FF846A 100%);
|
||
}
|
||
|
||
.btn-text {
|
||
|
||
font-size: 28rpx;
|
||
font-family: SourceHanSansBold;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.btn1 {
|
||
width: 282rpx;
|
||
height: 76rpx;
|
||
border-radius: 2002rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
box-sizing: border-box;
|
||
border: 2rpx solid #F36749;
|
||
}
|
||
|
||
.btn2 {
|
||
width: 650rpx;
|
||
height: 96rpx;
|
||
border-radius: 2002rpx;
|
||
|
||
|
||
/* 自动布局 */
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: linear-gradient(180deg, #E84B2A 0%, #FF846A 100%);
|
||
}
|
||
|
||
.btn-text1 {
|
||
|
||
font-size: 28rpx;
|
||
font-family: SourceHanSansBold;
|
||
color: #F36749;
|
||
}
|
||
|
||
.contact-btn {
|
||
border: none;
|
||
outline: none;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 0rpx;
|
||
margin: 0rpx;
|
||
background-color: transparent;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
</style> |