junzitang/pagesT/Distribution/ApplyAudit.vue

<template>
	<view class="apply-term">
		<image :src="distributionSet.image || default_img" mode="aspectFill" class="apply-img"></image>
		<!-- 成为分销商审核中 -->
		<view class="apply-cont" v-if="auditStatus === 1 && applicationCondition === 1">
			<view class="apply-tip">
				<view class="audit-img"><image src="https://onlineimg.qianniao.vip/audit_img.jpg" mode="aspectFit"></image></view>
				<view class="tip-text" v-if="applicationCondition === 4">您已购买指定商品，满足申请条件，请等待审核</view>
				<view class="tip-text" v-else>感谢您的支持，请等待审核</view>
			</view>
			<view @click="goPage('/pages/index/index', 'switchTab')" class="sub-btn">去商城逛逛</view>
		</view>
		<!--  申请成为分销商条件为累计消费次数或者累计消费金额 -->
		<view class="apply-cont" v-if="auditStatus === 1 && [2, 3].includes(applicationCondition)">
			<view class="apply-num-cont">
				<view>您已累计消费</view>
				<view class="num-weight" v-if="applicationCondition === 2">
					<text class="_number">{{ businessmanInfo.statistics ? businessmanInfo.statistics.auditOrderTotal || 0 : 0 }}</text>
					<text>次</text>
				</view>
				<view class="num-weight" v-if="applicationCondition === 3">
					<text class="_number">{{ businessmanInfo.statistics ? businessmanInfo.statistics.auditTotalMoney || 0 : 0 }}</text>
					<text>元</text>
				</view>
			</view>

			<view class="apply-tip-view" v-if="applicationCondition === 2">
				<block v-if="distributionSet.buyNum > businessmanInfo.statistics.auditOrderTotal">
					本店累计消费满
					<text class="_importent">{{ distributionSet.buyNum }}</text>
					次，
					<text v-if="distributionSet.audit === 4">通过审核后</text>
					即可{{ text_set.distributor || '成为分销商' }}
				</block>
				<block v-else>您的累计消费次数满足申请条件，请等待审核</block>
			</view>

			<view class="apply-tip-view" v-if="applicationCondition === 3">
				<block v-if="distributionSet.buyAmount > businessmanInfo.statistics.auditTotalMoney">
					本店累计消费满
					<text class="_importent">{{ distributionSet.buyAmount }}</text>
					元，
					<text v-if="distributionSet.audit === 4">通过审核后</text>
					即可{{ text_set.distributor || '成为分销商' }}
				</block>
				<block v-else>您的累计消费金额满足申请条件，请等待审核</block>
			</view>
			<view @click="goPage('/pages/index/index', 'switchTab')" class="sub-btn">继续去购物</view>
		</view>
		<!--  申请成为分销商条件为购买商品 -->
		<view class="apply-cont" v-if="applicationCondition === 4">
			<scroll-view scroll-y="true" style="height: calc(100vh - 360rpx);">
				<view>
					<block v-for="(item, index) in goodsList" :key="index">
						<view class="goods-item-box clearfix">
							<!-- 左边 -->
							<view class="imgStyle float_left" @click="goPage(`/pagesT/product/product?id=${item.goodsId}`)">
								<image mode="aspectFit" :src="item.images[0]"></image>
							</view>
							<!-- 右边 -->
							<view class="right float_left">
								<p class="title" @click="goPage(`/pagesT/product/product?id=${item.goodsId}`)">{{ item.goodsName }}</p>
								<p class="subTitle" @click="goPage(`/pagesT/product/product?id=${item.goodsId}`)">
									<text class="gradeName">{{ item.gradeName }}</text>
									{{ item.unitName }}
									<text v-for="(itemS, indexS) in item.specGroup" :key="indexS">_{{ itemS.specValueName }}</text>
								</p>
								<view class="clearfix" style="position:relative">
									<view class="price float_left" v-if="!isShow" @click="goPage(`/pagesT/product/product?id=${item.goodsId}`)">
										<text class="icon-rmb">¥</text>
										<text>{{ item.salePrice }}</text>
									</view>
									<view class="float_right" v-if="item.inventory - 0 > 0">
										<text class="add-cart-btn ibonfont ibongouwuche " @click="addCard(item.goodsId, item.skuId)"></text>
									</view>
								</view>
							</view>
							<text v-if="!(item.inventory - 0) || item.inventory - 0 <= 0" class="ibonfont ibonyishouwan-copy sale-end-icon"></text>
						</view>
					</block>
				</view>
			</scroll-view>
		</view>
		<AddCardModel :selAddress="now_sel_address" :skuId="goods_sku_id" @close="is_add_show = false" @change="cardModelPopChange" :isShow="is_add_show" :goodsId="goods_id" />
	</view>
</template>

<script>
	import AddCardModel from '@/components/AddCardModel';
