313 lines
7.8 KiB
Vue
313 lines
7.8 KiB
Vue
<template>
|
||
<view class="feedback">
|
||
<view class="feedback-block">
|
||
<view class="feedback-title">您有任何意见与建议</view>
|
||
<view class="feedback-radiobox">
|
||
<view class="feedback-radiobox-item" @click="changeRadio('页面闪退')" :class="{'show': radioValue === '页面闪退'}">页面闪退</view>
|
||
<view class="feedback-radiobox-item" @click="changeRadio('操作体验')" :class="{'show': radioValue === '操作体验'}">操作体验</view>
|
||
<view class="feedback-radiobox-item" @click="changeRadio('账号问题')" :class="{'show': radioValue === '账号问题'}">账号问题</view>
|
||
<view class="feedback-radiobox-item" @click="changeRadio('功能异常')" :class="{'show': radioValue === '功能异常'}">功能异常</view>
|
||
<view class="feedback-radiobox-item" @click="changeRadio('产品建议')" :class="{'show': radioValue === '产品建议'}">产品建议</view>
|
||
<view class="feedback-radiobox-item" @click="changeRadio('其他问题')" :class="{'show': radioValue === '其他问题'}">其他问题</view>
|
||
</view>
|
||
</view>
|
||
<view class="feedback-block">
|
||
<view class="feedback-title">上传应用截图({{feedbackImg.length}}/8)</view>
|
||
<view class="feedback-sbutitle">上传出现问题的应用图片；长按图片可删除</view>
|
||
<view class="feedback-imgs">
|
||
<view class="feedback-imgs-item" v-for="(item, index) in feedbackImg" :key="index" @longpress="removeImg(index)">
|
||
<image :src="item.showPath" mode="aspectFill"></image>
|
||
</view>
|
||
<view class="feedback-imgs-item" @click="onFeedbackUpd" v-if="feedbackImg.length < 8">
|
||
<image :src="require('@/static/user/feedback-upd.png')" mode="aspectFill"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="feedback-block">
|
||
<view class="feedback-title">问题说明</view>
|
||
<view class="feedback-sbutitle">请对您所遇到的问题进行尽可能详细的描述</view>
|
||
<view class="feedback-textarea">
|
||
<textarea maxlength="200" v-model="description" />
|
||
<view class="feedback-textarea-size">{{description.length}}/200</view>
|
||
</view>
|
||
</view>
|
||
<view class="feedback-block">
|
||
<view class="feedback-title">联系方式</view>
|
||
<input class="feedback-input" type="number" v-model="mobile" maxlength="11" placeholder="输入手机号码" />
|
||
</view>
|
||
<!-- 提交按钮 -->
|
||
<view class="btn">
|
||
<button type="default" @click="subFeedback">提交</button>
|
||
</view>
|
||
<!-- 微信客服 -->
|
||
<u-modal
|
||
:show="wechatCode"
|
||
title="微信客服"
|
||
confirmColor="#34CE98"
|
||
:showCancelButton="true"
|
||
cancelText="关闭"
|
||
confirmText="保存二维码"
|
||
@cancel="wechatCode = false"
|
||
@confirm="dowQrCode"
|
||
>
|
||
<slot>
|
||
<view class="wechat-content">
|
||
<image class="wechat-qrcode" :src="require('@/static/user/qrCode.png')" mode="widthFix"></image>
|
||
<view class="wechat-text">扫描企业微信二维码，添加微信客服</view>
|
||
</view>
|
||
</slot>
|
||
</u-modal>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { feedbacks } from '@/apis/interfaces/versions'
|
||
import { uploads } from '@/apis/interfaces/uploading.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
radioValue : "页面闪退",
|
||
description: "",
|
||
mobile : "",
|
||
systemInfo : {},
|
||
feedbackImg: [],
|
||
wechatCode : false
|
||
}
|
||
},
|
||
onLoad(){
|
||
uni.getSystemInfo({
|
||
success: systemRes => {
|
||
this.systemInfo = {
|
||
brand : systemRes.brand,
|
||
models : systemRes.model,
|
||
pixel : systemRes.pixelRatio,
|
||
width : systemRes.windowWidth,
|
||
height : systemRes.windowHeight,
|
||
version : systemRes.system,
|
||
platform : systemRes.platform,
|
||
font_size: systemRes.fontSizeSetting,
|
||
client_id: systemRes.deviceId,
|
||
}
|
||
}
|
||
})
|
||
},
|
||
onNavigationBarButtonTap() {
|
||
this.wechatCode = true
|
||
},
|
||
methods: {
|
||
dowQrCode(){
|
||
uni.saveImageToPhotosAlbum({
|
||
filePath: require('@/static/user/qrCode.png'),
|
||
success(res) {
|
||
uni.showToast({
|
||
title: '二维码已保存到系统相册',
|
||
icon : 'none'
|
||
})
|
||
},
|
||
fail(err) {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon : 'none'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
changeRadio(e){
|
||
if(this.radioValue === e) return
|
||
this.radioValue = e
|
||
},
|
||
subFeedback(){
|
||
let pictures = this.feedbackImg.map(val => {
|
||
return val.path
|
||
})
|
||
feedbacks({
|
||
type : this.radioValue,
|
||
description : this.description,
|
||
mobile : this.mobile,
|
||
...this.systemInfo,
|
||
pictures
|
||
}).then(res => {
|
||
uni.showModal({
|
||
title : '提示',
|
||
content : '我们已收到您的反馈，感谢您对平台建议反馈与支持~',
|
||
showCancel : false,
|
||
cancelColor: '#34CE98',
|
||
success : ()=> {
|
||
uni.navigateBack()
|
||
}
|
||
})
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon : 'none'
|
||
})
|
||
})
|
||
},
|
||
// 上传图片
|
||
onFeedbackUpd(){
|
||
uni.chooseImage({
|
||
count : 8 - this.feedbackImg.length,
|
||
sizeType : ['compressed'],
|
||
sourceType : ['album'],
|
||
success : chooseRes => {
|
||
let { tempFiles } = chooseRes
|
||
let paths = tempFiles.map(val => {
|
||
return {
|
||
uri : val.path,
|
||
name: 'file' + val.size
|
||
}
|
||
})
|
||
uni.showLoading({
|
||
title: '上传中...'
|
||
})
|
||
uploads(paths).then(res => {
|
||
uni.hideLoading()
|
||
let feedbackImg = res.path.map((val, index) => {
|
||
return {
|
||
path : val,
|
||
showPath: res.url[index]
|
||
}
|
||
})
|
||
this.feedbackImg = this.feedbackImg.concat(feedbackImg)
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon : 'none',
|
||
})
|
||
})
|
||
},
|
||
fail : err => {
|
||
if(err.errCode === -2) return
|
||
uni.showToast({
|
||
title: err.errMsg,
|
||
icon : 'none'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 删除图片
|
||
removeImg(index){
|
||
this.feedbackImg.splice(index, 1)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.feedback-block{
|
||
padding: 30rpx;
|
||
border-top: solid 20rpx #F8F8F8;
|
||
}
|
||
.feedback-title{
|
||
font-size: 34rpx;
|
||
font-weight: bold;
|
||
line-height: 40rpx;
|
||
}
|
||
.feedback-title text{
|
||
color: #e6576b;
|
||
padding-left: 5rpx;
|
||
}
|
||
.feedback-radiobox{
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
margin: 20rpx -10rpx 0;
|
||
}
|
||
.feedback-radiobox-item{
|
||
position: relative;
|
||
width: calc(33.33% - 20rpx);
|
||
display: inline-block;
|
||
margin: 10rpx;
|
||
background: #F8F8F8;
|
||
text-align: center;
|
||
line-height: 70rpx;
|
||
border-radius: 30rpx;
|
||
font-size: 30rpx;
|
||
}
|
||
.feedback-radiobox-item.show{
|
||
background: #34CE98;
|
||
color: white;
|
||
}
|
||
.feedback-imgs{
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
margin: 10rpx -10rpx 0;
|
||
}
|
||
.feedback-imgs-item{
|
||
position: relative;
|
||
width: calc(25% - 20rpx);
|
||
padding-top: calc(25% - 20rpx);
|
||
margin: 20rpx 10rpx 0 10rpx;
|
||
}
|
||
.feedback-imgs-item image{
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
border:solid 1rpx #f8f8f8;
|
||
}
|
||
.feedback-sbutitle{
|
||
font-size: 28rpx;
|
||
padding-top: 10rpx;
|
||
color: gray;
|
||
}
|
||
.feedback-textarea{
|
||
background: #F8F8F8;
|
||
border-radius: 20rpx;
|
||
padding: 20rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
.feedback-textarea textarea{
|
||
width: 100%;
|
||
height: 200rpx;
|
||
font-size: 32rpx;
|
||
}
|
||
.feedback-textarea-size{
|
||
text-align: right;
|
||
font-size: 28rpx;
|
||
color: gray;
|
||
}
|
||
.feedback-input{
|
||
background: #F8F8F8;
|
||
border-radius: 20rpx;
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
margin-top: 20rpx;
|
||
font-size: 32rpx;
|
||
padding: 0 20rpx;
|
||
}
|
||
.btn{
|
||
padding: 30rpx;
|
||
}
|
||
.btn button{
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
border-radius: 45rpx;
|
||
background: #34CE98;
|
||
font-size: 34rpx;
|
||
font-weight: bold;
|
||
color: white;
|
||
border: none;
|
||
padding: 0;
|
||
}
|
||
.btn button:after{
|
||
display: none;
|
||
}
|
||
|
||
/* 弹出层 */
|
||
.wechat-content{
|
||
text-align: center;
|
||
padding: 30rpx 0;
|
||
}
|
||
.wechat-qrcode{
|
||
width: 248rpx;
|
||
height: 248rpx;
|
||
}
|
||
.wechat-text{
|
||
text-align: center;
|
||
font-size: 28rpx;
|
||
color: gray;
|
||
padding-top: 30rpx;
|
||
}
|
||
</style> |