shicai/pages/user/card.vue

<template>
	<view class="container">
		<view class="member"></view>
		<view class="content">
			<view class="member_card">
				<view class="info">开通美卡平均可省</view>
				<view class="text">
					1588
					<text>元/年</text>
				</view>
			</view>
			<view class="assets">
				<view class="title">
					<image class="" src="/static/img/img33.png"></image>
					<view class="name">美卡特权</view>
				</view>
				<view class="privileges flex">
					<view class="privileges_list" v-for="(ls, index) in list" @click="clickNav(index)">
						<view class="img"><image :src="ls.img"></image></view>
						<view class="text">{{ ls.text }}</view>
					</view>
				</view>
			</view>
			<view class="discount flex" id="block1">
				<view class="tpl">
					<view class="name">美卡专享价</view>
					<view class="text">800+超值低价商品等你来拿</view>
				</view>
				<view class="tip">
					<view class="money">￥172</view>
					<view class="money">平均可省</view>
				</view>
			</view>
			<view class="goods" id="block3">
				<view class="list flex_item" v-for="ls in goods" @click="ToDetail(ls)">
					<view class="list-img"><image :src="ls.image"></image></view>
					<view class="list-info">
						<view class="name clamp">{{ ls.store_name }}</view>
						<view class="describe clamp">{{ ls.store_info }}</view>
						<view class="text" v-if="ls.keyword != ''">
							<text v-for="lss in ls.keyword">{{ lss }}</text>
						</view>
						<view class="price-box flex">
							<view class="price">
								<view class="grey">￥{{ ls.price }}</view>
								<view class="red">
									￥{{ ls.ot_price }}
									<text>市场价</text>
								</view>
							</view>
							<view class="gocar 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 class="submit" id="block2">查看800+美卡专享价商品</view>
			<view class="discount flex">
				<view class="tpl">
					<view class="name">免配送券</view>
					<view class="text">每次抵扣4元，价值30元/月</view>
				</view>
				<view class="tip">
					<view class="money">￥172</view>
					<view class="money">平均可省</view>
				</view>
			</view>
			<view class="bound">
				<view class="text">
					开通美卡美卡享受免配送费
					<text>4次/月</text>
				</view>
				<view class="tpl"><text>配送权仅可当月使用</text></view>
			</view>
			<view class="Tips">
				<uni-icons type="info-filled" color="#999999" size="18" />
				<text>下单自动抵扣，无需领取</text>
			</view>
			<view class="discount flex">
				<view class="tpl">
					<view class="name">美卡专享卡包</view>
					<view class="text">同样的产品，你买就是低价</view>
				</view>
				<view class="tip">
					<view class="money">￥164</view>
					<view class="money">平均可省</view>
				</view>
			</view>
			<view class="bound">
				<view class="text">
					开通美卡购物领折扣更
					<text>实惠</text>
				</view>
				<view class="tpl"><text>美卡卡购物更实惠</text></view>
			</view>
			<view class="opening flex">
				<view class="more">充值美卡享更多优惠</view>
				<view class="confirm" @click="navTo('/pages/user/member')">立即开通</view>
			</view>
		</view>
	</view>
</template>

