381 lines
9.2 KiB
Vue
381 lines
9.2 KiB
Vue
<template>
|
||
<view class="content">
|
||
<block v-if="modifyList.length > 0">
|
||
<view class="backTop">
|
||
<!-- <view class="backTop-search">
|
||
<image class="search-img" src="/static/icon/searchIcon.png" mode="aspectFill"></image>
|
||
<input class="search-input" confirm-type="search" placeholder-class= "phsy" placeholder="搜索" />
|
||
</view> -->
|
||
</view>
|
||
<view class="backBottom">
|
||
<view class="list" v-for="(item, index) in modifyList" :key="index">
|
||
<view class="item borderBottom">
|
||
<view class="item-name">
|
||
<!-- 订单号 -->
|
||
{{item.order.order_no}}
|
||
</view>
|
||
</view>
|
||
|
||
<!-- start 待判断 -->
|
||
<view class="item" v-if="item.order.service_count">
|
||
<view class="item-label">
|
||
业务类型
|
||
</view>
|
||
<view class="item-text" @click="typeState(index)">
|
||
<block v-for="(typeItem, index) in item.order.item_type">
|
||
<block v-if="typeItem.number > 0">
|
||
{{typeItem.title}}x{{typeItem.number}}
|
||
</block>
|
||
</block>
|
||
<image class="item-text-arrow" src="@/static/imgs/openArrow_grey.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
<view class="baleShow" v-if="item.typeShow">
|
||
<view class="baleColor">
|
||
<view class="baleShow-label" v-for="(businessItem, index) in item.order.items">
|
||
<view class="baleShow-name">
|
||
{{businessItem.institution.title}}（{{businessItem.business_type.title}}）
|
||
</view>
|
||
<view class="baleShow-number">
|
||
￥{{businessItem.price}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- end 待判断 -->
|
||
|
||
<view class="item">
|
||
<view class="item-label">
|
||
下单日期
|
||
</view>
|
||
<view class="item-text">
|
||
{{item.order.created_at}}
|
||
</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="item-label">
|
||
应确认方案
|
||
</view>
|
||
<view class="item-text">
|
||
{{item.confirm.un_confirm}}个
|
||
</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="item-label">
|
||
已确认方案
|
||
</view>
|
||
<view class="item-text">
|
||
{{item.confirm.confirm}}个
|
||
</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="item-label">
|
||
当前方案
|
||
</view>
|
||
<view class="item-text">
|
||
{{item.institution.title}}
|
||
<view class="item-text-tips">
|
||
{{item.business_type.title}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="btn">
|
||
<view class="btn-user" @click="callPhone(item.order.manager.username)">
|
||
<image class="btn-user-head" :src="item.order.manager.avatar ? item.order.manager.avatar : '/static/imgs/default_myHead.png'" mode="aspectFill"></image>
|
||
<view class="btn-user-cont">
|
||
<view class="btn-user-name">{{item.order.manager.nickname}}</view>
|
||
<view class="btn-user-tips">业务咨询</view>
|
||
</view>
|
||
</view>
|
||
<view class="btn-lable">
|
||
<view class="btn-lable-go" @click="$Router.push({name: 'OrderModifyInfo', params: {id: item.business_order_close_scheme_id}})">
|
||
请去确认
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="pagesLoding" v-if="lodingStats">
|
||
<block v-if="page.has_more">
|
||
<image class="pagesLodingIcon" src="/static/icons/refresh_loding.gif" mode="widthFix"></image>加载中...
|
||
</block>
|
||
<block v-else>
|
||
没有更多了~
|
||
</block>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
<view class="pack-center pages-hint" v-else>
|
||
<image src="/static/imgs/Noevaluate.png"></image>
|
||
<view>暂无订单</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { myModify } from '@/apis/interfaces/user'
|
||
export default {
|
||
data() {
|
||
return {
|
||
modifyList : [], // 列表
|
||
status : 1, // 列表状态
|
||
baleState : false, // 展开收起
|
||
page : {}, // 分页信息
|
||
lodingStats : false, // 加载状态
|
||
}
|
||
},
|
||
onShow() {
|
||
// 获取需要修改的订单
|
||
this.modifyInfo();
|
||
},
|
||
methods: {
|
||
// 需要修改的订单
|
||
modifyInfo(page) {
|
||
myModify({
|
||
status: this.status,
|
||
business_order_id: this.$Route.query.id,
|
||
page : page || 1
|
||
}).then(res => {
|
||
let esArr = res.data
|
||
esArr.forEach((item, index) => {
|
||
item.typeShow = false
|
||
})
|
||
let list = this.modifyList,
|
||
newData = []
|
||
if(page == 1 || page == undefined) list = []
|
||
newData = list.concat(esArr)
|
||
this.modifyList = newData
|
||
this.page = res.page
|
||
this.lodingStats = false
|
||
uni.stopPullDownRefresh()
|
||
}).catch( err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: "none"
|
||
})
|
||
})
|
||
},
|
||
|
||
// 拨打电话
|
||
callPhone(e) {
|
||
uni.makePhoneCall({
|
||
phoneNumber: e
|
||
})
|
||
},
|
||
|
||
// 列表展开
|
||
typeState(index) {
|
||
var listData = this.modifyList
|
||
var helpFlag = this.modifyList[index].typeShow
|
||
listData.forEach((item) => {
|
||
item.typeShow = false
|
||
})
|
||
listData[index].typeShow = !helpFlag
|
||
this.modifyList = listData
|
||
},
|
||
|
||
// 页面相关事件处理函数--监听用户下拉动作
|
||
onPullDownRefresh() {
|
||
// 获取需要修改的订单
|
||
this.modifyInfo();
|
||
},
|
||
|
||
// 上拉加载
|
||
onReachBottom(){
|
||
this.lodingStats = true
|
||
let pageNumber = this.page.current
|
||
if(this.page.has_more){
|
||
pageNumber++
|
||
// 获取需要修改的订单
|
||
this.modifyInfo(pageNumber);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.content{
|
||
background: #f4f4f4;
|
||
height: 100vh;
|
||
overflow-y: scroll;
|
||
}
|
||
|
||
.backTop {
|
||
height: 120rpx;
|
||
background-color: $mian-color;
|
||
padding: $padding * 2 $padding $padding;
|
||
border-radius: 0 0 $radius * 2 $radius * 2;
|
||
box-sizing: border-box;
|
||
.backTop-search {
|
||
background-color: #dd447b;
|
||
line-height: 90rpx;
|
||
height: 90rpx;
|
||
border-radius: $radius * 2;
|
||
padding: 10rpx $padding;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
.search-img {
|
||
width: 34rpx;
|
||
height: 34rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
.search-input {
|
||
display: inline-block;
|
||
height: 100%;
|
||
width: calc(100% - 34rpx);
|
||
color: #fff;
|
||
text-align: center;
|
||
.phsy {
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.backBottom {
|
||
margin-top: -80rpx;
|
||
padding: 0 $padding;
|
||
box-sizing: border-box;
|
||
border-bottom: transparent 40rpx solid;
|
||
.list {
|
||
border-radius: $radius-lg;
|
||
background-color: #ffffff;
|
||
margin-bottom: 30rpx;
|
||
.borderBottom {
|
||
border-bottom: 2rpx solid #f7f7f7;
|
||
}
|
||
.baleShow {
|
||
padding: 0 $padding;
|
||
box-sizing: border-box;
|
||
.baleColor {
|
||
background-color: #FFF3F7;
|
||
padding: 10rpx $padding;
|
||
box-sizing: border-box;
|
||
border-radius: $radius-m;
|
||
.baleShow-label {
|
||
display: flex;
|
||
font-size: $title-size-sm;
|
||
line-height: 54rpx;
|
||
color: #111111;
|
||
.baleShow-name {
|
||
flex: 1;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.item {
|
||
padding: $padding;
|
||
box-sizing: border-box;
|
||
padding-bottom: $padding;
|
||
display: flex;
|
||
font-size: $title-size-lg;
|
||
line-height: 44rpx;
|
||
.item-name {
|
||
font-size: $title-size-lg;
|
||
flex: 1;
|
||
}
|
||
.item-label {
|
||
flex: 1;
|
||
color: #999999;
|
||
}
|
||
.item-quantity {
|
||
background-color: #FFF5EA;
|
||
color: #FFA031;
|
||
font-size: $title-size-sm;
|
||
padding: 0 20rpx;
|
||
border-radius: $radius;
|
||
&.gery {
|
||
background-color: #f5f5f5;
|
||
color: #999999;
|
||
}
|
||
}
|
||
.item-text {
|
||
text-align: right;
|
||
display: flex;
|
||
.item-text-go {
|
||
font-size: $title-size-sm - 2;
|
||
border: 2rpx solid $mian-color;
|
||
color: $mian-color;
|
||
padding: 0 10rpx;
|
||
border-radius: $radius-m;
|
||
margin: 3rpx 10rpx 0 0;
|
||
height: 38rpx;
|
||
line-height: 38rpx;
|
||
}
|
||
text {
|
||
font-size: $title-size-m;
|
||
padding-left: 10rpx;
|
||
}
|
||
.item-text-tips {
|
||
border: 2rpx solid $mian-color;
|
||
color: $mian-color;
|
||
height: 32rpx;
|
||
line-height: 32rpx;
|
||
font-size: $title-size-sm - 2;
|
||
border-radius: $radius * 2;
|
||
padding: 0 15rpx;
|
||
margin: 6rpx 0 0 15rpx;
|
||
}
|
||
}
|
||
.item-text-arrow {
|
||
width: 22rpx;
|
||
margin-left: 10rpx;
|
||
margin-top: 10rpx;
|
||
}
|
||
}
|
||
.btn {
|
||
display: flex;
|
||
padding: $padding $padding - 10;
|
||
box-sizing: border-box;
|
||
border-top: 2rpx solid #f7f7f7;
|
||
.btn-user {
|
||
flex: 1;
|
||
line-height: 54rpx;
|
||
display: flex;
|
||
.btn-user-head {
|
||
width: 54rpx;
|
||
height: 54rpx;
|
||
border-radius: 50%;
|
||
}
|
||
.btn-user-cont {
|
||
display: flex;
|
||
font-size: $title-size-sm;
|
||
.btn-user-name {
|
||
padding: 0 $padding - 10;
|
||
line-height: 60rpx;
|
||
}
|
||
.btn-user-tips {
|
||
background-color: #FBE7EE;
|
||
color: $mian-color;
|
||
height: 44rpx;
|
||
line-height: 44rpx;
|
||
font-size: $title-size-sm - 2;
|
||
border-radius: $radius * 2;
|
||
padding: 0 15rpx;
|
||
margin-top: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
.btn-lable {
|
||
font-size: $title-size-sm;
|
||
display: flex;
|
||
.btn-lable-go {
|
||
height: 54rpx;
|
||
line-height: 54rpx;
|
||
text-align: center;
|
||
background-color: #FBAF3B;
|
||
border: 2rpx solid transparent;
|
||
color: #ffffff;
|
||
border-radius: $radius * 2;
|
||
width: 140rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.reveal-no {
|
||
padding: 40% 0;
|
||
}
|
||
</style> |