AgriculturalCloud-h5-UI/pages/complaints/index.vue

<template>
  <view class="page-content complaints">
    <view class="page-header complaints-header">
      <u-tabs
        class="complaints-tabs"
        name="cust_tabs_name"
        :list="tabsList"
        :current="currentTabs"
        height="80"
        item-width="256"
        gutter="50"
        bar-width="120"
        font-size="32"
        @change="handletabsChange"
      ></u-tabs>
    </view>

    <view class="page-main">
      <template v-if="currentTabs == 0">
        <view class="initiate-complaints">
          <u-form
            :model="complaintsForm"
            label-position="top"
            :label-style="custLabelStyle"
            ref="complaintsFormRef"
          >
            <u-form-item
              label="真实姓名："
              prop="plaUser"
              :required="true"
              maxlength="20"
              class="initiate-formitem"
            >
              <u-input
                v-model="complaintsForm.plaUser"
                placeholder="请输入真实姓名"
                :placeholder-style="custPlaceholderStyle"
              />
            </u-form-item>
            <u-form-item label="手机号码：" prop="plaPhone" :required="true" class="initiate-formitem">
              <u-input
                v-model="complaintsForm.plaPhone"
                placeholder="请输入手机号码"
                :placeholder-style="custPlaceholderStyle"
              />
            </u-form-item>
            <u-form-item
              label="投诉标题："
              prop="plaName"
              :required="true"
              maxlength="50"
              class="initiate-formitem"
            >
              <u-input
                v-model="complaintsForm.plaName"
                placeholder="请输入投诉标题"
                :placeholder-style="custPlaceholderStyle"
              />
            </u-form-item>
            <u-form-item
              label="投诉内容："
              prop="plaContent"
              :required="true"
              class="mt40 initiate-formitem"
            >
              <u-input
                v-model="complaintsForm.plaContent"
                type="textarea"
                maxlength="200"
                height="298"
                placeholder="请输入不少于10个字的描述"
                :placeholder-style="custPlaceholderStyle"
                @input="handleSumPlacontentNum"
              />
              <text class="formitem-sumplacontentnum">{{ sumPlacontentNum }}/200</text>
            </u-form-item>
          </u-form>
          <view class="complaintsform-footer">
            <u-button
              type="primary"
              @click="handleComplaintsformSubmit"
              class="complaint-submitbtn"
            >提交</u-button>
          </view>
        </view>
      </template>
      <template v-else-if="currentTabs == 1">
        <view class="history-complaints">
          <scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="handleScrolltolower">
            <view class="history-complaints-listbody">
              <!-- 列表无数据 -->
              <template v-if="hisComplaintsObj.list_empty">
                <view class="history-complaints-nodata">
                  <text class="complaints-nodata">暂无数据</text>
                </view>
              </template>

              <!-- 列表有数据 -->
              <template v-else>
                <u-row gutter="16" class="listbody-row">
                  <u-col
                    span="12"
                    class="listbody-col"
                    v-for="complaintsItem in hisComplaintsObj.complaintsList"
                    :key="complaintsItem.plaId"
                    @click="handleComplaintsDetails(complaintsItem)"
                  >
                    <view class="listbody-item">
                      <view class="item-title">
                        <text class="item-title-left">质量安全投诉</text>
                        <text class="item-title-right">{{ complaintsItem.plaInTime }}</text>
                      </view>
                      <view class="item-body">
                        <text class="item-body-text">
                          真实姓名：{{ complaintsItem.plaUser }}
                          <br />
                          手机号码：{{ complaintsItem.plaPhone ? complaintsItem.plaPhone.toString().replace(/^(.{3})(.*)(.{4})$/, '$1-$2-$3') : '' }}
                        </text>
                        <template v-if="complaintsItem.plaIsRe == 1">
                          <text class="item-body-feedback">已反馈</text>
                        </template>
                        <template v-else>
                          <text class="item-body-nofeedback">未反馈</text>
                        </template>
                      </view>
                    </view>
                  </u-col>
                </u-row>
              </template>

              <!-- 加载更多组件 -->
              <uni-load-more
                :status="hisComplaintsObj.loadStatus"
                v-if="!hisComplaintsObj.list_empty"
              ></uni-load-more>
            </view>
          </scroll-view>
        </view>
      </template>
      <template v-else></template>
    </view>
  </view>
</template>

