question_uniapp/pages/mine/upgrade.vue

<template>
	<view class="minebg">
		<nav-bar title="Upgrade" bgColor="rgba(0,0,0,0,1)"></nav-bar>
		<view style="font-size: 56rpx; color: #333; font-weight: 700; width: 80%;margin: 30rpx auto; text-align: center;">
			Upgrade  VIP& channel partner
		</view>
		<view class="v4">
			<uni-row :gutter="10">
			  <uni-col :span="24">
				  <view class="wallet" style="padding: 10px ;">
					  <image class="i" src="/static/images/u4.png" mode="cover"></image>
					  <span class="s">Automation tools/AI assistance</span>
					  <view style="clear: both;"></view>
				  </view>
			  </uni-col>
			  <uni-col :span="24">
			  	  <view class="wallet" style="padding: 10px;">
			  	  	 <image class="i" src="/static/images/u4.png" mode="cover"></image>
			  	  	 <view class="s" style="line-height: 50rpx; width: 90%;">Construction of Quality Monitoring System</view>
			  	  	 <view style="clear: both;"></view>
			  	  </view>
			  </uni-col>
			  <uni-col :span="24">
				  <view class="wallet" style="padding: 10px;">
				  	 <image class="i" src="/static/images/u4.png" mode="cover"></image>
				  	 <span class="s">Operational guidelines for compliance</span>
				  	 <view style="clear: both;"></view>
				  </view>
			  </uni-col>
			  <uni-col :span="24">
				  <view class="wallet" style="padding: 10px;">
				  	 <image class="i" src="/static/images/u4.png" mode="cover"></image>
				  	 <span class="s">Gain more accelerated benefit</span>
				  	 <view style="clear: both;"></view>
				  </view>
			  </uni-col>
			  <uni-col :span="24" v-for="item in list" :key='item.id'>
			  	  <view :class="role_id==item.id?'u u1':'u'" @click="role_id=item.id">
			  		  <uni-row>
						  <uni-col :span="5">
							  <image v-if="item.id==2" style="width: 80rpx; height: 80rpx;" src="/static/images/u3.png" mode="cover"></image>
							  <image v-if="item.id==3" style="width: 80rpx; height: 80rpx;" src="/static/images/u1.png" mode="cover"></image>
						  </uni-col>
						  <uni-col :span="12">
							  <view style="font-weight: 500;font-size: 30rpx;color: #3D3D3D;line-height: 80rpx;">{{item.name}}</view>
						  </uni-col>
						  <uni-col :span="7">
							   <view style="font-weight: 600;font-size: 36rpx;color: #3D3D3D;line-height: 80rpx;">{{item.price}} USDT</view>
						  </uni-col>
					  </uni-row>
			  	  </view>
			  </uni-col>
			</uni-row>
			<view style="font-weight: 400; font-size: 30rpx; color: #3d3d3d; text-align: right; padding: 40rpx;">
				Available balance: <span style="color: #1D61E7;">{{parseFloat(user.money).toFixed(4)}}</span> USDT
			</view>
			<button style="background-color: #333333; color: #fff;" @click="open">Upgrade now</button>
		</view>
		<uni-popup ref="popup" type="dialog" :is-mask-click="true" background-color="#fff" borderRadius="40rpx">
			<view style="width: 80vw; padding: 20rpx 30rpx; border-radius: 40rpx; line-height: 50rpx;">
				<view style="font-size: 36rpx; font-weight: bold; text-align: center; margin-bottom: 30rpx;">PIN code</view>
				<uni-easyinput type="password" :passwordIcon="true" v-model="pingcode" placeholder="Enter the PIN code" />
				<button style="background-color: #1D61E7; color: #fff; margin: 40rpx auto;" @click="submit">Confirm</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				user:{},
				list:[],
				pingcode: '',
				role_id: 3,
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		//第一次加载
		onLoad(e) {
			this.$http.get('/api/user/profile?lang='+this.$i18n.locale).then(res => {
				if(res.code == 0){
					this.user =  res.data;
					this.setUserInfo(res.data);
				}
			});
			this.$http.get('/api/role/list?lang='+this.$i18n.locale).then(res => {
				if(res.code == 0){
					this.list =  res.data.data;
				}
			});
		},
		onShow(){
			
		},
		methods: {
			...mapMutations(['setUserInfo']),
			open(){
				if(parseFloat(this.user.money) < 500){
					uni.showToast({
						title:'Insufficient user balance',
						icon:'error'
					});
					return
				}
				this.$refs.popup.open('dialog');
			},
			submit(){
				let data = {
					role_id: this.role_id,
					trade_password: this.pingcode,
					lang: this.$i18n.locale
				};
				this.$http.post('/api/role/buy', data).then(res => {
					if(res.code == 0){
						uni.showToast({
							title:'Success'
						});
						this.$http.get('/api/user/profile?lang='+this.$i18n.locale).then(res => {
							if(res.code == 0){
								this.setUserInfo(res.data);
							}
						});
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/mine/index'
							});
						}, 2000);
					}
				});
			},
			onTokenJump(url) {
				this.judgeLogin(() => {
					uni.navigateTo({
						url: url
					});
				});
			},
		}
	}
</script>

<style scoped>
	.uni-page-body{background-color: #fff !important;}
	.page{min-height: 93vh;position: relative; background-color: #fff;}
	.minebg{
		width: 100vw;
		min-height: 93vh;
		background: url('/static/images/u2.png') #fff;
		background-size: 100%;
		background-repeat: repeat-x;
		font-family: Poppins, Poppins;
	}
	.minebg .v4{
		width: 94vw;margin: 20upx auto; border-radius: 30upx;
	}
	.minebg .v4 .wallet{
		border-radius: 10px; padding: 10px 15px;
	}
	.minebg .v4 .wallet .title{
		font-weight: 500; font-size: 14px; color: #999999; line-height: 18px;
	}
	.minebg .v4 .wallet .s{
		font-weight: 500;font-size: 16px;color: #666666;line-height: 20px; float: left; margin-left: 10px;
	}
	.minebg .v4 .wallet .i{
		width: 20px; height: 20px; float: left;
	}
	.minebg .v4 .u{
		padding: 40rpx 20rpx; border: 2rpx solid #eee; margin: 40rpx auto 0px auto; width: 94%;
	}
	.minebg .v4 .u1{
		background: url('/static/images/u5.png') #F5F8FC;
		background-repeat: no-repeat;
		background-position-x: right;
		background-position-y: bottom;
	}
</style>