austin
/
staff
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

入库(home)

This commit is contained in:
张文涛 2025-03-27 23:43:09 +08:00
parent 71a2d530cc
commit 299b4948b7
5 changed files with 334 additions and 225 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
api/ticket.ts
View File

@ -12,12 +12,11 @@ export const myTicketList = (data : any = {}) => get('v1/ticket/my/list', data);
export const myTicketInfo = (data : any = {}) => get('v1/ticket/my/info', data); export const myTicketInfo = (data : any = {}) => get('v1/ticket/my/info', data);
// 获取码信息
export const scanCodeGet = (data : any = {}) => get('v1/scan/code/get', data);
// 入库接口
export const orderStorageAct = (data : any) => post('v1/order/storage/act', data);
// 获取码信息
export const orderStorageVerify = (data : any) => post('v1/order/storage/verify', data);
// 入库&核销记录
export const orderRecord = (data : any = {}) => get('v1/order/record', data);

2
pages.json
View File

@ -172,7 +172,7 @@
"current": 0, // 当前激活的条件，默认为 0 "current": 0, // 当前激活的条件，默认为 0
"list": [{ "list": [{
"name": "", // 条件名称 "name": "", // 条件名称
"path": "pagesA/my_order/list", // 要打开的页面路径 "path": "pagesA/warehousing/index", // 要打开的页面路径
"query": "" // 可选的页面参数 "query": "" // 可选的页面参数
}] }]
} }

12
pagesA/my_order/detail.vue
View File

