Uniapp/lucky_shop
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
ZF Sun
2025-10-27 15:55:29 +08:00
commit 6632080b83
513 changed files with 117442 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

342
pages_tool/components/chat-message/chat-message.vue Normal file
View File

@@ -0,0 +1,342 @@
<template>
<view class="chat-message">
<block v-if="message.contentType == 'sendGood'">
<ns-chat-goods :skuId="message.sku_id" :goodsDetail="message.goodsDetail" @sendMsg="sendGood"></ns-chat-goods>
</block>
<block v-if="message.contentType == 'sendOrder'">
<ns-chat-order :orderId="message.order_id" :orderdetails="message.orderDetail" @sendMsg="sendOrder"></ns-chat-order>
</block>
<block v-if="message.contentType == 'goodssku'">
<ns-chat-receiveGoods :skuId="message.sku_id"></ns-chat-receiveGoods>
</block>
<view class="message" v-if="message.contentType == 'string'">
<view class="message-item " :class="message.isItMe ? 'right' : 'left'">
<block v-if="message.isItMe">
<view class="head_img">
<image class="img" :src="myHeadImg" v-if="myHeadImg" @error="myHeadImgError" mode="aspectFit"/>
<image class="img" :src="defaultHead" mode="aspectFit" v-else/>
</view>
</block>
<block v-else>
<view class="head_img">
<image class="img" :src="avatar" mode="aspectFit" v-if="avatar"></image>
<image class="img" :src="defaultHead" mode="aspectFit" v-else></image>
</view>
</block>
<view class="chat_text">
<text class="iconfont icon-warn margin-right color-base-text" v-if="message.isItMe && !message.sendStatus"></text>
<view class="content"><rich-text :nodes="stringToEmjoy(message.content)"></rich-text></view>
<!-- <text class="iconfont icon-warn margin-left" v-if="!message.isItMe && !message.sendStatus"></text> -->
</view>
</view>
</view>
<view class="message" v-if="message.contentType == 'image'">
<view class="message-item " :class="message.isItMe ? 'right' : 'left'">
<block v-if="message.isItMe">
<view class="head_img">
<image class="img" :src="myHeadImg" v-if="myHeadImg" mode="aspectFit"></image>
<image class="img" :src="defaultHead" mode="aspectFit" v-else></image>
</view>
</block>
<block v-else>
<view class="head_img">
<image class="img" :src="avatar" mode="aspectFit" v-if="avatar"></image>
<image class="img" :src="defaultHead" mode="aspectFit" v-else></image>
</view>
</block>
<view class="chat_img">
<text class="iconfont icon-warn margin-right color-base-text" v-if="message.isItMe && !message.sendStatus"></text>
<view class="content_img" @click="previewMedia($util.img(message.image))" :style="{ backgroundImage: 'url(' + $util.img(message.image) + ')' }">
<!-- <image class="img_img" :src="$util.img(message.image)" mode="aspectFit"></image> -->
</view>
<!-- <text class="iconfont icon-warn margin-left" v-if="!message.isItMe && !message.sendStatus"></text> -->
</view>
</view>
</view>
<view v-else-if="message.contentType == 'goods'"><ns-chat-goods :isCanSend="false" :skuId="message.sku_id"></ns-chat-goods></view>
<view v-else-if="message.contentType == 'order'"><ns-chat-order :isCanSend="false" :orderId="message.order_id"></ns-chat-order></view>
<view class="no-connect-box" v-if="message.contentType == 'noline'">
<view class="no-connect">客服不在线</view>
</view>
<view class="no-connect-box" v-if="message.contentType == 'online'">
<view class="no-connect">客服在线</view>
</view>
<uni-popup ref="imgPopup" type="center">
<view class="imagePop">
<image :src="$util.img(currImg)" mode="aspectFit"></image>
</view>
</uni-popup>
</view>
</template>
<script>
import nsChatGoods from '@/pages_tool/components/ns-chat/ns-chat-goods.vue';
import nsChatOrder from '@/pages_tool/components/ns-chat/ns-chat-order.vue';
import nsChatReceiveGoods from '@/pages_tool/components/ns-chat/ns-chat-receiveGoods.vue';
import htmlParser from '@/common/js/html-parser';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import emjoy from '@/common/js/emjoy.js';
export default {
name: 'chat-message',
props: {
message: {
type: Object
},
send: {
type: Boolean
}
},
data() {
return {
avatar: '', //店铺头像
defaultAvatar: this.$util.getDefaultImage().store,
myHeadImg: '', //我的头像
defaultHead: this.$util.getDefaultImage().head,
emjoyList: emjoy.emjoyList,
currImg: ''
};
},
components: {
nsChatGoods,
nsChatOrder,
uniPopup,
nsChatReceiveGoods
},
mounted() {
this.avatar = this.$util.img(this.siteInfo.logo_square);
this.myHeadImg = this.$util.img(this.memberInfo.headimg);
},
methods: {
// 预览图片
previewMedia(img_url) {
var paths = [img_url];
uni.previewImage({
current: 0,
urls: paths
});
},
sendGood() {
this.$emit('sendGood', 'goods');
},
sendOrder() {
this.$emit('sendOrder', 'order');
},
// 处理图片错误
myHeadImgError() {
this.myHeadImg = this.defaultHead;
},
stringToEmjoy(value) {
if (!value) return;
// 兼容旧版本图片
var reg = RegExp(/\[/);
if (reg.test(value)) {
let string = value; // 需要把和匹配出来
let reg = new RegExp('\\[emjoy_(.+?)\\]', 'g');
let emjoyString = string.replace(reg, v => {
let emjoy = '';
for (let index in this.emjoyList) {
if (v == index) {
let _url = this.$util.img(this.emjoyList[index]);
emjoy = "<img class='message-img' src='" + _url + "'/>";
break;
}
}
if (emjoy) {
return emjoy;
} else {
return v;
}
});
let content = htmlParser(emjoyString);
content.forEach(v => {
if (v.name == 'img') {
v.attrs.style = 'display: inline-block;width: 32rpx !important;height: 32rpx !important;padding:0 2rpx;';
}
});
return content;
} else {
let content = value;
return content;
}
}
}
};
</script>
<style lang="scss">
/deep/.uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
background-color: #000;
}
/deep/.uni-popup__wrapper.uni-custom.center .uni-popup__wrapper-box {
max-width: 100%;
width: 100%;
}
.imagePop {
height: 50vh;
width: 100vw;
text-align: center;
image {
width: 100%;
height: 100%;
}
}
.chat-message {
width: 100%;
height: 100%;
.message {
padding: 13rpx 20rpx;
position: relative;
}
.left .content {
padding: 20rpx;
max-width: 450rpx;
border-radius: 10rpx;
font-size: 30rpx;
}
.right .content {
padding: 20rpx;
max-width: 450rpx;
border-radius: 10rpx;
font-size: 30rpx;
}
.content_img {
height: 200rpx;
width: 100%;
overflow: hidden;
text-align: right;
margin-left: 28rpx;
background-position: center right;
background-repeat: no-repeat;
background-size: contain;
image {
min-height: 80rpx;
min-width: 80rpx;
height: 100%;
width: 100%;
}
}
.right .content_img {
margin-right: 28rpx;
margin-left: 0;
}
.message-item {
display: flex;
justify-content: flex-start;
align-items: flex-start;
align-content: flex-start;
flex-wrap: nowrap;
flex-direction: row;
.head_img {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
overflow: hidden;
position: relative;
.img {
width: 100%;
height: 100%;
}
}
//图片
.contentType3 {
padding: 0;
border-radius: 2rpx;
background-color: transparent !important;
.img {
width: 200rpx;
height: auto;
max-width: 300rpx;
max-height: 400rpx;
}
}
.contentType3::after {
border: none !important;
display: none !important;
}
.content-type-right {
flex-direction: row-reverse;
}
&.right {
flex-direction: row-reverse;
.content {
background-color: #4cd964;
margin-right: 28rpx;
word-break: break-all;
line-height: 36rpx;
position: relative;
}
}
&.left {
.content {
background-color: #ffffff;
margin-left: 28rpx;
word-break: break-all;
line-height: 36rpx;
position: relative;
}
}
}
.next {
width: 100%;
height: 20rpx;
}
}
.no-connect-box {
width: 100%;
text-align: center;
margin: 20rpx 0 50rpx;
.no-connect {
display: inline-block;
padding: 0 20rpx;
height: 40rpx;
background: red;
margin: 0 auto;
background: rgba(0, 0, 0, 0.5);
border-radius: 9rpx;
text-align: center;
line-height: 40rpx;
font-size: 22rpx;
color: #ffffff;
}
}
.chat_text,
.chat_img {
display: flex;
align-items: center;
.iconfont {
font-size: 36rpx;
}
}
.chat_img {
width: 30%;
height: 200rpx;
}
</style>

1484
pages_tool/components/img-cropping/cropping.vue Normal file
View File

File diff suppressed because it is too large Load Diff

234
pages_tool/components/myp-one/myp-one.vue Normal file
View File

