517 lines
14 KiB
Vue
517 lines
14 KiB
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> |