zhangjing/douhuo-h5
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[抖火客户端]

Browse Source
This commit is contained in:
张慢慢
2023-05-15 13:18:38 +08:00
commit d61dde8bd8
818 changed files with 142329 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

591
pages/synthesis/entrustOrder.vue Normal file
View File

@@ -0,0 +1,591 @@
<template>
<view class="content">
<view class="orderFixed">
<scroll-view class="orderTab" scroll-x="true">
<view class="orderTab-item" :class="{active : yearStatus == 0}" @click="stateClick('0')">待支付</view>
<view class="orderTab-item" :class="{active : yearStatus == 1}" @click="stateClick('1')">待审核</view>
<view class="orderTab-item" :class="{active : yearStatus == 2}" @click="stateClick('2')">待签约</view>
<view class="orderTab-item" :class="{active : yearStatus == 3}" @click="stateClick('3')">已签约</view>
<view class="orderTab-item" :class="{active : yearStatus == 4}" @click="stateClick('4')">已完成</view>
<view class="orderTab-item" :class="{active : yearStatus == 5}" @click="stateClick('5')">已驳回</view>
</scroll-view>
<view class="orderState">
<view class="orderState-item" :class="{active : refundStatus == 0}" @click="refundClick('0')">
<text>未退款</text>
</view>
<view class="orderState-item" :class="{active : refundStatus == 1}" @click="refundClick('1')">
<text>已退款</text>
</view>
</view>
</view>
<view class="list" v-if="yearArr.length > 0">
<view class="listItem" v-for="(item, index) in yearArr" :key="index">
<view class="listItem-no">
订单号：{{item.order_no}}
</view>
<view class="listItem-cont">
<view class="listItem-cont-label">
<view class="listItem-cont-name">
订单状态
</view>
<view class="listItem-cont-text listItem-cont-status">
{{item.status.text}}
</view>
</view>
<view class="listItem-cont-label">
<view class="listItem-cont-name">
案件类型
</view>
<view class="listItem-cont-text">
{{item.entrust.title}}
</view>
</view>
<view class="listItem-cont-label">
<view class="listItem-cont-name">
订单金额
</view>
<view class="listItem-cont-text listItem-cont-price">
￥{{item.price}}
</view>
</view>
<view class="listItem-cont-label" v-if="item.need_pay_diff_prices != 0">
<view class="listItem-cont-name">
补差价金额
</view>
<view class="listItem-cont-text listItem-cont-diff" @click="diffClick(item)">
￥{{item.need_pay_diff_prices}}
<view class="listItem-cont-btn">去支付</view>
</view>
</view>
</view>
<view class="listItem-labor">
<view class="listItem-labor-time">
{{item.created_at}}
</view>
<view class="listItem-labor-btn">
<view v-if="item.can.pay_status == 1" @click="expressSheet(item.entrust_order_id, item.order_type, item.can, item.price)" class="listItem-labor-go">
去支付
</view>
<view v-else-if="item.can.pay_status == 2" class="listItem-labor-go active">
审核中
</view>
<view v-else-if="item.can.pay_status == 3" @click="$Router.push({name: 'VoucherOpen', params: {payId: item.offline_pays.offline_pay_id, orderId: item.entrust_order_id, orderType: item.order_type, type: 'edit'}})" class="listItem-labor-go">
审核驳回
</view>
<view v-if="item.can.sign" @click="returnGo(item.entrust_order_id, item.order_type, item.can, item.price)" class="listItem-labor-go yellow">
去签约
</view>
<view v-if="item.can.diff_price" @click="returnGo(item.entrust_order_id, item.order_type, item.can, item.price)" class="listItem-labor-go">
去缴费
</view>
</view>
</view>
</view>
</view>
<view class="pack-center pages-hint" v-else>
<image src="/static/imgs/Noevaluate.png"></image>
<view>暂无订单</view>
</view>
<!-- 支付弹出 -->
<view class="namePop" :class="{active: payStatus}"></view>
<view class="nameCont" :class="{active: payStatus}">
<view class="nameCont-white">
<view class="nameCont-top">
<view class="nameCont-title">缴费金额</view>
<view class="nameCont-input">
￥<input type="numeric" v-model="price" placeholder="输入缴费金额" />
</view>
</view>
<view class="nameCont-btn">
<view class="nameCont-btn-go" @click="returnGo">取消</view>
<view class="nameCont-btn-go" @click="issueForm">确定</view>
</view>
</view>
</view>
<!-- 打款凭证弹出 -->
<view class="voucherBack" :class="{active : voucherState}"></view>
<view class="voucherPop" :class="{active : voucherState}">
<view class="tipsWhite">
<image class="voucherPop-img" src="https://cdn.douhuofalv.com/images/2023/04/17/f4a3c45fe9aa7db143a362fc5b13b31d.png" mode="widthFix"></image>
<view class="voucherPop-title">
<view class="voucherPop-name">支付提示</view>
<view class="voucherPop-text">抱歉，此订单不支持线上支付，请上传打款凭证</view>
<view class="voucherPop-btn">
<view class="voucherPop-go" @click="voucherState = false">
暂不支付
</view>
<view class="voucherPop-go voucherPop-up" @click="clickOpen">
上传凭证
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import { entrustOrder, entrustPay } from '@/apis/interfaces/synthesis'
export default {
data() {
return {
yearStatus : 0, // 0 未付款 1 2
refundStatus : 0, // 0 退款 0 1
yearArr : [], // 委托单列表
orderType : '', // 委托单列表-类型
orderId : '', // 委托单列表-id
orderCan : '', // 委托单列表-操作
price : '', // 缴费金额
payStatus : false, // 缴费弹出
voucherState : false, // 上传凭证弹出
page : {}, // 分页信息
lodingStats : false, // 加载状态
}
},
created() {
this.yearStatus = this.$Route.query.yearStatus || 0
},
onShow() {
// 获取-委托单-列表
this.yearServe();
},
methods: {
// 委托单-列表
yearServe(page){
entrustOrder({
status : this.yearStatus,
refund_status : this.refundStatus,
page : page || 1
}).then(res => {
let esArr = res.data
let list = this.yearArr,
newData = []
if(page == 1 || page == undefined) list = []
newData = list.concat(esArr)
this.yearArr = newData
this.page = res.page
this.lodingStats = false
uni.stopPullDownRefresh()
}).catch(err => {
uni.showToast({
title: err.message,
icon : 'none'
})
})
},
// 状态选择
stateClick(state) {
this.yearStatus = state
// 获取-委托单列表
this.yearServe();
},
// 退款状态选择
refundClick(state) {
this.refundStatus = state
// 获取-委托单列表
this.yearServe();
},
// 手动支付弹出
returnGo(id, type, can) {
this.payStatus = !this.payStatus
this.orderId = id
this.orderType = type
this.orderCan = can
},
// 手动支付提交
issueForm() {
entrustPay({
order_type : this.orderType,
order_id : this.orderId,
price : this.price
}).then(res => {
this.payStatus = false
// 选择支付方式
this.expressSheet(res.synthesis_diff_price_id, res.order_type, res.can)
}).catch(err => {
this.payStatus = false
uni.showToast({
title: err.message,
icon : 'none'
})
})
},
// 选择支付方式
expressSheet(id, type, can, price) {
this.orderId = id
this.orderType = type
uni.showActionSheet({
itemList: ['线上支付', '线下支付'],
success: sheetRes => {
if(sheetRes.tapIndex == 0) {
if(can.online) {
this.$Router.push({name: 'FeePay', params: {id: id, orderType: type, price: price, payForm: 'entrust'}})
return
}
this.voucherState = true
} else if (sheetRes.tapIndex == 1) {
this.$Router.push({name: 'VoucherOpen', params: {orderId: id, orderType: type}})
}
this.price = ''
},
fail: sheetFail => {}
})
},
// 上传凭证
clickOpen() {
this.voucherState = false
this.$Router.push({name: 'VoucherOpen', params: {orderId: this.orderId, orderType: this.orderType}})
},
// 后台-补差价
diffClick(e) {
this.$Router.push({name: 'DiffList', params: {orderId: e.entrust_order_id, orderType:e.order_type, payForm: 'entrust'}})
},
// 页面相关事件处理函数--监听用户下拉动作
onPullDownRefresh() {
// 获取-委托单-列表
this.yearServe();
},
// 上拉加载
onReachBottom(){
this.lodingStats = true
let pageNumber = this.page.current
if(this.page.has_more){
pageNumber++
// 获取-委托单-列表
this.yearServe(pageNumber);
}
}
}
}
</script>
<style lang="scss" scoped>
.content {
background-color: #f7f9fa;
overflow-y: scroll;
height: 100%;
position: absolute;
width: 100%;
}
.orderFixed {
position: fixed;
top: 44px;
left: 0;
width: 100%;
z-index: 9;
.orderTab {
height: 90rpx;
line-height: 90rpx;
background-color: white;
white-space: nowrap;
.orderTab-item {
display: inline-block;
position: relative;
padding: 0 40rpx;
color: #000000;
&::after {
position: absolute;
content: '';
left: calc(50% - 25rpx);
bottom: 0;
width: 50rpx;
height: 8rpx;
background-color: #da2b56;
display: none;
border-radius: 90rpx;
}
&.active {
font-weight: 600;
}
&.active::after {
display: block;
}
}
}
.orderState {
display: flex;
padding: 30rpx;
box-sizing: border-box;
background-color: #f7f9fa;
.orderState-item {
background-color: white;
line-height: 54rpx;
padding: 0 25rpx;
border-radius: 54rpx;
font-size: 28rpx;
margin-right: 30rpx;
&.active {
background-color: #da2b56;
color: #ffffff;
}
}
}
}
.list {
margin-top: 44px;
padding: 130rpx 30rpx 0;
box-sizing: border-box;
.listItem {
background-color: #ffffff;
border-radius: 10rpx;
margin-bottom: 30rpx;
.listItem-no {
line-height: 90rpx;
padding: 0 30rpx;
box-sizing: border-box;
border-bottom: 2rpx solid #eeeeee;
}
.listItem-cont {
padding: 15rpx 30rpx;
box-sizing: border-box;
.listItem-cont-label {
display: flex;
line-height: 60rpx;
color: #666666;
font-size: 28rpx;
padding: 10rpx 0;
.listItem-cont-name {
flex: 1;
}
.listItem-cont-text {
&.listItem-cont-status {
color: #da2b56;
}
&.listItem-cont-price {
font-weight: 600;
}
&.listItem-cont-diff {
font-weight: 600;
display: flex;
.listItem-cont-btn {
display: inline-block;
font-size: 26rpx;
color: #f49441;
border: 2rpx solid #f49441;
margin-left: 20rpx;
padding: 0 10rpx;
height: 42rpx;
line-height: 42rpx;
border-radius: 5rpx;
margin-top: 8rpx;
font-weight: normal;
}
}
}
}
}
.listItem-labor {
border-top: 2rpx solid #eeeeee;
line-height: 50rpx;
padding: 25rpx 30rpx;
box-sizing: border-box;
font-size: 26rpx;
display: flex;
.listItem-labor-time {
flex: 1;
color: #999999;
}
.listItem-labor-go {
display: inline-block;
border: 2rpx solid #da2b56;
color: #da2b56;
border-radius: 80rpx;
padding: 0 20rpx;
margin-left: 20rpx;
&.active {
border-color: #999999;
color: #666666;
}
&.yellow {
border-color: #ec7647;
color: #ec7647;
}
}
}
}
}
/* 支付弹出 */
.namePop {
position: fixed;
background-color: rgba(0, 0, 0, .5);
left: 0;
top: 0;
height: 100vh;
width: 100vw;
z-index: 100000;
display: none;
&.active {
display: block;
}
}
.nameCont {
-webkit-box-orient: vertical;
-webkit-box-pack: center;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 100000;
padding: 0 15%;
box-sizing: border-box;
display: none;
&.active {
display: -webkit-box;
}
.nameCont-white {
background-color: #ffffff;
border-radius: 15rpx;
overflow: hidden;
.nameCont-top {
padding: 30rpx;
box-sizing: border-box;
.nameCont-title {
font-size: 34rpx;
margin-bottom: 30rpx;
}
.nameCont-input {
background-color: #f3f3f3;
height: 90rpx;
line-height: 90rpx;
border-radius: 10rpx;
padding: 0 25rpx;
box-sizing: border-box;
display: flex;
input {
height: 90rpx;
line-height: 90rpx;
padding-left: 20rpx;
box-sizing: border-box;
width: 90%;
}
}
}
.nameCont-btn {
line-height: 100rpx;
background-color: #f3f3f3;
display: flex;
margin-top: 30rpx;
border-top: 2rpx solid #dfdfdf;
.nameCont-btn-go {
text-align: center;
flex: 2;
&:last-child {
position: relative;
color: #da2b56;
}
&:last-child::after {
position: absolute;
content: '';
left: 0;
top: 0;
width: 2rpx;
height: 100%;
background-color: #dfdfdf;
}
}
}
}
}
// 打款凭证弹出
.voucherBack {
position: fixed;
width: 100vw;
height: 100vh;
left: 0;
top: 0;
z-index: 99;
background-color: rgba(0, 0, 0, .6);
display: none;
&.active {
display: block;
}
}
.voucherPop {
-webkit-box-orient: vertical;
-webkit-box-pack: center;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 100;
padding: 0 10%;
box-sizing: border-box;
display: none;
&.active {
display: -webkit-box;
}
.tipsWhite {
background-color: #ffffff;
border-radius: 20rpx;
position: relative;
.voucherPop-img {
position: absolute !important;
top: -80rpx;
right: calc(50% - 100rpx);
width: 200rpx;
}
.voucherPop-title {
box-sizing: border-box;
padding: 50rpx 70rpx;
margin-top: 100rpx;
text-align: center;
.voucherPop-name {
font-weight: 600;
font-size: 38rpx;
}
.voucherPop-text {
padding: 30rpx 0 35rpx;
line-height: 44rpx;
}
.voucherPop-btn {
display: flex;
.voucherPop-go {
flex: 2;
text-align: center;
border: 2rpx solid #da2b56;
color: #da2b56;
margin: 0 15rpx;
line-height: 74rpx;
border-radius: 10rpx;
background-color: #ffffff;
&.voucherPop-up {
background-color: #da2b56;
color: #ffffff;
}
}
}
}
}
}
</style>