674 lines
17 KiB
Vue
674 lines
17 KiB
Vue
<template>
|
||
<s-layout title="预约" :bgStyle="{ color: '#fff' }">
|
||
<view class="container">
|
||
|
||
|
||
<view class="doctor-list">
|
||
<view class="doctor-cards" >
|
||
<image class="doctor-avatars" :src="'https://sfyjk.com/api'+brandList[selectedClinicIndex].picUrl" mode="aspectFill"></image><br/><br/>
|
||
<view class="brandr-info">
|
||
<text class="doctor-names">
|
||
<text class="ygcontent">医馆地址：</text>
|
||
{{ brandList[selectedClinicIndex].address }}</text><br/><br/>
|
||
<!-- <div v-html='brandList[selectedClinicIndex].depict'></div> -->
|
||
<rich-text class="doctor-specialtys" :nodes="brandList[selectedClinicIndex].depict"></rich-text>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="clinic-select">
|
||
<text class="clinic-select-label">医馆选择</text>
|
||
<picker mode="selector" :range="brandNameList" @change="onClinicChange">
|
||
<view class="clinic-select-value">
|
||
<text>{{ brandList[selectedClinicIndex].name}}</text>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
<view class="clinic-select">
|
||
<text class="clinic-select-label">预约类型</text>
|
||
<picker mode="selector" :range="typenameList" @change="ontype">
|
||
<view class="clinic-select-value">
|
||
<text>{{ typeList[selecttypeIndex].dictLabel}}</text>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
<!-- <text class="clinic-select-label">套餐选择</text><br>
|
||
<image class="doctor-avatar" src="/static/avatar-doctor.png" mode="aspectFill"></image> -->
|
||
<!-- <view class="date-card">
|
||
<view class="weekdays">
|
||
<text v-for="(day, index) in weekdays" :key="index" :class="['weekday', index === selectedDayIndex ? 'active' : '']"
|
||
@click="selectDay(index)">{{ day }}</text>
|
||
</view>
|
||
<swiper class="date-swiper" :current="selectedDayIndex" @change="handleSwiperChange">
|
||
<swiper-item v-for="(date, index) in dateList" :key="index">
|
||
<view class="date-item" :class="index === selectedDayIndex ? 'active' : ''">
|
||
<text class="date">{{ formatDate(date.date) }}</text>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view> -->
|
||
<radio-group>
|
||
<view class="date-list">
|
||
<view v-for="(item, index) in dateList" :key="index" @click="selectDate(index)">
|
||
<view class="date-item" v-if="addDate==item.addDate" style="background-color: #ff5541;">
|
||
|
||
<text class="date" style="color: #FFFFFF;">{{ item.formattedDate }}</text>
|
||
<text class="weekday" style="color: #FFFFFF;">{{ item.weekday }}</text>
|
||
</view>
|
||
<view class="date-item" v-if="addDate!=item.addDate">
|
||
|
||
<text class="date">{{ item.formattedDate }}</text>
|
||
<text class="weekday">{{ item.weekday }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</radio-group>
|
||
|
||
|
||
<!-- <view @click="showTime = true"><text v-if="goTime" style="color: #000;">{{goTime }}</text><text v-else>请选择返程时间</text></view> -->
|
||
<!-- //通过控制showTime来判断组件是否显示 -->
|
||
<!-- <pickerTime :startH="8" :lateH="19" :step="32" v-if="showTime" @close="showTime=false" @chooseTime="bindTime"></pickerTime> -->
|
||
|
||
|
||
<radio-group>
|
||
<view class="doctor-list">
|
||
<!-- {{techList}} -->
|
||
<view class="doctor-card" v-for="(item, index) in techList" :key="index">
|
||
<view class="doctor-info">
|
||
<image class="doctor-avatar" :src="'https://sfyjk.com/api'+item.photo" mode="aspectFill"></image>
|
||
<text class="doctor-name">{{ item.technicianName }}</text>
|
||
<text class="doctor-name" style="float: right;margin-right: 20px;">{{item.typeName}}</text>
|
||
|
||
<!-- <text class="doctor-specialty" v-if="item.content">介绍: {{item.content.substr(0, 20)}}...</text> -->
|
||
</view>
|
||
<radio style="float: right;" :value="item.id" @click="onradio(item)" :checked="index==0"></radio>
|
||
<div v-if="techid == item.id">
|
||
<view class="info-title">服务范围</view>
|
||
<rich-text style="white-space: pre-wrap;" :nodes="item.serviceScope"></rich-text>
|
||
<view class="info-title">介绍</view>
|
||
<rich-text style="white-space: pre-wrap;" :nodes="item.content"></rich-text>
|
||
</div>
|
||
</view>
|
||
|
||
</view>
|
||
</radio-group>
|
||
<radio-group>
|
||
<view class="date-list">
|
||
<view v-for="(item, index) in serviceTime" :key="index" @click="selecthsstr(index)">
|
||
<view class="date-itemstr" v-if="hsstr==item.str" style="background-color: #ff5541;">
|
||
<text class="weekday">{{ item.str }}</text>
|
||
</view>
|
||
|
||
<view v-if="item.ym==='true'">
|
||
<view class="date-itemym" v-if="hsstr!=item.str" >
|
||
<text class="weekdayym">约满</text><br/>
|
||
<text class="weekday">{{ item.str }}</text>
|
||
|
||
</view>
|
||
</view>
|
||
<view v-if="item.ym==='false'">
|
||
<view class="date-itemstr" v-if="hsstr!=item.str" >
|
||
<text class="weekday">{{ item.str }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</radio-group>
|
||
|
||
|
||
|
||
<view class="footer">
|
||
<button class="appointment-btn" @click="handleSubmit">立即预约</button>
|
||
</view>
|
||
</view>
|
||
</s-layout>
|
||
</template>
|
||
|
||
<script>
|
||
import { baseUrl, apiPath } from '@/sheep/config';
|
||
import { computed } from 'vue';
|
||
import sheep from '@/sheep';
|
||
import { showShareModal, showAuthModal } from '@/sheep/hooks/useModal';
|
||
// import pickerTime from "@/pages/commission/pickerTime.vue"
|
||
// 用户信息
|
||
export default {
|
||
// components: {
|
||
// pickerTime
|
||
// },
|
||
data() {
|
||
return {
|
||
isLogin:null,
|
||
memberId:null,
|
||
// showTime: false,
|
||
serviceTime:[],
|
||
sjd:{},
|
||
ym:[],
|
||
// starhour: 8,
|
||
// starminute: 0,
|
||
// endhour: 18,
|
||
// endminute: 0,
|
||
// timejg: 70,
|
||
|
||
hsstr: "",
|
||
|
||
dateList: [],
|
||
typeList:[
|
||
{dictValue:0,dictLabel:"调理预约"},
|
||
{dictValue:1,dictLabel:"教培预约"}
|
||
],
|
||
typenameList:[],
|
||
addDate: "",
|
||
techList: [], // 技师列表
|
||
//医馆信息
|
||
selectedClinicIndex: 0, // 当前选中的医馆索引
|
||
brandList: [{
|
||
name:""
|
||
}],
|
||
brandNameList: [],
|
||
brandId: "",
|
||
brandName: "",
|
||
selectedDayIndex: 0,
|
||
selecttypeIndex:0,
|
||
techid: 0,
|
||
type: 0,
|
||
};
|
||
},
|
||
created() {
|
||
this.isLogin = computed(() => sheep.$store('user').isLogin);
|
||
this.memberId=computed(() => sheep.$store('user').userInfo).value.id
|
||
this.brandlist();
|
||
|
||
this.generateDateList();
|
||
this.addDate=this.dateList[0].addDate;
|
||
this.gettypeList();
|
||
console.log(apiPath,baseUrl,"import.meta.env.SHOPRO_API_PATH")
|
||
|
||
},
|
||
methods: {
|
||
onClinicChange(event) {
|
||
const selectedClinicIndex = event.detail.value;
|
||
this.selectedClinicIndex = selectedClinicIndex;
|
||
this.brandName = this.brandList[selectedClinicIndex].name
|
||
this.brandId = this.brandList[selectedClinicIndex].id
|
||
this.technicianList();
|
||
},
|
||
ontype(event){
|
||
const selecttypeIndex = event.detail.value;
|
||
this.selecttypeIndex = selecttypeIndex;
|
||
this.typename = this.typeList[selecttypeIndex].dictValue
|
||
this.type = this.typeList[selecttypeIndex].dictValue
|
||
console.log(this.selecttypeIndex)
|
||
this.technicianList();
|
||
},
|
||
// 查询医馆列表
|
||
brandlist() {
|
||
uni.request({
|
||
url: `${baseUrl}/api/h5/brand/list`,
|
||
success: (res) => {
|
||
this.brandList = res.data
|
||
for (var i = 0; i < this.brandList.length; i++) {
|
||
// this.brandList[i].depict=(this.brandList[i].depict).replace(/\<img/gi, '<img style="max-width:100%;height:auto" ')
|
||
this.brandNameList.push(this.brandList[i].name)
|
||
}
|
||
|
||
this.brandId = this.brandList[0].id
|
||
this.technicianList();
|
||
},
|
||
fail: (error) => {
|
||
console.log(error)
|
||
}
|
||
})
|
||
},
|
||
|
||
gettypeList() {
|
||
uni.request({
|
||
url: `${baseUrl}/api/h5/reservation/type`,
|
||
success: (res) => {
|
||
this.typeList = res.data.data
|
||
// this.typeList.depict=this.typeList.depict.replace(/\<img/gi, '<img style="max-width:100%;float:left; height:auto" ')
|
||
for (var i = 0; i < this.typeList.length; i++) {
|
||
this.typenameList.push(this.typeList[i].dictLabel);
|
||
}
|
||
console.log(this.typenameList)
|
||
},
|
||
fail: (error) => {
|
||
console.log(error)
|
||
}
|
||
})
|
||
|
||
|
||
},
|
||
// 查询医生列表
|
||
technicianList() {
|
||
this.techid = null,
|
||
this.serviceTime=[]
|
||
this.hsstr=""
|
||
uni.request({
|
||
// url: 'https://sfyjk.com/api/h5/technician/list',
|
||
url: 'https://sfyjk.com/api/h5/technician/list',
|
||
data: {
|
||
type: this.type,
|
||
// addDate:this.addDate,
|
||
brandId:this.brandId
|
||
},
|
||
success: (res) => {
|
||
console.log(res)
|
||
this.techList = res.data.rows
|
||
console.log(this.techList)
|
||
if (this.techList.length > 0) {
|
||
this.techid=this.techList[0].id
|
||
var item={id:this.techid}
|
||
this.onradio(item);
|
||
}
|
||
|
||
console.log(this.techList)
|
||
|
||
},
|
||
fail: (error) => {
|
||
console.log(error)
|
||
}
|
||
})
|
||
},
|
||
|
||
onradio(item) {
|
||
this.techid = item.id
|
||
this.serviceTime=[]
|
||
this.hsstr=""
|
||
uni.request({
|
||
// url: 'https://sfyjk.com/api/h5/technician/' + this.techid, // 接口地址
|
||
url: 'https://sfyjk.com/api/h5/technician/h5xq', // 接口地址
|
||
data: {
|
||
addDate:this.addDate,
|
||
id:this.techid
|
||
},
|
||
success: (res) => {
|
||
console.log(res);
|
||
var serviceTime=JSON.parse(res.data.data.serviceTime)
|
||
console.log(serviceTime)
|
||
if (serviceTime){
|
||
for (let i = 0; i <serviceTime.length; i++) {
|
||
console.log(serviceTime[i].endTime)
|
||
console.log(serviceTime[i].startTime)
|
||
console.log(serviceTime[i].ym)
|
||
if (serviceTime[i].endTime&&serviceTime[i].startTime){
|
||
this.sjd={},
|
||
this.sjd.str=serviceTime[i].startTime.toString()+"-"+serviceTime[i].endTime.toString()
|
||
this.sjd.ym=serviceTime[i].ym
|
||
this.serviceTime.push(this.sjd)
|
||
}
|
||
}
|
||
}
|
||
console.log(this.serviceTime)
|
||
|
||
},
|
||
fail: (error) => {
|
||
console.log(error)
|
||
}
|
||
})
|
||
|
||
},
|
||
selectDay(index) {
|
||
this.selectedDayIndex = index;
|
||
},
|
||
handleSwiperChange(event) {
|
||
this.selectedDayIndex = event.mp.detail.current;
|
||
},
|
||
formatDate(date) {
|
||
const options = {
|
||
month: "2-digit",
|
||
day: "2-digit"
|
||
};
|
||
return date.toLocaleDateString("en-US", options);
|
||
},
|
||
handleSubmit() {
|
||
this.memberId=computed(() => sheep.$store('user').userInfo).value.id
|
||
if (!this.memberId){
|
||
if (sheep.$platform.name === 'WechatMiniProgram') {
|
||
showAuthModal('wechatMiniLogin')
|
||
return;
|
||
}
|
||
showAuthModal('accountLogin')
|
||
}else{
|
||
this.memberId=computed(() => sheep.$store('user').userInfo).value.id
|
||
if(!this.brandId){
|
||
sheep.$helper.toast('请选择医馆')
|
||
}else if(!this.techid){
|
||
sheep.$helper.toast('请选择技师')
|
||
}else if(!this.addDate){
|
||
sheep.$helper.toast('请选择预约时间')
|
||
}else if(!this.hsstr){
|
||
sheep.$helper.toast('请选择预约时间段')
|
||
}else if(this.memberId){
|
||
uni.request({
|
||
method: "post",
|
||
url: 'https://sfyjk.com/api/h5/reservation',
|
||
data: {
|
||
type: this.type,
|
||
brandId: this.brandId,
|
||
technicianId: this.techid,
|
||
reAddTime: this.addDate,
|
||
hsstr: this.hsstr,
|
||
userId:this.memberId,
|
||
},
|
||
success: (res) => {
|
||
uni.showModal({
|
||
title: '预约提示',
|
||
content: '预约成功！',
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
uni.switchTab({
|
||
url: '/pages/index/user'
|
||
});
|
||
} else {
|
||
uni.switchTab({
|
||
url: '/pages/index/user'
|
||
});
|
||
}
|
||
}
|
||
});
|
||
|
||
},
|
||
fail: (error) => {
|
||
console.log(error)
|
||
}
|
||
})
|
||
|
||
}
|
||
}
|
||
|
||
|
||
|
||
console.log("立即预约");
|
||
},
|
||
|
||
|
||
generateDateList() {
|
||
const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
|
||
const today = new Date();
|
||
for (let i = 0; i < 7; i++) {
|
||
const date = new Date(today);
|
||
date.setDate(date.getDate() + i);
|
||
const formattedDate =
|
||
// `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
|
||
`${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
|
||
const weekday = weekDays[date.getDay()];
|
||
const addDate =
|
||
`${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
|
||
this.dateList.push({
|
||
date,
|
||
formattedDate,
|
||
addDate,
|
||
weekday
|
||
});
|
||
}
|
||
},
|
||
selectDate(index) {
|
||
this.addDate = this.dateList[index].addDate
|
||
if(this.techid){
|
||
var item={id:this.techid}
|
||
this.onradio(item);
|
||
}
|
||
|
||
// 处理选中日期的逻辑，例如触发事件、更新状态等
|
||
console.log('Selected date:', this.addDate);
|
||
},
|
||
selecthsstr(index) {
|
||
console.log(this.serviceTime[index].str)
|
||
console.log(this.serviceTime[index].ym)
|
||
if(this.serviceTime[index].ym==="true"){
|
||
|
||
}else if(this.serviceTime[index].ym==="false"){
|
||
this.hsstr = this.serviceTime[index].str
|
||
}
|
||
|
||
// 处理选中日期的逻辑，例如触发事件、更新状态等
|
||
console.log('Selected hs:', this.hsstr);
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.container {
|
||
padding: 20px;
|
||
}
|
||
|
||
.clinic-select {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.clinic-select-label {
|
||
margin-right: 10px;
|
||
color: #333;
|
||
}
|
||
|
||
.clinic-select-value {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 5px 10px;
|
||
border: 1px solid #ff5541;
|
||
border-radius: 5px;
|
||
background-color: #ffd3c1;
|
||
color: #ff5541;
|
||
}
|
||
|
||
.info-title {
|
||
margin-top: 20px;
|
||
font-size: 15px;
|
||
font-weight: bold;
|
||
margin-bottom: 10px;
|
||
}
|
||
.dropdown-icon {
|
||
width: 12px;
|
||
height: 12px;
|
||
margin-left: 5px;
|
||
}
|
||
|
||
.date-card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.weekdays {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.weekday {
|
||
/* margin-left: 0%; */
|
||
font-size: 5px;
|
||
color: #666;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.weekdayym {
|
||
margin-left: 30%;
|
||
font-size: 14px;
|
||
color: #666;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.weekday.active {
|
||
color: #333;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.date-swiper {
|
||
height: 150px;
|
||
}
|
||
|
||
.date-itemstr {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 80px;
|
||
height: 50px;
|
||
border-radius: 10px;
|
||
background-color: #f0f0f0;
|
||
margin-right: 15px;
|
||
cursor: pointer;
|
||
}
|
||
.date-itemym {
|
||
/* display: flex; */
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 80px;
|
||
height: 50px;
|
||
border-radius: 10px;
|
||
background-color: #f0898b;
|
||
margin-right: 15px;
|
||
cursor: pointer;
|
||
}
|
||
.date-item.active {
|
||
background-color: #ff5541;
|
||
color: #fff;
|
||
}
|
||
|
||
.date {
|
||
font-size: 16px;
|
||
color: #333;
|
||
}
|
||
|
||
.doctor-list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.doctor-card {
|
||
/* display: flex; */
|
||
align-items: center;
|
||
padding: 10px;
|
||
width: 400px;
|
||
background-color: #ffd3c1;
|
||
border: 1px solid #ff5541;
|
||
border-radius: 10px;
|
||
margin-bottom: 10px;
|
||
}
|
||
.doctor-cards {
|
||
/* display: flex; */
|
||
align-items: center;
|
||
padding: 10px;
|
||
width: 400px;
|
||
background-color: #f0f0f0;
|
||
/* border: 1px solid #fff; */
|
||
border-radius: 10px;
|
||
margin-bottom: 10px;
|
||
}
|
||
.doctor-avatar {
|
||
width: 100px;
|
||
height: 70px;
|
||
border-radius: 50%;
|
||
margin-right: 10px;
|
||
}
|
||
.doctor-avatars{
|
||
display: flex;
|
||
/* height: 70px; */
|
||
/* border-radius: 50%; */
|
||
/* margin-right: 10px; */
|
||
}
|
||
.doctor-info {
|
||
display: flex;
|
||
flex-grow: 1;
|
||
|
||
}
|
||
.brandr-info {
|
||
/* display: flex; */
|
||
flex-grow: 1;
|
||
|
||
}
|
||
|
||
.doctor-name {
|
||
font-size: 20px;
|
||
color: #ff5541;
|
||
margin-top: 15px;
|
||
margin-left: 20px;
|
||
/* margin-bottom: 5px; */
|
||
}
|
||
|
||
.doctor-specialty {
|
||
font-size: 14px;
|
||
color: #ff5541;
|
||
|
||
}
|
||
.doctor-names {
|
||
font-size: 14px;
|
||
/* color: #ff5541; */
|
||
|
||
margin-bottom: 5px;
|
||
}
|
||
.ygcontent{
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
}
|
||
.doctor-specialtys {
|
||
/* text-indent: 20px; */
|
||
white-space: pre-wrap;
|
||
font-size: 14px;
|
||
/* color: #ff5541; */
|
||
|
||
}
|
||
.doctor-checkbox {
|
||
margin-left: auto;
|
||
}
|
||
|
||
.footer {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.appointment-btn {
|
||
width: 200px;
|
||
height: 40px;
|
||
border-radius: 20px;
|
||
background-color: #ff5541;
|
||
color: #fff;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.date-list {
|
||
/* width: 100px; */
|
||
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.date-item {
|
||
float: left;
|
||
margin: 5px;
|
||
padding: 5px;
|
||
width: 26px;
|
||
height: 30px;
|
||
border: 1px solid #fff;
|
||
cursor: pointer;
|
||
display: flex;
|
||
background-color: #efefef;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.date-item:hover {
|
||
/* background-color: #ff5541; */
|
||
}
|
||
|
||
.date {
|
||
font-size: 8px;
|
||
}
|
||
|
||
.weekday {
|
||
margin-top: 5px;
|
||
font-size: 10px;
|
||
color: #666;
|
||
}
|
||
|
||
.radiodate {
|
||
display: none;
|
||
}
|
||
</style>
|