139 lines
4.1 KiB
Vue
139 lines
4.1 KiB
Vue
<template>
|
|
<view class="cu-modal" :class="show?'show':''">
|
|
<view class="cu-dialog">
|
|
<view class="cu-bar bg-white justify-end solid-bottom">
|
|
<view class="content">上传拨打电话记录截图</view>
|
|
<view class="action" data-modal="showArrangeFailTimeModal" @click="hideModal">
|
|
<text class="cuIcon-close text-red"></text>
|
|
</view>
|
|
</view>
|
|
<view class="bg-white padding text-left">
|
|
<view>
|
|
<view class="grid col-3 grid-square flex-sub">
|
|
<view class="bg-img" v-for="(item,index) in imgList" :key="index"
|
|
@tap="viewImage($event, imgList)" :data-url="item">
|
|
<image :src="item" mode="aspectFill"></image>
|
|
<view class="cu-tag bg-red" @tap.stop="delImg($event, imgList)" :data-index="index">
|
|
<text class='cuIcon-close'></text>
|
|
</view>
|
|
</view>
|
|
<view class="solids" @tap="chooseImage" v-if="imgList.length < 1">
|
|
<text class='cuIcon-cameraadd'></text>
|
|
</view>
|
|
</view>
|
|
<view class="text-center">（选填）</view>
|
|
</view>
|
|
<view class="padding-tb-sm solid-bottom">多次联系客户未接通时，可上传拨打截图确认无法排单，客诉时你无责，确认无法排单后将不计时效</view>
|
|
<view class="padding-top-sm">
|
|
<view class="flex justify-start">
|
|
<view class="margin-right">原因选择：</view>
|
|
<radio-group @change="changeReasonRadio">
|
|
<label class="radio margin-right-sm">
|
|
<radio style="transform:scale(0.7)" class="main-color" value="customer"
|
|
:checked="true" />
|
|
<text>客户原因</text>
|
|
</label>
|
|
<label class="radio">
|
|
<radio style="transform:scale(0.7)" class="main-color" value="master" />
|
|
<text>师傅原因</text>
|
|
</label>
|
|
</radio-group>
|
|
</view>
|
|
<view class="margin-top uni-textarea">
|
|
<textarea class="solid padding-sm" maxlength="-1" @input="inputSpecificReason"
|
|
placeholder="具体情况(选填)" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="cu-bar bg-white solid-top">
|
|
<view class="action margin-0 flex-sub text-main-color solid-left" data-modal="showArrangeFailTimeModal"
|
|
@click="submitFailReason">确认无法排单</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'timeArrangeFail',
|
|
props: {
|
|
show: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
data: {
|
|
type: Object,
|
|
default: {}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
imgList: [],
|
|
problemPerson: '',
|
|
specificReason: ''
|
|
}
|
|
},
|
|
methods: {
|
|
hideModal(e) {
|
|
uni.$emit(this.$globalFun.HIDE_MODAL, e);
|
|
},
|
|
chooseImage(e) {
|
|
uni.chooseImage({
|
|
count: 1, //默认9
|
|
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
|
sourceType: ['album'], //从相册选择
|
|
success: (res) => {
|
|
if (this.imgList.length != 0) {
|
|
this.imgList = this.imgList.concat(res.tempFilePaths)
|
|
} else {
|
|
this.imgList = res.tempFilePaths
|
|
}
|
|
}
|
|
});
|
|
},
|
|
viewImage(e, imgList) {
|
|
uni.previewImage({
|
|
urls: imgList,
|
|
current: e.currentTarget.dataset.url
|
|
});
|
|
},
|
|
delImg(e, imgList) {
|
|
uni.showModal({
|
|
title: '',
|
|
content: '确定要删除这张图片吗？',
|
|
cancelText: '取消',
|
|
confirmText: '确定',
|
|
success: res => {
|
|
if (res.confirm) {
|
|
imgList.splice(e.currentTarget.dataset.index, 1)
|
|
}
|
|
}
|
|
})
|
|
},
|
|
changeReasonRadio(e) {
|
|
this.problemPerson = e.detail.value;
|
|
},
|
|
inputSpecificReason(e) {
|
|
this.specificReason = e.detail.value;
|
|
},
|
|
submitFailReason(e) {
|
|
let reasonObj = {
|
|
imgList: this.imgList,
|
|
problemPerson: this.problemPerson,
|
|
specificReason: this.specificReason
|
|
}
|
|
uni.$emit(this.$globalFun.SUBMIT_FAIL_REASON, e, reasonObj)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.grid.col-3.grid-square>view {
|
|
padding-bottom: calc((100% - 40rpx)/3);
|
|
height: 0;
|
|
width: calc((100% - 40rpx)/3);
|
|
margin-left: calc(100%/2 - (100% - 40rpx)/3/2);
|
|
}
|
|
</style>
|