83 lines
3.0 KiB
Vue
83 lines
3.0 KiB
Vue
<template>
|
||
<view class="page" :style="themePageStyle">
|
||
<ThemeNavbar title="用户反馈" />
|
||
<view class="form" :style="{ background: themeSurface }">
|
||
<textarea v-model="content" class="input" maxlength="500" placeholder="请填写反馈内容" />
|
||
<view class="images">
|
||
<image v-for="(src, i) in images" :key="i" :src="src" class="thumb" @tap="removeImage(i)" />
|
||
<view v-if="images.length < 3" class="add" :style="{ borderColor: themeBorder }" @tap="chooseImage">+</view>
|
||
</view>
|
||
<button class="submit" :style="{ background: themePrimary, color: themeSurface }" @tap="submit">提交</button>
|
||
</view>
|
||
<view v-for="item in list" :key="item.id" class="card" :style="{ background: themeSurface }">
|
||
<text class="content" :style="{ color: themeText }">{{ item.content }}</text>
|
||
<text class="meta" :style="{ color: themeTextSoft }">{{ item.status === 1 ? '已回复' : '待处理' }}</text>
|
||
<text v-if="item.reply" class="reply" :style="{ color: themePrimary }">回复：{{ item.reply }}</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { createFeedbackApi, getFeedbackListApi } from '@/api/page/feedback'
|
||
import { uploadVoucherImageApi } from '@/api/page/order'
|
||
import ThemeNavbar from '@/components/theme/ThemeNavbar.vue'
|
||
import themeMixin from '@/mixins/theme'
|
||
|
||
export default {
|
||
components: { ThemeNavbar },
|
||
mixins: [themeMixin],
|
||
data() {
|
||
return { content: '', images: [], list: [] }
|
||
},
|
||
async onShow() {
|
||
await this.applyThemeOnShow()
|
||
this.load()
|
||
},
|
||
methods: {
|
||
load() {
|
||
getFeedbackListApi().then((res) => {
|
||
this.list = res || []
|
||
})
|
||
},
|
||
chooseImage() {
|
||
uni.chooseImage({
|
||
count: 3 - this.images.length,
|
||
success: async (res) => {
|
||
for (const path of res.tempFilePaths || []) {
|
||
const url = await uploadVoucherImageApi(path)
|
||
this.images.push(url)
|
||
}
|
||
},
|
||
})
|
||
},
|
||
removeImage(index) {
|
||
this.images.splice(index, 1)
|
||
},
|
||
submit() {
|
||
if (!this.content.trim()) {
|
||
uni.showToast({ title: '请填写内容', icon: 'none' })
|
||
return
|
||
}
|
||
createFeedbackApi({ content: this.content, images: this.images }).then(() => {
|
||
this.content = ''
|
||
this.images = []
|
||
uni.showToast({ title: '已提交', icon: 'success' })
|
||
this.load()
|
||
})
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.page { min-height: 100vh; padding-bottom: 40rpx; }
|
||
.form, .card { margin: 24rpx; padding: 24rpx; border-radius: 16rpx; }
|
||
.input { width: 100%; min-height: 160rpx; font-size: 28rpx; }
|
||
.images { display: flex; gap: 16rpx; margin: 16rpx 0; }
|
||
.thumb, .add { width: 140rpx; height: 140rpx; border-radius: 8rpx; }
|
||
.add { border: 2rpx dashed; display: flex; align-items: center; justify-content: center; font-size: 48rpx; }
|
||
.submit { margin-top: 12rpx; }
|
||
.content { display: block; font-size: 28rpx; }
|
||
.meta, .reply { display: block; font-size: 24rpx; margin-top: 8rpx; }
|
||
</style>
|