caimei-applets-mcare/pages/seller/goods/list.vue

<template>
	<view class="container product clearfix">
		<view class="club-search clearfix">
			<view class="search-from name">
				<text class="iconfont icon-iconfonticonfontsousuo1"></text>
				<input
					class="input"
					type="text"
					confirm-type="search"
					v-model="listQuery.productName"
					@confirm="getMallProduct"
					placeholder="搜索商品"
					maxlength="12"
				/>
			</view>
		</view>
		<view class="product-content">
			<view :class="{ 'tui-order-list': scrollTop >= 0 }" class="clearfix">
				<!-- 空白页 -->
				<view class="empty-container" v-if="isEmpty">
					<image class="empty-container-image" :src="staticUrl + 'icon_like_empty@2x.png'"></image>
					<text class="error-text">暂无相关商品~</text>
				</view>
				<!-- 列表 -->
				<view class="tui-cart-cell  tui-mtop" v-for="(pros, index) in productList" :key="index">
					<view class="tui-goods-item" @click.stop="navToDetailPage(pros.productId)">
						<view class="tui-goods-main">
							<view class="tui-goods-image"> <image :src="pros.mainImage" class="tui-goods-img" /> </view>
							<view class="tui-goods-info">
								<text class="list-details-title">{{ pros.name }}</text>
								<view class="list-details-price">
									<view class="list-price">
										<text class="price-larger"> ￥{{ pros.price | NumFormat }} </text>
									</view>
									<view class="add-cart-btn" @click.stop="showPopup(pros)">数量</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!--加载loadding-->
				<tui-loadmore :visible="loadding" :index="3" type="black" />
				<tui-nomore :visible="!pullUpOn" :backgroundColor="'#ffffff'" :text="nomoreText" />
				<!--加载loadding-->
			</view>
		</view>
		<!-- 选择规格弹窗 -->
		<cm-unit-popup
			v-if="popupShow1"
			:popupShow="popupShow1"
			:skuProduct="handleData"
			@skuClick="handleSkuClick"
			@addCart="handleAddClubCart"
		/>
		<!-- 弹窗提示 -->
		<tui-modal
			:show="modal"
			@click="handleClick"
			@cancel="hideMobel"
			:content="contentModalText"
			:button="modalButton"
			color="#333"
			:size="32"
			shape="circle"
			:maskClosable="false"
		>
		</tui-modal>
		<!-- 可拖动悬浮按钮 -->
		<cm-drag
			:cartNum="cartQuantity"
			:isDock="true"
			:existTabBar="true"
			@btnClick="btnClick"
			@btnTouchstart="btnTouchstart"
			@btnTouchend="btnTouchend"
		/>
	</view>
</template>
<script>
import cmDrag from '@/components/cm-custom/cm-drag.vue'
import cmUnitPopup from './components/cm-unit-popup.vue'

import { mapState, mapMutations } from 'vuex'
const defaultListQuery = {
	productName: '',
	pageNum: 1,
	pageSize: 10
}
export default {
	components: {
		cmDrag,
		cmUnitPopup
	},
	data() {
		return {
			staticUrl: this.global.staticUrl,
			isIphoneX: this.$store.state.isIphoneX,
			modalButton: [
				{
					text: '取消',
					type: 'gray',
					plain: true //是否空心
				},
				{
					text: '确认',
					customStyle: {
						color: '#fff',
						bgColor: 'linear-gradient(90deg, #F28F31 0%, #F3B574 100%)'
					},
					plain: false
				}
			],
			cartQuantity: 0,
			popupShow1: false,
			listQuery: Object.assign({}, defaultListQuery),
			productList: [],
			handleData: {},
			scrollTop: 0,
			isEmpty: false,
			loadding: false,
			pullUpOn: true,
			pullFlag: true,
			hasNextPage: false,
			navbarHeight: '',
			nomoreText: '上拉显示更多',
			contentModalText: '', //操作文字提示语句
			modal: false,
			addParams: {
				serviceProviderId: 0, //协销Id
				skuId: 0,
				clubId: 0,
				productCount: 1,
				type: 1
			}
		}
	},
	onLoad() {
		this.initGetStotage()
	},
	filters: {
		NumFormat: function(value) {
			//处理金额
			if (!value) return '0.00'
			let number = Number(value).toFixed(2)
			return number
		}
	},
	computed: {
		...mapState(['hasLogin', 'userInfo'])
	},
	methods: {
		...mapMutations(['login', 'logout']),
		async initGetStotage() {
			const clubInfo = await this.$api.getComStorage('orderUserInfo')
			const userInfo = await this.$api.getStorage()
			this.addParams.clubId = clubInfo.clubId ? clubInfo.clubId : 0
			this.addParams.serviceProviderId = userInfo.serviceProviderId ? userInfo.serviceProviderId : 0
			this.getMallProduct()
			this.getClubProductNum()
		},
		async getMallProduct() {
			try {
				this.productList = []
				this.listQuery.pageNum = 1
				const res = await this.SellerService.mallProduct(this.listQuery)
				const data = res.data
				if (data.results && data.results.length > 0) {
					this.isEmpty = false
					this.hasNextPage = data.hasNextPage
					this.productList = data.results
					this.pullFlag = false
					setTimeout(() => {
						this.pullFlag = true
					}, 500)
					if (this.hasNextPage) {
						this.pullUpOn = false
						this.nomoreText = '上拉显示更多'
					} else {
						if (this.productList.length < 8) {
							this.pullUpOn = true
							this.loadding = false
						} else {
							this.pullUpOn = false
							this.loadding = false
							this.nomoreText = '已至底部'
						}
					}
				} else {
					this.isEmpty = true
				}
			} catch (error) {
				this.$util.msg(error.msg, 2000)
			}
		},
		async onReachBottomData(index) {
			//上拉加载
			try {
				this.listQuery.pageNum += 1
				const res = await this.SellerService.mallProduct(this.listQuery)
				const data = res.data
				if (data.results && data.results.length > 0) {
					this.hasNextPage = data.hasNextPage
					this.productList = this.productList.concat(data.results)
					this.pullFlag = false // 防上拉暴滑
					setTimeout(() => {
						this.pullFlag = true
					}, 500)
					if (this.hasNextPage) {
						this.pullUpOn = false
						this.nomoreText = '上拉显示更多'
					} else {
						this.pullUpOn = false
						this.loadding = false
						this.nomoreText = '已至底部'
					}
				}
			} catch (error) {
				this.$util.msg(error.msg, 2000)
			}
		},
		handleAddClubCart(data) {
			//增加购物车成功和toast弹窗提示成功
			this.addParams = { ...this.addParams, ...data }
			this.shoppingAddCart(this.addParams)
		},
		async shoppingAddCart(params) {
			try {
				await this.SellerService.sellerAddCart(params)
				this.$util.msg('加入购物车成功', 1500, true, 'success')
				this.getClubProductNum()
			} catch (error) {
				console.log('error', error.msg)
			}
		},
		handleSkuClick(sku) {
			// this.handleData.price = sku.price
		},
		async getClubProductNum() {
			// 获取协销下机构购物车数量
			try {
				const res = await this.SellerService.clubCartCount({
					clubId: this.addParams.clubId,
					serviceProviderId: this.addParams.serviceProviderId
				})
				this.cartQuantity = res.data
			} catch (error) {
				console.log('获取机构购物车数量失败')
			}
		},
		handleClick(e) {
			//取消收藏
			if (e.index == 1) {
				this.handleDeleteUserLike()
			}
			this.modal = false
		},
		handleDeleteUserLike() {
			//操作取消收藏
			this.ProductService.getDeleteUserLike({
				productIds: this.productIds,
				userId: this.listQuery.userId
			})
				.then(response => {
					this.$util.msg('取消收藏成功', 2000, true, 'success')
					setTimeout(() => {
						this.getMallProduct()
					}, 2000)
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		hideMobel() {
			this.modal = false
		},
		showPopup(pros) {
			// 弹窗显示
			this.popupShow1 = true
			this.handleData = pros
		},
		navToDetailPage(id) {
			this.isModallayer = true
			this.$api.navigateTo(`/pages/goods/product?id=${id}`)
			this.isModallayer = false
		},
		btnClick() {
			this.$api.navigateTo('/pages/seller/cart/index')
		},
		btnTouchstart() {
			// console.log('btnTouchstart');
		},
		btnTouchend() {
			// console.log('btnTouchend');
		}
	},
	onPageScroll(e) {
		//实时获取到滚动的值
	},
	onReachBottom() {
		if (this.hasNextPage) {
			this.loadding = true
			this.pullUpOn = true
			this.onReachBottomData()
		}
	},
	onPullDownRefresh() {
		setTimeout(() => {
			this.listQuery.pageNum = 1
			uni.stopPullDownRefresh()
		}, 200)
	},
	onShow() {}
}
</script>

<style lang="scss">
@import '@/uni.scss';
page {
	background: #fff;
}
.empty-container {
	z-index: 9999;
}
.club-search {
	height: 114rpx;
	width: 100%;
	padding: 24rpx;
	box-sizing: border-box;
	background: #ffffff;
	display: flex;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99999;
	.search-from {
		width: 100%;
		height: 66rpx;
		background: #f7f7f7;
		border-radius: 34rpx;
		float: left;
		position: relative;
		box-sizing: border-box;
		padding: 0 24rpx 0 80rpx;
		.icon-iconfonticonfontsousuo1 {
			width: 80rpx;
			height: 66rpx;
			line-height: 66rpx;
			text-align: center;
			display: block;
			font-size: $font-size-38;
			color: #999999;
			position: absolute;
			left: 0;
			top: 0;
		}
		.input {
			width: 100%;
			height: 66rpx;
			float: left;
			line-height: 66rpx;
			color: $text-color;
			font-size: $font-size-24;
		}
	}
}
.mine {
	width: 100%;
	height: 100%;
	position: relative;
}
.product-content {
	width: 100%;
	height: auto;
	position: relative;
	padding: 0;
	padding-top: 114rpx;
	box-sizing: border-box;
	.empty-container-image {
		width: 386rpx;
		height: 286rpx;
		margin-top: -300rpx;
	}
}
.tui-goods-item {
	padding: 30rpx 20rpx 0 20rpx;
	box-sizing: border-box;
	position: relative;
	.tui-goods-main {
		display: flex;
		width: 100%;
		height: 100%;
		border-bottom: 1px solid #f0f0f0;
		padding-bottom: 24rpx;
	}
}
.tui-goods-image {
	width: 180rpx;
	height: 180rpx !important;
	border: 2rpx solid #f3f3f3;
	border-radius: 12rpx;
	position: relative;
	border: 2rpx solid #f3f3f3;
	.tui-goods-img {
		width: 180rpx;
		height: 180rpx !important;
		border-radius: 12rpx;
		flex-shrink: 0;
		display: block;
	}
}
.tui-goods-info {
	padding-left: 20rpx;
	box-sizing: border-box;
	position: relative;
	width: 540rpx;
	.list-details-title {
		line-height: 38rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 26rpx;
		color: #333333;
	}
	.list-details-price {
		width: 100%;
		line-height: 54rpx;
		float: left;
		margin-top: 98rpx;
		.list-price {
			color: #ff2a2a;
			float: left;
			line-height: 54rpx;
			align-items: center;
			justify-content: center;
			.price-larger {
				font-size: $font-size-30;
				display: inline-block;
				&.none {
					text-decoration: line-through;
					color: #999999;
				}
			}
		}
		.add-cart-btn {
			float: right;
			width: 160rpx;
			height: 56rpx;
			line-height: 56rpx;
			border-radius: 30rpx;
			color: #fff;
			font-size: 24rpx;
			margin-right: 0;
			background: #f3b574;
			color: #ffffff;
			text-align: center;
		}
	}
}
.tui-popup-box {
	position: relative;
	box-sizing: border-box;
	min-height: 168rpx;
	padding: 6rpx 24rpx;
	.tui-popup-content {
		padding-top: 30rpx;
	}
}
.layer-smimg {
	width: 114rpx;
	height: 114rpx;
	float: left;
	border-radius: 10rpx;
	margin-right: 24rpx;
	image {
		width: 114rpx;
		height: 114rpx;
		border-radius: 10rpx;
	}
}
.layer-nunbox {
	justify-content: space-between;
	align-items: center;
	width: 536rpx;
	height: 88rpx;
	padding: 13rpx 0 0 0;
	float: left;
	.layer-nunbox-t {
		width: 100%;
		height: 44rpx;
		position: relative;
		display: flex;
		.layer-nunbox-text {
			line-height: 44rpx;
			font-size: $font-size-28;
		}
		.number-box {
			display: flex;
			justify-content: center;
			align-items: center;
			border: 2rpx solid #ffe6dc;
			border-radius: 30rpx;
			height: 48rpx;
			margin-left: 20rpx;
			.iconfont {
				font-size: $font-size-24;
				padding: 0 18rpx;
				color: #333333;
				text-align: center;
				line-height: 48rpx;
				font-weight: bold;
				background: #fef6f3;
				&.icon-jianhao {
					border-radius: 30rpx 0 0 30rpx;
				}
				&.icon-jiahao {
					border-radius: 0 30rpx 30rpx 0;
				}
			}
			.btn-input {
				width: 62rpx;
				height: 48rpx;
				line-height: 48rpx;
				background: #ffffff;
				border-radius: 4rpx;
				text-align: center;
				font-size: $font-size-28;
			}
		}
		.product-step {
			position: absolute;
			left: 45rpx;
			bottom: 0;
			height: 44rpx;
			background: #ffffff;
		}
	}
	.layer-nunbox-b {
		width: 100%;
		height: 44rpx;
		margin-top: 13rpx;
	}
	.text {
		line-height: 44rpx;
		font-size: $font-size-28;
		.p {
			color: #ff2a2a;
		}
		.p:first-child {
			margin-left: 30rpx;
		}
		.p.sm {
			font-size: $font-size-24;
		}
	}
}
.tui-popup-btn {
	width: 100%;
	height: auto;
	float: left;
	box-sizing: border-box;
	margin-top: 30rpx;
	.superv-header-checked {
		float: left;
		font-size: $font-size-30;
		.oltext {
			width: 120rpx;
			float: left;
			color: #666666;
			display: flex;
			margin-left: 10rpx;
			.checkbox {
				display: flex;
				margin: 0;
				padding: 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				box-sizing: border-box;
				text-align: center;
				text-decoration: none;
				border-radius: 0;
				-webkit-tap-highlight-color: transparent;
				overflow: hidden;
				font-size: 34rpx;
				color: $color-system;
				line-height: 80rpx;
			}
			.text {
				float: left;
				line-height: 80rpx;
				margin-left: 15rpx;
			}
		}
		.ortext {
			width: 120rpx;
			float: right;
			color: $color-system;
			text-align: right;
		}
	}
	.tui-button {
		width: 210rpx;
		height: 88rpx;
		float: right;
		background: #e1e1e1;
		line-height: 88rpx;
		text-align: center;
		color: #ffffff;
		font-size: $font-size-28;
		border-radius: 44rpx;
		&.active {
			background: $btn-confirm;
		}
	}
	.tui-flex-btn {
		width: 100%;
		height: 88rpx;
		display: flex;
		box-sizing: border-box;
		padding: 0 34rpx;
		.button {
			width: 280rpx;
			height: 88rpx;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: $font-size-28;
			border-radius: 44rpx;
			&.buy {
				background: $btn-confirm;
				margin-left: 78rpx;
			}
			&.add {
				background: #ffe6dc;
				color: #f3b574;
			}
		}
	}
}
</style>