<script>
import { userinfo } from '@/api/user.js';
import { getProducts } from '@/api/product.js';
import { cartAdd } from '@/api/product.js';
export default {
	data() {
		return {
			userInfo: '',
			list: [
				{
					img: 'https://shicaitest.liuniu946.com/img/img51.png',
					text: '美卡专享价'
				},
				{
					img: 'https://shicaitest.liuniu946.com/img/img52.png',
					text: '美卡优惠卡包'
				},
				{
					img: 'https://shicaitest.liuniu946.com/img/img53.png',
					text: '免配送券'
				},
				{
					img: 'https://shicaitest.liuniu946.com/img/img54.png',
					text: '更多'
				}
			],
			goods: '',
			block_1ScrollTop: '',
			block_2ScrollTop: '',
			pageHeight:''
		};
	},
	onLoad() {},
	onShow() {
		this.loadDate();
	},
	mounted() {
		var query = uni.createSelectorQuery();
		//获取对应模块到顶部的距离
		query
			.select('#block1')
			.boundingClientRect(res => {
				this.block_1ScrollTop = res.top;
			})
			.exec();
		query
			.select('#block2')
			.boundingClientRect(res => {
				this.block_2ScrollTop = res.top;
			})
			.exec();
	},
	onReady() {
		// 初始化获取页面宽度
		uni.createSelectorQuery()
			.select('.content')
			.fields(
				{
					size: true
				},
				data => {
					// 获取页面百分比
					this.pageHeight = data.height * (data.width / 750);
				}
			)
			.exec();
	},
	methods: {
		clickNav(index) {
			if (index == 0) {
				uni.pageScrollTo({
					scrollTop: this.block_1ScrollTop
				});
			};
			if(index == 1){
				uni.pageScrollTo({
					scrollTop: this.block_2ScrollTop + this.pageHeight + 1000 
				});
			};
			if(index == 2){
				uni.pageScrollTo({
					scrollTop: this.block_2ScrollTop + this.pageHeight + 1000 
				});
			};
		},
		loadDate() {
			let obj = this;
			getProducts({
				page: 1,
				limit: 5,
				type: 1,
				news: '',
				keyword: ''
			}).then(e => {
				obj.goods = e.data;
			});
		},
		//加入购物车
		Addcar(item) {
			let obj = this;
			cartAdd({
				cartNum: '1', //商品数量
				uniqueId: '', //商品标签
				new: 0, //商品是否新增加到购物车1为不加入0为加入
				mer_id: '',
				productId: item.id //商品编号
			})
				.then(function(e) {
					let da = e.data;
					uni.showToast({
						title: '成功加入购物车',
						type: 'top',
						duration: 500,
						icon: 'none'
					});
					obj.loadDate();
				})
				.catch(e => {
					console.log(e);
				});
		},
		// 商品详情页
		ToDetail(item) {
			uni.navigateTo({
				url: `/pages/product/product?id=` + item.id
			});
		},
		navTo(url) {
			uni.navigateTo({
				url
			});
		}
	}
};
</script>

