wanmeiyizhan/pages/homeFn/complaints/index.vue

<template>
	<div class="complaints">
	
		<div class="complaints-content" >
			
			<div class="complaints-content-unit" v-for="(unit,i) in complaintsRecord" :key="i" @click="goDetail(unit)">
				
				<div class="">
					
					<p class="cp-u-type">
						<span>{{unit.date}}</span>
						<span class="colorOr">{{unit.SUGGESTION_STATE}}</span>
					</p>
					<p class="cp-u-title">{{unit.SUGGESTION_REASON}} </p>
					<div class="cp-u-type">
						<span class="fwq">{{unit.SERVERPART_NAME}}</span>
						<div style="display:flex;align-items:center;justify-centent:flex-end;">
							<span class="ry">{{unit.SUGGESTION_NAME}}</span>
							<span class="dh">{{unit.PHONE_NUMBER}}</span>
						</div>
					</div>
				</div>
				<div class='cp-u-left'>
					<image mode="aspectFill" v-if="unit.IMAGELIST.length>0" :src="unit.IMAGELIST[0].IMAGE_URL"></image>
					<image mode="aspectFill" v-else src='https://eshangtech.com/ShopICO/no-picture.png'></image>
				</div>
			</div>
			<div class="loading-text" v-if="complaintsRecord.length>0 ">{{pageMsg.isLoadMore? '正在加载数据...':'——— 我是有底线的 ———'}}</div>
		</div>
		<div v-if="loadingType==0">
			<no-data :text="'暂无投诉建议'" :isShow="complaintsRecord.length" />
		</div>
		<div class="rate-box" @click="goNew">
            <image src="/static/images/jianyi-ico.png" mode="aspectFit" class="yj-ico"/>
			<div class="rate-ico">投诉建议</div>
		</div>
	</div>
</template>

<script>
import noData from '@/components/noData.vue'
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      loadingType: 1,
      complaintsRecord: [],

      pageMsg: {
        pageSize: 10,
        pageIndex: 1,
        isLoadMore: true,
        isScreen: false
      }
    }
  },
  components: {
    noData
  },
  computed: {
    ...mapGetters(['user', 'serverPart'])
  },
  methods: {

    getConsuptionRecord () {
      let _this = this

      _this.$api.getCoop({
        action_type: 'GetSuggestionList',
        wechatOpenid: _this.user.WECHATAPP_OPENID,
        provinceCode: _this.serverPart.ProvinceCode,
        // ServerPartID: _this.serverPart.ServerPart_Id,
        suggestionType: '2000,1000,4000',
        pageSize: _this.pageMsg.pageSize,
        pageIndex: _this.pageMsg.pageIndex

      }).then(function (res) {
        // _this.complaintsRecord = res.Data.List
        if (_this.pageMsg.pageIndex === 1) {
          _this.complaintsRecord = res.Data.List
        } else {
          _this.complaintsRecord = _this.complaintsRecord.concat(res.Data.List)
        }
        if (res.Data.TotalCount > _this.complaintsRecord.length) {
          _this.pageMsg.isLoadMore = true
        } else {
          _this.pageMsg.isLoadMore = false
        }
        res.Data.List.map(v => {
          if (v.SUGGESTION_STATE === 1000) {
            v.SUGGESTION_STATE = '待处理'
          } else if (v.SUGGESTION_STATE === 2000) {
            v.SUGGESTION_STATE = '待反馈'
          } else if (v.SUGGESTION_STATE === 3000) {
            v.SUGGESTION_STATE = '已处理'
          }
          v.date = _this.$utils.cutDate(new Date(v.SUGGESTION_CREATEDATE), 'YYYY-MM-DD hh:mm:ss')
        })

        _this.loadingType = 0
      })
    },
    goDetail (item) {
      mpvue.navigateTo({url: '/pages/homeFn/complaintsDetail/main?id=' + item.SUGGESTION_ID})
    },
    goNew () {
      mpvue.navigateTo({url: '/pages/homeFn/newComplaints/main'})
    }
  },
  onPullDownRefresh () {
    let _this = this
    // _this.complaintsRecord = []
    _this.pageMsg.isLoadMore = true
    _this.pageMsg.pageIndex = 1
    _this.getConsuptionRecord()

    setTimeout(function () {
      mpvue.stopPullDownRefresh()
    }, 1000)
  },
  onReachBottom () {
    if (this.pageMsg.isLoadMore) {
      this.pageMsg.pageIndex += 1
      this.getConsuptionRecord()
    }
  },
  onShow () {
    this.pageMsg.pageIndex = 1
    this.pageMsg.isLoadMore = true
    this.getConsuptionRecord()
  }
}
</script>

