783 lines
17 KiB
Vue
783 lines
17 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">
|
|
<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="brandNameList2" @change="onClinicChange2">
|
|
<view class="clinic-select-value">
|
|
<text>{{ll2}}</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="brandNameList3" @change="onClinicChange3">
|
|
<view class="clinic-select-value">
|
|
<text>{{ll3}}</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" :class="brandId4 == item.id ? 'on':''">
|
|
<text class="date" style="color: black;">{{ item.days.slice(5) }}</text>
|
|
<text class="weekday" style="color: rgba(82,82,2,83);">{{ item.week }}</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 brandList4" :key="index">
|
|
<view class="date-list-new" @click="selecthsstr(index,item.status)"
|
|
:class="{'on' : brandId5 == item.id,'hui' : item.status == 0}" v-if="brandList3.length>0">
|
|
<view class="date-itemstr">
|
|
<view class="weekday">{{ item.timeQuantum }}</view>
|
|
|
|
<view class="weekday">剩余{{item.residueNumber}}</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
<view style="clear:both;"></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" v-model="name" placeholder="请输入您的名字"
|
|
placeholder-style="color:rgba(204,204,204)" />
|
|
</view>
|
|
<view class="phone">
|
|
电话:<input class="int" v-model="phone" placeholder="请输入您的电话"
|
|
placeholder-style="color:rgba(204,204,204)" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="footer" @click="brandlists9">
|
|
立即预约
|
|
</view>
|
|
</view>
|
|
<fui-toast ref="toast"></fui-toast>
|
|
</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';
|
|
// 用户信息
|
|
export default {
|
|
data() {
|
|
return {
|
|
isLogin: null,
|
|
memberId: null,
|
|
serviceTime: [],
|
|
sjd: {},
|
|
ym: [],
|
|
hsstr: "",
|
|
dateList: [],
|
|
typeList: [{
|
|
dictValue: 0,
|
|
dictLabel: "调理预约"
|
|
},
|
|
{
|
|
dictValue: 1,
|
|
dictLabel: "教培预约"
|
|
}
|
|
],
|
|
typenameList: [],
|
|
addDate: "",
|
|
techList: [], // 技师列表
|
|
selectedClinicIndex: 0, // 当前选中的门店索引
|
|
selectedClinicIndex2: 0, // 当前选中的项目索引
|
|
selectedClinicIndex3: 0, // 当前选中的项目索引
|
|
brandList: [], //门店列表数据
|
|
brandList2: [], //项目列表数据
|
|
brandList3: [], //套餐列表数据
|
|
brandList4: [], //时段列表数据
|
|
brandNameList: [], //门店列表
|
|
brandNameList2: [], //项目列表
|
|
brandNameList3: [], //套餐列表
|
|
brandId: "", //门店当前选中id
|
|
brandId2: "", //项目当前选中id
|
|
brandId3: "", //套餐当前选中id
|
|
brandId4: "", //预约日期当前选中id
|
|
brandId5: "", //时段当前选中id
|
|
brandName: "",
|
|
selectedDayIndex: 0,
|
|
selecttypeIndex: 0,
|
|
techid: 0,
|
|
type: 0,
|
|
ll: '请选择',
|
|
ll2: '请选择',
|
|
ll3: '请选择',
|
|
ll5: '请选择', //时间段日常显示
|
|
ll6: '请选择', //时间段日常显示
|
|
gg: '请选择',
|
|
dateIndex: '', //时间的状态
|
|
name: '',
|
|
phone: ''
|
|
};
|
|
},
|
|
created() {
|
|
this.isLogin = computed(() => sheep.$store('user').isLogin);
|
|
this.memberId = computed(() => sheep.$store('user').userInfo).value.id
|
|
this.brandlists(); //调用门店列表
|
|
|
|
},
|
|
methods: {
|
|
onClinicChange(event) {
|
|
|
|
this.brandId = ''
|
|
this.brandId2 = ''
|
|
this.brandId3 = ''
|
|
this.brandId4 = ''
|
|
this.brandId5 = ''
|
|
this.name = ''
|
|
this.phone = ''
|
|
this.ll2 = '请选择'
|
|
this.ll3 = '请选择'
|
|
this.brandNameList2 = []
|
|
this.brandNameList3 = []
|
|
this.dateList = []
|
|
this.brandList3 = []
|
|
|
|
const selectedClinicIndex = event.detail.value;
|
|
this.selectedClinicIndex = selectedClinicIndex;
|
|
this.ll = this.brandList[selectedClinicIndex].name
|
|
this.brandId = this.brandList[selectedClinicIndex].id
|
|
this.brandlists2();
|
|
},
|
|
onClinicChange2(event) {
|
|
|
|
this.brandId3 = ''
|
|
this.brandId4 = ''
|
|
this.brandId5 = ''
|
|
this.name = ''
|
|
this.phone = ''
|
|
this.ll3 = '请选择'
|
|
this.brandNameList3 = []
|
|
this.dateList = []
|
|
this.brandList3 = []
|
|
|
|
const selectedClinicIndex = event.detail.value;
|
|
this.selectedClinicIndex2 = selectedClinicIndex;
|
|
this.ll2 = this.brandList2[selectedClinicIndex].name
|
|
this.brandId2 = this.brandList2[selectedClinicIndex].id
|
|
this.setDate();
|
|
this.brandlists3();
|
|
},
|
|
onClinicChange3(event) {
|
|
|
|
|
|
const selectedClinicIndex = event.detail.value;
|
|
this.selectedClinicIndex3 = selectedClinicIndex;
|
|
this.ll3 = this.brandList3[selectedClinicIndex].name
|
|
this.brandId3 = this.brandList3[selectedClinicIndex].id
|
|
},
|
|
ontype(event) {
|
|
const selecttypeIndex = event.detail.value;
|
|
this.selecttypeIndex = selecttypeIndex;
|
|
this.typename = this.typeList[selecttypeIndex].dictValue
|
|
this.type = this.typeList[selecttypeIndex].value
|
|
this.gg = this.typeList[selecttypeIndex].label
|
|
this.technicianList();
|
|
},
|
|
// 查询门店列表
|
|
brandlists() {
|
|
request({
|
|
url: `${baseUrl}${apiPath}/h5/brand/getBrand`,
|
|
method: 'GET',
|
|
custom: {
|
|
showLoading: false,
|
|
},
|
|
}).then((res) => {
|
|
this.brandList = res.data
|
|
for (var i = 0; i < this.brandList.length; i++) {
|
|
this.brandNameList.push(this.brandList[i].name)
|
|
}
|
|
});
|
|
},
|
|
// 查询项目列表
|
|
brandlists2() {
|
|
this.brandNameList2 = [];
|
|
this.brandList2 = [];
|
|
request({
|
|
url: `${baseUrl}${apiPath}/h5/project/getProject`,
|
|
method: 'GET',
|
|
params: {
|
|
id: this.brandId
|
|
},
|
|
custom: {
|
|
showLoading: false,
|
|
},
|
|
}).then((res) => {
|
|
this.brandList2 = res.data
|
|
for (var i = 0; i < this.brandList2.length; i++) {
|
|
this.brandNameList2.push(this.brandList2[i].name)
|
|
}
|
|
});
|
|
},
|
|
// 查询日期列表
|
|
setDate() {
|
|
request({
|
|
url: `${baseUrl}${apiPath}/h5/projectday/getProjectday`,
|
|
method: 'GET',
|
|
params: {
|
|
id: this.brandId2
|
|
},
|
|
custom: {
|
|
showLoading: false,
|
|
},
|
|
}).then((res) => {
|
|
this.dateList = res.data;
|
|
});
|
|
},
|
|
// 查询套餐列表
|
|
brandlists3() {
|
|
this.brandList3 = []
|
|
this.brandNameList3 = []
|
|
request({
|
|
url: `${baseUrl}${apiPath}/h5/technician/getTechnician`,
|
|
method: 'GET',
|
|
params: {
|
|
id: this.brandId2
|
|
},
|
|
custom: {
|
|
showLoading: false,
|
|
},
|
|
}).then((res) => {
|
|
if (res) {
|
|
|
|
}
|
|
this.brandList3 = res.data
|
|
for (var i = 0; i < this.brandList3.length; i++) {
|
|
this.brandNameList3.push(this.brandList3[i].name)
|
|
}
|
|
});
|
|
},
|
|
// 查询预约时段列表
|
|
brandlists4() {
|
|
request({
|
|
url: `${baseUrl}${apiPath}/h5/configuration/getConfiguration`,
|
|
method: 'GET',
|
|
params: {
|
|
projectdayId: this.brandId4,
|
|
technicianId: this.brandId3
|
|
},
|
|
custom: {
|
|
showLoading: false,
|
|
},
|
|
}).then((res) => {
|
|
this.brandList4 = res.data
|
|
});
|
|
},
|
|
// 提交表单接口
|
|
brandlists9() {
|
|
if (!this.brandId) {
|
|
sheep.$helper.toast('请选择门店')
|
|
} else if (!this.brandId2) {
|
|
sheep.$helper.toast('请选择项目')
|
|
} else if (!this.brandId3) {
|
|
sheep.$helper.toast('请选择套餐')
|
|
} else if (!this.brandId4) {
|
|
sheep.$helper.toast('请选择预约日期')
|
|
} else if (!this.brandId5) {
|
|
sheep.$helper.toast('请选择预约时段')
|
|
} else if (!this.name) {
|
|
sheep.$helper.toast('请填写姓名')
|
|
} else if (!this.phone) {
|
|
sheep.$helper.toast('请填写电话')
|
|
} else {
|
|
request({
|
|
url: `${baseUrl}${apiPath}/h5/reservation/addReservation`,
|
|
method: 'GET',
|
|
params: {
|
|
brandId: this.brandId,
|
|
projectId: this.brandId2,
|
|
technicianId: this.brandId3,
|
|
projectdayId: this.brandId4,
|
|
timeId: this.brandId5,
|
|
name: this.name,
|
|
phone: this.phone
|
|
},
|
|
custom: {
|
|
showLoading: false,
|
|
},
|
|
}).then((res) => {
|
|
if (res.code == 0) {
|
|
|
|
|
|
sheep.$router.go('/pages/subscribe/success_tolse', {
|
|
brandId: this.ll, //门店名称
|
|
projectId: this.ll2, //项目名称
|
|
technicianId: this.ll3, //套餐名称
|
|
projectdayId: this.ll5, //预约日期
|
|
timeId: this.ll6, //预约时段
|
|
name: this.name, //名字
|
|
phone: this.phone //电话
|
|
})
|
|
|
|
|
|
|
|
// let options = {}
|
|
//提示信息
|
|
// options.text = '提交成功';
|
|
//图标图片地址
|
|
// options.src = "https://zysc.fjptzykj.com:3000/shangcheng/44252dee36b3ba686967c33e911b15c565f5ccc4c7b2a9f56e43418da949b7c2.png";
|
|
// this.$refs.toast.show(options)
|
|
// setTimeout(()=>{
|
|
// sheep.$router.go('/pages/index/user')
|
|
// },1000)
|
|
}
|
|
});
|
|
|
|
|
|
}
|
|
|
|
},
|
|
// 删除前五位数字
|
|
delete(val) {},
|
|
//查看时段接口
|
|
selectDate(index) {
|
|
if (this.brandId3 == '') {
|
|
sheep.$helper.toast('请先选择套餐')
|
|
return;
|
|
}
|
|
this.dateIndex = index;
|
|
this.brandId4 = this.dateList[index].id;
|
|
this.ll5 = this.dateList[index].days;
|
|
this.brandlists4();
|
|
},
|
|
selecthsstr(index, status) {
|
|
console.log(this.brandList4[index].timeQuantum, "查看时段")
|
|
if (status == 0) {
|
|
this.brandId5 = '';
|
|
sheep.$helper.toast('该时间段已约满')
|
|
return;
|
|
}
|
|
this.brandId5 = this.brandList4[index].id;
|
|
this.ll6 = this.brandList4[index].timeQuantum;
|
|
}
|
|
},
|
|
};
|
|
</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: #e4f1ff;
|
|
|
|
.date-itemstr {
|
|
|
|
// background-color: #ff5541;
|
|
.weekday {}
|
|
}
|
|
}
|
|
|
|
&.hui {
|
|
user-select: none;
|
|
background: #f6f6f6;
|
|
}
|
|
|
|
.date-itemstr {
|
|
|
|
// background-color: #ff5541;
|
|
.weekday {
|
|
color: black;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
.new-jk {
|
|
.date-itemym {
|
|
.weekdayym {}
|
|
|
|
.weekday {}
|
|
}
|
|
|
|
.date-itemstr {
|
|
.weekday {}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.date-item {
|
|
border-radius: 8px;
|
|
float: left;
|
|
margin: 5px;
|
|
padding: 8px 0;
|
|
width: 59px;
|
|
height: 46px;
|
|
border: 1px solid #e5e5e5;
|
|
cursor: pointer;
|
|
display: flex;
|
|
background-color: white;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
|
|
&:hover {
|
|
// background-color: #ff5541;
|
|
}
|
|
|
|
&.on {
|
|
background-color: rgba(228, 241, 255);
|
|
border: 1px solid rgba(3, 150, 248);
|
|
}
|
|
|
|
.date {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.weekday {
|
|
margin-top: 5px;
|
|
font-size: 12px;
|
|
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> |