web-africa-h5/pages/index/part/home.vue

<template>
	<view>
		<view class="top_head pr" :style="'background-color: #fff;'">
			<!-- #ifndef MP-WEIXIN -->
			<view class="state_top"></view>
			<!-- #endif -->
			<view class="head_top" :style="'height:' + topBarTop() + 'px;'"></view>
			<view class="d-b-c pb20" :style="topBarHeight() == 0 ? '' : 'height:' + topBarHeight() + 'px;'">
				<view class="fb">
					<view class="t-i-j f22">
						GLOBALIZATION
						<text class="jus-null"></text>
					</view>
					<view class="t-i-j f26">
						{{ $t("w_0024") }}
						<text class="jus-null"></text>
					</view>
				</view>
				<view class="d-c-c">
					<!-- <view
						class="mr20"
						@click="
							gotoWeb(
								'https://im1c5366d.7x24cc.com/phone_webChat.html?accountId=N000000033467&chatId=302384fb-eda1-436e-a5e9-c03a2dbd6e97&visitorId=' +
									getUserId() +
									'&nickName=' +
									getUserId()
							)
						"
					>
						<u-icon name="kefu-ermai" size="32rpx" color="#333"></u-icon>
					</view> -->
					<view class="f26 gray3 d-c-c" @click="changelang()">
						<text class="mr10">{{ getlang() }}</text>
						<u-icon name="arrow-down" size="30rpx" color="#333"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<!-- 轮播 -->
		<view class="diy-banner-box pr mb20" :style="'background-color:none;'">
			<swiper class="swiper" :autoplay="true" :interval="2000" :duration="500" @change="changeSwiper">
				<swiper-item v-for="(item, index) in advertBannerList" :key="index">
					<image :src="item.picture"></image>
				</swiper-item>
			</swiper>
			<view class="swiper-dots ww100 d-c-c">
				<view :class="current == index ? 'swiper-dot active' : 'swiper-dot'"
					v-for="(item, index) in advertBannerList" :key="index"></view>
			</view>
		</view>
		<!-- <view class="time-box f26">{{$t('fn_313')+': '}}<text class="domation">{{nowDate}}</text></view> -->
		<annuity :userInfo="userInfo"></annuity>
		<view class="nav-list">
			<view class="nav-item" v-for="(item, index) in recommendSpecialAreaList" :key="index" v-if="
          (!isClockMore || index < 6) &&
          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"
						v-if="pindex < 6">
						<image class="nav-i-p-item-image" :src="pitem.cover1" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<!-- <image class="nav-item" src="/static/temp/nav1.png" mode=""></image> -->
			<!-- <image class="nav-item" src="/static/temp/nav2.png" mode=""></image> -->
			<!-- <image class="nav-item" src="/static/temp/nav3.png" mode=""></image> -->
			<!-- <image class="nav-item" src="/static/temp/nav4.png" mode=""></image> -->
		</view>
		<view class="d-c-c" v-if="recommendSpecialAreaList.length > 6">
			<button class="more-btn" v-if="isClockMore" @click="isClockMore = false">
				{{ $t("S_L_11") }}
			</button>
			<button class="more-btn" v-else @click="isClockMore = true">
				{{ $t("w_0400") }}
			</button>
		</view>
		<view class="d-b-s product-list">
			<!-- <view class="pr packAdswiper-box">
				<swiper :autoplay="false" :current="thIndex" class="packAdswiper" :interval="2000" :duration="500"
					@change="changepackAd">
					<swiper-item v-for="(item, index) in waresCoverInfoList" :key="index">
						<image :src="item.cover"></image>
					</swiper-item>
				</swiper>
				<view class="swiper-dots ww100 d-c-c">
					<view :class="thIndex == index ? 'swiper-dot active' : 'swiper-dot'"
						v-for="(item, index) in waresCoverInfoList" :key="index"></view>
				</view>
			</view> -->
			<view class="product-item" v-for="(item, index) in waresVoList" :key="index" @click="
          gotoPage(
            '/pages/product/detail?pkCountry=' +
              userInfo.pkCountry +
              '&cid=' +
              item.specialArea +
              (item.specialArea != 21
                ? '&waresCode=' + item.waresCode
                : '&pkId=' + item.pkId)
          )
        ">
				<image :src="item.cover1" mode="aspectFill" class="product-img"></image>
				<view class="product-info">
					<view class="text-ellipsis mb10 f26 gray3">{{ item.waresName }}</view>
					<view class="price-color f22">
						{{ currencyIcon() }}
						<text class="f30 fb">{{ formatNum(item.waresPrice) }}</text>
					</view>
					<view class="gray9 mt10" v-if="item.sales > 0">{{ $t("w_0252")
            }}{{ item.sales * 1 > 999 ? "999+" : item.sales }}</view>
				</view>
			</view>
		</view>
		<template v-if="isPop && !isTree">
			<view class="pop-bg" @click.stop="isPop = false"></view>
			<view class="pop-content">
				<view class="pop-content-box">
					<view class="d-e-c" @click.stop="isPop = false"><u-icon name="close" size="28rpx"
							color="#999999"></u-icon></view>
					<view class="tc fb f32 p20 border-b">{{
            $t("ENU_NOTICE_FUNCTION_TYPE_1")
          }}</view>
					<view class="pop-list">
						<view class="f28 tc p20">{{ pop_title }}</view>
						<u-parse :content="pop_content"></u-parse>
					</view>
				</view>
			</view>
		</template>
		<template v-if="isBank">
			<view class="pop-bg" @click.stop="isPop = false"></view>
			<view class="pop-content">
				<view class="pop-content-box1">
					<view class="d-e-c" @click.stop="closeBank()"><u-icon name="close" size="28rpx"
							color="#999999"></u-icon></view>
					<view class="tc fb f32">{{ $t("w_0034") }}</view>
					<view class="pop-list">
						<view class="f28 tc p20">{{ $t("fn_311") }}</view>
						<view style="text-align: center">
							<button class="bankbtn" @click="toBank">
								{{ $t("w_0343") }}
							</button>
						</view>
					</view>
				</view>
			</view>
		</template>
		<treeActive v-if="isTree" :isPop="isTree" :num="treeNum" :treeModel="treeModel" @close="closeTree"></treeActive>
	</view>
