init
This commit is contained in:
shuhongfan
@@ -0,0 +1,196 @@
|
||||
.maxHeight{
|
||||
height: 1170rpx;
|
||||
}
|
||||
.orderList{
|
||||
margin: 40rpx 30rpx 0;
|
||||
position: relative;
|
||||
bottom: 49rpx;
|
||||
::v-deep .scrollView{
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
//隐藏滚动条
|
||||
::v-deep ::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.title{
|
||||
font-size: 30rpx;
|
||||
color:#333334 ;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
.see-more{
|
||||
font-size: 24rpx;
|
||||
text-align: center;
|
||||
margin-top: 22rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.arrow{
|
||||
margin-left: 10rpx;
|
||||
margin-top: 4rpx;
|
||||
width: 12rpx;
|
||||
height: 18rpx;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-image: url('../../../static/icon15.png');
|
||||
}
|
||||
}
|
||||
.empty-data{
|
||||
.empty-data-image{
|
||||
width: 400rpx;
|
||||
height: 240rpx;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
}
|
||||
.tips{
|
||||
color: #818181;
|
||||
font-size: 28rpx;
|
||||
text-align: center;
|
||||
margin-top: 40rpx;
|
||||
margin-left: 25rpx;
|
||||
}
|
||||
}
|
||||
.notLogin{
|
||||
margin-top: 150rpx;
|
||||
.toLogin-btn{
|
||||
width: 240rpx;
|
||||
height: 88rpx;
|
||||
background: #E63E32;
|
||||
border-radius: 44rpx;
|
||||
color: white;
|
||||
font-size: 30rpx;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
line-height: 88rpx;
|
||||
}
|
||||
.tips{
|
||||
color:#6C6C6C ;
|
||||
font-size: 24rpx;
|
||||
text-align: center;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
}
|
||||
.order-item{
|
||||
position: relative;
|
||||
background: #FFFFFF;
|
||||
border-radius: 24rpx;
|
||||
padding:28rpx 32rpx 20rpx;
|
||||
margin-top: 20rpx;
|
||||
.orderNumber{
|
||||
font-size: 20rpx;
|
||||
color: #878787;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.copy{
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
.area-to-area{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top:40rpx ;
|
||||
margin-left: 42rpx;
|
||||
margin-right: 42rpx;
|
||||
margin-bottom: 20rpx;
|
||||
.sendBox,.getBox{
|
||||
text-align: center;
|
||||
.sendArea,.getArea{
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.sendName,.getName{
|
||||
font-size: 24rpx;
|
||||
color: #878787;
|
||||
}
|
||||
}
|
||||
.order-status{
|
||||
.status{
|
||||
font-size: 24rpx;
|
||||
color: #878787;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
.arrow{
|
||||
width: 160rpx;
|
||||
height: 20rpx;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
.green-arrow{
|
||||
background-image: url(data:image/png;base64,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);
|
||||
}
|
||||
.red-arrow{
|
||||
background-image: url(data:image/png;base64,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);
|
||||
}
|
||||
.gray-arrow{
|
||||
background-image: url('data:image/png;base64,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');
|
||||
}
|
||||
}
|
||||
}
|
||||
.order-detail{
|
||||
margin-top: 12rpx;
|
||||
overflow: hidden;
|
||||
border-bottom: 2rpx solid #F4F4F4;
|
||||
padding-bottom: 26rpx;
|
||||
.detail-item{
|
||||
overflow: hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 24rpx;
|
||||
margin-top: 12rpx;
|
||||
uni-text,text{
|
||||
color: #878787;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn-box{
|
||||
.btn{
|
||||
width: 144rpx;
|
||||
height: 56rpx;
|
||||
background: #FFFFFF;
|
||||
border: 2rpx solid #DDDDDD;
|
||||
border-radius: 28rpx;
|
||||
text-align: center;
|
||||
line-height: 56rpx;
|
||||
font-size: 24rpx;
|
||||
color:#303030 ;
|
||||
}
|
||||
.wait-pay{
|
||||
margin-top: 29rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
justify-content: space-between;
|
||||
.price{
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
uni-text,text{
|
||||
color: #E84134;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn-list{
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 19rpx;
|
||||
.btn{
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.paymentStatus{
|
||||
position: absolute;
|
||||
right: 29rpx;
|
||||
top: 27rpx;
|
||||
image{
|
||||
width: 76rpx;
|
||||
height: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,281 @@
|
||||
<template>
|
||||
<view class="orderList">
|
||||
<view v-if="!isLogin" class="notLogin">
|
||||
<view class="toLogin-btn" @click="toLogin">登录/注册</view>
|
||||
<view class="tips">登录后可查看快递信息</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view v-else-if="!allOrderList.data.length && isLogin" class="empty-data">
|
||||
<image src="../../../static/emptyData.png" class="empty-data-image"></image>
|
||||
<view class="tips">没有运单~</view>
|
||||
</view>
|
||||
<view v-else>
|
||||
<view class="title">运单信息</view>
|
||||
|
||||
<view class="order-item" v-for="(item,index) in allOrderList.data" :key="index"
|
||||
@click='handleToOrderInfo(event,item.id,item.transportOrderId)'>
|
||||
<view class="orderNumber">
|
||||
{{[23000,22000,230011].includes(item.status)?'订':'运'}}单号：{{[23000,22000,230011].includes(item.status)?item.id:item.transportOrderId}}
|
||||
<image src="../../../static/pickUp-copy.png" class="copy"
|
||||
@click.stop="handleCopy([23000,22000,230011].includes(item.status)?item.id:item.transportOrderId)">
|
||||
</image>
|
||||
</view>
|
||||
<view class="area-to-area">
|
||||
<view class="sendBox">
|
||||
<view class="sendArea">{{item.senderCity.name}}</view>
|
||||
<view class="sendName">{{item.senderName}}</view>
|
||||
</view>
|
||||
<view class="order-status">
|
||||
<view class="status">
|
||||
{{showOrderStatus(item.status)}}
|
||||
</view>
|
||||
<view class="arrow" :class="
|
||||
[[21000,23000,23001,23005,23008].includes(item.status)?'green-arrow':'',
|
||||
[23009,23010].includes(item.status)?'red-arrow':'',
|
||||
[230011,22000].includes(item.status)?'gray-arrow':'']
|
||||
"></view>
|
||||
</view>
|
||||
<view class="getBox">
|
||||
<view class="getArea">{{item.receiverCity.name}}</view>
|
||||
<view class="getName">{{item.receiverName}}</view>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="order-detail">
|
||||
<!-- 已取件运输信息 -->
|
||||
<view v-if="item.status ===23001 && item.transportOrderPointVOS" class="detail-item">
|
||||
<text>已取件：</text>
|
||||
{{ item.transportOrderPointVOS.length>0?item.transportOrderPointVOS[item.transportOrderPointVOS.length-1].info:''}}
|
||||
</view>
|
||||
<!-- 运输中信息 -->
|
||||
<view v-if="[23005,23008].includes(item.status) && item.transportOrderPointVOS" class="detail-item">
|
||||
<text>运送中：</text>{{ item.transportOrderPointVOS.length>0?item.transportOrderPointVOS[item.transportOrderPointVOS.length-1].info:''}}
|
||||
</view>
|
||||
<!-- 已签收 -->
|
||||
<view v-if="item.status ===23009 && item.transportOrderPointVOS" class="detail-item">
|
||||
<text>已签收：</text>{{ item.transportOrderPointVOS.length>0?item.transportOrderPointVOS[item.transportOrderPointVOS.length-1].info:''}}
|
||||
</view>
|
||||
<!-- 已拒收 -->
|
||||
<view v-if="item.status ===23010 && item.transportOrderPointVOS" class="detail-item">
|
||||
<text>已拒收：</text>{{ item.transportOrderPointVOS.length>0?item.transportOrderPointVOS[item.transportOrderPointVOS.length-1].info:''}}
|
||||
</view>
|
||||
<!-- 预计上门时间 -->
|
||||
<view v-if="item.status ===23000 " class="detail-item">
|
||||
<text>预计上门时间：</text>{{item.estimatedStartTime}}
|
||||
</view>
|
||||
<!-- 取消时间 -->
|
||||
<view v-if="item.status ===230011 " class="detail-item"><text>取消时间：</text>{{item.updated}}</view>
|
||||
<!-- 预计送达时间 -->
|
||||
<view v-if="[23001,23005,23008,23010].includes(item.status) " class="detail-item">
|
||||
<text>预计送达时间：</text>{{item.estimatedArrivalTime}}
|
||||
</view>
|
||||
<!-- 已关闭时间 -->
|
||||
<view v-if="item.status ===22000 " class="detail-item"><text>关闭时间：</text>{{item.updated}}</view>
|
||||
<!-- 签收时间 -->
|
||||
<view v-if="item.status ===23009 " class="detail-item"><text>签收时间：</text>{{item.updated}}</view>
|
||||
</view>
|
||||
<!-- 功能按钮区域 -->
|
||||
<view class="btn-box">
|
||||
<view class="btn-list" @click.stop="handleSecondQi">
|
||||
<view class="btn" v-if="[23000,23001,23005,23008,23010].includes(item.status)">分享</view>
|
||||
<view class="btn" v-if='item.status===23000' @click.stop="handleOrderCancel(item.id)">取消寄件
|
||||
</view>
|
||||
<view class="btn" v-if="[22000,230011,23009].includes(item.status)"
|
||||
@click.stop="handleOrderDelete(item.id)">删除</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="paymentStatus"
|
||||
v-if="item.paymentStatus && [23001,23005,23008,23009,23010].includes(item.status)">
|
||||
<image :src="item.paymentStatus===1?'../../../static/daizhifu.png':'../../../static/yizhifu.png'">
|
||||
</image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="see-more" @click="handleSeeMore">
|
||||
查看更多
|
||||
<view class="arrow"></view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 删除确认对话框 -->
|
||||
<uni-popup ref="popup" type="dialog" class='address-popup'>
|
||||
<uni-popup-dialog mode="base" :content="'确定是否删除此条订单？'" :animation='false' :before-close="true"
|
||||
@close="close" @confirm="confirm">
|
||||
|
||||
</uni-popup-dialog>
|
||||
</uni-popup>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
onMounted,
|
||||
} from 'vue';
|
||||
import {
|
||||
getOrderList,
|
||||
deleteOrder
|
||||
} from '@/pages/api/order.js'
|
||||
import {
|
||||
onShow,
|
||||
} from '@dcloudio/uni-app';
|
||||
import {
|
||||
handleSecondQi
|
||||
} from '@/utils/index.js'
|
||||
import {
|
||||
useStore
|
||||
} from 'vuex';
|
||||
const store = useStore(); //vuex获取、储存数据
|
||||
const emits = defineEmits(["@stopRefresh"]);
|
||||
let pageInfo = reactive({
|
||||
page: 1,
|
||||
pageSize: 10
|
||||
})
|
||||
let status = ref('more') //加载状态
|
||||
let scrollTop = ref(0) //顶部位置
|
||||
let allOrderList = reactive({
|
||||
data: []
|
||||
})
|
||||
let orderId = ref()
|
||||
let isLogin = ref('')
|
||||
let popup = ref(null)
|
||||
//关闭删除确认提示框
|
||||
const close = () => {
|
||||
popup.value.close()
|
||||
orderId.value = ''
|
||||
}
|
||||
onShow((options) => {
|
||||
isLogin.value = uni.getStorageSync('token')
|
||||
console.log(!isLogin, (!allOrderList.data.length && isLogin.value), '6666')
|
||||
})
|
||||
onMounted(() => {
|
||||
getOrderListFunc()
|
||||
})
|
||||
//复制
|
||||
const handleCopy = (value) => {
|
||||
uni.setClipboardData({
|
||||
data: value,
|
||||
showToast: false,
|
||||
success: () => {
|
||||
uni.hideToast(); // 隐藏弹出提示
|
||||
uni.hideKeyboard(); // 隐藏软键盘
|
||||
uni.showToast({
|
||||
title: '复制成功',
|
||||
icon: 'success',
|
||||
duration: 1000
|
||||
})
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
//确认删除订单
|
||||
const confirm = () => {
|
||||
popup.value.close()
|
||||
deleteOrder(orderId.value).then((res) => {
|
||||
pageInfo.page = 1
|
||||
pageInfo.pageSize = 10
|
||||
getOrderListFunc()
|
||||
uni.showToast({
|
||||
title: '删除成功',
|
||||
icon: 'success',
|
||||
duration: 1000
|
||||
})
|
||||
}).catch((err) => {
|
||||
uni.showToast({
|
||||
title: '网络异常',
|
||||
duration: 2000,
|
||||
icon: 'none'
|
||||
});
|
||||
})
|
||||
}
|
||||
//删除订单
|
||||
const handleOrderDelete = (id) => {
|
||||
orderId.value = id
|
||||
popup.value.open()
|
||||
}
|
||||
//跳转到取消订单页面
|
||||
const handleOrderCancel = (id) => {
|
||||
uni.navigateTo({
|
||||
url: '/subPages/order-cancel/index?orderId=' + id
|
||||
})
|
||||
}
|
||||
const toLogin = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/login/index'
|
||||
})
|
||||
}
|
||||
const getOrderListFunc = (flag) => {
|
||||
status.value = 'loading'
|
||||
getOrderList({
|
||||
page: pageInfo.page,
|
||||
pageSize: pageInfo.pageSize,
|
||||
}).then((res) => {
|
||||
console.log(res, 'getOrderListFunc')
|
||||
if (res.data) {
|
||||
allOrderList.data = res.data.items ? res.data.items.slice(0, 3) : []
|
||||
}
|
||||
})
|
||||
}
|
||||
//查看更多
|
||||
const handleSeeMore = () => {
|
||||
uni.switchTab({
|
||||
url: '/pages/pickup/index'
|
||||
})
|
||||
}
|
||||
|
||||
//根据状态去显示对应的运单状态文案
|
||||
const showOrderStatus = (status) => {
|
||||
switch (status) {
|
||||
case 21000:
|
||||
return '待支付';
|
||||
case 23000:
|
||||
return '待取件';
|
||||
case 230011:
|
||||
return '已取消';
|
||||
case 23001:
|
||||
return '已取件';
|
||||
case 23005:
|
||||
return '运送中';
|
||||
case 22000:
|
||||
return '已关闭';
|
||||
case 23008:
|
||||
return '派送中';
|
||||
case 23009:
|
||||
return '已签收';
|
||||
case 23010:
|
||||
return '已拒收';
|
||||
}
|
||||
}
|
||||
//跳转到订单详情页面
|
||||
const handleToOrderInfo = (event, id, transportOrderId) => {
|
||||
uni.navigateTo({
|
||||
url: '/subPages/order-info/index?orderId=' + id + '&transportOrderId=' + transportOrderId
|
||||
});
|
||||
store.commit('user/setIsToOrderInfo', true)
|
||||
}
|
||||
|
||||
//下拉加载更多
|
||||
const LoadMoreCustomers = () => {
|
||||
if (status.value === 'no-more') {
|
||||
return
|
||||
}
|
||||
pageInfo.page = pageInfo.page + 1
|
||||
getOrderListFunc('topPull')
|
||||
}
|
||||
//
|
||||
const indexGetOrderListFunc = () => {
|
||||
pageInfo.page = 1
|
||||
getOrderListFunc()
|
||||
}
|
||||
// 暴漏给父组件
|
||||
defineExpose({
|
||||
indexGetOrderListFunc,
|
||||
LoadMoreCustomers
|
||||
});
|
||||
</script>
|
||||
|
||||
<style src="./orderList.scss" lang="scss" scoped></style>
|
||||
68
project-wl-yonghuduan-uniapp-vue3/pages/index/index.scss
Normal file
68
project-wl-yonghuduan-uniapp-vue3/pages/index/index.scss
Normal file
@@ -0,0 +1,68 @@
|
||||
@import url('@/styles/theme.scss');
|
||||
.scrollView{
|
||||
background-color: #F3F5F9 !important;
|
||||
height: 100vh;
|
||||
}
|
||||
.homePage{
|
||||
background-color: #F3F5F9 !important;
|
||||
position: relative;
|
||||
// padding-bottom: 30rpx;
|
||||
min-height: 100vh;
|
||||
image{
|
||||
width: 100%;
|
||||
height: 400rpx;
|
||||
}
|
||||
.feature-top{
|
||||
height: 80rpx;
|
||||
margin: 0 28rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 24rpx;
|
||||
display: flex;
|
||||
padding: 48rpx;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
bottom: 48rpx;
|
||||
.feature-top-line{
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
height: 114rpx;
|
||||
background-color:#F4F4F4 ;
|
||||
width: 2rpx;
|
||||
}
|
||||
}
|
||||
.jikuaidi,.saomaji,.piliangji,.saomaji{
|
||||
display: flex;
|
||||
image{
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
.des-title{
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #151515;
|
||||
}
|
||||
.des-dec{
|
||||
font-size: 22rpx;
|
||||
color: #878787;
|
||||
}
|
||||
}
|
||||
.feature-bottom{
|
||||
display: flex;
|
||||
padding: 20rpx 32rpx;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
bottom: 49rpx;
|
||||
.piliangji,.saomaji{
|
||||
height:128rpx ;
|
||||
width: 334rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
91
project-wl-yonghuduan-uniapp-vue3/pages/index/index.vue
Normal file
91
project-wl-yonghuduan-uniapp-vue3/pages/index/index.vue
Normal file
@@ -0,0 +1,91 @@
|
||||
<!-- 首页 -->
|
||||
<template>
|
||||
<view class="homePage">
|
||||
<!-- banner图 -->
|
||||
<image src='../../static/tupian-banner.png' />
|
||||
<!-- 功能列表 -->
|
||||
<!-- 寄快递和扫码寄 -->
|
||||
<view class="feature-top">
|
||||
<view class="jikuaidi" @click="toExpressDelivery">
|
||||
<image src='../../static/fe-jikuaidi.png' />
|
||||
<view class="des">
|
||||
<view class="des-title">寄快递</view>
|
||||
<view class="des-dec">1小时上门取件</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="feature-top-line"></view>
|
||||
<view class="saomaji" @click="handleSecondQi">
|
||||
<image src='../../static/fe-saomaji.png' />
|
||||
<view class="des">
|
||||
<view class="des-title">扫码寄</view>
|
||||
<view class="des-dec">扫二维码下单</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 批量寄和礼物寄 -->
|
||||
<view class="feature-bottom">
|
||||
<view class="piliangji" @click="handleSecondQi">
|
||||
<image src='../../static/fe-piliangji.png' />
|
||||
<view class="des">
|
||||
<view class="des-title">批量寄</view>
|
||||
<view class="des-dec">便捷寄多个快递</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="saomaji" @click="handleSecondQi">
|
||||
<image src='../../static/fe-liwuji.png' />
|
||||
<view class="des">
|
||||
<view class="des-title">礼物寄</view>
|
||||
<view class="des-dec">保留神秘寄</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 运单列表 -->
|
||||
<OrderList ref='orderListRef' @stopRefresh="stopRefreshFunc"></OrderList>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref
|
||||
} from 'vue';
|
||||
import {
|
||||
onShow,
|
||||
onPullDownRefresh,
|
||||
} from '@dcloudio/uni-app';
|
||||
import {
|
||||
handleSecondQi
|
||||
} from '@/utils/index.js'
|
||||
//运单列表
|
||||
import OrderList from './components/orderList';
|
||||
import {
|
||||
useStore
|
||||
} from 'vuex';
|
||||
const store = useStore(); //vuex获取、储存数据
|
||||
const users = store.state.user
|
||||
let orderListRef = ref()
|
||||
// ------定义变量------
|
||||
onShow(() => {
|
||||
// if (users.isToOrderInfo) {
|
||||
// store.commit('user/setIsToOrderInfo', false)
|
||||
// } else {
|
||||
// orderListRef.value && orderListRef.value.indexGetOrderListFunc()
|
||||
// }
|
||||
orderListRef.value && orderListRef.value.indexGetOrderListFunc()
|
||||
})
|
||||
// ------生命周期------
|
||||
onPullDownRefresh(() => {
|
||||
orderListRef.value.indexGetOrderListFunc()
|
||||
});
|
||||
//
|
||||
const stopRefreshFunc = () => {
|
||||
uni.stopPullDownRefresh();
|
||||
}
|
||||
//跳转到寄快递页面
|
||||
const toExpressDelivery = () => {
|
||||
uni.navigateTo({
|
||||
url: uni.getStorageSync('token') ? '/pages/express-delivery/index' : '/pages/login/index'
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
<style src="./index.scss" lang="scss" scoped></style>
|
||||
Reference in New Issue
Block a user