咖啡饮品提交
This commit is contained in:
@@ -19,4 +19,12 @@ export const APIhome = (data) => {
|
|||||||
toast: false
|
toast: false
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
// 获取咖啡
|
||||||
|
export const userdict = (data) => {
|
||||||
|
return request({
|
||||||
|
url: '/account/user/dict',
|
||||||
|
method: 'GET',
|
||||||
|
data: data,
|
||||||
|
toast: false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|||||||
@@ -27,6 +27,12 @@
|
|||||||
"navigationBarTitleText": "咖啡饮品"
|
"navigationBarTitleText": "咖啡饮品"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/index/freedaily",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "每日免单"
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/index/tothestore",
|
"path": "pages/index/tothestore",
|
||||||
"style": {
|
"style": {
|
||||||
|
|||||||
@@ -1,4 +1,264 @@
|
|||||||
<template>
|
<template>
|
||||||
2
|
<view class="content">
|
||||||
|
<view class="onecontent">
|
||||||
|
<image class="onecontentimage" :src="datas.toplist.coverImg" mode="aspectFill"></image>
|
||||||
|
<!-- 小内切圆 -->
|
||||||
|
<view class="after"></view>
|
||||||
|
<view class="onecontentabsolute">
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="twocontent" v-for="(item, index) in datas.list" :key="index" @click="clickproduct(item)">
|
||||||
|
<view class="df twoBox">
|
||||||
|
<view class="df ">
|
||||||
|
<image :src="item.logo" style="width: 50rpx;height: 50rpx;margin-right: 10rpx;" mode="">
|
||||||
|
</image>
|
||||||
|
<view class="">
|
||||||
|
{{ item.shopName }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="">
|
||||||
|
{{ item.distance }}m
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="df" style=" justify-content: space-between; flex-wrap: wrap; padding: 30rpx 0rpx;">
|
||||||
|
<image :src="item.coverImg" style="width: 192rpx;height: 192rpx;" mode=""></image>
|
||||||
|
<view style="margin-left: 24rpx; flex: auto;">
|
||||||
|
<view class="df" style="justify-content: space-between; flex-wrap: wrap;">
|
||||||
|
<view style="font-weight: 500; font-size: 28rpx; color: #333333;">{{ item.name }}</view>
|
||||||
|
<view style=" font-weight: 400; font-size: 24rpx; color: #999999;">已抢{{ item.saleNum
|
||||||
|
}}份
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="indexboxitemleftthere " style="">
|
||||||
|
<view class="df" style="align-items: normal;">
|
||||||
|
<view class="df">
|
||||||
|
<text
|
||||||
|
style=" font-family: Source Han Sans CN, Source Han Sans CN; font-weight: 500; font-size: 16rpx; color: #FF7127;">
|
||||||
|
到手
|
||||||
|
</text>
|
||||||
|
<text
|
||||||
|
style="font-weight: 500; font-size: 24rpx; color: #FF7127;">¥{{item.salePrice}}</text>
|
||||||
|
<view style=" margin-left: 4rpx;
|
||||||
|
padding: 2rpx 10rpx;
|
||||||
|
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||||||
|
border: 2rpx solid #FF7127;
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 16rpx;
|
||||||
|
color: #FF7127;">
|
||||||
|
{{item.discount}}折
|
||||||
|
</view>
|
||||||
|
<text style=" margin-left: 6rpx;
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16rpx;
|
||||||
|
color: #999999;
|
||||||
|
text-decoration-line: line-through;">¥{{item.originPrice}}</text>
|
||||||
|
</view>
|
||||||
|
<view style=" position: absolute;
|
||||||
|
top: 16rpx;
|
||||||
|
right: 12rpx;
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #FFFFFF;">
|
||||||
|
马上抢
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="df" style="justify-content: space-between;">
|
||||||
|
<view
|
||||||
|
style="font-family: Source Han Sans CN, Source Han Sans CN; font-weight: 400; font-size: 24rpx; color: #999999; padding-bottom: 8rpx;">
|
||||||
|
共省{{item.originPrice-item.salePrice}}元
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
style=" font-family: Source Han Sans CN, Source Han Sans CN; font-weight: bold; font-size: 16rpx;margin-right: 12rpx; color: #FFFFFF;">
|
||||||
|
<uni-countdown :show-day="false" :hour="convertMilliseconds(item.endTime).hours"
|
||||||
|
:minute="convertMilliseconds(item.endTime).minutes"
|
||||||
|
:second="convertMilliseconds(item.endTime).seconds" :indexs='index' color="#FFFFFF"
|
||||||
|
border-color="#00B26A" splitorColor="#FFFFFF" :font-size="7"></uni-countdown>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</view>
|
||||||
</template>
|
</template>
|
||||||
<script setup></script>
|
<script setup>
|
||||||
|
import {
|
||||||
|
onLoad
|
||||||
|
} from '@dcloudio/uni-app';
|
||||||
|
import {
|
||||||
|
APIhome,
|
||||||
|
userdict
|
||||||
|
} from "@/common/api/index/index.js"
|
||||||
|
import {
|
||||||
|
reactive
|
||||||
|
} from 'vue';
|
||||||
|
let datas = reactive({
|
||||||
|
titlename: '咖啡',
|
||||||
|
opacitys: false,
|
||||||
|
toplist: "",
|
||||||
|
list: []
|
||||||
|
})
|
||||||
|
onLoad(() => {
|
||||||
|
getList()
|
||||||
|
})
|
||||||
|
|
||||||
|
function clickproduct(item) {
|
||||||
|
uni.pro.navigateTo('product/index', {
|
||||||
|
id: item.id
|
||||||
|
})
|
||||||
|
}
|
||||||
|
async function getList() {
|
||||||
|
let ele = await userdict({
|
||||||
|
type: "group"
|
||||||
|
})
|
||||||
|
datas.toplist = ele
|
||||||
|
let res = await APIhome({
|
||||||
|
lng: uni.cache.get('getLocationstorage').lng,
|
||||||
|
lat: uni.cache.get('getLocationstorage').lat,
|
||||||
|
address: uni.cache.get('getLocationstorage').address, //地址
|
||||||
|
categoryId: 1,
|
||||||
|
orderType: 0,
|
||||||
|
name: '',
|
||||||
|
page: 1, //页数
|
||||||
|
size: 10, //页容量
|
||||||
|
distanceType: ''
|
||||||
|
})
|
||||||
|
datas.list = res.records
|
||||||
|
}
|
||||||
|
|
||||||
|
function convertMilliseconds(milliseconds) {
|
||||||
|
// 计算天数
|
||||||
|
const days = Math.floor(milliseconds / 86400000);
|
||||||
|
// 计算剩余的毫秒数
|
||||||
|
milliseconds %= 86400000;
|
||||||
|
// 计算小时数
|
||||||
|
const hours = Math.floor(milliseconds / 3600000);
|
||||||
|
// 计算剩余的毫秒数
|
||||||
|
milliseconds %= 3600000;
|
||||||
|
// 计算分钟数
|
||||||
|
const minutes = Math.floor(milliseconds / 60000);
|
||||||
|
// 计算剩余的毫秒数
|
||||||
|
milliseconds %= 60000;
|
||||||
|
// 计算秒数
|
||||||
|
const seconds = Math.floor(milliseconds / 1000);
|
||||||
|
|
||||||
|
return {
|
||||||
|
days,
|
||||||
|
hours,
|
||||||
|
minutes,
|
||||||
|
seconds
|
||||||
|
};
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
page {
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
|
||||||
|
.onecontent {
|
||||||
|
width: 100%;
|
||||||
|
height: 492rpx;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.onecontentimage {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.after {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 32rpx;
|
||||||
|
right: 0;
|
||||||
|
width: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
line-height: 40rpx;
|
||||||
|
text-align: center;
|
||||||
|
background-image: radial-gradient(160rpx at 0px 0px, rgba(0, 0, 0, 0) 40rpx, #fff 40rpx);
|
||||||
|
}
|
||||||
|
|
||||||
|
.onecontentabsolute {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 52rpx;
|
||||||
|
bottom: 64rpx;
|
||||||
|
|
||||||
|
.onecontentabsoluteitem {
|
||||||
|
padding: 8rpx 16rpx;
|
||||||
|
background: #FFFFFF;
|
||||||
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||||
|
|
||||||
|
image {
|
||||||
|
width: 24.16rpx;
|
||||||
|
height: 29.31rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
padding: 0 16rpx;
|
||||||
|
flex: auto;
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.onecontentabsoluteitembotton {
|
||||||
|
width: 120rpx;
|
||||||
|
height: 56rpx;
|
||||||
|
line-height: 56rpx;
|
||||||
|
text-align: center;
|
||||||
|
background: linear-gradient(109deg, #FF9D84 0%, #FFFFFF 100%);
|
||||||
|
border-radius: 28rpx 28rpx 28rpx 28rpx;
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.twocontent {
|
||||||
|
padding: 20rpx 40rpx;
|
||||||
|
|
||||||
|
.twoBox {
|
||||||
|
background-color: #fff;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 30rpx 0rpx;
|
||||||
|
border-bottom: 1rpx solid #ccc;
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.indexboxitemleftthere {
|
||||||
|
position: relative;
|
||||||
|
margin-top: 30rpx;
|
||||||
|
padding: 16rpx 0;
|
||||||
|
padding-left: 16rpx;
|
||||||
|
width: 100%;
|
||||||
|
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/qinggou.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.df {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,7 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="content">
|
<view class="content">
|
||||||
<!-- 占位符导航栏 -->
|
|
||||||
<navseat :opacity='opacity' :title='titlename' :titleshow='true'></navseat>
|
|
||||||
<view class="onecontent">
|
<view class="onecontent">
|
||||||
<view class="onecontentabsolute"></view>
|
<view class="onecontentabsolute"></view>
|
||||||
</view>
|
</view>
|
||||||
@@ -16,19 +14,18 @@
|
|||||||
<view class="towcontentoneboxswiper">
|
<view class="towcontentoneboxswiper">
|
||||||
<swiper class="swiper" circular :autoplay='true' :vertical='true' display-multiple-items="4"
|
<swiper class="swiper" circular :autoplay='true' :vertical='true' display-multiple-items="4"
|
||||||
:interval="'3000'">
|
:interval="'3000'">
|
||||||
<swiper-item class="swiperitem" v-for="(item,index) in orderfindWiningUserlist"
|
<swiper-item class="swiperitem" v-for="(item, index) in orderfindWiningUserlist"
|
||||||
:key="index">
|
:key="index">
|
||||||
<view class="swiper-item">{{item.userName}}* 免单{{item.orderAmount}}元订单号:{{item.orderNo}}
|
<view class="swiper-item">{{ item.userName }}* 免单{{ item.orderAmount }}元订单号:{{ item.orderNo }}
|
||||||
</view>
|
</view>
|
||||||
</swiper-item>
|
</swiper-item>
|
||||||
|
|
||||||
</swiper>
|
</swiper>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="towcontentoness">
|
<view class="towcontentoness">
|
||||||
<view class="towcontentonebox_box">
|
<view class="towcontentonebox_box">
|
||||||
订单数:{{total}}
|
订单数:10
|
||||||
</view>
|
</view>
|
||||||
<view class="towcontentonebox">
|
<view class="towcontentonebox">
|
||||||
<view class="towcontentoneboxswiper">
|
<view class="towcontentoneboxswiper">
|
||||||
@@ -43,36 +40,19 @@
|
|||||||
金额
|
金额
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="swiperitem" v-for="(item,index) in ordermineWinnerList" :key="index">
|
<view class="swiperitem" v-for="(item, index) in ordermineWinnerList" :key="index">
|
||||||
<view class="swiper-item" style="margin-top: 32rpx;">
|
<view class="swiper-item" style="margin-top: 32rpx;">
|
||||||
<view class="swiper_itemone">
|
<view class="swiper_itemone">
|
||||||
{{item.isRefund == true ? '已免单':'待免单'}}
|
{{ item.isRefund == true ? '已免单' : '待免单' }}
|
||||||
</view>
|
</view>
|
||||||
<view class="swiper_itemtow">
|
<view class="swiper_itemtow">
|
||||||
{{item.orderNo}}
|
{{ item.orderNo }}
|
||||||
</view>
|
</view>
|
||||||
<view class="swiper_itemthere">
|
<view class="swiper_itemthere">
|
||||||
{{item.orderAmount}}元
|
{{ item.orderAmount }}元
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<!-- <swiper class="swiper" circular :autoplay='true' :vertical='true' interval="3000"
|
|
||||||
display-multiple-items="4">
|
|
||||||
<swiper-item class="swiperitem" v-for="(item,index) in orderfindWiningUserlist"
|
|
||||||
:key="index">
|
|
||||||
<view class="swiper-item">
|
|
||||||
<view class="swiper_itemone">
|
|
||||||
{{item.orderAmount}}元
|
|
||||||
</view>
|
|
||||||
<view class="swiper_itemtow">
|
|
||||||
{{item.orderNo}}
|
|
||||||
</view>
|
|
||||||
<view class="swiper_itemthere">
|
|
||||||
{{item.isRefund == true ? '已免单':'待免单'}}
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</swiper-item>
|
|
||||||
</swiper> -->
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -83,295 +63,266 @@
|
|||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script setup>
|
||||||
import {
|
import {
|
||||||
forEach
|
reactive,
|
||||||
} from 'lodash';
|
ref
|
||||||
import navseat from '@/components/navseat.vue'
|
} from 'vue';
|
||||||
export default {
|
let orderfindWiningUserlist = ref([{
|
||||||
components: {
|
userName: "王*",
|
||||||
navseat
|
orderAmount: 12,
|
||||||
},
|
orderNo: 213504512353548688546
|
||||||
data() {
|
}, {
|
||||||
return {
|
userName: "赵*",
|
||||||
titlename: '',
|
orderAmount: 48,
|
||||||
opacity: false,
|
orderNo: 65481188834105643623210
|
||||||
orderfindWiningUserlist: [],
|
}, {
|
||||||
ordermineWinnerList: [],
|
userName: "钱*",
|
||||||
form: {
|
orderAmount: 91,
|
||||||
address: '', //地址
|
orderNo: 5891051346764518249444
|
||||||
type: '', //品类
|
}, {
|
||||||
orderBy: '', //1.理我最近 2.销量优先 3.价格优先
|
userName: "孙*",
|
||||||
other: '', //附近1KM 1选中 0不选中
|
orderAmount: 84,
|
||||||
page: 1, //页数
|
orderNo: 688472546798742575342
|
||||||
size: 10, //页容量
|
}, {
|
||||||
status: 'loadmore'
|
userName: "王",
|
||||||
},
|
orderAmount: 73,
|
||||||
total:0
|
orderNo: 597344582826533594131
|
||||||
};
|
}, {
|
||||||
},
|
userName: "郑*",
|
||||||
onLoad(e) {
|
orderAmount: 98,
|
||||||
this.orderfindWiningUser()
|
orderNo: 469867684658481051627
|
||||||
this.ordermineWinnerEvent()
|
}, {
|
||||||
let _this = this
|
userName: "凯*",
|
||||||
uni.getStorage({
|
orderAmount: 95,
|
||||||
key: 'itemData',
|
orderNo: 895961781634536230631
|
||||||
success: function(res) {
|
},
|
||||||
_this.titlename = res.data.name
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
onReachBottom() {
|
|
||||||
this.ordermineWinnerEvent()
|
|
||||||
},
|
|
||||||
onPageScroll(e) {
|
|
||||||
if (e.scrollTop <= 44) { //搜索导航栏
|
|
||||||
this.opacity = false
|
|
||||||
} else {
|
|
||||||
this.opacity = true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
|
|
||||||
cut(str, firstStr, lastStr) {
|
])
|
||||||
let start = str.indexOf(firstStr);
|
let ordermineWinnerList = ref([{
|
||||||
let end = str.lastIndexOf(lastStr);
|
isRefund: true,
|
||||||
return str.slice(start, end + 1); //slice方法截取的部分不包括第二参数所在位置
|
orderNo: 895961781634536230631,
|
||||||
},
|
orderAmount: "95"
|
||||||
|
},
|
||||||
async ordermineWinnerEvent() {
|
{
|
||||||
let res = await this.api.ordermineWinner({
|
isRefund: true,
|
||||||
userId: uni.getStorageSync('userInfo').id,
|
orderAmount: 74,
|
||||||
page: this.form.page,
|
orderNo: 222674526516892311380
|
||||||
size: this.form.size
|
},
|
||||||
})
|
{
|
||||||
if(res.code ==0){
|
isRefund: false,
|
||||||
this.total = res.data.total
|
orderAmount: 23,
|
||||||
if(this.form.page==1){
|
orderNo: 862674526546892311380
|
||||||
this.ordermineWinnerList = res.data.list
|
},
|
||||||
}else{
|
])
|
||||||
this.ordermineWinnerList.push(...res.data.list)
|
|
||||||
}
|
|
||||||
this.form.page = ++this.form.page;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async orderfindWiningUser() {
|
|
||||||
let res = await this.api.orderfindWiningUser()
|
|
||||||
this.orderfindWiningUserlist = res.data.map((i) => {
|
|
||||||
i.userName = i.userName.slice(0, 1)
|
|
||||||
return i
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
page {
|
page {
|
||||||
background: #F9F9F9;
|
background: #F9F9F9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
.onecontent {
|
||||||
|
width: 100%;
|
||||||
|
height: 684.19rpx;
|
||||||
|
position: relative;
|
||||||
|
background: linear-gradient(96deg, #F9F2D9 0%, #FBE1DA 100%);
|
||||||
|
|
||||||
|
.onecontentabsolute {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
height: 534.19rpx;
|
||||||
|
width: 100%;
|
||||||
|
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/mrmd.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.towcontent {
|
||||||
.onecontent {
|
position: relative;
|
||||||
width: 100%;
|
padding: 0 28rpx;
|
||||||
height: 684.19rpx;
|
width: 100%;
|
||||||
position: relative;
|
margin-top: -100rpx;
|
||||||
background: linear-gradient(96deg, #F9F2D9 0%, #FBE1DA 100%);
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(249, 242, 217, 0.77) 10%, #F5DFDF 100%);
|
||||||
|
|
||||||
.onecontentabsolute {
|
.towcontentone {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
background: linear-gradient(180deg, rgba(255, 241, 204, 0.77) 0%, rgba(255, 255, 255, 0.56) 40%, #FFFFFF 100%);
|
||||||
|
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
||||||
|
border: 2rpx solid #FFFFFF;
|
||||||
|
padding: 32rpx 24rpx;
|
||||||
|
|
||||||
|
.towcontentoneimage {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: -30rpx;
|
||||||
height: 534.19rpx;
|
left: 50%;
|
||||||
|
transform: translatex(-50%);
|
||||||
|
width: 118rpx;
|
||||||
|
height: 46rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.towcontentonebox {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/mrmd.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
.towcontentoneboximage {
|
||||||
|
width: 171.63rpx;
|
||||||
|
height: 37.24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.towcontentoneboxswiper {
|
||||||
|
width: 100%;
|
||||||
|
padding-top: 24rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.swiper {
|
||||||
|
height: 242rpx;
|
||||||
|
|
||||||
|
.swiperitem {
|
||||||
|
height: 40rpx;
|
||||||
|
|
||||||
|
.swiper-item {
|
||||||
|
display: block;
|
||||||
|
height: 40rpx;
|
||||||
|
text-align: left;
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.towcontent {
|
.towcontentoness {
|
||||||
position: relative;
|
margin-top: 48rpx;
|
||||||
padding: 0 28rpx;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: -100rpx;
|
background: rgba(255, 255, 255, 0.96);
|
||||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(249, 242, 217, 0.77) 10%, #F5DFDF 100%);
|
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
||||||
|
padding: 38rpx 48rpx;
|
||||||
|
|
||||||
.towcontentone {
|
.towcontentonebox_box {
|
||||||
position: relative;
|
margin: 0 auto;
|
||||||
width: 100%;
|
text-align: center;
|
||||||
background: linear-gradient(180deg, rgba(255, 241, 204, 0.77) 0%, rgba(255, 255, 255, 0.56) 40%, #FFFFFF 100%);
|
width: 262rpx;
|
||||||
|
height: 58rpx;
|
||||||
|
line-height: 58rpx;
|
||||||
|
background: #FFA436;
|
||||||
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
||||||
border: 2rpx solid #FFFFFF;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
padding: 32rpx 24rpx;
|
font-weight: bold;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
.towcontentoneimage {
|
.towcontentonebox {
|
||||||
position: absolute;
|
width: 100%;
|
||||||
top: -30rpx;
|
|
||||||
left: 50%;
|
.towcontentoneboximage {
|
||||||
transform: translatex(-50%);
|
width: 171.63rpx;
|
||||||
width: 118rpx;
|
height: 37.24rpx;
|
||||||
height: 46rpx;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.towcontentonebox {
|
.swiper-item {
|
||||||
width: 100%;
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
.towcontentoneboximage {
|
.swiper_itemone {
|
||||||
width: 171.63rpx;
|
width: 25%;
|
||||||
height: 37.24rpx;
|
text-align: center;
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
}
|
}
|
||||||
|
|
||||||
.towcontentoneboxswiper {
|
.swiper_itemtow {
|
||||||
width: 100%;
|
width: auto;
|
||||||
padding-top: 24rpx;
|
text-align: center;
|
||||||
overflow: hidden;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
.swiper {
|
.swiper_itemthere {
|
||||||
height: 242rpx;
|
width: 25%;
|
||||||
|
text-align: center;
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.swiperitem {
|
.towcontentoneboxswiper {
|
||||||
height: 40rpx;
|
width: 100%;
|
||||||
|
// height: 242rpx;
|
||||||
|
padding-top: 24rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
.swiper-item {
|
.swiper {
|
||||||
display: block;
|
height: 230rpx;
|
||||||
height: 40rpx;
|
|
||||||
text-align: left;
|
.swiperitem {
|
||||||
|
height: 40rpx;
|
||||||
|
|
||||||
|
.swiper-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.swiper_itemone {
|
||||||
|
width: 25%;
|
||||||
|
text-align: center;
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper_itemtow {
|
||||||
|
width: auto;
|
||||||
|
text-align: center;
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper_itemthere {
|
||||||
|
width: 25%;
|
||||||
|
text-align: center;
|
||||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
.towcontentoness {
|
|
||||||
margin-top: 48rpx;
|
.towcontenttow {
|
||||||
width: 100%;
|
margin-top: 32rpx;
|
||||||
background: rgba(255, 255, 255, 0.96);
|
padding-bottom: 144rpx;
|
||||||
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
text-align: center;
|
||||||
padding: 38rpx 48rpx;
|
width: 100%;
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
.towcontentonebox_box {
|
font-weight: 500;
|
||||||
margin: 0 auto;
|
font-size: 28rpx;
|
||||||
text-align: center;
|
color: #333333;
|
||||||
width: 262rpx;
|
|
||||||
height: 58rpx;
|
|
||||||
line-height: 58rpx;
|
|
||||||
background: #FFA436;
|
|
||||||
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
|
||||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 32rpx;
|
|
||||||
color: #FFFFFF;
|
|
||||||
}
|
|
||||||
|
|
||||||
.towcontentonebox {
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.towcontentoneboximage {
|
|
||||||
width: 171.63rpx;
|
|
||||||
height: 37.24rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.swiper-item {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.swiper_itemone {
|
|
||||||
width: 25%;
|
|
||||||
text-align: center;
|
|
||||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.swiper_itemtow {
|
|
||||||
width: auto;
|
|
||||||
text-align: center;
|
|
||||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.swiper_itemthere {
|
|
||||||
width: 25%;
|
|
||||||
text-align: center;
|
|
||||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.towcontentoneboxswiper {
|
|
||||||
width: 100%;
|
|
||||||
// height: 242rpx;
|
|
||||||
padding-top: 24rpx;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
.swiper {
|
|
||||||
height: 230rpx;
|
|
||||||
|
|
||||||
.swiperitem {
|
|
||||||
height: 40rpx;
|
|
||||||
|
|
||||||
.swiper-item {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.swiper_itemone {
|
|
||||||
width: 25%;
|
|
||||||
text-align: center;
|
|
||||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.swiper_itemtow {
|
|
||||||
width: auto;
|
|
||||||
text-align: center;
|
|
||||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.swiper_itemthere {
|
|
||||||
width: 25%;
|
|
||||||
text-align: center;
|
|
||||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.towcontenttow {
|
|
||||||
margin-top: 32rpx;
|
|
||||||
padding-bottom: 144rpx;
|
|
||||||
text-align: center;
|
|
||||||
width: 100%;
|
|
||||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -23,11 +23,11 @@
|
|||||||
color="#333333" size="12"></up-icon>
|
color="#333333" size="12"></up-icon>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<!-- <view class="componentsclass" v-if="showproductlist">
|
<view class="componentsclass" v-if="showproductlist">
|
||||||
<AreaSelect v-if="viewHistoryindex == 0" @updateValue="openproductlist" />
|
<AreaSelect v-if="viewHistoryindex == 0" @updateValue="openproductlist" />
|
||||||
<grouping v-if="viewHistoryindex == 1 || viewHistoryindex == 2 || viewHistoryindex == 3"
|
<grouping v-if="viewHistoryindex == 1 || viewHistoryindex == 2 || viewHistoryindex == 3"
|
||||||
@grouping="openproductlist" />
|
@grouping="openproductlist" />
|
||||||
</view> -->
|
</view>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
<!-- 首页抢购区域 -->
|
<!-- 首页抢购区域 -->
|
||||||
|
|||||||
28
uni_modules/uni-countdown/changelog.md
Normal file
28
uni_modules/uni-countdown/changelog.md
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
## 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,276 @@
|
|||||||
|
<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:{}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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>
|
||||||
84
uni_modules/uni-countdown/package.json
Normal file
84
uni_modules/uni-countdown/package.json
Normal file
@@ -0,0 +1,84 @@
|
|||||||
|
{
|
||||||
|
"id": "uni-countdown",
|
||||||
|
"displayName": "uni-countdown 倒计时",
|
||||||
|
"version": "1.2.4",
|
||||||
|
"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"
|
||||||
|
},
|
||||||
|
"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
|
||||||
8
uni_modules/uni-scss/changelog.md
Normal file
8
uni_modules/uni-scss/changelog.md
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
## 1.0.3(2022-01-21)
|
||||||
|
- 优化 组件示例
|
||||||
|
## 1.0.2(2021-11-22)
|
||||||
|
- 修复 / 符号在 vue 不同版本兼容问题引起的报错问题
|
||||||
|
## 1.0.1(2021-11-22)
|
||||||
|
- 修复 vue3中scss语法兼容问题
|
||||||
|
## 1.0.0(2021-11-18)
|
||||||
|
- init
|
||||||
1
uni_modules/uni-scss/index.scss
Normal file
1
uni_modules/uni-scss/index.scss
Normal file
@@ -0,0 +1 @@
|
|||||||
|
@import './styles/index.scss';
|
||||||
82
uni_modules/uni-scss/package.json
Normal file
82
uni_modules/uni-scss/package.json
Normal file
@@ -0,0 +1,82 @@
|
|||||||
|
{
|
||||||
|
"id": "uni-scss",
|
||||||
|
"displayName": "uni-scss 辅助样式",
|
||||||
|
"version": "1.0.3",
|
||||||
|
"description": "uni-sass是uni-ui提供的一套全局样式 ,通过一些简单的类名和sass变量,实现简单的页面布局操作,比如颜色、边距、圆角等。",
|
||||||
|
"keywords": [
|
||||||
|
"uni-scss",
|
||||||
|
"uni-ui",
|
||||||
|
"辅助样式"
|
||||||
|
],
|
||||||
|
"repository": "https://github.com/dcloudio/uni-ui",
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": "^3.1.0"
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"category": [
|
||||||
|
"JS SDK",
|
||||||
|
"通用 SDK"
|
||||||
|
],
|
||||||
|
"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": [],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "y",
|
||||||
|
"aliyun": "y"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"App": {
|
||||||
|
"app-vue": "y",
|
||||||
|
"app-nvue": "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"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "n",
|
||||||
|
"联盟": "n"
|
||||||
|
},
|
||||||
|
"Vue": {
|
||||||
|
"vue2": "y",
|
||||||
|
"vue3": "y"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
4
uni_modules/uni-scss/readme.md
Normal file
4
uni_modules/uni-scss/readme.md
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
`uni-sass` 是 `uni-ui`提供的一套全局样式 ,通过一些简单的类名和`sass`变量,实现简单的页面布局操作,比如颜色、边距、圆角等。
|
||||||
|
|
||||||
|
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-sass)
|
||||||
|
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
|
||||||
7
uni_modules/uni-scss/styles/index.scss
Normal file
7
uni_modules/uni-scss/styles/index.scss
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
@import './setting/_variables.scss';
|
||||||
|
@import './setting/_border.scss';
|
||||||
|
@import './setting/_color.scss';
|
||||||
|
@import './setting/_space.scss';
|
||||||
|
@import './setting/_radius.scss';
|
||||||
|
@import './setting/_text.scss';
|
||||||
|
@import './setting/_styles.scss';
|
||||||
3
uni_modules/uni-scss/styles/setting/_border.scss
Normal file
3
uni_modules/uni-scss/styles/setting/_border.scss
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
.uni-border {
|
||||||
|
border: 1px $uni-border-1 solid;
|
||||||
|
}
|
||||||
66
uni_modules/uni-scss/styles/setting/_color.scss
Normal file
66
uni_modules/uni-scss/styles/setting/_color.scss
Normal file
@@ -0,0 +1,66 @@
|
|||||||
|
|
||||||
|
// TODO 暂时不需要 class ,需要用户使用变量实现 ,如果使用类名其实并不推荐
|
||||||
|
// @mixin get-styles($k,$c) {
|
||||||
|
// @if $k == size or $k == weight{
|
||||||
|
// font-#{$k}:#{$c}
|
||||||
|
// }@else{
|
||||||
|
// #{$k}:#{$c}
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
$uni-ui-color:(
|
||||||
|
// 主色
|
||||||
|
primary: $uni-primary,
|
||||||
|
primary-disable: $uni-primary-disable,
|
||||||
|
primary-light: $uni-primary-light,
|
||||||
|
// 辅助色
|
||||||
|
success: $uni-success,
|
||||||
|
success-disable: $uni-success-disable,
|
||||||
|
success-light: $uni-success-light,
|
||||||
|
warning: $uni-warning,
|
||||||
|
warning-disable: $uni-warning-disable,
|
||||||
|
warning-light: $uni-warning-light,
|
||||||
|
error: $uni-error,
|
||||||
|
error-disable: $uni-error-disable,
|
||||||
|
error-light: $uni-error-light,
|
||||||
|
info: $uni-info,
|
||||||
|
info-disable: $uni-info-disable,
|
||||||
|
info-light: $uni-info-light,
|
||||||
|
// 中性色
|
||||||
|
main-color: $uni-main-color,
|
||||||
|
base-color: $uni-base-color,
|
||||||
|
secondary-color: $uni-secondary-color,
|
||||||
|
extra-color: $uni-extra-color,
|
||||||
|
// 背景色
|
||||||
|
bg-color: $uni-bg-color,
|
||||||
|
// 边框颜色
|
||||||
|
border-1: $uni-border-1,
|
||||||
|
border-2: $uni-border-2,
|
||||||
|
border-3: $uni-border-3,
|
||||||
|
border-4: $uni-border-4,
|
||||||
|
// 黑色
|
||||||
|
black:$uni-black,
|
||||||
|
// 白色
|
||||||
|
white:$uni-white,
|
||||||
|
// 透明
|
||||||
|
transparent:$uni-transparent
|
||||||
|
) !default;
|
||||||
|
@each $key, $child in $uni-ui-color {
|
||||||
|
.uni-#{"" + $key} {
|
||||||
|
color: $child;
|
||||||
|
}
|
||||||
|
.uni-#{"" + $key}-bg {
|
||||||
|
background-color: $child;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.uni-shadow-sm {
|
||||||
|
box-shadow: $uni-shadow-sm;
|
||||||
|
}
|
||||||
|
.uni-shadow-base {
|
||||||
|
box-shadow: $uni-shadow-base;
|
||||||
|
}
|
||||||
|
.uni-shadow-lg {
|
||||||
|
box-shadow: $uni-shadow-lg;
|
||||||
|
}
|
||||||
|
.uni-mask {
|
||||||
|
background-color:$uni-mask;
|
||||||
|
}
|
||||||
55
uni_modules/uni-scss/styles/setting/_radius.scss
Normal file
55
uni_modules/uni-scss/styles/setting/_radius.scss
Normal file
@@ -0,0 +1,55 @@
|
|||||||
|
@mixin radius($r,$d:null ,$important: false){
|
||||||
|
$radius-value:map-get($uni-radius, $r) if($important, !important, null);
|
||||||
|
// Key exists within the $uni-radius variable
|
||||||
|
@if (map-has-key($uni-radius, $r) and $d){
|
||||||
|
@if $d == t {
|
||||||
|
border-top-left-radius:$radius-value;
|
||||||
|
border-top-right-radius:$radius-value;
|
||||||
|
}@else if $d == r {
|
||||||
|
border-top-right-radius:$radius-value;
|
||||||
|
border-bottom-right-radius:$radius-value;
|
||||||
|
}@else if $d == b {
|
||||||
|
border-bottom-left-radius:$radius-value;
|
||||||
|
border-bottom-right-radius:$radius-value;
|
||||||
|
}@else if $d == l {
|
||||||
|
border-top-left-radius:$radius-value;
|
||||||
|
border-bottom-left-radius:$radius-value;
|
||||||
|
}@else if $d == tl {
|
||||||
|
border-top-left-radius:$radius-value;
|
||||||
|
}@else if $d == tr {
|
||||||
|
border-top-right-radius:$radius-value;
|
||||||
|
}@else if $d == br {
|
||||||
|
border-bottom-right-radius:$radius-value;
|
||||||
|
}@else if $d == bl {
|
||||||
|
border-bottom-left-radius:$radius-value;
|
||||||
|
}
|
||||||
|
}@else{
|
||||||
|
border-radius:$radius-value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $key, $child in $uni-radius {
|
||||||
|
@if($key){
|
||||||
|
.uni-radius-#{"" + $key} {
|
||||||
|
@include radius($key)
|
||||||
|
}
|
||||||
|
}@else{
|
||||||
|
.uni-radius {
|
||||||
|
@include radius($key)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $direction in t, r, b, l,tl, tr, br, bl {
|
||||||
|
@each $key, $child in $uni-radius {
|
||||||
|
@if($key){
|
||||||
|
.uni-radius-#{"" + $direction}-#{"" + $key} {
|
||||||
|
@include radius($key,$direction,false)
|
||||||
|
}
|
||||||
|
}@else{
|
||||||
|
.uni-radius-#{$direction} {
|
||||||
|
@include radius($key,$direction,false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
56
uni_modules/uni-scss/styles/setting/_space.scss
Normal file
56
uni_modules/uni-scss/styles/setting/_space.scss
Normal file
@@ -0,0 +1,56 @@
|
|||||||
|
|
||||||
|
@mixin fn($space,$direction,$size,$n) {
|
||||||
|
@if $n {
|
||||||
|
#{$space}-#{$direction}: #{$size*$uni-space-root}px
|
||||||
|
} @else {
|
||||||
|
#{$space}-#{$direction}: #{-$size*$uni-space-root}px
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@mixin get-styles($direction,$i,$space,$n){
|
||||||
|
@if $direction == t {
|
||||||
|
@include fn($space, top,$i,$n);
|
||||||
|
}
|
||||||
|
@if $direction == r {
|
||||||
|
@include fn($space, right,$i,$n);
|
||||||
|
}
|
||||||
|
@if $direction == b {
|
||||||
|
@include fn($space, bottom,$i,$n);
|
||||||
|
}
|
||||||
|
@if $direction == l {
|
||||||
|
@include fn($space, left,$i,$n);
|
||||||
|
}
|
||||||
|
@if $direction == x {
|
||||||
|
@include fn($space, left,$i,$n);
|
||||||
|
@include fn($space, right,$i,$n);
|
||||||
|
}
|
||||||
|
@if $direction == y {
|
||||||
|
@include fn($space, top,$i,$n);
|
||||||
|
@include fn($space, bottom,$i,$n);
|
||||||
|
}
|
||||||
|
@if $direction == a {
|
||||||
|
@if $n {
|
||||||
|
#{$space}:#{$i*$uni-space-root}px;
|
||||||
|
} @else {
|
||||||
|
#{$space}:#{-$i*$uni-space-root}px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $orientation in m,p {
|
||||||
|
$space: margin;
|
||||||
|
@if $orientation == m {
|
||||||
|
$space: margin;
|
||||||
|
} @else {
|
||||||
|
$space: padding;
|
||||||
|
}
|
||||||
|
@for $i from 0 through 16 {
|
||||||
|
@each $direction in t, r, b, l, x, y, a {
|
||||||
|
.uni-#{$orientation}#{$direction}-#{$i} {
|
||||||
|
@include get-styles($direction,$i,$space,true);
|
||||||
|
}
|
||||||
|
.uni-#{$orientation}#{$direction}-n#{$i} {
|
||||||
|
@include get-styles($direction,$i,$space,false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
167
uni_modules/uni-scss/styles/setting/_styles.scss
Normal file
167
uni_modules/uni-scss/styles/setting/_styles.scss
Normal file
@@ -0,0 +1,167 @@
|
|||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
|
||||||
|
$-color-white:#fff;
|
||||||
|
$-color-black:#000;
|
||||||
|
@mixin base-style($color) {
|
||||||
|
color: #fff;
|
||||||
|
background-color: $color;
|
||||||
|
border-color: mix($-color-black, $color, 8%);
|
||||||
|
&:not([hover-class]):active {
|
||||||
|
background: mix($-color-black, $color, 10%);
|
||||||
|
border-color: mix($-color-black, $color, 20%);
|
||||||
|
color: $-color-white;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@mixin is-color($color) {
|
||||||
|
@include base-style($color);
|
||||||
|
&[loading] {
|
||||||
|
@include base-style($color);
|
||||||
|
&::before {
|
||||||
|
margin-right:5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&[disabled] {
|
||||||
|
&,
|
||||||
|
&[loading],
|
||||||
|
&:not([hover-class]):active {
|
||||||
|
color: $-color-white;
|
||||||
|
border-color: mix(darken($color,10%), $-color-white);
|
||||||
|
background-color: mix($color, $-color-white);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
@mixin base-plain-style($color) {
|
||||||
|
color:$color;
|
||||||
|
background-color: mix($-color-white, $color, 90%);
|
||||||
|
border-color: mix($-color-white, $color, 70%);
|
||||||
|
&:not([hover-class]):active {
|
||||||
|
background: mix($-color-white, $color, 80%);
|
||||||
|
color: $color;
|
||||||
|
outline: none;
|
||||||
|
border-color: mix($-color-white, $color, 50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@mixin is-plain($color){
|
||||||
|
&[plain] {
|
||||||
|
@include base-plain-style($color);
|
||||||
|
&[loading] {
|
||||||
|
@include base-plain-style($color);
|
||||||
|
&::before {
|
||||||
|
margin-right:5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&[disabled] {
|
||||||
|
&,
|
||||||
|
&:active {
|
||||||
|
color: mix($-color-white, $color, 40%);
|
||||||
|
background-color: mix($-color-white, $color, 90%);
|
||||||
|
border-color: mix($-color-white, $color, 80%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.uni-btn {
|
||||||
|
margin: 5px;
|
||||||
|
color: #393939;
|
||||||
|
border:1px solid #ccc;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 200;
|
||||||
|
background-color: #F9F9F9;
|
||||||
|
// TODO 暂时处理边框隐藏一边的问题
|
||||||
|
overflow: visible;
|
||||||
|
&::after{
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not([type]),&[type=default] {
|
||||||
|
color: #999;
|
||||||
|
&[loading] {
|
||||||
|
background: none;
|
||||||
|
&::before {
|
||||||
|
margin-right:5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
&[disabled]{
|
||||||
|
color: mix($-color-white, #999, 60%);
|
||||||
|
&,
|
||||||
|
&[loading],
|
||||||
|
&:active {
|
||||||
|
color: mix($-color-white, #999, 60%);
|
||||||
|
background-color: mix($-color-white,$-color-black , 98%);
|
||||||
|
border-color: mix($-color-white, #999, 85%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&[plain] {
|
||||||
|
color: #999;
|
||||||
|
background: none;
|
||||||
|
border-color: $uni-border-1;
|
||||||
|
&:not([hover-class]):active {
|
||||||
|
background: none;
|
||||||
|
color: mix($-color-white, $-color-black, 80%);
|
||||||
|
border-color: mix($-color-white, $-color-black, 90%);
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
&[disabled]{
|
||||||
|
&,
|
||||||
|
&[loading],
|
||||||
|
&:active {
|
||||||
|
background: none;
|
||||||
|
color: mix($-color-white, #999, 60%);
|
||||||
|
border-color: mix($-color-white, #999, 85%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not([hover-class]):active {
|
||||||
|
color: mix($-color-white, $-color-black, 50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
&[size=mini] {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 200;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
&.uni-btn-small {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
&.uni-btn-mini {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.uni-btn-radius {
|
||||||
|
border-radius: 999px;
|
||||||
|
}
|
||||||
|
&[type=primary] {
|
||||||
|
@include is-color($uni-primary);
|
||||||
|
@include is-plain($uni-primary)
|
||||||
|
}
|
||||||
|
&[type=success] {
|
||||||
|
@include is-color($uni-success);
|
||||||
|
@include is-plain($uni-success)
|
||||||
|
}
|
||||||
|
&[type=error] {
|
||||||
|
@include is-color($uni-error);
|
||||||
|
@include is-plain($uni-error)
|
||||||
|
}
|
||||||
|
&[type=warning] {
|
||||||
|
@include is-color($uni-warning);
|
||||||
|
@include is-plain($uni-warning)
|
||||||
|
}
|
||||||
|
&[type=info] {
|
||||||
|
@include is-color($uni-info);
|
||||||
|
@include is-plain($uni-info)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* #endif */
|
||||||
24
uni_modules/uni-scss/styles/setting/_text.scss
Normal file
24
uni_modules/uni-scss/styles/setting/_text.scss
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
@mixin get-styles($k,$c) {
|
||||||
|
@if $k == size or $k == weight{
|
||||||
|
font-#{$k}:#{$c}
|
||||||
|
}@else{
|
||||||
|
#{$k}:#{$c}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $key, $child in $uni-headings {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
.uni-#{$key} {
|
||||||
|
@each $k, $c in $child {
|
||||||
|
@include get-styles($k,$c)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* #endif */
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
.container .uni-#{$key} {
|
||||||
|
@each $k, $c in $child {
|
||||||
|
@include get-styles($k,$c)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
146
uni_modules/uni-scss/styles/setting/_variables.scss
Normal file
146
uni_modules/uni-scss/styles/setting/_variables.scss
Normal file
@@ -0,0 +1,146 @@
|
|||||||
|
// @use "sass:math";
|
||||||
|
@import '../tools/functions.scss';
|
||||||
|
// 间距基础倍数
|
||||||
|
$uni-space-root: 2 !default;
|
||||||
|
// 边框半径默认值
|
||||||
|
$uni-radius-root:5px !default;
|
||||||
|
$uni-radius: () !default;
|
||||||
|
// 边框半径断点
|
||||||
|
$uni-radius: map-deep-merge(
|
||||||
|
(
|
||||||
|
0: 0,
|
||||||
|
// TODO 当前版本暂时不支持 sm 属性
|
||||||
|
// 'sm': math.div($uni-radius-root, 2),
|
||||||
|
null: $uni-radius-root,
|
||||||
|
'lg': $uni-radius-root * 2,
|
||||||
|
'xl': $uni-radius-root * 6,
|
||||||
|
'pill': 9999px,
|
||||||
|
'circle': 50%
|
||||||
|
),
|
||||||
|
$uni-radius
|
||||||
|
);
|
||||||
|
// 字体家族
|
||||||
|
$body-font-family: 'Roboto', sans-serif !default;
|
||||||
|
// 文本
|
||||||
|
$heading-font-family: $body-font-family !default;
|
||||||
|
$uni-headings: () !default;
|
||||||
|
$letterSpacing: -0.01562em;
|
||||||
|
$uni-headings: map-deep-merge(
|
||||||
|
(
|
||||||
|
'h1': (
|
||||||
|
size: 32px,
|
||||||
|
weight: 300,
|
||||||
|
line-height: 50px,
|
||||||
|
// letter-spacing:-0.01562em
|
||||||
|
),
|
||||||
|
'h2': (
|
||||||
|
size: 28px,
|
||||||
|
weight: 300,
|
||||||
|
line-height: 40px,
|
||||||
|
// letter-spacing: -0.00833em
|
||||||
|
),
|
||||||
|
'h3': (
|
||||||
|
size: 24px,
|
||||||
|
weight: 400,
|
||||||
|
line-height: 32px,
|
||||||
|
// letter-spacing: normal
|
||||||
|
),
|
||||||
|
'h4': (
|
||||||
|
size: 20px,
|
||||||
|
weight: 400,
|
||||||
|
line-height: 30px,
|
||||||
|
// letter-spacing: 0.00735em
|
||||||
|
),
|
||||||
|
'h5': (
|
||||||
|
size: 16px,
|
||||||
|
weight: 400,
|
||||||
|
line-height: 24px,
|
||||||
|
// letter-spacing: normal
|
||||||
|
),
|
||||||
|
'h6': (
|
||||||
|
size: 14px,
|
||||||
|
weight: 500,
|
||||||
|
line-height: 18px,
|
||||||
|
// letter-spacing: 0.0125em
|
||||||
|
),
|
||||||
|
'subtitle': (
|
||||||
|
size: 12px,
|
||||||
|
weight: 400,
|
||||||
|
line-height: 20px,
|
||||||
|
// letter-spacing: 0.00937em
|
||||||
|
),
|
||||||
|
'body': (
|
||||||
|
font-size: 14px,
|
||||||
|
font-weight: 400,
|
||||||
|
line-height: 22px,
|
||||||
|
// letter-spacing: 0.03125em
|
||||||
|
),
|
||||||
|
'caption': (
|
||||||
|
'size': 12px,
|
||||||
|
'weight': 400,
|
||||||
|
'line-height': 20px,
|
||||||
|
// 'letter-spacing': 0.03333em,
|
||||||
|
// 'text-transform': false
|
||||||
|
)
|
||||||
|
),
|
||||||
|
$uni-headings
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// 主色
|
||||||
|
$uni-primary: #2979ff !default;
|
||||||
|
$uni-primary-disable:lighten($uni-primary,20%) !default;
|
||||||
|
$uni-primary-light: lighten($uni-primary,25%) !default;
|
||||||
|
|
||||||
|
// 辅助色
|
||||||
|
// 除了主色外的场景色,需要在不同的场景中使用(例如危险色表示危险的操作)。
|
||||||
|
$uni-success: #18bc37 !default;
|
||||||
|
$uni-success-disable:lighten($uni-success,20%) !default;
|
||||||
|
$uni-success-light: lighten($uni-success,25%) !default;
|
||||||
|
|
||||||
|
$uni-warning: #f3a73f !default;
|
||||||
|
$uni-warning-disable:lighten($uni-warning,20%) !default;
|
||||||
|
$uni-warning-light: lighten($uni-warning,25%) !default;
|
||||||
|
|
||||||
|
$uni-error: #e43d33 !default;
|
||||||
|
$uni-error-disable:lighten($uni-error,20%) !default;
|
||||||
|
$uni-error-light: lighten($uni-error,25%) !default;
|
||||||
|
|
||||||
|
$uni-info: #8f939c !default;
|
||||||
|
$uni-info-disable:lighten($uni-info,20%) !default;
|
||||||
|
$uni-info-light: lighten($uni-info,25%) !default;
|
||||||
|
|
||||||
|
// 中性色
|
||||||
|
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色,来表现层次结构。
|
||||||
|
$uni-main-color: #3a3a3a !default; // 主要文字
|
||||||
|
$uni-base-color: #6a6a6a !default; // 常规文字
|
||||||
|
$uni-secondary-color: #909399 !default; // 次要文字
|
||||||
|
$uni-extra-color: #c7c7c7 !default; // 辅助说明
|
||||||
|
|
||||||
|
// 边框颜色
|
||||||
|
$uni-border-1: #F0F0F0 !default;
|
||||||
|
$uni-border-2: #EDEDED !default;
|
||||||
|
$uni-border-3: #DCDCDC !default;
|
||||||
|
$uni-border-4: #B9B9B9 !default;
|
||||||
|
|
||||||
|
// 常规色
|
||||||
|
$uni-black: #000000 !default;
|
||||||
|
$uni-white: #ffffff !default;
|
||||||
|
$uni-transparent: rgba($color: #000000, $alpha: 0) !default;
|
||||||
|
|
||||||
|
// 背景色
|
||||||
|
$uni-bg-color: #f7f7f7 !default;
|
||||||
|
|
||||||
|
/* 水平间距 */
|
||||||
|
$uni-spacing-sm: 8px !default;
|
||||||
|
$uni-spacing-base: 15px !default;
|
||||||
|
$uni-spacing-lg: 30px !default;
|
||||||
|
|
||||||
|
// 阴影
|
||||||
|
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5) !default;
|
||||||
|
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default;
|
||||||
|
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5) !default;
|
||||||
|
|
||||||
|
// 蒙版
|
||||||
|
$uni-mask: rgba($color: #000000, $alpha: 0.4) !default;
|
||||||
19
uni_modules/uni-scss/styles/tools/functions.scss
Normal file
19
uni_modules/uni-scss/styles/tools/functions.scss
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
// 合并 map
|
||||||
|
@function map-deep-merge($parent-map, $child-map){
|
||||||
|
$result: $parent-map;
|
||||||
|
@each $key, $child in $child-map {
|
||||||
|
$parent-has-key: map-has-key($result, $key);
|
||||||
|
$parent-value: map-get($result, $key);
|
||||||
|
$parent-type: type-of($parent-value);
|
||||||
|
$child-type: type-of($child);
|
||||||
|
$parent-is-map: $parent-type == map;
|
||||||
|
$child-is-map: $child-type == map;
|
||||||
|
|
||||||
|
@if (not $parent-has-key) or ($parent-type != $child-type) or (not ($parent-is-map and $child-is-map)){
|
||||||
|
$result: map-merge($result, ( $key: $child ));
|
||||||
|
}@else {
|
||||||
|
$result: map-merge($result, ( $key: map-deep-merge($parent-value, $child) ));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@return $result;
|
||||||
|
};
|
||||||
31
uni_modules/uni-scss/theme.scss
Normal file
31
uni_modules/uni-scss/theme.scss
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
// 间距基础倍数
|
||||||
|
$uni-space-root: 2;
|
||||||
|
// 边框半径默认值
|
||||||
|
$uni-radius-root:5px;
|
||||||
|
// 主色
|
||||||
|
$uni-primary: #2979ff;
|
||||||
|
// 辅助色
|
||||||
|
$uni-success: #4cd964;
|
||||||
|
// 警告色
|
||||||
|
$uni-warning: #f0ad4e;
|
||||||
|
// 错误色
|
||||||
|
$uni-error: #dd524d;
|
||||||
|
// 描述色
|
||||||
|
$uni-info: #909399;
|
||||||
|
// 中性色
|
||||||
|
$uni-main-color: #303133;
|
||||||
|
$uni-base-color: #606266;
|
||||||
|
$uni-secondary-color: #909399;
|
||||||
|
$uni-extra-color: #C0C4CC;
|
||||||
|
// 背景色
|
||||||
|
$uni-bg-color: #f5f5f5;
|
||||||
|
// 边框颜色
|
||||||
|
$uni-border-1: #DCDFE6;
|
||||||
|
$uni-border-2: #E4E7ED;
|
||||||
|
$uni-border-3: #EBEEF5;
|
||||||
|
$uni-border-4: #F2F6FC;
|
||||||
|
|
||||||
|
// 常规色
|
||||||
|
$uni-black: #000000;
|
||||||
|
$uni-white: #ffffff;
|
||||||
|
$uni-transparent: rgba($color: #000000, $alpha: 0);
|
||||||
62
uni_modules/uni-scss/variables.scss
Normal file
62
uni_modules/uni-scss/variables.scss
Normal file
@@ -0,0 +1,62 @@
|
|||||||
|
@import './styles/setting/_variables.scss';
|
||||||
|
// 间距基础倍数
|
||||||
|
$uni-space-root: 2;
|
||||||
|
// 边框半径默认值
|
||||||
|
$uni-radius-root:5px;
|
||||||
|
|
||||||
|
// 主色
|
||||||
|
$uni-primary: #2979ff;
|
||||||
|
$uni-primary-disable:mix(#fff,$uni-primary,50%);
|
||||||
|
$uni-primary-light: mix(#fff,$uni-primary,80%);
|
||||||
|
|
||||||
|
// 辅助色
|
||||||
|
// 除了主色外的场景色,需要在不同的场景中使用(例如危险色表示危险的操作)。
|
||||||
|
$uni-success: #18bc37;
|
||||||
|
$uni-success-disable:mix(#fff,$uni-success,50%);
|
||||||
|
$uni-success-light: mix(#fff,$uni-success,80%);
|
||||||
|
|
||||||
|
$uni-warning: #f3a73f;
|
||||||
|
$uni-warning-disable:mix(#fff,$uni-warning,50%);
|
||||||
|
$uni-warning-light: mix(#fff,$uni-warning,80%);
|
||||||
|
|
||||||
|
$uni-error: #e43d33;
|
||||||
|
$uni-error-disable:mix(#fff,$uni-error,50%);
|
||||||
|
$uni-error-light: mix(#fff,$uni-error,80%);
|
||||||
|
|
||||||
|
$uni-info: #8f939c;
|
||||||
|
$uni-info-disable:mix(#fff,$uni-info,50%);
|
||||||
|
$uni-info-light: mix(#fff,$uni-info,80%);
|
||||||
|
|
||||||
|
// 中性色
|
||||||
|
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色,来表现层次结构。
|
||||||
|
$uni-main-color: #3a3a3a; // 主要文字
|
||||||
|
$uni-base-color: #6a6a6a; // 常规文字
|
||||||
|
$uni-secondary-color: #909399; // 次要文字
|
||||||
|
$uni-extra-color: #c7c7c7; // 辅助说明
|
||||||
|
|
||||||
|
// 边框颜色
|
||||||
|
$uni-border-1: #F0F0F0;
|
||||||
|
$uni-border-2: #EDEDED;
|
||||||
|
$uni-border-3: #DCDCDC;
|
||||||
|
$uni-border-4: #B9B9B9;
|
||||||
|
|
||||||
|
// 常规色
|
||||||
|
$uni-black: #000000;
|
||||||
|
$uni-white: #ffffff;
|
||||||
|
$uni-transparent: rgba($color: #000000, $alpha: 0);
|
||||||
|
|
||||||
|
// 背景色
|
||||||
|
$uni-bg-color: #f7f7f7;
|
||||||
|
|
||||||
|
/* 水平间距 */
|
||||||
|
$uni-spacing-sm: 8px;
|
||||||
|
$uni-spacing-base: 15px;
|
||||||
|
$uni-spacing-lg: 30px;
|
||||||
|
|
||||||
|
// 阴影
|
||||||
|
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5);
|
||||||
|
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2);
|
||||||
|
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5);
|
||||||
|
|
||||||
|
// 蒙版
|
||||||
|
$uni-mask: rgba($color: #000000, $alpha: 0.4);
|
||||||
Reference in New Issue
Block a user