增加兑换中心页面

user/exchange/components/confirm.vue

@@ -0,0 +1,101 @@
+<template>
+  <view class="">
+    <up-popup
+      :show="show"
+      bgColor="transparent"
+      :safeAreaInsetBottom="false"
+       :closeOnClickOverlay="false"
+        @close="close"
+      mode="center"
+    >
+      <view class="box">
+        <view class="u-flex top justify-between u-p-32">
+          <text class="title">确认信息</text>
+          <up-icon name="close"></up-icon>
+        </view>
+        <view class="info">
+          <view class="color-333">兑换码包含内容如下:</view>
+          <view class="u-m-t-32 u-flex u-col-center">
+            <view class="color-333 font-bold small-title">店铺</view>
+            <text class="color-666 u-m-l-38">店铺名称</text>
+          </view>
+          <view class="u-m-t-32 u-flex u-col-center">
+            <view class="color-333 font-bold small-title">名称</view>
+            <text class="color-666 u-m-l-38">10张券兑换码</text>
+          </view>
+          <view class="u-m-t-32 u-flex u-col-center">
+            <view class="color-333 font-bold small-title">优惠券</view>
+            <text class="color-666 u-m-l-38">优惠券名称*2、优惠券名称*1</text>
+          </view>
+          <view class="u-m-t-32 u-flex u-col-center" style="gap: 54rpx">
+            <view class="cancel" @click="close">取消</view>
+            <view class="confirm" @click="confirm">确认</view>
+          </view>
+        </view>
+      </view>
+    </up-popup>
+  </view>
+</template>
+
+<script setup>
+import { ref } from "vue";
+const show = defineModel({
+  type: Boolean,
+  default: false,
+});
+const emits = defineEmits(["cancel", "confirm"]);
+function close() {
+  show.value = false;
+  emits("cancel");
+}
+function confirm() {
+  show.value = false;
+  emits("confirm");
+}
+</script>
+<style lang="scss" scoped>
+.box {
+  width: 586rpx;
+  background-color: #fff;
+  border-radius: 16rpx;
+  overflow: hidden;
+  .title {
+    color: #000000;
+    font-size: 32rpx;
+    font-weight: 700;
+  }
+  .top {
+    border-bottom: 2rpx solid #ededed;
+  }
+  .info {
+    padding: 32rpx 40rpx 40rpx 40rpx;
+    font-size: 28rpx;
+  }
+  .small-title {
+    min-width: 84rpx;
+    text-align: right;
+  }
+}
+
+.cancel {
+  padding: 14rpx 76rpx;
+  border-radius: 36rpx;
+  border: 2rpx solid #e8ad7b;
+  color: #e8ad7b;
+  font-size: 32rpx;
+  font-weight: 400;
+  white-space: nowrap;
+  line-height: 48rpx;
+}
+.confirm {
+  padding: 14rpx 76rpx;
+  border-radius: 36rpx;
+  background-color: #e8ad7b;
+  border: 2rpx solid #e8ad7b;
+  color: #fff;
+  font-size: 32rpx;
+  font-weight: 400;
+  line-height: 48rpx;
+  white-space: nowrap;
+}
+</style>