2024-8-19

components/alertPop/alertPop.vue

@@ -0,0 +1,140 @@
+<template>
+	<uni-popup :ref="popid" type="center" @close="$emit('close')">
+		<view class="pop-box" :class="{popupBox1:type==1,popupBox2:type==2}">
+			<view class="tit">
+				{{title}}
+			</view>
+			<view class="content">
+			<slot />
+			</view>
+			<view v-if="buttomShow" class="btn" @click="confrim()">
+				<view class="flex-center">
+					<image v-if="icon" class="alertIcon" :src="icon" mode="widthFix"></image>
+					<view class="title">
+						{{btntitle}}		
+					</view>
+				</view>
+			</view>
+			<image src="@/static/user/close.png" mode="" class="close" @click="close()"></image>
+		</view>
+	</uni-popup>
+</template>
+
+<script>
+	export default {
+		props: {
+			buttomShow:{
+				type: Boolean,
+				default: true
+			},
+			icon:{
+				type: String,
+				default: ""
+			},
+			show:{
+				type: Boolean,
+				default: false
+			},
+			btntitle:{
+				type: String,
+				default: "確定"
+			},
+			title:{
+				type: String,
+				default: ""
+			},
+			popid: {
+				type: String,
+				default: "pop"
+			},
+			type: {
+				type: Number,
+				default: 2
+			}
+		},
+		watch: {
+			show(newValue, oldValue) {
+				if(newValue){
+					this.open()
+				}else{
+					this.close();
+				}
+			}
+		},
+		data() {
+			return {
+
+			};
+		},
+		onLoad(options) {
+
+		},
+		onShow() {},
+		methods: {
+			confrim(){
+				this.$emit("confrim")
+			},
+			open() {
+				this.$refs[this.popid].open()
+			},
+			close() {
+				this.$emit('close')
+				this.$refs[this.popid].close()
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	.pop-box {
+		width: 633rpx;
+		background-size: 100% 100%;
+		position: relative;
+		.content{
+			min-height: 500rpx;
+		}
+		.tit {
+			font-weight: bold;
+			font-size: 44rpx;
+			color: #222222;
+			text-align: center;
+			padding-top: 10rpx;
+			letter-spacing: 10rpx;
+		}
+
+		.close {
+			width: 80rpx;
+			height: 80rpx;
+			position: absolute;
+			left: 0;
+			right: 0;
+			bottom: -110rpx;
+			margin: auto;
+		}
+
+		.btn {
+			line-height: 77rpx;
+			background: linear-gradient(268deg, rgba(113, 87, 185, 0.99), #8667C3, #7258B9);
+			border-radius: 10rpx;
+			text-align: center;
+			font-weight: bold;
+			font-size: 35rpx;
+			color: #FFFFFF;
+			position: absolute;
+			bottom: 90rpx;
+			left: 100rpx;
+			right: 100rpx;
+		}
+	}
+
+	.popupBox1 {
+		height: 1076rpx;
+		background-image: url('@/static/user/b-tc.png');
+	}
+
+	.popupBox2 {
+		height: 823rpx;
+		background-image: url('@/static/user/lm/tc-vip.png');
+
+	}
+</style>

components/alertPop/vipPop.vue

@@ -0,0 +1,110 @@
+<template>
+	<alertPop title="开通VIP" btntitle='确认开通' :show="vipAlertShow" @close="vipAlertShow=false">
+		<view class="popup-box">
+			<image src="../../static/user/lm/huanguan.png" mode="" class="hg"></image>
+			<view class="tit" style="letter-spacing: 0;">
+				会员VIP
+			</view>
+			<view class="gg">
+				购买VIP免除广告30天
+			</view>
+			<view class="yue">
+				<image src="../../static/index/index/icon01.png" mode=""></image>
+				<view class="">
+					拥有矿石 <text>10000</text> 个，开通需 <text>10000</text> 个
+				</view>
+			</view>
+		</view>
+	</alertPop>
+</template>
+
+<script>
+	import alertPop from "@/components/alertPop/alertPop.vue"
+	export default {
+		data() {
+			return {
+				vipAlertShow:false,
+			};
+		},
+		components: {
+			alertPop
+		},
+		onLoad(options) {
+
+		},
+		onShow() {},
+		methods: {
+			open(name) {
+				this.vipAlertShow = true;
+			},
+			close(name) {
+				this.vipAlertShow = false;
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	.popup-box {
+		.hg {
+			width: 256rpx;
+			height: 234rpx;
+			display: block;
+			margin:68rpx auto 35rpx;
+		}
+		.tit {
+			font-weight: bold;
+			font-size: 44rpx;
+			color: #222222;
+			text-align: center;
+			padding-top: 10rpx;
+			letter-spacing: 10rpx;
+		}
+	
+	
+		.gg {
+			font-weight: bold;
+			font-size: 29rpx;
+			color: #000000;
+			text-align: center;
+			padding-bottom: 58rpx;
+		}
+	
+		.yue {
+			display: flex;
+			width: 100%;
+			justify-content: center;
+	
+			image {
+				width: 43rpx;
+				height: 34rpx;
+				margin: 0;
+			}
+	
+			view {
+				padding-left: 10rpx;
+			}
+	
+			font-weight: bold;
+			font-size: 25rpx;
+			color: #222222;
+			text-align: center;
+	
+			text {
+				color: #3C4192;
+			}
+		}
+	
+		.btn {
+			width: 330rpx;
+			line-height: 77rpx;
+			background: linear-gradient(268deg, rgba(113, 87, 185, 0.99), #8667C3, #7258B9);
+			border-radius: 10rpx;
+			margin: 35rpx auto 0;
+			text-align: center;
+			font-weight: bold;
+			font-size: 35rpx;
+			color: #FFFFFF;
+		}
+	}
+</style>

pages.json

@@ -145,12 +145,37 @@
 		{
 			"root": "pages/user",
 			"name": "user",
-			"pages": [{
+			"pages": [
+				{
 					"path": "about",
 					"style": {
 						"navigationBarTitleText": "隐私协议"
 					}
 				},
+				{
+					"path": "myfans",
+					"style": {
+						"navigationBarTitleText": "我的粉丝",
+						"navigationBarBackgroundColor": "rgb(34,34,34)",
+						"navigationBarTextStyle": "white"
+					}
+				},
+				{
+					"path": "shareQrCode",
+					"style": {
+						"navigationBarTitleText": "邀请好友",
+						"app-plus": {
+							"titleNView": {
+								"buttons": [{
+									"text": "刷新 ",
+									"float": "right",
+									"color": "#1356FF",
+									"fontSize": "14px"
+								}]
+							}
+						}
+					}
+				}, 
 				{
 					"path": "user",
 					"style": {

pages/index/index.vue

@@ -7,7 +7,8 @@
 				<view class="flex item-user">
 					<view class="item-left-user flex">
 						<view class="user-pic">
-							<image class="user-img" src="../../static/img/new.png" mode="scaleToFill"></image>
+							<image class="user-img" src="../../static/user/myfans/banner.png" mode="scaleToFill">
+							</image>
 						</view>
 						<view class="user-name-box">
 							<view class="user-name">
@@ -24,12 +25,12 @@
 							</view>
 						</view>
 					</view>
-					<view class="item-rigt-user">
+					<view class="item-rigt-user" @click="openTc('popupvip')">
 						<image class="item-right-vip" src="../../static/index/index/vip.png" mode="scaleToFill"></image>
 					</view>
 				</view>
 				<view class="item-user-model flex">
-					<view class="model">
+					<view class="model" @click="openGg">
 						<image class="model-image model1" src="../../static/index/index/model1.png" mode="scaleToFill">
 						</image>
 						<view class="model-name">
@@ -45,42 +46,77 @@
 							</view>
 						</view>
 					</navigator>
-					<view class="model">
-						<image class="model-image model3" src="../../static/index/index/model3.png" mode="scaleToFill">
-						</image>
-						<view class="model-name">
-							好友
+					<navigator url="/pages/user/myfans">
+						<view class="model">
+							<image class="model-image model3" src="../../static/index/index/model3.png"
+								mode="scaleToFill">
+							</image>
+							<view class="model-name">
+								好友
+							</view>
 						</view>
-					</view>
+					</navigator>
 				</view>
 
 				<view class="flex function-type">
-					<view class="function-block">
-						<image class="type1" src="../../static/index/index/type2.png" mode=""></image>
-					</view>
+					<navigator url="/pages/user/shareQrCode">
+						<view class="function-block">
+							<image class="type1" src="../../static/index/index/type2.png" mode=""></image>
+						</view>
+					</navigator>
 					<view class="function-block">
 						<image class="type2" src="../../static/index/index/type1.png" mode=""></image>
 					</view>
 				</view>
-
 			</view>
 		</view>
+		<vipPop ref="vipPop"></vipPop>
+		<alertPop class="alertTime" ref="alertGg" :buttomShow="false" title="原料剩余">
+			<view class="timeTitle">
+				原料供应剩余
+			</view>
+			<view class="timeBox flex-center">
+				<image class="timeIcon" src="@/static/index/time.png" mode="scaleToFill"></image>
+				<uni-countdown class="timedown" :show-day="false" :hour="12" :minute="12" :second="12" :font-size="50"
+					backgroundColor='transparent' color='#FFF'></uni-countdown>
+			</view>
+			<view class="alerttip">
+				矿石原料每天可补充12次,每次增加 2小时,若供应不足产线将停止生产
+			</view>
+			<view class="flex-center alertbuttom">
+				<image class="alertVideo" src="../../static/index/video.png" mode="scaleToFill"></image>
+				<view class="buttext">
+					看广告补充(12/12)
+				</view>
+			</view>
+		</alertPop>
 	</view>
 </template>
-
 <script>
+	import vipPop from "@/components/alertPop/vipPop.vue"
+	import alertPop from "@/components/alertPop/alertPop.vue"
 	export default {
 		data() {
-			return {
-
-			};
+			return {};
+		},
+		components: {
+			vipPop,
+			alertPop
 		},
 		onLoad(options) {
 
 		},
 		onShow() {},
 		methods: {
-
+			openTc(name) {
+				this.$refs.vipPop.open();
+			},
+			closeTc(name) {
+				this.$refs.vipPop.close();
+			},
+			openGg() {
+				this.$refs.alertGg.open();
+			}
 		}
 	};
 </script>
@@ -204,4 +240,68 @@
 			}
 		}
 	}
+
+	.alertTime {
+		.alerttip{
+			padding: 50rpx 100rpx;
+			font-weight: bold;
+			color: #222222;
+		}
+		.alertbuttom {
+			background: linear-gradient(268deg, rgba(113, 87, 185, 0.99), #8667C3, #7258B9);
+			border-radius: 10rpx;
+			text-align: center;
+			font-weight: bold;
+			font-size: 30rpx;
+			line-height: 85rpx;
+			color: #FFF;
+			.alertVideo {
+				width: 36rpx;
+				height: 26rpx;
+			}
+			.buttext{
+				margin-left: 10rpx;
+			}
+			margin: 50rpx 100rpx 0 100rpx;
+		}
+
+		.timeTitle {
+			padding-top: 100rpx;
+			text-align: center;
+			font-weight: 800;
+			font-size: 39rpx;
+			color: #222222;
+		}
+
+		.timeBox {
+			background-color: rgb(181, 175, 196);
+			width: 378rpx;
+			height: 94rpx;
+			margin: 0 auto;
+			border-radius: 10rpx;
+			margin-top: 50rpx;
+
+			.timeIcon {
+				width: 58rpx;
+				height: 58rpx;
+			}
+
+			.timedown {
+
+				/deep/ .uni-countdown__splitor {
+					// font-size: 42rpx;
+					color: #FFF !important;
+					margin: 0 6rpx;
+					font-weight: bold;
+				}
+
+				/deep/ .uni-countdown__number {
+					font-size: 42rpx;
+					letter-spacing: 6rpx;
+					width: auto;
+				}
+			}
+		}
+
+	}
 </style>

pages/user/lm.vue

@@ -3,7 +3,7 @@
 		<image src="../../static/user/lm/lm-bg.png" mode="widthFix" class="lm-bg"></image>
 		<view class="lm-btn flex">
 			<image src="../../static/user/lm/join.png" mode="" class="btn-1" @click="openTc('popupcz')"></image>
-			<image src="../../static/user/lm/vip.png" mode="" class="btn-1" @click="openTc('popupvip')"></image>
+			<image src="../../static/user/lm/vip.png" mode="" class="btn-1" @click="openTc('vipPop')"></image>
 		</view>
 		<view class="title">
 			联盟列表
@@ -49,36 +49,16 @@
 				<image src="../../static/user/close.png" mode="" class="close" @click="closeTc('popupcz')"></image>
 			</view>
 		</uni-popup>
-		<uni-popup ref="popupvip" type="center">
-			<view class="popup-box1 popup-box2">
-				<view class="tit">
-					开通VIP
-				</view>
-				<image src="../../static/user/lm/huanguan.png" mode="" class="hg"></image>
-				
-				<view class="tit" style="letter-spacing: 0;">
-					会员VIP
-				</view>
-				<view class="gg">
-					购买VIP免除广告30天
-				</view>
-				<view class="yue">
-					<image src="../../static/index/index/icon01.png" mode=""></image>
-					<view class="">
-						 拥有矿石 <text>10000</text> 个，开通需 <text>10000</text> 个
-					</view>
-				</view>
-				<view class="btn">
-					确认开通
-				</view>
-				<image src="../../static/user/close.png" mode="" class="close" @click="closeTc('popupvip')"></image>
-			</view>
-		</uni-popup>
+		<vipPop  ref="vipPop" ></vipPop>
 	</view>
 </template>
 
 <script>
+	import vipPop from "@/components/alertPop/vipPop.vue"
 	export default {
+		components: {
+			vipPop
+		},
 		data() {
 			return {
 				lmList: [

pages/user/myfans.vue

@@ -1,55 +1,19 @@
 <template>
 	<view class="content">
-		<view class="top-fan">
-			<image src="../../static/img/top-bg.png" mode=""></image>
-		</view>
-		<view class="fans-base flex">
-			<view class="base-item">
-				<view class="base-item-val">
-					{{fans.count || 0}}
-				</view>
-				<view class="base-item-name">
-					我的粉丝
-				</view>
-			</view>
-			<view class="jg"></view>
-			<view class="base-item">
-				<view class="base-item-val">
-					{{fans.active || 0}}
-				</view>
-				<view class="base-item-name">
-					活跃粉丝
-				</view>
-			</view>
-			<view class="jg"></view>
-			<view class="base-item">
-				<view class="base-item-val">
-					{{fans.money || 0}}
-				</view>
-				<view class="base-item-name">
-					总成交额
-				</view>
-			</view>
-		</view>
-		<view class="fans-tit">
-			我的粉丝列表
-		</view>
-		<view class="fans-list-tit flex">
-			<view class="list-item">
-				姓名
+		<image class="banner" src="@/static/user/myfans/banner.png" mode="widthFix"></image>
+		<view class="tabItem flex">
+			<view class="list" :class="{action:acTab==0}" @click="tabChange(0)">
+				我的好友
 			</view>
-			<view class="list-item">
-				ID
+			<view class="list" :class="{action:acTab==1}"  @click="tabChange(1)">
+				间接好友
 			</view>
-			<view class="list-item">
-				当日业绩
-			</view>
-			<view class="list-item">
-				粉丝数
+			<view class="list" :class="{action:acTab==2}"  @click="tabChange(2)">
+				其他好友
 			</view>
 		</view>
 		<scroll-view scroll-y="true" class="swiper-box" :style="{'height':height}" @scrolltolower="getMyfans()">
-			<view class="fans-list-val flex" v-for="(item,index) in list"
+			<view class="fans-list-val flex" v-for="(item,index) in itemList[acTab].list"
 				:style="{'background':index%2 ==0 ? '#F9F9F9':'#fff'}">
 				<view class="list-item clamp">
 					{{item.real_name||item.nickname}}
@@ -64,7 +28,7 @@
 					{{item.count}}
 				</view>
 			</view>
-			<uni-load-more :status="loadingType"></uni-load-more>
+			<uni-load-more :status="itemList[acTab].loadingType"></uni-load-more>
 		</scroll-view>
 	</view>
 </template>
@@ -76,16 +40,34 @@
 	export default {
 		data() {
 			return {
+				// 选中的对象
+				acTab:0,
 				height: '',
-				list: [],
-				page: 1,
-				limit: 10,
-				fans: {},
-				loadingType: 'more'
+				itemList: [{
+					list: [{
+						
+					}],
+					page: 1,
+					limit: 10,
+					loadingType: 'more',
+					load:false
+				}, {
+					list: [],
+					page: 1,
+					limit: 10,
+					loadingType: 'more',
+					load:false
+				},{
+					list: [],
+					page: 1,
+					limit: 10,
+					loadingType: 'more',
+					load:false
+				}]
 			}
 		},
 		onLoad() {
-			this.getMyfans()
+			this.getMyfans();
 		},
 		onReady(res) {
 			var _this = this;
@@ -103,30 +85,40 @@
 			});
 		},
 		methods: {
+			// 切换
+			tabChange(index){
+				this.acTab=index;
+				if(!this.itemList(index).load){
+					this.getMyfans();
+				}
+			},
 			getMyfans() {
-				let obj = this
+				let that = this
+				let obj = that.itemList[that.acTab];
 				if (obj.loadingType == 'loading' || obj.loadingType == 'noMore') {
 					return
 				}
-				obj.loadingType = 'loading' 
+				obj.loadingType = 'loading'
 				getMyfans({
 					page: obj.page,
 					limit: obj.limit
 				}).then(res => {
 					console.log(res)
-					obj.fans = res.data;
-					let ar = res.data.user.map((item)=>{
-						if(item.real_name.length>2){
-							let str =item.real_name.slice(1,item.real_name.length-1);
-							let str2 = str.replace(/.*/g,'*');
-							item.real_name =item.real_name.slice(0,1)+str2+item.real_name.slice(item.real_name.length-1);
-						}else if(item.real_name.length==2){
-							item.real_name =item.real_name.slice(0,1)+"*";
+					let ar = res.data.user.map((item) => {
+						if (item.real_name.length > 2) {
+							let str = item.real_name.slice(1, item.real_name.length - 1);
+							let str2 = str.replace(/.*/g, '*');
+							item.real_name = item.real_name.slice(0, 1) + str2 + item.real_name.slice(item.real_name.length - 1);
+						} else if (item.real_name.length == 2) {
+							item.real_name = item.real_name.slice(0, 1) + "*";
 						}
 						return item
 					})
 					obj.list = obj.list.concat(res.data.user)
 					obj.page++
+					if(!obj.load){
+						obj.load = true;
+					}
 					if (res.data.user.length == obj.limit) {
 						obj.loadingType = 'more'
 					} else {
@@ -141,104 +133,48 @@
 
 <style lang="scss" scoped>
 	page {
-		background-color: #f3f5f4;
+		background-color: #FFF;
 		height: 100%;
 	}
 
-	.content {
-		background-color: #f3f5f4;
-	}
-
-	.top-fan {
-		position: relative;
+	.banner {
 		width: 750rpx;
-		height: 336rpx;
 
-		image {
-			position: absolute;
-			top: 0;
-			left: 0;
-			right: 0;
-			width: 100%;
-			height: 100%;
-		}
 	}
 
-	.fans-base {
-		position: relative;
-		z-index: 2;
-		width: 702rpx;
-		height: 210rpx;
-		background: #FFFFFF;
-		box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
-		border-radius: 20rpx;
-		margin: -147rpx auto 0;
-		text-align: center;
-		font-size: 30rpx;
-		font-family: PingFang SC;
-		font-weight: 500;
-		color: #666666;
-
-		.jg {
-			width: 2rpx;
-			height: 96rpx;
-			background: #DCDCDC;
-		}
-
-		.base-item {
-			flex-grow: 1;
-
-			.base-item-val {
-				font-size: 50rpx;
-				font-family: PingFang SC;
-				font-weight: bold;
-				color: #0C1732;
-			}
-		}
-	}
-
-	.fans-tit {
-		font-size: 32rpx;
-		font-family: PingFang SC;
-		font-weight: bold;
-		color: #0C1732;
-		padding: 45rpx 0 29rpx 40rpx;
+	.content {
+		// background-color: #f3f5f4;
 	}
 
-	.fans-list-tit {
+	.fans-list-val {
 		width: 710rpx;
 		height: 100rpx;
-		background: #FFE1E2;
-		border-radius: 20rpx 20rpx 0px 0px;
 		margin: auto;
 		text-align: center;
-		;
 		font-size: 30rpx;
-		font-family: PingFang SC;
 		font-weight: bold;
-		color: #DC262B;
+		color: #0C1732;
 
 		.list-item {
 			width: 25%;
 			flex-shrink: 0;
 		}
 	}
-
-	.fans-list-val {
-		width: 710rpx;
-		height: 100rpx;
-		margin: auto;
-		text-align: center;
-		;
-		font-size: 30rpx;
-		font-family: PingFang SC;
+	.tabItem{
 		font-weight: bold;
-		color: #0C1732;
-
-		.list-item {
-			// flex-grow: 1;
-			width: 25%;
-			flex-shrink: 0;
+		font-size: 31rpx;
+		color: #FFFFFF;
+		margin-top: -40rpx;
+		.list{
+			background: rgba(51, 51, 51, .44s);
+			border-radius: 20rpx 20rpx 0px 0px;
+			padding: 30rpx;
+			width: 240rpx;
+			text-align: center;
+			flex-grow: 0;
+			&.action{
+				background-color:rgba(51, 51, 51, 1) ;
+			}
 		}
 	}
 </style>

uni_modules/uni-countdown/changelog.md

@@ -0,0 +1,26 @@
+## 1.2.3（2024-02-20）
+- 新增 支持控制小时，分钟的显隐：showHour showMinute
+## 1.2.2（2022-01-19）
+- 修复 在微信小程序中样式不生效的bug
+## 1.2.1（2022-01-18）
+- 新增 update 方法 ，在动态更新时间后，刷新组件
+## 1.2.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-countdown](https://uniapp.dcloud.io/component/uniui/uni-countdown)
+## 1.1.3（2021-10-18）
+- 重构
+- 新增 font-size 支持自定义字体大小
+## 1.1.2（2021-08-24）
+- 新增 支持国际化
+## 1.1.1（2021-07-30）
+- 优化 vue3下小程序事件警告的问题
+## 1.1.0（2021-07-30）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.0.5（2021-06-18）
+- 修复 uni-countdown 重复赋值跳两秒的 bug
+## 1.0.4（2021-05-12）
+- 新增 组件示例地址
+## 1.0.3（2021-05-08）
+- 修复 uni-countdown 不能控制倒计时的 bug
+## 1.0.2（2021-02-04）
+- 调整为uni_modules目录规范

uni_modules/uni-countdown/components/uni-countdown/i18n/en.json

@@ -0,0 +1,6 @@
+{
+	"uni-countdown.day": "day",
+	"uni-countdown.h": "h",
+	"uni-countdown.m": "m",
+	"uni-countdown.s": "s"
+}

uni_modules/uni-countdown/components/uni-countdown/i18n/index.js

@@ -0,0 +1,8 @@
+import en from './en.json'
+import zhHans from './zh-Hans.json'
+import zhHant from './zh-Hant.json'
+export default {
+	en,
+	'zh-Hans': zhHans,
+	'zh-Hant': zhHant
+}

uni_modules/uni-countdown/components/uni-countdown/i18n/zh-Hans.json

@@ -0,0 +1,6 @@
+{
+	"uni-countdown.day": "天",
+	"uni-countdown.h": "时",
+	"uni-countdown.m": "分",
+	"uni-countdown.s": "秒"
+}

uni_modules/uni-countdown/components/uni-countdown/i18n/zh-Hant.json

@@ -0,0 +1,6 @@
+{
+	"uni-countdown.day": "天",
+	"uni-countdown.h": "時",
+	"uni-countdown.m": "分",
+	"uni-countdown.s": "秒"
+}

uni_modules/uni-countdown/components/uni-countdown/uni-countdown.vue

@@ -0,0 +1,281 @@
+<template>
+	<view class="uni-countdown">
+		<text v-if="showDay" :style="[timeStyle]" class="uni-countdown__number">{{ d }}</text>
+		<text v-if="showDay" :style="[splitorStyle]" class="uni-countdown__splitor">{{dayText}}</text>
+		<text v-if="showHour" :style="[timeStyle]" class="uni-countdown__number">{{ h }}</text>
+		<text v-if="showHour" :style="[splitorStyle]" class="uni-countdown__splitor">{{ showColon ? ':' : hourText }}</text>
+		<text v-if="showMinute" :style="[timeStyle]" class="uni-countdown__number">{{ i }}</text>
+		<text v-if="showMinute" :style="[splitorStyle]" class="uni-countdown__splitor">{{ showColon ? ':' : minuteText }}</text>
+		<text :style="[timeStyle]" class="uni-countdown__number">{{ s }}</text>
+		<text v-if="!showColon" :style="[splitorStyle]" class="uni-countdown__splitor">{{secondText}}</text>
+	</view>
+</template>
+<script>
+	import {
+		initVueI18n
+	} from '@dcloudio/uni-i18n'
+	import messages from './i18n/index.js'
+	const {
+		t
+	} = initVueI18n(messages)
+	/**
+	 * Countdown 倒计时
+	 * @description 倒计时组件
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=25
+	 * @property {String} backgroundColor 背景色
+	 * @property {String} color 文字颜色
+	 * @property {Number} day 天数
+	 * @property {Number} hour 小时
+	 * @property {Number} minute 分钟
+	 * @property {Number} second 秒
+	 * @property {Number} timestamp 时间戳
+	 * @property {Boolean} showDay = [true|false] 是否显示天数
+	 * @property {Boolean} showHour = [true|false] 是否显示小时
+	 * @property {Boolean} showMinute = [true|false] 是否显示分钟
+	 * @property {Boolean} show-colon = [true|false] 是否以冒号为分隔符
+	 * @property {String} splitorColor 分割符号颜色
+	 * @event {Function} timeup 倒计时时间到触发事件
+	 * @example <uni-countdown :day="1" :hour="1" :minute="12" :second="40"></uni-countdown>
+	 */
+	export default {
+		name: 'UniCountdown',
+		emits: ['timeup'],
+		props: {
+			showDay: {
+				type: Boolean,
+				default: true
+			},
+			showHour: {
+				type: Boolean,
+				default: true
+			},
+			showMinute: {
+				type: Boolean,
+				default: true
+			},
+			showColon: {
+				type: Boolean,
+				default: true
+			},
+			start: {
+				type: Boolean,
+				default: true
+			},
+			backgroundColor: {
+				type: String,
+				default: ''
+			},
+			color: {
+				type: String,
+				default: '#333'
+			},
+			fontSize: {
+				type: Number,
+				default: 14
+			},
+			splitorColor: {
+				type: String,
+				default: '#333'
+			},
+			day: {
+				type: Number,
+				default: 0
+			},
+			hour: {
+				type: Number,
+				default: 0
+			},
+			minute: {
+				type: Number,
+				default: 0
+			},
+			second: {
+				type: Number,
+				default: 0
+			},
+			timestamp: {
+				type: Number,
+				default: 0
+			}
+		},
+		data() {
+			return {
+				timer: null,
+				syncFlag: false,
+				d: '00',
+				h: '00',
+				i: '00',
+				s: '00',
+				leftTime: 0,
+				seconds: 0
+			}
+		},
+		computed: {
+			dayText() {
+				return t("uni-countdown.day")
+			},
+			hourText(val) {
+				return t("uni-countdown.h")
+			},
+			minuteText(val) {
+				return t("uni-countdown.m")
+			},
+			secondText(val) {
+				return t("uni-countdown.s")
+			},
+			timeStyle() {
+				const {
+					color,
+					backgroundColor,
+					fontSize
+				} = this
+				return {
+					color,
+					backgroundColor,
+					fontSize: `${fontSize}px`,
+					width: `${fontSize * 22 / 14}px`, // 按字体大小为 14px 时的比例缩放
+ 					lineHeight: `${fontSize * 20 / 14}px`,
+					borderRadius: `${fontSize * 3 / 14}px`,
+				}
+			},
+			splitorStyle() {
+				const { splitorColor, fontSize, backgroundColor } = this
+				return {
+					color: splitorColor,
+					fontSize: `${fontSize * 12 / 14}px`,
+					margin: backgroundColor ? `${fontSize * 4 / 14}px` : ''
+				}
+			}
+		},
+		watch: {
+			day(val) {
+				this.changeFlag()
+			},
+			hour(val) {
+				this.changeFlag()
+			},
+			minute(val) {
+				this.changeFlag()
+			},
+			second(val) {
+				this.changeFlag()
+			},
+			start: {
+				immediate: true,
+				handler(newVal, oldVal) {
+					if (newVal) {
+						this.startData();
+					} else {
+						if (!oldVal) return
+						clearInterval(this.timer)
+					}
+				}
+
+			}
+		},
+		created: function(e) {
+			this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second)
+			this.countDown()
+		},
+		// #ifndef VUE3
+		destroyed() {
+			clearInterval(this.timer)
+		},
+		// #endif
+		// #ifdef VUE3
+		unmounted() {
+			clearInterval(this.timer)
+		},
+		// #endif
+		methods: {
+			toSeconds(timestamp, day, hours, minutes, seconds) {
+				if (timestamp) {
+					return timestamp - parseInt(new Date().getTime() / 1000, 10)
+				}
+				return day * 60 * 60 * 24 + hours * 60 * 60 + minutes * 60 + seconds
+			},
+			timeUp() {
+				clearInterval(this.timer)
+				this.$emit('timeup')
+			},
+			countDown() {
+				let seconds = this.seconds
+				let [day, hour, minute, second] = [0, 0, 0, 0]
+				if (seconds > 0) {
+					day = Math.floor(seconds / (60 * 60 * 24))
+					hour = Math.floor(seconds / (60 * 60)) - (day * 24)
+					minute = Math.floor(seconds / 60) - (day * 24 * 60) - (hour * 60)
+					second = Math.floor(seconds) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60)
+				} else {
+					this.timeUp()
+				}
+				if (day < 10) {
+					day = '0' + day
+				}
+				if (hour < 10) {
+					hour = '0' + hour
+				}
+				if (minute < 10) {
+					minute = '0' + minute
+				}
+				if (second < 10) {
+					second = '0' + second
+				}
+				this.d = day
+				this.h = hour
+				this.i = minute
+				this.s = second
+			},
+			startData() {
+				this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second)
+				if (this.seconds <= 0) {
+					this.seconds = this.toSeconds(0, 0, 0, 0, 0)
+					this.countDown()
+					return
+				}
+				clearInterval(this.timer)
+				this.countDown()
+				this.timer = setInterval(() => {
+					this.seconds--
+					if (this.seconds < 0) {
+						this.timeUp()
+						return
+					}
+					this.countDown()
+				}, 1000)
+			},
+			update(){
+				this.startData();
+			},
+			changeFlag() {
+				if (!this.syncFlag) {
+					this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second)
+					this.startData();
+					this.syncFlag = true;
+				}
+			}
+		}
+	}
+</script>
+<style lang="scss" scoped>
+	$font-size: 14px;
+
+	.uni-countdown {
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-start;
+		align-items: center;
+
+		&__splitor {
+			margin: 0 2px;
+			font-size: $font-size;
+			color: #333;
+		}
+
+		&__number {
+			border-radius: 3px;
+			text-align: center;
+			font-size: $font-size;
+		}
+	}
+</style>

uni_modules/uni-countdown/package.json

@@ -0,0 +1,83 @@
+{
+  "id": "uni-countdown",
+  "displayName": "uni-countdown 倒计时",
+  "version": "1.2.3",
+  "description": "CountDown 倒计时组件",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "countdown",
+    "倒计时"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+"dcloudext": {
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
+    "type": "component-vue"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-scss"],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}

uni_modules/uni-countdown/readme.md

@@ -0,0 +1,10 @@
+
+
+## CountDown 倒计时
+> **组件名：uni-countdown**
+> 代码块： `uCountDown`
+
+倒计时组件。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-countdown)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839