xq-csg-weapp_uni-ts/src/pages/enterprise/enterprise.vue

<template>
  <view>
    <!-- <custom-nav-bar left-text="政企通" /> -->
    <!-- <van-nav-bar left-text="返回" left-arrow /> -->


    <swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
      <block v-for="(item, index) in imageList" :key="index">
        <swiper-item>
          <image :src="item.pic" mode="aspectFill"></image>
        </swiper-item>
      </block>
    </swiper>

    <view class="enterprise-appeal">
      <view class="enterprise-appeal-item" @click="myAppeal">
        <image class="enterprise-appeal-icon" src="/static/images/enterprise/icon-1.png"></image>
        <view class="enterprise-title">我的诉求</view>
      </view>
      <view class="enterprise-appeal-item" @click="crateAppeal">
        <image class="enterprise-appeal-icon" src="/static/images/enterprise/icon.png"></image>
        <view class="enterprise-title">发布诉求</view>
      </view>
    </view>

    <view class="life-section">
      <view class="second-block" :style="item.cssStyle" v-for="(item, index) in recursionList" :key="index">
        <view class="title flex">
          <text class="title-name">{{ item.name }}</text>
        </view>

        <view class="second-model flex flex-v-center flex-between">
          <view :class="'second-line flex flex-col ' + (idx === 0 ? 'line1' : '')" :style="itemName.cssStyle"
            v-for="(itemName, idx) in item.children" :key="idx">
            <navigator v-if="itemName.clickUrl" class="line-navigator" :url="updateQuery(itemName.clickUrl,itemName)" hover-class="none">
            </navigator>

            <image class="line-bg" :src="itemName.icon"></image>

            <view class="line-title">{{ itemName.name }}</view>

            <view v-if="itemName.remark" class="line-msg">{{ itemName.remark }}</view>
          </view>
        </view>
      </view>
    </view>

    <view class="good-reply">
      <view class="title flex">
        <text class="title-name">优质回复</text>
      </view>

      <!-- 内容部分 -->
      <view v-if="'dataList.length > 0'">
        <view class="good-reply-conent" @click="details" :data-item="item" v-for="(item, index) in dataList" :key="index">
          <view class="good-reply-flex">
            <view>
              <image :src="item.avatar" mode="aspectFill" />
              <text class="good-reply-conent-title uniline">{{ item.name || item.nickName || '暂无名称' }}</text>
            </view>
            <view>
              <text class="good-reply-conent-block">{{ getDateTime(item.createTime, 2) }}</text>
              <block v-for="(state, index1) in typeList" :key="index1">
                <text v-if="item.appealType + '' === state.value" class="good-reply-conent-bg good-reply-conent-block"
                  :style="'background-color: ' + state.cssClass + ';'">
                  {{ state.label }}
                </text>
              </block>
            </view>
          </view>

          <view class="good-reply-title mt-21 uniline">{{ item.appealTitle }}</view>

          <view class="good-reply-subheading">
            <rich-text :nodes="item.appealContent"></rich-text>
          </view>

          <view class="good-reply-imgage">
            <image :src="key" mode="aspectFill" v-for="(key, index1) in item.appealEnclosure" :key="index1"></image>
          </view>

          <view class="good-reply-conent-block mt-21 uniline" v-if="item.appealCurrentLocation">
            {{ item.appealCurrentLocation }}
          </view>

          <view class="good-reply-bg" v-if="item.appealReply">
            <view>
              <view>
                <image src="/static/images/ic-success.png" mode="aspectFill"></image>
                <text>{{ item.replyCreator }}</text>
              </view>
              <view class="good-reply-conent-block">{{ getDateTime(item.replyTime, 2) }}</view>
            </view>
            <view class="good-reply-bg-conent">
              <rich-text :nodes="item.appealReply"></rich-text>
            </view>
          </view>
        </view>
      </view>
      <van-empty v-if="dataList.length === 0" description="暂无数据" />
    </view>
    <view style="height:150rpx"></view>
  </view>
