937 lines
30 KiB
Vue
937 lines
30 KiB
Vue
<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> |