web-zk-h5/pages/selfService/updateDomicile/updateDomicile.vue

<template>
  <view class="content">
    <!-- <view class="tab">
      <view
        v-for="(item, index) in tabList"
        :key="index"
        @click="isTab = item.value"
        class="tab_i"
        :class="[isTab === item.value ? 'heng' : 'heng1']"
      >
        {{ item.label }}
      </view>
    </view> -->

    <template v-if="tableData.length > 0">
      <view class="thecontent" v-for="(item, index) in tableData" :key="index">
        <view class="line_box">
          <view class="line1">{{ '会员编号' }}</view>
          <view class="line2">{{ item.memberCode }}</view>
        </view>
        <view class="line_box">
          <view class="line1">{{ '变更前会员姓名' }}</view>
          <view class="line2">{{ item.memberName }}</view>
        </view>
        <view class="line_box">
          <view class="line1">{{ '变更前联系方式' }}</view>
          <view class="line2">{{ item.phone }}</view>
        </view>
        <view class="line_box bgrightBox" v-if="queryParams.assessType == 0">
          <view class=""> </view>
          <view class="">
            <u-button
              shape="circle"
              color="#005BAC"
              size="small"
              :text="'申请变更'"
              @click="updateDomicile(item)"
            ></u-button>
          </view>
        </view>
        <template v-if="queryParams.assessType == 1">
          <view class="line_box">
            <view class="line1">{{ '变更后会员姓名' }}</view>
            <view class="line3">{{ item.changeMemberName }}</view>
          </view>
          <view class="line_box">
            <view class="line1">{{ '变更后联系方式' }}</view>
            <view class="line3">{{ item.changePhone }}</view>
          </view>
          <!-- <view class="line_box">
						<view class='line1'>{{'业务扣费'}}(¥)</view>
						<view class='line3'>{{item.amount}}</view>
					</view> -->
          <view class="line_box">
            <view class="line1">{{ '申请时间' }}</view>
            <view class="line3">{{ item.creationTime }}</view>
          </view>
          <!-- <view class="line_box">
            <view class="line1">{{ '审核时间' }}</view>
            <view class="line3">{{ item.approveTime }}</view>
          </view>
          <view class="line_box">
            <view class="line1">{{ '审核状态' }}</view>
            <view class="line3">{{ item.approveStatusVal }}</view>
          </view> -->
          <view class="line_box">
            <view class="line1">{{ '备注' }}</view>
            <view class="line3">{{ item.remark }}</view>
          </view>
          <!-- <view class="list_btn" v-if="item.approveStatus == 3">
            <view class="sub_btn" @click="findWhy(item)">
              {{ '驳回原因' }}
            </view>
          </view> -->
        </template>
      </view>
    </template>
    <u-empty
      v-else
      mode="list"
      icon="http://cdn.uviewui.com/uview/empty/list.png"
    >
    </u-empty>
    <u-popup
      :show="rejectShow"
      closeable
      mode="center"
      round="10"
      @close="rejectShow = false"
      >\
      <view class="popview">
        <view
          class="email_neir"
          @click="clickhtml(rejectContent)"
          v-html="rejectContent"
        >
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import * as sel from '@/config/selfService.js'
export default {
  data() {
    return {
      tabList: [
        {
          value: 0,
          label: '可变更信息',
        },
        {
          value: 1,
          label: '变更记录',
        },
      ],
      isTab: 0,
      queryParams: {
        assessType: 0,
      },
      tableData: [],
      rejectShow: false,
      rejectContent: '',
    }
  },
  watch: {
    isTab(n, o) {
      this.queryParams.assessType = n
      this.getDataList()
    },
  },
  onLoad() {
    this.getDataList()
  },
  methods: {
    findWhy(item) {
      this.rejectContent = item.rejectMsg
      this.rejectShow = true
    },
    clickhtml(content) {
      this.rejectShow = false
      // 在组件挂载后，调用handleImageClick方法预览第一张图片
      const parser = new DOMParser()
      const doc = parser.parseFromString(content, 'text/html')
      const imgElements = doc.getElementsByTagName('img')
      if (imgElements.length > 0) {
        const firstImageUrl = imgElements[0].src
        this.handleImageClick(firstImageUrl, content)
      }
    },
    handleImageClick(url, content) {
      uni.previewImage({
        urls: this.getUrls(content),
        current: url,
      })
    },
    getUrls(content) {
      const parser = new DOMParser()
      const doc = parser.parseFromString(content, 'text/html')
      const imgElements = doc.getElementsByTagName('img')
      const urls = []
      for (let i = 0; i < imgElements.length; i++) {
        urls.push(imgElements[i].src)
      }
      return urls
    },
    updateDomicile(item) {
      if (this.queryParams.assessType == 0) {
        item.assessType = this.queryParams.assessType
        let params = item
        let queryString = Object.keys(params)
          .map(
            key =>
              `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`
          )
          .join('&')
        // let paramsString = encodeURIComponent(JSON.stringify(params))

        uni.redirectTo({
          url: '/pages/selfService/updateDomicile/addDomicile?' + queryString,
        })
      }
    },

    getDataList() {
      if (this.queryParams.assessType == 0) {
        //可申请
        sel.getApplicationInfoList(this.queryParams).then(res => {
          this.tableData = [res.data]
        })
      } else if (this.queryParams.assessType == 1) {
        //已申请
        sel.getAppliedInfoList(this.queryParams).then(res => {
          this.tableData = res.data
        })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep img {
  max-width: 100%;
  height: auto;
}
.popview {
  padding: 24rpx;
  width: 620rpx;
  .email_neir {
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #666666;
  }
}
.list_btn {
  border-top: 1rpx solid #eeeeee;
  margin-top: 20rpx;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: 20rpx;
  .sub_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30rpx;
    background: #005bac;
    color: #ffffff;
    padding: 15rpx 28rpx;
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
  }
}
.content {
  background: #f2f2f2;
  padding-bottom: 20rpx;

  .tab {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-bottom: 6rpx;
    background-color: #ffffff;

    .tab_i {
      text-align: center;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #333333;
      white-space: nowrap;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 24rpx 0;
      // background-color: pink;
    }

    .heng {
      border-bottom: 6rpx solid #005bac;
      color: #005bac;
    }

    .heng {
      color: #333333;
    }
  }

  .thecontent {
    background-color: #ffffff;
    // margin-bottom: 21rpx;
    margin-top: 20rpx;
    padding: 10rpx 23rpx 30rpx 23rpx;

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

      .line1 {
        font-size: 26rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #999999;
      }

      .line2 {
        font-size: 26rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333333;
      }

      .line3 {
        font-size: 26rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: rgba(251, 48, 36, 1);
      }
    }

    .bgrightBox {
      margin-top: 20rpx;
      padding-top: 20rpx;
      display: flex;
      justify-content: flex-end;
      border-top: 1rpx solid #eeeeee;
    }
  }
}
</style>