422 lines
11 KiB
Vue
422 lines
11 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 != syrInfo.dependency_city && addressCity != syrCity ) && Object.keys(reservationAddress).length != 0">
|
||
<image src="/static/images/background/tipBj2.png" class="select-address-tip-bj"></image>
|
||
<view class="select-address-tip-texts">
|
||
<text
|
||
class="select-address-tip-text1">您选择的地址暂不在手艺人当前服务覆盖范围内，可能影响服务响应时效。为保障您的体验，建议您重新选择可服务区域下单。手艺人服务区域：{{ syrCity }}</text>
|
||
</view>
|
||
</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" @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: () => ({}),
|
||
},
|
||
syrInfo: {
|
||
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;
|
||
},
|
||
syrCity() {
|
||
if (!this.syrInfo.dependency) return ''
|
||
let regionParts = this.syrInfo.servers_region[0].split('-')
|
||
return regionParts.length >= 2 ? regionParts[1] : regionParts[1]
|
||
},
|
||
addressCity() {
|
||
if (!this?.reservationAddress?.dependency) return ''
|
||
let regionParts = this.reservationAddress.dependency.split('-')
|
||
return regionParts.length >= 2 ? regionParts[1] : regionParts[1]
|
||
}
|
||
},
|
||
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("setreservationAddress2", 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?setAdressType=2",
|
||
});
|
||
},
|
||
// 选择服务人员
|
||
goSelectSyr() {
|
||
if (Object.keys(this.$store.state.reservationAddress).length == 0) {
|
||
uni.showToast({
|
||
title: "请先选择到家地址",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
if (!this.syrCount) {
|
||
return
|
||
}
|
||
let url = "/user/servers/syrList"
|
||
uni.navigateTo({
|
||
url: `/pages/selfOperated/selectSyr?id=${this.id}&url=${url}`,
|
||
});
|
||
},
|
||
// 打开时间选择弹框
|
||
async openTimePicker() {
|
||
if ((this.reservationAddress.dependency_city != this.syrInfo.dependency_city && this.addressCity != this.syrCity ) && Object.keys(this.reservationAddress).length != 0) {
|
||
return
|
||
}
|
||
// 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) => {
|
||
console.log(1111111111111, this.$store.state.reservationSyr)
|
||
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;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.select-address-card-right {
|
||
.card-right-text1 {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #c4c4c4;
|
||
text-align: right;
|
||
font-style: normal;
|
||
width: 425rpx;
|
||
}
|
||
|
||
.card-right-text2 {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
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: 161rpx;
|
||
position: absolute;
|
||
bottom: 0rpx;
|
||
left: 22rpx;
|
||
right: 22rpx;
|
||
z-index: 1;
|
||
padding: 0;
|
||
|
||
.select-address-tip-bj {
|
||
height: 161rpx;
|
||
width: 658rpx;
|
||
}
|
||
|
||
.select-address-tip-texts {
|
||
height: 161rpx;
|
||
width: 658rpx;
|
||
position: absolute;
|
||
top: 0rpx;
|
||
left: 0rpx;
|
||
|
||
.select-address-tip-text1 {
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #8F060F;
|
||
line-height: 37rpx;
|
||
text-align: left;
|
||
margin: 30rpx 13rpx 0 20rpx
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.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> |