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>{{is_qiandao == 1 ? '已签到' : '签到'}}</text>
			</view>
		</view>
		<view class="level hflex acenter jbetween" v-if="showlevel">
			<text>LV{{user.level || 1}}</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 || 2}}</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" @click="show = false">确定</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 class="name">{{item.name}}</text>
						<text class="price"><span>￥</span>{{item.price}}</text>
						<view class="text">额外获得{{item.integral}}积分</view>
						<view class="text">额外免费拍摄{{item.coupon_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="" @click="pay_active = 1">
						<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="" @click="pay_active = 2">
						<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 class="bottom-buy" @click="topay">
					确认支付
				</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: 0,
				buylist: [],
				pay_active: 0,
				buy_active: 0,
				is_qiandao: 0
			}
		},
		mounted() {
			this.getlist()
			this.getdata()
			this.getsign()
		},
		methods: {
			getsign() {
				var that = this
				$api.req({
					url: 'sign/is-sign'
				}, function(res) {
					that.is_qiandao = res.data
				})
			},
			getdata() {
				var that = this
				$api.req({
					url: 'config?module=sign'
				}, function(res) {
					that.jifen = res.data.integral_num
				})
			},
			topay() {
				var that = this
				let pay_type = ''
				if (that.pay_active == '1') {
					pay_type = 'alipay'
				} else if (that.pay_active == '2') {
					pay_type = 'wechat'
				} else {
					pay_type = 'integral'
				}
				$api.req({
					url: 'vip/order',
					method: 'post',
					data: {
						vip_id: that.buylist[that.buy_active].id,
						pay_type: pay_type,
						platform: 'app'
					}
				}, function(res) {
					if (res.code == 10000) {
						$api.info('支付成功')
						that.show_buy = false
					}
				})
			},
			getlist() {
				var that = this
				$api.req({
					url: 'vip/product',
				}, function(res) {
					that.buylist = res.data
				})
			},
			toclose() {
				this.show = false
				this.show_buy = false
			},
			tosign() {
				var _this = this
				$api.req({
					url: 'sign',
					method: 'POST'
				}, function(res) {
					if (res.code == 10000) {
						_this.show = true
						_this.is_qiandao = 1
					} else if (res.code == 20001) {
						uni.$u.toast('请先登录')
					}
				})
			},
		}
	}
</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;
					}
				}
			}
		}

		.vip-buy {
			padding: 34rpx 24rpx;

			.buy-title {
				font-size: 32rpx;
				color: #222222;
				line-height: 44rpx;

			}

			.pay-item {
				padding: 42rpx 0 0;

				image {
					width: 44rpx;
					height: 44rpx;
				}

				text {
					font-size: 30rpx;
					color: #333333;
					line-height: 42rpx;
					padding-left: 28rpx;
				}
			}

			.bottom-buy {
				margin: 180rpx 0 88rpx;
				width: 694rpx;
				height: 88rpx;
				background: #00B0B0;
				border-radius: 48rpx;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 88rpx;
				text-align: center;

			}

			.buy-list {
				padding: 34rpx 12rpx;

				.buy-item {
					width: 320rpx;
					height: 392rpx;
					background: #F8F8F8;
					border-radius: 16rpx;
					border: 2rpx solid #D3D3D3;

					.name {
						font-size: 28rpx;
						color: #222222;
						line-height: 40rpx;
						text-align: center;
					}

					.price {
						padding: 30rpx 0 24rpx;
						font-size: 60rpx;
						color: #222222;
						line-height: 30rpx;
						text-align: center;
					}

					span {
						font-size: 24rpx;
					}

					.text {
						font-size: 20rpx;
						color: #222222;
						line-height: 24rpx;
						padding: 0 0 20rpx;
					}
				}

				.buy-active {
					border: 2rpx solid #DD6838;
					background: #FFF9F4;
				}
			}
		}
	}
</style>