|
|
@@ -8,13 +8,13 @@
|
|
|
|
|
|
<!-- 反馈类型区域 -->
|
|
|
<view class="form-item type-section flex-a flex-j-b">
|
|
|
- <view class="label" style="margin-bottom: 0;">
|
|
|
+ <view class="label" style="margin-bottom: 0">
|
|
|
反馈类型
|
|
|
<text class="required">*</text>
|
|
|
</view>
|
|
|
<view class="picker-box" @click="showTypePicker">
|
|
|
<text :class="['picker-text', !model.type && 'placeholder']">
|
|
|
- {{ model.type || '请选择反馈类型' }}
|
|
|
+ {{ model.type || "请选择反馈类型" }}
|
|
|
</text>
|
|
|
<u-icon name="arrow-right" color="#999" size="32" top="2rpx"></u-icon>
|
|
|
</view>
|
|
|
@@ -27,17 +27,28 @@
|
|
|
<text class="required">*</text>
|
|
|
</view>
|
|
|
<view class="textarea-box">
|
|
|
- <u-input type="textarea" v-model="model.content" placeholder="请输入不少于10个字的描述" :height="200"></u-input>
|
|
|
+ <u-input
|
|
|
+ type="textarea"
|
|
|
+ v-model="model.content"
|
|
|
+ placeholder="请输入不少于10个字的描述"
|
|
|
+ :height="200"
|
|
|
+ ></u-input>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 图片上传区域 -->
|
|
|
<view class="form-item upload-section">
|
|
|
<view class="label">上传图片(最多五张):</view>
|
|
|
- <view class="upload-box">
|
|
|
- <u-upload :file-list="fileList" @afterRead="afterRead" @delete="deletePic" name="1" multiple
|
|
|
- :max-count="5" :previewFullImage="true"></u-upload>
|
|
|
- </view>
|
|
|
+ <u-upload
|
|
|
+ class="upload-image"
|
|
|
+ :fileList="fileList"
|
|
|
+ @on-choose-complete="afterRead"
|
|
|
+ @delete="deletePic"
|
|
|
+ :maxCount="5"
|
|
|
+ :auto-upload="false"
|
|
|
+ :previewFullImage="true"
|
|
|
+ uploadText="点击上传"
|
|
|
+ ></u-upload>
|
|
|
</view>
|
|
|
|
|
|
<!-- 提交按钮 -->
|
|
|
@@ -46,111 +57,189 @@
|
|
|
</view>
|
|
|
|
|
|
<!-- 反馈类型选择器 -->
|
|
|
- <u-picker v-model="showPicker" :range="feedbackTypes" @confirm="onTypeConfirm" @cancel="showPicker = false"
|
|
|
- mode="selector"></u-picker>
|
|
|
+ <u-picker
|
|
|
+ v-model="showPicker"
|
|
|
+ :range="feedbackTypes"
|
|
|
+ @confirm="onTypeConfirm"
|
|
|
+ @cancel="showPicker = false"
|
|
|
+ mode="selector"
|
|
|
+ ></u-picker>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import ENV_CONFIG from "@/.env.js";
|
|
|
+// api前缀
|
|
|
+const env = ENV_CONFIG[process.env.ENV_TYPE || "dev"];
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
showPicker: false,
|
|
|
- feedbackTypes: ['功能建议', '内容建议', '产品建议', '其他'],
|
|
|
+ feedbackTypes: [],
|
|
|
model: {
|
|
|
- type: '',
|
|
|
- content: '',
|
|
|
- images: []
|
|
|
+ type: "",
|
|
|
+ content: "",
|
|
|
+ images: [],
|
|
|
},
|
|
|
fileList: [],
|
|
|
+ uploadSuccessList: [],
|
|
|
rules: {
|
|
|
- type: [{
|
|
|
- required: true,
|
|
|
- message: '请选择反馈类型'
|
|
|
- }],
|
|
|
- content: [{
|
|
|
- required: true,
|
|
|
- message: '请输入反馈描述'
|
|
|
- }, {
|
|
|
- min: 10,
|
|
|
- message: '描述不能少于10个字'
|
|
|
- }]
|
|
|
- }
|
|
|
- }
|
|
|
+ type: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: "请选择反馈类型",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ content: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: "请输入反馈描述",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ min: 10,
|
|
|
+ message: "描述不能少于10个字",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ };
|
|
|
},
|
|
|
methods: {
|
|
|
+ // 获取反馈类型选项
|
|
|
+ getFeedbackTypes() {
|
|
|
+ uni.$u.http
|
|
|
+ .get("/token/common/getDictOptions?type=feedback_type")
|
|
|
+ .then((res) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.feedbackTypes = res.data.map((item) => item.dictLabel);
|
|
|
+ } else {
|
|
|
+ uni.$u.toast("获取反馈类型失败");
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ uni.$u.toast("获取反馈类型失败");
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
// 显示类型选择器
|
|
|
showTypePicker() {
|
|
|
- this.showPicker = true
|
|
|
+ this.showPicker = true;
|
|
|
},
|
|
|
|
|
|
// 类型选择确认
|
|
|
onTypeConfirm(e) {
|
|
|
- this.model.type = e.value[0]
|
|
|
- this.showPicker = false
|
|
|
+ let index = e[0];
|
|
|
+ this.model.type = this.feedbackTypes[index];
|
|
|
+ this.showPicker = false;
|
|
|
},
|
|
|
|
|
|
// 上传图片
|
|
|
- afterRead(event) {
|
|
|
- const {
|
|
|
- file
|
|
|
- } = event
|
|
|
- // 上传图片到服务器
|
|
|
- uni.uploadFile({
|
|
|
- url: 'your-upload-url',
|
|
|
- filePath: file.url,
|
|
|
- name: 'file',
|
|
|
- success: (res) => {
|
|
|
- const response = JSON.parse(res.data)
|
|
|
- if (response.code === 1) {
|
|
|
- this.model.images.push(response.data.url)
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
+ afterRead(lists) {
|
|
|
+ // 先检查token是否存在
|
|
|
+ const token = uni.getStorageSync("token");
|
|
|
+
|
|
|
+ const uploadTasks = lists.map((item) => {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ uni.uploadFile({
|
|
|
+ url: env.apiUrl + "/api/token/suggestion/imgUpload",
|
|
|
+ filePath: item.url,
|
|
|
+ name: "file",
|
|
|
+ header: {
|
|
|
+ Authorization: "Bearer " + token,
|
|
|
+ },
|
|
|
+ success: (res) => {
|
|
|
+ const result = JSON.parse(res.data);
|
|
|
+ if (result.code === 200 && result.data) {
|
|
|
+ resolve(result.data);
|
|
|
+ } else {
|
|
|
+ uni.$u.toast(result.msg || "上传失败");
|
|
|
+ reject(new Error(result.msg || "上传失败"));
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fail: (err) => {
|
|
|
+ uni.$u.toast("上传失败");
|
|
|
+ reject(err);
|
|
|
+ },
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ Promise.all(uploadTasks)
|
|
|
+ .then((results) => {
|
|
|
+ this.uploadSuccessList = results.flat();
|
|
|
+ this.fileList = lists;
|
|
|
+ this.model.images = this.uploadSuccessList;
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.error("Upload failed:", err);
|
|
|
+ });
|
|
|
},
|
|
|
|
|
|
// 删除图片
|
|
|
deletePic(event) {
|
|
|
- this.model.images.splice(event.index, 1)
|
|
|
+ this.fileList.splice(event.index, 1);
|
|
|
+ this.model.images.splice(event.index, 1);
|
|
|
+ this.uploadSuccessList.splice(event.index, 1);
|
|
|
},
|
|
|
|
|
|
// 去历史记录
|
|
|
goToHistory() {
|
|
|
uni.navigateTo({
|
|
|
- url: '/pages/feedback-history/index'
|
|
|
- })
|
|
|
+ url: "/pages/feedback-history/index",
|
|
|
+ });
|
|
|
},
|
|
|
|
|
|
// 提交表单
|
|
|
submit() {
|
|
|
if (!this.model.type) {
|
|
|
- return uni.$u.toast('请选择反馈类型')
|
|
|
+ return uni.$u.toast("请选择反馈类型");
|
|
|
}
|
|
|
if (this.model.content.length < 10) {
|
|
|
- return uni.$u.toast('描述不能少于10个字')
|
|
|
+ return uni.$u.toast("反馈描述不能少于10个字");
|
|
|
}
|
|
|
|
|
|
// 提交表单
|
|
|
uni.showLoading({
|
|
|
- title: '提交中'
|
|
|
- })
|
|
|
- // 这里调用提交接口
|
|
|
- setTimeout(() => {
|
|
|
- uni.hideLoading()
|
|
|
- uni.$u.toast('提交成功')
|
|
|
- setTimeout(() => {
|
|
|
- uni.navigateBack()
|
|
|
- }, 1500)
|
|
|
- }, 1000)
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ title: "提交中",
|
|
|
+ });
|
|
|
+
|
|
|
+ // 构建提交参数
|
|
|
+ const params = {
|
|
|
+ reason: this.model.type,
|
|
|
+ description: this.model.content,
|
|
|
+ images: this.model.images,
|
|
|
+ };
|
|
|
+
|
|
|
+ // 调用提交接口
|
|
|
+ uni.$u.http
|
|
|
+ .post("/token/suggestion/submit", params)
|
|
|
+ .then((res) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ uni.$u.toast("提交成功");
|
|
|
+ setTimeout(() => {
|
|
|
+ uni.navigateBack();
|
|
|
+ }, 1500);
|
|
|
+ } else {
|
|
|
+ uni.$u.toast(res.msg || "提交失败");
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ uni.$u.toast("提交失败");
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ uni.hideLoading();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ this.getFeedbackTypes();
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.feedback-page {
|
|
|
min-height: 100vh;
|
|
|
- background: #F5F5F5;
|
|
|
+ background: #f5f5f5;
|
|
|
|
|
|
// banner样式保持不变
|
|
|
.banner {
|
|
|
@@ -168,7 +257,7 @@ export default {
|
|
|
right: 30rpx;
|
|
|
top: 30rpx;
|
|
|
background: rgba(56, 193, 72, 0.9);
|
|
|
- color: #FFFFFF;
|
|
|
+ color: #ffffff;
|
|
|
padding: 10rpx 20rpx;
|
|
|
border-radius: 10rpx;
|
|
|
font-size: 24rpx;
|
|
|
@@ -177,7 +266,7 @@ export default {
|
|
|
|
|
|
// 表单项通用样式
|
|
|
.form-item {
|
|
|
- background: #FFFFFF;
|
|
|
+ background: #ffffff;
|
|
|
margin: 20rpx;
|
|
|
padding: 30rpx;
|
|
|
border-radius: 12rpx;
|
|
|
@@ -188,7 +277,7 @@ export default {
|
|
|
margin-bottom: 20rpx;
|
|
|
|
|
|
.required {
|
|
|
- color: #FF5B5B;
|
|
|
+ color: #ff5b5b;
|
|
|
margin-left: 4rpx;
|
|
|
}
|
|
|
}
|
|
|
@@ -218,10 +307,16 @@ export default {
|
|
|
// 反馈描述区域
|
|
|
.content-section {
|
|
|
.textarea-box {
|
|
|
- background: #F8F8F8;
|
|
|
+ background: #f8f8f8;
|
|
|
border-radius: 8rpx;
|
|
|
padding: 20rpx;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .upload-image {
|
|
|
+ .u-list-item {
|
|
|
+ background: #ffffff !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
