402 lines
10 KiB
Vue
402 lines
10 KiB
Vue
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<view class="select-address" v-if="citySyrCount">
|
|||
|
|
<text class="select-address-title">预约信息</text>
|
|||
|
|
<view class="select-address-card flex-row-center-between border-bottom">
|
|||
|
|
<text class="select-address-card-title">到家地址</text>
|
|||
|
|
<view class="select-address-card-right flex-row-center" @click="goToAddress">
|
|||
|
|
<text class="card-right-text1" v-if="!reservationAddress.id">请选择</text>
|
|||
|
|
<view v-else>
|
|||
|
|
<text class="card-right-text2">{{
|
|||
|
|
reservationAddress.server_address
|
|||
|
|
}}</text>
|
|||
|
|
<text class="card-right-text1">{{
|
|||
|
|
reservationAddress.name + " " + reservationAddress.call_phone
|
|||
|
|
}}</text>
|
|||
|
|
</view>
|
|||
|
|
<image class="card-right-img" src="/static/images/wallet/right.png"></image>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<view class="select-address-card flex-row-center-between">
|
|||
|
|
<text class="select-address-card-title">服务人员</text>
|
|||
|
|
<view class="select-address-card-right flex-row-center" @click="goSelectSyr">
|
|||
|
|
<view style="width: 425rpx;justify-content: flex-end;" class="flex-row-center">
|
|||
|
|
<image v-if="reservationSyr.head_photo" class="card-right-photo" :src="reservationSyr.head_photo" />
|
|||
|
|
<text class="card-right-text1" style="width: auto;" v-if="!reservationSyr.id">请选择</text>
|
|||
|
|
<text class="card-right-text2" style="width: auto;" v-else>{{ reservationSyr.name }}</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<image class="card-right-img" src="/static/images/wallet/right.png"></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="select-address-card flex-row-center-between">
|
|||
|
|
<text class="select-address-card-title">到家时间</text>
|
|||
|
|
<view class="select-address-card-right flex-row-center" @click="openTimePicker">
|
|||
|
|
<text class="card-right-text2" v-if="reservationTime.selectedTime">{{
|
|||
|
|
reservationTime.selectedTime
|
|||
|
|
}}</text>
|
|||
|
|
|
|||
|
|
<text class="card-right-text1" v-else>请选择</text>
|
|||
|
|
<image class="card-right-img" src="/static/images/wallet/right.png"></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="select-address-tip" v-if="reservationAddress.dependency_city != userAdrees.cCode && Object.keys(this.reservationAddress).length != 0">
|
|||
|
|
<image src="/static/images/background/tipBj.png" class="select-address-tip-bj"></image>
|
|||
|
|
<text class="select-address-tip-text">你当前定位是{{ userAdrees.address.city }}，所选到家地址暂不支持下单，请切换合适的定位/到家地址后操作</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<image v-else class="store-tip" src="/static/images/background/storeTip3.png" />
|
|||
|
|
|
|||
|
|
<!-- 时间选择弹框 -->
|
|||
|
|
<select-time-page ref="selecTime" :timeOptions="timeOptions" :service="serviceInfo"
|
|||
|
|
:publish_user_id="reservationSyr.id" :server_type="1" @sureTime="sureTime"
|
|||
|
|
@closeTime="closeTime"></select-time-page>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import selectTimePage from "@/components/select-time-page/select-time-page.vue";
|
|||
|
|
import request from "@/utils/request";
|
|||
|
|
export default {
|
|||
|
|
name: "Selectaddress",
|
|||
|
|
components: {
|
|||
|
|
selectTimePage,
|
|||
|
|
},
|
|||
|
|
props: {
|
|||
|
|
id: {
|
|||
|
|
type: [String, Number],
|
|||
|
|
default: "",
|
|||
|
|
},
|
|||
|
|
serviceInfo: {
|
|||
|
|
type: Object,
|
|||
|
|
default: () => ({}),
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
computed: {
|
|||
|
|
reservationAddress() {
|
|||
|
|
return this.$store.state.reservationAddress;
|
|||
|
|
},
|
|||
|
|
reservationSyr() {
|
|||
|
|
return this.$store.state.reservationSyr;
|
|||
|
|
},
|
|||
|
|
reservationTime() {
|
|||
|
|
return this.$store.state.reservationTime;
|
|||
|
|
},
|
|||
|
|
userAdrees(){
|
|||
|
|
return uni.getStorageSync("userAdrees").addressRes || getApp().globalData.addressRes;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
citySyrCount: 1, //城市内手艺人数量
|
|||
|
|
syrCount: 1, //区域内手艺人数量
|
|||
|
|
timeOptions: [],
|
|||
|
|
// 服务信息
|
|||
|
|
service: {
|
|||
|
|
photo: [],
|
|||
|
|
server_kind: "",
|
|||
|
|
title: "",
|
|||
|
|
server_price: "",
|
|||
|
|
},
|
|||
|
|
queryData: {
|
|||
|
|
limit: 1,
|
|||
|
|
page: 1,
|
|||
|
|
name: "",
|
|||
|
|
id: 1,
|
|||
|
|
},
|
|||
|
|
// 时间信息
|
|||
|
|
selected_time: "",
|
|||
|
|
selected_date: "",
|
|||
|
|
selectedTime: null,
|
|||
|
|
dateList: ["今天", "明天", "后天"],
|
|||
|
|
timeOptions: [],
|
|||
|
|
selectedDateIndex: 0,
|
|||
|
|
selectedTimeIndex: 0,
|
|||
|
|
sureTimeDataIndex: 0,
|
|||
|
|
showTimePicker: false,
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
id(newVal) {
|
|||
|
|
if (newVal) {}
|
|||
|
|
},
|
|||
|
|
// reservationAddress: {
|
|||
|
|
// handler(newVal) {
|
|||
|
|
// if (Object.keys(newVal).length != 0) {
|
|||
|
|
// console.log("地址变化，重新获取服务人员列表");
|
|||
|
|
// this.getSyr();
|
|||
|
|
// }
|
|||
|
|
// },
|
|||
|
|
// deep: true,
|
|||
|
|
// },
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
//获取默认地址
|
|||
|
|
if (Object.keys(this.reservationAddress).length == 0) {
|
|||
|
|
request.post("/user/getdefaultaddress").then((res) => {
|
|||
|
|
if (res.state == 1) {
|
|||
|
|
this.$store.commit("setreservationAddress", res.data)
|
|||
|
|
// this.getSyr()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}else{
|
|||
|
|
// this.getSyr()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
getSyr() {
|
|||
|
|
// this.queryData.id = this.id;
|
|||
|
|
// if (Object.keys(this.reservationAddress).length != 0) {
|
|||
|
|
// this.queryData.city = this.reservationAddress.dependency_city;
|
|||
|
|
// }
|
|||
|
|
// request.post("/user/serversSelf/syrList", this.queryData).then((res) => {
|
|||
|
|
// if (res.code == 200) {
|
|||
|
|
// this.syrCount = res.data.count;
|
|||
|
|
// }
|
|||
|
|
// }).finally(() => {});
|
|||
|
|
},
|
|||
|
|
// 选择地址
|
|||
|
|
goToAddress() {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: "/pages/address/list",
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 选择服务人员
|
|||
|
|
goSelectSyr() {
|
|||
|
|
if (Object.keys(this.$store.state.reservationAddress).length == 0) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: "请先选择到家地址",
|
|||
|
|
icon: "none",
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if(!this.syrCount){
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: "/pages/selfOperated/selectSyr?id=" + this.id,
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 打开时间选择弹框
|
|||
|
|
async openTimePicker() {
|
|||
|
|
if (Object.keys(this.$store.state.reservationSyr).length == 0) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: "请先选择服务人员",
|
|||
|
|
icon: "none",
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
console.log("打开时间选择弹框", this.selected_date);
|
|||
|
|
await this.getyestimearr(this.selected_date);
|
|||
|
|
this.$refs.selecTime.openTime();
|
|||
|
|
},
|
|||
|
|
// 确认时间
|
|||
|
|
sureTime(date) {
|
|||
|
|
console.log("选择时间", date);
|
|||
|
|
if (Object.keys(date).length) {
|
|||
|
|
this.selectedTime = `${this.dateList[date.selectedDateIndex]} ${
|
|||
|
|
date.time.show_time
|
|||
|
|
}`;
|
|||
|
|
this.selected_date = this.getDateStr(date.selectedDateIndex);
|
|||
|
|
this.selected_time = date.time.show_time;
|
|||
|
|
this.selectedTimeIndex = date.selectedTimeIndex;
|
|||
|
|
this.selectedDateIndex = date.selectedDateIndex;
|
|||
|
|
this.$store.commit("setreservationTime", {
|
|||
|
|
selectedTime: this.selectedTime,
|
|||
|
|
selected_date: this.selected_date,
|
|||
|
|
selected_time: this.selected_time,
|
|||
|
|
});
|
|||
|
|
console.log(
|
|||
|
|
"选择的时间",
|
|||
|
|
this.selected_date,
|
|||
|
|
this.selected_time,
|
|||
|
|
this.selectedTimeIndex,
|
|||
|
|
this.selectedDateIndex
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
closeTime() {
|
|||
|
|
console.log("关闭时间选择弹框");
|
|||
|
|
},
|
|||
|
|
// 获取日期字符串
|
|||
|
|
getDateStr(days) {
|
|||
|
|
const date = new Date();
|
|||
|
|
date.setDate(date.getDate() + days);
|
|||
|
|
return `${date.getFullYear()}-${(date.getMonth() + 1)
|
|||
|
|
.toString()
|
|||
|
|
.padStart(2, "0")}-${date.getDate().toString().padStart(2, "0")}`;
|
|||
|
|
},
|
|||
|
|
// 获取预约时间
|
|||
|
|
async getyestimearr(date, type) {
|
|||
|
|
let that = this;
|
|||
|
|
that.timeOptions = [];
|
|||
|
|
await request
|
|||
|
|
.post("/user/reserve/timeList", {
|
|||
|
|
user_syr_id: this.reservationSyr.id,
|
|||
|
|
server_id:this.id,
|
|||
|
|
server_type:1,
|
|||
|
|
})
|
|||
|
|
.then((res) => {
|
|||
|
|
that.timeOptions = [
|
|||
|
|
...that.timeOptions,
|
|||
|
|
res.data.today,
|
|||
|
|
res.data.tomorrow,
|
|||
|
|
res.data.after,
|
|||
|
|
];
|
|||
|
|
let stateMap = {
|
|||
|
|
1: "可约",
|
|||
|
|
2: "约满",
|
|||
|
|
3: "休息",
|
|||
|
|
4: "锁定",
|
|||
|
|
5: "不可用",
|
|||
|
|
};
|
|||
|
|
that.timeOptions.forEach((item) => {
|
|||
|
|
item.forEach((ClipboardItem) => {
|
|||
|
|
ClipboardItem.stateName = stateMap[ClipboardItem.state];
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
})
|
|||
|
|
.catch((err) => {
|
|||
|
|
console.log("报错", err);
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="less">
|
|||
|
|
.select-address {
|
|||
|
|
margin: 20rpx 24rpx 20rpx 24rpx;
|
|||
|
|
padding: 30rpx 20rpx;
|
|||
|
|
background: #ffffff;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
position: relative;
|
|||
|
|
/* 1. 添加相对定位，让 tip 相对于该容器定位（关键） */
|
|||
|
|
overflow: hidden;
|
|||
|
|
/* 可选：防止 tip 超出容器范围 */
|
|||
|
|
|
|||
|
|
.select-address-title {
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
line-height: 42rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
margin-bottom: 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.border-bottom {
|
|||
|
|
border-bottom: 1rpx solid #f2f2f2;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.select-address-card {
|
|||
|
|
padding: 30rpx 0;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
.select-address-card-title {
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
line-height: 40rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.select-address-card-right {
|
|||
|
|
.card-right-text1 {
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #c4c4c4;
|
|||
|
|
line-height: 40rpx;
|
|||
|
|
text-align: right;
|
|||
|
|
font-style: normal;
|
|||
|
|
width: 425rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-right-text2 {
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
line-height: 40rpx;
|
|||
|
|
text-align: right;
|
|||
|
|
font-style: normal;
|
|||
|
|
width: 425rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-right-photo {
|
|||
|
|
margin-right: 13rpx;
|
|||
|
|
width: 60rpx;
|
|||
|
|
height: 60rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-right-img {
|
|||
|
|
width: 12rpx;
|
|||
|
|
height: 24rpx;
|
|||
|
|
margin-left: 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.select-address-tip {
|
|||
|
|
height: 117rpx;
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 130rpx;
|
|||
|
|
left: 68rpx;
|
|||
|
|
right: 0;
|
|||
|
|
z-index: 1;
|
|||
|
|
padding: 0;
|
|||
|
|
|
|||
|
|
.select-address-tip-bj {
|
|||
|
|
position: absolute;
|
|||
|
|
height: 117rpx;
|
|||
|
|
bottom: 0rpx;
|
|||
|
|
right: 0rpx;
|
|||
|
|
width: 634rpx;
|
|||
|
|
//left: 0rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.select-address-tip-text {
|
|||
|
|
margin-top: 30rpx;
|
|||
|
|
padding-left: 20rpx;
|
|||
|
|
padding-right: 20rpx;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #E8101E;
|
|||
|
|
line-height: 37rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.flex-row-center-between {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.flex-row-center {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.store-tip {
|
|||
|
|
width: 702rpx;
|
|||
|
|
margin: 0 29rpx;
|
|||
|
|
height: 122rpx;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
</style>
|