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/appoint/appoint.vue
+937
View File
@@ -0,0 +1,937 @@
<template>
<view class="content" :style="{height:bgHeight}">
<myNav title="立即预约" bgColor="#fff" titleColor="#614D49" :backIcon="true" :backHome="false" :flex="true"></myNav>
<view style=" display: flex; flex-direction: column; align-items: center;overflow-y: auto;"
v-if="psychicShowDetail">
<view class="card" style="margin-top: 40rpx;">
<view class="psychic-top"></view>
<view class="psychic-card">
<view style="display: flex;justify-content: space-between;width: 100%;">
<view style="display: flex;align-items:last baseline;">
<image v-if="psychicShowDetail.avatar" :src="psychicShowDetail.avatar"
style="width: 120rpx;height: 120rpx;border-radius: 10rpx;">
</image>
<text class="psychic-name">{{psychicShowDetail.name}}</text>
</view>
<view>
<text class="psychic-price">¥{{advancedFormat(psychicShowDetail.price)}}</text>
<text class="psychic-unit"
v-if="appointmentTime">/{{calculateTimeDifference(appointmentTime.startTime,appointmentTime.endTime)}}分钟</text>
</view>
</view>
<view class="line"></view>
<view class="psychic-detail-row">
<text class="psychic-detail-text">咨询时段</text>
<view @click="showChoiceDateTimePop">
<text class="psychic-detail-show-text"
v-if="appointmentDate&&appointmentTime">{{appointmentDate.scheduleDate}}({{appointmentDate.weekStr}}){{appointmentTime.startTime.substring(0,5)}}-{{appointmentTime.endTime.substring(0,5)}}</text>
<image src="/static/n-zx/right-icon.png" class="right-icon" >
</image>
</view>
</view>
<view class="psychic-detail-row">
<text class="psychic-detail-text">咨询方式</text>
<view style="display: flex; align-items: center;">
<view v-if="psychicOrder.consultationMethod == 'video' && showVideo" style="width: 124rpx;height: 48rpx;border-radius: 80rpx;
box-sizing: border-box;border: 1px solid #F97559;display: flex;justify-content: center;align-items: center;"
@click="choiceConsultationMethod('video')">
<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="psychicOrder.consultationMethod == 'video'&& showFaceToFace" style="width: 124rpx;height: 48rpx;border-radius: 80rpx;margin-left: 20rpx;
box-sizing: border-box;border: 1px solid #909099;display: flex;justify-content: center;align-items: center;"
@click="choiceConsultationMethod('face_to_face')">
<image src="/static/n-zx/face-to-face.png" style="width: 26rpx;height: 28.66rpx;">
</image>
<text style="font-size: 24rpx;color: #909099;margin-left: 8rpx;">面对面</text>
</view>
<view v-if="psychicOrder.consultationMethod == 'face_to_face'&& showVideo" style="width: 124rpx;height: 48rpx;border-radius: 80rpx;
box-sizing: border-box;border: 1px solid #909099;display: flex;justify-content: center;align-items: center;"
@click="choiceConsultationMethod('video')">
<image src="/static/n-zx/video-camera.png" style="width: 26rpx;height: 28.66rpx;">
</image>
<text style="font-size: 24rpx;color: #909099;margin-left: 8rpx;">视频</text>
</view>
<view v-if="psychicOrder.consultationMethod == 'face_to_face'&& showFaceToFace" 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;"
@click="choiceConsultationMethod('face_to_face')">
<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" v-if="psychicOrder.consultationMethod == 'face_to_face'">
<text class="psychic-detail-text">面询地址</text>
<view style="width: 70%;text-align: right;">
<text class="psychic-detail-show-text">{{psychicShowDetail.address}}(下单后展示详细)</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="psychicShowDetail.appointmentInfoAppRespVO&&psychicShowDetail.appointmentInfoAppRespVO.phone">{{psychicShowDetail.appointmentInfoAppRespVO.phone}}</text>
<text class="psychic-detail-show-text" @click="changeDetailFlag" v-else>去填写</text>
<image v-if="!psychicShowDetail.appointmentInfoAppRespVO||!psychicShowDetail.appointmentInfoAppRespVO.phone" 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>
<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 type="text" class="input-text" v-model="psychicOrder.appointmentName" :maxlength="10"
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" fields="month" @change="bindDateChange">
<view class="input-text">{{psychicOrder.birthday}}</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" :maxlength="11" v-model="psychicOrder.phone"
placeholder="请输入预约人联系电话" />
</view>
</view>
<view class="psychic-detail-row">
<text class="psychic-detail-title-text">性别</text>
<view style="display: flex;align-items: center;" v-if="psychicOrder.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;" @click="choiceSex(2)">
<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="psychicOrder.sex == 2">
<view style="margin-right: 44.44rpx;display: flex;align-items: center;"
@click="choiceSex(1)">
<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 style="margin-left: 20rpx;">
<text class="psychic-detail-show-text" style="color: #909099;">必填</text>
</view>
</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" v-model="psychicOrder.emergencyContactPhone" type="number"
:maxlength="11" placeholder="请输入紧急联系人电话" />
</view>
</view>
<view class="psychic-detail-row">
<text class="psychic-detail-title-text">与你的关系</text>
<view style="display: flex;align-items: center;flex: 1;justify-content: flex-end;">
<!-- <input class="input-text" type="number" :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="psychicOrder.emergencyContactType"
:localdata="range"
@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" 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 v-if="!agreeFlag" src="/static/n-zx/nochoice.png" style="width: 26rpx;height:26rpx;" @click="agree"></image>
<image v-else src="/static/n-zx/choice.png" style="width: 40rpx;height: 40rpx;" @click="agree"></image>
<!-- @click="expandPopSlot" -->
<view
style="white-space: nowrap; text-overflow: ellipsis;overflow: hidden;width: 630rpx;margin-left: 10rpx;">
<text class="psychic-detail-title-text1"> 同意</text>
<text class="psychic-detail-title-text1" style="color:#F37155 ;">
<text @click="toShowProtocol('informed_consent')">《知情同意书》</text>、<text @click="toShowProtocol('psychological_counseling')">《心理咨询服务协议》</text></text>
<text class="psychic-detail-title-text1">与</text>
<text class="psychic-detail-title-text1" style="color:#F37155 ;" @click="toShowProtocol('exclusive_assistant')">《专属助理服务须知》</text>
<text class="psychic-detail-title-text1">，点击“同意"开始接受服务。</text>
</view>
</view>
<view class="bottom-btn" @click="toPay">
<text class="btn-text">立即预约¥{{advancedFormat(psychicShowDetail.price)}}</text>
</view>
</view>
</view>
<uni-popup ref="timeSlot" type="bottom" :animation="true" :safe-area="false">
<view style="width: 750rpx;height: 940rpx;padding: 40rpx 40rpx 64rpx 40rpx;background: #fff;box-sizing: border-box;
flex-direction: column;display: flex;align-items: center;border-radius: 10rpx 10rpx 0px 0px;">
<text style="color: #614D49;font-size: 40rpx;font-family: SourceHanSansBold; ">选择咨询时段</text>
<text style="color: #9B918C;font-size: 24rpx;font-family: SourceHanSans;margin-top: 8rpx; ">（北京时间）</text>
<view style="display: flex; justify-content: space-between;width: 100%;margin-top: 40rpx;">
<text
style="color: #614D49;font-size: 28rpx;font-family: SourceHanSansBold;">共{{choiceSlotNum}}个时段可选择</text>
<text style="color: #9B918C;font-size: 28rpx;font-family: SourceHanSans;">已为你隐藏不可约时段</text>
</view>
<view style="display: flex;width: 100%;flex-direction: column;overflow-y: auto;">
<view style="display: flex;width: 100%;align-items: flex-start"
v-for="(item,index) in appointmentDateDetailList" :key="index">
<view class="date-card" :style="{'color':choiceDateIndex == index?'#F37155':'#9B918C'}">
<text style="font-size: 10rpx;font-family: SourceHanSansBold;">{{item.weekStr}}</text>
<text
style="font-size: 20rpx;font-family: SourceHanSans;">{{item.scheduleDate.slice(-5)}}</text>
</view>
<view style="display: flex;flex-wrap: wrap;width: 550rpx;">
<view class="time-card" :style="{'color':choiceTimeIndex == index1&&choiceDateIndex == index?'#fff':'#9B918C',
'background':choiceTimeIndex == index1&&choiceDateIndex == index?'#F37155':'#fff'
,'border':choiceTimeIndex == index1&&choiceDateIndex == index?'none':'1px solid #909099'}"
v-for="(ele,index1) in item.slotVOList" :key="index1"
@click="choiceDate(ele,index1,item,index)">
<text
style="font-size: 20rpx;font-family: SourceHanSans;width: 50rpx;height: 28rpx;">{{ele.startTime.substring(0,5)}}</text>
<text
style="font-size: 20rpx;font-family: SourceHanSans;;width: 8rpx;height: 28rpx;">-</text>
<text
style="font-size: 20rpx;font-family: SourceHanSans;width: 50rpx;height: 28rpx;">{{ele.endTime.substring(0,5)}}</text>
</view>
</view>
</view>
</view>
<view class="bottom-btn" style="margin-bottom: 64rpx;" @click="sureTime">
<text class="btn-text">确认时段</text>
</view>
</view>
</uni-popup>
<uni-popup ref="popSlot" type="center" :animation="true" :safe-area="false">
<view
style="width: 590rpx;height: 768rpx;border-radius: 10rpx;background-color: #fff;display: flex;flex-direction: column;align-items: center;">
<image src="/static/n-zx/header.png" style="width: 590rpx;height: 536.3rpx;margin-top: -282rpx;"></image>
<view style="width: 464rpx;margin-top: 80rpx;">
<text style="font-size: 28rpx;font-family: SourceHanSansBold">
请阅读<text style="color:#EA4E2D;" @click="toShowProtocol('informed_consent')">《知情同意书》</text>、
<text style="color:#EA4E2D;" @click="toShowProtocol('psychological_counseling')">《心理咨询服务协议》</text>与
<text style="color:#EA4E2D;" @click="toShowProtocol('exclusive_assistant')">《专属助理服务须知》</text>，点击“同意"开始接受服务。
</text>
</view>
<view style="width: 430rpx;height: 96rpx;border-radius: 2002rpx;background: linear-gradient(180deg, #E84B2A 0%, #FF846A 100%);
display: flex;justify-content: center;align-items: center;margin-top: 70rpx;" @click="sureAgree">
<text style="font-size: 36rpx;font-family: SourceHanSansBold;color: #fff;" >同意并支付</text>
</view>
<text style="font-size: 36rpx;color: #606271;font-family: SourceHanSansBold;margin-top: 40rpx;" @click="notAgree">取消</text>
</view>
</uni-popup>
<ShowPop v-if="showPopFlag" :code="showPopCode" @closeProcotolPop="closeProcotolPop"></ShowPop>
</template>
<script setup>
import {
ref
} from 'vue'
import myNav from '@/components/my-nav.vue'
import {
urls
} from '@/util/apiUrl.js'
import dohttp from '@/util/requestConfig.js'
import ShowPop from "@/components/show-pop/show-pop.vue";
const psychicShowDetail = ref()
const showDetailFlag = ref(false)
const timeSlot = ref()
const popSlot = ref()
const showPopFlag= ref(false)
const showPopCode= ref("")
const toShowProtocol = (code) => {
showPopFlag.value = true
showPopCode.value = code
}
const closeProcotolPop=()=>{
showPopFlag.value = false
showPopCode.value = ""
}
onLoad((option) => {
if (option && option.id) {
psychicOrder.value.doctorId = option.id
getDetail(option.id)
getDateDetailList()
} else {
uni.showModal({
title: '数据异常',
content: '页面数据发生异常，即将返回主页',
showCancel: false,
success: function(res) {
if (res.confirm) {
uni.reLaunch({
url: "/pages/index/index"
})
}
}
})
}
if (option && option.choiceDayFlag == 2) {
setTimeout(() => {
showChoiceDateTimePop()
}, 500)
}
})
const agreeFlag=ref(false)
const agree=()=>{
agreeFlag.value = !agreeFlag.value
}
const changeEmergencyContactType=(e)=>{
psychicOrder.value.emergencyContactType = e
}
const showChoiceDateTimePop = () => {
timeSlot.value.open("bottom")
}
const choiceDateIndex = ref()
const choiceTimeIndex = ref()
const appointmentDate = ref()
const appointmentTime = ref()
const choiceDate = (ele, index1, item, index) => {
choiceDateIndex.value = index
choiceTimeIndex.value = index1
appointmentDate.value = item
appointmentTime.value = ele
psychicOrder.value.slotId = ele.slotId
if (ele.consultationMethod){
showVideo.value = ele.consultationMethod.indexOf('video') >= 0
showFaceToFace.value = ele.consultationMethod.indexOf(
'face_to_face') >= 0
}
}
// 将时间字符串转换为总分钟数
const timeToMinutes = (timeStr) => {
const [hours, minutes] = timeStr.split(':').map(Number);
return hours * 60 + minutes;
}
// 计算时间差（处理跨天情况）
const calculateTimeDifference = (startTime, endTime) => {
const startMinutes = timeToMinutes(startTime);
const endMinutes = timeToMinutes(endTime);
let diff = endMinutes - startMinutes;
// 如果跨天（结束时间早于开始时间），补上24小时
if (diff < 0) diff += 24 * 60;
return diff;
}
const onShareAppMessage = () => {
return {
title: '快来体验一下吧~',
path: '/pages/index/index', // 分享的路径
};
};
const onShareTimeline = () => {
return {
title: '快来体验一下吧~',
query: 'id=12', // 分享路径的参数
};
};
const appointmentDateDetailList = ref([])
const choiceSlotNum = ref(0)
const getDateDetailList = () => {
let queryData = {
doctorId: psychicOrder.value.doctorId
}
dohttp.post(urls.dateDetailList, queryData).then((result) => {
console.log("resultresult", result)
if (result && result.length > 0) {
appointmentDateDetailList.value = result.reverse()
appointmentDateDetailList.value.forEach(ele => {
choiceSlotNum.value += ele.slotVOList.length
})
} else {
uni.showModal({
title: '数据异常',
content: '该咨询师暂无排班信息，请选择其他咨询师',
showCancel: false,
success: function(res) {
if (res.confirm) {
uni.reLaunch({
url: "/pages/consult/consult"
})
}
}
})
}
})
}
const showVideo = ref(false)
const showFaceToFace = ref(false)
const getDetail = (id) => {
dohttp.get(urls.getShowInfo + "?id=" + id).then((result) => {
if (result) {
psychicShowDetail.value = result
psychicOrder.value.totalAmount = psychicShowDetail.value.price
if (psychicShowDetail.value.consultationMethod) {
showVideo.value = psychicShowDetail.value.consultationMethod.indexOf('video') >= 0
showFaceToFace.value = psychicShowDetail.value.consultationMethod.indexOf(
'face_to_face') >= 0
// psychicShowDetail.value.consultationMethodList = psychicShowDetail.value.consultationMethod
// .split(",")
if (psychicShowDetail.value.consultationMethod.indexOf('video') >= 0) {
psychicOrder.value.consultationMethod = 'video' //默认 咨询方式为未视频
} else {
psychicOrder.value.consultationMethod = 'face_to_face' //默认 咨询方式为未视频
}
}
if (psychicShowDetail.value.appointmentInfoAppRespVO) {
psychicOrder.value.appointmentName = psychicShowDetail.value.appointmentInfoAppRespVO
.appointmentName
if (psychicShowDetail.value.appointmentInfoAppRespVO.birthday) {
psychicOrder.value.birthday = psychicShowDetail.value.appointmentInfoAppRespVO.birthday.slice(0, 7)
}
psychicOrder.value.phone = psychicShowDetail.value.appointmentInfoAppRespVO.phone
if (psychicShowDetail.value.appointmentInfoAppRespVO.sex) {
psychicOrder.value.sex = psychicShowDetail.value.appointmentInfoAppRespVO.sex
}
if (psychicShowDetail.value.appointmentInfoAppRespVO.emergencyContactType) {
psychicOrder.value.emergencyContactType = Number(psychicShowDetail.value
.appointmentInfoAppRespVO
.emergencyContactType)
}
if (psychicShowDetail.value.appointmentInfoAppRespVO.emergencyContactPhone) {
psychicOrder.value.emergencyContactPhone = psychicShowDetail.value
.appointmentInfoAppRespVO
.emergencyContactPhone
}
}
}
})
}
const choiceSex = (sex) => {
psychicOrder.value.sex = sex
}
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 bindDateChange = (event) => {
psychicOrder.value.birthday = event.detail.value
}
const bgHeight = ref("100vh")
const changeDetailFlag = () => {
showDetailFlag.value = true
bgHeight.value = "fit-content"
}
const sureTime = () => {
if (!appointmentDate.value || !appointmentTime.value) {
uni.showToast({
title: '未选择咨询时段',
icon: 'error',
duration: 2000
});
return
}
timeSlot.value.close()
}
const psychicOrder = ref({
slotId: null,
doctorId: null,
appointmentName: null,
birthday: "1990-01",
phone: null,
sex: 1,
emergencyContactInfo: null,
consultationMethod: null,
emergencyContactPhone: "",
emergencyContactType: 1,
totalAmount: 0,
})
const range = ref([{
value: 1,
text: "朋友"
},
{
value: 2,
text: "子女"
},
{
value: 3,
text: "夫妻"
},
{
value: 4,
text: "父母"
},
])
const choiceConsultationMethod = (consultationMethod) => {
psychicOrder.value.consultationMethod = consultationMethod
}
const provider = ref("")
const createOrder = () => {
psychicOrder.value.emergencyContactInfo = JSON.stringify({
phone: psychicOrder.value.emergencyContactPhone,
type: psychicOrder.value.emergencyContactType
})
const deepCopy = JSON.parse(JSON.stringify(psychicOrder.value));
deepCopy.birthday =deepCopy.birthday+"-01"
return dohttp.post(urls.createZxOrder,deepCopy)
}
const sureAgree=()=>{
agreeFlag.value = true
popSlot.value.close()
toPay()
}
const notAgree=()=>{
popSlot.value.close()
}
const validatePhone = (phone)=> {
const regex = /^1[3-9]\d{9}$/;
return regex.test(phone);
}
const validData=()=>{
if(!psychicOrder.value.slotId){
uni.showModal({
title: '提示',
content: '请选择预约时段',
showCancel: false,
})
return false
}
if(!psychicOrder.value.appointmentName){
uni.showModal({
title: '提示',
content: '请填写预约人称呼',
showCancel: false,
})
return false
}
if(!psychicOrder.value.phone){
uni.showModal({
title: '提示',
content: '请填写预约人联系方式',
showCancel: false,
})
return false
}
if (!psychicOrder.value.birthday){
uni.showModal({
title: '提示',
content: '请选择预约人出生年月',
showCancel: false,
})
return false
}
if (!psychicOrder.value.sex){
uni.showModal({
title: '提示',
content: '请选择预约人性别',
showCancel: false,
})
return false
}
if (!psychicOrder.value.emergencyContactPhone){
uni.showModal({
title: '提示',
content: '请填写紧急联系人电话',
showCancel: false,
})
return false
}
if (!psychicOrder.value.emergencyContactType){
uni.showModal({
title: '提示',
content: '请选择紧急联系人与你的关系',
showCancel: false,
})
return false
}
if(!validatePhone(psychicOrder.value.phone)){
uni.showModal({
title: '提示',
content: '请填写正确的预约人手机号码',
showCancel: false,
})
return false
}
if(!validatePhone(psychicOrder.value.emergencyContactPhone)){
uni.showModal({
title: '提示',
content: '请填写正确的紧急联系人手机号码',
showCancel: false,
})
return false
}
return true
}
const expandPopSlot=()=>{
popSlot.value.open("center")
}
const toPay = async () => {
if(!validData()){
return
}
if(!agreeFlag.value){
popSlot.value.open("center")
return
}
const result = await createOrder()
console.log("toPay------------", result)
uni.requestPayment({
provider: 'wxpay',
timeStamp: result.timeStamp,
nonceStr: result.nonceStr,
package: result.packageStr,
signType: result.signType,
paySign: result.paySign,
success: function(res) {
dohttp.navigateTo("/pages/order/order?backHome="+1)
},
fail: function(err) {
dohttp.navigateTo("/pages/order/order")
}
})
}
</script>
<style scoped>
.content {
width: 100vw;
background-color: #F9F6F5;
font-family: 'SourceHanSans';
}
.psychic-top {
border-radius: 10rpx 10rpx 0rpx 0rpx;
opacity: 1;
/* 自动布局 */
width: 670rpx;
height: 60rpx;
background: linear-gradient(180deg, #FFE7D9 0%, rgba(255, 255, 255, 0) 98%);
}
.card {
width: 670rpx;
background-color: #ffffff;
display: flex;
flex-direction: column;
box-sizing: border-box;
align-items: flex-start;
border-radius: 10rpx;
}
.psychic-card {
padding-left: 40rpx;
padding-right: 40rpx;
padding-bottom: 54rpx;
border-radius: 10rpx;
margin-top: -20rpx;
width: 670rpx;
box-sizing: border-box;
}
.psychic-name {
font-family: SourceHanSansBold;
font-size: 40rpx;
line-height: normal;
text-align: center;
letter-spacing: 0rpx;
font-variation-settings: "opsz" auto;
color: #614D49;
margin-left: 20rpx;
}
.psychic-price {
/* 标题/标题二加粗 */
font-family: SourceHanSans;
font-weight: 700;
font-size: 36rpx;
font-variation-settings: "opsz" auto;
color: #EA4E2D;
}
.psychic-unit {
/* 标题/标题二加粗 */
font-family: SourceHanSans;
font-weight: 700;
font-size: 20rpx;
font-variation-settings: "opsz" auto;
color: #EA4E2D;
}
.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-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;
}
.psychic-detail-title-text1 {
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;
}
.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: #909099;
}
.line {
margin-top: 41rpx;
width: 100%;
border: 1rpx dashed #DFD6D3;
}
.psychic-detail-row {
display: flex;
justify-content: space-between;
width: 100%;
margin-top: 39rpx;
}
.right-icon {
width: 15rpx;
height: 25rpx;
margin-left: 20rpx;
}
.expand-text {
font-family: SourceHanSansBold;
font-size: 24rpx;
line-height: normal;
letter-spacing: 0px;
font-variation-settings: "opsz" auto;
color: #EA4E2D;
}
.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, #FFFFFF 10%, #FFF3EF 80%);
}
.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: #606271;
}
.bottom-btn {
width: 550rpx;
height: 96rpx;
border-radius: 2002rpx;
/* 自动布局 */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 8rpx 40rpx;
background: linear-gradient(180deg, #FF9079 0%, #F37155 100%);
margin-bottom: 82rpx;
margin-top: 68rpx;
}
.btn-text {
font-family: SourceHanSansBold;
font-size: 36rpx;
line-height: normal;
letter-spacing: 0rpx;
/* 正文色/正文色 */
color: #FFFFFF;
}
.time-card {
width: 116rpx;
height: 108rpx;
border-radius: 10rpx;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-left: 40rpx;
border: 1rpx solid #909099;
box-sizing: border-box;
margin-top: 40rpx;
color: #606271;
}
.date-card {
width: 116rpx;
height: 108rpx;
border-radius: 10rpx;
background-color: #F7F4F3;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-top: 40rpx;
color: #606271;
}
</style>