<template>
  <view class="order-pick-up">
    <view class="up-code-title">
      <HeadlineDecorate />
      <text class="text">出示数字码向店长核销</text>
      <HeadlineDecorate reversal />
    </view>
    <view class="u-flex-center code">
      <text class="u-font28">{{
        item.packagePickupVo?.verificationCode || ""
      }}</text>
      <text
        class="iconfont iconcopy"
        @click="copy(item.packagePickupVo?.verificationCode || '')"
        >&#xe64f;</text
      >
    </view>
    <view class="qrcode">
      <uv-qrcode
        ref="qrcodeRef"
        size="254rpx"
        :value="item.packagePickupVo?.verificationCode || ''"
      ></uv-qrcode>
    </view>
  </view>
</template>

<script setup>
import { ref, watch } from "vue";

const props = defineProps({
  item: {
    type: Object,
    default: () => ({}),
  },
});

const item = ref(props.item || {});

watch(
  () => props.item,
  (newValue) => {
    item.value = newValue || {};
  }
);

// 复制
const copy = (code) => {
  if (!code) return;
  uni.setClipboardData({
    data: code,
    success: () => {
      uni.showToast({
        title: "复制成功",
      });
    },
  });
};
</script>

<style lang="scss" scoped>
.order-pick-up {
  width: 750rpx;
  background-color: #fff;
  padding: 30rpx;
  box-sizing: border-box;
  margin-top: 10rpx;
  text-align: center;
  .up-code-title {
    font-size: 36rpx;
    font-weight: 600;
    .text {
      margin: 0 15rpx;
    }
  }
  .code {
    justify-content: center;
    margin-top: 10rpx;
    color: #fb2914;
  }
  .qrcode {
    width: 326rpx;
    height: 326rpx;
    border: 1rpx solid #dcbcb8;
    border-radius: 20rpx;
    margin: 40rpx auto 30rpx auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .address {
    font-size: 26rpx;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: center;
    color: #1a1a1a;
    padding-top: 0 !important;
  }
}
</style>
