shicai/pages/user/renew.vue

<template>
	<view class="container">
		<view class="member"></view>
		<view class="content">
			<view class="member_card">
				<view class="info flex_item">
					<view class="info-portrait"><image :src="userInfo.avatar"></image></view>
					<view class="info-tpl">
						<view class="tpl">{{userInfo.nickname}}</view>
						<view class="tip">美卡有效期至{{userInfo.level_valid_time}}</view>
					</view>
				</view>
				<view class="list flex">
					<view class="text">十菜美卡</view>
					<view class="btn" @click="navTo('/pages/user/member')">立即续费</view>
				</view>
			</view>
			<view class="assets">
				<view class="title">
					<image class="" src="/static/img/img33.png"></image>
					<view class="name">资产概况</view>
				</view>
				<view class="list flex">
					<view class="tpl">
						<view class="tip">{{userInfo.freight_coupon_count}}<text>次</text></view>
						<view>免费配送</view>
					</view>
					<view class="tpl">
						<view class="tip">{{userInfo.discount_coupon_count}}<text>张</text></view>
						<view>专享优惠券</view>
					</view>
				</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">
				<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">查看800+美卡专享价商品</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import { getProducts } from '@/api/product.js';
import { cartAdd } from '@/api/product.js';
export default {
	data() {
		return {
			list:[
				{
					img: '/static/img/img51.png',
					text: '美卡专享价'
				},
				{
					img: '/static/img/img52.png',
					text: '美卡优惠卡包'
				},
				{
					img: '/static/img/img53.png',
					text: '免配送券'
				},
				{
					img: '/static/img/img54.png',
					text: '更多'
				}
			],
			goods:'',
			block_1ScrollTop: '',
		};
	},
	onLoad() {
		this.loadDate();
	},
	onShow() {
		this.loadDate();
	},
	mounted() {
		var query = uni.createSelectorQuery();
		//获取对应模块到顶部的距离
		query
			.select('#block1')
			.boundingClientRect(res => {
				this.block_1ScrollTop = res.top;
			})
			.exec();
	},
	computed: {
		...mapState('user',['userInfo'])
	},
	methods: {
		clickNav(index) {
			uni.pageScrollTo({
				scrollTop: this.block_1ScrollTop
			});
		},
		loadDate(){
			let obj = this;
			getProducts({
				page: 1,
				limit: 5,
				news: '',
				keyword: '',
				type:1
			}).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) {
					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%;
	height: 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;
		.info{
			font-size: 26rpx;
			.info-portrait{
				width: 100rpx;
				height: 100rpx;
				border-radius: 100%;
				image{
					width: 100%;
					height: 100%;
					border-radius: 100%;
				}
			}
			.info-tpl{
				padding-left: 15rpx;
				.tpl{
					color: #FEEDA1;
					font-size: 32rpx;
				}
				.tip{
					color: #FFFFFF;
					padding-top: 10rpx;
					}
			}
		}
		.list{
			margin-top: 50rpx;
			.text{
				color: #FEEDA1;
			}
			.btn{
				background: #FFE487;
				color: #6E482B;
				padding: 15rpx 25rpx;
				border-radius: 50rpx;
			}
		}
	}
}
.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;
		}
	}
	.list{
		margin-top: 100rpx;
		padding: 0rpx 120rpx;
		font-size: 24rpx;
		margin-bottom: 40rpx;
		.tpl{
			color: #666666;
			.tip{
				font-size: 40rpx;
				font-weight: bold;
				color: #303133;
				padding-bottom: 15rpx;
				text{
					font-size: 24rpx;
					font-weight: normal;
				}
			}
		}
	}
	.privileges{
		margin-top: 100rpx;
		font-size: 24rpx;
		margin-bottom: 40rpx;
		position: relative;
		width: 100%;
		.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{
		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: 36rpx;
		}
	}
}
.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: 100rpx;
	border-radius: 15rpx;
	font-weight:bold;
	color:rgba(51,51,51,1);
	font-size: 30rpx;
}
</style>