|
|
<template>
|
|
|
<view class="container">
|
|
|
<view class="type-box display-flex" v-if="!success">
|
|
|
<view
|
|
|
:class="'type-item ' + (actived == index ? 'type-active' : '')"
|
|
|
:data-item="item"
|
|
|
:data-index="index"
|
|
|
@tap="handleUpdatType"
|
|
|
v-for="(item, index) in troubleList"
|
|
|
:key="index"
|
|
|
>
|
|
|
{{ item }}
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="submit" v-if="!success" hover-class="none" :hover-stop-propagation="false">
|
|
|
<textarea class="bgf textarea br8 f14" :value="textVal" @input="getVal" maxlength="150" placeholder="我们想听到您的心声..." placeholder-class="f14 cccc"></textarea>
|
|
|
<!-- <view class="" style="margin-top: 16px;">
|
|
|
<image src="https://matripe-cms.oss-cn-beijing.aliyuncs.com/dailibaoming/my_uploadphotos.svg"
|
|
|
mode="widthFix"
|
|
|
style="width: 72px;height: 72px;"
|
|
|
bind:tap="handleUpdateImage"
|
|
|
/>
|
|
|
</view>
|
|
|
<view style="margin-top: 8px;font-size: 12px;color: #999999;">
|
|
|
上传照片截图，最多传4张（选填）
|
|
|
</view> -->
|
|
|
<view class="weui-cell__bd1 mt20">
|
|
|
<view class="weui-uploader__bd">
|
|
|
<view class="weui-uploader__files" id="uploaderFiles">
|
|
|
<block v-for="(item, index) in files" :key="index">
|
|
|
<view class="weui-uploader__file pr" @tap="previewImage" :id="item">
|
|
|
<image
|
|
|
src="http://matripe.oss-cn-beijing.aliyuncs.com/nezha/del.svg"
|
|
|
:data-id="item.id"
|
|
|
:data-url="item.url"
|
|
|
@click.stop="delImgs"
|
|
|
class="delImg"
|
|
|
style="width: 20px; height: 20px"
|
|
|
></image>
|
|
|
<image @click.stop="showImgs" :mark:url="item.url" class="weui-uploader__img" :src="item.url" mode="aspectFill" />
|
|
|
</view>
|
|
|
</block>
|
|
|
</view>
|
|
|
<view class="weui-uploader__input-box" v-if="files.length < 4" @tap="chooseMedia">
|
|
|
<image src="https://matripe-cms.oss-cn-beijing.aliyuncs.com/dailibaoming/my_uploadphotos.svg" mode="widthFix" style="width: 72px; height: 72px" />
|
|
|
<!-- <view class="weui-uploader__input" bindtap="chooseMedia"></view> -->
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="clb"></view>
|
|
|
<view style="margin-top: 8px; font-size: 12px; color: #999999">上传照片截图，最多传4张（选填）</view>
|
|
|
<button class="normalBtn loginOut f16" hover-class="thover" @tap="submit" style="margin-top: 90px" :loading="loading">提交</button>
|
|
|
</view>
|
|
|
<view class="success" v-else hover-class="none" :hover-stop-propagation="false">
|
|
|
<view class="tc" style="padding-top: 100px">
|
|
|
<i class="iconfont icon-tijiaochenggong lh1" style="color: #07c160; font-size: 70px"></i>
|
|
|
<view class="successText mt20 f22 fw500 lh1">已提交</view>
|
|
|
<view class="f14 c9 mt16" hover-class="none" :hover-stop-propagation="false">感谢您的宝贵意见，我们会第一时间处理哈~</view>
|
|
|
<button class="normalBtn loginOut f16" hover-class="thover" @tap="goback" style="margin-top: 50px" :loading="loading">返回</button>
|
|
|
<!-- <view class="tac mt16 f14" style="color:#576B95" bindtap="goList" hover-class="thover" hover-stop-propagation="false">查看记录</view> -->
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
// pages/opinion/index.js
|
|
|
const app = getApp();
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
files: [],
|
|
|
newAddImg: [],
|
|
|
textVal: '',
|
|
|
loading: false,
|
|
|
subLoad: false,
|
|
|
success: false,
|
|
|
troubleList: ['投诉', '建议', '故障', '其他'],
|
|
|
actived: 0,
|
|
|
count: 4,
|
|
|
urls: ''
|
|
|
};
|
|
|
}
|
|
|
/**
|
|
|
* 生命周期函数--监听页面加载
|
|
|
*/,
|
|
|
onLoad(options) {},
|
|
|
/**
|
|
|
* 生命周期函数--监听页面初次渲染完成
|
|
|
*/
|
|
|
onReady() {},
|
|
|
/**
|
|
|
* 生命周期函数--监听页面显示
|
|
|
*/
|
|
|
onShow() {},
|
|
|
/**
|
|
|
* 生命周期函数--监听页面隐藏
|
|
|
*/
|
|
|
onHide() {},
|
|
|
/**
|
|
|
* 生命周期函数--监听页面卸载
|
|
|
*/
|
|
|
onUnload() {},
|
|
|
/**
|
|
|
* 页面相关事件处理函数--监听用户下拉动作
|
|
|
*/
|
|
|
onPullDownRefresh() {},
|
|
|
/**
|
|
|
* 页面上拉触底事件的处理函数
|
|
|
*/
|
|
|
onReachBottom() {},
|
|
|
/**
|
|
|
* 用户点击右上角分享
|
|
|
*/
|
|
|
onShareAppMessage() {},
|
|
|
methods: {
|
|
|
chooseMedia() {
|
|
|
var that = this;
|
|
|
console.log(that.count);
|
|
|
uni.chooseMedia({
|
|
|
count: that.count,
|
|
|
mediaType: ['image'],
|
|
|
sizeType: ['original', 'compressed'],
|
|
|
sourceType: ['album', 'camera'],
|
|
|
success(res) {
|
|
|
// tempFilePath可以作为 img 标签的 src 属性显示图片
|
|
|
uni.showLoading({
|
|
|
title: '上传中...'
|
|
|
});
|
|
|
console.log(res);
|
|
|
const tempFilePaths = res.tempFiles;
|
|
|
tempFilePaths.forEach((item, index) => {
|
|
|
uni.uploadFile({
|
|
|
url: app.globalData.ip + '/imgs/uploadImage',
|
|
|
method: 'post',
|
|
|
// data:currData,
|
|
|
// name: "uploadFile",
|
|
|
filePath: tempFilePaths[index].tempFilePath,
|
|
|
name: 'uploadFile',
|
|
|
header: app.globalData.headers,
|
|
|
success: function (res) {
|
|
|
console.log(that.files);
|
|
|
console.log(JSON.parse(res.data).data);
|
|
|
that.files.push({
|
|
|
url: JSON.parse(res.data).data,
|
|
|
id: -999
|
|
|
});
|
|
|
that.newAddImg.push(JSON.parse(res.data).data);
|
|
|
that.setData({
|
|
|
files: that.files,
|
|
|
newAddImg: that.newAddImg,
|
|
|
count: 4 - that.files.length
|
|
|
});
|
|
|
// currData.data = JSON.parse(res.data);
|
|
|
|
|
|
that.pushImg();
|
|
|
// console.log(that.data.files);
|
|
|
|
|
|
// that.updateImgs(currData.type,currData.fkId,currData.data.data);
|
|
|
},
|
|
|
fail: function (res) {
|
|
|
console.log(res);
|
|
|
}
|
|
|
});
|
|
|
uni.hideLoading();
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
|
|
|
delImgs(e) {
|
|
|
var that = this;
|
|
|
var url = e.currentTarget.dataset.url;
|
|
|
var id = e.currentTarget.dataset.id;
|
|
|
console.log(that.files);
|
|
|
uni.showModal({
|
|
|
title: '提示',
|
|
|
content: '确定要删除该图片？',
|
|
|
confirmColor: '#00BEBE',
|
|
|
success(res) {
|
|
|
if (res.confirm) {
|
|
|
that.files.forEach((item, index) => {
|
|
|
if (item.url == url) {
|
|
|
that.files.splice(index, 1);
|
|
|
that.newAddImg.splice(index, 1);
|
|
|
}
|
|
|
});
|
|
|
that.pushImg();
|
|
|
that.setData({
|
|
|
files: that.files,
|
|
|
newAddImg: that.newAddImg,
|
|
|
count: 4 - that.files.length
|
|
|
});
|
|
|
} else if (res.cancel) {
|
|
|
console.log('用户点击取消');
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
|
|
|
pushImg() {
|
|
|
var that = this;
|
|
|
console.log(that.files);
|
|
|
that.urls = [];
|
|
|
// that.data.files.forEach(item=>{
|
|
|
// that.data.urls.push(item.url)
|
|
|
// })
|
|
|
|
|
|
let curr = [];
|
|
|
that.files.forEach((item) => {
|
|
|
curr.push({
|
|
|
url: item.url,
|
|
|
id: item.id
|
|
|
});
|
|
|
});
|
|
|
that.setData({
|
|
|
urls: curr
|
|
|
});
|
|
|
},
|
|
|
|
|
|
showImgs(e) {
|
|
|
var that = this;
|
|
|
console.log(that.urls);
|
|
|
let curr = [];
|
|
|
that.urls.forEach((item) => {
|
|
|
curr.push(item.url);
|
|
|
});
|
|
|
uni.previewImage({
|
|
|
current: e.mark.url,
|
|
|
// 当前显示图片的 http 链接
|
|
|
urls: curr // 需要预览的图片 http 链接列表
|
|
|
});
|
|
|
},
|
|
|
|
|
|
handleUpdatType(e) {
|
|
|
console.log(e);
|
|
|
this.setData({
|
|
|
actived: e.target.dataset.index
|
|
|
});
|
|
|
},
|
|
|
|
|
|
handleUpdateImage() {
|
|
|
uni.chooseMedia({
|
|
|
count: 1,
|
|
|
mediaType: ['image'],
|
|
|
sourceType: ['album', 'camera'],
|
|
|
maxDuration: 30,
|
|
|
camera: 'back',
|
|
|
success(res) {
|
|
|
console.log('获取上传数据：', res);
|
|
|
// 调用上传接口
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 意见提交事件
|
|
|
*
|
|
|
*
|
|
|
*/
|
|
|
submit() {
|
|
|
const that = this;
|
|
|
if (that.subLoad) {
|
|
|
return;
|
|
|
}
|
|
|
that.subLoad = true;
|
|
|
console.log(that.newAddImg);
|
|
|
// return
|
|
|
// that.setData({
|
|
|
// success: true,
|
|
|
// loading: false,
|
|
|
// subLoad:false
|
|
|
// });
|
|
|
|
|
|
if (that.textVal.trim() != '') {
|
|
|
console.log(312313123);
|
|
|
that.setData({
|
|
|
loading: true
|
|
|
});
|
|
|
uni.request({
|
|
|
url: app.globalData.ip + '/daotian/feedback/add',
|
|
|
method: 'post',
|
|
|
header: app.globalData.headers,
|
|
|
data: {
|
|
|
content: that.textVal,
|
|
|
classify: Number(that.actived + 1),
|
|
|
imgs: that.newAddImg.toString(),
|
|
|
appId: app.globalData.appId
|
|
|
},
|
|
|
success: function (res) {
|
|
|
console.log(res);
|
|
|
if (res.data.status == 200) {
|
|
|
that.setData({
|
|
|
success: true
|
|
|
});
|
|
|
} else {
|
|
|
uni.showToast({
|
|
|
title: res.data.msg,
|
|
|
icon: 'none'
|
|
|
});
|
|
|
}
|
|
|
that.setData({
|
|
|
loading: false
|
|
|
});
|
|
|
that.subLoad = false;
|
|
|
},
|
|
|
fail: function (res) {
|
|
|
that.setData({
|
|
|
loading: false
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
} else {
|
|
|
uni.showToast({
|
|
|
title: '请输入内容再提交',
|
|
|
icon: 'none'
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
|
|
|
getVal(e) {
|
|
|
console.log(e);
|
|
|
this.setData({
|
|
|
textVal: e.detail.value
|
|
|
});
|
|
|
console.log(this.textVal);
|
|
|
},
|
|
|
|
|
|
goback() {
|
|
|
// wx.navigateBack({
|
|
|
// delta: 1,
|
|
|
// });
|
|
|
uni.switchTab({
|
|
|
url: '../../mine/index'
|
|
|
});
|
|
|
},
|
|
|
|
|
|
goList() {
|
|
|
uni.navigateTo({
|
|
|
url: '/pages/opinionList/index'
|
|
|
});
|
|
|
},
|
|
|
|
|
|
previewImage() {
|
|
|
console.log('占位：函数 previewImage 未声明');
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
<style>
|
|
|
@import './index.css';
|
|
|
</style>
|