yixiang/components/yx-vip/index.vue

<template>
	<view class="vip-box">
		<view class="vip_top hflex acenter jbetween">
			<view class="vip_uesr hflex acenter">
				<image :src="user.avatar" mode="aspectFill"></image>
				<view class="name vflex">
					<text>{{user.username}}</text>
					<text>{{user.introduction}}</text>
				</view>
			</view>
			<view class="btn hflex acenter" v-if="showsign" @click="tosign">
				<image src="/static/images/rili.png" mode="aspectFill"></image>
				<text>{{user.is_qiandao ? '签到' : '已签到'}}</text>
			</view>
		</view>
		<view class="level hflex acenter jbetween" v-if="showlevel">
			<text>LV{{user.level}}</text>
			<u-line-progress :percentage="user.already_upgrade_rate * 100" inactiveColor="#CCCCCC" height="2" activeColor="#FFFFFF"></u-line-progress>
			<text>LV{{Number(user.level) + 1}}</text>
		</view>
		<view class="bottom hflex acenter jbetween">
			<text>{{user.is_vip ? user.vip_expired_at : '开通会员享福利'}}</text>
			<text @click="show_buy = true">{{user.is_vip ? '立即续费' : '立即开通'}}</text>
		</view>
		<u-popup :show="show" mode="center" @close="toclose">
			<view class="qiandao vflex acenter jcenter">
				<image src="/static/images/qiandao.png" mode="aspectFill"></image>
				<text>签到成功</text>
				<text>获得积分+ {{jifen}}</text>
				<view class="btn">确定</view>
			</view>
		</u-popup>
		<u-popup :show="show_buy" mode="bottom" @close="toclose" :round="16">
			<view class="vip-buy">
				<view class="buy-title">会员充值</view>
				<view class="buy-list hflex acenter jbetween">
					<view class="buy-item vflex acenter jcenter" :class="buy_active == index ? 'buy-active' : ''" v-for="(item,index) in buylist" :key="index">
						<text>{{item.name}}</text>
						<text><span>￥</span>{{item.price}}</text>
						<view class="text">额外获得{{item.integral}}积分</view>
						<view class="text">额外免费拍摄{{item.sell_count}}次</view>
						<view class="text">升级领福利</view>
						<view class="text">积分商城折扣</view>
					</view>
				</view>
				<view class="buy-title">支付方式</view>
				<view class="hflex acenter jbetween pay-item">
					<view class="hflex acenter">
						<image src="../../static/images/ali-pay.png" mode="aspectFill" class="pay-icon"></image>
						<text>支付宝支付</text>
					</view>
					<view class="">
						<image src="../../static/images/check-active.png" mode="aspectFill" class="pay-select" v-if="pay_active == 1"></image>
						<image src="../../static/images/check.png" mode="aspectFill" class="pay-select" v-else></image>
					</view>
				</view>
				<view class="hflex acenter jbetween pay-item">
					<view class="hflex acenter">
						<image src="../../static/images/wx-pay.png" mode="aspectFill" class="pay-icon"></image>
						<text>微信支付</text>
					</view>
					<view class="">
						<image src="../../static/images/check-active.png" mode="aspectFill" class="pay-select" v-if="pay_active == 2"></image>
						<image src="../../static/images/check.png" mode="aspectFill" class="pay-select" v-else></image>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	export default {
		props: {
			user: {
				typeof: Object,
				default: {}
			},
			showsign: {
				typeof: Boolean,
				default: true
			},
			showlevel: {
				typeof: Boolean,
				default: true
			},
		},
		data() {
			return {
				show: false,
				show_buy: false,
				jifen: 2,
				buylist: [],
				pay_active: 0
			}
		},
		mounted() {
			
		},
		methods: {
			toclose() {
				this.show = false
				this.show_buy = false
			},
			tosign() {
				$api.req({
					url: 'sign',
					method: 'POST'
				}, function(res) {
					if(res.code == 10000) {
						_this.show = true
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.vip-box {
		background: linear-gradient(225deg, #4C4B4E 0%, #121212 100%);
		border-radius: 16rpx;
		box-sizing: border-box;
		padding: 28rpx 20rpx;
		.qiandao {
			width: 550rpx;
			image {
				width: 270rpx;
				height: 260rpx;
				padding: 40rpx;
			}
			text {
				font-size: 28rpx;
				font-family: SFPro, SFPro;
				font-weight: 400;
				color: #222222;
				padding: 14rpx 0 0;
			}
			.btn {
				margin: 48rpx 0 60rpx;
				width: 250rpx;
				height: 80rpx;
				background: #00B0B0;
				border-radius: 8rpx;
				font-size: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 80rpx;
				letter-spacing: 1px;
				text-align: center;
			}
		}
		.bottom {
			text {
				font-size: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
			text:last-child {
				color: #FF7B15;
			}
		}
		.level {
			padding: 44rpx 0;
			text {
				font-size: 32rpx;
				font-family: Silom;
				color: #FFFFFF;
			}
			text:first-child {
				padding-right: 16rpx;
			}
			text:last-child {
				padding-left: 16rpx;
			}
		}
		.vip_top {
			.btn {
				background: #00B0B0;
				border-radius: 40rpx;
				padding: 8rpx 18rpx;
				image {
					width: 36rpx;
					height: 36rpx;
					margin: 8rpx;
				}
				text {
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}
			}
			.vip_uesr {
				image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin: 0 12rpx 0 0;
				}
				.name {
					text:first-child {
						font-size: 28rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
					}
					text:last-child {
						font-size: 24rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #999999;
						padding: 6rpx 0 0;
					}
				}
			}
		}
	}
</style>