新建外卖详情页

This commit is contained in:
tangxinyue 2026-05-15 18:34:52 +08:00
parent d690a8d48c
commit b46210a235
24 changed files with 510 additions and 26 deletions

View File

@ -29,7 +29,7 @@ export function createApp() {
app.config.globalProperties.$system = plus.os.name;
// #endif
app.config.globalProperties.$systemInfo = systemInfo
uni.setStorageSync('version', '1.0.4.sp29')
uni.setStorageSync('version', '1.0.5')
app.config.globalProperties.$version = uni.getStorageSync('version')
app.use(globalMethods);
return {

View File

@ -96,10 +96,16 @@
}
},
{
"path" : "taobao/add-shopping-order/add-shopping-order",
"style" :
{
"navigationBarTitleText" : "新增淘宝购物订单",
"path": "taobao/add-shopping-order/add-shopping-order",
"style": {
"navigationBarTitleText": "新增淘宝购物订单",
"navigationStyle": "custom"
}
},
{
"path": "taobao/shangou-order-detail/shangou-order-detail",
"style": {
"navigationBarTitleText": "淘宝闪购订单详情",
"navigationStyle": "custom"
}
}

View File

@ -118,7 +118,9 @@
<view class="codefun-flex-row codefun-items-center">
<view v-if="computeSeatNo(item.seatNo)"
class="codefun-flex-col codefun-justify-start codefun-items-center codefun-shrink-0 text-wrapper_3">
<text class="font_11 text_21">{{ computeSeatNo(item.seatNo) }}</text>
<view class="font_11 text_21">
{{
computeSeatNo(item.seatNo) }}</view>
</view>
<text class="font_12 text_22 codefun-ml-4">{{ item.carriage }}车厢
{{ item.seatNo }}</text>
@ -695,6 +697,9 @@ const showFristAndLastNumber = (str) => {
border-radius: 6rpx;
width: 66rpx;
height: 32rpx;
display: flex;
align-items: center;
justify-content: center;
border: solid 1rpx #d3d3d3;
}
@ -770,13 +775,10 @@ const showFristAndLastNumber = (str) => {
}
.font_11 {
font-size: 26rpx;
line-height: 30rpx;
color: #979797;
}
.text_21 {
line-height: 28rpx;
font-size: 12px;
line-height: 32rpx;
height: 32rpx;
}
}
}

View File

