oil-station/gasStation-uni/pagesMy/VIP/vip.vue

<template>
	<view class="content">
		<view class="container" v-if="isExist">
			<view class="my-header">
				<view class="my-icons" @click="goBack"> <uni-icons type="left" size="16"></uni-icons> </view>
				<view class="my-text">会员</view>
				<view class="my-icons"></view>
			</view>
			<!-- 顶部区域 -->
			<uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="current" :mode="mode"
				:dots-styles="dotsStyles" field="content">
				<swiper class="swiper-box" @change="change" :current="swiperDotIndex">
					<swiper-item v-for="(item, index) in userGradeList" :key="index">
						<view>
							<view class="top-box">

								<view class="b-top">
									<view style="width: 70%;">
										<view class="title-size">
											{{item.name}}
											<span v-if="member.gradeId==item.id">(当前等级)</span>
										</view>
										<view class="min-size" style="margin-bottom: 20px;">升级会员享更多特权</view>
										<!-- <view class="min-size" style="margin-bottom: 10px;" v-if="userBalance.gradeId == item.id && index < (userGradeList.length-1)">
											在获得{{item.growthValue - userBalance.growthValue}}可升级至{{userGradeList[index+1].name}}
										</view>
										<view class="min-size" style="margin-bottom: 10px;" v-else-if="userBalance.gradeId == item.id && index == (userGradeList.length-1)">
											已达到最高等级
										</view> -->
										<view class="min-size" style="margin-bottom: 10px;" >
											达到当前等级所需成长值为{{item.growthValue}}
										</view>
										<u-line-progress :percentage="percentage" activeColor="#2F72F7"></u-line-progress>
									</view>
									<view class="right-img">
										<image src="../../static/imgs/vipxz.png"  mode="aspectFit"></image>
									</view>
								</view>
							</view>
							<!-- qy -->
							<view class="c-box">
								<!-- <view class="title-bai">会员权益</view> -->
								<view class="wrap-box">


									<view class="box-ba" v-for="(item,index) in oilNameList" :key="index">
										<view class="min-box">
											<image :src="item.imgurl"  mode="aspectFit"></image>
										</view>
										<view class="mu_">{{item.name}}</view>
									</view>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>



			<!-- <view style="height: 300px; width: 100%;"></view> -->
			<view class="bottom-box">
				<!-- <scroll-view scroll-y="true" class="scroll-Y"> -->
					<view class="bottom-bai-box">
						<view class="b-top-bt">
							<view class="title">汽油优惠信息</view>
							<!-- <view class="times">每天04:00更新</view> -->
						</view>
						<view class="b-center" v-if="userGrade.preferential!='自定义优惠'">无优惠</view>
						<view v-else>
							<view class="b-center" v-if="userGrade.gasolineDiscount=='满减优惠'">
								满减优惠:
								<view class="b-center-spn" v-for="(item,index) in gasolineRule" :key="index">
									消费满{{item.gasolineRule1}}元,立减{{item.gasolineRule2}}元
								</view>
							</view>
							<view class="b-center" v-else-if="userGrade.gasolineDiscount=='每升优惠'">
								每升优惠:
								<view class="b-center-spn" v-for="(item,index) in gasolineRule" :key="index">
									消费满{{item.gasolineRule1}}元,每升优惠{{item.gasolineRule3}}元
								</view>
							</view>
							<view class="b-center" v-else>{{userGrade.gasolineDiscount}}</view>
						</view>
						<view class="title">成长规则：每消费<text style=" margin: 0px 5px; color:#ff5c28 ;">1</text> 元加<text
								style="margin: 0px 5px;color:#2c62cd ;">{{chainStoreConfig.gasGrowthValue}}</text>成长值</view>
					</view>
					<view class="bottom-bai-box">
						<view class="b-top-bt">
							<view class="title">柴油优惠信息</view>
							<!-- <view class="times">每天04:00更新</view> -->
						</view>
						<view class="b-center" v-if="userGrade.preferential!='自定义优惠'">无优惠</view>
						<view v-else>
							<view class="b-center" v-if="userGrade.dieselDiscount=='满减优惠'">
								满减优惠:
								<view class="b-center-spn" v-for="(item,index) in dieselRule" :key="index">
									消费满{{item.dieselRule1}}元,立减{{item.dieselRule2}}元
								</view>
							</view>
							<view class="b-center" v-else-if="userGrade.dieselDiscount=='每升优惠'">
								每升优惠:
								<view class="b-center-spn" v-for="(item,index) in dieselRule" :key="index">
									消费满{{item.dieselRule1}}元,每升优惠{{item.dieselRule3}}元
								</view>
							</view>
							<view class="b-center" v-else>{{userGrade.dieselDiscount}}</view>
						</view>
						<view class="title">成长规则：每消费<text style=" margin: 0px 5px; color:#ff5c28 ;">1</text> 元加<text
								style="margin: 0px 5px;color:#2c62cd ;">{{chainStoreConfig.dieselGrowthValue}}</text>成长值</view>
					</view>
					<view class="bottom-bai-box">
						<view class="b-top-bt">
							<view class="title">天然气优惠信息</view>
							<!-- <view class="times">每天04:00更新</view> -->
						</view>
						<view class="b-center" v-if="userGrade.preferential!='自定义优惠'">无优惠</view>
						<view v-else>
							<view class="b-center" v-if="userGrade.naturalGasDiscount=='满减优惠'">
								满减优惠:
								<view class="b-center-spn" v-for="(item,index) in naturalGasRule" :key="index">
									消费满{{item.naturalGas1}}元,立减{{item.naturalGas2}}元
								</view>
							</view>
							<view class="b-center" v-else-if="userGrade.naturalGasDiscount=='每升优惠'">
								每升优惠:
								<view class="b-center-spn" v-for="(item,index) in naturalGasRule" :key="index">
									消费满{{item.naturalGas1}}元,每升优惠{{item.naturalGas3}}元
								</view>
							</view>
							<view class="b-center" v-else>{{userGrade.naturalGasDiscount}}</view>
						</view>
						<view class="title">成长规则：每消费<text style=" margin: 0px 5px; color:#ff5c28 ;">1</text> 元加<text
								style="margin: 0px 5px;color:#2c62cd ;">{{chainStoreConfig.naturalGrowthValue}}</text>成长值</view>
					</view>
					<!-- <view class="bottom-bai-box">
						<view class="title">每消费<text style=" margin: 0px 5px; color:#ff5c28 ;">200万</text> 元加<text
								style="margin: 0px 5px;color:#2c62cd ;">1%</text>成长值</view>

					</view> -->
				<!-- </scroll-view> -->
			</view>
		</view>
		<view class="container" v-else>
			<view class="my-header">
				<view class="my-icons" @click="goBack"> <uni-icons type="left" size="16"></uni-icons> </view>
				<view class="my-text">会员</view>
				<view class="my-icons"></view>
			</view>
			<view style="width:100%;height: 90vh;background-color: white;text-align: center;">当前店铺不存在会员等级信息</view>
		</view>
	</view>
