订单倒计时
This commit is contained in:
@@ -245,7 +245,7 @@ export const setWXPay = function(payInfo, callback) {
|
|||||||
'Content-Type': 'application/json'
|
'Content-Type': 'application/json'
|
||||||
},
|
},
|
||||||
}).then(res => {
|
}).then(res => {
|
||||||
console.log(res,'res')
|
console.log(res,'resshoppingPay')
|
||||||
if(res.code === 0){
|
if(res.code === 0){
|
||||||
let payData = {
|
let payData = {
|
||||||
provider : 'wxpay',
|
provider : 'wxpay',
|
||||||
|
|||||||
@@ -206,7 +206,6 @@
|
|||||||
<music-play :playData="playData"></music-play>
|
<music-play :playData="playData"></music-play>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import musicPlay from '@/components/music.vue'
|
import musicPlay from '@/components/music.vue'
|
||||||
import emojiList1 from '../../bkhumor-emojiplus/emoji/biaoqin.js'
|
import emojiList1 from '../../bkhumor-emojiplus/emoji/biaoqin.js'
|
||||||
@@ -682,7 +681,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
formatRichText(html) { //控制小程序中图片大小
|
formatRichText(html) { //控制图片大小
|
||||||
let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
|
let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
|
||||||
match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
|
match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
|
||||||
match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
|
match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
|
||||||
|
|||||||
@@ -35,6 +35,10 @@
|
|||||||
|
|
||||||
<view class="orderList">
|
<view class="orderList">
|
||||||
<view class="orderItem">
|
<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"
|
<view class="orderContent" v-for="(item,index) in orderContet.products" :key="index"
|
||||||
@click="goDetail(item.productId)" v-if="orderContet.products!=''">
|
@click="goDetail(item.productId)" v-if="orderContet.products!=''">
|
||||||
<image :src="item.image" mode=""></image>
|
<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==2" class="opCan" @click="OverOrder" >确认收货</view>
|
||||||
|
|
||||||
<view v-if="orderContet.orderStatus==0" class="opFix" @click="canceOrder">取消订单</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>
|
<view class="opCan" @click="kefu">联系客服</view>
|
||||||
@@ -174,7 +178,7 @@
|
|||||||
import $http from '@/config/requestConfig.js';
|
import $http from '@/config/requestConfig.js';
|
||||||
import {
|
import {
|
||||||
setPay,
|
setPay,
|
||||||
setPayAssign
|
setPayAssign,setWXPay
|
||||||
} from '@/config/utils';
|
} from '@/config/utils';
|
||||||
import {
|
import {
|
||||||
mapState
|
mapState
|
||||||
@@ -246,6 +250,11 @@
|
|||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
|
// 倒计时回调
|
||||||
|
countDown(){
|
||||||
|
console.log('重新刷新订单')
|
||||||
|
this.getOrderList()
|
||||||
|
},
|
||||||
// 获得输入的表情数组
|
// 获得输入的表情数组
|
||||||
handleEmj(i) {
|
handleEmj(i) {
|
||||||
console.log(i,'i---------');
|
console.log(i,'i---------');
|
||||||
@@ -523,6 +532,10 @@
|
|||||||
.post(`book/buyorder/appGetOrderInfo/${this.orderType}?orderId=${this.orderID}`)
|
.post(`book/buyorder/appGetOrderInfo/${this.orderType}?orderId=${this.orderID}`)
|
||||||
.then(res => {
|
.then(res => {
|
||||||
console.log('res+++',res)
|
console.log('res+++',res)
|
||||||
|
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.orderContet = res.buyOrder
|
||||||
this.userRecordid = res.userRecordid
|
this.userRecordid = res.userRecordid
|
||||||
this.productIDs = res.buyOrder.products.map(item => {
|
this.productIDs = res.buyOrder.products.map(item => {
|
||||||
@@ -538,9 +551,8 @@
|
|||||||
} else if (this.orderContet.orderStatus == 3) {
|
} else if (this.orderContet.orderStatus == 3) {
|
||||||
this.titleStat = '已完成'
|
this.titleStat = '已完成'
|
||||||
}
|
}
|
||||||
// if (this.orderType == 2) {
|
|
||||||
// this.getdeliverDetails()
|
console.log(this.orderContet,'订单详情')
|
||||||
// }
|
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
// 获取物流
|
// 获取物流
|
||||||
@@ -592,13 +604,16 @@
|
|||||||
|
|
||||||
|
|
||||||
// 支付
|
// 支付
|
||||||
goPay() {
|
goPay(payItem) {
|
||||||
|
console.log(payItem,'订单数据')
|
||||||
|
if(payItem.paymentMethod == 2){
|
||||||
|
console.log('阿里支付')
|
||||||
setPay({
|
setPay({
|
||||||
typePay: 'alipay',
|
typePay: 'alipay',
|
||||||
subject: 'order',
|
subject: 'order',
|
||||||
totalAmount: this.orderContet.realMoney,
|
totalAmount: payItem.realMoney,
|
||||||
type: 2,
|
type: 2,
|
||||||
relevanceoid: this.orderContet.orderSn,
|
relevanceoid: payItem.orderSn,
|
||||||
customerId: this.userInfo.id,
|
customerId: this.userInfo.id,
|
||||||
}, res => {
|
}, res => {
|
||||||
if (res.success) {
|
if (res.success) {
|
||||||
@@ -614,6 +629,59 @@
|
|||||||
}
|
}
|
||||||
this.getOrderList()
|
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'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}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>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<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;}
|
.star{display: inline-block; width: 20px; height: 20px; margin-right: 10rpx;}
|
||||||
.starGray{ background : url(../../static/icon/star_greey.png) no-repeat; background-size: contain; }
|
.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;}
|
.starLight{ background : url(../../static/icon/star_light.png) no-repeat; background-size: contain;}
|
||||||
|
|||||||
@@ -10,12 +10,17 @@
|
|||||||
:class="orderListTab==item.value?'ordStyle':''">{{item.name}}</view>
|
:class="orderListTab==item.value?'ordStyle':''">{{item.name}}</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="orderList">
|
<view class="orderList" v-if="orderList.length > 0">
|
||||||
<view class="orderItem" v-for="(ifex,inten) in orderList">
|
<view class="orderItem" v-for="(ifex,inten) in orderList">
|
||||||
<text class="orderState orderState0" v-if="ifex.orderStatus==0">待支付</text>
|
<text class="orderState orderState0" v-if="ifex.orderStatus==0">待支付</text>
|
||||||
<text class="orderState orderState1" v-if="ifex.orderStatus==1">待发货</text>
|
<text class="orderState orderState1" v-if="ifex.orderStatus==1">待发货</text>
|
||||||
<text class="orderState orderState2" v-if="ifex.orderStatus==2">待收货</text>
|
<text class="orderState orderState2" v-if="ifex.orderStatus==2">待收货</text>
|
||||||
<text class="orderState orderState3" v-if="ifex.orderStatus==3">已完成</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">
|
<view class="flexbox orderSn">
|
||||||
<text class="">订单编号: {{ifex.orderSn}}</text>
|
<text class="">订单编号: {{ifex.orderSn}}</text>
|
||||||
</view>
|
</view>
|
||||||
@@ -72,6 +77,9 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<view class="" v-else style=" margin-top: 250rpx;">
|
||||||
|
<u-divider text="暂无列表数据"></u-divider>
|
||||||
|
</view>
|
||||||
<z-navigation></z-navigation>
|
<z-navigation></z-navigation>
|
||||||
<music-play :playData="playData"></music-play>
|
<music-play :playData="playData"></music-play>
|
||||||
</view>
|
</view>
|
||||||
@@ -106,7 +114,11 @@ import {
|
|||||||
}, {
|
}, {
|
||||||
name: '已完成',
|
name: '已完成',
|
||||||
value: 3
|
value: 3
|
||||||
}],
|
},{
|
||||||
|
name: '已超时',
|
||||||
|
value: 5
|
||||||
|
},
|
||||||
|
],
|
||||||
orderListTab: 9,
|
orderListTab: 9,
|
||||||
orderList: [],
|
orderList: [],
|
||||||
iapChannel:{},
|
iapChannel:{},
|
||||||
@@ -119,6 +131,8 @@ import {
|
|||||||
this.getOrderList()
|
this.getOrderList()
|
||||||
this.checkIapOrders() //检查未完成的苹果支付订单
|
this.checkIapOrders() //检查未完成的苹果支付订单
|
||||||
this.getOS()
|
this.getOS()
|
||||||
|
// this.countDown()
|
||||||
|
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
...mapState(['userInfo']),
|
...mapState(['userInfo']),
|
||||||
@@ -133,6 +147,11 @@ import {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
...mapMutations(['setUserInfo']),
|
...mapMutations(['setUserInfo']),
|
||||||
|
// 倒计时回调
|
||||||
|
countDown(){
|
||||||
|
console.log('重新刷新订单')
|
||||||
|
this.getOrderList()
|
||||||
|
},
|
||||||
// 获得操作系统
|
// 获得操作系统
|
||||||
getOS(){
|
getOS(){
|
||||||
let oprateOs = ''
|
let oprateOs = ''
|
||||||
@@ -172,7 +191,16 @@ import {
|
|||||||
this.$http
|
this.$http
|
||||||
.post(`book/buyorder/appUserGetlist?userId=${this.userInfo.id}&orderStatus=${this.orderListTab}`)
|
.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
|
this.orderList = res.page.list
|
||||||
|
console.log(this.orderList,'订单列表')
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -510,16 +538,15 @@ import {
|
|||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import '@/style/mixin.scss';
|
@import '@/style/mixin.scss';
|
||||||
|
.guoqi{ font-size: 28rpx; align-items: center; color: red; float: right; line-height: 40rpx;}
|
||||||
.flexbox{display: flex;}
|
.flexbox{display: flex;}
|
||||||
.orderTabs {
|
.orderTabs {
|
||||||
|
margin: 60rpx 0 0 0;
|
||||||
margin: 100rpx 0 0 0;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
padding: 30rpx 3% 3% 3%;
|
||||||
padding: 0 3% 3% 3%;
|
// padding-top: 100rpx;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 80rpx;
|
top: 80rpx;
|
||||||
|
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
|
|
||||||
@@ -566,6 +593,7 @@ import {
|
|||||||
.orderState1{background-color: #409eff;}
|
.orderState1{background-color: #409eff;}
|
||||||
.orderState2{background-color: #f56c6c;}
|
.orderState2{background-color: #f56c6c;}
|
||||||
.orderState3{background-color: #67c23a;}
|
.orderState3{background-color: #67c23a;}
|
||||||
|
.orderState5{background-color: #787878;}
|
||||||
.orderContent {
|
.orderContent {
|
||||||
margin-bottom: 20rpx;
|
margin-bottom: 20rpx;
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="container">
|
<view class="container">
|
||||||
|
<!-- 公共组件-每个页面必须引入 -->
|
||||||
|
<public-module></public-module>
|
||||||
<view class="header">
|
<view class="header">
|
||||||
<!-- 顶部导航栏 -->
|
<!-- 顶部导航栏 -->
|
||||||
<z-nav-bar title="书评列表"></z-nav-bar>
|
<z-nav-bar title="书评列表"></z-nav-bar>
|
||||||
@@ -138,7 +140,7 @@
|
|||||||
import musicPlay from '@/components/music.vue'
|
import musicPlay from '@/components/music.vue'
|
||||||
import { data } from 'jquery';
|
import { data } from 'jquery';
|
||||||
import {
|
import {
|
||||||
mapState
|
mapState, mapMutations
|
||||||
} from 'vuex';
|
} from 'vuex';
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
@@ -216,6 +218,7 @@ import { data } from 'jquery';
|
|||||||
...mapState(['userInfo']),
|
...mapState(['userInfo']),
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
...mapMutations(['setLoadingShow']),
|
||||||
setData(e) {
|
setData(e) {
|
||||||
this.contentShow = e
|
this.contentShow = e
|
||||||
this.getBookList(this.commentsListTab, true)
|
this.getBookList(this.commentsListTab, true)
|
||||||
@@ -292,9 +295,10 @@ import { data } from 'jquery';
|
|||||||
},
|
},
|
||||||
getBookList(flag, tushuflag){
|
getBookList(flag, tushuflag){
|
||||||
// 根据tab不同,获取最新书评、最热书评、书集列表
|
// 根据tab不同,获取最新书评、最热书评、书集列表
|
||||||
uni.showLoading({
|
// uni.showLoading({
|
||||||
title: '加载中'
|
// title: '加载中'
|
||||||
});
|
// });
|
||||||
|
|
||||||
var httpurl = ""
|
var httpurl = ""
|
||||||
if(flag == 1){
|
if(flag == 1){
|
||||||
httpurl = "forum/articles/getForumsNew?page=" + this.newestpage + '&limit=10'
|
httpurl = "forum/articles/getForumsNew?page=" + this.newestpage + '&limit=10'
|
||||||
@@ -352,7 +356,7 @@ import { data } from 'jquery';
|
|||||||
} else {
|
} else {
|
||||||
this.status = 0
|
this.status = 0
|
||||||
}
|
}
|
||||||
uni.hideLoading();
|
// uni.hideLoading();
|
||||||
}).catch((e)=>{
|
}).catch((e)=>{
|
||||||
console.log(e,'e')
|
console.log(e,'e')
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -367,6 +367,7 @@
|
|||||||
//方法
|
//方法
|
||||||
methods: {
|
methods: {
|
||||||
...mapMutations(['setUserInfo']),
|
...mapMutations(['setUserInfo']),
|
||||||
|
// ...mapMutations(['setLoadingShow']),
|
||||||
// 获取商品标签
|
// 获取商品标签
|
||||||
getTags() {
|
getTags() {
|
||||||
this.loadingNow = false
|
this.loadingNow = false
|
||||||
|
|||||||
@@ -64,6 +64,7 @@ export const mutations = {
|
|||||||
} else {
|
} else {
|
||||||
state.loadingShow = data;
|
state.loadingShow = data;
|
||||||
}
|
}
|
||||||
|
// console.log('加载状态',state.loadingShow)
|
||||||
},
|
},
|
||||||
//微信场景参数
|
//微信场景参数
|
||||||
setChatScenesInfo(state, data) {
|
setChatScenesInfo(state, data) {
|
||||||
|
|||||||
24
uni_modules/uni-countdown/changelog.md
Normal file
24
uni_modules/uni-countdown/changelog.md
Normal file
@@ -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目录规范
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
{
|
||||||
|
"uni-countdown.day": "day",
|
||||||
|
"uni-countdown.h": "h",
|
||||||
|
"uni-countdown.m": "m",
|
||||||
|
"uni-countdown.s": "s"
|
||||||
|
}
|
||||||
@@ -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
|
||||||
|
}
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
{
|
||||||
|
"uni-countdown.day": "天",
|
||||||
|
"uni-countdown.h": "时",
|
||||||
|
"uni-countdown.m": "分",
|
||||||
|
"uni-countdown.s": "秒"
|
||||||
|
}
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
{
|
||||||
|
"uni-countdown.day": "天",
|
||||||
|
"uni-countdown.h": "時",
|
||||||
|
"uni-countdown.m": "分",
|
||||||
|
"uni-countdown.s": "秒"
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
86
uni_modules/uni-countdown/package.json
Normal file
86
uni_modules/uni-countdown/package.json
Normal file
@@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
10
uni_modules/uni-countdown/readme.md
Normal file
10
uni_modules/uni-countdown/readme.md
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
|
||||||
|
|
||||||
|
## CountDown 倒计时
|
||||||
|
> **组件名:uni-countdown**
|
||||||
|
> 代码块: `uCountDown`
|
||||||
|
|
||||||
|
倒计时组件。
|
||||||
|
|
||||||
|
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-countdown)
|
||||||
|
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
|
||||||
Reference in New Issue
Block a user