yudao
/
mall-uniapp
mirror of https://gitee.com/yudaocode/yudao-mall-uniapp.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

会员等级：接入 api

pull/1/MERGE
YunaiV 2023-08-28 21:03:42 +08:00
parent 02ce643f57
commit 85f91fa570
4 changed files with 86 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
api/member/level.js Normal file
View File

@ -0,0 +1,11 @@
import request from "@/utils/request.js";
// 获得会员等级列表
export function getLevelList() {
return request.get('app-api/member/level/list');
}
// 获得会员经验记录分页
export function getExperienceRecordPage() {
return request.get('app-api/member/experience-record/page');
}

7
pages/user/index.vue
View File

@ -14,10 +14,9 @@
<view class="name" v-if="!isLogin" @tap="openAuto">请点击登录</view> <view class="name" v-if="!isLogin" @tap="openAuto">请点击登录</view>
<view class="name" v-else> <view class="name" v-else>
{{ userInfo.nickname }} {{ userInfo.nickname }}
<!-- TODO 芋艿：vip 逻辑 --> <view class="vip" v-if="userInfo.level">
<view class="vip" v-if="userInfo.vip"> <image :src="userInfo.level.icon" alt="" />
<image :src="userInfo.vipIcon" alt="" /> <view style="margin-left: 10rpx;" class="vip-txt">{{ userInfo.level.name || ''}}</view>
<view style="margin-left: 10rpx;" class="vip-txt">{{userInfo.vipName || ''}}</view>
</view> </view>
</view> </view>
<!-- 手机 --> <!-- 手机 -->

3
pages/users/login/index.vue
View File

