分享自己在项目中封装的日历组件，目前在微信小程序项目中使用，后期支持自己定义拓展，直接拿去，不谢！！！
直接进入正题
上效果图
1、组件注册与创建
在自己项目直接创建就ok
2、组件代码
2.1 calendar.wxml
<view class="center_content" bind:tap="closeCenterComponent" wx:if="{{isLaunchComponent}}">
<view class="show_content {{boxAnimation == 'show' ? 'show_content_show':''}}" catch:tap="showCenter">
<view style="height: {{statusBarHeight}}px;"></view>
<view class="box_info" bind:tap="jumpUserInfo">
<image src="{{userInfo.avatarUrl ? userInfo.avatarUrl : '../../images/dian.png'}}" class="box_info_pic" data-page="merchantBaseInfo" data-busiName="jumpBaseInfoBtn" data-busiDesc="跳转基本信息按钮" />
<view class="box_info_center" data-page="merchantBaseInfo" data-busiName="jumpBaseInfoBtn" data-busiDesc="跳转基本信息按钮">
<view class="box_info_name">
<view class="box_info_name_md">
{{userInfo.nickName}}
<image src="../../images/timeselect.png" class="shop_box_icon"></image>
</view>
<view class="identity_custom" wx:if="{{userInfo.roleNameList.length > 0}}">
{{userInfo.roleNameList}}
</view>
<!-- <image src="../../images/more_black.png" class="more_icon" /> -->
</view>
<view class="box_info_phone">{{userInfo.mobile}}</view>
</view>
<image src="../../images/service_phone.png" class="service_icon" catch:tap="callPhone" />
</view>
<block wx:if="{{userInfo.merchantVersionId > 0 }}">
<block wx:if="{{userInfo.seatType === 'TRIAL'}}">
<view class="seats">
<view>体验到期时间</view>
<view>{{userInfo.seatEndDate}}</view>
</view>
<view class="ai_box">
<view class="desc_tip" bind:tap="showTextToast">
剩余AI分析时长
<i class="iconfont icon-yiwen alert_style"></i>
</view>
<view class="ai_remain_box">
<view class="ai_remain_times">体验期不计时长</view>
<!-- <view class="ai_remain_btn" bind:tap="goBossSeat">开通</view> -->
</view>
</view>
</block>
<block wx:else>
<view class="seats">
<view>到期时间</view>
<view>{{userInfo.seatEndDate}}</view>
</view>
<view class="ai_box">
<view class="desc_tip" bind:tap="showTextToast">
剩余AI分析时长
<i class="iconfont icon-yiwen alert_style"></i>
</view>
<view class="ai_remain_box">
<view class="ai_remain_times">{{seatTimes}}分钟</view>
<!-- <view class="ai_remain_btn">充值</view> -->
</view>
</view>
</block>
</block>
<view class="fun_content">
<view class="fun_desc">常用功能</view>
<view class="fun_box" wx:if="{{wechatmini_perms.manager_edit}}" catch:tap="routeCommon" data-page="merchantBaseInfo" data-busiName="jumpMerchantBaseInfoBtn" data-busiDesc="跳转个人信息按钮">
<i class="iconfont icon-dianpuxinxi1 fun_box_icon"></i>
<view class="fun_box_tit">个人信息</view>
<image src="../../images/more_black.png" class="fun_box_more_icon" />
</view>
<view class="fun_box" wx:if="{{wechatmini_perms.product_query}}" catch:tap="routeCommon" data-page="productList" data-busiName="jumpProductListBtn" data-busiDesc="跳转商品管理按钮">
<i class="iconfont icon-shangpinguanli1 fun_box_icon"></i>
<view class="fun_box_tit">商品管理</view>
<image src="../../images/more_black.png" class="fun_box_more_icon" />
</view>
<view class="fun_box" catch:tap="routeCommon" data-page="downloadApk" data-busiName="jumpDownloadApkBtn" data-busiDesc="跳转下载apk按钮">
<i class="iconfont icon-xiazai" style="font-size: 34rpx;"></i>
<view class="fun_box_tit">录音软件下载</view>
<image src="../../images/more_black.png" class="fun_box_more_icon" />
</view>
<!-- downloadApk -->
<view class="fun_box" catch:tap="routeCommon" data-page="assistantList" data-busiName="jumpEmployeeManageBtn" data-busiDesc="跳转店员管理按钮" wx:if="{{wechatmini_perms.manager_assistant && merchantInfo.status == '12'}}">
<image src="../../images/center/center-icon-dianyuanguanli.png" class="fun_box_icon" />
<view class="fun_box_tit">团队管理</view>
<image src="../../images/more_black.png" class="fun_box_more_icon" />
</view>
<view class="fun_box" wx:if="{{wechatmini_perms.trade && merchantInfo.status != '12' }}" catch:tap="routeCommon" data-page="marketingRecord" data-busiName="jumpMarketingRecordBtn" data-busiDesc="跳转营销记录按钮">
<image src="../../images/center/center-icon-yingxiaojilu.png" class="fun_box_icon" />
<view class="fun_box_tit">营销记录</view>
<image src="../../images/more_black.png" class="fun_box_more_icon" />
</view>
<view class="fun_box" wx:if="{{wechatmini_perms.manager_message }}" catch:tap="routeCommon" data-page="messageList" data-busiName="jumpMsgManageBtn" data-busiDesc="跳转消息管理按钮">
<text class="iconfont icon-xiaoxiguanli fun_box_icon" />
<view class="fun_box_tit">消息管理</view>
<image src="../../images/more_black.png" class="fun_box_more_icon" />
</view>
<!-- <view class="fun_box" wx:if="{{wechatmini_perms.service}}" catch:tap="routeCommon" data-page="deviceDeposit" data-busiName="jumpPlatformServiceBtn" data-busiDesc="跳转平台服务按钮">
<text class="iconfont icon-pingtaifuwu fun_box_icon" />
<view class="fun_box_tit">平台服务</view>
<image src="../../images/more_black.png" class="fun_box_more_icon" />
</view> -->
<view class="fun_box" catch:tap="routeCommon" data-page="enrollThirdPartyAuth" data-busiName="jumpAuthBtn" data-busiDesc="跳转实名认证按钮" wx:if="{{wechatmini_perms.finance_identityVerification && merchantInfo.status != 12 && (!merchantInfo.wxAuth || !merchantInfo.aliAuth)}}">
<text class=" iconfont icon-shimingrenzheng fun_box_icon" />
<view class="fun_box_tit">实名认证</view>
<image src="../../images/more_black.png" class="fun_box_more_icon" />
</view>
<view class="fun_box" catch:tap="agreementSign" wx:if="{{wechatmini_perms.finance_collectionAccount && merchantInfo.status != 12 && merchantInfo.incomeSplitStatus && (merchantInfo.incomeSplitStatus == 'WAITING_OPEN' || merchantInfo.incomeSplitStatus == 'REVIEW_FAILED')}}">
<image src="../../images/center/center-icon-buchongxieyi.png" class="fun_box_icon" />
<view class="fun_box_tit">补签分账协议</view>
<image src="../../images/more_black.png" class="fun_box_more_icon" />
</view>
<view class="fun_box" wx:if="{{wechatmini_perms.manager_setting_dobRemind}}" catch:tap="routeCommon" data-page="businessSettings" data-busiName="jumpBusinessSettingsBtn" data-busiDesc="跳转业务设置按钮">
<text class="iconfont icon-yewushezhi fun_box_icon" />
<view class="fun_box_tit">业务设置</view>
<image src="../../images/more_black.png" class="fun_box_more_icon" />
</view>
<view class="fun_box" catch:tap="routeCommon" data-page="buyService" wx:if="{{wechatmini_perms.service_query}}" data-busiName="jumpServiceOrder" data-busiDesc="跳转购买服务">
<!-- <text class="iconfont icon-qiehuandianpu1 fun_box_icon" /> -->
<i class="iconfont icon-goumaifuwu fun_box_icon"></i>
<view class="fun_box_tit">购买服务</view>
<image src="../../images/more_black.png" class="fun_box_more_icon" />
</view>
<view class="fun_box" catch:tap="routeCommon" wx:if="{{wechatmini_perms.service_purchase}}" data-page="merchantOrder" data-busiName="jumpServiceOrder" data-busiDesc="跳转服务订单">
<text class="iconfont icon-fuwudingdan fun_box_icon" />
<view class="fun_box_tit">服务订单</view>
<image src="../../images/more_black.png" class="fun_box_more_icon" />
</view>
<view class="fun_box" catch:tap="routeCommon" wx:if="{{wechatmini_perms.manager_aiPoint}}" data-page="aiPointJournal" data-busiName="jumpAiPointJournal" data-busiDesc="跳转AI算力明细按钮">
<text class="iconfont icon-sunlimingxi fun_box_icon" />
<view class="fun_box_tit">AI算力明细</view>
<image src="../../images/more_black.png" class="fun_box_more_icon" />
</view>
<view class="fun_box" wx:if="{{wechatmini_perms.manager_switch}}" catch:tap="routeCommon" data-page="switchAssistant" data-busiName="jumpSwitchShopBtn" data-busiDesc="跳转切换店铺按钮">
<text class="iconfont icon-qiehuandianpu1 fun_box_icon" />
<view class="fun_box_tit">切换店铺</view>
<image src="../../images/more_black.png" class="fun_box_more_icon" />
</view>
<view class="fun_box" catch:tap="routeCommon" data-page="settings" data-busiName="jumpSettingsBtn" data-busiDesc="跳转系统设置按钮">
<text class="iconfont icon-xitongshezhi1 fun_box_icon" />
<view class="fun_box_tit">系统设置</view>
<image src="../../images/more_black.png" class="fun_box_more_icon" />
</view>
</view>
</view>
</view>
2.2 calendar.js
const app = getApp()
import api from '../../utils/request'
import { getYesterDayCustomerData } from '../../api/customer'
import { getMemberCardList, getLimitCardList } from '../../api/marketing'
import currency from '../../lib/currency.min'
Component({
/**
* 组件的属性列表
*/
properties: {
merchantInfo: {
type: Object,
value: {}
}
},
/**
* 组件的初始数据
*/
data: {
statusBarHeight: app.globalData.sysInfo.statusBarHeight,
isLaunchComponent: false,
signFlag: true,
boxAnimation: 'hide',
bankWxWorkCode: '',
memberCardCount: 0,
paymentCompanyIdList: ['lakala', 'adapay', 'fuiou'],
serviceMobile: app.globalData.appConfigMap.serviceMobile,
userInfo: null,
seatTimes: 0
},
created() {},
lifetimes: {
attached() {
app.setPagePerm(this)
// this.setData({
// userInfo: wx.getStorageSync('loginUserInfo')
// })
}
},
pageLifetimes: {
// 组件所在页面的生命周期函数
show: function () {
this.setData({
userInfo: wx.getStorageSync('loginUserInfo')
})
this.getSeatTimes()
}
},
/**
* 组件的方法列表
*/
methods: {
getSeatTimes() {
api
.post('S083602', {
data: {}
})
.then((res) => {
this.setData({
seatTimes: res.balance
})
})
},
getBankMsg() {
app.getBankMsg((res) => {
this.setData({
bankWxWorkCode: res.wxWorkUserCode ? res.wxWorkUserCode : ''
})
})
},
closeCenterComponent() {
this.setData({
boxAnimation: 'hide'
})
setTimeout(() => {
this.setData({
isLaunchComponent: false
})
this.triggerEvent('closeCenterFlag', {})
}, 400)
},
openCenterComponent() {
this.setData({
isLaunchComponent: true
})
// this.getMemberCardCount();
// this.getCustomerStatData();
// this.getBankMsg()
setTimeout(() => {
this.setData({
boxAnimation: 'show'
})
})
},
getMemberCardCount() {
getMemberCardList((res) => {
getLimitCardList((limitRes) => {
this.setData({
memberCardCount: res.length + limitRes.length
})
})
})
},
// 跳转购买页
goBossSeat() {
wx.navigateTo({
url:
'../../pages/merchantService/pages/bossSeat/bossSeat?productType=' +
'BOSS_SEAT'
})
},
/**
* 获取客户统计数据
*/
getCustomerStatData() {
getYesterDayCustomerData((res) => {
res['shopCustomerNum'] = currency(res.newCustomerNum)
.add(res.oldCustomerNum)
.add(res.lostCustomerNum).value
this.setData({
customerData: res
})
})
},
showCenter() {},
jumpUserInfo() {
app.router('/pages/assistantInfo/assistantInfo')
},
showTextToast() {
wx.showModal({
title: '',
content:
'剩余分析时长为店铺剩下的AI算力时长。时长可以通过直接购买或购买席位赠送获得。时长扣除按照分计算，不足一分钟按照一分钟计算。',
showCancel: false
})
},
routeCommon(e) {
let page = e.currentTarget.dataset.page
if (page == 'enrollBaseInfo') {
wx.showModal({
title: '温馨提示',
content: '请联系客服办理 ' + this.data.serviceMobile,
confirmText: '联系客服',
complete: (res) => {
if (res.confirm) {
wx.makePhoneCall({
phoneNumber: this.data.serviceMobile,
success() {},
fail() {}
})
}
}
})
return
}
if (
this.data.merchantInfo.status == '11' &&
['chatHistory', 'settings', 'merchantBaseInfo'].includes(page) &&
this.data.paymentCompanyIdList.includes(
this.data.merchantInfo.paymentCompanyId
)
) {
wx.showModal({
title: '温馨提示',
content: '需要入驻才能使用此功能哦~',
confirmText: '立即入驻',
confirmColor: '#336fff',
cancelText: '我在想想',
cancelColor: '#666666',
success: (res) => {
if (res.confirm) {
app.router(
'/pages/enrollPackage/pages/enrollQuickInfo/enrollQuickInfo'
)
}
}
})
return
}
let link = ''
if (page == 'enrollThirdPartyAuth') {
app.router(
'/pages/enrollPackage/pages/enrollThirdPartyAuth/enrollThirdPartyAuth'
)
return
}
if (page == 'businessSettings') {
app.router('/pages/distributecustomer/pages/' + page + '/' + page)
return false
}
if (page == 'aiPointJournal') {
app.router('/pages/merchantService/pages/aiPointJournal/aiPointJournal')
return
}
if (page == 'merchantOrder') {
app.router('/pages/merchantService/pages/merchantOrder/merchantOrder')
return
}
if (page == 'buyService') {
app.router('/pages/merchantService/pages/sysProduct/sysProduct')
return
}
app.router('/pages/' + page + '/' + page + (link != '' ? link : ''))
},
/**
* 拨打电话
*/
callPhone(busiName = 'callServicePhone', busiDesc = '拨打客服电话') {
wx.makePhoneCall({
phoneNumber: '400 6060 326'
})
},
/**
* 协议签署
*/
agreementSign(
busiName = 'separateAgreementSignBtn',
busiDesc = '分账协议签署按钮'
) {
if (this.data.merchantInfo.status == '11') {
wx.showModal({
title: '温馨提示',
content: '需要入驻才能使用此功能哦~',
confirmText: '立即入驻',
confirmColor: '#336fff',
cancelText: '我在想想',
cancelColor: '#666666',
success: (res) => {
if (res.confirm) {
app.router(
'/pages/enrollPackage/pages/enrollQuickInfo/enrollQuickInfo'
)
}
}
})
return
}
if (this.data.signFlag) {
this.data.signFlag = false
api
.post('S082117', {
data: {},
showLoading: true,
fail: true
})
.then((res) => {
app.router(
'../enrollPackage/pages/enrollContractSign/enrollContractSign?enrollContractSignUrl=' +
encodeURIComponent(res.contractSignUrl)
)
this.data.signFlag = true
})
.catch((err) => {
app.msg(err.message)
this.data.signFlag = true
})
}
}
}
})
2.3 calendar.wxss
@import '../../static/iconfont/iconfont.wxss';
.center_content {
position: fixed;
width: 100%;
height: 100%;
z-index: 99;
background: rgba(0, 0, 0, .6);
top: 0;
left: 0;
}
.shop_box_icon {
width: 15rpx;
height: 23rpx;
/* margin-left: 10rpx; */
}
.show_content {
width: 540rpx;
height: 100%;
background: #f8f8f8;
box-sizing: border-box;
padding: 0 30rpx 30rpx;
transition: all .5s;
position: relative;
left: -540rpx;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.show_content_show {
left: 0;
}
.box_info {
display: flex;
align-items: center;
padding: 30rpx 0 20rpx 0;
}
.box_info_pic {
width: 96rpx;
height: 96rpx;
border-radius: 50%;
}
.box_info_center {
flex: 1;
margin: 0 20rpx;
overflow: hidden;
}
.box_info_name {
display: flex;
align-items: center;
overflow: hidden;
}
.box_info_name_md {
max-width: 160rpx;
color: #000000;
font-size: 36rpx;
overflow: hidden;
/* text-overflow: ellipsis; */
white-space: nowrap;
}
.more_icon {
width: 20rpx;
height: 26rpx;
margin-left: 10rpx;
}
.identity_icon {
width: auto;
height: 40rpx;
padding: 0 22rpx;
margin-left: 12rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 20rpx;
color: #FF6520;
line-height: 40rpx;
text-align: center;
font-style: normal;
text-transform: none;
background: #FFF0E9;
border-radius: 40rpx 40rpx 40rpx 40rpx;
}
.identity_custom {
width: auto;
height: 40rpx;
padding: 0 22rpx;
margin-left: 12rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 20rpx;
color: #466DF5;
line-height: 40rpx;
text-align: center;
font-style: normal;
text-transform: none;
background: #E8F1FA;
border-radius: 40rpx 40rpx 40rpx 40rpx;
}
.box_info_phone {
margin-top: 15rpx;
color: #666666;
font-size: 24rpx;
}
.service_icon {
width: 40rpx;
height: 40rpx;
}
.fun_content {
margin-top: 28rpx;
background: #ffffff;
border-radius: 40rpx;
}
.fun_desc {
padding: 24rpx 28rpx;
border-bottom: 1px solid #eeeeee;
color: #aaaaaa;
font-size: 26rpx;
}
.fun_box {
padding: 30rpx;
display: flex;
align-items: center;
}
.fun_box_icon_01 {
width: 38rpx;
height: 38rpx;
}
.fun_box_icon {
width: 38rpx;
height: 38rpx;
font-size: 38rpx;
text-align: center;
line-height: 38rpx;
}
.fun_box_tit {
flex: 1;
text-align: left;
color: #000000;
font-size: 32rpx;
margin-left: 15rpx;
line-height: 1.1;
}
.fun_box_value {
color: #AAAAAA;
font-size: 24rpx;
margin-right: 20rpx;
}
.fun_box_more_icon {
width: 15rpx;
height: 21rpx;
}
/* VIP模块 */
.vip_md {
width: 100%;
background: linear-gradient(270deg, #C5E4F9 0%, #E9EFF5 47%, #DDCCFF 100%);
box-shadow: inset 0rpx 12rpx 8rpx 6rpx rgba(255, 255, 255, 0.55);
border-radius: 40rpx;
padding: 0 40rpx;
box-sizing: border-box;
}
.md_top {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 35rpx;
padding-bottom: 20rpx;
border-bottom: 2rpx solid rgba(61, 61, 61, 0.05);
}
.md_title {
font-weight: 500;
font-size: 32rpx;
color: #466DF5;
line-height: 40rpx;
text-align: left;
display: flex;
align-items: center;
}
.md_title_img {
width: 32rpx;
height: 31rpx;
margin-right: 12rpx;
}
.md_btn {
width: 120rpx;
height: 48rpx;
background: #FFFFFF;
box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.1);
border-radius: 40rpx;
font-weight: 500;
font-size: 20rpx;
color: #466DF5;
line-height: 48rpx;
text-align: center;
}
.md_bottom {
font-size: 24rpx;
color: #466DF5;
line-height: 40rpx;
text-align: left;
padding: 20rpx 0;
}
.md_open_btn {
width: 100%;
height: 60rpx;
background: #FFFFFF;
box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.1);
border-radius: 40rpx;
font-weight: 500;
font-size: 24rpx;
color: #466DF5;
line-height: 60rpx;
text-align: center;
margin: 0 auto;
}
.seats {
display: flex;
justify-content: space-between;
align-items: center;
height: 72rpx;
background-color: cyan;
font-weight: 400;
font-size: 24rpx;
color: #000000;
padding: 0 24rpx;
border-radius: 40rpx 40rpx 0 0;
background: url('https://p0.buyforyou.cn/wxapp/aipc-mer/myCenter/rectangle.png') no-repeat center;
background-size: 100%;
}
.ai_box {
padding: 36rpx 24rpx;
box-sizing: border-box;
background-color: pink;
border-radius: 0rpx 0rpx 40rpx 40rpx;
background: url('https://p0.buyforyou.cn/wxapp/aipc-mer/myCenter/center_rama_bg.png') no-repeat center;
background-size: 100%;
}
.desc_tip {
width: 280rpx;
font-weight: 400;
font-size: 24rpx;
color: #000000;
/* display: flex;
align-items: center; */
vertical-align: middle;
}
.alert_style{
vertical-align: middle;
font-size: 28rpx;
}
.ai_remain_box {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 14rpx;
}
.ai_remain_times {
font-weight: 600;
font-size: 40rpx;
color: #000000;
}
.ai_remain_btn {
width: 102rpx;
height: 60rpx;
text-align: center;
line-height: 60rpx;
background: url('https://p0.buyforyou.cn/wxapp/aipc-mer/myCenter/buy_btn_bg.png?v=1') no-repeat center;
background-size: 100%;
font-weight: 400;
font-size: 24rpx;
color: #000000;
border-radius: 40rpx;
}
3、组件使用
3.1 日历组件引入
"component": true,
"usingComponents": {
"calendar": "../../../component/calendar/calendar"
}
}
3.2 组件中直接调用就可以
<view class="catch_tag_modal_content">
<view class="modal_title">选择日期</view>
<calendar selectedDate="{{selectedDate}}" multiSelect="{{false}}" rangeSelect="{{false}}" minDate="2025-01-01" maxDate="2025-12-31" bind:datechange="handleDateChange" />
</view>
以上就是全部步骤了，使用丝滑，各位老铁支持一下子！！！