@@ -0,0 +1,234 @@
<template>
<view class="code-box">
<view class="flex-box">
<input :value="inputValue" type="number" :focus="autoFocus" :maxlength="maxlength" class="hide-input" @input="getVal" />
<block v-for="(item, index) in ranges" :key="index">
<view :class="['item', { active: codeIndex === item, middle: type === 'middle', bottom: type === 'bottom', box: type === 'box' }]">
<view class="line" v-if="type !== 'middle'"></view>
<view v-if="type === 'middle' && codeIndex <= item" class="bottom-line"></view>
<block v-if="isPwd && codeArr.length >= item"><text class="dot">●</text></block>
<block v-else>
<text class="number">{{ codeArr[index] ? codeArr[index] : '' }}</text>
</block>
</view>
</block>
</view>
</view>
</template>
<script>
// 支持使用 v-model
// 支持使用refs
export default {
name: 'mypOneInput',
props: {
// 支持外部提供，支持使用v-model
// 支持通过value来做清空
value: {
type: String,
default: ''
},
// 4/6
maxlength: {
type: Number,
default: 4
},
autoFocus: {
type: Boolean,
default: false
},
isPwd: {
type: Boolean,
default: false
},
// middle-middle line, bottom-bottom line, box-square box
type: {
type: String,
default: 'bottom'
}
},
watch: {
maxlength: {
immediate: true,
handler: function(newV) {
if (newV === 6) {
this.ranges = [1, 2, 3, 4, 5, 6];
} else {
this.ranges = [1, 2, 3, 4];
}
}
},
value: {
immediate: true,
handler: function(newV) {
if (newV !== this.inputValue) {
this.inputValue = newV;
this.toMakeAndCheck(newV);
}
}
}
},
data() {
return {
inputValue: '',
codeIndex: 1,
codeArr: [],
ranges: [1, 2, 3, 4]
};
},
methods: {
getVal(e) {
const val = e.detail.value;
this.inputValue = val;
this.$emit('input', val);
this.toMakeAndCheck(val);
},
toMakeAndCheck(val) {
const arr = val.split('');
this.codeIndex = arr.length + 1;
this.codeArr = arr;
if (this.codeIndex > Number(this.maxlength)) {
this.$emit('finish', this.codeArr.join(''));
}
},
// refs 时不再提供 v-model 支持
// 支持使用refs来设置value
// 没有提供数据保护与检测，自己在外面对数据进行检测保护
set(val) {
this.inputValue = val;
this.toMakeAndCheck(val);
},
// 支持使用refs来清空
clear() {
this.inputValue = '';
this.codeArr = [];
this.codeIndex = 1;
}
}
};
</script>
<style scoped>
@keyframes twinkling {
0% {
opacity: 0.2;
}
50% {
opacity: 0.5;
}
100% {
opacity: 0.2;
}
}
.code-box {
text-align: center;
}
.flex-box {
display: flex;
justify-content: center;
flex-wrap: wrap;
position: relative;
}
.flex-box .hide-input {
position: absolute;
top: 0;
left: -100%;
width: 200%;
height: 100%;
text-align: left;
z-index: 9;
opacity: 1;
}
.flex-box .item {
position: relative;
flex: 1;
margin-right: 18rpx;
font-size: 70rpx;
font-weight: bold;
color: #333333;
line-height: 100rpx;
}
.flex-box .item::before {
content: '';
padding-top: 100%;
display: block;
}
.flex-box .item:last-child {
margin-right: 0;
}
.flex-box .middle {
border: none;
}
.flex-box .box {
box-sizing: border-box;
border: 2rpx solid #cccccc;
border-width: 2rpx 0 2rpx 2rpx;
margin-right: 0;
}
.flex-box .box:first-of-type {
border-top-left-radius: 8rpx;
border-bottom-left-radius: 8rpx;
}
.flex-box .box:last-child {
border-right: 2rpx solid #cccccc;
border-top-right-radius: 8rpx;
border-bottom-right-radius: 8rpx;
}
.flex-box .bottom {
box-sizing: border-box;
border-bottom: 2rpx solid #ddd;
}
.flex-box .active {
border-color: #ddd;
}
.flex-box .active .line {
display: block;
}
.flex-box .line {
display: none;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 2rpx;
height: 40rpx;
background: #333333;
animation: twinkling 1s infinite ease;
}
.flex-box .dot,
.flex-box .number {
line-height: 40rpx;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.flex-box .bottom-line {
height: 8rpx;
background: #000000;
width: 80%;
position: absolute;
border-radius: 4rpx;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>

142
pages_tool/components/ns-chat/ns-chat-goods.vue Normal file
View File

@@ -0,0 +1,142 @@
<template>
<view class="message">
<view class="goods-item" v-if="goodsInfo.goods_name">
<image :src="$util.img(goodsInfo.sku_image)" mode="aspectFill"></image>
<view class="goods-info">
<view class="goods-name">{{ goodsInfo.sku_name ? goodsInfo.sku_name : goodsInfo.goods_name }}</view>
<view class="goods-bottom">
<view class="goods-price">
<text class="goods-price-sign color-base-text">￥</text>
<text class="color-base-text">{{ goodsInfo.price }}</text>
</view>
<view class="goods-option font-size-goods-tag disabled">已发送</view>
</view>
</view>
</view>
<view class="goods-item" v-else-if="goodsDetail">
<image :src="$util.img(goodsDetail.sku_image)" mode="aspectFill"></image>
<view class="goods-info">
<view class="goods-name">{{ goodsDetail.sku_name ? goodsDetail.sku_name : goodsDetail.goods_name }}</view>
<view class="goods-bottom">
<view class="goods-price">
<text class="goods-price-sign color-base-text">￥</text>
<text class="color-base-text">{{ goodsDetail.price }}</text>
</view>
<view class="goods-option font-size-goods-tag color-base-bg" @click="sendMsg('goods')">发送</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: 'ns-chat-goods',
props: {
skuId: {
type: [Number, String]
},
goodsDetail: {
type: [Object]
}
},
data() {
return {
goodsInfo: {}
};
},
mounted() {
this.getGoodsInfo();
},
methods: {
getGoodsInfo() {
this.$api.sendRequest({
url: '/api/goodssku/detail',
data: {
sku_id: this.skuId
},
success: res => {
if (res.code >= 0) {
this.goodsInfo = res.data.goods_sku_detail;
}
}
});
},
sendMsg() {
this.$emit('sendMsg', 'goods');
}
}
};
</script>
<style lang="scss">
.message {
padding: 13rpx 20rpx;
box-sizing: border-box;
width: 100vw;
position: relative;
.goods-item {
width: 100%;
height: 220rpx;
background: #ffffff;
position: relative;
display: flex;
align-items: center;
border-radius: 20rpx;
margin: 0 auto;
padding: $padding;
box-sizing: border-box;
image {
width: 180rpx;
height: 180rpx;
min-width: 180rpx;
}
.goods-info {
width: 100%;
height: 180rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-left: 20rpx;
box-sizing: border-box;
.goods-name {
width: 100%;
line-height: 1.4;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.goods-bottom {
display: flex;
justify-content: space-between;
align-items: flex-end;
text {
line-height: 1;
}
.goods-price {
display: flex;
align-items: flex-end;
padding-bottom: 10rpx;
font-weight: 500;
.goods-price-sign {
font-size: $font-size-activity-tag;
}
}
.goods-option {
width: 150rpx;
height: 50rpx;
line-height: 50rpx;
text-align: center;
border-radius: $border-radius;
color: #ffffff;
}
}
}
.disabled {
background: #e5e5e5;
}
}
}
</style>

149
pages_tool/components/ns-chat/ns-chat-order.vue Normal file
View File

@@ -0,0 +1,149 @@
<template>
<view class="message">
<view class="goods-item" v-if="orderdetails">
<image :src="$util.img(orderdetails.order_goods ? orderdetails.order_goods[0].sku_image : '')" mode="aspectFill"></image>
<view class="goods-info">
<view class="goods-name">{{ orderdetails.order_goods ? orderdetails.order_goods[0].sku_name : '' }}</view>
<view class="font-size-goods-tag">订单状态:{{ orderdetails.order_status_name }}</view>
<view class="font-size-goods-tag">配送方式:{{ orderdetails.delivery_type_name }}</view>
<view class="goods-bottom">
<view class="goods-price color-base-text">
<text class="goods-price-sign">￥</text>
<text>{{ orderdetails.order_goods ? orderdetails.order_goods[0].price : '' }}</text>
</view>
<view class="goods-option font-size-goods-tag color-base-bg" @click="sendMsg('order')">发送</view>
</view>
</view>
</view>
<view class="goods-item" v-else-if="orderInfo">
<image :src="$util.img(orderInfo.order_goods ? orderInfo.order_goods[0].sku_image : '')" mode="aspectFill"></image>
<view class="goods-info">
<view class="goods-name">{{ orderInfo.order_goods ? orderInfo.order_goods[0].sku_name : '' }}</view>
<view class="font-size-goods-tag">订单状态:{{ orderInfo.order_status_name }}</view>
<view class="font-size-goods-tag">配送方式:{{ orderInfo.delivery_type_name }}</view>
<view class="goods-bottom">
<view class="goods-price color-base-text">
<text class="goods-price-sign">￥</text>
<text>{{ orderInfo.order_goods ? orderInfo.order_goods[0].price : '' }}</text>
</view>
<view class="goods-option font-size-goods-tag disabled">已发送</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: 'ns-chat-order',
props: {
orderId: {
type: [Number, String]
},
isCanSend: Boolean,
orderdetails: {
type: [Object]
}
},
data() {
return {
orderInfo: {}
};
},
mounted() {
this.getGoodsInfo();
},
methods: {
getGoodsInfo() {
if (this.orderId) {
this.$api.sendRequest({
url: '/api/order/detail',
data: {
order_id: this.orderId
},
success: res => {
if (res.code >= 0) {
this.orderInfo = res.data;
}
}
});
}
},
sendMsg() {
this.$emit('sendMsg', 'order');
}
}
};
</script>
<style lang="scss">
.message {
padding: 13rpx 20rpx;
box-sizing: border-box;
width: 100vw;
position: relative;
.goods-item {
width: 100%;
height: 220rpx;
background: #ffffff;
position: relative;
display: flex;
align-items: center;
border-radius: 20rpx;
margin: 0 auto;
padding: $padding;
box-sizing: border-box;
image {
width: 180rpx;
height: 180rpx;
}
.goods-info {
width: 100%;
height: 180rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-left: 20rpx;
box-sizing: border-box;
.goods-name {
width: 100%;
line-height: 1.4;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
// font-size: $font-size-tag;
margin-bottom: 10rpx;
}
.goods-bottom {
display: flex;
justify-content: space-between;
align-items: flex-end;
text {
line-height: 1;
}
.goods-price {
display: flex;
align-items: flex-end;
padding-bottom: 10rpx;
font-weight: 500;
.goods-price-sign {
font-size: 20rpx;
}
}
.goods-option {
width: 150rpx;
height: 50rpx;
line-height: 50rpx;
text-align: center;
border-radius: $border-radius;
color: #ffffff;
}
}
}
.disabled {
background: #e5e5e5;
}
}
}
</style>

142
pages_tool/components/ns-chat/ns-chat-receiveGoods.vue Normal file
View File

@@ -0,0 +1,142 @@
<template>
<view class="goods">
<view class="goods-msg">
<image :src="$util.img(goodsInfo.sku_image)" mode="aspectFill"></image>
<view class="goods-item">
<view class="title">{{ goodsInfo.goods_name }}</view>
<view class="goods-sku">
库存:{{ goodsInfo.stock }}
<text>销量:{{ goodsInfo.sale_num }}</text>
</view>
<view class="goods-price">
<view class="price color-base-text">
<text class="price-util">￥</text>
<text class="price-num">{{ goodsInfo.price }}</text>
</view>
<view class="see-shop color-base-text" @click="go_shop()">
查看商品
<text class="iconfont icon-right"></text>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: 'ns-chat-receiveGoods',
props: {
skuId: {
type: [Number, String]
}
},
data() {
return {
goodsInfo: {}
};
},
mounted() {
this.getInfo();
},
methods: {
getInfo() {
this.$api.sendRequest({
url: '/api/goodssku/detail',
data: {
sku_id: this.skuId
},
success: res => {
if (res.code >= 0) {
this.goodsInfo = res.data.goods_sku_detail;
this.$emit('upDOM');
// that.setPageScrollTo();
}
}
});
},
go_shop() {
this.$util.redirectTo('/pages/goods/detail?goods_id=' + this.goodsInfo.goods_id);
}
}
};
</script>
<style lang="scss">
.goods {
padding: 13rpx 20rpx;
box-sizing: border-box;
width: 100vw;
position: relative;
.goods-msg {
width: 100%;
height: 220rpx;
background: #ffffff;
position: relative;
display: flex;
align-items: center;
border-radius: 20rpx;
margin: 0 auto;
padding: $padding;
box-sizing: border-box;
image {
width: 180rpx;
height: 180rpx;
min-width: 180rpx;
border-radius: $border-radius;
}
.goods-item {
width: 100%;
height: 180rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-left: 20rpx;
box-sizing: border-box;
.title {
width: 100%;
line-height: 1.4;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.goods-sku {
color: $color-sub;
text {
padding-left: $padding;
}
}
.goods-price {
display: flex;
align-items: center;
justify-content: space-between;
.price {
.price-util {
font-size: $font-size-activity-tag;
}
}
.see-shop {
display: flex;
align-items: center;
text {
padding-top: 4rpx;
padding-left: 4rpx;
font-size: $font-size-sub;
}
}
}
}
}
}
</style>

37
pages_tool/components/ns-progress/ns-progress.vue Normal file
View File

@@ -0,0 +1,37 @@
<template>
<view class="progress"><view class="progress-bar " ref="progress" :style="{ width: progress + '%' }"></view></view>
</template>
<script>
export default {
data() {
return {};
},
props: {
progress: {
type: [Number, String],
default: 10
}
}
};
</script>
<style lang="scss">
.progress {
height: 12rpx;
overflow: hidden;
background-color: #ccc;
border-radius: 8rpx;
}
.progress-bar {
float: left;
height: 100%;
font-size: $font-size-tag;
line-height: 40rpx;
color: #fff;
text-align: center;
transition: width 0.6s ease;
background-color: #fff;
}
</style>

6
pages_tool/components/sx-rate/common.js Normal file
View File

@@ -0,0 +1,6 @@
export function getClientRect(selector, component) {
return new Promise((resolve, reject) => {
let query = component ? uni.createSelectorQuery().in(component) : uni.createSelectorQuery();
return query.select(selector).boundingClientRect(resolve).exec()
})
}

218
pages_tool/components/sx-rate/index.vue Normal file
View File

@@ -0,0 +1,218 @@
<template>
<view class="rate-box" :class="[{ animation }, containerClass]" @touchmove="ontouchmove" @touchend="touchMoving = false">
<view
v-for="(val, i) in list"
:key="val"
class="rate"
:style="{ fontSize, paddingLeft: i !== 0 ? rateMargin : 0, paddingRight: i < list.length - 1 ? rateMargin : 0 }"
:class="[
{ scale: !disabled && val <= rateValue && animation && touchMoving, 'color-base-text': val <= rateValue, defaultColor: val > rateValue },
`rate-${i}`,
rateClass
]"
:data-val="val"
@click="onItemClick"
>
<text class="iconfont icon-star"></text>
</view>
</view>
</template>
<script>
import { getClientRect } from './common';
export default {
name: 'sx-rate',
props: {
// 当前值
value: {
type: [Number, String]
},
// 最大星星数量
max: {
type: Number,
default: 5
},
// 禁用
disabled: {
type: Boolean,
default: false
},
// 动画效果
animation: {
type: Boolean,
default: true
},
// 默认星星颜色
defaultColor: {
type: String,
default: '#ccc'
},
// 滑选后星星颜色
activeColor: {
type: String
// default: '#FFB700'
},
// 星星大小
fontSize: {
type: String,
default: 'inherit'
},
// 星星间距
margin: {
type: String,
default: ''
},
// 自定义类名-容器
containerClass: {
type: String,
default: ''
},
// 自定义类名-星星
rateClass: {
type: String,
default: ''
},
index: {
// 如果页面中存在多个该组件，通过该属性区分
type: [Number, String]
}
},
data() {
return {
rateValue: 0,
touchMoving: false,
startX: [],
startW: 30
};
},
computed: {
list() {
return [...new Array(this.max)].map((_, i) => i + 1);
},
rateMargin() {
let margin = this.margin;
if (!margin) return 0;
switch (typeof margin) {
case 'number':
margin = margin * 2 + 'rpx';
case 'string':
break;
default:
return 0;
}
let reg = /^(\d+)([^\d]*)/;
let result = reg.exec(margin);
if (!result) return 0;
let [_, num, unit] = result;
return num / 2 + unit;
}
},
watch: {
value: {
handler(val) {
this.rateValue = val;
},
immediate: true
}
},
methods: {
// 计算星星位置
async initStartX() {
let { max } = this;
this.startX = [];
for (let i = 0; i < max; i++) {
let selector = `.rate-${i}`;
let { left, width } = await getClientRect(selector, this);
this.startX.push(left);
this.startW = width;
}
},
/**
* 手指滑动事件回调
* https://github.com/sunxi1997/uni-app-sx-rate/pull/1
* 原本的触摸处理在自定了样式后可能会出现bug, 已解决
*/
async ontouchmove(e) {
if (!this.touchMoving) {
this.touchMoving = true;
// 开始手指滑动时重新计算星星位置,防止星星位置意外变化
await this.initStartX();
}
let { startX, startW, max } = this;
let { touches } = e;
// 触摸焦点停留的位置
let { pageX } = touches[touches.length - 1];
// 超出最左边, 0 星
if (pageX <= startX[0]) return this.toggle(0);
// 刚好在第一颗星
else if (pageX <= startX[0] + startW) return this.toggle(1);
// 超出最右边, 最大星
else if (pageX >= startX[max - 1]) return this.toggle(max);
//计算星星停留的位置
let startXHash = startX.concat(pageX).sort((a, b) => a - b);
this.toggle(startXHash.indexOf(pageX));
},
// 点击回调
onItemClick(e) {
let { val } = e.currentTarget.dataset;
this.toggle(val);
},
// 修改值
toggle(val) {
let { disabled } = this;
if (disabled) return;
if (this.rateValue !== val) {
this.rateValue = val;
this.$emit('update:value', val);
let data = {
index: this.index,
value: val
};
this.$emit('change', data);
}
}
},
mounted() {}
};
</script>
<style scoped>
@import './sx-rate/iconfont.css';
</style>
<style lang="scss">
.rate-box {
min-height: 1.4em;
display: flex;
align-items: center;
}
.rate {
display: inline-flex;
justify-content: center;
align-items: center;
width: 1.2em;
transition: all 0.15s linear;
}
.rate.scale {
transform: scale(1.1);
}
.defaultColor {
color: #ccc !important;
}
.activeColor {
}
</style>

