增加发运统计页面,修改websocket,增加消息推送
| | |
| | | <script> |
| | | export default { |
| | | onLaunch: function() { |
| | | console.log('App Launch') |
| | | }, |
| | | onShow: function() { |
| | | console.log('App Show') |
| | | }, |
| | | onHide: function() { |
| | | console.log('App Hide') |
| | | } |
| | | } |
| | | export default { |
| | | onShow() {}, |
| | | methods: {} |
| | | }; |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | /*每个页面公共css */ |
| | | @import '@/uni_modules/uview-ui/index.scss'; |
| | | /*每个页面公共css */ |
| | | @import '@/uni_modules/uview-ui/index.scss'; |
| | | </style> |
| | |
| | | url: '/wrzs/appMessage/getMessageByUser', |
| | | method: 'GET' |
| | | }, |
| | | // 已读消息 |
| | | readMessage: { url: '/wrzs/appMessage/readMessage' }, |
| | | delteMessage: { url: '/wrzs/appMessage/deleteMessage', method: 'GET' } |
| | | // 删除消息 |
| | | delteMessage: { url: '/wrzs/appMessage/deleteMessage', method: 'GET' }, |
| | | // 消息详情 |
| | | getMsgDetail: { |
| | | url: '/wrzs/appMessage/getMsgById', |
| | | method: 'GET' |
| | | }, |
| | | // 发运统计筛选条件 |
| | | getShippingCondition: { |
| | | url: '/wrzs/tmtaskcoal/getShippingCondition', |
| | | method: 'GET' |
| | | }, |
| | | // 发运统计数据 |
| | | getTmTaskCoalData: { |
| | | url: '/wrzs/tmtaskcoal/getTmTaskCoalData', |
| | | method: 'GET' |
| | | } |
| | | } |
| | |
| | | |
| | | |
| | | import { BaseUrl as wrBaseUrl } from '@/api/request.js' |
| | | // const BaseUrl = 'http://192.168.31.14:9999' |
| | | const BaseUrl = 'http://192.168.31.14:9999' |
| | | // const BaseUrl = "http://hesuancj.cn:9999" |
| | | const BaseUrl = 'https://mx.jzeg.cn:9095' |
| | | // const BaseUrl = 'https://mx.jzeg.cn:9095' |
| | | // const BaseUrl = 'http://192.168.31.18:9999' |
| | | |
| | | // 登录 |
| | |
| | | // const BaseUrl = "http://192.168.31.18:9997" |
| | | // const webSocketUrl = "ws://192.168.31.18:9997/wrzs/ws/info" |
| | | |
| | | // const BaseUrl = "http://192.168.31.14:9997"; |
| | | // const webSocketUrl = "ws://192.168.31.14:9997/wrzs/ws/info" |
| | | const BaseUrl = "http://192.168.31.14:9997"; |
| | | const webSocketUrl = "ws://192.168.31.14:9997/wrzs/ws/info" |
| | | // // 线上开发 |
| | | // const BaseUrl = "http://hesuancj.cn:9997"; |
| | | // const webSocketUrl = "ws://hesuancj.cn:9997/wrzs/ws/info" |
| | | // // 线上生产 |
| | | const BaseUrl = "https://mx.jzeg.cn:9095"; |
| | | const webSocketUrl = "wss://mx.jzeg.cn:9095/wrzs/ws/info" |
| | | // const BaseUrl = "https://mx.jzeg.cn:9095"; |
| | | // const webSocketUrl = "wss://mx.jzeg.cn:9095/wrzs/ws/info" |
| | | |
| | | |
| | | // 请求拦截 |
| | |
| | | } |
| | | |
| | | } |
| | | ], |
| | | ,{ |
| | | "path" : "pages/customer-page/customer-my/faYunstatistics/faYunstatistics", |
| | | "style" : |
| | | { |
| | | "navigationBarTitleText": "", |
| | | "enablePullDownRefresh": false |
| | | } |
| | | |
| | | } |
| | | ], |
| | | "subPackages": [{ |
| | | "root": "pages/register", |
| | | "pages": [{ |
| | |
| | | color: #909399; |
| | | } |
| | | .label-value { |
| | | min-width: vww(85); |
| | | margin-top: vww(10); |
| | | color: #606266; |
| | | } |
| | |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="statistics"><u-button text="发运统计" type="primary" @click="statistics"></u-button></view> |
| | | <view class="logout"><u-button text="退出登录" type="primary" @click="logout()"></u-button></view> |
| | | |
| | | <!-- 新建车队弹出框 --> |
| | |
| | | }, |
| | | logoutCancel() { |
| | | this.logoutShow = false; |
| | | }, |
| | | // 跳转发运统计页面 |
| | | statistics() { |
| | | uni.navigateTo({ |
| | | url: '/pages/customer-page/customer-my/faYunstatistics/faYunstatistics' |
| | | }); |
| | | } |
| | | } |
| | | }; |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | .statistics { |
| | | margin-top: vww(10); |
| | | margin-bottom: vww(10); |
| | | } |
| | | ::v-deep.customer-my { |
| | | width: 94%; |
| | | margin: 0 auto; |
New file |
| | |
| | | <template> |
| | | <view class="main"> |
| | | <view class="top-statistics"> |
| | | <view class="content-statistics"> |
| | | <view class="content-text">发运统计</view> |
| | | <view class="content-text">共{{ totalLength }}车</view> |
| | | <view class="content-text">共{{ totalTon }}吨</view> |
| | | </view> |
| | | </view> |
| | | <view class="collapse-main"> |
| | | <u-collapse> |
| | | <u-collapse-item :title="dateRange" value="筛选"> |
| | | <view class="filter-main"> |
| | | <view class="filter-body"> |
| | | <view class="condition-name">煤种:</view> |
| | | <view class="filter-name"> |
| | | <view class="filter-button" v-for="(item, index) in coalList" :key="index" @click="filterCondition(0, index, item.condition)"> |
| | | <u-button shape="circle" :text="item.condition" :type="item.active ? 'success' : ''" size="small"></u-button> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <view class="filter-body"> |
| | | <view class="condition-name">类型:</view> |
| | | <view class="filter-name"> |
| | | <view class="filter-button" v-for="(item, index) in typeList" :key="index" @click="filterCondition(1, index, item.condition)"> |
| | | <u-button shape="circle" :text="item.condition" :type="item.active ? 'success' : ''" size="small"></u-button> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <view class="filter-body"> |
| | | <view class="condition-name">客户:</view> |
| | | <view class="filter-name"> |
| | | <view class="filter-button" v-for="(item, index) in customerList" :key="index" @click="filterCondition(2, index, item.condition)"> |
| | | <u-button shape="circle" :text="item.condition" :type="item.active ? 'success' : ''" size="small"></u-button> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <view class="filter-body" v-if="roleType == 1"> |
| | | <view class="condition-name">货代:</view> |
| | | <view class="filter-name"> |
| | | <view class="filter-button" v-for="(item, index) in forwarderList" :key="index" @click="filterCondition(3, index, item.condition)"> |
| | | <u-button shape="circle" :text="item.condition" :type="item.active ? 'success' : ''" size="small"></u-button> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <view class="filter-body" v-if="roleType != 3"> |
| | | <view class="condition-name">车队:</view> |
| | | <view class="filter-name"> |
| | | <view class="filter-button" v-for="(item, index) in fleetList" :key="index" @click="filterCondition(4, index, item.condition)"> |
| | | <u-button shape="circle" :text="item.condition" :type="item.active ? 'success' : ''" size="small"></u-button> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <view class="filter-body" v-if="roleType != 1"> |
| | | <view class="condition-name">矿场:</view> |
| | | <view class="filter-name"> |
| | | <view class="filter-button" v-for="(item, index) in filedList" :key="index" @click="filterCondition(5, index, item.condition)"> |
| | | <u-button shape="circle" :text="item.condition" :type="item.active ? 'success' : ''" size="small"></u-button> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <view class="filter-body"> |
| | | <view class="condition-name">日期:</view> |
| | | <view class="filter-name"> |
| | | <u-button :text="dateselect" @click="opencalendar"></u-button> |
| | | <view class="filter-button"> |
| | | <uni-calendar |
| | | ref="calendar" |
| | | class="uni-calendar--hook" |
| | | :clear-date="true" |
| | | :date="info.date" |
| | | :insert="info.insert" |
| | | :lunar="info.lunar" |
| | | :startDate="info.startDate" |
| | | :endDate="info.endDate" |
| | | :range="info.range" |
| | | @confirm="confirm" |
| | | /> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </u-collapse-item> |
| | | </u-collapse> |
| | | </view> |
| | | <view class="date-information"> |
| | | <view class="statistics-card" v-for="(item, index) in filterList" :key="index"> |
| | | <view class="card-title"> |
| | | <view class="title-date">{{ item.condition }}</view> |
| | | <view class="title-number"> |
| | | 共{{ item.taskCoalList.length }}车 {{ |
| | | item.taskCoalList.reduce((prev, cur) => { |
| | | return prev + cur.clean; |
| | | }, 0) |
| | | }}吨 |
| | | </view> |
| | | </view> |
| | | <view class="card-main" v-for="(value, i) in item.taskCoalList" :key="i"> |
| | | <view class="arrow-right"><u-icon name="arrow-right" size="50"></u-icon></view> |
| | | <view class="main-body"> |
| | | <view class="coal-name">煤种:{{ value.coalName || '' }}</view> |
| | | <view class="clean">执行量:{{ value.clean || 0 }}</view> |
| | | <view class="out-time">出场时间:{{ value.outTime || '' }}</view> |
| | | <view class="car-number">车牌号:{{ value.carNo || '' }}</view> |
| | | <view class="filedName">矿场:{{ value.filedName || '' }}</view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </template> |
| | | |
| | | <script> |
| | | export default { |
| | | data() { |
| | | return { |
| | | conditionList: [], |
| | | coalList: [], |
| | | typeList: [], |
| | | customerList: [], |
| | | forwarderList: [], |
| | | fleetList: [], |
| | | filedList: [], |
| | | isactive: false, |
| | | info: { |
| | | lunar: false, |
| | | range: true, |
| | | insert: false, |
| | | selected: [] |
| | | }, |
| | | first: '', |
| | | last: '', |
| | | taskList: [], |
| | | filterList: [], |
| | | totalLength: 0, |
| | | totalTon: 0 |
| | | }; |
| | | }, |
| | | onShow() { |
| | | this.firstDate(); |
| | | this.lastDate(); |
| | | this.getShipping(); |
| | | this.getTmTaskCoalData(); |
| | | }, |
| | | methods: { |
| | | firstDate() { |
| | | let y = new Date().getFullYear(); //获取年份 |
| | | let m = new Date().getMonth() + 1; //获取月份 |
| | | let d = '01'; |
| | | m = m < 10 ? '0' + m : m; //月份补 0 |
| | | this.first = [y, m, d].join('-'); |
| | | }, |
| | | lastDate() { |
| | | let y = new Date().getFullYear(); //获取年份 |
| | | let m = new Date().getMonth() + 1; //获取月份 |
| | | let d = new Date(y, m, 0).getDate(); //获取当月最后一日 |
| | | m = m < 10 ? '0' + m : m; //月份补 0 |
| | | d = d < 10 ? '0' + d : d; //日数补 0 |
| | | this.last = [y, m, d].join('-'); |
| | | }, |
| | | // 筛选条件 |
| | | getShipping() { |
| | | this.$reqGet('getShippingCondition', { startTime: this.first, endTime: this.last }).then(res => { |
| | | this.conditionList = res.data; |
| | | this.coalList = res.data |
| | | .filter(v => v.conditionType == 0) |
| | | .map(item => { |
| | | return { |
| | | ...item, |
| | | active: false |
| | | }; |
| | | }); |
| | | this.typeList = res.data |
| | | .filter(v => v.conditionType == 1) |
| | | .map(item => { |
| | | return { |
| | | ...item, |
| | | active: false |
| | | }; |
| | | }); |
| | | this.customerList = res.data |
| | | .filter(v => v.conditionType == 2) |
| | | .map(item => { |
| | | return { |
| | | ...item, |
| | | active: false |
| | | }; |
| | | }); |
| | | this.forwarderList = res.data |
| | | .filter(v => v.conditionType == 3) |
| | | .map(item => { |
| | | return { |
| | | ...item, |
| | | active: false |
| | | }; |
| | | }); |
| | | this.fleetList = res.data |
| | | .filter(v => v.conditionType == 4) |
| | | .map(item => { |
| | | return { |
| | | ...item, |
| | | active: false |
| | | }; |
| | | }); |
| | | this.filedList = res.data |
| | | .filter(v => v.conditionType == 5) |
| | | .map(item => { |
| | | return { |
| | | ...item, |
| | | active: false |
| | | }; |
| | | }); |
| | | }); |
| | | }, |
| | | // 获取数据 |
| | | getTmTaskCoalData() { |
| | | uni.showLoading({ |
| | | title: '加载中' |
| | | }); |
| | | this.$reqGet('getTmTaskCoalData', { startTime: this.first, endTime: this.last }).then(res => { |
| | | this.filterList = this.taskList = res.data; |
| | | if (this.filterList.length != 0) { |
| | | this.totalLength = this.filterList.map(v => v.taskCoalList.length).reduce((x, y) => x + y); |
| | | this.totalTon = this.filterList.map(v => |
| | | v.taskCoalList.reduce((prev, cur) => { |
| | | return cur.clean + prev; |
| | | }, 0) |
| | | ); |
| | | this.totalTon = this.totalTon.reduce((x, y) => x + y); |
| | | } else { |
| | | this.totalLength = 0; |
| | | this.totalTon = 0; |
| | | } |
| | | uni.hideLoading(); |
| | | }); |
| | | }, |
| | | // 筛选数据 |
| | | filterCondition(value, i, data) { |
| | | switch (value) { |
| | | case 0: |
| | | this.coalList[i].active = !this.coalList[i].active; |
| | | break; |
| | | case 1: |
| | | this.typeList[i].active = !this.typeList[i].active; |
| | | break; |
| | | case 2: |
| | | this.customerList[i].active = !this.customerList[i].active; |
| | | break; |
| | | case 3: |
| | | this.forwarderList[i].active = !this.forwarderList[i].active; |
| | | break; |
| | | case 4: |
| | | this.fleetList[i].active = !this.fleetList[i].active; |
| | | break; |
| | | case 5: |
| | | this.filedList[i].active = !this.filedList[i].active; |
| | | break; |
| | | } |
| | | |
| | | const validateFn = key => (v, arr) => { |
| | | if (arr.length == 0) { |
| | | return true; |
| | | } else { |
| | | return arr.includes(v[key]); |
| | | } |
| | | }; |
| | | let conditionMapping = { |
| | | coalName: this.coalList.filter(v => v.active == true).map(item => item.condition), |
| | | orderType: this.typeList.filter(v => v.active == true).map(item => item.condition), |
| | | customerName: this.customerList.filter(v => v.active == true).map(item => item.condition), |
| | | xsUser2Name: this.forwarderList.filter(v => v.active == true).map(item => item.condition), |
| | | fleetName: this.fleetList.filter(v => v.active == true).map(item => item.condition), |
| | | filedName: this.filedList.filter(v => v.active == true).map(item => item.condition) |
| | | }; |
| | | |
| | | const mapping = { |
| | | coalName: validateFn('coalName'), |
| | | orderType: validateFn('orderType'), |
| | | customerName: validateFn('customerName'), |
| | | xsUser2Name: validateFn('xsUser2Name'), |
| | | fleetName: validateFn('fleetName'), |
| | | filedName: validateFn('filedName') |
| | | }; |
| | | this.filterList = this.taskList.map(val => { |
| | | return { |
| | | condition: val.condition, |
| | | conditionId: val.conditionId, |
| | | conditionType: val.conditionType, |
| | | taskCoalList: val.taskCoalList.filter(v => Reflect.ownKeys(conditionMapping).every(key => mapping[key](v, conditionMapping[key]))) |
| | | }; |
| | | }); |
| | | if (this.filterList.length != 0) { |
| | | this.totalLength = this.filterList.map(v => v.taskCoalList.length).reduce((x, y) => x + y); |
| | | this.totalTon = this.filterList.map(v => |
| | | v.taskCoalList.reduce((prev, cur) => { |
| | | return cur.clean + prev; |
| | | }, 0) |
| | | ); |
| | | this.totalTon = this.totalTon.reduce((x, y) => x + y); |
| | | } else { |
| | | this.totalLength = 0; |
| | | this.totalTon = 0; |
| | | } |
| | | }, |
| | | confirm(e) { |
| | | this.first = e.range.before; |
| | | this.last = e.range.after; |
| | | }, |
| | | opencalendar() { |
| | | this.$refs.calendar.open(); |
| | | } |
| | | }, |
| | | computed: { |
| | | roleType() { |
| | | return uni.getStorageSync('roleType'); |
| | | }, |
| | | dateRange() { |
| | | return `日期:${this.first}-${this.last}`; |
| | | }, |
| | | dateselect() { |
| | | return `${this.first}-${this.last}`; |
| | | } |
| | | }, |
| | | watch: { |
| | | dateselect(newV, old) { |
| | | let tempDate = `${this.first}-${this.last}`; |
| | | console.log(newV, '新', old, '旧', tempDate, '一开始'); |
| | | if (newV != old && old != '-') { |
| | | this.first = newV.slice(0, 10); |
| | | this.last = newV.slice(11); |
| | | this.getTmTaskCoalData(); |
| | | } |
| | | } |
| | | } |
| | | }; |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | ::v-deep .u-cell__value { |
| | | color: #9ec16c !important; |
| | | font-size: vww(18) !important; |
| | | } |
| | | ::v-deep .filter-name:nth-last-child(1) { |
| | | .u-button { |
| | | width: 66%; |
| | | } |
| | | } |
| | | .main { |
| | | width: 96%; |
| | | margin: 0 auto; |
| | | background-color: #e8eaec; |
| | | /*顶部统计栏*/ |
| | | .top-statistics { |
| | | width: 100%; |
| | | height: vww(50); |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | .content-statistics { |
| | | width: 100%; |
| | | height: 100%; |
| | | padding: 0 vww(10); |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | .content-text { |
| | | width: vww(80); |
| | | height: vww(30); |
| | | font-size: vww(20); |
| | | color: #393a3c; |
| | | } |
| | | } |
| | | } |
| | | // 选项折叠框 |
| | | .collapse-main { |
| | | width: 100%; |
| | | margin-top: vww(10); |
| | | background-color: #fff; |
| | | border: 1px solid #cccccc; |
| | | border-radius: vww(5); |
| | | .filter-main { |
| | | width: 100%; |
| | | display: flex; |
| | | flex-direction: column; |
| | | justify-content: space-around; |
| | | .filter-body { |
| | | width: 100%; |
| | | position: relative; |
| | | display: flex; |
| | | justify-content: flex-start; |
| | | flex-wrap: wrap; |
| | | .condition-name { |
| | | font-size: vww(16); |
| | | } |
| | | .filter-name { |
| | | width: 100%; |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | justify-content: flex-start; |
| | | align-items: flex-start; |
| | | position: relative; |
| | | top: vww(-34); |
| | | |
| | | .filter-button { |
| | | color: #393a3c; |
| | | height: vww(16); |
| | | padding: vww(8); |
| | | margin: vww(5) vww(5); |
| | | &:nth-child(1) { |
| | | margin-left: vww(48); |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | // 日期发运 |
| | | .date-information { |
| | | width: 100%; |
| | | display: flex; |
| | | flex-direction: column; |
| | | .statistics-card { |
| | | width: 100%; |
| | | margin-top: vww(8); |
| | | border: 1px solid #cccccc; |
| | | border-radius: vww(5); |
| | | background-color: #fff; |
| | | min-height: vww(120); |
| | | display: flex; |
| | | flex-direction: column; |
| | | justify-content: space-between; |
| | | .card-title { |
| | | width: 100%; |
| | | height: vww(40); |
| | | line-height: vww(40); |
| | | padding-left: vww(5); |
| | | color: #bcbcbc; |
| | | border-bottom: 1px solid #cccccc; |
| | | display: flex; |
| | | .title-date { |
| | | width: vww(90); |
| | | margin-right: vww(10); |
| | | } |
| | | .title-number { |
| | | flex: 1; |
| | | } |
| | | } |
| | | .card-main { |
| | | width: 100%; |
| | | flex: 1; |
| | | position: relative; |
| | | .arrow-right { |
| | | position: absolute; |
| | | right: vww(14); |
| | | top: vww(18); |
| | | } |
| | | .main-body { |
| | | width: 80%; |
| | | height: vww(60); |
| | | margin-top: vww(5); |
| | | padding: vww(3); |
| | | color: #686868; |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | justify-content: space-around; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | </style> |
| | |
| | | uni.navigateBack({ |
| | | delta: 1 |
| | | }); |
| | | }, 1000); |
| | | }, 500); |
| | | } else { |
| | | this.$u.toast(res.msg ? res.msg : '预约失败'); |
| | | } |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | let socket = null; |
| | | import { webSocketUrl } from '@/api/request.js'; |
| | | import { mapState, mapMutations } from 'vuex'; |
| | | export default { |
| | | onLoad(value) { |
| | | if (value.orderPlanId && value.yyId) { |
| | |
| | | sceneId: '', |
| | | gateCameraId: '', |
| | | equipmentCode: '', |
| | | weigh: 30 |
| | | weigh: 0 |
| | | } |
| | | }; |
| | | }, |
| | |
| | | this.init(); |
| | | }, |
| | | computed: { |
| | | ...mapState(['globalweigh', 'globalinfraredStatus']), |
| | | name() { |
| | | return uni.getStorageSync('name'); |
| | | }, |
| | |
| | | } |
| | | }); |
| | | }, |
| | | /** |
| | | * 初始化 weoSocket |
| | | */ |
| | | initWebSocket() { |
| | | let wsUrl = `${webSocketUrl}?access_token=${uni.getStorageSync('token')}`; |
| | | socket = uni.connectSocket({ |
| | | url: wsUrl, |
| | | header: { |
| | | CLIENT_TOC: 'Y' |
| | | }, |
| | | complete: res => { |
| | | console.log(res, 'socket结果'); |
| | | } |
| | | }); |
| | | socket.onOpen(() => { |
| | | console.log('onOpen'); |
| | | }); |
| | | // 获取服务器传来的数据,做相应处理 |
| | | socket.onMessage(res => { |
| | | console.log('socketWeigh', res); |
| | | let nowWeighObj = JSON.parse(res.data.slice(7)); |
| | | if (nowWeighObj.eqCode == this.weighHouseCode) { |
| | | if (nowWeighObj.eqInfraredStatus) { |
| | | this.weighData.weigh = nowWeighObj.weigh; |
| | | } else { |
| | | this.weighData.weigh = nowWeighObj.weigh; |
| | | } |
| | | } |
| | | }); |
| | | socket.onClose(() => { |
| | | console.log('webSocketClose'); |
| | | this.$u.toast('磅房中断'); |
| | | }); |
| | | socket.onError(err => { |
| | | console.log('socket报错', err); |
| | | this.$u.toast('出现错误,请重新进入该页面,重试!!'); |
| | | }); |
| | | }, |
| | | // 放空 |
| | | evacuation() { |
| | | this.evacuationModalShow = true; |
| | | }, |
| | | // 放空弹窗确认 |
| | | evacuationConfirm() { |
| | | this.weighData = { |
| | | ...this.weighData, |
| | | weigh: this.globalweigh |
| | | }; |
| | | let mix = Object.assign(this.weighData, this.getWeightHouseObj); |
| | | this.$reqPost('getOneEvacuation', mix, 'json').then(res => { |
| | | console.log(res, '第一次放空'); |
| | |
| | | <template> |
| | | <view class="coal-pick-up-bill"> |
| | | <view class="driver" style="background:url(https://hesuancj.cn:9095/appimg/image/coalBackgroud/coal-background.png) no-repeat;background-size:100% 100%;"> |
| | | <view class="driver" style="background:url(https://mx.jzeg.cn:9095/appimg/image/coalBackgroud/coal-background.png) no-repeat;background-size:100% 100%;"> |
| | | <view class="driver-coalOne">电子提煤单</view> |
| | | <view class="driver-coalTwo"> |
| | | <view>{{ coalData.code || '暂无订单编号' }}</view> |
| | |
| | | </view> |
| | | <view class=""> |
| | | 红外: |
| | | <u--text :type="infraredStatus ? 'error' : 'success'" :text="infraredStatus ? '异常' : '正常'" size="34"></u--text> |
| | | <u--text :type="globalinfraredStatus ? 'error' : 'success'" :text="globalinfraredStatus ? '异常' : '正常'" size="34"></u--text> |
| | | </view> |
| | | <!-- <view class=""> |
| | | 雷达: |
| | |
| | | <u-button |
| | | type="primary" |
| | | text="确定称重" |
| | | :disabled="realTimeWeigh == 0 || infraredStatus" |
| | | :disabled="realTimeWeigh == 0 || globalinfraredStatus" |
| | | :loading="isConfirmWeighLoading" |
| | | loadingText="加载中" |
| | | loadingText="确认" |
| | | @click="confirmWeigh" |
| | | ></u-button> |
| | | <u-button type="primary" text="返回加减吨" :disabled="addAndSubtractCoalDisabled" @click="addAndSubtractCoal" class="jiajian"></u-button> |
| | |
| | | <script> |
| | | let socket = null; |
| | | import { webSocketUrl } from '@/api/request.js'; |
| | | import { mapState, mapMutations } from 'vuex'; |
| | | import toast from '../../../../../uni_modules/uview-ui/libs/config/props/toast'; |
| | | export default { |
| | | onLoad(params) { |
| | | console.log(params, '第二次放空参数'); |
| | | this.takeCoalId = params.takeCoalId; |
| | | this.weighData.sceneId = params.sceneId; |
| | | this.weighData.gateCameraId = params.gateCameraId; |
| | | this.weighData.equipmentCode = params.gateCameraCode; |
| | | this.weighHouseCode = params.weighHouseCode; |
| | | this.changeweighHouseCode(params.weighHouseCode); |
| | | }, |
| | | data() { |
| | | return { |
| | |
| | | }, |
| | | watch: { |
| | | realTimeWeigh(newV, oldV) { |
| | | console.log(newV); |
| | | if (this.weighList.orderType == '外销' || this.weighList.orderType == '内销') { |
| | | if (this.weighList.skin == 0) { |
| | | // this.temporaryWeighObj.skin = this.realTimeWeigh; |
| | |
| | | this.temporaryWeighObj.clean = (this.weighList.hair - this.temporaryWeighObj.skin).toFixed(2); |
| | | } |
| | | } |
| | | }, |
| | | // 监听重量变化 |
| | | globalweigh(v) { |
| | | this.weighData.weigh = this.realTimeWeigh = v; |
| | | } |
| | | }, |
| | | onShow() { |
| | | this.init(); |
| | | this.initWebSocket(); |
| | | // this.initWebSocket(); |
| | | }, |
| | | computed: { |
| | | ...mapState(['globalweigh', 'globalinfraredStatus']), |
| | | token() { |
| | | return uni.getStorageSync('token'); |
| | | }, |
| | |
| | | } |
| | | }, |
| | | methods: { |
| | | ...mapMutations(['changeweighHouseCode']), |
| | | init() { |
| | | // 获取称重信息 |
| | | this.$reqGet('weighList', { id: this.takeCoalId }).then(res => { |
| | |
| | | }); |
| | | this.isConfirmWeighLoading = false; |
| | | }, 1000); |
| | | } else { |
| | | this.$u.toast('称重失败,请稍后重试'); |
| | | } |
| | | }) |
| | | .catch(err => { |
| | |
| | | socket.onMessage(res => { |
| | | console.log('socketWeigh', res); |
| | | let nowWeighObj = JSON.parse(res.data.slice(7)); |
| | | console.log(nowWeighObj); |
| | | // 一开始是weighHouseCode |
| | | if (nowWeighObj.eqCode == this.weighHouseCode) { |
| | | if (nowWeighObj.eqInfraredStatus) { |
| | | this.infraredStatus = true; |
| | |
| | | <u-button text="退出登录" type="primary" @click="logout"></u-button> |
| | | <u-button text="修改个人资料" type="primary" @click="editBtnClick"></u-button> |
| | | </view> |
| | | <view class="statistics"><u-button text="发运统计" type="primary" @click="statistics"></u-button></view> |
| | | </view> |
| | | |
| | | <!-- 图片预览弹出框 --> |
| | | <view class="previewImage-container"> |
| | | <u-popup :show="previewImageShow" mode="center" @close="previewImageClose" @open="previewImageOpen"> |
| | | <u--image :src="previewImageSrc!=null?BaseUrl + previewImageSrc:''" width="400px" height="400px"></u--image> |
| | | <u--image :src="previewImageSrc != null ? BaseUrl + previewImageSrc : ''" width="400px" height="400px"></u--image> |
| | | </u-popup> |
| | | </view> |
| | | |
| | |
| | | }, |
| | | logoutCancel() { |
| | | this.logoutShow = false; |
| | | }, |
| | | // 跳转发运统计页面 |
| | | statistics() { |
| | | uni.navigateTo({ |
| | | url: '/pages/customer-page/customer-my/faYunstatistics/faYunstatistics' |
| | | }); |
| | | } |
| | | } |
| | | }; |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | .statistics { |
| | | margin-top: vww(10); |
| | | margin-bottom: vww(10); |
| | | } |
| | | ::v-deep.driver-my { |
| | | width: 90%; |
| | | margin: 0 auto; |
| | |
| | | <text>{{ item.carNum }}</text> |
| | | 张 |
| | | </view> |
| | | <view class="card-left__utils"> |
| | | <u-button text="转发" type="primary" @tap.stop="forwardClick(item)" shape="circle" v-if="item.carNumSurplusHuodai !== 0"></u-button> |
| | | </view> |
| | | <view class="card-left__utils"><u-button text="转发" type="primary" @tap.stop="forwardClick(item)" shape="circle"></u-button></view> |
| | | </template> |
| | | <template v-slot:right-top> |
| | | <view class="right-top"> |
| | |
| | | <view class="addCarButton"><u-button text="添加" type="primary" @click="addNewGroupClick"></u-button></view> |
| | | </u-popup> |
| | | </view> |
| | | |
| | | <view class="statistics"><u-button text="发运统计" type="primary" @click="statistics"></u-button></view> |
| | | <view class="utils"><u-button text="退出登录" type="primary" @click="logout"></u-button></view> |
| | | |
| | | <!-- 删除车队模态框 --> |
| | | <view class="deleteFleetModal"> |
| | | <u-modal |
| | |
| | | }, |
| | | logoutCancel() { |
| | | this.logoutShow = false; |
| | | }, |
| | | // 跳转发运统计页面 |
| | | statistics() { |
| | | uni.navigateTo({ |
| | | url: '/pages/customer-page/customer-my/faYunstatistics/faYunstatistics' |
| | | }); |
| | | } |
| | | } |
| | | }; |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | .statistics { |
| | | margin-top: vww(10); |
| | | margin-bottom: vww(10); |
| | | } |
| | | ::v-deep.freightForwarder-my { |
| | | width: 94%; |
| | | margin: 0 auto; |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import { customerId } from '@/utils/status' |
| | | import { customerId } from '@/utils/status'; |
| | | |
| | | export default { |
| | | onLoad(params) { |
| | | console.log(params, '转发页面的参数') |
| | | console.log(params, '转发页面的参数'); |
| | | // 客户 |
| | | this.cars2 = Number(params.cars2) |
| | | this.carNumSurplus1 = Number(params.carNumSurplus1) |
| | | this.cars2 = Number(params.cars2); |
| | | this.carNumSurplus1 = Number(params.carNumSurplus1); |
| | | // 货代 |
| | | this.carNum = Number(params.carNum) |
| | | this.carNumSurplusHuodai = this.forwardSurplus = Number(params.carNumSurplusHuodai) |
| | | this.orderPlanId = params.orderPlanId |
| | | this.carNum = Number(params.carNum); |
| | | this.carNumSurplusHuodai = this.forwardSurplus = Number(params.carNumSurplusHuodai); |
| | | this.orderPlanId = params.orderPlanId; |
| | | this.$reqGet('forwardList', { OrderPlanId: params.orderPlanId }).then(res => { |
| | | if (res.data.length !== 0 && this.roleType == 1) { |
| | | this.jhOrderPlanForwardList = res.data.map(item => { |
| | |
| | | xsUserId: item.xsUserId === null ? 0 : item.xsUserId, |
| | | fleetId: item.fleetId === null ? 0 : item.fleetId, |
| | | checkboxValue1: '' |
| | | } |
| | | }) |
| | | }; |
| | | }); |
| | | } else if (res.data.length !== 0 && this.roleType == 2) { |
| | | this.jhOrderPlanForwardList = res.data.map(item => { |
| | | return { |
| | |
| | | xsUserId: item.xsUserId === null ? 0 : item.xsUserId, |
| | | fleetId: item.fleetId === null ? 0 : item.fleetId, |
| | | checkboxValue1: '' |
| | | } |
| | | }) |
| | | }; |
| | | }); |
| | | } else { |
| | | this.jhOrderPlanForwardList = this.jhOrderPlanForwardList.map(v => { |
| | | if (!v.orderPlanId) { |
| | | return { |
| | | ...v, |
| | | orderPlanId: params.orderPlanId |
| | | } |
| | | }; |
| | | } |
| | | }) |
| | | }); |
| | | } |
| | | }) |
| | | }); |
| | | }, |
| | | data() { |
| | | return { |
| | |
| | | carNum: '', |
| | | carNumSurplusHuodai: '', |
| | | formNum: 1 |
| | | } |
| | | }; |
| | | }, |
| | | onShow() { |
| | | this.init() |
| | | this.init(); |
| | | if (this.roleType == 2) { |
| | | this.list1.splice(1, 1) |
| | | this.tabHuoDai = false |
| | | this.list1.splice(1, 1); |
| | | this.tabHuoDai = false; |
| | | } |
| | | }, |
| | | computed: { |
| | | roleType() { |
| | | return uni.getStorageSync('roleType') |
| | | return uni.getStorageSync('roleType'); |
| | | }, |
| | | text() { |
| | | return `已领取${this.cars2}张提煤单,剩余${this.carNumSurplus1}张提煤单` |
| | | return `已领取${this.cars2}张提煤单,剩余${this.carNumSurplus1}张提煤单`; |
| | | }, |
| | | text1() { |
| | | return `已拥有${this.carNum}张提煤单,剩余${this.carNumSurplusHuodai}张提煤单` |
| | | return `已拥有${this.carNum}张提煤单,剩余${this.carNumSurplusHuodai}张提煤单`; |
| | | } |
| | | }, |
| | | methods: { |
| | | init() { |
| | | console.log('roleType', this.roleType) |
| | | console.log('roleType', this.roleType); |
| | | switch (this.roleType) { |
| | | case 1: |
| | | this.getAllHuoDaiByCustomerId() |
| | | this.getFleet() |
| | | break |
| | | this.getAllHuoDaiByCustomerId(); |
| | | this.getFleet(); |
| | | break; |
| | | case 2: |
| | | this.getFleet() |
| | | break |
| | | this.getFleet(); |
| | | break; |
| | | default: |
| | | break |
| | | break; |
| | | } |
| | | }, |
| | | allrelay(x, y) { |
| | | let a = 0 |
| | | let a = 0; |
| | | if (y != 0) { |
| | | a = Number(x) + Number(y) |
| | | return a |
| | | a = Number(x) + Number(y); |
| | | return a; |
| | | } else { |
| | | return Number(x) |
| | | return Number(x); |
| | | } |
| | | }, |
| | | allrelayto(x, y) { |
| | | let a = 0 |
| | | let a = 0; |
| | | if (y != 0) { |
| | | a = Number(x) - Number(y) |
| | | return a |
| | | a = Number(x) - Number(y); |
| | | return a; |
| | | } else { |
| | | return Number(x) |
| | | return Number(x); |
| | | } |
| | | }, |
| | | checkboxChange(value, index) { |
| | | uni.setStorageSync('allrelay', this.jhOrderPlanForwardList[index].carNum) |
| | | uni.setStorageSync('allrelay', this.jhOrderPlanForwardList[index].carNum); |
| | | this.jhOrderPlanForwardList = this.jhOrderPlanForwardList.map((v, i) => { |
| | | return { |
| | | ...v, |
| | | ischecked: false |
| | | } |
| | | }) |
| | | }; |
| | | }); |
| | | if (value.length != 0) { |
| | | let tempforwardSurplus = this.forwardSurplus |
| | | let tempcarNumSurplus1 = this.carNumSurplus1 |
| | | let tempforwardSurplus = this.forwardSurplus; |
| | | let tempcarNumSurplus1 = this.carNumSurplus1; |
| | | // 计算全部转发数 |
| | | // 客户 |
| | | if (this.roleType == 1) { |
| | | this.jhOrderPlanForwardList[index].carNum = this.allrelay(this.jhOrderPlanForwardList[index].carNum, tempcarNumSurplus1) |
| | | this.jhOrderPlanForwardList[index].carNum = this.allrelay(this.jhOrderPlanForwardList[index].carNum, tempcarNumSurplus1); |
| | | } |
| | | tempcarNumSurplus1 = 0 |
| | | tempcarNumSurplus1 = 0; |
| | | // 货代 |
| | | if (this.roleType == 2) { |
| | | this.jhOrderPlanForwardList[index].carNum = this.allrelay(this.jhOrderPlanForwardList[index].carNum, tempforwardSurplus) |
| | | this.jhOrderPlanForwardList[index].carNum = this.allrelay(this.jhOrderPlanForwardList[index].carNum, tempforwardSurplus); |
| | | } |
| | | tempforwardSurplus = 0 |
| | | tempforwardSurplus = 0; |
| | | // 选择一个后其余禁止复选 |
| | | this.jhOrderPlanForwardList.forEach((v, i) => { |
| | | if (i !== index) { |
| | | v.ischecked = true |
| | | v.ischecked = true; |
| | | } |
| | | }) |
| | | }); |
| | | } else { |
| | | let tempforwardSurplus = this.forwardSurplus |
| | | let tempcarNumSurplus1 = this.carNumSurplus1 |
| | | let tempforwardSurplus = this.forwardSurplus; |
| | | let tempcarNumSurplus1 = this.carNumSurplus1; |
| | | // 货代 |
| | | if (this.roleType == 2) { |
| | | this.jhOrderPlanForwardList[index].carNum = this.allrelayto(this.jhOrderPlanForwardList[index].carNum, this.forwardSurplus) |
| | | this.jhOrderPlanForwardList[index].carNum = this.allrelayto(this.jhOrderPlanForwardList[index].carNum, this.forwardSurplus); |
| | | if (this.jhOrderPlanForwardList[index].carNum <= 0) { |
| | | this.jhOrderPlanForwardList[index].carNum = 0; |
| | | } |
| | | } |
| | | // 客户 |
| | | if (this.roleType == 1) { |
| | | this.jhOrderPlanForwardList[index].carNum = this.allrelayto(this.jhOrderPlanForwardList[index].carNum, this.carNumSurplus1) |
| | | this.jhOrderPlanForwardList[index].carNum = this.allrelayto(this.jhOrderPlanForwardList[index].carNum, this.carNumSurplus1); |
| | | if (this.jhOrderPlanForwardList[index].carNum <= 0) { |
| | | this.jhOrderPlanForwardList[index].carNum = 0; |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | // 获取货代列表 |
| | | getAllHuoDaiByCustomerId() { |
| | | this.$reqGet('getAllHuoDaiByCustomerId').then(res => { |
| | | this.huoDaiData = res.data |
| | | }) |
| | | this.huoDaiData = res.data; |
| | | }); |
| | | }, |
| | | // 获取车队列表 |
| | | getFleet() { |
| | | this.$reqGet('getFleet').then(res => { |
| | | this.fleetData = res.data |
| | | }) |
| | | this.fleetData = res.data; |
| | | }); |
| | | }, |
| | | // 转发 |
| | | forwardObjectClick(index) { |
| | | this.selectPopupShow = true |
| | | this.index = index |
| | | this.selectPopupShow = true; |
| | | this.index = index; |
| | | }, |
| | | selectPopupClose() { |
| | | this.selectPopupShow = false |
| | | this.selectPopupShow = false; |
| | | }, |
| | | selectPopupOpen() {}, |
| | | // 转发选择货代 |
| | | forwardHuoDaiObjectSelect(item, index) { |
| | | this.$nextTick(() => { |
| | | let isableAdd = this.jhOrderPlanForwardList.filter(v => item.name === v.name) |
| | | let isableAdd = this.jhOrderPlanForwardList.filter(v => item.name === v.name); |
| | | if (isableAdd.length > 0) { |
| | | this.$u.toast('存在重复添加') |
| | | this.selectPopupShow = true |
| | | this.$u.toast('存在重复添加'); |
| | | this.selectPopupShow = true; |
| | | } else { |
| | | this.selectPopupShow = false |
| | | this.jhOrderPlanForwardList[this.index].xsUserId = item.userId |
| | | this.jhOrderPlanForwardList[this.index].name = item.name |
| | | this.jhOrderPlanForwardList[this.index].fleetId = 0 |
| | | this.selectPopupShow = false; |
| | | this.jhOrderPlanForwardList[this.index].xsUserId = item.userId; |
| | | this.jhOrderPlanForwardList[this.index].name = item.name; |
| | | this.jhOrderPlanForwardList[this.index].fleetId = 0; |
| | | } |
| | | }) |
| | | }); |
| | | }, |
| | | // 转发选择车队 |
| | | forwardFleetObjectSelect(item, index) { |
| | | this.$nextTick(() => { |
| | | let isableAdd = this.jhOrderPlanForwardList.filter(v => item.name === v.name) |
| | | let isableAdd = this.jhOrderPlanForwardList.filter(v => item.name === v.name); |
| | | if (isableAdd.length > 0) { |
| | | this.$u.toast('存在重复添加') |
| | | this.selectPopupShow = true |
| | | this.$u.toast('存在重复添加'); |
| | | this.selectPopupShow = true; |
| | | } else { |
| | | this.selectPopupShow = false |
| | | this.jhOrderPlanForwardList[this.index].fleetId = item.id |
| | | this.jhOrderPlanForwardList[this.index].name = item.name |
| | | this.jhOrderPlanForwardList[this.index].xsUserId = 0 |
| | | this.selectPopupShow = false; |
| | | this.jhOrderPlanForwardList[this.index].fleetId = item.id; |
| | | this.jhOrderPlanForwardList[this.index].name = item.name; |
| | | this.jhOrderPlanForwardList[this.index].xsUserId = 0; |
| | | } |
| | | }) |
| | | }); |
| | | }, |
| | | // 添加一组表单 |
| | | addForm() { |
| | | // 判断是否有一个复选,如果有则禁止新加的复选,没有则不禁止 |
| | | let ischeck = this.jhOrderPlanForwardList.some(v => v.ischecked == true) |
| | | let ischeck = this.jhOrderPlanForwardList.some(v => v.ischecked == true); |
| | | if (!ischeck) { |
| | | this.jhOrderPlanForwardList.push({ |
| | | orderPlanId: this.orderPlanId, |
| | |
| | | fleetId: 0, |
| | | checkboxValue1: '', |
| | | ischecked: false |
| | | }) |
| | | }); |
| | | } else { |
| | | this.jhOrderPlanForwardList.push({ |
| | | orderPlanId: this.orderPlanId, |
| | |
| | | fleetId: 0, |
| | | checkboxValue1: '', |
| | | ischecked: true |
| | | }) |
| | | }); |
| | | } |
| | | }, |
| | | // 删除一组表单 |
| | | deleteGroup(index, v) { |
| | | let tempcarNum = v.carNum |
| | | let tempcarNum = v.carNum; |
| | | if (v.id && this.jhOrderPlanForwardList[index].carNum !== tempcarNum) { |
| | | this.$reqPost('deleteForward', { id: v.id }, 'params').then(res => { |
| | | if (res.code === 0) { |
| | | this.jhOrderPlanForwardList.splice(index, 1) |
| | | this.$u.toast('删除成功') |
| | | this.jhOrderPlanForwardList.splice(index, 1); |
| | | this.$u.toast('删除成功'); |
| | | } else if (res.code === 1) { |
| | | this.$u.toast(res.msg) |
| | | this.$u.toast(res.msg); |
| | | } |
| | | }) |
| | | }); |
| | | } else { |
| | | this.jhOrderPlanForwardList.splice(index, 1) |
| | | this.$u.toast('删除成功') |
| | | this.jhOrderPlanForwardList.splice(index, 1); |
| | | this.$u.toast('删除成功'); |
| | | } |
| | | }, |
| | | // 提交 |
| | | submitForm() { |
| | | let isPass = false |
| | | let isPass = false; |
| | | if (this.jhOrderPlanForwardList.length === 0) { |
| | | this.$u.toast('请至少选择一组转发对象') |
| | | this.$u.toast('请至少选择一组转发对象'); |
| | | } |
| | | this.jhOrderPlanForwardList.forEach(v => { |
| | | if (isNaN(Number(v.carNum)) || Number(v.carNum) <= 0) { |
| | | this.$u.toast('请输入合法数字') |
| | | isPass = false |
| | | return isPass |
| | | this.$u.toast('请输入合法数字'); |
| | | isPass = false; |
| | | return isPass; |
| | | } |
| | | // else if (Number(v.carNum) > Number(this.forwardSurplus)) { |
| | | // this.$u.toast('超过最大订单剩余量'); |
| | |
| | | // return isPass; |
| | | // } |
| | | else { |
| | | isPass = true |
| | | return isPass |
| | | isPass = true; |
| | | return isPass; |
| | | } |
| | | }) |
| | | }); |
| | | if (isPass) { |
| | | this.$reqPost('forward', this.jhOrderPlanForwardList, 'json').then(res => { |
| | | console.log(res, 'zh') |
| | | console.log(res, 'zh'); |
| | | if (res.code == 0) { |
| | | this.$u.toast('提交成功') |
| | | this.$u.toast('提交成功'); |
| | | setTimeout(() => { |
| | | uni.navigateBack({ delta: 1 }) |
| | | }, 1000) |
| | | uni.navigateBack({ delta: 1 }); |
| | | }, 1000); |
| | | } else { |
| | | this.$u.toast(res.msg) |
| | | this.$u.toast(res.msg); |
| | | } |
| | | }) |
| | | }); |
| | | } |
| | | }, |
| | | tabClick(item) { |
| | | if (item.name == '货代') { |
| | | this.tabHuoDai = true |
| | | this.tabHuoDai = true; |
| | | } else { |
| | | this.tabHuoDai = false |
| | | this.tabHuoDai = false; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | }; |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | |
| | | <template> |
| | | <view class="message-body"> |
| | | <u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" v-if="messageList.length == 0" width="400" height="400" textSize="18"></u-empty> |
| | | <u-list @scrolltolower="scrolltolower" :height="1400"> |
| | | <u-list @scroll="scrolltolower" :height="1400"> |
| | | <u-list-item> |
| | | <u-swipe-action> |
| | | <u-swipe-action-item :options="options1" v-for="(item, index) in messageList" :key="item.id" @click="deleteMsg(item, index)"> |
| | | <u-badge :isDot="true" type="error" v-if="item.status === 0"></u-badge> |
| | | <u-badge :isDot="true" type="error" v-if="item.status !== 1"></u-badge> |
| | | <u-cell size="large" :title="item.title" :label="item.content" @click="messageDetails(item, index)"> |
| | | <view class="prepose" slot="icon"><u-icon name="file-text" color="#a299a0" size="80"></u-icon></view> |
| | | </u-cell> |
| | |
| | | onShow() { |
| | | this.messageReq(); |
| | | }, |
| | | onHide() { |
| | | this.messageList = []; |
| | | this.pageNum = 1; |
| | | }, |
| | | methods: { |
| | | // 触底加载 |
| | | scrolltolower() { |
| | |
| | | this.$reqAllJson('readMessage', { id: value.id, status: value.status }, { method: 'PUT', 'Content-Type': 'application/json' }).then(res => { |
| | | if (res.code == 0) { |
| | | uni.navigateTo({ |
| | | url: `/pages/public-page/messageDetails/messageDetails?index=${index}` |
| | | url: `/pages/public-page/messageDetails/messageDetails?messageId=${value.messageId}&id=${value.id}` |
| | | }); |
| | | // uni.showLoading({ |
| | | // title: '加载中' |
| | | // }); |
| | | // this.$reqGet('getMessageByUser', { current: 1, size: this.pageSize }).then(res => { |
| | | // uni.hideLoading(); |
| | | // this.total = res.data.total; |
| | | // this.messageList = res.data.records; |
| | | // }); |
| | | } |
| | | }); |
| | | } else { |
| | | uni.navigateTo({ |
| | | url: `/pages/public-page/messageDetails/messageDetails?index=${index}` |
| | | url: `/pages/public-page/messageDetails/messageDetails?messageId=${value.messageId}&id=${value.id}` |
| | | }); |
| | | } |
| | | }, |
| | |
| | | <template> |
| | | <view> |
| | | <combined-title title="消息详情"></combined-title> |
| | | <view class="compDetails" v-for="(item, index) in detail" :key="index"> |
| | | <view class="compDetails"> |
| | | <uni-table border stripe emptyText="暂无更多数据"> |
| | | <uni-tr> |
| | | <uni-th align="left">消息标题</uni-th> |
| | | <uni-td align="left">{{ item.title || '' }}</uni-td> |
| | | <uni-td align="left">{{ detail.title || '' }}</uni-td> |
| | | </uni-tr> |
| | | <uni-tr> |
| | | <uni-th align="left">消息内容</uni-th> |
| | | <uni-td align="left">{{ item.content || '' }}</uni-td> |
| | | <uni-td align="left">{{ detail.content || '' }}</uni-td> |
| | | </uni-tr> |
| | | <uni-tr> |
| | | <uni-th align="left">创建时间</uni-th> |
| | | <uni-td align="left">{{ item.createTime || '' }}</uni-td> |
| | | <uni-td align="left">{{ detail.createTime || '' }}</uni-td> |
| | | </uni-tr> |
| | | </uni-table> |
| | | </view> |
| | |
| | | data() { |
| | | return { |
| | | index: '', |
| | | detail: [] |
| | | detail: {}, |
| | | messageId: '', |
| | | id: '' |
| | | }; |
| | | }, |
| | | onLoad(v) { |
| | | this.index = v.index; |
| | | this.messageId = v.messageId; |
| | | this.id = v.id; |
| | | }, |
| | | onShow() { |
| | | this.messageReq(); |
| | | this.getDetail(); |
| | | }, |
| | | methods: { |
| | | messageReq() { |
| | | uni.showLoading({ |
| | | title: '加载中' |
| | | }); |
| | | this.$reqGet('getMessageByUser', { current: 1, size: 10 }).then(res => { |
| | | if (res.code == 0) { |
| | | uni.hideLoading(); |
| | | this.detail = res.data.records.filter((v, i) => i == this.index); |
| | | } else { |
| | | this.$u.toast('加载失败'); |
| | | } |
| | | getDetail() { |
| | | this.$reqGet('getMsgDetail', { messageId: this.messageId, id: this.id }).then(res => { |
| | | this.detail = res.data; |
| | | }); |
| | | } |
| | | } |
| | |
| | | ></freight-forwarder-index> |
| | | <driver-index v-if="roleType == 3" ref="driverIndexRef" :indexdriverBillOfLoadingData="indexdriverBillOfLoadingData"></driver-index> |
| | | <tab-bar :current="0"></tab-bar> |
| | | <!-- 推送消息弹窗 --> |
| | | <u-modal :show="messagePushShow" :title="messageList.title" :content="messageList.content" @confirm="messageconfirm"></u-modal> |
| | | </view> |
| | | </template> |
| | | |
| | |
| | | import customerIndex from '@/pages/customer-page/customer-index/customer-index.vue'; |
| | | import driverIndex from '@/pages/driver-page/driver-index/driver-index.vue'; |
| | | import freightForwarderIndex from '@/pages/freight-forwarder-page/freightForwarder-index/freightForwarder-index.vue'; |
| | | import { mapState } from 'vuex'; |
| | | import { mapState, mapMutations } from 'vuex'; |
| | | import { webSocketUrl } from '@/api/request.js'; |
| | | let socket = null; |
| | | export default { |
| | | components: { |
| | | customerIndex, |
| | | driverIndex, |
| | | freightForwarderIndex |
| | | }, |
| | | computed: { |
| | | ...mapState(['globalweighHouseCode', 'globalweigh']) |
| | | }, |
| | | //首页下拉刷新 |
| | | onPullDownRefresh() { |
| | |
| | | this.$reqGet('GetOrderPlan').then(res => { |
| | | if (res.data) { |
| | | this.orderPlanDataStore = res.data; |
| | | this.$u.toast('加载成功'); |
| | | uni.hideLoading(); |
| | | uni.stopPullDownRefresh(); |
| | | } else { |
| | |
| | | this.$reqGet('huoDaiList').then(res => { |
| | | if (res.data) { |
| | | this.indexHuoDaiOrderPlanData = res.data; |
| | | this.$u.toast('加载成功'); |
| | | uni.hideLoading(); |
| | | uni.stopPullDownRefresh(); |
| | | } else { |
| | |
| | | }); |
| | | } else if (this.roleType == 3) { |
| | | this.$reqGet('qiangDanList').then(res => { |
| | | console.log(res, '刷新之后的数据'); |
| | | if (res.code == 0) { |
| | | this.indexdriverBillOfLoadingData = res.data; |
| | | this.$u.toast('加载成功'); |
| | |
| | | orderPlanDataStore: [], |
| | | indexHuoDaiOrderPlanData: [], |
| | | indexHistoryCoalData: [], |
| | | indexdriverBillOfLoadingData: {} |
| | | indexdriverBillOfLoadingData: {}, |
| | | messagePushShow: false, |
| | | messageList: {}, |
| | | isconnect: false |
| | | }; |
| | | }, |
| | | beforeDestroy() { |
| | | this.closeSocket(); |
| | | }, |
| | | onShow() { |
| | | this.init(); |
| | | if (!this.isconnect) { |
| | | this.initWebsocket(); |
| | | } |
| | | this.userAuthorization(); |
| | | }, |
| | | onBackPress() { |
| | | this.closeSocket(); |
| | | }, |
| | | methods: { |
| | | ...mapMutations(['pushMessage', 'changeWeigh', 'changeinfraredStatus']), |
| | | messagePage() { |
| | | uni.navigateTo({ |
| | | url: '/pages/public-page/message/message' |
| | |
| | | console.log('获取失败'); |
| | | } |
| | | }); |
| | | }, |
| | | // 初始化websocket |
| | | initWebsocket() { |
| | | let wsUrl = `${webSocketUrl}?access_token=${uni.getStorageSync('token')}`; |
| | | socket = uni.connectSocket({ |
| | | url: wsUrl, |
| | | header: { |
| | | CLIENT_TOC: 'Y' |
| | | }, |
| | | complete: res => { |
| | | console.log(res, 'socket结果'); |
| | | if (res.errMsg == 'connectSocket:ok') { |
| | | this.isconnect = true; |
| | | } |
| | | } |
| | | }); |
| | | socket.onOpen(() => { |
| | | console.log('onOpen'); |
| | | }); |
| | | // 获取服务器传来的数据,做相应处理 |
| | | socket.onMessage(res => { |
| | | console.log('socketWeigh', res); |
| | | if (res.data.startsWith('weigh')) { |
| | | let nowWeighObj = JSON.parse(res.data.slice(7)); |
| | | if (this.globalweighHouseCode && nowWeighObj.eqCode == this.globalweighHouseCode) { |
| | | if (nowWeighObj.eqInfraredStatus) { |
| | | this.changeinfraredStatus(true); |
| | | this.changeWeigh(nowWeighObj.weigh); |
| | | } else { |
| | | this.changeinfraredStatus(false); |
| | | this.changeWeigh(nowWeighObj.weigh); |
| | | } |
| | | } |
| | | } else { |
| | | this.messageList = JSON.parse(res.data.slice(5)); |
| | | this.messagePushShow = true; |
| | | } |
| | | }); |
| | | socket.onClose(() => { |
| | | console.log('webSocketClose'); |
| | | }); |
| | | socket.onError(err => { |
| | | console.log('socket报错', err); |
| | | this.$u.toast('出现错误,请重新进入该页面,重试!!'); |
| | | }); |
| | | }, |
| | | closeSocket() { |
| | | socket.close({ |
| | | success(res) { |
| | | console.log('关闭成功', res); |
| | | }, |
| | | fail(err) { |
| | | console.log('关闭失败', err); |
| | | } |
| | | }); |
| | | }, |
| | | messageconfirm() { |
| | | this.messagePushShow = false; |
| | | } |
| | | } |
| | | }; |
| | |
| | | // 动态底部tabbar |
| | | const userRoleTabbar = { |
| | | first: [{ |
| | | pagePath: "pages/tabbar-page/index-tabbar/index-tabbar", |
| | | iconPath: "../../static/tabBar-icon/Gfayun.png", |
| | | selectedIconPath: "../../static/tabBar-icon/Bfayun1.png", |
| | | text: "首页" |
| | | pagePath: 'pages/tabbar-page/index-tabbar/index-tabbar', |
| | | iconPath: '../../static/tabBar-icon/Gfayun.png', |
| | | selectedIconPath: '../../static/tabBar-icon/Bfayun1.png', |
| | | text: '首页' |
| | | }, |
| | | { |
| | | pagePath: "pages/tabbar-page/myPage-tabbar/myPage-tabbar", |
| | | iconPath: "../../static/tabBar-icon/Gmine10.png", |
| | | selectedIconPath: "../../static/tabBar-icon/Bmine57.png", |
| | | text: "我的" |
| | | pagePath: 'pages/tabbar-page/myPage-tabbar/myPage-tabbar', |
| | | iconPath: '../../static/tabBar-icon/Gmine10.png', |
| | | selectedIconPath: '../../static/tabBar-icon/Bmine57.png', |
| | | text: '我的' |
| | | } |
| | | ], |
| | | second: [{ |
| | | pagePath: "pages/tabbar-page/index-tabbar/index-tabbar", |
| | | iconPath: "../../static/tabBar-icon/Ghome.png", |
| | | selectedIconPath: "../../static/tabBar-icon/Bhome.png", |
| | | text: "首页" |
| | | pagePath: 'pages/tabbar-page/index-tabbar/index-tabbar', |
| | | iconPath: '../../static/tabBar-icon/Ghome.png', |
| | | selectedIconPath: '../../static/tabBar-icon/Bhome.png', |
| | | text: '首页' |
| | | }, |
| | | { |
| | | pagePath: "pages/tabbar-page/myPage-tabbar/myPage-tabbar", |
| | | iconPath: "../../static/tabBar-icon/Gmine10.png", |
| | | selectedIconPath: "../../static/tabBar-icon/Bmine57.png", |
| | | text: "我的" |
| | | pagePath: 'pages/tabbar-page/myPage-tabbar/myPage-tabbar', |
| | | iconPath: '../../static/tabBar-icon/Gmine10.png', |
| | | selectedIconPath: '../../static/tabBar-icon/Bmine57.png', |
| | | text: '我的' |
| | | } |
| | | ] |
| | | } |
| | |
| | | userInfo: {}, |
| | | roleType: null, // 1客户,2货代,3司机 |
| | | userTabbar: [], // 用户所在角色底部菜单, |
| | | fleetDriverDataLength: 0 |
| | | // 称重时的重量 |
| | | globalweigh: 0, |
| | | // 消息推送 |
| | | globalmessage: '', |
| | | // 全局weihousecode |
| | | globalweighHouseCode: '', |
| | | // 全局红外状态 |
| | | globalinfraredStatus: false |
| | | }, |
| | | mutations: { |
| | | lengthchange(state, payload) { |
| | |
| | | state.userTabbar = userRoleTabbar.second |
| | | uni.setStorageSync('userTabbar', state.userTabbar) |
| | | } |
| | | |
| | | |
| | | }, |
| | | // 改变重量 |
| | | changeWeigh(state, payload) { |
| | | state.globalweigh = payload |
| | | console.log(state.globalweigh, '重量改变了') |
| | | }, |
| | | // 消息推送 |
| | | pushMessage(state, payload) { |
| | | state.globalmessage = payload |
| | | }, |
| | | // 改变weighHouseCode |
| | | changeweighHouseCode(state, payload) { |
| | | state.globalweighHouseCode = payload |
| | | console.log(state.globalweighHouseCode, 'globalweighHouseCode改变了') |
| | | }, |
| | | // 改变红外状态 |
| | | changeinfraredStatus(state, payload) { |
| | | state.globalinfraredStatus = payload |
| | | } |
| | | } |
| | | }) |
New file |
| | |
| | | ## 1.4.10(2023-04-10) |
| | | - 修复 某些情况 monthSwitch 未触发的Bug |
| | | ## 1.4.9(2023-02-02) |
| | | - 修复 某些情况切换月份错误的Bug |
| | | ## 1.4.8(2023-01-30) |
| | | - 修复 某些情况切换月份错误的Bug [详情](https://ask.dcloud.net.cn/question/161964) |
| | | ## 1.4.7(2022-09-16) |
| | | - 优化 支持使用 uni-scss 控制主题色 |
| | | ## 1.4.6(2022-09-08) |
| | | - 修复 表头年月切换,导致改变当前日期为选择月1号,且未触发change事件的Bug |
| | | ## 1.4.5(2022-02-25) |
| | | - 修复 条件编译 nvue 不支持的 css 样式的Bug |
| | | ## 1.4.4(2022-02-25) |
| | | - 修复 条件编译 nvue 不支持的 css 样式的Bug |
| | | ## 1.4.3(2021-09-22) |
| | | - 修复 startDate、 endDate 属性失效的Bug |
| | | ## 1.4.2(2021-08-24) |
| | | - 新增 支持国际化 |
| | | ## 1.4.1(2021-08-05) |
| | | - 修复 弹出层被 tabbar 遮盖的Bug |
| | | ## 1.4.0(2021-07-30) |
| | | - 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) |
| | | ## 1.3.16(2021-05-12) |
| | | - 新增 组件示例地址 |
| | | ## 1.3.15(2021-02-04) |
| | | - 调整为uni_modules目录规范 |
New file |
| | |
| | | /** |
| | | * @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 |
New file |
| | |
| | | { |
| | | "uni-calender.ok": "ok", |
| | | "uni-calender.cancel": "cancel", |
| | | "uni-calender.today": "today", |
| | | "uni-calender.MON": "MON", |
| | | "uni-calender.TUE": "TUE", |
| | | "uni-calender.WED": "WED", |
| | | "uni-calender.THU": "THU", |
| | | "uni-calender.FRI": "FRI", |
| | | "uni-calender.SAT": "SAT", |
| | | "uni-calender.SUN": "SUN" |
| | | } |
New file |
| | |
| | | import en from './en.json' |
| | | import zhHans from './zh-Hans.json' |
| | | import zhHant from './zh-Hant.json' |
| | | export default { |
| | | en, |
| | | 'zh-Hans': zhHans, |
| | | 'zh-Hant': zhHant |
| | | } |
New file |
| | |
| | | { |
| | | "uni-calender.ok": "确定", |
| | | "uni-calender.cancel": "取消", |
| | | "uni-calender.today": "今日", |
| | | "uni-calender.SUN": "日", |
| | | "uni-calender.MON": "一", |
| | | "uni-calender.TUE": "二", |
| | | "uni-calender.WED": "三", |
| | | "uni-calender.THU": "四", |
| | | "uni-calender.FRI": "五", |
| | | "uni-calender.SAT": "六" |
| | | } |
New file |
| | |
| | | { |
| | | "uni-calender.ok": "確定", |
| | | "uni-calender.cancel": "取消", |
| | | "uni-calender.today": "今日", |
| | | "uni-calender.SUN": "日", |
| | | "uni-calender.MON": "一", |
| | | "uni-calender.TUE": "二", |
| | | "uni-calender.WED": "三", |
| | | "uni-calender.THU": "四", |
| | | "uni-calender.FRI": "五", |
| | | "uni-calender.SAT": "六" |
| | | } |
New file |
| | |
| | | <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, |
| | | }">{{todayText}}</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 ? todayText : (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> |
| | | import { initVueI18n } from '@dcloudio/uni-i18n' |
| | | import i18nMessages from './i18n/index.js' |
| | | const { t } = initVueI18n(i18nMessages) |
| | | |
| | | export default { |
| | | emits:['change'], |
| | | props: { |
| | | weeks: { |
| | | type: Object, |
| | | default () { |
| | | return {} |
| | | } |
| | | }, |
| | | calendar: { |
| | | type: Object, |
| | | default: () => { |
| | | return {} |
| | | } |
| | | }, |
| | | selected: { |
| | | type: Array, |
| | | default: () => { |
| | | return [] |
| | | } |
| | | }, |
| | | lunar: { |
| | | type: Boolean, |
| | | default: false |
| | | } |
| | | }, |
| | | computed: { |
| | | todayText() { |
| | | return t("uni-calender.today") |
| | | }, |
| | | }, |
| | | methods: { |
| | | choiceDate(weeks) { |
| | | this.$emit('change', weeks) |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | $uni-font-size-base:14px; |
| | | $uni-text-color:#333; |
| | | $uni-font-size-sm:12px; |
| | | $uni-color-error: #e43d33; |
| | | $uni-opacity-disabled: 0.3; |
| | | $uni-text-color-disable:#c0c0c0; |
| | | $uni-primary: #2979ff !default; |
| | | .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: $uni-font-size-base; |
| | | color: $uni-text-color; |
| | | } |
| | | |
| | | .uni-calendar-item__weeks-lunar-text { |
| | | font-size: $uni-font-size-sm; |
| | | 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; |
| | | } |
| | | |
| | | .uni-calendar-item__weeks-box-circle { |
| | | position: absolute; |
| | | top: 5px; |
| | | right: 5px; |
| | | width: 8px; |
| | | height: 8px; |
| | | border-radius: 8px; |
| | | background-color: $uni-color-error; |
| | | |
| | | } |
| | | |
| | | .uni-calendar-item--disable { |
| | | background-color: rgba(249, 249, 249, $uni-opacity-disabled); |
| | | color: $uni-text-color-disable; |
| | | } |
| | | |
| | | .uni-calendar-item--isDay-text { |
| | | color: $uni-primary; |
| | | } |
| | | |
| | | .uni-calendar-item--isDay { |
| | | background-color: $uni-primary; |
| | | opacity: 0.8; |
| | | color: #fff; |
| | | } |
| | | |
| | | .uni-calendar-item--extra { |
| | | color: $uni-color-error; |
| | | opacity: 0.8; |
| | | } |
| | | |
| | | .uni-calendar-item--checked { |
| | | background-color: $uni-primary; |
| | | color: #fff; |
| | | opacity: 0.8; |
| | | } |
| | | |
| | | .uni-calendar-item--multiple { |
| | | background-color: $uni-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> |
New file |
| | |
| | | <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">{{cancelText}}</text> |
| | | </view> |
| | | <view class="uni-calendar__header-btn-box" @click="confirm"> |
| | | <text class="uni-calendar__header-text uni-calendar--fixed-width">{{okText}}</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> |
| | | </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> |
| | | </view> |
| | | <text class="uni-calendar__backtoday" @click="backToday">{{todayText}}</text> |
| | | |
| | | </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">{{SUNText}}</text> |
| | | </view> |
| | | <view class="uni-calendar__weeks-day"> |
| | | <text class="uni-calendar__weeks-day-text">{{monText}}</text> |
| | | </view> |
| | | <view class="uni-calendar__weeks-day"> |
| | | <text class="uni-calendar__weeks-day-text">{{TUEText}}</text> |
| | | </view> |
| | | <view class="uni-calendar__weeks-day"> |
| | | <text class="uni-calendar__weeks-day-text">{{WEDText}}</text> |
| | | </view> |
| | | <view class="uni-calendar__weeks-day"> |
| | | <text class="uni-calendar__weeks-day-text">{{THUText}}</text> |
| | | </view> |
| | | <view class="uni-calendar__weeks-day"> |
| | | <text class="uni-calendar__weeks-day-text">{{FRIText}}</text> |
| | | </view> |
| | | <view class="uni-calendar__weeks-day"> |
| | | <text class="uni-calendar__weeks-day-text">{{SATText}}</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"> |
| | | <calendar-item class="uni-calendar-item--hook" :weeks="weeks" :calendar="calendar" :selected="selected" :lunar="lunar" @change="choiceDate"></calendar-item> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </template> |
| | | |
| | | <script> |
| | | import Calendar from './util.js'; |
| | | import CalendarItem from './uni-calendar-item.vue' |
| | | |
| | | import { initVueI18n } from '@dcloudio/uni-i18n' |
| | | import i18nMessages from './i18n/index.js' |
| | | const { t } = initVueI18n(i18nMessages) |
| | | |
| | | /** |
| | | * 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: { |
| | | CalendarItem |
| | | }, |
| | | emits:['close','confirm','change','monthSwitch'], |
| | | 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 |
| | | } |
| | | }, |
| | | computed:{ |
| | | /** |
| | | * for i18n |
| | | */ |
| | | |
| | | okText() { |
| | | return t("uni-calender.ok") |
| | | }, |
| | | cancelText() { |
| | | return t("uni-calender.cancel") |
| | | }, |
| | | todayText() { |
| | | return t("uni-calender.today") |
| | | }, |
| | | monText() { |
| | | return t("uni-calender.MON") |
| | | }, |
| | | TUEText() { |
| | | return t("uni-calender.TUE") |
| | | }, |
| | | WEDText() { |
| | | return t("uni-calender.WED") |
| | | }, |
| | | THUText() { |
| | | return t("uni-calender.THU") |
| | | }, |
| | | FRIText() { |
| | | return t("uni-calender.FRI") |
| | | }, |
| | | SATText() { |
| | | return t("uni-calender.SAT") |
| | | }, |
| | | SUNText() { |
| | | return t("uni-calender.SUN") |
| | | }, |
| | | }, |
| | | watch: { |
| | | date(newVal) { |
| | | // this.cale.setDate(newVal) |
| | | this.init(newVal) |
| | | }, |
| | | startDate(val){ |
| | | this.cale.resetSatrtDate(val) |
| | | this.cale.setDate(this.nowDate.fullDate) |
| | | this.weeks = this.cale.weeks |
| | | }, |
| | | endDate(val){ |
| | | this.cale.resetEndDate(val) |
| | | this.cale.setDate(this.nowDate.fullDate) |
| | | this.weeks = this.cale.weeks |
| | | }, |
| | | selected(newVal) { |
| | | this.cale.setSelectInfo(this.nowDate.fullDate, newVal) |
| | | this.weeks = this.cale.weeks |
| | | } |
| | | }, |
| | | created() { |
| | | this.cale = new Calendar({ |
| | | selected: this.selected, |
| | | startDate: this.startDate, |
| | | endDate: this.endDate, |
| | | range: this.range, |
| | | }) |
| | | this.init(this.date) |
| | | }, |
| | | methods: { |
| | | // 取消穿透 |
| | | clean() {}, |
| | | bindDateChange(e) { |
| | | const value = e.detail.value + '-1' |
| | | this.setDate(value) |
| | | |
| | | const { year,month } = this.cale.getDate(value) |
| | | this.$emit('monthSwitch', { |
| | | year, |
| | | month |
| | | }) |
| | | }, |
| | | /** |
| | | * 初始化日期显示 |
| | | * @param {Object} date |
| | | */ |
| | | init(date) { |
| | | this.cale.setDate(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.date) |
| | | } |
| | | 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() { |
| | | const nowYearMonth = `${this.nowDate.year}-${this.nowDate.month}` |
| | | const date = this.cale.getDate(new Date()) |
| | | const todayYearMonth = `${date.year}-${date.month}` |
| | | |
| | | if(nowYearMonth !== todayYearMonth) { |
| | | this.monthSwitch() |
| | | } |
| | | |
| | | this.init(date.fullDate) |
| | | 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-bg-color-mask: rgba($color: #000000, $alpha: 0.4); |
| | | $uni-border-color: #EDEDED; |
| | | $uni-text-color: #333; |
| | | $uni-bg-color-hover:#f1f1f1; |
| | | $uni-font-size-base:14px; |
| | | $uni-text-color-placeholder: #808080; |
| | | $uni-color-subtitle: #555555; |
| | | $uni-text-color-grey:#999; |
| | | .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; |
| | | /* #ifdef APP-NVUE */ |
| | | bottom: 0; |
| | | /* #endif */ |
| | | left: 0; |
| | | right: 0; |
| | | transition-property: transform; |
| | | transition-duration: 0.3s; |
| | | transform: translateY(460px); |
| | | /* #ifndef APP-NVUE */ |
| | | bottom: calc(var(--window-bottom)); |
| | | z-index: 99; |
| | | /* #endif */ |
| | | } |
| | | |
| | | .uni-calendar--ani-show { |
| | | transform: translateY(0); |
| | | } |
| | | |
| | | .uni-calendar__content { |
| | | background-color: #fff; |
| | | } |
| | | |
| | | .uni-calendar__header { |
| | | position: relative; |
| | | /* #ifndef APP-NVUE */ |
| | | display: flex; |
| | | /* #endif */ |
| | | flex-direction: row; |
| | | justify-content: center; |
| | | align-items: center; |
| | | height: 50px; |
| | | border-bottom-color: $uni-border-color; |
| | | border-bottom-style: solid; |
| | | border-bottom-width: 1px; |
| | | } |
| | | |
| | | .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; |
| | | } |
| | | |
| | | .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: $uni-font-size-base; |
| | | color: $uni-text-color; |
| | | } |
| | | |
| | | .uni-calendar__header-btn-box { |
| | | /* #ifndef APP-NVUE */ |
| | | display: flex; |
| | | /* #endif */ |
| | | flex-direction: row; |
| | | align-items: center; |
| | | justify-content: center; |
| | | width: 50px; |
| | | height: 50px; |
| | | } |
| | | |
| | | .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; |
| | | border-bottom-color: #F5F5F5; |
| | | border-bottom-style: solid; |
| | | border-bottom-width: 1px; |
| | | } |
| | | |
| | | .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> |
New file |
| | |
| | | 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 && AddDayCount>0) { |
| | | dd.setDate(dd.getDate() + AddDayCount) |
| | | } else { |
| | | const preMonth = dd.getMonth() |
| | | dd.setMonth(preMonth + AddDayCount) // 获取AddDayCount天后的日期 |
| | | const nextMonth = dd.getMonth() |
| | | // 处理 pre 切换月份目标月份为2月没有当前日(30 31) 切换错误问题 |
| | | if(AddDayCount<0 && preMonth!==0 && nextMonth-preMonth>AddDayCount){ |
| | | dd.setMonth(nextMonth+(nextMonth-preMonth+AddDayCount)) |
| | | } |
| | | // 处理 next 切换月份目标月份为2月没有当前日(30 31) 切换错误问题 |
| | | if(AddDayCount>0 && nextMonth-preMonth>AddDayCount){ |
| | | dd.setMonth(nextMonth-(nextMonth-preMonth-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 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) |
| | | disableBefore = this.dateCompare(this.startDate, nowDate) |
| | | } |
| | | |
| | | if (this.endDate) { |
| | | // let dateCompAfter = this.dateCompare(fullDate, this.endDate) |
| | | // disableAfter = this.dateCompare(nowDate, dateCompAfter ? this.endDate : fullDate) |
| | | disableAfter = this.dateCompare(nowDate, this.endDate) |
| | | } |
| | | 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 { |
| | | year, |
| | | month |
| | | } = 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 |
New file |
| | |
| | | { |
| | | "id": "uni-calendar", |
| | | "displayName": "uni-calendar 日历", |
| | | "version": "1.4.10", |
| | | "description": "日历组件", |
| | | "keywords": [ |
| | | "uni-ui", |
| | | "uniui", |
| | | "日历", |
| | | "", |
| | | "打卡", |
| | | "日历选择" |
| | | ], |
| | | "repository": "https://github.com/dcloudio/uni-ui", |
| | | "engines": { |
| | | "HBuilderX": "" |
| | | }, |
| | | "directories": { |
| | | "example": "../../temps/example_temps" |
| | | }, |
| | | "dcloudext": { |
| | | "sale": { |
| | | "regular": { |
| | | "price": "0.00" |
| | | }, |
| | | "sourcecode": { |
| | | "price": "0.00" |
| | | } |
| | | }, |
| | | "contact": { |
| | | "qq": "" |
| | | }, |
| | | "declaration": { |
| | | "ads": "无", |
| | | "data": "无", |
| | | "permissions": "无" |
| | | }, |
| | | "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui", |
| | | "type": "component-vue" |
| | | }, |
| | | "uni_modules": { |
| | | "dependencies": [], |
| | | "encrypt": [], |
| | | "platforms": { |
| | | "cloud": { |
| | | "tcb": "y", |
| | | "aliyun": "y" |
| | | }, |
| | | "client": { |
| | | "App": { |
| | | "app-vue": "y", |
| | | "app-nvue": "y" |
| | | }, |
| | | "H5-mobile": { |
| | | "Safari": "y", |
| | | "Android Browser": "y", |
| | | "微信浏览器(Android)": "y", |
| | | "QQ浏览器(Android)": "y" |
| | | }, |
| | | "H5-pc": { |
| | | "Chrome": "y", |
| | | "IE": "y", |
| | | "Edge": "y", |
| | | "Firefox": "y", |
| | | "Safari": "y" |
| | | }, |
| | | "小程序": { |
| | | "微信": "y", |
| | | "阿里": "y", |
| | | "百度": "y", |
| | | "字节跳动": "y", |
| | | "QQ": "y" |
| | | }, |
| | | "快应用": { |
| | | "华为": "u", |
| | | "联盟": "u" |
| | | }, |
| | | "Vue": { |
| | | "vue2": "y", |
| | | "vue3": "y" |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
New file |
| | |
| | | |
| | | |
| | | ## Calendar 日历 |
| | | > **组件名:uni-calendar** |
| | | > 代码块: `uCalendar` |
| | | |
| | | |
| | | 日历组件 |
| | | |
| | | > **注意事项** |
| | | > 为了避免错误使用,给大家带来不好的开发体验,请在使用组件前仔细阅读下面的注意事项,可以帮你避免一些错误。 |
| | | > - 本组件农历转换使用的js是 [@1900-2100区间内的公历、农历互转](https://github.com/jjonline/calendar.js) |
| | | > - 仅支持自定义组件模式 |
| | | > - `date`属性传入的应该是一个 String ,如: 2019-06-27 ,而不是 new Date() |
| | | > - 通过 `insert` 属性来确定当前的事件是 @change 还是 @confirm 。理应合并为一个事件,但是为了区分模式,现使用两个事件,这里需要注意 |
| | | > - 弹窗模式下无法阻止后面的元素滚动,如有需要阻止,请在弹窗弹出后,手动设置滚动元素为不可滚动 |
| | | |
| | | |
| | | ### 安装方式 |
| | | |
| | | 本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范,`HBuilderX 2.5.5`起,只需将本组件导入项目,在页面`template`中即可直接使用,无需在页面中`import`和注册`components`。 |
| | | |
| | | 如需通过`npm`方式使用`uni-ui`组件,另见文档:[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55) |
| | | |
| | | ### 基本用法 |
| | | |
| | | 在 ``template`` 中使用组件 |
| | | |
| | | ```html |
| | | <view> |
| | | <uni-calendar |
| | | :insert="true" |
| | | :lunar="true" |
| | | :start-date="'2019-3-2'" |
| | | :end-date="'2019-5-20'" |
| | | @change="change" |
| | | /> |
| | | </view> |
| | | ``` |
| | | |
| | | ### 通过方法打开日历 |
| | | |
| | | 需要设置 `insert` 为 `false` |
| | | |
| | | ```html |
| | | <view> |
| | | <uni-calendar |
| | | ref="calendar" |
| | | :insert="false" |
| | | @confirm="confirm" |
| | | /> |
| | | <button @click="open">打开日历</button> |
| | | </view> |
| | | ``` |
| | | |
| | | ```javascript |
| | | |
| | | export default { |
| | | data() { |
| | | return {}; |
| | | }, |
| | | methods: { |
| | | open(){ |
| | | this.$refs.calendar.open(); |
| | | }, |
| | | confirm(e) { |
| | | console.log(e); |
| | | } |
| | | } |
| | | }; |
| | | |
| | | ``` |
| | | |
| | | |
| | | ## API |
| | | |
| | | ### Calendar Props |
| | | |
| | | | 属性名 | 类型 | 默认值| 说明 | |
| | | | - | - | - | - | |
| | | | date | String |- | 自定义当前时间,默认为今天 | |
| | | | lunar | Boolean | false | 显示农历 | |
| | | | startDate | String |- | 日期选择范围-开始日期 | |
| | | | endDate | String |- | 日期选择范围-结束日期 | |
| | | | range | Boolean | false | 范围选择 | |
| | | | insert | Boolean | false | 插入模式,可选值,ture:插入模式;false:弹窗模式;默认为插入模式 | |
| | | |clearDate |Boolean |true |弹窗模式是否清空上次选择内容 | |
| | | | selected | Array |- | 打点,期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}] | |
| | | |showMonth | Boolean | true | 是否显示月份为背景 | |
| | | |
| | | ### Calendar Events |
| | | |
| | | | 事件名 | 说明 |返回值| |
| | | | - | - | - | |
| | | | open | 弹出日历组件,`insert :false` 时生效|- | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | ## 组件示例 |
| | | |
| | | 点击查看:[https://hellouniapp.dcloud.net.cn/pages/extUI/calendar/calendar](https://hellouniapp.dcloud.net.cn/pages/extUI/calendar/calendar) |