first commit
This commit is contained in:
222
pages/my/complaint.vue
Normal file
222
pages/my/complaint.vue
Normal file
@@ -0,0 +1,222 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user