yixiang/pageC/vip.vue

<template>
	<view class="content">
		<u-navbar title="会员福利" bgColor="rgba(0,0,0,0)" safeAreaInsetTop placeholder autoBack height="44px"></u-navbar>
		<image src="static/jifen-bg.png" mode="aspectFill" class="top_bg"></image>
		<view class="top">
			<yxVip :user="user" :showsign="false" :showlevel="true"></yxVip>
		</view>
		<view class="content-bg">

			<view class="box">
				<view class="title">升级领福利</view>
				<view class="list-item hflex acenter jbetween" v-for="(item,index) in list" :key="index">
					<view class="item-left hflex acenter">
						<image :src="item.prize_image" mode="aspectFill" v-if="item.prize_type != 'integral'"></image>
						<image src="@/static/images/jifen.png" mode="aspectFill" v-else></image>
						<view class="img-right vflex">
							<text>当前等级达到{{item.level}}级</text>
							<text>奖励:{{item.prize_name}}</text>
						</view>
						<!-- <view class="img-right vflex" v-if="item.prize_type == 'coupon'">
							<text>当前等级达到{{item.level}}级</text>
							<text>奖励:{{item.prize_name}}</text>
						</view> -->
					</view>
					<view class="item-right">
						<view class="button1" v-if="item.is_qualified == 0">
							未达成
						</view>

						<view class="button2" v-if="item.is_qualified != 0 && item.is_received != 0"
							@click="toadd(item)" :style="'color: ' + item.prize_type == 'goods' ? '#00B0B0;' : ''">
							{{item.prize_type == 'goods' ? '添加客服' : '已领取'}}
						</view>
						<view class="button3" v-if="item.is_qualified != 0 && item.is_received == 0"
							@click="toprize(item)">
							领取奖励
						</view>

					</view>
				</view>
			</view>
		</view>
		<u-popup :show="show_address" @close="toclose" mode="bottom" :round="13">
			<addressBox @close="toclose" @select="selectAddress"></addressBox>
		</u-popup>
		<u-popup :show="show_submit" @close="toclose" mode="center" :round="10">
			<view class="popu1 vflex acenter">
				<image src="static/success.png" mode="aspectFill"></image>
				<view class="success">领取成功</view>
				<view class="success-text">请前往添加客服微信</view>
				<view class="hflex acenter btns">
					<view class="btn1" @click="toclose">稍后添加</view>
					<view class="btn2" @click="show_wx = true">添加客服</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="show_wx" @close="toclose" mode="center" :round="10">
			<kefu-wx :wxcode="wxcode" @submit="toclose"></kefu-wx>
		</u-popup>
	</view>
</template>

<script>
	import yxVip from '@/components/yx-vip/index.vue'
	import addressBox from './components/addressbox.vue'
	import kefuWx from './components/kefu-wx.vue'
	import $api from '@/static/js/api.js'
	export default {
		components: {
			yxVip,
			addressBox,
			kefuWx
		},
		data() {
			return {
				user: {},
				list: [],
				address_id: '',
				show_address: false,
				prize: {},
				show_submit: false,
				show_wx: false,
				wxcode: '',
				page: 1,
				last_page: 1,
			}
		},
		onLoad() {

		},
		onShow() {
			this.getuser()
			this.list = []
			this.getlist()
		},
		onReachBottom() {
			if (this.page < this.last_page) {
				this.page++
				this.getlist()
			} else {
				uni.$u.toast('已经到底了')
				return
			}
		},
		methods: {
			getcode() {
				var that = this
				$api.req({
					url: 'config',
					data: {
						module: 'basic'
					}
				}, function(res) {
					that.wxcode = res.data.customer_service_qrcode
				})
			},
			toadd(item) {
				if (item.prize_type == 'goods') {
					this.show_submit = true
					this.getcode()
				} else {
					return
				}
			},
			selectAddress(e) {
				console.log(e, '---------');
				this.address_id = e
				this.toreceive(this.prize.id)
				this.toclose()
			},
			toclose() {
				this.show_address = false
				this.show_submit = false
				this.show_wx = false
			},
			toprize(item) {
				var _this = this
				if (item.prize_type == 'goods') {
					this.prize = item
					this.show_address = true
				} else {
					this.toreceive((item.id))
				}

			},
			toreceive(id) {
				var _this = this
				$api.req({
					url: 'level/prize/' + id + '/receive',
					method: 'POST',
					data: {
						address_id: _this.address_id ? _this.address_id : '0'
					}
				}, function(res) {
					if (res.code == 10000) {
						$api.info('领取成功')
						_this.getlist()
					}
				})
			},
			getlist() {
				var _this = this
				$api.req({
					url: 'level/prize',
					method: 'GET',
					data: {
						page: _this.page,
						limit: 10,
						is_page: 1
					}
				}, function(res) {
					if (res.code == 10000) {
						_this.list = _this.list.concat(res.data.list)
						_this.last_page = res.data.last_page
					}
				})
			},
			getuser() {
				var _this = this
				$api.req({
					url: 'user/info',
					methos: 'GET'
				}, function(res) {
					if (res.code == 10000) {
						_this.user = res.data
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.content {
		background: unset;

		.popu1 {
			width: 510rpx;
			padding: 46rpx 0;

			.top {
				width: 100%;

				.top-title {
					font-size: 32rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					color: #000000;
					text-align: center;
					padding-left: 100rpx;
				}

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

			.center {
				image {
					width: 310rpx;
					height: 310rpx;
				}

				text {
					font-size: 22rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: rgba(0, 0, 0, .42);
				}
			}

			image {
				width: 78rpx;
				height: 78rpx;
				margin: 12rpx 36rpx;
			}

			.success {
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #000000;
			}

			.success-text {
				font-size: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: rgba(0, 0, 0, .6);
				padding: 8rpx 0 42rpx;
			}

			.btns {
				.btn1 {
					width: 204rpx;
					height: 72rpx;
					background: #E7E7E7;
					border-radius: 40rpx;
					font-size: 28rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #666666;
					line-height: 72rpx;
					text-align: center;
				}

				.btn2 {
					width: 204rpx;
					height: 72rpx;
					background: #00B0B0;
					border-radius: 40rpx;
					font-size: 28rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 72rpx;
					text-align: center;
					margin: 0 0 0 26rpx;
				}
			}
		}

		.content-bg {
			background: #f5f5f5;
			min-height: 80vh;
		}

		.box {
			margin: 20rpx auto;
			width: 694rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			box-sizing: border-box;
			padding: 28rpx;

			.title {
				font-size: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				color: #333333;
			}

			.list-item {
				margin-top: 40rpx;

				.item-left {
					image {
						width: 100rpx;
						height: 100rpx;
					}

					.img-right {
						padding-left: 20rpx;

						text:first-child {
							font-size: 28rpx;
							font-family: SFPro, SFPro;
							font-weight: 500;
							color: #333333;
						}

						text:last-child {
							font-size: 24rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #666666;
							padding-top: 12rpx;
						}
					}
				}

				.item-right {
					.button1 {
						width: 128rpx;
						height: 56rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #999999;
						line-height: 56rpx;
						text-align: center;
					}

					.button2 {
						width: 128rpx;
						height: 56rpx;
						background: #D8D8D8;
						border-radius: 28rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #FFFFFF;
						line-height: 56rpx;
						text-align: center;
					}

					.button3 {
						width: 128rpx;
						height: 56rpx;
						background: rgba(0, 176, 176, .1);
						border-radius: 28rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #00B0B0;
						line-height: 56rpx;
						text-align: center;
					}
				}
			}
		}

		.top_bg {
			position: absolute;
			width: 100%;
			top: 0;
			left: 0;
			z-index: -1;
		}

		.top {
			width: 694rpx;
			margin: 108rpx auto 0;
		}
	}
</style>