frontend-app/pages/home/home.vue

<template>
	<view class="home_warp">
		<!-- 带背景的头部 -->
		<view class="home_header_warp"></view>
		<view class="home_content_z_warp">
			<view class="header_title_warp">
				<up-image src="/static/home/logo.png" width="86" height="30" bgColor="#f1f6ff00"></up-image>
				<view class="header_right_warp">
					<view class="language_warp" style="width: 100%;justify-content: flex-start;" @click="jumpSearch">
						<up-image src="/static/home/search.png" width="18" height="18" bgColor="#f1f6ff00"></up-image>
						<text class="search_msg_warp">搜索</text>
					</view>
					<!-- <view class="language_warp" @click="languageShow = true">
						<text>CN</text>
						<up-image src="/static/common/down.png" width="10" height="10" bgColor="#f1f6ff00"></up-image>
					</view> -->
				</view>
			</view>
			<!-- banner图 -->
			<view style="padding: 0 30rpx;">
				<up-swiper
					:list="swiperList"
					height="120"
					radius="10"
					@change="e => currentNum = e.current"
					bgColor="#ffffff00"
				>
					<template #indicator>
						<view
							class="indicator-num"
						>
							<text class="indicator-num__text">{{ currentNum + 1 }}/{{ swiperList.length }}</text>
						</view>
					</template>
				</up-swiper>
			</view>
			<!-- 分类 -->
			<view class="home_sort_warp">
				<view class="sort_comm_warp" v-if="sortList && sortList.length !==0">
					<view v-for="item in sortList" :key="item.id" class="sort_item_comm" @click="jumpSort(item)">
						<up-image :src="item.icon" width="40" height="32" bgColor="#f1f6ff00"></up-image>
						<view class="sort_item_title_comm">{{item.name}}</view>
					</view>
				</view>
				<view v-else class="not_order_warp">
					<up-image src="/static/common/not_order.png" width="80" height="80" bgColor="#f1f6ff00"></up-image>
					<view class="not_order_msg_warp">暂无分类</view>
				</view>
			</view>
			<!-- 带灰色背景的内容 -->
			<view class="home_content_warp">
				<!-- 转盘 -->
				<!-- <up-image src="/static/home/turntable.png" width="100%" height="128" bgColor="#f1f6ff00" @click="jumpTurntable"></up-image> -->
				
				<!-- 爆款专区-->
				<view class="product_comm hx_warp" v-if="faddishProduct && faddishProduct.length!==0">
					<view class="product_title">
						<view class="product_title_left">
							<text class="product_title_yp">德商汇优品</text>
							<up-image src="/static/home/youxuan.png" width="10" height="10" bgColor="#f1f6ff00" ></up-image>
							<text style="margin-left: 6rpx;color: #FFFFFF;">品牌5折秒杀福利</text>
						</view>
						<view class="product_title_f" style="font-weight: bold;" @click="jumpWelcome">
							<text style="margin-right: 10rpx;">立即抢购</text>
							<view style="margin-top: 10rpx;"><up-image src="/static/common/right_y_st2.png" width="12" height="12" bgColor="#f1f6ff00"></up-image></view>
						</view>
					</view>
					<view :class="faddishProduct && faddishProduct.length > 2 ? 'product_content product_content2':'product_content'">
						<up-loading-icon :show="productLoading"></up-loading-icon>
						<view :class="faddishProduct && faddishProduct.length > 2 ? 'product_item2':'product_item'" v-for="item in faddishProduct" :key="item.id" @click="jumpInfo(item)">
							<up-image :src="item.url" width="100%" height="130" bgColor="#f1f6ff00" shape="square" radius='15'></up-image>
							<view class="product_f_item">
								<view class="product_f_item_name">{{item.title}}</view>
								<view class="product_f_item_price product_f_item_price_hx">优选价{{item.adPrice}}元</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 积分兑换，红包抽奖 -->
				<view class="min_card_warp">
					<!-- 积分兑换 -->
					<view class="min_card_item min_card_item_jf" @click="jumpPrdference">
						<up-image src="/static/home/min_card_jfdh.png" width="60" height="14" bgColor="#f1f6ff00" ></up-image>
						<view class="min_card_item_content">
							<view class="content_msg">
								<view>好礼随心兑</view>
								<view style="display: flex;align-items: center;">
									兑换
									<view style="margin-top: 6rpx;margin-left: 4rpx;"><up-image src="/static/common/right_y.png" width="10" height="10" bgColor="#f1f6ff00"></up-image></view>
								</view>
							</view>
							<up-image src="/static/home/min_card_jfdh_2.png" width="66" height="46" bgColor="#f1f6ff00" ></up-image>
						</view>
					</view>
					<!-- 红包抽奖 -->
					<view class="min_card_item min_card_item_cj" @click="jumpTurntable">
						<up-image src="/static/home/min_card_hbcj.png" width="60" height="14" bgColor="#f1f6ff00" ></up-image>
						<view class="min_card_item_content">
							<view class="content_msg">
								<view>现金红包等你拿！</view>
								<view style="display: flex;align-items: center;">
									抽奖
									<view style="margin-top: 6rpx;margin-left: 4rpx;"><up-image src="/static/common/right_y.png" width="10" height="10" bgColor="#f1f6ff00"></up-image></view>
								</view>
							</view>
							<up-image src="/static/home/min_card_hbcj_2.png" width="66" height="46" bgColor="#f1f6ff00" ></up-image>
						</view>
					</view>
				</view>
				<!-- 好物优选 -->
				<view class="product_comm yx_warp" v-if="yxProduct && yxProduct.length!==0" @click="jumpPrdference">
					<view class="product_title">
						<view class="product_title_left">
							<text class="product_title_z">德商汇优选</text>
							<text class="product_title_zk">4折起 ></text>
						</view>
						<view class="product_title_f" style="font-weight: bold; color: #999999FF;">
							<text style="margin-right: 4rpx;">立即抢购</text>
							<view style="margin-top: 10rpx;"><up-image src="/static/common/right.png" width="12" height="12" bgColor="#f1f6ff00"></up-image></view>
						</view>
					</view>
					<view class="product_tips">平价专区 抢到就是赚到！</view>
					<view :class="yxProduct && yxProduct.length > 3 ? 'product_content_yx product_content2':'product_content_yx'">
						<up-loading-icon :show="productLoading"></up-loading-icon>
						<view :class="yxProduct && yxProduct.length < 4 ? 'product_item_yx product_item_yx2':'product_item_yx'" v-for="item in yxProduct" :key="item.id">
							<up-image :src="item.url" width="100%" height="80" bgColor="#f1f6ff00" shape="square" radius='10'></up-image>
							<!-- <view class="product_f_item">
								<view class="product_f_item_name">{{item.title}}</view>
								<view class="product_f_item_price product_f_item_price_yx">优选价{{item.adPrice}}元</view>
							</view> -->
						</view>
					</view>
				</view>
				<!-- 为您精选 -->
				<choiceness/>
			</view>
			
		</view>
		<!-- 暂未开放 -->
		<up-modal :show="openShow" :showConfirmButton = "false">
			<view class="slot-content">
				<view class="close_warp" @click="openShow=false;">
					<up-image src="/static/common/close.png" width="20" height="20" bgColor="#f1f6ff00"></up-image>
				</view>
				<view class="content_">
					<view class="content_1">温馨提示</view>
					<view class="content_2">暂未开放</view>
				</view>
				<view class="but_">
					<view class="but_copy" @click="openShow=false;">确定</view>
				</view>
			</view>
		</up-modal>
		<CustomTabBar :tabIndex="0"/>
		<up-action-sheet :actions="languageList"  :show="languageShow" cancelText="取消" @close="languageShow=false"></up-action-sheet>
		<up-overlay :show="bannerShow" >
			<view class="up_content" @tap.stop>
				<view class="uni-banner">
					<view class="banner_box">
						<view class="title_">发现新版本</view>
						<view class="version_">
							<view class="version_item">V{{updateApkObj.versionCode || 100}}</view>
						</view>
						<view class="conter">{{updateApkObj.content}}</view>
						<view class="banner_foot" v-if="!bannerPercentageShow">
							<button @click="goUpdate(updateApkObj,platformType)" class="banner_foot_button">立即更新</button>
							<view @click="bannerShow = false;" class="banner_foot_button_no" v-if="!updateApkObj.isForce">暂不更新</view>
						</view>
						<view v-else>
							<up-line-progress :percentage="bannerPercentage" activeColor="#FF7C41"></up-line-progress>
							<view class="banner_loading_msg">
								更新中{{bannerPercentage}}%
							</view>
						</view>
					</view>
				</view>
			</view>
		</up-overlay>
	</view>
