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.
370 lines
12 KiB
370 lines
12 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"> |
|
<image mode="widthFix" class="img" :src="staticImage.addrAvatar"/> |
|
</view> |
|
<view class="main-content"> |
|
<image mode="heightFix" class="img" :src="staticImage.addrFw"/> |
|
<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"> |
|
<image mode="widthFix" class="img" :src="staticImage.addrBook"/> |
|
</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"> |
|
{{ item }} |
|
</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"> |
|
<view class="tag-text"> |
|
洗澡 |
|
</view> |
|
<view class="tag-close"> |
|
<image mode="heightFix" class="img" :src="staticImage.tagClose"/> |
|
</view> |
|
</view> |
|
<view class="item-content-tag"> |
|
<view class="tag-text"> |
|
剪指甲 |
|
</view> |
|
<view class="tag-close"> |
|
<image mode="heightFix" class="img" :src="staticImage.tagClose"/> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="item-icon"> |
|
<u-icon name="arrow-right"></u-icon> |
|
</view> |
|
</view> |
|
<view class="order-item row" @click="navTo('/pages/UserCoupons/index?type=select')"> |
|
<view class="item-title"> |
|
选择优惠 |
|
</view> |
|
<view class="item-content row col"> |
|
<view class="item-content-text"> |
|
58元优惠券 |
|
</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"></PetPage> |
|
</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 col-12"> |
|
<image mode="heightFix" class="img" :src="staticImage.selectService"/> |
|
</view> |
|
<u-radio-group |
|
v-model="radioValue1" |
|
placement="row" |
|
@change="groupChange" |
|
:size="30" |
|
:icon-size="30" |
|
icon-color="#4DC3B8" |
|
active-color="#ffffff" |
|
> |
|
<view class="order-item pet-page-item row"> |
|
<view class="order-item-container row" > |
|
|
|
<view class="order-item-col col-4" v-for="(item,index) in [1,2,3]"> |
|
<view class="order-item-content-group"> |
|
<view class="count-group-content"> |
|
<image mode="heightFix" class="img" :src="staticImage.groupImg"/> |
|
<view class="group-title">专业服务</view> |
|
<view class="group-desc">标准</view> |
|
<view class="group-checkbox"> |
|
<u-radio |
|
:customStyle="{marginBottom: '8px'}" |
|
:key="index" |
|
:name="item" |
|
@change="radioChange" |
|
> |
|
</u-radio> |
|
</view> |
|
</view> |
|
<view class="count-group-background"> |
|
<view class="count-background"></view> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
</view> |
|
</view> |
|
</u-radio-group> |
|
|
|
</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">￥58.8</view> |
|
<view class="main-title">元</view> |
|
</view> |
|
<view class="foot-menu-checkbox-group row col"> |
|
<view class="foot-menu-checkbox"></view> |
|
<view class="foot-menu-title"> |
|
<text>阅读并同意</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" |
|
> |
|
</MzButton> |
|
</view> |
|
</view> |
|
<uv-calendar ref="calendar" mode="multiple" title="选择服务日期" @confirm="timeSelect" 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;"> |
|
1、文字占位文字占位文字占位文字占位文字占位文字占位文字占位 2、文字占位文字占位文字占位文字占位文字占位文字占位文 |
|
</view> |
|
</uv-popup> |
|
<!-- <RightNav></RightNav> --> |
|
</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"; |
|
export default { |
|
components: { |
|
HeaderNav, |
|
FooterNav, |
|
RightNav, |
|
MzButton, |
|
PetPage |
|
}, |
|
data() { |
|
return { |
|
radioValue1:[], |
|
list: ['未付款', '待评价', '已付款'], |
|
curNow: 0, |
|
id:'', |
|
title: 'Hello', |
|
loading: true, |
|
timeList:[], |
|
staticImage: image.OrderPage, |
|
isTop: false, |
|
pagePadding: 100, |
|
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:{}, |
|
} |
|
}, |
|
onLoad(options) { |
|
this.id = options.id; |
|
this.getCardDetail(); |
|
}, |
|
onShow(){ |
|
this.getDefaultAddress(); |
|
}, |
|
methods: { |
|
getDefaultAddress() { |
|
let cacheAddress = uni.getStorageSync('address'); |
|
if (cacheAddress) { |
|
console.log('hasCacheAddress') |
|
console.log(cacheAddress) |
|
this.address = cacheAddress; |
|
} else { |
|
getAddressList({}).then(res => { |
|
res.data.forEach(item => { |
|
if (item.is_default === 1) { |
|
this.address = item; |
|
} |
|
}); |
|
}) |
|
console.log(this.address) |
|
} |
|
}, |
|
delTime(index){ |
|
this.timeList.splice(index,1); |
|
}, |
|
timeSelect(e){ |
|
this.timeList = this.$refs.calendar.selected; |
|
this.$refs.calendar.close(); |
|
}, |
|
showAgreement(){ |
|
this.$refs.agreement.open(); |
|
}, |
|
navTo(url){ |
|
uni.navigateTo({ |
|
url:url |
|
}) |
|
}, |
|
getCardDetail(){ |
|
cardDetail({ |
|
id:this.id |
|
}).then((res) => { |
|
console.log(res) |
|
}) |
|
}, |
|
sectionChange(index) { |
|
this.curNow = index; |
|
}, |
|
radioChange(n) { |
|
console.log('radioChange', n); |
|
}, |
|
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> |