1053 lines
27 KiB
Vue
1053 lines
27 KiB
Vue
<template>
|
|
<s-layout color="white" :bgStyle="{ color: '#fff'}" opacityBgUi="" navbarbackgroundColor="transparent">
|
|
|
|
<view class="new-main">
|
|
<view class="top-img">
|
|
<image class="img"
|
|
src="https://zysc.fjptzykj.com:3000/shangcheng/3148160e2dcb79f1a494ad59229976e31bc9f8e1f13b8da073ad3bcd95a36801.png">
|
|
</image>
|
|
</view>
|
|
<!-- <view class="new-all new-top">
|
|
<image class="new-img" :src="brandList.list[selectedClinicIndex].picUrl" mode="aspectFill">
|
|
</image>
|
|
<view class='new-title'>
|
|
<view class='t' v-html="brandList.list[selectedClinicIndex].depict"></view>
|
|
<view class='b'>{{ brandList.list[selectedClinicIndex].address }}</view>
|
|
</view>
|
|
<view class="new-bottom">
|
|
<view class="l">
|
|
<view class="t">
|
|
<image
|
|
src="https://zysc.fjptzykj.com:3000/shangcheng/0f3417cd9adec5b7fce6ac74a4525a3b44803137decbf83bb1608f8723f423e8.png"
|
|
class="img"></image>
|
|
莆田市城厢区万达广场对面
|
|
</view>
|
|
<view class="t">
|
|
<image
|
|
src="https://zysc.fjptzykj.com:3000/shangcheng/3160a894c5c816f62574dd66eed01930eaa5c28126c3170eab0f622c3ab88115.png"
|
|
class="img"></image>
|
|
每周二至周日
|
|
</view>
|
|
</view>
|
|
<view class="r">
|
|
<image class="img"
|
|
src="https://zysc.fjptzykj.com:3000/shangcheng/a0661763abe4539e376cc22eaf79a6de1e99a253c37281d3d3944abcd81a7227.png">
|
|
</image>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
<view class="new-all">
|
|
<view class="title">
|
|
<image
|
|
src="https://zysc.fjptzykj.com:3000/shangcheng/617bb18286a76a4c8bfc377bf69f7436c478252e419f04cdd9a6070dd352d00f.png"
|
|
class="img"></image>
|
|
<text class='text'>门店选择</text>
|
|
</view>
|
|
<picker mode="selector" :range="brandNameList" @change="onClinicChange">
|
|
<view class="clinic-select-value">
|
|
<text>{{ ll}}</text>
|
|
<image src="@/static/images/dayu.png" class="img"></image>
|
|
</view>
|
|
</picker>
|
|
<view class="title">
|
|
<image
|
|
src="https://zysc.fjptzykj.com:3000/shangcheng/617bb18286a76a4c8bfc377bf69f7436c478252e419f04cdd9a6070dd352d00f.png"
|
|
class="img"></image>
|
|
<text class='text'>项目选择</text>
|
|
</view>
|
|
|
|
<picker mode="selector" :range="brandNameList" @change="onClinicChange">
|
|
<view class="clinic-select-value">
|
|
<text>{{ ll}}</text>
|
|
<image src="@/static/images/dayu.png" class="img"></image>
|
|
</view>
|
|
</picker>
|
|
<!-- 项目选择列表 -->
|
|
<view class="new-project">
|
|
<view class="list" @click="onradio(item)" :class="this.techid == item.id ? 'on': ''"
|
|
v-for="(item, index) in techList" :key="index">
|
|
<view class="l">
|
|
<image
|
|
src="https://zysc.fjptzykj.com:3000/shangcheng/e940fb45cc53df01980b7069432d5101e104014fbb3cd24862d08c1ffba9df68.png"
|
|
class='img'></image>
|
|
</view>
|
|
<view class="r">
|
|
<view class="tt">
|
|
<image class='img img1'
|
|
src="https://zysc.fjptzykj.com:3000/shangcheng/d0a91de26065e4753357ed32f301d2ed9c8a9b10e789c9cddf5f5a93903af9da.png">
|
|
</image>
|
|
<image class='img img2'
|
|
src="https://zysc.fjptzykj.com:3000/shangcheng/f9e69fd9b1e60481f3ba926d1942d65e34c90916329823a16ce703f6fe36b2e9.png">
|
|
</image>
|
|
关于UI视觉设计方案需求评审
|
|
</view>
|
|
<view class="tt ttr">
|
|
<image class='img img1'
|
|
src="https://zysc.fjptzykj.com:3000/shangcheng/10b4a5f0abb36bb1a4ef71f36ffc867330d34844abd897a59889dc9a61b9c2af.png">
|
|
</image>
|
|
<image class='img img2'
|
|
src="https://zysc.fjptzykj.com:3000/shangcheng/a4a5541795df5e89912762bfb29900d8ab420abbda2753b2d22741e29e0ea150.png">
|
|
</image>
|
|
关于UI视觉设计方案需求评审
|
|
</view>
|
|
<view class="tt ttr">
|
|
<image class='img img1'
|
|
src="https://zysc.fjptzykj.com:3000/shangcheng/f197edf433c7c80703de38cf49f9bbef64192de14ec284950a023d68bcad792a.png">
|
|
</image>
|
|
<image class='img img2'
|
|
src="https://zysc.fjptzykj.com:3000/shangcheng/ca834c977ae99a35db90b5cef48c729c9ce953840a86847cb926d9752f58c0d7.png">
|
|
</image>
|
|
关于UI视觉设计方案需求评审
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="title">
|
|
<image
|
|
src="https://zysc.fjptzykj.com:3000/shangcheng/617bb18286a76a4c8bfc377bf69f7436c478252e419f04cdd9a6070dd352d00f.png"
|
|
class="img"></image>
|
|
<text class='text'>套餐选择</text>
|
|
</view>
|
|
<picker mode="selector" :range="brandNameList" @change="onClinicChange">
|
|
<view class="clinic-select-value">
|
|
<text>{{ ll}}</text>
|
|
<image src="@/static/images/dayu.png" class="img"></image>
|
|
</view>
|
|
</picker>
|
|
|
|
<view class="title">
|
|
<image
|
|
src="https://zysc.fjptzykj.com:3000/shangcheng/617bb18286a76a4c8bfc377bf69f7436c478252e419f04cdd9a6070dd352d00f.png"
|
|
class="img"></image>
|
|
<text class='text'>预约日期</text>
|
|
</view>
|
|
<view class="date-list">
|
|
<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
|
|
<view class="scroll-view-item_H" v-for="(item, index) in dateList" :key="index"
|
|
@click="selectDate(index)">
|
|
<view class="date-item" v-if="addDate==item.addDate"
|
|
style="background-color: rgba(228,241,255);border: 1px solid rgba(3,150,248);">
|
|
<text class="date" style="color: black;">{{ item.formattedDate }}</text>
|
|
<text class="weekday" style="color: rgba(82,82,2,83);">{{ 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>
|
|
</scroll-view>
|
|
|
|
</view>
|
|
|
|
<view class="title" style="margin-top:10px;">
|
|
<image
|
|
src="https://zysc.fjptzykj.com:3000/shangcheng/617bb18286a76a4c8bfc377bf69f7436c478252e419f04cdd9a6070dd352d00f.png"
|
|
class="img"></image>
|
|
<text class='text'>预约时段</text>
|
|
</view>
|
|
|
|
<view class="date-list">
|
|
<view class="new-nei" v-for="(item, index) in serviceTime" :key="index">
|
|
<view class="date-list-new" @click="selecthsstr(index)" :class="hsstr==item.str ? 'on':''">
|
|
<view class="date-itemstr" v-if="hsstr==item.str">
|
|
<text class="weekday">{{ item.str }}</text>
|
|
</view>
|
|
|
|
<view v-if="item.ym==='true'" class="new-jk">
|
|
<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'" class="new-jk">
|
|
<view class="date-itemstr" v-if="hsstr!=item.str">
|
|
<text class="weekday">{{ item.str }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="title" style="margin-top:10px;">
|
|
<image
|
|
src="https://zysc.fjptzykj.com:3000/shangcheng/617bb18286a76a4c8bfc377bf69f7436c478252e419f04cdd9a6070dd352d00f.png"
|
|
class="img"></image>
|
|
<text class='text'>预约信息</text>
|
|
</view>
|
|
|
|
<view class="yyxx-input">
|
|
<view class="name">
|
|
姓名:<input class="int" placeholder="请输入您的名字" placeholder-style="color:rgba(204,204,204)" />
|
|
</view>
|
|
<view class="phone">
|
|
电话:<input class="int" placeholder="请输入您的电话" placeholder-style="color:rgba(204,204,204)" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
<view class="footer" @click="handleSubmit">
|
|
立即预约
|
|
</view>
|
|
</view>
|
|
<view class="container">
|
|
|
|
|
|
<!-- <view class="doctor-list">
|
|
<view class="doctor-cards">
|
|
<image class="doctor-avatars" :src="brandList.list[selectedClinicIndex].picUrl" mode="aspectFill">
|
|
</image><br /><br />
|
|
<view class="brandr-info">
|
|
<text class="doctor-names">
|
|
<text class="ygcontent">医馆地址：</text>
|
|
{{ brandList.list[selectedClinicIndex].address }}</text><br /><br />
|
|
<rich-text class="doctor-specialtys"
|
|
:nodes="brandList.list[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>{{ ll}}</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>{{ gg }}</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 request from '@/sheep/request';
|
|
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,
|
|
ll: '请选择',
|
|
gg: '请选择'
|
|
};
|
|
},
|
|
created() {
|
|
this.isLogin = computed(() => sheep.$store('user').isLogin);
|
|
this.memberId = computed(() => sheep.$store('user').userInfo).value.id
|
|
this.brandlists();
|
|
|
|
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.list[selectedClinicIndex].name
|
|
this.brandId = this.brandList.list[selectedClinicIndex].id
|
|
console.log("dddddddddddd")
|
|
this.ll = this.brandList.list[selectedClinicIndex].name
|
|
this.technicianList();
|
|
},
|
|
ontype(event) {
|
|
const selecttypeIndex = event.detail.value;
|
|
this.selecttypeIndex = selecttypeIndex;
|
|
this.typename = this.typeList[selecttypeIndex].dictValue
|
|
this.type = this.typeList[selecttypeIndex].value
|
|
console.log(this.type, "this.type")
|
|
this.gg = this.typeList[selecttypeIndex].label
|
|
this.technicianList();
|
|
},
|
|
// 查询医馆列表
|
|
brandlists() {
|
|
request({
|
|
url: `${baseUrl}${apiPath}/h5/brand/list`,
|
|
method: 'GET',
|
|
custom: {
|
|
showLoading: false,
|
|
},
|
|
}).then((res) => {
|
|
this.brandList = res.data
|
|
console.log(this.brandList, "this.brandList")
|
|
for (var i = 0; i < this.brandList.list.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.list[i].name)
|
|
}
|
|
|
|
this.brandId = this.brandList[0].id
|
|
this.technicianList();
|
|
});
|
|
// 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() {
|
|
request({
|
|
url: `${baseUrl}${apiPath}/h5/reservation/type`,
|
|
method: 'GET',
|
|
custom: {
|
|
showLoading: false,
|
|
},
|
|
}).then((res) => {
|
|
console.log(res, "typeListtypeList")
|
|
this.typeList = res.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].label);
|
|
}
|
|
console.log(this.typenameList)
|
|
});
|
|
// 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() {
|
|
console.log("有没有进来technicianList");
|
|
this.techid = null,
|
|
this.serviceTime = []
|
|
this.hsstr = ""
|
|
request({
|
|
url: `${baseUrl}${apiPath}/h5/technician/list`,
|
|
method: 'GET',
|
|
params: {
|
|
type: this.type,
|
|
// addDate:this.addDate,
|
|
brandId: this.brandId
|
|
},
|
|
custom: {
|
|
showLoading: false,
|
|
},
|
|
}).then((res) => {
|
|
console.log(res)
|
|
this.techList = res.data.list
|
|
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)
|
|
});
|
|
// uni.request({
|
|
// // url: 'https://sfyjk.com/api/h5/technician/list',
|
|
// url: `${baseUrl}/app-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 = ""
|
|
request({
|
|
url: `${baseUrl}${apiPath}/h5/technician/h5xq`,
|
|
method: 'GET',
|
|
params: {
|
|
addDate: this.addDate,
|
|
id: this.techid
|
|
},
|
|
custom: {
|
|
showLoading: false,
|
|
},
|
|
}).then((res) => {
|
|
console.log(res);
|
|
var serviceTime = JSON.parse(res.data.serviceTime)
|
|
console.log(serviceTime, "serviceTimeserviceTimeserviceTime")
|
|
if (serviceTime) {
|
|
for (let i = 0; i < serviceTime.length; i++) {
|
|
console.log(serviceTime[i].end)
|
|
console.log(serviceTime[i].start)
|
|
console.log(serviceTime[i].ym)
|
|
if (serviceTime[i].end && serviceTime[i].start) {
|
|
this.sjd = {},
|
|
this.sjd.str = serviceTime[i].start.toString() + "-" + serviceTime[
|
|
i].end.toString()
|
|
this.sjd.ym = serviceTime[i].ym
|
|
this.serviceTime.push(this.sjd)
|
|
}
|
|
}
|
|
}
|
|
console.log(this.serviceTime, "this.serviceTime")
|
|
});
|
|
|
|
|
|
},
|
|
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) {
|
|
request({
|
|
url: `${baseUrl}/app-api/h5/reservation/add`,
|
|
method: 'post',
|
|
params: {
|
|
type: this.type,
|
|
brandId: this.brandId,
|
|
technicianId: this.techid,
|
|
reAddTime: this.addDate,
|
|
hsstr: this.hsstr,
|
|
userId: this.memberId,
|
|
},
|
|
custom: {
|
|
showLoading: false,
|
|
},
|
|
}).then((res) => {
|
|
uni.showModal({
|
|
title: '预约提示',
|
|
content: '预约成功！',
|
|
success: function(res) {
|
|
if (res.confirm) {
|
|
uni.switchTab({
|
|
url: '/pages/index/user'
|
|
});
|
|
} else {
|
|
uni.switchTab({
|
|
url: '/pages/index/user'
|
|
});
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
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('this.serviceTimesss:', this.serviceTime[index].ym);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scope lang="scss">
|
|
.new-main {
|
|
width: 100%;
|
|
margin-top: -3rem;
|
|
background-color: rgba(237, 249, 254);
|
|
|
|
.top-img {
|
|
.img {
|
|
width: 100%;
|
|
height: 153px;
|
|
}
|
|
}
|
|
|
|
.new-all {
|
|
width: 93%;
|
|
margin: 15px auto;
|
|
background: white;
|
|
padding: 10px 0;
|
|
border-radius: 9px;
|
|
|
|
.yyxx-input {
|
|
padding: 10px;
|
|
|
|
&>view {
|
|
padding: 15px 0;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.name {
|
|
border-bottom: 1px solid rgba(229, 229, 229);
|
|
}
|
|
|
|
.int {
|
|
padding-left: 15px;
|
|
}
|
|
}
|
|
|
|
.new-project {
|
|
.list {
|
|
padding: 10px 20px;
|
|
background: rgba(246, 247, 251);
|
|
display: flex;
|
|
margin: 10px 10px;
|
|
border-radius: 5px;
|
|
align-items: center;
|
|
|
|
&.on {
|
|
background: rgb(0, 149, 248);
|
|
|
|
.r {
|
|
.tt {
|
|
color: white;
|
|
|
|
.img2 {
|
|
display: block;
|
|
}
|
|
|
|
.img1 {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.l {
|
|
width: 50px;
|
|
height: 50px;
|
|
margin-right: 10px;
|
|
|
|
.img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.r {
|
|
padding-left: 15px;
|
|
position: relative;
|
|
|
|
&::after {
|
|
position: absolute;
|
|
content: '';
|
|
height: 100%;
|
|
width: 1px;
|
|
background: #c4c4c4;
|
|
top: 50%;
|
|
left: 0;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.tt {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 8px;
|
|
|
|
|
|
.img {
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.img2 {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.ttr {
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.clinic-select-value {
|
|
margin: 10px 10px;
|
|
border: 1px solid #efefef;
|
|
padding: 10px 20px;
|
|
border-radius: 26px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.img {
|
|
width: 25px;
|
|
height: 25px;
|
|
}
|
|
}
|
|
|
|
.title {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 0 10px;
|
|
|
|
.img {
|
|
width: 8px;
|
|
height: 20px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.text {
|
|
font-size: 17px;
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
|
|
.date-list {
|
|
// display: flex;
|
|
// flex-wrap: wrap;
|
|
// justify-content: center;
|
|
margin-top: 10px;
|
|
padding: 0 5px;
|
|
min-height: 53px;
|
|
|
|
.scroll-view_H {
|
|
white-space: nowrap;
|
|
width: 100%;
|
|
|
|
.scroll-view-item_H {
|
|
display: inline-block;
|
|
// width: 100%;
|
|
// height: 300rpx;
|
|
// line-height: 300rpx;
|
|
// text-align: center;
|
|
// font-size: 36rpx;
|
|
}
|
|
}
|
|
|
|
.new-nei {
|
|
padding: 5px;
|
|
width: 30%;
|
|
float: left;
|
|
|
|
.date-list-new {
|
|
border: 1px solid #efefef;
|
|
text-align: center;
|
|
padding: 10px 0;
|
|
border-radius: 6px;
|
|
|
|
&.on {
|
|
background: rgb(0, 149, 248);
|
|
|
|
.date-itemstr {
|
|
|
|
// background-color: #ff5541;
|
|
.weekday {
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
|
|
.date-itemstr {
|
|
|
|
// background-color: #ff5541;
|
|
.weekday {}
|
|
}
|
|
|
|
.new-jk {
|
|
.date-itemym {
|
|
.weekdayym {}
|
|
|
|
.weekday {}
|
|
}
|
|
|
|
.date-itemstr {
|
|
.weekday {}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.date-item {
|
|
border-radius: 8px;
|
|
float: left;
|
|
margin: 5px;
|
|
padding: 5px;
|
|
width: 26px;
|
|
height: 30px;
|
|
border: 1px solid rgba(229, 229, 229);
|
|
cursor: pointer;
|
|
display: flex;
|
|
background-color: white;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
&:hover {
|
|
background-color: #ff5541;
|
|
}
|
|
|
|
.date {
|
|
font-size: 8px;
|
|
}
|
|
|
|
.weekday {
|
|
margin-top: 5px;
|
|
font-size: 10px;
|
|
color: #666;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.new-top {
|
|
padding: 0 0;
|
|
|
|
.new-img {
|
|
width: 100%;
|
|
height: 150px;
|
|
border-radius: 9px 9px 0 0;
|
|
}
|
|
|
|
.new-title {
|
|
padding: 10px;
|
|
|
|
.t {
|
|
width: 100%;
|
|
font-size: 20px;
|
|
color: black;
|
|
}
|
|
|
|
.b {
|
|
width: 100%;
|
|
font-size: 15px;
|
|
color: rgba(154, 154, 154);
|
|
position: relative;
|
|
padding-bottom: 15px;
|
|
|
|
&::after {
|
|
position: absolute;
|
|
content: '';
|
|
bottom: 0;
|
|
height: 1px;
|
|
width: 100%;
|
|
background: #e8e3e3;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.new-bottom {
|
|
padding: 10px;
|
|
padding-top: 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.l {
|
|
.t {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 10px;
|
|
|
|
.img {
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.r {
|
|
position: relative;
|
|
width: 40px;
|
|
padding-left: 14px;
|
|
|
|
&::after {
|
|
position: absolute;
|
|
content: '';
|
|
left: 0;
|
|
height: 35px;
|
|
width: 1px;
|
|
background: #e8e3e3;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.img {
|
|
width: 20px;
|
|
height: 20px;
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.footer {
|
|
padding: 10px 0;
|
|
border-radius: 15px;
|
|
background: rgb(0, 149, 248);
|
|
margin: 0 10px;
|
|
text-align: center;
|
|
color: white;
|
|
}
|
|
</style> |