feat: 新增部分页面静态页面
This commit is contained in:
admin
@@ -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>
|
||||
@@ -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
354
pages/index/components/order-code-popup.vue
Normal 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>
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user