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

<template>
  <view>
    <custom-nav-bar position="fixed" color="black" left-text="诉求详情" left-arrow border />

    <view class="myAppeal">
      <!-- 内容部分 -->
      <view class="myAppeal-conent">
        <view class="godd-replay-head">
          <image src="/static/packages/enterprise/image/my-appeal.png" mode="aspectFill" />
          <text class="myAppeal-head-title">{{ List.enterpriseName }}</text>
        </view>
        <view class="myAppeal-flex">
          <block v-for="(type, index) in typeList" :key="index">
            <view v-if="List.appealType + '' === type.value" class="myAppeal-type"
              :style="'background-color: ' + type.cssClass + ';'">{{ type.label }}</view>
          </block>
          <view>
            <text class="myAppeal-conent-block">{{ getDateTime(List.createTime, 2) }}</text>
            <block v-for="(state, index) in statusList" :key="index">
              <text v-if="List.appealProcessStatus + '' === state.value"
                class="myAppeal-conent-bg myAppeal-conent-block" :style="'background-color: ' + state.cssClass + ';'">
                {{ state.label }}
              </text>
            </block>
          </view>
        </view>

        <view class="myAppeal-title mt-21 uniline">{{ List.appealTitle }}</view>
        <view class="myAppeal-subheading">
          <rich-text :nodes="List.appealContent" />
        </view>
        <view class="myAppeal-imgage" v-if="List.appealEnclosure">
          <image mode="aspectFill" data-name="appealEnclosure" @tap="viewImage" :data-item="item" :src="item"
            v-for="(item, index) in List.appealEnclosure" :key="index"></image>
        </view>
        <view class="myAppeal-conent-block mt-21" v-if="List.appealCurrentLocation !== null">
          {{ List.appealCurrentLocation }}
        </view>

        <!-- 判断是否有回复信息 -->
        <block v-if="List.perfectReplyFlag === 1">
          <view class="good-reply-title">
            <text>处理过程</text>
          </view>

          <view class="myAppeal-bg">
            <view>
              <view class="flex flex-v-center">
                <image src="/static/images/ic-success.png" mode="aspectFill"></image>
                <text>{{ List.nickName || '' }}</text>
              </view>
            </view>
            <view class="myAppeal-bg-conent">
              <rich-text :nodes="List.appealReply || ''" />
              <view class="myAppeal-conent-block mt-16">{{ getDateTime(List.replyTime, 2) }}</view>
            </view>
          </view>
        </block>
      </view>
    </view>
  </view>
</template>
<!-- <script module="toods" lang="wxs" src="@/wxs/util.wxs"></script> -->
<script>
  // TODO: 企业-我的诉求详情 + 民生-我的调解详情此页面复用
  import * as enterprise from '@/api/enterprise';
  import * as publicApi from '@/api/publicApi';
  import * as peopleApi from '@/api/peopleApi';
  import utils from '@/utils/util.map'
  export default {
    data() {
      return {
        option: {},

        type: {
          value: '',
          cssClass: '',
          label: ''
        },

        status: 'appeal_process_status',
        typeList: [],
        statusList: [],
        List: {},

        state: {
          value: '',
          cssClass: '',
          label: ''
        }
      };
    },
    async onLoad(option) {
      // TODO: key：是区分企业-我的诉求详情和民生-我的调解详情   key默认为 1：企业
      this.option = option
      await this.getAppealApi();
      await this.getTypeList();
      await this.getStateList();
    },
    methods: {
      getDateTime(time){
        return utils.getDateTime(time)
      },
      // 返回我的诉求
      onClickLeft() {
        uni.navigateTo({
          url: `/packages/enterprise/pages/my-appeal/my-appeal?name=${this.option.name}`
        });
      },

      // 获取类型字典
      async getTypeList() {
        const res = await publicApi.getDictDataApi({
          dictType: this.type
        });
        if (res.data) {
          this.typeList = res.data.list
        }
      },

      // 获取状态字典
      async getStateList() {
        const res = await publicApi.getDictDataApi({
          dictType: this.status
        });
        if (res.data) {
          this.statusList = res.data.list
        }
      },

      // 查看图片
      viewImage(event) {
        const url = event.currentTarget.dataset.item;
        const name = event.currentTarget.dataset.name;
        uni.previewImage({
          current: url,
          // 当前显示图片的http链接
          urls: this.List[name] // 需要预览的图片http链接列表
        });
      },

      // 获得诉求
      async getAppealApi() {
        let res = await enterprise.getAppealIdApi({
          id: this.option.id
        });
        if (res.data) {
          this.List = res.data
        }
      }
    }
  };
</script>
<style lang="less">
  page {
    background-color: #fff;
  }

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

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

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

  .myAppeal {
    padding: 37rpx 32rpx 40rpx 40rpx;
  }

  .myAppeal>.myAppeal-title {
    position: relative;
    width: 175rpx;
    height: 10rpx;
    background: #ffe5e9;
    border-radius: 2rpx;
    line-height: 0;
    margin-top: 10px;

    text {
      position: absolute;
      top: -5px;
      text-align: center;
      width: 100%;
      font-size: 36rpx;
      font-weight: 500;
      color: #000000;
    }
  }

  .myAppeal-conent {
    height: 100%;

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

    .godd-replay-head {
      display: flex;

      .myAppeal-head-title {
        font-size: 32rpx;
        font-weight: 500;
        color: #fe3b53;
      }

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

    .myAppeal-flex {
      margin-top: 32rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .myAppeal-type {
        width: 88rpx;
        height: 38rpx;
        line-height: 38rpx;
        text-align: center;
        color: #fff;
        box-shadow: 2px 2px 2px 0px rgba(12, 181, 207, 0.1);
        border-radius: 8rpx;
      }

      .myAppeal-conent-title {
        font-size: 32rpx;

        font-weight: 400;
        color: #fe3b53;
      }

      .myAppeal-conent-bg {
        padding: 5rpx 20rpx;
        height: 38rpx;
        text-align: center;
        color: #fff;
        line-height: 38rpx;
        box-shadow: 2px 2px 2px 0px rgba(254, 61, 85, 0.1);
        border-radius: 500rpx;
        margin-left: 39rpx;
      }
    }
  }

  .myAppeal-conent-block {
    font-size: 24rpx;
    font-weight: 400;
    color: #999999;
  }

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

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

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

    image {
      width: 222rpx;
      height: 222rpx;
      border-radius: 10rpx;
      margin-right: 10rpx;
    }
  }

  .good-reply-title {
    position: relative;
    width: 175rpx;
    height: 10rpx;
    background: #ffced6;
    border-radius: 2rpx;
    line-height: 0;
    margin-top: 60rpx;

    text {
      position: absolute;
      top: -5px;
      text-align: center;
      width: 100%;
      font-size: 36rpx;
      font-weight: 500;
      color: #000000;
    }
  }

  .myAppeal-bg {
    width: 678rpx;
    height: 232rpx;
    border-radius: 8px;
    margin-top: 50rpx;

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

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

    .myAppeal-bg-conent {
      margin-top: 16rpx;
      margin-left: 30rpx;
      padding: 20rpx 24rpx 20rpx 28rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #333333;
      border-radius: 8rpx;
      background: #f7f7f7;
    }
  }
</style>