wk450097098
/
mrr.sj.front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
mrr.sj.front/pages/selfOperated/components/select-adress.vue

402 lines
10 KiB
Vue
Raw Normal View History

初始化商家app代码
2026-03-24 11:45:13 +08:00
<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;
主题色变更
2026-06-02 11:39:23 +08:00
color: #FF4767;
初始化商家app代码
2026-03-24 11:45:13 +08:00
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>