</template>

<script>
	import treeActive from "@/components/treeActive/treeActive.vue";
	import annuity from "@/components/annuity/index.vue";
	export default {
		components: {
			treeActive,
			annuity,
		},
		data() {
			return {
				isTree: false,
				isPop: false,
				isBank: false,
				userInfo: {
					pkGradeId: 0,
					pkAwardsId: 0,
					memberGrade: "",
				},
				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,
				treeModel: {},
				treePop: false,
				treeNum: 1,
				timer: null,
				nowDate: ''
			};
		},
		created() {
			this.getData();
			this.getCartNum();
			this.getUserInfoData();
			// this.getTree();
			this.getBank();
		},
		beforeDestroy() {
			if (this.timer) {
				clearInterval(this.timer);
			}
		},
		onLoad() {},
		methods: {
			setTimer(timeString) {
				let self = this;
				let currentTime = new Date(timeString);
				this.timer = setInterval(() => {
					currentTime.setSeconds(currentTime.getSeconds() + 1);
					timeString = self.formatDate(currentTime);
					self.nowDate = timeString;
				}, 1000);
			},
			formatDate(date) {
				return date.getFullYear() + '-' +
					(date.getMonth() + 1).toString().padStart(2, '0') + '-' +
					date.getDate().toString().padStart(2, '0') + ' ' +
					date.getHours().toString().padStart(2, '0') + ':' +
					date.getMinutes().toString().padStart(2, '0') + ':' +
					date.getSeconds().toString().padStart(2, '0');
			},
			getTime() {
				const time1 = this.userInfo.nowDate;
				if (this.nowDate == '') {
					this.nowDate = time1;
				}
				let currentTime = new Date(this.nowDate);
				this.setTimer(currentTime);
			},
			toBank() {
				uni.navigateTo({
					url: "/pages/user/card/list",
				});
				this.isBank = false;
				uni.setStorageSync("openBank", false);
			},
			closeBank() {
				this.isBank = false;
				uni.setStorageSync("openBank", false);
			},
			getBank() {
				let self = this;
				self._get("member/api/bank/default-bank", {}, (res) => {
					console.log(uni.getStorageSync("openBank"), "123");
					if (
						Object.keys(res.data).length === 0 &&
						uni.getStorageSync("openBank")
					) {
						self.isBank = true;
					}
				});
			},
			closeTree() {
				this.isTree = false;
			},
			getTree() {
				let self = this;
				self._get("activity/api/sa-tree-order/queryTreeActivity", {}, (res) => {
					if (res.data && res.code == 200) {
						self.treeModel = res.data;
						self.treeNum = self.treeModel.quantity;
						console.log(self.treeModel.quantity);
						self.isTree = true;
						console.log("isTree");
					}
				});
			},
			// 获取用户信息
			getUserInfoData() {
				let self = this;
				self.loadding = true;
				self._get("member/api/member/get-info", {}, function(res) {
					if (res.code == 200) {
						self.userInfo = res.data;
						if (!self.timer) {
							self.getTime();
						};
						uni.setStorageSync("currencyIcon", res.data.currencyIcon);
						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">
	.bankbtn {
		width: auto;
		background: #f94856;
		color: #fff;
		font-size: 32rpx;
		line-height: 60rpx;
		border-radius: 25px;
	}

	.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;
		white-space: nowrap;
		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;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 102;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
	}

	.pop-content-box {
		width: 90%;
		background-color: #ffffff;
		border-radius: 15rpx;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.pop-content-box1 {
		width: 70%;
		background-color: #ffffff;
		border-radius: 15rpx;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.pop-list {
		max-height: 80vh;
		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;
	}

	.counter-box {
		width: 168rpx;
		height: 50rpx;
		border-radius: 30rpx;
		border: 1rpx solid #eeeeee;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
		color: #333;
	}
	.time-box {
		padding: 24rpx;
	}
</style>