H5_QiCaiYao/page_salesman_index/warning/warning.vue

<template>
	<view class="warning">
		<!-- <z-paging ref="paging" v-model="warningList" @query="queryList"> -->

		<u-navbar title="商品预警" :autoBack="true" leftIconSize="0" placeholder>
			<u-icon name="arrow-left" slot="left" color="#333333" size="24"></u-icon>
			<div slot="right" class="right df aic" @click="warningSet">
				<image style="width: 48rpx;height: 48rpx;" :src="$util.img('/upload/weapp/user/shezhi.png')" mode="">
				</image>
			</div>
		</u-navbar>

		<div style="margin-top: 20rpx;" class="warning-item" @click="warningDetails(goods_1)" v-if="goods_1.const">
			<div class="left">
				<div class="piont"></div>
				<div>近{{goods_1.num}}天搜索大于{{goods_1.limit_num}}次但未在售商品</div>
			</div>
			<div class="right"><span>{{list1.length}}</span>款</div>

		</div>
		<div class="warning-item" @click="warningDetails(goods_2)" v-if="goods_2.const">
			<div class="left">
				<div class="piont"></div>
				<div>上架超过{{goods_2.num}}天无销量新品</div>
			</div>
			<div class="right"><span>{{list2.length}}</span>款
			</div>
		</div>
		<div class="warning-item" @click="warningDetails(goods_3)" v-if="goods_3.const">
			<div class="left">
				<div class="piont"></div>

				<div>近{{goods_3.num}}天无销量新商品</div>
			</div>
			<div class="right"><span>{{list3.length}}</span>款</div>
		</div>
		<div class="warning-item" @click="warningDetails(goods_4)" v-if="goods_4.const">
			<div class="left">
				<div class="piont"></div>
				<div>近{{goods_4.num}}天销量环比下降超{{goods_4.limit_num}}%</div>
			</div>
			<div class="right"><span>{{list4.length}}</span>款</div>
		</div>
		<div class="warning-item" @click="warningDetails(goods_5)" v-if="goods_5.const">
			<div class="left">
				<div class="piont"></div>
				<div>近{{goods_5.num}}天销量低于{{goods_5.limit_num}}的商品</div>
			</div>
			<div class="right"><span>{{list5.length}}</span>款</div>
		</div>
		<div class="warning-item" @click="warningDetails(goods_6)" v-if="goods_6.const">
			<div class="left">
				<div class="piont"></div>

				<div>近{{goods_6.num}}天销量环比上升超{{goods_6.limit_num}}%</div>
			</div>
			<div class="right"><span>{{list6.length}}</span>款</div>
		</div>
		<div class="warning-item" @click="warningDetails(goods_7)" v-if="goods_7.const">
			<div class="left">
				<div class="piont"></div>

				<div>近{{goods_7.num}}天销量高于{{goods_7.limit_num}}的商品</div>
			</div>
			<div class="right"><span>{{list7.length}}</span>款</div>
		</div>
		<!-- </z-paging> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goods_1: {},
				goods_2: {},
				goods_3: {},
				goods_4: {},
				goods_5: {},
				goods_6: {},
				goods_7: {},
				goods_8: {},
				goods_9: {},
				list1: [],
				list2: [],
				list3: [],
				list4: [],
				list5: [],
				list6: [],
				list7: [],
			};
		},

		onShow() {
			this.init();
		},
		methods: {
			// 初始化数据
			init() {
				this.getWarnGoodsConfig()
			},
			// 获取预警配置
			getWarnGoodsConfig() {
				this.$api.sendRequest({
					url: `/api/salasman/getWarnGoodsConfig`,
					success: res => {
						this.getWarnGoodsList(res.data);
					}
				})
			},
			// 商品预警列表
			getWarnGoodsList(list) {
				list.forEach((item, index) => {
					switch (item.key) {
						case "goods_1":
							this.goods_1 = item
							break;
						case "goods_2":
							this.goods_2 = item
							break;
						case "goods_3":
							this.goods_3 = item
							break;
						case "goods_4":
							this.goods_4 = item
							break;
						case "goods_5":
							this.goods_5 = item
							break;
						case "goods_6":
							this.goods_6 = item
							break;
						case "goods_7":
							this.goods_7 = item
							break;
						default:
							break;
					}
					this.getWarnGoodsListHttp(item, index)
				})
			},
			getWarnGoodsListHttp(item, index) {
				let num = index + 1;
				this.$api.sendRequest({
					url: `/api/salasman/warnGoodsList`,
					data: {
						type: item.key,
					},
					success: res => {
						switch (num) {
							case 1:
								this.list1 = res.data
								console.log(this.list1)
								break;
							case 2:
								this.list2 = res.data
								console.log(this.list2)
								break;
							case 3:
								this.list3 = res.data
								console.log(this.list3)
								break;
							case 4:
								this.list4 = res.data
								console.log(this.list4)
								break;
							case 5:
								this.list5 = res.data
								console.log(this.list5)
								break;
							case 6:
								this.list6 = res.data
								console.log(this.list6)
								break;
							case 7:
								this.list7 = res.data
								console.log(this.list7)
								break;

							default:
								break;
						}
					}
				})
			},
			warningSet() {
				uni.navigateTo({
					url: '/page_salesman_index/warning/warningSet'
				})
			},
			warningDetails(item) {
				let url=`/page_salesman_index/warning/warningDetails`;
				this.$util.redirectTo(url, item);
			},
		},
		onPullDownRefresh() {
			this.$nextTick(()=>{
				this.init();
				uni.stopPullDownRefresh();
			})
			
		},
	}
</script>

<style lang="scss">
	.warning {
		padding: 32rpx;

		.set {
			position: fixed;
			bottom: 0;
			width: 100%;
			background-color: #fff;
			padding: 10rpx 32rpx 32rpx;
			box-sizing: border-box;
			left: 0;

			.btn {
				text-align: center;
				line-height: 80rpx;
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				height: 80rpx;
				background: #21BBF3;
				border-radius: 40rpx;
			}
		}

		.warning-item {
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 38rpx 28rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.left {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #585858;

				.round {
					width: 24rpx;
					height: 24rpx;
					background: #20BBF3;
					margin-right: 16rpx;
					border-radius: 50%;
				}
			}

			.right {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;

				span {
					font-size: 44rpx;
					font-family: DINAlternate-Bold, DINAlternate;
					font-weight: bold;
					color: #333333;
					margin-right: 8rpx;
				}
			}
		}
	}

	.piont {
		width: 25rpx;
		height: 25rpx;
		border-radius: 50%;
		background: #20BBF3;
		margin-right: 10rpx;
	}
</style>