514 lines
12 KiB
Vue
514 lines
12 KiB
Vue
<template>
|
||
<view class="container" :style="appThemeStyle">
|
||
<view class="reject" v-if="form.apply_status == 10">
|
||
<u-alert-tips type="error" title="申请已提交:" description="请耐心等待工作人员的审核"></u-alert-tips>
|
||
</view>
|
||
<view class="reject" v-else-if="form.apply_status == 30">
|
||
<u-alert-tips type="error" title="您的申请已被驳回:" :description="form.reject_reason"></u-alert-tips>
|
||
</view>
|
||
<u-form :model="form" ref="uForm" label-width="140rpx">
|
||
<!-- 标题 -->
|
||
<view class="page-title">身份证信息</view>
|
||
<view class="form-wrapper">
|
||
<u-form-item label="正面" prop="img1">
|
||
<image :src="orderSourceData[0]" v-if="orderSourceData[0]" mode="aspectFill" style="width: 300rpx;height: 200rpx" @click="chooseImage(1)"></image>
|
||
<image src="../../static/not-dealer.png" v-else mode="aspectFill" style="width: 300rpx;height: 200rpx" @click="chooseImage(1)"></image>
|
||
</u-form-item>
|
||
<u-form-item label="反面" prop="img2">
|
||
<image :src="orderSourceData[1]" v-if="orderSourceData[1]" mode="aspectFill" style="width: 300rpx;height: 200rpx" @click="chooseImage(2)"></image>
|
||
<image src="../../static/not-dealer.png" v-else mode="aspectFill" style="width: 300rpx;height: 200rpx" @click="chooseImage(2)"></image>
|
||
</u-form-item>
|
||
</view>
|
||
<!-- 标题 -->
|
||
<view class="page-title">其他</view>
|
||
<!-- 表单组件 -->
|
||
<view class="form-wrapper">
|
||
<u-form-item label="人车合照" prop="img3">
|
||
<image :src="orderSourceData[2]" v-if="orderSourceData[2]" mode="aspectFill" style="width: 300rpx;height: 200rpx" @click="chooseImage(3)"></image>
|
||
<image src="../../static/not-dealer.png" v-else mode="aspectFill" style="width: 300rpx;height: 200rpx" @click="chooseImage(3)"></image>
|
||
</u-form-item>
|
||
<u-form-item label="车子照片" prop="img4">
|
||
<image :src="orderSourceData[3]" v-if="orderSourceData[3]" mode="aspectFill" style="width: 300rpx;height: 200rpx" @click="chooseImage(4)"></image>
|
||
<image src="../../static/not-dealer.png" v-else mode="aspectFill" style="width: 300rpx;height: 200rpx" @click="chooseImage(4)"></image>
|
||
</u-form-item>
|
||
<u-form-item label="安装照片" prop="img5">
|
||
<image :src="orderSourceData[4]" v-if="orderSourceData[4]" mode="aspectFill" style="width: 300rpx;height: 200rpx" @click="chooseImage(5)"></image>
|
||
<image src="../../static/not-dealer.png" v-else mode="aspectFill" style="width: 300rpx;height: 200rpx" @click="chooseImage(5)"></image>
|
||
</u-form-item>
|
||
</view>
|
||
|
||
<view class="form-wrapper">
|
||
<u-input type="number" v-model="receiptPhone" placeholder="请输入收货人手机号" />
|
||
<view class="captcha-item">
|
||
<u-input type="text" placeholder="请输入验证码" v-model="captcha" placeholder-class="captcha_input" />
|
||
<u-button class="yanzhengma" @click="getCaptcha">{{time}} {{text}}</u-button>
|
||
</view>
|
||
|
||
<u-input type="number" v-model="emergentUser" placeholder="请输入紧急联系人电话" />
|
||
<u-input type="text" v-model="officeAddress" placeholder="请输入单位地址" />
|
||
<u-input type="text" v-model="homeAddress" placeholder="请输入家庭地址" />
|
||
</view>
|
||
</u-form>
|
||
<view class="btn">
|
||
<u-button type="primary" shape="circle" @click="handleSubmit()">
|
||
{{ submitText }}
|
||
</u-button>
|
||
</view>
|
||
<!-- <view class="btn">
|
||
<u-button shape="circle" @click="resetting">
|
||
重置
|
||
</u-button>
|
||
</view> -->
|
||
<view class="btn"></view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
uploadFile
|
||
} from '@/api/upload'
|
||
import {
|
||
http
|
||
} from '@/websoft/api/index.js'
|
||
import {
|
||
pageOrder,
|
||
removeOrder,
|
||
receiptOrder,
|
||
getOrder
|
||
} from '@/websoft/api/order.js'
|
||
import { sendSmsCaptcha } from '@/websoft/api/captcha.js'
|
||
import { fileUrl } from '@/config.js'
|
||
import { isMobile } from '@/utils/verify'
|
||
|
||
|
||
// 表单验证规则
|
||
const rules = {
|
||
receiptPhone: [{
|
||
required: true,
|
||
message: '请输入手机号',
|
||
trigger: ['blur', 'change']
|
||
}, {
|
||
// 自定义验证函数
|
||
validator: (rule, value, callback) => {
|
||
// 返回true表示校验通过，返回false表示不通过
|
||
return isMobile(value)
|
||
},
|
||
message: '手机号码不正确',
|
||
// 触发器可以同时用blur和change
|
||
trigger: ['blur'],
|
||
}],
|
||
captcha: [{
|
||
required: true,
|
||
message: '请输入验证码',
|
||
trigger: ['blur', 'change']
|
||
}],
|
||
emergentUser: [{
|
||
required: true,
|
||
message: '请输入紧急联系人',
|
||
trigger: ['blur', 'change']
|
||
}],
|
||
officeAddress: [{
|
||
required: true,
|
||
message: '请输入单位地址',
|
||
trigger: ['blur', 'change']
|
||
}],
|
||
homeAddress: [{
|
||
required: true,
|
||
message: '请输入家庭地址',
|
||
trigger: ['blur', 'change']
|
||
}],
|
||
}
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
form: {},
|
||
order: {},
|
||
orderSourceData: [],
|
||
// 验证码（主要代码，直接复制使用即可）
|
||
time: '',
|
||
text: '获取验证码',
|
||
receiptPhone: '',
|
||
captcha: '',
|
||
emergentUser: '',
|
||
officeAddress: '',
|
||
homeAddress: '',
|
||
// 按钮禁用
|
||
// disabled: false,
|
||
submitText: '证件已上传并确认收货',
|
||
}
|
||
},
|
||
|
||
// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
|
||
onReady() {
|
||
this.$refs.uForm.setRules(this.rules)
|
||
},
|
||
/**
|
||
* 生命周期函数--监听页面加载
|
||
*/
|
||
onLoad(options) {
|
||
const app = this
|
||
app.orderId = options.orderId
|
||
},
|
||
onShow() {
|
||
this.getData()
|
||
},
|
||
|
||
methods: {
|
||
// 加载订单
|
||
getData() {
|
||
const app = this
|
||
const { orderId } = this
|
||
getOrder(orderId).then(res => {
|
||
app.order = res.data
|
||
if(res.data.orderSourceData.length > 0){
|
||
app.orderSourceData = JSON.parse(res.data.orderSourceData)
|
||
}
|
||
})
|
||
},
|
||
//获取验证码（主要代码，直接复制使用即可）
|
||
getCaptcha() {
|
||
if(this.disabled){
|
||
uni.showToast({
|
||
title: '请耐心等待',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
var that = this;
|
||
|
||
if (!that.receiptPhone) {
|
||
uni.showToast({
|
||
title: '请输入手机号',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
sendSmsCaptcha({
|
||
phone: that.receiptPhone,
|
||
type: 'RECEIPT'
|
||
}).then(function (result) {
|
||
if(result){
|
||
if(result.code == 0) {
|
||
that.$success("发送短信验证码成功")
|
||
that.disabled = true
|
||
that.setInterValFunc()
|
||
} else {
|
||
that.$toast(result.message)
|
||
}
|
||
}
|
||
}).catch(err => {
|
||
console.log('err: ',err);
|
||
that.$toast(err.message)
|
||
})
|
||
},
|
||
|
||
setInterValFunc() {
|
||
this.time = 60;
|
||
this.text = '秒';
|
||
this.setTime = setInterval(() => {
|
||
if (this.time - 1 == 0) {
|
||
this.time = '';
|
||
this.text = '重新获取';
|
||
this.code = '';
|
||
this.disabled = false;
|
||
clearInterval(this.setTime);
|
||
} else {
|
||
this.disabled = true;
|
||
this.time--;
|
||
}
|
||
}, 1000);
|
||
},
|
||
|
||
// 重置
|
||
/* resetting(){
|
||
const app = this
|
||
const { orderId } = app
|
||
receipt({
|
||
orderId: orderId,
|
||
orderSourceData: '',
|
||
}).then(result => {
|
||
app.$success("重置成功")
|
||
app.orderSourceData = []
|
||
receiptPhone = ''
|
||
captcha = ''
|
||
emergentUser = ''
|
||
officeAddress = ''
|
||
homeAddress = ''
|
||
time = ''
|
||
text = '获取验证码'
|
||
app.getData()
|
||
})
|
||
}, */
|
||
// 表单提交
|
||
handleSubmit() {
|
||
// if(orderSourceData.length < 5) {
|
||
// return
|
||
// }
|
||
const that = this
|
||
const app = this
|
||
const { orderId,orderSourceData,captcha,receiptPhone,emergentUser,officeAddress, homeAddress } = app
|
||
|
||
|
||
receiptOrder({
|
||
orderId: orderId,
|
||
orderSourceData: JSON.stringify(orderSourceData),
|
||
captcha: captcha,
|
||
receiptPhone: receiptPhone,
|
||
emergentUser: emergentUser,
|
||
officeAddress: officeAddress,
|
||
homeAddress: homeAddress
|
||
}).then(result => {
|
||
if(result.code == 0) {
|
||
that.$success("确认收货成功！")
|
||
// uni.navigateBack()
|
||
setTimeout(()=>{
|
||
that.$navTo('pages/order/index',{}, 'redirectTo')
|
||
}, 1000)
|
||
} else {
|
||
that.$toast(result.message)
|
||
}
|
||
}).catch(err => {
|
||
that.$toast(err.message)
|
||
})
|
||
},
|
||
|
||
// 上传图片
|
||
chooseImage(id) {
|
||
const app = this
|
||
const { orderId } = this
|
||
const type = 'photo' + id
|
||
// 选择图片
|
||
uni.chooseImage({
|
||
count: 1,
|
||
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
|
||
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
|
||
success(chooseImageRes) {
|
||
const tempFilePaths = chooseImageRes.tempFilePaths;
|
||
|
||
uploadFile({
|
||
filePath: tempFilePaths[0],
|
||
fileType: 'image',
|
||
name: 'file'
|
||
}).then(res => {
|
||
console.log('res', res)
|
||
// app.orderSourceData.push(res.data.url)
|
||
if(app.orderSourceData[id-1]){
|
||
app.orderSourceData.splice(id-1, 1, res.data.url)
|
||
} else {
|
||
app.orderSourceData.push(res.data.url)
|
||
}
|
||
console.log('app.orderSourceData', app.orderSourceData)
|
||
})
|
||
|
||
}
|
||
});
|
||
},
|
||
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
page {
|
||
background: #f7f8fa;
|
||
}
|
||
</style>
|
||
<style lang="scss" scoped>
|
||
.page-title {
|
||
width: 94%;
|
||
margin: 0 auto;
|
||
padding-top: 40rpx;
|
||
font-size: 28rpx;
|
||
color: rgba(69, 90, 100, 0.6);
|
||
}
|
||
|
||
.form-wrapper {
|
||
margin: 20rpx auto 20rpx auto;
|
||
padding: 0 40rpx;
|
||
width: 94%;
|
||
box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
|
||
border-radius: 16rpx;
|
||
background: #fff;
|
||
}
|
||
|
||
/* 底部操作栏 */
|
||
|
||
.footer {
|
||
margin-top: 80rpx;
|
||
|
||
.btn-wrapper {
|
||
height: 100%;
|
||
// display: flex;
|
||
// align-items: center;
|
||
padding: 0 20rpx;
|
||
}
|
||
|
||
.btn-item {
|
||
flex: 1;
|
||
font-size: 28rpx;
|
||
height: 86rpx;
|
||
color: #fff;
|
||
border-radius: 50rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.btn-item-wechat {
|
||
background: #0ba90b;
|
||
margin-bottom: 26rpx;
|
||
}
|
||
|
||
.btn-item-main {
|
||
background: linear-gradient(to right, $main-bg, $main-bg2);
|
||
|
||
// 禁用按钮
|
||
/* &.disabled {
|
||
opacity: 0.6;
|
||
} */
|
||
}
|
||
|
||
}
|
||
|
||
// 上传凭证
|
||
.row-voucher {
|
||
padding: 24rpx 20rpx;
|
||
|
||
.image-list {
|
||
padding: 0 20rpx;
|
||
margin-top: 20rpx;
|
||
margin-bottom: -20rpx;
|
||
|
||
&:after {
|
||
clear: both;
|
||
content: " ";
|
||
display: table;
|
||
}
|
||
|
||
.image {
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.image-picker,
|
||
.image-preview {
|
||
width: 184rpx;
|
||
height: 184rpx;
|
||
margin-right: 30rpx;
|
||
margin-bottom: 30rpx;
|
||
float: left;
|
||
|
||
&:nth-child(3n+0) {
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
|
||
.image-picker {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border: 1rpx dashed #ccc;
|
||
color: #ccc;
|
||
|
||
.choose-icon {
|
||
font-size: 48rpx;
|
||
margin-bottom: 6rpx;
|
||
}
|
||
|
||
.choose-text {
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
.image-preview {
|
||
position: relative;
|
||
|
||
.image-delete {
|
||
position: absolute;
|
||
top: -15rpx;
|
||
right: -15rpx;
|
||
height: 42rpx;
|
||
width: 42rpx;
|
||
background: rgba(0, 0, 0, 0.64);
|
||
border-radius: 50%;
|
||
color: #fff;
|
||
font-weight: bolder;
|
||
font-size: 22rpx;
|
||
z-index: 10;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.form-license {
|
||
padding: 20rpx;
|
||
}
|
||
|
||
.pops-content {
|
||
padding: 20rpx;
|
||
}
|
||
|
||
.sfz,
|
||
.sfz1,
|
||
.sfz2,
|
||
.yyzz {
|
||
width: 140rpx;
|
||
padding-top: 20rpx;
|
||
padding-right: 10rpx;
|
||
}
|
||
|
||
.btn {
|
||
width: 700rpx;
|
||
margin: 20rpx auto;
|
||
height: 100rpx;
|
||
}
|
||
|
||
.reject {
|
||
width: 700rpx;
|
||
margin: 20rpx auto;
|
||
}
|
||
|
||
.captcha_input {
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #CACACA;
|
||
}
|
||
|
||
.yanzhengma {
|
||
position: absolute;
|
||
right: 0;
|
||
top: -8rpx;
|
||
bottom: 0;
|
||
width: 140rpx;
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
text-align: center;
|
||
background: #00BD87;
|
||
border-radius: 30rpx;
|
||
font-size: 22rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 500;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.captcha-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 10rpx;
|
||
border-bottom: 3rpx solid #DDDDDD;
|
||
margin-bottom: 25rpx;
|
||
position: relative;
|
||
}
|
||
|
||
|
||
</style>
|