zhongshen_project/addon/cashier/source/os/components/nc-card/nc-card.vue

<template>
	<view class="container">
		<view class="header-operation">
			<view class="header-operation-left">
				<view :class="{ active: goodsType == 'oncecard' }" @click="switchGoodsType('oncecard')">限次卡</view>
				<view :class="{ active: goodsType == 'timecard' }" @click="switchGoodsType('timecard')">限时卡</view>
				<view :class="{ active: goodsType == 'commoncard' }" @click="switchGoodsType('commoncard')">通用卡</view>
			</view>
			<view class="header-operation-right"></view>
		</view>
		<view class="content">
			<scroll-view scroll-y="true" class="list-wrap" @scrolltolower="getOncecard()" v-if="goodsType == 'oncecard'">
				<view class="table-list" v-show="oncecardData.list.length > 0">
					<view class="table-item" :class="'item-mum-' + itemNum" v-for="(item, index) in oncecardData.list" :key="index" @click="goodsSelect(item)">
						<view class="item-img">
							<image
								:src="
									item.goods_image == 'public/uniapp/default_img/goods.png'
										? $util.img('public/uniapp/default_img/goods.png')
										: $util.img(item.goods_image.split(',')[0], { size: 'small' })
								"
								@error="item.goods_image = 'public/uniapp/default_img/goods.png'"
							></image>
						</view>
						<view class="item-info">
							<view class="item-name">{{ item.goods_name }}</view>
							<view class="item-rights"></view>
							<view class="item-money">
								<text class="util">￥</text>
								{{ item.discount_price | moneyFormat }}
							</view>
						</view>
						<view class="no-stock" v-if="item.stock == 0"><image :src="$util.img('public/uniapp/cashier/stock_empty.png')" mode="heightFix"></image></view>
					</view>
				</view>
				<view class="empty" v-if="!oncecardData.list.length">
					<image :src="$util.img('public/uniapp/cashier/goods_empty.png')" mode="widthFix"></image>
					<view class="tips">暂无卡项</view>
				</view>
			</scroll-view>

			<scroll-view scroll-y="true" class="list-wrap" @scrolltolower="getTimecard()" v-if="goodsType == 'timecard'">
				<view class="table-list" v-show="timecardData.list.length > 0">
					<view class="table-item" :class="'item-mum-' + itemNum" v-for="(item, index) in timecardData.list" :key="index" @click="goodsSelect(item)">
						<view class="item-img">
							<image
								:src="
									item.goods_image == 'public/uniapp/default_img/goods.png'
										? $util.img('public/uniapp/default_img/goods.png')
										: $util.img(item.goods_image.split(',')[0], { size: 'small' })
								"
								@error="item.goods_image = 'public/uniapp/default_img/goods.png'"
							></image>
						</view>
						<view class="item-info">
							<view class="item-name">{{ item.goods_name }}</view>
							<view class="item-rights"></view>
							<view class="item-money">
								<text class="util">￥</text>
								{{ item.discount_price | moneyFormat }}
							</view>
						</view>
						<view class="no-stock" v-if="item.stock == 0"><image :src="$util.img('public/uniapp/cashier/stock_empty.png')" mode="heightFix"></image></view>
					</view>
				</view>
				<view class="empty" v-if="!timecardData.list.length">
					<image :src="$util.img('public/uniapp/cashier/goods_empty.png')" mode="widthFix"></image>
					<view class="tips">暂无卡项</view>
				</view>
			</scroll-view>

			<scroll-view scroll-y="true" class="list-wrap" @scrolltolower="getCommoncard()" v-if="goodsType == 'commoncard'">
				<view class="table-list" v-show="commoncardData.list.length > 0">
					<view class="table-item" :class="'item-mum-' + itemNum" v-for="(item, index) in commoncardData.list" :key="index" @click="goodsSelect(item)">
						<view class="item-img">
							<image
								:src="
									item.goods_image == 'public/uniapp/default_img/goods.png'
										? $util.img('public/uniapp/default_img/goods.png')
										: $util.img(item.goods_image.split(',')[0], { size: 'small' })
								"
								@error="item.goods_image = 'public/uniapp/default_img/goods.png'"
							></image>
						</view>
						<view class="item-info">
							<view class="item-name">{{ item.goods_name }}</view>
							<view class="item-rights"></view>
							<view class="item-money">
								<text class="util">￥</text>
								{{ item.discount_price | moneyFormat }}
							</view>
						</view>
						<view class="no-stock" v-if="item.stock == 0"><image :src="$util.img('public/uniapp/cashier/stock_empty.png')" mode="heightFix"></image></view>
					</view>
				</view>
				<view class="empty" v-if="!commoncardData.list.length">
					<image :src="$util.img('public/uniapp/cashier/goods_empty.png')" mode="widthFix"></image>
					<view class="tips">暂无卡项</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'ncCard',
	props: {
		type: {
			type: String,
			default: 'oncecard'
		}
	},
	data() {
		return {
			goodsType: '',
			pageSize: 35,
			oncecardData: {
				page: 0,
				total: 1,
				list: []
			},
			timecardData: {
				page: 0,
				total: 1,
				list: []
			},
			commoncardData: {
				page: 0,
				total: 1,
				list: []
			},
			searchText: '',
			itemNum: 3,
			mediaQueryOb: null
		};
	},
	created() {
		this.goodsType = this.type;
		this.getOncecard();
		this.getTimecard();
		this.getCommoncard();
	},
	mounted() {
		this.mediaQueryOb = uni.createMediaQueryObserver(this);

		this.mediaQueryOb.observe(
			{
				maxWidth: 1300
			},
			matches => {
				if (matches) this.itemNum = 2;
			}
		);

		this.mediaQueryOb.observe(
			{
				minWidth: 1301,
				maxWidth: 1900
			},
			matches => {
				if (matches) this.itemNum = 3;
			}
		);

		this.mediaQueryOb.observe(
			{
				minWidth: 1901
			},
			matches => {
				if (matches) this.itemNum = 4;
			}
		);
	},
	methods: {
		switchGoodsType(type) {
			this.goodsType = type;
		},

		//卡项相关
		goodsSelect(data) {
			if (!data.stock) return;
			this.$emit('select', data);
		},

		search() {
			if (this.searchText == '') return;
			this.oncecardData.page = 0;
			this.getOncecard();
		},
		getOncecard() {
			if (this.oncecardData.page + 1 > this.oncecardData.total) return;
			this.oncecardData.page += 1;
			this.$api.sendRequest({
				url: '/cashier/storeapi/card/page',
				data: {
					page: this.oncecardData.page,
					search_text: this.searchText,
					page_size: this.pageSize,
					card_type: 'oncecard',
					goods_state: 1,
					status: 1
				},
				success: res => {
					if (res.code == 0) {
						this.oncecardData.total = res.data.page_count || 1;
						if (this.oncecardData.page == 1) this.oncecardData.list = [];
						if (res.data.list.length) this.oncecardData.list = this.oncecardData.list.concat(res.data.list);
					}
				}
			});
		},
		getTimecard() {
			if (this.timecardData.page + 1 > this.timecardData.total) return;
			this.timecardData.page += 1;
			this.$api.sendRequest({
				url: '/cashier/storeapi/card/page',
				data: {
					page: this.timecardData.page,
					search_text: this.searchText,
					card_type: 'timecard',
					goods_state: 1,
					page_size: this.pageSize
				},
				success: res => {
					if (res.code == 0) {
						this.timecardData.total = res.data.page_count || 1;
						if (this.timecardData.page == 1) this.timecardData.list = [];
						if (res.data.list.length) this.timecardData.list = this.timecardData.list.concat(res.data.list);
					}
				}
			});
		},
		getCommoncard() {
			if (this.commoncardData.page + 1 > this.commoncardData.total) return;
			this.commoncardData.page += 1;
			this.$api.sendRequest({
				url: '/cashier/storeapi/card/page',
				data: {
					page: this.commoncardData.page,
					search_text: this.searchText,
					card_type: 'commoncard',
					goods_state: 1,
					page_size: this.pageSize
				},
				success: res => {
					if (res.code == 0) {
						this.commoncardData.total = res.data.page_count || 1;
						if (this.commoncardData.page == 1) this.commoncardData.list = [];
						if (res.data.list.length) this.commoncardData.list = this.commoncardData.list.concat(res.data.list);
					}
				}
			});
		},
		destroyed() {
			this.mediaQueryOb.disconnect();
		},
		switchStoreAfter() {
			this.oncecardData = {
				page: 0,
				total: 1,
				list: []
			};
			this.timecardData = {
				page: 0,
				total: 1,
				list: []
			};
			this.commoncardData = {
				page: 0,
				total: 1,
				list: []
			};
			this.getOncecard();
			this.getTimecard();
			this.getCommoncard();
		}
	},
	watch: {
		serviceCategoryId: function(nval) {
			this.serviceData.page = 0;
			this.$refs.loading.show();
		},
		goodsCategoryId: function(nval) {
			this.goodsData.page = 0;
			this.$refs.goodsLoading.show();
			this.getGoods();
		},
		type: function() {
			this.searchText = '';
		}
	},
	computed: {
		goodsSpec() {
			if (this.allsku && this.skuinfo) {
				return this.allsku['sku_id_' + this.skuinfo.sku_id].goods_spec_format;
			}
			return [];
		}
	}
};
</script>

