wangfukang
3 months ago
30 changed files with 2268 additions and 515 deletions
@ -0,0 +1,548 @@ |
|||||
|
<template> |
||||
|
<view class="page1"> |
||||
|
<view class="title"> |
||||
|
<view class="title-sreach"> |
||||
|
<view class="back-btn" @tap="back" :style="{'top': menuButtonInfo.top +'px'}"> |
||||
|
<uni-icons type="left" size="28"></uni-icons> |
||||
|
</view> |
||||
|
<view class="title-name" :style="{'padding-top': menuButtonInfo.top +'px'}"> |
||||
|
待退款/售后{{returnCount}} |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="content"> |
||||
|
<!-- <view class="box1" style="display: flex;"> |
||||
|
<view class=""> |
||||
|
待退款/售后{{returnCount}} |
||||
|
</view> |
||||
|
</view> --> |
||||
|
<view class="box1" v-for="(item,index) in returnData" :key="index"> |
||||
|
<view style="display: flex;height: 50rpx;border-bottom: 1px solid #eee;"> |
||||
|
<view style="display: flex;"> |
||||
|
{{'#' + item.mallOrder.numberCode}} |
||||
|
</view> |
||||
|
<view style="flex: 1;display: flex;padding-left: 20rpx;"> |
||||
|
{{item.createTime | formatISOTime}} |
||||
|
<!-- <text>已退款</text> --> |
||||
|
</view> |
||||
|
<view> |
||||
|
{{item.status == 0?'待退款':item.status == 3?'待售后':""}} |
||||
|
</view> |
||||
|
</view> |
||||
|
<view style="height: 180rpx;padding-top: 20rpx;color: #777;"> |
||||
|
<view style="height: 50rpx;line-height: 50rpx;font-size: 28rpx;"> |
||||
|
<view>退款原因: <text style="font-weight: 700;color:#00231C;">{{item.refundTypeStatus == 1?'商家原因':item.refundTypeStatus == 2?'配送原因':item.refundTypeStatus == 3?'商家/配送都有原因（需要退配送费）':item.refundTypeStatus == 4?'平台退款':""}}</text></view> |
||||
|
|
||||
|
<view>退款类型: <text style="font-weight: 700;color:#00231C;">{{item.refundType == 1?'退商品':item.refundType == 2?'退配送费':item.refundType == 3?'全额退款':""}}</text></view> |
||||
|
<view style="text-align: right;">退款金额: <text style="color:red;font-size: 34rpx;font-weight: 700;">￥{{item.refundAmount}}</text></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view style="height: 80rpx;border-top: 1px solid #eee;display: flex;"> |
||||
|
<view style="flex: 1;"> |
||||
|
<view class="btn" @tap="orderDetailOpen(item)" style="display: inline-block;"> |
||||
|
查看订单 |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="btn" @tap="returnAmountAllow(item,0)" style="background: rgba(0, 35, 28, 1);color: rgba(166, 255, 234, 1);"> |
||||
|
不同意 |
||||
|
</view> |
||||
|
<view class="btn" @tap="returnAmountAllow(item,1)" style="margin-left: 10px;"> |
||||
|
同意 |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
|
||||
|
<uni-popup ref="orderPopup" background-color="#fff"> |
||||
|
<view class="popup-area-content" style="height: 1200rpx;overflow: scroll;"> |
||||
|
<view class="popup-area-title"> |
||||
|
<text>订单详情</text> |
||||
|
</view> |
||||
|
<view class="box1"> |
||||
|
<view style="width: 100%;line-height: 70rpx;font-size: 28rpx;font-weight: 700;"> |
||||
|
{{orderDetail.shopName}} |
||||
|
<img @tap="makeCall(orderDetail.shopPhone)" |
||||
|
src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/869a7af6a1c24bf3a0d523c4a18b55c6.png" |
||||
|
alt="" style="width: 60rpx;height: 60rpx;" /> |
||||
|
</view> |
||||
|
|
||||
|
<view v-for="(item1,index1) in goodsList" :key="index1" v-if="goodsList != null && goodsList.length > 0" style="display: flex;padding: 20rpx;background: #eee;border-radius: 20rpx;"> |
||||
|
<view class="goods-img"> |
||||
|
<img :src="item1.productPicture" alt=""> |
||||
|
</view> |
||||
|
<view class="goods-content"> |
||||
|
<view class="goods-name"> |
||||
|
{{item1.productName}} |
||||
|
</view> |
||||
|
<view class="goods-content-center"> |
||||
|
<view class="goods-deal1"> |
||||
|
{{item1.specs}} |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="goods-content-bottom"> |
||||
|
<view style="width: 50%;"> |
||||
|
X{{item1.quantity}} |
||||
|
</view> |
||||
|
<view class="pintuan-left-price"> |
||||
|
￥{{item1.price}} |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view> |
||||
|
<view style="height: 80rpx;line-height: 80rpx;display: flex;" v-if="orderDetail.packageFee != null && orderDetail.packageFee > 0"> |
||||
|
<view style="flex: 1;color: #777;font-weight: 700;"> |
||||
|
打包费 |
||||
|
</view> |
||||
|
<view style="color: #000;font-weight:700;"> |
||||
|
￥{{orderDetail.packageFee}} |
||||
|
</view> |
||||
|
</view> |
||||
|
<view style="height: 80rpx;line-height: 80rpx;display: flex;" v-if="orderDetail.deliveryType == 1"> |
||||
|
<view style="flex: 1;color: #777;font-weight: 700;"> |
||||
|
配送费 |
||||
|
</view> |
||||
|
<view style="color: #000;font-weight:700;"> |
||||
|
￥{{orderDetail.deliveryFee}} |
||||
|
</view> |
||||
|
</view> |
||||
|
<view style="height: 80rpx;line-height: 80rpx;display: flex;"> |
||||
|
<view style="flex: 1;color: #777;font-weight: 700;"> |
||||
|
优惠券 |
||||
|
</view> |
||||
|
<view style="color: #000;font-weight:700;"> |
||||
|
-￥1 <uni-icons type="right" size="12"></uni-icons> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view style="display: flex;height: 80rpx;line-height: 100rpx;border-top: 1px solid #eee;font-size: 32rpx;font-weight: 700;"> |
||||
|
<view style="flex: 1;"> |
||||
|
实付 |
||||
|
</view> |
||||
|
<view class=""> |
||||
|
￥{{orderDetail.totalAmount}} |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="box1"> |
||||
|
<view> |
||||
|
<!-- <view style="height: 80rpx;line-height: 80rpx;display: flex;"> |
||||
|
<view style="flex: 1;color: #777;font-weight: 700;"> |
||||
|
收件地址 |
||||
|
</view> |
||||
|
<view style="color: #000;font-weight: 700;"> |
||||
|
北校区1号宿舍楼5楼512(0702) |
||||
|
</view> |
||||
|
</view> --> |
||||
|
<view style="height: 80rpx;line-height: 80rpx;display: flex;" v-if="orderDetail.numberCode != null"> |
||||
|
<view style="flex: 1;color: #777;font-weight: 700;"> |
||||
|
订单号 |
||||
|
</view> |
||||
|
<view style="color: #000;font-weight: 700;"> |
||||
|
{{orderDetail.numberCode}} |
||||
|
</view> |
||||
|
</view> |
||||
|
<view style="height: 80rpx;line-height: 80rpx;display: flex;"> |
||||
|
<view style="flex: 1;color: #777;font-weight: 700;"> |
||||
|
下单时间 |
||||
|
</view> |
||||
|
<view style="color: #000;font-weight: 700;"> |
||||
|
{{orderDetail.createTime | formatISOTime}} |
||||
|
</view> |
||||
|
</view> |
||||
|
<view style="height: 80rpx;line-height: 80rpx;display: flex;" v-if="orderDetail.shopMakeTime != null"> |
||||
|
<view style="flex: 1;color: #777;font-weight: 700;"> |
||||
|
商家出餐时间 |
||||
|
</view> |
||||
|
<view style="color: #000;font-weight: 700;"> |
||||
|
{{orderDetail.shopMakeTime ? orderDetail.shopMakeTime : '' | formatISOTime}} |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="popup-area-container" v-for="(item,index) in productData" :key="index"> |
||||
|
<text style="display: inline-block">{{item.productName}} {{item.specs}} * {{item.quantity}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</uni-popup> |
||||
|
|
||||
|
<!-- 拼团详情弹窗 --> |
||||
|
<uni-popup ref="pintuanPopup" background-color="#fff"> |
||||
|
<view class="guize-list"> |
||||
|
<view v-for="(item,index) in tuanzhangOrder" :key="index"> |
||||
|
<view style="height: 80rpx;line-height: 80rpx;font-size: 36rpx;font-weight: 700;"> |
||||
|
订单-{{item.numberCode}} |
||||
|
</view> |
||||
|
<view class=""> |
||||
|
<view class="dingdan"> |
||||
|
<view style="display:flex"> |
||||
|
<view style="width:300rpx;"> |
||||
|
订单状态： |
||||
|
</view> |
||||
|
<view class="pituan-text"> |
||||
|
{{item.status == 0?'待支付':item.status == 2?'待配送员接单':(item.status == 3 && item.deliveryType == 1 && item.shopMakeTime == null) || (item.status == 3 && item.deliveryType == 2 && item.userRequireMake == 1)?'待出餐':(item.status == 3 && item.deliveryType == 1 && item.shopMakeTime != null)?'待取货':(item.status == 3 && item.deliveryType == 2)?'待消费':item.status == 4?'待送达':item.status == 5?'已完成':item.status == 7?'待同意退款':item.status == 8?'已退款':item.status == 6?'已取消':item.status == 11?'售后中':item.status == 12?'已售后':""}} |
||||
|
</view> |
||||
|
</view> |
||||
|
<view style="display:flex"> |
||||
|
<view style="width:300rpx;"> |
||||
|
订单号： |
||||
|
</view> |
||||
|
<view class="pituan-text"> |
||||
|
{{item.id}} |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
<view style="display:flex"> |
||||
|
<view style="width:300rpx;"> |
||||
|
订单时间： |
||||
|
</view> |
||||
|
<view class="pituan-text"> |
||||
|
{{item.createTime | formatISOTime}} |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="dingdan" v-for="(item1,index1) in item.goodsList" :key="index1"> |
||||
|
<view class="pt-title"> |
||||
|
商品信息 |
||||
|
</view> |
||||
|
<view style="display: flex;font-weight: 700;"> |
||||
|
<view style="flex:1"> |
||||
|
商品名：{{item1.productName}} |
||||
|
</view> |
||||
|
<view style="width:100rpx;"> |
||||
|
X{{item1.quantity}} |
||||
|
</view> |
||||
|
<view style="width:220rpx;text-align: right;padding-right:20rpx;"> |
||||
|
￥{{item1.price}} |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="dingdan"> |
||||
|
<view style="text-align: right;padding-right: 20rpx;color: #777;"> |
||||
|
餐盒费：￥{{item.packageFee}} 配送费：￥{{item.deliveryFee}} |
||||
|
</view> |
||||
|
<view style="text-align: right;padding-right: 20rpx;font-size: 28rpx;font-weight: 700;color: red;"> |
||||
|
总计：￥{{item.totalAmount}} |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</uni-popup> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
menuButtonInfo: {}, |
||||
|
searchCountForm:{ |
||||
|
linkId:uni.getStorageSync('worker').workerId, |
||||
|
pageNum:1, |
||||
|
pageSize:100, |
||||
|
statusList:[0,3] |
||||
|
}, |
||||
|
type:'worker', |
||||
|
returnFormData:{}, |
||||
|
groupOrderIdList:[], |
||||
|
tuanzhangOrder:[], |
||||
|
goodsList:[], |
||||
|
orderDetail:{}, |
||||
|
returnData:[], |
||||
|
returnCount:0 |
||||
|
} |
||||
|
}, |
||||
|
filters:{ |
||||
|
formatISOTime(isoString) { |
||||
|
const date = new Date(isoString); |
||||
|
const year = date.getFullYear(); |
||||
|
const month = (date.getMonth() + 1).toString().padStart(2, '0'); |
||||
|
const day = date.getDate().toString().padStart(2, '0'); |
||||
|
const hours = date.getHours().toString().padStart(2, '0'); |
||||
|
const minutes = date.getMinutes().toString().padStart(2, '0'); |
||||
|
const seconds = date.getSeconds().toString().padStart(2, '0'); |
||||
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; |
||||
|
} |
||||
|
}, |
||||
|
onShow() { |
||||
|
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect() |
||||
|
this.searchCountForm.linkId = uni.getStorageSync('worker').workerId |
||||
|
}, |
||||
|
onLoad(option) { |
||||
|
if(option.type){ |
||||
|
this.type = option.type |
||||
|
} |
||||
|
this.getReturnCount() |
||||
|
}, |
||||
|
methods: { |
||||
|
getGroupOrders(id){ |
||||
|
this.tui.request("/mall/order/selectAllOrderByOrderId/"+id, "GET", {}, false, true).then((res) => { |
||||
|
if (res.code == 200) { |
||||
|
this.tuanzhangOrder = res.result; |
||||
|
this.$refs.pintuanPopup.open('bottom') |
||||
|
} else { |
||||
|
that.tui.toast(res.message) |
||||
|
return |
||||
|
} |
||||
|
uni.hideLoading() |
||||
|
}).catch((res) => {}) |
||||
|
}, |
||||
|
orderDetailOpen(item){ |
||||
|
this.returnFormData.id = item.id; |
||||
|
this.returnFormData.linkId = item.linkId; |
||||
|
this.returnFormData.orderId = item.orderId; |
||||
|
this.returnFormData.deliveryType = item.mallOrder.deliveryType; |
||||
|
this.returnFormData.refundAmount = item.refundAmount; |
||||
|
this.returnFormData.refundType = item.refundType; |
||||
|
this.returnFormData.refundTypeStatus = item.refundTypeStatus; |
||||
|
this.orderDetail = item.mallOrder; |
||||
|
this.goodsList = item.items; |
||||
|
this.$refs.orderPopup.open(); |
||||
|
}, |
||||
|
makeCall(phone){ |
||||
|
uni.makePhoneCall({ |
||||
|
phoneNumber: phone |
||||
|
}); |
||||
|
}, |
||||
|
getReturnCount(){ |
||||
|
let that = this |
||||
|
if(this.type == 'worker'){ |
||||
|
this.searchCountForm.linkId = uni.getStorageSync('worker').workerId |
||||
|
}else{ |
||||
|
this.searchCountForm.linkId = uni.getStorageSync('shopId') |
||||
|
} |
||||
|
this.tui.request("/mall/refund/page", "POST", this.searchCountForm, false, false).then((res) => { |
||||
|
if (res.code == 200 && res.result != null) { |
||||
|
that.returnCount = res.result.records.length; |
||||
|
that.returnData = res.result.records |
||||
|
that.$forceUpdate(); |
||||
|
} else { |
||||
|
that.tui.toast(res.message); |
||||
|
return; |
||||
|
} |
||||
|
uni.hideLoading(); |
||||
|
}).catch((res) => {}); |
||||
|
}, |
||||
|
returnAmountAllow(item,status){ |
||||
|
let titleText = status == 1 ? '确定同意该申请吗？' : '确定拒绝该申请吗？'; |
||||
|
//退款提示 |
||||
|
|
||||
|
if(item.groupOrderIds != null && item.groupOrderIds != ''){ |
||||
|
titleText += '该订单为面对面配送单，所有参团订单将同步处理'; |
||||
|
for(let i = 0; i < this.returnData.length;i++){ |
||||
|
if(item.groupOrderIds.indexOf(this.returnData[i].mallOrder.id) != -1){ |
||||
|
//需要展示具体订单信息这里有 |
||||
|
this.groupOrderIdList.push(this.returnData[i]); |
||||
|
} |
||||
|
} |
||||
|
}else{ |
||||
|
this.groupOrderIdList = [] |
||||
|
} |
||||
|
|
||||
|
// 2. 弹出确认框 |
||||
|
uni.showModal({ |
||||
|
title: '提示', |
||||
|
content: titleText, |
||||
|
success: (res) => { |
||||
|
if (res.confirm) { |
||||
|
if(this.groupOrderIdList != [] && this.groupOrderIdList.length > 0){ |
||||
|
for(let i = 0; i < this.groupOrderIdList.length;i++){ |
||||
|
this.processReturn(this.groupOrderIdList[i], status); |
||||
|
} |
||||
|
}else{ |
||||
|
this.processReturn(item, status); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
processReturn(item,status){ |
||||
|
let url = '' |
||||
|
//退款 |
||||
|
if(item.status == 0){ |
||||
|
//不同意 |
||||
|
if(status == 0){ |
||||
|
this.returnFormData.status = 2 |
||||
|
}else{ |
||||
|
this.returnFormData.status = 1 |
||||
|
} |
||||
|
}else if(item.status == 3){ |
||||
|
//售后 |
||||
|
if(status == 0){ |
||||
|
this.returnFormData.status = 5 |
||||
|
}else{ |
||||
|
this.returnFormData.status = 4 |
||||
|
} |
||||
|
} |
||||
|
this.returnFormData.id = item.id; |
||||
|
this.returnFormData.linkId = item.linkId; |
||||
|
this.returnFormData.orderId = item.orderId; |
||||
|
this.returnFormData.deliveryType = item.mallOrder.deliveryType; |
||||
|
this.returnFormData.orderType = item.mallOrder.orderType; |
||||
|
this.returnFormData.refundAmount = item.refundAmount; |
||||
|
this.returnFormData.refundType = item.refundType; |
||||
|
this.returnFormData.refundTypeStatus = item.refundTypeStatus; |
||||
|
|
||||
|
let that = this |
||||
|
this.tui.request("/mall/refund/allowOrReject", "POST", this.returnFormData, false, false).then((res) => { |
||||
|
if (res.code == 200) { |
||||
|
that.tui.toast(res.message); |
||||
|
this.getReturnCount() |
||||
|
that.$forceUpdate(); |
||||
|
} else { |
||||
|
that.tui.toast(res.message); |
||||
|
return; |
||||
|
} |
||||
|
uni.hideLoading(); |
||||
|
}).catch((res) => {}); |
||||
|
}, |
||||
|
back() { |
||||
|
uni.navigateBack() |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
page { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
font-size: 24rpx; |
||||
|
background: #F5F8F5; |
||||
|
color: #00231C; |
||||
|
} |
||||
|
|
||||
|
.page1 { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
font-size: 24rpx; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.title { |
||||
|
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat; |
||||
|
width: 100%; |
||||
|
height: 20%; |
||||
|
} |
||||
|
|
||||
|
.title-sreach { |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
height: 200rpx; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.back-btn { |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
} |
||||
|
|
||||
|
.title-name { |
||||
|
padding-top: 110rpx; |
||||
|
font-size: 36rpx; |
||||
|
font-weight: 700; |
||||
|
flex: 1; |
||||
|
text-align: center; |
||||
|
} |
||||
|
.content{ |
||||
|
margin: -100rpx auto; |
||||
|
} |
||||
|
.box1 { |
||||
|
width: 95%; |
||||
|
margin: 20rpx auto; |
||||
|
background: #fff; |
||||
|
border-radius: 20rpx; |
||||
|
padding: 20rpx; |
||||
|
} |
||||
|
.btn{ |
||||
|
background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1)); |
||||
|
padding:0 20rpx; |
||||
|
height: 50rpx; |
||||
|
border-radius: 14rpx; |
||||
|
line-height: 50rpx; |
||||
|
text-align: center; |
||||
|
font-weight: 700; |
||||
|
margin-top: 20rpx; |
||||
|
} |
||||
|
.popup-area-title { |
||||
|
font-size: 36rpx; |
||||
|
font-weight: bold; |
||||
|
text-align: center; |
||||
|
position: relative; |
||||
|
} |
||||
|
.popup-area-content { |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
padding: 30rpx; |
||||
|
width: 500rpx; |
||||
|
height: auto; |
||||
|
background-color: #fff; |
||||
|
} |
||||
|
.goods-img { |
||||
|
width: 160rpx; |
||||
|
height: 160rpx; |
||||
|
position: relative; |
||||
|
|
||||
|
|
||||
|
img { |
||||
|
width: 100%; |
||||
|
background-size: 100%; |
||||
|
height: 100%; |
||||
|
border-radius: 20rpx; |
||||
|
} |
||||
|
} |
||||
|
.pinzi{ |
||||
|
margin: 20rpx 0; |
||||
|
background: linear-gradient(90deg, #FF4500, #FFA07A); |
||||
|
width: 40rpx; |
||||
|
height: 40rpx; |
||||
|
line-height: 40rpx; |
||||
|
text-align: center; |
||||
|
border-radius: 10rpx; |
||||
|
color: #fff; |
||||
|
} |
||||
|
.goods-content { |
||||
|
flex: 1; |
||||
|
padding-left: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.goods-name { |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 900; |
||||
|
} |
||||
|
|
||||
|
.goods-content-center { |
||||
|
display: flex; |
||||
|
margin: 16rpx 0; |
||||
|
color: #777; |
||||
|
} |
||||
|
.guize-list { |
||||
|
width: 100%; |
||||
|
padding: 20rpx; |
||||
|
overflow: scroll; |
||||
|
background: #fff; |
||||
|
max-height: 1000rpx; |
||||
|
line-height: 25px; |
||||
|
} |
||||
|
.pt-title{ |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 700; |
||||
|
color: #777; |
||||
|
} |
||||
|
.dingdan{ |
||||
|
border-top: 1px solid #eee; |
||||
|
} |
||||
|
.uni-popup__wrapper{ |
||||
|
border-radius: 20rpx !important; |
||||
|
} |
||||
|
.pituan-text{ |
||||
|
flex:1; |
||||
|
text-align:right; |
||||
|
padding-right:20rpx; |
||||
|
font-weight: 700; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,289 @@ |
|||||
|
<template> |
||||
|
<view> |
||||
|
<view class="title"> |
||||
|
<view class="title-sreach"> |
||||
|
<view class="back-btn" @tap="back" :style="{'top': menuButtonInfo.top +'px'}"> |
||||
|
<uni-icons type="left" size="28"></uni-icons> |
||||
|
</view> |
||||
|
<view class="title-name" :style="{'padding-top': menuButtonInfo.top +'px'}"> |
||||
|
兼职中心 |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<uni-notice-bar show-icon scrollable text="送单奖励活动开启：截止到当日24时，送单量前五名有额外奖励，奖励金额从高到低为20元/10元/8.8元/6.6元/5元，抓紧送单的奖励吧！" /> |
||||
|
<uni-datetime-picker style="margin-bottom:10px;" v-model="range" @change="searchList" type="daterange" /> |
||||
|
|
||||
|
<view class="paiming"> |
||||
|
<view style="width: 200rpx;height: 100rpx;position: absolute;bottom: 30%;left: 6%;text-align: center;color: #fff;font-size: 34rpx;font-weight: bold;"> |
||||
|
<view> |
||||
|
{{fireList[2].productName == undefined?'':fireList[2].productName}} |
||||
|
</view> |
||||
|
<view style="line-height: 60rpx;"> |
||||
|
{{fireList[2].totalSold == undefined?'':fireList[2].totalSold}} |
||||
|
</view> |
||||
|
</view> |
||||
|
<view style="width: 200rpx;height: 100rpx;position: absolute;top: 50%;left: 37%;text-align: center;color: #fff;font-size: 34rpx;font-weight: bold;"> |
||||
|
<view> |
||||
|
{{fireList[0].productName == undefined?'':fireList[0].productName}} |
||||
|
</view> |
||||
|
<view style="line-height: 60rpx;"> |
||||
|
{{fireList[0].totalSold == undefined?'':fireList[0].totalSold}} |
||||
|
</view> |
||||
|
</view> |
||||
|
<view style="width: 200rpx;height: 100rpx;position: absolute;bottom: 27%;right: 6%;text-align: center;color: #fff;font-size: 34rpx;font-weight: bold;"> |
||||
|
<view> |
||||
|
{{fireList[1].productName == undefined?'':fireList[1].productName}} |
||||
|
</view> |
||||
|
<view style="line-height: 60rpx;"> |
||||
|
{{fireList[1].totalSold == undefined?'':fireList[1].totalSold}} |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="content-list"> |
||||
|
<view v-for="(item,index) in fireList" :key="index" class="content-item"> |
||||
|
<view v-if="index == 0" style="justify-content: center;align-items: center;display: flex;"> |
||||
|
<uni-icons type="medal-filled" size='22' color="#fcdb56"></uni-icons> |
||||
|
</view> |
||||
|
<view v-if="index == 1" style="justify-content: center;align-items: center;display: flex;"> |
||||
|
<uni-icons type="medal-filled" size='22' color="#dedee0"></uni-icons> |
||||
|
</view> |
||||
|
<view v-if="index == 2" style="justify-content: center;align-items: center;display: flex;"> |
||||
|
<uni-icons type="medal-filled" size='22' color="#f6bf6f"></uni-icons> |
||||
|
</view> |
||||
|
<view v-if="index != 0 && index != 1 && index != 2" style="width: 44rpx;justify-content: center;align-items: center;display: flex;">{{index + 1}}</view> |
||||
|
<view class="box-left" @tap.stop="largeImg(item)"> |
||||
|
<img :src="item.productPicture" alt="" v-if="item.productPicture"> |
||||
|
<view class="noPic" v-else>暂无图片</view> |
||||
|
</view> |
||||
|
<view class="box-right"> |
||||
|
<view class="box-right-num">{{item.productName == null?'暂无':item.productName}}</view> |
||||
|
<view class="box-right-name">{{item.totalSold}}单</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<u-loadmore :status="status" /> |
||||
|
</view> |
||||
|
<!-- 弹出多图轮播 --> |
||||
|
<uni-popup ref="imgPopup" background-color="#fff"> |
||||
|
<view class="showImg-box"> |
||||
|
<swiper indicator-dots class="swiper-box" @change="lunbochange" circular autoplay :current="swiperDotIndex"> |
||||
|
<swiper-item v-for="(item, index) in bigImg" :key="index"> |
||||
|
<view class="swiper-item"> |
||||
|
<image mode='aspectFit' show-menu-by-longpress :src="item.productPicture" alt="" style="width: 100%;height: 100%;border-radius: 10px;" /></image> |
||||
|
</view> |
||||
|
</swiper-item> |
||||
|
</swiper> |
||||
|
</view> |
||||
|
</uni-popup> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
menuButtonInfo: {}, |
||||
|
range:[], |
||||
|
status: 'loadmore', |
||||
|
fireList:[], |
||||
|
pageNum:1, |
||||
|
pages:1, |
||||
|
indexList: [], |
||||
|
bigImg:[], |
||||
|
swiperDotIndex:0, |
||||
|
|
||||
|
}; |
||||
|
}, |
||||
|
onShow(){ |
||||
|
this.getMonth() |
||||
|
this.getFireList() |
||||
|
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect() |
||||
|
}, |
||||
|
onReachBottom() { |
||||
|
if (this.pageNum >= this.pages) return; |
||||
|
this.status = 'loading'; |
||||
|
this.pageNum ++; |
||||
|
this.getFireList(); |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
lunbochange(e) { |
||||
|
this.current = e.detail.current |
||||
|
}, |
||||
|
getFireList(){ |
||||
|
this.tui.request("/app/product/getShareList", "POST", { |
||||
|
categoryId: "", |
||||
|
searchStr: "", |
||||
|
pageNum: this.pageNum, |
||||
|
pageSize: '10', |
||||
|
sortField:"totalSold", |
||||
|
startDate:this.range[0], |
||||
|
endDate:this.range[1] |
||||
|
}, false, false).then((res) => { |
||||
|
if (res.code == 200) { |
||||
|
this.status = 'nomore'; |
||||
|
if (this.pages == 1) { |
||||
|
this.fireList = res.result.records |
||||
|
} else { |
||||
|
this.fireList = [...this.fireList, ...res.result.records] |
||||
|
} |
||||
|
this.pages = res.result.pages |
||||
|
} else { |
||||
|
this.tui.toast(res.message) |
||||
|
} |
||||
|
}).catch((res) => {}) |
||||
|
}, |
||||
|
searchList(res) { |
||||
|
this.pageNum = 1; |
||||
|
this.fireList = []; |
||||
|
this.getFireList() |
||||
|
}, |
||||
|
//获取当月1日到当前时间 |
||||
|
getMonth() { |
||||
|
let date = new Date() |
||||
|
let year = date.getFullYear().toString() //'年' |
||||
|
let month = date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1).toString():(date.getMonth()+1).toString() //'月' |
||||
|
let da = date.getDate() < 10 ? '0'+date.getDate().toString():date.getDate().toString() //'日' |
||||
|
let end = year + '-' + month + '-' + da //当天 |
||||
|
let beg = year + '-' + month + '-01' //当月第一天 |
||||
|
this.range = [beg,end] |
||||
|
}, |
||||
|
largeImg(img) { |
||||
|
if((img.productPicture == null &&img.productPictures == null) || (img.productPicture == '' &&img.productPictures == '') || (img.productPicture == null &&img.productPictures == '') || (img.productPicture == '' &&img.productPictures == null)){ |
||||
|
this.tui.toast("暂无可展示的图片",300) |
||||
|
return |
||||
|
} |
||||
|
this.bigImg = [] |
||||
|
if(img.productPicture != null){ |
||||
|
let data = { |
||||
|
productPicture:img.productPicture |
||||
|
} |
||||
|
this.bigImg.push(data) |
||||
|
} |
||||
|
if(img.productPictures != null){ |
||||
|
for(let i=0;i<img.productPictures.length;i++){ |
||||
|
this.bigImg.push(img.productPictures[i]) |
||||
|
} |
||||
|
} |
||||
|
this.$refs.imgPopup.open() |
||||
|
}, |
||||
|
back() { |
||||
|
uni.navigateBack() |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.paiming{ |
||||
|
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/a07b86e1b1c74c88ac42dcc8a592980c.jpg') no-repeat; |
||||
|
width: 100%; |
||||
|
height: 680rpx; |
||||
|
background-size: 100%; |
||||
|
position: relative; |
||||
|
z-index: 97; |
||||
|
} |
||||
|
.content-list{ |
||||
|
width: 90%; |
||||
|
overflow: scroll; |
||||
|
border-radius: 20rpx; |
||||
|
background: #fff; |
||||
|
margin: -50rpx auto 0; |
||||
|
position: relative; |
||||
|
z-index: 98; |
||||
|
} |
||||
|
.content-item{ |
||||
|
height: 180rpx; |
||||
|
width: 100%; |
||||
|
padding: 0 20rpx; |
||||
|
font-size: 32rpx; |
||||
|
border-bottom: 1px solid #eee; |
||||
|
display: flex; |
||||
|
} |
||||
|
.box-left { |
||||
|
width: 130rpx; |
||||
|
height: 131rpx; |
||||
|
background-size: 100%; |
||||
|
margin: 25rpx 30rpx 25rpx 10rpx; |
||||
|
} |
||||
|
|
||||
|
.box-left img { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
border-radius: 131rpx; |
||||
|
} |
||||
|
|
||||
|
.box-right { |
||||
|
margin-top: 17rpx; |
||||
|
padding-top:30rpx; |
||||
|
} |
||||
|
|
||||
|
.box-right-price { |
||||
|
display: flex; |
||||
|
font-size: 25rpx; |
||||
|
} |
||||
|
.noPic{ |
||||
|
border-radius: 10px; |
||||
|
width: 140rpx; |
||||
|
height: 140rpx; |
||||
|
// margin: 30rpx 0 0 30rpx; |
||||
|
text-align: center; |
||||
|
line-height: 140rpx; |
||||
|
color: #777; |
||||
|
background: #eee; |
||||
|
} |
||||
|
.box-right-num { |
||||
|
padding: 5rpx 0; |
||||
|
color: #000; |
||||
|
font-weight: bold; |
||||
|
font-size: 30rpx; |
||||
|
} |
||||
|
.box-right-name { |
||||
|
font-size: 26rpx; |
||||
|
height: 50rpx; |
||||
|
line-height: 50rpx; |
||||
|
} |
||||
|
.showImg-box{ |
||||
|
width: 700rpx; |
||||
|
height: 1000rpx; |
||||
|
border-radius: 10px; |
||||
|
} |
||||
|
.swiper-box { |
||||
|
height: 1000rpx; |
||||
|
} |
||||
|
.swiper-item { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
height: 1000rpx; |
||||
|
color: #fff; |
||||
|
background-color: #cee1fd; |
||||
|
border-radius: 10px; |
||||
|
} |
||||
|
.title { |
||||
|
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat; |
||||
|
width: 100%; |
||||
|
height: 20%; |
||||
|
} |
||||
|
|
||||
|
.title-sreach { |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
height: 200rpx; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.back-btn { |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
} |
||||
|
|
||||
|
.title-name { |
||||
|
padding-top: 110rpx; |
||||
|
font-size: 36rpx; |
||||
|
font-weight: 700; |
||||
|
flex: 1; |
||||
|
text-align: center; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,30 @@ |
|||||
|
## 1.2.5（2025-04-14） |
||||
|
- 修复 filterShow 导致的运行报错 |
||||
|
## 1.2.4（2024-09-21） |
||||
|
- 新增 支持控制显示位数 默认显示2位 |
||||
|
## 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目录规范 |
||||
@ -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,278 @@ |
|||||
|
<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 |
||||
|
}, |
||||
|
filterShow : { |
||||
|
type:Object, |
||||
|
default () { |
||||
|
return {} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
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() |
||||
|
} |
||||
|
this.d = String(day).padStart(this.validFilterShow(this.filterShow.d), '0') |
||||
|
this.h = String(hour).padStart(this.validFilterShow(this.filterShow.h), '0') |
||||
|
this.i = String(minute).padStart(this.validFilterShow(this.filterShow.m), '0') |
||||
|
this.s = String(second).padStart(this.validFilterShow(this.filterShow.s), '0') |
||||
|
}, |
||||
|
validFilterShow(filter){ |
||||
|
return (filter && filter > 0) ? filter : 2; |
||||
|
}, |
||||
|
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> |
||||
@ -0,0 +1,86 @@ |
|||||
|
{ |
||||
|
"id": "uni-countdown", |
||||
|
"displayName": "uni-countdown 倒计时", |
||||
|
"version": "1.2.5", |
||||
|
"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", |
||||
|
"alipay": "n" |
||||
|
}, |
||||
|
"client": { |
||||
|
"App": { |
||||
|
"app-vue": "y", |
||||
|
"app-nvue": "y", |
||||
|
"app-harmony": "u", |
||||
|
"app-uvue": "u" |
||||
|
}, |
||||
|
"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" |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,10 @@ |
|||||
|
|
||||
|
|
||||
|
## CountDown 倒计时 |
||||
|
> **组件名：uni-countdown** |
||||
|
> 代码块： `uCountDown` |
||||
|
|
||||
|
倒计时组件。 |
||||
|
|
||||
|
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-countdown) |
||||
|
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 |
||||
@ -0,0 +1,22 @@ |
|||||
|
## 1.2.3（2025-04-14） |
||||
|
- 新增 左侧自定义插槽，可自定义文字或图标 |
||||
|
## 1.2.2（2023-12-20） |
||||
|
- 修复动态绑定title时，滚动速度不一致的问题 |
||||
|
## 1.2.1（2022-09-05） |
||||
|
- 新增 属性 fontSize，可修改文字大小。 |
||||
|
## 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-notice-bar](https://uniapp.dcloud.io/component/uniui/uni-notice-bar) |
||||
|
## 1.1.1（2021-11-09） |
||||
|
- 新增 提供组件设计资源，组件样式调整 |
||||
|
## 1.1.0（2021-07-30） |
||||
|
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) |
||||
|
## 1.0.9（2021-05-12） |
||||
|
- 新增 组件示例地址 |
||||
|
## 1.0.8（2021-04-21） |
||||
|
- 优化 添加依赖 uni-icons, 导入后自动下载依赖 |
||||
|
## 1.0.7（2021-02-05） |
||||
|
- 优化 组件引用关系，通过uni_modules引用组件 |
||||
|
|
||||
|
## 1.0.6（2021-02-05） |
||||
|
- 调整为uni_modules目录规范 |
||||
@ -0,0 +1,423 @@ |
|||||
|
<template> |
||||
|
<view v-if="show" class="uni-noticebar" :style="{ backgroundColor }" @click="onClick"> |
||||
|
<slot v-if="showIcon === true || showIcon === 'true'" name="noticebarIcon"> |
||||
|
<uni-icons class="uni-noticebar-icon" type="sound" :color="color" :size="fontSize * 1.5" /> |
||||
|
</slot> |
||||
|
<view ref="textBox" class="uni-noticebar__content-wrapper" :class="{ |
||||
|
'uni-noticebar__content-wrapper--scrollable': scrollable, |
||||
|
'uni-noticebar__content-wrapper--single': !scrollable && (single || moreText) |
||||
|
}" :style="{ height: scrollable ? fontSize * 1.5 + 'px' : 'auto' }"> |
||||
|
<view :id="elIdBox" class="uni-noticebar__content" :class="{ |
||||
|
'uni-noticebar__content--scrollable': scrollable, |
||||
|
'uni-noticebar__content--single': !scrollable && (single || moreText) |
||||
|
}"> |
||||
|
<text :id="elId" ref="animationEle" class="uni-noticebar__content-text" :class="{ |
||||
|
'uni-noticebar__content-text--scrollable': scrollable, |
||||
|
'uni-noticebar__content-text--single': !scrollable && (single || showGetMore) |
||||
|
}" :style="{ |
||||
|
color: color, |
||||
|
fontSize: fontSize + 'px', |
||||
|
lineHeight: fontSize * 1.5 + 'px', |
||||
|
width: wrapWidth + 'px', |
||||
|
'animationDuration': animationDuration, |
||||
|
'-webkit-animationDuration': animationDuration, |
||||
|
animationPlayState: webviewHide ? 'paused' : animationPlayState, |
||||
|
'-webkit-animationPlayState': webviewHide ? 'paused' : animationPlayState, |
||||
|
animationDelay: animationDelay, |
||||
|
'-webkit-animationDelay': animationDelay |
||||
|
}">{{text}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view v-if="isShowGetMore" class="uni-noticebar__more uni-cursor-point" @click="clickMore"> |
||||
|
<text v-if="moreText.length > 0" :style="{ color: moreColor, fontSize: fontSize + 'px' }">{{ moreText }}</text> |
||||
|
<uni-icons v-else type="right" :color="moreColor" :size="fontSize * 1.1" /> |
||||
|
</view> |
||||
|
<view class="uni-noticebar-close uni-cursor-point" v-if="isShowClose"> |
||||
|
<uni-icons type="closeempty" :color="color" :size="fontSize * 1.1" @click="close" /> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
// #ifdef APP-NVUE |
||||
|
const dom = weex.requireModule('dom'); |
||||
|
const animation = weex.requireModule('animation'); |
||||
|
// #endif |
||||
|
|
||||
|
/** |
||||
|
* NoticeBar 自定义导航栏 |
||||
|
* @description 通告栏组件 |
||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=30 |
||||
|
* @property {Number} speed 文字滚动的速度，默认100px/秒 |
||||
|
* @property {String} text 显示文字 |
||||
|
* @property {String} backgroundColor 背景颜色 |
||||
|
* @property {String} color 文字颜色 |
||||
|
* @property {String} moreColor 查看更多文字的颜色 |
||||
|
* @property {String} moreText 设置“查看更多”的文本 |
||||
|
* @property {Boolean} single = [true|false] 是否单行 |
||||
|
* @property {Boolean} scrollable = [true|false] 是否滚动，为true时，NoticeBar为单行 |
||||
|
* @property {Boolean} showIcon = [true|false] 是否显示左侧喇叭图标 |
||||
|
* @property {Boolean} showClose = [true|false] 是否显示左侧关闭按钮 |
||||
|
* @property {Boolean} showGetMore = [true|false] 是否显示右侧查看更多图标，为true时，NoticeBar为单行 |
||||
|
* @event {Function} click 点击 NoticeBar 触发事件 |
||||
|
* @event {Function} close 关闭 NoticeBar 触发事件 |
||||
|
* @event {Function} getmore 点击”查看更多“时触发事件 |
||||
|
*/ |
||||
|
|
||||
|
export default { |
||||
|
name: 'UniNoticeBar', |
||||
|
emits: ['click', 'getmore', 'close'], |
||||
|
props: { |
||||
|
text: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
}, |
||||
|
moreText: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
}, |
||||
|
backgroundColor: { |
||||
|
type: String, |
||||
|
default: '#FFF9EA' |
||||
|
}, |
||||
|
speed: { |
||||
|
// 默认1s滚动100px |
||||
|
type: Number, |
||||
|
default: 100 |
||||
|
}, |
||||
|
color: { |
||||
|
type: String, |
||||
|
default: '#FF9A43' |
||||
|
}, |
||||
|
fontSize: { |
||||
|
type: Number, |
||||
|
default: 14 |
||||
|
}, |
||||
|
moreColor: { |
||||
|
type: String, |
||||
|
default: '#FF9A43' |
||||
|
}, |
||||
|
single: { |
||||
|
// 是否单行 |
||||
|
type: [Boolean, String], |
||||
|
default: false |
||||
|
}, |
||||
|
scrollable: { |
||||
|
// 是否滚动，添加后控制单行效果取消 |
||||
|
type: [Boolean, String], |
||||
|
default: false |
||||
|
}, |
||||
|
showIcon: { |
||||
|
// 是否显示左侧icon |
||||
|
type: [Boolean, String], |
||||
|
default: false |
||||
|
}, |
||||
|
showGetMore: { |
||||
|
// 是否显示右侧查看更多 |
||||
|
type: [Boolean, String], |
||||
|
default: false |
||||
|
}, |
||||
|
showClose: { |
||||
|
// 是否显示左侧关闭按钮 |
||||
|
type: [Boolean, String], |
||||
|
default: false |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}` |
||||
|
const elIdBox = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}` |
||||
|
return { |
||||
|
textWidth: 0, |
||||
|
boxWidth: 0, |
||||
|
wrapWidth: '', |
||||
|
webviewHide: false, |
||||
|
// #ifdef APP-NVUE |
||||
|
stopAnimation: false, |
||||
|
// #endif |
||||
|
elId: elId, |
||||
|
elIdBox: elIdBox, |
||||
|
show: true, |
||||
|
animationDuration: 'none', |
||||
|
animationPlayState: 'paused', |
||||
|
animationDelay: '0s' |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
text(newValue, oldValue) { |
||||
|
this.initSize(); |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
isShowGetMore() { |
||||
|
return this.showGetMore === true || this.showGetMore === 'true' |
||||
|
}, |
||||
|
isShowClose() { |
||||
|
return (this.showClose === true || this.showClose === 'true') && |
||||
|
(this.showGetMore === false || this.showGetMore === 'false') |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
// #ifdef APP-PLUS |
||||
|
var pages = getCurrentPages(); |
||||
|
var page = pages[pages.length - 1]; |
||||
|
var currentWebview = page.$getAppWebview(); |
||||
|
currentWebview.addEventListener('hide', () => { |
||||
|
this.webviewHide = true |
||||
|
}) |
||||
|
currentWebview.addEventListener('show', () => { |
||||
|
this.webviewHide = false |
||||
|
}) |
||||
|
// #endif |
||||
|
this.$nextTick(() => { |
||||
|
this.initSize() |
||||
|
}) |
||||
|
}, |
||||
|
// #ifdef APP-NVUE |
||||
|
beforeDestroy() { |
||||
|
this.stopAnimation = true |
||||
|
}, |
||||
|
// #endif |
||||
|
methods: { |
||||
|
initSize() { |
||||
|
if (this.scrollable) { |
||||
|
// #ifndef APP-NVUE |
||||
|
let query = [], |
||||
|
boxWidth = 0, |
||||
|
textWidth = 0; |
||||
|
let textQuery = new Promise((resolve, reject) => { |
||||
|
uni.createSelectorQuery() |
||||
|
// #ifndef MP-ALIPAY |
||||
|
.in(this) |
||||
|
// #endif |
||||
|
.select(`#${this.elId}`) |
||||
|
.boundingClientRect() |
||||
|
.exec(ret => { |
||||
|
this.textWidth = ret[0].width |
||||
|
resolve() |
||||
|
}) |
||||
|
}) |
||||
|
let boxQuery = new Promise((resolve, reject) => { |
||||
|
uni.createSelectorQuery() |
||||
|
// #ifndef MP-ALIPAY |
||||
|
.in(this) |
||||
|
// #endif |
||||
|
.select(`#${this.elIdBox}`) |
||||
|
.boundingClientRect() |
||||
|
.exec(ret => { |
||||
|
this.boxWidth = ret[0].width |
||||
|
resolve() |
||||
|
}) |
||||
|
}) |
||||
|
query.push(textQuery) |
||||
|
query.push(boxQuery) |
||||
|
Promise.all(query).then(() => { |
||||
|
this.animationDuration = `${this.textWidth / this.speed}s` |
||||
|
this.animationDelay = `-${this.boxWidth / this.speed}s` |
||||
|
setTimeout(() => { |
||||
|
this.animationPlayState = 'running' |
||||
|
}, 1000) |
||||
|
}) |
||||
|
// #endif |
||||
|
// #ifdef APP-NVUE |
||||
|
dom.getComponentRect(this.$refs['animationEle'], (res) => { |
||||
|
let winWidth = uni.getSystemInfoSync().windowWidth |
||||
|
this.textWidth = res.size.width |
||||
|
animation.transition(this.$refs['animationEle'], { |
||||
|
styles: { |
||||
|
transform: `translateX(-${winWidth}px)` |
||||
|
}, |
||||
|
duration: 0, |
||||
|
timingFunction: 'linear', |
||||
|
delay: 0 |
||||
|
}, () => { |
||||
|
if (!this.stopAnimation) { |
||||
|
animation.transition(this.$refs['animationEle'], { |
||||
|
styles: { |
||||
|
transform: `translateX(-${this.textWidth}px)` |
||||
|
}, |
||||
|
timingFunction: 'linear', |
||||
|
duration: (this.textWidth - winWidth) / this.speed * 1000, |
||||
|
delay: 1000 |
||||
|
}, () => { |
||||
|
if (!this.stopAnimation) { |
||||
|
this.loopAnimation() |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
}) |
||||
|
// #endif |
||||
|
} |
||||
|
// #ifdef APP-NVUE |
||||
|
if (!this.scrollable && (this.single || this.moreText)) { |
||||
|
dom.getComponentRect(this.$refs['textBox'], (res) => { |
||||
|
this.wrapWidth = res.size.width |
||||
|
}) |
||||
|
} |
||||
|
// #endif |
||||
|
}, |
||||
|
loopAnimation() { |
||||
|
// #ifdef APP-NVUE |
||||
|
animation.transition(this.$refs['animationEle'], { |
||||
|
styles: { |
||||
|
transform: `translateX(0px)` |
||||
|
}, |
||||
|
duration: 0 |
||||
|
}, () => { |
||||
|
if (!this.stopAnimation) { |
||||
|
animation.transition(this.$refs['animationEle'], { |
||||
|
styles: { |
||||
|
transform: `translateX(-${this.textWidth}px)` |
||||
|
}, |
||||
|
duration: this.textWidth / this.speed * 1000, |
||||
|
timingFunction: 'linear', |
||||
|
delay: 0 |
||||
|
}, () => { |
||||
|
if (!this.stopAnimation) { |
||||
|
this.loopAnimation() |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
// #endif |
||||
|
}, |
||||
|
clickMore() { |
||||
|
this.$emit('getmore') |
||||
|
}, |
||||
|
close() { |
||||
|
this.show = false; |
||||
|
this.$emit('close') |
||||
|
}, |
||||
|
onClick() { |
||||
|
this.$emit('click') |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.uni-noticebar { |
||||
|
/* #ifndef APP-NVUE */ |
||||
|
display: flex; |
||||
|
width: 100%; |
||||
|
box-sizing: border-box; |
||||
|
/* #endif */ |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
padding: 10px 12px; |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
|
||||
|
.uni-cursor-point { |
||||
|
/* #ifdef H5 */ |
||||
|
cursor: pointer; |
||||
|
/* #endif */ |
||||
|
} |
||||
|
|
||||
|
.uni-noticebar-close { |
||||
|
margin-left: 8px; |
||||
|
margin-right: 5px; |
||||
|
} |
||||
|
|
||||
|
.uni-noticebar-icon { |
||||
|
margin-right: 5px; |
||||
|
} |
||||
|
|
||||
|
.uni-noticebar__content-wrapper { |
||||
|
flex: 1; |
||||
|
flex-direction: column; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.uni-noticebar__content-wrapper--single { |
||||
|
/* #ifndef APP-NVUE */ |
||||
|
line-height: 18px; |
||||
|
/* #endif */ |
||||
|
} |
||||
|
|
||||
|
.uni-noticebar__content-wrapper--single, |
||||
|
.uni-noticebar__content-wrapper--scrollable { |
||||
|
flex-direction: row; |
||||
|
} |
||||
|
|
||||
|
/* #ifndef APP-NVUE */ |
||||
|
.uni-noticebar__content-wrapper--scrollable { |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
/* #endif */ |
||||
|
|
||||
|
.uni-noticebar__content--scrollable { |
||||
|
/* #ifdef APP-NVUE */ |
||||
|
flex: 0; |
||||
|
/* #endif */ |
||||
|
/* #ifndef APP-NVUE */ |
||||
|
flex: 1; |
||||
|
display: block; |
||||
|
overflow: hidden; |
||||
|
/* #endif */ |
||||
|
} |
||||
|
|
||||
|
.uni-noticebar__content--single { |
||||
|
/* #ifndef APP-NVUE */ |
||||
|
display: flex; |
||||
|
flex: none; |
||||
|
width: 100%; |
||||
|
justify-content: center; |
||||
|
/* #endif */ |
||||
|
} |
||||
|
|
||||
|
.uni-noticebar__content-text { |
||||
|
font-size: 14px; |
||||
|
line-height: 18px; |
||||
|
/* #ifndef APP-NVUE */ |
||||
|
word-break: break-all; |
||||
|
/* #endif */ |
||||
|
} |
||||
|
|
||||
|
.uni-noticebar__content-text--single { |
||||
|
/* #ifdef APP-NVUE */ |
||||
|
lines: 1; |
||||
|
/* #endif */ |
||||
|
/* #ifndef APP-NVUE */ |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
white-space: nowrap; |
||||
|
/* #endif */ |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
} |
||||
|
|
||||
|
.uni-noticebar__content-text--scrollable { |
||||
|
/* #ifdef APP-NVUE */ |
||||
|
lines: 1; |
||||
|
padding-left: 750rpx; |
||||
|
/* #endif */ |
||||
|
/* #ifndef APP-NVUE */ |
||||
|
position: absolute; |
||||
|
display: block; |
||||
|
height: 18px; |
||||
|
line-height: 18px; |
||||
|
white-space: nowrap; |
||||
|
padding-left: 100%; |
||||
|
animation: notice 10s 0s linear infinite both; |
||||
|
animation-play-state: paused; |
||||
|
/* #endif */ |
||||
|
} |
||||
|
|
||||
|
.uni-noticebar__more { |
||||
|
/* #ifndef APP-NVUE */ |
||||
|
display: inline-flex; |
||||
|
/* #endif */ |
||||
|
flex-direction: row; |
||||
|
flex-wrap: nowrap; |
||||
|
align-items: center; |
||||
|
padding-left: 5px; |
||||
|
} |
||||
|
|
||||
|
@keyframes notice { |
||||
|
100% { |
||||
|
transform: translate3d(-100%, 0, 0); |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,90 @@ |
|||||
|
{ |
||||
|
"id": "uni-notice-bar", |
||||
|
"displayName": "uni-notice-bar 通告栏", |
||||
|
"version": "1.2.3", |
||||
|
"description": "NoticeBar 通告栏组件，常用于展示公告信息，可设为滚动公告", |
||||
|
"keywords": [ |
||||
|
"uni-ui", |
||||
|
"uniui", |
||||
|
"通告栏", |
||||
|
"公告", |
||||
|
"跑马灯" |
||||
|
], |
||||
|
"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", |
||||
|
"uni-icons" |
||||
|
], |
||||
|
"encrypt": [], |
||||
|
"platforms": { |
||||
|
"cloud": { |
||||
|
"tcb": "y", |
||||
|
"aliyun": "y", |
||||
|
"alipay": "n" |
||||
|
}, |
||||
|
"client": { |
||||
|
"App": { |
||||
|
"app-vue": "y", |
||||
|
"app-nvue": "y", |
||||
|
"app-harmony": "u", |
||||
|
"app-uvue": "u" |
||||
|
}, |
||||
|
"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" |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,13 @@ |
|||||
|
|
||||
|
|
||||
|
## NoticeBar 通告栏 |
||||
|
> **组件名：uni-notice-bar** |
||||
|
> 代码块： `uNoticeBar` |
||||
|
|
||||
|
|
||||
|
通告栏组件 。 |
||||
|
|
||||
|
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-notice-bar) |
||||
|
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 |
||||
|
|
||||
|
|
||||
Loading…
Reference in new issue