jiuyiUniapp/jiuyi2/pages/mine/setting/feedback.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>