You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
691 lines
18 KiB
691 lines
18 KiB
<template>
|
|
<view class="service-container">
|
|
<view class="select-address">
|
|
<view class="normal-bolb-text">
|
|
选择区域
|
|
</view>
|
|
<view class="select-address-value">
|
|
<picker mode="multiSelector" @columnchange="columnchange" @change="bindMultiPickerColumnChange" :value="multiIndex"
|
|
:range="multiArray">
|
|
<view v-if="!isSelected" class="unselected">
|
|
<img src="/static/images/details/add.svg" style="width: 20px;height: 20px;" alt="">
|
|
<text class="unselected-text">点击选择区域</text>
|
|
</view>
|
|
<view v-else class="selected">
|
|
<view class="selected-text">
|
|
<text>{{multiArray[0][multiIndex[0]]}}</text>
|
|
<text style="margin-left: 10px;">{{district}}</text>
|
|
</view>
|
|
<img src="/static/images/details/edit.svg" style="width: 18px;height: 18px;" alt="">
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
<view class="detailed-address">
|
|
<view class="normal-bolb-text">
|
|
详细地址
|
|
</view>
|
|
<view class="detailed-address-value">
|
|
<input type="text" placeholder="需具体xx区xx街道xx小区xx室" v-model="detailedAddress">
|
|
</view>
|
|
</view>
|
|
<view class="pet-info">
|
|
<view class="normal-bolb-text">
|
|
是否需要增加宠物数量
|
|
</view>
|
|
<view class="pet-info-tips">
|
|
<view class="pet-info-tips-text">
|
|
<img src="/static/images/details/tips.svg" style="width: 12px;height: 12px;" alt="">
|
|
<text style="margin-left: 5px;">专业喂养套餐最多可服务3只猫或2只小型犬(不含遛狗)</text>
|
|
</view>
|
|
<view class="pet-info-tips-text">
|
|
<img src="/static/images/details/tips.svg" style="width: 12px;height: 12px;" alt="">
|
|
<text style="margin-left: 5px;">专业遛狗套餐最多可服务1只中型犬或2只小型犬(含喂养)</text>
|
|
</view>
|
|
</view>
|
|
<view class="pet-info-number">
|
|
<view v-for="(pet,index) in petPrices" class="pet-info-for" :key="index">
|
|
<view class="normal-text">
|
|
{{pet.petTypeName}}
|
|
</view>
|
|
<view class="pet-price-number">
|
|
<view class="pet-price">
|
|
<text style="font-size: 16px;">{{pet.price}}元</text>/只
|
|
</view>
|
|
<uni-number-box class="pet-number" @change="e=>changeNumber(e,index)" :value="pet.quantity"
|
|
:min="0" :max="999" background="#fff">
|
|
</uni-number-box>
|
|
</view>
|
|
<view v-if="index+1<petPrices.length" class="line" style="background-color: #FFE8C6;"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="content-container">
|
|
<view class="normal-bolb-text">
|
|
服务频率
|
|
</view>
|
|
<view class="line" style="background-color: #EFEFEF;"></view>
|
|
<view class="service-frequency-value">
|
|
<uni-data-checkbox selectedColor="#FFB13F" v-model="selectedFrequency" :localdata="frequency"
|
|
@change="changeFrequency"></uni-data-checkbox>
|
|
</view>
|
|
</view>
|
|
<view class="content-container">
|
|
<view class="content-header">
|
|
<view class="normal-bolb-text">
|
|
预约日期 <text style="color: #999;font-size: 14px;margin-left: 5px;font-weight: normal;">(可选择多日)</text>
|
|
</view>
|
|
<text style="color: #A94F20;font-size: 14px;">总共选择{{selectedDate.length}}天</text>
|
|
</view>
|
|
|
|
<view class="line" style="background-color: #EFEFEF;"></view>
|
|
<uni-calendar class="uni-calendar--hook" :selected="selectedDate" :startDate="startDate" :endDate="endDate"
|
|
@change="change" :showMonth="false" />
|
|
</view>
|
|
|
|
<view class="content-container">
|
|
<view class="normal-bolb-text">
|
|
选择预约时间
|
|
</view>
|
|
<view class="line" style="background-color: #EFEFEF;"></view>
|
|
<view>
|
|
<view v-if="selectedFrequency == 'twice_a_day'" style="color: #999;font-size: 14px;margin-bottom:14px;">
|
|
第一次服务时间
|
|
</view>
|
|
<view class="time-select">
|
|
<view v-for="(item,index) in timeList"
|
|
:class="['base-time',item.value == serviceTimeFirst?'time-selected':'time-unselected']"
|
|
:key="index" @click="selectedTime(item.value)">
|
|
<view style="font-size:14px;width: 100%;text-align: center;">{{item.value}}</view>
|
|
<!-- <view style="font-size:12px;"
|
|
:class="[item.value == serviceTimeFirst?'selected-color':'unselected-color']">
|
|
{{item.status}}
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="selectedFrequency == 'twice_a_day'">
|
|
<view style="color: #999;font-size: 14px;margin:14px 0;">
|
|
第二次服务时间
|
|
</view>
|
|
<view class="time-select">
|
|
<view v-for="item in timeList"
|
|
:class="['base-time', item.value == serviceTimeFirst? 'time-disable': item.value == serviceTimeSecond? 'time-selected':'time-unselected']"
|
|
@click="selectedSecondTime(item.value)" :key="item.value">
|
|
<view style="font-size:14px;width: 100%;text-align: center;">{{item.value}}</view>
|
|
<!-- <view style="font-size:12px;"
|
|
:class="[item.value == serviceTimeFirst? 'disabled-color' : item.value == serviceTimeSecond?'selected-color':'unselected-color']">
|
|
{{item.status}}
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="payment">
|
|
<view class="total-price">
|
|
<text class="total-price-text">应付价格：</text>
|
|
<text class="total-price-value">￥{{totalPrice}}元</text>
|
|
</view>
|
|
<button class="payment-btn" @click="goNext">下一步</button>
|
|
</view>
|
|
<Kefu></Kefu>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import Kefu from '../common/kefu.vue'
|
|
import {
|
|
getDictList,
|
|
getCity
|
|
} from '@/api/system/user.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
multiArray: [],
|
|
isSelected: false,
|
|
cityList:[],
|
|
multiIndex: [0, 0],
|
|
district: '',
|
|
detailedAddress: '',
|
|
petPrices: [{
|
|
type: 'cat',
|
|
petTypeName: '猫',
|
|
price: 10,
|
|
quantity: 0
|
|
},
|
|
{
|
|
type: 'small_dog',
|
|
petTypeName: '小/中型犬',
|
|
price: 10,
|
|
quantity: 0
|
|
},
|
|
{
|
|
type: 'large_dog',
|
|
petTypeName: '大型犬',
|
|
price: 20,
|
|
quantity: 0
|
|
}
|
|
],
|
|
frequency: [{
|
|
text: '一天一次',
|
|
value: 'once_a_day'
|
|
|
|
}, {
|
|
text: '一天两次',
|
|
value: 'twice_a_day'
|
|
}],
|
|
selectedFrequency: 'once_a_day',
|
|
basePrice: 0,
|
|
currentPrice: 0,
|
|
totalPrice: 0,
|
|
selectedDate: [],
|
|
startDate: '',
|
|
endDate: '',
|
|
serviceTimeFirst: '',
|
|
serviceTimeSecond: '',
|
|
timeList: [{
|
|
value: '08:00',
|
|
status: '空闲',
|
|
|
|
},
|
|
{
|
|
value: '09:00',
|
|
status: '空闲',
|
|
},
|
|
{
|
|
value: '10:00',
|
|
status: '空闲',
|
|
}, {
|
|
value: '11:00',
|
|
status: '空闲',
|
|
},
|
|
{
|
|
value: '12:00',
|
|
status: '空闲',
|
|
},
|
|
{
|
|
value: '13:00',
|
|
status: '空闲',
|
|
},
|
|
{
|
|
value: '14:00',
|
|
status: '空闲',
|
|
},
|
|
{
|
|
value: '15:00',
|
|
status: '空闲',
|
|
},
|
|
{
|
|
value: '16:00',
|
|
status: '空闲',
|
|
|
|
}, {
|
|
value: '17:00',
|
|
status: '空闲',
|
|
},
|
|
{
|
|
value: '18:00',
|
|
status: '空闲',
|
|
},
|
|
{
|
|
value: '19:00',
|
|
status: '空闲',
|
|
},
|
|
{
|
|
value: '20:00',
|
|
status: '空闲',
|
|
}
|
|
]
|
|
};
|
|
},
|
|
components: {
|
|
Kefu
|
|
},
|
|
onLoad: function(option) {
|
|
uni.setLocale('zh')
|
|
this.basePrice = option.price;
|
|
this.currentPrice = option.price;
|
|
console.log(option.price); //打印出上个页面传递的参数。
|
|
},
|
|
mounted() {
|
|
this.getCalendarDate();
|
|
this.getCityList()
|
|
},
|
|
methods: {
|
|
getCityList() {
|
|
getCity().then(res => {
|
|
if (res.code == 200) {
|
|
console.log('city', JSON.parse(res.msg));
|
|
this.cityList = JSON.parse(res.msg)
|
|
const cityLabels = this.cityList.map(item =>item.city)
|
|
this.multiArray[0] = cityLabels
|
|
this.multiArray[1] = this.cityList[0].region.map(e=> e.region)
|
|
|
|
} else {
|
|
this.$modal.showToast('获取城市失败，请联系系统管理员！');
|
|
}
|
|
|
|
|
|
})
|
|
},
|
|
columnchange(e){
|
|
console.log(e)
|
|
// 当滚动切换一级分类时，为当前的一级分类添加它的子类
|
|
if (e.detail.column == 0) {
|
|
const currentCity = this.cityList[e.detail.value]
|
|
// #ifdef H5
|
|
// 在小程序中直接赋值无效 H5 可直接赋值
|
|
this.multiArray[1] = currentCity.region.map(e=>e.region)
|
|
// #endif
|
|
// #ifdef MP-WEIXIN
|
|
// 在 H5 环境下 $set 会导致一级分类无法滚动， 小程序正常运行
|
|
this.$set(this.multiArray, 1, currentCity.region.map(e=>e.region))
|
|
// #endif
|
|
this.multiIndex=[e.detail.value,0]
|
|
}
|
|
},
|
|
bindMultiPickerColumnChange(e) {
|
|
console.log('值为：' + e.detail.value)
|
|
this.multiIndex = e.detail.value
|
|
this.district = this.multiArray[1][this.multiIndex[1]]
|
|
this.isSelected = true
|
|
this.$forceUpdate()
|
|
},
|
|
changeNumber(e, i) {
|
|
const outerObj = this.petPrices[i];
|
|
outerObj.quantity = e;
|
|
console.log(this.petPrices);
|
|
this.getTotalPrice()
|
|
},
|
|
changeFrequency() {
|
|
if (this.selectedFrequency === 'twice_a_day') {
|
|
this.currentPrice = this.basePrice * 2 - 20;
|
|
} else {
|
|
this.currentPrice = this.basePrice;
|
|
}
|
|
this.getTotalPrice()
|
|
},
|
|
selectedTime(value) {
|
|
this.serviceTimeFirst = value;
|
|
this.serviceTimeSecond = '';
|
|
},
|
|
selectedSecondTime(value) {
|
|
if (value != this.serviceTimeFirst) {
|
|
this.serviceTimeSecond = value;
|
|
}
|
|
},
|
|
getTotalPrice() {
|
|
let currentPetPrice = 0
|
|
for (let i = 0; i < this.petPrices.length; i++) {
|
|
currentPetPrice += this.petPrices[i].quantity * this.petPrices[i].price;
|
|
}
|
|
let oneDayPrice = +currentPetPrice + +this.currentPrice
|
|
this.totalPrice = oneDayPrice * this.selectedDate.length;
|
|
},
|
|
pdDate() {
|
|
let currentDate = new Date();
|
|
let year = currentDate.getFullYear();
|
|
let month = currentDate.getMonth() + 1 < 10 ? '0' + (currentDate.getMonth() + 1) : currentDate.getMonth() +
|
|
1; // 月份从 0 开始，所以需要加 1
|
|
let day = currentDate.getDate() + 1 < 10 ? '0' + (currentDate.getDate() + 1) : currentDate.getDate() + 1;
|
|
let hour = currentDate.getHours();
|
|
|
|
// 将日期格式化为字符串
|
|
let nextDate = year + '-' + month + '-' + day;
|
|
let currentTime = hour + ':00'
|
|
// 将当前日期加一天
|
|
if (this.selectedDate.find(item => item.date == nextDate)) {
|
|
if ((this.serviceTimeFirst && currentTime > this.serviceTimeFirst) || (this.serviceTimeSecond &&
|
|
currentTime > this.serviceTimeSecond)) {
|
|
return false
|
|
}
|
|
}
|
|
return true
|
|
},
|
|
goNext() {
|
|
// 选择地址
|
|
if (!this.isSelected) {
|
|
this.$modal.showToast('请选择地址');
|
|
return;
|
|
}
|
|
//详细地址
|
|
if (!this.detailedAddress) {
|
|
this.$modal.showToast('请填写详细地址');
|
|
return;
|
|
}
|
|
//预定日期
|
|
if (this.selectedDate.length < 1) {
|
|
this.$modal.showToast('请至少选择一个预约日期');
|
|
return;
|
|
}
|
|
|
|
//服务频次
|
|
if (!((this.selectedFrequency == 'once_a_day' && this.serviceTimeFirst) ||
|
|
(this.selectedFrequency == 'twice_a_day' && this.serviceTimeFirst && this.serviceTimeSecond))) {
|
|
this.$modal.showToast('请选择预约时间');
|
|
return;
|
|
}
|
|
if (!this.pdDate()) {
|
|
this.$modal.showToast('首单可以服务的时间需距离当前时间24h以上，请重新选择时间');
|
|
return;
|
|
}
|
|
|
|
this.$globalData.submitData.totalPrice = this.totalPrice;
|
|
this.$globalData.submitData.address.province = this.multiArray[0][this.multiIndex[0]];
|
|
this.$globalData.submitData.address.city = this.multiArray[0][this.multiIndex[0]];
|
|
this.$globalData.submitData.address.district = this.district;
|
|
this.$globalData.submitData.address.detailAddress = this.detailedAddress;
|
|
this.$globalData.submitData.service.serviceFrequency = this.selectedFrequency;
|
|
this.$globalData.submitData.service.serviceDate = this.selectedDate.map(item => item.date);
|
|
this.$globalData.submitData.service.serviceTimeFirst = this.serviceTimeFirst;
|
|
this.$globalData.submitData.service.serviceTimeSecond = this.serviceTimeSecond;
|
|
this.$globalData.submitData.service.pet = this.petPrices.map(item => {
|
|
if (item.quantity > 0) {
|
|
return {
|
|
type: item.type,
|
|
quantity: item.quantity
|
|
}
|
|
}
|
|
});
|
|
this.setItemPrices()
|
|
uni.navigateTo({
|
|
url: "/pages/details/augmentedProduct"
|
|
});
|
|
},
|
|
setItemPrices() {
|
|
let itemPrices = [{
|
|
itemType: '基础服务费',
|
|
price: this.basePrice,
|
|
quantity: this.selectedDate.length,
|
|
unit: '次'
|
|
}];
|
|
|
|
for (let i = 0; i < this.petPrices.length; i++) {
|
|
if (this.petPrices[i].quantity > 0) {
|
|
let itemPrice = {
|
|
itemType: '额外宠物' + '-' + this.petPrices[i].petTypeName,
|
|
price: this.petPrices[i].price,
|
|
quantity: this.petPrices[i].quantity * this.selectedDate.length,
|
|
unit: '只'
|
|
}
|
|
itemPrices.push(itemPrice)
|
|
}
|
|
}
|
|
this.$globalData.servicePrices = itemPrices
|
|
},
|
|
change(e) {
|
|
console.log('change 返回:', e)
|
|
// 选中日期
|
|
const selectedValue = this.selectedDate.find(item => item.date === e.fulldate)
|
|
if (selectedValue) {
|
|
// 存在则移除
|
|
this.selectedDate = this.selectedDate.filter(item => item.date !== e.fulldate);
|
|
} else {
|
|
this.selectedDate.push({
|
|
date: e.fulldate,
|
|
info: '预定'
|
|
})
|
|
}
|
|
this.getTotalPrice();
|
|
console.log(this.selectedDate)
|
|
},
|
|
getCalendarDate() {
|
|
let tomorrow = new Date()
|
|
tomorrow.setDate(tomorrow.getDate() + 2);
|
|
this.startDate = this.formatDate(tomorrow);
|
|
|
|
// 获取三个月后的日期
|
|
let threeMonthsLater = new Date();
|
|
threeMonthsLater.setMonth(threeMonthsLater.getMonth() + 3);
|
|
this.endDate = this.formatDate(threeMonthsLater);
|
|
},
|
|
formatDate(date) {
|
|
let year = date.getFullYear();
|
|
let month = (date.getMonth() + 1).toString().padStart(2, '0');
|
|
let day = date.getDate().toString().padStart(2, '0');
|
|
return year + '-' + month + '-' + day;
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.service-container {
|
|
background-color: #f5f5f7;
|
|
|
|
.normal-bolb-text {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
line-height: 16px;
|
|
color: #333;
|
|
}
|
|
|
|
.content-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.normal-text {
|
|
font-size: 16px;
|
|
color: #333;
|
|
}
|
|
|
|
.line {
|
|
height: 1px;
|
|
width: 100%;
|
|
margin: 16px 0;
|
|
}
|
|
|
|
.select-address {
|
|
background-color: #ffffff;
|
|
width: 100%;
|
|
padding: 14px 20px;
|
|
|
|
.select-address-value {
|
|
margin-top: 15px;
|
|
|
|
.unselected {
|
|
height: 60px;
|
|
border-radius: 4px;
|
|
border: 1px dashed #FFB13F;
|
|
background: #FFFDF7;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.unselected-text {
|
|
color: #A94F20;
|
|
font-size: 16px;
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
|
|
.selected {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
padding-top: 14px;
|
|
border-top: 1px solid #efefef;
|
|
|
|
.selected-text {
|
|
font-size: 16px;
|
|
color: #333;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.detailed-address {
|
|
margin-top: 10px;
|
|
background-color: #ffffff;
|
|
padding: 14px 20px;
|
|
|
|
.detailed-address-value {
|
|
margin-top: 14px;
|
|
border: 1px solid #efefef;
|
|
border-radius: 4px;
|
|
padding: 10px;
|
|
}
|
|
}
|
|
|
|
.pet-info {
|
|
margin-top: 10px;
|
|
background-color: #ffffff;
|
|
padding: 14px 20px;
|
|
|
|
.pet-info-tips {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
background-color: #FFF1E3;
|
|
width: 100%;
|
|
height: 46px;
|
|
padding: 6px 10px;
|
|
margin: 14px 0;
|
|
border-radius: 4px;
|
|
|
|
.pet-info-tips-text {
|
|
display: flex;
|
|
align-items: center;
|
|
color: #A94F20;
|
|
font-size: 12px;
|
|
line-height: 18px;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.pet-info-number {
|
|
padding: 16px;
|
|
background-color: #FFFCF2;
|
|
border: 1px solid #FFE8C6;
|
|
border-radius: 4px;
|
|
|
|
.pet-info-for {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
|
|
.pet-price-number {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.pet-price {
|
|
font-size: 14px;
|
|
color: #FF530A;
|
|
line-height: 16px;
|
|
margin-right: 12px;
|
|
}
|
|
|
|
.pet-number {
|
|
border: 1px solid #FFE8C6;
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.content-container {
|
|
margin-top: 10px;
|
|
background-color: #ffffff;
|
|
padding: 14px 20px;
|
|
}
|
|
|
|
.time-select {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-start;
|
|
|
|
.base-time {
|
|
width: 25%;
|
|
height: 60px;
|
|
padding: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
box-sizing: border-box;
|
|
margin: -0.5px;
|
|
}
|
|
|
|
.time-unselected {
|
|
border: 1px solid #FFE8C6;
|
|
background-color: #FFFCF2;
|
|
color: #333;
|
|
}
|
|
|
|
.time-selected {
|
|
background-color: #FFBF60;
|
|
border: 1px solid #FFB13F;
|
|
color: #fff
|
|
}
|
|
|
|
.time-disable {
|
|
background-color: #eee;
|
|
border: 1px solid #FFE8C6;
|
|
color: #999;
|
|
}
|
|
|
|
.unselected-color {
|
|
color: #6ECD41;
|
|
}
|
|
|
|
.selected-color {
|
|
color: #A94F20;
|
|
}
|
|
|
|
.disabled-color {
|
|
color: #A1A1A1
|
|
}
|
|
}
|
|
|
|
|
|
.payment {
|
|
height: 56px;
|
|
width: 100%;
|
|
margin-top: 10px;
|
|
padding: 10px 20px;
|
|
background-color: #ffffff;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.total-price-text {
|
|
color: #333;
|
|
font-size: 16px;
|
|
font-weight: blob;
|
|
line-height: 16px;
|
|
}
|
|
|
|
.total-price-value {
|
|
color: #FF530A;
|
|
font-size: 22px;
|
|
font-weight: blob;
|
|
line-height: 16px;
|
|
}
|
|
|
|
.payment-btn {
|
|
width: 140px;
|
|
height: 38px;
|
|
border-radius: 6px;
|
|
background: #FFB13F;
|
|
color: #fff;
|
|
font-size: 16px;
|
|
margin: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
</style>
|