</template>
<script>
import utils from '@/utils/util.map.js'
import * as publicApi from '@/api/publicApi.js'; // 公共 API
import * as enterprise from '@/api/enterprise'; // 企业
export default {
  data() {
    return {
      isLogin: uni.getStorageSync('isLogin'),
      userInfo: null,
      userInfoCount: null,
      indicatorDots: false,
      vertical: false,
      autoplay: true,
      duration: 500,

      page: {
        pageNo: 1,
        pageSize: 15,
        type: 3
      },

      imageList: [],
      interval: 2000,

      params: {
        pageNo: 1,
        pageSize: 15
      },

      dataList: [],
      recursionList: [],
      typeList: '',

      state: {
        value: '',
        cssClass: '',
        label: ''
      }
    };
  },
  onLoad() {
    this.getpublicApiList();
    this.getType();
    this.recursionApi();
  },
  onShow() {
    this.isLogin = uni.getStorageSync('isLogin')
    this.userInfo = uni.getStorageSync('userInfoData')
    this.userInfoCount = uni.getStorageSync('userInfoCount')

    if (this.isLogin) {
      this.getPerfectReply();
    }
  },
  methods: {
    getDateTime(replyTime, key) {
      return utils.getDateTime(replyTime, key)
    },
    updateQuery(url, name) {
      console.log(name)
      return utils.updateQuery(url, name);
    },
    // 获取企业轮播图
    async getpublicApiList() {
      const res = await publicApi.getBannerApi(this.page);
      if (res.data) {
        this.imageList = res.data.list
        this.interval = res.data.list[0].rotationTime
      }
    },

    async recursionApi() {
      const res = await publicApi.recursionApi({
        bannerType: 3
      });
      if (res.data) {
        this.recursionList = res.data
      }
    },

    // 优质回复
    async getPerfectReply() {
      const res = await enterprise.getPerfectReplyApi(this.params);
      if (res.data) {
        res.data.list.forEach((item) => {
          if (item.name !== null) {
            item.name = item.name.substring(0, 1) + new Array(item.name.length).join('*');
          }
        });
        this.dataList = res.data.list
      }
    },

    // 详情页跳转
    details(event) {
      const {
        item
      } = event.currentTarget.dataset;
      uni.navigateTo({
        url: `/packages/enterprise/pages/details/details?id=${item.id}`
      });
    },

    async getType() {
      const res = await publicApi.getDictDataApi({
        dictType: 'appeal_type'
      });
      if (res.data) {
        this.typeList = res.data.list
      }
    },

    myAppeal() {
      const {
        userInfoCount,
        isLogin
      } = this;
      if (!isLogin) {
        uni.navigateTo({
          url: '/pages/phone/index'
        });
        return false;
      }
      // 暂时去除实名认证
      // else if (userInfoCount.realNameAuthFlag === 0) {
      //   wx.navigateTo({
      //     url: '/packages/enterprise/pages/enterprise-certification/enterprise-certification',
      //   })
      //   return false
      // } else if (userInfoCount.realNameAuthFlag === 3) {
      //   wx.showToast({
      //     title: '身份审核中...',
      //     icon: 'none'
      //   })
      //   return false
      // }
      else {
        uni.navigateTo({
          url: '/packages/enterprise/pages/my-appeal/my-appeal'
        });
      }
    },

    crateAppeal() {
      const {
        userInfoCount,
        isLogin
      } = this;
      if (!isLogin) {
        uni.navigateTo({
          url: '/pages/phone/index'
        });
        return false;
      }
      // 去除实名认证
      //  else if (userInfoCount.realNameAuthFlag === 0) {
      //   wx.navigateTo({
      //     url: '/packages/enterprise/pages/enterprise-certification/enterprise-certification',
      //   })
      //   return false
      // } else if (userInfoCount.realNameAuthFlag === 3) {
      //   wx.showToast({
      //     title: '身份审核中...',
      //     icon: 'none'
      //   })
      //   return false
      // }
      else {
        uni.navigateTo({
          url: '/packages/enterprise/pages/issue-appeal/issue-appeal'
        });
      }
    }
  }
};
</script>
<style lang="less">
page {
  --nav-bar-background-color: transparent;
  --nav-bar-text-color: #ffffff; // 导航栏左侧文案样式
  background-color: #fff;
}

.mt-20 {
  margin-top: 40rpx;
}

.mt-21 {
  margin-top: 21rpx;
}

.enterprise-title {
  font-size: 32r;
  font-weight: 400;
  color: #000000;
}

.line-navigator {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
}

swiper,
swiper-item {
  width: 100%;
  height: 400rpx;

  image {
    width: 100%;
    height: 100%;
  }
}

