zhiyu_uni_duanju/pages/member/index.vue

<template>
	<view class="body">

		<view class="pd24_20 flex alcenter space user-info">
			<view class="flex alcenter">
				<view class="member-face">
					<image class="face" :src="statics.defaultFace"></image>
					<!-- <image class="vip-level" :src="userinfo.group_id>1?statics.vipLevelImg[0]:''"></image> -->
				</view>
				<view class="ml15">
					<view class="ft16 cl-main">{{ userinfo.type }}</view>
					<view class="mt12 ft12 cl-notice">ID:{{ userinfo.uid || '' }}
						<image @click="copyId(userinfo.uid || '')" style="margin-left: 10px; width: 30rpx;height: 15px;"
							src="/static/img/wode/cpoy.png" />
					</view>
				</view>
			</view>
		</view>
		<view class="pd24_20">

			<div class="box pd16_15  creadit-box">
				<div class="mt16 coin-box">
					<div class="flex alcenter coin-item">
						<label class="coin-text">{{ userinfo.charge_coin || 0 }}</label>
						<label class="coin-text">永久看币</label>
					</div>
					<label class="box-line">|</label>
					<div class="flex alcenter coin-item">
						<label class="coin-text">{{ userinfo.reward_coin || 0 }}</label>
						<label class="coin-text">赠送看币</label>
					</div>
				</div>
				<div class="mt16 box-cj" @click="topay"><label class="btn-cz">去充值</label></div>
			</div>
			<!-- <home-vipcard :userinfo="userinfo" @loginAct="showLoginAct" @qrcode="showQrcode = true"></home-vipcard> -->
			<view class="flex wrap space mt16">
				<view v-for="(item, index) in getMenus" :key="index" :class="index > 1 ? 'mt16' : ''">
					<view v-if="item.type == 'link'" :data-index="index" @click="memberLinkTo"
						class="box pd16_15 flex alcenter" style="width: 320rpx;">
						<image :src="item.icon" style="width: 64rpx;height: 64rpx;"></image>
						<text class="ml15 ft14 ftw500 cl-main">{{ item.name }}</text>
					</view>
					<view v-else style="width: 320rpx;" @click="showPopu(item.type)">
						<button class="box pd16_15 flex alcenter" style="padding: 32rpx 30rpx; margin: 0;">
							<image :src="item.icon" style="width: 64rpx;height: 64rpx;"></image>
							<text class="ml15 ft14 ftw500 cl-main">{{ item.name }}</text>
						</button>
					</view>
				</view>
			</view>
			<com-copyright></com-copyright>
			<uni-popup ref="popup" type="center">
				<image :show-menu-by-longpress="true" class="qrcode-img" :src="kefu.url"></image>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import {
		getKefu
	} from "@/common/apis/common.js"
	import {
		getUserInfo
	} from "@/common/apis/my.js"
	export default {
		data() {
			return {
				isLogin: false,
				showLogin: false,
				isBirthday: true,
				showBirthday: false,
				showQrcode: true,
				avatar: '',
				userinfo: {
					type: "微信用户",
				},
				kefu: {
					url: "",
				},
				vipLevel: 0,
				iskq: 0,
				uid: 0,
				staticUrl: this.$config.staticUrl,
				memberMenus: [{
						name: '我的追剧',
						type: 'link',
						model: 'tab',
						link: '/pages/zhuiju/index',
						icon: this.$config.zystaticUrl + '/static/img/wode/zhuij.png',
						show: 1
					},
					{
						name: '充值记录',
						type: 'link',
						model: '',
						link: '/pages/member/orders',
						icon: this.$config.zystaticUrl + '/static/img/wode/wd-cz.png',
						show: 1
					},
					{
						name: '消费记录',
						type: 'link',
						model: '',
						link: '/pages/member/consume',
						icon: this.$config.zystaticUrl + '/static/img/wode/xiaofei.png',
						show: 1
					},
					{
						name: '联系客服',
						type: 'kefu',
						model: '',
						link: '/pages/client/tuan/wdxh',
						icon: this.$config.zystaticUrl + '/static/img/wode/kefu.png',
						show: 1
					},
				],
			}
		},
		computed: {
			getMenus() {
				let arr = new Array;
				for (var a in this.memberMenus) {
					if (this.memberMenus[a].show == 1 || (this.iskq == 1 && this.memberMenus[a].show == 3)) {
						arr.push(this.memberMenus[a]);
					}
				}
				return arr;
			}
		},
		async onLoad() {
			try {
				let res = await getKefu();
				this.kefu = res.data;
			} catch (e) {
				//TODO handle the exception
			}
		},
		async onShow() {
			try {
				let res = await getUserInfo();
				this.userinfo = res.data;
			} catch (e) {
				//TODO handle the exception
			}
		},
		methods: {
			topay() {
				uni.navigateTo({
					url: '/pages/pay/pay'
				})
			},
			showPopu(type = "kefu") {
				if (type == "kefu") {
					this.$refs.popup.open('center')
				}
			},
			memberLinkTo(e) {
				let index = parseInt(e.currentTarget.dataset.index);

				if (this.getMenus[index].link != '') {
					if (this.getMenus[index].model == 'integral') {
						uni.redirectTo({
							url: this.getMenus[index].link
						})
					} else if (this.getMenus[index].model == 'tab') {
						uni.switchTab({
							url: this.getMenus[index].link
						})
					} else {
						uni.navigateTo({
							url: this.getMenus[index].link
						})
					}
				}
			},
			copyId(uid) {
				console.log('uid', uid);
				uni.setClipboardData({
					data: uid + "",
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: "none"
						})
					},
					fail: function(err) {
						uni.showToast({
							title: '复制失败',
							duration: 2000,
							icon: 'none'
						});
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	@import url("style/index.css");
</style>