入库核销完成 邀请业主UI编写(home)
This commit is contained in:
parent
299b4948b7
commit
832c51d9ec
|
|
@ -16,7 +16,7 @@ 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);
|
||||
11
pages.json
11
pages.json
|
|
@ -165,6 +165,15 @@
|
|||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "消息列表"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "invite/index",
|
||||
"style": {
|
||||
"enablePullDownRefresh": true,
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "邀请业主"
|
||||
}
|
||||
}
|
||||
]
|
||||
}],
|
||||
|
|
@ -172,7 +181,7 @@
|
|||
"current": 0, // 当前激活的条件，默认为 0
|
||||
"list": [{
|
||||
"name": "", // 条件名称
|
||||
"path": "pagesA/warehousing/index", // 要打开的页面路径
|
||||
"path": "pagesA/invite/index", // 要打开的页面路径
|
||||
"query": "" // 可选的页面参数
|
||||
}]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -163,7 +163,7 @@
|
|||
{
|
||||
image: uni.$globalData?.RESOURCE_URL + 'home/grid/yaoqing.png',
|
||||
title: '邀请业主',
|
||||
type: ''
|
||||
type: 'invite'
|
||||
},
|
||||
{
|
||||
image: uni.$globalData?.RESOURCE_URL + 'home/grid/wenjuan.png',
|
||||
|
|
@ -268,6 +268,13 @@
|
|||
uni.navigateTo({
|
||||
url: '/pagesA/message/index'
|
||||
});
|
||||
break;
|
||||
case 'invite':
|
||||
// 邀请业主
|
||||
uni.navigateTo({
|
||||
url: '/pagesA/invite/index'
|
||||
});
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,174 @@
|
|||
<template>
|
||||
<wd-popup v-model="innerVisible" position="bottom" :safe-area-inset-bottom="true" @close="handleClose">
|
||||
<view class="share-popup">
|
||||
<view class="share-header li-flex li-justify-between li-items-center li-px-30 li-py-20">
|
||||
<text class="li-text-32">分享</text>
|
||||
<text class="ri-close-line li-text-48 li-text-#999" @click="handleClose"></text>
|
||||
</view>
|
||||
|
||||
<view class="share-content li-p-30">
|
||||
<view class="share-methods li-flex li-justify-around">
|
||||
<view class="share-item li-flex li-flex-col li-items-center" @click="handleShare('wechat')">
|
||||
<view class="icon-wrapper li-bg-#07c160 li-mb-15">
|
||||
<text class="ri-wechat-line li-text-white li-text-48"></text>
|
||||
</view>
|
||||
<text class="li-text-26">微信好友</text>
|
||||
</view>
|
||||
<view class="share-item li-flex li-flex-col li-items-center" @click="handleGenerate">
|
||||
<view class="icon-wrapper li-bg-#0070F0 li-mb-15">
|
||||
<text class="ri-image-line li-text-white li-text-48"></text>
|
||||
</view>
|
||||
<text class="li-text-26">生成海报</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 海报预览弹窗 -->
|
||||
<wd-popup v-model="showPoster" position="center" :safe-area-inset-bottom="true">
|
||||
<view class="poster-preview">
|
||||
<canvas canvas-id="posterCanvas" class="poster-canvas"></canvas>
|
||||
<view class="poster-actions li-flex li-justify-around li-mt-30">
|
||||
<wd-button size="small" @click="showPoster = false">取消</wd-button>
|
||||
<wd-button size="small" type="primary" @click="savePoster">保存图片</wd-button>
|
||||
</view>
|
||||
</view>
|
||||
</wd-popup>
|
||||
</wd-popup>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, defineProps, defineEmits, watch } from 'vue'
|
||||
import { useToast } from '@/uni_modules/wot-design-uni'
|
||||
|
||||
const Toast = useToast()
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
const innerVisible = ref(false)
|
||||
|
||||
// 监听props的变化
|
||||
watch(() => props.visible, (val) => {
|
||||
innerVisible.value = val
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:visible', 'close', 'generate', 'share'])
|
||||
const showPoster = ref(false)
|
||||
|
||||
// 关闭弹窗
|
||||
const handleClose = () => {
|
||||
emit('update:visible', false)
|
||||
emit('close')
|
||||
}
|
||||
|
||||
// 处理分享
|
||||
const handleShare = (type) => {
|
||||
emit('share', type)
|
||||
handleClose()
|
||||
}
|
||||
|
||||
// 处理生成海报
|
||||
const handleGenerate = async () => {
|
||||
showPoster.value = true
|
||||
await generatePoster()
|
||||
}
|
||||
|
||||
// 生成海报
|
||||
const generatePoster = async () => {
|
||||
try {
|
||||
const ctx = uni.createCanvasContext('posterCanvas')
|
||||
|
||||
// 设置画布大小
|
||||
const canvasWidth = 300
|
||||
const canvasHeight = 450
|
||||
|
||||
// 绘制背景
|
||||
ctx.setFillStyle('#ffffff')
|
||||
ctx.fillRect(0, 0, canvasWidth, canvasHeight)
|
||||
|
||||
// 绘制标题
|
||||
ctx.setFillStyle('#333333')
|
||||
ctx.setFontSize(16)
|
||||
ctx.setTextAlign('center')
|
||||
ctx.fillText('邀请您加入我们的物业管理平台', canvasWidth / 2, 40)
|
||||
|
||||
// 绘制二维码（示例）
|
||||
ctx.setFillStyle('#000000')
|
||||
ctx.fillRect(100, 200, 100, 100)
|
||||
|
||||
// 绘制底部文字
|
||||
ctx.setFillStyle('#666666')
|
||||
ctx.setFontSize(14)
|
||||
ctx.fillText('扫码加入', canvasWidth / 2, 350)
|
||||
|
||||
// 执行绘制
|
||||
ctx.draw()
|
||||
} catch (error) {
|
||||
Toast.error('生成海报失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 保存海报
|
||||
const savePoster = () => {
|
||||
uni.canvasToTempFilePath({
|
||||
canvasId: 'posterCanvas',
|
||||
success: (res) => {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: res.tempFilePath,
|
||||
success: () => {
|
||||
Toast.success('保存成功')
|
||||
showPoster.value = false
|
||||
handleClose()
|
||||
},
|
||||
fail: () => {
|
||||
Toast.error('保存失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
fail: () => {
|
||||
Toast.error('生成图片失败')
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.share-popup {
|
||||
.share-header {
|
||||
border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.share-methods {
|
||||
.share-item {
|
||||
.icon-wrapper {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.poster-preview {
|
||||
background: #fff;
|
||||
padding: 30rpx;
|
||||
border-radius: 20rpx;
|
||||
|
||||
.poster-canvas {
|
||||
width: 600rpx;
|
||||
height: 900rpx;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.poster-actions {
|
||||
padding: 0 40rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,454 @@
|
|||
<template>
|
||||
<view class="invite-page">
|
||||
<!-- 自定义导航栏 -->
|
||||
<!-- 自定义导航栏 -->
|
||||
<wd-navbar :bordered="false"
|
||||
custom-style="background: transparent !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important;"
|
||||
safeAreaInsetTop fixed placeholder>
|
||||
<template #left>
|
||||
<view class="li-ml-15 li-mt-10 li-flex li-items-center">
|
||||
<text v-if="hasMultiplePages" class="ri-arrow-left-s-line li-text-70"
|
||||
@click="toPages({type:'nav'})"></text>
|
||||
<text v-if="!hasMultiplePages" class="ri-home-5-line li-text-55 li-mb-8 li-mr-10"
|
||||
@click="toPages({type:'home'})"></text>
|
||||
<text class="li-text-42">邀请业主</text>
|
||||
</view>
|
||||
</template>
|
||||
</wd-navbar>
|
||||
<!-- 导航栏背景 -->
|
||||
<view class="nav-bg-layer"></view>
|
||||
|
||||
<!-- 邀请卡片区域 -->
|
||||
<view class="invite-card li-w-92% li-mx-auto li-mt-40 li-bg-white li-rd-20 li-shadow-sm li-p-30">
|
||||
<view class="card-header li-flex li-justify-between li-items-center">
|
||||
<text class="li-text-36 li-text-#333">邀请福利</text>
|
||||
<text class="li-text-28 li-text-#0070F0" @click="showRules">活动规则</text>
|
||||
</view>
|
||||
<view class="card-content li-mt-30">
|
||||
<!-- 主要返佣说明 -->
|
||||
<view
|
||||
class="commission-card li-bg-gradient-to-r li-from-#4481EB li-to-#0070F0 li-rd-20 li-p-30 li-mb-30">
|
||||
<view class="li-flex li-items-center li-mb-20">
|
||||
<text class="ri-shopping-bag-3-line li-text-48 li-text-white"></text>
|
||||
<text class="li-text-34 li-text-white li-ml-15">业主消费返佣</text>
|
||||
</view>
|
||||
<view class="li-flex li-items-baseline li-mb-15">
|
||||
<text class="li-text-70 li-text-white li-font-bold">5</text>
|
||||
<text class="li-text-34 li-text-white li-ml-10">%</text>
|
||||
</view>
|
||||
<text class="li-text-26 li-text-white li-opacity-80">邀请的业主每笔消费，您都可获得返佣</text>
|
||||
</view>
|
||||
|
||||
<!-- 收益说明 -->
|
||||
<view class="benefit-list li-bg-#f8faff li-rd-16 li-p-30">
|
||||
<view class="benefit-item li-flex li-items-center li-mb-30">
|
||||
<view class="icon-box li-bg-#E1F0FF li-rd-12 li-p-15">
|
||||
<text class="ri-user-add-line li-text-36 li-text-#0070F0"></text>
|
||||
</view>
|
||||
<view class="li-ml-20">
|
||||
<text class="li-text-30 li-text-#333">邀请入驻</text>
|
||||
<text class="li-text-26 li-text-#666 li-block li-mt-5">邀请业主注册并完成实名认证</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="benefit-item li-flex li-items-center li-mb-30">
|
||||
<view class="icon-box li-bg-#E1F0FF li-rd-12 li-p-15">
|
||||
<text class="ri-link-m li-text-36 li-text-#0070F0"></text>
|
||||
</view>
|
||||
<view class="li-ml-20">
|
||||
<text class="li-text-30 li-text-#333">永久绑定</text>
|
||||
<text class="li-text-26 li-text-#666 li-block li-mt-5">与业主建立永久绑定关系</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="benefit-item li-flex li-items-center">
|
||||
<view class="icon-box li-bg-#E1F0FF li-rd-12 li-p-15">
|
||||
<text class="ri-money-cny-box-line li-text-36 li-text-#0070F0"></text>
|
||||
</view>
|
||||
<view class="li-ml-20">
|
||||
<text class="li-text-30 li-text-#333">持续收益</text>
|
||||
<text class="li-text-26 li-text-#666 li-block li-mt-5">业主每次消费都可获得返佣</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="invite-button li-mt-40">
|
||||
<wd-button type="primary" block custom-class="share-btn" @click="showSharePopup">
|
||||
<text class="ri-share-forward-line li-mr-10"></text>立即邀请
|
||||
</wd-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 邀请记录区域 -->
|
||||
<view class="invite-records li-w-92% li-mx-auto li-mt-40">
|
||||
<view class="records-header li-flex li-justify-between li-items-center">
|
||||
<view class="li-flex li-items-center">
|
||||
<text class="li-text-34 li-text-#333">邀请记录</text>
|
||||
<text class="li-text-26 li-text-#666 li-ml-15">(共{{inviteList.length}}人)</text>
|
||||
</view>
|
||||
<view class="li-flex li-items-center">
|
||||
<text class="ri-money-cny-box-line li-text-32 li-text-#0070F0"></text>
|
||||
<text class="li-text-26 li-text-#666 li-ml-10">累计返佣：¥1280.50</text>
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view scroll-y class="records-list li-mt-20" @scrolltolower="loadMore">
|
||||
<view v-for="(item, index) in inviteList" :key="index"
|
||||
class="record-item li-bg-white li-rd-20 li-p-30 li-mb-20 li-shadow-sm">
|
||||
<view class="li-flex li-justify-between li-items-center">
|
||||
<view class="li-flex li-items-center">
|
||||
<image :src="item.avatar" class="avatar"></image>
|
||||
<view class="li-ml-20">
|
||||
<view class="li-text-32 li-text-#333">{{item.name}}</view>
|
||||
<view class="li-text-26 li-text-#999 li-mt-10">{{item.time}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="status-tag" :class="item.status === 1 ? 'success' : 'pending'">
|
||||
{{item.status === 1 ? '已绑定' : '待认证'}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="loading" class="loading li-text-center li-py-30 li-text-28 li-text-#999">
|
||||
加载中...
|
||||
</view>
|
||||
<view v-if="!hasMore && inviteList.length > 0" class="li-text-center li-py-30 li-text-28 li-text-#999">
|
||||
没有更多了
|
||||
</view>
|
||||
<view v-if="inviteList.length === 0" class="empty-state li-py-60">
|
||||
<wd-status-tip image="search" tip="暂无邀请记录" />
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<!-- 分享组件 -->
|
||||
<share-popup ref="sharePopupRef" :visible.sync="showShare" @update:visible="showShare = $event"
|
||||
@close="showShare = false" @generate="generatePoster" @share="handleShare" />
|
||||
|
||||
<!-- 规则弹窗 -->
|
||||
<wd-popup v-model="showRulePopup" position="center" @close="showRulePopup = false">
|
||||
<view class="rules-popup li-bg-white ">
|
||||
<view class="rules-header li-py-20 li-px-30 li-flex li-justify-between li-items-center li-border-b">
|
||||
<text class="li-text-34 li-font-medium">活动规则</text>
|
||||
<text class="ri-close-line li-text-44 li-text-#999" @click="showRulePopup = false"></text>
|
||||
</view>
|
||||
<view class="rules-content li-p-30">
|
||||
<view class="rule-item li-mb-15 li-flex li-items-center">
|
||||
<text class="rule-icon li-mr-15">1</text>
|
||||
<text class="li-text-28 li-text-#333">邀请业主加入平台并完成实名认证后，您将与业主建立永久绑定关系</text>
|
||||
</view>
|
||||
<view class="rule-item li-mb-15 li-flex li-items-center">
|
||||
<text class="rule-icon li-mr-15">2</text>
|
||||
<text class="li-text-28 li-text-#333">每当业主在商城消费时，您都可获得订单金额5%的返佣</text>
|
||||
</view>
|
||||
<view class="rule-item li-flex li-items-center">
|
||||
<text class="rule-icon li-mr-15">3</text>
|
||||
<text class="li-text-28 li-text-#333">返佣将在订单完成后自动发放，可随时提现至银行卡</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</wd-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
defineExpose
|
||||
} from 'vue'
|
||||
import {
|
||||
useToast
|
||||
} from '@/uni_modules/wot-design-uni'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import SharePopup from './components/SharePopup.vue'
|
||||
import { useNavigation } from '@/hooks/useNavigation'
|
||||
const {
|
||||
hasMultiplePages, // 是否有多个页面在路由栈中
|
||||
isTabBarPage, // 当前页面是否为 tabBar 页面
|
||||
checkRouteStack // 检查当前路由栈状态的方法
|
||||
} = useNavigation()
|
||||
const Toast = useToast()
|
||||
const sharePopupRef = ref(null)
|
||||
const showShare = ref(false)
|
||||
const loading = ref(false)
|
||||
const hasMore = ref(true)
|
||||
const page = ref(1)
|
||||
const inviteList = ref([])
|
||||
const showRulePopup = ref(false)
|
||||
|
||||
onLoad(() => {
|
||||
checkRouteStack()
|
||||
})
|
||||
|
||||
// 显示分享弹窗
|
||||
const showSharePopup = () => {
|
||||
showShare.value = true
|
||||
}
|
||||
|
||||
// 生成海报
|
||||
const generatePoster = () => {
|
||||
// 调用分享组件的生成海报方法
|
||||
sharePopupRef.value?.generatePoster()
|
||||
}
|
||||
|
||||
// 处理分享
|
||||
const handleShare = (type) => {
|
||||
if (type === 'wechat') {
|
||||
// #ifdef APP-PLUS
|
||||
plus.share.sendWithSystem({
|
||||
type: 'text',
|
||||
content: '邀请链接',
|
||||
href: 'https://example.com/invite'
|
||||
})
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
// 小程序分享通过 onShareAppMessage 处理
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
|
||||
// 加载邀请记录
|
||||
const loadInviteRecords = async () => {
|
||||
if (loading.value || !hasMore.value) return
|
||||
|
||||
loading.value = true
|
||||
try {
|
||||
// 模拟接口调用
|
||||
await new Promise(resolve => setTimeout(resolve, 1000))
|
||||
|
||||
const mockData = Array(10).fill().map((_, index) => ({
|
||||
id: page.value * 10 + index,
|
||||
name: `业主${page.value * 10 + index}`,
|
||||
avatar: '/static/swiper/1.png',
|
||||
time: '2024-03-26 12:00:00',
|
||||
status: Math.random() > 0.5 ? 1 : 0
|
||||
}))
|
||||
|
||||
inviteList.value.push(...mockData)
|
||||
hasMore.value = page.value < 3 // 模拟只有3页数据
|
||||
page.value++
|
||||
} catch (error) {
|
||||
Toast.error('加载失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 页面跳转
|
||||
const toPages = (item) => {
|
||||
if (item.type === 'nav') {
|
||||
uni.navigateBack()
|
||||
} else if (item.type === 'home') {
|
||||
// 这里是项目内部的跳转逻辑
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 滚动加载更多
|
||||
const loadMore = () => {
|
||||
loadInviteRecords()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadInviteRecords()
|
||||
})
|
||||
|
||||
// 显示规则弹窗
|
||||
const showRules = () => {
|
||||
console.log('显示规则弹窗')
|
||||
showRulePopup.value = true
|
||||
}
|
||||
|
||||
// 微信小程序分享配置
|
||||
const onShareAppMessage = () => {
|
||||
return {
|
||||
title: '邀请您加入我们的物业管理平台',
|
||||
path: '/pagesA/invite/index',
|
||||
imageUrl: '分享图片地址'
|
||||
}
|
||||
}
|
||||
|
||||
// 分享定义到组件实例上
|
||||
defineExpose({
|
||||
onShareAppMessage
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #f7f8fc;
|
||||
}
|
||||
|
||||
.invite-page {
|
||||
min-height: 100vh;
|
||||
padding-bottom: 40rpx;
|
||||
|
||||
// 导航背景层
|
||||
.nav-bg-layer {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: calc(var(--status-bar-height) + 88rpx);
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
|
||||
z-index: -1;
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.invite-card {
|
||||
.card-content {
|
||||
.commission-card {
|
||||
background: linear-gradient(135deg, #4481EB 0%, #0070F0 100%);
|
||||
border-radius: 20rpx;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.ri-shopping-bag-3-line {
|
||||
font-size: 48rpx;
|
||||
color: #fff;
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
|
||||
.li-text-34 {
|
||||
font-size: 34rpx;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.li-text-26 {
|
||||
font-size: 26rpx;
|
||||
color: #fff;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.benefit-list {
|
||||
padding: 30rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #f8faff;
|
||||
|
||||
.benefit-item {
|
||||
.icon-box {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
border-radius: 12rpx;
|
||||
background: #E1F0FF;
|
||||
margin-right: 20rpx;
|
||||
padding: 15rpx;
|
||||
|
||||
.ri-user-add-line,
|
||||
.ri-link-m,
|
||||
.ri-money-cny-box-line {
|
||||
font-size: 36rpx;
|
||||
color: #0070F0;
|
||||
}
|
||||
}
|
||||
|
||||
.li-text-30 {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.li-text-26 {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
display: block;
|
||||
margin-top: 5rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.share-btn {
|
||||
background: linear-gradient(135deg, #42a5ff 0%, #0070F0 100%) !important;
|
||||
border: none !important;
|
||||
height: 90rpx !important;
|
||||
font-size: 32rpx !important;
|
||||
}
|
||||
}
|
||||
|
||||
.invite-records {
|
||||
.records-list {
|
||||
height: calc(100vh - 600rpx);
|
||||
|
||||
.record-item {
|
||||
.avatar {
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
padding: 4rpx 20rpx;
|
||||
border-radius: 30rpx;
|
||||
font-size: 24rpx;
|
||||
|
||||
&.success {
|
||||
color: #07c160;
|
||||
background-color: rgba(7, 193, 96, 0.1);
|
||||
}
|
||||
|
||||
&.pending {
|
||||
color: #f0ad4e;
|
||||
background-color: rgba(240, 173, 78, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rules-popup {
|
||||
width: 580rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.rules-header {
|
||||
border-color: rgba(0, 0, 0, 0.05);
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 30rpx;
|
||||
right: 30rpx;
|
||||
bottom: 0;
|
||||
height: 1px;
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
|
||||
.ri-close-line {
|
||||
padding: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.rules-content {
|
||||
padding:40rpx 30rpx 50rpx;
|
||||
|
||||
.rule-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.rule-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
border-radius: 50%;
|
||||
background: #0070F0;
|
||||
color: white;
|
||||
font-size: 24rpx;
|
||||
margin-right: 16rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
<template>
|
||||
<page-meta :page-style="`overflow:${show9 ? 'hidden' : 'visible'};`"></page-meta>
|
||||
<view class="verification-page">
|
||||
<!-- 自定义导航栏 -->
|
||||
<wd-navbar :bordered="false"
|
||||
|
|
@ -10,7 +11,7 @@
|
|||
@click="toPages({type:'nav'})"></text>
|
||||
<text v-if="!hasMultiplePages" class="ri-home-5-line li-text-55 li-mb-8 li-mr-10"
|
||||
@click="toPages({type:'home'})"></text>
|
||||
<text class="li-text-42">核销中心</text>
|
||||
<text class="li-text-42">商品核销</text>
|
||||
</view>
|
||||
</template>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
|
|
@ -35,12 +36,12 @@
|
|||
<!-- 功能模式切换和连续核销开关 -->
|
||||
<view class=" li-w-92% li-mx-auto li-flex li-justify-between li-items-center li-mt-20">
|
||||
<wd-tabs v-model="activeMode" :sticky="false" :line-width="18" line-height="4" active-color="#0070F0">
|
||||
<wd-tab title="入库核销"></wd-tab>
|
||||
<wd-tab title="扫码核销"></wd-tab>
|
||||
<wd-tab title="手动输入"></wd-tab>
|
||||
</wd-tabs>
|
||||
</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="开启后可以连续核销多个订单">
|
||||
<view class="li-flex li-items-center li-mr-10">
|
||||
<view class="li-mr-4 li-text-28 li-text-#666">连续核销</view>
|
||||
|
|
@ -55,21 +56,24 @@
|
|||
<!-- 扫码模式 -->
|
||||
<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 li-flex li-items-center li-justify-center">
|
||||
<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>
|
||||
<view class="scan-line" :class="{'scan-active': isScanning}"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="li-text-30 li-text-#666 li-mt-30">点击扫描二维码入库核销</view>
|
||||
<view class="li-text-30 li-text-#666 li-mt-30">点击扫描二维码核销</view>
|
||||
<view class="li-text-24 li-text-#999 li-mt-10">{{continuousMode ? '连续核销模式已开启' : ''}}</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-text-32 li-mb-30 li-text-#333">请输入订单号</view>
|
||||
<wd-input v-model="orderNumber" placeholder="请输入需要核销的订单号" clear-able />
|
||||
<wd-input v-model="orderNumber" placeholder="请输入需要核销的订单号" clearable />
|
||||
<view class="li-flex li-justify-center li-mt-30">
|
||||
<wd-button custom-class="custom-shadow" type="primary" @click="submitOrderNumber" block>立即核销</wd-button>
|
||||
<wd-button custom-class="custom-shadow" type="primary" @click="submitOrderNumber"
|
||||
block>立即核销</wd-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -77,7 +81,7 @@
|
|||
|
||||
<!-- 连续核销模式下的结果展示区域 -->
|
||||
<view v-if="verificationRecords.length > 0" class="verification-records li-w-92% li-mx-auto li-mt-40">
|
||||
<view class="li-text-30 li-text-#333 li-mb-20">最近核销记录</view>
|
||||
<view class="li-text-34 li-text-#333 li-mb-20">最近核销记录</view>
|
||||
|
||||
<view class="records-list">
|
||||
<view v-for="(record, index) in verificationRecords" :key="index"
|
||||
|
|
@ -101,74 +105,136 @@
|
|||
</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">
|
||||
<text class="ri-inbox-line li-text-100 li-text-#ddd"></text>
|
||||
<view class="li-text-30 li-text-#999 li-mt-20">暂无核销记录</view>
|
||||
|
||||
<view v-if="verificationRecords.length==0" class="!li-mt-100">
|
||||
<wd-status-tip image="search" tip="暂无核销记录" />
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 顶部提示条（成功/失败消息提示） -->
|
||||
<wd-toast />
|
||||
|
||||
|
||||
<!-- 商品确认弹出框 -->
|
||||
<wd-popup v-model="show9" position="bottom" closable :safe-area-inset-bottom="true"
|
||||
custom-style="height: 500px;">
|
||||
custom-style="height: auto; max-height: 80vh;">
|
||||
<view class="product-confirm-popup">
|
||||
<view class="product-header">
|
||||
<text class="ri-checkbox-circle-line li-text-44 li-text-#0070F0"></text>
|
||||
<text class="li-text-32 li-text-#333 li-ml-10">商品确认</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">商品确认 ({{orderInfo?.product?.length}}件)</text>
|
||||
</view>
|
||||
<view class="product-content">
|
||||
<view class="product-image li-flex li-justify-between li-items-center li-mt-30 li-px-40">
|
||||
<image src="../../static/swiper/1.png" mode="aspectFill" class="li-w-130 li-h-130 li-rd-20">
|
||||
</image>
|
||||
<view class="li-ml-20 li-flex li-flex-col li-justify-center">
|
||||
<view class="li-flex li-items-center">
|
||||
<text class="li-text-30 li-text-#333 li-mr-10">x</text>
|
||||
<text class="li-text-36 li-text-#0070F0">1</text>
|
||||
<scroll-view scroll-y class="product-scroll">
|
||||
<view class="product-content">
|
||||
<view v-for="(item, index) in orderInfo.product" :key="index" class="product-item">
|
||||
<view class="product-image li-flex li-justify-between li-items-center li-mt-30 li-px-40">
|
||||
<view class="image-container" @click="previewImage(item.picture)">
|
||||
<image :src="item.picture" mode="aspectFill" class="product-img"></image>
|
||||
<view class="image-overlay">
|
||||
<text class="ri-zoom-in-line li-text-44 li-text-white"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="li-ml-20 li-flex li-flex-col li-justify-center li-w-500">
|
||||
<view class="li-flex li-flex-col li-items-end">
|
||||
<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>
|
||||
</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-#999 li-mr-10 li-flex li-items-center li-justify-center"></text>
|
||||
<!-- 调整图标与文字对齐 -->
|
||||
<text class="li-text-30 li-text-#333">商品名称: 示例商品</text>
|
||||
</view>
|
||||
<view class="info-item li-flex li-items-center li-mb-20">
|
||||
<text
|
||||
class="ri-barcode-line li-text-36 li-text-#999 li-mr-10 li-flex li-items-center li-justify-center"></text>
|
||||
<!-- 调整图标与文字对齐 -->
|
||||
<text class="li-text-30 li-text-#333">订单号: 123456789</text>
|
||||
</view>
|
||||
<view class="info-item li-flex li-items-center li-mb-20">
|
||||
<text
|
||||
class="ri-calendar-line li-text-36 li-text-#999 li-mr-10 li-flex li-items-center li-justify-center"></text>
|
||||
<!-- 调整图标与文字对齐 -->
|
||||
<text class="li-text-30 li-text-#333">入库时间: 2023-10-01 12:00</text>
|
||||
</view>
|
||||
<view class="info-item li-flex li-items-center li-mb-20">
|
||||
<text
|
||||
class="ri-user-line li-text-36 li-text-#999 li-mr-10 li-flex li-items-center li-justify-center"></text>
|
||||
<!-- 调整图标与文字对齐 -->
|
||||
<text class="li-text-30 li-text-#333">操作人: 张三</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="action-buttons li-px-30 li-mt-20">
|
||||
<wd-button custom-class="custom-shadow1" type="primary" block :loading="isConfirming"
|
||||
@click="GetorderStorageVerify">
|
||||
{{ 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 class="confirm-button li-px-30 li-mt-40">
|
||||
<wd-button custom-class="custom-shadow1" type="primary" block
|
||||
@click="confirmProduct">确认核销</wd-button>
|
||||
</view>
|
||||
</view>
|
||||
</wd-popup>
|
||||
<zero-loading type="wobble" v-if="loading"></zero-loading>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { scanCodeGet, orderRecord, orderStorageVerify } from '@/api/ticket'
|
||||
import { useNavigation } from '@/hooks/useNavigation'
|
||||
import { useToast } from '@/uni_modules/wot-design-uni'
|
||||
const Toast = useToast()
|
||||
|
|
@ -183,6 +249,11 @@
|
|||
const activeMode = ref(0) // 0: 扫码模式, 1: 手动输入模式
|
||||
const continuousMode = ref(false) // 是否开启连续核销模式
|
||||
const orderNumber = ref('') // 手动输入的订单号
|
||||
const isScanning = ref(false) // 控制扫描动画
|
||||
const isConfirming = ref(false) // 控制确认动画
|
||||
const orderInfo = ref({}) //扫码订单详情
|
||||
const userInfo = ref(uni.getStorageSync('userInfo'))
|
||||
const loading = ref<boolean>(false)
|
||||
|
||||
// 核销记录
|
||||
const verificationRecords = ref([
|
||||
|
|
@ -196,14 +267,17 @@
|
|||
|
||||
const show9 = ref<boolean>(false)
|
||||
|
||||
const confirmProduct = () => {
|
||||
show9.value = false
|
||||
}
|
||||
|
||||
// 扫码核销
|
||||
const scanCode = () => {
|
||||
show9.value = true
|
||||
return
|
||||
const scanCode = async () => {
|
||||
// 激活扫描动画
|
||||
isScanning.value = true;
|
||||
// 延迟显示弹窗并停止动画
|
||||
setTimeout(() => {
|
||||
isScanning.value = false;
|
||||
// show9.value = true;
|
||||
}, 800);
|
||||
// handleVerification('20250326214053344401')
|
||||
// return;
|
||||
uni.scanCode({
|
||||
success: (res) => {
|
||||
handleVerification(res.result)
|
||||
|
|
@ -214,6 +288,76 @@
|
|||
})
|
||||
}
|
||||
|
||||
|
||||
const GetorderStorageVerify = async () => {
|
||||
// 添加动画效果和成功提示
|
||||
isConfirming.value = true;
|
||||
try {
|
||||
const res = await orderStorageVerify({ order_id: orderInfo.value.order_id })
|
||||
if (res.code == 200) {
|
||||
Toast.success('商品核销成功');
|
||||
show9.value = false;
|
||||
orderNumber.value = '' // 清空输入
|
||||
|
||||
// 请求核销记录接口
|
||||
getOrderRecord()
|
||||
} else {
|
||||
Toast.error(res.msg)
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
Toast.error('核销失败')
|
||||
} finally {
|
||||
isConfirming.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const contOrderStorageVerify = async () => {
|
||||
try {
|
||||
const res = await orderStorageVerify({ order_id: orderInfo.value.order_id })
|
||||
console.log('contOrderStorageVerify', res);
|
||||
if (res.code == 200) {
|
||||
Toast.success('商品核销成功');
|
||||
// 请求核销记录接口
|
||||
getOrderRecord()
|
||||
setTimeout(() => {
|
||||
scanCode()
|
||||
}, 1000)
|
||||
} else {
|
||||
Toast.error(res.msg)
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
Toast.error('核销失败')
|
||||
} finally {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 处理核销逻辑
|
||||
const handleVerification = async (code) => {
|
||||
const res = await scanCodeGet({ code: code })
|
||||
if (res.code == 200) {
|
||||
orderInfo.value = res.data
|
||||
if (activeMode.value == 1) {
|
||||
show9.value = true;
|
||||
return
|
||||
}
|
||||
// 连续核销
|
||||
if (continuousMode.value) {
|
||||
contOrderStorageVerify()
|
||||
} else {
|
||||
// 非连续核销
|
||||
show9.value = true;
|
||||
}
|
||||
} else {
|
||||
Toast.error(res.msg)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 提交订单号核销
|
||||
const submitOrderNumber = () => {
|
||||
if (!orderNumber.value) {
|
||||
|
|
@ -221,56 +365,14 @@
|
|||
return
|
||||
}
|
||||
handleVerification(orderNumber.value)
|
||||
orderNumber.value = '' // 清空输入
|
||||
}
|
||||
|
||||
// 处理核销逻辑
|
||||
const handleVerification = (code : string) => {
|
||||
// 模拟核销处理过程
|
||||
// 实际项目中这里应该调用API进行核销
|
||||
|
||||
// 模拟API调用延迟
|
||||
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)
|
||||
const getOrderRecord = async () => {
|
||||
try {
|
||||
const res = await orderRecord({ page: 1, limit: 10, type: 1 })
|
||||
verificationRecords.value = res.data
|
||||
} catch (error) {
|
||||
} finally {
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -292,28 +394,36 @@
|
|||
// 目前示例仅显示提示
|
||||
// Toast.info('查看历史记录')
|
||||
uni.navigateTo({
|
||||
url: '/pagesA/verification/history'
|
||||
url: '/pagesA/verification/history?type=2'
|
||||
})
|
||||
}
|
||||
|
||||
// 页面跳转
|
||||
const toPages = (item : any) => {
|
||||
switch (item.type) {
|
||||
case 'nav':
|
||||
uni.navigateBack()
|
||||
break;
|
||||
case 'home':
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
if (item.type === 'nav') {
|
||||
uni.navigateBack()
|
||||
} else if (item.type === 'home') {
|
||||
// 这里是项目内部的跳转逻辑
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 打开图片预览
|
||||
const previewImage = (imageUrl) => {
|
||||
uni.previewImage({
|
||||
urls: [imageUrl],
|
||||
current: 0,
|
||||
indicator: 'number',
|
||||
loop: true
|
||||
})
|
||||
}
|
||||
|
||||
onLoad(() => {
|
||||
checkRouteStack()
|
||||
// 请求核销记录接口
|
||||
getOrderRecord()
|
||||
})
|
||||
</script>
|
||||
|
||||
|
|
@ -342,6 +452,7 @@
|
|||
width: 300rpx;
|
||||
height: 300rpx;
|
||||
position: relative;
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
|
||||
.scan-button {
|
||||
width: 100%;
|
||||
|
|
@ -351,23 +462,160 @@
|
|||
box-shadow: 0 8rpx 30rpx rgba(56, 165, 255, 0.25);
|
||||
color: white;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&.btn-scanning {
|
||||
transform: scale(0.95);
|
||||
box-shadow: 0 4rpx 25rpx rgba(56, 165, 255, 0.4);
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||||
animation: scanLight 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
transform: scale(0.92);
|
||||
box-shadow: 0 4rpx 15rpx rgba(56, 165, 255, 0.2);
|
||||
}
|
||||
|
||||
&.scanning {
|
||||
animation: scanning 0.8s ease-in-out;
|
||||
}
|
||||
|
||||
.ri-qr-scan-2-line {
|
||||
animation: iconPulse 1.5s ease-in-out infinite alternate;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.scan-line {
|
||||
position: absolute;
|
||||
width: 80%;
|
||||
height: 2rpx;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
top: 50%;
|
||||
left: 10%;
|
||||
animation: scanAnimation 2s ease-in-out infinite;
|
||||
opacity: 0.2;
|
||||
|
||||
&.scan-active {
|
||||
opacity: 1;
|
||||
animation: scanAnimation 0.8s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -10rpx;
|
||||
left: -10rpx;
|
||||
right: -10rpx;
|
||||
bottom: -10rpx;
|
||||
top: -15rpx;
|
||||
left: -15rpx;
|
||||
right: -15rpx;
|
||||
bottom: -15rpx;
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid rgba(56, 165, 255, 0.3);
|
||||
z-index: -1;
|
||||
animation: ripple 2s linear infinite;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -8rpx;
|
||||
left: -8rpx;
|
||||
right: -8rpx;
|
||||
bottom: -8rpx;
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid rgba(56, 165, 255, 0.2);
|
||||
z-index: -1;
|
||||
animation: ripple 2s linear 1s infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ripple {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1.2);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(-10rpx);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scanLight {
|
||||
0% {
|
||||
left: -100%;
|
||||
}
|
||||
|
||||
50%,
|
||||
100% {
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes iconPulse {
|
||||
0% {
|
||||
opacity: 0.7;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scanAnimation {
|
||||
0% {
|
||||
top: 20%;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
top: 80%;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scanning {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
box-shadow: 0 8rpx 30rpx rgba(56, 165, 255, 0.25);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(0.92);
|
||||
box-shadow: 0 4rpx 15rpx rgba(56, 165, 255, 0.35);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
box-shadow: 0 8rpx 30rpx rgba(56, 165, 255, 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -431,33 +679,115 @@
|
|||
}
|
||||
|
||||
.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 {
|
||||
padding: 20rpx 30rpx;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
padding: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.product-content {
|
||||
.product-info {
|
||||
.info-item {
|
||||
padding: 20rpx 0; // 调整元素间距
|
||||
border-bottom: 1rpx solid #eee;
|
||||
padding-bottom: 30rpx;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
.product-image {
|
||||
.image-container {
|
||||
position: relative;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.product-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.image-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
|
||||
&:active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.confirm-button {
|
||||
position: absolute;
|
||||
bottom: 30rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 0 30rpx; // 调整确认按钮位置和样式
|
||||
.order-info {
|
||||
margin-top: 20rpx;
|
||||
padding-top: 20rpx;
|
||||
border-top: 2rpx solid rgba(0, 0, 0, 0.05);
|
||||
|
||||
.info-grid {
|
||||
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;
|
||||
|
||||
.info-content {
|
||||
margin-left: 4rpx;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
padding: 30rpx;
|
||||
padding-bottom: calc(30rpx + constant(safe-area-inset-bottom));
|
||||
padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
|
||||
background: #fff;
|
||||
border-top: 2rpx solid rgba(0, 0, 0, 0.05);
|
||||
|
||||
.custom-shadow1 {
|
||||
box-shadow: 0 8rpx 16rpx rgba(0, 112, 240, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .wd-status-tip__text {
|
||||
margin: 0 auto !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -70,7 +70,7 @@
|
|||
<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-text-32 li-mb-30 li-text-#333">请输入订单号</view>
|
||||
<wd-input v-model="orderNumber" placeholder="请输入需要入库的订单号" clear-able />
|
||||
<wd-input v-model="orderNumber" placeholder="请输入需要入库的订单号" clearable />
|
||||
<view class="li-flex li-justify-center li-mt-30">
|
||||
<wd-button custom-class="custom-shadow" type="primary" @click="submitOrderNumber"
|
||||
block>立即入库</wd-button>
|
||||
|
|
@ -121,7 +121,7 @@
|
|||
<view class="product-confirm-popup">
|
||||
<view class="product-header">
|
||||
<text class="ri-checkbox-circle-line li-text-42 li-text-#0070F0"></text>
|
||||
<text class="li-text-32 li-text-#333 li-ml-10">商品确认 ({{orderInfo.product.length}}件)</text>
|
||||
<text class="li-text-32 li-text-#333 li-ml-10">商品确认 ({{orderInfo?.product?.length}}件)</text>
|
||||
</view>
|
||||
<scroll-view scroll-y class="product-scroll">
|
||||
<view class="product-content">
|
||||
|
|
@ -152,7 +152,7 @@
|
|||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="index !== orderInfo.product.length - 1" class="item-divider"></view>
|
||||
<view v-if="index !== orderInfo?.product?.length - 1" class="item-divider"></view>
|
||||
</view>
|
||||
|
||||
<view class="order-info li-mt-30 li-px-30">
|
||||
|
|
@ -276,8 +276,8 @@
|
|||
isScanning.value = false;
|
||||
// show9.value = true;
|
||||
}, 800);
|
||||
handleVerification('20250326214053344401')
|
||||
return;
|
||||
// handleVerification('20250326214053344401')
|
||||
// return;
|
||||
uni.scanCode({
|
||||
success: (res) => {
|
||||
handleVerification(res.result)
|
||||
|
|
@ -294,10 +294,17 @@
|
|||
isConfirming.value = true;
|
||||
try {
|
||||
const res = await orderStorageAct({ order_id: orderInfo.value.order_id })
|
||||
Toast.success('商品入库成功');
|
||||
show9.value = false;
|
||||
// 请求入库记录接口
|
||||
getOrderRecord()
|
||||
if (res.code == 200) {
|
||||
Toast.success('商品入库成功');
|
||||
show9.value = false;
|
||||
orderNumber.value = '' // 清空输入
|
||||
|
||||
// 请求入库记录接口
|
||||
getOrderRecord()
|
||||
} else {
|
||||
Toast.error(res.msg)
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
Toast.error('入库失败')
|
||||
} finally {
|
||||
|
|
@ -309,10 +316,18 @@
|
|||
const contOrderStorageAct = async () => {
|
||||
try {
|
||||
const res = await orderStorageAct({ order_id: orderInfo.value.order_id })
|
||||
Toast.success('商品入库成功');
|
||||
scanCode()
|
||||
// 请求入库记录接口
|
||||
getOrderRecord()
|
||||
console.log('contOrderStorageAct', res);
|
||||
if (res.code == 200) {
|
||||
Toast.success('商品入库成功');
|
||||
// 请求入库记录接口
|
||||
getOrderRecord()
|
||||
setTimeout(() => {
|
||||
scanCode()
|
||||
}, 1000)
|
||||
} else {
|
||||
Toast.error(res.msg)
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
Toast.error('入库失败')
|
||||
} finally {
|
||||
|
|
@ -324,15 +339,23 @@
|
|||
// 处理入库逻辑
|
||||
const handleVerification = async (code) => {
|
||||
const res = await scanCodeGet({ code: code })
|
||||
// 模拟多条商品数据
|
||||
orderInfo.value = res.data
|
||||
// 连续入库
|
||||
if (continuousMode.value) {
|
||||
contOrderStorageAct()
|
||||
if (res.code == 200) {
|
||||
orderInfo.value = res.data
|
||||
if (activeMode.value == 1) {
|
||||
show9.value = true;
|
||||
return
|
||||
}
|
||||
// 连续入库
|
||||
if (continuousMode.value) {
|
||||
contOrderStorageAct()
|
||||
} else {
|
||||
// 非连续入库
|
||||
show9.value = true;
|
||||
}
|
||||
} else {
|
||||
// 非连续入库
|
||||
show9.value = true;
|
||||
Toast.error(res.msg)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 提交订单号入库
|
||||
|
|
@ -342,7 +365,6 @@
|
|||
return
|
||||
}
|
||||
handleVerification(orderNumber.value)
|
||||
orderNumber.value = '' // 清空输入
|
||||
}
|
||||
|
||||
const getOrderRecord = async () => {
|
||||
|
|
@ -372,7 +394,7 @@
|
|||
// 目前示例仅显示提示
|
||||
// Toast.info('查看历史记录')
|
||||
uni.navigateTo({
|
||||
url: '/pagesA/verification/history'
|
||||
url: '/pagesA/verification/history?type=1'
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -764,7 +786,8 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
::v-deep .wd-status-tip__text{
|
||||
|
||||
::v-deep .wd-status-tip__text {
|
||||
margin: 0 auto !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,15 +1,196 @@
|
|||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.li-font-550{font-weight:550}
|
||||
.li-h-68{height:68rpx}
|
||||
.li-bg-white{background-color:rgb(255,255,255)}
|
||||
.li-block{display:block}
|
||||
.li-border-b{border-style:solid;border-color:b;border-width:1rpx}
|
||||
.li-flex{display:flex}
|
||||
.li-font-500{font-weight:500}
|
||||
.li-font-bold{font-weight:bold}
|
||||
.li-items-baseline{align-items:baseline}
|
||||
.li-items-center{align-items:center}
|
||||
.li-justify-between{justify-content:space-between}
|
||||
.li-lh-44{line-height:44}
|
||||
.li-mb-15{margin-bottom:15rpx}
|
||||
.li-mb-20{margin-bottom:20rpx}
|
||||
.li-mb-30{margin-bottom:30rpx}
|
||||
.li-mb-40{margin-bottom:40rpx}
|
||||
.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-mr-10{margin-right:10rpx}
|
||||
.li-mr-15{margin-right:15rpx}
|
||||
.li-mr-5{margin-right:5rpx}
|
||||
.li-mt-10{margin-top:10rpx}
|
||||
.li-mt-20{margin-top:20rpx}
|
||||
.li-mt-30{margin-top:30rpx}
|
||||
.li-mt-40{margin-top:40rpx}
|
||||
.li-mt-5{margin-top:5rpx}
|
||||
.li-mx-auto{margin-left:auto;margin-right:auto}
|
||||
.li-opacity-80{undefined:0.8}
|
||||
.li-p-15{padding:15rpx}
|
||||
.li-p-30{padding:30rpx}
|
||||
.li-pl-30{padding-left:30rpx}
|
||||
.li-py-30{padding-top:30rpx;padding-bottom:30rpx}
|
||||
.li-py-60{padding-top:60rpx;padding-bottom:60rpx}
|
||||
.li-rd-12{border-radius:12rpx}
|
||||
.li-rd-16{border-radius:16rpx}
|
||||
.li-rd-20{border-radius:20rpx}
|
||||
.li-text-0070F0-color{color:rgb(0,112,240)}
|
||||
.li-text-26{font-size:26rpx}
|
||||
.li-text-28{font-size:28rpx}
|
||||
.li-text-30{font-size:30rpx}
|
||||
.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-48{font-size:48rpx}
|
||||
.li-text-55{font-size:55rpx}
|
||||
.li-text-666-color{color:rgb(102,102,102)}
|
||||
.li-text-70{font-size:70rpx}
|
||||
.li-text-999-color{color:rgb(153,153,153)}
|
||||
.li-text-center{text-align:center}
|
||||
.li-text-white{color:rgb(255,255,255)}
|
||||
.li-w-650rpx{width:650rpx}
|
||||
.li-w-full-92{width:92%}
|
||||
.li-flex-col{flex-direction:column}
|
||||
.li-justify-around{justify-content:space-around}
|
||||
.li-px-30{padding-left:30rpx;padding-right:30rpx}
|
||||
.li-py-20{padding-top:20rpx;padding-bottom:20rpx}
|
||||
.li-items-center{align-items:center}
|
||||
.items-center{align-items:center}
|
||||
.li-justify-center{justify-content:center}
|
||||
.justify-end{justify-content:end}
|
||||
.justify-center{justify-content:center}
|
||||
.li-justify-between{justify-content:space-between}
|
||||
.justify-between{justify-content:space-between}
|
||||
.li-bg-white{background-color:rgb(255,255,255)}
|
||||
.li-flex{display:flex}
|
||||
.li-flex-center{display:flex;align-items:center;justify-content:center}
|
||||
.li-flex-col{flex-direction:column}
|
||||
.li-font-bold{font-weight:bold}
|
||||
.li-h-130{height:130rpx}
|
||||
.li-h-160{height:160rpx}
|
||||
.li-h-220{height:220rpx}
|
||||
.li-h-58{height:58rpx}
|
||||
.li-justify-around{justify-content:space-around}
|
||||
.li-ml-22{margin-left:22rpx}
|
||||
.li-ml-25{margin-left:25rpx}
|
||||
.li-ml-35{margin-left:35rpx}
|
||||
.li-mr-5{margin-right:5rpx}
|
||||
.li-mt-10{margin-top:10rpx}
|
||||
.li-mt-12{margin-top:12rpx}
|
||||
.li-mt-14{margin-top:14rpx}
|
||||
.li-mt-15{margin-top:15rpx}
|
||||
.li-mt-20{margin-top:20rpx}
|
||||
.li-mt-30{margin-top:30rpx}
|
||||
.li-mx-auto{margin-left:auto;margin-right:auto}
|
||||
.li-pt-15{padding-top:15rpx}
|
||||
.li-px-25{padding-left:25rpx;padding-right:25rpx}
|
||||
.li-px-30{padding-left:30rpx;padding-right:30rpx}
|
||||
.li-px-40{padding-left:40rpx;padding-right:40rpx}
|
||||
.li-px-50{padding-left:50rpx;padding-right:50rpx}
|
||||
.li-py-25{padding-top:25rpx;padding-bottom:25rpx}
|
||||
.li-rd-10{border-radius:10rpx}
|
||||
.li-rd-15{border-radius:15rpx}
|
||||
.li-text-010B3E-color{color:rgb(1,11,62)}
|
||||
.li-text-22{font-size:22rpx}
|
||||
.li-text-24{font-size:24rpx}
|
||||
.li-text-26{font-size:26rpx}
|
||||
.li-text-28{font-size:28rpx}
|
||||
.li-text-30{font-size:30rpx}
|
||||
.li-text-343333-color{color:rgb(52,51,51)}
|
||||
.li-text-43{font-size:43rpx}
|
||||
.li-text-AFB2B8-color{color:rgb(175,178,184)}
|
||||
.li-text-B1B0B0-color{color:rgb(177,176,176)}
|
||||
.li-text-F42429-color{color:rgb(244,36,41)}
|
||||
.li-w-130{width:130rpx}
|
||||
.li-w-310{width:310rpx}
|
||||
.li-w-58{width:58rpx}
|
||||
.li-w-full-70{width:70%}
|
||||
.li-w-full-88{width:88%}
|
||||
.li-h-100{height:100rpx}
|
||||
.li-ml-20{margin-left:20rpx}
|
||||
.li-ml-200{margin-left:200rpx}
|
||||
.li-ml-30{margin-left:30rpx}
|
||||
.li-mr-10{margin-right:10rpx}
|
||||
.li-mr-30{margin-right:30rpx}
|
||||
.li-mt-300-important{margin-top:300rpx !important}
|
||||
.li-pt-2{padding-top:2rpx}
|
||||
.li-py-20{padding-top:20rpx;padding-bottom:20rpx}
|
||||
.li-rd-full-50{border-radius:50%}
|
||||
.li-text-25{font-size:25rpx}
|
||||
.li-text-35{font-size:35rpx}
|
||||
.li-text-38{font-size:38rpx}
|
||||
.li-text-42{font-size:42rpx}
|
||||
.li-text-46{font-size:46rpx}
|
||||
.li-w-100{width:100rpx}
|
||||
.li-w-full-80{width:80%}
|
||||
.bg-FFFFFF{background-color:rgb(255,255,255)}
|
||||
.border-4-white{border-style:solid;border-color:rgb(255,255,255);border-width:4rpx}
|
||||
.bg-f9f9f9{background-color:rgb(249,249,249)}
|
||||
.li-mb-8{margin-bottom:8rpx}
|
||||
.li-ml-15{margin-left:15rpx}
|
||||
.li-ml-6{margin-left:6rpx}
|
||||
.li-mr-6{margin-right:6rpx}
|
||||
.li-p-15{padding:15rpx}
|
||||
.li-pb-15{padding-bottom:15rpx}
|
||||
.li-pb-30{padding-bottom:30rpx}
|
||||
.li-pt-25{padding-top:25rpx}
|
||||
.li-pt-4{padding-top:4rpx}
|
||||
.li-text-009aff-color{color:rgb(0,154,255)}
|
||||
.li-text-32{font-size:32rpx}
|
||||
.li-text-333333-color{color:rgb(51,51,51)}
|
||||
.li-text-36{font-size:36rpx}
|
||||
.li-text-55{font-size:55rpx}
|
||||
.li-text-70{font-size:70rpx}
|
||||
.li-text-9a9a9a-color{color:rgb(154,154,154)}
|
||||
.li-text-ff0000-color{color:rgb(255,0,0)}
|
||||
.li-w-full-100{width:100%}
|
||||
.li-w-full-92{width:92%}
|
||||
.li-h-240{height:240rpx}
|
||||
.li-h-250{height:250rpx}
|
||||
.li-h-50{height:50rpx}
|
||||
.li-h-60{height:60rpx}
|
||||
.li-items-end{align-items:end}
|
||||
.li-justify-start{justify-content:start}
|
||||
.li-mb-2{margin-bottom:2rpx}
|
||||
.li-ml-4{margin-left:4rpx}
|
||||
.li-ml-50{margin-left:50rpx}
|
||||
.li-mr-20{margin-right:20rpx}
|
||||
.li-mr-50{margin-right:50rpx}
|
||||
.li-mt-26{margin-top:26rpx}
|
||||
.li-mt-6{margin-top:6rpx}
|
||||
.li-mt-60{margin-top:60rpx}
|
||||
.li-mx-20{margin-left:20rpx;margin-right:20rpx}
|
||||
.li-mx-40{margin-left:40rpx;margin-right:40rpx}
|
||||
.li-pb-10{padding-bottom:10rpx}
|
||||
.li-pb-14{padding-bottom:14rpx}
|
||||
.li-pb-20{padding-bottom:20rpx}
|
||||
.li-pt-20{padding-top:20rpx}
|
||||
.li-pt-8{padding-top:8rpx}
|
||||
.li-rd-20{border-radius:20rpx}
|
||||
.li-rd-tl-30-important{border-top-left-radius:30rpx !important}
|
||||
.li-rd-tr-30-important{border-top-right-radius:30rpx !important}
|
||||
.li-text-000000-color{color:rgb(0,0,0)}
|
||||
.li-text-19171B-color{color:rgb(25,23,27)}
|
||||
.li-text-20{font-size:20rpx}
|
||||
.li-text-34{font-size:34rpx}
|
||||
.li-text-706e70-color{color:rgb(112,110,112)}
|
||||
.li-text-B2B2B2-color{color:rgb(178,178,178)}
|
||||
.li-text-BBBDDA-color{color:rgb(187,189,218)}
|
||||
.li-text-F2F7FD-color{color:rgb(242,247,253)}
|
||||
.li-text-F8C883-color{color:rgb(248,200,131)}
|
||||
.li-text-FFFFFF-color{color:rgb(255,255,255)}
|
||||
.li-text-b1bbc7-color{color:rgb(177,187,199)}
|
||||
.li-w-240{width:240rpx}
|
||||
.li-w-50{width:50rpx}
|
||||
.li-w-60{width:60rpx}
|
||||
.li-w-full-94{width:94%}
|
||||
.li-mb-25{margin-bottom:25rpx}
|
||||
.li-w-full-90{width:90%}
|
||||
.li-font-550{font-weight:550}
|
||||
.li-h-68{height:68rpx}
|
||||
.li-mt-100{margin-top:100rpx}
|
||||
.li-mt-28{margin-top:28rpx}
|
||||
.li-mt-32{margin-top:32rpx}
|
||||
|
|
@ -17,50 +198,85 @@
|
|||
.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-font-400{font-weight:400}
|
||||
.li-m-30{margin:30rpx}
|
||||
.li-text-595959-color{color:rgb(89,89,89)}
|
||||
|
||||
.li-items-end{align-items:end}
|
||||
.li-h-110{height:110rpx}
|
||||
.li-items-start{align-items:start}
|
||||
.li-mb-12{margin-bottom:12rpx}
|
||||
.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-mr-12{margin-right:12rpx}
|
||||
.li-mr-3{margin-right:3rpx}
|
||||
.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-pb-25{padding-bottom:25rpx}
|
||||
.li-pl-20{padding-left:20rpx}
|
||||
.li-pl-30{padding-left:30rpx}
|
||||
.li-pr-30{padding-right:30rpx}
|
||||
.li-pt-30{padding-top:30rpx}
|
||||
.li-py-6{padding-top:6rpx;padding-bottom:6rpx}
|
||||
.li-text-40{font-size:40rpx}
|
||||
.li-text-5f5f5f-color{color:rgb(95,95,95)}
|
||||
.li-text-666-color{color:rgb(102,102,102)}
|
||||
.li-text-70{font-size:70rpx}
|
||||
.li-text-right{text-align:right}
|
||||
.li-w-110{width:110rpx}
|
||||
.li-w-400{width:400rpx}
|
||||
.overflow-hidden{overflow:hidden}
|
||||
|
||||
|
||||
.li-mb-30{margin-bottom:30rpx}
|
||||
.li-ml-10{margin-left:10rpx}
|
||||
.li-mr-200{margin-right:200rpx}
|
||||
.li-mr-4{margin-right:4rpx}
|
||||
.li-mt-100-important{margin-top:100rpx !important}
|
||||
.li-mt-4{margin-top:4rpx}
|
||||
.li-mt-50{margin-top:50rpx}
|
||||
.li-mt-8{margin-top:8rpx}
|
||||
.li-py-40{padding-top:40rpx;padding-bottom:40rpx}
|
||||
.li-text-0070F0-color{color:rgb(0,112,240)}
|
||||
.li-text-333-color{color:rgb(51,51,51)}
|
||||
.li-text-44{font-size:44rpx}
|
||||
.li-text-48{font-size:48rpx}
|
||||
.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%}
|
||||
|
||||
|
||||
.li-text-100{font-size:100rpx}
|
||||
.li-text-ddd-color{color:rgb(221,221,221)}
|
||||
|
||||
.li-mb-10{margin-bottom:10rpx}
|
||||
.li-mb-15{margin-bottom:15rpx}
|
||||
.li-mb-40{margin-bottom:40rpx}
|
||||
.li-my-20{margin-top:20rpx;margin-bottom:20rpx}
|
||||
.li-p-30{padding:30rpx}
|
||||
.li-py-30{padding-top:30rpx;padding-bottom:30rpx}
|
||||
.li-text-07c160-color{color:rgb(7,193,96)}
|
||||
|
||||
.li-block{display:block}
|
||||
.li-border-b{border-style:solid;border-color:b;border-width:1rpx}
|
||||
.li-font-500{font-weight:500}
|
||||
.li-items-baseline{align-items:baseline}
|
||||
.li-lh-44{line-height:44}
|
||||
.li-mr-15{margin-right:15rpx}
|
||||
.li-mt-5{margin-top:5rpx}
|
||||
.li-opacity-80{undefined:0.8}
|
||||
.li-py-60{padding-top:60rpx;padding-bottom:60rpx}
|
||||
.li-rd-12{border-radius:12rpx}
|
||||
.li-rd-16{border-radius:16rpx}
|
||||
.li-w-650rpx{width:650rpx}
|
||||
|
||||
.li-h-90{height:90rpx}
|
||||
.li-text-47{font-size:47rpx}
|
||||
.li-w-90{width:90rpx}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue