shicai/pages/activity/listSen.vue

<template>
	<view class="container">
			<view class="top-img"><image :src="img" mode='widthFix'></image></view>
		<view id="list-box" class="list-box" :style="{ height: swiperHeight + 'px' }">
			<view class="guess-section">
				<view v-for="(item, index) in list" :key="index" class="guess-item" @click="navToDetailPage(item)">
					<view class="image-wrapper"><image :src="item.image" mode="scaleToFill"></image></view>
					<view class="stock  margin-c-20 flex_item">
						<image class="img" src="/static/img/img56.png" mode="scaleToFill"></image>
						<view class="stock-num ">库存剩{{ item.percent * 100 }}%</view>
					</view>
					<text class="title clamp margin-c-20">{{ item.store_name }}</text>
					<view class="list-tip">
						<view class="info clamp margin-c-20">{{ item.store_info }}</view>
						<view class="tipBox margin-c-20">
							<view class="tipsl" v-if="item.keyword != ''">
								<text v-for="lss in item.keyword">{{ lss }}</text>
							</view>
						</view>
					</view>
					<view class="price margin-c-20 flex">
						<view class="price_list">
							<view class="price-red">
								￥{{ item.price }}<text>/份</text>
								<text class="tiplist">￥{{ item.ot_price }}</text>
							</view>
						</view>
						<view class="img position-relative" @click.stop="Addcar(item)">
							<image src="/static/img/img21.png"></image>
							<view class="corner" v-if="item.cart_num > 0">
								<text>{{item.cart_num}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import { getProducts } from '@/api/product.js';
import { category_layer } from '@/api/category.js';
import { cartAdd } from '@/api/product.js';
import { saveUrl } from '@/utils/loginUtils.js';
export default {
	data() {
		return {
			list: '',//三级分类商品
			cid:'',//二级分类id
			img:'',//二级封面图
			swiperHeight: 0,
		};
	},
	watch:{
		// 初次加载页面高度时修改页面高度
		bastList(newValue, oldValue) {
			let obj = this;
			let bHeight = Math.ceil(newValue.length / 2);
			obj.$nextTick(function() {
				uni.createSelectorQuery()
					.select('#list-box')
					.fields(
						{
							size: true
						},
						function(data) {
							obj.pageProportion = data.width/750;
							obj.swiperHeight = Math.ceil(obj.pageProportion * 520 * bHeight);
						}
					)
					.exec();
			});
		}
	},
	onLoad(option) {
		this.cid = option.type;
		// 判断有无邀请人
		if (option.spread) {
			uni.setStorageSync('spread', option.spread);
		}
		saveUrl();
		this.GetDate();
	},
	onShow() {
		this.loadData();
	},
	//下拉刷新
	onPullDownRefresh() {
		let obj = this;
		//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
		setTimeout(function() {
			obj.loadData();
			uni.stopPullDownRefresh(); //停止下拉刷新动画
		}, 1000);
	},
	methods: {
		// 载入二级分类数据
		async GetDate() {
			let obj = this;
			obj.loading = true;
			category_layer({
				pid: 102
			})
				.then(({ data }) => {
					for (let i = 0; i < data.list.length; i++) { 
					      if(obj.cid == data.list[i].id){
							  obj.img = data.list[i].pic;
						  }
					}
					this.loadData();
				})
				.catch(err => {
					console.log(err);
				});
		},
		// 请求商品列表
		loadData() {
			let obj = this;
			getProducts({
				sid:obj.cid,
				type:1
			})
				.then(({ data }) => {
					this.list = data;
				})
				.catch(e => {});
		},
		//分享
		// #ifdef MP
		onShareAppMessage: function(res) {
			let userInfo = uni.getStorageSync('userInfo');
			let GetInfo = uni.getStorageSync('GetInfo');
			// 来自页面内分享按钮
			let pages = getCurrentPages();
			// 获取当前页面
			let page = pages[pages.length - 1];
			let path = '/pages/activity/listSen?type=104&';
			// 保存邀请人
			path += 'spread=' + userInfo.uid;
			let data = {
				path: path,
				imageUrl: GetInfo.img,
				title: GetInfo.title
			};
			console.log(data)
			return data;
		},
		// #endif
		//加入购物车
		Addcar(item) {
			let obj = this;
			cartAdd({
				cartNum: '1', //商品数量
				uniqueId:'', //商品标签
				new: 0, //商品是否新增加到购物车1为不加入0为加入
				mer_id: '',
				productId: item.id//商品编号
			})
				.then(function(e) {
					uni.showToast({
						title: '成功加入购物车',
						type: 'top',
						duration: 500,
						icon: 'none'
					});
					obj.loadData();
				})
				.catch(e => {
					console.log(e);
				});
		},
		//跳转商品详情页
		navToDetailPage(item) {
			let id = item.id;
			uni.navigateTo({
				url: '/pages/product/product?id=' + id
			});
		},
	}
};
</script>
<style lang="scss">
	page{
		background: #F5F5F5;
		height: 100%;
	}
	.container{
		height: 100%;
	}
	.top-img {
			width: 100%;
			image{
				width: 100%;
				height: auto;
				/* min-height: 2900px; */
			}
		}
	.top-name{
		width: 92%;
		margin: 25rpx auto;
		background: #E9F5EF;
		color: #18B358;
		border-top-left-radius: 25rpx;
		border-top-right-radius: 25rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		padding: 25rpx 0rpx;
	}
	/*公用边框样式*/
	%icon {
		margin-right: 10rpx;
		display: inline-block;
		padding: 2rpx 10rpx;
		border: 1rpx solid $color-yellow;
		color: $color-yellow;
		line-height: 1;
		font-size: $font-base;
		border-radius: 10rpx;
	}
	/* 猜你喜欢 */
	.guess-section {
		display: flex;
		flex-wrap: wrap;
		padding: 0 30rpx;
		.guess-item {
			overflow: hidden;
			display: flex;
			flex-direction: column;
			width: 48%;
			margin-bottom: 4%;
			border-radius: $border-radius-sm;
			background-color: white;
			box-shadow: $box-shadow;
			padding-bottom: 30rpx;
			&:nth-child(2n + 1) {
				margin-right: 4%;
			}
		}
		.image-wrapper {
			width: 100%;
			height: 330rpx;
			border-radius: 3px;
			overflow: hidden;
			margin-bottom: 15rpx;
			image {
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}
		.title {
			font-size: $font-base;
			color: $font-color-dark;
		}
		.list-tip{
			height: 80rpx;
			.info {
				color: #999999;
				font-size: 22rpx;
			}
			.tipBox{
				.tipsl {
					text {
						border: 2rpx solid #ff1a27;
						color: #ff1a27;
						border-radius: 5rpx;
						font-size: 18rpx;
						padding: 2rpx 5rpx;
						margin-right: 15rpx;
					}
				}
			}
		}
		.stock {
				font-size: 26rpx;
				background:linear-gradient(90deg,rgba(255,3,95,1),rgba(255,153,14,1));
				width:65%;
				color: #FFFFFF;
				border-radius: 10rpx;
				margin-top: 15rpx;
				padding-left: 15rpx;
				.img {
					width: 20rpx;
					height: 20rpx;
					flex-shrink: 0;
				}
				.stock-num {
					padding-left: 7rpx;
					font-size: 22rpx;
					border-radius: 5rpx;
					height: 26rpx;
					line-height: 26rpx;
				}
			}
		.price {
			font-size: 28rpx;
			.price_list {
				.price-red {
					color: #ff1a27;
					font-weight: bold;
					font-size: 32rpx !important;
					// padding-bottom: 15rpx;
					text {
						color: #9699a0;
						font-size: 24rpx !important;
						font-weight: normal;
						padding: 0rpx 10rpx;
					}
					.tiplist{
						text-decoration: line-through;
					}
				}
				.price-green {
					color: #2dbd59;
					font-size: 28rpx !important;
					text {
						background: #2dbd59;
						color: #ffffff;
						padding: 0rpx 10rpx;
						border-radius: 5rpx;
						font-size: 22rpx !important;
						margin-left: 15rpx;
					}
				}
			}
			.img {
				width: 50rpx;
				height: 50rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	
		.icon {
			@extend %icon;
		}
	
		.detail {
			line-height: 1;
		}
		.tip {
			color: white;
			background-color: $color-yellow;
			line-height: 1.5;
			font-size: $font-sm;
			padding-left: 20rpx;
		}
	}
</style>