@ -301,7 +301,8 @@
password: this.password, password: this.password,
spread: this.$Cache.get("spread") // TODO 芋艿：后续接入 spread: this.$Cache.get("spread") // TODO 芋艿：后续接入
}).then(({ data }) => { }).then(({ data }) => {
debugger // debugger
// TODO 芋艿：refreshToken 机制
this.$store.commit("LOGIN", { this.$store.commit("LOGIN", {
'token': data.accessToken 'token': data.accessToken
}); });

141
pages/users/user_vip/index.vue
View File

@ -1,22 +1,24 @@
<template> <template>
<view class="memberVip"> <view class="memberVip">
<!-- 基本信息 -->
<view class="bg"> <view class="bg">
<view class="header"> <view class="header">
<view class="picTxt acea-row row-middle"> <view class="picTxt acea-row row-middle">
<view class="pictrue"> <view class="pictrue">
<image :src="userInfo.avatar"></image> <image :src="userInfo.avatar" />
</view> </view>
<view class="text acea-row row-middle"> <view class="text acea-row row-middle">
<view class="name line1">{{userInfo.nickname}}</view> <view class="name line1">{{ userInfo.nickname }}</view>
<view class="vip" v-if='userInfo.vip'> <view class="vip" v-if='userInfo.level'>
<image :src="userInfo.vipIcon"></image>{{userInfo.vipName}} <image :src="userInfo.level.icon" /> {{ userInfo.level.name }}
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<!-- TODO -->
<view class="experience"> <view class="experience">
<view class="title">当前经验值</view> <view class="title">当前经验值</view>
<view class="num">{{levelInfo}}</view> <view class="num">{{ userInfo.experience }}</view>
<view class="axis"> <view class="axis">
<view class="bar"> <view class="bar">
<view class="barCon"> <view class="barCon">
@ -25,16 +27,18 @@
<view class="acea-row row-around row-middle"> <view class="acea-row row-around row-middle">
<view class="spotw acea-row row-center" v-for="(item,index) in levelList" :key='index'> <view class="spotw acea-row row-center" v-for="(item,index) in levelList" :key='index'>
<view class="spot" <view class="spot"
:class="current >item.experience?'past':'' + ' ' + current==item.experience?'on':''"> :class="current > item.experience?'past':'' + ' ' + current === item.experience?'on':''">
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<view class="numList acea-row row-around row-middle"> <view class="numList acea-row row-around row-middle">
<view class="item" :class="current >=item.experience?'past':''" <view class="item" :class="current >= item.experience?'past':''"
v-for="(item,index) in levelList" :key="index">{{item.experience}}</view> v-for="(item,index) in levelList" :key="index">{{item.experience}}
</view>
</view> </view>
</view> </view>
<!-- 各种描述，没有逻辑 -->
<view class="vipList acea-row"> <view class="vipList acea-row">
<view class="item"> <view class="item">
<view class="pictrue"> <view class="pictrue">
@ -68,6 +72,7 @@
</view> </view>
</view> </view>
</view> </view>
<!-- 引导：攒经验 -->
<view class="module"> <view class="module">
<view class="public_title acea-row row-middle"> <view class="public_title acea-row row-middle">
<view class="icons"></view>获取经验 <view class="icons"></view>获取经验
@ -94,36 +99,27 @@
<navigator url="/pages/goods_cate/goods_cate" class="button" hover-class="none" <navigator url="/pages/goods_cate/goods_cate" class="button" hover-class="none"
open-type='switchTab'>去获取</navigator> open-type='switchTab'>去获取</navigator>
</view> </view>
<!-- <view class="item acea-row row-between-wrapper">
<view class="picTxt acea-row row-middle">
<view class="pictrue on2"><text class="iconfont icon-yaoqing"></text></view>
<view class="text">
<view class="name line1">邀请好友</view>
<view class="info line1">邀请好友注册商城可获得经验值</view>
</view>
</view>
<navigator url="/pages/users/user_spread_code/index" class="button" hover-class="none">去获取</navigator>
</view> -->
</view> </view>
</view> </view>
</view> </view>
<!-- 经验列表 -->
<view class="detailed" v-if="expList.length"> <view class="detailed" v-if="expList.length">
<view class="public_title acea-row row-middle"> <view class="public_title acea-row row-middle">
<view class="icons"></view>经验值明细 <view class="icons" />经验值明细
</view> </view>
<view class="list"> <view class="list">
<view class="item acea-row row-between-wrapper" v-for="(item,index) in expList" :key="index"> <view class="item acea-row row-between-wrapper" v-for="(item,index) in expList" :key="index">
<view class="text"> <view class="text">
<view class="name">{{item.title}}</view> <view class="name">{{ item.title }}</view>
<view class="data">{{item.add_time}}</view> <view class="data">{{ formatDate(item.createTime) }}</view>
</view> </view>
<view class="num" v-if="item.pm">+{{item.number}}</view> <view class="num" v-if="item.experience > 0">+{{ item.experience }}</view>
<view class="num on" v-else>-{{item.number}}</view> <view class="num on" v-else>{{item.experience}}</view>
</view> </view>
</view> </view>
</view> </view>
<view class='loadingicon acea-row row-center-wrapper' v-if="expList.length"> <view class='loadingicon acea-row row-center-wrapper' v-if="expList.length">
<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}} <text class='loading iconfont icon-jiazai' :hidden='!loading' />{{loadTitle}}
</view> </view>
<home></home> <home></home>
</view> </view>
@ -131,96 +127,99 @@
<script> <script>
import home from '@/components/home'; import home from '@/components/home';
import { import { mapGetters } from "vuex";
mapGetters import * as LevelApi from '@/api/member/level';
} from "vuex"; import dayjs from '@/plugin/dayjs/dayjs.min.js';
import { export default {
getlevelInfo,
getlevelExpList
} from '@/api/user.js';
export default {
components: { components: {
home home
}, },
computed: mapGetters(['userInfo']), computed: mapGetters(['userInfo']),
data() { data() {
return { return {
//userInfo: '',
levelInfo: '', levelInfo: '',
levelList: [], levelList: [], // 会员等级列表
current: 0, current: 0, // 当前等级的经验
widthLen: 0, widthLen: 0,
loading: false, loading: false,
loadend: false, loadend: false,
loadTitle: '加载更多', //提示语 loadTitle: '加载更多', // 提示语
page: 1, page: 1,
limit: 20, limit: 20,
expList: [] expList: []
}; };
}, },
onLoad() { onLoad() {
this.levelInfo = this.userInfo.experience;
this.getInfo(); this.getInfo();
this.getlevelList(); this.getlevelList();
}, },
methods: { methods: {
/**
* 获得会员等级列表
*/
getInfo: function() { getInfo: function() {
let that = this; LevelApi.getLevelList().then(res => {
getlevelInfo().then(res => {
let levelList = res.data; let levelList = res.data;
let list = [] this.levelList = levelList;
that.levelList = levelList;
// 获得当前等级对应的经验
let list = []
levelList.map((item, index) => { levelList.map((item, index) => {
if (item.experience <= that.levelInfo) { if (item.experience <= this.userInfo.experience) {
list.push(item.experience) list.push(item.experience)
} }
}) })
let maxn = Math.max.apply(null, list); const maxn = Math.max.apply(null, list);
that.current = maxn; this.current = maxn;
// 解决len取的值没有时； // 解决len取的值没有时；
let levelListLen = levelList[list.length] ? levelList[list.length] : levelList[list const levelListLen = levelList[list.length] ? levelList[list.length] : levelList[list.length - 1];
.length - 1];
// 解决除数不能为0 // 解决除数不能为0
let divisor = levelListLen.experience - maxn ? levelListLen.experience - maxn : 1; const divisor = levelListLen.experience - maxn ? levelListLen.experience - maxn : 1;
// 每小格所占的百分比 // 每小格所占的百分比
let per = (that.levelInfo - maxn) / divisor / levelList.length; const per = (this.userInfo.experience - maxn) / divisor / levelList.length;
this.widthLen = ((list.length - 0.5) / (levelList.length)) * 100 + per * 100
that.widthLen = ((list.length - 0.5) / (levelList.length)) * 100 + per * 100 }).catch(res => {
return this.$util.Tips({
}).catch(function(res) {
return that.$util.Tips({
title: res title: res
}); });
}) })
}, },
/**
* 获得经验记录
*/
getlevelList: function() { getlevelList: function() {
let that = this if (this.loadend || this.loading) {
if (this.loadend) return false; return false;
if (this.loading) return false; }
getlevelExpList({ LevelApi.getExperienceRecordPage({
page: that.page, pageNo: this.page,
limit: that.limit pageSize: this.limit
}).then(res => { }).then(res => {
let list = res.data.list, const list = res.data.list;
loadend = list.length < that.limit; const loadend = list.length < this.limit;
let expList = that.$util.SplitArray(list, that.expList); let expList = this.$util.SplitArray(list, this.expList);
that.$set(that, 'expList', expList); this.$set(this, 'expList', expList);
that.loadend = loadend; this.loadend = loadend;
that.loadTitle = loadend ? '我也是有底线的' : '加载更多'; this.loadTitle = loadend ? '我也是有底线的' : '加载更多';
that.page = that.page + 1; this.page = this.page + 1;
that.loading = false; this.loading = false;
}).catch(err => { }).catch(err => {
that.loading = false; this.loading = false;
that.loadTitle = '加载更多'; this.loadTitle = '加载更多';
}); });
} },
formatDate: function(date) {
return dayjs(date).format("YYYY-MM-DD HH:mm:ss");
}
}, },
onReachBottom: function() { onReachBottom: function() {
this.getlevelList(); this.getlevelList();
} }
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.memberVip { .memberVip {
.bg { .bg {