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>
|