</template>

<script>
	import request from '../../utils/request'
	export default {
		data() {
			return {
				percentage:0,
				title: '',
				info: [{
						colorClass: 'uni-bg-red',
						url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
						content: '内容 A'
					},
					{
						colorClass: 'uni-bg-green',
						url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
						content: '内容 B'
					},
					{
						colorClass: 'uni-bg-blue',
						url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
						content: '内容 C'
					}
				],
				oilNameList: [
					{name:"汽油",imgurl:"../../static/imgs/gasoline.png"},
					{name:"柴油",imgurl:"../../static/imgs/diesel_oil.png"},
					{name:"天然气",imgurl:"../../static/imgs/natural_gas.png"},
				],
				modeIndex: -1,
				styleIndex: -1,
				current: 0,
				mode: 'default',
				dotsStyles: {},
				swiperDotIndex: 0,
				// 会员等级列表信息
				userGradeList:[],
				storeId:uni.getStorageSync("storeId"),
				userId:"",
				userBalance:{},
				userGrade:{},
				// 汽油优惠
				gasolineRule:[],
				// 柴油优惠
				dieselRule:[],
				// 天然气优惠
				naturalGasRule:[],
				// 连锁店配置信息
				chainStoreConfig: {},
				// 当前店铺是否存在会员等级信息
				isExist:false,
				// 当前用户的会员信息
				member:{},
			}
		},
		onLoad() {
			this.storeId = uni.getStorageSync("storeId")
			this.getList(this.storeId)
			this.getChainConfig(this.storeId)
			this.getUserBalance()
			this.getMember()
		},
		methods: {
			getPercentage(id){
				let grade = {}
				request({
					url: "business/userManager/userGrade/" + this.member.gradeId,
					method: 'get',
				}).then((res) => {
					grade = res.data
					this.userGradeList.forEach(item => {
						if (item.id == id){
							if (grade.grade > item.grade){
								this.percentage = 100
							}
							if (grade.grade < item.grade){
								this.percentage = 0
							}
							if (grade.grade == item.grade){
								this.percentage = ((this.member.growthValue / item.growthValue) * 100).toFixed(0)
							}
						}
					})
				})
				
			},
			// 获取当前登入用户的等级信息
			getMember(){
				request({
					url: "business/userManager/user/storeUserInfo/" + this.storeId,
					method: 'get',
				}).then((res) => {
					this.member = res.data
					this.getPercentage(this.userGrade.id)
				})
			},
			getChainConfig(storeId){
				let _this = this;
				request({
					url: "business/userManager/chainStoreConfig/" + storeId,
					method: 'get',
				}).then((res) => {
					_this.chainStoreConfig = res.data
				})
			},
			// 获取用户余额信息
			getUserBalance(){
				let _this = this;
				request({
					url: "business/userManager/user/userBalanceByUserId",
					method: 'get',
				}).then((res) => {
					_this.userBalance = res.data
				})
			},
			// 获取会员等级列表信息
			getList(storeId){
				let _this = this;
				request({
					url: "business/userManager/userGrade/getGradeList/"+storeId,
					method: 'get',
				}).then((res) => {
					if (res.data){
						this.isExist = true
						this.userGradeList = res.data
						this.userGrade = res.data[0]
						if (res.data[0].preferential == '自定义优惠'){
							this.gasolineRule = JSON.parse(res.data[0].gasolineRule)
							this.dieselRule = JSON.parse(res.data[0].dieselRule)
							this.naturalGasRule = JSON.parse(res.data[0].naturalGasRule)
						}
						// this.getPercentage(res.data[0].id)
					}else{
						this.isExist = false
					}
				})
			},
			change(e) {
				this.current = e.detail.current
				this.userGrade = this.userGradeList[this.current]
				if (this.userGradeList[this.current].preferential == '自定义优惠'){
					this.gasolineRule = JSON.parse(this.userGradeList[this.current].gasolineRule)
					this.dieselRule = JSON.parse(this.userGradeList[this.current].dieselRule)
					this.naturalGasRule = JSON.parse(this.userGradeList[this.current].naturalGasRule)
				}
				this.getPercentage(this.userGrade.id)
			},
			goBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss">
	.b-center{
		line-height: 25px;
		margin: 10px 0;
		margin-left: 10px;
		font-size: 15px;
	}
	
	.b-center-spn{
		margin-left: 20px;
	}
	
	.swiper-box {
		height: 50vh;
	}

	.content {
		background: #2F3648;
		height: 100vh;
	}

	.container {
		width: 100%;

		box-sizing: border-box;
		padding-top: 88px;
	}

	.my-header {
		width: 100%;
		height: 88px;
		background: #ffffff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #000;
		box-sizing: border-box;
		padding: 0px 15px;
		padding-top: 40px;

		.my-icons {
			width: 20px;

		}

		position: fixed;
		top: 0px;
	}

	.top-box {
		width: 90%;
		border-radius: 8px;
		box-sizing: border-box;
		padding: 20px;
		background: linear-gradient(90deg, #EEF4FF 0%, #AEC9FF 100%);
		margin: 10px auto;
	}

	.b-top {
		color: #2F72F7;
		display: flex;
		justify-content: space-between;
	}

	.right-img {
		width: 80px;
		height: 80px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.title-size {
		font-weight: bold;
		font-size: 18px;
	}

	.min-size {
		font-size: 12px;
	}

	.c-box {
		width: 90%;
		box-sizing: border-box;
		padding: 15px;
		margin: 20px auto;
		height: 188px;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
		border-radius: 8px;
	}

	.title-bai {
		font-size: 18px;
		font-weight: bold;
		color: #ffffff;
	}

	.wrap-box {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;

	}

	.box-ba {
		width: 33%;
		text-align: center;
		margin: 10px auto;
		color: #ffffff;
		font-size: 12px;
	}

	.min-box {
		width: 90%;
		height: 90px;
		margin: 5px auto;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.bottom-box {
		background: #F3F5F9;
		width: 100%;
		border-radius: 16px 16px 0px 0px;
		box-sizing: border-box;
		padding: 15px;
		position: fixed;
		bottom: 0px;
		height: 390px;
		overflow-y: scroll;
	}

	.bottom-bai-box {
		width: 100%;
		border-radius: 8px;
		background: #ffffff;
		box-sizing: border-box;
		padding: 10px;
		margin: 15px auto;



	}

	.b-top-bt {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.title {
		font-size: 16px;
		font-weight: bold;
		color: #333333;
	}

	.times {
		font-size: 12px;
		color: #999999;
	}

	.btimg {

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

	}

	.anniu {
		width: 70px;
		height: 30px;
		background: #EB3E67;
		border-radius: 15px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		font-size: 14px;
		font-weight: bold;

	}

	.disa {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.an-title {
		font-size: 16px;
		font-weight: bold;
		color: #333333;
		margin-left: 5px;
	}

	.mu_ {
		font-size: 18px;
		font-weight: bold;
		margin: 15px auto;
	}
</style>