<script>
import {
  complaintsAddData,
  complaintsListData
} from '@/agrcloud-api/complaints';
import uniLoadMore from "@/agrcloud-components/uni-load-more/uni-load-more.vue"

export default {
  name: 'complaints',
  components: {
    uniLoadMore
  },
  data() {
    return {
      optionType: '',
      currentTabs: 0,
      tabsList: [{
        cust_tabs_name: '发起投诉'
      },
      {
        cust_tabs_name: '历史投诉'
      }
      ],
      complaintsForm: {
        plaUser: '',
        plaPhone: '',
        plaName: '',
        plaContent: ''
      },
      complaintsRules: {
        plaUser: [{
          required: true,
          message: '请输入真实姓名',
          trigger: ['change', 'blur']
        }],
        plaPhone: [{
          required: true,
          message: '请输入手机号码',
          trigger: ['change', 'blur']
        },
        {
          validator: (rule, value, callback) => {
            return this.$u.test.mobile(value);
          },
          message: '手机号码不正确',
          trigger: ['change', 'blur']
        }
        ],
        plaName: [{
          required: true,
          message: '请输入投诉标题',
          trigger: ['change', 'blur']
        }],
        plaContent: [{
          required: true,
          message: '请输入投诉内容',
          trigger: ['change', 'blur']
        },
        {
          min: 10,
          message: '投诉内容不少于10个字',
          trigger: ['change', 'blur']
        }
        ]
      },
      sumPlacontentNum: 0,
      custLabelStyle: {

        'font-size': '30rpx',
        'font-family': 'PingFangSC-Regular, PingFang SC',
        'font-weight': '400',
      },
      custPlaceholderStyle: 'font-size: 34rpx;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;',
      hisComplaintsObj: {
        loadStatus: 'more',
        list_empty: false,
        pageTotal: 0,
        pageCount: 0,
        pagination: {
          pageNum: 1,
          pageSize: 10
        },
        complaintsList: []
      }
    };
  },
  onLoad: function (option) { },
  methods: {
    /** 切换页签 */
    handletabsChange(index) {
      if (index == 1) {
        if (!this.complaintsForm.plaUser) {
          this.currentTabs = 0;
          this.$msgbox('请输入真实姓名！', 'none');
          return;
        }

        if (!this.complaintsForm.plaPhone) {
          this.currentTabs = 0;
          this.$msgbox('请输入手机号码！', 'none');
          return;
        }

        this.hisComplaintsObj.pagination.pageNum = 1;
        this.getComplaintsListData();
      }
      this.currentTabs = index;
    },
    /** 获取历史投诉列表 */
    getComplaintsListData() {
      this.hisComplaintsObj = {
        ...this.hisComplaintsObj,
        list_empty: false,
        loadStatus: 'loading'
      };

      // 请求获取列表数据
      complaintsListData({
        ...this.hisComplaintsObj.pagination,
        plaUser: this.complaintsForm.plaUser,
        plaPhone: this.complaintsForm.plaPhone
      }).then(res => {
        // 数据总条数
        this.hisComplaintsObj.pageTotal = res.total || 0;

        // 如果列表为第一页，返回列表数据清空
        if (this.hisComplaintsObj.pagination.pageNum == 1) {
          this.hisComplaintsObj.complaintsList = [];
        };

        // 处理返回结果
        if ((res.rows || []).length <= 0) { // 返回结果没有数据
          if ((this.hisComplaintsObj.complaintsList || []).length <= 0) {
            this.hisComplaintsObj.loadStatus = 'noMores';
            this.hisComplaintsObj.list_empty = true;
          } else {
            this.hisComplaintsObj.loadStatus = 'noMores';
          }
        } else { //返回结果有数据
          //返回历史投诉列表存在
          this.hisComplaintsObj.list_empty = false;

          // 获取列表数据分页数量
          this.hisComplaintsObj.pageCount = Math.ceil((res.total || 0) / this.hisComplaintsObj.pagination.pageSize);
          if ((res.total || 0) % this.hisComplaintsObj.pagination.pageSize == 0) {
            this.hisComplaintsObj.pageCount = Math.ceil((res.total || 0) / this.hisComplaintsObj.pagination.pageSize);
            if (this.hisComplaintsObj.pageCount == 1) {
              this.hisComplaintsObj.pageCount--;
            }
          } else {
            this.hisComplaintsObj.pageCount--;
          };

          // 处理页面状态
          if (this.hisComplaintsObj.pageCount === 0) {
            this.hisComplaintsObj.loadStatus = 'noMores'
          } else {
            this.hisComplaintsObj.loadStatus = 'more'
          }

          // 组装返回数据
          this.hisComplaintsObj.complaintsList.push.apply(this.hisComplaintsObj.complaintsList, res.rows || []);

          uni.stopPullDownRefresh();
        }

      }).catch(err => {
        this.hisComplaintsObj.loadStatus = 'noMores';
      });
    },
    handleComplaintsformSubmit() {
      this.$refs.complaintsFormRef && this.$refs.complaintsFormRef.validate(valid => {
        if (valid) {
          complaintsAddData(this.complaintsForm).then(
            res => {
              this.$msgbox('操作成功！', 'success');
              this.complaintsForm = {
                ...this.complaintsForm,
                plaName: '',
                plaContent: ''
              };
              uni.navigateTo({
                url: '/pages/results/index'
              });
            }
          );
        }
      });
    },
    handleScrolltolower() {
      this.hisComplaintsObj.loadStatus = 'loading'
      if (this.hisComplaintsObj.pagination.pageNum - 1 >= this.hisComplaintsObj.pageCount) {
        this.hisComplaintsObj.loadStatus = 'noMores';
        return;
      } else {
        this.hisComplaintsObj.pagination.pageNum++;
        this.getComplaintsListData();
      }
    },
    handleSumPlacontentNum() {
      this.sumPlacontentNum = this.complaintsForm.plaContent.length;
      if (this.sumPlacontentNum == 200) {
        this.$msgbox('最多只能输入240个字！', 'none');
      }
    },
    handleComplaintsDetails(param) {
      this.$store.dispatch("SetComplaintsDetails", param).then(() => {
        uni.navigateTo({
          url: '/pages/complaints/details/index'
        });
      }).catch(() => {
        this.$msgbox('访问数据异常！', 'none');
      });
    }
  },
  onReady() {
    this.$refs.complaintsFormRef && this.$refs.complaintsFormRef.setRules(this.complaintsRules);
  }
}
</script>

<style lang="scss" scoped>
.complaints {
  padding: 0;

  &-header {
    width: 100%;
    border-top: 2rpx solid #eeeeee;
    border-bottom: 2rpx solid #eeeeee;
  }

  .complaints-tabs {
    height: 87rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .initiate-complaints {
    .initiate-formitem {
      padding-left: 24rpx;
      background: #ffffff;

      .formitem-sumplacontentnum {
        position: absolute;
        bottom: 0;
        right: 0;
      }
    }
  }

  .complaintsform-footer {
    padding: 40rpx 32rpx;

    .complaint-submitbtn {
      height: 88rpx;
    }
  }

  .hiscomplaint-item {
    background: #ffffff;
  }

  .history-complaints {
    .scroll-Y {
      height: calc(
        100vh - 88rpx - 100rpx - env(safe-area-inset-bottom) -
          var(--status-bar-height)
      );
    }

    .history-complaints-listbody {
      .history-complaints-nodata {
        text-align: center;
        margin-top: 20rpx;

        .complaints-nodata {
          font-size: 30rpx;
          color: #777777;
        }
      }

      .listbody-row {
        .listbody-col {
          padding: 24rpx 0 0 0 !important;

          .listbody-item {
            background: #ffffff;
            height: 196rpx;
            width: 100%;

            .item-title {
              padding-top: 24rpx;

              .item-title-left {
                float: left;
                height: 48rpx;
                font-size: 34rpx;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #333333;
                line-height: 48rpx;
                padding-left: 24rpx;
              }

              .item-title-right {
                float: right;
                height: 48rpx;
                font-size: 30rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #999999;
                line-height: 48rpx;
                padding-right: 24rpx;
              }
            }

            .item-body {
              clear: both;
              padding: 16rpx 0 0 24rpx;

              .item-body-text {
                height: 84rpx;
                font-size: 30rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #666666;
                line-height: 42rpx;
              }

              .item-body-nofeedback {
                float: right;
                padding-right: 24rpx;
                height: 42rpx;
                font-size: 30rpx;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #fd4779;
                line-height: 42rpx;
              }

              .item-body-feedback {
                float: right;
                padding-right: 24rpx;
                height: 42rpx;
                font-size: 30rpx;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #48a79e;
                line-height: 42rpx;
              }
            }
          }
        }
      }
    }
  }
}
</style>