hxj/src/pages/sale/mySaleOrder.vue

<template>
	<!-- <app-layout :haveBackground="false"> -->
	<app-layout >
	<view class="page">
		<!-- <view style="background-color: #fff;position: fixed;top: 0;width: 100%;"> -->
		<view class="main-left cross-center search">
			<image src="https://t17.9026.com/web/statics/image/index/search.png" mode=""></image>
			<input style="width: 560rpx;" type="text" value="" placeholder="搜索客户、商品、时间、订单号" v-model="keyword"
				placeholder-style="font-size:28rpx;color:#999;" />
		</view>
		<view style="background-color: #fff;position: sticky;top: 0;width: 100%;">
			<AppDropdownMenu :size="28" :selectedColor="getTheme.color" :checkboxColor="getTheme.color"
				:options="options[selectIndex]" :minWidth="750" @click="rangeItemClick" @close="rangeClose"
				ref="ddmRange">
				<view class="main-between">
					<view class="fui-filter__item" @tap="filterTap(0)">
						<text>{{range}}</text>
						<view class="fui-filter__icon cross-center" :class="{'fui-icon__ani':rangeShow}">
							<image style="width: 16rpx;height: 9rpx;margin:0 11rpx;"
								src="https://t17.9026.com/web/statics/image/index/arrow-down-bottom.png" mode="">
							</image>
						</view>
					</view>
					<view class="fui-filter__item" @tap="filterTap(1)">
						<text>{{range1}}</text>
						<view class="fui-filter__icon cross-center" :class="{'fui-icon__ani':rangeShow1}">
							<image style="width: 16rpx;height: 9rpx;margin:0 11rpx;"
								src="https://t17.9026.com/web/statics/image/index/arrow-down-bottom.png" mode="">
							</image>
						</view>
					</view>
				</view>
			</AppDropdownMenu>
		</view>
		<!-- </view> -->

		<view class="list">
			<view class="box" v-for="(item,index) in dataList" :key="index">
				<view class="main-between cross-center header">
					<view class="cross-center head" :class="{'border_bottom':true}">
						<image :src="item.user.avatar" mode=""></image>
						{{item.user.nickname}}{{item.user.estate_name?`-${item.user.estate_name}`:''}}
					</view>
					<!-- <view class="cross-center head1">
						<image src="https://t17.9026.com/web/statics/image/sale/1.png" mode=""></image>
						客户楼盘绑定通知
					</view> -->
					<view class="main-between cross-center">
						<view class="date">交易成功</view>
						<image class="del" src="https://t17.9026.com/web/statics/image/user-center/del.png" mode="">
						</image>
					</view>
				</view>
				<view class="center">
					<view class="main-between goods" v-for="(goods,index1) in item.detail" :key="index1" @click="$jump({open_type:'navigate',url:'/pages/goods/goods?id='+goods.id})">
						<view class="main-left desc">
							<image class="goods-img" :src="goods.goods_info.pic_url"
								mode=""></image>
							<view>
								<view class="title t-omit-two">{{goods.goods_info.name}}</view>
								<view class="main-between price">
									<view>
										<text class="company">￥</text>
										<text>{{goods.unit_price}}</text>
									</view>
									<view>
										x{{goods.num}}
									</view>
								</view>
							</view>
						</view>
						<!-- 	<view class="isopen cross-center">
							收起
							<image src="https://t17.9026.com/web/statics/image/user-center/arrow-top.png" mode=""></image>
						</view> -->
					</view>
					<view class="main-between cross-bottom total_pay">
						<view class="order_number">订单号:{{item.order_no}}</view>
						<view><text>应付总</text><text>￥</text><text>{{item.total_price}}</text></view>
					</view>
				</view>
				<view class="main-between footer cross-center border_top">
					<template>
						<view class="date">{{item.updated_at.split(' ')[0]}}</view>
						<view class="main-around">
							<!-- <view class="kbtn">上传发票</view> -->
							<view class="kbtn">再次购买</view>
							
							<view class="kbtn" @click="$jump({open_type:'navigate',url:'/pages/order/express-detail/express-detail'})">查看物流</view>
						</view>
					</template>
					<!-- <template v-if="false">
						<view class="left">查看详情</view>
						<image style="width: 12rpx;height: 22rpx;"
							src="https://t17.9026.com/web/statics/image/index/arrow-right-gray.png" mode=""></image>
					</template> -->
				</view>
			</view>
			<view class="no-more" v-if="isNoMore">没有更多了...</view>
			<app-no-goods v-if="dataList.length===0" :title="'暂无数据'" background="#f7f7f7"></app-no-goods>
		</view>
		<template>
			<view class="safe-area-inset-bottom">
				<view :style="{height: '110rpx'}" class="nav-margin "
					:class="haveBackground ? 'app-layout-background' : ''"></view>
			</view>
			<app-tab-bar :page-count="0"></app-tab-bar>
		</template>
	</view>
	</app-layout>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from 'vuex'
	import AppTabBar from '@/components/basic-component/app-tab-bar/app-tab-bar.vue';
	import AppDropdownMenu from '@/components/fui-dropdown-menu/fui-dropdown-menu.vue';
	import appNoGoods from '@/components/page-component/app-no-goods/app-no-goods.vue';
	export default {
		components: {
			AppTabBar,
			AppDropdownMenu,
			appNoGoods,
		},
		data() {
			return {
				dataList:[{}],
				options: [
					[{
						text: '订单状态',
						value: 1,
						checked: true
					}, {
						text: '交易成功',
						value: 2
					}, {
						text: '交易失败',
						value: 3
					}],
					[{
						text: '全部客户',
						value: 1,
						checked: true
					}, {
						text: '已认证',
						value: 2
					}, {
						text: '未认证',
						value: 3
					}]
				],
				range: '订单状态',
				range1: '全部客户',
				selectIndex: 0,
				rangeShow: false,
				rangeShow1: false,
				
				
				keyword:'',
				page:1,
				isNoMore:false,
			};
		},
		computed: {
			...mapGetters('mallConfig', {
				getTheme: 'getTheme'
			}),
			...mapState({
				info:state=>state.user.info
			})
		},
		onShow() {
			uni.hideHomeButton()
			this.getDataList()
		},
		onReachBottom() {
			if(!this.isNoMore){
				this.page++
				this.getDataList()
			}
		},
		methods: {
			getDataList(){
				this.$showLoading()
				this.$request({
					url:this.$api.order.list,
					data:{
						status: 0,
						keyword: this.keyword,
						dateArr: [],
						page: this.page,
						sale_id:this.info.salesperson_id
					},
					method:'get'
				}).then(res=>{
					this.$hideLoading()
					if(res.code===0){
						if(this.page===1){
							this.dataList=res.data.list
						}else{
							this.dataList=this.dataList.concat(res.data.list) 
						}
						if(res.data.list.length<20){
							this.isNoMore=true
						}
					}
				})
			},
			
			filterTap(i) {
				this.selectIndex = i
				//显示下拉框
				this.$refs.ddmRange.show()
				this.selectIndex ? this.rangeShow1 = true : this.rangeShow = true
			},
			rangeItemClick(e) {
				console.log(e)
				this.selectIndex ? this.range1 = e.text : this.range = e.text

				this.rangeClose()
			},
			rangeClose() {
				this.selectIndex ? this.rangeShow1 = false : this.rangeShow = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
	}

	.fui-filter__item {
		width: 100%;
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		/* #ifdef H5 */
		cursor: pointer;
		/* #endif */
		background-color: #fff;
	}

	.fui-filter__icon {
		transition: all .15s linear;
	}

	.fui-icon__ani {
		transform: rotate(180deg);
	}

	.nav-margin {
		width: #{750rpx};
	}

	.search {
		width: 680rpx;
		height: 82rpx;
		// background: #FFFFFF;
		border: 1rpx solid #EEEEEE;
		border-radius: 4rpx;
		margin: 0 auto;
		padding-left: 22rpx;

		image {
			width: 22rpx;
			height: 22rpx;
			margin-right: 18rpx;
		}
	}

	.list {
		margin-top: 20rpx;
	}

	.box {
		width: 750rpx;
		height: auto;
		background: #ffffff;
		// border-radius: 6rpx;
		padding: 26rpx 31rpx;
		margin: 0 auto 20rpx;

		.border_bottom {
			border-bottom: 1px solid #eaeaea;
		}

		.border_top {
			border-top: 1px solid #eaeaea;
		}

		.header {
			padding-bottom: 21rpx;

			.head {
				max-width: 500rpx;
				height: 48rpx;
				background: #f6f6f6;
				border-radius: 24rpx;
				padding: 0 17rpx;
				overflow: hidden;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 14rpx;
					border-radius: 50%;
				}

				font-size: 24rpx;
				font-weight: 500;
				color: #666666;
			}

			.head1 {
				max-width: 500rpx;
				height: 48rpx;
				overflow: hidden;

				image {
					width: 45rpx;
					height: 45rpx;
					margin-right: 14rpx;
					border-radius: 50%;
				}

				font-size: 30rpx;
				font-weight: bold;
				color: #222222;
			}

			.date {
				font-size: 22rpx;
				font-weight: 500;
				color: #222222;
				margin-right: 30rpx;
			}

			.del {
				width: 36rpx;
				height: 36rpx;
			}
		}

		.center {
			padding: 0 0 10rpx;

			.title {
				font-size: 30rpx;
				font-weight: bold;
				color: #222222;
			}

			.isopen {
				font-size: 24rpx;
				font-weight: bold;
				color: #a18353;

				image {
					width: 19rpx;
					height: 12rpx;
					margin-left: 8rpx;
				}
			}

			.center-text {
				margin-top: 20rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #999999;
				line-height: 34rpx;
			}

			.center-img {
				margin-top: 28rpx;

				image {
					width: 146rpx;
					height: 96rpx;
					border-radius: 12rpx;
					margin-right: 15rpx;
				}
			}

			.goods {
				// padding-top: 42rpx;
				// border-top: 1rpx solid #EAEAEA;

				.desc {
					width: 100%;
					height: 141rpx;
					// background: #F8F8F8;
					border-radius: 6rpx;
					padding: 18rpx 0 18rpx 0;

					.goods-img {
						width: 147rpx;
						height: 110rpx;
						border-radius: 8rpx;
						margin-right: 21rpx;
					}

					.title {
						width: 478rpx;
						font-size: 26rpx;
						font-weight: 500;
						color: #222222;
						line-height: 34rpx;
					}

					.price {
						width: 520rpx;
						font-size: 24rpx;
						font-weight: 500;
						color: #222222;
						line-height: 36rpx;

						.company {}
					}
				}

			}

			.total_pay {
				font-size: 24rpx;
				color: #222222;
				line-height: 34px;
				.order_number{
					font-size: 22rpx;
					font-weight: 500;
					color: #838584;
				}

				&>text:nth-child(1) {
					font-weight: 500;
					margin-right: 8rpx;
				}

				&>text:nth-child(2) {
					font-weight: 500;
					font-size: 20rpx;
				}

				&>text:nth-child(3) {
					font-weight: 600;
				}
			}
		}

		.footer {
			padding: 28rpx 0 0;

			.left {
				font-size: 28rpx;
				font-weight: 500;
				color: #666666;
			}

			.date {
				font-size: 22rpx;
				font-weight: 500;
				color: #838584;
				line-height: 34rpx;
			}

			.kbtn {
				width: 138rpx;
				height: 52rpx;
				border: 1rpx solid #999999;
				border-radius: 4rpx;
				font-size: 20rpx;
				font-weight: 500;
				color: #222222;
				text-align: center;
				line-height: 52rpx;
				margin-left: 20rpx;
			}
		}
	}

	.no-more {
		font-size: 24rpx;
		font-weight: 500;
		color: #666666;
		text-align: center;
		line-height: 80rpx;
	}
</style>