JP-ChargeTeam51/pages/store/51store.vue

<template>
	<view>
		<ujp-navbar title="51商城"></ujp-navbar>
		<!-- 广告-->
		<!-- <view class="banner">
			
			
		</view> -->
		
		<view class="banner">
			
			<u-swiper bg-color="#fff" v-if="bannerList.length"
			:img-mode="'scaleToFill'" :list="bannerList" @click="clickBanner"
				:name="'picUrl'">
			</u-swiper>
			<img src="../../assets/img/storeBanner1.png" alt="" v-else >
			
		
		</view>
		<!-- 标签 -->
		<!-- <view class="banner2">
			
			<img src="../../assets/img/storeBanner1.png" alt="">
			
			<u-tabs :list="list"  :is-scroll="false" :current="current" @change="change" >
				
			</u-tabs>
		</view> -->
		
		<!-- 商品 -->
		<view class="commodity">
			<view class="item" v-for="(item,i) in mallList" 
			@click="gotoUrl('pages/store/commodityDetails?id='+item.id)"
			:key="i">
				<!--图片  -->
				<view class="picture">
					<u-image v-if="item.pic"
					 width="308"
					 height="308" 
					 :src="item.pic"  mode="scaleToFill" ></u-image>
					<u-image v-else 
					width="308"
					height="308" 
					src="@/assets/img/chargesite_default.png"  ></u-image>
					
				</view>
				<!-- 商品名 -->
				<view class="title">
					<view class="tag" v-if="item.own">
						<img src="@/assets/img/commodityTag.png" alt="">
					</view>{{item.name}}
				</view>
				<view class="price">
					<view class="number">
						<text>￥</text>{{item.price}}
					</view>
					<view class="buy">
						<img src="@/assets/img/antOutline-shopping-cart@3x.png" alt="">
					</view>
				</view>
			</view>
			
			
		</view>

	</view>
</template>

<script>
	import * as API from '@/apis/mall.js'
	import * as newsApi from '@/apis/news.js'
	export default {
		data() {
			return {
				mallList:[],
				bannerList: [],
				pageIndex: 1,
				recordsTotal: 0,
			}
		},
		onReady() {
			this.getList()
			this.getBannerInfo("store");
			
			
		},
		onReachBottom() {
			if (this.mallList.length < this.recordsTotal) {			
				this.myLoadmore();
			}
		},
		methods: {
			clickBanner(index, bl, modout) {
				var uurl = "";
				var mod = this.bannerList[index]
				if (modout) {
					mod = modout;
				}
				mod.clickUrl = mod.linkUrl
			
				if (mod.linkPicUrl && !bl) {
			
					this.showOss = true;
					this.showOssImg = mod.linkPicUrl;
					this.showOssIndex = index;
			
				} else if (mod.clickUrl == null) {
			
				} else if (mod.clickUrl.indexOf('http') == 0) {
			
					window.location = mod.clickUrl + uurl;
				} else if (mod.clickUrl.slice(-5) == 'login' && this.userId) {
			
				} else if (mod.clickUrl.indexOf('#/') == 0) {
					if (mod.clickUrl.indexOf("?") == -1) {
						mod.clickUrl += '?';
					}
					var url = mod.clickUrl.split("#")[1]
					//window.location = mod.clickUrl;
					uni.navigateTo({
						url: url + uurl
					})
				} else if (mod.clickUrl == '#' || mod.clickUrl == '') {
			
				} else {
					uni.navigateTo({
						url: mod.clickUrl + uurl
					})
				}
			},
			getBannerInfo(code, list) {
			
				newsApi.getBannerInfo(code).then((res) => {
					if (list) {
						this[list] = res.data;
					} else {
						this.bannerList = res.data;
					}
			
					//uni.hideLoading()
					//document.getElementsByClassName("uni-swiper-wrapper")[0].parentNode.style="background-color: rgb(255, 255, 255); height: 120px;"
				}).catch(error => {
					uni.showToast({
			
						title: error,
						icon: "none"
					})
				})
			},
			myLoadmore(){
				this.pageIndex += 1;
				this.getList()
			},
			getList(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})	
				API.mallList({
					pageIndex: this.pageIndex,
					pageSize: 20,
				}).then((res) => {
					
					if(this.pageIndex==1){
						this.mallList = res.data.data;
					}else{
						this.mallList = [
							...this.mallList,
							...res.data.data
						];
					}
					uni.hideLoading();
					
					this.recordsTotal = res.data.recordsTotal;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		padding-bottom: 50px;
	}
	// 广告
	.banner{
		margin: 24rpx 32rpx;
		border-radius: 16rpx;
		
		img{
			
			width: 100%;
			height: 100%;
		}
	}
	
	.banner2{
		padding: 24rpx 32rpx 0 32rpx;
		border-radius: 16rpx;
		background-color: #fff;
		img{
			
			width: 100%;
			height: 100%;
		}
	}
	
    // 商品
	.commodity{
		background-color: #fff;
		margin: 24rpx 32rpx;
		padding: 24rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		.item{
			width: 48%;
			margin-bottom: 32rpx;
			// 图片
			.picture{
				width: 308rpx;
				height: 308rpx;
				img{
					width: 100%;
					height: 100%;
				}
			}
			// 商品名
			.title{
				color: rgba(16, 16, 16, 1);
				line-height: 40rpx;
				height: 60rpx;
				margin-top: 16rpx;
				.tag{
					display: inline-block;
					
					margin-right: 8rpx;
					vertical-align: middle;
					img{
						width: 104rpx;
						height: 32rpx;
					}
				}
			}
			// 价格
			.price{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 12rpx;
				.number{
					color: rgba(255, 40, 0, 1);
					font-size: 40rpx;
					text{
						font-size: 24rpx
					}
				}
				.buy{
					width: 64rpx;
					height: 64rpx;
					
					border-radius: 999px;
					display: flex;
					justify-content: center;
					align-items: center;
					background: linear-gradient(180deg, rgba(255,98,0,1) 0%,rgba(255,40,0,1) 100%);
					img{
						width: 40rpx;
						height: 40rpx;
						
					}
				}
			}
		}
	}
</style>