jiaoyi-uni2/奥莱优品/pages/index/index.vue

<template>
	<view class="content">
		<template v-if="isLoading">
			<view class="store-header">
				<view class="home-store">
					<view class="store-logo" style="width: 100rpx;"><view class="skeleton-line animate"></view></view>
					<view class="store-info">
						<view class="name"><view class="skeleton-line animate"></view></view>
						<view class="desc"><view class="skeleton-line animate"></view></view>
					</view>
					<view class="store-kf" style="width: 100rpx;"><view class="skeleton-line animate"></view></view>
				</view>
				<view class="store-address">
					<view class="address-info">
						<view class="address"><view class="skeleton-line animate"></view></view>
					</view>
					<view class="store-time"><view class="skeleton-line animate"></view></view>
				</view>
			</view>
			<scroll-view class="home-goods" scroll-y scroll-with-animation>
				<view class="goods-list">
					<view class="list-item" v-for="(item,index) in 4" :key="index">
						<view class="image">
							<view class="skeleton-line animate"></view>
						</view>
						<view class="info">
							<view class="title"><view class="skeleton-line animate"></view></view>
							<view class="tags"></view>
							<view class="tags"><view class="skeleton-line animate"></view></view>
							<view class="price-btn">
								<view class="price"><view class="skeleton-line animate"></view></view>
								<view class="price-line"><view class="skeleton-line animate"></view></view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</template>
		<template v-else>
			<view class="store-header">
				<view class="home-store">
					<view class="store-logo"><image :src="storeData.poi_logo"></image></view>
					<view class="store-info">
						<view class="name">{{ storeData.poi_name }}</view>
						<view class="desc">{{ storeData.poi_city }}</view>
					</view>
					<view class="store-kf" @click="kfPop">联系客服</view>
				</view>
				<view class="store-address">
					<view class="address-info">
						<image src="/static/image/location.svg"></image>
						<view class="address">{{ storeData.poi_address }}</view>
					</view>
					<view class="store-time">营业 {{ storeData.start_at?storeData.start_at:'-' }} - {{ storeData.end_at?storeData.end_at:'-' }}</view>
				</view>
			</view>

			<scroll-view class="home-goods" scroll-y scroll-with-animation>
				<view class="goods-title">
					<view class="title-left">
						<text>HOT DEALS</text>
						<view class="name">正在抢购</view>
					</view>
					<view class="title-more">全部商品 <image src="/static/image/right.svg"></image> </view>
				</view>
				<view class="goods-list">
					<view class="list-item" v-for="(item,index) in goodsData" :key="index" @click="toDetail(item.goods_id)">
						<view class="image">
							<image :src="item.image_list[0].url"></image>
							<text>{{$dialog.disFormat(item.price,item.line_price)}}折</text>
						</view>
						<view class="info">
							<view class="title">{{item.product_name}}</view>
							<view class="tags"></view>
							<view class="tags">已售{{item.sale_stock}}</view>
							<view class="price-btn">
								<view class="price">{{$dialog.formatMoney(item.price)}}</view>
								<view class="price-line">{{$dialog.formatMoney(item.line_price)}}</view>
								<view class="buy-btn">立即抢购</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</template>
		<halfLogin ref="loginCom" @success="loginSuccess"></halfLogin>
		<kfService ref="kfService"></kfService>
	</view>
</template>

<script>
var app;
export default {
	data() {
		return {
			optionData: null,
			storeId:"",
			isLoading:true,
			storeData:null,
			goodsData:[],
			isLogin:null
		}
	},
	onLoad(options) {
		app = this;
		const tokenPoi = uni.getStorageSync("contact");
		if (options.store != null) {
		    app.storeId = options.store;
		} else if (tokenPoi && tokenPoi.poi_id != null) {
		    app.storeId = tokenPoi.poi_id;
		} else {
		    app.storeId = "7644106137976965139";
		}
		app.isLogin = uni.getStorageSync("user_token");
		app.optionData = options;
		app.getData()
	},
	methods: {
		loginSuccess(token){
			app.isLogin = token;
		},
		async getData(){
			if (!app.storeId) return ;
			app.isLoading = true;
			app.optionData.store = app.storeId;
			var res = await app.$api.home.data.get(app.optionData);
			app.isLoading = false;
			if (res.code !== 1) {
				return app.$dialog.showSuccess(res.msg)
			}
			uni.setStorageSync("poiId",res.data.store.poi_id);
			app.storeData = res.data.store;
			uni.setStorageSync("contact",res.data.store);
			app.getGoods();
		},
		async getGoods(){
			app.optionData.store = app.storeId;
			var resp = await app.$api.home.goods.get(app.optionData);
			if (resp.code !== 200) {
				return app.$dialog.showSuccess(resp.msg)
			}
			app.goodsData = resp.data.rows;
		},
		toDetail(id){
			if (!app.isLogin) {
				this.$refs.loginCom.open();
				return ;
			}
			// uni.navigateTo({
			// 	url:`/pages/goods/detail?goods=${id}`
			// })
			uni.navigateTo({
				url:`/pages/order/tips?goods=${id}`
			})
		},
		kfPop(){
			const data = uni.getStorageSync("contact");
			this.$refs.kfService.open(data);
		}
	}
}
</script>

