shicai/pages/activity/listOne.vue

<template>
	<view class="container">
		<view class="top-img"><image :src="img" mode='widthFix'></image></view>
		<view class="preferred_centent">
			<view class="flex_item preferred_item" v-for="ls in list" @click="navToDetailPage(ls)">
				<view class="tlist-img">
					<view class="goods_image"><image :src="ls.image"></image></view>
					<view class="stock flex_item" v-if="ls.stock > 0">
						<image class="img" src="/static/img/img56.png" mode="scaleToFill"></image>
						<view class="stock-num clamp">库存剩{{ ls.percent * 100 }}%</view>
					</view>
				</view>
				<view class="goods_name">
					<view class="goods_title clamp">{{ ls.store_name }}</view>
					<view class="guess-list">
						<view class="goods_num clamp">{{ ls.store_info }}</view>
						<view class="tipBox">
							<view class="tipsl" v-if="ls.keyword != ''">
								<text v-for="lss in ls.keyword">{{ lss }}</text>
							</view>
						</view>
					</view>
					<view class="price flex">
						<view class="price_list">
							<view class="price-red">
								￥{{ ls.price }}<text>/份</text>
								<text class="tip">￥{{ ls.ot_price }}</text>
							</view>
						</view>
						<view class="img position-relative" @click.stop="Addcar(ls)">
							<image src="/static/img/img21.png"></image>
							<view class="corner" v-if="ls.cart_num > 0">
								<text>{{ ls.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:'',//二级封面图
		};
	},
	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/listOne?type=103&';
			// 保存邀请人
			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(ls) {
			let id = ls.id;
			uni.navigateTo({
				url: '/pages/product/product?id=' + id
			});
		}
	}
};
</script>
<style lang="scss">
page {
		min-height: 100%;
		background-color: #FFFFFF;
		width: 100%;
	}
.container {
	background: #ffffff;
	// height: 100%;
}
image{
		width: 100%;
		height: auto;
		/* min-height: 2900px; */
	}
.top-img {
		width: 100%;
		image{
			width: 100%;
			height: auto;
			/* min-height: 2900px; */
		}
	}
.preferred_centent {
	width: 100%;
	padding: 0rpx 25rpx;
	.preferred_item {
		width: 100%;
		height: 100%;
		border-top: 1px solid #f0f0f0;
		padding: 25rpx 0rpx;
		position: relative;
		.tlist-img {
			width:180rpx;
			height:200rpx ;
			position: relative;
			.goods_image {
				width: 180rpx;
				height: 180rpx;
				image {
					width: 180rpx;
					height: 180rpx;
				}
			}
			.stock {
				margin-top: 13rpx;
				font-size: 26rpx;
				background:linear-gradient(90deg,rgba(255,3,95,1),rgba(255,153,14,1));
				width: 100%;
				color: #FFFFFF;
				border-radius: 10rpx;
				justify-content: center;
				align-items: center;
				position: absolute;
				left: 0;
				bottom: 0;
				.img {
					width: 20rpx;
					height: 20rpx;
					flex-shrink: 0;
				}
				.stock-num {
					padding-left: 7rpx;
					font-size: 22rpx;
					border-radius: 5rpx;
					height: 26rpx;
					line-height: 26rpx;
				}
			}
		}
		
		.goods_name {
			padding-left: 25rpx;
			width: 65%;
			padding-right: 30rpx;
			.goods_title {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				font-size: 32rpx;
				color: $font-color-dark;
			}
			.guess-list{
				height: 70rpx;
				.goods_num {
					font-size: 24rpx;
					color: #8f8f97;
				}
				.tipBox{
					// padding-bottom: 8rpx;
					.tipsl {
						text {
							border: 2rpx solid #ff1a27;
							color: #ff1a27;
							border-radius: 5rpx;
							font-size: 18rpx;
							padding: 2rpx 5rpx;
							margin-right: 15rpx;
						}
					}
				}
			}
			.price {
				font-size: 28rpx;
				padding-top: 40rpx;
				.price_list {
					.price-red {
						color: #ff1a27;
						font-weight: bold;
						font-size: 34rpx !important;
						text {
							color: #9699a0;
							font-size: 24rpx !important;
							font-weight: normal;
							padding: 0rpx 10rpx;
						}
						.tip{
							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%;
					}
				}
			}
		}
	}
}
</style>