@ -123,7 +123,7 @@
class="scene-image" class="scene-image"
:src="item" :src="item"
mode="aspectFill"> mode="aspectFill">
</image> </image>
</view> </view>
</view> </view>
</view> </view>
@ -150,7 +150,7 @@
<view class="timeline-content"> <view class="timeline-content">
<view class="timeline-time">2025-03-13 11:25:18</view> <view class="timeline-time">2025-03-13 11:25:18</view>
<view class="timeline-text">工单已接单</view> <view class="timeline-text">工单已接单</view>
</view> </view>
</view> </view>
<view v-if="ticketInfo.status >= 2" class="timeline-item"> <view v-if="ticketInfo.status >= 2" class="timeline-item">
@ -178,8 +178,8 @@
import { onLoad, onShow } from '@dcloudio/uni-app' import { onLoad, onShow } from '@dcloudio/uni-app'
import { useNavigation } from '@/hooks/useNavigation' import { useNavigation } from '@/hooks/useNavigation'
import {myTicketInfo} from '@/api/ticket' import {myTicketInfo} from '@/api/ticket'
import { useToast } from '@/uni_modules/wot-design-uni' import { useToast } from '@/uni_modules/wot-design-uni'
const Toast = useToast() const Toast = useToast()
const loading = ref<boolean>(false) const loading = ref<boolean>(false)
const bntloading = ref<boolean>(false) const bntloading = ref<boolean>(false)
@ -303,7 +303,7 @@
-webkit-backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
z-index: 998; z-index: 998;
} }
/* 卡片通用样式 */ /* 卡片通用样式 */
.ticket-card, .info-card { .ticket-card, .info-card {
width: 92%; width: 92%;
@ -623,7 +623,7 @@
} }
} }
} }
::v-deep .wd-button { ::v-deep .wd-button {
width: auto !important; width: auto !important;
height: 80rpx !important; height: 80rpx !important;

465
pagesA/warehousing/index.vue
View File

@ -41,7 +41,7 @@
</wd-tabs> </wd-tabs>
</view> </view>
<view class="li-w-90% li-mx-auto li-mt-50 li-flex li-items-center"> <view v-if="activeMode === 0" class="li-w-90% li-mx-auto li-mt-50 li-flex li-items-center">
<wd-tooltip placement="bottom-start" content="开启后可以连续入库多个订单"> <wd-tooltip placement="bottom-start" content="开启后可以连续入库多个订单">
<view class="li-flex li-items-center li-mr-10"> <view class="li-flex li-items-center li-mr-10">
<view class="li-mr-4 li-text-28 li-text-#666">连续入库</view> <view class="li-mr-4 li-text-28 li-text-#666">连续入库</view>
@ -56,7 +56,8 @@
<!-- 扫码模式 --> <!-- 扫码模式 -->
<view v-if="activeMode === 0" class=" li-flex li-flex-col li-items-center"> <view v-if="activeMode === 0" class=" li-flex li-flex-col li-items-center">
<view class="scan-button-wrapper li-mt-50" @click="scanCode"> <view class="scan-button-wrapper li-mt-50" @click="scanCode">
<view class="scan-button li-flex li-items-center li-justify-center" :class="{'btn-scanning': isScanning}"> <view class="scan-button li-flex li-items-center li-justify-center"
:class="{'btn-scanning': isScanning}">
<text class="ri-qr-scan-2-line li-text-90"></text> <text class="ri-qr-scan-2-line li-text-90"></text>
<view class="scan-line" :class="{'scan-active': isScanning}"></view> <view class="scan-line" :class="{'scan-active': isScanning}"></view>
</view> </view>
@ -66,7 +67,7 @@
</view> </view>
<!-- 手动输入模式 --> <!-- 手动输入模式 -->
<view v-else class="input-mode-container"> <view v-else class="input-mode-container li-mt-100">
<view class="li-bg-white li-rd-20 li-px-30 li-py-40 li-shadow-sm li-mt-30"> <view class="li-bg-white li-rd-20 li-px-30 li-py-40 li-shadow-sm li-mt-30">
<view class="li-text-32 li-mb-30 li-text-#333">请输入订单号</view> <view class="li-text-32 li-mb-30 li-text-#333">请输入订单号</view>
<wd-input v-model="orderNumber" placeholder="请输入需要入库的订单号" clear-able /> <wd-input v-model="orderNumber" placeholder="请输入需要入库的订单号" clear-able />
@ -104,10 +105,9 @@
</view> </view>
<!-- 空状态提示 --> <!-- 空状态提示 -->
<view v-if="verificationRecords.length === 0"
class="empty-state li-w-92% li-mx-auto li-mt-60 li-flex li-flex-col li-items-center"> <view v-if="verificationRecords.length==0" class="!li-mt-100">
<text class="ri-inbox-line li-text-100 li-text-#ddd"></text> <wd-status-tip image="search" tip="暂无入库记录" />
<view class="li-text-30 li-text-#999 li-mt-20">暂无入库记录</view>
</view> </view>
@ -120,76 +120,121 @@
custom-style="height: auto; max-height: 80vh;"> custom-style="height: auto; max-height: 80vh;">
<view class="product-confirm-popup"> <view class="product-confirm-popup">
<view class="product-header"> <view class="product-header">
<text class="ri-checkbox-circle-line li-text-44 li-text-#0070F0"></text> <text class="ri-checkbox-circle-line li-text-42 li-text-#0070F0"></text>
<text class="li-text-32 li-text-#333 li-ml-10">商品确认</text> <text class="li-text-32 li-text-#333 li-ml-10">商品确认 ({{orderInfo.product.length}}件)</text>
</view> </view>
<view class="product-content"> <scroll-view scroll-y class="product-scroll">
<view class="product-image li-flex li-justify-between li-items-center li-mt-30 li-px-40"> <view class="product-content">
<view class="image-container" @click="previewImage"> <view v-for="(item, index) in orderInfo.product" :key="index" class="product-item">
<image src="../../static/swiper/1.png" mode="aspectFill" class="product-img"></image> <view class="product-image li-flex li-justify-between li-items-center li-mt-30 li-px-40">
<view class="image-overlay"> <view class="image-container" @click="previewImage(item.picture)">
<text class="ri-zoom-in-line li-text-44 li-text-white"></text> <image :src="item.picture" mode="aspectFill" class="product-img"></image>
</view> <view class="image-overlay">
</view> <text class="ri-zoom-in-line li-text-44 li-text-white"></text>
<view class="li-ml-20 li-flex li-flex-col li-justify-center"> </view>
<view class="li-flex li-flex-col"> </view>
<view class="li-flex li-items-center"> <view class="li-ml-20 li-flex li-flex-col li-justify-center li-w-500">
<text class="li-text-30 li-text-#333 li-mr-10">数量:</text> <view class="li-flex li-flex-col li-items-end">
<text class="li-text-36 li-text-#0070F0">1</text> <view class="li-flex li-items-center">
<text class="li-text-30 li-text-#333 li-mr-10">数量:</text>
<text class="li-text-36 li-text-#0070F0">{{item.num}}</text>
</view>
<view class="li-text-24 li-text-#999 li-mt-10">商品规格: {{item.spec_name}}</view>
</view>
</view>
</view>
<view class="product-info li-mt-30 li-px-30">
<view class="info-item li-flex li-items-center li-mb-20">
<text
class="ri-box-2-line li-text-36 li-text-#0070F0 li-mr-10 li-flex li-items-center li-justify-center"></text>
<view class="info-content">
<text class="li-text-30 li-text-#333">商品名称: {{item.product_name}}</text>
</view>
</view>
</view>
<view v-if="index !== orderInfo.product.length - 1" class="item-divider"></view>
</view>
<view class="order-info li-mt-30 li-px-30">
<view class="info-grid">
<view class="info-item">
<view class="li-flex li-items-center">
<text class="ri-barcode-line li-text-36 li-text-#0070F0"></text>
<text class="li-text-30 li-text-#333 li-ml-15">订单号</text>
</view>
<view class="info-content">
<text class="li-text-24 li-text-#999 li-mt-4">{{orderInfo.order_no}}</text>
</view>
</view>
<view class="info-item">
<view class="li-flex li-items-center">
<text class="ri-calendar-line li-text-36 li-text-#0070F0"></text>
<text class="li-text-30 li-text-#333 li-ml-15">下单时间</text>
</view>
<view class="info-content">
<text class="li-text-24 li-text-#999 li-mt-4">{{orderInfo.create_time}}</text>
</view>
</view>
<view class="info-item">
<view class="li-flex li-items-center">
<text class="ri-user-line li-text-36 li-text-#0070F0"></text>
<text class="li-text-30 li-text-#333 li-ml-15">操作人</text>
</view>
<view class="info-content">
<text class="li-text-24 li-text-#999 li-mt-4">{{userInfo.realname}}</text>
</view>
</view>
<view class="info-item">
<view class="li-flex li-items-center">
<text class="ri-store-line li-text-36 li-text-#0070F0"></text>
<text class="li-text-30 li-text-#333 li-ml-15">负责仓库</text>
</view>
<view class="info-content">
<text
class="li-text-24 li-text-#999 li-mt-4">{{orderInfo.distribute_name}}</text>
</view>
</view>
<view class="info-item">
<view class="li-flex li-items-center">
<text class="ri-truck-line li-text-36 li-text-#0070F0"></text>
<text class="li-text-30 li-text-#333 li-ml-15">来源</text>
</view>
<view class="info-content">
<text class="li-text-24 li-text-#999 li-mt-4">{{orderInfo.supplier_name}}</text>
</view>
</view>
<view class="info-item">
<view class="li-flex li-items-center">
<text class="ri-price-tag-3-line li-text-36 li-text-#0070F0"></text>
<text class="li-text-30 li-text-#333 li-ml-15">订单类型</text>
</view>
<view class="info-content">
<text
class="li-text-24 li-text-#999 li-mt-4">{{orderInfo.type==1?'普通订单':(orderInfo.type==2?'秒杀订单':'拼团订单')}}</text>
</view>
</view> </view>
<view class="li-text-24 li-text-#999 li-mt-10">预计入库时间: 今天</view>
</view> </view>
</view> </view>
</view> </view>
<view class="product-info li-mt-30 li-px-30"> </scroll-view>
<view class="info-item li-flex li-items-center li-mb-20">
<text
class="ri-box-2-line li-text-36 li-text-#0070F0 li-mr-10 li-flex li-items-center li-justify-center"></text>
<view class="info-content">
<text class="li-text-30 li-text-#333">商品名称: 示例商品</text>
<text class="li-text-24 li-text-#999 li-mt-4">商品编码: SP202505126</text>
</view>
</view>
<view class="info-item li-flex li-items-center li-mb-20">
<text
class="ri-barcode-line li-text-36 li-text-#0070F0 li-mr-10 li-flex li-items-center li-justify-center"></text>
<view class="info-content">
<text class="li-text-30 li-text-#333">订单号: 123456789</text>
<text class="li-text-24 li-text-#999 li-mt-4">来源: 京东自营</text>
</view>
</view>
<view class="info-item li-flex li-items-center li-mb-20">
<text
class="ri-calendar-line li-text-36 li-text-#0070F0 li-mr-10 li-flex li-items-center li-justify-center"></text>
<view class="info-content">
<text class="li-text-30 li-text-#333">入库时间: 2023-10-01 12:00</text>
<text class="li-text-24 li-text-#999 li-mt-4">类型: 普通入库</text>
</view>
</view>
<view class="info-item li-flex li-items-center li-mb-20">
<text
class="ri-user-line li-text-36 li-text-#0070F0 li-mr-10 li-flex li-items-center li-justify-center"></text>
<view class="info-content">
<text class="li-text-30 li-text-#333">操作人: 张三</text>
<text class="li-text-24 li-text-#999 li-mt-4">负责仓库: 北京仓</text>
</view>
</view>
</view>
</view>
<view class="action-buttons li-px-30 li-mt-20"> <view class="action-buttons li-px-30 li-mt-20">
<wd-button custom-class="custom-shadow1" type="primary" block :loading="isConfirming" <wd-button custom-class="custom-shadow1" type="primary" block :loading="isConfirming"
@click="confirmProduct">{{ isConfirming ? '处理中...' : '确认入库' }}</wd-button> @click="GetorderStorageAct">
<view class="li-text-center li-text-28 li-text-#999 li-mt-15 li-pb-10" @click="show9 = false">稍后处理</view> {{ isConfirming ? '处理中...' : '确认入库' }}
</wd-button>
<view class="li-text-center li-text-28 li-text-#999 li-mt-15 li-pb-10" @click="show9 = false">稍后处理
</view>
</view> </view>
</view> </view>
</wd-popup> </wd-popup>
<zero-loading type="wobble" v-if="loading"></zero-loading>
</view> </view>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive } from 'vue' import { ref, reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app' import { onLoad } from '@dcloudio/uni-app'
import { scanCodeGet, orderStorageAct, orderRecord } from '@/api/ticket'
import { useNavigation } from '@/hooks/useNavigation' import { useNavigation } from '@/hooks/useNavigation'
import { useToast } from '@/uni_modules/wot-design-uni' import { useToast } from '@/uni_modules/wot-design-uni'
const Toast = useToast() const Toast = useToast()
@ -206,6 +251,9 @@
const orderNumber = ref('') // 手动输入的订单号 const orderNumber = ref('') // 手动输入的订单号
const isScanning = ref(false) // 控制扫描动画 const isScanning = ref(false) // 控制扫描动画
const isConfirming = ref(false) // 控制确认动画 const isConfirming = ref(false) // 控制确认动画
const orderInfo = ref({}) //扫码订单详情
const userInfo = ref(uni.getStorageSync('userInfo'))
const loading = ref<boolean>(false)
// 入库记录 // 入库记录
const verificationRecords = ref([ const verificationRecords = ref([
@ -220,16 +268,15 @@
const show9 = ref<boolean>(false) const show9 = ref<boolean>(false)
// 扫码入库 // 扫码入库
const scanCode = () => { const scanCode = async () => {
// 激活扫描动画 // 激活扫描动画
isScanning.value = true; isScanning.value = true;
// 延迟显示弹窗并停止动画 // 延迟显示弹窗并停止动画
setTimeout(() => { setTimeout(() => {
isScanning.value = false; isScanning.value = false;
show9.value = true; // show9.value = true;
}, 800); }, 800);
handleVerification('20250326214053344401')
return; return;
uni.scanCode({ uni.scanCode({
success: (res) => { success: (res) => {
@ -241,34 +288,51 @@
}) })
} }
const confirmProduct = () => {
const GetorderStorageAct = async () => {
// 添加动画效果和成功提示 // 添加动画效果和成功提示
isConfirming.value = true; isConfirming.value = true;
try {
// 模拟API确认时间 const res = await orderStorageAct({ order_id: orderInfo.value.order_id })
setTimeout(() => {
isConfirming.value = false;
show9.value = false;
// 显示成功提示并添加记录
Toast.success('商品入库成功'); Toast.success('商品入库成功');
show9.value = false;
// 如果不是连续模式，则显示入库成功结果 // 请求入库记录接口
if (!continuousMode.value) { getOrderRecord()
// 可以在这里跳转到详情页或显示其他结果 } catch (error) {
// uni.navigateTo({ Toast.error('入库失败')
// url: `/pagesA/warehousing/detail?code=123456789` } finally {
// }); isConfirming.value = false;
} else { }
// 在连续模式下添加一条记录 }
const newRecord = {
orderNumber: '123456789',
time: formatDateTime(new Date()), const contOrderStorageAct = async () => {
status: 'success' try {
}; const res = await orderStorageAct({ order_id: orderInfo.value.order_id })
verificationRecords.value.unshift(newRecord); Toast.success('商品入库成功');
} scanCode()
}, 800); // 请求入库记录接口
getOrderRecord()
} catch (error) {
Toast.error('入库失败')
} finally {
}
}
// 处理入库逻辑
const handleVerification = async (code) => {
const res = await scanCodeGet({ code: code })
// 模拟多条商品数据
orderInfo.value = res.data
// 连续入库
if (continuousMode.value) {
contOrderStorageAct()
} else {
// 非连续入库
show9.value = true;
}
} }
// 提交订单号入库 // 提交订单号入库
@ -281,53 +345,12 @@
orderNumber.value = '' // 清空输入 orderNumber.value = '' // 清空输入
} }
// 处理入库逻辑 const getOrderRecord = async () => {
const handleVerification = (code : string) => { try {
// 模拟入库处理过程 const res = await orderRecord({ page: 1, limit: 10, type: 1 })
// 实际项目中这里应该调用API进行入库 verificationRecords.value = res.data
} catch (error) {
// 模拟API调用延迟 } finally {
if (continuousMode.value) {
// 添加一条处理中的记录
const newRecord = {
orderNumber: code,
time: formatDateTime(new Date()),
status: 'pending'
}
verificationRecords.value.unshift(newRecord)
// 模拟API请求处理时间
setTimeout(() => {
// 模拟随机结果 (实际项目中应根据API响应决定)
const isSuccess = Math.random() > 0.2 // 80%概率成功
// 更新记录状态
const record = verificationRecords.value.find(r => r.orderNumber === code && r.status === 'pending')
if (record) {
record.status = isSuccess ? 'success' : 'fail'
}
// 显示结果提示
Toast[isSuccess ? 'success' : 'fail'](isSuccess ? '入库成功' : '入库失败')
}, 800)
} else {
// 非连续模式 - 直接跳转到详情页
Toast.loading('入库中...')
// 模拟API请求
setTimeout(() => {
Toast.close()
// 这里应该根据实际API响应决定是否跳转
// 模拟80%概率成功
if (Math.random() > 0.2) {
// 跳转到详情页，传递订单号参数
uni.navigateTo({
url: `/pagesA/verification/detail?orderNumber=${code}`
})
} else {
Toast.error('入库失败，请重试')
}
}, 800)
} }
} }
@ -366,25 +389,19 @@
} }
// 打开图片预览 // 打开图片预览
const previewImage = () => { const previewImage = (imageUrl) => {
uni.previewImage({ uni.previewImage({
urls: ['../../static/swiper/1.png'], urls: [imageUrl],
current: 0, current: 0,
indicator: 'number', indicator: 'number',
loop: false, loop: true
success: () => { })
console.log('预览成功');
},
fail: (err) => {
console.error('预览失败', err);
// 失败后的备选方案
Toast.info('图片预览加载失败');
}
});
} }
onLoad(() => { onLoad(() => {
checkRouteStack() checkRouteStack()
// 请求入库记录接口
getOrderRecord()
}) })
</script> </script>
@ -425,7 +442,7 @@
transition: all 0.3s ease; transition: all 0.3s ease;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
&.btn-scanning { &.btn-scanning {
transform: scale(0.95); transform: scale(0.95);
box-shadow: 0 4rpx 25rpx rgba(56, 165, 255, 0.4); box-shadow: 0 4rpx 25rpx rgba(56, 165, 255, 0.4);
@ -446,16 +463,16 @@
transform: scale(0.92); transform: scale(0.92);
box-shadow: 0 4rpx 15rpx rgba(56, 165, 255, 0.2); box-shadow: 0 4rpx 15rpx rgba(56, 165, 255, 0.2);
} }
&.scanning { &.scanning {
animation: scanning 0.8s ease-in-out; animation: scanning 0.8s ease-in-out;
} }
.ri-qr-scan-2-line { .ri-qr-scan-2-line {
animation: iconPulse 1.5s ease-in-out infinite alternate; animation: iconPulse 1.5s ease-in-out infinite alternate;
display: inline-block; display: inline-block;
} }
.scan-line { .scan-line {
position: absolute; position: absolute;
width: 80%; width: 80%;
@ -465,7 +482,7 @@
left: 10%; left: 10%;
animation: scanAnimation 2s ease-in-out infinite; animation: scanAnimation 2s ease-in-out infinite;
opacity: 0.2; opacity: 0.2;
&.scan-active { &.scan-active {
opacity: 1; opacity: 1;
animation: scanAnimation 0.8s ease-in-out infinite; animation: scanAnimation 0.8s ease-in-out infinite;
@ -485,7 +502,7 @@
z-index: -1; z-index: -1;
animation: ripple 2s linear infinite; animation: ripple 2s linear infinite;
} }
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
@ -505,35 +522,42 @@
transform: scale(1); transform: scale(1);
opacity: 1; opacity: 1;
} }
100% { 100% {
transform: scale(1.2); transform: scale(1.2);
opacity: 0; opacity: 0;
} }
} }
@keyframes pulse { @keyframes pulse {
0%, 100% {
0%,
100% {
transform: translateY(0); transform: translateY(0);
} }
50% { 50% {
transform: translateY(-10rpx); transform: translateY(-10rpx);
} }
} }
@keyframes scanLight { @keyframes scanLight {
0% { 0% {
left: -100%; left: -100%;
} }
50%, 100% {
50%,
100% {
left: 100%; left: 100%;
} }
} }
@keyframes iconPulse { @keyframes iconPulse {
0% { 0% {
opacity: 0.7; opacity: 0.7;
transform: scale(0.95); transform: scale(0.95);
} }
100% { 100% {
opacity: 1; opacity: 1;
transform: scale(1.05); transform: scale(1.05);
@ -545,9 +569,11 @@
top: 20%; top: 20%;
opacity: 0.5; opacity: 0.5;
} }
50% { 50% {
opacity: 1; opacity: 1;
} }
100% { 100% {
top: 80%; top: 80%;
opacity: 0.5; opacity: 0.5;
@ -559,10 +585,12 @@
transform: scale(1); transform: scale(1);
box-shadow: 0 8rpx 30rpx rgba(56, 165, 255, 0.25); box-shadow: 0 8rpx 30rpx rgba(56, 165, 255, 0.25);
} }
50% { 50% {
transform: scale(0.92); transform: scale(0.92);
box-shadow: 0 4rpx 15rpx rgba(56, 165, 255, 0.35); box-shadow: 0 4rpx 15rpx rgba(56, 165, 255, 0.35);
} }
100% { 100% {
transform: scale(1); transform: scale(1);
box-shadow: 0 8rpx 30rpx rgba(56, 165, 255, 0.25); box-shadow: 0 8rpx 30rpx rgba(56, 165, 255, 0.25);
@ -629,33 +657,54 @@
} }
.product-confirm-popup { .product-confirm-popup {
.product-scroll {
/* #ifdef MP-WEIXIN */
max-height: calc(80vh - 280rpx);
/* #endif */
/* #ifdef APP-PLUS || H5 */
max-height: calc(80vh - 380rpx);
/* #endif */
}
.product-item {
position: relative;
padding: 20rpx 0;
.item-divider {
position: absolute;
bottom: 0;
left: 40rpx;
right: 40rpx;
height: 2rpx;
background: rgba(0, 0, 0, 0.05);
}
}
.product-header { .product-header {
padding: 20rpx 30rpx; padding: 30rpx;
border-bottom: 1rpx solid #eee;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);
} }
.product-content { .product-content {
height: 850rpx ; padding-bottom: 30rpx;
overflow-y: auto; }
.product-image {
.image-container { .image-container {
position: relative; position: relative;
width: 160rpx; width: 160rpx;
height: 160rpx; height: 160rpx;
border-radius: 16rpx; border-radius: 16rpx;
overflow: hidden; overflow: hidden;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
.product-img { .product-img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
transition: transform 0.3s ease;
} }
.image-overlay { .image-overlay {
position: absolute; position: absolute;
top: 0; top: 0;
@ -667,57 +716,55 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
opacity: 0; opacity: 0;
transition: opacity 0.3s ease; transition: opacity 0.3s;
}
&:active {
&:active {
.product-img {
transform: scale(1.1);
}
.image-overlay {
opacity: 1; opacity: 1;
} }
} }
} }
}
.product-info {
.info-item { .order-info {
padding: 20rpx 0; margin-top: 20rpx;
border-bottom: 1rpx solid #eee; padding-top: 20rpx;
transition: background-color 0.2s ease; border-top: 2rpx solid rgba(0, 0, 0, 0.05);
&:active { .info-grid {
background-color: rgba(0, 112, 240, 0.05); display: grid;
} grid-template-columns: repeat(2, 1fr);
gap: 30rpx;
padding: 20rpx 0;
.info-item {
display: flex;
flex-direction: column;
justify-content: center;
padding: 20rpx 20rpx 20rpx;
background: #f8faff;
border-radius: 16rpx;
&:last-child {
border-bottom: none;
}
.info-content { .info-content {
display: flex; margin-left: 4rpx;
flex-direction: column; flex: 1;
} }
} }
} }
} }
.action-buttons { .action-buttons {
position: sticky; padding: 30rpx;
bottom: 0; padding-bottom: calc(30rpx + constant(safe-area-inset-bottom));
left: 0; padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
right: 0; background: #fff;
/* #ifdef APP-PLUS || H5 */ border-top: 2rpx solid rgba(0, 0, 0, 0.05);
padding: 20rpx 30rpx calc(20rpx + constant(safe-area-inset-bottom));
padding: 20rpx 30rpx calc(20rpx + env(safe-area-inset-bottom)); .custom-shadow1 {
/* #endif */ box-shadow: 0 8rpx 16rpx rgba(0, 112, 240, 0.2);
/* #ifdef MP-WEIXIN */ }
padding: 20rpx 30rpx 0;
/* #endif */
border-top: 1rpx solid #f5f5f5;
background: white;
z-index: 9;
} }
} }
::v-deep .wd-status-tip__text{
margin: 0 auto !important;
}
</style> </style>

63
unocss/a-hua-unocss/index.scss
View File

@ -1,3 +1,66 @@
.li-font-550{font-weight:550}
.li-h-68{height:68rpx}
.li-items-center{align-items:center}
.li-justify-between{justify-content:space-between}
.li-justify-center{justify-content:center}
.li-mt-100{margin-top:100rpx}
.li-mt-28{margin-top:28rpx}
.li-mt-32{margin-top:32rpx}
.li-mt-90{margin-top:90rpx}
.li-mx-10{margin-left:10rpx;margin-right:10rpx}
.li-pt-270{padding-top:270rpx}
.li-rd-40{border-radius:40rpx}
.li-text-000000-color{color:rgb(0,0,0)}
.li-text-2EA1EA-color{color:rgb(46,161,234)}
.li-text-38{font-size:38rpx}
.li-text-a5a5a5-color{color:rgb(165,165,165)}
.li-w-150{width:150rpx}
.li-w-420{width:420rpx}
.li-w-full-80{width:80%}
.li-w-full-85{width:85%}
.li-w-full-90{width:90%}
.li-items-end{align-items:end}
.li-mb-20{margin-bottom:20rpx}
.li-mb-30{margin-bottom:30rpx}
.li-mb-8{margin-bottom:8rpx}
.li-ml-10{margin-left:10rpx}
.li-ml-15{margin-left:15rpx}
.li-ml-20{margin-left:20rpx}
.li-ml-6{margin-left:6rpx}
.li-mr-10{margin-right:10rpx}
.li-mr-4{margin-right:4rpx}
.li-mt-4{margin-top:4rpx}
.li-mt-40{margin-top:40rpx}
.li-mt-50{margin-top:50rpx}
.li-mt-60{margin-top:60rpx}
.li-mt-8{margin-top:8rpx}
.li-pb-10{padding-bottom:10rpx}
.li-py-40{padding-top:40rpx;padding-bottom:40rpx}
.li-rd-20{border-radius:20rpx}
.li-text-0070F0-color{color:rgb(0,112,240)}
.li-text-009aff-color{color:rgb(0,154,255)}
.li-text-100{font-size:100rpx}
.li-text-32{font-size:32rpx}
.li-text-333-color{color:rgb(51,51,51)}
.li-text-34{font-size:34rpx}
.li-text-36{font-size:36rpx}
.li-text-42{font-size:42rpx}
.li-text-44{font-size:44rpx}
.li-text-55{font-size:55rpx}
.li-text-666-color{color:rgb(102,102,102)}
.li-text-70{font-size:70rpx}
.li-text-90{font-size:90rpx}
.li-text-999-color{color:rgb(153,153,153)}
.li-text-center{text-align:center}
.li-text-ddd-color{color:rgb(221,221,221)}
.li-text-white{color:rgb(255,255,255)}
.li-w-500{width:500rpx}
.li-w-full-92{width:92%}