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.
 
 
 

755 lines
27 KiB

<template>
<view class="body-background" :style="{
backgroundImage:'url('+staticImage.wallpaperBgImage+')'
}"></view>
<HeaderNav title="预约服务" :is-back="true"></HeaderNav>
<view class="app-wallpaper">
<view class="addr-container">
<view class="addr-content-container">
<view class="addr-content">
<view class="addr-content-main row" :style="{
backgroundImage:'url('+staticImage.addrBg+')'
}" @click="navTo('/pages/Addr/index?type=select')">
<view class="main-img">
<u-image mode="widthFix" width="85" height="85" class="img" :src="staticImage.addrAvatar"></u-image>
</view>
<view class="main-content">
<u-image mode="heightFix" class="img" :src="staticImage.addrFw" height="35rpx"></u-image>
<view class="main-content-text" style="max-width:300rpx;">
<u-text :text="address.info || '请输入具体地址'" color="#131313" size="30"></u-text>
</view>
</view>
<view class="main-select-btn ">
<view class="main-select-btn-gun"></view>
<view class="main-select-btn-content row">
<view class="content-img col-12">
<u-image mode="widthFix" class="img" :src="staticImage.addrBook" width="45" height="45" custom-style="margin:auto;"></u-image>
</view>
<view class="content-text col-12">
选择地址
</view>
</view>
</view>
</view>
</view>
</view>
<view class="addr-background-container">
<view class="addr-background-content"></view>
</view>
</view>
<view class="order-container">
<view class="order-content-container">
<view class="order-content">
<view class="order-content-main row">
<view class="order-item row">
<view class="item-title">
服务日期
</view>
<view class="item-content row col">
<view class="item-content-tag" v-for="(item,index) in timeList" v-if="timeList.length !== 0">
<view class="tag-text" style="margin-bottom:10rpx ;">
{{ item.date }} {{(item.time)?'/'+item.time:''}}
</view>
<view class="tag-close" @click="delTime(index)">
<image mode="heightFix" class="img" :src="staticImage.tagClose"/>
</view>
</view>
<view class="" v-else @click="showCalendar">
<u-text text="请选择服务日期" size="28" color="#636363"></u-text>
</view>
</view>
<view class="item-icon" @click="showCalendar">
<u-icon name="arrow-right"></u-icon>
</view>
</view>
<view class="order-item row">
<view class="item-title">
增值服务
</view>
<view class="item-content row col">
<view class="item-content-tag" v-for="(item,index) in addServiceChecked" v-if="addServiceChecked.length !== 0">
<view class="tag-text">
{{item.name}} * {{item.number}}
</view>
<view class="tag-close" @click="delAddService(index)">
<u-image width="23" height="23" mode="heightFix" class="img" :src="staticImage.tagClose"></u-image>
</view>
</view>
<view v-else>
<u-text text="请选择增值服务" size="28" color="#636363" @click="showAddServicePopup"></u-text>
</view>
</view>
<view class="item-icon" @click="showAddServicePopup">
<u-icon name="arrow-right"></u-icon>
</view>
</view>
<view class="order-item row">
<view class="item-title">
选择优惠
</view>
<view class="item-content row col">
<view class="item-content-text" v-if="coupons.length === 0">
<u-text text="请选择优惠券" size="28" color="#636363" @click="navTo('/pages/UserCoupons/index?type=select')"></u-text>
</view>
<view class="item-content-text" v-else>
<view class="item-content-tag" style="margin-bottom:10rpx;" v-for="(item,index) in coupons">
<view class="tag-text">
{{item.title}}
</view>
<view class="tag-close" @click="delCoupons(index)">
<u-image width="23" height="23" mode="heightFix" class="img" :src="staticImage.tagClose"></u-image>
</view>
</view>
</view>
</view>
<view class="item-icon">
<u-icon name="arrow-right" @click="navTo('/pages/UserCoupons/index?type=select')"></u-icon>
</view>
</view>
<view class="order-item row" @click="$refs.addTimePicker.open()">
<view class="item-title">
服务加时
</view>
<view class="item-content row col">
<view class="item-content-text" v-if="add_time>0">
{{add_time}}小时
</view>
<view class="item-content-text" v-else>
<u-text text="请选择服务时长" size="28" color="#636363"></u-text>
</view>
</view>
<view class="item-icon">
<u-icon name="arrow-right"></u-icon>
</view>
</view>
</view>
</view>
</view>
<view class="order-background-container">
<view class="order-background-content"></view>
</view>
</view>
<view class="order-container">
<view class="order-content-container">
<view class="order-content">
<view class="order-content-main row">
<view class="order-content-main-title-img">
<image mode="heightFix" class="img" :src="staticImage.selectPet"/>
</view>
<view class="order-item pet-page-item row">
<PetPage class="pet-page" :showCancel="true" type="lists" @change="selectPet" @del="delPet"></PetPage>
</view>
</view>
</view>
</view>
<view class="order-background-container">
<view class="order-background-content"></view>
</view>
</view>
<view class="order-container" v-if="basicServiceList.length > 0">
<view class="order-content-container">
<view class="order-content">
<view class="order-content-main row">
<view class="order-content-main-title-img col-12">
<image mode="heightFix" class="img" :src="staticImage.selectService"/>
</view>
<view class="order-item pet-page-item row">
<view class="order-item-container row" >
<view class="order-item-col col-4" @click="radioChange(item)" v-for="(item,index) in basicServiceList">
<view class="order-item-content-group">
<view class="count-group-content">
<image mode="heightFix" class="img" :src="item.logo||staticImage.groupImg"/>
<view class="group-title">{{item.name}}</view>
<view class="group-desc">{{parseFloat(item.price)}}/次</view>
<view class="group-checkbox">
<u-checkbox
:customStyle="{marginBottom: '8px'}"
:key="index"
:name="item"
:checked="item.id === this.basicServiceChecked"
@change="radioChange(item)"
shape="circle"
size="32"
icon-size="30"
custom-style="justify-content:center;"
active-color="#4DC3B8"
>
</u-checkbox>
</view>
</view>
<view class="count-group-background">
<view class="count-background"></view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="order-background-container">
<view class="order-background-content"></view>
</view>
</view>
</view>
<view class="footer-menu row">
<view class="row col">
<view class="foot-menu-main-title row">
<view class="main-title">费用共计</view>
<view class="main-price">¥{{price.price}}</view>
<view class="main-title">元</view>
</view>
<view class="foot-menu-checkbox-group row col">
<view class="foot-menu-checkbox">
<u-checkbox
shape="circle"
size="26"
custom-style="margin-top:0;margin-bottom:0;"
icon-size="24"
active-color="#4DC3B8"
:checked="readInfo"
@change="readInfo = !readInfo"
></u-checkbox>
</view>
<view class="foot-menu-title">
<text @click="readInfo = !readInfo">阅读并同意</text><text class="foot-menu-url" @click="showAgreement">《上门喂养协议》</text>
</view>
</view>
</view>
<view class="">
<MzButton
title="立即下单"
button-color="#4DC3B8"
font-color="#FFFFFF"
button-width="200rpx"
@click="readInfo ? orderPay() :$u.toast('请先同意协议')"
>
</MzButton>
</view>
</view>
<uv-calendar ref="calendar" mode="multiple" title="选择服务日期" color="#4DC3B8" round="40rpx">
<template #footer>
<MzButton button-color="#4DC3B8" button-width="90%" font-color="#fff" class="row" style="justify-content: center" @click="timeSelect">确定</MzButton>
</template>
</uv-calendar>
<uv-popup ref="agreement" mode="bottom" round="20rpx" closeable safeAreaInsetTop safeAreaInsetBottom custom-style="position:relative;">
<view class="title row" style="position:absolute;justify-content: center;width:100%;top:20rpx;left:0;">
<view class="value col" style="position: relative;text-align: center;">
<!-- <u-text text="协议内容" size="38" color="#191919"></u-text>-->
<view class="" style="position: relative;display:inline-block;">
<view style="color:#191919;font-size:38rpx;display:inline-block;position: relative;z-index: 2;">协议内容</view>
<view class="background" style="width:100%;height:50%;position: absolute;bottom:0;left:0;background-color:rgba(227, 191, 119, 0.6);display:inline-block;z-index:1;"></view>
</view>
</view>
</view>
<view style="padding:30rpx;max-height:700rpx;overflow: auto;">
<u-parse :content="feedPolicy"></u-parse>
</view>
</uv-popup>
<uv-popup ref="addServicePopup" mode="bottom" round="20" closeable safeAreaInsetTop safeAreaInsetBottom custom-style="position:relative;">
<view class="title row" style="position:absolute;justify-content: center;width:100%;top:20rpx;left:0;">
<view class="value col" style="position: relative;text-align: center;">
<!-- <u-text text="协议内容" size="38" color="#191919"></u-text>-->
<view class="" style="position: relative;display:inline-block;">
<view style="color:#191919;font-size:38rpx;display:inline-block;position: relative;z-index: 2;">增值服务</view>
<view class="background" style="width:100%;height:50%;position: absolute;bottom:0;left:0;background-color:rgba(227, 191, 119, 0.6);display:inline-block;z-index:1;"></view>
</view>
</view>
</view>
<view class="pop-service-container" style="min-height:500rpx;position: relative;">
<view class="" style="width:100%;padding-bottom:114rpx;">
<u-cell-group custom-style="max-height:700rpx;overflow:auto;" v-if="addServiceList.length > 0">
<u-cell
size="large"
:title="item.name"
:label="item.info"
isLink
right-icon=""
v-for="(item,index) in addServiceList"
@click="selectAddService(index)"
>
<template #title>
<view>
<text style="font-size:32rpx;line-height: 40rpx;">{{item.name}}</text>
<text style="font-size:28rpx;line-height: 40rpx;color:#999999;padding:0 15rpx;">({{parseFloat(item.price)+'元'}})</text>
</view>
</template>
<template #value>
<view class="" style="display:flex;align-items: center">
<!-- <view class="">-->
<!-- <u-text :text="parseFloat(item.price)+'元'" size="32" style="white-space: nowrap;" line-height="32"></u-text>-->
<!-- </view>-->
<uv-number-box border="none" v-model="item.number" :min="0" :max="1000">
</uv-number-box>
</view>
</template>
</u-cell>
</u-cell-group>
<u-cell-group custom-style="max-height:700rpx;overflow:auto;" v-else>
<u-cell
size="large"
title="暂无增值服务"
>
</u-cell>
</u-cell-group>
</view>
<view class="row" style="position:absolute;bottom:0;padding-top:30rpx;" v-if="addServiceList.length > 0">
<view class="col-6" style="padding:0 30rpx;">
<MzButton title="取消" @click="$refs.addServicePopup.close()"></MzButton>
</view>
<view class="col-6" style="padding:0 30rpx;">
<MzButton title="确认" @click="addServiceConfirm" button-color="#4DC3B8" font-color="#fff"></MzButton>
</view>
</view>
</view>
</uv-popup>
<uv-popup ref="doDatePopup" mode="bottom" round="20" closeable safeAreaInsetTop safeAreaInsetBottom custom-style="position:relative;">
<view class="title row" style="position:absolute;justify-content: center;width:100%;top:20rpx;left:0;">
<view class="value col" style="position: relative;text-align: center;">
<!-- <u-text text="协议内容" size="38" color="#191919"></u-text>-->
<view class="" style="position: relative;display:inline-block;">
<view style="color:#191919;font-size:38rpx;display:inline-block;position: relative;z-index: 2;">上门时间</view>
<view class="background" style="width:100%;height:50%;position: absolute;bottom:0;left:0;background-color:rgba(227, 191, 119, 0.6);display:inline-block;z-index:1;"></view>
</view>
</view>
</view>
<view class="pop-service-container">
<uv-vtabs
:chain="false"
:list="timeListTemp"
height="700rpx"
hdHeight="100rpx"
keyName="date"
bar-width="300rpx"
:barScrollable="false"
barItemActiveLineStyle="background:#4DC3B8;color:#4DC3B8;"
barItemActiveStyle="color:#4DC3B8;"
@change="changeVTab"
>
<uv-vtabs-item v-if="timeListTemp.length>0">
<view class="item"
v-for="(item,index) in timeListTemp[vTabCurrent].time"
:key="index">
<view class="item-title" style="padding:30rpx;" @click="doTimeSelect(item,index)"
:style="{color:(item.checked)?'#4DC3B8':'#636363'}">
<text class="text">{{item.label}} ({{ item.value }})</text>
</view>
</view>
</uv-vtabs-item>
<uv-gap bg-color="#fff" height="600"></uv-gap>
</uv-vtabs>
<view class="row" style="padding-top:30rpx;">
<view class="col-6" style="padding:0 30rpx;">
<MzButton title="取消" @click="$refs.doDatePopup.close()"></MzButton>
</view>
<view class="col-6" style="padding:0 30rpx;">
<MzButton title="确认" @click="doDatePopupConfirm" button-color="#4DC3B8" font-color="#fff"></MzButton>
</view>
</view>
</view>
</uv-popup>
<!-- <RightNav></RightNav> -->
<uv-picker ref="addTimePicker" :columns="addTimeLists" keyName="label" @confirm="addTimeConfirm"></uv-picker>
</template>
<script>
import {
imghost
} from '@/config/host.js'
import HeaderNav from '@/components/HeaderNav/Index.vue';
import FooterNav from '@/components/FooterNav/Index.vue';
import RightNav from '@/components/RightNav/Index.vue';
import MzButton from '../../components/MzButton/Index.vue';
import PetPage from '../../components/PetPage/Index.vue';
import api from '@/utils/functions.js';
import {cardDetail} from "@/api/card";
import {getAddressList} from "@/api/address";
import image from "@/config/image";
import {createOrderPrice, getOrderPrice, getStoreService} from "@/api/order";
import pet from "@/pages/Pet/index.vue";
import {getConfig} from "@/api/other";
import log from "@/utils/log";
export default {
computed: {
api() {
return api
}
},
components: {
HeaderNav,
FooterNav,
RightNav,
MzButton,
PetPage
},
data() {
return {
readInfo:false,
price:{
all_price:0,
price:0,
quan_reduce:0,
},
radioValue1:[],
list: ['未付款', '待评价', '已付款'],
addTimeLists: [
[
{label:'1小时',value:1},
{label:'2小时',value:2},
{label:'3小时',value:3},
{label:'4小时',value:4},
{label:'5小时',value:5},
{label:'6小时',value:6},
{label:'7小时',value:7},
{label:'8小时',value:8},
{label:'9小时',value:9},
{label:'10小时',value:10},
{label:'11小时',value:11},
{label:'12小时',value:12},
]
],
curNow: 0,
id:'',
title: 'Hello',
loading: true,
timeList:[],
timeListTemp:[],
staticImage: image.OrderPage,
isTop: false,
orderCardList:[
{
title:'成都市武侯区丰德国际4栋...',
tags:['刷毛','洗澡'],
do_time:'2023/05/03 15—17时',
create_time:'2023/03/03 15:23:22',
},
{
title:'成都市武侯区丰德国际4栋...',
tags:['刷毛','洗澡'],
do_time:'2023/05/03 15—17时',
create_time:'2023/03/03 15:23:22',
},
],
couponsList: [{
price: '57',
title: '57元抵扣券',
cause: '满0.01使用',
coupons_number:10,
time: '满0.01元使用仅限线上预约下单使用',
is_timeout: false,
}],
address:{},
addServiceList:[],
basicServiceList:[],
pages:{
page:1,
limit:10
},
addServiceChecked:[],
coupons:[],
doTimeList:[
{
label:'上午',
value:'09:00-12:00'
},{
label:'下午',
value:'13:30-17:00'
},{
label:'晚上',
value:'07:00-19:30'
},
],
vTabCurrent:0,
petChecked:[],
basicServiceChecked:'',
feedPolicy:'',
isPay:false,
type:1,
add_time:0,
}
},
onLoad(options) {
this.id = options.id;
this.type = options.type || 1;
},
updated() {
},
onShow(){
if(!this.isPay){
this.getDefaultAddress();
this.getUserCoupons();
}
},
methods: {
addTimeConfirm(e){
this.add_time = e.value[0].value;
},
addServiceChange(e){
this.addServiceList[e].checked = !this.addServiceList[e].checked;
},
orderPay(){
uni.showLoading('加载中');
if(
this.address
&&this.timeList.length>0
&&this.petChecked.length>0
&&this.basicServiceChecked!==''
){
this.isPay = true;
let coupons = this.coupons.map(item => {
return item.id;
}).join(',');
createOrderPrice({
order_type:this.type,
address_id: this.address.id,
do_date: this.timeList.map(res => [res.date,res.time]),
services: this.addServiceChecked.map(res => res.id).join(','),
basic_service:this.basicServiceChecked,
pet_ids: this.petChecked.map(res => res.id).join(','),
store_id:this.addServiceList[0].store_id,
user_coupon_id: coupons || 0
}).then(res => {
console.log(res)
api.payment(res.data).then(res => {
uni.redirectTo({url:'/pages/Order/done?type=order'});
uni.hideLoading();
}).catch(err => {
this.isPay = false;
api.error('支付失败');
uni.hideLoading();
});
});
}else{
uni.hideLoading();
if(!this.address){
api.error('请选择地址')
return;
}
if(this.timeList.length === 0){
api.error('请选择服务日期')
return;
}
if(this.petChecked.length === 0){
api.error('请选择宠物')
return;
}
if(this.basicServiceChecked.length === 0){
api.error('请选择基础服务')
}
}
},
checkOrderData(){
if(
this.address
&&this.timeList.length>0
&&this.petChecked.length>0
&&this.basicServiceChecked!==''
){
console.log(this.basicServiceChecked)
getOrderPrice({
order_type:this.type,
address_id: this.address.id,
do_date: this.timeList.map(res => [res.date,res.time]),
services: this.addServiceChecked.map(res => res.id).join(','),
basic_service:this.basicServiceChecked,
pet_ids: this.petChecked.map(res => res.id).join(','),
store_id:this.addServiceList[0].store_id,
user_coupon_id:this.coupons.id || 0
}).then(res => {
console.log(res)
this.price = res.data;
});
}
},
selectPet(petList){
this.petChecked = petList;
this.checkOrderData();
},
delPet(index){
this.petChecked.splice(index,1);
this.checkOrderData();
},
doDatePopupConfirm(){
this.timeListTemp.forEach(item => {
if(item.time === ""){
api.error(item.date+'未指定上门时间')
return false;
}
});
this.timeListTemp.forEach(item => {
item.time.forEach(row => {
if(row.checked){
this.timeList.push({date:item.date,time:row.value,label:row.label});
}
});
});
console.log(this.timeList)
// this.timeList = this.timeListTemp;
this.$refs.doDatePopup.close()
this.checkOrderData();
},
doTimeSelect(item,index){
console.log(this.timeListTemp[this.vTabCurrent].time[index])
this.timeListTemp[this.vTabCurrent].time[index].checked = !item.checked
},
changeVTab(index){
console.log(index)
this.vTabCurrent = index
},
getUserCoupons(){
let cacheCoupons = uni.getStorageSync('userCoupons');
log(cacheCoupons);
if (cacheCoupons) {
this.coupons = cacheCoupons;
uni.removeStorage({key:'userCoupons'});
}
this.checkOrderData();
},
showAddServicePopup(){
this.$refs.addServicePopup.open();
},
selectAddService(index){
this.addServiceList[index].checked = !this.addServiceList[index].checked;
},
addServiceConfirm(){
let list = [];
this.addServiceList.map(item => {
if(item.number>0){
list.push(item);
}
})
this.addServiceChecked = list;
this.$refs.addServicePopup.close();
this.checkOrderData();
},
delAddService(index){
this.addServiceChecked.splice(index,1);
this.checkOrderData();
},
delCoupons(index){
this.coupons.splice(index,1);
this.checkOrderData();
},
getStoreServiceList(){
getStoreService({address_id: this.address.id,order_type:1}).then(res => {
this.addServiceList = res.data.add_service.map(item => {
item.number = 0;
return item;
});
this.basicServiceList = res.data.basic_service;
}).catch(err => {
this.addServiceList = [];
});
},
getDefaultAddress() {
let cacheAddress = uni.getStorageSync('address');
if (cacheAddress) {
this.address = cacheAddress;
} else {
getAddressList(this.pages).then(res => {
res.data.forEach(item => {
if (item.is_default === 1) {
this.address = item;
}
});
})
}
if(this.address.id){
this.getStoreServiceList();
}
this.checkOrderData();
},
delTime(index){
this.timeList.splice(index,1);
this.checkOrderData();
},
timeSelect(e){
let selected = this.$refs.calendar.selected;
this.timeListTemp = selected.map(item => {
return {
date:item,
time:[{
label:'上午',
value:'09:00-12:00',
checked:false,
},{
label:'下午',
value:'13:30-17:00',
checked:false,
},{
label:'晚上',
value:'07:00-19:30',
checked:false,
},]
}
});
// this.timeListTemp = this.timeList;
this.$refs.calendar.confirm();
this.$refs.doDatePopup.open();
},
showAgreement(){
getConfig('FeedPolicy').then(res => {
this.feedPolicy = res.data.FeedPolicy;
})
this.$refs.agreement.open();
},
navTo(url){
uni.navigateTo({
url:url
})
},
sectionChange(index) {
this.curNow = index;
},
radioChange(n) {
this.basicServiceChecked = n.id
this.radioValue1 = n.id
console.log('radioChange', n);
this.checkOrderData();
},
groupChange(n) {
console.log('radioChange', n);
},
confirm(){},
showCalendar(){
this.$refs.calendar.open();
},
},
onPageScroll(res) {
if(res.scrollTop <= 20){
uni.$emit('isTop', true);
}else{
uni.$emit('isTop', false);
}
},
created() {
this.pagePadding = (api.navHeight().navPaddingTop +
api.navHeight().navHeight + (api.navHeight().headerPadding * 2))
},
mounted() {
},
}
</script>
<style lang="scss">
@import './components/index.scss';
</style>