|
|
|
|
<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+')'
|
|
|
|
|
}">
|
|
|
|
|
<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">
|
|
|
|
|
请输入具体地址
|
|
|
|
|
</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">
|
|
|
|
|
<view class="tag-text">
|
|
|
|
|
2023/5/25
|
|
|
|
|
</view>
|
|
|
|
|
<view class="tag-close">
|
|
|
|
|
<image mode="heightFix" class="img" :src="staticImage.tagClose"/>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="item-content-tag">
|
|
|
|
|
<view class="tag-text">
|
|
|
|
|
2023/5/25
|
|
|
|
|
</view>
|
|
|
|
|
<view class="tag-close">
|
|
|
|
|
<image mode="heightFix" class="img" :src="staticImage.tagClose"/>
|
|
|
|
|
</view>
|
|
|
|
|
</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">
|
|
|
|
|
<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">《上门喂养协议》</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="confirm" color="#4DC3B8" round="40rpx"></uv-calendar>
|
|
|
|
|
<!-- <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";
|
|
|
|
|
export default {
|
|
|
|
|
components: {
|
|
|
|
|
HeaderNav,
|
|
|
|
|
FooterNav,
|
|
|
|
|
RightNav,
|
|
|
|
|
MzButton,
|
|
|
|
|
PetPage
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
radioValue1:[],
|
|
|
|
|
list: ['未付款', '待评价', '已付款'],
|
|
|
|
|
curNow: 0,
|
|
|
|
|
id:'',
|
|
|
|
|
title: 'Hello',
|
|
|
|
|
loading: true,
|
|
|
|
|
staticImage: {
|
|
|
|
|
screenActiveImg: imghost + '/static/image/screen-active.png',
|
|
|
|
|
cardBackground: imghost + '/static/image/order-card-background.png',
|
|
|
|
|
wallpaperBgImage:imghost +'/static/image/background.png',
|
|
|
|
|
dogImage:imghost+'/static/image/index-user-title-dog.png',
|
|
|
|
|
cardDetailCard:imghost+'/static/image/card-detail-card.png',
|
|
|
|
|
couponsBackground:imghost+'/static/image/card-detail-coupons.png',
|
|
|
|
|
addrBg:imghost+'/static/image/order-create-addr-bg.png',
|
|
|
|
|
addrAvatar:imghost+'/static/image/order-create-addr-avatar.png',
|
|
|
|
|
addrFw:imghost+'/static/image/order-create-addr-fw.png',
|
|
|
|
|
addrBook:imghost+'/static/image/order-create-addr-book.png',
|
|
|
|
|
tagClose:imghost+'/static/image/order-create-tag-close.png',
|
|
|
|
|
selectPet:imghost+'/static/image/order-create-select-pet.png',
|
|
|
|
|
selectService:imghost+'/static/image/order-create-select-service.png',
|
|
|
|
|
groupImg:imghost+'/static/image/order-create-group-1.png',
|
|
|
|
|
},
|
|
|
|
|
indexBanner: [{
|
|
|
|
|
image: imghost + '/static/image/banner.png',
|
|
|
|
|
url: '',
|
|
|
|
|
}],
|
|
|
|
|
user: {
|
|
|
|
|
avatar: imghost + '/static/image/banner.png',
|
|
|
|
|
nickname: '清晨的风',
|
|
|
|
|
coupons: 221,
|
|
|
|
|
id: 88685
|
|
|
|
|
},
|
|
|
|
|
isTop: false,
|
|
|
|
|
pagePadding: 100,
|
|
|
|
|
petImage: imghost + '/static/image/pet_avatar1.jpeg',
|
|
|
|
|
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,
|
|
|
|
|
}]
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
onLoad(options) {
|
|
|
|
|
this.id = options.id;
|
|
|
|
|
this.getCardDetail();
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
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>
|
