horzi_rai_wxa/pages-message/applyFor/applyFor.vue

<template>
  <view class="container container-apply-for">
    <blcok v-if="Object.keys(detaList).length">
      <view class="item-content">
        <text class="item-key"> 姓名：</text>
        <text class="item-value"> {{ detaList.RealName }}</text>
      </view>
      <view class="item-content">
        <text class="item-key"> 公司名：</text>
        <text class="item-value"> {{ detaList.CompanyName }}</text>
      </view>
      <view class="item-content">
        <text class="item-key"> 联系方式：</text>
        <text class="item-value"> {{ detaList.Mobile }}</text>
      </view>
      <view class="item-content">
        <text class="item-key"> 申请来源：</text>
        <text class="item-value"> {{ detaList.ApplicationSource }}</text>
      </view>
      <view class="item-content">
        <text class="item-key"> 名片：</text>
      </view>
      <image class="card-box" :src="detaList.BusinessCardUrl" @click="lookImage"></image>
    </blcok>
    <Loading />
  </view>
</template>

<script>
import { MsgTemplate } from "@/config/api.js";
export default {
  data() {
    return {
      detaList: {},
      applyId: 0,
    };
  },
  methods: {
    async getDetail() {
      const res = await MsgTemplate.userApplyDetail({
        ApplyRecordId: this.applyId,
      });
      if (res.Ret === 200) {
        let { Data } = res;
        this.detaList = Data.Detail || {};
      }
    },
    lookImage() {
      uni.previewImage({
        urls: [this.detaList.BusinessCardUrl], //查看图片的数组
      });
    },
  },
  onLoad(options) {
    this.applyId = Number(options.id) || 0;
    this.applyId && this.getDetail();
  },
};
</script>

<style lang="scss">
.container-apply-for {
  padding: 20rpx 20rpx 20rpx 35rpx;
  color: #333;
  font-size: 34rpx;
  .item-content {
    display: flex;
    margin-top: 50rpx;
    .item-key {
      width: 170rpx;
      flex-shrink: 0;
      text-align: right;
    }
    .item-value {
      flex: 1;
    }
  }
  .card-box {
    width: 682rpx;
    height: 425rpx;
    margin-top: 20rpx;
  }
}
</style>