xdd-uniapp-new/pkg_user/views/gift/receiveDone.vue

<template>
  <view class="page">
    <!-- 商品信息展示区 -->
    <view class="card">
      <image class="cover" :src="mock.product.image" mode="aspectFill" />
      <view class="info">
        <view class="title">{{ mock.product.name }}</view>
      </view>
    </view>

    <!-- 商家联系信息与二维码 -->
    <view class="section">
      <view class="code">核销码：{{ mock.verify.code }}</view>
      <view class="qrcode-wrap">
        <image class="qrcode" :src="mock.verify.qrcode" mode="widthFix" />
      </view>
      <view class="notice v12-primary-text v12-font-24">注：请提前和商家确认入住时间</view>
    </view>
    <!-- 操作按钮 -->
    <view class="actions">
      <button class="primary" @click="goGiftList">您已领取礼包，去查看</button>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ReceiveDone',
  data() {
    return {
      mock: {
        product: {
          image: 'https://resource.xdd618.com/1/202501020/1760933080303_%E5%A4%A7%E7%90%86%E9%86%92%E6%9D%A5%20(5).jpg',
          name: '醒来客栈大床房3晚',
          type: 'countyFamous',
          desc: '迎曦楼大床房37-48㎡，房间设计温馨，设施齐全，柔软的床铺和明亮的空间，收容您所有的疲惫。',
          price: 1887
        },
        order: {
          id: '1981535966489214976',
          start: '2025-12-05',
          end: '2025-12-08',
          minDays: 4
        },
        contact: {
          wechat: '19187244812'
        },
        verify: {
          code: '966489214976',
          qrcode: 'https://shop.xdd618.com/api/file/qrcode/966489214976_yshop.jpg'
        }
      }
    }
  },
  onLoad(query) {
    // 可扩展：如果后续需要从 query 读取数据，可在此处理
  },
  methods: {
    copyWechat() {
      uni.setClipboardData({
        data: this.mock.contact.wechat,
        success: () => {
          uni.showToast({ title: '微信号已复制', icon: 'success' })
        }
      })
    },
    goGiftList() {
      this.$yrouter.push('/pkg_user/views/giftList')
    },
    goHome() {
      uni.switchTab({ url: '/pages/home/index' })
    }
  }
}
</script>

<style lang="less" scoped>
.page {
  padding: 24rpx 24rpx 120rpx;
}
.card {
  display: flex;
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
}
.cover {
  width: 220rpx;
  height: 220rpx;
}
.info {
  flex: 1;
  padding: 20rpx;
}
.title {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
}
.type {
  display: inline-block;
  margin-top: 8rpx;
  padding: 2rpx 10rpx;
  font-size: 22rpx;
  color: #C52733;
  border: 1rpx solid #C52733;
  border-radius: 8rpx;
}
.desc {
  margin-top: 12rpx;
  font-size: 24rpx;
  color: #666;
}
.price {
  margin-top: 8rpx;
  font-size: 32rpx;
  color: #C52733;
  font-weight: 600;
}
.yen {
  font-size: 26rpx;
}
.section {
  margin-top: 20rpx;
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
}
.section-title {
  font-size: 28rpx;
  color: #333;
  font-weight: 600;
}
.row {
  margin-top: 16rpx;
  display: flex;
  justify-content: space-between;
  font-size: 26rpx;
  color: #333;
}
.label {
  color: #666;
}
.value {
  font-weight: 500;
}
.code {
  margin-top: 16rpx;
  font-size: 28rpx;
  color: #C52733;
  text-align: center;
}
.qrcode-wrap {
  margin-top: 12rpx;
  display: flex;
  justify-content: center;
}
.qrcode {
  width: 260rpx;
  height: 260rpx;
}
.copy-row {
  margin-top: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.copy-btn {
  border: 1rpx solid #e5e5e5;
  border-radius: 100rpx;
  height: 56rpx;
  line-height: 56rpx;
  padding: 0 24rpx;
  font-size: 26rpx;
}
.notice {
  margin-top: 16rpx;
  font-size: 22rpx;
  color: #999;
  text-align: center;
}
.actions {
  margin-top: 32rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.primary {
  background: #C52733;
  color: #fff;
  border-radius: 100rpx;
  padding: 0rpx 40rpx;
  font-size: 28rpx;
}
.ghost {
  margin-top: 16rpx;
  background: #fff;
  color: #C52733;
  border: 1rpx solid #C52733;
  border-radius: 100rpx;
  padding: 14rpx 40rpx;
  font-size: 28rpx;
}
</style>