<style lang="stylus" scoped>
.complaints
	background #fff
	height 100vh
	padding-bottom 96rpx
	box-sizing border-box

.complaints-btn-box 
	display flex
	justify-content space-around
	padding 40rpx 0
	background-color #fff

.complaints-btn 
	width 210rpx
	height 80rpx
	line-height 80rpx
	border-radius 40rpx
	text-align center
	color #fff
	background-color #4aa3f5
	box-shadow 0 0 8rpx #4aa3f5


.complaints-content 
	padding 0 32rpx

.complaints-content-date 
	color #999
	font-size 12px
	padding-bottom 10rpx
	padding-left 40rpx

.complaints-content-unit 
	display flex
	padding 24rpx 0 
	line-height 42rpx
	// justify-content space-between
	align-items center
	background-color #fff
	border-bottom 1rpx solid #eee
	// margin-top 28rpx

.cp-u-left 
	display flex
	justify-content flex-start
	align-items center
	margin-left 16rpx
	image
		height 178rpx
		width 204rpx
		border-radius 8rpx
		background #828282
.cp-u-title 
	font-size 30rpx
	color #000
	height 88rpx
	width 450rpx
	display -webkit-box
	-webkit-box-orient vertical
	-webkit-line-clamp 2
	overflow hidden
	text-overflow ellipsis
	margin 8rpx 0
.cp-u-type
	display flex
	justify-content space-between
	align-items center
	font-size 24rpx
	color #666
.fwq
	font-size 22rpx
	border-radius 30rpx
	height 40rpx
	line-height 40rpx
	padding 0 16rpx
	border 1rpx solid #ededed
.ry,
.dh
	display flex
	align-items center
	font-size 22rpx
.dh
	margin-left 16rpx
.ry:before
	content ''
	background #fff url("https://eshangtech.com/ShopICO/icos/tsjy_ry.png") no-repeat center
	background-size contain
	height 24rpx
	width 21rpx
	margin-right 4rpx
.dh:before
	content ''
	background #fff url("https://eshangtech.com/ShopICO/icos/tsjy_sjh.png") no-repeat center
	background-size contain
	height 24rpx
	width 17rpx
	margin-right 4rpx
.colorOr
	color #D86E35
.colorGr 
	color #45AB58
.cp-u-price 
	text-align right
	font-size 32rpx

.rate-box
	width 204rpx
	height 82rpx
	box-sizing border-box
	position fixed
	bottom 30%
	right 0
	display flex
	padding 23rpx 22rpx
	border 1rpx solid #ebedee
	border-radius 42rpx 0 0 42rpx 
	box-shadow 0 0 8rpx 2rpx #ececec
	background linear-gradient(to right, #FBFBFB,#E4E7EA)
	box-shadow 0 4rpx 10rpx 0rpx rgba(238,240,241,0.58)
	
	display flex
	// align-items center
	.rate-ico
		font-size 26rpx
		color #444
	.yj-ico
		width 35rpx
		height 34rpx
		margin-right 16rpx

.loading-text
	text-align center
	font-size 28rpx
	color #a1a1a1
	line-height 80rpx
</style>