增加查看券码弹窗

scoreShop/components/modal.vue

@@ -1,6 +1,10 @@
 <template>
   <view>
-    <up-popup :show="show" mode="center" :safeAreaInsetBottom="mode==='bottom'?true:false">
+    <up-popup
+      :show="show"
+      mode="center"
+      :safeAreaInsetBottom="mode === 'bottom' ? true : false"
+    >
       <view class="popup-content">
         <view class="top u-flex u-row-between">
           <text class="font-bold u-font-32 color-333">{{ title }}</text>
@@ -10,12 +14,14 @@
         <scroll-view style="max-height: 50vh" :scroll-y="true">
           <slot></slot>
         </scroll-view>
-        <up-line></up-line>
+        <template v-if="showBottom">
+          <up-line></up-line>
 
-        <view class="bottom">
+          <view class="bottom">
-          <view class="btn cancel" @click="close">{{ cancelText }}</view>
+            <view class="btn cancel" @click="close">{{ cancelText }}</view>
-          <view class="btn success" @click="confirm">{{ confirmText }}</view>
+            <view class="btn success" @click="confirm">{{ confirmText }}</view>
-        </view>
+          </view>
+        </template>
       </view>
     </up-popup>
   </view>
@@ -39,6 +45,10 @@ const props = defineProps({
     type: String,
     default: "取消",
   },
+  showBottom: {
+    type: Boolean,
+    default: true,
+  },
 });
 const show = defineModel({
   type: Boolean,

scoreShop/order/components/order-list.vue

@@ -13,13 +13,20 @@
         </view>
       </view>
       <view class="u-m-t-28 u-flex u-row-right btns">
-        <view class="btn look">查看券码</view>
+        <view class="btn look" @click="lookCode">查看券码</view>
         <view class="btn black">申请退款</view>
       </view>
     </view>
   </view>
 </template>
+<script setup>
+import { ref } from "vue";
 
+const emits = defineEmits(["lookCode"]);
+const lookCode = () => {
+  emits("lookCode");
+};
+</script>
 <style lang="scss">
 .list {
   padding: 28rpx;

scoreShop/order/detail.vue

@@ -14,26 +14,62 @@
       </view>
       <template v-if="true">
         <view class="u-m-t-16">
-        <view class="u-flex u-row-center">
+          <view class="u-flex u-row-center">
-          <up-qrcode cid="ex1" :size="104" :val="qrcode"></up-qrcode>
+            <up-qrcode cid="ex1" :size="104" :val="qrcode"></up-qrcode>
-        </view>
+          </view>
-        <view class="u-m-t-22 u-flex u-row-center">
+          <view class="u-m-t-22 u-flex u-row-center">
-          <text>{{ qrcode }}</text>
+            <text>{{ qrcode }}</text>
-          <view @click="copyCode">
+            <view @click="copyCode">
-            <image
+              <image
-              src="/scoreShop/static/image/copy.png"
+                src="/scoreShop/static/image/copy.png"
-              class="u-m-l-24 copy"
+                class="u-m-l-24 copy"
-            ></image>
+              ></image>
+            </view>
           </view>
         </view>
-      </view>
       </template>
-      
+
       <view class="u-m-t-16">
         <text class="color-666">领取方式</text>
         <text class="u-m-l-20">需前往店铺自行兑换领取</text>
       </view>
     </view>
+
+    <view class="bottom">
+      <view class="u-flex u-row-between item">
+        <text>兑换商品：</text>
+        <text class="color-666">这里是商品名称</text>
+      </view>
+      <view class="u-flex u-row-between item">
+        <text>兑换数量：</text>
+        <text class="color-666">1份</text>
+      </view>
+      <view class="u-flex u-row-between item">
+        <text>消耗积分：</text>
+        <text class="color-666">800</text>
+      </view>
+      <view class="u-flex u-row-between item">
+        <text>支付金额：</text>
+        <text class="color-666">9.99元</text>
+      </view>
+      <view class="u-flex u-row-between item">
+        <text>下单时间：</text>
+        <text class="color-666">2025-12-3 17:19：32</text>
+      </view>
+      <view class="u-flex u-row-between item">
+        <text>核销时间：</text>
+        <text class="color-666">2025-12-04 01:13:14</text>
+      </view>
+      <view class="u-flex u-row-between item">
+        <text>订单号：</text>
+        <text class="color-666">DH202511300001</text>
+      </view>
+    </view>
+
+    <view class="btns">
+      <view class="btn cancel">申请退款</view>
+      <view class="btn success ">取消退款</view>
+    </view>
   </view>
 </template>
 <script setup>
@@ -86,4 +122,35 @@ function copyCode() {
   width: 28rpx;
   height: 28rpx;
 }
+.bottom {
+  background: #fff;
+  border-radius: 32rpx;
+  padding: 16rpx 28rpx;
+  margin-top: 48rpx;
+  .item {
+    padding: 16rpx 0;
+  }
+}
+.btns {
+  margin-top: 66rpx;
+  display: flex;
+  justify-content: center;
+  gap: 48rpx;
+  .btn {
+    border: 2rpx solid transparent;
+    border-radius: 100rpx;
+    background: #fff;
+    padding: 14rpx 76rpx;
+    font-size: 32rpx;
+    &.success {
+      background-color: #e8ad7b;
+      border-color: #e8ad7b;
+      color: #fff;
+    }
+    &.cancel {
+      border-color: #e8ad7b;
+      color: #e8ad7b;
+    }
+  }
+}
 </style>

scoreShop/order/index.vue

@@ -13,12 +13,51 @@
       </view>
     </up-sticky>
 
-    <orderList :list="list" />
+    <orderList :list="list" @lookCode="lookCode" />
+
+    <modal v-model="modalData.show" title="立即兑换确认" :showBottom="false">
+      <view class="u-p-28">
+        <view class="u-flex u-row-center">
+          <up-qrcode cid="ex1" :size="104" :val="qrcode"></up-qrcode>
+        </view>
+        <view class="u-m-t-22 u-flex u-row-center">
+          <text>{{ qrcode }}</text>
+          <view @click="copyCode">
+            <image
+              src="/scoreShop/static/image/copy.png"
+              class="u-m-l-24 copy"
+            ></image>
+          </view>
+        </view>
+      </view>
+    </modal>
   </view>
 </template>
 
 <script setup>
+import modal from "@/scoreShop/components/modal.vue";
 import orderList from "./components/order-list.vue";
+const modalData = reactive({
+  show: false,
+});
+const qrcode = ref("daddadaddad");
+
+function copyCode() {
+  uni.setClipboardData({
+    data: qrcode.value,
+    success: function () {
+      uni.showToast({
+        title: "复制成功",
+        icon: "none",
+      });
+    },
+  });
+}
+
+
+function lookCode() {
+  modalData.show = true;
+}
 const tabs = reactive({
   list: [
     {
@@ -59,4 +98,8 @@ const list = ref([]);
     font-weight: 700;
   }
 }
+.copy {
+  width: 28rpx;
+  height: 28rpx;
+}
 </style>