<style lang="scss">
.container {
	height: 100%;
}

.header-operation {
	padding: 0.2rem 0;
	border-bottom: 0.01rem solid #e6e6e6;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.header-operation-left {
		display: flex;
		align-items: center;

		view {
			width: 1rem;
			height: 0.35rem;
			line-height: 0.35rem;
			text-align: center;
			font-size: 0.14rem;
			border: 0.01rem solid #e6e6e6;
			border-left-width: 0;
			transition: all 0.3s;
			cursor: pointer;

			&:hover,
			&.active {
				border-color: $primary-color;
				color: $primary-color;
				background-color: rgba($color: $primary-color, $alpha: 0.1);
				box-shadow: -0.01rem 0 0 0 $primary-color;
			}

			&:first-child {
				border-left-width: 0.01rem;
				box-shadow: none;
			}
		}
	}
	.header-operation-right {
		display: flex;
		align-items: center;
		input {
			background: #ffffff;
			border: 0.01rem solid #e6e6e6;
			border-radius: 0.02rem;
			height: 0.36rem;
			padding: 0 0.15rem;
			font-size: 0.14rem;
		}
		.search-btn {
			width: 0.36rem;
			height: 0.36rem;
			background: #ffffff;
			border: 0.01rem solid #e6e6e6;
			border-radius: 0.02rem;
			border-left: 0;
			text-align: center;
			line-height: 0.36rem;
			cursor: pointer;
		}
	}
}

