MeetMateApp/pages/my/M_purchase.vue

<template>
	<view class="page">
		<view class="topBody">
			<view class="header">
			</view>
			<view class="myinfo">
				<view class="line"></view>
				
				<view class="purchaseList" style="margin-top: 60rpx;">
					<view class="item" :class ="index==sel?'itemSel':''" v-for="(item,index) in purchList">
						<view class="num1">
							<view class="name">{{ item.value }}M{{$t('txt.币')}}</view>
						</view>
						<view class="num2">
							<view class="name">{{ item.cost }}{{$t('txt.￥')}}</view>
						</view>
					</view>
				</view>
				
				<view style="padding-top: 20rpx;margin-left: 10rpx;" class="jinchu">
					<text style="color:#FFFFFF;font-size: 32rpx;font-weight: bold;">{{$t('txt.支付方式')}}</text>
				</view>

				<view class="mingxiList">
					<view class="left">
						<image class="icon" src="../../static/me/icon_wechat.png" mode="widthFix" />
						<text style="font-size: 28rpx;margin-left: 20rpx;color: #ffffff;">{{$t('txt.微信支付')}}</text>
					</view>
					<view class="right">
						<image class="icon" src="../../static/me/icon_select.png" mode="heightFix" />
					</view>
				</view>
				<view class="line"></view>
				<view class="mingxiList">
					<view class="left">
						<image class="icon" src="../../static/me/icon_alipay.png" mode="widthFix" />
						<text style="font-size: 28rpx;margin-left: 20rpx;color: #ffffff;">{{$t('txt.支付宝支付')}}</text>
					</view>
					<view class="right">
						<image class="icon" src="../../static/me/icon_unsel.png" mode="heightFix" />
					</view>
				</view>
				<view class="line"></view>
				<view class="btn_submit">{{$t('txt.立即支付')}}{{$t('txt.￥')}}{{ purchList[sel].cost }}</view>
				<view class="bottom">
					<text style="font-size: 28rpx;color: #FFFFFF;">{{$t('txt.点击支付即代表同意')}}</text>
					<text style="font-size: 28rpx;color: #FF2A95;">{{$t('txt.M币充值协议')}}</text>
				</view>
			</view>

			

			<view class="blankHeight"></view>
		</view>


		<!-- 提示框 -->
		<DialogBox ref="DialogBox"></DialogBox>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				title: '',
				sel: 1,
				M_coinInfo: {

					myMcoin: 0

				},
				purchList: {
					"0": {
						value: 50,
						cost: 5
					},
					"1": {
						value: 100,
						cost: 10
					},
					"2": {
						value: 250,
						cost: 25
					},
					"3": {
						value: 500,
						cost: 50
					},
					"4": {
						value: 1000,
						cost: 100
					},
					"5": {
						value: 5000,
						cost: 500
					},
					"6": {
						value: 10000,
						cost: 1000
					},
					"7": {
						value: 20000,
						cost: 2000
					},
					"8": {
						value: 50000,
						cost: 5000
					},					
				},

			}
		},
		onLoad() {
			// setTimeout(function() {
			// 	uni.setNavigationBarColor({
			// 		frontColor: '#ffffff',
			// 		backgroundColor: '#00000000',
			// 		animation: {
			// 			duration: 400,
			// 			timingFunc: 'easeIn'
			// 		}
			// 	})
			// }, 200);
		},
		onShow() {
			this.loadData();
		},
		methods: {
			onBack() {},
			chkSel() {
				if (this.sel == 1) {
					this.sel = 0;
				} else {
					this.sel = 1;
				}
			},
			loadData() {
				console.log("this.globalData", getApp().globalData);
				let obj2 = {
					is_first: 0
				}
				const postData = Object.assign({}, getApp().globalData.postHeader, obj2);

				console.log(postData);

				uni.request({
					url: this.$apiHost + '/Gushi/getmyinfo', //仅为示例，并非真实接口地址。
					data: postData,
					method: 'POST',
					header: {
						'content-type': 'application/json', //自定义请求头信息
						'Access-Control-Allow-Origin': '*'
					},
					success: (res) => {
						console.log('data:', res.data);
						this.myinfo = res.data;
					}
				});



			},
		
		}
	}
</script>

<style scoped lang="scss">
	@import 'M_purchase.scss';
</style>