21
pages_tool/components/sx-rate/sx-rate/iconfont.css Normal file
View File

@@ -0,0 +1,21 @@
@font-face {font-family: "iconfont";
src: url('~@/pages_tool/components/sx-rate/sx-rate/iconfont.eot?t=1574760464482'); /* IE9 */
src: url('~@/pages_tool/components/sx-rate/sx-rate/iconfont.eot?t=1574760464482#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAK8AAsAAAAABnAAAAJwAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAp8gQgBNgIkAwgLBgAEIAWEbQcuG6wFyA4lTcHACOEZBUg8fL/2O3f3fTHEkoh28SSayCSxkkgQG6Uz3UvYITu9Qr5K0Vh6Ij6f+8CXKzVBHDvWa6d0lSfK57mc3gQ6kGt8oBz3ojUG9QLqxYEU6B4YRVYqecPYBS7hMYG6QWF0dlOycoGxxFoViFuxkALGuYAksXRVKNccTOJdSTV7zbSAt/D78Y8XxmRKOavq5CZZAOK+7u2svLVode0TggR0vIQc84BEXNQmjugJxumpJ/SNAvsqD77ui8K3i71aBPvrrNIm6IfSe5K58ltNZ3BbU40Blkf9OmKsIW/Un1qddc4dcSma3ArIX7PPXdlxK5l2zJ+aD6TXnQqmu330wqpeWkYN/OnNm/0trU+YvqNR4UN99f+x/tApIFTfR7u39X4gKPnb9pOX5RAQB6DYyc/zOKCD4OUp6KiiPeqnapbAp56NdegrdhLo5wKq+3UG/0fWcyDpCsuWJVVWO5oZO29bXR0FwJ4uV2ONvTeTCVW9I1wVAylyVeNkYudR0rCOsqoN1M1JPd7QDdMTqYZZXQChwwYybT6Q63BIJvYSJX1eUNYReqi7CrsLGyZDbJqIEUWQAPLroJhWKhjHQUyj8mwkrJJROKsI+XyENeIw5LI4xXQqUiA8xxZNtZBHCAMZrJTDFPAcksmUUIWVEkQTlogQVQSbzdS9iUUr5cDUDgyhEIgAxFcHEqMpKTD+eMK09PlsiFAVGQpu6atJ5kMwDfHsEBcLpweZqlX06ruXVzSqCfEQBANiYEpyUAqYh8jIKEGq+nkSCI1gEY2IqURg28OYvlrW+nr5152AOsuUhV2fSy+EwgAAAA==') format('woff2'),
url('~@/pages_tool/components/sx-rate/sx-rate/iconfont.woff?t=1574760464482') format('woff'),
url('~@/pages_tool/components/sx-rate/sx-rate/iconfont.ttf?t=1574760464482') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('~@/pages_tool/components/sx-rate/sx-rate/iconfont.svg?t=1574760464482#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: inherit;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-star:before {
content: "\e6e3";
}

BIN
pages_tool/components/sx-rate/sx-rate/iconfont.eot Normal file
View File

Binary file not shown.

29
pages_tool/components/sx-rate/sx-rate/iconfont.svg Normal file
View File

@@ -0,0 +1,29 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<!--
2013-9-30: Created.
-->
<svg>
<metadata>
Created by iconfont
</metadata>
<defs>
<font id="iconfont" horiz-adv-x="1024" >
<font-face
font-family="iconfont"
font-weight="500"
font-stretch="normal"
units-per-em="1024"
ascent="896"
descent="-128"
/>
<missing-glyph />
<glyph glyph-name="star" unicode="&#59107;" d="M544.256 812.032l117.248-237.568c5.12-10.752 15.36-17.92 27.136-19.456l262.144-37.888c29.696-4.096 41.472-40.448 19.968-61.44l-189.44-184.832c-8.704-8.192-12.288-19.968-10.24-31.744l44.544-261.12c5.12-29.184-25.6-51.712-52.224-37.888l-234.496 123.392c-10.24 5.632-23.04 5.632-33.28 0L261.12-59.904c-26.112-13.824-57.344 8.704-52.224 37.888l44.544 261.12c2.048 11.776-2.048 23.552-10.24 31.744L53.76 455.68C32.256 476.16 44.032 512.512 73.728 517.12l262.144 37.888c11.776 1.536 22.016 9.216 27.136 19.456l117.248 237.568C493.056 838.656 530.944 838.656 544.256 812.032z" horiz-adv-x="1024" />
</font>
</defs></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
pages_tool/components/sx-rate/sx-rate/iconfont.ttf Normal file
View File

Binary file not shown.

BIN
pages_tool/components/sx-rate/sx-rate/iconfont.woff Normal file
View File

Binary file not shown.

BIN
pages_tool/components/sx-rate/sx-rate/iconfont.woff2 Normal file
View File

Binary file not shown.

623
pages_tool/components/uni-calendar/calendar.js Normal file
View File

@@ -0,0 +1,623 @@
/**
* @1900-2100区间内的公历、农历互转
* @charset UTF-8
* @github https://github.com/jjonline/calendar.js
* @Author Jea杨(JJonline@JJonline.Cn)
* @Time 2014-7-21
* @Time 2016-8-13 Fixed 2033hex、Attribution Annals
* @Time 2016-9-25 Fixed lunar LeapMonth Param Bug
* @Time 2017-7-24 Fixed use getTerm Func Param Error.use solar year,NOT lunar year
* @Version 1.0.3
* @公历转农历：calendar.solar2lunar(1987,11,01); //[you can ignore params of prefix 0]
* @农历转公历：calendar.lunar2solar(1987,09,10); //[you can ignore params of prefix 0]
*/
/* eslint-disable */
var calendar = {
/**
* 农历1900-2100的润大小信息表
* @Array Of Property
* @return Hex
*/
lunarInfo: [0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0,
0x055d2, // 1900-1909
0x04ae0, 0x0a5b6, 0x0a4d0, 0x0d250, 0x1d255, 0x0b540, 0x0d6a0, 0x0ada2, 0x095b0, 0x14977, // 1910-1919
0x04970, 0x0a4b0, 0x0b4b5, 0x06a50, 0x06d40, 0x1ab54, 0x02b60, 0x09570, 0x052f2, 0x04970, // 1920-1929
0x06566, 0x0d4a0, 0x0ea50, 0x06e95, 0x05ad0, 0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950, // 1930-1939
0x0d4a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1a5b4, 0x025d0, 0x092d0, 0x0d2b2, 0x0a950, 0x0b557, // 1940-1949
0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5b0, 0x14573, 0x052b0, 0x0a9a8, 0x0e950, 0x06aa0, // 1950-1959
0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0, // 1960-1969
0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b6a0, 0x195a6, // 1970-1979
0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570, // 1980-1989
0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x05ac0, 0x0ab60, 0x096d5, 0x092e0, // 1990-1999
0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5, // 2000-2009
0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930, // 2010-2019
0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530, // 2020-2029
0x05aa0, 0x076a3, 0x096d0, 0x04afb, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45, // 2030-2039
0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0, // 2040-2049
/** Add By JJonline@JJonline.Cn**/
0x14b63, 0x09370, 0x049f8, 0x04970, 0x064b0, 0x168a6, 0x0ea50, 0x06b20, 0x1a6c4, 0x0aae0, // 2050-2059
0x0a2e0, 0x0d2e3, 0x0c960, 0x0d557, 0x0d4a0, 0x0da50, 0x05d55, 0x056a0, 0x0a6d0, 0x055d4, // 2060-2069
0x052d0, 0x0a9b8, 0x0a950, 0x0b4a0, 0x0b6a6, 0x0ad50, 0x055a0, 0x0aba4, 0x0a5b0, 0x052b0, // 2070-2079
0x0b273, 0x06930, 0x07337, 0x06aa0, 0x0ad50, 0x14b55, 0x04b60, 0x0a570, 0x054e4, 0x0d160, // 2080-2089
0x0e968, 0x0d520, 0x0daa0, 0x16aa6, 0x056d0, 0x04ae0, 0x0a9d4, 0x0a2d0, 0x0d150, 0x0f252, // 2090-2099
0x0d520
], // 2100
/**
* 公历每个月份的天数普通表
* @Array Of Property
* @return Number
*/
solarMonth: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
/**
* 天干地支之天干速查表
* @Array Of Property trans["甲","乙","丙","丁","戊","己","庚","辛","壬","癸"]
* @return Cn string
*/
Gan: ['\u7532', '\u4e59', '\u4e19', '\u4e01', '\u620a', '\u5df1', '\u5e9a', '\u8f9b', '\u58ec', '\u7678'],
/**
* 天干地支之地支速查表
* @Array Of Property
* @trans["子","丑","寅","卯","辰","巳","午","未","申","酉","戌","亥"]
* @return Cn string
*/
Zhi: ['\u5b50', '\u4e11', '\u5bc5', '\u536f', '\u8fb0', '\u5df3', '\u5348', '\u672a', '\u7533', '\u9149',
'\u620c',
'\u4ea5'
],
/**
* 天干地支之地支速查表<=>生肖
* @Array Of Property
* @trans["鼠","牛","虎","兔","龙","蛇","马","羊","猴","鸡","狗","猪"]
* @return Cn string
*/
Animals: ['\u9f20', '\u725b', '\u864e', '\u5154', '\u9f99', '\u86c7', '\u9a6c', '\u7f8a', '\u7334', '\u9e21',
'\u72d7', '\u732a'
],
/**
* 24节气速查表
* @Array Of Property
* @trans["小寒","大寒","立春","雨水","惊蛰","春分","清明","谷雨","立夏","小满","芒种","夏至","小暑","大暑","立秋","处暑","白露","秋分","寒露","霜降","立冬","小雪","大雪","冬至"]
* @return Cn string
*/
solarTerm: ['\u5c0f\u5bd2', '\u5927\u5bd2', '\u7acb\u6625', '\u96e8\u6c34', '\u60ca\u86f0', '\u6625\u5206',
'\u6e05\u660e', '\u8c37\u96e8', '\u7acb\u590f', '\u5c0f\u6ee1', '\u8292\u79cd', '\u590f\u81f3',
'\u5c0f\u6691',
'\u5927\u6691', '\u7acb\u79cb', '\u5904\u6691', '\u767d\u9732', '\u79cb\u5206', '\u5bd2\u9732',
'\u971c\u964d',
'\u7acb\u51ac', '\u5c0f\u96ea', '\u5927\u96ea', '\u51ac\u81f3'
],
/**
* 1900-2100各年的24节气日期速查表
* @Array Of Property
* @return 0x string For splice
*/
sTermInfo: ['9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
'97bcf97c3598082c95f8c965cc920f',
'97bd0b06bdb0722c965ce1cfcc920f', 'b027097bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
'97bcf97c359801ec95f8c965cc920f', '97bd0b06bdb0722c965ce1cfcc920f', 'b027097bd097c36b0b6fc9274c91aa',
'97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd0b06bdb0722c965ce1cfcc920f',
'b027097bd097c36b0b6fc9274c91aa', '9778397bd19801ec9210c965cc920e', '97b6b97bd19801ec95f8c965cc920f',
'97bd09801d98082c95f8e1cfcc920f', '97bd097bd097c36b0b6fc9210c8dc2', '9778397bd197c36c9210c9274c91aa',
'97b6b97bd19801ec95f8c965cc920e', '97bd09801d98082c95f8e1cfcc920f', '97bd097bd097c36b0b6fc9210c8dc2',
'9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec95f8c965cc920e', '97bcf97c3598082c95f8e1cfcc920f',
'97bd097bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec9210c965cc920e',
'97bcf97c3598082c95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
'97b6b97bd19801ec9210c965cc920e', '97bcf97c3598082c95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722',
'9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f',
'97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
'97bcf97c359801ec95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
'97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd097bd07f595b0b6fc920fb0722',
'9778397bd097c36b0b6fc9210c8dc2', '9778397bd19801ec9210c9274c920e', '97b6b97bd19801ec95f8c965cc920f',
'97bd07f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c920e',
'97b6b97bd19801ec95f8c965cc920f', '97bd07f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2',
'9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bd07f1487f595b0b0bc920fb0722',
'7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
'97bcf7f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
'97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
'9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f531b0b0bb0b6fb0722',
'7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
'97bcf7f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
'97b6b97bd19801ec9210c9274c920e', '97bcf7f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
'9778397bd097c36b0b6fc9210c91aa', '97b6b97bd197c36c9210c9274c920e', '97bcf7f0e47f531b0b0bb0b6fb0722',
'7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c920e',
'97b6b7f0e47f531b0723b0b6fb0722', '7f0e37f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2',
'9778397bd097c36b0b70c9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e37f1487f595b0b0bb0b6fb0722',
'7f0e397bd097c35b0b6fc9210c8dc2', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721',
'7f0e27f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
'97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
'9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
'7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721',
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
'97b6b7f0e47f531b0723b0787b0721', '7f0e27f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
'9778397bd097c36b0b6fc9210c91aa', '97b6b7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
'7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c8dc2', '977837f0e37f149b0723b0787b0721',
'7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f5307f595b0b0bc920fb0722', '7f0e397bd097c35b0b6fc9210c8dc2',
'977837f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e37f1487f595b0b0bb0b6fb0722',
'7f0e397bd097c35b0b6fc9210c8dc2', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '977837f0e37f14998082b0787b06bd',
'7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
'977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
'7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14998082b0787b06bd',
'7f07e7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
'977837f0e37f14998082b0723b06bd', '7f07e7f0e37f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
'7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b0721',
'7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f1487f595b0b0bb0b6fb0722', '7f0e37f0e37f14898082b0723b02d5',
'7ec967f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f1487f531b0b0bb0b6fb0722',
'7f0e37f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
'7f0e37f1487f531b0b0bb0b6fb0722', '7f0e37f0e37f14898082b072297c35', '7ec967f0e37f14998082b0787b06bd',
'7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e37f0e37f14898082b072297c35',
'7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
'7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f149b0723b0787b0721',
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14998082b0723b06bd',
'7f07e7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722', '7f0e37f0e366aa89801eb072297c35',
'7ec967f0e37f14998082b0723b06bd', '7f07e7f0e37f14998083b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
'7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14898082b0723b02d5', '7f07e7f0e37f14998082b0787b0721',
'7f07e7f0e47f531b0723b0b6fb0722', '7f0e36665b66aa89801e9808297c35', '665f67f0e37f14898082b0723b02d5',
'7ec967f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e36665b66a449801e9808297c35',
'665f67f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
'7f0e36665b66a449801e9808297c35', '665f67f0e37f14898082b072297c35', '7ec967f0e37f14998082b0787b06bd',
'7f07e7f0e47f531b0723b0b6fb0721', '7f0e26665b66a449801e9808297c35', '665f67f0e37f1489801eb072297c35',
'7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722'
],
/**
* 数字转中文速查表
* @Array Of Property
* @trans ['日','一','二','三','四','五','六','七','八','九','十']
* @return Cn string
*/
nStr1: ['\u65e5', '\u4e00', '\u4e8c', '\u4e09', '\u56db', '\u4e94', '\u516d', '\u4e03', '\u516b', '\u4e5d',
'\u5341'
],
/**
* 日期转农历称呼速查表
* @Array Of Property
* @trans ['初','十','廿','卅']
* @return Cn string
*/
nStr2: ['\u521d', '\u5341', '\u5eff', '\u5345'],
/**
* 月份转农历称呼速查表
* @Array Of Property
* @trans ['正','一','二','三','四','五','六','七','八','九','十','冬','腊']
* @return Cn string
*/
nStr3: ['\u6b63', '\u4e8c', '\u4e09', '\u56db', '\u4e94', '\u516d', '\u4e03', '\u516b', '\u4e5d', '\u5341',
'\u51ac',
'\u814a'
],
/**
* 返回农历y年一整年的总天数
* @param lunar Year
* @return Number
* @eg:var count = calendar.lYearDays(1987) ;//count=387
*/
lYearDays: function(y) {
var i;
var sum = 348
for (i = 0x8000; i > 0x8; i >>= 1) {
sum += (this.lunarInfo[y - 1900] & i) ? 1 : 0
}
return (sum + this.leapDays(y))
},
/**
* 返回农历y年闰月是哪个月；若y年没有闰月 则返回0
* @param lunar Year
* @return Number (0-12)
* @eg:var leapMonth = calendar.leapMonth(1987) ;//leapMonth=6
*/
leapMonth: function(y) { // 闰字编码 \u95f0
return (this.lunarInfo[y - 1900] & 0xf)
},
/**
* 返回农历y年闰月的天数 若该年没有闰月则返回0
* @param lunar Year
* @return Number (0、29、30)
* @eg:var leapMonthDay = calendar.leapDays(1987) ;//leapMonthDay=29
*/
leapDays: function(y) {
if (this.leapMonth(y)) {
return ((this.lunarInfo[y - 1900] & 0x10000) ? 30 : 29)
}
return (0)
},
/**
* 返回农历y年m月（非闰月）的总天数，计算m为闰月时的天数请使用leapDays方法
* @param lunar Year
* @return Number (-1、29、30)
* @eg:var MonthDay = calendar.monthDays(1987,9) ;//MonthDay=29
*/
monthDays: function(y, m) {
if (m > 12 || m < 1) {
return -1
} // 月份参数从1至12，参数错误返回-1
return ((this.lunarInfo[y - 1900] & (0x10000 >> m)) ? 30 : 29)
},
/**
* 返回公历(!)y年m月的天数
* @param solar Year
* @return Number (-1、28、29、30、31)
* @eg:var solarMonthDay = calendar.leapDays(1987) ;//solarMonthDay=30
*/
solarDays: function(y, m) {
if (m > 12 || m < 1) {
return -1
} // 若参数错误 返回-1
var ms = m - 1
if (ms == 1) { // 2月份的闰平规律测算后确认返回28或29
return (((y % 4 == 0) && (y % 100 != 0) || (y % 400 == 0)) ? 29 : 28)
} else {
return (this.solarMonth[ms])
}
},
/**
* 农历年份转换为干支纪年
* @param lYear 农历年的年份数
* @return Cn string
*/
toGanZhiYear: function(lYear) {
var ganKey = (lYear - 3) % 10
var zhiKey = (lYear - 3) % 12
if (ganKey == 0) ganKey = 10 // 如果余数为0则为最后一个天干
if (zhiKey == 0) zhiKey = 12 // 如果余数为0则为最后一个地支
return this.Gan[ganKey - 1] + this.Zhi[zhiKey - 1]
},
/**
* 公历月、日判断所属星座
* @param cMonth [description]
* @param cDay [description]
* @return Cn string
*/
toAstro: function(cMonth, cDay) {
var s =
'\u9b54\u7faf\u6c34\u74f6\u53cc\u9c7c\u767d\u7f8a\u91d1\u725b\u53cc\u5b50\u5de8\u87f9\u72ee\u5b50\u5904\u5973\u5929\u79e4\u5929\u874e\u5c04\u624b\u9b54\u7faf'
var arr = [20, 19, 21, 21, 21, 22, 23, 23, 23, 23, 22, 22]
return s.substr(cMonth * 2 - (cDay < arr[cMonth - 1] ? 2 : 0), 2) + '\u5ea7' // 座
},
/**
* 传入offset偏移量返回干支
* @param offset 相对甲子的偏移量
* @return Cn string
*/
toGanZhi: function(offset) {
return this.Gan[offset % 10] + this.Zhi[offset % 12]
},
/**
* 传入公历(!)y年获得该年第n个节气的公历日期
* @param y公历年(1900-2100)；n二十四节气中的第几个节气(1~24)；从n=1(小寒)算起
* @return day Number
* @eg:var _24 = calendar.getTerm(1987,3) ;//_24=4;意即1987年2月4日立春
*/
getTerm: function(y, n) {
if (y < 1900 || y > 2100) {
return -1
}
if (n < 1 || n > 24) {
return -1
}
var _table = this.sTermInfo[y - 1900]
var _info = [
parseInt('0x' + _table.substr(0, 5)).toString(),
parseInt('0x' + _table.substr(5, 5)).toString(),
parseInt('0x' + _table.substr(10, 5)).toString(),
parseInt('0x' + _table.substr(15, 5)).toString(),
parseInt('0x' + _table.substr(20, 5)).toString(),
parseInt('0x' + _table.substr(25, 5)).toString()
]
var _calday = [
_info[0].substr(0, 1),
_info[0].substr(1, 2),
_info[0].substr(3, 1),
_info[0].substr(4, 2),
_info[1].substr(0, 1),
_info[1].substr(1, 2),
_info[1].substr(3, 1),
_info[1].substr(4, 2),
_info[2].substr(0, 1),
_info[2].substr(1, 2),
_info[2].substr(3, 1),
_info[2].substr(4, 2),
_info[3].substr(0, 1),
_info[3].substr(1, 2),
_info[3].substr(3, 1),
_info[3].substr(4, 2),
_info[4].substr(0, 1),
_info[4].substr(1, 2),
_info[4].substr(3, 1),
_info[4].substr(4, 2),
_info[5].substr(0, 1),
_info[5].substr(1, 2),
_info[5].substr(3, 1),
_info[5].substr(4, 2)
]
return parseInt(_calday[n - 1])
},
/**
* 传入农历数字月份返回汉语通俗表示法
* @param lunar month
* @return Cn string
* @eg:var cnMonth = calendar.toChinaMonth(12) ;//cnMonth='腊月'
*/
toChinaMonth: function(m) { // 月 => \u6708
if (m > 12 || m < 1) {
return -1
} // 若参数错误 返回-1
var s = this.nStr3[m - 1]
s += '\u6708' // 加上月字
return s
},
/**
* 传入农历日期数字返回汉字表示法
* @param lunar day
* @return Cn string
* @eg:var cnDay = calendar.toChinaDay(21) ;//cnMonth='廿一'
*/
toChinaDay: function(d) { // 日 => \u65e5
var s
switch (d) {
case 10:
s = '\u521d\u5341';
break
case 20:
s = '\u4e8c\u5341';
break
break
case 30:
s = '\u4e09\u5341';
break
break
default:
s = this.nStr2[Math.floor(d / 10)]
s += this.nStr1[d % 10]
}
return (s)
},
/**
* 年份转生肖[!仅能大致转换] => 精确划分生肖分界线是“立春”
* @param y year
* @return Cn string
* @eg:var animal = calendar.getAnimal(1987) ;//animal='兔'
*/
getAnimal: function(y) {
return this.Animals[(y - 4) % 12]
},
/**
* 传入阳历年月日获得详细的公历、农历object信息 <=>JSON
* @param y solar year
* @param m solar month
* @param d solar day
* @return JSON object
* @eg:console.log(calendar.solar2lunar(1987,11,01));
*/
solar2lunar: function(y, m, d) { // 参数区间1900.1.31~2100.12.31
// 年份限定、上限
if (y < 1900 || y > 2100) {
return -1 // undefined转换为数字变为NaN
}
// 公历传参最下限
if (y == 1900 && m == 1 && d < 31) {
return -1
}
// 未传参 获得当天
if (!y) {
var objDate = new Date()
} else {
var objDate = new Date(y, parseInt(m) - 1, d)
}
var i;
var leap = 0;
var temp = 0
// 修正ymd参数
var y = objDate.getFullYear()
var m = objDate.getMonth() + 1
var d = objDate.getDate()
var offset = (Date.UTC(objDate.getFullYear(), objDate.getMonth(), objDate.getDate()) - Date.UTC(1900, 0,
31)) /
86400000
for (i = 1900; i < 2101 && offset > 0; i++) {
temp = this.lYearDays(i)
offset -= temp
}
if (offset < 0) {
offset += temp;
i--
}
// 是否今天
var isTodayObj = new Date()
var isToday = false
if (isTodayObj.getFullYear() == y && isTodayObj.getMonth() + 1 == m && isTodayObj.getDate() == d) {
isToday = true
}
// 星期几
var nWeek = objDate.getDay()
var cWeek = this.nStr1[nWeek]
// 数字表示周几顺应天朝周一开始的惯例
if (nWeek == 0) {
nWeek = 7
}
// 农历年
var year = i
var leap = this.leapMonth(i) // 闰哪个月
var isLeap = false
// 效验闰月
for (i = 1; i < 13 && offset > 0; i++) {
// 闰月
if (leap > 0 && i == (leap + 1) && isLeap == false) {
--i
isLeap = true;
temp = this.leapDays(year) // 计算农历闰月天数
} else {
temp = this.monthDays(year, i) // 计算农历普通月天数
}
// 解除闰月
if (isLeap == true && i == (leap + 1)) {
isLeap = false
}
offset -= temp
}
// 闰月导致数组下标重叠取反
if (offset == 0 && leap > 0 && i == leap + 1) {
if (isLeap) {
isLeap = false
} else {
isLeap = true;
--i
}
}
if (offset < 0) {
offset += temp;
--i
}
// 农历月
var month = i
// 农历日
var day = offset + 1
// 天干地支处理
var sm = m - 1
var gzY = this.toGanZhiYear(year)
// 当月的两个节气
// bugfix-2017-7-24 11:03:38 use lunar Year Param `y` Not `year`
var firstNode = this.getTerm(y, (m * 2 - 1)) // 返回当月「节」为几日开始
var secondNode = this.getTerm(y, (m * 2)) // 返回当月「节」为几日开始
// 依据12节气修正干支月
var gzM = this.toGanZhi((y - 1900) * 12 + m + 11)
if (d >= firstNode) {
gzM = this.toGanZhi((y - 1900) * 12 + m + 12)
}
// 传入的日期的节气与否
var isTerm = false
var Term = null
if (firstNode == d) {
isTerm = true
Term = this.solarTerm[m * 2 - 2]
}
if (secondNode == d) {
isTerm = true
Term = this.solarTerm[m * 2 - 1]
}
// 日柱 当月一日与 1900/1/1 相差天数
var dayCyclical = Date.UTC(y, sm, 1, 0, 0, 0, 0) / 86400000 + 25567 + 10
var gzD = this.toGanZhi(dayCyclical + d - 1)
// 该日期所属的星座
var astro = this.toAstro(m, d)
return {
'lYear': year,
'lMonth': month,
'lDay': day,
'Animal': this.getAnimal(year),
'IMonthCn': (isLeap ? '\u95f0' : '') + this.toChinaMonth(month),
'IDayCn': this.toChinaDay(day),
'cYear': y,
'cMonth': m,
'cDay': d,
'gzYear': gzY,
'gzMonth': gzM,
'gzDay': gzD,
'isToday': isToday,
'isLeap': isLeap,
'nWeek': nWeek,
'ncWeek': '\u661f\u671f' + cWeek,
'isTerm': isTerm,
'Term': Term,
'astro': astro
}
},
/**
* 传入农历年月日以及传入的月份是否闰月获得详细的公历、农历object信息 <=>JSON
* @param y lunar year
* @param m lunar month
* @param d lunar day
* @param isLeapMonth lunar month is leap or not.[如果是农历闰月第四个参数赋值true即可]
* @return JSON object
* @eg:console.log(calendar.lunar2solar(1987,9,10));
*/
lunar2solar: function(y, m, d, isLeapMonth) { // 参数区间1900.1.31~2100.12.1
var isLeapMonth = !!isLeapMonth
var leapOffset = 0
var leapMonth = this.leapMonth(y)
var leapDay = this.leapDays(y)
if (isLeapMonth && (leapMonth != m)) {
return -1
} // 传参要求计算该闰月公历 但该年得出的闰月与传参的月份并不同
if (y == 2100 && m == 12 && d > 1 || y == 1900 && m == 1 && d < 31) {
return -1
} // 超出了最大极限值
var day = this.monthDays(y, m)
var _day = day
// bugFix 2016-9-25
// if month is leap, _day use leapDays method
if (isLeapMonth) {
_day = this.leapDays(y, m)
}
if (y < 1900 || y > 2100 || d > _day) {
return -1
} // 参数合法性效验
// 计算农历的时间差
var offset = 0
for (var i = 1900; i < y; i++) {
offset += this.lYearDays(i)
}
var leap = 0;
var isAdd = false
for (var i = 1; i < m; i++) {
leap = this.leapMonth(y)
if (!isAdd) { // 处理闰月
if (leap <= i && leap > 0) {
offset += this.leapDays(y);
isAdd = true
}
}
offset += this.monthDays(y, i)
}
// 转换闰月农历 需补充该年闰月的前一个月的时差
if (isLeapMonth) {
offset += day
}
// 1900年农历正月一日的公历时间为1900年1月30日0时0分0秒(该时间也是本农历的最开始起始点)
var stmap = Date.UTC(1900, 1, 30, 0, 0, 0)
var calObj = new Date((offset + d - 31) * 86400000 + stmap)
var cY = calObj.getUTCFullYear()
var cM = calObj.getUTCMonth() + 1
var cD = calObj.getUTCDate()
return this.solar2lunar(cY, cM, cD)
}
}
export default calendar

186
pages_tool/components/uni-calendar/uni-calendar-item.vue Normal file
View File

@@ -0,0 +1,186 @@
<template>
<view
class="uni-calendar-item__weeks-box"
:class="{
'uni-calendar-item--disable': weeks.disable,
'uni-calendar-item--isDay': calendar.fullDate === weeks.fullDate && weeks.isDay,
'uni-calendar-item--checked': calendar.fullDate === weeks.fullDate && !weeks.isDay,
'uni-calendar-item--before-checked': weeks.beforeMultiple,
'uni-calendar-item--multiple': weeks.multiple,
'uni-calendar-item--after-checked': weeks.afterMultiple
}"
@click="choiceDate(weeks)"
>
<view class="uni-calendar-item__weeks-box-item">
<text v-if="selected && weeks.extraInfo" class="uni-calendar-item__weeks-box-circle"></text>
<text class="uni-calendar-item__weeks-box-text"
:class="{
'uni-calendar-item--isDay-text': weeks.isDay,
'uni-calendar-item--isDay': calendar.fullDate === weeks.fullDate && weeks.isDay,
'uni-calendar-item--checked': calendar.fullDate === weeks.fullDate && !weeks.isDay,
'uni-calendar-item--before-checked': weeks.beforeMultiple,
'uni-calendar-item--multiple': weeks.multiple,
'uni-calendar-item--after-checked': weeks.afterMultiple,
'uni-calendar-item--disable': weeks.disable
}"
>
{{ weeks.date }}
</text>
<text v-if="!lunar && !weeks.extraInfo && weeks.isDay" class="uni-calendar-item__weeks-lunar-text"
:class="{
'uni-calendar-item--isDay-text': weeks.isDay,
'uni-calendar-item--isDay': calendar.fullDate === weeks.fullDate && weeks.isDay,
'uni-calendar-item--checked': calendar.fullDate === weeks.fullDate && !weeks.isDay,
'uni-calendar-item--before-checked': weeks.beforeMultiple,
'uni-calendar-item--multiple': weeks.multiple,
'uni-calendar-item--after-checked': weeks.afterMultiple
}"
></text>
<text v-if="lunar && !weeks.extraInfo" class="uni-calendar-item__weeks-lunar-text"
:class="{
'uni-calendar-item--isDay-text': weeks.isDay,
'uni-calendar-item--isDay': calendar.fullDate === weeks.fullDate && weeks.isDay,
'uni-calendar-item--checked': calendar.fullDate === weeks.fullDate && !weeks.isDay,
'uni-calendar-item--before-checked': weeks.beforeMultiple,
'uni-calendar-item--multiple': weeks.multiple,
'uni-calendar-item--after-checked': weeks.afterMultiple,
'uni-calendar-item--disable': weeks.disable
}"
>
{{ weeks.isDay ? '今天' : weeks.lunar.IDayCn === '初一' ? weeks.lunar.IMonthCn : weeks.lunar.IDayCn }}
</text>
<text v-if="weeks.extraInfo && weeks.extraInfo.info" class="uni-calendar-item__weeks-lunar-text"
:class="{
'uni-calendar-item--extra': weeks.extraInfo.info,
'uni-calendar-item--isDay-text': weeks.isDay,
'uni-calendar-item--isDay': calendar.fullDate === weeks.fullDate && weeks.isDay,
'uni-calendar-item--checked': calendar.fullDate === weeks.fullDate && !weeks.isDay,
'uni-calendar-item--before-checked': weeks.beforeMultiple,
'uni-calendar-item--multiple': weeks.multiple,
'uni-calendar-item--after-checked': weeks.afterMultiple,
'uni-calendar-item--disable': weeks.disable
}"
>
{{ weeks.extraInfo.info }}
</text>
</view>
</view>
</template>
<script>
export default {
props: {
weeks: {
type: Object,
default() {
return {};
}
},
calendar: {
type: Object,
default: () => {
return {};
}
},
selected: {
type: Array,
default: () => {
return [];
}
},
lunar: {
type: Boolean,
default: false
}
},
methods: {
choiceDate(weeks) {
this.$emit('change', weeks);
}
}
};
</script>
<style lang="scss" scoped>
.uni-calendar-item__weeks-box {
flex: 1;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
align-items: center;
}
.uni-calendar-item__weeks-box-text {
font-size: 24rpx;
color: #fff;
}
.uni-calendar-item__weeks-lunar-text {
font-size: $uni-font-size-base;
color: $uni-text-color;
}
.uni-calendar-item__weeks-box-item {
position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
align-items: center;
width: 100rpx;
height: 100rpx;
border-radius: 50%;
}
.uni-calendar-item__weeks-box-circle {
position: absolute;
top: 10rpx;
right: 10rpx;
width: 16rpx;
height: 16rpx;
border-radius: 16rpx;
background-color: $uni-color-error;
}
.uni-calendar-item--disable {
color: #feaa93;
}
.uni-calendar-item--isDay-text {
color: #fff;
}
.uni-calendar-item--isDay {
color: #000;
background-color: #fff;
border-radius: 50%;
}
.uni-calendar-item--extra {
// color: $uni-color-error;
// opacity: 0.8;
}
.uni-calendar-item--checked {
color: #fff;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
}
.uni-calendar-item--multiple {
background-color: $uni-color-primary;
color: #fff;
opacity: 0.8;
}
.uni-calendar-item--before-checked {
background-color: #ff5a5f;
color: #fff;
}
.uni-calendar-item--after-checked {
background-color: #ff5a5f;
color: #fff;
}
</style>

