czg_team/cashier_wx
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加查看券码弹窗

Browse Source
This commit is contained in:
YeMingfei666
2025-12-09 17:57:16 +08:00
parent d45708df5e
commit 1e43269f65
4 changed files with 147 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
scoreShop/components/modal.vue
View File

@@ -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="btn cancel" @click="close">{{ cancelText }}</view>
<view class="btn success" @click="confirm">{{ confirmText }}</view>
</view>
<view class="bottom">
<view class="btn cancel" @click="close">{{ cancelText }}</view>
<view class="btn success" @click="confirm">{{ confirmText }}</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,

9
scoreShop/order/components/order-list.vue
View File

@@ -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;

91
scoreShop/order/detail.vue
View File

@@ -14,26 +14,62 @@
</view>
<template v-if="true">
<view class="u-m-t-16">
<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 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>
</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>

45
scoreShop/order/index.vue
View File

@@ -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>