Bläddra i källkod

Signed-off-by: 1004749546@qq.com <1004749546@qq.com>
订单列表修改

1004749546@qq.com 4 år sedan
förälder
incheckning
aa8c599f53
2 ändrade filer med 466 tillägg och 131 borttagningar
  1. 448 130
      pages/order/order.vue
  2. 18 1
      uni.scss

+ 448 - 130
pages/order/order.vue

@@ -1,178 +1,496 @@
 <template>
-	<view class="order-pages">
-		<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="reachBottom">
-			<view class="order-list">
-				<view v-for="item in list" :key="item.id" class="order-list-item" @click="goView(item)">
-					<view>
-						<view>{{item.storeName}}</view>
-						<view :class="item.orderStatus">{{getOptionName(orderStatusList,item.orderStatus)}}</view>
-					</view>
-					<view>
-						<view class="order-carNo">{{item.customerMobile}}</view>
-						<u-icon name="arrow-right" color="#666" size="28"></u-icon>
-					</view>
-					<view>
-						<view class="order-price">
-							<!-- 显示用户实付金额,未支付显示0 -->
-							<text>¥{{item.payStatus=='PAID' ?item.paymentAmount:0}}</text>
-							<text>{{item.payType}}</text>
-						</view>
-						<view>{{item.orderTime}}</view>
-					</view>
-				</view>
-			</view>
-			<u-empty :text="noDataText" img-width="120" v-if="list.length==0 && status!='loading'" mode="list"></u-empty>
-			<view style="padding: 20upx;">
-				<u-loadmore v-if="count>pageSize || status=='loading'" :status="status" />
+	<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>
-		</scroll-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="check-row">
+								<view class="createDate">{{item.createDate}}</view>
+								<view >{{item.orderFlag}}</view>
+							</view>
+							<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 class="check-row">
+								<view class="text-right">
+									<text class="total-text">
+										共{{item.totalNum}}件商品
+									</text>
+									<text v-if="item.orderFlag=='待支付'"><text class="money-total">应付</text><b class="price-num">{{item.amount}}</b> <text class="price-text">乐豆</text></text>
+									<text v-else><text class="money-total">实付</text><b class="price-num">{{item.payedAmount}}</b> <text class="price-text">乐豆</text></text>
+								</view>
+							</view>
+							<view class="check-row">
+								<view v-if="item.orderFlag=='待支付'" class="text-right">
+									<text style="margin-right: 30upx;">支付剩余1天45分</text>
+									<u-button class="btn-cont" shape="circle" type="warning" size="medium">去支付</u-button>
+								</view>
+								<view v-if="item.orderFlag=='待发货'" class="text-right">
+									<u-button class="btn-cont" shape="circle" size="medium">提醒发货</u-button>
+								</view>
+								<view v-if="item.orderFlag=='已发货'" class="text-right">
+									<u-button class="btn-cont" style="margin-right: 20upx;" shape="circle" size="medium">查看物流</u-button>
+									<u-button class="btn-cont" shape="circle" type="primary" size="medium">确认收货</u-button>
+								</view>
+								<view v-if="item.orderFlag=='已完成'" class="text-right">
+									<u-button class="btn-cont" shape="circle" size="medium">查看物流</u-button>
+								</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>
+		<!-- 待办单查询弹框 -->
+		<!-- <search-modal :visible="showSearch" @refresh="refresh" @close="showSearch=false"></search-modal> -->
 	</view>
 </template>
 
 <script>
-	import {getOrderList, orderDetail} from '@/api/order.js'
+	// import {
+	// 	getBackLogList
+	// } from '@/api/backLog.js'
+	import {
+		getLookUpDatas,
+		listLookUp
+	} from '@/api/data'
+	// import searchModal from './searchModal.vue'
 	export default {
+		components: {
+			// searchModal
+		},
 		data() {
 			return {
+				showSearch: false, // 是否显示搜索弹框
+				searchParams: {}, // 全部查询数据参数
+				status: 'loadmore',
 				noDataText: '暂无数据',
-				status: 'loading',
-				list:[],
-				pageNo:1,
-				pageSize:10,
-				count:0,
-				orderStatusList: []
+				background: {
+					// 渐变色
+					backgroundImage: 'linear-gradient(45deg, rgb(85, 170, 255), rgb(21, 102, 223))'
+				},
+				tabList: [
+					{
+						dispName: '全部',
+						typeId: 2,
+						queryLabel: 'ALL' // tab参数
+					},
+					{
+						dispName: '待支付',
+						typeId: 1,
+						queryLabel: 'DZF' // tab参数
+					},
+					{
+						dispName: '待发货',
+						typeId: 3,
+						queryLabel: 'DFH' // tab参数
+					},
+					{
+						dispName: '已发货',
+						typeId: 3,
+						queryLabel: 'YFH' // tab参数
+					},
+					{
+						dispName: '已完成',
+						typeId: 3,
+						queryLabel: 'YWC' // tab参数
+					},
+					
+				],
+				current: 0,
+				swiperCurrent: 0,
+				pageNo: 1,
+				pageSize: 10,
+				list: [],
+				total: 0,
+				action: 'swiperChange', // 操作类型,上划分页,或左右滑动
 			}
 		},
-		onShow() {
+		onLoad() {
+			if (this.$hasPermissions("B_todoList_new_mobile")) {
+				// #ifdef APP-PLUS
+				// 设置标题栏按钮
+				let currentWebview = this.$scope.$getAppWebview();
+				currentWebview.setTitleNViewButtonStyle(0, {
+					text: '\ue610 新增',
+					fontSize: 16,
+					color: '#eee',
+					width: '80px',
+					fontSrc: '/static/iconfont/iconfont.ttf'
+				});
+				// #endif
+			}
+			// 监听新增后刷新
+			uni.$on('refreshBL', this.refresh)
+			// 监听待办处理后刷新
+			uni.$on('refreshBl-handle', this.handleRefresh)
 			this.pageInit()
 		},
+		onUnload() {
+			uni.$off('refreshBL', this.refresh)
+			uni.$off('refreshBl-handle', this.handleRefresh)
+		},
 		methods: {
-			pageInit () {
+			pageInit() {
+				this.sortIndex = 1
+				this.searchParams = {}
 				this.pageNo = 1
-				this.count = 0
-				this.list = []
-				this.orderStatusList = this.$store.state.vuex_payStatus
-				this.getList()
+				this.getRow()
 			},
-			getOptionName (list,val) {
-			  let p = list.find((item) => {
-				  return item.code == val
-			  })
-			  return p ? p.dispName : '-'
+			handleRefresh() {
+				this.getRow()
 			},
-			// 获取订单列表
-			getList() {
-				this.status = "loading"
-				let payTypeList = this.$store.state.vuex_payType
+			// 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,
+					itemList: [
+						{
+							name: "八九箭冠",
+							id: 76435,
+							number: 1,
+							price: 150,
+							icon: ''
+						},
+						{
+							name: "数据库的合法身份觉得很附近发生纠纷解决",
+							id: 76436,
+							number: 2,
+							price: 150,
+							icon: ''
+						}
+					]
+				},{
+					createDate: "2020-10-29 11:15:59",
+					orderFlag: "待发货",
+					payedAmount: 300,
+					id: 112,
+					amount: 300,
+					totalNum: 2,
+					itemList: [
+						{
+							name: "捐款事件的看法教科书上的发货角度思考JFK就是的JFK即将开放的",
+							id: 76440,
+							number: 2,
+							price: 150,
+							icon: ''
+						}
+					]
+				},{
+					createDate: "2020-10-29 11:15:59",
+					orderFlag: "已发货",
+					payedAmount: 300,
+					id: 1112,
+					amount: 300,
+					totalNum: 2,
+					itemList: [
+						{
+							name: "捐款事件的看法教科书上的发货角度思考JFK就是的JFK即将开放的",
+							id: 76420,
+							number: 2,
+							price: 150,
+							icon: ''
+						}
+					]
+				},{
+					createDate: "2020-10-29 11:15:59",
+					orderFlag: "已完成",
+					payedAmount: 300,
+					id: 1126,
+					amount: 300,
+					totalNum: 2,
+					itemList: [
+						{
+							name: "捐款事件的看法教科书上的发货角度思考JFK就是的JFK即将开放的",
+							id: 76496,
+							number: 2,
+							price: 150,
+							icon: ''
+						}
+					]
+				}]
+				return 
+				if (pageNo) {
+					this.pageNo = pageNo
+				}
 				let params = {
 					pageNo: this.pageNo,
-					pageSize: this.pageSize
+					pageSize: this.pageSize,
+					queryLabel: this.tabList[this.current].queryLabel, // tab分类
 				}
-				getOrderList(params).then(res=>{
-					this.status = "loadmore"
-					if(res.status == 200) {
-						let list = res.data.list
-						list.map(item => {
-							item.payType = item.payType ? this.getOptionName(payTypeList,item.payType) : ''
-						})
-						this.list = this.list.concat(list)
-						this.count = res.data.count
+				if (params.queryLabel == 'ALL') {
+					params.statusList = this.searchParams.status ? this.searchParams.status : [] // 状态(pending 待整改 check_pending待审核 finished 整改完成 expired 已过期)
+					params.sourceTypeList = this.searchParams.sourceType ? this.searchParams.sourceType : [] // 问题来源(远程巡店 VIDEO_INSPECTION /现场巡店 SPOT_INSPECTION/点检 POINT_INSPECTION /手动创建  MANUAL)
+					params.putUserName = this.searchParams.putUserName ? this.searchParams.putUserName : '' // 巡店人
+					params.storeName = this.searchParams.storeName ? this.searchParams.storeName : '' // 门店名称
+					params.beginDate = this.searchParams.beginDate ? this.searchParams.beginDate : '' // 发起开始时间
+					params.endDate = this.searchParams.endDate ? this.searchParams.endDate : '' // 发起结束时间
+				}
+				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.count = 0
+						this.total = 0
 						this.noDataText = res.message
 					}
+					this.status = "loadmore"
 				})
 			},
-			// 查看详情
-			goView(item){
+			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)
+			},
+			// 新增页
+			onNavigationBarButtonTap(e) {
 				uni.navigateTo({
-					url:"/pages/order/orderDetail?id="+item.id
+					url: "/pages/toDoList/addBacklog"
 				})
 			},
-			// 滚动到底部自动加载下页
-			reachBottom() {
-				if(this.list.length < this.count){
-					this.pageNo += 1
-					this.getList()
-				}else{
-					this.status = "nomore"
+			// 详细页
+			viewRow(item) {
+				if (!this.$hasPermissions('M_backlog_detail_mobile')) {
+					return
+				}
+				// 已完成的
+				uni.navigateTo({
+					url: "/pages/toDoList/backlogDetail?id=" + item.id
+				})
+			},
+			// 状态颜色处理
+			clsStatus(status) {
+				if (status == '待审核') {
+					return 'dsh'
+				}
+				if (status == '待整改') {
+					return 'dzg'
+				}
+				if (status == '整改完成') {
+					return 'ywc'
+				}
+				if (status == '已过期') {
+					return 'ygq'
 				}
 			}
-		},
-		
+		}
 	}
 </script>
 
 <style lang="scss">
-	page{
+	page {
 		height: 100%;
-	}
-	.order-pages{
 		width: 100%;
+		background: #F8F8F8;
+	}
+
+	.pagesCons {
 		height: 100%;
-		.scroll-Y {
-			width: 100%;
-			height: 100%;
-			.order-list{
-				padding: 25rpx;
-				.order-list-item{
-					box-shadow: 1rpx 1rpx 5rpx #eee;
-					border: 1px solid #eee;
-					border-radius: 10rpx;
-					margin: 30rpx 0;
-					> view{
-						padding:20rpx 30rpx;
-						display: flex;
-						align-items: center;
-						border-bottom: 1px dashed #eee;
-						&:last-child{
-							border: 0;
-						}
-						>view{
-							&:first-child{
-								flex-grow: 1;
-							}
-							&:last-child{
-								padding-left: 15rpx;
-							}
-						}
-						.FINISHED{
-							color: #00aa00;
-						}
-						.UN_PAY{
-							color: #ff0000;
-						}
-						.CANCELED{
-							color: #7e7b88;
-						}
-						.PAID{
-							color: #00aaff;
-						}
-						.REFUNDING{
-							color: #00557f;
+		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;
 						}
-						.REFUNDED{
-							color: #005500;
+					}
+
+					&:last-child {
+						border-top: 1px dashed #F8F8F8;
+					}
+
+					>view {
+						&:first-child {
+							flex: 1;
 						}
-						.order-carNo{
-							font-size: 32rpx;
+					}
+				}
+				// 订单中商品列表
+				.bundle-list {
+					display: flex;
+					padding: 20upx 10upx;
+					font-size: 28upx;
+					.img-cont {
+						width: 160upx;
+						height: 160upx;
+						>image {
+							width: 100%;
+							height: 100%;
 						}
-						.order-price{
-							text{
-								margin-right: 20rpx;
-								color: #666;
-								&:first-child{
-									color: red;
-									font-size: 32rpx;
-								}
-							}
+					}
+					>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;
+					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;
 				}
-			}
-			.u-empty.data-v-6938e513{
-				height: 90%;
 			}
 		}
 	}

+ 18 - 1
uni.scss

@@ -74,4 +74,21 @@ $uni-font-size-title:40rpx;
 $uni-color-subtitle: #555555; // 二级标题颜色
 $uni-font-size-subtitle:36rpx;
 $uni-color-paragraph: #3F536E; // 文章段落颜色
-$uni-font-size-paragraph:30rpx;
+$uni-font-size-paragraph:30rpx;
+
+/* 显示一行省略号 */
+.ellipsis-one{
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	word-break: break-all;
+}
+/* 显示两行,省略号 */
+.ellipsis-two{
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	line-clamp: 2;
+	-webkit-box-orient: vertical;
+}