caimei-applets-caimei/components/cm-module/cm-seller/cm-report-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>
				<template v-if="dataList.length > 0">
					<view class="title-search">
						<view class="search-from name">
							<text class="iconfont icon-iconfonticonfontsousuo1"></text>
							<input
								class="input"
								type="text"
								confirm-type="search"
								v-model="listQuery.keyWord"
								@input="onShowClose"
								@confirm="initclubList()"
								placeholder="搜索商品名称 / 报备关键词"
								maxlength="16"
							/>
							<text class="iconfont icon-shanchu1" v-if="isShowClose" @click="delInputText()"></text>
						</view>
					</view>
					<view class="tui-popup-main coupon">
						<scroll-view class="tui-popup-scroll" scroll-y="true">
							<view
								v-for="(remark, index) in dataList"
								:key="index"
								class="list clearfix"
								@click.stop="checkedCoupon(index)"
							>
								<view
									class="list-cell-icon"
									:class="{
										reviewed: remark.type == 1,
										failed: remark.type == 2,
										approved: remark.type == 3
									}"
								>
								</view>
								<view class="list-cell-title">
									<view class="list-cell-h1">{{ remark.clubName }}</view>
									<view class="list-cell-p"> {{ remark.addDate }} </view>
								</view>
								<view class="list-cell-content clearfix">
									<view class="tui-remarks-goods" v-if="remark.product">
										<view class="goods-image">
											<image :src="remark.product.images" mode=""></image>
										</view>
										<view class="goods-main">
											<view class="name"> {{ remark.product.name }} </view>
											<view class="shop">{{ remark.reportText }}</view>
										</view>
									</view>
									<view class="tui-remarks-text" v-else> {{ remark.reportText }} </view>
									<view class="list-cell-btn">
										<view
											class="checkbox iconfont"
											:class="[remark.ischecked ? 'icon-yixuanze' : 'icon-weixuanze']"
										>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</template>
				<template v-else>
					<view class="tui-remarks-empty">
						暂无任何数据，请新建报备~
					</view>
				</template>
				<view class="tui-right-flex tui-popup-btn" :style="{ paddingBottom: isIphoneX ? '68rpx' : '34rpx' }">
					<view class="tui-flex-1"> <view class="tui-button" @click="hidePopup">确定</view> </view>
					<view class="tui-flex-1">
						<view class="tui-button-text" @click="handleAddReport">新建报备 ></view>
					</view>
				</view>
			</view>
		</tui-bottom-popup>
	</view>
</template>