</template>

<script>
	import choiceness from '@/components/choiceness/choiceness.vue';
	import { searchList } from '@/api/product.js';
	import { getCascadeCategory,checkAppVersion } from '@/api/common.js';
	import { SEARCH_TYPE } from '@/utils/enumUtils.js'
	import CustomTabBar from '@/components/custom-tab-bar.vue'; // 引入自定义组件路径可能需要根据项目结构调整
	import dayjs from 'dayjs';
	import { comparisonVersionHandler } from '@/utils/index.js';

	export default {
		components:{choiceness,CustomTabBar},
		data() {
			return {
				swiperList:[
					'/static/home/banner01.png',  
					'/static/home/banner04.png',  
				],
				currentNum:0,
				sortList:[],
				languageShow:false,// 语言选项
				languageList:[
					{  
						name: '中文',  
						key:"CN"
					}, {  
						name: '英文',  
						key:"EN"
					},  
				],
				currentLanguage:{},
				yxProduct:[],// 好物优选列表
				faddishProduct:[],// 爆款专区
				hotList:[
					{
						id:1,
						name:"中文中文中文中文中文",
						url:"/static/common/product_def.png",
						price:99,
					},{
						id:2,
						name:"中文中文中文中文",
						url:"/static/common/product_def.png",
						price:99,
					},{
						id:3,
						name:"中文中文中文中文中文",
						url:"/static/common/product_def.png",
						price:99,
					},{
						id:4,
						name:"中文中文中文中文中文",
						url:"/static/common/product_def.png",
						price:99,
					},
				],// 热门
				productLoading:false,
				openShow:false,
				platformType:null,// 当前设备信息
				bannerShow: false, // 是否需要強制更新app
				type: '', // 设备类型  android:2, ios:1
				updateApkObj: {}, // 后台数据
				bannerPercentageShow:false,// 是否显示进度条
				bannerPercentage:0,// 进度条
			}
		},
		onShow() {
			/*#ifdef APP-PLUS*/
			  uni.hideTabBar({
				animation: false
			  })
			/*#endif*/
			// 获取设备是安卓还是ios
			const appUpdate = uni.getStorageSync('platform');
			const versionUpdateTime = uni.getStorageSync("versionUpdateTime");
			// #ifdef APP-PLUS
				console.log("上次更新时间 versionUpdateTime",dayjs(versionUpdateTime).format("YYYY-MM-DD HH:mm:ss"));
				console.log("当前时间戳",dayjs().format("YYYY-MM-DD HH:mm:ss"));
				const time1 = dayjs(versionUpdateTime);// 上一次更新的时间
				const time2 = dayjs();
				const diff = time2.diff(time1);
				if(!versionUpdateTime || diff > 5 * 60 * 1000){
					console.log("进来了...");
					this.platformType = appUpdate == 'android' ? 'ANDROID' : 'IOS';
					this.checkUpdate();  // 判断是否需要更新
				}else{
					console.log("没有大于");
				}
			// #endif 
			this.getSortList();
			this.querySearchList(SEARCH_TYPE.SOMETHING);// 好物专区
			this.querySearchList(SEARCH_TYPE.EXPLOSIVE);// 爆单专区
		},
		mounted() {
		},
		methods: {
			checkUpdate() {
				const self = this,
					localAppVersonName = uni.getStorageSync('version'),
					localAppVerson = uni.getStorageSync('versionCode');
					
				// #ifdef APP-PLUS
				plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {
					const params={
						terminal: self.platformType,
						versionCode:localAppVerson,
					}
					checkAppVersion(params).then(res => {
						if(res && res.bizcode === 100){
							const data = res.data || {};
							// app大版本更新，versionName：1.0.1 versionCode：102
							if (data && Object.keys(data).length!==0 && comparisonVersionHandler(localAppVerson, data.versionCode)) {
								uni.hideTabBar()    // 隐藏首页底部tabbar 按钮
								self.updateApkObj = data;
								self.bannerShow = true;  // 显示弹窗
								return;
							}else{
								return;
							}
						}
					});
				});
				// #endif
			},
			
			// 安装
			goUpdate(updateApkObj,platformType) {
				const self = this;
				if (platformType == 'ANDROID') {
					// 弹出系统等待对话框
					var dtask = plus.downloader.createDownload(updateApkObj.downloadUrl, {}, function(d, status) {
						// 下载完成
						if (status == 200) {
							plus.runtime.install(plus.io.convertLocalFileSystemURL(d.filename), {force: true}, function(resp){
								// 直接重启APP
								uni.setStorageSync('versionUpdateTime', dayjs().valueOf()); // 记录升级的时间
								plus.runtime.restart();
							}, function(error) {
								console.log("error",error);
								uni.showToast({
									title: error.message,
									mask: false,
									duration: 1500
								});
							});
						} else {
							self.bannerPercentageShow = false;
							uni.showToast({
								title: '更新失败',
								mask: false,
								duration: 1500
							});
						}
					});
					try {
						dtask.start(); // 开启下载的任务
						let prg = 0;
						this.bannerPercentageShow = true;
						dtask.addEventListener('statechanged', function(task, status) {
							// 给下载任务设置一个监听 并根据状态  做操作
							switch (task.state) {
								case 1:
									break;
								case 2:
									break;
								case 3:
									prg = parseInt((parseFloat(task.downloadedSize) / parseFloat(task.totalSize)) * 100);
									self.bannerPercentage = prg;
									break;
								case 4:
									plus.nativeUI.closeWaiting();
									self.bannerShow = false;  // 显示弹窗
									break;
							}
						});
					} catch (err) {
						console.log("更新失败-03err",err);
						plus.nativeUI.closeWaiting();
						uni.showToast({
							title: '更新失败-03',
							mask: false,
							duration: 1500
						});
					}
				} else if (platformType == 'IOS') {  // ios跳转到app store
					plus.runtime.openURL(updateApkObj.downloadUrl);
				}
			},
			jumpTurntable(){
				uni.navigateTo({
					url:'/pages/turntable/turntable?backPath=home',
				})
			},
			jumpPrdference(){
				uni.navigateTo({
					url:'/pages/preference/preference',
				})
			},
			jumpWelcome(){
				uni.navigateTo({
					url:'/pages/welcome/welcome',
				})
			},
			jumpSearch(){
				uni.navigateTo({
					url:'/pages/search/search',
				})
			},
			/**
			 * 查询商品列表
			 */
			async querySearchList(type){
				this.productLoading = true;
				const params = {
					type,
					page:1,
					pageSize:type === SEARCH_TYPE.SOMETHING ? 4 : 3,
				}
				const resp = await searchList(params);
				if(resp && resp.bizcode === 100){
					if(type === SEARCH_TYPE.SOMETHING){// 好物优选
						this.yxProduct = resp.data;
					}else if(type === SEARCH_TYPE.EXPLOSIVE){// 爆单专区
						this.faddishProduct = resp.data;
					}
				}
				this.productLoading = false;
			},
			/**
			 * 查询分类列表
			 */
			async getSortList(){
				const resp = await getCascadeCategory({parentId:0});
				if(resp && resp.bizcode === 100){
					this.sortList = resp.data.slice(0,10);
				}
			},
			// 跳转到分类栏目
			jumpSort(item){
				uni.setStorageSync('sortId', item.id);
				uni.switchTab({// 首页
				    url: '/pages/sort/sort',
				})
			},
			// 跳转到商品详情
			jumpInfo(item){
				uni.navigateTo({
				    url: '/pages/productInfo/productInfo?id='+item.id,
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.home_warp{
	background: $app-bj;
	height: calc(100vh - 140rpx);// 140rpx 是底部的导航栏高度
	overflow: auto;
	position: relative;
}
.home_header_warp{
	background-color: #AC2A29FF;
	// background: linear-gradient(0deg, $app-bj, #AC2A29FF);
	height: 500rpx;
	padding: 100rpx 30rpx 0rpx;
}
.home_content_z_warp{
	position: absolute;
	top:90rpx;
	.header_title_warp{
		display: flex;
		margin-bottom: 30rpx;
		padding: 0 30rpx;
	}
	.header_right_warp{
		display: flex;
		align-items: center;
		width: calc(100% - 140rpx);
	}
	.language_warp{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100rpx;
		background: #EEEEEEFF;
		border-radius: 16rpx;
		margin-left: 40rpx;
		padding: 10rpx 20rpx;
	}
	.search_msg_warp{
		margin-left: 20rpx;
		font-weight: 500;
		font-size: 26rpx;
		color: #333333;
	}
}

.home_sort_warp{
	// position: absolute;
	top: 460rpx;
	padding: 30rpx 30rpx 0;
	width: calc(100% - 60rpx);
	.sort_warp{
		background: #ffffff;
		padding: 20rpx;
		border-radius: 20rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		
		.sort_item{
			width: 18%;
			text-align: center;
			margin-bottom: 20rpx;
		}
		.sort_item_title{
			font-weight: 500;
			font-size: 22rpx;
			color: #333333;
		}
	}
}

.home_content_warp{
	// margin-top: 190rpx;
	padding: 0 30rpx;
	.product_comm{
		border-radius: 30rpx;
		padding: 10rpx;
		color: #FFFFFF;
		margin-top: 20rpx;
	}
	.yx_warp{
		// background: linear-gradient(0deg, #ffe0ccFF,#fff7f2FF);
		background: linear-gradient(0deg, #ff8830ad,#fff7f2FF);
	}
	.hx_warp{
		background: linear-gradient(0deg, #ff3d3aFF, #ff8830FF);
	}
	.product_title{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 20rpx;
	}
	.product_title_yp{
		font-weight: 800;
		font-size: 36rpx;
		color: #FFFFFF;
		margin-right: 10rpx;
	}
	.product_title_z{
		font-weight: 800;
		font-size: 36rpx;
		color: #333333FF;
		margin-right: 10rpx;
	}
	.product_title_zk{
		border-radius: 15px;
		border: 1px solid #F68103;
		color: #F68103;
		padding: 4rpx 20rpx;
	}
	.product_title_left{
		font-size: 20rpx;
		display: flex;
		align-items: center;
	}
	.product_title_f{
		font-size: 20rpx;
		color: #FFFFFF;
		margin-left: 10rpx;
		display: flex;
		align-items: center;
	}
	.product_content_yx {
		display: flex;
		padding: 20rpx;
	}
	.product_content{
		background-color: #FFFFFF;
		padding: 20rpx;
		border-radius: 24rpx;
		display: flex;
		align-items: center;
	}
	.product_content2 {
		justify-content: space-between;
	}
	.product_item{
		width: 32%;
		position: relative;
		margin-right: 20rpx;
	}
	.product_item2{
		width: 32%;
		position: relative;
	}
	.product_item_yx{
		width: 23%;
		position: relative;
	}
	.product_item_yx2{
		margin-right: 20rpx;
	}
	.product_f_item{
		position: absolute;
		bottom: 0;
		width: calc(100% - 40rpx);
		height: 66rpx;
		background: #F5F5F5;
		border-radius: 24rpx;
		padding: 10rpx 20rpx;
		font-size: 18rpx;
		color: #000000;
	}
	.product_f_item_name{
		width: 172rpx;
		white-space: nowrap; /* 防止文本换行 */
		overflow: hidden;    /* 隐藏溢出的文本 */
		text-overflow: ellipsis; /* 使用省略号表示溢出的内容 */
		font-weight: bold;
	}
	.product_f_item_price{
		text-align: center;
		border-radius: 10rpx;
		color: #FFFFFF;
		margin-top: 10rpx;
		padding: 2rpx 0;
	}
	.product_f_item_price_yx{
		background: #FFBA41;
	}
	.product_f_item_price_hx{
		background: #FD6C24;
	}
	.product_tips{
		font-size: 24rpx;
		color: #F68103;
		line-height: 40rpx;
		margin-left: 20rpx;
	}
	// 积分兑换，红包
	.min_card_warp{
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
		.min_card_item{
			padding: 20rpx;
			width: 43%;
			border-radius: 30rpx;
			opacity: 0.8;
		}
		.min_card_item_jf{
			// background: linear-gradient(0deg,#FEF7EA, #FFFDFA);
			background: linear-gradient(0deg,#fdeccd, #FFFDFA);
		}
		.min_card_item_cj{
			// background: linear-gradient(0deg, #FFE5DC,#FFF9F6);
			background: linear-gradient(0deg, #f5d5c9,#FFF9F6);
		}
		.min_card_item_content{
			display: flex;
			justify-content: space-between;
			margin-top: 10rpx;
			.content_msg{
				font-size: 20rpx;
				color: #808080;
				display: grid;
			}
		}
	}
	// 热门榜
	.hot_warp{
		background: #FFFFFF;
		border-radius: 30rpx;
		padding: 20rpx;
		margin-top: 20rpx;
		.hot_title_warp{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.title_warp{
				display: flex;
				align-items: center;
			}
			.title_{
				font-weight: 800;
				font-size: 36rpx;
				color: #111111;
				margin-right: 10rpx;
			}
			.good_warp{
				display: flex;
				align-items: center;
			}
			.good__msg_warp{
				background: #FFF8F3;
				/* border-radius: 18rpx; */
				border-top: 2rpx solid $app-zt-color;
				border-right: 2rpx solid $app-zt-color;
				border-bottom: 2rpx solid $app-zt-color;
				font-size: 20rpx;
				color: $app-zt-color;
				padding: 4rpx 14rpx 4rpx 20rpx;
				margin-left: -6px;
				border-radius: 0rpx 18rpx 18rpx 0rpx;
			}
			.more_warp{
				display: flex;
				font-size: 24rpx;
				color: #666666;
			}
		}
	
		.hot_content_warp{
			display: flex;
			justify-content: space-between;
			margin-top: 20rpx;
			.hot_item{
				width: 24%;
			}
			.hot_item_name{
				font-weight: 800;
				font-size: 24rpx;
				color: #000000;
				width: 160rpx;
				white-space: nowrap; /* 防止文本换行 */
				overflow: hidden;    /* 隐藏溢出的文本 */
				text-overflow: ellipsis; /* 使用省略号表示溢出的内容 */
			}
			.hot_item_price{
				display: flex;
				justify-content: center;
				font-size: 20rpx;
				color: $app-zt-color;
				text-align: center;
				margin-top: 10rpx;
			}
		}
	}
	
	// 哈希商学院
	.business_school_warp{
		margin-top: 20rpx;
		height: 160rpx;
		background-image: url("data:image/png;base64,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
		background-size: 100% 100%;
		background-position: center; /* 将图片居中显示 */
		display: grid;
		align-items: center;
		padding: 0 40rpx;
		color: rgba(255,255,255,0.9);
		border-radius: 20rpx;
		.title{
			font-weight: 800;
			font-size: 32rpx;
			// color: #0987F8;
		}
		.msg{
			font-size: 20rpx;
			// color: #666666;
			display: flex;
			align-items: center;
			// margin-top: 10rpx;
		}
	}
}
</style>