@ -339,8 +339,8 @@ page {
.text-wrapper {
border-radius: 25rpx;
width: 106rpx;
height: 50rpx;
border: solid 1rpx #28c2dd;
height: 24px;
border: solid 0.5px #28c2dd;
.text_6 {
color: #28c2dd;

View File

@ -50,8 +50,7 @@ const menuList = ref([
bgColor: ["#FFF0DA", "#FFFFFF"],
btnBg: "#FF953C",
shadowColor: "#FF953C",
// url: "/pages/shopping/taobao/list-index"
url: ""
url: "/pages/shopping/taobao/list-index"
}, {
name: "快手",
icon: "kuaishou",

View File

@ -110,11 +110,13 @@
<script setup>
import { ref, computed, onMounted, getCurrentInstance } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { onShow, onLoad } from '@dcloudio/uni-app';
import ShoppingCard from '@/components/shopping/jingdong/shopping-card.vue';
import { util } from '@/utils/common.js';
import { shoppingType, waimaiType, defaultDataList } from './json/order.json';
const { proxy } = getCurrentInstance();
const showActionMenu = ref(false);
const actionMenuState = ref({ x: 0, y: 0, item: null });
@ -136,14 +138,22 @@ const buttonGroup = [
}, {
name: "新增秒送订单",
click: () => {
// uni.showToast({
// title: '',
// icon: 'none'
// });
uni.navigateTo({
url: '/pages/shopping/jingdong/add-waimai/add-waimai'
});
}
}, {
name: "切换推荐商品图片",
click: () => {
//
uni.pageScrollTo({
scrollTop: 999999,
duration: 300
});
setTimeout(() => {
chooseImage();
}, 400);
}
},
]
/**
@ -291,7 +301,24 @@ onMounted(() => {
}, 100);
});
onLoad(() => {
proxy.$apiUserEvent('all', {
type: 'event',
key: 'shopping',
prefix: '.uni.other.',
value: '京东'
})
})
onShow(() => {
// #ifdef APP-PLUS
util.setAndroidSystemBarColor('#FFFFFF')
setTimeout(() => {
plus.navigator.setStatusBarStyle("dark");
}, 500);
// #endif
//
const isInit = uni.getStorageSync('isInitJingdong');
@ -321,6 +348,7 @@ onShow(() => {
}
console.log('screenshotImage.value', screenshotImage.value)
});
// -

View File

@ -5,7 +5,8 @@
@button-click="util.clickTitlePopupButton" tipLayerType="jingdong-shopping-list" isTipLayer
tipLayerText="添加订单信息">
<template v-slot:left>
<image class="back-icon" src="/static/image/shopping/taobao/back.png" mode="aspectFit"></image>
<image class="back-icon" src="/static/image/shopping/taobao/back.png" mode="aspectFit"
@click="util.goBack()"></image>
</template>
<template v-slot:center>
<view class="search-box flex-align-center">
@ -80,11 +81,19 @@
</view>
<listCard v-if="displayList.length > 0" :list="displayList" @click-item="goDetail"
@longpress="onItemLongPress" />
<view v-else class="null-data-box flex-center flex-column">
<view v-else-if="displayList.length == 0 && currentTab != 2" class="null-data-box flex-center flex-column">
<image style="width: 254rpx;height: 200rpx;" src="/static/image/shopping/taobao/null.png"></image>
<text
style="font-size: 28rpx;color: #7C8495;line-height: 28rpx;margin-top: 16rpx;font-weight: 500;">您还没有相关的订单</text>
</view>
<view v-else-if="displayList.length == 0 && currentTab == 2"
class="null-data-box shangou flex-center flex-column">
<image style="width: 254rpx;height: 200rpx;" src="/static/image/shopping/taobao/waimai/null.png">
</image>
<text class="null-text">您还没有闪购订单</text>
<text class="tip-text">时机正好去闪购逛逛还能抽免单</text>
<view class="go-btn">去闪购逛逛</view>
</view>
<view class="bottom-fixed" style="height: 1000rpx;">
<view v-if="!selectedImage" class="upload-screenshot-box" @touchstart="handleTouchStart"
@touchend="handleTouchEnd">
@ -160,15 +169,25 @@
<view class="p-footer" @click="bottomImgPopup.close()">取消</view>
</view>
</uni-popup>
<!-- 水印 -->
<view v-if="$isVip()">
<watermark dark="light" source="uni_alipay_shopping_taobao" />
<liu-drag-button :canDocking="false" @clickBtn="$goRechargePage('watermark', 'uni_alipay_shopping_taobao')">
<c-lottie ref="cLottieRef" :src='$watermark()' width="94px" height='74px' :loop="true"></c-lottie>
</liu-drag-button>
</view>
</template>
<script setup>
import { ref, computed, onMounted, getCurrentInstance, reactive } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { ref, computed, getCurrentInstance, reactive } from 'vue';
import { onShow, onLoad } from '@dcloudio/uni-app';
import { util } from '@/utils/common.js';
import listCard from './components/list-card/list-card.vue';
import { defualtData } from './json/order.json'
const { proxy } = getCurrentInstance();
const instance = getCurrentInstance();
const mockList = ref([]);
const menuState = reactive({
@ -191,7 +210,23 @@ const selectBottomImg = (type) => {
});
};
onLoad(() => {
proxy.$apiUserEvent('all', {
type: 'event',
key: 'shopping',
prefix: '.uni.other.',
value: '淘宝'
})
})
onShow(() => {
// #ifdef APP-PLUS
util.setAndroidSystemBarColor('#FFFFFF')
setTimeout(() => {
plus.navigator.setStatusBarStyle("dark");
}, 500);
// #endif
//
let storageData = uni.getStorageSync('taobaoShopping');
@ -502,7 +537,7 @@ const updateFilterList = () => {
}
filterList.value = sourceList.map((name, index) => ({
name,
disabled: index === 2 && currentTab.value === 1 //
disabled: false
}));
};
@ -888,6 +923,36 @@ const deleteOrder = (id) => {
.null-data-box {
padding: 68rpx;
&.shangou {
.null-text {
font-size: 28rpx;
color: #7C8495;
line-height: 28rpx;
margin-top: 16rpx;
font-weight: 500;
}
.tip-text {
font-size: 30rpx;
color: #A5A8AE;
line-height: 30rpx;
margin-top: 32rpx;
}
.go-btn {
width: 198rpx;
height: 80rpx;
background-color: #FC620B;
border-radius: 12rpx;
color: #FFFFFF;
text-align: center;
line-height: 80rpx;
font-size: 30rpx;
font-weight: 500;
margin-top: 32rpx;
}
}
}
.bottom-fixed {

View File

@ -0,0 +1,376 @@
<template>
<view>
<nav-bar class="nav-bar" title="" :bgColor="order.statusType == 'wait_recv' ? 'transparent' : '#FFFFFF'"
:buttonGroup="buttonGroup" @button-click="util.clickTitlePopupButton" tipLayerType="jingdong-shopping-list"
isTipLayer tipLayerText="添加订单信息">
<template v-slot:left>
<image class="back-icon" src="/static/image/shopping/taobao/back.png" mode="aspectFit"
@click="util.goBack()"></image>
</template>
<template v-slot:right>
<view class="right-box flex-align-center">
<view v-if="order.statusType == 'wait_recv'" class="item flex-column flex-align-center"
style="background-color: #FFFFFF;width: 70rpx;">
<image class="icon" src="/static/image/shopping/taobao/waimai/shuaxin.png"></image>
<text class="text">刷新</text>
</view>
<view class="item flex-column flex-align-center" style="background-color: #FFFFFF;width: 70rpx;">
<image class="icon" src="/static/image/shopping/taobao/waimai/kefu.png"></image>
<text class="text">客服</text>
</view>
<view class="item flex-column flex-align-center">
<image class="icon" src="/static/image/shopping/taobao/xiaoxi.png"></image>
<text class="text" style="opacity: 0;">消息</text>
</view>
</view>
</template>
</nav-bar>
<view v-if="order.statusType != 'wait_recv'" class="wait_pay">
<view class="flex-align-center">
<text v-if="order.statusType == 'wait_pay'" class="main-text">待支付剩余15:00</text>
<text v-else class="main-text">{{ order.statusType == 'success' ? '订单已送达' : '订单已取消' }}</text>
<uni-icons v-if="order.statusType != 'closed'" type="right" size="16" color="#1A1A1A"></uni-icons>
</view>
<view v-if="order.statusType == 'wait_pay'" class="flex-align-center notice-box">
<image style="width:26rpx;height: 26rpx;" src="/static/image/shopping/taobao/waimai/notice.png"></image>
<text class="notice-text">15分钟内未支付,订单将自动取消</text>
</view>
</view>
<view class="deliver-info">
<view v-if="order.statusType == 'closed' || order.statusType == 'success'" class="bold-text">
{{ order.statusType == 'closed' ? '抱歉,我们会努力改进' : '已送到指定位置,请及时取餐' }}
</view>
<view v-if="order.statusType == 'wait_recv' || order.statusType == 'wait_pay'"
style="justify-content: baseline;">
<text class="label">预计</text>
<text class="time">16:32-16:47</text>
</view>
<view v-if="order.statusType != 'closed'" class="flex"
style="margin-top: 26rpx;justify-content: flex-start;">
<text class="label">送至</text>
<view class="flex-1 address-info">
<text>金星哈哈哈哈哈哈哈和和哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 王总(女士) 12563259856</text>
<text class="split"></text>
<text class="edit-text">修改</text>
<uni-icons type="right" size="12" color="#8C8C8C"></uni-icons>
</view>
</view>
<view v-if="order.statusType == 'wait_recv'" class="flex"
style="margin-top: 26rpx;justify-content: flex-start;">
<text class="label">服务</text>
<view class="flex-1 address-info">
<text style="color: #1AA35B;">超20分钟免单-生效中</text>
<text> 若超时即11:57后送达赔4元可叠加红包</text>
<uni-icons type="right" size="12" color="#8C8C8C"></uni-icons>
</view>
</view>
</view>
<view v-if="order.statusType == 'wait_pay'" class="wait_pay-buttom">
<view class="button flex-center flex-column">
<text style="font-size: 32rpx;line-height: 32rpx;">去支付 15.6</text>
<text style="font-size: 24rpx;line-height: 24rpx;margin-top: 4rpx;">支持更多支付方式</text>
</view>
</view>
<view class="icon-list-item flex">
<view class="flex-1 flex-align-center icon-box"
:class="{ 'flex-justify-center': order.statusType == 'closed' }">
<template v-for="(item, index) in items" :key="index">
<view v-if="item.show()" class="item flex-center flex-column">
<image class="img" :src="item.image" mode="aspectFit"></image>
<text :style="{ color: item.color || '#1a1a1a ' }">{{ item.text }}</text>
</view>
</template>
</view>
<view v-if="order.statusType == 'wait_recv' || order.statusType == 'success'"
class="flex-align-center more">
<view style="margin-right: 18rpx;color: #E9E9E9;">|</view>
<view class="item flex-center flex-column" style="width: auto;min-width: 0;margin-right: 0;">
<image class="img" src="/static/image/shopping/taobao/waimai/gengduo.png" mode="aspectFit">
</image>
<text>更多</text>
</view>
</view>
</view>
</view>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { util } from '@/utils/common.js';
const order = ref({
statusType: "wait_pay"
})
const items = [
{
image: "/static/image/shopping/taobao/waimai/zhaorenfu.png",
text: "找人付",
show: () => {
return order.value.statusType == 'wait_pay'
}
},
{
image: "/static/image/shopping/taobao/waimai/gaidingdan.png",
text: "修改订单信息",
show: () => order.value.statusType == 'wait_pay' || order.value.statusType == 'wait_recv',
color: "#FE6306"
},
{
image: "/static/image/shopping/taobao/waimai/shenqingshouhou.png",
text: "申请售后",
show: () => order.value.statusType == 'success',
},
{
image: "/static/image/shopping/taobao/waimai/zaimaiyidan.png",
text: "再买一单",
show: () => order.value.statusType == 'success',
color: "#FE6306"
},
{
image: "/static/image/shopping/taobao/waimai/pingjiayinhongbao.png",
text: "评价赢红包",
show: () => order.value.statusType == 'success',
},
{
image: "/static/image/shopping/taobao/waimai/lianxi.png",
text: "联系商家",
show: () => order.value.statusType == 'wait_recv' || order.value.statusType == 'success'
},
{
image: "/static/image/shopping/taobao/waimai/lianxi.png",
text: "联系骑士",
show: () => order.value.statusType == 'wait_recv' || order.value.statusType == 'success'
},
{
image: "/static/image/shopping/taobao/waimai/cuidan.png",
text: "催单",
show: () => order.value.statusType == 'wait_recv'
},
{
image: "/static/image/shopping/taobao/waimai/quxiaodingdan.png",
text: "取消订单",
show: () => order.value.statusType == 'wait_pay' || order.value.statusType == 'wait_recv'
},
{
image: "/static/image/shopping/taobao/waimai/dianhuashangjia.png",
text: "电话商家",
show: () => order.value.statusType == 'closed'
}
]
</script>
<style lang="less" scoped>
::v-deep .uni-navbar__header-btns {
width: auto !important;
}
::v-deep .uni-navbar__header-container {
padding: 0 14rpx;
padding-left: 34rpx;
}
.nav-bar {
background-color: #ffffff;
.back-icon {
width: 40rpx;
height: 40rpx;
}
.search-box {
background-color: #F1F5F8;
padding: 0 18rpx;
width: 100%;
border-radius: 16rpx;
.search-icon {
width: 26rpx;
height: 26rpx;
margin-right: 10rpx;
}
.input {
width: 100%;
height: 72rpx;
font-size: 26rpx;
::v-deep .input-placeholder {
color: #7E8C9D;
}
}
}
.right-box {
.item {
margin-left: 30rpx;
height: 70rpx;
border-radius: 12rpx;
align-items: center;
justify-content: center;
flex-direction: column;
.icon {
width: 40rpx;
height: 40rpx;
}
.text {
font-size: 18rpx;
color: #1A1A1A;
line-height: 18rpx;
}
}
}
}
.wait_pay {
padding: 32rpx 16rpx;
padding-bottom: 18rpx;
background-color: #ffffff;
.main-text {
font-weight: 400;
font-size: 48rpx;
line-height: 48rpx;
color: #1A1A1A;
font-weight: 600;
margin-right: 8rpx;
margin-left: 16rpx;
}
.notice-box {
padding: 28rpx 16rpx;
margin-top: 30rpx;
background-color: #FAFAFA;
border-radius: 8rpx;
.notice-text {
font-size: 26rpx;
color: #1A1A1A;
line-height: 26rpx;
}
}
}
.deliver-info {
background-color: #FFFFFF;
padding: 32rpx 32rpx 0;
.bold-text {
font-size: 40rpx;
color: #1A1A1A;
line-height: 40rpx;
font-weight: 500;
}
.label {
font-size: 26rpx;
color: #1A1A1A;
line-height: 26rpx;
font-weight: 500;
margin-right: 10rpx;
}
.time {
font-weight: 500;
font-size: 40rpx;
color: #1A1A1A;
line-height: 40rpx;
}
.address-info {
font-weight: 400;
font-size: 26rpx;
color: #1A1A1A;
line-height: 40rpx;
margin-top: -8rpx;
.split {
display: inline-block;
height: 18rpx;
width: 1rpx;
background-color: #D8D8D8;
margin: 0 14rpx;
}
.edit-text {
color: #7C8495;
margin-right: 2rpx;
}
}
}
.wait_pay-buttom {
padding: 0 32rpx;
background-color: #ffffff;
.button {
background-color: #FE6306;
width: 100%;
height: 80rpx;
border-radius: 12rpx;
flex-direction: column;
color: #FFFFFF;
}
}
.icon-list-item {
background-color: #FFFFFF;
padding: 0 28rpx;
padding-top: 32rpx;
padding-bottom: 28rpx;
.icon-box {
width: 100rpx;
overflow: hidden;
overflow-x: auto;
justify-content: space-around;
}
.item {
flex-shrink: 0;
min-width: 102rpx;
text-align: center;
margin-right: 18rpx;
.img {
width: 32rpx;
height: 32rpx;
}
text {
font-size: 24rpx;
color: #1A1A1A;
line-height: 26rpx;
margin-top: 10rpx;
white-space: nowrap;
}
}
.more {
flex-shrink: 0;
}
}
.orange {
color: #FE6306 !important;
}
</style>
<style>
@import "/common/main.css";
page {
background-color: #F1F5F8;
}
</style>

View File

@ -345,6 +345,14 @@
</view>
</view>
</view>
<!-- 水印 -->
<view v-if="$isVip()">
<watermark dark="light" source="uni_alipay_shopping_taobao" />
<liu-drag-button :canDocking="false" @clickBtn="$goRechargePage('watermark', 'uni_alipay_shopping_taobao')">
<c-lottie ref="cLottieRef" :src='$watermark()' width="94px" height='74px' :loop="true"></c-lottie>
</liu-drag-button>
</view>
</template>
<script setup>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 288 KiB

After

Width:  |  Height:  |  Size: 294 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 302 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB