Skip to content

S
shop_mobile_uni
Commit b4684456 authored by 王建威's avatar 王建威
Browse files
Options

积分 会员

parent 9034a2a3
Hide whitespace changes
Inline Side-by-side
Showing with 3220 additions and 165 deletions
components/TopBar/TopBar.vue
View file @ b4684456
<template>
<view class="topbar_view">
<view class="topbar_view" :style="{'color': titleColor, 'background-color': bgColor}">
<text class="eosfont left_icon" @click="back()">&#xe622;</text>
{{this.title}}
</view>
......@@ -11,6 +11,14 @@
title: {
type: String,
default: ''
},
titleColor: {
type: String,
default: '#212121'
},
bgColor: {
type: String,
default: '#fff'
}
},
methods: {
......
components/uni-calendar/calendar.js 0 → 100644
View file @ b4684456
/**
* @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
components/uni-calendar/uni-calendar-item.vue 0 → 100644
View file @ b4684456
<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">{{weeks.date}}</text>
<text class="uni-calendar-item__weeks-box-text" :class="{
'uni-calendar-item--isDay-text': weeks.isDay,
'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
'uni-calendar-item--before-checked':weeks.beforeMultiple,
'uni-calendar-item--multiple': weeks.multiple,
'uni-calendar-item--after-checked':weeks.afterMultiple,
'uni-calendar-item--disable':weeks.disable,
}">{{weeks.date}}</text>
<text v-if="!lunar&&!weeks.extraInfo && weeks.isDay" class="uni-calendar-item__weeks-lunar-text" :class="{
'uni-calendar-item--isDay-text':weeks.isDay,
'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
'uni-calendar-item--before-checked':weeks.beforeMultiple,
'uni-calendar-item--multiple': weeks.multiple,
'uni-calendar-item--after-checked':weeks.afterMultiple,
}">今天</text>
<text v-if="lunar&&!weeks.extraInfo" class="uni-calendar-item__weeks-lunar-text" :class="{
'uni-calendar-item--isDay-text':weeks.isDay,
'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
'uni-calendar-item--before-checked':weeks.beforeMultiple,
'uni-calendar-item--multiple': weeks.multiple,
'uni-calendar-item--after-checked':weeks.afterMultiple,
'uni-calendar-item--disable':weeks.disable,
}">{{weeks.isDay?'今天': (weeks.lunar.IDayCn === '初一'?weeks.lunar.IMonthCn:weeks.lunar.IDayCn)}}</text>
<text v-if="weeks.extraInfo&&weeks.extraInfo.info" class="uni-calendar-item__weeks-lunar-text" :class="{
'uni-calendar-item--extra':weeks.extraInfo.info,
'uni-calendar-item--isDay-text':weeks.isDay,
'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
'uni-calendar-item--before-checked':weeks.beforeMultiple,
'uni-calendar-item--multiple': weeks.multiple,
'uni-calendar-item--after-checked':weeks.afterMultiple,
'uni-calendar-item--disable':weeks.disable,
}">{{weeks.extraInfo.info}}</text>
</view>
</view>
</template>
<script>
export default {
props: {
weeks: {
type: Object,
default () {
return {}
}
},
calendar: {
type: Object,
default: () => {
return {}
}
},
selected: {
type: Array,
default: () => {
return []
}
},
lunar: {
type: Boolean,
default: false
}
},
methods: {
choiceDate(weeks) {
this.$emit('change', weeks)
}
}
}
</script>
<style lang="scss" scoped>
.uni-calendar-item__weeks-box {
flex: 1;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
align-items: center;
}
.uni-calendar-item__weeks-box-text {
font-size: 32rpx;
color: #000;
}
.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: 50%;
left: 50%;
margin-left: -28rpx;
margin-top: -28rpx;
width: 56rpx;
height: 56rpx;
border-radius: 50%;
background-color: #FFED7E;
text-align: center;
font-size: 32rpx;
line-height: 56rpx;
}
.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-color-primary;
}
.uni-calendar-item--isDay {
background-color: #FFED7E;
}
.uni-calendar-item--extra {
color: $uni-color-error;
}
.uni-calendar-item--checked {
background-color: #FFED7E;
color: #000;
}
.uni-calendar-item--multiple {
background-color: $uni-color-primary;
color: #fff;
}
.uni-calendar-item--before-checked {
background-color: #ff5a5f;
color: #fff;
}
.uni-calendar-item--after-checked {
background-color: #ff5a5f;
color: #fff;
}
</style>
components/uni-calendar/uni-calendar.vue 0 → 100644
View file @ b4684456
<template>
<view class="uni-calendar">
<view v-if="!insert&&show" class="uni-calendar__mask" :class="{'uni-calendar--mask-show':aniMaskShow}" @click="clean"></view>
<view v-if="insert || show" class="uni-calendar__content" :class="{'uni-calendar--fixed':!insert,'uni-calendar--ani-show':aniMaskShow}">
<view v-if="!insert" class="uni-calendar__header uni-calendar--fixed-top">
<view class="uni-calendar__header-btn-box" @click="close">
<text class="uni-calendar__header-text uni-calendar--fixed-width">取消</text>
</view>
<view class="uni-calendar__header-btn-box" @click="confirm">
<text class="uni-calendar__header-text uni-calendar--fixed-width">确定</text>
</view>
</view>
<view class="uni-calendar__header">
<view class="uni-calendar__header-btn-box" @click.stop="pre">
<view class="uni-calendar__header-btn uni-calendar--left"></view>
</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>
</view>
<view class="uni-calendar__box">
<view v-if="showMonth" class="uni-calendar__box-bg">
<text class="uni-calendar__box-bg-text">{{nowDate.month}}</text>
</view>
<view class="uni-calendar__weeks">
<view class="uni-calendar__weeks-day">
<text class="uni-calendar__weeks-day-text">日</text>
</view>
<view class="uni-calendar__weeks-day">
<text class="uni-calendar__weeks-day-text">一</text>
</view>
<view class="uni-calendar__weeks-day">
<text class="uni-calendar__weeks-day-text">二</text>
</view>
<view class="uni-calendar__weeks-day">
<text class="uni-calendar__weeks-day-text">三</text>
</view>
<view class="uni-calendar__weeks-day">
<text class="uni-calendar__weeks-day-text">四</text>
</view>
<view class="uni-calendar__weeks-day">
<text class="uni-calendar__weeks-day-text">五</text>
</view>
<view class="uni-calendar__weeks-day">
<text class="uni-calendar__weeks-day-text">六</text>
</view>
</view>
<view class="uni-calendar__weeks" v-for="(item,weekIndex) in weeks" :key="weekIndex">
<view class="uni-calendar__weeks-item" v-for="(weeks,weeksIndex) in item" :key="weeksIndex">
<calendar-item :weeks="weeks" :calendar="calendar" :selected="selected" :lunar="lunar" @change="choiceDate"></calendar-item>
</view>
</view>
</view>
</view>
<text class="uni-calendar__backtoday" @click="backtoday">回到今天</text>
</view>
</template>
<script>
import Calendar from './util.js';
import calendarItem from './uni-calendar-item.vue'
/**
* 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
},
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
},
allChange: {
type: Boolean,
default: false
}
},
data() {
return {
show: false,
weeks: [],
calendar: {},
nowDate: '',
aniMaskShow: false
}
},
watch: {
date(newVal) {
this.cale.setDate(newVal)
this.init(this.cale.selectDate.fullDate)
},
startDate(val){
this.cale.resetSatrtDate(val)
},
endDate(val){
this.cale.resetEndDate(val)
},
selected(newVal) {
this.cale.setSelectInfo(this.nowDate.fullDate, newVal)
this.weeks = this.cale.weeks
}
},
created() {
// 获取日历方法实例
this.cale = new Calendar({
// date: new Date(),
selected: this.selected,
startDate: this.startDate,
endDate: this.endDate,
range: this.range,
})
// 选中某一天
this.cale.setDate(this.date)
this.init(this.cale.selectDate.fullDate)
// this.setDay
},
methods: {
// 取消穿透
clean() {},
bindDateChange(e) {
const value = e.detail.value + '-1'
this.cale.setDate(value)
this.init(value)
if(this.allChange) {
this.monthSwitch()
}
},
/**
* 初始化日期显示
* @param {Object} date
*/
init(date) {
this.weeks = this.cale.weeks
this.nowDate = this.calendar = this.cale.getInfo(date)
},
/**
* 打开日历弹窗
*/
open() {
// 弹窗模式并且清理数据
if (this.clearDate && !this.insert) {
this.cale.cleanMultipleStatus()
this.cale.setDate(this.date)
this.init(this.cale.selectDate.fullDate)
}
this.show = true
this.$nextTick(() => {
setTimeout(() => {
this.aniMaskShow = true
}, 50)
})
},
/**
* 关闭日历弹窗
*/
close() {
this.aniMaskShow = false
this.$nextTick(() => {
setTimeout(() => {
this.show = false
this.$emit('close')
}, 300)
})
},
/**
* 确认按钮
*/
confirm() {
this.setEmit('confirm')
this.close()
},
/**
* 变化触发
*/
change() {
if (!this.insert) return
this.setEmit('change')
},
/**
* 选择月份触发
*/
monthSwitch() {
let {
year,
month
} = this.nowDate
this.$emit('monthSwitch', {
year,
month: Number(month)
})
},
/**
* 派发事件
* @param {Object} name
*/
setEmit(name) {
let {
year,
month,
date,
fullDate,
lunar,
extraInfo
} = this.calendar
this.$emit(name, {
range: this.cale.multipleStatus,
year,
month,
date,
fulldate: fullDate,
lunar,
extraInfo: extraInfo || {}
})
},
/**
* 选择天触发
* @param {Object} weeks
*/
choiceDate(weeks) {
if (weeks.disable) return
this.calendar = weeks
// 设置多选
this.cale.setMultiple(this.calendar.fullDate)
this.weeks = this.cale.weeks
this.change()
},
/**
* 回到今天
*/
backtoday() {
let date = this.cale.getDate(new Date()).fullDate
this.cale.setDate(date)
this.init(date)
this.change()
if(this.allChange) {
this.monthSwitch()
}
},
/**
* 上个月
*/
pre() {
const preDate = this.cale.getDate(this.nowDate.fullDate, -1, 'month').fullDate
this.setDate(preDate)
this.monthSwitch()
},
/**
* 下个月
*/
next() {
const nextDate = this.cale.getDate(this.nowDate.fullDate, +1, 'month').fullDate
this.setDate(nextDate)
this.monthSwitch()
},
/**
* 设置日期
* @param {Object} date
*/
setDate(date) {
this.cale.setDate(date)
this.weeks = this.cale.weeks
this.nowDate = this.cale.getInfo(date)
}
}
}
</script>
<style lang="scss" scoped>
.uni-calendar {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
}
.uni-calendar__mask {
position: fixed;
bottom: 0;
top: 0;
left: 0;
right: 0;
background-color: $uni-bg-color-mask;
transition-property: opacity;
transition-duration: 0.3s;
opacity: 0;
/* #ifndef APP-NVUE */
z-index: 99;
/* #endif */
}
.uni-calendar--mask-show {
opacity: 1
}
.uni-calendar--fixed {
position: fixed;
bottom: 0;
left: 0;
right: 0;
transition-property: transform;
transition-duration: 0.3s;
transform: translateY(460px);
/* #ifndef APP-NVUE */
z-index: 99;
/* #endif */
}
.uni-calendar--ani-show {
transform: translateY(0);
}
.uni-calendar__content {
background-color: #fff;
}
.uni-calendar__header {
position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: center;
align-items: center;
height: 50px;
}
.uni-calendar--fixed-top {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: space-between;
border-top-color: $uni-border-color;
border-top-style: solid;
border-top-width: 1px;
}
.uni-calendar--fixed-width {
width: 50px;
// padding: 0 15px;
}
.uni-calendar__backtoday {
background:linear-gradient(135deg,rgba(255,236,73,1) 0%,rgba(255,211,30,1) 100%);
height: 72rpx;
line-height: 72rpx;
border-radius: 36rpx;
width: 180rpx;
text-align: center;
color: #21232C;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
font-size: 30rpx;
margin: 26rpx auto 0;
}
.uni-calendar__header-text {
text-align: center;
width: 100px;
font-size: 36rpx;
color: #000;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
}
.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>
components/uni-calendar/util.js 0 → 100644
View file @ b4684456
import CALENDAR from './calendar.js'
class Calendar {
constructor({
date,
selected,
startDate,
endDate,
range
} = {}) {
// 当前日期
this.date = this.getDate(new Date()) // 当前初入日期
// 打点信息
this.selected = selected || [];
// 范围开始
this.startDate = startDate
// 范围结束
this.endDate = endDate
this.range = range
// 多选状态
this.cleanMultipleStatus()
// 每周日期
this.weeks = {}
// this._getWeek(this.date.fullDate)
}
/**
* 设置日期
* @param {Object} date
*/
setDate(date) {
this.selectDate = this.getDate(date)
this._getWeek(this.selectDate.fullDate)
}
/**
* 清理多选状态
*/
cleanMultipleStatus() {
this.multipleStatus = {
before: '',
after: '',
data: []
}
}
/**
* 重置开始日期
*/
resetSatrtDate(startDate) {
// 范围开始
this.startDate = startDate
}
/**
* 重置结束日期
*/
resetEndDate(endDate) {
// 范围结束
this.endDate = endDate
}
/**
* 获取任意时间
*/
getDate(date, AddDayCount = 0, str = 'day') {
if (!date) {
date = new Date()
}
if (typeof date !== 'object') {
date = date.replace(/-/g, '/')
}
const dd = new Date(date)
switch (str) {
case 'day':
dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期
break
case 'month':
if (dd.getDate() === 31) {
dd.setDate(dd.getDate() + AddDayCount)
} else {
dd.setMonth(dd.getMonth() + AddDayCount) // 获取AddDayCount天后的日期
}
break
case 'year':
dd.setFullYear(dd.getFullYear() + AddDayCount) // 获取AddDayCount天后的日期
break
}
const y = dd.getFullYear()
const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
return {
fullDate: y + '-' + m + '-' + d,
year: y,
month: m,
date: d,
day: dd.getDay()
}
}
/**
* 获取上月剩余天数
*/
_getLastMonthDays(firstDay, full) {
let dateArr = []
for (let i = firstDay; i > 0; i--) {
const beforeDate = new Date(full.year, full.month - 1, -i + 1).getDate()
dateArr.push({
date: beforeDate,
month: full.month - 1,
lunar: this.getlunar(full.year, full.month - 1, beforeDate),
disable: true
})
}
return dateArr
}
/**
* 获取本月天数
*/
_currentMonthDys(dateData, full) {
let dateArr = []
let fullDate = this.date.fullDate
for (let i = 1; i <= dateData; i++) {
let isinfo = false
let nowDate = full.year + '-' + (full.month < 10 ?
full.month : full.month) + '-' + (i < 10 ?
'0' + i : i)
// 是否今天
let isDay = fullDate === nowDate
// 获取打点信息
let info = this.selected && this.selected.find((item) => {
if (this.dateEqual(nowDate, item.date)) {
return item
}
})
// 日期禁用
let disableBefore = true
let disableAfter = true
if (this.startDate) {
let dateCompBefore = this.dateCompare(this.startDate, fullDate)
disableBefore = this.dateCompare(dateCompBefore ? this.startDate : fullDate, nowDate)
}
if (this.endDate) {
let dateCompAfter = this.dateCompare(fullDate, this.endDate)
disableAfter = this.dateCompare(nowDate, dateCompAfter ? this.endDate : fullDate)
}
let multiples = this.multipleStatus.data
let checked = false
let multiplesStatus = -1
if (this.range) {
if (multiples) {
multiplesStatus = multiples.findIndex((item) => {
return this.dateEqual(item, nowDate)
})
}
if (multiplesStatus !== -1) {
checked = true
}
}
let data = {
fullDate: nowDate,
year: full.year,
date: i,
multiple: this.range ? checked : false,
beforeMultiple: this.dateEqual(this.multipleStatus.before, nowDate),
afterMultiple: this.dateEqual(this.multipleStatus.after, nowDate),
month: full.month,
lunar: this.getlunar(full.year, full.month, i),
disable: !disableBefore || !disableAfter,
isDay
}
if (info) {
data.extraInfo = info
}
dateArr.push(data)
}
return dateArr
}
/**
* 获取下月天数
*/
_getNextMonthDays(surplus, full) {
let dateArr = []
for (let i = 1; i < surplus + 1; i++) {
dateArr.push({
date: i,
month: Number(full.month) + 1,
lunar: this.getlunar(full.year, Number(full.month) + 1, i),
disable: true
})
}
return dateArr
}
/**
* 获取当前日期详情
* @param {Object} date
*/
getInfo(date) {
if (!date) {
date = new Date()
}
const dateInfo = this.canlender.find(item => item.fullDate === this.getDate(date).fullDate)
return dateInfo
}
/**
* 比较时间大小
*/
dateCompare(startDate, endDate) {
// 计算截止时间
startDate = new Date(startDate.replace('-', '/').replace('-', '/'))
// 计算详细项的截止时间
endDate = new Date(endDate.replace('-', '/').replace('-', '/'))
if (startDate <= endDate) {
return true
} else {
return false
}
}
/**
* 比较时间是否相等
*/
dateEqual(before, after) {
// 计算截止时间
before = new Date(before.replace('-', '/').replace('-', '/'))
// 计算详细项的截止时间
after = new Date(after.replace('-', '/').replace('-', '/'))
if (before.getTime() - after.getTime() === 0) {
return true
} else {
return false
}
}
/**
* 获取日期范围内所有日期
* @param {Object} begin
* @param {Object} end
*/
geDateAll(begin, end) {
var arr = []
var ab = begin.split('-')
var ae = end.split('-')
var db = new Date()
db.setFullYear(ab[0], ab[1] - 1, ab[2])
var de = new Date()
de.setFullYear(ae[0], ae[1] - 1, ae[2])
var unixDb = db.getTime() - 24 * 60 * 60 * 1000
var unixDe = de.getTime() - 24 * 60 * 60 * 1000
for (var k = unixDb; k <= unixDe;) {
k = k + 24 * 60 * 60 * 1000
arr.push(this.getDate(new Date(parseInt(k))).fullDate)
}
return arr
}
/**
* 计算阴历日期显示
*/
getlunar(year, month, date) {
return CALENDAR.solar2lunar(year, month, date)
}
/**
* 设置打点
*/
setSelectInfo(data, value) {
this.selected = value
this._getWeek(data)
}
/**
* 获取多选状态
*/
setMultiple(fullDate) {
let {
before,
after
} = this.multipleStatus
if (!this.range) return
if (before && after) {
this.multipleStatus.before = ''
this.multipleStatus.after = ''
this.multipleStatus.data = []
} else {
if (!before) {
this.multipleStatus.before = fullDate
} else {
this.multipleStatus.after = fullDate
if (this.dateCompare(this.multipleStatus.before, this.multipleStatus.after)) {
this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus.after);
} else {
this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus.before);
}
}
}
this._getWeek(fullDate)
}
/**
* 获取每周数据
* @param {Object} dateData
*/
_getWeek(dateData) {
const {
fullDate,
year,
month,
date,
day
} = this.getDate(dateData)
let firstDay = new Date(year, month - 1, 1).getDay()
let currentDay = new Date(year, month, 0).getDate()
let dates = {
lastMonthDays: this._getLastMonthDays(firstDay, this.getDate(dateData)), // 上个月末尾几天
currentMonthDys: this._currentMonthDys(currentDay, this.getDate(dateData)), // 本月天数
nextMonthDays: [], // 下个月开始几天
weeks: []
}
let canlender = []
const surplus = 42 - (dates.lastMonthDays.length + dates.currentMonthDys.length)
dates.nextMonthDays = this._getNextMonthDays(surplus, this.getDate(dateData))
canlender = canlender.concat(dates.lastMonthDays, dates.currentMonthDys, dates.nextMonthDays)
let weeks = {}
// 拼接数组 上个月开始几天 + 本月天数+ 下个月开始几天
for (let i = 0; i < canlender.length; i++) {
if (i % 7 === 0) {
weeks[parseInt(i / 7)] = new Array(7)
}
weeks[parseInt(i / 7)][i % 7] = canlender[i]
}
this.canlender = canlender
this.weeks = weeks
}
//静态方法
// static init(date) {
// if (!this.instance) {
// this.instance = new Calendar(date);
// }
// return this.instance;
// }
}
export default Calendar
manifest.json
View file @ b4684456
......@@ -62,7 +62,7 @@
"disableHostCheck": true,
"proxy": {
"/uni/api": {
"target": "http://39.96.85.45:9093/",
"target": "http://10.0.0.52:6564/",
"changeOrigin": true,
"secure": false,
"pathRewrite": {
......
pages.json
View file @ b4684456
{
"pages": [
{
"path": "pages/home/home",
"style": {
"navigationBarTitleText": "首页-谛宝多多商城"
}
},
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "白条专区-谛宝多多商城"
}
},
{
"path": "pages/category/category",
"style": {
"enablePullDownRefresh": true,
"navigationBarTitleText": "白条分类-谛宝多多商城"
}
},
{
"path": "pages/web/web",
"style": {
"navigationBarTitleText": "白条专区-谛宝多多商城"
}
},
{
"path": "pages/detail/detail",
"style": {
"navigationBarTitleText": "白条详情-谛宝多多商城"
}
},
{
"path": "pages/searchhistory/searchhistory",
"style": {
"navigationBarTitleText": "搜索历史-谛宝多多商城"
}
},
{
"path": "pages/search/search",
"style": {
"navigationBarTitleText": "商品搜索-谛宝多多商城"
}
},
{
"path": "pages/financial/financialstage",
"style": {
"navigationBarTitleText": "金融分期-谛宝多多商城"
}
},
{
"path": "pages/apply/choosetype",
"style": {
"navigationBarTitleText": "金融分期-谛宝多多商城"
}
},
{
"path": "pages/apply/applypage1",
"style": {
"navigationBarTitleText": "填写资料-谛宝多多商城"
}
},
{
"path": "pages/apply/applypage2",
"style": {
"navigationBarTitleText": "填写资料-谛宝多多商城"
}
},
{
"path": "pages/apply/applypage3",
"style": {
"navigationBarTitleText": "填写资料-谛宝多多商城"
}
},
{
"path": "pages/signcontract/signcontract",
"style": {
"navigationBarTitleText": "签署合同-谛宝多多商城"
}
},
{
"path": "pages/installment/installmentinfo",
"style": {
"navigationBarTitleText": "商品详情-谛宝多多商城"
}
},
{
"path": "pages/refuse/refuse",
"style": {
"navigationBarTitleText": "驳回原因-谛宝多多商城"
}
},
{
"path": "pages/checkstand/checkstand",
"style": {
"navigationBarTitleText": "谛宝收银台-谛宝多多商城"
}
},
{
"path": "pages/checkstand/refund",
"style": {
"navigationBarTitleText": "退定金-谛宝多多商城"
}
},
{
"path": "pages/certification/certification",
"style": {
"navigationBarTitleText": "金融分期-谛宝多多商城"
}
},
{
"path": "pages/wxpay/wxpay",
"style": {
"navigationBarTitleText": "微信支付-谛宝多多商城"
}
},
{
"path": "pages/yuepay/yuepay",
"style": {
"navigationBarTitleText": "余额支付-谛宝多多商城"
}
},
{
"path": "pages/payresult/payresult",
"style": {
"navigationBarTitleText": "支付状态-谛宝多多商城"
}
},
{
"path": "pages/logistics/logistics",
"style": {
"navigationBarTitleText": "物流查询-谛宝多多商城"
}
},
{
"path": "pages/setaccount/setaccount",
"style": {
"navigationBarTitleText": "账号设置-谛宝多多商城"
}
},
{
"path": "pages/setinfo/setinfo",
"style": {
"navigationBarTitleText": "账号设置-谛宝多多商城"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "谛宝多多商城",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#fbfbfb",
"app-plus": {"titleNView": false}
}
{
"pages": [{
"path": "pages/home/home",
"style": {
"navigationBarTitleText": "首页-谛宝多多商城"
}
},
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "白条专区-谛宝多多商城"
}
},
{
"path": "pages/category/category",
"style": {
"enablePullDownRefresh": true,
"navigationBarTitleText": "白条分类-谛宝多多商城"
}
},
{
"path": "pages/web/web",
"style": {
"navigationBarTitleText": "白条专区-谛宝多多商城"
}
},
{
"path": "pages/detail/detail",
"style": {
"navigationBarTitleText": "白条详情-谛宝多多商城"
}
},
{
"path": "pages/searchhistory/searchhistory",
"style": {
"navigationBarTitleText": "搜索历史-谛宝多多商城"
}
},
{
"path": "pages/search/search",
"style": {
"navigationBarTitleText": "商品搜索-谛宝多多商城"
}
},
{
"path": "pages/financial/financialstage",
"style": {
"navigationBarTitleText": "金融分期-谛宝多多商城"
}
},
{
"path": "pages/apply/choosetype",
"style": {
"navigationBarTitleText": "金融分期-谛宝多多商城"
}
},
{
"path": "pages/apply/applypage1",
"style": {
"navigationBarTitleText": "填写资料-谛宝多多商城"
}
},
{
"path": "pages/apply/applypage2",
"style": {
"navigationBarTitleText": "填写资料-谛宝多多商城"
}
},
{
"path": "pages/apply/applypage3",
"style": {
"navigationBarTitleText": "填写资料-谛宝多多商城"
}
},
{
"path": "pages/signcontract/signcontract",
"style": {
"navigationBarTitleText": "签署合同-谛宝多多商城"
}
},
{
"path": "pages/installment/installmentinfo",
"style": {
"navigationBarTitleText": "商品详情-谛宝多多商城"
}
},
{
"path": "pages/refuse/refuse",
"style": {
"navigationBarTitleText": "驳回原因-谛宝多多商城"
}
},
{
"path": "pages/checkstand/checkstand",
"style": {
"navigationBarTitleText": "谛宝收银台-谛宝多多商城"
}
},
{
"path": "pages/checkstand/refund",
"style": {
"navigationBarTitleText": "退定金-谛宝多多商城"
}
},
{
"path": "pages/certification/certification",
"style": {
"navigationBarTitleText": "金融分期-谛宝多多商城"
}
},
{
"path": "pages/wxpay/wxpay",
"style": {
"navigationBarTitleText": "微信支付-谛宝多多商城"
}
},
{
"path": "pages/yuepay/yuepay",
"style": {
"navigationBarTitleText": "余额支付-谛宝多多商城"
}
},
{
"path": "pages/payresult/payresult",
"style": {
"navigationBarTitleText": "支付状态-谛宝多多商城"
}
},
{
"path": "pages/logistics/logistics",
"style": {
"navigationBarTitleText": "物流查询-谛宝多多商城"
}
},
{
"path": "pages/setaccount/setaccount",
"style": {
"navigationBarTitleText": "账号设置-谛宝多多商城"
}
},
{
"path": "pages/setinfo/setinfo",
"style": {
"navigationBarTitleText": "账号设置-谛宝多多商城"
}
},
{
"path": "pages/signin/signin",
"style": {
"navigationBarTitleText": "签到-谛宝多多商城"
}
},
{
"path": "pages/integralRecord/integralRecord",
"style": {
"navigationBarTitleText": "积分记录-谛宝多多商城"
}
},
{
"path": "pages/levelStrategy/levelStrategy",
"style": {
"navigationBarTitleText": "升级攻略-谛宝多多商城"
}
},
{
"path": "pages/vipCenter/vipCenter",
"style": {
"navigationBarTitleText": "会员中心-谛宝多多商城"
}
},
{
"path": "pages/signRecord/signRecord",
"style": {
"navigationBarTitleText": "签到记录-谛宝多多商城"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "谛宝多多商城",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#fbfbfb",
"app-plus": {
"titleNView": false
}
}
}
pages/integralRecord/integralRecord.vue 0 → 100644
View file @ b4684456
<template>
<view class="main">
<view class="return_icon"><view class="eosfont">&#xe622;</view></view>
<view class="card">
<view>可用积分</view>
<view>{{integral}}</view>
</view>
<view class="tabs">
<text class="tab_item" :class="{act: i_type === '1'}" @click="tabChange('1')">收入</text>
<text class="tab_item" :class="{act: i_type === '2'}" @click="tabChange('2')">支出</text>
<text class="tab_item" :class="{act: i_type === '3'}" @click="tabChange('3')">过期</text>
</view>
<view class="list" v-if="i_type === '1'">
<scroll-view
v-if="inData.length"
scroll-y
@scrolltolower="getData(i_type, inCurrent)"
:show-scrollbar="false"
style="height: 100%"
>
<view class="list_item" v-for="(item, index) in inData" :key="index">
<view>
<view class="title1">{{item.remark}}</view>
<view class="title2">{{item.add_time}}</view>
</view>
<view class="integral">+{{item.point}}</view>
</view>
<uni-load-more :status="inLoadingType"></uni-load-more>
</scroll-view>
<view v-else class="none_data">暂无数据</view>
</view>
<view class="list" v-if="i_type === '2'">
<scroll-view
v-if="outData.length"
scroll-y
@scrolltolower="getData(i_type, inCurrent)"
:show-scrollbar="false"
style="height: 100%"
>
<view class="list_item" v-for="(item, index) in outData" :key="index">
<view>
<view class="title1">{{item.remark}}</view>
<view class="title2">{{item.add_time}}</view>
</view>
<view class="integral">-{{item.point}}</view>
</view>
</scroll-view>
<view v-else class="none_data">暂无数据</view>
</view>
<view class="list" v-if="i_type === '3'">
<view class="none_data">暂无数据</view>
</view>
</view>
</template>
<script>
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
export default {
data() {
return {
i_type: '1',
integral: 0,
inData: [],
outData: [],
inCurrent: 1,
outCurrent: 1,
inFlag: true,
outFlag: true,
inLoadingType: 'more',
outLoadingType: 'more'
}
},
onLoad() {
this.getData('1', 1);
},
methods: {
tabChange(type) {
if(type === this.i_type) {
return
}
this.i_type = type;
if(type === '3') {
return
}
let current = '';
if(type === '1' && !this.inData.length) {
current = this.inCurrent;
this.getData(type, current);
} else if (type === '2' && !this.outData.length) {
current = this.outCurrent
this.getData(type, current);
}
},
getData(type, current) {
if(!this.inFlag || !this.outFlag) {
return
}
if(type === '1') {
this.inLoadingType = 'loading';
} else {
this.outLoadingType = 'loading';
}
uni.request({
url: '/uni/api/integral/GetMyIntegral',
data: {
current: current,
i_type: type,
page_size: 10
},
method: 'post',
dataType: 'json',
success: (res) => {
if(res.data.code === 0) {
if(this.i_type === '1') {
if(res.data.data.integral_list instanceof Array) {
this.inData = this.inData.concat(res.data.data.integral_list);
const { total, page_size } = res.data.page;
const n = Math.ceil(total/page_size);
if(n > this.inCurrent) {
this.inCurrent += 1;
} else {
this.inFlag = false;
this.inLoadingType = 'nomore';
}
}
} else {
if(res.data.data.integral_list instanceof Array) {
this.outData = this.outData.concat(res.data.data.integral_list);
const { total, page_size } = res.data.page;
const n = Math.ceil(total/page_size);
if(n > this.outCurrent) {
this.outCurrent += 1;
} else {
this.outFlag = false;
this.outLoadingType = 'nomore';
}
}
}
this.integral = res.data.data.integral || 0;
}
}
})
}
},
components: {
uniLoadMore
}
}
</script>
<style lang="less" scoped>
.main {
overflow: hidden;
padding: 0 24rpx;
.return_icon {
view {
width: 56rpx;
height: 56rpx;
border-radius: 50%;
background-color: rgba(33,33,33,0.5);
color: #fff;
font-size: 32rpx;
text-align: center;
line-height: 56rpx;
margin-top: 24rpx;
}
}
.card {
height: 216rpx;
border-radius: 16rpx;
background:linear-gradient(135deg,rgba(255,236,73,1) 0%,rgba(255,211,30,1) 100%);
box-shadow:0px 8rpx 24rpx 0px rgba(255,219,43,0.5);
padding: 0 30rpx;
overflow: hidden;
color: #21232C;
margin: 24rpx auto 40rpx;
view:nth-of-type(1) {
font-size: 30rpx;
line-height: 42rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
margin-top: 36rpx;
}
view:nth-of-type(2) {
margin-top: 8rpx;
font-family:Avenir-Heavy,Avenir;
font-weight:800;
font-size: 80rpx;
line-height: 110rpx;
}
}
.tabs {
display: flex;
align-items: center;
justify-content: center;
.tab_item {
height: 60rpx;
line-height: 60rpx;
text-align: center;
color: #333;
font-size: 30rpx;
width: 100rpx;
}
.act {
background:linear-gradient(135deg,rgba(255,236,73,1) 0%,rgba(255,211,30,1) 100%);
border-radius:30px;
color: #21232C;
}
.tab_item:nth-of-type(2) {
margin: 0 30rpx;
}
}
.list {
margin-top: 40rpx;
height: calc(100vh - 484rpx);
.list_item {
height: 120rpx;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #ececec;
.title1 {
color: #000;
font-size: 30rpx;
height: 42rpx;
line-height: 42rpx;
margin-bottom: 2rpx;
}
.title2 {
color: #979797;
font-size: 26rpx;
height: 36rpx;
line-height: 36rpx;
}
.integral {
color: #FF6600;
font-size: 36rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
}
}
}
.none_data {
text-align: center;
}
}
</style>
pages/levelStrategy/levelStrategy.vue 0 → 100644
View file @ b4684456
<template>
<view class="main">
<TopBar title="升级攻略" titleColor="#fff" bgColor="#21232C" />
<view class="question">
<text></text>
<text>账户等级越高有什么作用？</text>
</view>
<view class="answer">
<view class="item"><text>a.</text>等级越高，可享受的权益越多</view>
<view class="item"><text>b.</text>等级越高，特定商品可享受的优惠力度越大</view>
</view>
<view class="question">
<text></text>
<text>如何提升账户等级？</text>
</view>
<view class="answer">
<view class="item"><text>a.</text>每日登录可获取积分，用来提升账户等级</view>
<view class="item"><text>b.</text>每次消费再确认收货之后可以获得购物积分，可以提
升账户等级</view>
<view class="item"><text>c.</text>推荐新用户注册，新用户账号审核通过后推荐人可获
取积分，提升等级</view>
<view class="item"><text>d.</text>由谛宝多多官方规定的其它方式</view>
</view>
<view class="diamond"></view>
</view>
</template>
<script>
import TopBar from '@/components/TopBar/TopBar.vue';
export default {
data() {
return {
}
},
components: {
TopBar
}
}
</script>
<style lang="less">
.main {
height: 100vh;
padding: 88rpx 24rpx 0;
background:linear-gradient(141deg,rgba(33,35,44,1) 0%,rgba(45,50,57,1) 100%);
box-sizing: border-box;
.question {
color: #F6CA8D;
font-size: 40rpx;
margin-top: 40rpx;
}
.answer {
padding: 30rpx;
background-color: #21232C;
font-size: 26rpx;
color: #C3B4A0;
margin: 24rpx auto 60rpx;
border-radius: 16rpx;
.item {
line-height: 36rpx;
margin-bottom: 20rpx;
display: flex;
}
.item:last-child {
margin-bottom: 0;
}
}
.diamond {
width: 304rpx;
height: 256rpx;
background: url('https://dbc-static.oss-cn-beijing.aliyuncs.com/static/dia.png') no-repeat;
background-size: 100% 100%;
position: absolute;
right: 0;
bottom: 0;
}
}
</style>
pages/signRecord/signRecord.vue 0 → 100644
View file @ b4684456
<template>
<view class="main">
<view class="card">
<view class="return_icon"><view class="eosfont">&#xe622;</view></view>
<view class="days">{{sign_days_continues}}</view>
<view class="title">连续签到</view>
</view>
<view class="calendar">
<uni-calendar
:selected="signList"
:insert="true"
:allChange="true"
@monthSwitch="monthSwitch"
/>
</view>
</view>
</template>
<script>
import uniCalendar from '@/components/uni-calendar/uni-calendar.vue'
export default {
data() {
return {
signList: [],
sign_id: '',
mon: '',
sign_days_continues: 0
}
},
onLoad(options) {
this.sign_id = options.sign_id;
this.sign_days_continues = options.sign_days_continues;
let year = new Date().getFullYear(),
month = new Date().getMonth() + 1;
month = month < 10 ? '0'+month : month+'';
this.mon = `${year}-${month}`;
this.getRecord(`${year}-${month}`, options.sign_id);
},
methods: {
getRecord(month, sign_id) {
uni.request({
url: '/uni/api/sign/GetMySignList',
data: {
mon: month,
sign_id: sign_id
},
method: 'post',
dataType: 'json',
success: (res) => {
if(res.data.code === 0) {
this.signList = res.data.data.sign_list;
}
}
});
},
monthSwitch(e) {
let {year, month} = e;
if(month < 10) {
month = '0'+month;
}
let mon = `${year}-${month}`;
this.getRecord(mon, this.sign_id);
}
},
components: {
uniCalendar
}
}
</script>
<style lang="less" scoped>
.main {
.card {
height: 360rpx;
background:linear-gradient(135deg,rgba(255,236,73,1) 0%,rgba(255,211,30,1) 100%);
overflow: hidden;
.return_icon {
view {
width: 56rpx;
height: 56rpx;
border-radius: 50%;
background-color: rgba(33,33,33,0.5);
color: #fff;
font-size: 32rpx;
text-align: center;
line-height: 56rpx;
margin: 24rpx 0 0 20rpx;
}
}
.days {
color: #000;
font-size: 80rpx;
line-height: 110rpx;
text-align: center;
margin: 8rpx auto 0;
font-family:Avenir-Heavy,Avenir;
font-weight:800;
}
.title {
font-size: 28rpx;
height: 40rpx;
line-height: 40rpx;
text-align: center;
opacity: 0.6;
}
}
.calendar {
border-radius: 24rpx 24rpx 0 0;
margin-top: -80rpx;
}
}
</style>
pages/signin/signin.vue 0 → 100644
View file @ b4684456
<template>
<view class="main">
<view class="sign_top_card">
<view class="return_icon"><view class="eosfont">&#xe622;</view></view>
<view class="title">我的积分<text class="eosfont">&#xe608;</text></view>
<view class="integral">{{integral}}</view>
<view class="sign_tab">
<text class="title2">花积分：</text>
<text class="tab" style="margin-left: 0;">兑好礼</text>
<text class="tab">兑权益</text>
<text class="tab">支付抵扣</text>
</view>
</view>
<view class="content">
<view class="sign_content">
<view class="content_flex">
<text>签到领积分</text>
<text class="eosfont" @click="$jump(`/pages/signRecord/signRecord?sign_id=${sign_id}&sign_days_continues=${sign_days_continues}`,2)">我的签到记录&#xe744;</text>
</view>
<view class="days">
<view class="day_item" v-for="(item, index) in sign_list" :key="index">
<view class="item_bg" :class="{act: item.is_sign === '1'}">+{{item.point}}</view>
<view class="day">第{{index+1}}天</view>
</view>
</view>
<view class="sign_btn" @click="signin" v-if="is_sign_today === '0'"></view>
<view class="sign_btn_ed" v-else>今日已签到</view>
</view>
<view class="benefit_title">权益中心</view>
<view class="benefit_swiper">
<uni-swiper-dot :current="current" :info="grade_list" mode="round" :dotsStyles="{'bottom': 0,'width':3,'height':3,'backgroundColor':'#d8d8d8','border':'none','selectedBackgroundColor':'#FFCD00','selectedBorder':'none'}">
<swiper :autoplay="true" style="height:380rpx" @change="changeCurrent">
<swiper-item v-for="(item, index) in grade_list" :key="index" >
<view class="swiper_item">
<view class="benefit_item" v-for="(vo, key) in item" :key="key">{{vo.title}}</view>
</view>
</swiper-item>
</swiper>
</uni-swiper-dot>
</view>
<view class="tabBar">
<text class="tab_item act">精品推荐</text>
<!-- <text class="tab_item">200-400</text> -->
</view>
<view class="goods_box">
<view class="goods_item" v-for="(item, index) in integral_list" :key="index" @click="$jump(`${php}app=my_integral_goods&act=detail&id=${item.goods_id}&integral=${integral}`)">
<view>
<image class="goods_img" :src="item.goods_logo"></image>
<view class="goods_name">{{item.goods_name}}</view>
<view class="goods_price">{{item.goods_point}}积分</view>
</view>
</view>
</view>
</view>
<uni-popup ref="popup" type="center" :maskClick="true">
<view class='sign_dialog'>
<view class="dialog_title">连续签到<text>{{sign_days_continues}}</text>天</view>
<view class="dialog_tips">以7天为一个周期，中途断签则重新计算</view>
<view class="dialog_content">
<view class="day_item day_item2" v-for="(item, index) in sign_list" :key="index">
<view class="item_bg item_bg2" :class="{act: item.is_sign === '1'}">+{{item.point}}</view>
<view class="day">第{{index+1}}天</view>
</view>
<view class="dialog_btn" @click="signin">立即签到</view>
</view>
<text class="dialog_close" @click="close()">×</text>
</view>
</uni-popup>
<uni-popup ref="gift" type="center" :maskClick="false">
<view class="gift_dialog">
<view class="gift_title">获得奖励</view>
<view class="gift_days">成功连续签到<text>{{gift.continue_days}}</text>天</view>
<view class="gift_content">
<image class="gift_img" :src="gift.sign_goods_logo"></image>
<view class="gift_name">{{gift.sign_goods_name}}</view>
<view class="get_gift" @click="getGift">立即领取</view>
</view>
<text class="dialog_close" @click="closeGift()">×</text>
</view>
</uni-popup>
</view>
</template>
<script>
import uniSwiperDot from "@/components/uni-swiper-dot/uni-swiper-dot.vue";
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import { php } from '@/common/host.js';
export default {
data() {
return {
current: 0,
integral: 0,
grade_list: [],
integral_list: [],
sign_list: [],
is_sign_today: '0',
sign_days_continues: '0',
sign_id: '',
gift: {
continue_days: 0,
sign_goods_logo: '',
sign_goods_name: ''
},
php: php
}
},
onLoad() {
this.getData();
},
methods: {
changeCurrent(e) {
this.current = e.detail.current;
},
getData() {
uni.request({
url: '/uni/api/sign/GetSignIndex',
method: 'POST',
dataType: 'json',
data: {
max_price: '',
min_price: ''
},
success: (res) => {
if(res.data.code === 0) {
if(res.data.data.is_sign_today === '0') {
this.$refs.popup.open();
}
this.integral = res.data.data.integral;
this.integral_list = res.data.data.integral_list;
this.sign_list = res.data.data.sign_list;
this.is_sign_today = res.data.data.is_sign_today;
this.sign_days_continues = res.data.data.sign_days_continues;
this.sign_id = res.data.data.sign_id;
let arr = []
for(let i=0,j=res.data.data.grade_list.length;i<j;i+=8) {
arr.push(res.data.data.grade_list.slice(i,i+8));
}
this.grade_list = arr;
}
}
});
},
signin() {
uni.request({
url: '/uni/api/sign/Sign',
method: 'post',
data: {
sign_id: this.sign_id
},
dataType: 'json',
success: (res) => {
if(res.data.code === 0) {
uni.showToast({
title: '签到成功',
icon: 'none'
});
this.getData();
this.is_sign_today = '1';
this.$refs.popup.close();
if(res.data.data !== null) {
this.gift = res.data.data;
this.$refs.gift.open();
}
} else {
uni.showToast({
title: res.data.message,
icon: 'none'
});
}
}
})
},
close() {
this.$refs.popup.close();
},
closeGift() {
this.$refs.gift.close();
},
getGift() {
uni.request({
url: '/uni/api/sign/SignGoodsLog',
method: 'post',
data: {
sign_goods_logo: this.gift.sign_goods_logo,
sign_goods_name: this.gift.sign_goods_name,
sign_id: this.sign_id
},
dataType: 'json',
success: (res) => {
if(res.data.code === 0) {
this.$refs.gift.close();
uni.showToast({
title: '礼物已领取',
icon: 'none'
})
} else {
uni.showToast({
title: res.data.message,
icon: 'none'
})
}
}
})
}
},
components: {
uniSwiperDot,
uniPopup
}
}
</script>
<style lang="less" scoped>
.main {
background-color: #FBFBFB;
.sign_top_card {
height: 484rpx;
background: url('https://dbc-static.oss-cn-beijing.aliyuncs.com/static/3891593574352_.pic.jpg') no-repeat;
background-size: 100% 100%;
overflow: hidden;
padding: 0 24rpx;
.return_icon {
view {
width: 56rpx;
height: 56rpx;
border-radius: 50%;
background-color: rgba(33,33,33,0.5);
color: #fff;
font-size: 32rpx;
text-align: center;
line-height: 56rpx;
margin-top: 24rpx;
}
}
.title {
color: #21232C;
font-size: 30rpx;
line-height: 42rpx;
margin-top: 24rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
display: flex;
align-items: center;
text {
font-size: 12rpx;
}
}
.integral {
color: #21232C;
font-size: 80rpx;
font-family:Avenir-Heavy,Avenir;
font-weight:800;
line-height: 110rpx;
margin-top: 8rpx;
}
.sign_tab {
display: flex;
align-items: center;
margin-top: 24rpx;
.title2 {
font-size: 28rpx;
color: #21232C;
line-height: 40rpx;
margin-right: 8rpx;
}
.tab {
height: 48rpx;
line-height: 48rpx;
padding: 0 16rpx;
border-radius: 24rpx;
background-color: #FFE680;
box-shadow:0px 4px 40px 0px rgba(0,0,0,0.04);
color: #4E3F00;
font-size: 26rpx;
margin-left: 20rpx;
}
}
}
.content {
position: relative;
top: -128rpx;
}
.sign_content {
width: 702rpx;
height: 396rpx;
background: #fff;
border-radius: 16rpx;
margin: 0 auto;
overflow: hidden;
box-shadow:0px 4px 16px 0px rgba(0,0,0,0.04);
padding: 0 26rpx;
box-sizing: border-box;
.content_flex {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 24rpx;
text:nth-of-type(1) {
color: #000;
font-size: 40rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
line-height: 56rpx;
}
text:nth-of-type(2) {
color: #21232C;
font-size: 28rpx;
line-height: 40rpx;
}
}
.days {
display: flex;
justify-content: space-between;
align-items: center;
margin: 40rpx auto 30rpx;
}
.sign_btn {
width: 536rpx;
height: 100rpx;
line-height: 76rpx;
text-align: center;
border-radius: 38rpx;
background: url('https://dbc-static.oss-cn-beijing.aliyuncs.com/static/gifbtn.gif') no-repeat;
background-size: 100% 100%;
color: #21232C;
font-size: 30rpx;
margin: 0 auto;
}
.sign_btn_ed {
width: 520rpx;
height: 86rpx;
line-height: 76rpx;
text-align: center;
border-radius: 38rpx;
color: #FFD522;
font-size: 30rpx;
margin: 0 auto;
border: 2px solid #FFD623;
box-sizing: border-box;
}
}
.day_item {
.item_bg {
background: url('https://dbc-static.oss-cn-beijing.aliyuncs.com/static/3881593574115_.pic.jpg') no-repeat;
background-size: 100% 100%;
width: 72rpx;
height: 72rpx;
border-radius: 50%;
color: #BDBDBD;
font-size: 26rpx;
padding-top: 6rpx;
text-align: center;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
box-sizing: border-box;
}
.item_bg2 {
width: 96rpx;
height: 96rpx;
}
.act {
background: url('https://dbc-static.oss-cn-beijing.aliyuncs.com/static/3871593574111_.pic.jpg') no-repeat;
background-size: 100% 100%;
color: #9E7F00;
}
.day {
margin-top: 12rpx;
color: #979797;
font-size: 24rpx;
line-height: 34rpx;
text-align: center;
}
}
.day_item2 {
margin-right: 36rpx;
}
.day_item2:nth-of-type(4), .day_item2:last-child {
margin-right: 0;
}
.benefit_title {
color: #21232C;
font-size: 40rpx;
line-height: 56rpx;
height: 56rpx;
text-align: center;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
margin: 40rpx auto 32rpx;
}
.benefit_swiper {
width: 702rpx;
margin: 0 auto;
.swiper_item {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.benefit_item {
width: 160rpx;
height: 160rpx;
border-radius: 16rpx;
background-color: #FFF4C8;
margin-bottom: 16rpx;
font-size: 28rpx;
color: #CBA009;
line-height: 40rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
padding: 16rpx;
box-sizing: border-box;
}
}
}
.tabBar {
overflow-y: scroll;
width: 702rpx;
margin: 40rpx auto 24rpx;
white-space: nowrap;
.tab_item {
height: 52rpx;
line-height: 52rpx;
padding: 0 16rpx;
border-radius: 26rpx;
background-color: #F3F3F3;
color: #333333;
font-size: 28rpx;
margin-right: 30rpx;
}
.tab_item:last-child {
margin-right: 0;
}
.act {
background-color: #FFCD00;
font-size: 28rpx;
color: #000;
}
}
.tabBar::-webkit-scrollbar {
display: none;
}
.goods_box {
display: flex;
flex-wrap: wrap;
width: 702rpx;
margin: 0 auto;
.goods_item {
width: 224rpx;
height: 380rpx;
border-radius: 16rpx;
box-shadow:0px 4px 16px 0px rgba(0,0,0,0.04);
background-color: #fff;
margin-bottom: 16rpx;
overflow: hidden;
.goods_img {
width: 100%;
height: 224rpx;
}
.goods_name {
padding: 0 16rpx;
color: #21232C;
font-size: 26rpx;
line-height: 36rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.goods_price {
color: #FF6600;
font-size: 24rpx;
line-height: 34rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
margin-top: 16rpx;
padding: 0 16rpx;
}
}
.goods_item:nth-of-type(3n-1) {
margin: 0 14rpx;
}
}
.sign_dialog{
width: 586rpx;
height: 860rpx;
.dialog_title {
color: #fff;
font-size: 40rpx;
line-height: 56rpx;
display: flex;
align-items: center;
justify-content: center;
text {
color: #FFE034;
font-size: 80rpx;
margin: 0 20rpx;
}
}
.dialog_tips {
text-align: center;
font-size: 28rpx;
height: 40rpx;
line-height: 40rpx;
color: #fff;
opacity: 0.6;
margin-top: 12rpx;
}
.dialog_content {
width: 100%;
height: 532rpx;
border-radius: 40rpx;
background-color: #fff;
margin-top: 40rpx;
display: flex;
justify-content: center;
flex-wrap: wrap;
padding: 48rpx 0 0;
}
.dialog_btn {
width: 480rpx;
height: 76rpx;
line-height: 76rpx;
text-align: center;
background:linear-gradient(135deg,rgba(255,236,73,1) 0%,rgba(255,211,30,1) 100%);
border-radius: 38rpx;
color: #21232C;
font-size: 30rpx;
}
}
.dialog_close {
display: block;
width: 64rpx;
height: 64rpx;
border-radius: 50%;
border: 2px solid rgba(255,255,255,0.6);
box-sizing: border-box;
margin: 40rpx auto 0;
font-size: 44rpx;
text-align: center;
line-height: 48rpx;
color: #fff;
}
.gift_dialog {
.gift_title {
color: #FFE034;
font-size: 80rpx;
font-family:PingFangSC-Semibold,PingFang SC;
font-weight:600;
text-align: center;
line-height: 112rpx;
}
.gift_days {
font-size: 28rpx;
color: rgba(255,255,255,0.6);
text-align: center;
margin-bottom: 30rpx;
}
.gift_content {
width: 586rpx;
height: 532rpx;
border-radius: 24rpx;
background-color: #fff;
overflow: hidden;
.gift_img {
display: block;
width: 224rpx;
height: 224rpx;
margin: 76rpx auto 24rpx;
}
.gift_name {
text-align: center;
font-size: 30rpx;
line-height: 42rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
width: 80%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-bottom: 42rpx;
}
.get_gift {
width: 480rpx;
height: 76rpx;
line-height: 76rpx;
text-align: center;
border-radius: 38rpx;
background:linear-gradient(135deg,rgba(255,236,73,1) 0%,rgba(255,211,30,1) 100%);
color: #21232C;
font-size: 30rpx;
margin: 0 auto;
}
}
}
}
</style>
pages/vipCenter/vipCenter.vue 0 → 100644
View file @ b4684456
<template>
<view class="main">
<TopBar title="会员中心" bgColor="#2D3239" titleColor="#fff" />
<view class="top_bg">
<view class="swiper_content">
<swiper style="height: 284rpx;" @change="swiperChange">
<swiper-item v-for="(val, key) in member_list" :key="key" style="left: -30rpx;" :style="[key === index ? {'left':0} : null]">
<view class="swiper_card" :class="[{scale: key !== index}, `level${val.grade}`]" :style="[member_list.length === 1 ? {width: '100%'} : null]">
<text class="now_level">当前等级</text>
<view class="card_flex">
<image :src="val.portrait || $defaultPortrait"></image>
<view>
<view class="customer_name">{{val.user_name}}</view>
<view class="card_bar" v-if="val.growth_diff > 1">
<view class="process_bar"
:style="`width: ${Number(val.total_integral)*100/(Number(val.total_integral)+val.growth_diff).toFixed(2)}%`"></view>
</view>
<view class="diff" v-if="val.growth_diff > 1">{{val.total_integral}}/{{Number(val.total_integral)+val.growth_diff}} 升至{{member_list[1].grade_name}}</view>
</view>
</view>
<view class="card_bottom">
<text class="growth_diff" v-if="val.growth_diff !== 0">您距离下一等级还需{{val.growth_diff}}经验值</text>
<text v-else></text>
<view class="levelStrategy" @click="$jump('/pages/levelStrategy/levelStrategy' ,2)"><text class="picon" :class="`picon${val.grade}`"></text><text>升级攻略</text></view>
</view>
</view>
</swiper-item>
</swiper>
</view>
<view class="top_title">当前等级权益</view>
<view class="now_benefit" v-for="(val, key) in member_list" v-if="key === index" :key="key" :style="[heightFlag ? {'height': height+'rpx'} : null]">
<view class="benefit_item" v-for="(item, k) in val.grade_list" :key="k">
{{item.title}}
<text class="dia"></text>
</view>
</view>
<view class="collapse_btn" @click="moreBenefit()" v-if="moreFlag"><text v-if="!heightFlag">查看更多</text><text v-else>收起</text><text class="eosfont" v-if="!heightFlag">&#xe729;</text><text class="eosfont" v-else>&#xe728;</text></text></view>
</view>
<view class="more_bar">
<text class="text1">兑换中心</text>
<!-- <text class="text2">查看更多<text class="eosfont">&#xe608;</text></text> -->
</view>
<view class="goods_box">
<view class="goods_item" v-for="(item, index) in integral_list" :key="index" @click="$jump(`${php}app=my_integral_goods&act=detail&id=${item.goods_id}&integral=${member_list[0].integral}`)">
<image class="goods_img" :src="item.goods_logo"></image>
<text class="goods_name">{{item.goods_name}}</text>
<text class="goods_price">{{item.goods_point}}积分</text>
</view>
</view>
</view>
</template>
<script>
import TopBar from '@/components/TopBar/TopBar.vue';
import { php } from '@/common/host.js';
export default {
data() {
return {
height: 336,
heightFlag: false,
animationData: {},
integral_list: [],
member_list: [],
index: 0,
moreFlag: true,
php: php
}
},
onLoad() {
uni.request({
url: '/uni/api/member/get_member_index',
method: 'get',
dataType: 'json',
success: (res) => {
if(res.data.code === 0) {
this.integral_list = res.data.data.integral_list;
this.member_list = res.data.data.member_list;
this.changeHeight(res.data.data.member_list[0].grade_list, 0);
}
}
});
this.animation = uni.createAnimation();
},
methods: {
moreBenefit() {
this.heightFlag = !this.heightFlag;
},
changeHeight(data, index) {
this.index = index;
if(data.length > 8) {
this.moreFlag = true;
} else {
this.moreFlag = false;
}
let n = data.length % 4,
init = Math.ceil(data.length / 4);
this.height = init * 160 + (init - 1) * 16;
},
swiperChange(e) {
this.index = e.detail.current;
}
},
components: {
TopBar
}
}
</script>
<style lang="less" scoped>
.main {
padding: 88rpx 0 76rpx;
background-color: #FBFBFB;
.top_bg {
background-color: #2D3239;
overflow: hidden;
margin-top: -8rpx;
padding: 0 24rpx;
border-radius: 0 0 24rpx 24rpx;
}
.swiper_content {
margin-top: 16rpx;
height: 284rpx;
.scale {
height: 256rpx !important;
margin-top: 14rpx;
}
.swiper_card {
width: 640rpx;
height: 284rpx;
box-shadow:0px 8rpx 24rpx 0px rgba(255,219,43,0.2);
border-radius:16rpx;
position: relative;
overflow: hidden;
transition: all 0.5s;
.card_flex {
display: flex;
margin: 94rpx 0 0 30rpx;
image {
width: 92rpx;
height: 92rpx;
border-radius: 50%;
margin-right: 24rpx;
}
.customer_name {
color: #000000;
font-size: 28rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
height: 40rpx;
line-height: 40rpx;
}
.card_bar {
width: 200rpx;
height: 8rpx;
border-radius: 4rpx;
background-color: #FFF3B6;
margin: 8rpx 0 ;
overflow: hidden;
.process_bar {
background-color: #6E4C26;
height: 100%;
}
}
.diff {
color: rgba(0,0,0,0.7);
font-size: 24rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
height: 34rpx;
line-height: 34rpx;
}
}
.now_level {
width: 128rpx;
height: 40rpx;
line-height: 40rpx;
text-align: center;
border-radius: 20rpx 0 0 20rpx;
background-color: red;
color: #000000;
font-size: 24rpx;
position: absolute;
right: 0;
top: 24rpx;
background-color: rgba(255,255,255,0.3);
}
.card_bottom {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 64rpx;
line-height: 64rpx;
background-color: red;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24rpx;
box-sizing: border-box;
background-color: rgba(0,0,0,0.2);
color: rgba(255,255,255,0.8);
.levelStrategy {
font-size: 24rpx;
display: flex;
align-items: center;
.picon {
width: 36rpx;
height: 36rpx;
display: inline-block;
}
.picon1 {
background: url('https://dbc-static.oss-cn-beijing.aliyuncs.com/static/p1%403x.png') no-repeat;
background-size: 100% 100%;
}
.picon2 {
background: url('https://dbc-static.oss-cn-beijing.aliyuncs.com/static/p2%403x.png') no-repeat;
background-size: 100% 100%;
}
.picon3 {
background: url('https://dbc-static.oss-cn-beijing.aliyuncs.com/static/p3%403x.png') no-repeat;
background-size: 100% 100%;
}
.picon4 {
background: url('https://dbc-static.oss-cn-beijing.aliyuncs.com/static/p4%403x.png') no-repeat;
background-size: 100% 100%;
}
.picon5 {
background: url('https://dbc-static.oss-cn-beijing.aliyuncs.com/static/p5%403x.png') no-repeat;
background-size: 100% 100%;
}
}
.growth_diff {
font-size: 24rpx;
color: rgba(255,255,255,0.8);
}
}
}
.level1 {
background: url('https://dbc-static.oss-cn-beijing.aliyuncs.com/static/1%E9%9D%92%E9%93%9C.png') no-repeat;
background-size: 100% 100%;
}
.level2 {
background: url('https://dbc-static.oss-cn-beijing.aliyuncs.com/static/2%E7%99%BD%E9%93%B6.png') no-repeat;
background-size: 100% 100%;
}
.level3 {
background: url('https://dbc-static.oss-cn-beijing.aliyuncs.com/static/3%E9%BB%84%E9%87%91.png') no-repeat;
background-size: 100% 100%;
}
.level4 {
background: url('https://dbc-static.oss-cn-beijing.aliyuncs.com/static/4%E7%99%BD%E9%87%91.png') no-repeat;
background-size: 100% 100%;
}
.level5 {
background: url('https://dbc-static.oss-cn-beijing.aliyuncs.com/static/5%E9%92%BB%E7%9F%B3.png') no-repeat;
background-size: 100% 100%;
}
}
.top_title {
color: #D6A35D;
font-size: 40rpx;
height: 56rpx;
line-height: 56rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
position: relative;
margin-top: 40rpx;
}
.top_title:after {
width: 80rpx;
height: 6rpx;
border-radius: 4rpx;
background-color: #D6A35D;
content: '';
position: absolute;
left: 0;
bottom: -12rpx;
}
.now_benefit {
display: flex;
flex-wrap: wrap;
margin-top: 54rpx;
height: 336rpx;
overflow: hidden;
transition: height 0.3s;
.benefit_item {
width: 160rpx;
height: 160rpx;
background-color: rgba(0,0,0,0.5);
border-radius: 16rpx;
margin-bottom: 16rpx;
color: #F6CA8D;
font-size: 28rpx;
padding: 16rpx;
box-sizing: border-box;
position: relative;
overflow: hidden;
margin-left: 20rpx;
.dia {
position: absolute;
right: -10rpx;
bottom: -10rpx;
width: 60rpx;
height: 60rpx;
background: url('https://dbc-static.oss-cn-beijing.aliyuncs.com/static/dia.png') no-repeat;
background-size: 100% 100%;
}
}
.benefit_item:nth-of-type(4n-3) {
margin-left: 0;
}
}
.collapse_btn {
width: 408rpx;
height: 68rpx;
line-height: 64rpx;
text-align: center;
border-radius: 34rpx;
border: 2px solid #F6CA8D;
box-sizing: border-box;
color: #F6CA8D;
font-size: 28rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
margin: 24rpx auto 42rpx;
}
.more_bar {
width: 702rpx;
margin: 30rpx auto;
display: flex;
align-items: center;
justify-content: space-between;
.text1 {
font-size: 40rpx;
color: #21232C;
height: 56rpx;
line-height: 56rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
}
.text2 {
color: #333333;
font-size: 28rpx;
height: 40rpx;
line-height: 40rpx;
display: flex;
align-items: center;
text {
color: grey;
font-weight: lighter;
margin-left: 6rpx;
}
}
}
.goods_box {
width: 702rpx;
margin: 0 auto;
background-color: #fff;
padding: 0 24rpx 32rpx;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
overflow: hidden;
.goods_item {
width: 208rpx;
margin-top: 24rpx;
.goods_img {
width: 208rpx;
height: 208rpx;
border-radius: 16rpx;
}
.goods_name {
color: #21232C;
font-size: 26rpx;
line-height: 36rpx;
width: 100%;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.goods_price {
color: #C28F4B;
font-size: 28rpx;
height: 40rpx;
line-height: 40rpx;
}
}
.goods_item:nth-of-type(3n-1) {
margin: 24rpx 14rpx 0;
}
}
}
</style>
\ No newline at end of file
static/iconfont.css
View file @ b4684456
@font-face {font-family: "eosfont";
src: url('https://at.alicdn.com/t/font_1682539_q13x2nw5kqc.ttf') format('truetype');
@font-face {
font-family: "eosfont";
src: url('https://at.alicdn.com/t/font_1878093_g9p5eg1qexv.eot');
src: url('https://at.alicdn.com/t/font_1878093_g9p5eg1qexv.eot?#iefix') format('embedded-opentype'),
url('https://at.alicdn.com/t/font_1878093_g9p5eg1qexv.woff2') format('woff2'),
url('https://at.alicdn.com/t/font_1878093_g9p5eg1qexv.woff') format('woff'),
url('https://at.alicdn.com/t/font_1878093_g9p5eg1qexv.ttf') format('truetype'),
url('https://at.alicdn.com/t/font_1878093_g9p5eg1qexv.svg#iconfont') format('svg');
}
.eosfont {
font-family: "eosfont" !important;
font-style: normal;
}
.eosfont {
font-family: "eosfont" !important;
font-style: normal;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment