161 lines
3.2 KiB
Vue
161 lines
3.2 KiB
Vue
<script setup>
|
|
// 意见反馈
|
|
import {
|
|
ref,
|
|
reactive,
|
|
computed,
|
|
} from 'vue'
|
|
import {
|
|
onLoad,
|
|
onReady,
|
|
} from '@dcloudio/uni-app'
|
|
// 工具库
|
|
import util from '@/common/js/util.js'
|
|
//
|
|
import api from '@/api/index.js'
|
|
// 表单
|
|
const form = reactive({
|
|
feedbackType: '',
|
|
content: '',
|
|
url: [],
|
|
phoneNumber: '',
|
|
})
|
|
|
|
// 提交
|
|
function handleSubmit() {
|
|
//
|
|
const data = {
|
|
...form
|
|
}
|
|
console.log('data', data)
|
|
|
|
// 验证必填项
|
|
if (!data.feedbackType) {
|
|
util.alert('问题标题不能为空')
|
|
return
|
|
}
|
|
if (!data.content) {
|
|
util.alert('问题详情不能为空')
|
|
return
|
|
}
|
|
if (!data.phoneNumber) {
|
|
util.alert('联系方式不能为空')
|
|
return
|
|
}
|
|
// 图片路径
|
|
data.url = data.url.join(',')
|
|
|
|
api.mine.feedback({
|
|
data,
|
|
}).then(rs => {
|
|
if (rs.code == 200) {
|
|
util.alert({
|
|
content: '提交成功，请耐心等待平台反馈',
|
|
showCancel: false,
|
|
}).then(rs => {
|
|
uni.navigateBack()
|
|
})
|
|
return
|
|
}
|
|
util.alert({
|
|
content: rs.msg,
|
|
showCancel: false,
|
|
})
|
|
})
|
|
}
|
|
|
|
// 上传文件
|
|
function uploadImg() {
|
|
util.upload_image({
|
|
value: form.url,
|
|
type: 2,
|
|
count: 6,
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 删除图片
|
|
* @param {Object} index
|
|
*/
|
|
function removeImage(index) {
|
|
util.alert({
|
|
content: '删除后不可恢复，确认删除吗？',
|
|
}).then(rs => {
|
|
if (!rs.confirm) return
|
|
form.url.splice(index, 1)
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<view class="app">
|
|
<view class="form mtb30 mlr30 ptb20 plr30 bfff br20">
|
|
<view class="line">
|
|
<view class="key f36">请输入您遇到的问题标题</view>
|
|
<view class="value inputBox">
|
|
<input v-model.trim="form.feedbackType" placeholder="请输入描述问题标题" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="line">
|
|
<view class="key f36">请输入您遇到的问题详情</view>
|
|
<view class="value inputBox">
|
|
<textarea v-model.trim="form.content" class="textarea" type="text" placeholder="请输入描述问题详情" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="line">
|
|
<view class="key f36">请输入您遇到的问题</view>
|
|
<view class="imgList mt30">
|
|
<view class="imgs wh180 br20" v-for="(item,index) in form.url" :key="index">
|
|
<image class="wh180 br20" :src="item" mode="aspectFill" />
|
|
<uni-icons type="clear" class="close" color="red" @click="removeImage(index)" />
|
|
</view>
|
|
<view class="imgs upload fmid wh180 br20" @click="uploadImg">
|
|
<uni-icons type="plusempty" size="80rpx" color="#aaa" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="line">
|
|
<view class="key f36">请输入您的联系方式</view>
|
|
<view class="value inputBox">
|
|
<input v-model.trim="form.phoneNumber" type="text" placeholder="请输入联系方式" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="btn lg bar black mt60 mb30" @click="handleSubmit">提交</view>
|
|
</view>
|
|
|
|
<view class="fill"></view>
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
//
|
|
.form {
|
|
.line {
|
|
margin: 40rpx 0;
|
|
|
|
.key {
|
|
font-size: 36rpx;
|
|
}
|
|
|
|
.value {
|
|
margin-top: 20rpx;
|
|
padding: 15rpx 20rpx;
|
|
}
|
|
|
|
// 上传
|
|
.upload {
|
|
border: 4rpx dashed #ddd;
|
|
}
|
|
|
|
// 多行文本框
|
|
.textarea {
|
|
width: 100%;
|
|
height: 300rpx;
|
|
}
|
|
}
|
|
}
|
|
</style> |