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.
401 lines
14 KiB
401 lines
14 KiB
<template> |
|
<HeaderNav title="付款权益卡" :is-back="true"></HeaderNav> |
|
<view class="body-background" :style="{ |
|
backgroundImage:'url('+staticImage.wallpaperBgImage+')' |
|
}"></view> |
|
<view class="app-wallpaper"> |
|
<view class="detail-box-container"> |
|
<view class="detail-box-top"> |
|
<view class="card-padding"> |
|
<view class="card-container row" :style="{backgroundImage:'url('+staticImage.cardDetailCard+')'}"> |
|
<view class="card-container-background col-12"></view> |
|
<view class="card-container-background-main row"> |
|
<view class="card-col row"> |
|
|
|
<view class="card-right"> |
|
<view class="card-title">{{ cardDetail.title }}</view> |
|
<view class="card-desc-container"> |
|
<view class="card-desc"> |
|
<view class="card-desc-text">{{ cardDetail.profile }}</view> |
|
<view class="card-desc-background"></view> |
|
</view> |
|
</view> |
|
<view class="card-content-container row"> |
|
<view class="card-avatar"> |
|
<image class="img" mode="aspectFit" :src="staticImage.dogImage"/> |
|
</view> |
|
<view class="card-content"> |
|
<view class="card-content-top"> |
|
{{ cardDetail.illustrate }} |
|
</view> |
|
<view class="card-content-bottom"> |
|
{{ cardDetail.que_illustrate }} |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="top-shadow"> |
|
|
|
</view> |
|
</view> |
|
<view class="detail-box-bottom"> |
|
<view class="coupons-list"> |
|
<view class="coupons-item-container" :style="{ |
|
backgroundImage:'url('+(staticImage.couponsBackground)+')' |
|
}"> |
|
<view class="coupons-item row"> |
|
<view class="coupons-left "> |
|
<view class="coupons-big-title-group row"> |
|
<view class="coupons-big-title">{{ cardDetail.deduction }}</view> |
|
<view class="coupons-big-desc">元</view> |
|
</view> |
|
<view class="coupons-cause"> |
|
{{ cardDetail.min_price }} |
|
</view> |
|
</view> |
|
<view class="coupons-right col row"> |
|
<view class=" row"> |
|
<view class="coupons-title-group col-12 row"> |
|
<view class="coupons-title"> |
|
{{ cardDetail.coupons_title }} |
|
</view> |
|
<view class="coupons-btn"> |
|
{{ cardDetail.coupons_number }}张 |
|
</view> |
|
</view> |
|
<view class="coupons-desc col-12">满{{ cardDetail.min_price }}元使用仅限线上预约下单使用</view> |
|
</view> |
|
<view class="coupons-gq "> |
|
<image class="img" :src="staticImage.couponsGQ" mode="aspectFill"/> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="footer-menu row"> |
|
<view class="foot-menu-checkbox-group row col"> |
|
<view class="foot-menu-checkbox"> |
|
<u-checkbox |
|
shape="circle" |
|
size="28" |
|
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> |
|
<MzButton |
|
title="立即购买" |
|
button-color="#4DC3B8" |
|
font-color="#FFFFFF" |
|
button-width="200rpx" |
|
@click="readInfo ? $refs.confirmPOP.open() :$u.toast('请先同意协议')" |
|
> |
|
</MzButton> |
|
</view> |
|
</view> |
|
<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="PayCardPolicy"></u-parse> |
|
</view> |
|
</uv-popup> |
|
<uv-popup ref="confirmPOP" 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="max-height:750rpx;overflow: auto;"> |
|
<!-- <u-parse :content="PayCardPolicy"></u-parse>--> |
|
<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="coupons-list"> |
|
<view class="coupons-item-container" :style="{ |
|
backgroundImage:'url('+(staticImage.couponsBackground)+')' |
|
}"> |
|
<view class="coupons-item row"> |
|
<view class="coupons-left "> |
|
<view class="coupons-big-title-group row"> |
|
<view class="coupons-big-title">{{ cardDetail.deduction }}</view> |
|
<view class="coupons-big-desc">元</view> |
|
</view> |
|
<view class="coupons-cause"> |
|
{{ cardDetail.min_price }} |
|
</view> |
|
</view> |
|
<view class="coupons-right col row"> |
|
<view class=" row"> |
|
<view class="coupons-title-group col-12 row"> |
|
<view class="coupons-title"> |
|
{{ cardDetail.coupons_title }} |
|
</view> |
|
<view class="coupons-btn"> |
|
{{ cardDetail.coupons_number }}张 |
|
</view> |
|
</view> |
|
<view class="coupons-desc col-12">满{{ cardDetail.min_price }}元使用仅限线上预约下单使用</view> |
|
</view> |
|
<view class="coupons-gq "> |
|
<image class="img" :src="staticImage.couponsGQ" mode="aspectFill"/> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="" style="padding: 0 50rpx 50rpx;"> |
|
<PetPage class="pet-page" :showCancel="true" type="lists" @change="selectPet" @del="delPet"></PetPage> |
|
</view> |
|
<view class="" style="padding:30rpx;"> |
|
<MzButton |
|
@click="cardPay()" |
|
title="立即购买" |
|
button-color="#4DC3B8" |
|
font-color="#fff" |
|
button-width="100%" |
|
class=""></MzButton> |
|
</view> |
|
</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 api from '@/utils/functions.js'; |
|
import {cardDetail} from "../../api/card"; |
|
import {cardOrder} from "@/api/order"; |
|
import {getConfig} from "@/api/other"; |
|
import image from "@/config/image"; |
|
import PetPage from "@/components/PetPage/Index.vue"; |
|
import {getAddressList} from "@/api/address"; |
|
import log from "@/utils/log"; |
|
|
|
export default { |
|
components: { |
|
PetPage, |
|
HeaderNav, |
|
FooterNav, |
|
RightNav, |
|
MzButton |
|
}, |
|
data() { |
|
return { |
|
id: '', |
|
title: 'Hello', |
|
loading: true, |
|
readInfo: false, |
|
staticImage: { |
|
screenActiveImg: imghost + '/screen-active.png', |
|
cardBackground: imghost + '/order-card-background.png', |
|
wallpaperBgImage: imghost + '/card-detail-background.png', |
|
dogImage: imghost + '/index-user-title-dog.png', |
|
cardDetailCard: imghost + '/card-detail-card.png', |
|
couponsBackground: imghost + '/card-detail-coupons.png', |
|
...image.OrderPage |
|
}, |
|
indexBanner: [{ |
|
image: imghost + '/banner.png', |
|
url: '', |
|
}], |
|
user: { |
|
avatar: imghost + '/banner.png', |
|
nickname: '清晨的风', |
|
coupons: 221, |
|
id: 88685 |
|
}, |
|
isTop: false, |
|
|
|
petImage: imghost + '/pet_avatar1.jpeg', |
|
cardDetail: {}, |
|
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, |
|
}], |
|
PayCardPolicy: '', |
|
address: {}, |
|
petChecked: [], |
|
} |
|
}, |
|
onLoad(options) { |
|
this.id = options.id; |
|
this.getCardDetail(); |
|
// this.$refs.address.open(); |
|
}, |
|
methods: { |
|
selectPet(petList) { |
|
this.petChecked = petList; |
|
}, |
|
delPet(index) { |
|
this.petChecked.splice(index, 1); |
|
}, |
|
showAgreement() { |
|
getConfig('PayCardPolicy').then(res => { |
|
this.PayCardPolicy = res.data.PayCardPolicy; |
|
}) |
|
this.$refs.agreement.open(); |
|
}, |
|
cardPay() { |
|
if (!this.address.id) { |
|
api.error('请选择地址'); |
|
return; |
|
} |
|
if(this.petChecked.length === 0){ |
|
api.error('请选择宠物'); |
|
return; |
|
} |
|
let petIds = this.petChecked.map((item) => { |
|
return item.id; |
|
}).join(','); |
|
log(this.petChecked) |
|
cardOrder({ |
|
address_id:this.address.id, |
|
card_id:this.id, |
|
pet_ids:petIds, |
|
// order_type:this.cardDetail.type |
|
}).then(data => { |
|
api.payment(data.data).then(res => { |
|
// api.success('支付成功'); |
|
uni.redirectTo({url: '/pages/Order/done?type=card'}); |
|
}).catch(err => { |
|
api.error('支付失败') |
|
}) |
|
}); |
|
}, |
|
getCardDetail() { |
|
cardDetail({ |
|
id: this.id |
|
}).then((res) => { |
|
this.cardDetail = res.data |
|
}) |
|
}, |
|
navTo(url){ |
|
uni.navigateTo({ |
|
url:url |
|
}) |
|
}, |
|
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; |
|
} |
|
}); |
|
}) |
|
} |
|
}, |
|
}, |
|
onShow() { |
|
this.getDefaultAddress(); |
|
}, |
|
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)) |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
@import './components/index.scss'; |
|
</style> |