|
|
@@ -0,0 +1,205 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <uni-nav-bar id="nav-bar" status-bar="true" @clickLeft="onBack" :title="pageTitle" color="#000000" fixed="true"
|
|
|
+ :border="false">
|
|
|
+ <view slot="left">
|
|
|
+ <view class=" flex align-center margin-left">
|
|
|
+ <image class="p-left-arrow" src="../../../static/p-left-arrow.png"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </uni-nav-bar>
|
|
|
+ <form @submit="onUploadFeedback" class="padding flex flex-direction">
|
|
|
+
|
|
|
+ <textarea name="problemDescription" :maxlength='500' class="feedback-textarea" placeholder="请输入你要反馈的问题"
|
|
|
+ placeholder-class="feedback-placeholder"></textarea>
|
|
|
+ <view style="height: 20px;"></view>
|
|
|
+ <view class="feedback-upload-image">
|
|
|
+ <view class="cu-bar" style="color: #BEBEBE; font-size: 14px;">
|
|
|
+ <view class="action">
|
|
|
+ 请提供问题的截图或照片
|
|
|
+ </view>
|
|
|
+ <view class="action">
|
|
|
+ {{imgList.length}}/4
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view style="height: 1px; background-color: #dadada; margin: 0px 15px 15px;"></view>
|
|
|
+ <view class="cu-form-group" style="background-color: #F6F6F6;">
|
|
|
+ <view class="grid col-4 grid-square flex-sub">
|
|
|
+ <view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
|
|
|
+ <image :src="imgList[index]" mode="aspectFill"></image>
|
|
|
+ <view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
|
|
|
+ <text class='cuIcon-close'></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="solids" style="background-color: #EEEEEE; border-radius: 15rpx;" @tap="ChooseImage" v-if="imgList.length<4">
|
|
|
+ <text class='cuIcon-cameraadd'></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="cu-form-group margin-top radius" style="background-color: #F6F6F6;">
|
|
|
+ <view class="feedback-title">用户名</view>
|
|
|
+ <input name="userName" style=" text-align: right;" placeholder="请输入用户名" placeholder-class="feedback-placeholder"
|
|
|
+ :value="userName"></input>
|
|
|
+ </view>
|
|
|
+ <view class="cu-form-group margin-top radius" style="background-color: #F6F6F6;">
|
|
|
+ <view class="feedback-title">联系方式</view>
|
|
|
+ <input name="phoneNumber" type="number" style="text-align: right;" placeholder="请输入手机号" placeholder-class="feedback-placeholder"
|
|
|
+ :value="phoneNumber"></input>
|
|
|
+ </view>
|
|
|
+ <view class="flex flex-direction margin-top">
|
|
|
+ <button form-type="submit" class="cu-btn make-bg-bPurple margin-tb-sm lg text-white">提交</button>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <input v-show="false" name="versionName" :value="version"></input>
|
|
|
+ <input v-show="false" name="versionCode" :value="versionCode"></input>
|
|
|
+
|
|
|
+ </form>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import reqUtil from '@/util/util-js/requstUtil.js';
|
|
|
+ import config from '@/common/config.js';
|
|
|
+
|
|
|
+ import {
|
|
|
+ mapState
|
|
|
+ } from 'vuex';
|
|
|
+
|
|
|
+ export default {
|
|
|
+ computed: mapState(['userName', 'phoneNumber', 'version', 'versionCode']),
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ pageTitle: '意见反馈',
|
|
|
+ imgList: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onBack() {
|
|
|
+ uni.navigateBack({
|
|
|
+ delta: 1
|
|
|
+ })
|
|
|
+ },
|
|
|
+ ChooseImage() {
|
|
|
+ uni.chooseImage({
|
|
|
+ count: 4, //默认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) {
|
|
|
+ uni.previewImage({
|
|
|
+ urls: this.imgList,
|
|
|
+ current: e.currentTarget.dataset.url
|
|
|
+ });
|
|
|
+ },
|
|
|
+ DelImg(e) {
|
|
|
+ uni.showModal({
|
|
|
+ title: '删除照片',
|
|
|
+ content: '确定要删除这张照片吗？',
|
|
|
+ cancelText: '不是',
|
|
|
+ confirmColor: '#ff0004',
|
|
|
+ confirmText: '是',
|
|
|
+ success: res => {
|
|
|
+ if (res.confirm) {
|
|
|
+ this.imgList.splice(e.currentTarget.dataset.index, 1)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ onUploadFeedback(e) {
|
|
|
+ console.log(e.detail.value, this.imgList);
|
|
|
+ if(e.detail.value.problemDescription.length <= 10){
|
|
|
+ uni.showModal({
|
|
|
+ title:'提示',
|
|
|
+ content: "请填写不少于10个字的问题内容！",
|
|
|
+ showCancel: false
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if(this.imgList.length == 0){
|
|
|
+ uni.showModal({
|
|
|
+ title:'提示',
|
|
|
+ content: "至少选择一张反馈问题的截图照片！",
|
|
|
+ showCancel: false
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ uni.showLoading({
|
|
|
+ title: '上传中...',
|
|
|
+ mask: true
|
|
|
+ });
|
|
|
+
|
|
|
+ let files = this.imgList.map((value, index) => {
|
|
|
+ return {
|
|
|
+ name: 'images' + index,
|
|
|
+ uri: value
|
|
|
+ };
|
|
|
+ });
|
|
|
+ console.log("files:",files);
|
|
|
+ reqUtil.reqUploadFiles(config.URL.UPLOADFEEDBACK, e.detail.value, files)
|
|
|
+ .then(res => {
|
|
|
+ uni.hideLoading();
|
|
|
+ this.imgList = [];
|
|
|
+ console.log(res)
|
|
|
+ if(res.code ==0){
|
|
|
+ uni.showModal({
|
|
|
+ content: '成功',
|
|
|
+ showCancel: false
|
|
|
+ });
|
|
|
+ }else{
|
|
|
+ uni.showModal({
|
|
|
+ title:'上传失败',
|
|
|
+ content: res.msg,
|
|
|
+ showCancel: false
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }, e => {
|
|
|
+ console.log(e);
|
|
|
+ uni.hideLoading();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+ page {
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .feedback-textarea {
|
|
|
+ /* border: solid 1px red; */
|
|
|
+ background-color: #F6F6F6;
|
|
|
+ width: 100%;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ padding: 50rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .feedback-placeholder {
|
|
|
+ color: #BEBEBE;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .feedback-upload-image {
|
|
|
+ background-color: #F6F6F6;
|
|
|
+ width: 100%;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ padding: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .feedback-title {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #7B7B7B;
|
|
|
+ }
|
|
|
+</style>
|
