uni-Identify-quality/pages/order-goods/index.vue

<template>
	<div class="order-goods">
		<title-block title="订单库">
			<template #left>
				<u-action-sheet
					:show="show"
					:actions="
						statusValue.map((x) => ({
							name: x.label,
							value: x.value
						}))
					"
					title="请选择状态"
					@close="show = false"
					@select="statusSelect"
				>
				</u-action-sheet>
				<div @click="openStatus" class="wrap1">
					<div class="wrap1_1">
						<div class="wrap1_1_1">
							{{
								statusValue.find(
									(x) => x.value === artworkStatus
								).label
							}}
						</div>
						<image
							style="width: 12rpx; height: 8rpx"
							src="../../static/dbx2@3x.png"
						></image>
					</div>
				</div>
			</template>
		</title-block>
		<div class="content2">
			<div class="wrap1">
				<div class="wrap1_1">
					<image src="../../static/zu1@3x.png"></image>
				</div>
				<div class="wrap1_2"></div>
				<input
					v-model="mobileKey"
					placeholder-style="color: #C7C7C7;font-size: 20rpx;"
					placeholder="在此处搜索您的订单"
				/>
			</div>
			<div class="wrap2" @click="search">搜索</div>
		</div>

		<div class="content3">
			<scroll-view
				:style="{ height: `${elementBottom}rpx` }"
				class="scrollbox"
				:scroll-y="true"
				@scrolltolower="loadMore"
			>
				<div
					v-for="(item, index) in mainList"
					:key="index"
					@touchstart="
						(e) => {
							touchStart(e, index)
						}
					"
					@touchmove="
						(e) => {
							touchMove(e, index)
						}
					"
					@touchend="
						() => {
							touchEnd(index)
						}
					"
					@click="goRouter(item)"
					:style="{ transform: `translateX(${item.distanceX}px)` }"
					class="wrap1"
				>
					<div class="wrap1_1">
						<image
							:src="
								item.artworkImg
									? item.artworkImg
									: '../../static/jx632@3x.png'
							"
						></image>
					</div>
					<div class="wrap1_2">
						<div class="wrap1_2_1">{{ item.artworkName }}</div>
						<!--            <div class="wrap1_2_2">订单号:{{ item.artworkName }}</div>-->
						<div class="wrap1_2_3">
							{{ item.artworkSquareSize }}平尺
						</div>
						<div class="wrap1_2_4">
							<div v-if="![1].includes(item.artworkStatus)">
								{{ item.startAt.replaceAll('-', '.') || '' }}-{{
									item.endAt.replaceAll('-', '.') || ''
								}}
							</div>
							<div v-else>{{ item.cycleName }}</div>
						</div>
					</div>
					<div
						class="wrap1_3"
						:class="[`status${item.artworkStatus}`]"
					>
						<div class="wrap1_3_1" v-if="item.artworkStatus === 4">
							<div class="wrap1_3_1_1">{{ item.endAt }}</div>
							<div class="wrap1_3_1_2">已延期</div>
							<div
								class="wrap1_3_1_3"
								v-if="item.isSupplementary"
								@click.stop="openShow2(item)"
							>
								点击补款
							</div>
						</div>
						<div class="wrap1_3_3" v-if="item.artworkStatus !== 4">
							<div class="wrap1_3_3_1">
								{{
									statusValue.find(
										(x) => x.value === item.artworkStatus
									).label
								}}
							</div>
						</div>
						<div v-if="item.shelvesNum" class="wrap1_3_2">
							<div class="wrap1_3_2_1">货架号:</div>
							<div class="wrap1_3_2_2">{{ item.shelvesNum }}</div>
						</div>
						<div v-if="!item.shelvesNum" class="wrap1_3_2">
							<div class="wrap1_3_2_2">
								{{ item.warehouseName }}
							</div>
						</div>
						<div
							class="wrap1_3_4"
							v-if="![1, 5].includes(item.artworkStatus)"
							@click.stop="pickUp(item)"
						>
							{{
								item.isUserApplyPickUp ? '取消申请' : '申请取货'
							}}
						</div>
					</div>
					<div
						class="wrap1_4"
						v-if="item.isRight && item.artworkStatus === 5"
						@click.stop="openDelete(item)"
					>
						<image
							style="width: 80rpx; height: 80rpx"
							src="../../static/zu154@3x.png"
						></image>
					</div>
				</div>
			</scroll-view>
		</div>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog
				:type="'info'"
				cancelText="关闭"
				confirmText="确认"
				title="提示"
				:content="messageText"
				@confirm="popForward"
			></uni-popup-dialog>
		</uni-popup>
		<tabbar :current="1"></tabbar>
	</div>
