小程序基础开发（四）：template模板应用(3)——日历组件，可赋值参数(价格、销量等)

小程序-日历组件

左右翻页，上一月下一月模式的
wxml

<view class='bg-white'>
  <view class="flex text-center align-center text-xl padding-tb-sm">
    <view class="flex-sub cuIcon-back" bindtap='lastMonth'></view>
    <view class="flex-sub text-black text-xl">{
   {
   year}}年{
   {
   month<10?'0'+month:month}}月</view>
    <view class="flex-sub cuIcon-right" bindtap='nextMonth'></view>
  </view>
  <view class='bg-gray flex padding-tb-xs text-lg'>
    <view class="flex-sub text-center" wx:for='{
   {week}}' wx:key="item">{
   {
   item}}<view></view></view>
  </view>
  <view class='cf'></view>
  <view class='date-box'>
    <view wx:for='{
   {dateArr}}' class="{
   {item.dateNum==selectedDate?'bg-green':''}}" bindtap="selectDate" data-date="{
   {item}}" wx:key="dateNum">	
      <view class="text-xl text-content {
   {item.dateNum==selectedDate?'text-white':'text-black'}}">{
   {
   item.dateNum}}</view>
      <view class="{
   {item.dateNum==selectedDate?'text-white':'text-grey'}} text-sm text-content" wx:if="{
   {item.canbook}}">剩余{
   {
   item.canbook}}</view>
      <view class='text-lg text-content text-yellow {
   {item.uhrd_adult_price?"text-price":""}}' wx:if="{
   {item.uhrd_adult_price}}">{
   {
   item.uhrd_adult_price}}</view>
    </view>
  </view>
</view>

css

.date-box{
   
  height: auto;
  width: auto;
  border-left: 1rpx solid #D9D9D9;
  border-top: 1rpx solid #D9D9D9;
}
.date-box>view{
   
	position: relative;
	display: inline-block;
	width: 14.28571428571429%;
  height: 145rpx;
	text-align: center;
	vertical-align: middle;
  box-sizing: border-box;
  border-right: 1rpx solid #D9D9D9;
  border-bottom: 1rpx solid #D9D9D9;
}

js

let now = new Date();
 util.requestUrl({
   
    url: " ",//从服务器获取参数
    data: {
    ushr_id: ushrId },
    method: "get",
    success: function (res) {
   
      that.dateInit(now.getFullYear(), now.getMonth(), res.data.msg);//放在success里+that.xx()才能先赋值再执行xx函数，避免空值！
      that.setData({
   
        year: now.getFullYear(),
        month: now.getMonth() + 1,
      });
    }
  });

dateInit: function (setYear, setMonth,msg) {
   
    holiday_days = msg;
    console.log(</