caimei-applets-caimei/pages/seller/components/cm-seller-popup.vue

<template name="coupon">
	<view class="coupon-template">
		<!-- 选择机构 -->
		<tui-bottom-popup :radius="true" :show="show" @close="hidePopup">
			<view class="tui-popup-box clearfix">
				<view class="title">分配销售</view>
				<view class="title-text">请选择一个销售人员进行分配</view>
				<view class="tui-popup-main coupon">
					<scroll-view class="tui-popup-scroll" scroll-y="true">
						<view
							v-for="(seller, index) in dataList"
							:key="index"
							class="list"
							@click.stop="checkedSeller(index)"
						>
							<view class="list-cell-le">
								{{ seller.name  }}
							</view>
							<view class="list-cell-btn">
								<view
									class="checkbox iconfont"
									:class="[seller.ischecked ? 'icon-yixuanze' : 'icon-weixuanze']"
								>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="tui-right-flex tui-popup-btn" :style="{ paddingBottom: isIphoneX ? '68rpx' : '34rpx' }">
					<view class="tui-flex-1"> <view class="tui-button" @click="confirmSeller">确定</view> </view>
				</view>
			</view>
		</tui-bottom-popup>
	</view>
</template>

<script>
export default {
	name: 'cm-goods-popup',
	props: {
		show: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			isIphoneX: this.$store.state.isIphoneX,
			checkedIndex: 0,
			isShowClose: false,
			dataList: []
		}
	},
	created() {
		this.userClubChoseList()
	},
	methods: {
		async userClubChoseList() {
			const userInfo = await this.$api.getStorage()
			this.SellerService.userClubChoseList({ spId : userInfo.serviceProviderId })
				.then(response => {
					let data = response.data
					if (data && data.length > 0) {
						 this.dataList = data.map((el,index)=>{
							el.ischecked = false
							return el
						})
					}
					
				})
				.catch(error => {
					console.log('获取可分配协销列表异常')
				})
		},
		checkedSeller(idx) {
			// 选择协销
			this.checkedIndex = idx
			this.dataList.forEach((el, index) => {
				if (this.checkedIndex == index) {
					el.ischecked = !el.ischecked
				} else {
					el.ischecked = false
				}
			})
		},
		hidePopup(){
			this.$parent.isSellerpopup = false
		},
		confirmSeller() {
			let sellerData = null
			let checkedData = false
			this.dataList.forEach((el, index) => {
				if (el.ischecked) {
					sellerData = el
					checkedData = true
				}
			})
			if(!checkedData){
				this.$util.msg('请选择一个协销进行分配~', 2000)
				return
			}
			this.$emit('handleChoiceaSeller', sellerData)
			this.$parent.isSellerpopup = false
		}
	}
}
</script>

<style lang="scss">
.coupon-template {
	width: 100%;
	height: auto;
	background: #ffffff;
	float: left;
	margin-top: 24rpx;
	.coupon-title {
		width: 702rpx;
		padding: 0 24rpx;
		height: 88rpx;
		line-height: 88rpx;
		position: relative;
		.text {
			font-size: $font-size-28;
			color: $text-color;
		}
		.text-coupon {
			display: inline-block;
			float: right;
			padding-right: 30rpx;
			line-height: 88rpx;
			font-size: 28rpx;
			color: #f94b4b;
		}
		.iconfont {
			width: 50rpx;
			height: 88rpx;
			line-height: 88rpx;
			color: #999999;
			display: block;
			position: absolute;
			right: 0;
			top: 0;
		}
	}
}
.tui-popup-box {
	position: relative;
	box-sizing: border-box;
	min-height: 220rpx;
	padding: 24rpx 32rpx 0 32rpx;
	.title {
		font-size: $font-size-32;
		color: $text-color;
		line-height: 68rpx;
		text-align: center;
		float: left;
		width: 100%;
		height: 68rpx;
		box-sizing: border-box;
		padding: 0 24rpx;
	}
	.title-text {
		width: 100%;
		height: 66rpx;
		line-height: 66rpx;
		padding: 0 15rpx;
		background: #FEF6F1;
		box-sizing: border-box;
		float: left;
		font-size: 26rpx;
		color: #FF5B00;
	}
	.tui-popup-main {
		width: 100%;
		float: left;
		padding-top: 10rpx;
		.tui-popup-scroll {
			width: 100%;
			height: 660rpx;
			.list {
				width: 100%;
				height: 100rpx;
				box-sizing: border-box;
				background-size: cover;
				border-bottom: 1px solid #e1e1e1;
				.list-cell-le {
					height: 100%;
					line-height: 100rpx;
					box-sizing: border-box;
					float: left;
					text-align: left;
					font-size: $font-size-26;
					color: #333333;
				}
				.list-cell-btn {
					width: 40rpx;
					height: 100rpx;
					line-height: 100rpx;
					float: right;
					.checkbox {
						width: 40rpx;
						line-height: 128rpx;
						float: right;
						box-sizing: border-box;
						text-align: center;
						text-decoration: none;
						-webkit-tap-highlight-color: transparent;
						overflow: hidden;
						font-size: $font-size-34;
						&.icon-weixuanze {
							color: #b2b2b2;
						}
						&.icon-yixuanze {
							color: #FF5B00;
						}
					}
				}
			}
		}
		.tui-popup-coupon {
			width: 100%;
			height: 500rpx;
			box-sizing: border-box;
			padding: 30rpx 20rpx;
			.tui-popup-h1 {
				width: 100%;
				height: 66rpx;
				display: flex;
				align-items: center;
				.tui-popup-text {
					flex: 1;
					height: 66rpx;
					line-height: 66rpx;
					font-size: $font-size-30;
					color: #333333;
					&.red {
						color: #f94b4b;
					}
					&.bold {
						font-weight: bold;
					}
					&.left {
						text-align: left;
					}
					&.right {
						text-align: right;
					}
				}
			}
		}
	}
	.tui-popup-btn {
		width: 100%;
		height: auto;
		float: left;
		margin-top: 24rpx;
		.tui-button {
			width: 100%;
			height: 88rpx;
			background: $btn-confirm;
			line-height: 88rpx;
			text-align: center;
			color: #ffffff;
			font-size: $font-size-28;
			border-radius: 44rpx;
		}
	}
}
</style>