web-africa-h5/pages/member-area/index.vue

<template>
	<view class="pt20">
		<view class="nav-list">
			<view class="nav-item" v-if="pkCountry == 1" @click="gotoPage('/pages/product/list?cid=-1')">
				<view class="nav-item-name text-ellipsis">{{ $t('ENU_MENU_303') }}</view>
				<view class="nav-item-product d-b-c" v-if="recommendSpecialAreaList[0]">
					<view class="nav-i-p-item" v-for="(pitem, pindex) in recommendSpecialAreaList[0].waresList" :key="pindex">
						<image class="nav-i-p-item-image" :src="pitem.cover1" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<view
				class="nav-item"
				v-for="(item, index) in recommendSpecialAreaList"
				:key="index"
				v-if="item.waresList && item.waresList.length > 0"
				@click="gotoPage('/pages/product/list?cid=' + item.specialArea)"
			>
				<view class="nav-item-name text-ellipsis">{{ item.specialAreaName }}</view>
				<view class="nav-item-product d-b-c">
					<view class="nav-i-p-item" v-for="(pitem, pindex) in item.waresList" :key="pindex">
						<image class="nav-i-p-item-image" :src="pitem.cover1" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<!-- <view class="nav-item" @click="gotoPage('/pages/member-area/architecture/index')">
				<view class="nav-item-name text-ellipsis">架构管理</view>
				<view class="nav-item-product d-b-c" v-if="recommendSpecialAreaList[0]">
					<view class="nav-i-p-item" v-for="(pitem, pindex) in recommendSpecialAreaList[0].waresList" :key="pindex">
						<image class="nav-i-p-item-image" :src="pitem.cover1" mode="aspectFill"></image>
					</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isPop: false,
			userInfo: {
				pkGradeId: 0,
				pkAwardsId: 0
			},
			pop_title: '',
			pop_content: '',
			advertBannerList: [],
			recommendSpecialAreaList: [],
			waresCoverInfoList: [],
			waresVoList: [],
			current: 0,
			thIndex: 0,
			adList: [
				{
					link_url: '',
					file_path: '/static/temp/banner1.png'
				},
				{
					link_url: '',
					file_path: '/static/temp/banner2.png'
				}
			],
			adList2: [
						{
			link_url: '',
					file_path: '/static/temp/ban1.png'
				},
				{
					link_url: '',
					file_path: '/static/temp/ban2.png'
				}
			],
			isClockMore: true,
			pkCountry: 0
		};
	},
	onShow() {
		console.log(1);
		this.getData();
		this.getCartNum();
		this.getUserInfoData();
	},
	methods: {
		// 获取用户信息
		getUserInfoData() {
			let self = this;
			self.loadding = true;
			self._get('member/api/member/get-info', {}, function(res) {
				if (res.code == 200) {
					self.userInfo = res.data;
					self.pkCountry = res.data.pkCountry;
					self.getPop();
				}
				self.loadding = false;
				uni.hideLoading();
			});
		},
		getPop() {
			let self = this;
			self._get(
				'system/api/notice/index-pop-screen',
				{
					grade: self.userInfo.pkGradeId,
					awards: self.userInfo.pkAwardsId
				},
				res => {
					if (res.data && res.data.length > 0) {
						self.isPop = true;
						self.pop_content = res.data ? res.data[0].content : '';
						self.pop_title = res.data ? res.data[0].title : '';
					}
				}
			);
		},
		getCartNum() {
			let self = this;
			self._get(
				'sale/api/shopping/getShoppingCount',
				{
					specialArea: '',
					pkCountry: ''
				},
				res => {
					uni.setTabBarBadge({
						index: 2,
						text: res.data.cont + ''
					});
				}
			);
		},
		getData() {
			let self = this;
			self._get('sale/api/wares/get-app-index', {}, res => {
				console.log(res);
				self.advertBannerList = res.data.advertBannerList;
				self.recommendSpecialAreaList = res.data.recommendSpecialAreaList;
				self.waresCoverInfoList = res.data.waresCoverInfoList;
				self.waresVoList = res.data.waresVoList;
			});
		},
		changeSwiper(e) {
			this.current = e.detail.current;
		},
		changepackAd(e) {
			this.thIndex = e.detail.current;
		},
		gotoWeb(url) {
			this.gotoPage('/pages/webview/webview?url=' + encodeURIComponent(url));
		}
	}
};
</script>

<style lang="scss">
.product-list {
	padding: 0 26rpx 0 23rpx;
}

.diy-banner-box {
	// margin-bottom: 30rpx;
}

.diy-banner-box {
	padding-top: 25rpx;
}

.diy-banner-box .swiper {
	width: 750rpx;
	height: 310rpx;
}

.diy-banner-box image {
	width: 702rpx;
	height: 310rpx;
	margin: 0 auto;
	border-radius: 25rpx;
}

