H5_QiCaiYao/page_salesman_index/Customer_warning/Customer_warning.vue

<template>
	<view>
		<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="btnhead">

				<image style="width: 48rpx;height: 48rpx;" :src="$util.img('/upload/weapp/user/shezhi.png')" mode="">
				</image>
			</div>
		</u-navbar>

		<view class="">
			<div class="df head aic" @click="btn(one1)" v-if="one1.const">
				<div class="one">{{list1.length||0}}</div>
				<div class="two">家近期登录减少</div>
			</div>
			<div class="df head aic" @click="btn(one2)" v-if="one2.const">
				<div class="one">{{list2.length||0}}</div>
				<div class="two">家该下单还未下</div>
			</div>
			<div class="df head aic" @click="btn(one3)" v-if="one3.const">
				<div class="one">{{list3.length||0}}</div>
				<div class="two">家注册后不再来</div>
			</div>
			<div class="df head aic" @click="btn(one4)" v-if="one4.const">
				<div class="one">{{list4.length}}</div>
				<div class="two">家近期订单减少</div>
			</div>
			<div class="df head aic" @click="btn(one5)" v-if="one5.const">
				<div class="one">{{list5.length||0}}</div>
				<div class="two">家拖欠大额贷款</div>
			</div>
			<div class="df head aic" @click="btn(one6)" v-if="one6.const">
				<div class="one">{{list6.length||0}}</div>
				<div class="two">家近期不登陆</div>
			</div>
			<div class="df head aic" @click="btn(one7)" v-if="one7.const">
				<div class="one">{{list7.length||0}}</div>
				<div class="two">家近期不下单</div>
			</div>
			<div class="df head aic" @click="btn(one8)" v-if="one8.const">
				<div class="one">{{list8.length||0}}</div>
				<div class="two">家近期订单暴涨</div>
			</div>
			<div class="df head aic" @click="btn(one9)" v-if="one9.const">
				<div class="one">{{list9.length||0}}</div>
				<div class="two">家近期订单暴跌</div>
			</div>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1: [],
				list2: [],
				list3: [],
				list4: [],
				list5: [],
				list6: [],
				list7: [],
				list8: [],
				list9: [],
				one1: {},
				one2: {},
				one3: {},
				one4: {},
				one5: {},
				one6: {},
				one7: {},
				one8: {},
				one9: {},

			};
		},
		onShow() {
			this.init();
		},
		methods: {
			// 初始化数据
			init() {
				this.getWarnMembeConfig()
			},
			// 获取预警配置
			getWarnMembeConfig() {
				this.$api.sendRequest({
					url: `/api/salasman/getWarnMembeConfig`,
					success: res => {

						this.getWarnMemberList(res.data);
					}
				})
			},
			// 客户预警列表
			getWarnMemberList(list) {

				//  根据预警列表const值查询判断是否显示
				list.forEach((item, index) => {
					switch (item.key) {
						case "member_1":
							this.one1 = item

							break;
						case "member_2":
							this.one2 = item

							break;
						case "member_3":
							this.one3 = item

							break;
						case "member_4":
							this.one4 = item

							break;
						case "member_5":
							this.one5 = item

							break;
						case "member_6":
							this.one6 = item

							break;
						case "member_7":
							this.one7 = item

							break;
						case "member_8":
							this.one8 = item

							break;
						case "member_9":
							this.one9 = item

							break;
						default:
							break;
					}
					this.getWarnMemberListHttp(item, index)
				})
			},
			//  根据预警列表key值查询接口
			getWarnMemberListHttp(item, index) {
				let num = index + 1;
				this.$api.sendRequest({
					url: `/api/salasman/warnMemberList`,
					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;
							case 8:
								this.list8 = res.data
								console.log(this.list8)
								break;
							case 9:
								this.list9 = res.data
								console.log(this.list9)
								break;
							default:

								break;
						}

					}
				})
			},
			btn(item) {

				let url = `/page_salesman_reportForm/Customer_alertdetails/Customer_alertdetails`;
				this.$util.redirectTo(url, item)
			},
			btnhead() {
				uni.navigateTo({
					url: '/page_salesman_reportForm/set_up/set_up'
				})
			}
		},
		onPullDownRefresh() {
			this.$nextTick(() => {
				uni.stopPullDownRefresh();
				this.init();
			})
		},
	}
</script>

<style lang="scss">
	.head {
		width: 702rpx;
		height: 100rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 24rpx 24rpx 0 24rpx;

		.one {
			font-size: 44rpx;
			font-family: DINAlternate-Bold, DINAlternate;
			font-weight: bold;
			color: #333333;
			line-height: 52rpx;
			margin: 0 16rpx 0 32rpx;
		}

		.two {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #585858;
			line-height: 40rpx;
		}
	}
</style>