fangliaoxiaochengxv/subPages/msGoodsList/msGoodsList.vue

<template>
	<view class="app-page">
		<CommercePartMs :data="mList"></CommercePartMs>
	</view>
</template>

<script>
	import Empty from "@/components/Empty/index.vue"
	import CommercePartMs from '@/components/CommercePartMs'
	import {
		getMsGoodsList
	} from "@/common/api/good.js";
	export default {
		components: {
			Empty,
			CommercePartMs
		},
		data() {
			return {
				topData: {
					top: 0,
					height: 0
				},
				pageParams: {
					page: 1,
					pageSize: 8
				},
				total: 0,
				mList: []
			}
		},
		computed: {},
		onLoad(options) {
			this.getList(true)
		},
		onReachBottom() {
			this.getList()
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			let userInfo = uni.getStorageSync('userInfo')
			userInfo = userInfo && JSON.parse(userInfo) || {}
			let params = {}
			if (userInfo.id) {
				params = {
					id: userInfo.id
				}
			}
			let configs = uni.getStorageSync('configs') || {}
			return {
				title: configs.shop_share_title,
				path: `/subPages/msGoodsList/msGoodsList${this.$stringPageOptions(params)}`
			}
		},
		onShareTimeline() {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			let userInfo = uni.getStorageSync('userInfo')
			userInfo = userInfo && JSON.parse(userInfo) || {}
			let params = {}
			if (userInfo.id) {
				params = {
					id: userInfo.id
				}
			}
			let configs = uni.getStorageSync('configs') || {}
			return {
				title: configs.shop_share_title,
				path: `/subPages/msGoodsList/msGoodsList${this.$stringPageOptions(params)}`
			}
		},
		methods: {
			toBack() {
				uni.navigateBack()
			},
			toDetails(item) {
				uni.navigateTo({
					url: `/subPages/goodsDetail/goodsDetail?code=${item.code}&type=common`
				})
			},
			getList(initFlag) {
				if (!initFlag) {
					if (this.pageParams.page * this.pageParams.pageSize < this.total) {
						this.pageParams.page++
					} else {
						return
					}
				} else {
					this.pageParams.page = 1
					this.total = 0
					this.mList = []
				}
				let sendData = {
					...this.pageParams
				}
				getMsGoodsList()
					.then((res) => {
						this.mList = this.mList.concat(res.data.list)
						this.total = res.data.page.total
					})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.app-page {
		width: 100vw;
		display: flex;
		height: 100vh;
		// background-color: #fff;
		align-items: center;
		flex-direction: column;
		box-sizing: border-box;
		padding: 40rpx;
	}


	.top-view {
		display: flex;
		width: 100%;
		flex-direction: row;
		align-items: flex-end;
	}

	.top-view image {
		height: 60rpx;
		margin-left: 30rpx;
		width: 80rpx;
	}

	.top-view text {
		font-size: 26rpx;
		margin-bottom: 10rpx;
		margin-left: 10rpx;
	}


	.good-list {
		background: white;
		display: flex;
		flex-basis: 0;
		flex-direction: column;
		width: 100%;
		box-sizing: border-box;
		padding: 40rpx;
		align-items: center;
	}



	.good-item {
		width: calc(100% - 40rpx);
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.good-item-content {
		// flex: 1;
		// margin-left: 20rpx;
		// display: flex;
		// flex-direction: column;
	}

	.good-name-box {
		display: flex;
		margin-top: 28rpx;
		flex-direction: row;
		align-items: center;

		image {
			width: 30rpx;
			height: 30rpx;
			display: block;
		}

		text {
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #1D161F;
			// margin-left: 10rpx;

			overflow: hidden;
			text-overflow: ellipsis;
			-webkit-line-clamp: 1;
			display: -webkit-box;
			-webkit-box-orient: vertical;
		}
	}

	.good-desc {
		font-size: 22rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #2C2C2C;
		margin-top: 8rpx;
	}

	.good-tags {
		display: flex;
		flex-direction: row;
		margin-top: 15rpx;
		align-items: center;

		.good-tag1 {
			font-size: 22rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			margin-right: 10rpx;
			color: #765AEE;
			padding: 3rpx 12rpx;
			background: #F3F1FF;
			border-radius: 5rpx 5rpx 5rpx 5rpx;
			opacity: 1;
		}

		.good-tag2 {
			font-size: 22rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #5E5E5E;
			margin-right: 10rpx;
			padding: 3rpx 12rpx;
			background: #F8F8F8;
			border-radius: 5rpx 5rpx 5rpx 5rpx;
			opacity: 1;
		}
	}

	.good-bottom {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 32rpx;
		justify-content: space-between;

		.good-time {
			font-size: 22rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #B7B7B7;
		}

		.good-view-box {

			display: flex;
			flex-direction: row;
			align-items: center;

			image {
				height: 16rpx;
				width: 22rpx;
				display: block;
			}

			text {
				font-size: 22rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #B7B7B7;
				margin-left: 6rpx;
			}
		}
	}
</style>