Skip to content

H
hello-uniapp

weixin_54239399 / hello-uniapp
与 Fork 源项目一致

从无法访问的项目Fork

通知 4
Star 1
Fork 0
H
hello-uniapp

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 500b1f00 编写于 作者: M mehaotian
浏览文件
操作

fix: uni-ui nvue 化

上级 65d5d0a7
展开全部 隐藏空白更改
内联 并排
Showing with 9672 addition and 8469 deletion
components/uni-badge/uni-badge.vue
浏览文件 @ 500b1f00
<template>
<text v-if="text" :class="inverted ? 'uni-badge-' + type + ' uni-badge--' + size + ' uni-badge-inverted' : 'uni-badge-' + type + ' uni-badge--' + size" class="uni-badge" @click="onClick()">{{ text }}</text>
<text v-if="text" :class="inverted ? 'uni-badge--' + type + ' uni-badge--' + size + ' uni-badge--' + type + '-inverted' : 'uni-badge--' + type + ' uni-badge--' + size" class="uni-badge" :style="width" @click="onClick()">{{ text }}</text>
</template>
<script>
......@@ -18,82 +18,100 @@
type: String,
default: ''
},
size: { // small.normal
size: {
// small.normal
type: String,
default: 'normal'
}
},
data() {
return {
width: `display: inline-block;width: ${this.text.length * 15 + 25}rpx`
};
},
methods: {
onClick() {
this.$emit('click')
this.$emit('click');
}
}
}
};
</script>
<style>
@charset "UTF-8";
<style scoped>
.uni-badge {
font-family: 'Helvetica Neue', Helvetica, sans-serif;
box-sizing: border-box;
font-size: 12px;
line-height: 1;
display: inline-block;
padding: 3px 6px;
/* #ifndef APP-PLUS */
display: flex;
/* #endif */
flex-direction: row;
height: 40rpx;
line-height: 40rpx;
color: #333;
border-radius: 100px;
background-color: #f1f1f1
background-color: #f1f1f1;
background-color: transparent;
text-align: center;
font-family: 'Helvetica Neue', Helvetica, sans-serif;
font-size: 12px;
padding: 0;
}
.uni-badge.uni-badge-inverted {
.uni-badge--inverted {
padding: 0 5px 0 0;
color: #f1f1f1;
}
.uni-badge--default {
color: #333;
background-color: #f1f1f1;
}
.uni-badge--default-inverted {
color: #999;
background-color: transparent
background-color: transparent;
}
.uni-badge-primary {
.uni-badge--primary {
color: #fff;
background-color: #007aff
background-color: #007aff;
}
.uni-badge-primary.uni-badge-inverted {
.uni-badge--primary-inverted {
color: #007aff;
background-color: transparent
background-color: transparent;
}
.uni-badge-success {
.uni-badge--success {
color: #fff;
background-color: #4cd964
background-color: #4cd964;
}
.uni-badge-success.uni-badge-inverted {
.uni-badge--success-inverted {
color: #4cd964;
background-color: transparent
background-color: transparent;
}
.uni-badge-warning {
.uni-badge--warning {
color: #fff;
background-color: #f0ad4e
background-color: #f0ad4e;
}
.uni-badge-warning.uni-badge-inverted {
.uni-badge--warning-inverted {
color: #f0ad4e;
background-color: transparent
background-color: transparent;
}
.uni-badge-error {
.uni-badge--error {
color: #fff;
background-color: #dd524d
background-color: #dd524d;
}
.uni-badge-error.uni-badge-inverted {
.uni-badge--error-inverted {
color: #dd524d;
background-color: transparent
background-color: transparent;
}
.uni-badge--small {
transform: scale(.8);
transform-origin: center center
transform: scale(0.8);
transform-origin: center center;
}
</style>
\ No newline at end of file
components/uni-calendar/uni-calendar-item.vue
浏览文件 @ 500b1f00
......@@ -2,26 +2,43 @@
<view>
<block v-for="(weeks, week) in canlender.weeks" :key="week">
<view class="uni-calender__body-date-week">
<block v-for="(day, index) in weeks" :key="index">
<view :class="{
<view v-for="(day, index) in weeks" :key="index" class="uni-calender__date" :class="{
'uni-calender__disable': canlender.month !== day.month || day.disable,
'uni-calender__date-current':
((day.date == canlender.date && !day.checked) || day.multipleBegin || day.multipleEnd) && canlender.month == day.month && !day.disable,
'uni-calender__lunar': lunar,
'uni-calender__date-lunar': lunar,
'uni-calender__active': !day.isDay,
}" @tap="selectDays(week, index, canlender.month === day.month, day.disable, canlender.lunar)">
<view :class="{ 'uni-calender_check': day.checked, 'calender_check-begin': day.multipleBegin, 'calender_check-end': day.multipleEnd }" class="uni-calender_check-bg" :key="index"></view>
<view class="uni-calender__circle-box" :class="{
'uni-calender__circle-box-current':
((day.date == canlender.date && !day.checked) || day.multipleBegin || day.multipleEnd) && canlender.month == day.month && !day.disable,
'uni-calender__multiple': day.multipleBegin || day.multipleEnd,
}">
<text class="uni-calender__circle-box-text" :class="{
'uni-calender__disable': canlender.month !== day.month || day.disable,
'uni-calender__is-day': day.isDay,
'uni-calender__multiple': day.multipleBegin || day.multipleEnd,
'uni-calender__multiple-box': day.checked
}" class="uni-calender__date" @tap="selectDays(week, index, canlender.month === day.month, day.disable, canlender.lunar)">
<view class="uni-calender__circle-box">
{{ day.date }}
<view v-if="lunar" class="uni-calender__lunar">{{ day.lunar }}</view>
<view v-if="day.have" class="uni-calender__data-circle" />
<view v-if="day.have && !lunar" class="uni-calender__lunar">{{ day.clockinfo.info }}</view>
</view>
<view :class="{ 'uni-calender_check': day.checked, 'calender_check-begin': day.multipleBegin, 'calender_check-end': day.multipleEnd }" class="uni-calender_check-bg" />
'uni-calender__date-current':
((day.date == canlender.date && !day.checked) || day.multipleBegin || day.multipleEnd) && canlender.month == day.month && !day.disable,
'uni-calender__multiple-box': day.checked
}">{{ day.date }}</text>
<text v-if="lunar" class="uni-calender__lunar" :class="{
'uni-calender__lunar-disable': canlender.month !== day.month || day.disable,
'uni-calender__lunar-is-day': day.isDay,
'uni-calender__lunar-date-current':
((day.date == canlender.date && !day.checked) || day.multipleBegin || day.multipleEnd) && canlender.month == day.month && !day.disable,
'uni-calender__lunar-multiple-box': day.checked
}">{{ day.lunar }}</text>
<text v-if="day.have" class="uni-calender__data-circle" />
<text v-if="day.have && !lunar" class="uni-calender__lunar" :class="{
'uni-calender__lunar-disable': canlender.month !== day.month || day.disable,
'uni-calender__lunar-is-day': day.isDay,
'uni-calender__lunar-date-current':
((day.date == canlender.date && !day.checked) || day.multipleBegin || day.multipleEnd) && canlender.month == day.month && !day.disable,
'uni-calender__lunar-multiple-box': day.checked
}">{{ day.clockinfo.info }}</text>
</view>
</block>
</view>
</view>
</block>
</view>
......@@ -63,136 +80,144 @@
}
</script>
<style>
@charset "UTF-8";
<style scoped>
.uni-calender__body-date-week {
/* #ifndef APP-NVUE */
display: flex;
width: 100%;
border-bottom: 1px #f5f5f5 solid
}
.uni-calender__body-date-week:last-child {
border: none
}
.uni-calender__body-date-week .uni-calender__date {
/* #endif */
flex: 1;
flex-direction: row;
border-bottom-color: #F5F5F5;
border-bottom-style: solid;
border-bottom-width: 1px;
justify-content: space-around;
}
/* 日期的样式
*/
.uni-calender__date {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
flex-direction: column;
position: relative;
width: 100%;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
color: #000;
background: #fff;
box-sizing: border-box;
padding: 10upx 0;
line-height: 1.5;
z-index: 2
background-color: #fff;
padding: 10rpx 0;
}
.uni-calender__body-date-week .uni-calender__date .uni-calender__lunar {
font-size: 20upx;
.uni-calender__lunar {
font-size: 20rpx;
color: #000;
line-height: 1.2
}
.uni-calender__body-date-week .uni-calender__date .uni-calender__circle-box {
.uni-calender__circle-box {
/* #ifndef APP-NVUE */
display: flex;
z-index: 1;
/* #endif */
flex-direction: column;
justify-content: center;
align-items: center;
width: 80upx;
height: 80upx;
flex-shrink: 0;
border-radius: 10upx;
line-height: 1.2
width: 80rpx;
height: 80rpx;
border-radius: 10rpx;
}
.uni-calender__body-date-week .uni-calender__date.uni-calender__disable {
color: #f1f1f1
.uni-calender__circle-box-text {
font-size: 30rpx;
}
.uni-calender__body-date-week .uni-calender__date.uni-calender__disable .uni-calender__lunar {
color: #f1f1f1
/* // 本月禁止的样式
*/
.uni-calender__disable {
color: #f1f1f1;
}
.uni-calender__body-date-week .uni-calender__date.uni-calender__is-day {
color: #fd2e32
.uni-calender__lunar-disable {
color: #f1f1f1;
}
.uni-calender__body-date-week .uni-calender__date.uni-calender__is-day .uni-calender__lunar {
color: #fd2e32
}
.uni-calender__body-date-week .uni-calender__date.uni-calender__date-current {
color: #fff;
box-sizing: border-box
.uni-calender__is-day {
color: #fd2e32;
}
.uni-calender__body-date-week .uni-calender__date.uni-calender__date-current .uni-calender__circle-box {
background: #fd2e32
.uni-calender__lunar-is-day {
color: #fd2e32;
}
.uni-calender__body-date-week .uni-calender__date.uni-calender__date-current.uni-calender__active {
color: #fff
/* // 当前选中
*/
.uni-calender__date-current {
color: #fff;
}
.uni-calender__body-date-week .uni-calender__date.uni-calender__date-current.uni-calender__active .uni-calender__circle-box {
background: #000
.uni-calender__lunar-date-current {
color: #fff;
}
.uni-calender__body-date-week .uni-calender__date.uni-calender__date-current.uni-calender__multiple .uni-calender__circle-box {
border-radius: 50%;
background: #fd2e32
.uni-calender__circle-box-current {
background-color: #fd2e32;
}
.uni-calender__body-date-week .uni-calender__date.uni-calender__date-current .uni-calender__lunar {
color: #fff
.uni-calender__multiple {
/* #ifndef APP-NVUE */
z-index: 1;
/* #endif */
border-radius: 50px;
background-color: #fd2e32;
}
.uni-calender__body-date-week .uni-calender__date.uni-calender__multiple-box {
color: #fff
.uni-calender__multiple-box {
color: #fff;
}
.uni-calender__body-date-week .uni-calender__date.uni-calender__multiple-box .uni-calender__lunar {
color: #fff
.uni-calender__lunar-multiple-box {
color: #fff;
}
.uni-calender__body-date-week .uni-calender__date .uni-calender__data-circle {
.uni-calender__data-circle {
position: absolute;
top: 5upx;
right: 5upx;
top: 5rpx;
right: 5rpx;
width: 10rpx;
height: 10rpx;
border-radius: 50%;
background: #ff5a5f;
border: 1px #fff solid;
z-index: 2
background-color: #ff5a5f;
border-color: #fff;
border-style: solid;
border-width: 1px;
z-index: 2;
}
.uni-calender__body-date-week .uni-calender__date .uni-calender_check-bg {
.uni-calender_check-bg {
position: absolute;
top: 10upx;
bottom: 10upx;
top: 10rpx;
bottom: 10rpx;
left: 0;
right: 0;
z-index: -1
}
.uni-calender__body-date-week .uni-calender__date .uni-calender_check-bg.uni-calender_check {
background: #ffd3d3
.uni-calender_check {
background-color: #ffd3d3;
border-color: #ffd3d3;
border-style: solid;
border-width: 1px;
}
.uni-calender__body-date-week .uni-calender__date .uni-calender_check-bg.calender_check-begin {
left: 20upx;
border-top-left-radius: 100upx;
border-bottom-left-radius: 100upx
.calender_check-begin {
left: 20rpx;
border-top-left-radius: 100rpx;
border-bottom-left-radius: 100rpx;
}
.uni-calender__body-date-week .uni-calender__date .uni-calender_check-bg.calender_check-end {
right: 20upx;
border-top-right-radius: 100upx;
border-bottom-right-radius: 100upx
.calender_check-end {
right: 20rpx;
border-top-right-radius: 100rpx;
border-bottom-right-radius: 100rpx;
}
</style>
\ No newline at end of file
components/uni-calendar/uni-calendar.vue
浏览文件 @ 500b1f00
<template>
<view>
<view v-if="maskShow && !insert" :class="{ 'ani-mask-show': aniMaskShow }" class="uni-calendar__mask" />
<view v-if="maskShow || insert" :class="{ 'ani-calendar-show': aniMaskShow, 'uni-calendar__static': insert }" class="uni-calendar__box">
<view v-if="maskShow && !insert" :class="{ 'ani-mask-show': aniMaskShow }" class="uni-calendar__mask" @touchmove.stop.prevent="clear" />
<view v-if="maskShow || insert" class="uni-calendar__box" :class="{ 'uni-calendar__static': insert ,'ani-calendar-show': aniMaskShow}">
<view v-if="!insert" class="uni-calendar__nav">
<view class="uni-calendar__nav-item" @click="close">取消</view>
<view class="uni-calendar__nav-item" @click="confirm">确认</view>
<view class="uni-calendar__nav-item" @click="close"><text class="uni-calendar__nav-item-text">取消</text></view>
<view class="uni-calendar__nav-item" @click="confirm"><text class="uni-calendar__nav-item-text">确认</text></view>
</view>
<view class="uni-calendar__wrapper">
<view class="uni-calenda__content">
<view class="uni-calendar__panel">
<view class="uni-calendar__date-befor" @tap="dataBefor(-1, 'month')"><text class="iconfont icon-jiantou" /></view>
<view class="uni-calendar__date-befor" @tap="dataBefor(-1, 'month')">
<uni-icons type="arrowleft" size="20"></uni-icons>
</view>
<view class="uni-calendar__panel-box">
<view>{{ canlender.year }}年</view>
<view>{{ canlender.month }}月</view>
<text class="uni-calendar__panel-box-text">{{ canlender.year||'' }}年</text>
<text class="uni-calendar__panel-box-text">{{ canlender.month||'' }}月</text>
</view>
<view class="uni-calendar__date-after uni-calendar__rollback" @tap="dataBefor(1, 'month')">
<uni-icons type="arrowleft" size="20"></uni-icons>
</view>
<view class="uni-calendar__date-after uni-calendar__rollback" @tap="dataBefor(1, 'month')"><text class="iconfont icon-jiantou " /></view>
<view class="uni-calendar__backtoday" @tap="backtoday">回到今天</view>
<text class="uni-calendar__backtoday" @tap="backtoday">回到今天</text>
</view>
<view v-if="isLunar" class="uni-calendar__day-detail">
<view>{{ canlender.year + '年' + canlender.month + '月' + canlender.date + '日 （' + canlender.lunar.astro + ')' }}</view>
<view>
{{ canlender.lunar.gzYear + '年' + canlender.lunar.gzMonth + '月' + canlender.lunar.gzDay + '日 (' + canlender.lunar.Animal + '年)' }}
{{ canlender.lunar.IMonthCn + canlender.lunar.IDayCn }} {{ canlender.lunar.isTerm ? canlender.lunar.Term : '' }}
</view>
<text class="uni-calendar__day-detail-text">{{ canlender.year + '年' + canlender.month + '月' + canlender.date + '日 （' + canlender.lunar.astro + ')' }}</text>
<text class="uni-calendar__day-detail-text"> {{ canlender.lunar.gzYear + '年' + canlender.lunar.gzMonth + '月' + canlender.lunar.gzDay + '日 (' + canlender.lunar.Animal + '年)' + canlender.lunar.IMonthCn + canlender.lunar.IDayCn + (canlender.lunar.isTerm ? canlender.lunar.Term : '') }}</text>
</view>
<view class="uni-calendar__header">
<view class="uni-calendar__week">日</view>
<view class="uni-calendar__week">一</view>
<view class="uni-calendar__week">二</view>
<view class="uni-calendar__week">三</view>
<view class="uni-calendar__week">四</view>
<view class="uni-calendar__week">五</view>
<view class="uni-calendar__week">六</view>
<text class="uni-calendar__week">日</text>
<text class="uni-calendar__week">一</text>
<text class="uni-calendar__week">二</text>
<text class="uni-calendar__week">三</text>
<text class="uni-calendar__week">四</text>
<text class="uni-calendar__week">五</text>
<text class="uni-calendar__week">六</text>
</view>
<uni-calendar-item :canlender="canlender" :lunar="isLunar" @selectDays="selectDays" />
</view>
......@@ -43,10 +44,12 @@
<script>
import CALENDAR from './calendar.js'
import uniCalendarItem from './uni-calendar-item.vue'
import uniIcons from '@/components/uni-icons/uni-icons.vue'
export default {
name: 'UniCalendar',
components: {
uniCalendarItem
uniCalendarItem,
uniIcons
},
props: {
/**
......@@ -293,9 +296,11 @@
// this.multiple = this.multiple === 0 ? 1 : 0;
if (this.multiple === 0) {
console.log('开始选择');
this.multipleDates.begin = time
this.multiple = 1
} else if (this.multiple === 1) {
console.log('已经选择');
this.multiple = 2
if (this.multipleDates.data) {
this.multipleDates.data = []
......@@ -310,6 +315,7 @@
this.multipleDates.begin = time
}
} else {
console.log('再次选择');
this.multiple = 0
this.multipleDates.data = []
this.multipleDates.begin = ''
......@@ -484,7 +490,11 @@
dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期
break
case 'month':
dd.setMonth(dd.getMonth() + AddDayCount) // 获取AddDayCount天后的日期
if (dd.getDate() === 31) {
dd.setDate(dd.getDate() + AddDayCount)
} else {
dd.setMonth(dd.getMonth() + AddDayCount) // 获取AddDayCount天后的日期
}
break
case 'year':
dd.setFullYear(dd.getFullYear() + AddDayCount) // 获取AddDayCount天后的日期
......@@ -510,151 +520,181 @@
}
},
geDateAll(begin, end) {
console.log(begin, end);
var arr = []
var ab = begin.split('-')
var ae = end.split('-')
var db = new Date()
db.setUTCFullYear(ab[0], ab[1] - 1, ab[2])
db.setFullYear(ab[0], ab[1] - 1, ab[2])
var de = new Date()
de.setUTCFullYear(ae[0], ae[1] - 1, ae[2])
de.setFullYear(ae[0], ae[1] - 1, ae[2])
var unixDb = db.getTime() - 24 * 60 * 60 * 1000
var unixDe = de.getTime() - 24 * 60 * 60 * 1000
console.log(unixDb, unixDe);
for (var k = unixDb; k <= unixDe;) {
// console.log((new Date(parseInt(k))).format());
k = k + 24 * 60 * 60 * 1000
console.log(k);
arr.push(this.getDate(new Date(parseInt(k))))
}
console.log(arr);
return arr
}
}
}
</script>
<style>
@charset "UTF-8";
@font-face {
font-family: iconfont;
src: url(//at.alicdn.com/t/font_989023_qdgy7euvg4.eot?t=1545961121132);
src: url(//at.alicdn.com/t/font_989023_qdgy7euvg4.eot?t=1545961121132#iefix) format("embedded-opentype"), url("data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAPcAAsAAAAABiAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFY8fEf5Y21hcAAAAYAAAABLAAABcOcutbxnbHlmAAABzAAAACgAAAAoOZ2GtGhlYWQAAAH0AAAALwAAADYTtoNAaGhlYQAAAiQAAAAcAAAAJAfeA4NobXR4AAACQAAAAAgAAAAICAAAAGxvY2EAAAJIAAAABgAAAAYAFAAAbWF4cAAAAlAAAAAeAAAAIAENABJuYW1lAAACcAAAAUUAAAJtPlT+fXBvc3QAAAO4AAAAIQAAADLf6deseJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGByesT1jY27438AQw9zI0AAUZgTJAQDeIAvweJxjYGBgZWBgYAZiHSBmYWBgDGFgZAABP6AoI1icmYELLM7CoARWwwISf8b2/z+MBPJZwCQDIxvDKOABkzJQHjisIJiBEQA3lgmBAAABAAD/gAMAA4EABQAACQE1CQE1AQACAP6IAXgBgP4AiAF4AXiIAAB4nGNgZGBgAOLdZzma4vltvjJwszCAwA3v+QsR9P8GFgbmRiCXg4EJJAoAMzgKmgB4nGNgZGBgbvjfwBDDwgACQJKRARUwAQBHCAJrBAAAAAQAAAAAAAAAABQAAHicY2BkYGBgYmBjANEgFgMDFxAyMPwH8xkACS0BIAAAeJxlj01OwzAQhV/6B6QSqqhgh+QFYgEo/RGrblhUavdddN+mTpsqiSPHrdQDcB6OwAk4AtyAO/BIJ5s2lsffvHljTwDc4Acejt8t95E9XDI7cg0XuBeuU38QbpBfhJto41W4Rf1N2MczpsJtdGF5g9e4YvaEd2EPHXwI13CNT+E69S/hBvlbuIk7/Aq30PHqwj7mXle4jUcv9sdWL5xeqeVBxaHJIpM5v4KZXu+Sha3S6pxrW8QmU4OgX0lTnWlb3VPs10PnIhVZk6oJqzpJjMqt2erQBRvn8lGvF4kehCblWGP+tsYCjnEFhSUOjDFCGGSIyujoO1Vm9K+xQ8Jee1Y9zed0WxTU/3OFAQL0z1xTurLSeTpPgT1fG1J1dCtuy56UNJFezUkSskJe1rZUQuoBNmVXjhF6XNGJPyhnSP8ACVpuyAAAAHicY2BigAAuBuyAiZGJkZmBIyszMa8kv9SEgQEAGD0DTAAAAA==") format("woff"), url(//at.alicdn.com/t/font_989023_qdgy7euvg4.ttf?t=1545961121132) format("truetype"), url(//at.alicdn.com/t/font_989023_qdgy7euvg4.svg?t=1545961121132#iconfont) format("svg")
}
.iconfont {
font-family: iconfont !important;
font-size: 32upx;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
.icon-jiantou:before {
content: '\e606'
}
<style scoped>
.uni-calendar__mask {
position: fixed;
bottom: 0;
top: 0;
width: 100%;
background: rgba(0, 0, 0, .4);
transition: all .3s;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.4);
transition-property: opacity;
transition-duration: 0.3s;
opacity: 0;
z-index: 998
}
.uni-calendar__mask.ani-mask-show {
opacity: 1
.ani-mask-show {
opacity: 1;
}
.header {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: center;
align-items: center;
position: relative;
height: 100upx;
background: #fff;
z-index: 999;
font-size: 32upx
height: 100rpx;
background-color: #fff;
/* background: $uni-bg-color-grey;
*/
font-size: 32rpx;
}
.uni-calendar__box {
position: fixed;
bottom: 0;
z-index: 999;
width: 100%;
box-sizing: border-box;
transition: all .3s;
transform: translateY(100%)
left: 0;
right: 0;
transition-property: transform;
transition-duration: 0.3s;
transform: translateY(100%);
}
.uni-calendar__box.ani-calendar-show {
transform: translateY(0)
.ani-calendar-show {
transform: translateY(0%);
}
.uni-calendar__box.uni-calendar__static {
position: static;
transform: translateY(0)
.uni-calendar__fixed {}
.uni-calendar__static {
position: relative;
transform: translateY(0%);
}
.uni-calendar__box .uni-calendar__nav {
.uni-calendar__nav {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: space-between;
height: 100upx;
border-bottom: 1px #f5f5f5 solid;
background: #f5f5f5;
padding: 0 10upx
align-items: center;
height: 100rpx;
border-bottom-color: #F5F5F5;
border-bottom-style: solid;
border-bottom-width: 1px;
background-color: #f5f5f5;
padding: 0 10rpx;
}
.uni-calendar__box .uni-calendar__nav .uni-calendar__nav-item {
.uni-calendar__nav-item {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: center;
align-items: center;
width: 100upx;
height: 100upx;
color: #333
width: 100rpx;
height: 100rpx;
}
.uni-calendar__nav-item-text {
font-size: 30rpx;
color: #333;
}
.uni-calendar__wrapper {
width: 100%;
box-sizing: border-box;
flex: 1;
font-size: 26rpx;
background: #fff;
transition: all .3s
background-color: #fff;
}
.uni-calendar__wrapper .uni-calenda__content .uni-calendar__panel {
position: relative;
.uni-calenda__content {}
.uni-calendar__panel {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
position: relative;
align-items: center;
justify-content: center;
font-size: 28rpx;
height: 100rpx
height: 100rpx;
}
.uni-calendar__date-after {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: center;
align-items: center;
height: 80rpx;
width: 80rpx;
text-align: center;
line-height: 80rpx;
}
.uni-calendar__wrapper .uni-calenda__content .uni-calendar__panel .uni-calendar__date-after,
.uni-calendar__wrapper .uni-calenda__content .uni-calendar__panel .uni-calendar__date-befor {
.uni-calendar__date-befor {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: center;
align-items: center;
height: 80rpx;
width: 80rpx;
text-align: center;
line-height: 80rpx
line-height: 80rpx;
}
.uni-calendar__wrapper .uni-calenda__content .uni-calendar__panel .uni-calendar__date-after.uni-calendar__rollback,
.uni-calendar__wrapper .uni-calenda__content .uni-calendar__panel .uni-calendar__date-befor.uni-calendar__rollback {
transform: rotate(180deg)
.uni-calendar__rollback {
transform: rotate(180deg);
}
.uni-calendar__wrapper .uni-calenda__content .uni-calendar__panel .uni-calendar__panel-box {
.uni-calendar__panel-box {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: center;
align-items: center;
width: 200upx
width: 200rpx;
}
.uni-calendar__wrapper .uni-calenda__content .uni-calendar__panel .uni-calendar__backtoday {
.uni-calendar__panel-box-text {
font-size: 30rpx;
}
.uni-calendar__backtoday {
position: absolute;
right: 0;
top: 25rpx;
......@@ -662,38 +702,51 @@
padding-left: 20rpx;
height: 50rpx;
line-height: 50rpx;
border: 1px rgba(253, 46, 50, .5) solid;
border-right: none;
border-right-color: rgba(0, 0, 0, 0.5);
border-right-style: solid;
border-right-width: 1px;
border-right-width: 0;
font-size: 24rpx;
border-top-left-radius: 50rpx;
border-bottom-left-radius: 50rpx;
color: rgba(253, 46, 50, .7);
background: rgba(241, 233, 233, .4)
color: rgba(253, 46, 50, 0.7);
background-color: rgba(241, 233, 233, 0.4);
}
.uni-calendar__wrapper .uni-calenda__content .uni-calendar__day-detail {
padding: 20upx;
padding-left: 30upx;
border-top: 1px #f5f5f5 solid
.uni-calendar__day-detail {
padding: 20rpx;
padding-left: 30rpx;
border-top-color: #f5f5f5;
border-top-style: solid;
border-top-width: 1px;
}
.uni-calendar__wrapper .uni-calenda__content .uni-calendar__header {
.uni-calendar__day-detail-text {
font-size: 30rpx;
}
.uni-calendar__header {
/* #ifndef APP-NVUE */
display: flex;
font-size: 28upx;
border-top: 1px #f5f5f5 solid
/* #endif */
flex-direction: row;
font-size: 28rpx;
border-top-color: #f5f5f5;
border-top-style: solid;
border-top-width: 1px;
}
.uni-calendar__wrapper .uni-calenda__content .uni-calendar__header .uni-calendar__week {
width: 100%;
.uni-calendar__week {
flex: 1;
text-align: center;
line-height: 80rpx;
color: #333;
font-weight: 700
font-weight: bold;
font-size: 24rpx;
}
.uni-calendar__wrapper .uni-calenda__content .uni-calendar__body {
display: flex;
.uni-calendar__body {
flex-wrap: wrap;
font-size: 28upx
font-size: 28rpx;
}
</style>
\ No newline at end of file
components/uni-card/uni-card.vue
浏览文件 @ 500b1f00
<template>
<view :class="{ 'uni-card--full': isFull === true || isFull === 'true', 'uni-card--shadow': isShadow === true || isShadow === 'true' }" class="uni-card" @click="onClick">
<view v-if="mode === 'style'" class="uni-card__thumbnailimage">
<image :src="thumbnail" mode="aspectFill" />
<view v-if="title" class="uni-card__thumbnailimage-title">{{ title }}</view>
<view class="uni-card__thumbnailimage-box">
<image class="uni-card__thumbnailimage-image" :src="thumbnail" mode="aspectFill" />
</view>
<view v-if="title" class="uni-card__thumbnailimage-title"><text class="uni-card__thumbnailimage-title-text">{{ title }}</text></view>
</view>
<view v-if="mode === 'title'" class="uni-card__title">
<view class="uni-card__title-header">
<image :src="thumbnail" mode="aspectFill" />
<image class="uni-card__title-header-image" :src="thumbnail" mode="scaleToFill" />
</view>
<view class="uni-card__title-content">
<view class="uni-card__title-content-title">{{ title }}</view>
<view class="uni-card__title-content-extra">{{ extra }}</view>
<text class="uni-card__title-content-title">{{ title }}</text>
<text class="uni-card__title-content-extra">{{ extra }}</text>
</view>
</view>
<!-- 标题 -->
......@@ -18,18 +20,18 @@
<view v-if="thumbnail" class="uni-card__header-extra-img-view">
<image :src="thumbnail" class="uni-card__header-extra-img" />
</view>
<view class="uni-card__header-title-text">{{ title }}</view>
<view v-if="extra" class="uni-card__header-extra-text">{{ extra }}</view>
<text class="uni-card__header-title-text">{{ title }}</text>
<text v-if="extra" class="uni-card__header-extra-text">{{ extra }}</text>
</view>
<!-- 内容 -->
<view class="uni-card__content uni-card__content--pd">
<view v-if="mode === 'style' && extra" class="uni-card__content-extra">{{ extra }}</view>
<view v-if="mode === 'style' && extra" class=""><text class="uni-card__content-extra">{{ extra }}</text></view>
<slot />
</view>
<!-- 底部 -->
<view v-if="note" class="uni-card__footer">
<slot name="footer">
<text>{{ note }}</text>
<text class="uni-card__footer-text">{{ note }}</text>
</slot>
</view>
</view>
......@@ -79,176 +81,210 @@
}
</script>
<style>
@charset "UTF-8";
<style scoped>
.uni-card {
margin-left: 24upx;
margin-right: 24upx;
background: #fff;
box-shadow: none;
position: relative;
/* #ifndef APP-NVUE */
display: flex;
flex: 1;
/* #endif */
margin-left: 24rpx;
margin-right: 24rpx;
background-color: #ffffff;
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
position: relative;
flex-direction: column;
border: 1px #ddd solid;
border-radius: 6upx;
overflow: hidden
border-color: #ddd;
border-style: solid;
border-width: 1px;
border-radius: 6rpx;
overflow: hidden;
}
.uni-card__thumbnailimage {
position: relative;
height: 300upx
flex-direction: column;
justify-content: center;
height: 300rpx;
overflow: hidden;
}
.uni-card__thumbnailimage image {
width: 100%;
height: 100%
.uni-card__thumbnailimage-box {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
flex-direction: row;
overflow: hidden;
}
.uni-card__thumbnailimage-image {
flex: 1;
}
.uni-card__thumbnailimage-title {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
position: absolute;
bottom: 0;
padding: 15upx 20upx;
font-size: 32upx;
width: 100%;
color: #fff
left: 0;
right: 0;
flex-direction: row;
padding: 16rpx 24rpx;
background-color: rgba(0, 0, 0, 0.4);
}
.uni-card__thumbnailimage-title-text {
flex: 1;
font-size: 32rpx;
color: #fff;
}
.uni-card__title {
/* #ifndef APP-NVUE */
display: flex;
padding: 20upx;
border-bottom: 1px #f5f5f5 solid
/* #endif */
flex-direction: row;
padding: 20rpx;
border-bottom-color: #F5F5F5;
border-bottom-style: solid;
border-bottom-width: 1px;
}
.uni-card__title-header {
flex-shrink: 0;
width: 80upx;
height: 80upx;
width: 80rpx;
height: 80rpx;
overflow: hidden;
border-radius: 10upx
border-radius: 10rpx;
/* image {
*/
/* width: 100%;
*/
/* height: 100%;
*/
/* }
*/
}
.uni-card__title-header image {
width: 100%;
height: 100%
.uni-card__title-header-image {
width: 80rpx;
height: 80rpx;
}
.uni-card__title-content {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: space-between;
padding-left: 20upx;
height: 80upx;
overflow: hidden
padding-left: 20rpx;
height: 80rpx;
overflow: hidden;
}
.uni-card__title-content-title {
font-size: 30upx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
font-size: 30rpx;
lines: 1;
}
.uni-card__title-content-extra {
font-size: 26upx;
font-size: 26rpx;
color: #999;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.uni-card__header {
position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
position: relative;
flex-direction: row;
padding: 16upx;
align-items: center
padding: 24rpx;
align-items: center;
border-bottom-color: #F5F5F5;
border-bottom-style: solid;
border-bottom-width: 1px;
}
.uni-card__header:after {
position: absolute;
bottom: 0;
right: 0;
left: 0;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #e5e5e5
}
.uni-card__header {}
.uni-card__header-title {
flex: 1;
margin-right: 16upx;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
margin-right: 16rpx;
justify-content: flex-start;
align-items: center
align-items: center;
}
.uni-card__header-title-text {
font-size: 32upx;
font-size: 32rpx;
flex: 1;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden
lines: 1;
}
.uni-card__header-extra-img-view {
display: flex
}
.uni-card__header-extra {}
.uni-card__header-extra-img-view {}
.uni-card__header-extra-img {
height: 40upx;
width: 40upx;
margin-right: 16upx
height: 40rpx;
width: 40rpx;
margin-right: 16rpx;
}
.uni-card__header-extra-text {
flex: 0 0 auto;
flex: 1;
width: 30%;
margin-left: 16upx;
font-size: 28upx;
margin-left: 16rpx;
font-size: 28rpx;
text-align: right;
color: #666;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden
lines: 1;
}
.uni-card__content {
color: #555
color: #555;
}
.uni-card__content--pd {
padding: 16upx
padding: 24rpx;
}
.uni-card__content-extra {
padding-bottom: 20upx;
color: #999
font-size: 28rpx;
padding-bottom: 20rpx;
color: #999;
}
.uni-card__footer {
padding: 20upx;
color: #999;
font-size: 24upx;
border-top: 1px #f5f5f5 solid
justify-content: space-between;
padding: 20rpx;
border-top-color: #F5F5F5;
border-top-style: solid;
border-top-width: 1px;
}
.uni-card--shadow {
border: 1px #ddd solid;
box-shadow: 0 1px 2px rgba(0, 0, 0, .2)
.uni-card__footer-text {
color: #999;
font-size: 28rpx;
}
.uni-card--shadow:after {
border: none
.uni-card--shadow {
border-color: #ddd;
border-style: solid;
border-width: 1px;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
}
.uni-card--full {
margin: 0;
border-left: none;
border-right: none;
border-radius: 0
border-radius: 0;
}
</style>
\ No newline at end of file
components/uni-collapse-item/uni-collapse-item.vue
浏览文件 @ 500b1f00
<template>
<view :class="['uni-collapse-cell', { 'uni-collapse-cell--disabled': disabled, 'uni-collapse-cell--open': isOpen }]" :hover-class="disabled ? '' : 'uni-collapse-cell--hover'">
<view class="uni-collapse-cell__title header" @click="onClick">
<view v-if="thumb" class="uni-collapse-cell__title-extra">
<image :src="thumb" class="uni-collapse-cell__title-img" />
</view>
<view class="uni-collapse-cell__title-inner">
<view class="uni-collapse-cell__title-text">{{ title }}</view>
</view>
<view :class="{ 'uni-active': isOpen, 'uni-collapse-cell--animation': showAnimation === true }" class="uni-collapse-cell__title-arrow">
<uni-icons color="#bbb" size="20" type="arrowdown" />
</view>
<view :class="{ 'uni-collapse-cell--disabled': disabled,'uni-collapse-cell--notdisabled': !disabled, 'uni-collapse-cell--open': isOpen,'uni-collapse-cell--hide':!isOpen }" class="uni-collapse-cell">
<view class="uni-collapse-cell__title" @click="onClick">
<image v-if="thumb" :src="thumb" class="uni-collapse-cell__title-img" />
<text class="uni-collapse-cell__title-text">{{ title }}</text>
<uni-icons :class="{ 'uni-collapse-cell__title-arrow-active': isOpen, 'uni-collapse-cell--animation': showAnimation === true }" class="uni-collapse-cell__title-arrow" color="#bbb" size="20" type="arrowdown" />
</view>
<view :style="{ height: isOpen ? 'auto' : '0px' }" class="uni-collapse-cell__content">
<view :class="{ 'uni-collapse-cell--animation': showAnimation === true }" :style="{ transform: isOpen ? 'translateY(0px)' : 'translateY(-50%)','-webkit-transform' : isOpen ? 'translateY(0px)' : 'translateY(-50%)' }">
<view :class="{'uni-collapse-cell__content--hide':!isOpen}" class="uni-collapse-cell__content">
<view :class="{ 'uni-collapse-cell--animation': showAnimation === true }" class="uni-collapse-cell__wrapper" :style="{'transform':isOpen?'translateY(0)':'translateY(-50%)','-webkit-transform':isOpen?'translateY(0)':'translateY(-50%)'}">
<slot />
</view>
</view>
......@@ -20,7 +14,7 @@
</template>
<script>
import uniIcons from '../uni-icons/uni-icons.vue'
import uniIcons from '@/components/uni-icons/uni-icons.vue'
export default {
name: 'UniCollapseItem',
components: {
......@@ -39,7 +33,7 @@
},
disabled: {
// 是否禁用
type: [Boolean, String],
type: Boolean,
default: false
},
showAnimation: {
......@@ -49,7 +43,7 @@
},
open: {
// 是否展开
type: [Boolean, String],
type: Boolean,
default: false
},
thumb: {
......@@ -84,6 +78,7 @@
},
methods: {
onClick() {
console.log(this.disabled);
if (this.disabled) {
return
}
......@@ -103,101 +98,100 @@
}
</script>
<style>
@charset "UTF-8";
<style scoped>
.uni-collapse-cell {
position: relative
flex-direction: column;
border-color: #e5e5e5;
border-bottom-width: 1px;
border-bottom-style: solid;
}
.uni-collapse-cell--hover {
background-color: #f5f5f5
background-color: #f5f5f5;
}
.uni-collapse-cell--open {
background-color: #f5f5f5
background-color: #f5f5f5;
}
.uni-collapse-cell--disabled {
opacity: .3
opacity: 0.3;
}
.uni-collapse-cell--animation {
transition: all .3s
.uni-collapse-cell--hide {
height: 48px;
}
.uni-collapse-cell:after {
position: absolute;
z-index: 3;
right: 0;
bottom: 0;
left: 0;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #e5e5e5
.uni-collapse-cell--animation {
transition: transform 0.3s ease;
}
.uni-collapse-cell__title {
padding: 24upx 30upx;
width: 100%;
box-sizing: border-box;
flex: 1;
padding: 12px 12px;
position: relative;
/* #ifndef APP-NVUE */
display: flex;
width: 100%;
box-sizing: border-box;
/* #endif */
height: 48px;
line-height: 24px;
flex-direction: row;
justify-content: space-between;
align-items: center
align-items: center;
}
.uni-collapse-cell__title-extra {
margin-right: 18upx;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center
.uni-collapse-cell__title:active {
background-color: #f5f5f5;
}
.uni-collapse-cell__title-img {
height: 52upx;
width: 52upx
height: 52rpx;
width: 52rpx;
margin-right: 10px;
}
.uni-collapse-cell__title-arrow {
width: 20px;
height: 20px;
transform: rotate(0);
transform-origin: center center
}
transform: rotate(0deg);
transform-origin: center center;
.uni-collapse-cell__title-arrow.uni-active {
transform: rotate(180deg)
}
.uni-collapse-cell__title-inner {
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column
.uni-collapse-cell__title-arrow-active {
transform: rotate(180deg);
}
.uni-collapse-cell__title-text {
font-size: 32upx;
text-overflow: ellipsis;
flex: 1;
font-size: 32rpx;
/* #ifndef APP-NVUE */
white-space: nowrap;
color: inherit;
line-height: 1.5;
overflow: hidden
/* #endif */
/* #ifdef APP-NVUE */
lines: 1;
/* #endif */
overflow: hidden;
text-overflow: ellipsis;
}
.uni-collapse-cell__content {
position: relative;
width: 100%;
overflow: hidden
overflow: hidden;
}
.uni-collapse-cell__wrapper {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
}
.uni-collapse-cell__content .view {
font-size: 28upx
.uni-collapse-cell__content--hide {
height: 0px;
line-height: 0px;
}
</style>
\ No newline at end of file
components/uni-collapse/uni-collapse.vue
浏览文件 @ 500b1f00
<template>
<view class="uni-collapse">
<slot />
</view>
</template>
<script>
export default {
name: 'UniCollapse',
props: {
accordion: {
// 是否开启手风琴效果
type: [Boolean, String],
default: false
}
},
data() {
return {}
},
provide() {
return {
collapse: this
}
},
created() {
this.childrens = []
},
methods: {
onChange() {
let activeItem = []
this.childrens.forEach((vm, index) => {
if (vm.isOpen) {
activeItem.push(vm.nameSync)
}
})
this.$emit('change', activeItem)
}
}
}
</script>
<style>
@charset "UTF-8";
.uni-collapse {
background-color: #fff;
position: relative;
width: 100%;
display: flex;
flex-direction: column
}
.uni-collapse:after {
position: absolute;
z-index: 10;
right: 0;
bottom: 0;
left: 0;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #e5e5e5
}
.uni-collapse:before {
position: absolute;
z-index: 10;
right: 0;
top: 0;
left: 0;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #e5e5e5
}
<template>
<view class="uni-collapse">
<slot />
</view>
</template>
<script>
export default {
name: 'UniCollapse',
props: {
accordion: {
// 是否开启手风琴效果
type: [Boolean, String],
default: false
}
},
data() {
return {}
},
provide() {
return {
collapse: this
}
},
created() {
this.childrens = []
},
methods: {
onChange() {
let activeItem = []
this.childrens.forEach((vm, index) => {
if (vm.isOpen) {
activeItem.push(vm.nameSync)
}
})
this.$emit('change', activeItem)
}
}
}
</script>
<style scoped>
.uni-collapse {
/* #ifndef APP-NVUE */
width: 100%;
display: flex;
/* #endif */
/* #ifdef APP-NVUE */
flex: 1;
/* #endif */
flex-direction: column;
background-color: #ffffff;
}
</style>
\ No newline at end of file
components/uni-count-down/uni-count-down.vue
浏览文件 @ 500b1f00
<template>
<view class="uni-countdown">
<view v-if="showDay" :style="{ borderColor: borderColor, color: color, background: backgroundColor }" class="uni-countdown__number">{{ d }}</view>
<view v-if="showDay" :style="{ color: splitorColor }" class="uni-countdown__splitor">天</view>
<view :style="{ borderColor: borderColor, color: color, background: backgroundColor }" class="uni-countdown__number">{{ h }}</view>
<view :style="{ color: splitorColor }" class="uni-countdown__splitor">{{ showColon ? ':' : '时' }}</view>
<view :style="{ borderColor: borderColor, color: color, background: backgroundColor }" class="uni-countdown__number">{{ i }}</view>
<view :style="{ color: splitorColor }" class="uni-countdown__splitor">{{ showColon ? ':' : '分' }}</view>
<view :style="{ borderColor: borderColor, color: color, background: backgroundColor }" class="uni-countdown__number">{{ s }}</view>
<view v-if="!showColon" :style="{ color: splitorColor }" class="uni-countdown__splitor">秒</view>
</view>
</template>
<script>
export default {
name: 'UniCountDown',
props: {
showDay: {
type: Boolean,
default: true
},
showColon: {
type: Boolean,
default: true
},
backgroundColor: {
type: String,
default: '#FFFFFF'
},
borderColor: {
type: String,
default: '#000000'
},
color: {
type: String,
default: '#000000'
},
splitorColor: {
type: String,
default: '#000000'
},
day: {
type: Number,
default: 0
},
hour: {
type: Number,
default: 0
},
minute: {
type: Number,
default: 0
},
second: {
type: Number,
default: 0
}
},
data() {
return {
timer: null,
d: '00',
h: '00',
i: '00',
s: '00',
leftTime: 0,
seconds: 0
}
},
created: function(e) {
this.seconds = this.toSeconds(this.day, this.hour, this.minute, this.second)
this.countDown()
this.timer = setInterval(() => {
this.seconds--
if (this.seconds < 0) {
this.timeUp()
return
}
this.countDown()
}, 1000)
},
beforeDestroy() {
clearInterval(this.timer)
},
methods: {
toSeconds(day, hours, minutes, seconds) {
return day * 60 * 60 * 24 + hours * 60 * 60 + minutes * 60 + seconds
},
timeUp() {
clearInterval(this.timer)
this.$emit('timeup')
},
countDown() {
let seconds = this.seconds
let [day, hour, minute, second] = [0, 0, 0, 0]
if (seconds > 0) {
day = Math.floor(seconds / (60 * 60 * 24))
hour = Math.floor(seconds / (60 * 60)) - day * 24
minute = Math.floor(seconds / 60) - day * 24 * 60 - hour * 60
second = Math.floor(seconds) - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60
} else {
this.timeUp()
}
if (day < 10) {
day = '0' + day
}
if (hour < 10) {
hour = '0' + hour
}
if (minute < 10) {
minute = '0' + minute
}
if (second < 10) {
second = '0' + second
}
this.d = day
this.h = hour
this.i = minute
this.s = second
}
}
}
</script>
<style>
@charset "UTF-8";
.uni-countdown {
padding: 2upx 0;
display: inline-flex;
flex-wrap: nowrap;
justify-content: center
}
.uni-countdown__splitor {
justify-content: center;
line-height: 44upx;
padding: 0 5upx;
font-size: 28upx
}
.uni-countdown__number {
line-height: 44upx;
justify-content: center;
height: 44upx;
border-radius: 6upx;
margin: 0 5upx;
font-size: 28upx;
border: 1px solid #000;
font-size: 24upx;
padding: 0 10upx
}
<template>
<view class="uni-countdown">
<text v-if="showDay" :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ d }}</text>
<text v-if="showDay" :style="{ color: splitorColor }" class="uni-countdown__splitor">天</text>
<text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ h }}</text>
<text :style="{ color: splitorColor }" class="uni-countdown__splitor">{{ showColon ? ':' : '时' }}</text>
<text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ i }}</text>
<text :style="{ color: splitorColor }" class="uni-countdown__splitor">{{ showColon ? ':' : '分' }}</text>
<text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ s }}</text>
<text v-if="!showColon" :style="{ color: splitorColor }" class="uni-countdown__splitor">秒</text>
</view>
</template>
<script>
export default {
name: 'UniCountDown',
props: {
showDay: {
type: Boolean,
default: true
},
showColon: {
type: Boolean,
default: true
},
backgroundColor: {
type: String,
default: '#FFFFFF'
},
borderColor: {
type: String,
default: '#000000'
},
color: {
type: String,
default: '#000000'
},
splitorColor: {
type: String,
default: '#000000'
},
day: {
type: Number,
default: 0
},
hour: {
type: Number,
default: 0
},
minute: {
type: Number,
default: 0
},
second: {
type: Number,
default: 0
}
},
data() {
return {
timer: null,
d: '00',
h: '00',
i: '00',
s: '00',
leftTime: 0,
seconds: 0
}
},
created: function(e) {
this.seconds = this.toSeconds(this.day, this.hour, this.minute, this.second)
this.countDown()
this.timer = setInterval(() => {
this.seconds--
if (this.seconds < 0) {
this.timeUp()
return
}
this.countDown()
}, 1000)
},
beforeDestroy() {
clearInterval(this.timer)
},
methods: {
toSeconds(day, hours, minutes, seconds) {
return day * 60 * 60 * 24 + hours * 60 * 60 + minutes * 60 + seconds
},
timeUp() {
clearInterval(this.timer)
this.$emit('timeup')
},
countDown() {
let seconds = this.seconds
let [day, hour, minute, second] = [0, 0, 0, 0]
if (seconds > 0) {
day = Math.floor(seconds / (60 * 60 * 24))
hour = Math.floor(seconds / (60 * 60)) - day * 24
minute = Math.floor(seconds / 60) - day * 24 * 60 - hour * 60
second = Math.floor(seconds) - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60
} else {
this.timeUp()
}
if (day < 10) {
day = '0' + day
}
if (hour < 10) {
hour = '0' + hour
}
if (minute < 10) {
minute = '0' + minute
}
if (second < 10) {
second = '0' + second
}
this.d = day
this.h = hour
this.i = minute
this.s = second
}
}
}
</script>
<style scoped>
.uni-countdown {
/* #ifndef APP-PLUS-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: flex-start;
padding: 2upx 0;
}
.uni-countdown__splitor {
/* #ifndef APP-PLUS-NVUE */
display: flex;
/* #endif */
justify-content: center;
line-height: 48upx;
padding: 5upx;
font-size: 24rpx;
}
.uni-countdown__number {
/* #ifndef APP-PLUS-NVUE */
display: flex;
/* #endif */
justify-content: center;
align-items: center;
width: 52upx;
height: 48upx;
line-height: 48upx;
border-radius: 6rpx;
margin: 5upx;
border-width: 1rpx;
border-style: solid;
border-color: #000000;
text-align: center;
font-size: 24rpx;
}
</style>
\ No newline at end of file
components/uni-drawer/uni-drawer.vue
浏览文件 @ 500b1f00
<template>
<view v-if="visibleSync" :class="{ 'uni-drawer--visible': showDrawer, 'uni-drawer--right': rightMode }" class="uni-drawer" @touchmove.stop.prevent="moveHandle">
<view class="uni-drawer__mask" @tap="close" />
<view class="uni-drawer__content">
<slot />
</view>
</view>
</template>
<script>
export default {
name: 'UniDrawer',
props: {
/**
* 显示状态
*/
visible: {
type: Boolean,
default: false
},
/**
* 显示模式（左、右），只在初始化生效
*/
mode: {
type: String,
default: ''
},
/**
* 蒙层显示状态
*/
mask: {
type: Boolean,
default: true
}
},
data() {
return {
visibleSync: false,
showDrawer: false,
rightMode: false,
closeTimer: null,
watchTimer: null
}
},
watch: {
visible(val) {
clearTimeout(this.watchTimer)
setTimeout(() => {
this.showDrawer = val
}, 100)
if (this.visibleSync) {
clearTimeout(this.closeTimer)
}
if (val) {
this.visibleSync = val
} else {
this.watchTimer = setTimeout(() => {
this.visibleSync = val
}, 300)
}
}
},
created() {
this.visibleSync = this.visible
setTimeout(() => {
this.showDrawer = this.visible
}, 100)
this.rightMode = this.mode === 'right'
},
methods: {
close() {
this.showDrawer = false
this.closeTimer = setTimeout(() => {
this.visibleSync = false
this.$emit('close')
}, 200)
},
moveHandle() {}
}
}
</script>
<style>
@charset "UTF-8";
.uni-drawer {
display: block;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
visibility: hidden;
z-index: 999;
height: 100%
}
.uni-drawer.uni-drawer--right .uni-drawer__content {
left: auto;
right: 0;
transform: translatex(100%)
}
.uni-drawer.uni-drawer--visible {
visibility: visible
}
.uni-drawer.uni-drawer--visible .uni-drawer__content {
transform: translatex(0)
}
.uni-drawer.uni-drawer--visible .uni-drawer__mask {
display: block;
opacity: 1
}
.uni-drawer__mask {
display: block;
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .4);
transition: opacity .3s
}
.uni-drawer__content {
display: block;
position: absolute;
top: 0;
left: 0;
width: 61.8%;
height: 100%;
background: #fff;
transition: all .3s ease-out;
transform: translatex(-100%)
}
<template>
<view v-if="visibleSync" :class="{ 'uni-drawer--visible': showDrawer }" class="uni-drawer">
<view class="uni-drawer__mask" :class="{ 'uni-drawer__mask--visible': showDrawer && mask }" @tap="close" />
<view class="uni-drawer__content" :class="{'uni-drawer--right': rightMode,'uni-drawer--left': !rightMode, 'uni-drawer__content--visible': showDrawer}">
<slot />
</view>
</view>
</template>
<script>
export default {
name: 'UniDrawer',
props: {
/**
* 显示状态
*/
visible: {
type: Boolean,
default: false
},
/**
* 显示模式（左、右），只在初始化生效
*/
mode: {
type: String,
default: ''
},
/**
* 蒙层显示状态
*/
mask: {
type: Boolean,
default: true
}
},
data() {
return {
visibleSync: false,
showDrawer: false,
rightMode: false,
closeTimer: null,
watchTimer: null
}
},
watch: {
visible(val) {
clearTimeout(this.watchTimer)
setTimeout(() => {
this.showDrawer = val
}, 100)
if (this.visibleSync) {
clearTimeout(this.closeTimer)
}
if (val) {
this.visibleSync = val
} else {
this.watchTimer = setTimeout(() => {
this.visibleSync = val
}, 300)
}
}
},
created() {
this.visibleSync = this.visible
setTimeout(() => {
this.showDrawer = this.visible
}, 100)
this.rightMode = this.mode === 'right'
},
methods: {
close() {
this.showDrawer = false
this.closeTimer = setTimeout(() => {
this.visibleSync = false
this.$emit('close')
}, 200)
}
}
}
</script>
<style scoped>
.uni-drawer {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
z-index: 999;
}
.uni-drawer__content {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
position: absolute;
top: 0;
width: 220px;
bottom: 0;
background-color: #ffffff;
transition: transform 0.3s ease-out;
}
.uni-drawer--left {
left: 0;
transform: translateX(-100%);
}
.uni-drawer--right {
right: 0;
transform: translateX(100%);
}
.uni-drawer__content--visible {
transform: translateX(0);
}
.uni-drawer__mask {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
opacity: 0;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.4);
transition: opacity 0.3s;
}
.uni-drawer__mask--visible {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
opacity: 1;
}
</style>
\ No newline at end of file
components/uni-fab/uni-fab.vue
浏览文件 @ 500b1f00
<template>
<view>
<view :class="{
leftBottom: leftBottom,
rightBottom: rightBottom,
leftTop: leftTop,
rightTop: rightTop
}" class="fab-box fab">
<view :class="{
left: horizontal === 'left' && direction === 'horizontal',
top: vertical === 'top' && direction === 'vertical',
bottom: vertical === 'bottom' && direction === 'vertical',
right: horizontal === 'right' && direction === 'horizontal'
}" :style="{ 'background-color': styles.buttonColor }" class="fab-circle" @click="_onClick">
<text :class="{ active: isShow }" class="uni-icon uni-icon-plusempty" />
</view>
<view :class="{
left: horizontal === 'left',
right: horizontal === 'right',
flexDirection: direction === 'vertical',
flexDirectionStart: flexDirectionStart,
flexDirectionEnd: flexDirectionEnd
}" :style="{ width: boxWidth, height: boxHeight, background: styles.backgroundColor }" class="fab-content">
<view v-if="flexDirectionStart || horizontalLeft" class="fab-item first" />
<view v-for="(item, index) in content" :key="index" :class="{ active: isShow }" :style="{
color: item.active ? styles.selectedColor : styles.color
}" class="fab-item" @click="_onItemClick(index, item)">
<image :src="item.active ? item.selectedIconPath : item.iconPath" class="content-image" mode="widthFix" />
<text class="text">{{ item.text }}</text>
</view>
<view v-if="flexDirectionEnd || horizontalRight" class="fab-item first" />
</view>
</view>
</view>
</template>
<script>
export default {
name: 'UniFab',
props: {
pattern: {
type: Object,
default () {
return {}
}
},
horizontal: {
type: String,
default: 'left'
},
vertical: {
type: String,
default: 'bottom'
},
direction: {
type: String,
default: 'horizontal'
},
content: {
type: Array,
default () {
return []
}
},
show: {
type: Boolean,
default: false
}
},
data() {
return {
fabShow: false,
flug: true,
isShow: false,
styles: {
color: '#3c3e49',
selectedColor: '#007AFF',
backgroundColor: '#fff',
buttonColor: '#3c3e49'
}
}
},
computed: {
contentWidth(e) {
return uni.upx2px((this.content.length + 1) * 110 + 20) + 'px'
},
contentWidthMin() {
return uni.upx2px(110) + 'px'
},
// 动态计算宽度
boxWidth() {
return this.getPosition(3, 'horizontal')
},
// 动态计算高度
boxHeight() {
return this.getPosition(3, 'vertical')
},
// 计算左下位置
leftBottom() {
return this.getPosition(0, 'left', 'bottom')
},
// 计算右下位置
rightBottom() {
return this.getPosition(0, 'right', 'bottom')
},
// 计算左上位置
leftTop() {
return this.getPosition(0, 'left', 'top')
},
rightTop() {
return this.getPosition(0, 'right', 'top')
},
flexDirectionStart() {
return this.getPosition(1, 'vertical', 'top')
},
flexDirectionEnd() {
return this.getPosition(1, 'vertical', 'bottom')
},
horizontalLeft() {
return this.getPosition(2, 'horizontal', 'left')
},
horizontalRight() {
return this.getPosition(2, 'horizontal', 'right')
}
},
watch: {
pattern(newValue, oldValue) {
//console.log(JSON.stringify(newValue))
this.styles = Object.assign({}, this.styles, newValue)
}
},
created() {
this.isShow = this.show
if (this.top === 0) {
this.fabShow = true
}
// 初始化样式
this.styles = Object.assign({}, this.styles, this.pattern)
},
methods: {
_onClick() {
this.isShow = !this.isShow
},
open() {
this.isShow = true
},
close() {
this.isShow = false
},
/**
* 按钮点击事件
*/
_onItemClick(index, item) {
this.$emit('trigger', {
index,
item
})
},
/**
* 获取 位置信息
*/
getPosition(types, paramA, paramB) {
if (types === 0) {
return this.horizontal === paramA && this.vertical === paramB
} else if (types === 1) {
return this.direction === paramA && this.vertical === paramB
} else if (types === 2) {
return this.direction === paramA && this.horizontal === paramB
} else {
return this.isShow && this.direction === paramA ? this.contentWidth : this.contentWidthMin
}
}
}
}
</script>
<style scoped>
@font-face {
font-family: uniicons;
font-weight: normal;
font-style: normal;
src: url('https://img-cdn-qiniu.dcloud.net.cn/fonts/uni.ttf') format('truetype');
}
.uni-icon {
font-family: uniicons;
font-size: 24px;
font-weight: normal;
font-style: normal;
line-height: 1;
display: inline-block;
text-decoration: none;
-webkit-font-smoothing: antialiased;
}
.uni-icon-plusempty:before {
content: '\e468';
}
.fab-box {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
}
.fab-box.top {
width: 60upx;
height: 60upx;
right: 30upx;
bottom: 60upx;
border: 1px #5989b9 solid;
background: #6699cc;
border-radius: 10upx;
color: #fff;
transition: all 0.3;
opacity: 0;
}
.fab-box.active {
opacity: 1;
}
.fab-box.fab {
z-index: 10;
}
.fab-box.fab.leftBottom {
left: 30upx;
bottom: 60upx;
}
.fab-box.fab.leftTop {
left: 30upx;
top: 80upx;
/* #ifdef H5 */
top: calc(80upx + var(--window-top));
/* #endif */
}
.fab-box.fab.rightBottom {
right: 30upx;
bottom: 60upx;
}
.fab-box.fab.rightTop {
right: 30upx;
top: 80upx;
/* #ifdef H5 */
top: calc(80upx + var(--window-top));
/* #endif */
}
.fab-circle {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
width: 110upx;
height: 110upx;
background: #3c3e49;
/* background: #5989b9; */
border-radius: 50%;
box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2);
z-index: 11;
}
.fab-circle.left {
left: 0;
}
.fab-circle.right {
right: 0;
}
.fab-circle.top {
top: 0;
}
.fab-circle.bottom {
bottom: 0;
}
.fab-circle .uni-icon-plusempty {
color: #ffffff;
font-size: 80upx;
transition: all 0.3s;
font-weight: bold;
}
.fab-circle .uni-icon-plusempty.active {
transform: rotate(135deg);
font-size: 80upx;
}
.fab-content {
background: #6699cc;
box-sizing: border-box;
display: flex;
border-radius: 100upx;
overflow: hidden;
box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
transition: all 0.2s;
width: 110upx;
}
.fab-content.left {
justify-content: flex-start;
}
.fab-content.right {
justify-content: flex-end;
}
.fab-content.flexDirection {
flex-direction: column;
justify-content: flex-end;
}
.fab-content.flexDirectionStart {
flex-direction: column;
justify-content: flex-start;
}
.fab-content.flexDirectionEnd {
flex-direction: column;
justify-content: flex-end;
}
.fab-content .fab-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 110upx;
height: 110upx;
font-size: 24upx;
color: #fff;
opacity: 0;
transition: opacity 0.2s;
}
.fab-content .fab-item.active {
opacity: 1;
}
.fab-content .fab-item .content-image {
width: 50upx;
height: 50upx;
margin-bottom: 5upx;
}
.fab-content .fab-item.first {
width: 110upx;
}
<template>
<view>
<view :class="{
'uni-fab--leftBottom': leftBottom,
'uni-fab--rightBottom': rightBottom,
'uni-fab--leftTop': leftTop,
'uni-fab--rightTop': rightTop
}" class="uni-fab">
<view :class="{
'uni-fab__content--left': horizontal === 'left',
'uni-fab__content--right': horizontal === 'right',
'uni-fab__content--flexDirection': direction === 'vertical',
'uni-fab__content--flexDirectionStart': flexDirectionStart,
'uni-fab__content--flexDirectionEnd': flexDirectionEnd
}" :style="{ width: boxWidth, height: boxHeight, backgroundColor: styles.backgroundColor }" class="uni-fab__content">
<view v-if="flexDirectionStart || horizontalLeft" class="uni-fab__item uni-fab__item--first" />
<view v-for="(item, index) in content" :key="index" :class="{ 'uni-fab__item--active': isShow }" class="uni-fab__item" @click="_onItemClick(index, item)">
<image :src="item.active ? item.selectedIconPath : item.iconPath" class="uni-fab__item-image" mode="widthFix" />
<text class="uni-fab__item-text" :style="{ color: item.active ? styles.selectedColor : styles.color }">{{ item.text }}</text>
</view>
<view v-if="flexDirectionEnd || horizontalRight" class="uni-fab__item uni-fab__item--first" />
</view>
<view :class="{
'uni-fab__circle--left': horizontal === 'left' && direction === 'horizontal',
'uni-fab__circle--top': vertical === 'top' && direction === 'vertical',
'uni-fab__circle--bottom': vertical === 'bottom' && direction === 'vertical',
'uni-fab__circle--right': horizontal === 'right' && direction === 'horizontal'
}" :style="{ 'background-color': styles.buttonColor }" class="uni-fab__circle" @click="_onClick">
<uni-icons :class="{ 'uni-fab__plus--active': isShow }" class="uni-fab__plus" type="plusempty" color="#FFFFFF" size="48"></uni-icons>
</view>
</view>
</view>
</template>
<script>
import uniIcons from '../uni-icons/uni-icons.vue'
export default {
components: {
uniIcons
},
name: 'UniFab',
props: {
pattern: {
type: Object,
default () {
return {}
}
},
horizontal: {
type: String,
default: 'left'
},
vertical: {
type: String,
default: 'bottom'
},
direction: {
type: String,
default: 'horizontal'
},
content: {
type: Array,
default () {
return []
}
},
show: {
type: Boolean,
default: false
}
},
data() {
return {
fabShow: false,
flug: true,
isShow: false,
styles: {
color: '#3c3e49',
selectedColor: '#007AFF',
backgroundColor: '#fff',
buttonColor: '#3c3e49'
}
}
},
computed: {
contentWidth(e) {
return (this.content.length + 1) * 55 + 10 + 'px'
},
contentWidthMin() {
return 55 + 'px'
},
// 动态计算宽度
boxWidth() {
return this.getPosition(3, 'horizontal')
},
// 动态计算高度
boxHeight() {
return this.getPosition(3, 'vertical')
},
// 计算左下位置
leftBottom() {
return this.getPosition(0, 'left', 'bottom')
},
// 计算右下位置
rightBottom() {
return this.getPosition(0, 'right', 'bottom')
},
// 计算左上位置
leftTop() {
return this.getPosition(0, 'left', 'top')
},
rightTop() {
return this.getPosition(0, 'right', 'top')
},
flexDirectionStart() {
return this.getPosition(1, 'vertical', 'top')
},
flexDirectionEnd() {
return this.getPosition(1, 'vertical', 'bottom')
},
horizontalLeft() {
return this.getPosition(2, 'horizontal', 'left')
},
horizontalRight() {
return this.getPosition(2, 'horizontal', 'right')
}
},
watch: {
pattern(newValue, oldValue) {
//console.log(JSON.stringify(newValue))
this.styles = Object.assign({}, this.styles, newValue)
}
},
created() {
this.isShow = this.show
if (this.top === 0) {
this.fabShow = true
}
// 初始化样式
this.styles = Object.assign({}, this.styles, this.pattern)
},
methods: {
_onClick() {
this.isShow = !this.isShow
},
open() {
this.isShow = true
},
close() {
this.isShow = false
},
/**
* 按钮点击事件
*/
_onItemClick(index, item) {
this.$emit('trigger', {
index,
item
})
},
/**
* 获取 位置信息
*/
getPosition(types, paramA, paramB) {
if (types === 0) {
return this.horizontal === paramA && this.vertical === paramB
} else if (types === 1) {
return this.direction === paramA && this.vertical === paramB
} else if (types === 2) {
return this.direction === paramA && this.horizontal === paramB
} else {
return this.isShow && this.direction === paramA ? this.contentWidth : this.contentWidthMin
}
}
}
}
</script>
<style scoped>
.uni-fab {
position: fixed;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
justify-content: center;
align-items: center;
z-index: 10;
}
.uni-fab--top {
width: 30px;
height: 30px;
right: 15px;
bottom: 30px;
border-style: solid;
border-width: 1px;
border-color: #5989b9;
border-radius: 5px;
transition: opacity 0.3;
opacity: 0;
}
.uni-fab--active {
opacity: 1;
}
.uni-fab--leftBottom {
left: 15px;
bottom: 30px;
}
.uni-fab--leftTop {
left: 15px;
top: 40px;
/* #ifdef H5 */
top: calc(40px + var(--window-top));
/* #endif */
}
.uni-fab--rightBottom {
right: 15px;
bottom: 30px;
}
.uni-fab--rightTop {
right: 15px;
top: 40px;
/* #ifdef H5 */
top: calc(40px + var(--window-top));
/* #endif */
}
.uni-fab__circle {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
justify-content: center;
align-items: center;
position: absolute;
width: 55px;
height: 55px;
background-color: #3c3e49;
border-radius: 50%;
box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2);
z-index: 11;
}
.uni-fab__circle--left {
left: 0;
}
.uni-fab__circle--right {
right: 0;
}
.uni-fab__circle--top {
top: 0;
}
.uni-fab__circle--bottom {
bottom: 0;
}
.uni-fab__plus {
font-size: 40px;
transform: rotate(0deg);
transition: transform 0.3s;
font-weight: bold;
}
.uni-fab__plus--active {
transform: rotate(135deg);
}
.uni-fab__content {
/* #ifndef APP-NVUE */
box-sizing: border-box;
display: flex;
/* #endif */
flex-direction: row;
border-radius: 50px;
overflow: hidden;
box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
/* #ifdef APP-NVUE */
transition: width, height 0.2s;
/* #endif */
/* #ifndef APP-NVUE */
transition: all 0.2s;
/* #endif */
width: 55px;
}
.uni-fab__content--left {
justify-content: flex-start;
}
.uni-fab__content--right {
justify-content: flex-end;
}
.uni-fab__content--flexDirection {
flex-direction: column;
justify-content: flex-end;
}
.uni-fab__content--flexDirectionStart {
flex-direction: column;
justify-content: flex-start;
}
.uni-fab__content--flexDirectionEnd {
flex-direction: column;
justify-content: flex-end;
}
.uni-fab__item {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
align-items: center;
width: 55px;
height: 55px;
opacity: 0;
transition: opacity 0.2s;
}
.uni-fab__item--active {
opacity: 1;
}
.uni-fab__item-image {
width: 25px;
height: 25px;
margin-bottom: 3px;
}
.uni-fab__item-text {
color: #FFFFFF;
font-size: 12px;
}
.uni-fab__item--first {
width: 55px;
}
</style>
\ No newline at end of file
components/uni-fav/uni-fav.vue
浏览文件 @ 500b1f00
<template>
<view :style="{backgroundColor:checked?bgColorChecked:bgColor,color:checked?fgColorChecked:fgColor}" :class="[
circle === true || circle === 'true' ? 'uni-fav--circle' : '',
]" class="uni-fav" @click="onClick">
<uni-icons v-if="!checked&&(star===true||star==='true')" :color="fgColor" class="uni-fav-star" type="star-filled" size="16" />
<text class="uni-fav-text">
{{ checked ? contentText.contentFav : contentText.contentDefault }}
</text>
</view>
</template>
<script>
import uniIcons from '../uni-icons/uni-icons.vue'
export default {
name: 'UniFav',
components: {
uniIcons
},
props: {
star: {
type: [Boolean, String],
default: true
},
bgColor: {
type: String,
default: '#eeeeee'
},
fgColor: {
type: String,
default: '#666666'
},
bgColorChecked: {
type: String,
default: '#007aff'
},
fgColorChecked: {
type: String,
default: '#FFFFFF'
},
circle: {
type: [Boolean, String],
default: false
},
checked: {
type: Boolean,
default: false
},
contentText: {
type: Object,
default () {
return {
contentDefault: '收藏',
contentFav: '已收藏'
}
}
}
},
watch: {
checked() {
if (uni.report) {
if (this.checked) {
uni.report("收藏", "收藏")
} else {
uni.report("取消收藏", "取消收藏")
}
}
}
},
methods: {
onClick() {
this.$emit('click')
}
}
}
</script>
<style>
@charset "UTF-8";
.uni-fav {
display: inline-flex;
width: 120rpx;
height: 50rpx;
line-height: 50rpx;
text-align: center;
font-size: 28rpx;
box-sizing: border-box;
border-radius: 6rpx;
align-items: center;
justify-content: center
}
.uni-fav--circle {
border-radius: 60rpx
}
.uni-fav-star {
height: 50rpx;
line-height: 50rpx;
margin-right: 5rpx;
vertical-align: middle
}
.uni-fav-text {
display: inline-block;
height: 50rpx;
line-height: 50rpx;
vertical-align: middle
}
<template>
<view :class="[circle === true || circle === 'true' ? 'uni-fav--circle' : '']" :style="[{ backgroundColor: checked ? bgColorChecked : bgColor }]" @click="onClick" class="uni-fav">
<uni-icons :color="fgColor" :style="{color: checked ? fgColorChecked : fgColor}" class="uni-fav-star" size="14" type="star-filled" v-if="!checked && (star === true || star === 'true')" />
<text :style="{color: checked ? fgColorChecked : fgColor}" class="uni-fav-text">{{ checked ? contentText.contentFav : contentText.contentDefault }}</text>
</view>
</template>
<script>
import uniIcons from "@/components/uni-icons/uni-icons.vue";
export default {
name: "UniFav",
components: {
uniIcons
},
props: {
star: {
type: [Boolean, String],
default: true
},
bgColor: {
type: String,
default: "#eeeeee"
},
fgColor: {
type: String,
default: "#666666"
},
bgColorChecked: {
type: String,
default: "#007aff"
},
fgColorChecked: {
type: String,
default: "#FFFFFF"
},
circle: {
type: [Boolean, String],
default: false
},
checked: {
type: Boolean,
default: false
},
contentText: {
type: Object,
default () {
return {
contentDefault: "收藏",
contentFav: "已收藏"
};
}
}
},
watch: {
checked() {
if (uni.report) {
if (this.checked) {
uni.report("收藏", "收藏");
} else {
uni.report("取消收藏", "取消收藏");
}
}
}
},
methods: {
onClick() {
this.$emit("click");
}
}
};
</script>
<style scoped>
.uni-fav {
/* #ifndef APP-PLUS-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: center;
width: 120rpx;
height: 50rpx;
line-height: 50rpx;
text-align: center;
border-radius: 6rpx;
}
.uni-fav--circle {
border-radius: 60rpx;
}
.uni-fav-star {
/* #ifndef APP-PLUS-NVUE */
display: flex;
/* #endif */
height: 50rpx;
line-height: 49rpx;
margin-right: 5rpx;
align-items: center;
justify-content: center;
}
.uni-fav-text {
/* #ifndef APP-PLUS-NVUE */
display: flex;
/* #endif */
height: 50rpx;
line-height: 50rpx;
align-items: center;
justify-content: center;
font-size: 28rpx;
}
</style>
\ No newline at end of file
components/uni-goods-nav/uni-goods-nav.vue
浏览文件 @ 500b1f00
<template>
<view>
<view class="uni-goods-nav">
<!-- 底部占位 -->
<view class="uni-tab__seat" />
<view class="uni-tab__cart-box flex">
<view class="flex uni-tab__cart-sub-box">
<view v-for="(item,index) in options" :key="index" class="flex uni-tab__cart-button-left uni-tab__shop-cart" @click="onClick(index,item)">
<view class="uni-tab__icon">
<image :src="item.icon" mode="widthFix" />
<image class="image" :src="item.icon" mode="widthFix" />
</view>
<text class="uni-tab__text">{{ item.text }}</text>
<view class="flex uni-tab__dot-box">
<view v-if="item.info" :class="{ 'uni-tab__dots': item.info > 9 }" class="uni-tab__dot ">
{{ item.info }}
</view>
<text v-if="item.info" :class="{ 'uni-tab__dots': item.info > 9 }" class="uni-tab__dot ">{{ item.info }}</text>
</view>
</view>
</view>
<view :class="{'uni-tab__right':fill}" class="flex uni-tab__cart-sub-box ">
<view v-for="(item,index) in buttonGroup" :key="index" :style="{backgroundColor:item.backgroundColor,color:item.color}" class="flex uni-tab__cart-button-right" @click="buttonClick(index,item)">{{ item.text }}</view>
<view v-for="(item,index) in buttonGroup" :key="index" :style="{backgroundColor:item.backgroundColor,color:item.color}" class="flex uni-tab__cart-button-right" @click="buttonClick(index,item)"><text class="uni-tab__cart-button-right-text">{{ item.text }}</text></view>
<!-- <view class="flex uni-tab__cart-button-right uni-tab__color-y ">立即购买</view> -->
</view>
</view>
......@@ -82,21 +79,31 @@
}
</script>
<style>
<style scoped>
.flex {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
}
.uni-goods-nav {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
flex-direction: row;
}
.uni-tab__cart-box {
width: 100%;
flex: 1;
height: 100rpx;
background: #fff;
background-color: #fff;
z-index: 900;
}
.uni-tab__cart-sub-box {
width: 100%;
box-sizing: border-box;
flex: 1;
}
.uni-tab__right {
......@@ -107,12 +114,14 @@
}
.uni-tab__cart-button-left {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
position: relative;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
font-size: 24rpx;
}
.uni-tab__icon {
......@@ -120,21 +129,28 @@
height: 40rpx;
}
.uni-tab__icon image {
width: 100%;
height: 100%;
.image {
width: 20px;
height: 20px;
}
.uni-tab__cart-button-left .uni-tab__text {
.uni-tab__text {
margin-top: 5rpx;
font-size: 24rpx;
color: #666;
}
.uni-tab__cart-button-right {
/* #ifndef APP-NVUE */
display: flex;
flex-direction: column;
/* #endif */
flex: 1;
justify-content: center;
align-items: center;
width: 100%;
}
.uni-tab__cart-button-right-text {
font-size: 24rpx;
color: #fff;
}
......@@ -143,39 +159,48 @@
opacity: 0.7;
}
.uni-tab__cart-button-left .uni-tab__dot-box {
.uni-tab__dot-box {
/* #ifndef APP-NVUE */
display: flex;
flex-direction: column;
/* #endif */
position: absolute;
right: 40rpx;
top: 20rpx;
right: 25rpx;
top: 5rpx;
justify-content: center;
align-items: center;
width: 0;
height: 0;
/* width: 0;
*/
/* height: 0;
*/
}
.uni-tab__dot-box .uni-tab__dot {
flex-shrink: 0;
width: 30rpx;
height: 30rpx;
.uni-tab__dot {
/* width: 30rpx;
*/
/* height: 30rpx;
*/
padding: 0 8rpx;
line-height: 30rpx;
color: #ffffff;
text-align: center;
font-size: 12px;
background: #ff0000;
border-radius: 50%;
background-color: #ff0000;
border-radius: 30rpx;
}
.uni-tab__dot-box .uni-tab__dot.uni-tab__dots {
.uni-tab__dots {
padding: 0 8rpx;
width: auto;
/* width: auto;
*/
border-radius: 30rpx;
}
.uni-tab__color-y {
background: #ffa200;
background-color: #ffa200;
}
.uni-tab__color-r {
background: #ff0000;
background-color: #ff0000;
}
</style>
\ No newline at end of file
components/uni-grid-item/uni-grid-item.vue
浏览文件 @ 500b1f00
<template>
<view v-if="width" :style="{ width: width }" class="uni-grid-item">
<view :class="{ border: showBorder, 'uni-grid-item__box-square': square, 'border-top': showBorder && index < column, 'uni-highlight': highlight }" :style="{ 'border-color': borderColor }" class="uni-grid-item__box" @click="_onClick">
<view v-if="marker === 'dot'" :style="{ left: top + 'px', top: left + 'px' }" class="uni-grid-item__box-dot" />
<view v-if="marker === 'badge'" :style="{ left: top + 'px', top: left + 'px' }" class="uni-grid-item__box-badge">
<uni-badge :text="text" :type="type" :size="size" :inverted="inverted" />
</view>
<view v-if="marker === 'image'" :style="{ left: top + 'px', top: left + 'px' }" class="uni-grid-item__box-image">
<image :style="{ width: imgWidth + 'px' }" :src="src" class="box-image" mode="widthFix" />
</view>
<view class="uni-grid-item__box-item">
<slot />
</view>
</view>
</view>
</template>
<script>
import uniBadge from '../uni-badge/uni-badge.vue'
export default {
name: 'UniGridItem',
components: {
uniBadge
},
props: {
// 类型：可选值，dot：圆点；badge：角标；image：图片
marker: {
type: String,
default: ''
},
// 水平方向
hor: {
type: Number,
default: 0
},
// 垂直方向
ver: {
type: Number,
default: 0
},
// badge 下颜色类型，可选值：default（灰色）、primary（蓝色）、success（绿色）、warning(黄色)、error(红色)
type: {
type: String,
default: ''
},
// badge 下显示内容，汉字最多为1个
text: {
type: String,
default: ''
},
// badge 下 Badge 大小
size: {
type: String,
default: 'normal'
},
// badge 下 是否无需背景颜色
inverted: {
type: Boolean,
default: false
},
// image 下图片路径
src: {
type: String,
default: ''
},
// image 下图片宽度 ，最大 为 100 。 默认为 30
imgWidth: {
type: Number,
default: 30
}
},
inject: ['grid'],
data() {
return {
column: 0,
showBorder: true,
square: true,
highlight: true,
left: 0,
top: 0,
index: 0,
openNum: 2,
width: 0,
borderColor: '#d0dee5'
}
},
created() {
this.column = this.grid.column
this.showBorder = this.grid.showBorder
this.square = this.grid.square
this.highlight = this.grid.highlight
this.top = this.hor === 0 ? this.grid.hor : this.hor
this.left = this.ver === 0 ? this.grid.ver : this.ver
this.borderColor = this.grid.borderColor
this.index = this.grid.index++
},
// #ifdef H5
mounted() {
this.grid._getSize(width => {
this.width = width
})
},
// #endif
// #ifndef H5
onReady() {
this.grid._getSize(width => {
this.width = width
})
},
// #endif
methods: {
_onClick() {
// console.log('点击', this.index);
this.grid.change({
detail: {
index: this.index
}
})
}
}
}
</script>
<style>
@charset "UTF-8";
.uni-grid-item {
box-sizing: border-box
}
.uni-grid-item__box {
position: relative;
width: 100%
}
.uni-grid-item__box-item {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
width: 100%;
height: 100%;
font-size: 32upx;
color: #666;
padding: 20upx 0;
box-sizing: border-box
}
.uni-grid-item__box-item .image {
width: 50upx;
height: 50upx
}
.uni-grid-item__box-item .text {
font-size: 26upx;
margin-top: 10upx
}
.uni-grid-item__box.uni-grid-item__box-square {
height: 0;
padding-top: 100%
}
.uni-grid-item__box.uni-grid-item__box-square .uni-grid-item__box-item {
position: absolute;
top: 0
}
.uni-grid-item__box.border {
position: relative;
box-sizing: border-box;
border-bottom: 1px #d0dee5 solid;
border-right: 1px #d0dee5 solid
}
.uni-grid-item__box.border-top {
border-top: 1px #d0dee5 solid
}
.uni-grid-item__box.uni-highlight:active {
background-color: #eee
}
.uni-grid-item__box-badge,
.uni-grid-item__box-dot,
.uni-grid-item__box-image {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
z-index: 10
}
.uni-grid-item__box-dot {
width: 20upx;
height: 20upx;
background: #ff5a5f;
border-radius: 50%
}
.uni-grid-item__box-badge {
display: flex;
justify-content: center;
align-items: center;
width: 0;
height: 0
}
.uni-grid-item__box-image {
display: flex;
justify-content: center;
align-items: center;
width: 100upx;
height: 100upx;
overflow: hidden
}
.uni-grid-item__box-image .box-image {
width: 90upx
}
<template>
<view v-if="width" :style="{ width: width }" class="uni-grid-item">
<view :class="{ 'uni-grid-item--border': showBorder, 'uni-grid-item__box-square': square, 'uni-grid-item--border-top': showBorder && index < column, 'uni-highlight': highlight }" :style="{ 'border-color': borderColor }" class="uni-grid-item__box" @click="_onClick">
<view class="uni-grid-item__box-item" :class="{'uni-grid-item__box-item-square': square}">
<slot />
</view>
</view>
</view>
</template>
<script>
import uniBadge from '@/components/uni-badge/uni-badge.vue'
export default {
name: 'UniGridItem',
components: {
uniBadge
},
inject: ['grid'],
data() {
return {
column: 0,
showBorder: true,
square: true,
highlight: true,
left: 0,
top: 0,
index: 0,
openNum: 2,
width: 0,
borderColor: '#d0dee5'
}
},
created() {
this.column = this.grid.column
this.showBorder = this.grid.showBorder
this.square = this.grid.square
this.highlight = this.grid.highlight
this.top = this.hor === 0 ? this.grid.hor : this.hor
this.left = this.ver === 0 ? this.grid.ver : this.ver
this.borderColor = this.grid.borderColor
this.index = this.grid.index++
},
mounted() {
this.grid._getSize(width => {
this.width = width
})
},
methods: {
_onClick() {
// console.log('点击', this.index);
this.grid.change({
detail: {
index: this.index
}
})
}
}
}
</script>
<style scoped>
.uni-grid-item {
/* #ifndef APP-NVUE */
height: 100%;
/* #endif */
}
.uni-grid-item__box {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
position: relative;
flex-direction: row;
align-items: center;
/* #ifdef APP-NVUE */
justify-content: center;
/* #endif */
}
.uni-grid-item__box-item {
/* #ifndef APP-NVUE */
display: flex;
width: 100%;
/* #endif */
position: relative;
flex: 1;
justify-content: center;
flex-direction: column;
align-items: center;
padding: 30rpx 0;
}
.uni-grid-item__box-item-square {
position: absolute;
top: 0;
bottom: 0;
}
.uni-grid-item--image {
width: 50rpx;
height: 50rpx;
}
.uni-grid-item--text {
font-size: 26rpx;
margin-top: 10rpx;
}
.uni-grid-item__box-square {
height: 0;
padding-top: 100%;
}
.uni-grid-item--border {
position: relative;
border-bottom-color: #d0dee5;
border-bottom-style: solid;
border-bottom-width: 1px;
border-right-color: #d0dee5;
border-right-style: solid;
border-right-width: 1px;
}
.uni-grid-item--border-top {
border-top-color: #d0dee5;
border-top-style: solid;
border-top-width: 1px;
/* #ifndef APP-NVUE */
height: 100%;
box-sizing: border-box;
/* #endif */
}
.uni-highlight:active {
background-color: #eee;
}
.uni-grid-item__box-dot {
position: absolute;
top: 0;
right: 0;
width: 20rpx;
height: 20rpx;
background-color: #ff5a5f;
border-radius: 50rpx;
}
.uni-grid-item__box-badge {
position: absolute;
top: 0;
right: 0;
z-index: 10;
justify-content: center;
align-items: center;
width: 0;
height: 0;
}
.uni-grid-item__box-image {
position: absolute;
top: 0;
right: 0;
justify-content: center;
align-items: center;
width: 100rpx;
height: 100rpx;
overflow: hidden;
}
.box-image {
width: 90rpx;
}
</style>
\ No newline at end of file
components/uni-grid/uni-grid.vue
浏览文件 @ 500b1f00
<template>
<view>
<view :id="elId" :class="{ border: showBorder }" :style="{ 'border-left': showBorder ? '1px ' + borderColor + ' solid' : 'none' }" class="uni-grid">
<view class="uni-grid-wrap">
<view :id="elId" ref="uni-grid" class="uni-grid" :class="{ 'uni-grid--border': showBorder }" :style="{ 'border-left-style':'solid','border-left-color':borderColor, 'border-left-width':showBorder?'1px':0 }">
<slot />
</view>
</view>
</template>
<script>
// #ifdef APP-NVUE
const dom = weex.requireModule('dom');
// #endif
export default {
name: 'UniGrid',
props: {
......@@ -54,7 +57,8 @@
const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
return {
index: 0,
elId
elId,
width: 0
}
},
created() {
......@@ -62,35 +66,71 @@
this.childrens = []
this.pIndex = this.pIndex ? this.pIndex++ : 0
},
mounted() {
// this._getSize()
},
methods: {
change(e) {
this.$emit('change', e)
},
_getSize(fn) {
// #ifndef APP-NVUE
uni.createSelectorQuery()
.in(this)
.select(`#${this.elId}`)
.boundingClientRect()
.exec(ret => {
if (!ret[0]) {
setTimeout(this._getSize(fn))
setTimeout(() => {
this._getSize(fn)
}, 50)
return
}
let width = parseInt(ret[0].width / this.column) - 1 + 'px'
typeof fn === 'function' && fn(width)
})
// #endif
// #ifdef APP-NVUE
dom.getComponentRect(this.$refs['uni-grid'], (ret) => {
if (ret.size.width === 0) {
setTimeout(() => {
this._getSize(fn)
}, 50)
return
}
let width = parseInt(ret.size.width / this.column) - 1 + 'px'
typeof fn === 'function' && fn(width)
})
// #endif
}
}
}
</script>
<style>
@charset "UTF-8";
<style scoped>
.uni-grid-wrap {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
flex-direction: column;
/* #ifdef H5 */
width: 100%;
/* #endif */
}
.uni-grid {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
flex-direction: row;
flex-wrap: wrap;
box-sizing: border-box;
border-left: 1px #d0dee5 solid
}
.uni-grid--border {
border-left-color: #d0dee5;
border-left-style: solid;
border-left-width: 1px;
}
</style>
\ No newline at end of file
components/uni-icons/icons.js 0 → 100644
浏览文件 @ 500b1f00
export default {
'contact': '\ue100',
'person': '\ue101',
'personadd': '\ue102',
'contact-filled': '\ue130',
'person-filled': '\ue131',
'personadd-filled': '\ue132',
'phone': '\ue200',
'email': '\ue201',
'chatbubble': '\ue202',
'chatboxes': '\ue203',
'phone-filled': '\ue230',
'email-filled': '\ue231',
'chatbubble-filled': '\ue232',
'chatboxes-filled': '\ue233',
'weibo': '\ue260',
'weixin': '\ue261',
'pengyouquan': '\ue262',
'chat': '\ue263',
'qq': '\ue264',
'videocam': '\ue300',
'camera': '\ue301',
'mic': '\ue302',
'location': '\ue303',
'mic-filled': '\ue332',
'speech': '\ue332',
'location-filled': '\ue333',
'micoff': '\ue360',
'image': '\ue363',
'map': '\ue364',
'compose': '\ue400',
'trash': '\ue401',
'upload': '\ue402',
'download': '\ue403',
'close': '\ue404',
'redo': '\ue405',
'undo': '\ue406',
'refresh': '\ue407',
'star': '\ue408',
'plus': '\ue409',
'minus': '\ue410',
'circle': '\ue411',
'checkbox': '\ue411',
'close-filled': '\ue434',
'clear': '\ue434',
'refresh-filled': '\ue437',
'star-filled': '\ue438',
'plus-filled': '\ue439',
'minus-filled': '\ue440',
'circle-filled': '\ue441',
'checkbox-filled': '\ue442',
'closeempty': '\ue460',
'refreshempty': '\ue461',
'reload': '\ue462',
'starhalf': '\ue463',
'spinner': '\ue464',
'spinner-cycle': '\ue465',
'search': '\ue466',
'plusempty': '\ue468',
'forward': '\ue470',
'back': '\ue471',
'left-nav': '\ue471',
'checkmarkempty': '\ue472',
'home': '\ue500',
'navigate': '\ue501',
'gear': '\ue502',
'paperplane': '\ue503',
'info': '\ue504',
'help': '\ue505',
'locked': '\ue506',
'more': '\ue507',
'flag': '\ue508',
'home-filled': '\ue530',
'gear-filled': '\ue532',
'info-filled': '\ue534',
'help-filled': '\ue535',
'more-filled': '\ue537',
'settings': '\ue560',
'list': '\ue562',
'bars': '\ue563',
'loop': '\ue565',
'paperclip': '\ue567',
'eye': '\ue568',
'arrowup': '\ue580',
'arrowdown': '\ue581',
'arrowleft': '\ue582',
'arrowright': '\ue583',
'arrowthinup': '\ue584',
'arrowthindown': '\ue585',
'arrowthinleft': '\ue586',
'arrowthinright': '\ue587',
'pulldown': '\ue588',
'closefill': '\ue589',
'sound': '\ue590',
'scan': '\ue612'
}
\ No newline at end of file
components/uni-icons/uni-icons.vue
浏览文件 @ 500b1f00
此差异已折叠。
components/uni-indexed-list/uni-indexed-list.vue
浏览文件 @ 500b1f00
<template>
<view class="uni-indexed">
<scroll-view :scroll-into-view="scrollViewId" :style="{ height: winHeight + 'px' }" class="uni-indexed__list" scroll-y>
<block v-for="(list, idx) in lists" :key="idx">
<view v-if="list.items && list.items.length > 0" :id="'uni-indexed-list-' + list.key" class="uni-indexed__list-title">{{ list.key }}</view>
<view v-if="list.items && list.items.length > 0" class="uni-list">
<view v-for="(item, index) in list.items" :key="index" class="uni-list-item" hover-class="uni-list-item--hover">
<view class="uni-list-item__container" @click="onClick(idx, index)">
<view v-if="showSelect" style="margin-right: 20upx;">
<uni-icons :type="item.checked ? 'checkbox-filled' : 'circle'" :color="item.checked ? '#007aff' : '#aaa'" size="24" />
<view class="uni-indexed-list">
<scroll-view :scroll-into-view="scrollViewId" :style="{ height: winHeight + 'px' }" class="uni-indexed-list__scroll" scroll-y>
<view v-for="(list, idx) in lists" :key="idx" :id="'uni-indexed-list-' + list.key">
<view v-if="loaded || list.itemIndex < 15" class="uni-indexed-list__title-wrapper">
<text v-if="list.items && list.items.length > 0" class="uni-indexed-list__title">{{ list.key }}</text>
</view>
<view v-if="(loaded || list.itemIndex < 15) && list.items && list.items.length > 0" class="uni-indexed-list__list">
<view v-for="(item, index) in list.items" :key="index" class="uni-indexed-list__item" hover-class="uni-indexed-list__item--hover">
<view v-if="loaded || item.itemIndex < 15" class="uni-indexed-list__item-container" @click="onClick(idx, index)">
<view class="uni-indexed-list__item-border" :class="{'uni-indexed-list__item-border--last':index===list.items.length-1}">
<view v-if="showSelect" style="margin-right: 20rpx;">
<uni-icons :type="item.checked ? 'checkbox-filled' : 'circle'" :color="item.checked ? '#007aff' : '#aaa'" size="24" />
</view>
<text class="uni-indexed-list__item-content">{{ item.name }}</text>
</view>
<view class="uni-list-item__content">{{ item.name }}</view>
</view>
</view>
</view>
</block>
</view>
</scroll-view>
<view :class="touchmove ? 'active' : ''" :style="{ height: winHeight + 'px' }" class="uni-indexed__menu" @touchstart="touchStart" @touchmove.stop.prevent="touchMove" @touchend="touchEnd">
<text v-for="(list, key) in lists" :key="key" :class="touchmoveIndex == key ? 'active' : ''" :style="{ height: itemHeight + 'px', lineHeight: itemHeight + 'px' }" class="uni-indexed__menu-item">
{{ list.key }}
</text>
<view :class="touchmove ? 'uni-indexed-list__menu--active' : ''" :style="{ height: winHeight + 'px' }" class="uni-indexed-list__menu" @touchstart="touchStart" @touchmove.stop.prevent="touchMove" @touchend="touchEnd">
<view v-for="(list, key) in lists" :key="key" class="uni-indexed-list__menu-item">
<text class="uni-indexed-list__menu-text" :class="touchmoveIndex == key ? 'uni-indexed-list__menu-text--active' : ''">{{ list.key }}</text>
</view>
</view>
<view v-if="touchmove" class="uni-indexed-list__alert-wrapper">
<text class="uni-indexed-list__alert">{{ lists[touchmoveIndex].key }}</text>
</view>
<view v-if="touchmove" class="uni-indexed--alert">{{ lists[touchmoveIndex].key }}</view>
</view>
</template>
<script>
import uniIcons from '../uni-icons/uni-icons.vue'
import uniIcons from '@/components/uni-icons/uni-icons.vue'
export default {
name: 'UniIndexedList',
components: {
......@@ -49,7 +55,9 @@
touchmoveIndex: -1,
itemHeight: 0,
winHeight: 0,
scrollViewId: ''
scrollViewId: '',
touchmoveTimeout: '',
loaded: false
}
},
watch: {
......@@ -60,8 +68,11 @@
deep: true
}
},
created() {
mounted() {
this.setList()
setTimeout(() => {
this.loaded = true
}, 300);
},
methods: {
setList() {
......@@ -74,13 +85,17 @@
// return;
// }
// console.log(this.options)
let index = 0;
this.lists = this.options.map(value => {
// console.log(value)
let indexBefore = index
let items = value.data.map(item => {
let obj = {}
// for (let key in item) {
obj['key'] = value.letter
obj['name'] = item
obj['itemIndex'] = index
index++
// }
obj.checked = item.checked ? item.checked : false
return obj
......@@ -88,7 +103,8 @@
return {
title: value.letter,
key: value.letter,
items: items
items: items,
itemIndex: indexBefore
}
})
// console.log(this.lists)
......@@ -104,13 +120,18 @@
}
},
touchMove(e) {
let pageY = e.touches[0].pageY
let index = Math.floor(pageY / this.itemHeight)
let item = this.lists[index]
if (item) {
this.scrollViewId = 'uni-indexed-list-' + item.key
this.touchmoveIndex = index
if (this.touchmoveTimeout) {
clearTimeout(this.touchmoveTimeout)
}
this.touchmoveTimeout = setTimeout(() => {
let pageY = e.touches[0].pageY
let index = Math.floor(pageY / this.itemHeight)
let item = this.lists[index]
if (item) {
this.scrollViewId = 'uni-indexed-list-' + item.key
this.touchmoveIndex = index
}
}, 10)
},
touchEnd() {
this.touchmove = false
......@@ -144,136 +165,148 @@
}
}
</script>
<style>
@charset "UTF-8";
.uni-list {
background-color: #fff;
position: relative;
width: 100%;
<style scoped>
.uni-indexed-list__list {
background-color: #ffffff;
/* #ifndef APP-NVUE */
display: flex;
flex-direction: column
}
.uni-list::after {
position: absolute;
z-index: 10;
right: 0;
bottom: 0;
left: 0;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #e5e5e5
/* #endif */
flex-direction: column;
border-top-style: solid;
border-top-width: 1px;
border-top-color: #e5e5e5;
}
.uni-list::before {
position: absolute;
z-index: 10;
right: 0;
top: 0;
left: 0;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #e5e5e5
.uni-indexed-list__item {
font-size: 32rpx;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.uni-list-item {
font-size: 32upx;
.uni-indexed-list__item-container {
padding-left: 30rpx;
flex: 1;
position: relative;
/* #ifndef APP-NVUE */
display: flex;
flex-direction: column;
box-sizing: border-box;
/* #endif */
flex-direction: row;
justify-content: space-between;
align-items: center
align-items: center;
}
.uni-list-item__container {
padding: 24upx 30upx;
width: 100%;
box-sizing: border-box;
.uni-indexed-list__item-border {
flex: 1;
position: relative;
/* #ifndef APP-NVUE */
display: flex;
box-sizing: border-box;
/* #endif */
flex-direction: row;
justify-content: space-between;
align-items: center
align-items: center;
padding: 30rpx;
padding-left: 0;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #e5e5e5;
}
.uni-list-item__container:after {
position: absolute;
z-index: 3;
right: 0;
bottom: 0;
left: 30upx;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #e5e5e5
.uni-indexed-list__item-border--last {
border-bottom-width: 0px;
}
.uni-indexed {
.uni-indexed-list__item-content {
flex: 1;
font-size: 14px;
}
.uni-indexed-list {
/* #ifndef APP-NVUE */
display: flex;
flex-direction: row
/* #endif */
flex-direction: row;
}
.uni-indexed__list {
.uni-indexed-list__scroll {
flex: 1;
height: 100vh
}
.uni-indexed__list-title {
padding: 10upx 24upx;
line-height: 1.5;
.uni-indexed-list__title-wrapper {
/* #ifndef APP-NVUE */
display: flex;
width: 100%;
/* #endif */
background-color: #f7f7f7;
font-size: 24upx
}
.uni-indexed__menu {
width: 46upx;
height: 100vh;
background-color: #d3d3d3;
.uni-indexed-list__title {
padding: 6px 12px;
line-height: 24px;
font-size: 24rpx;
}
.uni-indexed-list__menu {
width: 24px;
background-color: lightgrey;
/* #ifndef APP-NVUE */
display: flex;
flex-direction: column
/* #endif */
flex-direction: column;
}
.uni-indexed__menu.active {
background-color: #c8c8c8
.uni-indexed-list__menu-item {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
align-items: center;
justify-content: center;
}
.uni-indexed__menu.active .uni-indexed__menu-item {
color: #333
.uni-indexed-list__menu-text {
line-height: 20px;
font-size: 12px;
text-align: center;
color: #aaa;
}
.uni-indexed__menu.active .uni-indexed__menu-item.active {
color: #007aff
.uni-indexed-list__menu--active {
background-color: rgb(200, 200, 200);
}
.uni-indexed__menu-item {
color: #aaa;
font-size: 22upx;
text-align: center
.uni-indexed-list__menu-text--active {
color: #007aff;
}
.uni-indexed--alert {
.uni-indexed-list__alert-wrapper {
position: absolute;
display: inline-flex;
left: 0;
top: 0;
right: 0;
bottom: 0;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: center;
z-index: 20;
width: 160upx;
height: 160upx;
left: 50%;
top: 50%;
margin-left: -80upx;
margin-top: -80upx;
border-radius: 80upx;
}
.uni-indexed-list__alert {
width: 80px;
height: 80px;
border-radius: 80px;
text-align: center;
font-size: 70upx;
line-height: 80px;
font-size: 35px;
color: #fff;
background-color: rgba(0, 0, 0, .5)
background-color: rgba(0, 0, 0, 0.5);
}
</style>
\ No newline at end of file
components/uni-list/uni-list.vue
浏览文件 @ 500b1f00
<template>
<view class="uni-list">
<slot />
</view>
</template>
<script>
export default {
name: 'UniList'
}
</script>
<style>
@charset "UTF-8";
.uni-list {
background-color: #fff;
position: relative;
width: 100%;
display: flex;
flex-direction: column
}
.uni-list:after {
position: absolute;
z-index: 10;
right: 0;
bottom: 0;
left: 0;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #e5e5e5
}
.uni-list:before {
position: absolute;
z-index: 10;
right: 0;
top: 0;
left: 0;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #e5e5e5
}
<template>
<view class="uni-list">
<slot />
</view>
</template>
<script>
export default {
name: 'UniList',
provide() {
return {
list: this
}
},
created() {
this.firstChildAppend = false
}
}
</script>
<style scoped>
.uni-list {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
background-color: #ffffff;
position: relative;
flex-direction: column;
border-bottom-color: #e5e5e5;
border-bottom-style: solid;
border-bottom-width: 1px;
}
</style>
\ No newline at end of file
components/uni-number-box/uni-number-box.vue
浏览文件 @ 500b1f00
<template>
<view class="uni-numbox">
<view :class="{'uni-numbox--disabled': inputValue <= min || disabled}" class="uni-numbox__minus" @click="_calcValue('minus')">-</view>
<input :disabled="disabled" v-model="inputValue" class="uni-numbox__value" type="number" @blur="_onBlur">
<view :class="{'uni-numbox--disabled': inputValue >= max || disabled}" class="uni-numbox__plus" @click="_calcValue('plus')">+</view>
<text :class="{ 'uni-numbox--disabled': inputValue <= min || disabled }" @click="_calcValue('minus')" class="uni-numbox__minus">-</text>
<input :disabled="disabled" @blur="_onBlur" class="uni-numbox__value" type="number" v-model="inputValue" />
<text :class="{ 'uni-numbox--disabled': inputValue >= max || disabled }" @click="_calcValue('plus')" class="uni-numbox__plus">+</text>
</view>
</template>
<script>
export default {
name: 'UniNumberBox',
name: "UniNumberBox",
props: {
value: {
type: [Number, String],
......@@ -33,135 +33,128 @@
data() {
return {
inputValue: 0
}
};
},
watch: {
value(val) {
this.inputValue = +val
this.inputValue = +val;
},
inputValue(newVal, oldVal) {
if (+newVal !== +oldVal) {
this.$emit('change', newVal)
this.$emit("change", newVal);
}
}
},
created() {
this.inputValue = +this.value
this.inputValue = +this.value;
},
methods: {
_calcValue(type) {
if (this.disabled) {
return
return;
}
const scale = this._getDecimalScale()
let value = this.inputValue * scale
let step = this.step * scale
if (type === 'minus') {
value -= step
} else if (type === 'plus') {
value += step
const scale = this._getDecimalScale();
let value = this.inputValue * scale;
let step = this.step * scale;
if (type === "minus") {
value -= step;
} else if (type === "plus") {
value += step;
}
if (value < this.min || value > this.max) {
return
return;
}
this.inputValue = value / scale
this.inputValue = String(value / scale);
},
_getDecimalScale() {
let scale = 1
let scale = 1;
// 浮点型
if (~~this.step !== this.step) {
scale = Math.pow(10, (this.step + '').split('.')[1].length)
scale = Math.pow(10, (this.step + "").split(".")[1].length);
}
return scale
return scale;
},
_onBlur(event) {
let value = event.detail.value
let value = event.detail.value;
if (!value) {
this.inputValue = 0
return
// this.inputValue = 0;
return;
}
value = +value
value = +value;
if (value > this.max) {
value = this.max
value = this.max;
} else if (value < this.min) {
value = this.min
value = this.min;
}
this.inputValue = value
this.inputValue = value;
}
}
}
};
</script>
<style>
@charset "UTF-8";
<style scoped>
/* #ifdef APP-PLUS-NVUE */
/* #endif */
/* #ifdef APP-PLUS */
/* #endif */
.uni-numbox {
display: inline-flex;
/* #ifndef APP-PLUS-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: flex-start;
height: 70upx;
position: relative
height: 70rpx;
line-height: 70rpx;
width: 240rpx;
}
.uni-numbox:after {
content: '';
position: absolute;
transform-origin: center;
box-sizing: border-box;
pointer-events: none;
top: -50%;
left: -50%;
right: -50%;
bottom: -50%;
border: 1px solid #e5e5e5;
border-radius: 12upx;
transform: scale(.5)
.uni-numbox__value {
background-color: #ffffff;
width: 80rpx;
height: 70rpx;
text-align: center;
font-size: 32rpx;
border-width: 1rpx;
border-style: solid;
border-color: #e5e5e5;
border-left-width: 0;
border-right-width: 0;
}
.uni-numbox__minus,
.uni-numbox__plus {
margin: 0;
background-color: #f8f8f8;
width: 70upx;
font-size: 40upx;
height: 100%;
line-height: 70upx;
.uni-numbox__minus {
width: 70rpx;
height: 70rpx;
line-height: 62rpx;
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 40rpx;
color: #333;
position: relative
background-color: #f8f8f8;
border-width: 1rpx;
border-style: solid;
border-color: #e5e5e5;
border-top-left-radius: 6rpx;
border-bottom-left-radius: 6rpx;
border-right-width: 0;
}
.uni-numbox__value {
position: relative;
background-color: #fff;
width: 80upx;
height: 100%;
.uni-numbox__plus {
width: 70rpx;
height: 70rpx;
line-height: 62rpx;
text-align: center;
padding: 0
}
.uni-numbox__value:after {
content: '';
position: absolute;
transform-origin: center;
box-sizing: border-box;
pointer-events: none;
top: -50%;
left: -50%;
right: -50%;
bottom: -50%;
font-size: 40rpx;
color: #333;
border-width: 1rpx;
border-style: solid;
border-color: #e5e5e5;
border-left-width: 1px;
border-right-width: 1px;
border-top-width: 0;
border-bottom-width: 0;
transform: scale(.5)
border-top-right-radius: 6rpx;
border-bottom-right-radius: 6rpx;
background-color: #f8f8f8;
border-left-width: 0;
}
.uni-numbox--disabled {
color: silver
color: #c0c0c0;
}
</style>
\ No newline at end of file
components/uni-popup/uni-popup.vue
浏览文件 @ 500b1f00
此差异已折叠。
components/uni-rate/uni-rate.vue
浏览文件 @ 500b1f00
此差异已折叠。
components/uni-status-bar/uni-status-bar.vue
浏览文件 @ 500b1f00
......@@ -16,10 +16,9 @@
}
</script>
<style>
<style scoped>
.uni-status-bar {
display: block;
width: 100%;
width: 750rpx;
height: 20px;
height: var(--status-bar-height);
}
......
components/uni-steps/uni-steps.vue
浏览文件 @ 500b1f00
此差异已折叠。
components/uni-swipe-action/mp.js
浏览文件 @ 500b1f00
......@@ -33,7 +33,7 @@ export default {
onReady () {
this.init()
this.getSize()
this.getButtonSize()
this.getButtonSize()
},
// #endif
methods: {
......
components/uni-tag/uni-tag.vue
浏览文件 @ 500b1f00
此差异已折叠。
components/uni-title/uni-title.vue
浏览文件 @ 500b1f00
此差异已折叠。
pages.json
浏览文件 @ 500b1f00
此差异已折叠。
pages/extUI/badge/badge.nvue 0 → 100644
浏览文件 @ 500b1f00
此差异已折叠。
pages/extUI/badge/badge.vue 已删除 100644 → 0
浏览文件 @ 65d5d0a7
此差异已折叠。
pages/extUI/icon/icon.1.vue 已删除 100644 → 0
浏览文件 @ 65d5d0a7
此差异已折叠。
pages/extUI/icon/icon.2.vue 已删除 100644 → 0
浏览文件 @ 65d5d0a7
此差异已折叠。
pages/extUI/indexed-list/indexed-list.nvue 0 → 100644
浏览文件 @ 500b1f00
此差异已折叠。
pages/extUI/indexed-list/indexed-list.vue 已删除 100644 → 0
浏览文件 @ 65d5d0a7
此差异已折叠。
pages/tabBar/extUI/extUI.nvue
浏览文件 @ 500b1f00
......@@ -48,6 +48,10 @@
name: "Drawer 抽屉",
url: "drawer"
},
{
name: "Fab 悬浮按钮",
url: "fab"
},
{
name: "Fav 收藏按钮",
url: "fav"
......@@ -61,8 +65,8 @@
url: "grid"
},
{
name: "Icon 图标",
url: "icon"
name: "Icons 图标",
url: "icons"
},
// #ifndef MP-BAIDU
{
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或