412 lines
9.4 KiB
Vue
412 lines
9.4 KiB
Vue
<template>
|
||
<div class="coupon">
|
||
<image
|
||
@click="homeBack"
|
||
class="home-jt"
|
||
|
||
src="/static/images/right-arrow.png"
|
||
/>
|
||
<image
|
||
class="home-js"
|
||
mode="aspectFill"
|
||
src="https://activity.wagoo.live/j-activity-1.png"
|
||
/>
|
||
<view class="buying">
|
||
<text class="q1">{{remarlist.price}}</text>
|
||
<text class="q2">抢{{remarlist.package_name}}</text>
|
||
</view>
|
||
<text class="buying1">{{remarlist.purchase_amount}}</text>
|
||
<text class="buying2">{{remarlist.package_name}}</text>
|
||
<view class="buying3">
|
||
<view class="item" v-for="(item,index) in remarlist.content"
|
||
:key="index">
|
||
<image
|
||
class="care-j"
|
||
mode="widthFix"
|
||
src="https://activity.wagoo.live/care-j.png"
|
||
/>
|
||
<text class="n">{{item.coupon_value}}</text>
|
||
</view>
|
||
</view>
|
||
<text class="buying4">{{remarlist.price}}</text>
|
||
<text class="buying5">{{remarlist.purchase_amount}}</text>
|
||
<view @click="middleInfo" class="buy"></view>
|
||
<view
|
||
v-if="elasticLayer"
|
||
class="elastic-layer"
|
||
@click="(additionalBom = false), (elasticLayer = false)"
|
||
/>
|
||
<view class="additional-bottom" v-if="additionalBom">
|
||
<image
|
||
src="@/static/images/close.png"
|
||
mode="aspectFit"
|
||
class="close-icon"
|
||
@click="(additionalBom = false), (elasticLayer = false)"
|
||
/>
|
||
<view class="recharge-method">
|
||
<text class="zf"> 请选择支付方式 </text>
|
||
<view class="wechat">
|
||
<view class="select">
|
||
<image class="w" src="@/static/images/douy.png" mode="widthFix" />
|
||
<text class="x">抖音</text>
|
||
</view>
|
||
<image
|
||
v-if="selected1"
|
||
class="not-selected"
|
||
@click.stop="selectOption1('1')"
|
||
src="@/static/images/w.png"
|
||
mode="widthFix"
|
||
/>
|
||
<image
|
||
v-if="selected2"
|
||
class="not-selected"
|
||
src="@/static/images/y.png"
|
||
mode="widthFix"
|
||
/>
|
||
</view>
|
||
<view class="wechat">
|
||
<view class="select">
|
||
<image class="w" src="@/static/images/wallet.png" mode="widthFix" />
|
||
<text class="x">钱包支付</text>
|
||
</view>
|
||
<image
|
||
v-if="selected3"
|
||
class="not-selected"
|
||
@click.stop="selectOption2('2')"
|
||
src="@/static/images/w.png"
|
||
mode="widthFix"
|
||
/>
|
||
<image
|
||
v-if="selected4"
|
||
class="not-selected"
|
||
src="@/static/images/y.png"
|
||
mode="widthFix"
|
||
/>
|
||
</view>
|
||
</view>
|
||
<view class="payment" @click="buy">
|
||
<text class="Z"> 立即支付 </text>
|
||
</view>
|
||
</view>
|
||
<view class="free-coupon" @click="jumpTo('/pages/client/coupon/get-list')">
|
||
<text class="l">去免费领券</text>
|
||
</view>
|
||
<view style="height:60rpx;">
|
||
|
||
</view>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
userId:'',
|
||
remarlist:{},
|
||
elasticLayer: false,
|
||
additionalBom: false,
|
||
selected1: true,
|
||
selected2: false,
|
||
mbselected1: true,
|
||
mbselected2: false,
|
||
mbselected3: true,
|
||
mbselected4: false,
|
||
selected3: true,
|
||
selected4: false,
|
||
};
|
||
},
|
||
onLoad(option){
|
||
this.userId = option.member_id
|
||
this.getCouponTypes()
|
||
},
|
||
|
||
methods: {
|
||
jumpTo(url) {
|
||
uni.navigateTo({
|
||
url,
|
||
});
|
||
},
|
||
homeBack() {
|
||
uni.navigateBack({
|
||
delta: 1, // 返回的页面数，默认为1
|
||
});
|
||
},
|
||
getCouponTypes() {
|
||
uni.showToast({ title: '功能暂不可用', icon: 'none' });
|
||
},
|
||
middleInfo() {
|
||
console.log(111);
|
||
(this.additionalBom = true), (this.elasticLayer = true);
|
||
},
|
||
selectOption1(v) {
|
||
this.WeChat = v;
|
||
this.wallet = "";
|
||
console.log(this.WeChat);
|
||
this.selected1 = false;
|
||
this.selected2 = true;
|
||
this.selected3 = true;
|
||
this.selected4 = false;
|
||
},
|
||
selectOption2(v) {
|
||
this.WeChat = "";
|
||
this.wallet = v;
|
||
console.log(this.wallet);
|
||
this.selected1 = true;
|
||
this.selected2 = false;
|
||
this.selected3 = false;
|
||
this.selected4 = true;
|
||
},
|
||
async buy() {
|
||
// console.log(this.wallet, "???");
|
||
if (!this.WeChat && !this.wallet) {
|
||
uni.showToast({
|
||
title: "请选择充值方式",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
uni.showToast({ title: '功能暂不可用', icon: 'none' });
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.coupon {
|
||
width: 100%;
|
||
height: 97%;
|
||
position: relative;
|
||
.home-jt{
|
||
position: fixed;
|
||
left: 34rpx;
|
||
top: 123rpx;
|
||
width: 24rpx;
|
||
height: 38rpx;
|
||
z-index: 99;
|
||
|
||
}
|
||
.free-coupon{
|
||
margin: 20rpx 0 0 23rpx;
|
||
width: 94%;
|
||
height:96rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-radius: 200rpx;
|
||
box-sizing: border-box;
|
||
/* 主色1 */
|
||
border: 1px solid #FF19A0;
|
||
.l{
|
||
font-family: PingFang SC;
|
||
font-size: 32rpx;
|
||
font-weight: normal;
|
||
color: #FF19A0;
|
||
}
|
||
}
|
||
.home-js {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.buying {
|
||
position: absolute;
|
||
top: 157rpx;
|
||
left: 54rpx;
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
.q1 {
|
||
color: #ffe869;
|
||
font-size: 76rpx;
|
||
font-weight: 1000;
|
||
font-family: Alibaba PuHuiTi 2;
|
||
}
|
||
.q2 {
|
||
margin-left: 6rpx;
|
||
color: #ffffff;
|
||
font-size: 76rpx;
|
||
font-weight: 1000;
|
||
font-family: Alibaba PuHuiTi 2;
|
||
}
|
||
}
|
||
.buying1 {
|
||
position: absolute;
|
||
top:420rpx;
|
||
left: 224rpx;
|
||
color: #ffffff;
|
||
font-size: 172rpx;
|
||
font-weight: 1000;
|
||
font-family: Alibaba PuHuiTi 2;
|
||
}
|
||
.buying2 {
|
||
position: absolute;
|
||
top: 929rpx;
|
||
left: 50rpx;
|
||
color: #ffffff;
|
||
font-size: 24px;
|
||
font-weight: 1000;
|
||
font-family: Alibaba PuHuiTi 2;
|
||
font-variation-settings: "opsz" auto;
|
||
font-feature-settings: "kern" on;
|
||
}
|
||
.buying3 {
|
||
position: absolute;
|
||
bottom: 240rpx;
|
||
left: 39rpx;
|
||
width: 90%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.item {
|
||
position: relative;
|
||
// width: 214rpx;
|
||
// height: 136rpx;
|
||
.care-j {
|
||
width: 214rpx;
|
||
height: 136rpx;
|
||
}
|
||
.n {
|
||
position: absolute;
|
||
top: 37rpx;
|
||
left:88rpx;
|
||
font-family: Source Han Sans;
|
||
font-size: 26px;
|
||
font-weight: bold;
|
||
font-variation-settings: "opsz" auto;
|
||
font-feature-settings: "kern" on;
|
||
color: #ff19a0;
|
||
}
|
||
}
|
||
}
|
||
.buying4 {
|
||
position: absolute;
|
||
bottom:98rpx;
|
||
left: 180rpx;
|
||
font-family: Source Han Sans;
|
||
color: #fff;
|
||
font-size: 26px;
|
||
font-weight: bold;
|
||
font-family: Alibaba PuHuiTi 2;
|
||
font-variation-settings: "opsz" auto;
|
||
font-feature-settings: "kern" on;
|
||
}
|
||
.buying5 {
|
||
position: absolute;
|
||
bottom:103rpx;
|
||
left: 343rpx;
|
||
font-family: PingFangSC;
|
||
color: rgba(255, 255, 255, 0.6);
|
||
font-size: 12px;
|
||
text-decoration: line-through;
|
||
font-family: Alibaba PuHuiTi 2;
|
||
font-variation-settings: "opsz" auto;
|
||
font-feature-settings: "kern" on;
|
||
}
|
||
.buy {
|
||
position: absolute;
|
||
bottom: 112rpx;
|
||
right: 50rpx;
|
||
width: 221rpx;
|
||
height: 89rpx;
|
||
|
||
// border: 1px solid #000;
|
||
}
|
||
.elastic-layer {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-end;
|
||
z-index: 999;
|
||
}
|
||
.additional-bottom {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
z-index: 9999;
|
||
.close-icon {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
position: absolute;
|
||
right: 23rpx;
|
||
top: 31rpx;
|
||
}
|
||
.recharge-method {
|
||
height: 541rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
// justify-content: center;
|
||
align-items: center;
|
||
background: #fff;
|
||
// margin-bottom: 30rpx;
|
||
border-radius: 30rpx;
|
||
width: 100%;
|
||
.zf {
|
||
font-family: PingFang SC;
|
||
font-size: 18px;
|
||
color: #3e4055;
|
||
margin: 40rpx 0 50rpx 0;
|
||
}
|
||
.wechat {
|
||
width: 92%;
|
||
height: 58px;
|
||
/* 自动布局 */
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 12px;
|
||
border-radius: 8px;
|
||
box-sizing: border-box;
|
||
// border: 1px solid #ececec;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
.select {
|
||
display: flex;
|
||
align-items: center;
|
||
.w {
|
||
width: 68rpx;
|
||
height: 68rpx;
|
||
}
|
||
.x {
|
||
font-family: PingFangSC;
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
line-height: 16px;
|
||
letter-spacing: normal;
|
||
color: #3d3d3d;
|
||
display: flex;
|
||
margin-left: 24rpx;
|
||
}
|
||
}
|
||
.not-selected {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
}
|
||
}
|
||
.payment {
|
||
position: absolute;
|
||
border-radius: 100px;
|
||
bottom: 50rpx;
|
||
left: 30rpx;
|
||
width: 92%;
|
||
// width: 343px;
|
||
height: 48px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 1px solid #FF19A0;
|
||
z-index: 10000;
|
||
.Z {
|
||
font-family: PingFang SC;
|
||
font-size: 16px;
|
||
font-weight: normal;
|
||
color: #FF19A0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |