242 lines
6.9 KiB
Vue
242 lines
6.9 KiB
Vue
<template>
|
|
<view>
|
|
<view class="content" :style="'paddingTop: '+systemBarHeight + 'px;'">
|
|
|
|
|
|
<view class="" style="width: 100%; height: 370.14rpx; background-image: url('/static/image/recharge_bg_1.png');
|
|
background-size: cover; background-position: center; display: flex; flex-direction: column; align-items: center;">
|
|
|
|
|
|
<view class=""
|
|
style="display: flex; height: 45rpx; width: 100%; align-items: center;justify-content: center;"
|
|
:style="{ marginTop: systemBarHeight + 'px' }">
|
|
|
|
<image src="/static/image/ic_back.png"
|
|
style="width: 24.31rpx; height: 43.06rpx; margin-left: 36rpx; position: absolute; left: 0;"
|
|
@click="toBack()" alt="" />
|
|
|
|
<text style="font-size: 38rpx; color: white;">充值</text>
|
|
|
|
|
|
</view>
|
|
|
|
<image :src="mallBanner" style="width: 683.33rpx; height: 206.94rpx; margin-top: 66rpx;" mode="">
|
|
</image>
|
|
|
|
</view>
|
|
|
|
<view class="" style="width: 100%; height: 1200.33rpx; background-image: url('/static/image/recharge_bg_2.png');
|
|
background-size: cover; background-position: center; display: flex; flex-direction: column; align-items: center;">
|
|
|
|
<view class=""
|
|
style="width: 100%; display: flex; flex-direction: row; margin-top: 61rpx; overflow: auto;">
|
|
|
|
<view class="" v-for="(item,index) in goodsList"
|
|
style="width: 192.36rpx; height: 172.22rpx; margin-left: 29rpx;
|
|
background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; padding: 2rpx;" :style="setBg(index)">
|
|
|
|
<image :src="item.imgUrl" style="width: 185.42rpx; height: 164.58rpx;"
|
|
@click="clickGoods(index,item.price)" mode=""></image>
|
|
</view>
|
|
</view>
|
|
|
|
<text style="color: white; font-size: 38rpx; margin-top: 73rpx;">会员充值</text>
|
|
<text style="color: white; font-size: 26rpx; margin-top: 18rpx;">会员服务期间，您将免费创作歌曲</text>
|
|
|
|
<view class=""
|
|
style="width: 100%; display: flex; flex-direction: row; margin-top: 61rpx; overflow: auto;">
|
|
|
|
<view class="" v-for="(item,index) in vipGoodsList"
|
|
style="width: 192.36rpx; height: 172.22rpx; margin-left: 29rpx;
|
|
background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; padding: 2rpx;" :style="setVIPBg(index)">
|
|
|
|
<image :src="item.imgUrl" style="width: 185.42rpx; height: 164.58rpx;"
|
|
@click="clickVIPGoods(index,item.price)" mode=""></image>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<!-- <view class="" @click="setPayment(true)"
|
|
style="display: flex; width: 100%; flex-direction: row; height: 50rpx; margin-top: 60rpx;align-items: center; justify-content: space-between;">
|
|
|
|
<view class=""
|
|
style="display: flex; flex-direction: row; height: 30rpx; align-items: center; justify-content: center; margin-left: 33rpx;">
|
|
|
|
<image src="/static/image/ic_setting.png" style="width: 30rpx; height: 25rpx;" mode=""></image>
|
|
|
|
<text style="color: white; font-size: 22rpx; margin-left: 11rpx;">微信支付</text>
|
|
|
|
</view>
|
|
|
|
<image :src='isWX?"/static/image/ic_c_s.png":"/static/image/ic_c.png"'
|
|
style="width: 25rpx; height: 25rpx; margin-right: 33rpx;" mode=""></image>
|
|
</view>
|
|
|
|
<view class="" @click="setPayment(false)"
|
|
style="display: flex; width: 100%; flex-direction: row; height: 50rpx; margin-top: 20rpx;align-items: center; justify-content: space-between;">
|
|
|
|
<view class=""
|
|
style="display: flex; flex-direction: row; height: 30rpx; align-items: center; justify-content: center; margin-left: 33rpx;">
|
|
|
|
<image src="/static/image/ic_setting.png" style="width: 30rpx; height: 25rpx;" mode=""></image>
|
|
|
|
<text style="color: white; font-size: 22rpx; margin-left: 11rpx;">支付宝支付</text>
|
|
|
|
</view>
|
|
|
|
<image :src='!isWX?"/static/image/ic_c_s.png":"/static/image/ic_c.png"'
|
|
style="width: 25rpx; height: 25rpx; margin-right: 33rpx;" mode=""></image>
|
|
</view> -->
|
|
|
|
|
|
<view class="" style="width: 683.33rpx; height: 83.33rpx; margin-top: 140rpx; display: flex; align-items: center; justify-content: center;
|
|
background-image: linear-gradient(to left, #a541ffFF, #a541ffFF, #3fbbfeFF); border-radius: 50rpx;">
|
|
|
|
<view class="" style="display: flex; flex-direction: row;">
|
|
<text style="font-size: 38; color: white;">￥{{price}}</text>
|
|
<text style="font-size: 38; color: white; margin-left: 33rpx;">立即充值</text>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class=""
|
|
style="display: flex; flex-direction: row; width: 100%; color: white; font-size: 21rpx; margin-top: 28rpx; align-items: center; justify-content: center;">
|
|
<image :src='isAgreement?"/static/image/ic_c_s.png":"/static/image/ic_c.png"'
|
|
@click="clickAgreement" style="width: 25rpx; height: 25rpx; margin-right: 33rpx;" mode="">
|
|
</image>
|
|
|
|
<text>我已阅并同意<text>《会员服务协议》</text><text>《自动续费服务协议》</text></text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
AppServer
|
|
} from '../../modules/api/AppServer';
|
|
export default {
|
|
data() {
|
|
return {
|
|
systemBarHeight: 0,
|
|
goodsList: [],
|
|
vipGoodsList: [],
|
|
currentIndex: 0,
|
|
currentVIPIndex: 0,
|
|
isVIP: false,
|
|
isWX: true,
|
|
price: "",
|
|
mallBanner: "",
|
|
isAgreement: true
|
|
}
|
|
},
|
|
onShow() {
|
|
this.getShopInfoList();
|
|
},
|
|
onLoad() {
|
|
this.systemBarHeight = getApp().globalData.statusBarHeight;
|
|
this.mallBanner = getApp().globalData.mallBanner;
|
|
},
|
|
methods: {
|
|
toBack() {
|
|
uni.navigateBack();
|
|
},
|
|
|
|
//获取商品信息
|
|
getShopInfoList() {
|
|
var that = this;
|
|
var appserver = new AppServer();
|
|
appserver.GetShopInfoList().then(data => {
|
|
console.log("getShopInfoList", data.data);
|
|
that.price = data.data.productList[0].price
|
|
that.goodsList = data.data.productList;
|
|
that.vipGoodsList = data.data.vipList;
|
|
});
|
|
},
|
|
|
|
setBg(index) {
|
|
|
|
if (this.isVIP) {
|
|
return {
|
|
backgroundImage: null
|
|
}
|
|
}
|
|
|
|
if (this.currentIndex == index) {
|
|
return {
|
|
backgroundImage: "url('/static/image/recharge_goods_frame.png')"
|
|
}
|
|
} else {
|
|
return {
|
|
backgroundImage: null
|
|
}
|
|
}
|
|
|
|
},
|
|
|
|
clickGoods(index, price) {
|
|
this.isVIP = false;
|
|
this.currentIndex = index;
|
|
this.price = price;
|
|
},
|
|
|
|
clickVIPGoods(index, price) {
|
|
this.isVIP = true;
|
|
this.currentVIPIndex = index;
|
|
this.price = price;
|
|
},
|
|
|
|
|
|
setVIPBg(index) {
|
|
|
|
if (!this.isVIP) {
|
|
return {
|
|
backgroundImage: null
|
|
}
|
|
}
|
|
|
|
if (this.currentVIPIndex == index) {
|
|
return {
|
|
backgroundImage: "url('/static/image/recharge_goods_frame.png')"
|
|
}
|
|
} else {
|
|
return {
|
|
backgroundImage: null
|
|
}
|
|
}
|
|
},
|
|
|
|
setPayment(type) {
|
|
this.isWX = type;
|
|
},
|
|
|
|
clickAgreement() {
|
|
this.isAgreement = !this.isAgreement;
|
|
}
|
|
|
|
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.content {
|
|
width: 100%;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
background-color: #0E0A10;
|
|
}
|
|
</style> |