pcwl_yancheng
f5742048d1
在 `config/url.js` 中新增了本地调试地址 `"http://127.0.0.1:8080"` 的注释配置，便于开发人员快速切换调试环境。 fix(device): 修复设备详情页费用配置解析逻辑 在 `pages/device/detail.vue` 中增强了对 `feeConfig` 字段的判断，防止因字段不存在导致页面报错，并设置默认值以提升用户体验。同时调整了订单创建后的套餐信息更新逻辑，暂时将其注释以便后续排查问题。 refactor(device): 调整订单金额计算方式 修改订单金额计算逻辑，从原来的押金加套餐价改为仅使用押金部分作为总价展示，并修正跳转支付页面时传递的价格参数为实际单位价格。 feat(feedback): 反馈页面增加联系方式输入框 在 `pages/feedback/index.vue` 表单中添加了联系方式输入框，支持用户填写手机号码用于后续客服联系，并将图片上传功能临时隐藏待优化。 chore(build): 更新构建产物中的 JS 文件内容 同步更新了打包目录下相关 JS 构建文件的内容，包括 `user.js` 和 `detail.js` 等，确保与源代码变更一致。
316 lines
6.4 KiB
Vue
316 lines
6.4 KiB
Vue
<template>
|
||
<view class="feedback-container">
|
||
<form>
|
||
<!-- 问题类型选择 -->
|
||
<view class="type-section">
|
||
<view class="section-title">问题类型</view>
|
||
<view class="type-grid">
|
||
<view v-for="(type, index) in types" :key="index" class="type-item"
|
||
:class="{ active: selectedType === index }" @click="selectType(index)">
|
||
{{ type }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 问题描述 -->
|
||
<view class="description-section">
|
||
<view class="section-title">问题描述</view>
|
||
<textarea class="description-input" v-model="description" placeholder="请详细描述您遇到的问题，以便我们更好地为您解决"
|
||
maxlength="500" name="description" />
|
||
<view class="word-count">{{ description.length }}/500</view>
|
||
</view>
|
||
|
||
<!-- 图片上传 -->
|
||
<!-- <view class="upload-section">
|
||
<view class="section-title">图片上传（选填）</view>
|
||
<view class="upload-grid">
|
||
<view class="upload-item" v-for="(img, index) in images" :key="index">
|
||
<image :src="img" mode="aspectFill" />
|
||
<view class="delete-btn" @click="deleteImage(index)">×</view>
|
||
</view>
|
||
<view class="upload-btn" @click="chooseImage" v-if="images.length < 3">
|
||
<text class="plus">+</text>
|
||
<text class="tip">上传图片</text>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
|
||
<!-- 联系方式 -->
|
||
<view class="contact-section">
|
||
<view class="section-title">联系方式</view>
|
||
<input class="contact-input" v-model="contact" placeholder="请留下您的手机号，方便我们联系您" type="number"
|
||
maxlength="11" name="contact" />
|
||
</view>
|
||
|
||
<!-- 提交按钮 -->
|
||
<view class="submit-section">
|
||
<view class="submit-btn" @click="submitFeedback">提交反馈</view>
|
||
</view>
|
||
</form>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
ref
|
||
} from 'vue'
|
||
import {
|
||
URL
|
||
} from '../../config/url'
|
||
import {
|
||
addUserFeedback
|
||
} from '../../config/user'
|
||
|
||
// 响应式数据
|
||
const types = ref(['设备故障', '收费问题', '使用建议', '其他'])
|
||
const selectedType = ref(-1)
|
||
const paramsType = ref('')
|
||
const description = ref('')
|
||
const images = ref([])
|
||
const contact = ref('')
|
||
const apiUrl = URL
|
||
|
||
// 方法
|
||
const selectType = (index) => {
|
||
selectedType.value = index
|
||
}
|
||
|
||
const chooseImage = () => {
|
||
uni.chooseImage({
|
||
count: 3 - images.value.length,
|
||
success: (res) => {
|
||
images.value = [...images.value, ...res.tempFilePaths]
|
||
}
|
||
})
|
||
}
|
||
|
||
const deleteImage = (index) => {
|
||
images.value.splice(index, 1)
|
||
}
|
||
|
||
const submitFeedback = async () => {
|
||
if (selectedType.value === -1) {
|
||
uni.showToast({
|
||
title: '请选择问题类型',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
if (!description.value.trim()) {
|
||
uni.showToast({
|
||
title: '请描述您的问题',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
if (!contact.value) {
|
||
uni.showToast({
|
||
title: '请留下联系方式',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
if (types.value[selectedType.value] == '设备故障' || types.value[selectedType.value] == '收费问题') {
|
||
paramsType.value = 'complain'
|
||
} else {
|
||
paramsType.value = 'suggestion'
|
||
}
|
||
|
||
// 构建反馈数据
|
||
const feedbackData = {
|
||
type: paramsType.value,
|
||
content: description.value,
|
||
phone: contact.value,
|
||
// images: images.value
|
||
}
|
||
const res = await addUserFeedback(feedbackData);
|
||
if (res.code == 200) {
|
||
uni.showToast({
|
||
title: '反馈成功',
|
||
icon: 'success'
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title: '反馈失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.feedback-container {
|
||
min-height: 100vh;
|
||
background: #f8f8f8;
|
||
padding: 30rpx;
|
||
|
||
.section-title {
|
||
font-size: 30rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.type-section {
|
||
background: #fff;
|
||
border-radius: 20rpx;
|
||
padding: 30rpx;
|
||
margin-bottom: 20rpx;
|
||
|
||
.type-grid {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
margin: 0 -10rpx;
|
||
|
||
.type-item {
|
||
width: calc(50% - 20rpx);
|
||
margin: 10rpx;
|
||
height: 80rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #f5f5f5;
|
||
border-radius: 10rpx;
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
transition: all 0.3s;
|
||
|
||
&.active {
|
||
background: #E3F2FD;
|
||
color: #1976D2;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.description-section {
|
||
background: #fff;
|
||
border-radius: 20rpx;
|
||
padding: 30rpx;
|
||
margin-bottom: 20rpx;
|
||
|
||
.description-input {
|
||
width: 100%;
|
||
height: 240rpx;
|
||
background: #f8f8f8;
|
||
border-radius: 10rpx;
|
||
padding: 20rpx;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.word-count {
|
||
text-align: right;
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
margin-top: 10rpx;
|
||
}
|
||
}
|
||
|
||
.upload-section {
|
||
background: #fff;
|
||
border-radius: 20rpx;
|
||
padding: 30rpx;
|
||
margin-bottom: 20rpx;
|
||
|
||
.upload-grid {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
.upload-item {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
margin-right: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
position: relative;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.delete-btn {
|
||
position: absolute;
|
||
right: -10rpx;
|
||
top: -10rpx;
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
color: #fff;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 32rpx;
|
||
}
|
||
}
|
||
|
||
.upload-btn {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
background: #f5f5f5;
|
||
border-radius: 10rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #999;
|
||
|
||
.plus {
|
||
font-size: 60rpx;
|
||
line-height: 1;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.tip {
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.contact-section {
|
||
background: #fff;
|
||
border-radius: 20rpx;
|
||
padding: 30rpx;
|
||
margin-bottom: 40rpx;
|
||
|
||
.contact-input {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
background: #f8f8f8;
|
||
border-radius: 10rpx;
|
||
padding: 0 20rpx;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
|
||
.submit-section {
|
||
padding: 0 40rpx;
|
||
|
||
.submit-btn {
|
||
width: 100%;
|
||
height: 88rpx;
|
||
background: #1976D2;
|
||
color: #fff;
|
||
border-radius: 44rpx;
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
&:active {
|
||
transform: scale(0.98);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |