AgriculturalCloud-h5-UI/pages/experts/modal/index.vue

<template>
  <view class="page-content expertsmodal">
    <view class="page-header expertsmodal-header">
      <u-tabs
        class="expertsmodal-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-expertsmodal">
          <u-form
            :model="expertsModalForm"
            label-position="top"
            :label-style="custLabelStyle"
            ref="expertsModalFormRef"
          >
            <u-form-item
              label="真实姓名："
              prop="matUser"
              :required="true"
              maxlength="20"
              class="initiate-formitem"
            >
              <u-input
                v-model="expertsModalForm.matUser"
                placeholder="请输入真实姓名"
                :placeholder-style="custPlaceholderStyle"
              />
            </u-form-item>
            <u-form-item label="手机号码：" prop="matPhone" :required="true" class="initiate-formitem">
              <u-input
                v-model="expertsModalForm.matPhone"
                placeholder="请输入手机号码"
                :placeholder-style="custPlaceholderStyle"
              />
            </u-form-item>
            <u-form-item
              label="咨询标题："
              prop="matName"
              :required="true"
              maxlength="50"
              class="initiate-formitem"
            >
              <u-input
                v-model="expertsModalForm.matName"
                placeholder="请输入咨询标题"
                :placeholder-style="custPlaceholderStyle"
              />
            </u-form-item>
            <u-form-item
              label="咨询内容："
              prop="matContent"
              :required="true"
              class="mt40 initiate-formitem"
            >
              <u-input
                v-model="expertsModalForm.matContent"
                type="textarea"
                maxlength="200"
                height="298"
                placeholder="请输入不少于10个字的描述"
                :placeholder-style="custPlaceholderStyle"
                @input="handleSumMatcontentNum"
              />
              <text class="formitem-summatcontentnum">{{ sumMatcontentNum }}/200</text>
            </u-form-item>
          </u-form>
          <view class="expertsmodalform-footer">
            <u-button
              type="primary"
              @click="handleExpertsModalformSubmit"
              class="complaint-submitbtn"
            >提交</u-button>
          </view>
        </view>
      </template>
      <template v-else-if="currentTabs == 1">
        <view class="history-expertsmodal">
          <scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="handleScrolltolower">
            <view class="history-expertsmodal-listbody">
              <template v-if="hisExpertsModalObj.list_empty">
                <view class="history-expertsmodal-nodata">
                  <text class="expertsmodal-nodata">暂无数据</text>
                </view>
              </template>
              <template>
                <u-row gutter="16" class="listbody-row">
                  <u-col
                    span="12"
                    class="listbody-col"
                    v-for="expertsModalItem in hisExpertsModalObj.expertsModalList"
                    :key="expertsModalItem.plaId"
                    @click="handleExpertsModalDetails(expertsModalItem)"
                  >
                    <view class="listbody-item">
                      <view class="item-title">
                        <text class="item-title-left">专家咨询</text>
                        <text class="item-title-right">{{ expertsModalItem.plaInTime }}</text>
                      </view>
                      <view class="item-body">
                        <text class="item-body-text">
                          真实姓名：{{ expertsModalItem.matUser }}
                          <br />
                          手机号码：{{ expertsModalItem.matPhone ? expertsModalItem.matPhone.toString().replace(/^(.{3})(.*)(.{4})$/, '$1-$2-$3') : '' }}
                        </text>
                        <template v-if="expertsModalItem.matIsRe == 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="hisExpertsModalObj.loadStatus"
                v-if="!hisExpertsModalObj.list_empty"
              ></uni-load-more>
            </view>
          </scroll-view>
        </view>
      </template>
      <template v-else></template>
    </view>
  </view>
</template>

<script>
import {
  expertsModalAddData,
  expertsModalListData
} from '@/agrcloud-api/expertsmodal';
import uniLoadMore from "@/agrcloud-components/uni-load-more/uni-load-more"

export default {
  name: 'expertsmodal',
  components: {
    uniLoadMore
  },
  data() {
    return {
      optionType: '',
      currentTabs: 0,
      tabsList: [{
        cust_tabs_name: '发起咨询'
      },
      {
        cust_tabs_name: '历史咨询'
      }
      ],
      expertsModalForm: {
        matUser: '',
        matPhone: '',
        matName: '',
        matContent: ''
      },
      expertsModalRules: {
        matUser: [{
          required: true,
          message: '请输入真实姓名',
          trigger: ['change', 'blur']
        }],
        matPhone: [{
          required: true,
          message: '请输入手机号码',
          trigger: ['change', 'blur']
        },
        {
          validator: (rule, value, callback) => {
            return this.$u.test.mobile(value);
          },
          message: '手机号码不正确',
          trigger: ['change', 'blur']
        }
        ],
        matName: [{
          required: true,
          message: '请输入咨询标题',
          trigger: ['change', 'blur']
        }],
        matContent: [{
          required: true,
          message: '请输入咨询内容',
          trigger: ['change', 'blur']
        },
        {
          min: 10,
          message: '咨询内容不少于10个字',
          trigger: ['change', 'blur']
        }
        ]
      },
      sumMatcontentNum: 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;',
      hisExpertsModalObj: {
        loadStatus: 'more',
        list_empty: false,
        pageTotal: 0,
        pageCount: 0,
        pagination: {
          pageNum: 1,
          pageSize: 10
        },
        expertsModalList: []
      }
    };
  },
  onLoad(option) { },
  methods: {
    /** 切换页签 */
    handletabsChange(index) {
      if (index == 1) {
        if (!this.expertsModalForm.matUser) {
          this.currentTabs = 0;
          this.$msgbox('请输入真实姓名！', 'none');
          return;
        }

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

        this.hisExpertsModalObj.pagination.pageNum = 1;
        this.getExpertsModalListData();
      }
      this.currentTabs = index;
    },
    /** 获取历史咨询列表 */
    getExpertsModalListData() {
      this.hisExpertsModalObj = {
        ...this.hisExpertsModalObj,
        list_empty: false,
        loadStatus: 'loading',
        pageTotal: 0
      };

      // 请求获取列表数据
      expertsModalListData({
        ...this.hisExpertsModalObj.pagination,
        matUser: this.expertsModalForm.matUser,
        matPhone: this.expertsModalForm.matPhone
      }).then(res => {
        // 数据总条数
        this.hisExpertsModalObj.pageTotal = res.total || 0;

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

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

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

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

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

          uni.stopPullDownRefresh();
        }

      }).catch(err => {
        this.hisExpertsModalObj.loadStatus = 'noMores';
      });
    },
    handleExpertsModalformSubmit() {
      this.$refs.expertsModalFormRef && this.$refs.expertsModalFormRef.validate(valid => {
        if (valid) {
          expertsModalAddData(this.expertsModalForm).then(
            res => {
              this.$msgbox('操作成功！', 'success');
              this.expertsModalForm = {
                ...this.expertsModalForm,
                matName: '',
                matContent: ''
              };
              uni.navigateTo({
                url: '/pages/results/index'
              });
            }
          );
        }
      });
    },
    handleScrolltolower() {
      this.hisExpertsModalObj.loadStatus = 'loading'
      if (this.hisExpertsModalObj.pagination.pageNum - 1 >= this.hisExpertsModalObj.pageCount) {
        this.hisExpertsModalObj.loadStatus = 'noMores';
        return
      } else {
        this.hisExpertsModalObj.pagination.pageNum++;
        this.getExpertsModalListData();
      }
    },
    handleSumMatcontentNum() {
      this.sumMatcontentNum = this.expertsModalForm.matContent.length;
      if (this.sumMatcontentNum == 200) {
        this.$msgbox('最多只能输入240个字！', 'none');
      }
    },
    handleExpertsModalDetails(param) {
      this.$store.dispatch("SetExpertsDetails", param).then(() => {
        uni.navigateTo({
          url: '/pages/experts/modal/details'
        });
      }).catch(() => {
        this.$msgbox('访问数据异常！', 'none');
      });
    }
  },
  onReady() {
    this.$refs.expertsModalFormRef && this.$refs.expertsModalFormRef.setRules(this.expertsModalRules);
  }
}
</script>

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

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

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

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

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

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

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

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

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

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