<style lang="scss">
page {
	height: 100%;
	background-color: $page-color-base;
	.container {
		height: 100%;
	}
}
.member {
	background: #1c2532;
	height: 250rpx;
	width: 100%;
	border-bottom-left-radius: 20%;
	border-bottom-right-radius: 20%;
}
.content {
	width: 100%;
	margin-top: -120rpx;
	.member_card {
		width: 90%;
		margin: 0rpx auto;
		height: 300rpx;
		padding: 45rpx 45rpx;
		background: #2dbd59;
		border: 2rpx solid #ffe487;
		border-radius: 25rpx;
		text-align: center;
		.info {
			color: #ffffff;
			font-size: 29rpx;
			padding-top: 50rpx;
		}
		.text {
			color: #feeda1;
			font-size: 65rpx;
			padding-top: 40rpx;
			text {
				font-size: 41rpx;
			}
		}
	}
}
.assets {
	background: #ffffff;
	width: 100%;
	margin-top: 25rpx;
	padding: 25rpx 0rpx;
	text-align: center;
	.title {
		width: 85%;
		height: 3rpx;
		margin: 0rpx auto;
		image {
			width: 100%;
			height: 100%;
		}
		.name {
			position: relative;
			bottom: 40rpx;
			font-weight: bold;
		}
	}
	.privileges {
		margin-top: 100rpx;
		font-size: 24rpx;
		margin-bottom: 40rpx;
		.privileges_list {
			text-align: center;
			width: 200rpx !important;
			.img {
				height: 80rpx;
				text-align: center;
				image {
					width: 80rpx;
					height: 100%;
				}
			}
			.text {
				padding-top: 15rpx;
			}
		}
	}
}
.discount {
	width: 100%;
	padding: 50rpx 25rpx;
	.tpl {
		.name {
			font-size: 36rpx;
			color: #333333;
			font-weight: bold;
		}
		.text {
			color: #999999;
			font-size: 24rpx;
			padding-top: 15rpx;
		}
	}
	.tip {
		text-align: right;
		background: #1c2532;
		border-radius: 40rpx;
		padding: 18rpx 24rpx;
		border-bottom-right-radius: 10rpx !important;
		.money {
			background: linear-gradient(270deg, rgba(204, 178, 121, 1) 0%, rgba(245, 234, 197, 1) 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			font-weight: bold;
			font-size: 26rpx;
		}
	}
}
.goods {
	padding: 0rpx 25rpx;
	width: 92%;
	margin: 0rpx auto;
	background: #ffffff;
	border-radius: 15rpx;
	margin-bottom: 50rpx;
	.list {
		border-bottom: 2rpx solid #f0f0f0;
		padding: 25rpx 0rpx;
		.list-img {
			width: 225rpx;
			height: 225rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.list-info {
			padding-left: 25rpx;
			width: 60%;
			.name {
				color: #333333;
				font-size: 30rpx;
				font-weight: 500;
			}
			.describe {
				color: #999999;
				font-size: 24rpx;
				margin: 15rpx 0rpx;
				padding-bottom: 15rpx;
			}
			.text {
				color: #ff383e;
				padding: 15rpx 0rpx;
				text {
					border-radius: 10rpx;
					border: 2rpx solid #ff383e;
					font-size: 20rpx;
					padding: 2rpx 15rpx;
				}
			}
			.price-box {
				.price {
					font-size: 26rpx;
					.grey {
						color: #666666;
						text-decoration: line-through;
					}
					.red {
						color: #2dbd59;
						text {
							margin-left: 15rpx;
							background: #2dbd59;
							color: #ffffff;
							border-radius: 10rpx;
							padding: 3rpx 15rpx;
						}
					}
				}
				.gocar {
					width: 50rpx;
					height: 50rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
}
.submit {
	background: #ffe487;
	width: 92%;
	margin: 0rpx auto;
	padding: 25rpx 0rpx;
	text-align: center;
	margin-bottom: 20rpx;
	border-radius: 15rpx;
	font-weight: bold;
	color: rgba(51, 51, 51, 1);
	font-size: 30rpx;
}
.bound {
	width: 92%;
	margin: 0rpx auto;
	height: 100px;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative; //设置定位
	background: linear-gradient(-21deg, rgba(0, 184, 72, 1) 0%, rgba(40, 218, 116, 1) 100%);
	border-radius: 20rpx;
	padding: 30rpx 20rpx;
	color: #ffffff;
	.text {
		font-size: 36rpx;
		text {
			color: #feeda1;
			font-size: 48rpx;
		}
	}
	.tpl {
		margin-top: 25rpx;
		text {
			background: #ffffff;
			padding: 14rpx 103rpx;
			border-radius: 20rpx;
			color: #333333;
			font-size: 32rpx;
		}
	}
}
.bound::before {
	content: '';
	width: 35px;
	height: 30px;
	border-radius: 50%;
	display: block;
	background: #f8f6f6;
	position: absolute;
	top: 50%;
	left: -20px;
	transform: translateY(-50%);
}
.bound::after {
	content: '';
	width: 35px;
	height: 30px;
	border-radius: 50%;
	display: block;
	background: #f8f6f6;
	position: absolute;
	top: 50%;
	right: -20px;
	transform: translateY(-50%);
}
.opening {
	width: 100%;
	font-size: 30rpx;
	padding-top: 90rpx;
	text-align: center;
	.more {
		background: #1e2531;
		color: #feeda1;
		width: 60%;
		padding: 30rpx 0rpx;
	}
	.confirm {
		background: #2dbd59;
		color: #ffffff;
		width: 40%;
		padding: 30rpx 0rpx;
	}
}
.Tips {
	width: 100%;
	padding-left: 25rpx;
	font-size: 24rpx;
	color: #999999;
	padding-top: 20rpx;
	text {
		padding-left: 10rpx;
	}
}
</style>