chenyijie/delivery-uniapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 新增部分页面静态页面

Browse Source
This commit is contained in:
admin
2026-01-24 17:45:54 +08:00
parent 849647d3c9
commit 8c1224999d
20 changed files with 1828 additions and 339 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
pages/index/components/first-one.vue
View File

@@ -1,26 +0,0 @@
<!-- 分类展示：first-one 风格 -->
<template>
<view class="ss-flex-col">
<view class="goods-box" v-for="item in pagination.list" :key="item.id">
<s-goods-column
size="sl"
:data="item"
@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
/>
</view>
</view>
</template>
<script setup>
import sheep from '@/sheep';
const props = defineProps({
pagination: Object,
});
</script>
<style lang="scss" scoped>
.goods-box {
width: 100%;
}
</style>

66
pages/index/components/first-two.vue
View File

@@ -1,66 +0,0 @@
<!-- 分类展示：first-two 风格 -->
<template>
<view>
<view class="ss-flex flex-wrap">
<view class="goods-box" v-for="item in pagination?.list" :key="item.id">
<view @click="sheep.$router.go('/pages/goods/index', { id: item.id })">
<view class="goods-img">
<image class="goods-img" :src="item.picUrl" mode="aspectFit" />
</view>
<view class="goods-content">
<view class="goods-title ss-line-1 ss-m-b-28">{{ item.name }}</view>
<view class="goods-price">￥{{ fen2yuan(item.price) }}</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup>
import sheep from '@/sheep';
import { fen2yuan } from '@/sheep/hooks/useGoods';
const props = defineProps({
pagination: Object,
});
</script>
<style lang="scss" scoped>
.goods-box {
width: calc((100% - 20rpx) / 2);
margin-bottom: 20rpx;
.goods-img {
width: 100%;
height: 246rpx;
border-radius: 10rpx 10rpx 0px 0px;
}
.goods-content {
width: 100%;
background: #ffffff;
box-shadow: 0px 0px 20rpx 4rpx rgba(199, 199, 199, 0.22);
padding: 20rpx 0 32rpx 16rpx;
box-sizing: border-box;
border-radius: 0 0 10rpx 10rpx;
.goods-title {
font-size: 26rpx;
font-weight: bold;
color: #333333;
}
.goods-price {
font-size: 24rpx;
font-family: OPPOSANS;
font-weight: 500;
color: #e1212b;
}
}
&:nth-child(2n + 1) {
margin-right: 20rpx;
}
}
</style>

354
pages/index/components/order-code-popup.vue Normal file
View File

