订单倒计时

2023-10-10 17:41:07 +08:00
parent 96f7e499db
commit 9a5afe03d3
15 changed files with 575 additions and 56 deletions
--- a/config/utils.js
+++ b/config/utils.js
@@ -245,7 +245,7 @@ export const setWXPay = function(payInfo, callback) {
 			'Content-Type': 'application/json'
 		},
 	}).then(res => {
-		console.log(res,'res')		
+		console.log(res,'resshoppingPay')			
 		if(res.code === 0){
 			let payData = {
 				provider : 'wxpay',
--- a/pages/bookShop/commodityDetail.vue
+++ b/pages/bookShop/commodityDetail.vue
@@ -109,10 +109,10 @@
 						</u-row>
 					</view>
 					<!-- <view class="commodityIntroduce" v-html="productInfo.productDetails"> -->
-					<view class="commodityIntroduce">
+					<view class="commodityIntroduce">						
 						<view v-if="productInfo.productDetails">
-							<rich-text v-if="productInfo.productDetails" class="xiangqing"
-								:nodes="productInfo.productDetails|formatRichText"></rich-text>
+							<rich-text v-if="productInfo.productDetails" class="xiangqing" 
+								:nodes="productInfo.productDetails|formatRichText" ></rich-text>
 						</view>
 					</view>
 				</view>
@@ -206,7 +206,6 @@
 		<music-play :playData="playData"></music-play>
 	</view>
 </template>
-
 <script>
 	import musicPlay from '@/components/music.vue'
 	import emojiList1 from '../../bkhumor-emojiplus/emoji/biaoqin.js'
@@ -214,7 +213,7 @@
 	import {
 		mapState
 	} from 'vuex';
-	import loginVue from '../user/login.vue';
+	import loginVue from '../user/login.vue';	
 	export default {
 		data() {
 			return {
@@ -270,7 +269,7 @@
 		components: {
 			musicPlay
 		},
-		methods: {
+		methods: {			
 			gotoDetail(item) {
 				//	console.log(item,'gotoDetail')
 				uni.navigateTo({
@@ -682,7 +681,7 @@
 				}

 			},
-			formatRichText(html) { //控制小程序中图片大小
+			formatRichText(html) { //控制图片大小
 				let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
 					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
 					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
--- a/pages/bookShop/orderLCont.vue
+++ b/pages/bookShop/orderLCont.vue
@@ -35,6 +35,10 @@

 		<view class="orderList">
 			<view class="orderItem">
+				<!-- <view class="guoqi flexbox" v-if="orderContet.orderStatus==0 && orderContet.overTime > 0">
+					<text>剩余支付时间：</text>
+					<uni-countdown background-color="#ff5500" color="#ffffff" :font-size="14" :show-day="false" :hour="0" :minute="0" :second="orderContet.overTime" @timeup="countDown"></uni-countdown>
+				</view> -->
 				<view class="orderContent" v-for="(item,index) in orderContet.products" :key="index"
 					@click="goDetail(item.productId)" v-if="orderContet.products!=''">
 					<image :src="item.image" mode=""></image>
@@ -106,7 +110,7 @@
 						<view v-if="orderContet.orderStatus==2"  class="opCan" @click="OverOrder" >确认收货</view>
 					
 						<view v-if="orderContet.orderStatus==0" class="opFix" @click="canceOrder">取消订单</view>
-						<view v-if="orderContet.orderStatus==0" class="opCan" @click="goPay">去支付</view>
+						<view v-if="orderContet.orderStatus==0" class="opCan" @click="goPay(orderContet)">去支付</view>
 					
 						
 						<view class="opCan" @click="kefu">联系客服</view>
@@ -174,7 +178,7 @@
 	import $http from '@/config/requestConfig.js';
 	import {
 		setPay,
-		setPayAssign
+		setPayAssign,setWXPay
 	} from '@/config/utils';
 	import {
 		mapState
@@ -245,7 +249,12 @@
 			...mapState(['userInfo']),
 		},
 		
-		methods: {		
+		methods: {	
+			// 倒计时回调
+			countDown(){				
+					console.log('重新刷新订单')
+					this.getOrderList()				
+			},
 			// 获得输入的表情数组
 			handleEmj(i) {
 			 console.log(i,'i---------'); 
@@ -523,7 +532,11 @@
 					.post(`book/buyorder/appGetOrderInfo/${this.orderType}?orderId=${this.orderID}`)
 					.then(res => {
 						console.log('res+++',res)
-						this.orderContet = res.buyOrder
+						var seconds = res.buyOrder.timestamp + 30 * 60 + 2    // 过期时间
+						var nowSeconds = Math.floor(new Date().getTime() / 1000);
+						res.buyOrder.overTime = seconds - nowSeconds
+						
+						this.orderContet = res.buyOrder						
 						this.userRecordid = res.userRecordid
 						this.productIDs = res.buyOrder.products.map(item => {
 							return item.productId
@@ -538,9 +551,8 @@
 						} else if (this.orderContet.orderStatus == 3) {
 							this.titleStat = '已完成'
 						}
-						// if (this.orderType == 2) {
-						// 	this.getdeliverDetails()
-						// }
+						
+						console.log(this.orderContet,'订单详情')
 					})
 			},
 			// 获取物流
@@ -592,28 +604,84 @@


 			// 支付
-			goPay() {
-				setPay({
-					typePay: 'alipay',
-					subject: 'order',
-					totalAmount: this.orderContet.realMoney,
-					type: 2,
-					relevanceoid: this.orderContet.orderSn,
-					customerId: this.userInfo.id,
-				}, res => {
-					if (res.success) {
-						uni.showToast({
-							title: "支付成功"
-						});
-					} else {
-						uni.showToast({
-							title: "支付失败",
-							icon: "none",
-							image: '../../static/icon/ic_close.png'
-						});
+			goPay(payItem) {
+				console.log(payItem,'订单数据')		
+					if(payItem.paymentMethod == 2){
+						console.log('阿里支付')
+					setPay({
+						typePay: 'alipay',
+						subject: 'order',
+						totalAmount: payItem.realMoney,
+						type: 2,
+						relevanceoid: payItem.orderSn,
+						customerId: this.userInfo.id,
+					}, res => {
+						if (res.success) {
+							uni.showToast({
+								title: "支付成功"
+							});
+						} else {
+							uni.showToast({
+								title: "支付失败",
+								icon: "none",
+								image: '../../static/icon/ic_close.png'
+							});
+						}
+						this.getOrderList()
+					})
+				} else if(payItem.paymentMethod == 1){
+					console.log('微信支付')
+					// console.log(this.isAndorid)				
+					 if(this.isAndorid == false){
+						 uni.showModal({
+							 title: '提示',
+							 content: '很抱歉，苹果系统暂不支持微信支付',
+							 showCancel:false
+						 })
+						return false
+					 }else{
+						let data1={
+							orderSn:payItem.orderSn,
+							buyOrderId: null,	
+							totalAmount: payItem.realMoney					
+						}
+						console.log(data1,'data1')
+						setWXPay(data1,res => {
+							if (res.success) {
+								uni.showToast({
+									title: "支付成功"
+								});
+							} else {	
+								console.log(res)
+								if(res.data.errMsg.indexOf('User canceled') != -1){
+									uni.showToast({
+										title: "用户取消支付",
+										icon: "none",
+										image: '../../static/icon/ic_close.png'
+									});
+								}else{
+								uni.showToast({
+									title: "支付失败",
+									icon: "none",
+									image: '../../static/icon/ic_close.png'
+								});
+								}
+							}
+						})
 					}
-					this.getOrderList()
-				})
+				}else if(payItem.paymentMethod == 3){
+					// 苹果充值
+					console.log('苹果二次支付')
+					if(this.isAndorid){
+						uni.showModal({
+							title:'提示',
+							showCancel:false,
+							content:'很抱歉，当前订单属于苹果系统内购订单，安卓系统无法完成支付操作，您可切换到苹果系统进行支付，也可以取消该订单，并重新下单'
+						})
+					}else{
+						this.iphonepay(payItem)
+					}
+				}
 			},

 			// 商品内容跳转
@@ -627,6 +695,7 @@
 </script>

 <style lang="scss" scoped>
+	.guoqi{ font-size: 28rpx; align-items: center; color: red; float: right; line-height: 40rpx;}
 	.star{display: inline-block; width: 20px; height: 20px;  margin-right: 10rpx;}
 	.starGray{ background : url(../../static/icon/star_greey.png) no-repeat; background-size: contain; }
 	.starLight{ background : url(../../static/icon/star_light.png) no-repeat;  background-size: contain;}
--- a/pages/bookShop/orderList.vue
+++ b/pages/bookShop/orderList.vue
@@ -10,12 +10,17 @@
 				:class="orderListTab==item.value?'ordStyle':''">{{item.name}}</view>
 		</view>

-		<view class="orderList">
+		<view class="orderList" v-if="orderList.length > 0">
 			<view class="orderItem" v-for="(ifex,inten) in orderList">
 				<text class="orderState orderState0"  v-if="ifex.orderStatus==0">待支付</text>
 				<text class="orderState orderState1" v-if="ifex.orderStatus==1">待发货</text>
 				<text class="orderState orderState2" v-if="ifex.orderStatus==2">待收货</text>
 				<text class="orderState orderState3" v-if="ifex.orderStatus==3">已完成</text>
+				<text class="orderState orderState5" v-if="ifex.orderStatus==5">已超时</text>
+				<view class="guoqi flexbox" v-if="ifex.orderStatus==0 && ifex.overTime > 0">
+					<text>剩余支付时间：</text>
+					<uni-countdown background-color="#ff5500" color="#ffffff" :font-size="14" :show-day="false" :hour="0" :minute="0" :second="ifex.overTime" @timeup="countDown"></uni-countdown>
+				</view>
 				<view class="flexbox orderSn">
 					<text class="">订单编号: {{ifex.orderSn}}</text>
 				</view>				
@@ -72,6 +77,9 @@
 				</view>
 			</view>
 		</view>
+		<view class="" v-else style=" margin-top: 250rpx;">
+			<u-divider text="暂无列表数据"></u-divider>
+		</view>
 <z-navigation></z-navigation>
 <music-play :playData="playData"></music-play>
 	</view>
@@ -106,7 +114,11 @@ import {
 				}, {
 					name: '已完成',
 					value: 3
-				}],
+				},{
+					name: '已超时',
+					value: 5
+				},
+				],
 				orderListTab: 9,
 				orderList: [],
 				iapChannel:{},
@@ -119,6 +131,8 @@ import {
 			this.getOrderList()
 			this.checkIapOrders()    //检查未完成的苹果支付订单
 			this.getOS()
+			// this.countDown()
+			
 		},
 		computed: {
 			...mapState(['userInfo']),
@@ -133,6 +147,11 @@ import {
 		},
 		methods: {
 			...mapMutations(['setUserInfo']),
+			// 倒计时回调
+			countDown(){				
+					console.log('重新刷新订单')
+					this.getOrderList()				
+			},
 			// 获得操作系统
 			getOS(){
 				let oprateOs = ''
@@ -171,8 +190,17 @@ import {
 			getOrderList() {
 				this.$http
 					.post(`book/buyorder/appUserGetlist?userId=${this.userInfo.id}&orderStatus=${this.orderListTab}`)
-					.then(res => {	
+					.then(res => {
+						res.page.list.forEach((item,index) => {								
+							var seconds = item.timestamp + 30 * 60 + 2    // 过期时间 30分钟+2
+							// var seconds = item.timestamp + 30 + 2    // 过期时间 30秒
+							var nowSeconds = Math.floor(new Date().getTime() / 1000);  // 单位秒
+							item.overTime = seconds - nowSeconds
+							// console.log(item.overTime,'item.overTime')
+							
+						})
 						this.orderList = res.page.list
+						console.log(this.orderList,'订单列表')
 					})
 			},

@@ -510,16 +538,15 @@ import {

 <style lang="scss" scoped>
 	@import '@/style/mixin.scss';
+	.guoqi{ font-size: 28rpx; align-items: center; color: red; float: right; line-height: 40rpx;}
 	.flexbox{display: flex;}
-	.orderTabs {
-		
-		margin: 100rpx 0 0 0;
-		width: 100%;
-		
-		padding: 0 3% 3% 3%;
+	.orderTabs { 		
+		margin: 60rpx 0 0 0;
+		width: 100%;		
+		padding: 30rpx 3% 3% 3%;
+		// padding-top: 100rpx;
 		position: fixed;
-		top: 80rpx;
-		
+		top: 80rpx;		
 		background-color: #fff;
 		z-index: 100;

@@ -566,6 +593,7 @@ import {
 			.orderState1{background-color: #409eff;}
 			.orderState2{background-color: #f56c6c;}
 			.orderState3{background-color: #67c23a;}
+			.orderState5{background-color: #787878;}
 			.orderContent {
 				margin-bottom: 20rpx;

--- a/pages/comments/commentsList.vue
+++ b/pages/comments/commentsList.vue
@@ -1,5 +1,7 @@
 <template>
 	<view class="container">
+		<!-- 公共组件-每个页面必须引入 -->
+		<public-module></public-module>
 		<view class="header">
 			<!-- 顶部导航栏 -->
 			<z-nav-bar title="书评列表"></z-nav-bar>
@@ -138,7 +140,7 @@
   import musicPlay from '@/components/music.vue'
 import { data } from 'jquery';
   import {
-   	mapState
+   	mapState, mapMutations
   } from 'vuex';
 	export default {
 		data() {
@@ -216,6 +218,7 @@ import { data } from 'jquery';
 			...mapState(['userInfo']),
 		},
 		methods: {
+			...mapMutations(['setLoadingShow']),
 			setData(e) {
 				this.contentShow = e
 				this.getBookList(this.commentsListTab, true)
@@ -292,9 +295,10 @@ import { data } from 'jquery';
            },
 			getBookList(flag, tushuflag){
 				// 根据tab不同，获取最新书评、最热书评、书集列表
-				uni.showLoading({
-					title: '加载中'
-				});
+				// uni.showLoading({
+				// 	title: '加载中'
+				// });			
+				
                var httpurl = "" 
                if(flag == 1){
                    httpurl = "forum/articles/getForumsNew?page=" + this.newestpage + '&limit=10'
@@ -351,8 +355,8 @@ import { data } from 'jquery';
 							this.status = 1
 						} else {
 							this.status = 0
-						}
-						uni.hideLoading();
+						}						
+						// uni.hideLoading();
 					}).catch((e)=>{
 						console.log(e,'e')
 					})
--- a/pages/peanut/home.vue
+++ b/pages/peanut/home.vue
@@ -366,7 +366,8 @@
 		},
 		//方法
 		methods: {
-			...mapMutations(['setUserInfo']),			
+			...mapMutations(['setUserInfo']),
+			// ...mapMutations(['setLoadingShow']),
 			// 获取商品标签
 			    getTags() {
 					this.loadingNow = false		
@@ -408,8 +409,8 @@
 					}else{
 						this.tjProList = []
 						this.totalPage = 0
-					}						
-				}).catch(e => {
+					}										
+				}).catch(e => {					
 					console.log(e,'e')
 				});
 			},
--- a/store/modules/common.js
+++ b/store/modules/common.js
@@ -64,6 +64,7 @@ export const mutations = {
  	} else {
  		state.loadingShow = data;
  	}
+	// console.log('加载状态',state.loadingShow)
  },
  //微信场景参数
  setChatScenesInfo(state, data) {
--- a/uni_modules/uni-countdown/changelog.md
+++ b/uni_modules/uni-countdown/changelog.md
@@ -0,0 +1,24 @@
+## 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目录规范
--- a/uni_modules/uni-countdown/components/uni-countdown/i18n/en.json
+++ b/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"
+}
--- a/uni_modules/uni-countdown/components/uni-countdown/i18n/index.js
+++ b/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
+}
--- a/uni_modules/uni-countdown/components/uni-countdown/i18n/zh-Hans.json
+++ b/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": "秒"
+}
--- a/uni_modules/uni-countdown/components/uni-countdown/i18n/zh-Hant.json
+++ b/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": "秒"
+}
--- a/uni_modules/uni-countdown/components/uni-countdown/uni-countdown.vue
+++ b/uni_modules/uni-countdown/components/uni-countdown/uni-countdown.vue
@@ -0,0 +1,271 @@
+<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 :style="[timeStyle]" class="uni-countdown__number">{{ h }}</text>
+		<text :style="[splitorStyle]" class="uni-countdown__splitor">{{ showColon ? ':' : hourText }}</text>
+		<text :style="[timeStyle]" class="uni-countdown__number">{{ i }}</text>
+		<text :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} 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
+			},
+			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>
--- a/uni_modules/uni-countdown/package.json
+++ b/uni_modules/uni-countdown/package.json
@@ -0,0 +1,86 @@
+{
+  "id": "uni-countdown",
+  "displayName": "uni-countdown 倒计时",
+  "version": "1.2.2",
+  "description": "CountDown 倒计时组件",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "countdown",
+    "倒计时"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "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"
+        }
+      }
+    }
+  }
+}
--- a/uni_modules/uni-countdown/readme.md
+++ b/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