328 lines
8.0 KiB
Vue
328 lines
8.0 KiB
Vue
<!-- 意见反馈 -->
|
|
<template>
|
|
<view class="feedback-page">
|
|
<NavCom title="意见反馈"></NavCom>
|
|
<scroll-view scroll-y="true" class="scroll-main">
|
|
<view class="header-title">
|
|
问题与建议<text class="header-xing">*</text>
|
|
</view>
|
|
<textarea class="main-content" placeholder="请输入内容，我们将不断改进~" maxlength="200" placeholder-class="place-class" v-model="from.content"></textarea>
|
|
<view class="textarea-num">
|
|
{{from.content.length}}/200字
|
|
</view>
|
|
|
|
<view class="header-title">
|
|
图片上传(限3张)<text class="header-xing">*</text>
|
|
</view>
|
|
<view class="photo">
|
|
<view class="upload-img" v-for="(item,index) in imgList" :key="index" :style="{'backgroundImage':`url(${item})`}">
|
|
<image src="https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/mine/del.png" mode="" class="del-img" @click="del(index)"></image>
|
|
</view>
|
|
<view class="upload" @click="upLoadImg" v-if="imgList.length < 3">
|
|
<image src="https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/mine/img.png" mode="" class="upload-up"></image>
|
|
</view>
|
|
</view>
|
|
<view class="header-title" style="margin-bottom: 32rpx;">
|
|
联系信息<text class="header-xing">*</text>
|
|
</view>
|
|
<view class="info">
|
|
<input type="text" placeholder="请填写您的姓名" class="info-name" v-model="from.contact" maxlength="32" placeholder-class="place-class">
|
|
<input type="text" placeholder="请填写您的电话或者邮箱" class="info-name" v-model="from.phone" maxlength="32" placeholder-class="place-class">
|
|
<input type="text" placeholder="请填写您的订单编号" class="info-name" v-model="from.orderNo" maxlength="32" placeholder-class="place-class">
|
|
</view>
|
|
<!-- <input type="text" placeholder="请填写您的订单编号" class="order-sn" v-model="from.orderNo" maxlength="32"> -->
|
|
<view class="main-tip">您的信息遵循隐藏保护协议，仅官方客服人员可见！</view>
|
|
<view class="main-btn" @click="submit">提交</view>
|
|
</scroll-view>
|
|
|
|
<!-- 所有页面的弹框 -->
|
|
<page-popup page="/pages/mine/feedback"></page-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { myMixins } from "@/mixins/mixins.js";
|
|
import {
|
|
uploadToken,feedback
|
|
} from '@/API/user.js'
|
|
import NavCom from '@/pages/components/nav.vue'
|
|
export default {
|
|
mixins: [myMixins],
|
|
data() {
|
|
return {
|
|
from: {
|
|
contact: "",
|
|
phone: "",
|
|
orderNo: "",
|
|
images: "",
|
|
content: "",
|
|
images:""
|
|
},
|
|
imgList:[]
|
|
}
|
|
},
|
|
components:{NavCom},
|
|
mounted() {
|
|
|
|
},
|
|
methods: {
|
|
// 上传图片
|
|
upLoadImg() {
|
|
console.log("aaa")
|
|
uni.chooseImage({
|
|
count: 3,
|
|
sourceType:['album'],
|
|
sizeType:['compressed'],
|
|
success: (chooseImageRes) => {
|
|
console.log("chooseImageRes:",chooseImageRes)
|
|
const tempFilePaths = chooseImageRes.tempFilePaths;
|
|
// if (res.tempFiles[i].size > 2097152) return this.$main.showToast('您上传的图片过大，请重新上传')
|
|
chooseImageRes.tempFiles.forEach((item, index) => {
|
|
return new Promise((resolve, reject) => {
|
|
if (item.size > 2097152) return this.$api.msg('您上传的图片过大，请重新上传')
|
|
const filename = new Date().getTime() + item.name
|
|
uni.showLoading()
|
|
uploadToken({
|
|
filename: filename,
|
|
dir: 'feedback'
|
|
}).then(res => {
|
|
|
|
console.log(res)
|
|
console.log(tempFilePaths[index])
|
|
if (res.code === 200) {
|
|
uni.uploadFile({
|
|
url: res.data.host,
|
|
filePath: tempFilePaths[index],
|
|
name: filename,
|
|
formData: {
|
|
policy: res.data.policy,
|
|
signature: res.data.signature,
|
|
key: res.data.key,
|
|
OSSAccessKeyId: res.data
|
|
.accessId,
|
|
dir: res.data.key,
|
|
host: res.data.host,
|
|
file: chooseImageRes.tempFiles[
|
|
index],
|
|
},
|
|
success: (uploadFileRes) => {
|
|
if(this.imgList.length < 3){
|
|
this.imgList.push(res.data.host+'/'+res.data.key)
|
|
}
|
|
|
|
uni.hideLoading()
|
|
console.log(this.imgList)
|
|
}
|
|
});
|
|
} else {
|
|
// uni.hideLoading()
|
|
this.$api.msg(res.message)
|
|
}
|
|
resolve(true);
|
|
})
|
|
.catch((err) => {
|
|
// uni.hideLoading()
|
|
reject(false);
|
|
});
|
|
});
|
|
})
|
|
|
|
// this.getToken()
|
|
|
|
}
|
|
});
|
|
},
|
|
del(index){
|
|
this.imgList.splice(index,1)
|
|
},
|
|
submit(){
|
|
uni.showLoading()
|
|
if(this.imgList.length > 0){
|
|
this.from.images = this.imgList.join(',')
|
|
}else{
|
|
this.$api.msg('请选择图片');
|
|
return
|
|
}
|
|
if(!this.from.content){
|
|
this.$api.msg('请输入内容');
|
|
return
|
|
}
|
|
if(!this.from.contact){
|
|
this.$api.msg('请输入姓名');
|
|
return
|
|
}
|
|
if(!this.from.phone){
|
|
this.$api.msg('请输入电话或邮箱');
|
|
return
|
|
}
|
|
// if(!this.from.orderNo){
|
|
// this.$api.msg('请输入订单编号');
|
|
// return
|
|
// }
|
|
feedback(this.from).then(res => {
|
|
uni.hideLoading()
|
|
if(res.code === 200){
|
|
this.$api.msg('提交成功')
|
|
uni.navigateBack()
|
|
}else{
|
|
this.$api.msg(res.message)
|
|
}
|
|
}).catch(err => {
|
|
uni.hideLoading()
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page{
|
|
background-image: url('@/static/index/bg.png');
|
|
background-size: 100%;
|
|
}
|
|
.feedback-page {
|
|
.scroll-main{
|
|
padding-top: 130rpx;
|
|
height: 100vh;
|
|
.header-title {
|
|
// padding: 40rpx 32rpx;
|
|
padding-left: 22rpx;
|
|
display: flex;
|
|
align-content: center;
|
|
font-weight: 500;
|
|
font-size: 30rpx;
|
|
color: #333333;
|
|
|
|
.header-xing {
|
|
font-weight: 500;
|
|
font-size: 30rpx;
|
|
color: #EF4234;
|
|
}
|
|
}
|
|
|
|
.main-content {
|
|
margin-top: 33rpx;
|
|
margin-left: 22rpx;
|
|
width: 706rpx;
|
|
height: 295rpx;
|
|
background: #EDEDED;
|
|
border-radius: 20rpx;
|
|
padding: 31rpx;
|
|
color: #333;
|
|
font-size: 26rpx;
|
|
}
|
|
.place-class{
|
|
color: #C8C8C8;
|
|
}
|
|
|
|
.textarea-num {
|
|
width: 100%;
|
|
height: 64rpx;
|
|
text-align: right;
|
|
font-size: 28rpx;
|
|
color: #999999;
|
|
padding-right: 32rpx;
|
|
margin-top: 20rpx;
|
|
// background-color: #fff;
|
|
}
|
|
|
|
.photo {
|
|
// background-color: #fff;
|
|
padding: 22rpx 0 0rpx 32rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
|
|
.upload {
|
|
width: 176rpx;
|
|
height: 170rpx;
|
|
background-color: #F6F7FB;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 16rpx;
|
|
margin-bottom: 20rpx;
|
|
|
|
.upload-up {
|
|
width: 64rpx;
|
|
height: 60rpx;
|
|
}
|
|
}
|
|
|
|
.upload-img {
|
|
width: 176rpx;
|
|
height: 170rpx;
|
|
background-size: 100%;
|
|
background-position: 50%;
|
|
background-repeat: no-repeat;
|
|
border-radius: 16rpx;
|
|
margin-bottom: 20rpx;
|
|
margin-right: 30rpx;
|
|
position: relative;
|
|
.del-img{
|
|
position: absolute;
|
|
top: -16rpx;
|
|
right: -16rpx;
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.info {
|
|
padding: 0 23rpx;
|
|
// background-color: #fff;
|
|
|
|
.info-name {
|
|
width: 704rpx;
|
|
height: 84rpx;
|
|
background: #EDEDED;
|
|
border-radius: 42rpx;
|
|
padding: 0 27rpx;
|
|
font-size: 26rpx;
|
|
margin-bottom: 17rpx;
|
|
}
|
|
|
|
.border-bottom {
|
|
// border-bottom: 2rpx solid #F2F2F2;
|
|
}
|
|
|
|
.info-phone {
|
|
height: 104rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
.order-sn {
|
|
background-color: #fff;
|
|
height: 100rpx;
|
|
margin-top: 50rpx;
|
|
padding: 0 32rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.main-tip {
|
|
margin-top: 70rpx;
|
|
color: #D93E60;
|
|
font-size: 24rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.main-btn {
|
|
margin-top: 20rpx;
|
|
width: 706rpx;
|
|
height: 88rpx;
|
|
background: linear-gradient(90deg, #EF4033 0%, #FF9F98 100%);
|
|
border-radius: 44rpx;
|
|
font-size: 32rpx;
|
|
color: #FFFFFF;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-left: 23rpx;
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|