MeetMateApp/pages/my/X_coin.vue

<template>
	<view class="page">
		<view class="topBody">
			<view class="header">
			</view>
			<view style="padding-top: 20rpx;margin-left: 40rpx;" >
				<text style="color:#FFFFFF;font-size: 64rpx;">{{x_score}}</text>
			</view>
			<view style="padding-top: 20rpx;margin-left: 40rpx;display: flex;align-items: center;" >
				<text style="color:#999999;font-size: 28rpx;">{{$t('txt.可用余额')}}</text>
				<image style="margin-left: 10rpx;height: 36rpx;" src="../../static/me/icon_help.png" mode="heightFix" />
			</view>
			<view class="myinfo">
				<view  class="mingxiList">
					<view class="left">
						<image class="icon" src="../../static/me/txt_blackDiamod.png" mode="widthFix" />
					</view>
					<view class="right">
						<image style="height: 234rpx;"class="icon" src="../../static/me/img_blackDiamond.png" mode="heightFix" />

					</view>
				</view>
				<text style="padding-top: 18rpx;padding-left: 50rpx;color: #999999; font-size: 24rpx;">{{$t('txt.升级后享平台最大权益')}}</text>
				<view class="numlist">
					<view class="left">
						<image style="height:40rpx"src="../../static/me/icon_equity.png" mode="heightFix" />
						<text style="margin-left: 5rpx;color:#FFFFFF;font-size: 28rpx;font-weight: bold;">{{$t('txt.我的特权')}}</text>
						<image style="margin-left: 5rpx; margin-top: 3rpx; height:36rpx;"src="../../static/me/arrow_right.png" mode="heightFix" />
					</view>
					<view class="right">
						<view class="buyBtn">
							<text>{{$t('txt.去开通')}}</text>
						</view>
					</view>

				</view>





<!-- 				<view class="numlist2">
					<view class="item" v-for="(item, index) in historyInfo" :key="index">
						<view class="left">
							<view class="num">
								<text>{{ $t(item.reason) }}</text>
								<view class="data">{{item.data}}</view>
							</view>
						</view>
						<view class="right">
							<view v-if="item.value>0" class="num1">
								<text>+{{ item.value }}</text>
							</view>
							<view v-else class="num1 num2">
								<text>{{ item.value }}</text>
							</view>
						</view>
					</view>
				</view> -->


			</view>
			<view class="itemlist">
				<view class="item">
					<view class="left">
						<image style="height:36rpx" class="arrow" src="../../static/me/icon_wallet.png" mode="widthFix" />
						<text style="margin-left: 20rpx; font-size: 28rpx;color: #FFFFFF;">{{$t('txt.钱包')}}</text>
					</view>
					<image class="arrow" src="../../static/me/arrow_right_gray.png" mode="widthFix" />
				</view>
				<view class="item">
					<view class="left">
						<image style="height:36rpx" class="arrow" src="../../static/me/icon_store.png" mode="widthFix" />
						<text style="margin-left: 20rpx; font-size: 28rpx;color: #FFFFFF;">{{$t('txt.兑换商城')}}</text>
						<!-- <image class="icon" src="../../static/me/arrow_down_gray.png" mode="heightFix" /> -->
					</view>
					<image class="arrow" src="../../static/me/arrow_right_gray.png" mode="widthFix" />
				</view>
			</view>
			
			<view class="friendList">
				<view class="title">
					<view class="left">
						<text style="font-size: 28rpx;color: #FFFFFF;">{{$t('txt.免费获取')}}</text>
						<text style="font-size: 28rpx;color: #C7A58A;">{{$t('txt.X币')}}</text>
					</view>
				</view>
			
				<view class="numlist2"
					:style="{ backgroundSize: '100% ' + (task_list_len * 140) + 'rpx', backgroundPosition: 'bottom' }">
					<view v-if="task_list_len<=0" class="empty">
						<view class="bg"></view>
						<text style="margin-top: 40rpx;font-size: 24rpx;color: #999999;">{{$t('txt.暂无数据')}}</text>
					</view>
					<view v-else class="item" v-for="(item, index) in task_list" :key="index">
						<view class="info">
							<view class="left">
								<view class = "icon">
									<image class="img" src="http://c.yujianmate.com/images/v1/w3_1.png" mode="widthFix" />
								</view>
								<view class="nameList">
									<view class="num">
										<view class="name">
											<text>{{$t('txt.'+item.nickname)}}</text>
											<image v-if="item.is_vip===2" class="icon"
												src="http://c.yujianmate.com/images/v1/w3_black_vip.png" mode="heightFix" />
											<image v-else-if="item.is_vip===1" class="icon"
												src="http://c.yujianmate.com/images/v1/w3_vip.png" mode="heightFix" />
										</view>
										<view class="data">{{$t('txt.'+item.login_time)}}</view>
									</view>
								</view>
							</view>
							<view class="right">
								<view class="txt">
									<text>{{$t('txt.'+item.mobile)}}</text>
								</view>
							</view>
						</view>
						<view class="line">
				
						</view>
					</view>
				</view>
			
			</view>

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


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

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

					myMcoin: 0

				},
				historyInfo: {
					"0": {
						reason: "txt.M币充值",
						value: 100,
						data:"2023-1-12 15：00"
					},
					"1": {
						reason: "txt.M币充值",
						value: 200,
						data:"2023-1-12 13：00"
					},
					"2": {
						reason: "txt.M币充值",
						value: -100,
						data:"2023-1-12 11：00"
					}
				},
				task_list_len : 2,
					task_list: [
						{
						nickname: "签到领取",
						is_vip: 0,
						is_idcheck: 0,
						value: 100,
						mobile: "去开通",
						login_time: "奖励100X/次"
					},
					{
						nickname: "签到领取",
						is_vip: 0,
						is_idcheck: 0,
						value: 100,
						mobile: "去开通",
						login_time: "奖励100X/次"
					}
				]
			}
		},
		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 'X_coin.scss';
</style>