purchase-let/pageQuota/feedBack/index.vue

220 lines
4.7 KiB
Vue
Raw Normal View History

2024-05-09 16:43:34 +08:00
<template>
<view class="content">
2024-05-13 18:05:23 +08:00
<!-- <view class="cell-li">
2024-05-09 18:01:57 +08:00
<view class="cell-tit">
反馈类型
</view>
<view class="" style="display: flex;margin: 20rpx 0;">
<view class="types">
注册
</view>
<view class="types">
注册
</view>
</view>
<view class="type-detail" @click="showTypeDetail=true">
<text>未收到短信</text>
<up-icon name="arrow-down"></up-icon>
</view>
<up-picker confirmColor='#20B128' @confirm='confirm' @cancel='showTypeDetail=false' :show="showTypeDetail"
:columns="columns"></up-picker>
2024-05-13 18:05:23 +08:00
</view> -->
2024-05-09 18:01:57 +08:00
<view class="cell-li">
<view class="cell-tit" style="margin-bottom: 20rpx;">
反馈内容
</view>
2024-05-13 18:05:23 +08:00
<up-textarea v-model="formData.content" style="background-color: #F5F5F5;" placeholder="请输入内容"
count></up-textarea>
2024-05-09 18:01:57 +08:00
</view>
<view class="cell-li">
<view class="cell-tit" style="margin-bottom: 20rpx;">
图片上传
</view>
2024-05-13 18:05:23 +08:00
<up-upload :fileList="formData.images" @afterRead="afterRead" @delete="deletePic" name="1" multiple
2024-05-09 18:01:57 +08:00
:maxCount="10"></up-upload>
</view>
<view class="cell-li">
<view class="cell-tit" style="margin-bottom: 20rpx;">
联系方式
</view>
<up-input placeholder="请填写您的姓名" style="background-color: #F5F5F5;margin-bottom: 20rpx;" border="surround"
v-model="formData.name"></up-input>
<up-input placeholder="请输入您的电话或者邮箱" style="background-color: #F5F5F5;" border="surround"
2024-05-13 18:05:23 +08:00
v-model="formData.contact"></up-input>
2024-05-09 18:01:57 +08:00
</view>
<view class="btn">
2024-05-10 09:45:35 +08:00
<up-button text="提交反馈" @click="submit" shape='circle' color="#20B128"></up-button>
2024-05-09 18:01:57 +08:00
<view style="display: flex;align-items: center;margin-top: 20rpx;">
<view style="margin: 0 auto; display: flex;" @click="navgo('/pageQuota/feedBack/list')">
反馈记录 <up-icon name="arrow-right"></up-icon>
</view>
</view>
</view>
2024-05-09 16:43:34 +08:00
</view>
</template>
<script setup>
2024-05-09 18:01:57 +08:00
import {
ref,
reactive
} from "vue"
2024-05-13 18:05:23 +08:00
import {
config
} from "@/config/app.js"
2024-05-13 19:28:05 +08:00
import {
addFeedBackApi,
userfeedbackListApi
} from "@/api/feedBack.js"
2024-05-13 18:05:23 +08:00
import useUserStore from '@/store/user';
const userStore = useUserStore();
2024-05-09 18:01:57 +08:00
const showTypeDetail = ref(false)
const columns = reactive([
['中国', '美国', '日本']
]);
const confirm = (e) => {
console.log(e)
showTypeDetail.value = false
}
const cont = ref('')
const formData = reactive({
2024-05-13 18:05:23 +08:00
content: "",
images: [],
2024-05-09 18:01:57 +08:00
name: "",
2024-05-13 18:05:23 +08:00
contact: "",
2024-05-13 19:28:05 +08:00
uid: userStore.userInfo.id
2024-05-14 15:18:50 +08:00
// uid: 2
2024-05-09 18:01:57 +08:00
})
const navgo = (url) => {
uni.navigateTo({
url
})
}
2024-05-09 16:43:34 +08:00
2024-05-09 18:01:57 +08:00
// 上传
2024-05-13 19:28:05 +08:00
// const formData.images = ref([]);
2024-05-09 18:01:57 +08:00
// 删除图片
const deletePic = (event) => {
2024-05-14 15:18:50 +08:00
formData.images.splice(event.index, 1);
2024-05-09 18:01:57 +08:00
};
// 新增图片
const afterRead = async (event) => {
// 当设置 mutiple 为 true 时, file 为数组格式,否则为对象格式
let lists = [].concat(event.file);
2024-05-13 19:28:05 +08:00
let fileListLen = formData.images.length;
2024-05-09 18:01:57 +08:00
lists.map((item) => {
2024-05-13 19:28:05 +08:00
formData.images.push({
2024-05-09 18:01:57 +08:00
...item,
status: 'uploading',
message: '上传中',
});
});
for (let i = 0; i < lists.length; i++) {
const result = await uploadFilePromise(lists[i].url);
2024-05-13 19:28:05 +08:00
console.log(result)
2024-05-14 15:18:50 +08:00
// let item = formData.images[fileListLen];
2024-05-13 19:28:05 +08:00
formData.images.splice(fileListLen, 1, {
2024-05-09 18:01:57 +08:00
url: result,
});
fileListLen++;
}
};
const uploadFilePromise = (url) => {
return new Promise((resolve, reject) => {
let a = uni.uploadFile({
2024-05-13 18:05:23 +08:00
url: config.HTTP_REQUEST_URL + '/api/upload/image', // 仅为示例,非真实的接口地址
2024-05-09 18:01:57 +08:00
filePath: url,
name: 'file',
2024-05-13 18:05:23 +08:00
header: {
token: userStore.token
2024-05-09 18:01:57 +08:00
},
success: (res) => {
setTimeout(() => {
2024-05-13 19:28:05 +08:00
resolve(JSON.parse(res.data).data.uri);
2024-05-09 18:01:57 +08:00
}, 1000);
},
});
});
};
2024-05-10 09:45:35 +08:00
2024-05-13 19:28:05 +08:00
const submit = async () => {
formData.images = formData.images.map(item => {
return item.url
})
await addFeedBackApi({
...formData
})
2024-05-10 09:45:35 +08:00
uni.showToast({
title: '提交成功',
2024-05-14 15:18:50 +08:00
duration: 1500
})
uni.$u.sleep(1500).then(res => {
2024-05-10 09:45:35 +08:00
uni.navigateTo({
url: '/pageQuota/feedBack/list'
})
2024-05-14 15:18:50 +08:00
})
2024-05-10 09:45:35 +08:00
}
2024-05-09 16:43:34 +08:00
</script>
<style lang="scss">
.content {
padding: 20rpx;
2024-05-09 18:01:57 +08:00
min-height: 100vh;
background-color: white;
.cell-li {
margin-bottom: 50rpx;
}
.cell-tit {
position: relative;
}
.cell-tit::after {
content: '';
width: 5rpx;
height: 20rpx;
border-radius: 20rpx;
background-color: #20B128;
position: absolute;
left: -10rpx;
top: 5rpx;
}
.types {
width: 150rpx;
height: 70rpx;
background-color: #20B128;
color: white;
text-align: center;
line-height: 70rpx;
border-radius: 50rpx;
margin-right: 20rpx;
}
.type-detail {
background-color: #F5F5F5;
padding: 20rpx;
display: flex;
justify-content: space-between;
}
2024-05-09 16:43:34 +08:00
}
</style>