346 lines
8.9 KiB
Vue
346 lines
8.9 KiB
Vue
<template>
|
|
<div>
|
|
<uni-section title="派车明细" type="line"></uni-section>
|
|
<div
|
|
class="list-cont"
|
|
v-for="(item, index) in tableList"
|
|
:key="index"
|
|
:style="{ background: index == 0 ? '#E3EDF5' : '#E4EAF5' }"
|
|
>
|
|
<div
|
|
class="list-item top-item"
|
|
:style="{ background: index == 0 ? '#71BFF0' : '#7D9FF3', color: '#fff', borderRadius: '8px 8px 0 0' }"
|
|
>
|
|
<span class="mr-15" style="font-size: 21px; font-weight: 800">{{ index + 1 }}</span>
|
|
<u-icon
|
|
class="mr-15"
|
|
:color="index == 0 ? '#71BFF0' : '#7D9FF3'"
|
|
:name="index == 0 ? '/static/images/car.png' : '/static/images/car2.png'"
|
|
size="21"
|
|
></u-icon>
|
|
<span class="mr-15">{{ item.carName }}</span>
|
|
<span>{{ item.carType }}</span>
|
|
</div>
|
|
<div style="padding-left: 20px">
|
|
<div class="list-item">
|
|
<span>{{ item.name }}</span>
|
|
</div>
|
|
<div style="padding-left: 20px">
|
|
<div class="list-item">
|
|
<span class="mr-15">{{ item.carNum }}</span>
|
|
<span class="mr-15">{{ item.carType }}</span>
|
|
<span>{{ item.carLoad }}</span>
|
|
</div>
|
|
<div class="list-item">
|
|
<span>{{ item.tool }}</span>
|
|
</div>
|
|
<div class="list-item">
|
|
<span>{{ item.distance }}</span>
|
|
</div>
|
|
<div class="list-item">
|
|
<span>{{ item.company }}</span>
|
|
</div>
|
|
<div class="list-item">
|
|
<span>{{ item.address }}</span>
|
|
</div>
|
|
<div class="list-item">
|
|
<span class="mr-15">附件数量</span>
|
|
<span class="mr-15" style="color: #3c9cff">{{ (item.fileList && item.fileList.length) || 0 }}</span>
|
|
<span style="color: #3c9cff" @click="handleFile(item)">查看附件>></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- btn -->
|
|
<div class="btn-wrap" v-if="opt.isAudit">
|
|
<div style="margin: 0 15px">
|
|
<u-button type="primary" @click="showModal = true">审 核</u-button>
|
|
</div>
|
|
</div>
|
|
|
|
<u-modal :show="showModal" title="派车审核" showCancelButton @cancel="showModal = false" @confirm="submit">
|
|
<view class="slot-content">
|
|
<div>
|
|
<div class="item-wrap">
|
|
<div class="item" :class="{ active: isPass }" @click="isPass = true">通过</div>
|
|
<div class="item" :class="{ active: !isPass }" @click="isPass = false">不通过</div>
|
|
</div>
|
|
<u-textarea
|
|
v-model="opinion"
|
|
placeholder="不通过必须填写审核不通过意见"
|
|
:rows="5"
|
|
maxlength="200"
|
|
count
|
|
></u-textarea>
|
|
</div>
|
|
</view>
|
|
</u-modal>
|
|
|
|
<!-- 附件弹出层 -->
|
|
<u-popup :show="showPop" mode="center" round="8" @close="showPop = false">
|
|
<div class="uPopup">
|
|
<div class="pop-title">{{ imgList && imgList.length > 0 ? imgList[current].title : '' }}</div>
|
|
<div class="content">
|
|
<u-swiper v-if="imgList.length > 0" :list="imgList" @change="e => (current = e.current)" :autoplay="false" @click="handleSwiper">
|
|
<view slot="indicator" class="indicator">
|
|
<view
|
|
class="indicator__dot"
|
|
v-for="(item, index) in imgList"
|
|
:key="index"
|
|
:class="[index === current && 'indicator__dot--active']"
|
|
></view>
|
|
</view>
|
|
</u-swiper>
|
|
</div>
|
|
<u-empty v-if="imgList.length == 0 || !imgList" mode="data"></u-empty>
|
|
</div>
|
|
</u-popup>
|
|
|
|
<!-- 空状态 -->
|
|
<u-empty v-if="tableList.length == 0" mode="data"></u-empty>
|
|
|
|
<!-- loading -->
|
|
<u-loading-page :loading="isLoading" icon-size="39" style="z-index: 99999"></u-loading-page>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
opt: {
|
|
type: Object,
|
|
default: () => {}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
showModal: false,
|
|
isPass: true,
|
|
opinion: '', // 审核意见
|
|
isLoading: false,
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
total: 0,
|
|
tableList: [
|
|
{
|
|
carName: '车辆名称',
|
|
carType: '车辆类型',
|
|
name: '姓名',
|
|
carNum: '车牌号',
|
|
carLoad: '车辆载重',
|
|
tool: '工具',
|
|
distance: '距离',
|
|
company: '公司',
|
|
address: '地址',
|
|
fileList: []
|
|
},
|
|
{
|
|
carName: '车辆名称',
|
|
carType: '车辆类型',
|
|
name: '姓名',
|
|
carNum: '车牌号',
|
|
carLoad: '车辆载重',
|
|
tool: '工具',
|
|
distance: '距离',
|
|
company: '公司',
|
|
address: '地址',
|
|
fileList: [
|
|
{
|
|
url: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
|
|
title: '昨夜星辰昨夜风，画楼西畔桂堂东'
|
|
},
|
|
{
|
|
url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
|
|
title: '身无彩凤双飞翼，心有灵犀一点通'
|
|
},
|
|
{
|
|
url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
|
|
title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
carName: '车辆名称',
|
|
carType: '车辆类型',
|
|
name: '姓名',
|
|
carNum: '车牌号',
|
|
carLoad: '车辆载重',
|
|
tool: '工具',
|
|
distance: '距离',
|
|
company: '公司',
|
|
address: '地址',
|
|
fileList: [
|
|
{
|
|
url: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
|
|
title: '昨夜星辰昨夜风，画楼西畔桂堂东'
|
|
},
|
|
{
|
|
url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
|
|
title: '身无彩凤双飞翼，心有灵犀一点通'
|
|
},
|
|
{
|
|
url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
|
|
title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
|
|
}
|
|
]
|
|
}
|
|
],
|
|
showPop: false,
|
|
imgList: [],
|
|
current: 0
|
|
}
|
|
},
|
|
mounted() {
|
|
console.log('🚀 ~ 计划审核 ~ this.opt', this.opt)
|
|
},
|
|
methods: {
|
|
// 查看附件
|
|
handleFile(item) {
|
|
this.imgList = item.fileList
|
|
this.showPop = true
|
|
this.current = 0
|
|
console.log('🚀 ~ 查看附件 ~ item', item)
|
|
},
|
|
handleSwiper() {
|
|
// 预览当前图片
|
|
uni.previewImage({
|
|
current: this.imgList[this.current].url,
|
|
urls: this.imgList.map((item) => item.url)
|
|
})
|
|
},
|
|
submit() {
|
|
console.log('🚀 ~ 提交 ~ submit ~ this.isPass', this.isPass)
|
|
console.log('🚀 ~ 提交 ~ submit ~ this.opinion', this.opinion)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page {
|
|
padding-bottom: 70px;
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
}
|
|
.list-cont {
|
|
color: #666;
|
|
margin: 15px;
|
|
margin-bottom: 15px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
|
|
|
|
.list-item {
|
|
padding: 5px 15px;
|
|
.title {
|
|
color: #999;
|
|
}
|
|
|
|
div {
|
|
line-height: 1.9;
|
|
}
|
|
span {
|
|
line-height: 1.5;
|
|
}
|
|
}
|
|
.top-item {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
.btn-wrap {
|
|
width: 100%;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
background-color: #fff;
|
|
padding: 15px 0 20px;
|
|
}
|
|
.mr-15 {
|
|
margin-right: 15px;
|
|
}
|
|
.slot-content {
|
|
width: 100%;
|
|
height: 100%;
|
|
.item-wrap {
|
|
margin-bottom: 15px;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.item {
|
|
width: 45%;
|
|
height: 30px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border: 1px solid #e8e8e8;
|
|
border-radius: 30px;
|
|
background-color: #f8f8f8;
|
|
color: #666;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
transition: color 0.3s ease, background-color 0.3s ease, border 0.3s ease;
|
|
|
|
&.active {
|
|
color: $u-primary;
|
|
background-color: #f8f8f8;
|
|
border: 1px solid $u-primary;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.uPopup {
|
|
width: 90vw;
|
|
/* min-height: 30vh; */
|
|
background-color: #fff;
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
box-sizing: border-box;
|
|
.pop-title {
|
|
font-size: 16px;
|
|
font-weight: 800;
|
|
margin-bottom: 10px;
|
|
text-align: center;
|
|
color: #777;
|
|
}
|
|
.content {
|
|
/* 居中*/
|
|
margin: 5vh auto;
|
|
}
|
|
}
|
|
.indicator {
|
|
@include flex(row);
|
|
justify-content: center;
|
|
|
|
&__dot {
|
|
height: 6px;
|
|
width: 6px;
|
|
border-radius: 100px;
|
|
background-color: rgba(255, 255, 255, 0.35);
|
|
margin: 0 5px;
|
|
transition: background-color 0.3s;
|
|
|
|
&--active {
|
|
background-color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.indicator-num {
|
|
padding: 2px 0;
|
|
background-color: rgba(0, 0, 0, 0.35);
|
|
border-radius: 100px;
|
|
width: 35px;
|
|
@include flex;
|
|
justify-content: center;
|
|
|
|
&__text {
|
|
color: #ffffff;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
</style>
|