</template>
<script>
import tabbar from '../../components/uiq-tabbar/uiq-tabbar.vue'
import UImage from '../../uview-ui/components/u--image/u--image.vue'
import { postDataByParams } from '../../http/service'

export default {
	name: 'index',
	data() {
		return {
			messageText: '',
			show_1: false,
			show: false,
			mobileKey: '',
			startX: 0,
			windowWidth: 0,
			page: 1,
			elementBottom: '',
			item: null,
			artworkStatus: 0,
			pageSize: 999,
			mainList: [],
			statusValue: [
				{ label: '全部状态', value: 0 },
				{ label: '待入库', value: 1 },
				{
					label: '已入库',
					value: 2
				},
				{ label: '即将到期', value: 3 },
				{ label: '延期未补款', value: 4 },
				{ label: '延期已补款', value: 7 },
				{ label: '已取出', value: 5 }
			],
			status: 0
		}
	},
	components: { UImage, tabbar },
	mounted() {
		uni.getSystemInfo({
			success: (res) => {
				this.windowWidth = res.windowWidth
			}
		})
		this.getDistanceFromTopToPageBottom('.content3')
	},
	onShow() {
		this.getData()
	},
	computed: {},
	methods: {
		async pickUp(item) {
			let url = ''
			if (!item.isUserApplyPickUp) {
				url = '/api/warehouse/apply/pickup'
			} else {
				url = '/api/warehouse/apply/pickup/cancel'
			}
			const data = {
				ID: item.ID
			}
			const res = await postDataByParams(url, data)
			if (res.code === 200) {
				uni.showToast({
					title: '请求成功',
					icon: 'none'
				})
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
			}
			this.getData()
		},
		popForward() {
			if (this.messageText === '确认补款吗') {
				this.supplementaryPayment()
			} else if (this.messageText === '确认删除吗') {
				this.deleteClick()
			}
		},
		openShow2(item) {
			this.item = item
			this.messageText = `确认补款吗`
			this.$refs.alertDialog.open()
		},
		async supplementaryPayment() {
			const data = {
				ID: this.item.ID
			}
			uni.login({
				provider: 'weixin',
				success: async ({ code }) => {
					const res3 = await this.$api.login.getOpenId({ code })
					if (res3.code === 200) {
						const res = await postDataByParams(
							'/api/warehouse/supply/paid',
							data
						)
						if (res.code === 200) {
							uni.requestPayment({
								...res.data,
								fail: (res) => {},
								success: () => {
									this.getData()
									uni.showToast({
										title: '补款成功',
										icon: 'none'
									})
								}
							})
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					} else {
						this.$common.msgToast(res3.msg)
					}
				}
			})
		},
		async getDistanceFromTopToPageBottom(classValue) {
			const { windowHeight, windowWidth } = await uni.getSystemInfo()
			const [{ top }] = await new Promise((resolve) =>
				uni
					.createSelectorQuery()
					.select(classValue)
					.boundingClientRect()
					.exec(resolve)
			)
			this.elementBottom =
				((windowHeight - top) / windowWidth) * 750 - 175
			/*    if(uni.getSystemInfoSync().platform === 'ios'){
        this.elementBottom = ((windowHeight - top) / windowWidth) * 750 - 175;
      }else {
        this.elementBottom = ((windowHeight - top) / windowWidth) * 750 - 110;
      }*/
		},
		openDelete(item) {
			this.messageText = `确认删除吗`
			this.$refs.alertDialog.open()
			this.item = item
		},
		async deleteClick() {
			this.show_1 = false
			const data = {
				ID: this.item.ID
			}
			const res = await postDataByParams('/api/warehouse/remove', data)
			if (res.code === 200) {
				this.getData()
				uni.showToast({
					title: '删除成功',
					icon: 'none'
				})
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
			}
		},
		goRouter(item) {
			uni.navigateTo({
				url: `/pages/order-goods/order-details?ID=${item.ID}`
			})
		},
		search() {
			this.getData()
		},
		statusSelect(data) {
			this.artworkStatus = data.value
			this.getData()
		},
		openStatus() {
			this.show = true
		},
		loadMore() {
			console.log('loadMore')
		},
		async getData() {
			const data = {
				page: this.page, //分页
				pageSize: this.pageSize, //每页数据量
				status: this.artworkStatus, //状态(1-待入库  2-已入库 3-即将到期 4-已延期 5-已取出)
				mobileKey: this.mobileKey
			}
			const res = await postDataByParams('/api/warehouse/list', data)
			if (res.code === 200) {
				this.mainList = res.data.data
				this.mainList?.forEach((x) => {
					this.$set(x, 'distanceX', 0)
					this.$set(x, 'isRight', false)
				})
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
			}
		},
		touchMove(e, index) {
			if (this.mainList[index].artworkStatus !== 5) {
				return
			}
			this.mainList[index].distanceX = e.touches[0].clientX - this.startX
		},
		touchStart(e, index) {
			if (this.mainList[index].artworkStatus !== 5) {
				return
			}
			this.mainList[index].isRight = true
			this.startX = e.touches[0].clientX
		},
		touchEnd(index) {
			if (this.mainList[index].artworkStatus !== 5) {
				return
			}
			if (
				this.mainList[index].distanceX <
				-((144 / 750) * this.windowWidth)
			) {
				this.mainList[index].distanceX = -(
					(144 / 750) *
					this.windowWidth
				)
			} else {
				this.mainList[index].isRight = false
				this.mainList[index].distanceX = 0
			}
		}
	}
}
</script>
<style scoped lang="scss">
.order-goods {
	overflow: hidden;
	box-sizing: border-box;
	background-image: url('https://cdns.fontree.cn/fonchain-main/prod/image/default/artwork/4fdc9a0f-d72a-46b6-a04d-ed56d5465213.png');
	padding-left: 30rpx;
	padding-right: 30rpx;
	background-size: cover;
	width: 100vw;
	height: 100vh;

	.content3 {
		margin-top: 20rpx;

		margin-bottom: 300rpx;

		.wrap1 {
			margin-bottom: 20rpx;
			position: relative;
			padding-left: 20rpx;
			border-radius: 20rpx;
			background-color: #fff;
			height: 228rpx;
			display: flex;
			align-items: center;

			.wrap1_4 {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 228rpx;
				width: 154rpx;
				background-color: #b7c0c8;
				right: -144rpx;
				position: absolute;
				z-index: -1;
			}

			.wrap1_3 {
				border-top-right-radius: 20rpx;
				border-bottom-right-radius: 20rpx;
				display: flex;
				margin-left: auto;
				position: relative;
				width: 144rpx;
				height: 228rpx;

				&.status5 {
					background: #939393;

					.wrap1_3_3_1 {
						color: #939393;
					}
				}

				&.status1 {
					background: #ffba00;

					.wrap1_3_3_1 {
						color: #ffba00;
					}
				}

				&.status2 {
					background: #76c458;

					.wrap1_3_3_1 {
						color: #76c458;
					}
				}
				&.status7 {
					background: #76c458;

					.wrap1_3_3_1 {
						font-size: 23rpx !important;
					}
				}
				&.status3 {
					background: #76c458;

					.wrap1_3_3_1 {
						color: #ff4848;
					}
				}

				&.status4 {
					background: #ff4848;

					.wrap1_3_3_1 {
						color: #ff4848;
					}
				}
				.wrap1_3_4 {
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 8rpx;
					color: #fff;
					width: 110rpx;
					height: 35rpx;
					background-color: #000;
					left: 20rpx;
					position: absolute;
					bottom: 16rpx;
					font-size: 18rpx;
				}
				.wrap1_3_2 {
					display: flex;
					flex-direction: column;
					left: 50%;
					transform: translateX(-50%);
					position: absolute;
					bottom: 60rpx;
					min-width: fit-content;
					.wrap1_3_2_1 {
						white-space: nowrap;
						color: #fff;
						font-size: 24rpx;
					}

					.wrap1_3_2_2 {
						color: #fff;
						font-size: 24rpx;
					}
				}

				.wrap1_3_3 {
					padding-top: 18rpx;
					padding-bottom: 18rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					border-top-right-radius: 15rpx;
					left: 4rpx;
					top: 4rpx;
					width: 136rpx;
					background-color: #fff;
					position: absolute;

					.wrap1_3_3_1 {
						text-align: center;

						font-size: 28rpx;
					}
				}

				.wrap1_3_1 {
					padding-bottom: 6rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					border-top-right-radius: 15rpx;
					left: 4rpx;
					top: 4rpx;
					width: 136rpx;
					background-color: #fff;
					position: absolute;

					.wrap1_3_1_1 {
						font-size: 16rpx;
						color: #ff4848;
					}

					.wrap1_3_1_2 {
						font-size: 24rpx;
						color: #ff4848;
					}

					.wrap1_3_1_3 {
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 8rpx;
						color: #fff;
						font-size: 16rpx;
						width: 110rpx;
						height: 34rpx;
						background-color: #000;
					}
				}
			}

			.wrap1_2 {
				margin-left: 14rpx;
				display: flex;
				flex-direction: column;
				align-items: start;

				.wrap1_2_1 {
					margin-bottom: 12rpx;
					color: #000;
					font-size: 28rpx;
				}

				.wrap1_2_2 {
					margin-bottom: 12rpx;
					color: #808080;
					font-size: 24rpx;
				}

				.wrap1_2_3 {
					margin-bottom: 12rpx;
					color: #808080;
					font-size: 24rpx;
				}

				.wrap1_2_4 {
					color: #ff4848;
					font-size: 24rpx;
				}
			}

			.wrap1_1 {
				image {
					width: 188rpx;
					height: 188rpx;
				}
			}
		}
	}

	.content2 {
		margin-top: 26rpx;
		display: flex;
		justify-content: space-between;

		.wrap2 {
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 20rpx;
			color: #fff;
			font-size: 20rpx;
			width: 94rpx;
			height: 52rpx;
			background-color: #4e964d;
		}

		.wrap1 {
			align-items: center;
			display: flex;
			border-radius: 20rpx;
			background-color: rgba(0, 0, 0, 0.5);
			width: 586rpx;
			height: 52rpx;

			.wrap1_2 {
				margin-left: 20rpx;
				margin-right: 20rpx;
				width: 1rpx;
				height: 30rpx;
				background-color: #fff;
			}

			input {
			}

			.wrap1_1 {
				margin-left: 26rpx;

				image {
					width: 28rpx;
					height: 28rpx;
				}
			}
		}
	}

	.content1 {
		display: flex;
		justify-content: space-between;

		.wrap3 {
			font-size: 24rpx;
			color: #fff;
			width: 132rpx;
			height: 52rpx;
			background-color: #76c458;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 20rpx;
		}

		.wrap2 {
			display: flex;
			flex-direction: column;
			align-items: center;

			.wrap2_1 {
				color: #4e964d;
				font-size: 32rpx;
			}

			.wrap2_2 {
				color: #7c9f6f;
				font-size: 16rpx;
			}
		}

		.wrap1 {
			.wrap1_1 {
				justify-content: center;
				border-radius: 20rpx;
				width: 156rpx;
				height: 52rpx;
				background-color: #4e964d;
				color: #fff;
				font-size: 24rpx;
				display: flex;
				align-items: center;
			}
		}
	}
}
</style>