<script>
export default {
	name: 'coupon',
	props: {
		show: {
			type: Boolean,
			default: false
		},
		popupType:{
			type:Number,
		},
		reportInfo:{
			type:Object,
			default: {}
		}
	},
	data() {
		return {
			isIphoneX: this.$store.state.isIphoneX,
			checkedIndex: 0,
			isShowClose: false,
			listQuery: {
				keyWord: '',
				pageNum: 1,
				pageSize: 200,
				clubId: 0,
				serviceProviderId: 0
			},
			dataList: [
				{
					clubName: '采美信息技术有限公司',
					recordName: '吴小研',
					addDate: '2022-08-10',
					ischecked: false,
					reportText: '请填写报备说明请填写报备说明请填写报备说明请填写报备说明请填写报备说明请填写报备说明',
					product: {
						images: 'https://img.caimei365.com/group1/M00/03/FC/rB-lGGInLUKAJAR0AAOvlb8lQKk394.jpg',
						name:
							'易可美贻贝粘蛋白私密修复精华水易可美贻贝粘蛋白私密修复精华水易可美贻贝粘蛋白私密修复精华水'
					},
					type: 1
				},
				{
					clubName: '采美信息技术有限公司',
					recordName: '吴小研',
					addDate: '2022-08-10',
					ischecked: false,
					reportText: '请填写报备说明请填写报备说明请填写报备说明请填写报备说明请填写报备说明请填写报备说明',
					product: {
						images: 'https://img.caimei365.com/group1/M00/03/FC/rB-lGGInLUKAJAR0AAOvlb8lQKk394.jpg',
						name:
							'易可美贻贝粘蛋白私密修复精华水易可美贻贝粘蛋白私密修复精华水易可美贻贝粘蛋白私密修复精华水'
					},
					type: 2
				},
				{
					clubName: '采美信息技术有限公司',
					recordName: '吴小研',
					addDate: '2022-08-10',
					ischecked: false,
					reportText: '请填写报备说明请填写报备说明请填写报备说明请填写报备说明请填写报备说明请填写报备说明',
					product: null,
					type: 3
				},
				{
					clubName: '采美信息技术有限公司',
					recordName: '吴小研',
					addDate: '2022-08-10',
					ischecked: false,
					reportText: '请填写报备说明请填写报备说明请填写报备说明请填写报备说明请填写报备说明请填写报备说明',
					product: {
						images: 'https://img.caimei365.com/group1/M00/03/FC/rB-lGGInLUKAJAR0AAOvlb8lQKk394.jpg',
						name:
							'易可美贻贝粘蛋白私密修复精华水易可美贻贝粘蛋白私密修复精华水易可美贻贝粘蛋白私密修复精华水'
					},
					type: 1
				},
				{
					clubName: '采美信息技术有限公司',
					recordName: '吴小研',
					addDate: '2022-08-10',
					ischecked: false,
					reportText: '请填写报备说明请填写报备说明请填写报备说明请填写报备说明请填写报备说明请填写报备说明',
					product: {
						images: 'https://img.caimei365.com/group1/M00/03/FC/rB-lGGInLUKAJAR0AAOvlb8lQKk394.jpg',
						name:
							'易可美贻贝粘蛋白私密修复精华水易可美贻贝粘蛋白私密修复精华水易可美贻贝粘蛋白私密修复精华水'
					},
					type: 2
				},
				{
					clubName: '采美信息技术有限公司',
					recordName: '吴小研',
					addDate: '2022-08-10',
					ischecked: false,
					reportText: '请填写报备说明请填写报备说明请填写报备说明请填写报备说明请填写报备说明请填写报备说明',
					product: null,
					type: 3
				}
			],
		}
	},
	created() {
		this.listQuery.clubId = this.reportInfo.clubId
		this.userClubReportList()
	},
	methods: {
		async userClubReportList() {
			const userInfo = await this.$api.getStorage()
			this.listQuery.serviceProviderId = userInfo.serviceProviderId
			this.UserService.userClubReportList(this.listQuery)
			.then(response => {
				let data = response.data
				if (data.list && data.list.length > 0) {
					 this.dataList = data.list.map((el,index)=>{
						el.ischecked = false
						return el
					})
				}
			})
			.catch(error => {
				this.$util.msg(error.msg, 2000)
			})
		},
		checkedCoupon(idx) {
			// 选择商品
			this.checkedIndex = idx
			this.dataList.forEach((el, index) => {
				if (this.checkedIndex == index) {
					el.ischecked = !el.ischecked
				} else {
					el.ischecked = false
				}
			})
		},
		handleAddReport(){
			// 跳转新建报备
			this.$parent.isReportpopup = false
			this.$api.navigateTo(`/pages/seller/remarks/report-add?type=${this.popupType}&reportInfo=${JSON.stringify(this.reportInfo)}`)
		},
		onShowClose() {
			//输入框失去焦点时触发
			if (this.listQuery.name != '') {
				this.isShowClose = true
			} else {
				this.isShowClose = false
			}
		},
		delInputText() {
			//清除输入框内容
			this.listQuery.name = ''
			this.isShowClose = false
		},
		hidePopup() {
			let report = null
			let checkedData = false
			this.dataList.forEach((el, index) => {
				if (el.ischecked) {
					report = el
					checkedData = true
				}
			})
			if (checkedData) {
				this.$emit('handleChoiceaReport', report)
			}
			this.$parent.isReportpopup = 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;
	}
	.tui-remarks-empty{
		width: 100%;
		height: 400rpx;
		line-height: 400rpx;
		font-size: 26rpx;
		color: #999999;
		text-align: center;
	}
	.title-search {
		width: 100%;
		height: 66rpx;
		background: #ffffff;
		box-sizing: border-box;
		float: left;
		.search-from {
			width: 100%;
			height: 100%;
			background: #f7f7f7;
			border-radius: 32rpx;
			float: left;
			position: relative;
			.input {
				width: 500rpx;
				height: 64rpx;
				float: left;
				line-height: 64rpx;
				color: $text-color;
				font-size: $font-size-24;
			}
			.icon-iconfonticonfontsousuo1 {
				width: 64rpx;
				height: 64rpx;
				line-height: 64rpx;
				text-align: center;
				display: block;
				font-size: $font-size-38;
				float: left;
				color: #999999;
			}
			.icon-shanchu1 {
				font-size: $font-size-32;
				color: #999999;
				position: absolute;
				width: 64rpx;
				height: 64rpx;
				line-height: 64rpx;
				text-align: center;
				top: 0;
				right: 0;
				z-index: 10;
			}
		}
	}
	.tui-popup-main {
		width: 100%;
		float: left;
		padding-top: 40rpx;
		.tui-popup-scroll {
			width: 100%;
			height: 800rpx;
			.list {
				width: 100%;
				padding-top: 20rpx;
				box-sizing: border-box;
				background-size: cover;
				position: relative;
				border-bottom: 1px solid #e1e1e1;
				.list-cell-icon {
					width: 128rpx;
					height: 128rpx;
					position: absolute;
					top: 30rpx;
					right: 32rpx;
					&.reviewed {
						background: url(https://static.caimei365.com/app/img/icon/icon-verify1@2x.png);
						background-size: cover;
					}
					&.failed {
						background: url(https://static.caimei365.com/app/img/icon/icon-verify2@2x.png);
						background-size: cover;
					}
					&.approved {
						background: url(https://static.caimei365.com/app/img/icon/icon-verify3@2x.png);
						background-size: cover;
					}
				}
				.list-cell-title {
					width: 100%;
					height: auto;
					height: 56rpx;
					line-height: 56rpx;
					box-sizing: border-box;
					.list-cell-h1 {
						float: left;
						width: 50%;
						font-size: $font-size-26;
						color: #333333;
						text-align: left;
						text-overflow: ellipsis;
						overflow: hidden;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						line-clamp: 1;
						-webkit-box-orient: vertical;
					}
					.list-cell-p {
						float: right;
						width: 50%;
						font-size: $font-size-26;
						color: #999999;
						text-align: right;
					}
				}
				.list-cell-content {
					width: 100%;
					box-sizing: border-box;
					.tui-remarks-text {
						width: 570rpx;
						height: 168rpx;
						float: left;
						box-sizing: border-box;
						padding: 20rpx 20rpx 20rpx 0;
						border-radius: 6rpx;
						line-height: 42rpx;
						color: #999999;
						text-overflow: ellipsis;
						overflow: hidden;
						display: -webkit-box;
						-webkit-line-clamp: 3;
						line-clamp: 3;
						-webkit-box-orient: vertical;
						font-size: 26rpx;
					}
					.tui-remarks-goods {
						width: 646rpx;
						height: 168rpx;
						float: left;
						box-sizing: border-box;
						padding: 20rpx 0;
						border-radius: 6rpx;
						.goods-image {
							width: 128rpx;
							height: 128rpx;
							float: left;
							image {
								width: 128rpx;
								height: 128rpx;
								display: block;
								border-radius: 4rpx;
							}
						}
						.goods-main {
							width: 440rpx;
							height: 128rpx;
							box-sizing: border-box;
							padding-left: 24rpx;
							float: left;
							.name {
								width: 100%;
								height: 48rpx;
								box-sizing: border-box;
								line-height: 48rpx;
								color: #333333;
								text-overflow: ellipsis;
								overflow: hidden;
								display: -webkit-box;
								-webkit-line-clamp: 1;
								line-clamp: 1;
								-webkit-box-orient: vertical;
								font-size: 26rpx;
							}
							.shop {
								line-height: 36rpx;
								color: #999999;
								font-size: 26rpx;
								text-overflow: ellipsis;
								overflow: hidden;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								line-clamp: 2;
								-webkit-box-orient: vertical;
								font-size: 24rpx;
							}
						}
					}
					.list-cell-btn {
						width: 40rpx;
						height: 168rpx;
						float: right;
						.checkbox {
							width: 40rpx;
							line-height: 168rpx;
							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: #e15616;
							}
						}
					}
				}
			}
		}
	}
	.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;
		}
		.tui-button-text{
			width: 600rpx;
			height: 48rpx;
			line-height: 48rpx;
			text-align: center;
			color: #e15616;
			font-size: $font-size-26;
			margin: 0 auto;
			margin-top: 15rpx;
		}
	}
}
</style>