Commit cc87c251858d1b9a8310c10f8b0517a31768ec5f
1 parent
6b377744
每日签到
Showing
5 changed files
with
786 additions
and
0 deletions
packageA/pages/checkin/checkin.js
0 → 100644
| 1 | +// packageA//pages/checkin/checkin.js | |
| 2 | +const app = getApp(); | |
| 3 | + | |
| 4 | +Page({ | |
| 5 | + | |
| 6 | + /** | |
| 7 | + * 页面的初始数据 | |
| 8 | + */ | |
| 9 | + data: { | |
| 10 | + year: '', | |
| 11 | + month: '', | |
| 12 | + day: '', | |
| 13 | + weekArr: ['日', '一', '二', '三', '四', '五', '六'], | |
| 14 | + dateArr: [], | |
| 15 | + firstDay: '', | |
| 16 | + lastDay: '', | |
| 17 | + param: null, | |
| 18 | + clockNum: 3, | |
| 19 | + | |
| 20 | + res: null, | |
| 21 | + isShowRules: false, | |
| 22 | + isCheckIn: false, | |
| 23 | + checkInDays: 0, //连续签到天数 | |
| 24 | + integral: 0, //积分 | |
| 25 | + checkInNums: 0, //补签次数 | |
| 26 | + isCheckInDay: '', | |
| 27 | + | |
| 28 | + | |
| 29 | + flag: true, | |
| 30 | + }, | |
| 31 | + | |
| 32 | + loadQd(callback) { | |
| 33 | + let self = this; | |
| 34 | + app.request.get('/api/weshop/qdrecord/getUser/'+ app.globalData.setting.stoid + '/' + app.globalData.user_id, { | |
| 35 | + success: function (res) { | |
| 36 | + if(callback) callback(); | |
| 37 | + self.setData({ | |
| 38 | + res: res.data.data | |
| 39 | + }); | |
| 40 | + self.loadCheckedRecord(); | |
| 41 | + }, | |
| 42 | + }); | |
| 43 | + }, | |
| 44 | + | |
| 45 | + /** | |
| 46 | + * 生命周期函数--监听页面加载 | |
| 47 | + */ | |
| 48 | + onLoad: function(options) { | |
| 49 | + let self = this; | |
| 50 | + this.getDate(); | |
| 51 | + this.setDate(); | |
| 52 | + var res = wx.getSystemInfoSync(); | |
| 53 | + this.setData({ | |
| 54 | + param: res.windowHeight / 12, | |
| 55 | + }) | |
| 56 | + | |
| 57 | + this.loadQd(); | |
| 58 | + | |
| 59 | + }, | |
| 60 | + | |
| 61 | + | |
| 62 | + // 点击"我的积分"和"去购物"进行跳转 | |
| 63 | + goto(e) { | |
| 64 | + let url = e.target.dataset.url; | |
| 65 | + app.goto(url); | |
| 66 | + }, | |
| 67 | + | |
| 68 | + | |
| 69 | + // 点击显示签到规则 | |
| 70 | + showRules() { | |
| 71 | + if(this.data.isShowRules) { | |
| 72 | + this.setData({ | |
| 73 | + isShowRules: false | |
| 74 | + }); | |
| 75 | + } else { | |
| 76 | + this.setData({ | |
| 77 | + isShowRules: true | |
| 78 | + }); | |
| 79 | + } | |
| 80 | + }, | |
| 81 | + | |
| 82 | + | |
| 83 | + // 加载签到记录 | |
| 84 | + loadCheckedRecord() { | |
| 85 | + let newDateArr = this.data.dateArr; | |
| 86 | + let list; | |
| 87 | + let bqlist; | |
| 88 | + if(this.data.res.qddaylist) { | |
| 89 | + list = this.data.res.qddaylist.split(','); | |
| 90 | + for(let item of list) { | |
| 91 | + newDateArr[item-1].isCheckIn = true; | |
| 92 | + }; | |
| 93 | + } | |
| 94 | + if(this.data.res.curbqdaynum) { | |
| 95 | + bqlist = this.data.res.curbqdaynum.split(','); | |
| 96 | + for(let item of bqlist) { | |
| 97 | + var date = new Date(item); | |
| 98 | + newDateArr[date.getDate()-1].isBq = true; | |
| 99 | + } | |
| 100 | + } | |
| 101 | + this.setData({ | |
| 102 | + dateArr: newDateArr | |
| 103 | + }); | |
| 104 | + }, | |
| 105 | + | |
| 106 | + // 点击签到 | |
| 107 | + checkInToday() { | |
| 108 | + const self = this; | |
| 109 | + // 获取今天的签到状态 | |
| 110 | + let isCheckInToday = this.data.dateArr[this.data.day-1].isCheckIn; | |
| 111 | + // 如果还没签到, 可以点击签到 | |
| 112 | + if(!isCheckInToday) { | |
| 113 | + app.request.promisePost('/api/weshop/qdrecord/saveQd', { | |
| 114 | + data: { | |
| 115 | + store_id: app.globalData.setting.stoid, | |
| 116 | + user_id: app.globalData.user_id, | |
| 117 | + } | |
| 118 | + }).then(res => { | |
| 119 | + // 改变签到状态,由false置为true | |
| 120 | + // let newDateArr = self.data.dateArr; | |
| 121 | + // newDateArr[self.data.day-1].isCheckIn = true; | |
| 122 | + | |
| 123 | + self.loadQd(function() { | |
| 124 | + wx.showToast({ | |
| 125 | + title: self.data.res.qdintro, | |
| 126 | + icon: 'none', | |
| 127 | + duration: 1500, | |
| 128 | + success: function() { | |
| 129 | + | |
| 130 | + } | |
| 131 | + }); | |
| 132 | + }); | |
| 133 | + | |
| 134 | + }) | |
| 135 | + } | |
| 136 | + }, | |
| 137 | + | |
| 138 | + | |
| 139 | + // 补签 | |
| 140 | + reCheckIn() { | |
| 141 | + var self = this; | |
| 142 | + // var i = 0; | |
| 143 | + console.log('补签~'); | |
| 144 | + if(this.data.flag) { | |
| 145 | + this.data.flag = false; | |
| 146 | + app.request.promisePost('/api/weshop/qdrecord/saveBQd', { | |
| 147 | + data: { | |
| 148 | + store_id: app.globalData.setting.stoid, | |
| 149 | + user_id: app.globalData.user_id, | |
| 150 | + daynum: self.data.res.getBQIntegral, | |
| 151 | + bqnum: self.data.res.getbqnum2, | |
| 152 | + bqintegral: self.data.res.getBQIntegral1, | |
| 153 | + } | |
| 154 | + }).then(res => { | |
| 155 | + // 改变签到状态,由false置为true | |
| 156 | + // let newDateArr = self.data.dateArr; | |
| 157 | + // newDateArr[self.data.day-1].isCheckIn = true; | |
| 158 | + var bqlist = self.data.res.curbqdaynum.split(',').sort(); | |
| 159 | + var list = []; | |
| 160 | + for(let item of bqlist) { | |
| 161 | + var date = new Date(item); | |
| 162 | + list.push(date.getDate()); | |
| 163 | + } | |
| 164 | + | |
| 165 | + self.data.dateArr[list[0]-1].isBq = false; | |
| 166 | + self.setData({ | |
| 167 | + dateArr: self.data.dateArr | |
| 168 | + }); | |
| 169 | + | |
| 170 | + self.loadQd(function() { | |
| 171 | + self.data.flag = true; | |
| 172 | + wx.showToast({ | |
| 173 | + title: '补签成功', | |
| 174 | + icon: 'success', | |
| 175 | + duration: 1500, | |
| 176 | + success: function() { | |
| 177 | + | |
| 178 | + } | |
| 179 | + }); | |
| 180 | + }); | |
| 181 | + }) | |
| 182 | + } | |
| 183 | + }, | |
| 184 | + | |
| 185 | + | |
| 186 | + | |
| 187 | + | |
| 188 | + | |
| 189 | + getDate: function() { //获取当月日期 | |
| 190 | + var mydate = new Date(); | |
| 191 | + var year = mydate.getFullYear(); | |
| 192 | + var month = mydate.getMonth(); //0~11: 一月至十二月 | |
| 193 | + var months = month + 1; //1~12：一月至十二月 | |
| 194 | + this.data.year = year; | |
| 195 | + this.data.month = months; | |
| 196 | + this.data.day = mydate.getDate(); //获取当月日期: 1~31 | |
| 197 | + var fist = new Date(year, month, 1); | |
| 198 | + this.data.firstDay = fist.getDay(); //获取当月第一天 | |
| 199 | + var last = new Date(year, months, 0); //0表示当月最后一天 | |
| 200 | + this.data.lastDay = last.getDate(); //获取当月最后一天 | |
| 201 | + | |
| 202 | + this.setData({ | |
| 203 | + year: this.data.year, | |
| 204 | + month: this.data.month, | |
| 205 | + day: this.data.day, | |
| 206 | + firstDay: this.data.firstDay, | |
| 207 | + lastDay: this.data.lastDay | |
| 208 | + }) | |
| 209 | + console.log("今天：" + this.data.day); | |
| 210 | + }, | |
| 211 | + | |
| 212 | + setDate: function() { | |
| 213 | + var day; | |
| 214 | + for (var i = 1; i < this.data.lastDay + 1; i++) { | |
| 215 | + day = { | |
| 216 | + num: i, | |
| 217 | + }; | |
| 218 | + this.data.dateArr.push(day); | |
| 219 | + } | |
| 220 | + this.setData({ | |
| 221 | + dateArr: this.data.dateArr, | |
| 222 | + // firstDay: this.data.firstDay | |
| 223 | + }); | |
| 224 | + }, | |
| 225 | + | |
| 226 | + // prevMonth: function() { //上一月 | |
| 227 | + // var months = ""; | |
| 228 | + // var years = ""; | |
| 229 | + // if (this.data.month == 1) { | |
| 230 | + // years = this.data.year - 1 | |
| 231 | + // this.data.month = 12; | |
| 232 | + // months = this.data.month; | |
| 233 | + // } else { | |
| 234 | + // years = this.data.year; | |
| 235 | + // months = this.data.month - 1; | |
| 236 | + // } | |
| 237 | + | |
| 238 | + // var first = new Date(years, months - 1, 1); | |
| 239 | + // this.data.firstDay = first.getDay(); | |
| 240 | + // var last = new Date(years, months, 0); | |
| 241 | + // this.data.lastDay = last.getDate(); | |
| 242 | + | |
| 243 | + // this.setData({ | |
| 244 | + // month: months, | |
| 245 | + // year: years, | |
| 246 | + // firstDay: this.data.firstDay, | |
| 247 | + // lastDay: this.data.lastDay | |
| 248 | + // }) | |
| 249 | + | |
| 250 | + // this.data.dateArr = []; | |
| 251 | + // for (var i = 1; i < this.data.lastDay + 1; i++) { | |
| 252 | + // this.data.dateArr.push(i); | |
| 253 | + // } | |
| 254 | + // this.setData({ | |
| 255 | + // dateArr: this.data.dateArr | |
| 256 | + // }) | |
| 257 | + // }, | |
| 258 | + | |
| 259 | + // nextMonth: function() { //下一月 | |
| 260 | + // var months = ""; | |
| 261 | + // var years = ""; | |
| 262 | + // if (this.data.month == 12) { | |
| 263 | + // this.data.month = 0; | |
| 264 | + // months = this.data.month; | |
| 265 | + // years = this.data.year + 1; | |
| 266 | + // } else { | |
| 267 | + // months = this.data.month + 1; | |
| 268 | + // years = this.data.year; | |
| 269 | + // } | |
| 270 | + // var months = this.data.month + 1; | |
| 271 | + // var first = new Date(years, months - 1, 1); | |
| 272 | + // this.data.firstDay = first.getDay(); | |
| 273 | + // var last = new Date(years, months, 0); | |
| 274 | + // this.data.lastDay = last.getDate(); | |
| 275 | + // this.setData({ | |
| 276 | + // month: months, | |
| 277 | + // year: years, | |
| 278 | + // firstDay: this.data.firstDay, | |
| 279 | + // lastDay: this.data.lastDay | |
| 280 | + // }) | |
| 281 | + | |
| 282 | + // this.data.dateArr = []; | |
| 283 | + // for (var i = 1; i < this.data.lastDay + 1; i++) { | |
| 284 | + // this.data.dateArr.push(i); | |
| 285 | + // } | |
| 286 | + // this.setData({ | |
| 287 | + // dateArr: this.data.dateArr | |
| 288 | + // }) | |
| 289 | + // }, | |
| 290 | + | |
| 291 | +}) | ... | ... |
packageA/pages/checkin/checkin.json
0 → 100644
packageA/pages/checkin/checkin.wxml
0 → 100644
| 1 | +<!--packageA//pages/checkin/checkin.wxml--> | |
| 2 | +<wxs src="checkin.wxs" module="myUtil"></wxs> | |
| 3 | +<view class="checkin-container"> | |
| 4 | + <view class="rule-container flex"> | |
| 5 | + <view class="points" bindtap="goto" data-url="/pages/user/integral/integral"><image class="coin" src="https://mshop-lib.yolipai.net/template/mobile/new/static/images/integral/coins.png"></image>我的积分</view> | |
| 6 | + <view class="rule" bindtap="showRules">规则</view> | |
| 7 | + </view> | |
| 8 | + | |
| 9 | + <view class="list flex"> | |
| 10 | + <view class="list-item {{dateArr[myUtil.setDate(year, res.sday2, 0)-1].isCheckIn ? 'active':''}}"> | |
| 11 | + <view class="circle">+{{res.cday1}}</view> | |
| 12 | + <view class="fs26">{{myUtil.setDate(year, res.sday2, 0)}}日</view> | |
| 13 | + </view> | |
| 14 | + <view class="list-item {{dateArr[myUtil.setDate(year, res.sday2, 1)-1].isCheckIn ? 'active':''}}"> | |
| 15 | + <view class="circle">+{{res.daynum}}</view> | |
| 16 | + <view class="fs26">{{myUtil.setDate(year, res.sday2, 1)}}日</view> | |
| 17 | + </view> | |
| 18 | + <view class="list-item {{dateArr[myUtil.setDate(year, res.sday2, 2)-1].isCheckIn ? 'active':''}}"> | |
| 19 | + <view class="circle">+{{res.tdayc1}}</view> | |
| 20 | + <view class="fs26">{{myUtil.setDate(year, res.sday2, 2)}}日</view> | |
| 21 | + </view> | |
| 22 | + <view class="list-item {{dateArr[myUtil.setDate(year, res.sday2, 3)-1].isCheckIn ? 'active':''}}"> | |
| 23 | + <view class="circle">+{{res.tdayc2}}</view> | |
| 24 | + <view class="fs26">{{myUtil.setDate(year, res.sday2, 3)}}日</view> | |
| 25 | + </view> | |
| 26 | + <view class="list-item {{dateArr[myUtil.setDate(year, res.sday2, 4)-1].isCheckIn ? 'active':''}}"> | |
| 27 | + <view class="circle">+{{res.tdayc3}}</view> | |
| 28 | + <view class="fs26">{{myUtil.setDate(year, res.sday2, 4)}}日</view> | |
| 29 | + </view> | |
| 30 | + <view class="list-item {{dateArr[myUtil.setDate(year, res.sday2, 5)-1].isCheckIn ? 'active':''}}"> | |
| 31 | + <view class="circle">+{{res.tdayc4}}</view> | |
| 32 | + <view class="fs26">{{myUtil.setDate(year, res.sday2, 5)}}日</view> | |
| 33 | + </view> | |
| 34 | + <view class="list-item {{dateArr[myUtil.setDate(year, res.sday2, 6)-1].isCheckIn ? 'active':''}}"> | |
| 35 | + <view class="circle">+{{res.tdayc5}}</view> | |
| 36 | + <view class="fs26">{{myUtil.setDate(year, res.sday2, 6)}}日</view> | |
| 37 | + </view> | |
| 38 | + </view> | |
| 39 | + | |
| 40 | + <view class="btn-container"> | |
| 41 | + <view class="btn" bindtap="checkInToday"> | |
| 42 | + <text class="iconfont icon-rili"></text>{{!dateArr[day-1].isCheckIn ? '立即签到':'今日已签到'}} | |
| 43 | + </view> | |
| 44 | + <view class="btn" wx:if="{{res.curbqdaynum}}" bindtap="reCheckIn"><text class="iconfont icon-buqian"></text>补签(-10分)</view> | |
| 45 | + </view> | |
| 46 | + | |
| 47 | + | |
| 48 | + <!-- <view class="current"> | |
| 49 | + <view class="f-vc">当前连续签到：<text class="days fs34">{{res.getlxnum}}</text> 天</view> | |
| 50 | + <view class="f-vc">当前积分：<text class="fs34">{{integral}}</text></view> | |
| 51 | + </view> --> | |
| 52 | + | |
| 53 | + <!-- <view class="goleft iconfont icon-jianzuo" bindtap="prevMonth">a</view> --> | |
| 54 | + | |
| 55 | + <view class="calendar-container"> | |
| 56 | + <view class="calendar-wrapper"> | |
| 57 | + <view class="calendar-title"> | |
| 58 | + <view>{{year}}年{{month}}月</view> | |
| 59 | + <view class="fs24" style="color:#999;">补签卡：{{res.getkbqnum}}</view> | |
| 60 | + </view> | |
| 61 | + <view class="calendar"> | |
| 62 | + <!-- <view class="selectDate"> --> | |
| 63 | + <!-- <view class="goleft iconfont icon-jianzuo" bindtap="prevMonth">a</view> --> | |
| 64 | + <!-- <view class="date-wrap"> | |
| 65 | + {{year}}年{{month}}月 | |
| 66 | + </view> --> | |
| 67 | + <!-- <view class="goright iconfont icon-jianzuo" bindtap="nextMonth">b</view> --> | |
| 68 | + <!-- </view> --> | |
| 69 | + <view class="week"> | |
| 70 | + <view wx:for="{{weekArr}}" wx:for-index="index" wx:for-item="item" wx:key="key" style="height:{{param-17}}px;line-height:{{param-17}}px;flex:1;">{{item}}</view> | |
| 71 | + </view> | |
| 72 | + | |
| 73 | + <view class="date"> | |
| 74 | + <block wx:for="{{dateArr}}" wx:for-index="index" wx:for-item="item" wx:key="key"> | |
| 75 | + <!-- <view style="{{index ==0?'margin-left:calc(100%/7 * ' + firstDay + ');':''}}width:calc(100%/7);line-height:80rpx;" class="{{index+1==day?'today':''}} {{index+1==day&&isClock?'clockOn':''}}" ><view class="day">{{item}}</view></view> --> | |
| 76 | + <view style="{{index ==0?'margin-left:calc(100%/7 * ' + firstDay + ');':''}}width:calc(100%/7);line-height:80rpx;" class="{{item.isCheckIn ? 'active':''}} {{res.curbqdaynum&&item.isBq ? 'bq':''}}" bindtap="clickDay" data-day="{{item.num}}"> | |
| 77 | + <view class="day">{{item.num}}</view> | |
| 78 | + </view> | |
| 79 | + </block> | |
| 80 | + </view> | |
| 81 | + | |
| 82 | + </view> | |
| 83 | + </view> | |
| 84 | + | |
| 85 | + </view> | |
| 86 | + | |
| 87 | + <view class="jfbuy-container"> | |
| 88 | + <view class="jfbuy flex"> | |
| 89 | + <image class="jfbuy-img" src="https://mshop-lib.yolipai.net/template/mobile/new/static/images/integral/liwu.png"></image> | |
| 90 | + <view class="right"> | |
| 91 | + <view> | |
| 92 | + <view class="t1">小积分大作为</view> | |
| 93 | + <view class="t2">积分抵用现金，积少成多</view> | |
| 94 | + </view> | |
| 95 | + <view class="t-c"> | |
| 96 | + <view class="btn-buy" bindtap="goto" data-url="/packageA/pages/jfbuy/jfbuy">去购物 Go!</view> | |
| 97 | + </view> | |
| 98 | + </view> | |
| 99 | + </view> | |
| 100 | + </view> | |
| 101 | + | |
| 102 | + <view class="popup-container" wx:if="{{isShowRules}}"> | |
| 103 | + <view class="popup-wrapper"> | |
| 104 | + <view class="popup"> | |
| 105 | + <view class="popup-title">签到规则</view> | |
| 106 | + <view class="popup-content">1.每日签到领积分</view> | |
| 107 | + </view> | |
| 108 | + <view class="popup-close"> | |
| 109 | + <text class="btn-close" bindtap="showRules">X</text> | |
| 110 | + </view> | |
| 111 | + </view> | |
| 112 | + </view> | |
| 113 | + | |
| 114 | +</view> | ... | ... |
packageA/pages/checkin/checkin.wxs
0 → 100644
| 1 | +var myUtil = { | |
| 2 | + setDate: function(year, startDate, num) { | |
| 3 | + var date = getDate(year + '-' + startDate); | |
| 4 | + date.setDate(date.getDate() + num); | |
| 5 | + date = getDate(date).getDate(); | |
| 6 | + return date; | |
| 7 | + }, | |
| 8 | + | |
| 9 | + // dateDiff: function(firstDate,secondDate) { | |
| 10 | + // var firstDate = new Date(firstDate); | |
| 11 | + // var secondDate = new Date(secondDate); | |
| 12 | + // var diff = Math.abs(firstDate.getTime() - secondDate.getTime()); | |
| 13 | + // var result = parseInt(diff / (1000 * 60 * 60 * 24)); | |
| 14 | + // return result; | |
| 15 | + // }, | |
| 16 | +}; | |
| 17 | + | |
| 18 | +module.exports = { | |
| 19 | + setDate: myUtil.setDate, | |
| 20 | +}; | |
| 0 | 21 | \ No newline at end of file | ... | ... |
packageA/pages/checkin/checkin.wxss
0 → 100644
| 1 | +/* packageA//pages/checkin/checkin.wxss */ | |
| 2 | +@charset "utf-8"; | |
| 3 | +page, | |
| 4 | +.checkin-container { | |
| 5 | + /* height: 100%; | |
| 6 | + overflow: hidden; */ | |
| 7 | +} | |
| 8 | + | |
| 9 | +.checkin-container { | |
| 10 | + background: linear-gradient(#FF7A07, #FF980F, white 95%); | |
| 11 | + background-repeat: no-repeat; | |
| 12 | +} | |
| 13 | + | |
| 14 | +.checkin-container { | |
| 15 | + /* background-color: #3F7EFF; */ | |
| 16 | +} | |
| 17 | + | |
| 18 | +.rule-container { | |
| 19 | + padding-top: 40rpx; | |
| 20 | + align-items: center; | |
| 21 | + justify-content: space-between; | |
| 22 | + position: relative; | |
| 23 | +} | |
| 24 | +.points { | |
| 25 | + background-color: #FFBC47; | |
| 26 | + color: #333; | |
| 27 | + font-size: 26rpx; | |
| 28 | + border-top-right-radius: 25rpx; | |
| 29 | + border-bottom-right-radius: 25rpx; | |
| 30 | + display: flex; | |
| 31 | + align-items: center; | |
| 32 | + padding-right: 20rpx; | |
| 33 | + line-height: 50rpx; | |
| 34 | +} | |
| 35 | +.rule { | |
| 36 | + padding: 10rpx 20rpx; | |
| 37 | + color: #FFBC47; | |
| 38 | + font-size: 26rpx; | |
| 39 | +} | |
| 40 | + | |
| 41 | +.coin { | |
| 42 | + width: 30rpx; | |
| 43 | + height: 25rpx; | |
| 44 | + padding-left: 10rpx; | |
| 45 | + padding-right: 6rpx; | |
| 46 | +} | |
| 47 | + | |
| 48 | +.current { | |
| 49 | + display: flex; | |
| 50 | + justify-content: space-between; | |
| 51 | + padding: 60rpx 30rpx 30rpx; | |
| 52 | + color: white; | |
| 53 | + font-size: 28rpx; | |
| 54 | +} | |
| 55 | + | |
| 56 | +.days { | |
| 57 | + font-weight: bold; | |
| 58 | + color: #FFE749; | |
| 59 | +} | |
| 60 | + | |
| 61 | +.f-vc { | |
| 62 | + display: flex; | |
| 63 | + align-items: center; | |
| 64 | +} | |
| 65 | + | |
| 66 | +.btn-container { | |
| 67 | + display: flex; | |
| 68 | + justify-content: space-around; | |
| 69 | + margin-bottom: 80rpx; | |
| 70 | +} | |
| 71 | + | |
| 72 | +.icon-rili, | |
| 73 | +.icon-buqian { | |
| 74 | + margin-right: 10rpx; | |
| 75 | + font-size: 40rpx; | |
| 76 | + font-weight: normal; | |
| 77 | +} | |
| 78 | + | |
| 79 | + | |
| 80 | +.btn { | |
| 81 | + width: 260rpx; | |
| 82 | + line-height: 76rpx; | |
| 83 | + padding-left: 30rpx; | |
| 84 | + padding-right: 30rpx; | |
| 85 | + background-color: #FFBC47; | |
| 86 | + border-radius: 38rpx; | |
| 87 | + color: white; | |
| 88 | + text-align: center; | |
| 89 | + box-shadow: 0 7px 0 #FF9A45, 0 8px 3px rgba(0, 0, 0, 0.3); | |
| 90 | + margin: 0 auto; | |
| 91 | + display: flex; | |
| 92 | + align-items: center; | |
| 93 | + justify-content: center; | |
| 94 | + font-weight: bold; | |
| 95 | +} | |
| 96 | + | |
| 97 | +.list { | |
| 98 | + margin: 80rpx 20rpx 60rpx; | |
| 99 | + color: rgba(255,255,255,.3); | |
| 100 | + align-items: center; | |
| 101 | + position: relative; | |
| 102 | +} | |
| 103 | +.list::after { | |
| 104 | + content: ''; | |
| 105 | + position: absolute; | |
| 106 | + left: 0; | |
| 107 | + right: 0; | |
| 108 | + top: 30rpx; | |
| 109 | + margin: 0 auto; | |
| 110 | + width: 94%; | |
| 111 | + height: 10rpx; | |
| 112 | + background-color: rgba(255,255,255,.3); | |
| 113 | +} | |
| 114 | +.list-item { | |
| 115 | + width: calc(100% / 7); | |
| 116 | + text-align: center; | |
| 117 | +} | |
| 118 | +.circle { | |
| 119 | + width: 68rpx; | |
| 120 | + height: 68rpx; | |
| 121 | + line-height: 68rpx; | |
| 122 | + font-size: 26rpx; | |
| 123 | + color: white; | |
| 124 | + background-color: #FF9A45; | |
| 125 | + margin: 0 auto 10rpx auto; | |
| 126 | + position: relative; | |
| 127 | + z-index: 3; | |
| 128 | +} | |
| 129 | +.list-item.active { | |
| 130 | + color: white; | |
| 131 | + /* font-weight: bold; */ | |
| 132 | +} | |
| 133 | +.list-item.active .circle { | |
| 134 | + box-sizing: border-box; | |
| 135 | + background-color: #FFBC47; | |
| 136 | + /* color: white; */ | |
| 137 | + border: 4rpx solid white; | |
| 138 | + line-height: 64rpx; | |
| 139 | + /* box-shadow: 2rpx 2rpx 16rpx #ddd; */ | |
| 140 | +} | |
| 141 | + | |
| 142 | +.calendar-container { | |
| 143 | + position: relative; | |
| 144 | + padding: 0 60rpx; | |
| 145 | +} | |
| 146 | +.calendar-container::before { | |
| 147 | + content: ''; | |
| 148 | + position: absolute; | |
| 149 | + left: 0; | |
| 150 | + right: 0; | |
| 151 | + top: 0; | |
| 152 | + margin: 0 auto; | |
| 153 | + width: 680rpx; | |
| 154 | + height: 24rpx; | |
| 155 | + border-radius: 12rpx; | |
| 156 | + /* background-color: #8AAFFC; */ | |
| 157 | + background: linear-gradient(#CBDAFC, #6E9CFD); | |
| 158 | + box-shadow: 0 2rpx 10rpx #6C98F4; | |
| 159 | +} | |
| 160 | +.calendar-wrapper { | |
| 161 | + background: linear-gradient(#BAD4FD, white 6rpx); | |
| 162 | + position: relative; | |
| 163 | + z-index: 2; | |
| 164 | + width: 100%; | |
| 165 | + top: 12rpx; | |
| 166 | + left: 0; | |
| 167 | + border-bottom-left-radius: 16rpx; | |
| 168 | + border-bottom-right-radius: 16rpx; | |
| 169 | + box-shadow: 0 2rpx 16rpx #999; | |
| 170 | +} | |
| 171 | +.calendar-title { | |
| 172 | + text-align: center; | |
| 173 | + line-height: 86rpx; | |
| 174 | + border-bottom: 2rpx solid #E0E6EE; | |
| 175 | + display: flex; | |
| 176 | + align-items: center; | |
| 177 | + padding: 0 20rpx; | |
| 178 | + justify-content: space-between; | |
| 179 | +} | |
| 180 | + | |
| 181 | +.calendar { | |
| 182 | + /* height: 400rpx; */ | |
| 183 | + font-size: 26rpx; | |
| 184 | + color: #838E9C; | |
| 185 | + padding-bottom: 20rpx; | |
| 186 | +} | |
| 187 | +.week { | |
| 188 | + display: flex; | |
| 189 | + flex-wrap: wrap; | |
| 190 | + text-align: center; | |
| 191 | +} | |
| 192 | + | |
| 193 | + | |
| 194 | +.jfbuy-container { | |
| 195 | + padding: 60rpx 40rpx 40rpx; | |
| 196 | +} | |
| 197 | +.jfbuy { | |
| 198 | + /* border: 2rpx solid black; */ | |
| 199 | + border-radius: 16rpx; | |
| 200 | + padding: 40rpx 30rpx; | |
| 201 | + background-color: #FF980F; | |
| 202 | + box-shadow: 0 2rpx 16rpx #FF7A07; | |
| 203 | + /* position: fixed; | |
| 204 | + width: 100%; | |
| 205 | + bottom: 0; */ | |
| 206 | + /* padding: 40rpx 20rpx; */ | |
| 207 | +} | |
| 208 | + | |
| 209 | +.jfbuy-img { | |
| 210 | + width: 260rpx; | |
| 211 | + height: 180rpx; | |
| 212 | + padding-right: 40rpx; | |
| 213 | +} | |
| 214 | +.t1 { | |
| 215 | + font-weight: bolder; | |
| 216 | + color: white; | |
| 217 | +} | |
| 218 | +.t2 { | |
| 219 | + color: white; | |
| 220 | + font-size: 24rpx; | |
| 221 | + padding-top: 10rpx; | |
| 222 | +} | |
| 223 | +.right { | |
| 224 | + display: flex; | |
| 225 | + flex-direction: column; | |
| 226 | + justify-content: space-between; | |
| 227 | + flex: 1; | |
| 228 | +} | |
| 229 | +.btn-buy { | |
| 230 | + /* padding: 20rpx 10rpx; */ | |
| 231 | + border: 2rpx solid white; | |
| 232 | + color: white; | |
| 233 | + line-height: 60rpx; | |
| 234 | + border-radius: 30rpx; | |
| 235 | +} | |
| 236 | + | |
| 237 | +.today .day { | |
| 238 | + /* background-color: skyblue; | |
| 239 | + border-radius: 50%; */ | |
| 240 | + /* color: white; */ | |
| 241 | + /* width: 44rpx; | |
| 242 | + height: 44rpx; | |
| 243 | + line-height: 44rpx; */ | |
| 244 | + /* border-radius: 50%; */ | |
| 245 | + /* background-color: rgba(255,188,71,.6); */ | |
| 246 | + /* box-shadow: 0 2rpx 12rpx #FFBC47; */ | |
| 247 | +} | |
| 248 | + | |
| 249 | +.active .day, | |
| 250 | +.bq .day { | |
| 251 | + position: relative; | |
| 252 | +} | |
| 253 | + | |
| 254 | +.active .day::after { | |
| 255 | + content: ''; | |
| 256 | + position: absolute; | |
| 257 | + width: 10rpx; | |
| 258 | + height: 10rpx; | |
| 259 | + border-radius: 50%; | |
| 260 | + background-color: #FFBC47; | |
| 261 | + left: 0; | |
| 262 | + right: 0; | |
| 263 | + bottom: 12rpx; | |
| 264 | + margin: auto; | |
| 265 | + box-shadow: 0 2rpx 12rpx #FFBC47; | |
| 266 | +} | |
| 267 | + | |
| 268 | +.bq .day { | |
| 269 | + background-color: #eee; | |
| 270 | +} | |
| 271 | + | |
| 272 | +.bq .day::before { | |
| 273 | + position: absolute; | |
| 274 | + top: 4rpx; | |
| 275 | + right: 0; | |
| 276 | + content: '补'; | |
| 277 | + color: white; | |
| 278 | + font-size: 16rpx; | |
| 279 | + line-height: 16rpx; | |
| 280 | + z-index: 5; | |
| 281 | +} | |
| 282 | +.bq .day::after { | |
| 283 | + position: absolute; | |
| 284 | + top: 0; | |
| 285 | + right: 0; | |
| 286 | + content: ''; | |
| 287 | + width: 0; | |
| 288 | + border-top: 34rpx solid #ccc; | |
| 289 | + border-left: 34rpx solid transparent; | |
| 290 | + | |
| 291 | +} | |
| 292 | + | |
| 293 | + | |
| 294 | +.popup-container { | |
| 295 | + position: fixed; | |
| 296 | + top: 0; | |
| 297 | + bottom: 0; | |
| 298 | + left: 0; | |
| 299 | + right: 0; | |
| 300 | + z-index: 99; | |
| 301 | + background-color: rgba(0,0,0,.5); | |
| 302 | +} | |
| 303 | + | |
| 304 | +.popup-wrapper { | |
| 305 | + position: absolute; | |
| 306 | + width: 80%; | |
| 307 | + max-height: 880rpx; | |
| 308 | + top: 0; | |
| 309 | + bottom: 0; | |
| 310 | + left: 0; | |
| 311 | + right: 0; | |
| 312 | + margin: auto; | |
| 313 | + display: flex; | |
| 314 | + flex-direction: column; | |
| 315 | + justify-content: center; | |
| 316 | + align-items: center; | |
| 317 | +} | |
| 318 | + | |
| 319 | +.popup { | |
| 320 | + padding: 30rpx; | |
| 321 | + background-color: white; | |
| 322 | + border-radius: 20rpx; | |
| 323 | + max-height: 800rpx; | |
| 324 | + overflow: auto; | |
| 325 | +} | |
| 326 | + | |
| 327 | +.popup-title { | |
| 328 | + font-weight: 28rpx; | |
| 329 | + font-weight: bold; | |
| 330 | + padding-bottom: 20rpx; | |
| 331 | +} | |
| 332 | + | |
| 333 | +.popup-content { | |
| 334 | + text-align: justify; | |
| 335 | +} | |
| 336 | + | |
| 337 | +.popup-close { | |
| 338 | + color: white; | |
| 339 | + text-align: center; | |
| 340 | + padding-top: 20rpx; | |
| 341 | +} | |
| 342 | +.btn-close { | |
| 343 | + display: inline-block; | |
| 344 | + width: 50rpx; | |
| 345 | + height: 50rpx; | |
| 346 | + line-height: 50rpx; | |
| 347 | + border-radius: 50%; | |
| 348 | + border: 4rpx solid white; | |
| 349 | +} | |
| 350 | + | |
| 351 | +.date { | |
| 352 | + width: 100%; | |
| 353 | + display: flex; | |
| 354 | + flex-wrap: wrap; | |
| 355 | + text-align:center; | |
| 356 | +} | ... | ... |