476
pages_tool/components/uni-calendar/uni-calendar.vue Normal file
View File

@@ -0,0 +1,476 @@
<template>
<view class="uni-calendar">
<view v-if="!insert && show" class="uni-calendar__mask" :class="{ 'uni-calendar--mask-show': aniMaskShow }" @click="clean"></view>
<view v-if="insert || show" class="uni-calendar__content" :class="{ 'uni-calendar--fixed': !insert, 'uni-calendar--ani-show': aniMaskShow }">
<view v-if="!insert" class="uni-calendar__header uni-calendar--fixed-top">
<view class="uni-calendar__header-btn-box" @click="close"><text class="uni-calendar__header-text uni-calendar--fixed-width">取消</text></view>
<view class="uni-calendar__header-btn-box" @click="confirm"><text class="uni-calendar__header-text uni-calendar--fixed-width">确定</text></view>
</view>
<view class="uni-calendar__header">
<view class="uni-calendar__header-btn-box" @click.stop="pre">
<!-- <view class="uni-calendar__header-btn uni-calendar--left"></view> -->
<text class="iconfont icon-back_light"></text>
</view>
<picker mode="date" :value="date" fields="month" @change="bindDateChange">
<text class="uni-calendar__header-text">{{ (nowDate.year || '') + '年' + (nowDate.month || '') + '月' }}</text>
</picker>
<view class="uni-calendar__header-btn-box" @click.stop="next">
<!-- <view class="uni-calendar__header-btn uni-calendar--right"></view> -->
<text class="iconfont icon-right"></text>
</view>
</view>
<view class="uni-calendar__box">
<view v-if="showMonth" class="uni-calendar__box-bg">
<text class="uni-calendar__box-bg-text">{{ nowDate.month }}</text>
</view>
<view class="uni-calendar__weeks">
<view class="uni-calendar__weeks-day"><text class="uni-calendar__weeks-day-text">日</text></view>
<view class="uni-calendar__weeks-day"><text class="uni-calendar__weeks-day-text">一</text></view>
<view class="uni-calendar__weeks-day"><text class="uni-calendar__weeks-day-text">二</text></view>
<view class="uni-calendar__weeks-day"><text class="uni-calendar__weeks-day-text">三</text></view>
<view class="uni-calendar__weeks-day"><text class="uni-calendar__weeks-day-text">四</text></view>
<view class="uni-calendar__weeks-day"><text class="uni-calendar__weeks-day-text">五</text></view>
<view class="uni-calendar__weeks-day"><text class="uni-calendar__weeks-day-text">六</text></view>
</view>
<view class="uni-calendar__weeks" v-for="(item, weekIndex) in weeks" :key="weekIndex">
<view class="uni-calendar__weeks-item" v-for="(weeks, weeksIndex) in item" :key="weeksIndex">
<uni-calendar-item :weeks="weeks" :calendar="calendar" :selected="selected" :lunar="lunar" @change="choiceDate"></uni-calendar-item>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import Calendar from './util.js';
import uniCalendarItem from './uni-calendar-item.vue';
/**
* Calendar 日历
* @description 日历组件可以查看日期，选择任意范围内的日期，打点操作。常用场景如：酒店日期预订、火车机票选择购买日期、上下班打卡等
* @tutorial https://ext.dcloud.net.cn/plugin?id=56
* @property {String} date 自定义当前时间，默认为今天
* @property {Boolean} lunar 显示农历
* @property {String} startDate 日期选择范围-开始日期
* @property {String} endDate 日期选择范围-结束日期
* @property {Boolean} range 范围选择
* @property {Boolean} insert = [true|false] 插入模式,默认为false
* @value true 弹窗模式
* @value false 插入模式
* @property {Boolean} clearDate = [true|false] 弹窗模式是否清空上次选择内容
* @property {Array} selected 打点，期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}]
* @property {Boolean} showMonth 是否选择月份为背景
* @event {Function} change 日期改变，`insert :ture` 时生效
* @event {Function} confirm 确认选择`insert :false` 时生效
* @event {Function} monthSwitch 切换月份时触发
* @example <uni-calendar :insert="true":lunar="true" :start-date="'2019-3-2'":end-date="'2019-5-20'"@change="change" />
*/
export default {
components: {
uniCalendarItem
},
props: {
date: {
type: String,
default: ''
},
selected: {
type: Array,
default() {
return [];
}
},
lunar: {
type: Boolean,
default: false
},
startDate: {
type: String,
default: ''
},
endDate: {
type: String,
default: ''
},
range: {
type: Boolean,
default: false
},
insert: {
type: Boolean,
default: true
},
showMonth: {
type: Boolean,
default: true
},
clearDate: {
type: Boolean,
default: true
}
},
data() {
return {
show: false,
weeks: [],
calendar: {},
nowDate: '',
aniMaskShow: false
};
},
watch: {
date(newVal) {
this.cale.setDate(newVal);
this.init(this.cale.selectDate.fullDate);
},
startDate(val) {
this.cale.resetSatrtDate(val);
},
endDate(val) {
this.cale.resetEndDate(val);
},
selected(newVal) {
this.cale.setSelectInfo(this.nowDate.fullDate, newVal);
this.weeks = this.cale.weeks;
}
},
created() {
// 获取日历方法实例
this.cale = new Calendar({
// date: new Date(),
selected: this.selected,
startDate: this.startDate,
endDate: this.endDate,
range: this.range
});
// 选中某一天
this.cale.setDate(this.date);
this.init(this.cale.selectDate.fullDate);
// this.setDay
},
methods: {
// 取消穿透
clean() {},
bindDateChange(e) {
const value = e.detail.value + '-1';
this.cale.setDate(value);
this.init(value);
},
/**
* 初始化日期显示
* @param {Object} date
*/
init(date) {
this.weeks = this.cale.weeks;
this.nowDate = this.calendar = this.cale.getInfo(date);
},
/**
* 打开日历弹窗
*/
open() {
// 弹窗模式并且清理数据
if (this.clearDate && !this.insert) {
this.cale.cleanMultipleStatus();
this.cale.setDate(this.date);
this.init(this.cale.selectDate.fullDate);
}
this.show = true;
this.$nextTick(() => {
setTimeout(() => {
this.aniMaskShow = true;
}, 50);
});
},
/**
* 关闭日历弹窗
*/
close() {
this.aniMaskShow = false;
this.$nextTick(() => {
setTimeout(() => {
this.show = false;
this.$emit('close');
}, 300);
});
},
/**
* 确认按钮
*/
confirm() {
this.setEmit('confirm');
this.close();
},
/**
* 变化触发
*/
change() {
if (!this.insert) return;
this.setEmit('change');
},
/**
* 选择月份触发
*/
monthSwitch() {
let { year, month } = this.nowDate;
this.$emit('monthSwitch', {
year,
month: Number(month)
});
},
/**
* 派发事件
* @param {Object} name
*/
setEmit(name) {
let { year, month, date, fullDate, lunar, extraInfo } = this.calendar;
this.$emit(name, {
range: this.cale.multipleStatus,
year,
month,
date,
fulldate: fullDate,
lunar,
extraInfo: extraInfo || {}
});
},
/**
* 选择天触发
* @param {Object} weeks
*/
choiceDate(weeks) {
if (weeks.disable) return;
this.calendar = weeks;
// 设置多选
this.cale.setMultiple(this.calendar.fullDate);
this.weeks = this.cale.weeks;
this.change();
},
/**
* 回到今天
*/
backtoday() {
let date = this.cale.getDate(new Date()).fullDate;
this.cale.setDate(date);
this.init(date);
this.change();
},
/**
* 上个月
*/
pre() {
const preDate = this.cale.getDate(this.nowDate.fullDate, -1, 'month').fullDate;
this.setDate(preDate);
this.monthSwitch();
},
/**
* 下个月
*/
next() {
const nextDate = this.cale.getDate(this.nowDate.fullDate, +1, 'month').fullDate;
this.setDate(nextDate);
this.monthSwitch();
},
/**
* 设置日期
* @param {Object} date
*/
setDate(date) {
this.cale.setDate(date);
this.weeks = this.cale.weeks;
this.nowDate = this.cale.getInfo(date);
}
}
};
</script>
<style lang="scss" scoped>
.uni-calendar {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
}
.uni-calendar__mask {
position: fixed;
bottom: 0;
top: 0;
left: 0;
right: 0;
background-color: $uni-bg-color-mask;
transition-property: opacity;
transition-duration: 0.3s;
opacity: 0;
/* #ifndef APP-NVUE */
z-index: 99;
/* #endif */
}
.uni-calendar--mask-show {
opacity: 1;
}
.uni-calendar--fixed {
position: fixed;
bottom: 0;
left: 0;
right: 0;
transition-property: transform;
transition-duration: 0.3s;
transform: translateY(460px);
/* #ifndef APP-NVUE */
z-index: 99;
/* #endif */
}
.uni-calendar--ani-show {
transform: translateY(0);
}
.uni-calendar__content {
background: linear-gradient(180deg, rgba(247, 0, 66, 1), rgba(254, 147, 76, 1));
border-bottom-left-radius: 24rpx;
border-bottom-right-radius: 24rpx;
}
.uni-calendar__header {
position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 56rpx;
width: 657rpx;
margin: 0 auto;
background-color: #fa556a;
border-radius: 28px;
}
.uni-calendar--fixed-top {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: space-between;
border-top-color: $uni-border-color;
border-top-style: solid;
border-top-width: 1px;
}
.uni-calendar--fixed-width {
width: 50px;
// padding: 0 15px;
}
.uni-calendar__backtoday {
position: absolute;
right: 0;
top: 25rpx;
padding: 0 5px;
padding-left: 10px;
height: 25px;
line-height: 25px;
font-size: 12px;
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
color: $uni-text-color;
background-color: $uni-bg-color-hover;
}
.uni-calendar__header-text {
text-align: center;
width: 100px;
font-size: 26rpx;
color: #fff;
}
.uni-calendar__header-btn-box {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
color: #fff !important;
}
.uni-calendar__header-btn {
width: 10px;
height: 10px;
border-left-color: $uni-text-color-placeholder;
border-left-style: solid;
border-left-width: 2px;
border-top-color: $uni-color-subtitle;
border-top-style: solid;
border-top-width: 2px;
}
.uni-calendar--left {
transform: rotate(-45deg);
}
.uni-calendar--right {
transform: rotate(135deg);
}
.uni-calendar__weeks {
position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
}
.uni-calendar__weeks-item {
flex: 1;
}
.uni-calendar__weeks-day {
flex: 1;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
align-items: center;
height: 45px;
color: #fff;
font-size: 24rpx;
}
.uni-calendar__weeks-day-text {
font-size: 14px;
}
.uni-calendar__box {
position: relative;
}
.uni-calendar__box-bg {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.uni-calendar__box-bg-text {
font-size: 200px;
font-weight: bold;
color: $uni-text-color-grey;
opacity: 0.1;
text-align: center;
/* #ifndef APP-NVUE */
line-height: 1;
/* #endif */
}
</style>

354
pages_tool/components/uni-calendar/util.js Normal file
View File

@@ -0,0 +1,354 @@
import CALENDAR from './calendar.js'
class Calendar {
constructor({
date,
selected,
startDate,
endDate,
range
} = {}) {
// 当前日期
this.date = this.getDate(new Date()) // 当前初入日期
// 打点信息
this.selected = selected || [];
// 范围开始
this.startDate = startDate
// 范围结束
this.endDate = endDate
this.range = range
// 多选状态
this.cleanMultipleStatus()
// 每周日期
this.weeks = {}
// this._getWeek(this.date.fullDate)
}
/**
* 设置日期
* @param {Object} date
*/
setDate(date) {
this.selectDate = this.getDate(date)
this._getWeek(this.selectDate.fullDate)
}
/**
* 清理多选状态
*/
cleanMultipleStatus() {
this.multipleStatus = {
before: '',
after: '',
data: []
}
}
/**
* 重置开始日期
*/
resetSatrtDate(startDate) {
// 范围开始
this.startDate = startDate
}
/**
* 重置结束日期
*/
resetEndDate(endDate) {
// 范围结束
this.endDate = endDate
}
/**
* 获取任意时间
*/
getDate(date, AddDayCount = 0, str = 'day') {
if (!date) {
date = new Date()
}
if (typeof date !== 'object') {
date = date.replace(/-/g, '/')
}
const dd = new Date(date)
switch (str) {
case 'day':
dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期
break
case 'month':
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天后的日期
break
}
const y = dd.getFullYear()
const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
return {
fullDate: y + '-' + m + '-' + d,
year: y,
month: m,
date: d,
day: dd.getDay()
}
}
/**
* 获取上月剩余天数
*/
_getLastMonthDays(firstDay, full) {
let dateArr = []
for (let i = firstDay; i > 0; i--) {
const beforeDate = new Date(full.year, full.month - 1, -i + 1).getDate()
dateArr.push({
date: beforeDate,
month: full.month - 1,
lunar: this.getlunar(full.year, full.month - 1, beforeDate),
disable: true
})
}
return dateArr
}
/**
* 获取本月天数
*/
_currentMonthDys(dateData, full) {
let dateArr = []
let fullDate = this.date.fullDate
for (let i = 1; i <= dateData; i++) {
let isinfo = false
let nowDate = full.year + '-' + (full.month < 10 ?
full.month : full.month) + '-' + (i < 10 ?
'0' + i : i)
// 是否今天
let isDay = fullDate === nowDate
// 获取打点信息
let info = this.selected && this.selected.find((item) => {
if (this.dateEqual(nowDate, item.date)) {
return item
}
})
// 日期禁用
let disableBefore = true
let disableAfter = true
if (this.startDate) {
let dateCompBefore = this.dateCompare(this.startDate, fullDate)
disableBefore = this.dateCompare(dateCompBefore ? this.startDate : fullDate, nowDate)
}
if (this.endDate) {
let dateCompAfter = this.dateCompare(fullDate, this.endDate)
disableAfter = this.dateCompare(nowDate, dateCompAfter ? this.endDate : fullDate)
}
let multiples = this.multipleStatus.data
let checked = false
let multiplesStatus = -1
if (this.range) {
if (multiples) {
multiplesStatus = multiples.findIndex((item) => {
return this.dateEqual(item, nowDate)
})
}
if (multiplesStatus !== -1) {
checked = true
}
}
let data = {
fullDate: nowDate,
year: full.year,
date: i,
multiple: this.range ? checked : false,
beforeMultiple: this.dateEqual(this.multipleStatus.before, nowDate),
afterMultiple: this.dateEqual(this.multipleStatus.after, nowDate),
month: full.month,
lunar: this.getlunar(full.year, full.month, i),
disable: !disableBefore || !disableAfter,
isDay
}
if (info) {
data.extraInfo = info
}
dateArr.push(data)
}
return dateArr
}
/**
* 获取下月天数
*/
_getNextMonthDays(surplus, full) {
let dateArr = []
for (let i = 1; i < surplus + 1; i++) {
dateArr.push({
date: i,
month: Number(full.month) + 1,
lunar: this.getlunar(full.year, Number(full.month) + 1, i),
disable: true
})
}
return dateArr
}
/**
* 获取当前日期详情
* @param {Object} date
*/
getInfo(date) {
if (!date) {
date = new Date()
}
const dateInfo = this.canlender.find(item => item.fullDate === this.getDate(date).fullDate)
return dateInfo
}
/**
* 比较时间大小
*/
dateCompare(startDate, endDate) {
// 计算截止时间
startDate = new Date(startDate.replace('-', '/').replace('-', '/'))
// 计算详细项的截止时间
endDate = new Date(endDate.replace('-', '/').replace('-', '/'))
if (startDate <= endDate) {
return true
} else {
return false
}
}
/**
* 比较时间是否相等
*/
dateEqual(before, after) {
// 计算截止时间
before = new Date(before.replace('-', '/').replace('-', '/'))
// 计算详细项的截止时间
after = new Date(after.replace('-', '/').replace('-', '/'))
if (before.getTime() - after.getTime() === 0) {
return true
} else {
return false
}
}
/**
* 获取日期范围内所有日期
* @param {Object} begin
* @param {Object} end
*/
geDateAll(begin, end) {
var arr = []
var ab = begin.split('-')
var ae = end.split('-')
var db = new Date()
db.setFullYear(ab[0], ab[1] - 1, ab[2])
var de = new Date()
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
for (var k = unixDb; k <= unixDe;) {
k = k + 24 * 60 * 60 * 1000
arr.push(this.getDate(new Date(parseInt(k))).fullDate)
}
return arr
}
/**
* 计算阴历日期显示
*/
getlunar(year, month, date) {
return CALENDAR.solar2lunar(year, month, date)
}
/**
* 设置打点
*/
setSelectInfo(data, value) {
this.selected = value
this._getWeek(data)
}
/**
* 获取多选状态
*/
setMultiple(fullDate) {
let {
before,
after
} = this.multipleStatus
if (!this.range) return
if (before && after) {
this.multipleStatus.before = ''
this.multipleStatus.after = ''
this.multipleStatus.data = []
} else {
if (!before) {
this.multipleStatus.before = fullDate
} else {
this.multipleStatus.after = fullDate
if (this.dateCompare(this.multipleStatus.before, this.multipleStatus.after)) {
this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus
.after);
} else {
this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus
.before);
}
}
}
this._getWeek(fullDate)
}
/**
* 获取每周数据
* @param {Object} dateData
*/
_getWeek(dateData) {
const {
fullDate,
year,
month,
date,
day
} = this.getDate(dateData)
let firstDay = new Date(year, month - 1, 1).getDay()
let currentDay = new Date(year, month, 0).getDate()
let dates = {
lastMonthDays: this._getLastMonthDays(firstDay, this.getDate(dateData)), // 上个月末尾几天
currentMonthDys: this._currentMonthDys(currentDay, this.getDate(dateData)), // 本月天数
nextMonthDays: [], // 下个月开始几天
weeks: []
}
let canlender = []
const surplus = 42 - (dates.lastMonthDays.length + dates.currentMonthDys.length)
dates.nextMonthDays = this._getNextMonthDays(surplus, this.getDate(dateData))
canlender = canlender.concat(dates.lastMonthDays, dates.currentMonthDys, dates.nextMonthDays)
let weeks = {}
// 拼接数组 上个月开始几天 + 本月天数+ 下个月开始几天
for (let i = 0; i < canlender.length; i++) {
if (i % 7 === 0) {
weeks[parseInt(i / 7)] = new Array(7)
}
weeks[parseInt(i / 7)][i % 7] = canlender[i]
}
this.canlender = canlender
this.weeks = weeks
}
//静态方法
// static init(date) {
// if (!this.instance) {
// this.instance = new Calendar(date);
// }
// return this.instance;
// }
}
export default Calendar