.enterprise-appeal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 24rpx 0 24rpx;

  .enterprise-appeal-item {
    width: 340rpx;
    height: 122rpx;
    display: flex;
    align-items: center;
    border-radius: 16rpx;
    padding: 0 24rpx;
    background-color: #fef9f5;
    position: relative;

    .enterprise-appeal-icon {
      width: 120rpx;
      height: 80rpx;
      border-radius: 46rpx;
      margin-right: 24rpx;
    }

    &:nth-child(2n) {
      background-color: #fef6f6;
    }
  }
}

.good-reply {
  padding: 40rpx 24rpx;
}

.good-reply-conent {
  margin-top: 37rpx;

  .good-reply-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;

    view {
      display: flex;
      align-items: center;
      justify-content: space-between;

      image {
        width: 44rpx;
        height: 44rpx;
        border-radius: 50%;
        margin-right: 24rpx;
      }

      .good-reply-conent-title {
        font-size: 32rpx;
        font-weight: 400;
        color: #fe3b53;
      }

      .good-reply-conent-bg {
        width: 100rpx;
        height: 38rpx;
        text-align: center;
        color: #fff;
        line-height: 38rpx;
        background: #fe3b53;
        box-shadow: 2px 2px 2px 0px rgba(254, 61, 85, 0.1);
        border-radius: 500rpx;
        margin-left: 39rpx;
      }
    }
  }

  .good-reply-conent-block {
    font-size: 24rp;
    font-weight: 400;
    color: #999999;
  }

  .good-reply-title {
    font-size: 32rpx;
    font-weight: 500;
    color: #000000;
  }

  .good-reply-subheading {
    font-size: 28rp;
    font-weight: 400;
    color: #333333;
    margin-top: 24rpx;
  }

  .good-reply-imgage {
    margin-top: 24rpx;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;

    image {
      width: 222rpx;
      height: 150rpx;
      border-radius: 10rpx;
      margin-bottom: 20rpx;
    }
  }

  .good-reply-bg {
    width: 678rpx;
    // height: 232rpx;
    background: #f7f7f7;
    border-radius: 8px;
    margin-top: 32rpx;
    padding: 28rpx 20rpx;

    view {
      display: flex;
      align-items: center;
      justify-content: space-between;

      image {
        width: 32rpx;
        height: 32rpx;
        margin-right: 8rpx;
      }

      text {
        font-size: 28rpx;
        font-weight: 400;
        color: #fe3b53;
      }
    }

    .good-reply-bg-conent {
      padding: 16rpx 0 0 40rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #333333;
    }
  }
}

// 模块配置样式 start
.title {
  font-size: 36rpx;
  font-weight: 500;
  color: #000000;
  line-height: 36rpx;
  padding-left: 6rpx;

  .title-name {
    position: relative;
    font-size: 36rpx;
    font-weight: 500;
    color: #333333;

    &::after {
      content: '';
      position: absolute;
      left: -6rpx;
      bottom: 0;
      z-index: -1;
      // width: 175rpx;
      width: 115%;
      height: 10rpx;
      background: var(--title-guides-color);
      border-radius: 2rpx;
    }
  }
}

.life-section {
  padding: 0 24rpx;
}

.second-block,
.third-block,
.fourth-block {
  margin-top: 50rpx;

  .second-model {
    margin-top: 40rpx;
    flex-wrap: wrap;

    .second-line {
      width: 343rpx;
      height: 110rpx;
      justify-content: center;
      padding-left: 39rpx;
      position: relative;

      &:not(:first-child) {
        margin-top: 16rpx;
      }

      .line-bg {
        width: 100%;
        height: 100%;
        position: absolute;
        // z-index: -1;
        top: 0;
        left: 0;
      }

      .line-title {
        position: absolute;
        font-size: 40rpx;
        font-weight: 500;
        line-height: 32rpx;
      }

      .line-msg {
        position: absolute;
        margin-top: 100rpx;
        font-size: 26rpx;
        font-weight: 400;
        color: #666666;
        line-height: 26rpx;
      }
    }

    .line1 {
      width: 100%;
      height: 171rpx;

      .line-title {
        font-size: 40rpx;
        font-weight: 500;
        line-height: 40rpx;
      }
    }
  }
}

// 模块配置样式 end
</style>