.content {
	box-sizing: border-box;
	padding: 0.15rem 0;
	height: calc(100% - 0.78rem);
	transform: rotate(0);
	display: flex;
	flex-direction: column;
}

.type-switch {
	width: 100%;
	font-size: 0.14rem;
	margin-bottom: 0.15rem;
	white-space: nowrap;

	.switch-item {
		padding: 0.1rem 0.2rem;
		color: #303133;
		font-size: 0.14rem;
		cursor: pointer;
		display: inline-block;
	}
	.switch-item.active {
		background-color: rgba(133, 88, 250, 0.1);
		color: $primary-color;
	}
}

.list-wrap {
	flex: 1;
	height: 0;
}

.table-list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;

	.table-item {
		border: 0.01rem solid #e6e6e6;
		display: flex;
		align-items: center;
		min-width: 2rem;
		padding: 0.1rem;
		box-sizing: border-box;
		margin-right: 0.1rem;
		margin-bottom: 0.1rem;
		cursor: pointer;
		transition: all 0.3s;
		position: relative;

		&.item-mum-2 {
			width: calc((100% - 0.1rem) / 2);
			&:nth-child(2n + 2) {
				margin-right: 0;
			}
		}

		&.item-mum-3 {
			width: calc((100% - 0.2rem) / 3);
			&:nth-child(3n + 3) {
				margin-right: 0;
			}
		}

		&.item-mum-4 {
			width: calc((100% - 0.3rem) / 4);
			&:nth-child(4n + 4) {
				margin-right: 0;
			}
		}

		&:hover {
			background-color: #eee;
		}

		.item-img {
			width: 0.7rem;
			height: 0.7rem;
			min-width: 0.7rem;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.item-info {
			margin-left: 0.1rem;
			cursor: pointer;
			flex: 1;
			.item-name {
				word-break: break-all;
				text-overflow: ellipsis;
				overflow: hidden;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				height: 0.4rem;
			}
			.item-time {
				font-size: 0.12rem;
				color: #909399;
			}
			.item-money {
				font-size: 0.14rem;
				color: #fe2278;
				line-height: 1;
				margin-top: 0.05rem;

				.util {
					font-size: 0.12rem;
				}
			}

			.item-rights {
				font-size: 0.12rem;
				color: #909399;

				.iconfont {
					margin-left: 0.05rem;
				}
			}

			.rights-wrap {
				width: 1rem;
				padding: 0.1rem;
				margin-top: 0.15rem;
				background-color: #fff;
				border: 0.01rem solid #ebeef5;
				border-radius: 0.04rem;
				box-shadow: 0 0.01rem 0.12rem 0 rgba(0, 0, 0, 0.1);
			}
		}

		.no-stock {
			position: absolute;
			z-index: 1;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(0, 0, 0, 0.5);
			cursor: not-allowed;

			image {
				height: 60%;
			}
		}
	}
	.item-card {
		border: 0.01rem solid #e6e6e6;
		display: flex;
		align-items: center;
		min-width: 2.5rem;
		padding: 0;
		box-sizing: border-box;
		margin-right: 0.1rem;
		margin-bottom: 0.1rem;
		cursor: pointer;
		transition: all 0.3s;
		position: relative;
		flex-direction: column;
		border-radius: 0.03rem;
		overflow: hidden;
		.item-top {
			width: 100%;
			display: flex;
			flex-direction: column;
			height: 0.9rem;
			background-size: 100% 100%;
			padding: 0.1rem;
			box-sizing: border-box;
			color: #ffffff;
			justify-content: space-between;
			.item-title {
				display: flex;
				width: 100%;
				justify-content: space-between;
				.item-rights {
					border: 0.01rem solid #fff;
					border-radius: 0.03rem;
					font-size: 0.12rem;
					padding: 0.01rem 0.03rem;
				}
				.item-name {
					font-weight: 600;
				}
			}
			.item-time {
				text-align: right;
			}
		}
		.item-bottom {
			display: flex;
			justify-content: space-between;
			width: 100%;
			padding: 0.04rem 0.1rem;
			box-sizing: border-box;
			align-items: center;
			.item-money {
				color: #fe3c83;
			}
			.item-btn {
				font-size: 0.12rem;
				.iconfont {
					margin-left: 0.03rem;
					font-size: 0.12rem;
				}
			}
		}
	}
}