export default {
	components: {
		AddCardModel,
	},
	data() {
		return {
			default_img: 'https://onlineimg.qianniao.vip/931544405107da76ca2ec31cd63fae49/1596008994491apply_banner.png',
			is_add_show: false,
			isLoding: false,
			goods_id: 0,
			goods_sku_id: 0,
			now_sel_address: {},
			goodsList: [],
			distributionSet: {
				image: '',
				info: [],
				businessmanCondition: 0
			},
			auditStatus: 0, // 审核状态
			applicationCondition: 0, // 申请成为分销商条件
			text_set: {},
			businessmanInfo: {
				statistics:{}
			}
		};
	},
	onLoad(options) {
		this.distributionSet = this.$store.state.distributionSet;
		this.auditStatus = parseInt(options.auditStatus);
		this.applicationCondition = parseInt(options.applicationCondition);
		this.text_set = this.$store.state.distributionTextSet;
		this.getInfoBusinessman()
		// 申请成为分销商条件为购买商品
		if (this.applicationCondition === 4) {
			this.getBuyGoods();
		}
	},
	methods: {
		// 获取分销商详情
		 getInfoBusinessman() {
			this.$u.api.getInfoBusinessman().then(res=>{
				this.businessmanInfo = res.data;
			});
		},
		// 查询升级商品
		 getBuyGoods() {
			this.$u.api.getBuyGoods().then(res=>{
				this.goodsList = data;
			});
		},
		cardModelPopChange(obj) {
			if (!obj.show) {
				this.is_add_show = false;
			}
		},
		addCard(id, skuId) {
			this.goods_id = id;
			this.goods_sku_id = skuId;
			this.is_add_show = true;
		},
	}
};
</script>

<style lang="scss">
.apply-img {
	width: 100%;
	height: 322upx;
	display: block;
}
.apply-cont {
	padding: 20upx 30upx;
	.apply-agree {
		font-size: 24upx;
		color: #999;
		padding: 20upx 0;
	}
	.apply-tip-view {
		text-align: center;
		._importent {
			color: #ff5a5f;
		}
	}
	.apply-tip {
		border-radius: 8upx;
		width: 650upx;
		margin: 26upx auto 46upx;
		box-shadow: 0 0 20upx 4upx #f5f5f5;
		padding: 50upx 0;
		.audit-img {
			image {
				display: block;
				width: 200upx;
				height: 200upx;
				margin: 0 auto;
			}
		}
		.tip-text {
			padding: 0 24upx;
			text-align: center;
			opacity: 0.9;
			line-height: 60upx;
		}
	}
	.sub-btn {
		font-size: 30upx;
		text-align: center;
		color: #ffffff;
		width: 645upx;
		height: 72upx;
		background-color: #fe582e;
		border-radius: 40px;
		line-height: 72upx;
		margin: 50upx auto 0;
	}
}
.apply-num-cont {
	width: 650upx;
	margin: 46upx auto;
	font-size: 24upx;
	color: #898c98;
	text-align: center;
	box-shadow: 0 0 20upx 4upx #f5f5f5;
	padding: 64upx 0;
	.num-weight {
		padding-top: 40upx;
		font-weight: bold;
		color: #3d404c;
		._number {
			margin-right: 10upx;
			font-size: 66upx;
		}
	}
}

.goods-item-box {
	border-bottom: 1upx solid #eee;
	padding: 18upx 0;
	position: relative;
	.sale-end-icon {
		font-size: 90upx;
		color: $uni-color-error;
		display: block;
		position: absolute;
		right: 60upx;
		top: 80upx;
	}

	.right {
		width: calc(100% - 188upx);
	}

	.title {
		font-size: 28upx;
		color: #303133;
		width: 100%;
		height: 76upx;
		line-height: 36upx;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.subTitle {
		font-size: 24upx;
		color: #666;
		white-space: nowrap;
		width: 100%;
		overflow: hidden;
		/* 默认溢出隐藏 */
		text-overflow: ellipsis;
		padding: 6upx 0;
		height: 48upx;
		line-height: 42upx;
		.gradeName {
			padding: 0 10upx;
			line-height: 32upx;
			color: #fe582e;
			border: 1upx solid #fe582e;
			border-radius: 20upx;
			display: inline-block;
			vertical-align: middle;
			height: 32upx;
			margin-right: 10upx;
		}
	}

	.price {
		display: inline-block;
		font-size: 28upx;
		color: #fe582e;
		font-weight: 500;
	}

	.price .icon-rmb {
		font-size: 22upx;
	}

	.imgStyle {
		padding-right: 24upx;
	}

	.imgStyle image {
		width: 160upx;
		height: 160upx;
		border: 1px solid #eee;
		border-radius: 4upx;
		display: block;
	}

	/* 选规格 */
	.add-cart-btn {
		position: absolute;
		right: 0;
		bottom: 45%;
		transform: translateY(50%);
		background-color: #fe582e;
		color: #fff;
		display: block;
		width: 50upx;
		height: 50upx;
		border-radius: 100%;
		font-size: 24upx;
		text-align: center;
		line-height: 50upx;
	}
}
</style>