146 lines
5.2 KiB
Vue
146 lines
5.2 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 状态栏 -->
|
||
<status-nav :backgroudColor="publicColor" :tabcolor="publicColor" :statusTitle="true" :backColor="1"></status-nav>
|
||
<image src="/static/public/member-head.png" style="position: absolute;top: 0;left: 0;right: 0;height: 436rpx;width: 100%;"></image>
|
||
<view class="mar-zy32 posir" :style="{paddingTop:statusHeight+26+'px'}">
|
||
<view class="radius30 posir gao mar-zy40 fon24 pad-x20" style="box-shadow: 0px 16rpx 30rpx rgba(141, 141, 141, 0.26);">
|
||
<view class="posir pad-zy20" style="z-index: 2;">
|
||
<view class="disjb">
|
||
<view class="disac">
|
||
<!-- 头像 -->
|
||
<image class="mar-sx20" :src="levelInfo.headimgurl" style="width:90rpx;height: 90rpx;border-radius: 100%;" mode="aspectFill"></image>
|
||
<view class="mar-z20">
|
||
<!-- 昵称 -->
|
||
<view class="fon28 bold disac">{{levelInfo.nickname}}<view style="background: #FFFFFF;border-radius: 10rpx;text-align: center;font-size: 22rpx;color: #FFBD39;padding: 5rpx 16rpx;margin-left: 10rpx;">VIP</view></view>
|
||
<view class="mar-s10" style="color: #C27417;">{{levelInfo.level.name}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="mar-s30 " style="color: #C27417;">当前等级</view>
|
||
</view>
|
||
<view style="margin-top: 62rpx;color: #C27417;">还差{{levelInfo.level.value}}积分升级</view>
|
||
<view class="fon28 mar-s10" style="color: #C49F74;">升级到钻石会员享有更多权益</view>
|
||
</view>
|
||
<image class="posia" style="top: 0;left: 0;right: 0;bottom: 0;width: 100%;height: 100%;z-index: 0;" src="/static/public/member.png" mode=""></image>
|
||
</view>
|
||
<!-- 功能列表 -->
|
||
<view class="bacf radius20 mar-s20">
|
||
<view v-if="levelInfo.level.name!='普通会员'" class="disac fon28 fw pad-x20" style="color: #C27417;">
|
||
<view v-if="levelInfo.level.rights[indexh]==itemh.ntype" v-for="(itemh,indexh) in huiList" :key="indexh" class="mar-s20" style="width: 25%;">
|
||
<view class="disac fc">
|
||
<image :src="itemh.src" style="width: 50rpx;height: 50rpx;" mode="aspectFill"></image>
|
||
<view class="mar-s20 mar-x10">{{itemh.title}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 当前权益介绍 -->
|
||
<view class="bacf radius20 mar-s20 pad20">
|
||
<view class="mar-x30 fon32 bold" style="color: #C27417;">当前权益介绍</view>
|
||
<rich-text :nodes="detailInfo"></rich-text>
|
||
<!-- <image src="../../static/public/dang-quan.png" style="width: 100%;" mode="widthFix"></image> -->
|
||
</view>
|
||
<view class="fon30 bold tc mar-s50 mar-x30" :style="{color:publicColor}">积分兑换</view>
|
||
</view>
|
||
<scoreList :dataList="dataList"></scoreList>
|
||
<!-- 用户信息授权，手机号授权 -->
|
||
<auth-userInfo-mobileInfo></auth-userInfo-mobileInfo>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import scoreList from '@/components/score-list.vue';
|
||
export default {
|
||
components:{
|
||
scoreList
|
||
},
|
||
data() {
|
||
return {
|
||
huiList:[
|
||
{src:'/static/public/ru-hui50.png',title:'入会权益',ntype:'membership_interests'},
|
||
{src:'/static/public/birthday50.png',title:'生日礼物',ntype:'birthday'},
|
||
{src:'/static/public/member-scor50.png',title:'积分权益',ntype:'score'},
|
||
{src:'/static/public/te-quan50.png',title:'特权日',ntype:'privilege_day'},
|
||
{src:'/static/public/share-hai50.png',title:'分享海报',ntype:'poster'},
|
||
],
|
||
dataList:[],
|
||
levelInfo:{},
|
||
detailInfo:'',//富文本
|
||
}
|
||
},
|
||
computed: {
|
||
// 主题颜色
|
||
publicColor() {
|
||
return this.$store.state.publicColor
|
||
},
|
||
statusHeight() {
|
||
return this.$store.state.statusHeight
|
||
}
|
||
},
|
||
onShow() {
|
||
this.$toolAll.tools.isLogin();
|
||
},
|
||
onLoad(options) {
|
||
if(uni.getStorageSync('phone_active')!=0 && uni.getStorageSync('is_active')!=0){
|
||
this.checkList();
|
||
this.checkInfo();
|
||
}
|
||
},
|
||
methods: {
|
||
checkInfo(){
|
||
this.$requst.post('level/index').then(res=>{
|
||
if(res.code==0){
|
||
this.levelInfo = res.data;
|
||
// 富文本
|
||
this.detailInfo = this.$toolAll.tools.escape2Html(this.levelInfo.level.content)
|
||
}
|
||
})
|
||
},
|
||
checkList(){//查询列表事件
|
||
let params = {
|
||
keyword:'',//商品关键字 支持模糊搜索
|
||
page:1,
|
||
size:10,
|
||
type:'normal',//type=normal综合 newest=最新
|
||
sort_field:'',//排序字段 score=积分 num=兑换量
|
||
sort_value:''//排序值 asc=升序 desc=降序
|
||
}
|
||
this.$requst.post('spu/score',params).then(res=>{
|
||
if(res.code==0){
|
||
this.dataList = [];
|
||
if(res.data.list.length!=0){
|
||
res.data.list.forEach(item=>{
|
||
let obj = {
|
||
id:item.id,
|
||
imgSrc: this.$http + item.cover,
|
||
saleable:item.saleable,//是否下架
|
||
stock:item.stock,//库存
|
||
title: item.name,
|
||
zhePrice:item.price,
|
||
yuanPrice:item.original_price,
|
||
integral:item.score,
|
||
isTuan:false,
|
||
isPing:false,
|
||
isXian:false,
|
||
isIntegral:true,
|
||
grade:item.level_id,
|
||
published_at:item.published_at,//发布时间
|
||
amount:item.amount,//销量
|
||
level_text:item.level_text//会员限制提示 如青铜会员可购买
|
||
}
|
||
this.dataList.push(obj)
|
||
})
|
||
} else {
|
||
this.$toolAll.tools.showToast('暂无更多积分商品')
|
||
}
|
||
}
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
|
||
</style>
|