<template>
|
<view class="content">
|
<uni-card :is-shadow="false" is-full>
|
<text class="uni-h6">故障上报后，售后人员会第一时间收到通知并解决故障。请填写真实描述及其他信息，方便相关后续方案。 ———— 中扬立库</text>
|
</uni-card>
|
<view class="uni-common-mt">
|
<form>
|
<view class="uni-list">
|
<!-- 所属项目 -->
|
<view class="uni-list-cell">
|
<view class="uni-list-cell-left">
|
<view class="uni-label redDot">所属项目</view>
|
</view>
|
<view class="uni-list-cell-right">
|
<picker :range="host" @change="hostChange" :value="hostIndex" mode="selector">
|
<view class="uni-input">{{host[hostIndex]}}</view>
|
</picker>
|
</view>
|
</view>
|
<!-- 故障类型 -->
|
<view class="uni-list-cell">
|
<view class="uni-list-cell-left">
|
<view class="uni-label redDot">故障类型</view>
|
</view>
|
<view class="uni-list-cell-right">
|
<picker :range="issueType" @change="issueTypeChange" :value="issueTypeIndex" mode="selector">
|
<view class="uni-input">{{issueType[issueTypeIndex]}}</view>
|
</picker>
|
</view>
|
</view>
|
<!-- 联系人 -->
|
<view class="uni-list-cell">
|
<view class="uni-list-cell-left">
|
<view class="uni-label">联系人</view>
|
</view>
|
<view class="uni-list-cell-right">
|
<input class="uni-input" v-model="discoverer" placeholder="请输入" />
|
</view>
|
</view>
|
<!-- 联系方式 -->
|
<view class="uni-list-cell">
|
<view class="uni-list-cell-left">
|
<view class="uni-label redDot">联系方式</view>
|
</view>
|
<view class="uni-list-cell-right">
|
<input class="uni-input" v-model="tel" placeholder="请输入" />
|
</view>
|
</view>
|
<!-- 发生日期 -->
|
<view class="uni-list-cell">
|
<view class="uni-list-cell-left">
|
<view class="uni-label redDot">发生日期</view>
|
</view>
|
<view class="uni-list-cell-right">
|
<picker mode="date" :value="startTime" @change="bindDateChange">
|
<view class="uni-input">{{startTime}}</view>
|
</picker>
|
</view>
|
</view>
|
</view>
|
<view class="uni-list" style="margin-top: 15rpx;">
|
<view class="uni-title uni-common-pl redDot" style="padding: 20rpx 30rpx 10rpx 30rpx;">问题概述</view>
|
<view class="uni-textarea">
|
<textarea placeholder="请输入具体描述..." v-model="title" style="text-indent:15rpx;"/>
|
</view>
|
</view>
|
<view class="uni-list" style="margin-top: 15rpx;">
|
<view class="uni-list-cell cell-pd">
|
<view class="uni-uploader">
|
<view class="uni-uploader-head">
|
<view class="uni-uploader-title">相关图片上传</view>
|
<view class="uni-uploader-info">{{imageList.length}}/9</view>
|
</view>
|
<view class="uni-uploader-body">
|
<view class="uni-uploader__files">
|
<block v-for="(image,index) in imageList" :key="index">
|
<view class="uni-uploader__file">
|
<image class="uni-uploader__img" :src="image" :data-src="image" @tap="previewImage"></image>
|
</view>
|
</block>
|
<view class="uni-uploader__input-box">
|
<view class="uni-uploader__input" @tap="chooseImage"></view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view style="margin-top: 15rpx;">
|
<template v-if="!videoSrc">
|
<view class="uni-hello-addfile" @tap="chooseVideo">+ 添加视频</view>
|
</template>
|
<template v-else>
|
<video :src="videoSrc" class="video"></video>
|
</template>
|
</view>
|
|
<view class="uni-padding-wrap uni-common-mt" style="margin-bottom: 30rpx;">
|
<button type="primary" @click="save">确认提交</button>
|
</view>
|
</form>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import permision from "@/common/permission.js"
|
import uniPopup from '@/components/uni-popup/uni-popup.vue'
|
var util = require('../../common/util.js');
|
|
var formatLocation = util.formatLocation;
|
var sourceType = [
|
['camera'],
|
['album'],
|
['camera', 'album']
|
]
|
var sizeType = [
|
['compressed'],
|
['original'],
|
['compressed', 'original']
|
]
|
function getParam(path, name) {
|
var reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)", "i");
|
if (reg.test(path))
|
return unescape(RegExp.$2.replace(/\+/g, " "));
|
return "";
|
}
|
function getDate(type) {
|
const date = new Date();
|
|
let year = date.getFullYear();
|
let month = date.getMonth() + 1;
|
let day = date.getDate();
|
|
if (type === 'start') {
|
year = year - 10;
|
} else if (type === 'end') {
|
year = year + 10;
|
}
|
month = month > 9 ? month : '0' + month;;
|
day = day > 9 ? day : '0' + day;
|
|
return `${year}-${month}-${day}`;
|
}
|
function isEmpty(obj){
|
return typeof obj == "undefined" || obj == null || obj === "";
|
}
|
export default {
|
components: {
|
uniPopup
|
},
|
data() {
|
return {
|
// 表单数据
|
title: null,
|
tel: null,
|
discoverer: null,
|
startTime: getDate({
|
format: true
|
}),
|
desc: null,
|
memo: null,
|
imageList: [],
|
imageFileList: [],
|
hostIndex: 0,
|
host: ["请选择项目"],
|
issueTypeIndex: 0,
|
issueType: ["请选择类型"],
|
sourceTypeIndex: 2,
|
sourceType: ['拍照', '相册', '拍照或相册'],
|
countIndex: 8,
|
count: [1, 2, 3, 4, 5, 6, 7, 8, 9],
|
hasLocation: false,
|
location: {},
|
locationAddress: '',
|
type: '',
|
videoSrc: ''
|
}
|
},
|
onLoad() {
|
this.initHost();
|
this.initIssueType();
|
},
|
methods: {
|
// 初始化项目列表
|
initHost: function() {
|
uni.request({
|
url: this.baseUrl + '/app/host/list/auth',
|
data: {
|
},
|
header: {
|
"token": uni.getStorageSync('token')
|
},
|
success: (result) => {
|
let res = result.data;
|
if (res.code == 200) {
|
for (let item of res.data) {
|
this.host.push(item.name);
|
}
|
} else if (res.code == 403) {
|
uni.showToast({title: res.msg, icon: "none",position: 'top'})
|
setTimeout(() => {
|
uni.reLaunch({
|
url: '../login/login'
|
});
|
}, 500);
|
} else {
|
uni.showToast({title: res.msg,icon: "none",position: 'top'})
|
}
|
}
|
});
|
},
|
// 初始化故障类型
|
initIssueType: function() {
|
uni.request({
|
url: this.baseUrl + '/app/issue/type/auth',
|
data: {
|
},
|
header: {
|
// "token": uni.getStorageSync('token')
|
},
|
success: (result) => {
|
let res = result.data;
|
if (res.code == 200) {
|
for (let item of res.data) {
|
this.issueType.push(item.name);
|
}
|
} else if (res.code == 403) {
|
uni.showToast({title: res.msg, icon: "none",position: 'top'})
|
setTimeout(() => {
|
uni.reLaunch({
|
url: '../login/login'
|
});
|
}, 500);
|
} else {
|
uni.showToast({title: res.msg,icon: "none",position: 'top'})
|
}
|
}
|
});
|
},
|
// 保存提交
|
save: function() {
|
let that = this;
|
if (that.hostIndex === 0) {
|
uni.showToast({title: "请选择所属项目",icon: "none",position: 'top'})
|
return;
|
}
|
let hostName = that.host[that.hostIndex];
|
if (that.issueTypeIndex === 0) {
|
uni.showToast({title: "请选择故障类型",icon: "none",position: 'top'})
|
return;
|
}
|
let issueTypeName = that.issueType[that.issueTypeIndex];
|
if (isEmpty(that.tel)) {
|
uni.showToast({title: "请输入联系方式",icon: "none",position: 'top'})
|
return;
|
}
|
if (isEmpty(that.title)) {
|
uni.showToast({title: "请输入问题概述",icon: "none",position: 'top'})
|
return;
|
}
|
uni.showLoading();
|
uni.request({
|
url: that.baseUrl + '/app/issue/save/auth',
|
data: {
|
hostName: hostName,
|
issueTypeName: issueTypeName,
|
discoverer: that.discoverer,
|
tel: that.tel,
|
startTime: that.startTime,
|
title: that.title,
|
imgArr: that.imageList,
|
memo: that.memo,
|
videoSrc: [that.videoSrc]
|
},
|
header: {
|
"token": uni.getStorageSync('token')
|
},
|
success: (result) => {
|
uni.hideLoading();
|
let res = result.data;
|
if (res.code == 200) {
|
uni.showToast({title: res.msg,position: 'top'})
|
that.hostIndex = 0;
|
that.issueTypeIndex = 0;
|
that.discoverer = null;
|
that.tel = null;
|
that.title = null;
|
that.memo = null;
|
that.imageList = [];
|
that.imageFileList = [];
|
that.startTime = getDate({
|
format: true
|
});
|
that.videoSrc = null;
|
} else if (res.code == 403) {
|
uni.showToast({title: res.msg, icon: "none", position: 'top'})
|
setTimeout(() => {
|
uni.reLaunch({
|
url: '../login/login'
|
});
|
}, 500);
|
} else {
|
uni.showToast({title: res.msg,icon: "none",position: 'top'})
|
}
|
}
|
});
|
},
|
chooseLocation: function () {
|
uni.chooseLocation({
|
success: (res) => {
|
this.hasLocation = true,
|
this.location = formatLocation(res.longitude, res.latitude),
|
this.locationAddress = res.address
|
}
|
})
|
},
|
issueTypeChange: function(e) {
|
this.issueTypeIndex = parseInt(e.detail.value);
|
},
|
hostChange: function(e) {
|
this.hostIndex = parseInt(e.detail.value);
|
},
|
sumbit: function(e){
|
uni.showToast({title: "ok",icon: "none",position: 'top'})
|
},
|
bindPickerChange: function(e) {
|
this.index = e.detail.value
|
},
|
bindDateChange: function(e) {
|
this.startTime = e.detail.value
|
},
|
chooseImage: async function() {
|
// #ifdef APP-PLUS
|
// TODO 选择相机或相册时 需要弹出actionsheet，目前无法获得是相机还是相册，在失败回调中处理
|
if (this.sourceTypeIndex !== 2) {
|
let status = await this.checkPermission();
|
if (status !== 1) {
|
return;
|
}
|
}
|
// #endif
|
|
if (this.imageList.length === 9) {
|
let isContinue = await this.isFullImg();
|
if (!isContinue) {
|
return;
|
}
|
}
|
uni.chooseImage({
|
sourceType: sourceType[this.sourceTypeIndex],
|
sizeType: sizeType[this.sizeTypeIndex],
|
count: this.imageList.length + this.count[this.countIndex] > 9 ? 9 - this.imageList.length : this.count[this.countIndex],
|
success: (res) => {
|
let that = this;
|
uni.showLoading();
|
for (var filePath of res.tempFilePaths) {
|
uni.uploadFile({
|
url : that.baseUrl + '/upload.action',
|
filePath: filePath,
|
name: 'file',
|
success: function (result) {
|
var result0 = JSON.parse(result.data);
|
if(result0.code === 200) {
|
that.imageList = that.imageList.concat(result0.data.url);
|
} else {
|
uni.showToast({title: result0.msg,icon: "none",position: 'top'})
|
}
|
}
|
});
|
}
|
uni.hideLoading();
|
uni.showToast({title: "照片上传成功，请耐心等待...",icon: "none",position: 'top'})
|
that.imageFileList = that.imageFileList.concat(res.tempFiles);
|
// this.imageList = this.imageList.concat(res.tempFilePaths);
|
},
|
fail: (err) => {
|
// #ifdef APP-PLUS
|
if (err['code'] && err.code !== 0 && this.sourceTypeIndex === 2) {
|
this.checkPermission(err.code);
|
}
|
// #endif
|
// #ifdef MP
|
if(err.errMsg.indexOf('cancel') !== '-1'){
|
return;
|
}
|
uni.getSetting({
|
success: (res) => {
|
let authStatus = false;
|
switch (this.sourceTypeIndex) {
|
case 0:
|
authStatus = res.authSetting['scope.camera'];
|
break;
|
case 1:
|
authStatus = res.authSetting['scope.album'];
|
break;
|
case 2:
|
authStatus = res.authSetting['scope.album'] && res.authSetting['scope.camera'];
|
break;
|
default:
|
break;
|
}
|
if (!authStatus) {
|
uni.showModal({
|
title: '授权失败',
|
content: 'Hello uni-app需要从您的相机或相册获取图片，请在设置界面打开相关权限',
|
success: (res) => {
|
if (res.confirm) {
|
uni.openSetting()
|
}
|
}
|
})
|
}
|
}
|
})
|
// #endif
|
}
|
})
|
},
|
isFullImg: function() {
|
return new Promise((res) => {
|
uni.showModal({
|
content: "已经有9张图片了,是否清空现有图片？",
|
success: (e) => {
|
if (e.confirm) {
|
this.imageList = [];
|
this.imageFileList = [];
|
res(true);
|
} else {
|
res(false)
|
}
|
},
|
fail: () => {
|
res(false)
|
}
|
})
|
})
|
},
|
previewImage: function(e) {
|
var current = e.target.dataset.src
|
uni.previewImage({
|
current: current,
|
urls: this.imageList
|
})
|
},
|
async checkPermission(code) {
|
let type = code ? code - 1 : this.sourceTypeIndex;
|
let status = permision.isIOS ? await permision.requestIOS(sourceType[type][0]) :
|
await permision.requestAndroid(type === 0 ? 'android.permission.CAMERA' :
|
'android.permission.READ_EXTERNAL_STORAGE');
|
|
if (status === null || status === 1) {
|
status = 1;
|
} else {
|
uni.showModal({
|
content: "没有开启权限",
|
confirmText: "设置",
|
success: function(res) {
|
if (res.confirm) {
|
permision.gotoAppSetting();
|
}
|
}
|
})
|
}
|
|
return status;
|
}
|
,
|
// 定位
|
togglePopup(type) {
|
this.type = type;
|
},
|
showConfirm() {
|
this.type = 'showpopup';
|
},
|
hideConfirm() {
|
this.type = '';
|
},
|
async getLocation() {
|
// #ifdef APP-PLUS
|
let status = await this.checkPermission();
|
if (status !== 1) {
|
return;
|
}
|
// #endif
|
// #ifdef MP-WEIXIN || MP-TOUTIAO || MP-QQ
|
let status = await this.getSetting();
|
if (status === 2) {
|
this.showConfirm();
|
return;
|
}
|
// #endif
|
|
this.doGetLocation();
|
},
|
doGetLocation() {
|
uni.getLocation({
|
success: (res) => {
|
this.hasLocation = true;
|
this.location = formatLocation(res.longitude, res.latitude);
|
},
|
fail: (err) => {
|
// #ifdef MP-BAIDU
|
if (err.errCode === 202 || err.errCode === 10003) { // 202模拟器 10003真机 user deny
|
this.showConfirm();
|
}
|
// #endif
|
// #ifndef MP-BAIDU
|
if (err.errMsg.indexOf("auth deny") >= 0) {
|
uni.showToast({
|
title: "访问位置被拒绝"
|
})
|
} else {
|
uni.showToast({
|
title: err.errMsg
|
})
|
}
|
// #endif
|
}
|
})
|
},
|
getSetting: function() {
|
return new Promise((resolve, reject) => {
|
uni.getSetting({
|
success: (res) => {
|
if (res.authSetting['scope.userLocation'] === undefined) {
|
resolve(0);
|
return;
|
}
|
if (res.authSetting['scope.userLocation']) {
|
resolve(1);
|
} else {
|
resolve(2);
|
}
|
}
|
});
|
});
|
},
|
openSetting: function() {
|
this.hideConfirm();
|
uni.openSetting({
|
success: (res) => {
|
if (res.authSetting && res.authSetting['scope.userLocation']) {
|
this.doGetLocation();
|
}
|
},
|
fail: (err) => {}
|
})
|
},
|
async checkPermission() {
|
let status = permision.isIOS ? await permision.requestIOS('location') :
|
await permision.requestAndroid('android.permission.ACCESS_FINE_LOCATION');
|
|
if (status === null || status === 1) {
|
status = 1;
|
} else if (status === 2) {
|
uni.showModal({
|
content: "系统定位已关闭",
|
confirmText: "确定",
|
showCancel: false,
|
success: function(res) {
|
}
|
})
|
} else if (status.code) {
|
uni.showModal({
|
content: status.message
|
})
|
} else {
|
uni.showModal({
|
content: "需要定位权限",
|
confirmText: "设置",
|
success: function(res) {
|
if (res.confirm) {
|
permision.gotoAppSetting();
|
}
|
}
|
})
|
}
|
|
return status;
|
},
|
clear: function() {
|
this.hasLocation = false;
|
},
|
chooseVideo: function() {
|
let that = this;
|
uni.chooseVideo({
|
camera: 'back',
|
sourceType: ['camera', 'album'],
|
success: (res) => {
|
uni.showLoading();
|
uni.uploadFile({
|
url : that.baseUrl + '/upload.action',
|
filePath: res.tempFilePath,
|
name: 'file',
|
success: function (result) {
|
uni.hideLoading();
|
var result0 = JSON.parse(result.data);
|
if(result0.code === 200) {
|
that.videoSrc = result0.data.url;
|
} else {
|
uni.showToast({title: result0.msg,icon: "none",position: 'top'})
|
}
|
}
|
});
|
uni.showToast({title: "视频上传成功，请耐心等待...",icon: "none",position: 'top'}) },
|
fail: (err) => {
|
uni.getSetting({
|
success: (res) => {
|
let authStatus = false;
|
switch (this.sourceTypeIndex) {
|
case 0:
|
authStatus = res.authSetting['scope.camera'];
|
break;
|
case 1:
|
authStatus = res.authSetting['scope.album'];
|
break;
|
case 2:
|
authStatus = res.authSetting['scope.album'] && res.authSetting['scope.camera'];
|
break;
|
default:
|
break;
|
}
|
if (!authStatus) {
|
uni.showModal({
|
title: '授权失败',
|
content: '需要从您的相机或相册获取视频，请在设置界面打开相关权限',
|
success: (res) => {
|
if (res.confirm) {
|
uni.openSetting()
|
}
|
}
|
})
|
}
|
}
|
})
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style>
|
@import '../../common/uni.css';
|
|
.uni-title {
|
color: rgb(102, 102, 102);
|
}
|
.uni-label {
|
color: rgb(102, 102, 102);
|
}
|
.uni-form-item .title {
|
padding: 20rpx 0;
|
}
|
.cell-pd {
|
padding: 22rpx 30rpx;
|
}
|
|
.list-pd {
|
margin-top: 50rpx;
|
}
|
.redDot:after {
|
content: ' *';
|
color: red;
|
}
|
.popup-view {
|
width: 500rpx;
|
}
|
|
.popup-title {
|
display: block;
|
font-size: 16px;
|
line-height: 3;
|
margin-bottom: 10px;
|
text-align: center;
|
}
|
|
.popup-buttons button {
|
margin-left: 4px;
|
margin-right: 4px;
|
}
|
|
.video {
|
width: 100%;
|
}
|
|
.camera-tips {
|
padding: 10rpx 30rpx;
|
}
|
</style>
|
