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.
347 lines
11 KiB
347 lines
11 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"> |
|
请输入具体地址 |
|
</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: { |
|
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> |