jack/yuxingu-Miniprogram-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
jackyu66git
2026-03-23 11:52:05 +08:00
commit c3c9db3151
267 changed files with 24984 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/order-detail/order-detail.vue
+738
View File
@@ -0,0 +1,738 @@
<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>