zoujing/YGChatCS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 核销的样式的调整

Browse Source
This commit is contained in:
zoujing
2026-03-16 17:10:09 +08:00
parent 87e7f7522f
commit f5c3a3ca2d
2 changed files with 73 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/pages-order/order/components/OrderQrcode/index.vue
View File

@@ -16,25 +16,65 @@
<uni-icons class="close absolute" type="close" size="20" color="#CACFD8" @click="handleClose" />
</view>
<view class="bg-white border-box rounded-12 flex flex-col flex-items-center flex-justify-center p-20 mb-12 mx-12">
<view
class="flex flex-items-center flex-justify-center mt-20 p-20 rounded-12 border borderColor"
:style="{ borderColor: props.selectedVoucher?.color }"
>
<Qrcode
v-if="showQrcode"
:size="props.size"
:unit="props.unit"
:val="qrcodeVal"
:loadMake="true"
:onval="true"
/>
<view class="bg-white border-box rounded-12 flex flex-col flex-items-center flex-justify-center p-12 mb-12 mx-12">
<view class="flex flex-col w-full">
<view >
<view class="font-size-16 font-500 color-000 line-height-24 ellipsis-1">
{{ props.orderData.commodityName }}
</view>
<view class="mt-20 mb-24 bg-theme-color-50 theme-color-500 font-size-14 px-12 line-height-24 rounded-12">{{ props.selectedVoucher?.name }}
<view class="border-box font-size-12 color-99A0AE line-height-16">
{{ props.orderData.commodityAddress }}
</view>
</view>
<view v-if="props.selectedVoucher" class="flex flex-row mt-8">
<view class="bg-F5F7FA text-color-600 font-size-12 p-4 rounded-4 mr-4">总计{{ props.selectedVoucher.count }}{{ props.selectedVoucher.unit }}
</view>
<view class="bg-theme-color-50 theme-color-500 font-size-12 p-4 rounded-4">剩{{ props.selectedVoucher.count -
props.selectedVoucher.writeOffCount }}{{ props.selectedVoucher.unit }}可用</view>
</view>
</view>
<view class="flex flex-col w-full flex-items-center flex-justify-center border-box rounded-8 border mt-12">
<view class="flex flex-row flex-justify-between border-box w-full mt-16 px-12">
<view class="bg-theme-color-50 theme-color-500 font-size-14 px-12 line-height-24 rounded-12">凭证1</view>
<view class="text-color-500 font-size-14 px-12 line-height-24 rounded-12">此码仅可核销1份</view>
</view>
<view class="flex flex-items-center flex-justify-center mt-20 p-20 rounded-12 border borderColor"
:style="{ borderColor: props.selectedVoucher?.color }">
<Qrcode v-if="showQrcode" :size="props.size" :unit="props.unit" :val="qrcodeVal" :loadMake="true"
:onval="true" />
</view>
<view class="mt-20 mb-24 bg-theme-color-50 theme-color-500 font-size-14 px-12 line-height-24 rounded-12">{{
props.selectedVoucher?.name }}
</view>
</view>
<view class="flex flex-row w-full flex-items-center flex-justify-between mt-16 mb-24">
<view class="actions-btn" @click.stop="upAction">
<uni-icons type="left" size="16" color="#171717" />
</view>
<view class="flex flex-col">
<view class="flex flex-row flex-justify-center flex-items-center">
<view class="theme-color-500 font-size-16">1</view>
<view class="text-color-600 font-size-12">/3</view>
</view>
<view class="text-color-600 font-size-14">扫码后点击下一张</view>
</view>
<view class="actions-btn" @click.stop="downAction">
<uni-icons type="right" size="16" color="#171717" />
</view>
</view>
</view>
</view>
</uni-popup>
@@ -126,6 +166,15 @@ const handleClose = () => {
emit("update:modelValue", false);
emit("close");
};
const upAction = () => {
console.log("点击了上一张");
};
const downAction = () => {
console.log("点击了下一张");
};
</script>
<style scoped lang="scss">

10
src/pages-order/order/components/OrderQrcode/styles/index.scss
View File

@@ -11,3 +11,13 @@
.borderColor {
border-color: $theme-color-500;
}
.actions-btn {
width: 40px;
height: 40px;
border-radius: 20px;
background-color: #F5F5F5;
display: flex;
align-items: center;
justify-content: center;
}