Skip to content

H
hello-uniapp

weixin_54239399 / hello-uniapp
与 Fork 源项目一致

从无法访问的项目Fork

通知 4
Star 1
Fork 0
H
hello-uniapp

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 ff5cc1c5 编写于 作者: M mehaotian
浏览文件
操作

fix: 修复问题反馈模板必选图片的问题

上级 54fa2c41
隐藏空白更改
内联 并排
Showing with 234 addition and 203 deletion
platforms/app-plus/feedback/feedback.vue
浏览文件 @ ff5cc1c5
<template>
<view class="page">
<view class='feedback-title'>
<text>问题和意见</text>
<text class="feedback-quick" @tap="chooseMsg">快速键入</text>
</view>
<view class="feedback-body">
<textarea placeholder="请详细描述你的问题和意见..." v-model="sendDate.content" class="feedback-textare"></textarea>
</view>
<view class='feedback-title'>
<text>图片(选填,提供问题截图,总大小10M以下)</text>
</view>
<view class="feedback-body feedback-uploader">
<view class="uni-uploader">
<view class="uni-uploader-head">
<view class="uni-uploader-title">点击预览图片</view>
<view class="uni-uploader-info">{{imageList.length}}/8</view>
</view>
<view class="uni-uploader-body">
<view class="uni-uploader__files">
<block v-for="(image,index) in imageList" :key="index">
<view class="uni-uploader__file" style="position: relative;">
<image class="uni-uploader__img" :src="image" @tap="previewImage(index)"></image>
<view class="close-view" @click="close(index)">x</view>
</view>
</block>
<view class="uni-uploader__input-box" v-show="imageList.length < 8">
<view class="uni-uploader__input" @tap="chooseImg"></view>
</view>
</view>
</view>
</view>
</view>
<view class='feedback-title'>
<text>QQ/邮箱</text>
</view>
<view class="feedback-body">
<input class="feedback-input" v-model="sendDate.contact" placeholder="(选填,方便我们联系你 )" />
</view>
<view class='feedback-title feedback-star-view'>
<text>应用评分</text>
<view class="feedback-star-view">
<text class="feedback-star" v-for="(value,key) in stars" :key="key" :class="key < sendDate.score ? 'active' : ''"
@tap="chooseStar(value)"></text>
</view>
</view>
<button type="default" class="feedback-submit" @tap="send">提交</button>
<view class='feedback-title'>
<text>用户反馈的结果可在app打包后于DCloud开发者中心查看</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
msgContents: ["界面显示错乱", "启动缓慢，卡出翔了", "UI无法直视，丑哭了", "偶发性崩溃"],
stars: [1, 2, 3, 4, 5],
imageList: [],
sendDate: {
score: 0,
content: "",
contact: ""
}
}
},
onLoad() {
let deviceInfo = {
appid: plus.runtime.appid,
imei: plus.device.imei, //设备标识
p: plus.os.name === "Android" ? "a" : "i", //平台类型，i表示iOS平台，a表示Android平台。
md: plus.device.model, //设备型号
app_version: plus.runtime.version,
plus_version: plus.runtime.innerVersion, //基座版本号
os: plus.os.version,
net: "" + plus.networkinfo.getCurrentType()
}
this.sendDate = Object.assign(deviceInfo, this.sendDate);
},
methods: {
close(e) {
this.imageList.splice(e, 1);
},
chooseMsg() { //快速输入
uni.showActionSheet({
itemList: this.msgContents,
success: (res) => {
this.sendDate.content = this.msgContents[res.tapIndex];
}
})
},
chooseImg() { //选择图片
uni.chooseImage({
sourceType: ["camera", "album"],
sizeType: "compressed",
count: 5 - this.imageList.length,
success: (res) => {
this.imageList = this.imageList.concat(res.tempFilePaths);
}
})
},
chooseStar(e) { //点击评星
this.sendDate.score = e;
},
previewImage(index) { //预览图片
uni.previewImage({
urls: this.imageList,
current: this.imageList[index]
});
},
send() { //发送反馈
console.log(JSON.stringify(this.sendDate));
if (this.imageList.length === 0) {
uni.showModal({
content: '至少选择一张图片',
showCancel: false
})
return
}
if (this.sendDate.content.length === 0) {
uni.showModal({
content: '请输入问题和意见',
showCancel: false
})
return
}
uni.showLoading({
title: '上传中...'
})
let imgs = this.imageList.map((value, index) => {
return {
name: "images" + index,
uri: value
}
})
// TODO 服务端限制上传文件一次最大不超过 2M, 图片一次最多不超过5张
uni.uploadFile({
url: "https://service.dcloud.net.cn/feedback",
files: imgs,
formData: this.sendDate,
success: (res) => {
if (typeof res.data === 'string') {
res.data = JSON.parse(res.data)
}
if (res.statusCode === 200 && res.data && res.data.ret === 0) {
uni.showModal({
content: '反馈成功',
showCancel: false
})
this.imageList = [];
this.sendDate = Object.assign({},{
score: 0,
content: "",
contact: ""
})
} else if (res.statusCode !== 200){
uni.showModal({
content: '反馈失败，错误码为：' + res.statusCode,
showCancel: false
})
} else {
uni.showModal({
content: '反馈失败',
showCancel: false
})
}
},
fail: (res) => {
console.log(JSON.stringify(res))
},
complete() {
uni.hideLoading()
}
});
}
}
}
</script>
<style>
page {
background-color: #EFEFF4;
}
.input-view {
font-size: 28rpx;
}
.close-view {
text-align: center;
line-height: 14px;
height: 16px;
width: 16px;
border-radius: 50%;
background: #FF5053;
color: #FFFFFF;
position: absolute;
top: -6px;
right: -4px;
font-size: 12px;
}
</style>
<template>
<view class="page">
<view class="feedback-title">
<text>问题和意见</text>
<text class="feedback-quick" @tap="chooseMsg">快速键入</text>
</view>
<view class="feedback-body"><textarea placeholder="请详细描述你的问题和意见..." v-model="sendDate.content" class="feedback-textare"></textarea></view>
<view class="feedback-title"><text>图片(选填,提供问题截图,总大小10M以下)</text></view>
<view class="feedback-body feedback-uploader">
<view class="uni-uploader">
<view class="uni-uploader-head">
<view class="uni-uploader-title">点击预览图片</view>
<view class="uni-uploader-info">{{ imageList.length }}/5</view>
</view>
<view class="uni-uploader-body">
<view class="uni-uploader__files">
<block v-for="(image, index) in imageList" :key="index">
<view class="uni-uploader__file" style="position: relative;">
<image class="uni-uploader__img" :src="image" @tap="previewImage(index)"></image>
<view class="close-view" @click="close(index)">x</view>
</view>
</block>
<view class="uni-uploader__input-box" v-show="imageList.length < 5"><view class="uni-uploader__input" @tap="chooseImg"></view></view>
</view>
</view>
</view>
</view>
<view class="feedback-title"><text>QQ/邮箱</text></view>
<view class="feedback-body"><input class="feedback-input" v-model="sendDate.contact" placeholder="(选填,方便我们联系你 )" /></view>
<view class="feedback-title feedback-star-view">
<text>应用评分</text>
<view class="feedback-star-view"><uni-rate v-model="sendDate.score" color="#bbb"></uni-rate></view>
</view>
<button type="default" class="feedback-submit" @tap="send">提交</button>
<view class="feedback-title"><text>用户反馈的结果可在app打包后于DCloud开发者中心查看</text></view>
</view>
</template>
<script>
import uniRate from '@/components/uni-rate/uni-rate.vue';
export default {
components: { uniRate },
data() {
return {
msgContents: ['界面显示错乱', '启动缓慢，卡出翔了', 'UI无法直视，丑哭了', '偶发性崩溃'],
stars: [1, 2, 3, 4, 5],
imageList: [],
sendDate: {
score: 0,
content: '',
contact: ''
}
};
},
onLoad() {
this.deviceInfo = {
// appid: plus.runtime.appid,
appid: '__UNI__5D0B0CA',
imei: plus.device.imei, //设备标识
p: plus.os.name === 'Android' ? 'a' : 'i', //平台类型，i表示iOS平台，a表示Android平台。
md: plus.device.model, //设备型号
app_version: plus.runtime.version,
plus_version: plus.runtime.innerVersion, //基座版本号
os: plus.os.version,
net: '' + plus.networkinfo.getCurrentType()
};
this.sendDate = Object.assign(this.deviceInfo, this.sendDate);
},
methods: {
/**
* 关闭图片
* @param {Object} e
*/
close(e) {
this.imageList.splice(e, 1);
},
/**
* 快速输入
*/
chooseMsg() {
uni.showActionSheet({
itemList: this.msgContents,
success: res => {
this.sendDate.content = this.msgContents[res.tapIndex];
}
});
},
/**
* 选择图片
*/
chooseImg() {
//选择图片
uni.chooseImage({
sourceType: ['camera', 'album'],
sizeType: 'compressed',
count: 5 - this.imageList.length,
success: res => {
this.imageList = this.imageList.concat(res.tempFilePaths);
}
});
},
/**
* 评分
* @param {Object} e
*/
chooseStar(e) {
//点击评星
this.sendDate.score = e;
},
/**
* 预览图片
* @param {Object} index
*/
previewImage(index) {
uni.previewImage({
urls: this.imageList,
current: this.imageList[index]
});
},
/**
* 提交
*/
send() {
//发送反馈
if (this.sendDate.content.length === 0) {
uni.showModal({
content: '请输入问题和意见',
showCancel: false
});
return;
}
uni.showLoading({
title: '上传中...'
});
let imgs = this.imageList.map((value, index) => {
return {
name: 'images' + index,
uri: value
};
});
// TODO 服务端限制上传文件一次最大不超过 2M, 图片一次最多不超过5张
this.request(this.sendDate, imgs)
.then(res => {
if (typeof res.data === 'string') {
res.data = JSON.parse(res.data);
}
if (res.statusCode === 200 && res.data && res.data.ret === 0) {
uni.showModal({
content: '反馈成功',
showCancel: false
});
this.imageList = [];
this.sendDate = Object.assign(this.deviceInfo, {
score: 0,
content: '',
contact: ''
});
} else if (res.statusCode !== 200) {
uni.showModal({
content: '反馈失败，错误码为：' + res.statusCode,
showCancel: false
});
} else {
uni.showModal({
content: '反馈失败',
showCancel: false
});
}
})
.catch(err => {
console.log(err);
});
},
/**
* 发送请求到后台
*/
request(sendDate, imgs) {
return new Promise((resolve, reject) => {
let fromData = {
url: 'https://service.dcloud.net.cn/feedback',
success: res => {
resolve(res);
},
fail: res => {
reject(res);
},
complete() {
uni.hideLoading();
}
};
if (imgs.length > 0) {
fromData.files = imgs;
fromData.formData = sendDate;
uni.uploadFile(fromData);
} else {
fromData.data = sendDate;
fromData.method = 'POST';
uni.request(fromData);
}
});
}
}
};
</script>
<style>
page {
background-color: #efeff4;
}
.input-view {
font-size: 28rpx;
}
.close-view {
text-align: center;
line-height: 14px;
height: 16px;
width: 16px;
border-radius: 50%;
background: #ff5053;
color: #ffffff;
position: absolute;
top: -6px;
right: -4px;
font-size: 12px;
}
</style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或