@@ -0,0 +1,354 @@
<template>
<up-popup :show="show" mode="center" :round="5" safeAreaInsetBottom @close="onClose" :closeable="true">
<view class="popup-wrap" style="width:680rpx;">
<!-- 标题 -->
<view class="popup-header">
<text class="title">催单</text>
<text class="order-no">#{{ orderIndex }}</text>
</view>
<!-- 查询输入 -->
<view class="search-row">
<view style="width:620rpx;">
<input class="search-input" v-model="orderCode" placeholder="输入收件人手机尾号4位+取单号，如8927#11" />
</view>
<view style="margin-left:15rpx;">
<up-button type="primary" size="small" text="查询" @click="queryOrder"></up-button>
</view>
</view>
<!-- 取货点 -->
<view class="section">
<view class="section-title">
<text class="icon">🏬</text>
<text class="text">取货点店铺名称</text>
</view>
<text class="muted">{{ pickupName }}</text>
</view>
<!-- 送餐地址 -->
<view class="section">
<view class="section-title">
<text class="icon">🚩</text>
<text class="text">送餐详细地址</text>
</view>
<text class="muted">{{ address }}</text>
<view class="recipient">收货人名称（先生） 尾号{{ recipientTail }}</view>
</view>
<!-- 客户备注 -->
<view class="customer-note">
<text>顾客：{{ customerNote }}</text>
</view>
<!-- 交接备注 下拉 -->
<view class="form-row">
<text class="label">交接备注：</text>
<picker :range="remarks" @change="onRemarkChange">
<view class="picker-display">{{ selectedRemarkText }}</view>
</picker>
</view>
<!-- 凭证 上传 -->
<view class="form-row proof-row">
<text class="label required">凭证：</text>
<view class="proof-list">
<view v-for="(img, idx) in proofImages" :key="idx" class="proof-item">
<image :src="img" mode="aspectFill" class="proof-img" />
<view class="remove" @click="removeProofImage(idx)">✕</view>
</view>
<view class="proof-add" @click="addProofImage">+</view>
</view>
</view>
<!-- 底部操作 -->
<view class="footer-row">
<up-button type="success" text="联系上一个骑手" icon="phone" @click="callPhone('13131008612')"></up-button>
<view style="margin-left:15rpx;width:600rpx;">
<up-button type="primary" text="确认交接" @click="onConfirm"></up-button>
</view>
</view>
</view>
</up-popup>
</template>
<script setup>
import {
ref,
reactive,
computed
} from 'vue'
const props = defineProps({
show: {
type: Boolean,
default: false
}
})
const emit = defineEmits(['close', 'confirm'])
// 响应式数据
const orderIndex = ref(1)
const orderCode = ref('')
const pickupName = ref('取货店铺详细地址广东省广州市天河区学院站荷光路')
const address = ref('送餐详细地址广东省广州市天河区华景新城软件园区A栋303室')
const recipientTail = ref('1254')
const customerNote = ref('依据餐量提供餐具')
const remarks = ['请选择 备注内容', '已核对身份证', '缺少配件', '地址异常']
const selectedRemark = ref(0)
const selectedRemarkText = computed(() => remarks[selectedRemark.value] || '')
const proofImages = ref([])
// 方法
const onClose = () => {
emit('close')
}
const queryOrder = () => {
// 简单模拟查询：如果输入有内容则把 orderIndex 加 1 并回填部分数据
if (!orderCode.value) {
uni.showToast({
title: '请输入查询条件',
icon: 'none'
})
return
}
orderIndex.value += 1
// 这里可以调用接口查询并填充 pickupName/address 等
uni.showToast({
title: '查询成功',
icon: 'success'
})
}
// 拨打电话
const callPhone = (phone) => {
if (!phone) {
sheep.$helper && sheep.$helper.toast && sheep.$helper.toast('未找到联系电话');
return;
}
uni.makePhoneCall({
phoneNumber: phone
});
}
const onRemarkChange = (e) => {
selectedRemark.value = e.detail.value
}
const addProofImage = () => {
// 使用 uni.chooseImage 上传
uni.chooseImage({
count: 4,
success(res) {
const tempFiles = res.tempFilePaths || res.tempFiles.map(f => f.path)
proofImages.value = proofImages.value.concat(tempFiles)
}
})
}
const removeProofImage = (idx) => {
proofImages.value.splice(idx, 1)
}
const onConfirm = () => {
// 校验凭证
if (proofImages.value.length === 0) {
uni.showToast({
title: '请上传凭证',
icon: 'none'
})
return
}
const payload = {
orderIndex: orderIndex.value,
orderCode: orderCode.value,
remark: selectedRemarkText.value,
proofImages: proofImages.value
}
emit('confirm', payload)
}
</script>
<style scoped>
.popup-wrap {
padding: 24rpx;
background: #fff;
border-radius: 12rpx;
}
.popup-header {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 18rpx;
}
.title {
color: #00a0df;
font-size: 30rpx;
font-weight: 700;
margin-right: 8rpx;
}
.order-no {
color: #666;
font-size: 24rpx;
}
.search-row {
display: flex;
align-items: center;
margin-bottom: 16rpx;
}
.search-input {
flex: 1;
height: 64rpx;
border: 1rpx solid #ddd;
padding: 0 20rpx;
border-radius: 6rpx;
}
.search-btn {
width: 120rpx;
height: 64rpx;
font-size: 22rpx;
background: #fff;
border-left: 1rpx solid #ddd;
}
.section {
padding: 12rpx 0;
border-top: 1rpx solid #f0f0f0;
}
.section-title {
display: flex;
align-items: center;
margin-bottom: 8rpx;
}
.section-title .icon {
margin-right: 12rpx;
font-size: 26rpx;
}
.section-title .text {
font-weight: 700;
font-size: 26rpx;
}
.muted {
color: #666;
font-size: 22rpx;
}
.recipient {
color: #999;
font-size: 20rpx;
margin-top: 6rpx;
}
.customer-note {
background: #f7f7f7;
padding: 12rpx;
border-radius: 6rpx;
margin: 12rpx 0;
color: #666;
}
.form-row {
display: flex;
align-items: center;
margin: 12rpx 0;
}
.label {
width: 180rpx;
color: #333;
}
.required {
color: #e53935;
}
.picker-display {
flex: 1;
height: 64rpx;
line-height: 64rpx;
border: 1rpx solid #e6e6e6;
padding: 0 12rpx;
border-radius: 6rpx;
}
.proof-row .proof-list {
display: flex;
align-items: center;
}
.proof-item {
position: relative;
width: 140rpx;
height: 140rpx;
margin-right: 14rpx;
}
.proof-img {
width: 100%;
height: 100%;
border-radius: 6rpx;
}
.remove {
position: absolute;
right: 4rpx;
top: 4rpx;
background: rgba(0, 0, 0, 0.5);
color: #fff;
padding: 2rpx 6rpx;
border-radius: 10rpx;
font-size: 20rpx;
}
.proof-add {
width: 140rpx;
height: 140rpx;
border: 1rpx dashed #ddd;
display: flex;
justify-content: center;
align-items: center;
font-size: 48rpx;
color: #999;
border-radius: 6rpx;
}
.footer-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 18rpx;
}
.phone-area {
display: flex;
align-items: center;
color: #333;
}
.phone-icon {
font-size: 30rpx;
margin-right: 8rpx;
}
.confirm-btn {
background: #0a99e6;
color: #fff;
padding: 14rpx 32rpx;
border-radius: 8rpx;
}
</style>

