Leadfyy.co
/
ec.uniapp-master
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

修改会员服务页面UI、完成余额明细页面UI

master
邓平艺 4 years ago
parent
c80d463657
commit
6d18b713df
4 changed files with 420 additions and 281 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      pages.json
  2. 284
      pages/recharge/balance/balance - 副本.vue
  3. 408
      pages/recharge/balance/balance.vue
  4. 6
      pages/user/member/service.vue

3
pages.json
View File

@ -395,7 +395,8 @@
{
"path": "pages/recharge/balance/balance",
"style": {
"navigationBarTitleText": "余额"
"navigationBarTitleText": "余额" ,
"navigationStyle":"custom"
}
},
{

284
pages/recharge/balance/balance - 副本.vue
View File

@ -0,0 +1,284 @@
<template>
<view id="recharge-balance">
<view class="content">
<!-- 我在类名里面写了样式，但是并不起作用，先用行内样式-->
<view class="balance-top" style="background:#FB5054 ">
<view class="title">
账户余额（元）
</view>
<view class="recharge-box">
<view class="money">
{{num/100}}
</view>
<view class="recharge" @tap="jump" style="display: flex;
justify-content: center;
align-items: center;
width:50px;
height:24px;
border-radius:2px;
border:1px solid rgba(255,255,255,1);">
充值 >
</view>
</view>
</view>
<view class="tab-panel">
<block v-for="(item, index) in tabList" :key="index">
<view :id="index" :hidden="activeIndex != index" :style="'color: ' + config.mainColor + '; border-color: ' + config.mainColor + ' '" class="tab-title active" @tap="tabClick">{{item.name}}</view>
<view :id="index" :hidden="activeIndex == index" class="tab-title" @tap="tabClick">{{item.name}}</view>
</block>
</view>
<view class="tab-content">
<view class="tab-item" :hidden="activeIndex!=0">
<block v-for="(items, idx) in dataList[0]" :key="idx">
<view class="tab-item-content" v-for="(item, index) in dataList[0][idx]" :key="index">
<view class="text">
<view style="font-size: 14px; text-overflow:ellipsis;overflow:hidden;">{{item.note}}</view>
<view style="font-size: 10px;color: #A3A3A3">{{item.updated_at}}</view>
</view>
<view class="num">
+{{item.value/100}}
</view>
</view>
</block>
<view class="loadingbox" :hidden="!tabList[0].show">
{{showText}}
</view>
</view>
<view class="tab-item" :hidden="activeIndex!=1">
<block v-for="(item, idx) in dataList[1]" :key="idx" >
<view class="tab-item-content" v-for="(item, index) in dataList[1][idx]" :key="index">
<view class="text">
<view style="font-size: 14px; text-overflow:ellipsis;overflow:hidden;">{{item.note}}</view>
<view style="font-size: 10px;color: #A3A3A3">{{item.updated_at}}</view>
</view>
<view class="num">
{{item.value/100}}
</view>
</view>
</block>
<view class="loadingbox" :hidden="!tabList[1].show">
{{showText}}
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import {pageLogin, getUrl,config,is} from '@/common/js/utils.js';
export default {
data() {
return {
activeIndex: 0,
tabList: [{
id: 0,
name: "收入",
init: false,
page: 0,
more: true,
show: false
}, {
id: 1,
name: "支出",
init: false,
page: 0,
more: true,
show: false
}],
token: "",
dataList: {
0: [],
1: []
},
num: "",
showText: '正在加载下一页数据',
config: ''
};
},
onReachBottom(e) {
var status = this.activeIndex;
var page = this.tabList[status].page + 1;
var tabList = `tabList[${status}]`;
if (this.tabList[status].more) {
this.setData({
[`${tabList}.show`]: true
});
var token = this.token;
this.queryBalanceList(token, status, page);
} else {
wx.showToast({
image: '../../../static/error.png',
title: '再拉也没有啦'
});
}
},
onShow() {// let app =getApp();
// app.isBirthday().then(()=>{
// if(this.$cookieStorage.get("birthday_gift")){
// var giftData=this.$cookieStorage.get("birthday_gift").data;
// new app.ToastPannel().__page.showText(giftData);
// }
// });
},
onLoad(e) {
// 第三方平台配置颜色
var bgConfig = this.$cookieStorage.get('globalConfig') || '';
this.setData({
config: bgConfig
}); // var status=0,page=1;
// this.queryBalanceList(token);
var status = e.type ? e.type : 0;
var page = this.tabList[status].page;
pageLogin(getUrl(), token => {
this.setData({
'token': token
});
this.queryBalanceList(token, status, page);
this.queryUserSum(token);
});
},
components: {},
props: {},
methods: {
jump() {
wx.navigateTo({
url: '/pages/recharge/index/index'
});
},
tabClick(e) {
// console.log(e.currentTarget.id);
var status = e.currentTarget.id;
this.setData({
activeIndex: status
});
if (!this.tabList[status].init) {
var page = this.tabList[status].page;
wx.showLoading({
title: "加载中",
mask: true
});
this.queryBalanceList(this.token, status, page);
}
},
result(res, status) {
if (res.status) {
var list;
var page = res.meta.pagination;
var current_page = page.current_page;
var total_pages = page.total_pages;
var tabList = `tabList[${status}]`;
list = res.data;
// this.setData({
// [`dataList.${status}[${current_page - 1}]`]: list,
// [`${tabList}.init`]: true,
// [`${tabList}.page`]: current_page,
// [`${tabList}.more`]: current_page < total_pages,
// [`${tabList}.show`]: false
// });
this.dataList[status][current_page - 1]=res.data;
this.tabList[status].init=true;
this.tabList[status].page=current_page;
this.tabList[status].more=current_page < total_pages;
this.tabList[status].show=false;
}
},
queryBalanceList(token, status, page) {
var type = status ? 'consume' : 'recharge';
var params = type ? {
type
} : {};
params.page = page;
this.$http.get({
api: 'api/users/balance/list',
header: {
Authorization: token
},
data: params
}).then(res => {
if (res.statusCode == 200) {
res = res.data;
this.result(res, status);
} else {
wx.showModal({
title: '提示',
content: '数据请求失败',
success: res => {}
});
}
wx.hideLoading();
}).catch(rej => {
wx.showToast({
title: "请求失败",
image: '../../../static/error.png'
});
wx.hideLoading();
});
},
queryUserSum(token) {
this.$http.get({
api: "api/users/balance/sum",
header: {
Authorization: token
}
}).then(res => {
if (res.statusCode == 200) {
res = res.data;
this.setData({
"num": res.data.sum
});
} else {
wx.showModal({
title: '提示',
content: '数据请求失败',
success: res => {}
});
}
});
},
setData: function (obj) {
let that = this;
let keys = [];
let val, data;
Object.keys(obj).forEach(function (key) {
keys = key.split('.');
val = obj[key];
data = that.$data;
keys.forEach(function (key2, index) {
if (index + 1 == keys.length) {
that.$set(data, key2, val);
} else {
if (!data[key2]) {
that.$set(data, key2, {});
}
}
data = data[key2];
});
});
}
},
computed: {},
watch: {}
};
</script>
<style>
#recharge-balance .content{height:100%;overflow:auto;box-sizing:border-box}#recharge-balance .content .balance-top{color:#FFF;padding:20px 15px;background:#CDA76E}#recharge-balance .content .balance-top .title{font-size:12px}#recharge-balance .content .balance-top .recharge-box{display:flex;align-items:center;margin-top:20px;font-size:14px}#recharge-balance .content .tab-content,#recharge-balance .content .tab-panel{margin-top:10px;background-color:#FFF}#recharge-balance .content .balance-top .recharge-box .money{flex:1;font-size:30px}#recharge-balance .content .tab-panel{display:flex;box-sizing:border-box}#recharge-balance .content .tab-panel .tab-title{height:44px;width:50%;line-height:44px;text-align:center;box-sizing:border-box}#recharge-balance .content .tab-panel .tab-title.active{color:#CDA76E;border-bottom:2px solid #CDA76E}#recharge-balance .content .tab-content .tab-item-content{box-sizing:border-box;padding-left:12px;padding-right:12px;display:flex;line-height:60px;height:60px;border-bottom:1px solid #d9d9d9;justify-content:space-between}#recharge-balance .content .tab-content .tab-item-content .num{color:#ff2741}#recharge-balance .content .tab-content .tab-item-content .text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:30px;flex:1}#recharge-balance .loadingbox{text-align:center;padding:5px 0}
</style>

408
pages/recharge/balance/balance.vue
View File

@ -1,284 +1,136 @@
<template>
<view id="recharge-balance">
<view class="content">
<!-- 我在类名里面写了样式，但是并不起作用，先用行内样式-->
<view class="balance-top" style="background:#FB5054 ">
<view class="title">
账户余额（元）
</view>
<view class="recharge-box">
<view class="money">
{{num/100}}
</view>
<view class="recharge" @tap="jump" style="display: flex;
justify-content: center;
align-items: center;
width:50px;
height:24px;
border-radius:2px;
border:1px solid rgba(255,255,255,1);">
充值 >
</view>
</view>
</view>
<view class="tab-panel">
<block v-for="(item, index) in tabList" :key="index">
<view :id="index" :hidden="activeIndex != index" :style="'color: ' + config.mainColor + '; border-color: ' + config.mainColor + ' '" class="tab-title active" @tap="tabClick">{{item.name}}</view>
<view :id="index" :hidden="activeIndex == index" class="tab-title" @tap="tabClick">{{item.name}}</view>
</block>
</view>
<view class="tab-content">
<view class="tab-item" :hidden="activeIndex!=0">
<block v-for="(items, idx) in dataList[0]" :key="idx">
<view class="tab-item-content" v-for="(item, index) in dataList[0][idx]" :key="index">
<view class="text">
<view style="font-size: 14px; text-overflow:ellipsis;overflow:hidden;">{{item.note}}</view>
<view style="font-size: 10px;color: #A3A3A3">{{item.updated_at}}</view>
</view>
<view class="num">
+{{item.value/100}}
</view>
</view>
</block>
<view class="loadingbox" :hidden="!tabList[0].show">
{{showText}}
</view>
</view>
<view class="tab-item" :hidden="activeIndex!=1">
<block v-for="(item, idx) in dataList[1]" :key="idx" >
<view class="tab-item-content" v-for="(item, index) in dataList[1][idx]" :key="index">
<view class="text">
<view style="font-size: 14px; text-overflow:ellipsis;overflow:hidden;">{{item.note}}</view>
<view style="font-size: 10px;color: #A3A3A3">{{item.updated_at}}</view>
</view>
<view class="num">
{{item.value/100}}
</view>
</view>
</block>
<view class="loadingbox" :hidden="!tabList[1].show">
{{showText}}
</view>
</view>
</view>
</view>
</view>
<view>
<lf-nav title="余额" :showIcon="true" :spreadOut="false" bgColor="transparent" titleColor="#fff"></lf-nav>
<view class="head">
<view class="bg-left"></view>
<view class="bg-right"></view>
<view class="head-content">
<view>
<text class="lf-iconfont icon-- lf-font-50"></text>
</view>
<view class="point">
<text>78326478</text>
<text class="label">(元)</text>
</view>
</view>
</view>
<view class="main">
<view class="lf-row-between lf-m-b-30">
<view class="lf-font-32 lf-color-black lf-font-bold">余额变动明细</view>
<picker mode='date' :value="date" @change="dateChange">
<view style="width: 440rpx; text-align: right;">
<text>{{ date || '2021-09-01' }}</text>
<text class="lf-iconfont icon--1 lf-m-l-10"></text>
</view>
</picker>
</view>
<view class="item" v-for="(item, index) in 10" :key="index">
<view class="lf-row-between">
<text class="lf-font-36 lf-color-black lf-font-bold" :class="{'lf-color-price': index % 2}">{{ index % 2 ? '-250' : '+80' }}</text>
<text class="lf-font-24 lf-color-555">线上-商城内消费</text>
</view>
<view class="lf-row-between lf-m-t-20">
<text class="lf-font-24 lf-color-555">¥374.38</text>
<text class="lf-font-24 lf-color-777">2021-09-01 18:27:58</text>
</view>
</view>
</view>
</view>
</template>
<script>
import {pageLogin, getUrl,config,is} from '@/common/js/utils.js';
export default {
data() {
return {
activeIndex: 0,
tabList: [{
id: 0,
name: "收入",
init: false,
page: 0,
more: true,
show: false
}, {
id: 1,
name: "支出",
init: false,
page: 0,
more: true,
show: false
}],
token: "",
dataList: {
0: [],
1: []
},
num: "",
showText: '正在加载下一页数据',
config: ''
};
},
onReachBottom(e) {
var status = this.activeIndex;
var page = this.tabList[status].page + 1;
var tabList = `tabList[${status}]`;
if (this.tabList[status].more) {
this.setData({
[`${tabList}.show`]: true
});
var token = this.token;
this.queryBalanceList(token, status, page);
} else {
wx.showToast({
image: '../../../static/error.png',
title: '再拉也没有啦'
});
}
},
onShow() {// let app =getApp();
// app.isBirthday().then(()=>{
// if(this.$cookieStorage.get("birthday_gift")){
// var giftData=this.$cookieStorage.get("birthday_gift").data;
// new app.ToastPannel().__page.showText(giftData);
// }
// });
},
onLoad(e) {
// 第三方平台配置颜色
var bgConfig = this.$cookieStorage.get('globalConfig') || '';
this.setData({
config: bgConfig
}); // var status=0,page=1;
// this.queryBalanceList(token);
var status = e.type ? e.type : 0;
var page = this.tabList[status].page;
pageLogin(getUrl(), token => {
this.setData({
'token': token
});
this.queryBalanceList(token, status, page);
this.queryUserSum(token);
});
},
components: {},
props: {},
methods: {
jump() {
wx.navigateTo({
url: '/pages/recharge/index/index'
});
},
tabClick(e) {
// console.log(e.currentTarget.id);
var status = e.currentTarget.id;
this.setData({
activeIndex: status
});
if (!this.tabList[status].init) {
var page = this.tabList[status].page;
wx.showLoading({
title: "加载中",
mask: true
});
this.queryBalanceList(this.token, status, page);
}
},
result(res, status) {
if (res.status) {
var list;
var page = res.meta.pagination;
var current_page = page.current_page;
var total_pages = page.total_pages;
var tabList = `tabList[${status}]`;
list = res.data;
// this.setData({
// [`dataList.${status}[${current_page - 1}]`]: list,
// [`${tabList}.init`]: true,
// [`${tabList}.page`]: current_page,
// [`${tabList}.more`]: current_page < total_pages,
// [`${tabList}.show`]: false
// });
this.dataList[status][current_page - 1]=res.data;
this.tabList[status].init=true;
this.tabList[status].page=current_page;
this.tabList[status].more=current_page < total_pages;
this.tabList[status].show=false;
}
},
queryBalanceList(token, status, page) {
var type = status ? 'consume' : 'recharge';
var params = type ? {
type
} : {};
params.page = page;
this.$http.get({
api: 'api/users/balance/list',
header: {
Authorization: token
},
data: params
}).then(res => {
if (res.statusCode == 200) {
res = res.data;
this.result(res, status);
} else {
wx.showModal({
title: '提示',
content: '数据请求失败',
success: res => {}
});
}
wx.hideLoading();
}).catch(rej => {
wx.showToast({
title: "请求失败",
image: '../../../static/error.png'
});
wx.hideLoading();
});
},
queryUserSum(token) {
this.$http.get({
api: "api/users/balance/sum",
header: {
Authorization: token
}
}).then(res => {
if (res.statusCode == 200) {
res = res.data;
this.setData({
"num": res.data.sum
});
} else {
wx.showModal({
title: '提示',
content: '数据请求失败',
success: res => {}
});
}
});
},
setData: function (obj) {
let that = this;
let keys = [];
let val, data;
Object.keys(obj).forEach(function (key) {
keys = key.split('.');
val = obj[key];
data = that.$data;
keys.forEach(function (key2, index) {
if (index + 1 == keys.length) {
that.$set(data, key2, val);
} else {
if (!data[key2]) {
that.$set(data, key2, {});
}
}
data = data[key2];
});
});
}
},
computed: {},
watch: {}
};
<script>
export default {
data(){
return {
date: ''
}
},
onLoad(){
},
methods: {
dateChange(event){
this.date = event.detail.value;
}
}
}
</script>
<style>
#recharge-balance .content{height:100%;overflow:auto;box-sizing:border-box}#recharge-balance .content .balance-top{color:#FFF;padding:20px 15px;background:#CDA76E}#recharge-balance .content .balance-top .title{font-size:12px}#recharge-balance .content .balance-top .recharge-box{display:flex;align-items:center;margin-top:20px;font-size:14px}#recharge-balance .content .tab-content,#recharge-balance .content .tab-panel{margin-top:10px;background-color:#FFF}#recharge-balance .content .balance-top .recharge-box .money{flex:1;font-size:30px}#recharge-balance .content .tab-panel{display:flex;box-sizing:border-box}#recharge-balance .content .tab-panel .tab-title{height:44px;width:50%;line-height:44px;text-align:center;box-sizing:border-box}#recharge-balance .content .tab-panel .tab-title.active{color:#CDA76E;border-bottom:2px solid #CDA76E}#recharge-balance .content .tab-content .tab-item-content{box-sizing:border-box;padding-left:12px;padding-right:12px;display:flex;line-height:60px;height:60px;border-bottom:1px solid #d9d9d9;justify-content:space-between}#recharge-balance .content .tab-content .tab-item-content .num{color:#ff2741}#recharge-balance .content .tab-content .tab-item-content .text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:30px;flex:1}#recharge-balance .loadingbox{text-align:center;padding:5px 0}
page{
overflow-x: hidden;
}
</style>
<style lang="scss" scoped>
.head{
width: 750rpx;
// height: 512rpx;
height: 429rpx;
background: linear-gradient(90deg, #22A2A0 0%, #187B7A 100%);
position: relative;
overflow: hidden;
display: flex;
align-items: flex-end;
box-sizing: border-box;
padding: 60rpx 32rpx;
color: #FFFFFF;
.bg-left{
position: absolute;
width: 196rpx;
height: 196rpx;
border-radius: 50%;
background-color: rgba(255,255,255,0.04);
left: -92rpx;
bottom: 60rpx;
}
.bg-right{
position: absolute;
width: 520rpx;
height: 520rpx;
border-radius: 50%;
background-color: rgba(255,255,255,0.04);
right: -168rpx;
top: -122rpx;
}
.head-content{
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&>view{
width: 100%;
text-align: center;
}
.point{
font-size: 72rpx;
letter-spacing: 2rpx;
font-weight: bold;
word-break: break-all;
line-height: 1;
margin-top: 10rpx;
.label{
font-size: 36rpx;
font-weight: initial;
}
}
}
}
.main{
padding: 30rpx 32rpx;
width: 750rpx;
height: max-content;
box-sizing: border-box;
.item{
width: 686rpx;
height: max-content;
background: #F4F8F8;
border-radius: 10rpx;
margin-bottom: 26rpx;
padding: 30rpx;
box-sizing: border-box;
line-height: 1;
}
}
</style>

6
pages/user/member/service.vue
View File

@ -14,7 +14,7 @@
</view>
<view style="height: 120rpx;"></view>
<view class="fixed">
<view class="btn1" hover-class="lf-opacity" @click="$url('/pages/user/my/chatonline')">在线客服</view>
<!-- <view class="btn1" hover-class="lf-opacity" @click="$url('/pages/user/my/chatonline')">在线客服</view> -->
<view class="btn2" hover-class="lf-opacity">拨打客服电话</view>
</view>
</view>
@ -70,6 +70,7 @@
width: 200rpx;
height: 200rpx;
background-color: #D8D8D8;
border-radius: 20rpx;
}
.title{
font-size: 28rpx;
@ -109,7 +110,8 @@
font-size: 32rpx;
}
.btn2{
width: 423rpx;
// width: 423rpx;
width: 686rpx;
height: 100rpx;
background: #15716E;
border-radius: 50rpx;

Write Preview
Loading…
Cancel
Save