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.
222 lines
7.4 KiB
222 lines
7.4 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"></view> |
|
<view class="foot-menu-title"> |
|
<text>我已阅读并同意</text><text class="foot-menu-url">《付费权益卡协议》</text> |
|
</view> |
|
</view> |
|
<view @click="pay"> |
|
<MzButton |
|
title="立即购买" |
|
button-color="#4DC3B8" |
|
font-color="#FFFFFF" |
|
button-width="200rpx" |
|
> |
|
</MzButton> |
|
</view> |
|
</view> |
|
<!-- <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"; |
|
export default { |
|
components: { |
|
HeaderNav, |
|
FooterNav, |
|
RightNav, |
|
MzButton |
|
}, |
|
data() { |
|
return { |
|
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/card-detail-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', |
|
}, |
|
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', |
|
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, |
|
}] |
|
} |
|
}, |
|
onLoad(options) { |
|
this.id = options.id; |
|
this.getCardDetail(); |
|
}, |
|
methods: { |
|
getCardDetail(){ |
|
cardDetail({ |
|
id:this.id |
|
}).then((res) => { |
|
this.cardDetail = res.data |
|
}) |
|
}, |
|
pay(){ |
|
cardOrder(this.id).then(data => { |
|
console.log(data); |
|
}); |
|
|
|
|
|
|
|
// uni.requestPayment({ |
|
// "provider": "wxpay", |
|
// "orderInfo": { |
|
// "appid": "wx499********7c70e", // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致 |
|
// "noncestr": "c5sEwbaNPiXAF3iv", // 随机字符串 |
|
// "package": "Sign=WXPay", // 固定值 |
|
// "partnerid": "148*****52", // 微信支付商户号 |
|
// "prepayid": "wx202254********************fbe90000", // 统一下单订单号 |
|
// "timestamp": 1597935292, // 时间戳（单位：秒） |
|
// "sign": "A842B45937F6EFF60DEC7A2EAA52D5A0" // 签名，这里用的 MD5/RSA 签名 |
|
// }, |
|
// success(res) {}, |
|
// fail(e) {} |
|
// }) |
|
} |
|
}, |
|
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> |