web-app-v1/pages/stock/code_record.vue

<template>
	<view class="record">
		<view class="search">
			<view class="search_box flexS">
				<text class="iconfont iconsearch"></text>
				<input type="text" placeholder="输入昵称或手机号" v-model="params.search_name">
				<view class="flexS">
					<text class="iconfont iconguanbi1" @click="params.search_name='',toSearch(0)"></text>
					<view class="btn" @click="toSearch(1)">查询</view>
				</view>
			</view>
			<view class="date_box flexB">
				<view class="flexC">
					<text>起始时间</text>
					<picker mode="date" @change="toChangeStartTime">
						<view class="value">{{ params.start_time | dateFormatter('yyyy-MM-dd') }}</view>
					</picker>
					<text class="iconfont iconzhcc_xiangxiajiantou"></text>
				</view>
				<view class="flexC">
					<text>结束时间</text>
					<picker mode="date" @change="toChangeEndTime">
						<view class="value">{{ params.end_time | dateFormatter('yyyy-MM-dd') }}</view>
					</picker>
					<text class="iconfont iconzhcc_xiangxiajiantou"></text>
				</view>
			</view>
		</view>
		<view class="record_box flexB" v-if="codeList.length>0">
			<view>发货记录</view>
			<view>
				<text style="font-size:28rpx;">共发货：</text>
				<text style="font-size:44rpx;color:#FB231F;">{{total}}</text>
				<text style="font-size:28rpx;color:#FB231F;">套</text>
			</view>
		</view>
		<view class="list">
			<view class="list_con" v-for="item in codeList" :key="item.id">
				<view class="user flexS">
					<view class="out flexCC">
						<view class="in"></view>
					</view>
					<view>客户：{{item.accept&&item.accept.nickname}}</view>
				</view>
				<view class="goods_box" v-for="(temp,idx) in item.goods" :key="idx">
					<view class="flexB goods" @click="temp.isChange=!temp.isChange">
						<view class="goods_con">
							<view class="goods_name">{{temp.goods_name}}</view>
							<view class="goods_num">
								<text>尺码：{{temp.skus.length}}</text>
								<text style="margin-left:20rpx;">数量：{{temp.skus.reduce((t, e) => t + e.num, 0)}}</text>
							</view>
						</view>
						<view style="width:100rpx;height:100rpx;" class="flexC">
							<text class="store_icon icon-jiantou2" v-if="temp.isChange"></text>
							<text class="store_icon icon-jiantou3" v-else></text>
						</view>
					</view>
					<view class="goods_info" v-if="temp.isChange">
						<view class="goods_intr flexB">
							<view>规格</view>
							<view>尺码</view>
							<view>数量</view>
						</view>
						<view class="goods_detail flexB" v-for="(sku,index) in temp.skus" :key="index">
							<view>{{sku.sex===1?'男款':'女款'}}</view>
							<view>{{sku.size}}</view>
							<view>{{sku.num}}</view>
						</view>
					</view>
				</view>
				<view class="time">发货时间：{{item.created_at}}</view>
			</view>
			<view class="noData" v-if="codeList.length===0">
				<image src="../../static/default/no_card.png" mode=""></image>
				<view>--暂无数据--</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getScanLog
	} from '@/apis/stock.js';
	import {
		dateFormatter
	} from "@/filters/index.js"
	export default {
		data() {
			return {
				params: {
					page_index: 1,
					page_size: 20,
					start_time: dateFormatter(Date.now(), 'yyyy-MM-dd'),
					end_time: dateFormatter(Date.now(), 'yyyy-MM-dd'),
					search_name: ''
				},
				codeList: [],
				totalPage: 0,
				total: 0 //总套数
			}
		},
		onShow() {
			this.getLog()
		},
		onReachBottom() {
			this.getMoreLog()
		},
		methods: {
			getLog(isMore) {
				uni.showLoading({
					title: '加载中....'
				})
				let {
					page_index,
					page_size,
					start_time,
					end_time,
					search_name
				} = this.params
				getScanLog({
					start_time: start_time + ' 00:00:00',
					end_time: end_time + ' 23:59:59',
					page_index,
					page_size,
					search_name
				}).then(res => {
					if (res.code === 200) {
						this.total = res.data.list.num
						let list = res.data.list.info
						list.map(i => {
							i.goods.map(j => {
								this.$set(j, 'isChange', false)
								this.$set(j, 'goods_name', this.getStyle(j.name))
							})
						})
						this.codeList = isMore ? this.codeList.concat(list) : list
						this.totalPage = Math.ceil(res.data.total / this.params.page_size);
					} else {
						uni.showModal({
							content: res.data || '暂无数据',
							showCancel: false
						})
					}
					uni.hideLoading()
				}).catch(err => {
					uni.showModal({
						content: err,
						showCancel: false
					})
				})
			},
			getMoreLog() {
				if (this.params.page_index >= this.totalPage) {
					uni.showToast({
						title: '没有更多啦~',
						icon: 'none'
					});
					return false;
				}
				this.params.page_index++;
				this.getLog(true)
			},
			// 款式
			getStyle(v) {
				if (v == '精装版') {
					return '大卫博士健康内裤（精装版）'
				} else if (v === '简约版') {
					return '大卫博士健康内裤（简约版）'
				} else if (v === '高腰版') {
					return '大卫博士健康内裤（高腰版）'
				} else if (v === '纯棉版') {
					return '大卫博士健康内裤（纯棉版）'
				} else if (v === '精装赠') {
					return '大卫博士健康内裤（精装赠）'
				} else if (v === '青春版') {
					return '大卫博士健康内裤（青春版）'
				}
			},
			// 开始时间
			toChangeStartTime(e) {
				let now = e.detail.value

				let {
					start_time,
					end_time
				} = this.params
				if (new Date(now).getTime() > new Date(end_time).getTime()) {
					uni.showModal({
						content: "起始时间不能大于结束时间",
						showCancel: false
					})
					return false
				}
				this.params.start_time = e.detail.value
				this.toSearch(0)
			},
			// 结束时间
			toChangeEndTime(e) {
				let now = e.detail.value
				let {
					start_time,
					end_time
				} = this.params
				if (new Date(now).getTime() < new Date(start_time).getTime()) {
					uni.showModal({
						content: "结束时间不能小于起始时间",
						showCancel: false
					})
					return false
				}
				this.params.end_time = e.detail.value
				this.toSearch(0)
			},

			// 查询
			toSearch(type) {
				if (type === 1 && !this.params.search_name) {
					uni.showModal({
						content: '请先输入昵称或手机号',
						showCancel: false
					})
					return
				}
				this.params.page_index = 1
				this.getLog()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.record {
		padding-bottom: 120rpx;

		.search {
			width: 100%;
			// height: 184rpx;
			background: #fff;
			padding: 20rpx 0 24rpx 0;

			.search_box {
				width: 702rpx;
				height: 80rpx;
				margin: 0 auto;
				background: #F9F9FB;
				border-radius: 40rpx;
				padding: 0 10rpx 0 24rpx;
				box-sizing: border-box;

				.iconfont {
					font-size: 50rpx;
					color: #999;
				}

				.iconguanbi1 {
					color: #ccc;
					margin-right: 10rpx;
				}

				input {
					padding-left: 10rpx;
					width: 65%;
					height: 100%;
				}

				.btn {
					width: 132rpx;
					height: 64rpx;
					background: linear-gradient(92deg, #FF232C 0%, #FF571B 100%);
					border-radius: 40rpx;
					color: #fff
				}
			}

			.date_box {
				margin-top: 32rpx;

				>view {
					width: 50%;
					text-align: center;

					text {
						font-size: 28rpx;
					}

					.iconfont {
						font-size: 20rpx;
						color: #999;
					}

					picker {

						margin: 0 20rpx;

						view {
							color: #999;
						}
					}
				}
			}

			.time {
				width: 468rpx;
				height: 68rpx;
				border-radius: 68rpx;
				background-color: #ffffff;
				padding: 0 34rpx;
				box-sizing: border-box;
				line-height: 68rpx;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.value {
					color: #999999;
					letter-spacing: 1px;
				}

				.fixed {
					color: #333333;
				}
			}

			.btn {
				width: 192rpx;
				height: 68rpx;
				border-radius: 68rpx;
				text-align: center;
				line-height: 68rpx;
				color: #FFFFFF;
				font-size: 28rpx;
				background: linear-gradient(to right, #F97C55 0%, #F44545 100%);
			}
		}

		.record_box {
			width: 702rpx;
			margin: 0 auto;
			padding-top: 24rpx;
			box-sizing: border-box;

			>view {
				font-size: 32rpx;
				font-weight: bold;
			}
		}

		.list {
			width: 100%;

			.list_con {
				padding: 0 24rpx;
				margin: 24rpx auto 0;
				background: #fff;
				box-sizing: border-box;


				.user {
					height: 88rpx;
					line-height: 88rpx;


					.out {
						width: 30rpx;
						height: 30rpx;
						background: rgba(234, 74, 65, 0.39);
						border-radius: 50%;
						margin-right: 20rpx;

						.in {
							width: 18rpx;
							height: 18rpx;
							background: #EA4A41;
							border-radius: 50%;
						}
					}
				}

				.goods_box {
					padding: 24rpx 0;
					border-top: 2rpx solid #EEEEEE;
					border-bottom: 2rpx solid #EEEEEE;

					.goods {
						.goods_con {
							display: flex;
							flex-direction: column;
							align-items: flex-start;

							.goods_name {
								font-size: 32rpx;
								font-weight: bold;
								margin-bottom: 20rpx;

							}

							.goods_num {
								min-width: 245rpx;
								padding: 10rpx;
								box-sizing: border-box;
								background: #F9F9FB;
								border-radius: 4rpx;

								text {
									color: #999;
								}
							}
						}




						.store_icon {
							font-size: 35rpx;
						}
					}



					.goods_info {
						margin-top: 32rpx;

						.goods_detail,
						.goods_intr {
							>view {
								width: 120rpx;
								text-align: center;
							}
						}

						.goods_detail {
							margin-top: 24rpx;
							height: 72rpx;
							background: #F9F9FB;
							border-radius: 8rpx;
						}
					}

				}

				.time {
					height: 98rpx;
					line-height: 98rpx;
				}
			}
		}
	}
</style>