zhwl-miniapp/pages/my/complaint.vue

222 lines
5.4 KiB
Vue
Raw Permalink Normal View History

2025-06-26 12:38:35 +08:00
<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>