.diy-banner-box .swiper-dots {
	position: absolute;
	bottom: 15rpx;
	left: 0;
	right: 0;
	margin: auto;
}

.swiper-dots .swiper-dot {
	width: 28rpx;
	height: 6rpx;
	border-radius: 3rpx;
	background: #ffffff;
	opacity: 0.75;
	margin-right: 4rpx;
}

.swiper-dots .swiper-dot.active {
	background: #f94856;
	opacity: 1;
}

.top_head {
	z-index: 1;
	padding: 0 26rpx;
	width: 750rpx;
	position: sticky;
	top: 0;
	left: 0;
	z-index: 100;
	box-sizing: border-box;
}

.head_top {
	width: 100%;
	height: var(--status-bar-height);
}

.t-i-j {
	width: 180rpx;
	text-align: justify;
	height: 36rpx;
	overflow: hidden;
	line-height: 1;
}

.jus-null {
	display: inline-block;
	width: 100%;
}

.nav-list {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	padding: 0 24rpx;
}

.nav-item {
	width: 344rpx;
	// height: 222rpx;
	background: #ffffff;
	border-radius: 15rpx;
	margin-bottom: 20rpx;

	.nav-item-name {
		font-size: 30rpx;
		color: #333;
		font-weight: bold;
		padding: 0 20rpx;
		height: 68rpx;
		line-height: 68rpx;
		background: linear-gradient(-120deg, rgba(252, 231, 228, 0.85) 0%, rgba(255, 235, 224, 0.45) 38%, rgba(253, 247, 235, 0.45) 99%);
	}

	.nav-item-product {
		padding: 10rpx 20rpx;
	}

	.nav-i-p-item {
		width: 140rpx;
		height: 140rpx;
		margin-right: 20rpx;

		image {
			width: 140rpx;
			height: 140rpx;
		}
	}
}

.packAdswiper-box {
	width: 340rpx;
	// width: 702rpx;
	height: 506rpx;
	position: relative;
	margin-bottom: 20rpx;
}

.packAdswiper-box .swiper-dots {
	position: absolute;
	bottom: 15rpx;
	left: 0;
	right: 0;
	margin: auto;
}

.packAdswiper-box .swiper-dots .swiper-dot {
	width: 16rpx;
	height: 16rpx;
	border-radius: 50%;
	background: #ffffff;
	opacity: 0.75;
	margin-right: 4rpx;
}

.packAdswiper-box .swiper-dots .swiper-dot.active {
	background: #f94856;
	opacity: 1;
}

.packAdswiper {
	width: 344rpx;
	// width: 702rpx;
	height: 506rpx;
	// border-radius: 25rpx;
	margin: 0 auto;
	border-radius: 15rpx;
	overflow: hidden;
}

.packAdswiper image {
	width: 344rpx;
	height: 506rpx;
	margin: 0 auto;
	border-radius: 15rpx;
}

.product-item {
	width: 340rpx;
	height: 506rpx;
	background-color: #ffffff;
	border-radius: 15rpx;
	margin-bottom: 20rpx;
	overflow: hidden;
}

.product-item .product-img {
	width: 100%;
	height: 340rpx;
	display: block;
}

.product-info {
	padding: 20rpx;
}

.pop-bg {
	z-index: 101;
}

.pop-content {
	position: fixed;
	width: 90%;
	box-sizing: border-box;
	z-index: 102;
	left: 0;
	right: 0;
	margin: auto;
	top: 10%;
	background-color: #ffffff;
	border-radius: 15rpx;
	padding: 20rpx;
}

.pop-list {
	max-height: 60vh;
	overflow-y: auto;
}

.pop-list::-webkit-scrollbar {
	/*滚动条整体样式*/
	/*高宽分别对应横竖滚动条的尺寸*/
	display: block;
	width: 5rpx !important;
	height: 1rpx !important;
	-webkit-appearance: default-button;
}

.pop-list::-webkit-scrollbar-thumb {
	/*滚动条里面小方块*/
	border-radius: 10px;
	background-color: #909399;
	// background-image: -webkit-linear-gradient(45deg,
	//     rgba(255, 255, 255, 0.2) 25%,
	//     transparent 25%,
	//     transparent 50%,
	//     rgba(255, 255, 255, 0.2) 50%,
	//     rgba(255, 255, 255, 0.2) 75%,
	//     transparent 75%,
	//     transparent);
}

.pop-list::-webkit-scrollbar-track {
	/*滚动条里面轨道*/
	box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
	background: #ededed;
	border-radius: 10px;
}

.more-btn {
	margin: 0 auto;
	margin-bottom: 20rpx;
	background-color: #fff;
	border-radius: 15rpx;
	font-size: 26rpx;
	color: #333;
	width: 702rpx;
}
</style>