book-hi/pages/home/components/upsell-qrcode.vue

<template>
  <custom-popup
    v-model="showPopup"
    mode="center"
    border-radius="24"
    width="650rpx"
    :bg-color="'transparent'"
  >
    <view class="popup-container">
      <!-- 顶部标题 -->
      <view class="header">
        <view class="title-text">
          让好友打开
          <!-- #ifdef MP-WEIXIN -->
          <text class="green">微信</text>
          <!-- #endif -->
          <!-- #ifdef MP-ALIPAY -->
          <text class="green">支付宝</text>
          <!-- #endif -->
          扫一扫
        </view>
        <view class="subtitle-text">加油！你就要成功了</view>
      </view>

      <!-- 二维码区域 -->
      <view class="qrcode-section">
        <image
          class="qrcode-img"
          :src="qrcode"
          mode="aspectFit"
        ></image>
      </view>

      <!-- 关闭按钮 -->
      <view class="close-button" @click="closePopup">
        <image src="/static/img/activity/close2.png" mode="widthFix"></image>
      </view>
    </view>
  </custom-popup>
</template>

<script>
import customPopup from '../../../components/custom-popup.vue';
export default {
  components: {
    customPopup,
  },
  data() {
    return {
      showPopup: false,
      qrcode: '',
      // 可扩展为自定义图标
      wechatIcon: false,
      scanIcon: false,
      successIcon: false,
    };
  },
  methods: {
    open(data) {
      this.showPopup = true;
      this.getQrcode(data.upsellCode);
    },
    //获取二维码
    getQrcode(upsellCode){
      uni.$u.http.get(`/token/order/getUpsellQrcode?upsellCode=${upsellCode}`).then(res=>{
        if(res.code==200){
          this.qrcode = res.data;
        }
      })
    },
    closePopup() {
      this.showPopup = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.popup-container {
  position: relative;
  padding: 30rpx 30rpx 80rpx 30rpx;
  box-sizing: border-box;
  background: url("https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/upsellbg.png") no-repeat center center;
  background-size: 100% 100%;
  height: 1020rpx;
}

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20rpx;
  .title-text {
    font-size: 38rpx;
    font-weight: bold;
    color: #222;
    margin-bottom: 10rpx;
    .green {
      color: #39c248;
    }
  }
  .subtitle-text {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 30rpx;
  }
}

.qrcode-section {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400rpx;
  width: 400rpx;
  background: #38c249;
  margin: 30rpx auto;
  border-radius: 24rpx;
  .qrcode-img {
    width: 300rpx;
    height: 300rpx;
    border-radius: 24rpx;
    background: #fff;
    border: 8rpx solid #fff;
  }
}

.close-button {
  position: absolute;
  bottom: -100rpx;
  left: 50%;
  transform: translateX(-50%);
  image {
    width: 70rpx;
    height: 70rpx;
  }
}
</style>