97
pages/index/components/second-one.vue
View File

@@ -1,97 +0,0 @@
<!-- 分类展示：second-one 风格 -->
<template>
<view>
<!-- 一级分类的名字 -->
<!-- <view class="title-box ss-flex ss-col-center ss-row-center ss-p-b-30">
<view class="title-line-left" />
<view class="title-text ss-p-x-20">{{ props.data[activeMenu].name }}</view>
<view class="title-line-right" />
</view> -->
<view class="title-box ss-flex ss-p-b-30">
<view class="theme-line"></view>
<view class="title-text">{{ props.data[activeMenu].name }}</view>
</view>
<!-- 二级分类的名字 -->
<view class="goods-item-box ss-flex ss-flex-wrap ss-p-b-20">
<view
class="goods-item"
v-for="item in props.data[activeMenu].children"
:key="item.id"
@tap="
sheep.$router.go('/pages/goods/list', {
categoryId: item.id,
})
"
>
<image class="goods-img" :src="item.picUrl" mode="aspectFill" />
<view class="ss-p-10">
<view class="goods-title ss-line-1">{{ item.name }}</view>
</view>
</view>
</view>
</view>
</template>
<script setup>
import sheep from '@/sheep';
const props = defineProps({
data: {
type: Object,
default: () => ({}),
},
activeMenu: [Number, String],
});
</script>
<style lang="scss" scoped>
.title-box {
font-weight: 800;
font-size: 32rpx;
color: #333333;
.title-line-left,
.title-line-right {
width: 15px;
height: 1px;
background: #d2d2d2;
}
}
.goods-item {
width: calc((100% - 20px) / 3);
margin-right: 10px;
margin-bottom: 10px;
&:nth-of-type(3n) {
margin-right: 0;
}
.goods-img {
width: calc((100vw - 140px) / 3);
height: calc((100vw - 140px) / 3);
}
.goods-title {
font-size: 26rpx;
font-weight: bold;
color: #333333;
line-height: 40rpx;
text-align: center;
}
.goods-price {
color: $red;
line-height: 40rpx;
}
}
.theme-line {
margin-right: 15rpx;
width: 8rpx;
height: 28rpx;
background: var(--ui-BG-Main);
border-radius: 8rpx 8rpx 8rpx 8rpx;
}
</style>

21
pages/index/index.vue
View File

