389 lines
9.9 KiB
Vue
389 lines
9.9 KiB
Vue
<template>
|
|
<view class="page" :style="themeColor">
|
|
<view
|
|
class="flex flex-direction flex-wrap align-stretch justify-center benben-position-layout flex appealPage_flex_0"
|
|
:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
|
|
<view class='flex flex-wrap align-stretch justify-between appealPage_fd0_0'>
|
|
<view class='flex flex-wrap align-center appealPage_fd0_0_c0' @tap.stop="handleJumpDiy" data-type="back"
|
|
data-url="1">
|
|
<text class='fu-iconfont2 appealPage_fd0_0_c0_c0'></text>
|
|
</view>
|
|
<view class='flex flex-wrap align-center'>
|
|
<text class='appealPage_fd0_0_c1_c0'>申诉</text>
|
|
</view>
|
|
<view class='flex align-center justify-end appealPage_fd0_0_c2' @tap.stop="handleJumpDiy"
|
|
data-type="navigateTo" :data-url="`/`">
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
|
|
<!---意见反馈表单flex布局开始-->
|
|
<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout appealPage_flex_1">
|
|
<view class='flex flex-wrap align-center appealPage_fd1_0'>
|
|
<text class='appealPage_fd1_0_c0'>申诉类型</text>
|
|
</view>
|
|
<view class='flex flex-direction flex-wrap align-stretch appealPage_fd1_1'>
|
|
<benben-select-diy ref="showSelectPopup1681201808828" class-name='flex flex-wrap align-center flex'
|
|
:items.sync="select_type" v-model="select_id" default-type="aid" default-label="title"
|
|
:allow-cancel='false' type="radio" :disabled='false' @change="change">
|
|
<template v-for='(item,key0) in select_type'>
|
|
<view v-if="item.isSelected"
|
|
class='flex align-center justify-center flex appealPage_fd1_1_c0_c0' :key="key0"
|
|
@tap="$refs.showSelectPopup1681201808828.tapHandle(key0)">
|
|
<text class='flex-sub appealPage_fd1_1_c0_c0_c0'>{{item.title}}</text>
|
|
</view>
|
|
<view v-else class='flex align-center justify-center flex appealPage_fd1_1_c0_c1' :key="key0"
|
|
@tap="$refs.showSelectPopup1681201808828.tapHandle(key0)">
|
|
<text class='flex-sub appealPage_fd1_1_c0_c1_c0'>{{item.title}}</text>
|
|
</view>
|
|
</template>
|
|
</benben-select-diy>
|
|
</view>
|
|
<text class='appealPage_fd1_2'>申诉内容</text>
|
|
<view class='flex flex-direction flex-wrap align-stretch appealPage_fd1_3'>
|
|
<view class='flex flex-wrap appealPage_fd1_3_c0'>
|
|
<textarea class='flex appealPage_input_fd1_3_c0' confirm-type="done"
|
|
:placeholder="'问题描述的越详细，有助于我们更快的解决问题'" :maxlength="240"
|
|
placeholder-style="color:rgba(191, 191, 191, 1);font-size:28rpx" v-model="problemDescription" />
|
|
|
|
</view>
|
|
<view class='flex flex-direction flex-wrap align-stretch appealPage_fd1_3_c1'>
|
|
<view class="upload position-relative appealPage_fd1_3_c1_c0">
|
|
<text v-if="fd1_3_c1_c0 != ''" @tap="fd1_3_c1_c0 = ''"
|
|
class='fu-iconfont2 position-absolute appealPage_fd1_3_c1_c0_icon'></text>
|
|
<image class=" appealPage_fd1_3_c1_c0_image" mode="aspectFill"
|
|
@tap="soloChooseImage('fd1_3_c1_c0id','fd1_3_c1_c0',false,false)"
|
|
:src="fd1_3_c1_c0 ? fd1_3_c1_c0 : STATIC_URL+'50.png'"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!---意见反馈表单flex布局结束-->
|
|
<!---flex布局flex布局开始-->
|
|
<view class="flex benben-flex-layout flex-wrap align-center">
|
|
<view class='flex flex-wrap align-center flex-sub appealPage_fd2_0'>
|
|
</view>
|
|
</view>
|
|
|
|
<!---flex布局flex布局结束-->
|
|
<view class="flex flex-wrap align-start justify-center benben-position-layout flex appealPage_flex_3">
|
|
<button class='flex-sub appealPage_fd3_0' @tap.stop="sumbitFunc()">提交</button>
|
|
|
|
</view>
|
|
<view :style="{height: '136rpx'}"></view>
|
|
|
|
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import UploadImage from '@/common/utils/upload-image.js'
|
|
import {
|
|
validate
|
|
} from '@/common/utils/validate.js'
|
|
export default {
|
|
components: {},
|
|
|
|
|
|
data() {
|
|
return {
|
|
"fd1_3_c1_c0": "",
|
|
"fd1_3_c1_c0id": "",
|
|
"select_id": "",
|
|
"select_type": [],
|
|
"problemDescription": "",
|
|
"singleImageUpload": [],
|
|
"contactInformation": "",
|
|
"id": "",
|
|
title:""
|
|
};
|
|
},
|
|
computed: {
|
|
themeColor() {
|
|
return this.$store.getters.themeColor
|
|
},
|
|
|
|
},
|
|
watch: {},
|
|
onLoad(options) {
|
|
let {comment_id} = options
|
|
if (comment_id !== undefined) this.id = comment_id
|
|
// 获取反馈类型数据
|
|
this.get_feedback_type();
|
|
},
|
|
methods: {
|
|
change(e){
|
|
console.log(e)
|
|
this.title = e.value
|
|
},
|
|
/**
|
|
* @description 获取反馈类型数据
|
|
*/
|
|
get_feedback_type() {
|
|
let that = this;
|
|
this.$api
|
|
.post(global.apiUrls.appealTypes)
|
|
.then(res => {
|
|
console.log(res);
|
|
if (res.data.code == 1) {
|
|
let result = res.data.data;
|
|
that.select_type = result; //获取反馈类型数据
|
|
// that.active = 0; //默认选中第一个反馈类型
|
|
// that.typesname = result[0] && result[0].title; //默认选中第一个反馈类型
|
|
}
|
|
})
|
|
.catch(err => {
|
|
console.log(err);
|
|
});
|
|
},
|
|
//上传单图、多图方法
|
|
soloChooseImage(id, path, obj, obj1, fnName = false) {
|
|
let self = this
|
|
if (!obj) obj = this
|
|
if (!obj1) obj1 = this
|
|
if (self.uploading) {
|
|
return
|
|
}
|
|
// 从相册中选择图片
|
|
uni.chooseImage({
|
|
count: 1, // 默认3
|
|
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
|
|
success: function(res) {
|
|
self.uploading = true
|
|
// 开始上传
|
|
new UploadImage(res.tempFiles, {
|
|
complete: function(res) {
|
|
self.uploading = false
|
|
if (id) self.$set(obj, id, res[0].id)
|
|
if (path) self.$set(obj1, path, res[0].path)
|
|
if (fnName) self[fnName]()
|
|
},
|
|
})
|
|
},
|
|
})
|
|
},
|
|
//提交
|
|
sumbitFunc() {
|
|
console.log(this.select_id)
|
|
|
|
|
|
if (!validate(this.select_id, 'require')) {
|
|
this.$message.info('反馈类型不能为空');
|
|
return false;
|
|
}
|
|
if (!validate(this.problemDescription, 'require')) {
|
|
this.$message.info('问题描述不能为空');
|
|
return false;
|
|
}
|
|
if (!(this.fd1_3_c1_c0)) {
|
|
this.$message.info('图片不能为空');
|
|
return false;
|
|
}
|
|
|
|
this.$api.post(global.apiUrls.appealAdd, {
|
|
type:this.title,
|
|
order_sn : this.id,
|
|
images:this.fd1_3_c1_c0,
|
|
content:this.problemDescription
|
|
}).then(res => {
|
|
this.$message.info(res.data.msg);
|
|
console.log(res);
|
|
if (res.data.code == 1) {
|
|
// 提交成功返回上页面
|
|
setTimeout(() => {
|
|
uni.navigateBack();
|
|
// _this.$urouter.redirectTo('/pages/index/setting/my-feedback');
|
|
}, 1200);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.page {
|
|
width: 100vw;
|
|
overflow-x: hidden;
|
|
min-height: calc(100vh - var(--window-bottom));
|
|
background: rgba(255, 255, 255, 1);
|
|
background-size: 100% auto !important;
|
|
}
|
|
|
|
.appealPage_flex_0 {
|
|
border-bottom: 1px solid #eee;
|
|
background: #fff;
|
|
width: 750rpx;
|
|
height: 88rpx;
|
|
overflow: hidden;
|
|
z-index: 10;
|
|
top: 0rpx;
|
|
background-size: 100% auto !important;
|
|
}
|
|
|
|
.appealPage_fd0_0_c2 {
|
|
padding: 0rpx 0rpx 0rpx 0rpx;
|
|
width: 200rpx;
|
|
}
|
|
|
|
.appealPage_fd0_0_c1_c0 {
|
|
font-size: 36rpx;
|
|
font-weight: 600;
|
|
color: rgba(55, 55, 55, 1);
|
|
line-height: 36rpx;
|
|
}
|
|
|
|
.appealPage_fd0_0_c0_c0 {
|
|
font-size: 36rpx;
|
|
font-weight: 400;
|
|
color: #333;
|
|
}
|
|
|
|
.appealPage_fd0_0_c0 {
|
|
width: 200rpx;
|
|
}
|
|
|
|
.appealPage_fd0_0 {
|
|
padding: 0rpx 32rpx 0rpx 32rpx;
|
|
line-height: 88rpx;
|
|
}
|
|
|
|
.appealPage_flex_1 {
|
|
background: #fff;
|
|
background-size: 100% auto !important;
|
|
}
|
|
|
|
.appealPage_fd1_3_c1_c0_image {
|
|
width: 180rpx;
|
|
height: 180rpx;
|
|
}
|
|
|
|
.appealPage_fd1_3_c1_c0_icon {
|
|
top: 0rpx;
|
|
right: 0rpx;
|
|
z-index: 10;
|
|
color: #ff5536;
|
|
}
|
|
|
|
.appealPage_fd1_3_c1_c0 {
|
|
width: 180rpx;
|
|
height: 180rpx;
|
|
}
|
|
|
|
.appealPage_fd1_3_c1 {
|
|
padding: 0rpx 0rpx 0rpx 32rpx;
|
|
}
|
|
|
|
.appealPage_input_fd1_3_c0 {
|
|
width: 100%;
|
|
height: 166rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #333;
|
|
}
|
|
|
|
.appealPage_fd1_3_c0 {
|
|
width: 686rpx;
|
|
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
|
margin: 0rpx 0rpx 0rpx 32rpx;
|
|
padding: 0rpx 0rpx 24rpx 0rpx;
|
|
}
|
|
|
|
.appealPage_fd1_3 {
|
|
margin: 0rpx 0rpx 32rpx 0rpx;
|
|
}
|
|
|
|
.appealPage_fd1_2 {
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
color: #1A1A1A;
|
|
line-height: 109rpx;
|
|
margin: 0rpx 32rpx 0rpx 32rpx;
|
|
}
|
|
|
|
.appealPage_fd1_1_c0_c1_c0 {
|
|
-webkit-line-clamp: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
.appealPage_fd1_1_c0_c1 {
|
|
border: 1px solid rgba(191, 191, 191, 1);
|
|
background: #fff;
|
|
margin: 24rpx 16rpx 0rpx 16rpx;
|
|
height: 64rpx;
|
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
|
width: 206rpx;
|
|
color: rgba(153, 153, 153, 1);
|
|
font-size: 28rpx;
|
|
line-height: 64rpx;
|
|
font-weight: 400;
|
|
text-align: center;
|
|
}
|
|
|
|
.appealPage_fd1_1_c0_c0_c0 {
|
|
-webkit-line-clamp: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
.appealPage_fd1_1_c0_c0 {
|
|
background: rgba(255, 147, 0, 1);
|
|
margin: 24rpx 16rpx 0rpx 16rpx;
|
|
height: 64rpx;
|
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
|
width: 206rpx;
|
|
color: rgba(255, 255, 255, 1);
|
|
font-size: 28rpx;
|
|
line-height: 64rpx;
|
|
font-weight: 400;
|
|
text-align: center;
|
|
}
|
|
|
|
.appealPage_fd1_1 {
|
|
border-bottom: 10px solid rgba(246, 247, 248, 1);
|
|
padding: 0rpx 16rpx 30rpx 16rpx;
|
|
}
|
|
|
|
.appealPage_fd1_0_c0 {
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
color: #1A1A1A;
|
|
margin: 0rpx 32rpx 0rpx 32rpx;
|
|
}
|
|
|
|
.appealPage_fd1_0 {
|
|
padding: 32rpx 0rpx 0rpx 0rpx;
|
|
}
|
|
|
|
.appealPage_fd2_0 {
|
|
background: rgba(246, 247, 249, 1);
|
|
height: 20rpx;
|
|
background-size: 100% auto !important;
|
|
}
|
|
|
|
.appealPage_flex_3 {
|
|
width: 750rpx;
|
|
height: 136rpx;
|
|
overflow: hidden;
|
|
z-index: 10;
|
|
bottom: calc(0rpx + var(--window-bottom));
|
|
}
|
|
|
|
.appealPage_fd3_0 {
|
|
background: rgba(255, 147, 0, 1);
|
|
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
|
font-size: 32rpx;
|
|
color: #fff;
|
|
margin: 0rpx 32rpx 0rpx 32rpx;
|
|
height: 88rpx;
|
|
line-height: 88rpx;
|
|
width: 686rpx;
|
|
font-weight: 400;
|
|
}
|
|
</style>
|