220
pages_tool/components/uni-nav-bar/uni-nav-bar.vue Normal file
View File

@@ -0,0 +1,220 @@
<template>
<view class="uni-navbar">
<view
:class="{ 'uni-navbar--fixed': fixed, 'uni-navbar--shadow': shadow, 'uni-navbar--border': border }"
:style="{ 'background-color': backgroundColor }"
class="uni-navbar__content">
<uni-status-bar v-if="statusBar" />
<view :style="{ color: color, backgroundColor: backgroundColor }" class="uni-navbar__header uni-navbar__content_view">
<view @tap="onClickLeft" class="uni-navbar__header-btns uni-navbar__header-btns-left uni-navbar__content_view">
<view class="uni-navbar__content_view" v-if="leftIcon.length"><uni-icons :color="color" :type="leftIcon" size="24" /></view>
<view :class="{ 'uni-navbar-btn-icon-left': !leftIcon.length }" class="uni-navbar-btn-text uni-navbar__content_view" v-if="leftText.length">
<text :style="{ color: color, fontSize: '14px' }">{{ leftText }}</text>
</view>
<slot name="left" />
</view>
<view class="uni-navbar__header-container uni-navbar__content_view">
<view class="uni-navbar__header-container-inner uni-navbar__content_view" v-if="title.length">
<text class="uni-nav-bar-text" :style="{ color: color }">{{ title }}</text>
</view>
<!-- 标题插槽 -->
<slot />
</view>
<view :class="title.length ? 'uni-navbar__header-btns-right' : ''" @tap="onClickRight" class="uni-navbar__header-btns uni-navbar__content_view">
<view class="uni-navbar__content_view" v-if="rightIcon.length"><uni-icons :color="color" :type="rightIcon" size="24" /></view>
<!-- 优先显示图标 -->
<view class="uni-navbar-btn-text uni-navbar__content_view" v-if="rightText.length && !rightIcon.length">
<text class="uni-nav-bar-right-text">{{ rightText }}</text>
</view>
<slot name="right" />
</view>
</view>
</view>
<view class="uni-navbar__placeholder" v-if="fixed">
<uni-status-bar v-if="statusBar" />
<view class="uni-navbar__placeholder-view" />
</view>
</view>
</template>
<script>
import uniStatusBar from '@/pages_tool/components/uni-status-bar/uni-status-bar.vue';
import uniIcons from '@/components/uni-icons/uni-icons.vue';
export default {
name: 'UniNavBar',
components: {
uniStatusBar,
uniIcons
},
props: {
title: {
type: String,
default: ''
},
leftText: {
type: String,
default: ''
},
rightText: {
type: String,
default: ''
},
leftIcon: {
type: String,
default: ''
},
rightIcon: {
type: String,
default: ''
},
fixed: {
type: [Boolean, String],
default: false
},
color: {
type: String,
default: '#000000'
},
backgroundColor: {
type: String,
default: '#FFFFFF'
},
statusBar: {
type: [Boolean, String],
default: false
},
shadow: {
type: [String, Boolean],
default: false
},
border: {
type: [String, Boolean],
default: true
}
},
mounted() {
if (uni.report && this.title !== '') {
uni.report('title', this.title);
}
},
methods: {
onClickLeft() {
this.$emit('clickLeft');
},
onClickRight() {
this.$emit('clickRight');
}
}
};
</script>
<style lang="scss" scoped>
$nav-height: 44px;
.uni-nav-bar-text {
/* #ifdef APP-PLUS */
font-size: 34rpx;
/* #endif */
/* #ifndef APP-PLUS */
font-size: $uni-font-size-lg;
/* #endif */
}
.uni-nav-bar-right-text {
font-size: $uni-font-size-base;
}
.uni-navbar {
width: 750rpx;
}
.uni-navbar__content {
position: relative;
width: 750rpx;
background-color: $uni-bg-color;
overflow: hidden;
}
.uni-navbar__content_view {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
align-items: center;
flex-direction: row;
// background-color: #FFFFFF;
}
.uni-navbar__header {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
width: 750rpx;
height: $nav-height;
line-height: $nav-height;
font-size: 16px;
// background-color: #ffffff;
}
.uni-navbar__header-btns {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-wrap: nowrap;
width: 120rpx;
padding: 0 6px;
justify-content: center;
align-items: center;
}
.uni-navbar__header-btns-left {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
width: 150rpx;
justify-content: flex-start;
}
.uni-navbar__header-btns-right {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
width: 150rpx;
padding-right: 30rpx;
justify-content: flex-end;
}
.uni-navbar__header-container {
flex: 1;
}
.uni-navbar__header-container-inner {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
align-items: center;
justify-content: center;
font-size: $uni-font-size-base;
}
.uni-navbar__placeholder-view {
height: $nav-height;
}
.uni-navbar--fixed {
position: fixed;
z-index: 998;
}
.uni-navbar--shadow {
/* #ifndef APP-NVUE */
box-shadow: 0 1px 6px #ccc;
/* #endif */
}
.uni-navbar--border {
border-bottom-width: 1rpx;
border-bottom-style: solid;
border-bottom-color: $uni-border-color;
}
</style>

23
pages_tool/components/uni-status-bar/uni-status-bar.vue Normal file
View File

@@ -0,0 +1,23 @@
<template>
<view :style="{ height: statusBarHeight }" class="uni-status-bar"><slot /></view>
</template>
<script>
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight * 2 + 'rpx';
export default {
name: 'UniStatusBar',
data() {
return {
statusBarHeight: statusBarHeight
};
}
};
</script>
<style lang="scss" scoped>
.uni-status-bar {
width: 750rpx;
height: 20px;
// height: var(--status-bar-height);
}
</style>