revert: 所有代码与custom/common分支同
This commit is contained in:
@@ -357,12 +357,13 @@
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import nsLoading from '@/components/ns-loading/ns-loading.vue'
|
||||
import aiService from '@/common/js/ai-service.js'
|
||||
|
||||
export default {
|
||||
name: 'ai-chat-message',
|
||||
components: {
|
||||
nsLoading: () => import('@/components/ns-loading/ns-loading.vue'),
|
||||
nsLoading
|
||||
},
|
||||
props: {
|
||||
// 初始消息列表
|
||||
|
||||
@@ -1,344 +0,0 @@
|
||||
<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 htmlParser from '@/common/js/html-parser.js';
|
||||
import emjoy from '@/common/js/emjoy.js';
|
||||
|
||||
export default {
|
||||
name: 'chat-message',
|
||||
props: {
|
||||
message: {
|
||||
type: Object
|
||||
},
|
||||
send: {
|
||||
type: Boolean
|
||||
}
|
||||
},
|
||||
components: {
|
||||
uniPopup: () => import('@/components/uni-popup/uni-popup.vue'),
|
||||
nsChatGoods: () => import('@/components/ns-chat/ns-chat-goods.vue'),
|
||||
nsChatOrder: () => import('@/components/ns-chat/ns-chat-order.vue'),
|
||||
nsChatReceiveGoods: () => import('@/components/ns-chat/ns-chat-receiveGoods.vue')
|
||||
},
|
||||
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>
|
||||
@@ -636,19 +636,28 @@
|
||||
<script>
|
||||
import payment from './payment.js';
|
||||
|
||||
import nsSelectTime from '@/components/ns-select-time/ns-select-time.vue';
|
||||
import MescrollUni from "@/components/mescroll/my-list-mescroll.vue";
|
||||
import nsLogin from '@/components/ns-login/ns-login.vue';
|
||||
import loadingCover from '@/components/loading-cover/loading-cover.vue';
|
||||
import nsEmpty from '@/components/ns-empty/ns-empty.vue';
|
||||
// #ifdef MP-WEIXIN
|
||||
import privacyPopup from '@/components/wx-privacy-popup/privacy-popup.vue';
|
||||
// #endif
|
||||
|
||||
export default {
|
||||
name: 'common-payment',
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
components: {
|
||||
nsSelectTime: () => import('@/components/ns-select-time/ns-select-time.vue'),
|
||||
nsLogin: () => import('@/components/ns-login/ns-login.vue'),
|
||||
MescrollUni: () => import('@/components/mescroll/my-list-mescroll.vue'),
|
||||
loadingCover: () => import('@/components/loading-cover/loading-cover.vue'),
|
||||
nsEmpty: () => import('@/components/ns-empty/ns-empty.vue'),
|
||||
nsSelectTime,
|
||||
nsLogin,
|
||||
MescrollUni,
|
||||
loadingCover,
|
||||
nsEmpty,
|
||||
// #ifdef MP-WEIXIN
|
||||
privacyPopup: () => import('@/components/wx-privacy-popup/privacy-popup.vue'),
|
||||
privacyPopup
|
||||
// #endif
|
||||
},
|
||||
props: {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import htmlParser from '@/common/js/html-parser.js';
|
||||
import htmlParser from '@/common/js/html-parser';
|
||||
|
||||
export default {
|
||||
options: {
|
||||
@@ -922,7 +922,7 @@ export default {
|
||||
payClose() {
|
||||
// 更新购物车数量
|
||||
this.$store.dispatch('getCartNumber');
|
||||
this.$util.redirectTo('/pages_order/detail/detail', {
|
||||
this.$util.redirectTo('/pages_order/detail', {
|
||||
order_id: this.$refs.choosePaymentPopup.payInfo.order_id
|
||||
}, 'redirectTo');
|
||||
},
|
||||
|
||||
@@ -420,7 +420,12 @@
|
||||
|
||||
<script>
|
||||
// 商品详情视图
|
||||
import uniPopup from '@/components/uni-popup/uni-popup.vue';
|
||||
import nsGoodsRecommend from '@/components/ns-goods-recommend/ns-goods-recommend.vue';
|
||||
import pengpaiFadeinOut from '@/components/pengpai-fadein-out/pengpai-fadein-out.vue';
|
||||
import xiaoStarComponent from '@/components/xiao-star-component/xiao-star-component.vue';
|
||||
import scroll from '@/common/js/scroll-view.js';
|
||||
import toTop from '@/components/toTop/toTop.vue';
|
||||
import detail from './detail.js';
|
||||
|
||||
export default {
|
||||
@@ -434,11 +439,11 @@
|
||||
}
|
||||
},
|
||||
components: {
|
||||
uniPopup: () => import('@/components/uni-popup/uni-popup.vue'),
|
||||
nsGoodsRecommend: () => import('@/components/ns-goods-recommend/ns-goods-recommend.vue'),
|
||||
pengpaiFadeinOut: () => import('@/components/pengpai-fadein-out/pengpai-fadein-out.vue'),
|
||||
toTop: () => import('@/components/toTop/toTop.vue'),
|
||||
xiaoStarComponent: () => import('@/components/xiao-star-component/xiao-star-component.vue'),
|
||||
uniPopup,
|
||||
nsGoodsRecommend,
|
||||
pengpaiFadeinOut,
|
||||
toTop,
|
||||
xiaoStarComponent
|
||||
},
|
||||
mixins: [scroll, detail]
|
||||
};
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -46,11 +46,15 @@
|
||||
import MeScroll from './mescroll-uni.js';
|
||||
// 引入全局配置
|
||||
import GlobalOption from './mescroll-uni-option.js';
|
||||
// 引入空布局组件
|
||||
import MescrollEmpty from './components/mescroll-empty.vue';
|
||||
// 引入回到顶部组件
|
||||
import MescrollTop from './components/mescroll-top.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
MescrollEmpty: () => import('./components/mescroll-empty.vue'),
|
||||
MescrollTop: () => import('./components/mescroll-top.vue'),
|
||||
MescrollEmpty,
|
||||
MescrollTop
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
@@ -57,13 +57,18 @@
|
||||
import MeScroll from './mescroll-uni.js';
|
||||
// 引入全局配置
|
||||
import GlobalOption from './mescroll-uni-option.js';
|
||||
// 引入空布局组件
|
||||
import MescrollEmpty from './components/mescroll-empty.vue';
|
||||
// 引入回到顶部组件
|
||||
import MescrollTop from './components/mescroll-top.vue';
|
||||
|
||||
import nsLoading from '@/components/ns-loading/ns-loading.vue';
|
||||
|
||||
export default {
|
||||
name: 'mescroll-uni',
|
||||
components: {
|
||||
MescrollEmpty: () => import('./components/mescroll-empty.vue'),
|
||||
MescrollTop: () => import('./components/mescroll-top.vue'),
|
||||
nsLoading: () => import('@/components/ns-loading/ns-loading.vue'),
|
||||
MescrollEmpty,
|
||||
MescrollTop
|
||||
},
|
||||
props: {
|
||||
down: Object, // 下拉刷新的参数配置
|
||||
|
||||
@@ -1,112 +1,113 @@
|
||||
<template>
|
||||
<!-- top="xxx"下拉布局往下偏移,防止被悬浮菜单遮住 -->
|
||||
<mescroll
|
||||
v-if="isInit"
|
||||
:top="top"
|
||||
:down="downOption"
|
||||
:fixed="fixed"
|
||||
:topbar="topbar"
|
||||
:background="background"
|
||||
:paddingBoth="paddingBoth"
|
||||
@down="downCallback"
|
||||
:up="upOption"
|
||||
@up="upCallback"
|
||||
@emptyclick="emptyClick"
|
||||
@init="mescrollInit"
|
||||
>
|
||||
<!-- 数据列表 -->
|
||||
<slot name="list"></slot>
|
||||
</mescroll>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {
|
||||
Mescroll: () => import('./mescroll-uni.vue'),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mescroll: null, //mescroll实例对象
|
||||
downOption: {
|
||||
auto: false // 不自动加载
|
||||
},
|
||||
upOption: {
|
||||
auto: false, // 不自动加载
|
||||
page: {
|
||||
num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
|
||||
size: 10 // 每页数据的数量
|
||||
},
|
||||
noMoreSize: 2, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
|
||||
empty: {
|
||||
tip: '~ 空空如也 ~', // 提示
|
||||
btnText: '去看看'
|
||||
},
|
||||
onScroll: true
|
||||
},
|
||||
scrollY: 0,
|
||||
isInit: false
|
||||
};
|
||||
},
|
||||
props: {
|
||||
top: [String, Number],
|
||||
size: [String, Number],
|
||||
fixed: {
|
||||
// 是否通过fixed固定mescroll的高度, 默认true
|
||||
type: Boolean,
|
||||
default() {
|
||||
return true;
|
||||
}
|
||||
},
|
||||
background: String,
|
||||
topbar: Boolean,
|
||||
paddingBoth: {
|
||||
type: [String, Number],
|
||||
default() {
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (this.size) this.upOption.page.size = this.size;
|
||||
this.isInit = true;
|
||||
},
|
||||
mounted() {
|
||||
this.mescroll.resetUpScroll();
|
||||
this.listenRefresh();
|
||||
},
|
||||
methods: {
|
||||
// mescroll组件初始化的回调,可获取到mescroll对象
|
||||
mescrollInit(mescroll) {
|
||||
this.mescroll = mescroll;
|
||||
},
|
||||
/*下拉刷新的回调 */
|
||||
downCallback() {
|
||||
// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
|
||||
// loadSwiper();
|
||||
// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 mescroll.num=1, 再触发upCallback方法 )
|
||||
this.mescroll.resetUpScroll();
|
||||
this.listenRefresh();
|
||||
},
|
||||
/*上拉加载的回调: mescroll携带page的参数, 其中num:当前页 从1开始, size:每页数据条数,默认10 */
|
||||
upCallback() {
|
||||
//联网加载数据
|
||||
this.$emit('getData', this.mescroll);
|
||||
},
|
||||
//点击空布局按钮的回调
|
||||
emptyClick() {
|
||||
this.$emit('emptytap', this.mescroll);
|
||||
},
|
||||
//刷新
|
||||
refresh() {
|
||||
this.mescroll.resetUpScroll();
|
||||
this.listenRefresh();
|
||||
},
|
||||
myScrollTo(y, t) {
|
||||
this.mescroll.myScrollTo(y, t);
|
||||
},
|
||||
listenRefresh() {
|
||||
this.$emit('listenRefresh', true);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<!-- top="xxx"下拉布局往下偏移,防止被悬浮菜单遮住 -->
|
||||
<mescroll
|
||||
v-if="isInit"
|
||||
:top="top"
|
||||
:down="downOption"
|
||||
:fixed="fixed"
|
||||
:topbar="topbar"
|
||||
:background="background"
|
||||
:paddingBoth="paddingBoth"
|
||||
@down="downCallback"
|
||||
:up="upOption"
|
||||
@up="upCallback"
|
||||
@emptyclick="emptyClick"
|
||||
@init="mescrollInit"
|
||||
>
|
||||
<!-- 数据列表 -->
|
||||
<slot name="list"></slot>
|
||||
</mescroll>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Mescroll from './mescroll-uni.vue';
|
||||
export default {
|
||||
components: {
|
||||
Mescroll
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mescroll: null, //mescroll实例对象
|
||||
downOption: {
|
||||
auto: false // 不自动加载
|
||||
},
|
||||
upOption: {
|
||||
auto: false, // 不自动加载
|
||||
page: {
|
||||
num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
|
||||
size: 10 // 每页数据的数量
|
||||
},
|
||||
noMoreSize: 2, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
|
||||
empty: {
|
||||
tip: '~ 空空如也 ~', // 提示
|
||||
btnText: '去看看'
|
||||
},
|
||||
onScroll: true
|
||||
},
|
||||
scrollY: 0,
|
||||
isInit: false
|
||||
};
|
||||
},
|
||||
props: {
|
||||
top: [String, Number],
|
||||
size: [String, Number],
|
||||
fixed: {
|
||||
// 是否通过fixed固定mescroll的高度, 默认true
|
||||
type: Boolean,
|
||||
default() {
|
||||
return true;
|
||||
}
|
||||
},
|
||||
background: String,
|
||||
topbar: Boolean,
|
||||
paddingBoth: {
|
||||
type: [String, Number],
|
||||
default() {
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (this.size) this.upOption.page.size = this.size;
|
||||
this.isInit = true;
|
||||
},
|
||||
mounted() {
|
||||
this.mescroll.resetUpScroll();
|
||||
this.listenRefresh();
|
||||
},
|
||||
methods: {
|
||||
// mescroll组件初始化的回调,可获取到mescroll对象
|
||||
mescrollInit(mescroll) {
|
||||
this.mescroll = mescroll;
|
||||
},
|
||||
/*下拉刷新的回调 */
|
||||
downCallback() {
|
||||
// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
|
||||
// loadSwiper();
|
||||
// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 mescroll.num=1, 再触发upCallback方法 )
|
||||
this.mescroll.resetUpScroll();
|
||||
this.listenRefresh();
|
||||
},
|
||||
/*上拉加载的回调: mescroll携带page的参数, 其中num:当前页 从1开始, size:每页数据条数,默认10 */
|
||||
upCallback() {
|
||||
//联网加载数据
|
||||
this.$emit('getData', this.mescroll);
|
||||
},
|
||||
//点击空布局按钮的回调
|
||||
emptyClick() {
|
||||
this.$emit('emptytap', this.mescroll);
|
||||
},
|
||||
//刷新
|
||||
refresh() {
|
||||
this.mescroll.resetUpScroll();
|
||||
this.listenRefresh();
|
||||
},
|
||||
myScrollTo(y, t) {
|
||||
this.mescroll.myScrollTo(y, t);
|
||||
},
|
||||
listenRefresh() {
|
||||
this.$emit('listenRefresh', true);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,234 +0,0 @@
|
||||
<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>
|
||||
@@ -1,120 +1,120 @@
|
||||
<template>
|
||||
<view v-if="advList.length" :class="['container-box',className]">
|
||||
<swiper :indicator-dots="advList.length > 1" indicator-active-color="#ffffff" :autoplay="true" :interval="3000" :duration="1000" v-if="advList.length > 1" @change="changeSwiper" :current="currentIndex" :style="{ height: swiperHeight + 'px' }" class="item-wrap">
|
||||
<swiper-item v-for="(item, index) in advList" :key="index" @click="jumppage(item.adv_url)">
|
||||
<view class="image-box">
|
||||
<image :src="$util.img(item.adv_image)" mode="widthFix" :id="'content-wrap' + index"/>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view v-else class="container-box item-wrap">
|
||||
<image :src="$util.img(advList[0]['adv_image'])" mode="widthFix" lazy-load="true" @load="imageLoad" @click="jumppage(advList[0].adv_url)"/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ns-advert',
|
||||
props: {
|
||||
keyword: {
|
||||
type: String
|
||||
},
|
||||
className: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
advList: [],
|
||||
isImage: false,
|
||||
//滑块的高度(单位px)
|
||||
swiperHeight: 150,
|
||||
//当前索引
|
||||
currentIndex: 0,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getAdvList();
|
||||
},
|
||||
methods: {
|
||||
//获取广告位
|
||||
getAdvList() {
|
||||
var item = {
|
||||
adv_image: '',
|
||||
adv_url: ''
|
||||
};
|
||||
this.$api.sendRequest({
|
||||
url: '/api/adv/detail',
|
||||
data: {
|
||||
keyword: this.keyword
|
||||
},
|
||||
success: res => {
|
||||
if (res.code == 0) {
|
||||
var data = res.data.adv_list;
|
||||
for (var index in data) {
|
||||
if (data[index].adv_url) data[index].adv_url = JSON.parse(data[index].adv_url);
|
||||
}
|
||||
this.advList = res.data.adv_list;
|
||||
|
||||
//动态设置swiper的高度
|
||||
this.$nextTick(() => {
|
||||
this.setSwiperHeight();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
jumppage(e) {
|
||||
this.$util.diyRedirectTo(e);
|
||||
},
|
||||
imageLoad(data) {
|
||||
this.isImage = true;
|
||||
},
|
||||
//手动切换题目
|
||||
changeSwiper(e) {
|
||||
this.currentIndex = e.detail.current;
|
||||
//动态设置swiper的高度，使用nextTick延时设置
|
||||
this.$nextTick(() => {
|
||||
this.setSwiperHeight();
|
||||
});
|
||||
},
|
||||
//动态设置swiper的高度
|
||||
setSwiperHeight() {
|
||||
if (this.advList.length > 1) {
|
||||
setTimeout(() => {
|
||||
let element = "#content-wrap" + this.currentIndex;
|
||||
let query = uni.createSelectorQuery().in(this);
|
||||
query.select(element).boundingClientRect();
|
||||
query.exec((res) => {
|
||||
if (res && res[0]) {
|
||||
this.swiperHeight = res[0].height;
|
||||
}
|
||||
});
|
||||
}, 10);
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container-box {
|
||||
width: 100%;
|
||||
|
||||
.item-wrap {
|
||||
border-radius: 10rpx;
|
||||
|
||||
.image-box {
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 10rpx;
|
||||
will-change: transform;
|
||||
}
|
||||
}
|
||||
}
|
||||
<template>
|
||||
<view v-if="advList.length" :class="['container-box',className]">
|
||||
<swiper :indicator-dots="advList.length > 1" indicator-active-color="#ffffff" :autoplay="true" :interval="3000" :duration="1000" v-if="advList.length > 1" @change="changeSwiper" :current="currentIndex" :style="{ height: swiperHeight + 'px' }" class="item-wrap">
|
||||
<swiper-item v-for="(item, index) in advList" :key="index" @click="jumppage(item.adv_url)">
|
||||
<view class="image-box">
|
||||
<image :src="$util.img(item.adv_image)" mode="widthFix" :id="'content-wrap' + index"/>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view v-else class="container-box item-wrap">
|
||||
<image :src="$util.img(advList[0]['adv_image'])" mode="widthFix" lazy-load="true" @load="imageLoad" @click="jumppage(advList[0].adv_url)"/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ns-advert',
|
||||
props: {
|
||||
keyword: {
|
||||
type: String
|
||||
},
|
||||
className: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
advList: [],
|
||||
isImage: false,
|
||||
//滑块的高度(单位px)
|
||||
swiperHeight: 150,
|
||||
//当前索引
|
||||
currentIndex: 0,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getAdvList();
|
||||
},
|
||||
methods: {
|
||||
//获取广告位
|
||||
getAdvList() {
|
||||
var item = {
|
||||
adv_image: '',
|
||||
adv_url: ''
|
||||
};
|
||||
this.$api.sendRequest({
|
||||
url: '/api/adv/detail',
|
||||
data: {
|
||||
keyword: this.keyword
|
||||
},
|
||||
success: res => {
|
||||
if (res.code == 0) {
|
||||
var data = res.data.adv_list;
|
||||
for (var index in data) {
|
||||
if (data[index].adv_url) data[index].adv_url = JSON.parse(data[index].adv_url);
|
||||
}
|
||||
this.advList = res.data.adv_list;
|
||||
|
||||
//动态设置swiper的高度
|
||||
this.$nextTick(() => {
|
||||
this.setSwiperHeight();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
jumppage(e) {
|
||||
this.$util.diyRedirectTo(e);
|
||||
},
|
||||
imageLoad(data) {
|
||||
this.isImage = true;
|
||||
},
|
||||
//手动切换题目
|
||||
changeSwiper(e) {
|
||||
this.currentIndex = e.detail.current;
|
||||
//动态设置swiper的高度，使用nextTick延时设置
|
||||
this.$nextTick(() => {
|
||||
this.setSwiperHeight();
|
||||
});
|
||||
},
|
||||
//动态设置swiper的高度
|
||||
setSwiperHeight() {
|
||||
if (this.advList.length > 1) {
|
||||
setTimeout(() => {
|
||||
let element = "#content-wrap" + this.currentIndex;
|
||||
let query = uni.createSelectorQuery().in(this);
|
||||
query.select(element).boundingClientRect();
|
||||
query.exec((res) => {
|
||||
if (res && res[0]) {
|
||||
this.swiperHeight = res[0].height;
|
||||
}
|
||||
});
|
||||
}, 10);
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container-box {
|
||||
width: 100%;
|
||||
|
||||
.item-wrap {
|
||||
border-radius: 10rpx;
|
||||
|
||||
.image-box {
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 10rpx;
|
||||
will-change: transform;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -80,12 +80,13 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uniPopup from '../uni-popup/uni-popup.vue';
|
||||
|
||||
// 注册奖励弹出层
|
||||
export default {
|
||||
name: 'ns-birthday-gift',
|
||||
components: {
|
||||
uniPopup: () => import('@/components/uni-popup/uni-popup.vue'),
|
||||
nsLoading: () => import('@/components/ns-loading/ns-loading.vue'),
|
||||
uniPopup
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -163,7 +164,7 @@
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
<style scoped>
|
||||
.register-box /deep/ .uni-scroll-view {
|
||||
background: unset !important;
|
||||
}
|
||||
|
||||
@@ -1,142 +0,0 @@
|
||||
<template>
|
||||
<view class="message">
|
||||
<view class="goods-item" v-if="goodsInfo.goods_name || goodsInfo.en_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 : (isEnEnv ? goodsInfo.en_goods_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 : (isEnEnv ? goodsDetail.en_goods_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>
|
||||
@@ -1,149 +0,0 @@
|
||||
<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>
|
||||
@@ -1,142 +0,0 @@
|
||||
<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">{{ isEnEnv ? goodsInfo.en_goods_name : 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>
|
||||
@@ -54,9 +54,6 @@
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
components: {
|
||||
uniPopup: () => import('@/components/uni-popup/uni-popup.vue'),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
config: null,
|
||||
|
||||
@@ -1,142 +1,142 @@
|
||||
<template>
|
||||
<view class="copyrigt-wrap" v-if="copyright && (showLogo || showBeian)">
|
||||
<!-- <view class="copyright-info" v-if="showLogo">
|
||||
<view class="copyright-pic" v-if="copyright.logo" @click="link(copyright.copyright_link)">
|
||||
<image :src="$util.img(copyright.logo)" @error="error" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="record-info" v-if="showBeian">
|
||||
<view class="icp" v-if="copyright && copyright.icp" @click="toHref('https://beian.miit.gov.cn')">备案号：{{ copyright.icp }}
|
||||
</view>
|
||||
|
||||
<view v-if="copyright && copyright.gov_record" class="gov-wrap" @click="toHref(copyright.gov_url)" target="_blank">
|
||||
<image :src="$util.img('public/uniapp/common/gov_record.png')" alt="公安备案" />
|
||||
<text>{{ copyright.gov_record }}</text>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showLogo: true,
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
computed: {
|
||||
showBeian() {
|
||||
// 如果都为空，则隐藏
|
||||
if (this.copyright && (!this.copyright.icp && !this.copyright.gov_record)) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
link(url) {
|
||||
if (url) {
|
||||
this.$util.redirectTo('/pages_tool/webview/webview', {
|
||||
src: encodeURIComponent(url)
|
||||
});
|
||||
}
|
||||
},
|
||||
toHref(url) {
|
||||
location.href = url;
|
||||
},
|
||||
error() {
|
||||
this.showLogo = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.copyrigt-wrap {
|
||||
margin-top: 40rpx;
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
>view {
|
||||
font-size: $font-size-tag;
|
||||
color: #666666;
|
||||
|
||||
&:last-child {
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.copyright-info {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
.copyright-pic {
|
||||
image {
|
||||
width: 160rpx;
|
||||
height: 24rpx;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: $font-size-goods-tag;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
color: $color-tip !important;
|
||||
}
|
||||
|
||||
.copyright-desc {
|
||||
color: lighten($color-tip, 30%);
|
||||
font-size: $font-size-goods-tag;
|
||||
text-shadow: 0 0 2rpx lighten($color-tip, 40%);
|
||||
}
|
||||
}
|
||||
|
||||
.record-info {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
margin-top: 10rpx;
|
||||
|
||||
text {
|
||||
color: #666666;
|
||||
font-size: $font-size-tag;
|
||||
}
|
||||
|
||||
view {
|
||||
font-size: $font-size-tag;
|
||||
color: #666666;
|
||||
|
||||
&:last-child {
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.gov-wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
<template>
|
||||
<view class="copyrigt-wrap" v-if="copyright && (showLogo || showBeian)">
|
||||
<!-- <view class="copyright-info" v-if="showLogo">
|
||||
<view class="copyright-pic" v-if="copyright.logo" @click="link(copyright.copyright_link)">
|
||||
<image :src="$util.img(copyright.logo)" @error="error" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="record-info" v-if="showBeian">
|
||||
<view class="icp" v-if="copyright && copyright.icp" @click="toHref('https://beian.miit.gov.cn')">备案号：{{ copyright.icp }}
|
||||
</view>
|
||||
|
||||
<view v-if="copyright && copyright.gov_record" class="gov-wrap" @click="toHref(copyright.gov_url)" target="_blank">
|
||||
<image :src="$util.img('public/uniapp/common/gov_record.png')" alt="公安备案" />
|
||||
<text>{{ copyright.gov_record }}</text>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showLogo: true,
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
computed: {
|
||||
showBeian() {
|
||||
// 如果都为空，则隐藏
|
||||
if (this.copyright && (!this.copyright.icp && !this.copyright.gov_record)) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
link(url) {
|
||||
if (url) {
|
||||
this.$util.redirectTo('/pages_tool/webview/webview', {
|
||||
src: encodeURIComponent(url)
|
||||
});
|
||||
}
|
||||
},
|
||||
toHref(url) {
|
||||
location.href = url;
|
||||
},
|
||||
error() {
|
||||
this.showLogo = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.copyrigt-wrap {
|
||||
margin-top: 40rpx;
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
>view {
|
||||
font-size: $font-size-tag;
|
||||
color: #666666;
|
||||
|
||||
&:last-child {
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.copyright-info {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
.copyright-pic {
|
||||
image {
|
||||
width: 160rpx;
|
||||
height: 24rpx;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: $font-size-goods-tag;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
color: $color-tip !important;
|
||||
}
|
||||
|
||||
.copyright-desc {
|
||||
color: lighten($color-tip, 30%);
|
||||
font-size: $font-size-goods-tag;
|
||||
text-shadow: 0 0 2rpx lighten($color-tip, 40%);
|
||||
}
|
||||
}
|
||||
|
||||
.record-info {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
margin-top: 10rpx;
|
||||
|
||||
text {
|
||||
color: #666666;
|
||||
font-size: $font-size-tag;
|
||||
}
|
||||
|
||||
view {
|
||||
font-size: $font-size-tag;
|
||||
color: #666666;
|
||||
|
||||
&:last-child {
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.gov-wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -200,10 +200,11 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import pickRegions from '@/components/pick-regions/pick-regions.vue';
|
||||
export default {
|
||||
name: 'ns-form',
|
||||
components: {
|
||||
pickRegions: () => import('@/components/pick-regions/pick-regions.vue'),
|
||||
pickRegions
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
|
||||
@@ -1,98 +1,96 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="action-buttom-wrap disabled" v-if="disabled" @click="clickEvent">{{ disabledText }}</view>
|
||||
<view class="action-buttom-wrap"
|
||||
:class="[backgroundClass, textPrice ? 'has-second' : '', background ? 'color-join-cart' : 'color-base-bg']"
|
||||
:style="{background:backgroundColor+'!important', 'color':textColor ? textColor : '#ffffff'}" v-else
|
||||
@click="clickEvent">
|
||||
<text class="price-font">{{ textPrice }}</text>
|
||||
<text>{{ text }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ns-goods-action-button',
|
||||
props: {
|
||||
// 商品底部按钮文字
|
||||
text: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 商品底部按钮价格文字
|
||||
textPrice: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 背景色
|
||||
background: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 背景色样式
|
||||
backgroundClass: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
//
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 是否禁用
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 禁用文字提示
|
||||
disabledText: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 文字颜色
|
||||
textColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
clickEvent() {
|
||||
this.$emit('click');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.action-buttom-wrap {
|
||||
flex: 1;
|
||||
height: 70rpx;
|
||||
font-weight: 600;
|
||||
font-size: 30rpx;
|
||||
line-height: 70rpx;
|
||||
border: none;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 10rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.action-buttom-wrap.has-second {
|
||||
line-height: 50rpx;
|
||||
}
|
||||
|
||||
.action-buttom-wrap.has-second text {
|
||||
display: block;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.action-buttom-wrap:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.action-buttom-wrap.disabled {
|
||||
background: $color-disabled;
|
||||
}
|
||||
<template>
|
||||
<view class="action-buttom-wrap disabled" v-if="disabled" @click="clickEvent">{{ disabledText }}</view>
|
||||
<view class="action-buttom-wrap"
|
||||
:class="[backgroundClass, textPrice ? 'has-second' : '', background ? 'color-join-cart' : 'color-base-bg']"
|
||||
:style="{background:backgroundColor+'!important', 'color':textColor ? textColor : '#ffffff'}" v-else
|
||||
@click="clickEvent">
|
||||
<text class="price-font">{{ textPrice }}</text>
|
||||
<text>{{ text }}</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ns-goods-action-button',
|
||||
props: {
|
||||
// 商品底部按钮文字
|
||||
text: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 商品底部按钮价格文字
|
||||
textPrice: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 背景色
|
||||
background: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 背景色样式
|
||||
backgroundClass: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
//
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 是否禁用
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 禁用文字提示
|
||||
disabledText: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 文字颜色
|
||||
textColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
clickEvent() {
|
||||
this.$emit('click');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.action-buttom-wrap {
|
||||
flex: 1;
|
||||
height: 70rpx;
|
||||
font-weight: 600;
|
||||
font-size: 30rpx;
|
||||
line-height: 70rpx;
|
||||
border: none;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 10rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.action-buttom-wrap.has-second {
|
||||
line-height: 50rpx;
|
||||
}
|
||||
|
||||
.action-buttom-wrap.has-second text {
|
||||
display: block;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.action-buttom-wrap:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.action-buttom-wrap.disabled {
|
||||
background: $color-disabled;
|
||||
}
|
||||
</style>
|
||||
@@ -20,6 +20,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import nsContact from '@/components/ns-contact/ns-contact.vue';
|
||||
export default {
|
||||
name: 'ns-goods-action-icon',
|
||||
props: {
|
||||
@@ -72,7 +73,7 @@ export default {
|
||||
}
|
||||
},
|
||||
components:{
|
||||
nsContact: () => import('@/components/ns-contact/ns-contact.vue'),
|
||||
nsContact
|
||||
},
|
||||
methods: {
|
||||
clickEvent() {
|
||||
|
||||
@@ -3,12 +3,15 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import nsLoading from '@/components/ns-loading/ns-loading.vue';
|
||||
import nsGoodsSkuIndex from '@/components/ns-goods-sku/ns-goods-sku-index.vue';
|
||||
|
||||
// 商品推荐
|
||||
export default {
|
||||
name: 'ns-goods-recommend',
|
||||
components: {
|
||||
nsLoading: () => import('@/components/ns-loading/ns-loading.vue'),
|
||||
nsGoodsSkuIndex: () => import('@/components/ns-goods-sku/ns-goods-sku-index.vue'),
|
||||
nsLoading,
|
||||
nsGoodsSkuIndex
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
@@ -82,12 +82,12 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uniPopup from '@/components/uni-popup/uni-popup-sku-new.vue';
|
||||
// 商品SKU
|
||||
export default {
|
||||
name: 'ns-goods-sku-category',
|
||||
components: {
|
||||
uniPopup: () => import('@/components/uni-popup/uni-popup-sku-new.vue'),
|
||||
nsLogin: () => import('@/components/ns-login/ns-login.vue'),
|
||||
uniPopup
|
||||
},
|
||||
props: {
|
||||
disabled: {
|
||||
|
||||
@@ -7,12 +7,12 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import nsGoodsSku from '@/components/ns-goods-sku/ns-goods-sku.vue';
|
||||
// 商品SKU
|
||||
export default {
|
||||
name: 'ns-goods-sku-index',
|
||||
components: {
|
||||
nsGoodsSku: () => import('@/components/ns-goods-sku/ns-goods-sku.vue'),
|
||||
nsLogin: () => import('@/components/ns-login/ns-login.vue'),
|
||||
nsGoodsSku
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
@@ -214,12 +214,12 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uniPopup from '@/components/uni-popup/uni-popup-sku.vue';
|
||||
// 商品SKU
|
||||
export default {
|
||||
name: 'ns-goods-sku',
|
||||
components: {
|
||||
uniPopup: () => import('@/components/uni-popup/uni-popup-sku.vue'),
|
||||
nsLogin: () => import('@/components/ns-login/ns-login.vue'),
|
||||
uniPopup
|
||||
},
|
||||
props: {
|
||||
goodsId: {
|
||||
@@ -1109,7 +1109,7 @@
|
||||
key: 'orderCreateData',
|
||||
data: data,
|
||||
success: () => {
|
||||
this.$util.redirectTo('/pages_order/base/payment');
|
||||
this.$util.redirectTo('/pages_order/payment');
|
||||
this.btnSwitch = false;
|
||||
}
|
||||
});
|
||||
|
||||
@@ -97,6 +97,13 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uniPopup from '@/components/uni-popup/uni-popup.vue';
|
||||
import registerReward from '@/components/register-reward/register-reward.vue';
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
import privacyPopup from '@/components/wx-privacy-popup/privacy-popup.vue';
|
||||
// #endif
|
||||
|
||||
import auth from '@/common/js/auth.js';
|
||||
import validate from '@/common/js/validate.js';
|
||||
|
||||
@@ -104,10 +111,10 @@
|
||||
mixins: [auth],
|
||||
name: 'ns-login',
|
||||
components: {
|
||||
uniPopup: () => import('@/components/uni-popup/uni-popup.vue'),
|
||||
registerReward: () => import('@/components/register-reward/register-reward.vue'),
|
||||
uniPopup,
|
||||
registerReward,
|
||||
// #ifdef MP-WEIXIN
|
||||
privacyPopup: () => import('@/components/wx-privacy-popup/privacy-popup.vue'),
|
||||
privacyPopup
|
||||
// #endif
|
||||
},
|
||||
data() {
|
||||
@@ -774,7 +781,7 @@
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
<style scoped>
|
||||
/deep/ .reward-popup .uni-popup__wrapper-box {
|
||||
background: none !important;
|
||||
max-width: unset !important;
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style lang="scss">
|
||||
.mp-html{
|
||||
/deep/ img{
|
||||
width:100% !important;
|
||||
|
||||
@@ -75,9 +75,11 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uniPopup from '../uni-popup/uni-popup.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
uniPopup: () => import('../uni-popup/uni-popup.vue'),
|
||||
uniPopup
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -169,7 +171,7 @@
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style scoped>
|
||||
/deep/ .newgift-content uni-image {
|
||||
width: 113rpx !important;
|
||||
height: 24rpx !important;
|
||||
@@ -191,7 +193,7 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style lang="scss">
|
||||
.reward-wrap {
|
||||
width: 85vw;
|
||||
height: auto;
|
||||
|
||||
@@ -278,10 +278,12 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import pickRegions from '@/components/pick-regions/pick-regions.vue'
|
||||
|
||||
export default {
|
||||
name: 'ns-form',
|
||||
components: {
|
||||
pickRegions: () => import('@/components/pick-regions/pick-regions.vue'),
|
||||
pickRegions
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
|
||||
@@ -43,6 +43,9 @@
|
||||
|
||||
<!-- 旧版支付组件 订单表不为order表 的订单支付时使用该组件 -->
|
||||
<script>
|
||||
import uniPopup from '@/components/uni-popup/uni-popup.vue';
|
||||
import nsSwitch from '@/components/ns-switch/ns-switch.vue';
|
||||
|
||||
// #ifdef H5
|
||||
import { Weixin } from 'common/js/wx-jssdk.js';
|
||||
// #endif
|
||||
@@ -50,8 +53,8 @@
|
||||
export default {
|
||||
name: 'ns-payment',
|
||||
components: {
|
||||
uniPopup: () => import('@/components/uni-popup/uni-popup.vue'),
|
||||
nsSwitch: () => import('@/components/ns-switch/ns-switch.vue'),
|
||||
uniPopup,
|
||||
nsSwitch
|
||||
},
|
||||
props: {
|
||||
balanceDeduct: {
|
||||
@@ -109,12 +112,11 @@
|
||||
};
|
||||
},
|
||||
created(e) {
|
||||
let url = '';
|
||||
// #ifdef H5
|
||||
url = window.location.href
|
||||
let url = window.location.href
|
||||
// #endif
|
||||
// #ifndef H5
|
||||
url = getCurrentPages()[getCurrentPages().length - 1].route
|
||||
let url = getCurrentPages()[getCurrentPages().length - 1].route
|
||||
// #endif
|
||||
let list = url.match('presale/order_list/order_list')
|
||||
let detail = url.match('presale/order_detail/order_detail')
|
||||
|
||||
@@ -1,37 +0,0 @@
|
||||
<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>
|
||||
@@ -10,8 +10,7 @@
|
||||
<view class="body">
|
||||
<!-- 左侧日期选择 -->
|
||||
<scroll-view :scroll-y="true" class="left">
|
||||
<view class="item" :class="index == keyJudge ? 'itemDay' : ''" v-for="(item, index) in dayData"
|
||||
:key="index" @click="selectTime('days', index, 'yes')">
|
||||
<view class="item" :class="index == keyJudge ? 'itemDay' : ''" v-for="(item, index) in dayData" :key="index" @click="selectTime('days', index, 'yes')">
|
||||
<block v-if="item.title">{{ item.title }}</block>
|
||||
<block v-else>{{ item.month }}</block>
|
||||
<text class="itemtext">{{ item.Day }}</text>
|
||||
@@ -19,11 +18,9 @@
|
||||
</scroll-view>
|
||||
<!-- 右侧时间选择 -->
|
||||
<scroll-view :scroll-y="true" class="right">
|
||||
<view class="item" :class="key == keyJudge && index == keys ? 'itemTime' : ''"
|
||||
v-for="(item, index) in timeData" :key="index" @click="selectTime('time', index, 'yes')">
|
||||
<view class="item" :class="key == keyJudge && index == keys ? 'itemTime' : ''" v-for="(item, index) in timeData" :key="index" @click="selectTime('time', index, 'yes')">
|
||||
{{ item }}
|
||||
<text v-if="key == keyJudge && index == keys"
|
||||
class="iconfont icon-yuan_checked color-base-text"></text>
|
||||
<text v-if="key == keyJudge && index == keys" class="iconfont icon-yuan_checked color-base-text"></text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
@@ -33,10 +30,11 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uniPopup from '@/components/uni-popup/uni-popup.vue';
|
||||
export default {
|
||||
name: "nsSelectTime",
|
||||
components: {
|
||||
uniPopup: () => import('@/components/uni-popup/uni-popup.vue'),
|
||||
uniPopup
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -59,7 +57,7 @@ export default {
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
refresh() {
|
||||
refresh(){
|
||||
this.key = 0;
|
||||
this.keys = 0;
|
||||
this.keyJudge = 0;
|
||||
@@ -92,7 +90,7 @@ export default {
|
||||
this.key = this.keyJudge;
|
||||
let obj = this.dayData[this.key];
|
||||
obj.time = this.timeData[this.keys];
|
||||
let time = obj.time.replace('立即配送（', '').replace('）', '');
|
||||
let time = obj.time.replace('立即配送（','').replace('）','');
|
||||
|
||||
var dateTime = new Date();
|
||||
var format = time.split('-');
|
||||
@@ -104,13 +102,13 @@ export default {
|
||||
let date = timeData[1].split('日')[0];
|
||||
|
||||
// 开始时间戳
|
||||
dateTime.setHours(startHours[0], startHours[1], 0, 0);
|
||||
obj.start_time = dateTime.getTime() / 1000;
|
||||
dateTime.setHours(startHours[0],startHours[1],0,0);
|
||||
obj.start_time = dateTime.getTime()/1000;
|
||||
obj.start_date = dateTime.getFullYear() + '-' + month + '-' + date + ' ' + format[0];
|
||||
|
||||
// 结束时间戳
|
||||
dateTime.setHours(endHours[0], endHours[1], 0, 0);
|
||||
obj.end_time = dateTime.getTime() / 1000;
|
||||
dateTime.setHours(endHours[0],endHours[1],0,0);
|
||||
obj.end_time = dateTime.getTime()/1000;
|
||||
obj.end_date = dateTime.getFullYear() + '-' + month + '-' + date + ' ' + format[1];
|
||||
|
||||
this.$emit('selectTime', { data: obj, type: judge });
|
||||
@@ -159,16 +157,16 @@ export default {
|
||||
|
||||
for (let i = 0; i < mostDay; i++) {
|
||||
let objects = {};
|
||||
let dayStr = week[nowDay];
|
||||
let dayStr = week[ nowDay ];
|
||||
// 判断最大可预约时间
|
||||
if (this.obj.dataTime.most_day > 0 && ((startTime + num * 86400) > (startTime + this.obj.dataTime.most_day * 86400))) {
|
||||
if (this.obj.dataTime.most_day > 0 && ((startTime + num * 86400) > (startTime + this.obj.dataTime.most_day * 86400) ) ) {
|
||||
this.judge = true;
|
||||
break;
|
||||
}
|
||||
//判断当天是否能够配送、自提
|
||||
if (type == 0 || judge || obj.indexOf(nowDay.toString()) != -1) {
|
||||
let endTime = this.obj.dataTime.delivery_time[(this.obj.dataTime.delivery_time.length - 1)].end_time;
|
||||
endTime -= this.obj.dataTime.time_interval * 60;
|
||||
let endTime = this.obj.dataTime.delivery_time[ (this.obj.dataTime.delivery_time.length - 1) ].end_time;
|
||||
endTime -= this.obj.dataTime.time_interval * 60;
|
||||
switch (num) {
|
||||
case 1:
|
||||
if (i == 0) {
|
||||
@@ -224,7 +222,7 @@ export default {
|
||||
nowDay = 0;
|
||||
}
|
||||
num += 1;
|
||||
|
||||
|
||||
if (this.obj.dataTime.most_day == 0 && i == 0) {
|
||||
this.judge = true;
|
||||
}
|
||||
@@ -244,25 +242,25 @@ export default {
|
||||
}
|
||||
|
||||
let timeData = [];
|
||||
|
||||
|
||||
if (!this.obj.dataTime.delivery_time) {
|
||||
this.obj.dataTime.delivery_time = [{ start_time: this.obj.dataTime.start_time, end_time: this.obj.dataTime.end_time }]
|
||||
this.obj.dataTime.delivery_time = [ {start_time: this.obj.dataTime.start_time, end_time: this.obj.dataTime.end_time} ]
|
||||
}
|
||||
|
||||
|
||||
//判断选中是否为当天
|
||||
let remainder = 0;
|
||||
//当天配送自提的话，向后推迟30分钟
|
||||
let newDayTime = JSON.parse(JSON.stringify(this.dayTime));
|
||||
// newDayTime = Math.ceil(this.dayTime / 600) * 600 + 1800;
|
||||
|
||||
|
||||
//判断选中是否为当天
|
||||
let timeJudage = false;
|
||||
if (this.dayData[this.keyJudge] && this.dayData[this.keyJudge].type && newDayTime > this.obj.dataTime.start_time) timeJudage = true;
|
||||
|
||||
|
||||
let timeInterval = this.obj.dataTime.time_interval ? this.obj.dataTime.time_interval * 60 : 1200;
|
||||
|
||||
|
||||
this.obj.dataTime.delivery_time.forEach(item => {
|
||||
item.end_time = item.end_time ? item.end_time : 86400;
|
||||
item.end_time = item.end_time ? item.end_time : 86400;
|
||||
let num = parseInt((parseInt(item.end_time) - parseInt(item.start_time)) / timeInterval);
|
||||
let time = timeJudage ? parseInt(newDayTime) : parseInt(item.start_time);
|
||||
for (let i = 0; i < num; i++) {
|
||||
@@ -273,12 +271,12 @@ export default {
|
||||
if (time <= item.end_time) {
|
||||
let text = '';
|
||||
if (this.obj.delivery.delivery_type == 'local' && i == 0) {
|
||||
text = '立即配送（' + this.$util.getTimeStr(time) + '-' + this.$util.getTimeStr(time + timeInterval) + '）';
|
||||
text = '立即配送（'+ this.$util.getTimeStr(time) + '-' + this.$util.getTimeStr(time + timeInterval) + '）';
|
||||
} else {
|
||||
text = this.$util.getTimeStr(time) + '-' + this.$util.getTimeStr(time + timeInterval);
|
||||
}
|
||||
timeData.push(text);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
timeData.push(this.$util.getTimeStr(time));
|
||||
}
|
||||
@@ -303,7 +301,6 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
.box {
|
||||
height: 728rpx;
|
||||
|
||||
.title {
|
||||
padding: 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
@@ -314,7 +311,6 @@ export default {
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
border-bottom: 1rpx solid #f7f4f4;
|
||||
|
||||
.icon-close {
|
||||
font-size: 26rpx;
|
||||
color: #909399;
|
||||
@@ -324,18 +320,15 @@ export default {
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.body {
|
||||
width: 100%;
|
||||
height: calc(100% - 90rpx);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.left {
|
||||
width: 230rpx;
|
||||
background: #f8f8f8;
|
||||
height: 100%;
|
||||
|
||||
.item {
|
||||
width: 100%;
|
||||
padding: 16rpx 30rpx;
|
||||
@@ -345,18 +338,15 @@ export default {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.itemDay {
|
||||
background: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
width: calc(100% - 230rpx);
|
||||
height: 100%;
|
||||
padding: 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.item {
|
||||
width: 100%;
|
||||
font-size: 24rpx;
|
||||
@@ -365,13 +355,11 @@ export default {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 72rpx;
|
||||
|
||||
.icon-yuan_checked {
|
||||
font-size: 38rpx;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.itemTime {
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
@@ -43,6 +43,9 @@
|
||||
|
||||
<!-- 新版支付组件 订单表为order表 的订单支付时使用该组件 -->
|
||||
<script>
|
||||
import uniPopup from '@/components/uni-popup/uni-popup.vue';
|
||||
import nsSwitch from '@/components/ns-switch/ns-switch.vue';
|
||||
|
||||
// #ifdef H5
|
||||
import {
|
||||
Weixin
|
||||
@@ -52,8 +55,8 @@
|
||||
export default {
|
||||
name: 'payment',
|
||||
components: {
|
||||
uniPopup: () => import('@/components/uni-popup/uni-popup.vue'),
|
||||
nsSwitch: () => import('@/components/ns-switch/ns-switch.vue'),
|
||||
uniPopup,
|
||||
nsSwitch
|
||||
},
|
||||
props: {
|
||||
// 是否可用余额支付
|
||||
|
||||
@@ -44,9 +44,6 @@
|
||||
type: String
|
||||
}
|
||||
},
|
||||
components: {
|
||||
uniPopup: () => import('@/components/uni-popup/uni-popup.vue'),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pickerValueArray: [],
|
||||
|
||||
@@ -78,11 +78,13 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uniPopup from '@/components/uni-popup/uni-popup.vue';
|
||||
|
||||
// 注册奖励弹出层
|
||||
export default {
|
||||
name: 'register-reward',
|
||||
components: {
|
||||
uniPopup: () => import('@/components/uni-popup/uni-popup.vue'),
|
||||
uniPopup
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
@@ -1,6 +0,0 @@
|
||||
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()
|
||||
})
|
||||
}
|
||||
@@ -1,218 +0,0 @@
|
||||
<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>
|
||||
@@ -1,21 +0,0 @@
|
||||
@font-face {font-family: "iconfont";
|
||||
src: url('~@/components/sx-rate/sx-rate/iconfont.eot?t=1574760464482'); /* IE9 */
|
||||
src: url('~@/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('~@/components/sx-rate/sx-rate/iconfont.woff?t=1574760464482') format('woff'),
|
||||
url('~@/components/sx-rate/sx-rate/iconfont.ttf?t=1574760464482') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
|
||||
url('~@/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";
|
||||
}
|
||||
|
||||
Binary file not shown.
@@ -1,29 +0,0 @@
|
||||
<?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="" 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>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -1,623 +0,0 @@
|
||||
/**
|
||||
* @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
|
||||
@@ -1,186 +0,0 @@
|
||||
<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>
|
||||
@@ -1,476 +0,0 @@
|
||||
<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';
|
||||
|
||||
/**
|
||||
* 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: () => import('./uni-calendar-item.vue'),
|
||||
},
|
||||
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>
|
||||
@@ -1,354 +0,0 @@
|
||||
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
|
||||
@@ -19,10 +19,11 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uniBadge from '@/components/uni-badge/uni-badge.vue';
|
||||
export default {
|
||||
name: 'UniGridItem',
|
||||
components: {
|
||||
uniBadge: () => import('@/components/uni-badge/uni-badge.vue'),
|
||||
uniBadge
|
||||
},
|
||||
props: {
|
||||
// 类型：可选值，dot：圆点；badge：角标；image：图片
|
||||
|
||||
@@ -1,218 +0,0 @@
|
||||
<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>
|
||||
|
||||
export default {
|
||||
name: 'UniNavBar',
|
||||
components: {
|
||||
uniStatusBar: () => import('@/components/uni-status-bar/uni-status-bar.vue'),
|
||||
uniIcons: () => import('@/components/uni-icons/uni-icons.vue'),
|
||||
},
|
||||
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>
|
||||
@@ -1,23 +0,0 @@
|
||||
<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>
|
||||
@@ -79,9 +79,6 @@
|
||||
default: true
|
||||
}
|
||||
},
|
||||
components: {
|
||||
uniPopup: () => import('@/components/uni-popup/uni-popup.vue'),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
wxWorkSDK: null
|
||||
|
||||
Reference in New Issue
Block a user