Selaa lähdekoodia

Signed-off-by: 1004749546@qq.com <1004749546@qq.com>
增加物流信息页面

1004749546@qq.com 4 vuotta sitten
vanhempi
commit
ff52f340f6
3 muutettua tiedostoa jossa 420 lisäystä ja 8 poistoa
  1. 6 0
      pages.json
  2. 414 0
      pages/order/LogList.vue
  3. 0 8
      pages/order/order.vue

+ 6 - 0
pages.json

@@ -33,6 +33,12 @@
 				"navigationBarTitleText": "订单详情"
 			}
 		}, 
+		{
+			"path": "pages/order/LogList",
+			"style": {
+				"navigationBarTitleText": "物流信息"
+			}
+		}, 
 		{
 			"path": "pages/agreement/agreement",
 			"style": {

+ 414 - 0
pages/order/LogList.vue

@@ -0,0 +1,414 @@
+<template>
+	<view class="pagesCons">
+		<view class="tab-body">
+			<view class="uTabs">
+				<u-tabs-swiper ref="uTabs" :list="tabList" name="dispName" :current="current" @change="tabsChange" :is-scroll="false"
+				 swiperWidth="750"></u-tabs-swiper>
+			</view>
+			<swiper class="check-list" :current="swiperCurrent" @transition="transition" @change="swiperChange" @animationfinish="animationfinish">
+				<swiper-item class="swiper-item" v-for="(tabs, index) in tabList" :key="index">
+					<scroll-view scroll-y class="scroll-view" @scrolltolower="onreachBottom">
+						<view class="check-order-list" v-if="index==current" v-for="(item,sindex) in list" :key="item.id+'-'+sindex"
+						 @click="viewRow(item)">
+							<view class="order-log">
+								<view>
+									快递公司:<text class="address-title">{{item.logName}}</text>
+									<u-button class="btn-cont" @click="copyLogNum" style="float: right;" type="primary" shape="circle" size="mini">确认收货</u-button>
+								</view>
+								<view>
+									<text>运单编号:</text>
+									<text>{{item.logNum}}</text>
+									<u-button @click="copyLogNum" style="margin-left: 20upx;" shape="square" size="mini">复制</u-button>
+								</view>
+							</view>
+							<u-gap height="10" bg-color="#f8f8f8"></u-gap>
+							<view class="bundle-list" v-for="row in item.itemList" :key="row.id">
+								<view class="img-cont">
+									<image :src="row.icon?row.icon:'../../static/tabbar/user.png'"></image>
+								</view>
+								<view >
+									<view class="ellipsis-two">{{row.name}}</view>
+									<view class="bundle-num">
+										<view ><b class="price-num">{{row.price}}</b> <text class="price-text">乐豆</text></view>
+										<view >X {{row.number}}</view>
+									</view>
+								</view>
+							</view>
+						</view>
+						<u-empty style="padding-top: 10vh;height: auto;" :text="noDataText" img-width="120" v-if="list.length==0 && status!='loading'"
+						 mode="list"></u-empty>
+						<view v-if="index==current" style="padding: 20upx;">
+							<u-loadmore v-if="total>pageSize || status=='loading'" :status="status" />
+						</view>
+					</scroll-view>
+				</swiper-item>
+			</swiper>
+		</view>
+		 <!-- 查看物流弹窗 -->
+		<view>
+			<u-modal v-model="isShow" :show-title="false" confirm-text="好的">
+				<view class="slot-content">
+					<view>
+						快递公司:{{logData.logName}}
+					</view>
+					<view>
+						运单编号:{{logData.logNum}}
+						<u-button @click="copyLogNum" style="margin-left: 20upx;" shape="square" size="mini">复制</u-button>
+					</view>
+				</view>
+			</u-modal>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		getLookUpDatas,
+		listLookUp
+	} from '@/api/data'
+	export default {
+		components: {
+		},
+		data() {
+			return {
+				isShow: false, // 是否显示物流弹框
+				status: 'loadmore',
+				noDataText: '暂无数据',
+				tabList: [
+					{
+						dispName: '包裹1',
+						typeId: 1,
+						queryLabel: 'DZF' // tab参数
+					},
+					{
+						dispName: '包裹2',
+						typeId: 3,
+						queryLabel: 'DFH' // tab参数
+					},
+					{
+						dispName: '待发货',
+						typeId: 3,
+						queryLabel: 'YFH' // tab参数
+					},
+				],
+				current: 0,
+				swiperCurrent: 0,
+				pageNo: 1,
+				pageSize: 10,
+				list: [],
+				logData: { // 物流信息
+					logName: '韵达快递',
+					logNum: 12356544544
+				},
+				total: 0,
+				action: 'swiperChange', // 操作类型,上划分页,或左右滑动
+			}
+		},
+		onLoad() {
+			// 监听待办处理后刷新
+			uni.$on('refreshBl-handle', this.handleRefresh)
+			this.pageInit()
+		},
+		onUnload() {
+			uni.$off('refreshBL', this.refresh)
+			uni.$off('refreshBl-handle', this.handleRefresh)
+		},
+		methods: {
+			pageInit() {
+				this.sortIndex = 1
+				this.pageNo = 1
+				this.getRow()
+			},
+			handleRefresh() {
+				this.getRow()
+			},
+			// tabs通知swiper切换
+			tabsChange(index) {
+				this.swiperCurrent = index;
+			},
+			swiperChange(event) {
+				this.action = 'swiperChange'
+				this.status = 'loading'
+			},
+			// swiper-item左右移动,通知tabs的滑块跟随移动
+			transition(e) {
+				let dx = e.detail.dx;
+				this.$refs.uTabs.setDx(dx);
+			},
+			// 由于swiper的内部机制问题,快速切换swiper不会触发dx的连续变化,需要在结束时重置状态
+			// swiper滑动结束,分别设置tabs和swiper的状态
+			animationfinish(e) {
+				let current = e.detail.current;
+				let isCurtab = this.current == current
+				if (this.status != "nomore") {
+					let loadData = this.action == 'swiperChange' ? !isCurtab : isCurtab;
+					if (loadData) {
+						this.$refs.uTabs.setFinishCurrent(current);
+						this.swiperCurrent = current;
+						this.current = current;
+						this.resetPage();
+					}
+				}
+			},
+			// scroll-view到底部加载更多
+			onreachBottom() {
+				this.action = 'onreachBottom'
+				if (this.list.length < this.total) {
+					this.pageNo += 1
+					this.getRow()
+				} else {
+					uni.showToast({
+						title: '已经到底了',
+						icon: 'none'
+					});
+					this.status = "nomore"
+				}
+			},
+			// 查询列表
+			getRow(pageNo) {
+				this.status = "loadmore"
+				this.list = [{
+					createDate: "2020-10-28 11:15:59",
+					orderFlag: "待支付",
+					payedAmount: 0,
+					id: 11,
+					amount: 450,
+					totalNum: 3,
+					logName: '韵达快递',
+					logNum: '12454545485',
+					itemList: [
+						{
+							name: "八九箭冠",
+							id: 76435,
+							number: 1,
+							price: 150,
+							icon: ''
+						},
+						{
+							name: "数据库的合法身份觉得很附近发生纠纷解决",
+							id: 76436,
+							number: 2,
+							price: 150,
+							icon: ''
+						}
+					]
+				}]
+				return 
+				if (pageNo) {
+					this.pageNo = pageNo
+				}
+				let params = {
+					pageNo: this.pageNo,
+					pageSize: this.pageSize,
+					queryLabel: this.tabList[this.current].queryLabel, // tab分类
+				}
+				this.status = "loading"
+				getBackLogList(params).then(res => {
+					if (res.status == 200) {
+						if (this.pageNo > 1) {
+							this.list = this.list.concat(res.data.list || [])
+						} else {
+							this.list = res.data.list || []
+						}
+						this.total = res.data.count || 0
+					} else {
+						this.list = []
+						this.total = 0
+						this.noDataText = res.message
+					}
+					this.status = "loadmore"
+				})
+			},
+			resetPage() {
+				this.status = 'loading';
+				// 上划分页
+				if (this.action == 'onreachBottom') {
+					this.getRow();
+				}
+				// 左右切换tab
+				if (this.action == 'swiperChange') {
+					this.list = [];
+					this.getRow(1);
+				}
+			},
+			// 获取查询参数 刷新列表
+			refresh(params) {
+				// console.log(params,'1111111111')
+				this.searchParams = params
+				this.getRow(1)
+			},
+			
+			// 复制运单编号 
+			copyLogNum () {
+				// H5 不支持
+				uni.setClipboardData({
+					data: this.logData.logNum,
+					success: function(res) {
+						uni.getClipboardData({
+							success: function(res) {
+								uni.showToast({
+									title: '已复制到剪贴板'
+								});
+							}
+						});
+					}
+				})
+			},
+			// 详细页
+			viewRow(item) {
+				// if (!this.$hasPermissions('M_backlog_detail_mobile')) {
+				// 	return
+				// }
+				// 已完成的
+				uni.navigateTo({
+					url: "/pages/order/orderDetail?id=" + item.id
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	page {
+		height: 100%;
+		width: 100%;
+		background: #F8F8F8;
+	}
+
+	.pagesCons {
+		height: 100%;
+		width: 100%;
+		background: #F8F8F8;
+		display: flex;
+		flex-direction: column;
+
+		.text-right {
+			text-align: right;
+		}
+
+		.tab-body {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+
+			.uTabs {
+				border-bottom: 1px solid #EEEEEE;
+				box-shadow: 1px 1px 3px #eeeeee;
+			}
+
+			.check-list {
+				flex: 1;
+				overflow-y: scroll;
+
+				.swiper-item {
+					width: 100%;
+					height: 100%;
+					overflow: hidden;
+
+					.scroll-view {
+						width: 100%;
+						height: 100%;
+						overflow: auto;
+					}
+				}
+			}
+			// 列表样式
+			.check-order-list {
+				background: #ffffff;
+				padding: 10upx 20upx;
+				margin: 25upx;
+				border-radius: 6upx;
+				box-shadow: 1px 1px 3px #EEEEEE;
+				font-size: 28upx;
+				.check-row {
+					display: flex;
+					align-items: center;
+					padding: 20upx 10upx;
+
+					.icon-xian {
+						text-align: right;
+						width: 40upx;
+					}
+
+					&:first-child {
+						border-bottom: 1px dashed #F8F8F8;
+
+						.createDate {
+							color: #666;
+							font-size: 26upx;
+							margin-left: 10upx;
+						}
+					}
+
+					&:last-child {
+						border-top: 1px dashed #F8F8F8;
+					}
+
+					>view {
+						&:first-child {
+							flex: 1;
+						}
+					}
+				}
+				// 订单中商品列表
+				.bundle-list {
+					display: flex;
+					padding: 20upx 10upx;
+					font-size: 28upx;
+					border-bottom: 1px solid #F8F8F8;
+					&:last-child {
+						border-bottom: none;
+					}
+					.img-cont {
+						width: 160upx;
+						height: 160upx;
+						>image {
+							width: 100%;
+							height: 100%;
+						}
+					}
+					>view {
+						&:last-child {
+							padding: 10upx 0;
+							flex: 1;
+							margin-left: 20upx;
+							display: flex;
+							flex-direction: column;
+							justify-content: space-between;
+						}
+					}
+					.bundle-num {
+						display: flex;
+						justify-content: space-between;
+					}
+				}
+				.btn-cont {
+					width: 180upx;
+					height: 60upx;
+					font-size: 30upx;
+				}
+				.price-text{
+					font-size: 20upx;
+					margin-left: 10upx;
+				}
+				.price-num{
+					font-size: 32upx;
+				}
+				.total-text{
+					margin-right: 50upx;
+				}
+				.money-total{
+					margin-right: 10upx;
+				}
+			}
+		}
+		// 物流弹窗
+		.order-log {
+			padding: 20upx ;
+			font-size: 28upx;
+			>view{
+				line-height: 60upx;
+			}
+		}
+	}
+</style>

+ 0 - 8
pages/order/order.vue

@@ -75,24 +75,16 @@
 				</view>
 			</u-modal>
 		</view>
-		
-		<!-- 待办单查询弹框 -->
-		<!-- <search-modal :visible="showSearch" @refresh="refresh" @close="showSearch=false"></search-modal> -->
 	</view>
 </template>
 
 <script>
-	// import {
-	// 	getBackLogList
-	// } from '@/api/backLog.js'
 	import {
 		getLookUpDatas,
 		listLookUp
 	} from '@/api/data'
-	// import searchModal from './searchModal.vue'
 	export default {
 		components: {
-			// searchModal
 		},
 		data() {
 			return {