sctang/pages/user/sj.vue

<template>
	<view class="content">
		<template v-if="list.length > 0">
			<view class="u-wrap flex" v-for="item in list" @click="changeLevel(item)">
				<view class="">
					<view class="name flex" v-if="is_buy == 0">
						{{item.name}} 
						<image :src="item.icon" mode="heightFix"></image>
					</view>
					<view class="name flex" v-else>
						开店次数：{{item.open_store}} 
					</view>
					<view class=""  v-if="is_buy == 0">
						价格：{{(item.money*1 - (userInfo.pay_store*1 || 0)).toFixed(2) }}
					</view>
					<view class=""  v-else>
						价格：{{item.money*1 }}
					</view>
					<!-- <view class="">
						下一等级：XXX
					</view> -->
					<view class="choose choosed" v-if="chooseLevel.id == item.id">
						
					</view>
					<view class="choose" v-else >
						
					</view>
				</view>
			</view>
			<view class="btn flex" @click="upLevel">
				{{is_buy == 0? '立即升级':'立即购买'}}
			</view>
		</template>
		<empty v-if="list.length == 0"></empty>
		
	</view>
</template>

<script>
	import empty from '@/components/empty';
	import {
		getUserInfo,
	} from '@/api/user.js';
	import { getPayGrade,upLevel,upStore} from '@/api/work.js'
	export default {
		components: {
			empty
		},
		data() {
			return {
				is_buy: 0,
				loading: true,
				list: [],
				chooseLevel: {id: 0},
				userInfo: {level: 0},
			}
		},
		onLoad(opt) {
			if(opt.is_buy) {
				this.is_buy = opt.is_buy
			}
			this.getUserInfo()
		},
		onShow() {
			
		},
		onReachBottom() {
			
		},
		onReady() {
			
		},
		methods: {
			changeLevel(item) {
				this.chooseLevel = item
			},
			getPayGrade() {
				let that = this
				getPayGrade().then(res => {
					if(that.is_buy == 1) {
						this.list = res.data.filter(item => {
							return item.id <= that.userInfo.level
						})
					}else {
						this.list = res.data.filter(item => {
							return item.id > that.userInfo.level
						})
					}
					this.loading = false
				})
			},
			getUserInfo() {
				getUserInfo().then(res => {
					this.userInfo = res.data
					this.getPayGrade()
				})
			},
			upLevel() {
				let that = this
				if(that.loading) return;
				if(!that.chooseLevel.id) {
					if(that.is_buy == 1) {
						return that.$api.msg('请选择需要购买的开店次数')
					}else {
						return that.$api.msg('请选择需要升级的等级')
					}
				}
				that.loading = true
				uni.showModal({
					content:that.is_buy == 1? ('您确定要购买' + that.chooseLevel.open_store+ '次开店次数'): ('您确定要升级为' + that.chooseLevel.name + '？'),
					complete(res) {
						if(res.confirm) {
							uni.showLoading({
								title:'支付中...'
							})
							let buyLevel;
							if(that.is_buy == 1) {
								buyLevel = upStore
							}else {
								buyLevel = upLevel
							}
							buyLevel({
								from: 'H5',
								pay_type: 'yue',
								level_id: that.chooseLevel.id
							}).then(res => {
								that.$set(that,'chooseLevel',{id: 0})
								console.log(res)
								uni.hideLoading()
								that.$success(that.is_buy == 0? '升级成功':'购买成功')
								that.getUserInfo()
								// that.getPayGrade()
							}).catch(err => {
								that.loading = false
								uni.hideLoading()
								
							})
						}
					}
				})
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		// background-image: url('../../static/work/sj-bg.png');
		background-color: #fff;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		height:  calc(100vh - 44px);
		padding-top: 20rpx;
	}
	.btn {
		width: 603rpx;
		height: 92rpx;
		background: linear-gradient(0deg, rgba(255,109,11,0.96), rgba(255,179,53,0.96));
		border-radius: 46rpx;
		border: 1px solid #FFFFFF;
		margin: 50rpx auto;
		justify-content: center;
		font-weight: bold;
		font-size: 35rpx;
		color: #FFFFFF;
	}
	.u-wrap {
		width: 672rpx;
		height: 181rpx;
		background: #FFF7E5;
		box-shadow: 5rpx 7rpx 6rpx 0rpx rgba(253,170,113,0.29);
		border-radius: 36rpx;
		border: 2px solid #FFFFFF;
		margin:20rpx auto;
		justify-content: flex-start;
		padding-left: 50rpx;
		position: relative;
		.logo {
			width: 130rpx;
			height: 130rpx;
			margin-right: 23rpx;
			background-color: #eee;
			border-radius: 50%;
		}
		font-weight: bold;
		font-size: 24rpx;
		color: #30333B;
		.name {
			font-size: 30rpx;
			padding-bottom: 20rpx;
			image {
				height: 38rpx;
				margin-left: 10rpx;
			}
		}
	}
	.choose {
		width: 41rpx;
		height: 41rpx;
		background: #F6F6F6;
		border: 1px solid #CCCCCC;
		border-radius: 50%;
		position: absolute;
		bottom: 50rpx;
		right: 24rpx;
	}
	.choosed {
		background-image: url('../../static/work/choose.png');
		background-size: 100% 100%;
		border: none;
	}
</style>