<style lang="scss" scoped>
.content{
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #ededed;
	display: flex;
	flex-direction: column;
}
.home-load{
	.store-header{
		display: flex;
		gap: 20upx;
		border-bottom: 2upx solid #f8f8f8;
		border-top: 2upx solid #f8f8f8;
		align-items: center;
		padding: 20upx;
	}
}
.home-store{
	background-color: $main-color;
	padding: 20rpx;
	display: flex;
	align-items: center;
	gap: 20rpx;
	image {
		width: 92rpx;
		height: 92rpx;
		border: 2rpx solid #fff;
		border-radius: 20rpx;
	}
	.store-info{
		flex: 1;
		.name {
			color: #fff;
			font-weight: bold;
			font-size: 32rpx;
		}
		.desc {
			color: $main-sub-color;
			font-size: 28rpx;
			margin-top: 10rpx;
		}
	}
	.store-kf{
		background-color: #fff;
		color: $main-color;
		font-size: 24rpx;
		padding: 20rpx 30rpx;
		border-radius: 40rpx;
	}
}
.store-address {
	display: flex;
	align-self: center;
	width: calc(100% - 40rpx);
	margin: 0 auto;
	box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgb(0 0 0 / 0.05);
	background-color: #fff;
	border-bottom-right-radius:20rpx;
	border-bottom-left-radius:20rpx;
	padding: 20rpx 20rpx;
	gap: 20rpx;
	color: #475569;
	.address-info {
		flex: 1 1 0%;
		display: flex;
		align-items: center;
		gap: 10rpx;
		overflow: hidden;
		image {
			width: 40rpx;
			height: 40rpx;
		}
		.address{
			flex: 1;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
	.store-time{
		color: #94a3b8;
	}
}
.home-goods{
	height: 0;
	flex: 1;
	width: 95%;
	margin: 20rpx auto;
	.list-item{
		display: flex;
		align-items: center;
		gap: 20rpx;
		background-color: #fff;
		padding: 20rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
		.info{
			flex: 1 1 0%;
			overflow: hidden;
			.title{
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-size: 32rpx;
				color: #333;
				font-weight: 900;
			}
			.tags {
				color: #94a3b8;
				font-size: 24rpx;
				margin: 10rpx 0;
			}
			.price-btn{
				display: flex;
				align-items: center;
				gap: 20rpx;
				align-items: flex-end;
				.price{
					font-size: 30rpx;
					color: $main-color;
					font-weight: 900;
				}
				.price-line {
					color: #999999;font-size: 24rpx;text-decoration-line: line-through;
				}
				.buy-btn{
					margin-left: auto;
					margin-right: 0;
					background-color: $main-color;
					color: #fff;
					border-radius: 30rpx;
					font-size: 28rpx;
					padding: 10rpx 20rpx;
				}
			}
		}
		.image {
			height: 180rpx;
			overflow: hidden;display: flex;align-items: center;min-width: 180rpx;
			position: relative;
			text {
				background-color: $main-color;
				color: #fff;
				position: absolute;
				top: 10rpx;
				left: 10rpx;
				font-size: 24rpx;
				border-radius: 30rpx;
				padding: 10rpx 15rpx;
			}
			image {
				width: 180rpx;
				border-radius: 10upx;
				height: 100%;
			}
		}
	}
	.goods-title{
		display: flex;
		align-items: center;
		justify-content: space-between;
		.title-left{
			.name {
				font-size: 34rpx;
				color: #333;
				font-weight: 900;
			}
			text {
				color: $main-color;
				font-weight: 700;
				font-size: 24rpx;
			}
		}
		.title-more{
			display: flex;
			align-items: center;
			color: #94a3b8;
			font-size: 28rpx;
			image {
				width: 28rpx;
				height: 28rpx;
			}
		}
	}
}

</style>