282 lines
6.6 KiB
Vue
282 lines
6.6 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="scheme-item" v-for="(item, index) in list" :key="index">
|
|
<view class="no">{{item.order.order_no}}</view>
|
|
<view class="scheme-content">
|
|
<view class="scheme-flex" @click="item.is_show_type = !item.is_show_type">
|
|
<label>业务类型</label>
|
|
<view class="value nowrap">
|
|
<view class="value-type">
|
|
<text class="type-tag" v-for="(citem, cindex) in item.order.item_type" :key="cindex" v-if="citem.number > 0">{{citem.title}}x{{citem.number}}</text>
|
|
</view>
|
|
<uni-icons class="orders-content-icon" :type="item.is_show_type ? 'top': 'bottom'" size="14" color="gray"></uni-icons>
|
|
</view>
|
|
</view>
|
|
<view class="scheme-block" v-show="item.is_show_type">
|
|
<view class="item-flex" v-for="(citem, cindex) in item.order.items" :key="cindex">
|
|
<view class="item-flex-title">{{citem.institution.title}}({{citem.business_type.title}})</view>
|
|
<view class="item-flex-value">￥{{citem.price}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="scheme-flex">
|
|
<label>应确认方案</label>
|
|
<view class="value nowrap">{{item.confirm.all}}份</view>
|
|
</view>
|
|
<view class="scheme-flex">
|
|
<label>应确认方案</label>
|
|
<view class="value nowrap">{{item.confirm.confirm}}份</view>
|
|
</view>
|
|
<view class="scheme-flex">
|
|
<label>当前方案</label>
|
|
<view class="value nowrap">{{item.institution.title}}<text class="tag">{{item.business_type.title}}</text></view>
|
|
</view>
|
|
<view class="scheme-flex">
|
|
<label>下单日期</label>
|
|
<view class="value nowrap">{{item.order.created_at}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="orders-flex">
|
|
<view class="user" @click="makePhone(item.order.manager.username)">
|
|
<image class="user-cover" :src="item.order.manager.avatar" mode="aspectFill"></image>
|
|
<view class="user-name">{{item.order.manager.nickname}}</view>
|
|
</view>
|
|
<view class="btns">
|
|
<view class="btns-item" @click="$Router.push({name: 'ConfirmSchemeInfo', params: {schemeId: item.business_order_close_scheme_id}})">确认方案</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-loadmore v-if="pagesShow" :status="status" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getConfirmScheme } from '@/apis/interfaces/order.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
list : [],
|
|
page : {
|
|
current : 1,
|
|
has_more: false,
|
|
},
|
|
pagesShow : false,
|
|
status : ''
|
|
};
|
|
},
|
|
onShow() {
|
|
this.page = {
|
|
current : 1,
|
|
has_more: false,
|
|
}
|
|
this.getList()
|
|
},
|
|
methods: {
|
|
getList(){
|
|
uni.showLoading({
|
|
title: '加载中...',
|
|
mask : true
|
|
})
|
|
getConfirmScheme({
|
|
business_order_id: this.$Route.query.orderId,
|
|
page: this.page.current
|
|
}).then(res => {
|
|
let { data, page } = res;
|
|
data.map(val => {
|
|
val.is_show_type = false
|
|
})
|
|
let atList = page.current == 1 ? [] : this.list
|
|
this.list = atList.concat(data)
|
|
this.page = page
|
|
this.pagesShow = false
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon : 'none'
|
|
})
|
|
})
|
|
},
|
|
// 拨打电话
|
|
makePhone(phone){
|
|
uni.makePhoneCall({
|
|
phoneNumber: phone
|
|
})
|
|
}
|
|
},
|
|
onReachBottom() {
|
|
this.pagesShow = true;
|
|
if(this.page.has_more){
|
|
this.status = 'loading';
|
|
this.page.current++
|
|
this.getList()
|
|
return
|
|
}
|
|
this.status = 'nomore';
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.content{
|
|
padding: 30rpx 30rpx 0 30rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
.scheme-item{
|
|
background: white;
|
|
margin-bottom: 30rpx;
|
|
border-radius: 20rpx;
|
|
.no{
|
|
padding: 0 30rpx;
|
|
line-height: 90rpx;
|
|
border-bottom: solid 1rpx #f6f6f6;
|
|
font-size: 30rpx;
|
|
}
|
|
.scheme-content{
|
|
padding: 20rpx 30rpx;
|
|
.scheme-flex{
|
|
line-height: 70rpx;
|
|
font-size: 30rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
label{
|
|
color: gray;
|
|
width: 200rpx;
|
|
}
|
|
.value{
|
|
width: calc(100% - 200rpx);
|
|
text-align: right;
|
|
.value-type{
|
|
display: inline-block;
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.tag{
|
|
color: $main-color;
|
|
border:solid 1rpx $main-color;
|
|
font-size: 26rpx;
|
|
height: 40rpx;
|
|
line-height: 40rpx;
|
|
padding: 0 15rpx;
|
|
border-radius: 20rpx;
|
|
display: inline-block;
|
|
box-sizing: border-box;
|
|
margin-left: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.scheme-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;
|
|
}
|
|
.orders-tag{
|
|
display: inline-block;
|
|
background: $main-color;
|
|
font-size: 26rpx;
|
|
color: white;
|
|
border-radius: 10rpx;
|
|
padding: 0 10rpx;
|
|
height: 40rpx;
|
|
line-height: 40rpx;
|
|
margin-right: 10rpx;
|
|
&.order-tag-my{
|
|
background: $text-price;
|
|
}
|
|
}
|
|
.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;
|
|
}
|
|
.user{
|
|
padding-left: 90rpx;
|
|
position: relative;
|
|
min-height: 70rpx;
|
|
box-sizing: border-box;
|
|
width: calc(100% - 400rpx);
|
|
.user-cover{
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 70rpx;
|
|
height: 70rpx;
|
|
border-radius: 50%;
|
|
background: #ddd;
|
|
}
|
|
.user-name{
|
|
line-height: 70rpx;
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
.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;
|
|
&.btns-border{
|
|
line-height: 68rpx;
|
|
box-sizing: border-box;
|
|
border:solid 1rpx $main-color;
|
|
background: white;
|
|
color: $main-color;
|
|
margin-right: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|