.sku-wrap {
	width: 6rem;
	background-color: #fff;
	border-radius: 0.04rem;
	box-shadow: 0 0.01rem 0.12rem 0 rgba(0, 0, 0, 0.1);

	.header,
	.footer {
		height: 0.5rem;
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: 0.01rem solid #e6e6e6;
		position: relative;

		.title {
			font-size: 0.16rem;
			font-weight: bold;
		}

		.iconfont {
			line-height: 1;
			position: absolute;
			right: 0.15rem;
			font-size: 0.2rem;
			cursor: pointer;
		}
	}

	.body {
		padding: 0.15rem 0.15rem 0.25rem 0.15rem;

		scroll-view {
			max-height: 2rem;
		}

		.item-card {
			border: 0.01rem solid #e6e6e6;
			display: flex;
			align-items: center;
			width: 2.5rem;
			padding: 0;
			box-sizing: border-box;
			margin-right: 0.1rem;
			margin-bottom: 0.1rem;
			cursor: pointer;
			transition: all 0.3s;
			position: relative;
			flex-direction: column;
			border-radius: 0.03rem;
			overflow: hidden;
			margin: 0 auto;
			.item-top {
				width: 100%;
				display: flex;
				flex-direction: column;
				height: 0.9rem;
				background-size: 100% 100%;
				padding: 0.1rem;
				box-sizing: border-box;
				color: #ffffff;
				justify-content: space-between;
				.item-title {
					display: flex;
					width: 100%;
					justify-content: space-between;
					.item-rights {
						border: 0.01rem solid #fff;
						border-radius: 0.03rem;
						font-size: 0.12rem;
						padding: 0.01rem 0.03rem;
					}
					.item-name {
						font-weight: 600;
					}
				}
				.item-time {
					text-align: right;
				}
			}
			.item-bottom {
				display: flex;
				justify-content: space-between;
				width: 100%;
				padding: 0.04rem 0.1rem;
				box-sizing: border-box;
				align-items: center;
				.item-money {
					color: #fe3c83;
				}
				.item-btn {
					font-size: 0.12rem;
					.iconfont {
						margin-left: 0.03rem;
						font-size: 0.12rem;
					}
				}
			}
		}
	}

	.spec {
		line-height: 0.35rem;
		font-weight: bold;
		margin-top: 0.1rem;
	}

	.spec-value {
		.value-item {
			display: inline-block;
			height: 0.3rem;
			line-height: 0.3rem;
			background-color: #fff;
			color: #333;
			border: 0.01rem solid #e6e6e6;
			margin: 0.05rem 0.1rem 0 0;
			padding: 0 0.1rem;
			cursor: pointer;
			transition: all 0.3s;
			border-radius: 0.04rem;

			&:hover,
			&.active {
				background: rgba($color: $primary-color, $alpha: 0.1);
				border-color: $primary-color;
				color: $primary-color;
			}
		}
	}

	.goods-info {
		display: flex;

		.image {
			width: 0.7rem;
			height: 0.7rem;
			margin-right: 0.1rem;

			image {
				width: 100%;
			}
		}

		.info {
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.price {
				line-height: 1;
				margin-top: 0.05rem;
			}
		}
	}

	.footer {
		border-top: 0.01rem solid #e6e6e6;
		border-bottom: unset;

		button {
			width: 1rem;
		}
	}
}

.empty {
	text-align: center;
	padding-top: 1.2rem;

	image {
		width: 2rem;
	}

	.tips {
		color: #999;
		margin-top: 0.15rem;
	}
}

/deep/ .uni-scroll-view {
	&::-webkit-scrollbar {
		width: 0.06rem;
		height: 0.06rem;
		background-color: rgba($color: #000000, $alpha: 0);
	}

	&::-webkit-scrollbar-button {
		display: none;
	}

	&::-webkit-scrollbar-thumb {
		border-radius: 0.06rem;
		box-shadow: inset 0 0 0.06rem rgba(45, 43, 43, 0.45);
		background-color: #ddd;
		display: none;
	}

	&:hover::-webkit-scrollbar-thumb {
		display: block;
	}

	&::-webkit-scrollbar-track {
		background-color: transparent;
	}
}
</style>