TmOct5/BlockChainH5
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

合并部分页面

Browse Source
This commit is contained in:
唐明明
2021-09-23 17:38:06 +08:00
parent 08c56ea921
commit e0ee86e816
44 changed files with 11691 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

365
pages/store/customer.vue Normal file
View File

@@ -0,0 +1,365 @@
<template>
<view class="content">
<!-- tabs -->
<view class="tabs">
<view class="item" :class="{'show': tabsIndex == 'day'}" @click="onTbas('day')">日成交</view>
<view class="item" :class="{'show': tabsIndex == 'month'}" @click="onTbas('month')">月成交</view>
<view class="item" :class="{'show': tabsIndex == 'year'}" @click="onTbas('year')">年成交</view>
</view>
<!-- 统计信息 -->
<view class="statistics">
<view class="statistics-flex">
<picker mode="date" :fields="tabsIndex" :value="dateValue" :end="endDate" @change="pickerDate">
<view class="statistics-date">
{{dateValue}}<uni-icons class="arrowdown" type="arrowdown" color="#555"></uni-icons>
</view>
</picker>
<view class="statistics-lay" :class="{ 'show' : sort != '' || payType != '' || channel != ''}" @click="onScreening">
筛选 <uni-icons class="arrowdown" type="settings" color="gray"></uni-icons>
</view>
</view>
<view class="statistics-text">
<text>成交产品数量 {{visitor.goods_count}} 人</text>
<text>成交产品金额 {{visitor.total}} 元</text>
</view>
</view>
<!-- 数据列表 -->
<view class="lists">
<block v-if="orders.length > 0">
<view class="item" v-for="(item, index) in orders" :key="index">
<image class="cover" :src="item.user.avatar" mode="aspectFill"></image>
<view class="title nowrap">
{{item.user.nickname}}
<view class="type">{{item.amount}}</view>
</view>
<view class="sub-title nowrap">订单号码: {{item.order_no}}</view>
<view class="sub-title nowrap">订单时间: {{item.created_at}}</view>
<view class="sub-tabs">
<text>{{item.driver}}</text>
<text>{{item.channel}}</text>
</view>
</view>
<!-- 分页 -->
<uni-load-more :status="pageStatus" :iconSize="16"></uni-load-more>
</block>
<block v-else>
<view class="list-null">
<image class="icon" src="@/static/icons/listnull-icon.png" mode="widthFix"></image>
<view class="sub-title">暂无相关成交客户记录</view>
</view>
</block>
</view>
<!-- 列表筛选 -->
<uni-popup ref="settingsPopup" background-color="#FFFFFF" @maskClick="onReset">
<view class="popup-content">
<view class="title">排序方式</view>
<view class="popup-choose-flex">
<view class="item" :class="{'show' : sort == 'money_asc'}" @click="sort = 'money_asc'">金额从低到高</view>
<view class="item" :class="{'show' : sort == 'money_desc'}" @click="sort = 'money_desc'">金额从高到低</view>
<view class="item" :class="{'show' : sort == 'sold_asc'}" @click="sort = 'sold_asc'">销量从低到高</view>
<view class="item" :class="{'show' : sort == 'sold_desc'}" @click="sort = 'sold_desc'">销量从高到低</view>
</view>
<view class="title">支付方式</view>
<view class="popup-choose-flex">
<view class="item" :class="{'show' : payType == 'eb'}" @click="payType = 'eb'">易币交易</view>
<view class="item" :class="{'show' : payType == 'money'}" @click="payType = 'money'">现金交易</view>
</view>
<view class="title">成交渠道</view>
<view class="popup-choose-flex">
<view class="item" :class="{'show' : channel == 'app'}" @click="channel = 'app'">APP</view>
<view class="item" :class="{'show' : channel == 'mini'}" @click="channel = 'mini'">自媒体</view>
</view>
<view class="popup-btns">
<view class="item" @click="onReset">重置</view>
<view class="item" @click="onSettings">确定</view>
</view>
</view>
<view class="ios-bottom"></view>
</uni-popup>
<!-- :status="more" -->
</view>
</template>
<script>
import getDate from '@/public/date'
import { orderUsers } from '@/apis/interfaces/store'
export default {
data() {
return {
tabsIndex : 'day',
dateValue : '',
endDate : '',
visitor : {
day: 0,
all: 0
},
orders : [],
sort : '',
payType : '',
channel : '',
// 分页
pageStatus : '',
page : 1
};
},
created() {
getDate().then(res => {
this.dateValue = res
this.endDate = res
this.getLists()
})
},
methods:{
// tabs筛选
onTbas(type){
getDate(type).then(res => {
this.tabsIndex = type
this.dateValue = res
this.page = 1
this.getLists()
})
},
onReset(){
this.sort = ''
this.payType = ''
this.channel = ''
},
onSettings(){
this.getLists()
this.$refs.settingsPopup.close()
},
// 日期筛选
pickerDate(e){
let dateValue = e.detail.value
this.dateValue = dateValue
this.getLists()
},
// 列表筛选
onScreening(){
this.$refs.settingsPopup.open('bottom')
},
// 获取列表
getLists(){
orderUsers({
type : this.tabsIndex,
date : this.dateValue,
sort : this.sort,
pay_type : this.payType,
channel : this.channel,
page : this.page
}).then(res => {
if(res.orders.page.current === 1){
this.orders = []
}
this.visitor = res.visitor
this.orders = this.orders.concat(res.orders.data)
this.page = res.orders.page.current
this.pageStatus = res.orders.page.has_more ? 'more': 'noMore'
}).catch(err => {
uni.showToast({
title: err,
icon : 'none'
})
})
}
},
onReachBottom() {
if(this.pageStatus == 'more'){
this.pageStatus = 'loading'
this.page += 1
this.getLists()
}
}
}
</script>
<style lang="scss">
// 筛选层
.popup-content{
padding: $padding * 2;
.title{
font-weight: bold;
font-size: $title-size;
color: $text-color;
margin-top: $margin;
}
.popup-choose-flex{
padding: $padding /2 0;
margin: 0 -($margin - 20rpx);
display: flex;
flex-wrap: wrap;
.item{
width: calc(33.33% - #{$margin - 10});
font-size: $title-size-sm;
text-align: center;
background: $border-color-lg;
line-height: 68rpx;
margin: $margin - 20;
color: $text-gray;
border:solid 1rpx $border-color-lg;
box-sizing: border-box;
&.show{
border:solid 1rpx $text-price;
color: $text-price;
}
}
}
.popup-btns{
padding-top: $padding*2;
display: flex;
justify-content: space-between;
margin: 0 -$margin/2;
.item{
margin: $margin/2;
color: $text-price;
background: rgba($color: $text-price, $alpha: .1);
width: calc(50% - #{$margin});
height: 80rpx;
line-height: 80rpx;
text-align: center;
&:last-child{
background-color: $text-price;
color: white;
}
}
}
}
// 空提示
.list-null{
width: 100vw;
height: 40vh;
background: white;
text-align: center;
@extend .vertical;
.sub-title{
color: $text-gray;
font-size: $title-size-m;
}
.icon{
width: 288rpx;
}
}
// content
.content{
padding-top: 80rpx;
}
// tabs
.tabs{
position: fixed;
z-index: 99;
top: 0;
left: 0;
width: 100%;
display: flex;
background: white;
justify-content: space-around;
line-height: 80rpx;
font-size: $title-size-m;
color: $text-gray;
.item.show{
color: $text-price;
font-weight: bold;
}
}
// 统计信息
.statistics{
margin-top: $margin;
background-color: white;
border-bottom: solid 1rpx $border-color;
padding: $padding;
.statistics-flex{
display: flex;
justify-content: space-between;
.statistics-date{
font-size: $title-size + 4;
font-weight: bold;
line-height: 60rpx;
.arrowdown{
margin-left: $margin/2;
}
}
.statistics-lay{
font-size: $title-size-sm;;
color: gray;
line-height: 50rpx;
&.show{
color: $text-price;
}
.arrowdown{
margin-left: $margin/2;
}
}
}
.statistics-text{
font-size: $title-size-sm;
color: gray;
line-height: 50rpx;
text{
margin-left: $margin;
&:first-child{
margin: 0;
}
}
}
}
// 客户列表
.lists{
padding: $padding/2 0;
background: white;
.item{
padding: ($padding - 10) $padding ($padding - 10) ($padding*2 + 68);
position: relative;
min-height: 68rpx;
&::after{
position: absolute;
left: $padding*2 + 68;
top: 0;
right: 0;
content: ' ';
border-bottom: solid 1rpx $border-color;
}
&:first-child::after{
display: none;
}
.cover{
position: absolute;
left: $padding;
top: $padding - 10;
width: 68rpx;
height: 68rpx;
border-radius: 50%;
background-color: #eee;
}
.title{
padding-right: 200rpx;
position: relative;
line-height: 58rpx;
font-size: $title-size-lg;
.type{
position: absolute;
right: 0;
top: 0;
width: 180rpx;
text-align: right;
color: $text-price;
}
}
.sub-title{
line-height: 40rpx;
font-size: $title-size-sm;
color: $text-gray;
}
.sub-tabs{
padding-top: $padding/2;
font-size: $title-size-sm;
text{
margin-right: $margin - 10;
background: $border-color-lg;
color: $text-gray;
padding: 0 ($padding/2);
}
}
}
}
</style>