新增账户管理和委托管理模块
This commit is contained in:
唐明明
319
pages/work/account.vue
Normal file
319
pages/work/account.vue
Normal file
@@ -0,0 +1,319 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<!-- tabs -->
|
||||
<u-sticky bgColor="#FFF" zIndex="9" >
|
||||
<u-tabs
|
||||
:current="tabsCurrent"
|
||||
:list="tabs"
|
||||
keyName="value"
|
||||
lineColor="#446EFE"
|
||||
:scrollable="tabs.length > 5"
|
||||
:activeStyle="{
|
||||
color: '#111',
|
||||
fontWeight: 'bold',
|
||||
fontSize: '32rpx'
|
||||
}"
|
||||
:inactiveStyle="{
|
||||
color: '#606266',
|
||||
fontSize: '30rpx'
|
||||
}"
|
||||
@click="onTabs"
|
||||
></u-tabs>
|
||||
</u-sticky>
|
||||
<!-- 订单列表 -->
|
||||
<view class="orders" v-if="orders.length > 0">
|
||||
<view class="orders-item" v-for="(item, index) in orders" :key="index">
|
||||
<view class="orders-flex">
|
||||
<view class="no nowrap" @click="copyNo(item.order_no)">
|
||||
{{item.order_no}}
|
||||
</view>
|
||||
<view class="state">{{item.status.text}}</view>
|
||||
</view>
|
||||
<view class="orders-content">
|
||||
<view class="orders-content-item">
|
||||
<label>业务名称</label>
|
||||
<view class="nowrap">{{item.item.title}}</view>
|
||||
</view>
|
||||
<view class="orders-content-item">
|
||||
<label>客户姓名</label>
|
||||
<view class="nowrap">{{item.name}}</view>
|
||||
</view>
|
||||
<view class="orders-content-item">
|
||||
<label>手机号码</label>
|
||||
<view class="nowrap">{{item.mobile}}</view>
|
||||
</view>
|
||||
<view class="orders-content-item">
|
||||
<label>创建时间</label>
|
||||
<view class="nowrap">{{item.created_at}}</view>
|
||||
</view>
|
||||
<view class="orders-content-item" v-if="item.paid_at != ''">
|
||||
<label>支付时间</label>
|
||||
<view class="nowrap">{{item.paid_at}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="orders-flex">
|
||||
<view class="price">￥{{item.item.price}}</view>
|
||||
<view class="btns">
|
||||
<view class="btns-item border" v-if="item.can.cancel" @click="onCancel(item)">取消订单</view>
|
||||
<view class="btns-item" v-if="item.can.pay" @click="onPay(item)">立即支付</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 分页 -->
|
||||
<u-loadmore v-if="pagesShow" :status="status" />
|
||||
</view>
|
||||
<!-- 订单是空的 -->
|
||||
<view class="order-null" v-else>
|
||||
<u-empty
|
||||
mode="order"
|
||||
icon="http://cdn.uviewui.com/uview/empty/order.png"
|
||||
text="暂无相关订单"
|
||||
>
|
||||
</u-empty>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { accountOrder, accountCancel } from '@/apis/interfaces/index.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tabs : [{ id: '', value: '全部' }],
|
||||
tabsCurrent : 0,
|
||||
tabsId : '',
|
||||
orders : [],
|
||||
pagesShow : false,
|
||||
page : {
|
||||
current : 1,
|
||||
has_more: false,
|
||||
},
|
||||
status : ''
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
this.getOrder()
|
||||
},
|
||||
methods: {
|
||||
// 筛选分类
|
||||
onTabs(e){
|
||||
let { id, index } = e;
|
||||
this.tabsCurrent = index
|
||||
this.tabsId = id
|
||||
this.page = { current: 1, has_more: false }
|
||||
this.getOrder()
|
||||
},
|
||||
// 获取订单列表
|
||||
getOrder(){
|
||||
let { tabsId, tabs, orders, page } = this
|
||||
accountOrder({
|
||||
manager: 1,
|
||||
status : tabsId,
|
||||
page : page.current
|
||||
}).then(res => {
|
||||
let { status, lists } = res;
|
||||
this.tabs = [{ id: '', value: '全部' }].concat(status)
|
||||
this.orders = lists.page.current == 1 ? lists.data : this.orders.concat(lists.data)
|
||||
this.page = lists.page
|
||||
this.pagesShow = false
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
},
|
||||
// 取消订单
|
||||
onCancel(e){
|
||||
let { order_id } = e;
|
||||
uni.showModal({
|
||||
title : "提示",
|
||||
content : "确认取消当前订单嘛？",
|
||||
cancelText : "取消",
|
||||
confirmColor: "#446EFE",
|
||||
success : modalRes => {
|
||||
if(modalRes.confirm){
|
||||
uni.showLoading({
|
||||
title: "加载中...",
|
||||
mask : true
|
||||
})
|
||||
accountCancel(order_id).then(res => {
|
||||
uni.showToast({
|
||||
title: '订单已取消',
|
||||
icon : 'none'
|
||||
})
|
||||
this.page = { current: 1, has_more: false }
|
||||
this.getOrder()
|
||||
}).catch(err => {
|
||||
console.log(err)
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 复制订单号码
|
||||
copyNo(no){
|
||||
uni.setClipboardData({
|
||||
data : no,
|
||||
success : res => {
|
||||
uni.showToast({
|
||||
title: '订单号已复制',
|
||||
icon : 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 去支付
|
||||
onPay(obj){
|
||||
let { order_id, order_type, paid_at } = obj
|
||||
if(paid_at == ''){
|
||||
this.$Router.push({
|
||||
name : 'Pay',
|
||||
params : {
|
||||
paytype : 'synthesize',
|
||||
orderId : order_id,
|
||||
orderType : order_type.replace(/\\/g, '-')
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
onReachBottom() {
|
||||
this.pagesShow = true;
|
||||
if(this.page.has_more){
|
||||
this.status = 'loading';
|
||||
this.page.current++
|
||||
this.getOrder()
|
||||
return
|
||||
}
|
||||
this.status = 'nomore';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
// 订单列表
|
||||
.orders{
|
||||
padding: 30rpx 0 10rpx;
|
||||
.orders-item{
|
||||
margin: 0 30rpx 20rpx;
|
||||
background-color: white;
|
||||
border-radius: $radius;
|
||||
}
|
||||
.orders-content{
|
||||
padding: 20rpx 30rpx;
|
||||
&-item{
|
||||
line-height: 70rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 30rpx;
|
||||
color: #111111;
|
||||
label{
|
||||
color: #999999;
|
||||
}
|
||||
.orders-content-btn{
|
||||
color: $main-color;
|
||||
}
|
||||
&.orders-content-bottom{
|
||||
padding-right: 40rpx;
|
||||
position: relative;
|
||||
.orders-content-icon{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-type{
|
||||
text{
|
||||
margin-right: 30rpx;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
&::after{
|
||||
position: absolute;
|
||||
content: "/";
|
||||
width: 30rpx;
|
||||
text-align: center;
|
||||
font-size: 30rpx;
|
||||
top: 0;
|
||||
right: -30rpx;
|
||||
}
|
||||
&:last-child{
|
||||
margin-right: 0;
|
||||
&::after{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-block{
|
||||
background: rgba(68, 110, 254, .03);
|
||||
padding: 20rpx;
|
||||
font-size: 28rpx;
|
||||
border-radius: 10rpx;
|
||||
margin: 10rpx 0;
|
||||
.item-flex{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
line-height: 50rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.orders-flex{
|
||||
border-bottom: solid 1rpx #F6F6F6;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20rpx $padding;
|
||||
&:last-child{
|
||||
border-top: solid 1rpx #F6F6F6;
|
||||
border-bottom: none;
|
||||
}
|
||||
.no{
|
||||
font-size: 30rpx;
|
||||
color: #111;
|
||||
line-height: 60rpx;
|
||||
width: calc(100% - 150rpx);
|
||||
}
|
||||
.state{
|
||||
color: $main-color;
|
||||
font-weight: bold;
|
||||
font-size: 30rpx;
|
||||
line-height: 60rpx;
|
||||
width: 150rpx;
|
||||
text-align: right;
|
||||
}
|
||||
.price{
|
||||
font-weight: bold;
|
||||
color: $main-color;
|
||||
}
|
||||
.btns{
|
||||
width: 400rpx;
|
||||
text-align: right;
|
||||
.btns-item{
|
||||
display: inline-block;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
background: $main-color;
|
||||
color: white;
|
||||
border-radius: 35rpx;
|
||||
padding: 0 30rpx;
|
||||
font-size: 30rpx;
|
||||
&.border{
|
||||
border: solid 1rpx $main-color;
|
||||
color: $main-color;
|
||||
background: white;
|
||||
height: 68rpx;
|
||||
line-height: 68rpx;
|
||||
&::after{ display: none;}
|
||||
}
|
||||
&:last-child{ margin-left: 30rpx; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user