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

440
pages/synthesis/yearOrder.vue Normal file
View File

@@ -0,0 +1,440 @@
<template>
<view class="content">
<view class="orderFixed">
<view class="orderTab">
<view class="orderTab-item" :class="{active : yearType == 1}" @click="tabClick('1')">
<text>个人年费单</text>
</view>
<view class="orderTab-item" :class="{active : yearType == 2}" @click="tabClick('2')">
<text>企业年费单</text>
</view>
</view>
<view class="orderState">
<view class="orderState-item" :class="{active : yearStatus == 0}" @click="stateClick('0')">
<text>待支付</text>
</view>
<view class="orderState-item" :class="{active : yearStatus == 1}" @click="stateClick('1')">
<text>待签约</text>
</view>
<view class="orderState-item" :class="{active : yearStatus == 2}" @click="stateClick('2')">
<text>已签约</text>
</view>
<view class="orderState-item" :class="{active : yearStatus == 3}" @click="stateClick('3')">
<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 listItem-cont-price">
￥{{item.price}}
</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.sign" @click="esignClick(item.order_id, item.order_type)" class="listItem-labor-go">
去签约
</view>
<view v-if="item.can.pay_status == 1" @click="expressSheet(item.service_order_id, item.order_type, item.can, item.price)" class="listItem-labor-go">
去支付
</view>
<view class="listItem-labor-go active" v-else-if="item.can.pay_status == 2">等待审核</view>
<view class="listItem-labor-go" v-else-if="item.can.pay_status == 3" @click="$Router.push({name: 'VoucherOpen', params: {payId: item.offline_pays.offline_pay_id, orderId: item.service_order_id, orderType: item.order_type, type: 'edit'}})">审核驳回</view>
<view @click="$Router.push({name: 'YearConfirm', params: {servicesId: item.service_order_id}})" class="listItem-labor-go yellow">
查看详情
</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="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 { yearOrder, esignUrl } from '@/apis/interfaces/synthesis'
export default {
data() {
return {
yearType : 1, // 1 个人 2 企业
yearStatus : 0, // 0 未付款 1 2
yearArr : [], // 年费咨询单列表
orderId : '', // 订单 ID
orderType : '', // 订单类型
page : {}, // 分页信息
lodingStats : false, // 加载状态
voucherState : false, // 上传凭证弹出
}
},
created() {
this.yearType = this.$Route.query.yearType || 1
},
onShow() {
// 获取-年费咨询单列表
this.yearServe();
},
methods: {
// 年费咨询单列表
yearServe(page){
yearOrder({
type : this.yearType,
status : this.yearStatus,
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'
})
})
},
// 类型选择
tabClick(type) {
this.yearType = type
// 获取-年费咨询单列表
this.yearServe();
},
// 状态选择
stateClick(state) {
this.yearStatus = state
// 获取-年费咨询单列表
this.yearServe();
},
// 选择支付方式
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: 'service'}})
return
}
this.voucherState = true
} else if (sheetRes.tapIndex == 1) {
this.$Router.push({name: 'VoucherOpen', params: {orderId: id, orderType: type}})
}
},
fail: sheetFail => {
uni.showToast({
title: '取消支付',
icon : 'none'
})
}
})
},
// 上传凭证
clickOpen() {
this.voucherState = false
this.$Router.push({name: 'VoucherOpen', params: {orderId: this.orderId, orderType: this.orderType}})
},
// 去签约
esignClick(id,type) {
esignUrl({
order_id : id,
order_type: type,
// redirect_url: "https://web.douhuofalv.com/synthesis/yearOrder",
redirect_url: "https://web.douhuotest.douhuofalv.com/synthesis/yearOrder",
channel : 'h5',
app_scheme : ''
}).then(res => {
window.location.href= res.sign_url
}).catch(err => {
uni.showToast({
title: err.message,
icon: "none"
})
})
},
// 页面相关事件处理函数--监听用户下拉动作
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;
display: flex;
.orderTab-item {
flex: 2;
text-align: center;
position: relative;
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;
.listItem-cont-name {
flex: 1;
}
.listItem-cont-text {
color: #000000;
&.listItem-cont-status {
color: #da2b56;
}
&.listItem-cont-price {
font-weight: 600;
}
}
}
}
.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: #dadada;
color: #868686;
}
&.yellow {
border-color: #ec7647;
color: #ec7647;
}
}
}
}
}
// 打款凭证弹出
.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>