hengmei-two/pagesA/member/member.vue

149 lines
5.3 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<view class="pad-x180">
<!-- 状态栏 -->
<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 class="posixzy">
<bottom-tab></bottom-tab>
</view>
</view>
</template>
<script>
import scoreList from '@/components/score-list.vue';
import bottomTab from '@/components/bottom-tab.vue';
export default {
components:{
scoreList,
bottomTab,
},
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
}
},
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>