xinfeiyue-wx/component/Qrcode/index.vue

<template>
  <view class="customer-service">
    <view class="customer-service__title"> 系统提示 </view>
    <view class="customer-service__body">
      <view class="customer-service__body--text1"> 您需要联系我们的客服，获取授权 </view>
      <image
          mode="aspectFit"
          show-menu-by-longpress
          :src="qrcode"
      ></image>
      <view class="customer-service__body--text2">{{ name }}：<text style="font-size: 28rpx;">{{ phone }}</text></view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      info: {}
    };
  },
  methods: {
    async getData() {
      try {
        const res = await this.$u.api.parameterShow({
          number: 'customer_service'
        })
        this.info = res
      } catch (err) {
        console.error(err)
      }
    }
  },
  computed: {
    name() {
      return this.info.detail?.find(i => i.value === 'name')?.remark || ' '
    },
    phone() {
      return this.info.detail?.find(i => i.value === 'phone')?.remark || ' '
    },
    qrcode() {
      return this.info.detail?.find(i => i.value === 'qrcode')?.remark || ' '
    }
  },
  created() {
    this.getData()
  },
}
</script>

<style lang="scss">
.customer-service {
  width: 654rpx;
  border-radius: 20rpx;
  overflow: hidden;

  &__title {
    font-size: 32rpx;
    color: #ffffff;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    background-image: linear-gradient(263deg, #da521c 0%, #eb9b35 100%);
    padding: 40rpx 0;
    line-height: 1;
  }
  &__body {
    color: #333;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    &--text1 {
      font-size: 24rpx;
      text-align: center;
      padding-top: 50rpx;
    }
    & > image {
      width: 400rpx;
      height: 440rpx;
      margin-top: 34rpx;
    }
    &--text2 {
      font-size: 26rpx;
      color: #333333;
      text-align: center;
      padding-top: 58rpx;
      padding-bottom: 70rpx;
    }
  }
}
</style>