222 lines
5.4 KiB
Vue
222 lines
5.4 KiB
Vue
<template>
|
||
<view class="uni-container">
|
||
<view id="navbar">
|
||
<u-navbar :autoBack="true" :bgColor="bgColor">
|
||
<view slot='center' style="font-size: 36rpx; font-weight: bold;">
|
||
投诉建议
|
||
</view>
|
||
</u-navbar>
|
||
</view>
|
||
<view id="menu" class="menu" :style="{'padding-top': navHeight + 'px'}">
|
||
<view :class="{ active: menuIndex === '0' }" @click="tabMenu('0')">投诉建议</view>
|
||
<view :class="{ active: menuIndex === '1' }" @click="tabMenu('1')">我的投诉</view>
|
||
</view>
|
||
<view v-show="menuIndex === '0'" :style="{'padding-top': navHeight + 'px'}">
|
||
<complaintForm />
|
||
</view>
|
||
<view class="list-container" v-show="menuIndex === '1'">
|
||
<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption" :top="paddingTop + 'px'">
|
||
<view class="list_waper">
|
||
<view class="list" v-for="(item, index) in list " :key="index" @click="goDetails(item)">
|
||
<view class="title">{{item.scenicName}}({{item.typeName}})</view>
|
||
<view class="describe">{{item.content}}</view>
|
||
<view class="foot">
|
||
<view class="time">{{$utils.formatDate('Y-M-D', item.createTime)}}</view>
|
||
<view class="state state1" v-if="item.status == 0">已提交</view>
|
||
<view class="state" v-if="item.status == 1">已处理</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</mescroll-body>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import complaintForm from "./complaintForm"
|
||
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
|
||
export default {
|
||
mixins: [MescrollMixin],
|
||
components: {
|
||
complaintForm
|
||
},
|
||
data() {
|
||
return {
|
||
bgColor: '#FFF',
|
||
menuIndex: '0',
|
||
navHeight: 0,
|
||
paddingTop: 0,
|
||
topHeight: 0,
|
||
list: []
|
||
};
|
||
},
|
||
onLoad(options) {
|
||
this.navHeight = this.$paddingTop;
|
||
this.paddingTop = this.$paddingTop + uni.upx2px(88);
|
||
this.topHeight = this.navHeight + this.paddingTop + 'px'
|
||
},
|
||
onShow () {
|
||
this.mescroll && this.mescroll.resetUpScroll();
|
||
},
|
||
methods: {
|
||
tabMenu (index) {
|
||
this.menuIndex = index;
|
||
this.mescroll.resetUpScroll();
|
||
},
|
||
async upCallback (page) {
|
||
let obj = { pageNum: page.num, pageSize: page.size };
|
||
let info = await this.$http.reportList(obj);
|
||
if(page.num == 1) this.list = [];
|
||
this.list = this.list.concat(info.rows);
|
||
this.mescroll.endBySize(info.rows.length, info.total);
|
||
},
|
||
goDetails(item) {
|
||
uni.navigateTo({
|
||
url: `/pages/my/complaintDet?id=${item.id}`
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.uni-container {
|
||
width: 100%;
|
||
min-height: 100vh;
|
||
box-sizing: border-box;
|
||
background-color: #FBFBFB;
|
||
.menu {
|
||
width: 100%;
|
||
height: 88rpx;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
position: fixed;
|
||
background: #FFF;
|
||
z-index: 1;
|
||
view{
|
||
line-height: 46rpx;
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
&.active{
|
||
position: relative;
|
||
color: #01BE69;
|
||
font-weight: 500;
|
||
&::after{
|
||
content: "";
|
||
width: 30rpx;
|
||
height: 4rpx;
|
||
position: absolute;
|
||
left: 50%;
|
||
bottom: -4rpx;
|
||
transform: translateX(-50%);
|
||
background: #01BE69;
|
||
border-radius: 12rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.list-container{
|
||
.list_waper{
|
||
width: 100%; box-sizing: border-box; padding: 0 32rpx; padding-bottom: 40rpx;
|
||
.list{
|
||
margin-top: 24rpx; width: 100%; background: #fff; box-sizing: border-box; padding: 24rpx;
|
||
.title {
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
width: 630rpx;
|
||
display: block;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
-o-text-overflow: ellipsis;
|
||
}
|
||
.describe {
|
||
width: 630rpx;
|
||
margin-top: 16rpx;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #999999;
|
||
line-height: 40rpx;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
.foot {
|
||
margin-top: 24rpx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.time {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
}
|
||
.state {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #999999;
|
||
}
|
||
.state1 {
|
||
color: #01BE69;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
/deep/.uniui-right {
|
||
font-size: 34rpx !important;
|
||
color: #999999 !important;
|
||
}
|
||
/deep/.input-placeholder {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #999999!important;
|
||
}
|
||
/deep/.u-textarea {
|
||
background: #FBFBFB !important;
|
||
border-radius: 10rpx !important;
|
||
padding: 30rpx 26rpx !important;
|
||
.input-placeholder {
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #999999;
|
||
}
|
||
.u-textarea__field {
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
.u-textarea__count {
|
||
background-color: #FBFBFB !important;
|
||
}
|
||
}
|
||
/deep/.u-upload__wrap {
|
||
.u-upload__wrap__preview {
|
||
margin: 23rpx 58rpx 0 0;
|
||
&:nth-child(3n) {
|
||
margin-right: 0;
|
||
}
|
||
.u-upload__wrap__preview__image {
|
||
width: 172rpx !important;
|
||
height: 172rpx !important;
|
||
border-radius: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
/deep/.weui-input {
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
/deep/.input-placeholder {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #999999!important;
|
||
}
|
||
</style> |