@@ -6,7 +6,8 @@
<view class="top-bg"></view>
<view class="top-inner">
<view class="user-info">
<image class="user-avatar" :src="driverInfo.avatar || defaultAvatar" mode="cover" />
<image class="user-avatar" @tap="sheep.$router.go('/pages/index/user')"
:src="driverInfo.avatar || defaultAvatar" mode="cover" />
<view class="user-meta">
<!-- <text class="user-name">{{ driverInfo.nickName || '骑手姓名' }}</text> -->
<text class="user-status" @click="toggleOnline">{{ driverInfo.isOnline ? '在线中' : '离线' }}</text>
@@ -25,6 +26,9 @@
</view>
</view>
<!-- 输入用户单编码 弹窗 -->
<order-code-popup :show="orderPopupShow" @close="orderPopupShow = false" @confirm="onConfirmCode" />
<!-- 订单列表 -->
<scroll-view class="order-list" scroll-y="true" :style="{ height: listHeight + 'px' }">
<view v-for="order in filteredOrders" :key="order.id" class="order-card">
@@ -89,6 +93,7 @@
import { ref, computed, onMounted } from 'vue';
import sheep from '@/sheep';
import { onShow } from '@dcloudio/uni-app';
import OrderCodePopup from './components/order-code-popup.vue';
// 驿站/骑手信息（从 store 获取或 mock）
const driverInfo = ref({
@@ -211,10 +216,18 @@ function scanQr() {
});
}
const orderPopupShow = ref(false);
function openManualInput() {
uni.navigateTo({
url: '/pages/index/user' // 示例跳转，按需替换为真实手动输入页面
});
// 打开手动输入弹窗（使用 uView Plus 的 up-popup）
orderPopupShow.value = true;
}
function onConfirmCode(payload) {
// payload 包含 code, result, remark, images
// 这里简单展示提示，实际应调用后端或触发下一步逻辑
console.log('confirmed code:', payload);
sheep.$helper && sheep.$helper.toast && sheep.$helper.toast('交接已确认');
}
const headerStyle = ref({});

32
pages/index/user.vue
View File

@@ -4,7 +4,7 @@
<view class="header-wrap" :style="headerStyle">
<view class="header-bg"></view>
<view class="header-inner">
<image class="avatar" :src="userInfo.avatar || defautAvatar"></image>
<image class="avatar" :src="userInfo.avatar || defautAvatar" @tap="sheep.$router.go('/pages/user/info')"></image>
<view class="user-meta" v-if="userInfo.nickname">
<view class="user-name">{{ userInfo.nickname + `(${userInfo.mobile})` }}</view>
<view class="user-status" @click="handleStatusToggle">
@@ -23,14 +23,15 @@
<view class="stats-item">
<text class="stats-title">今日预计收入（元）</text>
<text class="stats-value"> {{ formatMoney(todayIncome) }} </text>
<view class="stats-link" @click="openAccount">
<view class="stats-link" @tap="sheep.$router.go('/pages/user/account/index')">
<!-- @click="openAccount" -->
我的账户 <uni-icons type="right" size="13"></uni-icons>
</view>
</view>
<view class="stats-item">
<text class="stats-title">今日完成单量（单）</text>
<text class="stats-value"> {{ todayOrders }} </text>
<view class="stats-link" @click="openOrders">
<view class="stats-link" @tap="sheep.$router.go('/pages/user/order/orderRecord')">
订单统计 <uni-icons type="right" size="13"></uni-icons>
</view>
</view>
@@ -43,11 +44,11 @@
<image class="shortcut-icon" src="/static/img/order1.png" mode="aspectFit" />
<text class="shortcut-text">考勤排班</text>
</view>
<view class="shortcut" @click="openSalary">
<view class="shortcut" @tap="sheep.$router.go('/pages/user/salary/salaryManage')">
<image class="shortcut-icon" src="/static/img/order2.png" mode="aspectFit" />
<text class="shortcut-text">薪资助手</text>
</view>
<view class="shortcut" @click="openSetting">
<view class="shortcut" @tap="sheep.$router.go('/pages/public/setting')">
<!-- <image class="shortcut-icon" src="/static/img/edit.png" mode="aspectFit" /> -->
<view class="shortcut-icon">
<uni-icons type="gear" size="43"></uni-icons>
@@ -214,7 +215,6 @@
onPageScroll(() => {});
// 跳转/交互方法（保留路由调用位置，用户可按需实现）
function goBack() {
uni.navigateBack();
}
@@ -224,31 +224,13 @@
url: '/pages/public/webview?type=account'
});
}
function openOrders() {
uni.navigateTo({
url: '/pages/index/order-list'
});
}
function openAttendance() {
uni.navigateTo({
url: '/pages/public/faq'
});
}
function openSalary() {
uni.navigateTo({
url: '/pages/public/richtext'
});
}
function openSetting() {
uni.navigateTo({
url: '/pages/public/setting'
});
}
function login() {
showAuthModal();
}