assessment-front/pages_order/report/codeErrorPopup.vue

<template>
  <uv-popup 
    ref="popup"
    :overlayOpacity="0"
    mode="center"
    bgColor="none"
  >
    <view class="flex flex-column popup__view">
      <text class="title">兑换码输入有误，请与客服确认～</text>
      <text class="desc">联系客服获取抵扣码</text>
      <image class="img" :src="configList.customer_service_qrcode" :show-menu-by-longpress="true" mode="widthFix"></image>
      <button class="btn" @click="close">好的</button>
    </view>
  </uv-popup>
</template>

<script>
  import { mapState } from 'vuex'

	export default {
    props: {
      src: {
        type: String,
        default: null
      }
    },
		data() {
			return {
      }
    },
    computed : {
      ...mapState(['configList'])
    },
    methods: {
      open() {
        this.$refs.popup.open();
      },
      close() {
        this.$refs.popup.close();
      },
    },
  }
</script>

<style scoped lang="scss">
  .popup__view {
    position: relative;
    width: 600rpx;
    min-height: 582rpx;
    padding: 60rpx 59rpx 40rpx 59rpx;
    box-sizing: border-box;
    background: #FFFFFF;
    border-radius: 16rpx;
  }

  .title {
    font-size: 30rpx;
    font-weight: 600;
    color: #000000;
  }

  .desc {
    margin-top: 48rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #000000;
  }

  .img {
    margin: 40rpx 0 75rpx 0;
    width: 156rpx;
    height: auto;
    min-height: 156rpx;
  }

  .btn {
    width: 100%;
    padding: 18rpx 0;
    box-sizing: border-box;
    font-size: 30rpx;
    color: #FFFFFF;
    background: #014FA2;
    border-radius: 40rpx;
  }
</style>