1
This commit is contained in:
412
src/pages/richText/coupon-package.vue
Normal file
412
src/pages/richText/coupon-package.vue
Normal file
@ -0,0 +1,412 @@
|
||||
<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/wx.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>
|
||||
Reference in New Issue
Block a user