├── components ├── iconfont │ ├── iconfont.wxss │ ├── iconfont.json │ └── iconfont.js ├── d-button │ ├── index.json │ ├── index.wxml │ ├── index.less │ ├── index.js │ └── index.wxss ├── d-card │ ├── index.json │ ├── behaviors │ │ └── card-behavior.js │ ├── index.js │ ├── index.wxml │ ├── index.less │ └── index.wxss ├── d-empty │ ├── index.json │ ├── index.wxml │ ├── index.less │ ├── index.js │ └── index.wxss ├── d-notify │ ├── index.json │ ├── index.wxml │ ├── index.wxss │ ├── index.less │ └── index.js ├── d-switch │ ├── index.json │ ├── index.wxml │ ├── index.wxss │ ├── index.less │ └── index.js ├── d-dialog │ ├── index.json │ ├── index.wxml │ ├── index.js │ ├── index.wxss │ └── index.less ├── d-navigation │ ├── index.json │ ├── index.wxml │ ├── index.wxss │ ├── index.less │ └── index.js ├── d-picker │ ├── index.json │ ├── index.wxml │ ├── index.less │ ├── index.wxss │ └── index.js ├── d-placeholder │ ├── index.json │ ├── index.wxml │ ├── index.js │ ├── index.wxss │ └── index.less ├── d-popup │ ├── index.json │ ├── index.wxml │ ├── index.wxss │ ├── index.less │ └── index.js ├── d-spread-button │ ├── index.json │ ├── index.wxml │ ├── index.less │ ├── index.js │ └── index.wxss ├── d-cover-page │ ├── index.json │ ├── index.wxml │ ├── index.wxss │ ├── index.less │ └── index.js ├── d-date-picker │ ├── index.json │ ├── index.wxml │ ├── index.less │ └── index.wxss ├── d-list-picker │ ├── index.json │ ├── index.wxml │ ├── index.wxss │ ├── index.less │ └── index.js ├── d-checkbox-picker │ ├── index.json │ ├── index.wxml │ ├── index.less │ ├── index.wxss │ └── index.js └── d-orderbox-picker │ ├── index.json │ ├── index.wxml │ ├── index.less │ ├── index.wxss │ └── index.js ├── pages └── index │ ├── components │ └── line │ │ ├── index.json │ │ ├── index.less │ │ ├── index.wxml │ │ ├── index.js │ │ └── index.wxss │ ├── index.json │ ├── index.less │ ├── index.wxss │ ├── index.js │ └── index.wxml ├── sitemap.json ├── project.private.config.json ├── package.json ├── utils └── util.js ├── .eslintrc.js ├── config └── index.js ├── common ├── wxs │ ├── common.wxs │ └── format.wxs ├── utils │ ├── vibrate-utils.js │ ├── common-utils.js │ └── time-utils.js ├── less │ └── common.less └── data │ ├── default.js │ └── card.js ├── app.json ├── project.config.json ├── app.js └── app.wxss /components/iconfont/iconfont.wxss: -------------------------------------------------------------------------------- 1 | .icon { 2 | background-repeat: no-repeat; 3 | } 4 | -------------------------------------------------------------------------------- /components/d-button/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /components/d-card/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } 5 | -------------------------------------------------------------------------------- /components/d-empty/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /components/d-notify/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /components/d-switch/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /components/d-dialog/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } 5 | -------------------------------------------------------------------------------- /components/d-navigation/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /components/d-picker/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": { 4 | } 5 | } -------------------------------------------------------------------------------- /components/d-placeholder/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /components/d-popup/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } 5 | -------------------------------------------------------------------------------- /components/d-spread-button/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /components/iconfont/iconfont.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } 5 | -------------------------------------------------------------------------------- /components/d-cover-page/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": { 4 | } 5 | } -------------------------------------------------------------------------------- /components/d-date-picker/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } 5 | -------------------------------------------------------------------------------- /components/d-list-picker/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } 5 | -------------------------------------------------------------------------------- /components/d-checkbox-picker/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } 5 | -------------------------------------------------------------------------------- /components/d-orderbox-picker/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } 5 | -------------------------------------------------------------------------------- /pages/index/components/line/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": { 4 | } 5 | } -------------------------------------------------------------------------------- /sitemap.json: -------------------------------------------------------------------------------- 1 | { 2 | "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html", 3 | "rules": [{ 4 | "action": "allow", 5 | "page": "*" 6 | }] 7 | } -------------------------------------------------------------------------------- /project.private.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "projectname": "d-ui", 3 | "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html" 4 | } -------------------------------------------------------------------------------- /pages/index/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "navigationStyle": "custom", 4 | "enablePullDownRefresh": false, 5 | "usingComponents": { 6 | "line": "./components/line/index" 7 | }, 8 | "styleIsolation": "apply-shared" 9 | } 10 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "daily-ui", 3 | "version": "1.0.0", 4 | "description": "daily-ui组件库", 5 | "main": "app.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "yp", 10 | "license": "MIT" 11 | } 12 | -------------------------------------------------------------------------------- /components/d-switch/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /components/d-notify/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{title}} 5 | 6 | -------------------------------------------------------------------------------- /components/d-empty/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 9 | -------------------------------------------------------------------------------- /components/d-spread-button/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{title}} 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /components/d-placeholder/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 点击右上角 8 | 添加我的小程序，方便快速访问 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /components/d-popup/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /components/d-placeholder/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 3 | * @Author: yp 4 | * @Date: 2021-08-18 12:28:18 5 | * @LastEditTime: 2021-08-18 12:46:56 6 | * @LastEditors: yp 7 | */ 8 | // components/d-placeholder/index.js 9 | Component({ 10 | /** 11 | * 组件的属性列表 12 | */ 13 | properties: { 14 | navHeight:{ 15 | type:Number, 16 | value:88 17 | } 18 | }, 19 | 20 | /** 21 | * 组件的初始数据 22 | */ 23 | data: { 24 | 25 | }, 26 | 27 | /** 28 | * 组件的方法列表 29 | */ 30 | methods: { 31 | 32 | } 33 | }) 34 | -------------------------------------------------------------------------------- /utils/util.js: -------------------------------------------------------------------------------- 1 | const formatTime = date => { 2 | const year = date.getFullYear() 3 | const month = date.getMonth() + 1 4 | const day = date.getDate() 5 | const hour = date.getHours() 6 | const minute = date.getMinutes() 7 | const second = date.getSeconds() 8 | 9 | return `${[year, month, day].map(formatNumber).join('/')} ${[hour, minute, second].map(formatNumber).join(':')}` 10 | } 11 | 12 | const formatNumber = n => { 13 | n = n.toString() 14 | return n[1] ? n : `0${n}` 15 | } 16 | 17 | module.exports = { 18 | formatTime 19 | } 20 | -------------------------------------------------------------------------------- /components/d-empty/index.less: -------------------------------------------------------------------------------- 1 | @import "../../common/less/common.less"; 2 | 3 | //所选为空时显示 4 | .com-empty { 5 | width: 100%; 6 | height: calc(@card-min-height*5); 7 | overflow: hidden; 8 | display: flex; 9 | align-items: flex-start; 10 | justify-content: center; 11 | margin-bottom: -30rpx; 12 | position: relative; 13 | 14 | .empty-button { 15 | margin-top: 26%; 16 | } 17 | .empty-img { 18 | position: absolute; 19 | margin: auto; 20 | left: 0; 21 | right: 0; 22 | bottom: 16rpx; 23 | display: block; 24 | width: 100%; 25 | height: 236rpx; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Eslint config file 3 | * Documentation: https://eslint.org/docs/user-guide/configuring/ 4 | * Install the Eslint extension before using this feature. 5 | */ 6 | module.exports = { 7 | env: { 8 | es6: true, 9 | browser: true, 10 | node: true, 11 | }, 12 | ecmaFeatures: { 13 | modules: true, 14 | }, 15 | parserOptions: { 16 | ecmaVersion: 2018, 17 | sourceType: 'module', 18 | }, 19 | globals: { 20 | wx: true, 21 | App: true, 22 | Page: true, 23 | getCurrentPages: true, 24 | getApp: true, 25 | Component: true, 26 | requirePlugin: true, 27 | requireMiniProgram: true, 28 | }, 29 | // extends: 'eslint:recommended', 30 | rules: {}, 31 | } 32 | -------------------------------------------------------------------------------- /components/d-dialog/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | {{title}} 8 | 9 | 取消 10 | 确定 11 | 12 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 配置文件信息 3 | * @Author: yp 4 | * @Date: 2021-06-07 18:00:09 5 | * @LastEditTime: 2022-03-01 12:09:28 6 | * @LastEditors: yp 7 | */ 8 | 9 | module.exports = { 10 | 11 | //云托管环境id 12 | CLOUD_ENV_ID: "prd-container-5gpnh082f2fa08b9", 13 | //云托管服务 14 | CLOUD_SERVER: "daily-api", 15 | //订阅消息模板:日程提醒 16 | TMPLID: "tc_8yrkKjsZflfRJ8wDSZKYUE7iSNP9ByGPNJJwTw_k", 17 | //图片基础路径。 18 | //七牛存储 19 | PIC_PATH: "https://picb2b.qyer.com/b2b/wakereading/", 20 | //小程序云存储 21 | // PIC_PATH: "cloud://wakereading-prd-6gyyhwo9ab09dd67.7761-wakereading-prd-6gyyhwo9ab09dd67-1307957463/" 22 | //接口请求超时时间(毫秒) 23 | // REQUEST_TIME_OUT: 15000, 24 | //平台（1:打开今天小程序） 25 | PLATFORM: 1, 26 | //请求接口环境（0:本地，1:灰度，2:线上） 27 | MODE: 2, 28 | } -------------------------------------------------------------------------------- /components/d-button/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /components/d-popup/index.wxss: -------------------------------------------------------------------------------- 1 | .com-picker { 2 | position: fixed; 3 | overflow: hidden; 4 | width: 100%; 5 | height: 100%; 6 | background: rgba(0, 0, 0, 0.5); 7 | transition: all 0.3s ease-in-out; 8 | opacity: 0; 9 | visibility: hidden; 10 | z-index: 100; 11 | } 12 | .com-picker .movable-container { 13 | width: 100%; 14 | height: 100%; 15 | position: absolute; 16 | left: 0; 17 | top: 55%; 18 | opacity: 0; 19 | transform: translate3d(0, 100%, 0); 20 | transition: opacity 300ms,transform 300ms; 21 | display: flex; 22 | flex-direction: column; 23 | } 24 | .com-picker .movable-container .movable-inner { 25 | width: 100%; 26 | height: 45%; 27 | background-color: #FFF; 28 | flex: 1; 29 | border-radius: 12rpx; 30 | overflow: hidden; 31 | } 32 | .com-picker .content-show { 33 | opacity: 1; 34 | transform: translate3d(0, 0, 0); 35 | } 36 | .mask-show { 37 | visibility: visible; 38 | opacity: 1; 39 | } 40 | -------------------------------------------------------------------------------- /components/d-popup/index.less: -------------------------------------------------------------------------------- 1 | .com-picker { 2 | position: fixed; 3 | overflow: hidden; 4 | width: 100%; 5 | height: 100%; 6 | background: rgba(0,0,0,.5); 7 | transition: all 0.3s ease-in-out; 8 | opacity: 0; 9 | visibility: hidden; 10 | z-index: 100; 11 | 12 | .movable-container{ 13 | width: 100%; 14 | height: 100%; 15 | position: absolute; 16 | left: 0; 17 | top:55%; 18 | opacity: 0; 19 | transform:translate3d(0,100%,0); 20 | transition:opacity 300ms,transform 300ms; 21 | display: flex; 22 | flex-direction: column; 23 | 24 | .movable-inner{ 25 | width: 100%; 26 | height: 45%; 27 | background-color: #FFF; 28 | flex:1; 29 | border-radius: 12rpx; 30 | overflow: hidden; 31 | } 32 | 33 | } 34 | 35 | .content-show{ 36 | opacity: 1; 37 | transform:translate3d(0,0,0); 38 | } 39 | } 40 | 41 | .mask-show{ 42 | visibility: visible; 43 | opacity: 1; 44 | } 45 | -------------------------------------------------------------------------------- /common/wxs/common.wxs: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 3 | * @Author: yp 4 | * @Date: 2021-03-01 11:17:19 5 | * @LastEditTime: 2021-12-27 11:25:10 6 | * @LastEditors: yp 7 | */ 8 | 9 | //公共变量 10 | module.exports = { 11 | 12 | //黑色 13 | blackColor: "#444444", 14 | //绿色 15 | greenColor: "#16A085", 16 | //浅绿色 17 | lightGreenColor: "rgba(22,160,133,.2)", 18 | //红色 19 | redColor: "#EC492C", 20 | //浅红色 21 | lightRedColor: "rgba(236,73,44,.2)", 22 | //灰色 23 | greyColor: "#727986", 24 | //中度灰色 25 | mediumGreyColor: "rgba(114,121,134,.5)", 26 | //浅灰色 27 | lightGreyColor: "rgba(114,121,134,.2)", 28 | //背景浅灰色 29 | bgGreyColor: "rgba(0,0,0,.05)", 30 | //前台背景浅灰色 31 | lightBgGreyColor: "rgba(0,0,0,.03)", 32 | 33 | 34 | //行和弹窗圆角 35 | lineBorderRadius: "12rpx", 36 | cardBorderRadius: "16rpx", 37 | 38 | //七牛云存储空间 39 | picPath: "https://picb2b.qyer.com/b2b/wakereading/" 40 | //小程序云存储空间 41 | // picPath: "cloud://wakereading-prd-6gyyhwo9ab09dd67.7761-wakereading-prd-6gyyhwo9ab09dd67-1307957463/" 42 | } -------------------------------------------------------------------------------- /pages/index/components/line/index.less: -------------------------------------------------------------------------------- 1 | @import "../../../../common/less/common.less"; 2 | 3 | //小程序button有高等级的默认样式，需要改写 4 | .line:not([size="mini"]) { 5 | width: 100%; 6 | } 7 | 8 | .line { 9 | .line-block(); 10 | display: flex; 11 | flex-direction: column; 12 | color: @greyColor; 13 | font-weight: bold; 14 | margin-bottom: 30rpx; 15 | text-align: left; 16 | 17 | .line-1 { 18 | display: flex; 19 | flex-direction: row; 20 | align-items: center; 21 | 22 | .sline(); 23 | 24 | .title { 25 | margin-right: 10rpx; 26 | flex: 1; 27 | .medium-font(); 28 | } 29 | 30 | .option { 31 | .medium-font(); 32 | width: 64vw; 33 | 34 | .option-text { 35 | display: block; 36 | .sline(); 37 | text-align: right; 38 | } 39 | } 40 | 41 | .rightIcon { 42 | display: inline-block; 43 | margin-left: 10rpx; 44 | } 45 | } 46 | 47 | .line-2 { 48 | margin-top: 10rpx; 49 | .medium-font(); 50 | } 51 | } 52 | 53 | .line-tap { 54 | opacity: 0.86; 55 | transform: scale(0.986, 0.986); 56 | } 57 | -------------------------------------------------------------------------------- /components/d-empty/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 3 | * @Author: yp 4 | * @Date: 2021-09-08 15:48:45 5 | * @LastEditTime: 2021-09-08 19:09:03 6 | * @LastEditors: yp 7 | */ 8 | // components/d-empty/index.js 9 | Component({ 10 | /** 11 | * 组件的属性列表 12 | */ 13 | properties: { 14 | //配置按钮标题 15 | title: { 16 | type: String, 17 | value: "配置" 18 | }, 19 | //是否展示 20 | show: { 21 | type: Boolean, 22 | value: false 23 | }, 24 | 25 | //按钮图标 26 | iconName: { 27 | type: String, 28 | value: "jia2" 29 | }, 30 | iconSize: { 31 | type: Number, 32 | value: 20 33 | }, 34 | iconPaddingsizeBottom: { 35 | type: Number, 36 | value: 4 37 | } 38 | }, 39 | 40 | /** 41 | * 组件的初始数据 42 | */ 43 | data: { 44 | 45 | }, 46 | 47 | /** 48 | * 组件的方法列表 49 | */ 50 | methods: { 51 | 52 | /** 53 | * @description: 点击配置按钮，处理函数 54 | * @param {*} 55 | * @return {*} 56 | */ 57 | handleManage() { 58 | 59 | //点击配置按钮处理 60 | this.triggerEvent('onManage', {}, {}) 61 | } 62 | } 63 | }) -------------------------------------------------------------------------------- /components/d-cover-page/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | {{title}} 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /components/d-placeholder/index.wxss: -------------------------------------------------------------------------------- 1 | .com-placeholder { 2 | width: 100vw; 3 | background-color: #f6f6f6; 4 | display: flex; 5 | align-items: flex-end; 6 | justify-content: flex-end; 7 | padding: 20rpx 30rpx; 8 | } 9 | .com-placeholder .welcome-box { 10 | display: flex; 11 | align-items: center; 12 | } 13 | .com-placeholder .welcome-box .word { 14 | display: inline-block; 15 | background-color: #727986; 16 | position: relative; 17 | border-radius: 6rpx; 18 | margin-right: 20rpx; 19 | } 20 | .com-placeholder .welcome-box .word .welcome { 21 | font-size: 26rpx; 22 | line-height: 44rpx; 23 | color: #ffffff; 24 | font-weight: bold; 25 | margin: 0 14rpx; 26 | display: flex; 27 | align-items: center; 28 | } 29 | .com-placeholder .welcome-box .word .point-icon { 30 | margin-left: 5rpx; 31 | margin-right: 5rpx; 32 | display: inline-block; 33 | } 34 | .com-placeholder .welcome-box .word:after { 35 | content: ""; 36 | position: absolute; 37 | width: 0; 38 | height: 0; 39 | border: 10rpx solid rgba(0, 0, 0, 0); 40 | border-left-color: #727986; 41 | left: 100%; 42 | top: 50%; 43 | margin-top: -10rpx; 44 | } 45 | -------------------------------------------------------------------------------- /components/d-switch/index.wxss: -------------------------------------------------------------------------------- 1 | /* components/d-switch/index.wxss */ 2 | .com-switch { 3 | width: 72rpx; 4 | height: 38rpx; 5 | border-radius: 19rpx; 6 | position: relative; 7 | overflow: hidden; 8 | background-color: #959595; 9 | transform: translate3d(0, 0, 0); 10 | } 11 | .com-switch .mask { 12 | width: 100%; 13 | height: 100%; 14 | position: absolute; 15 | left: 0; 16 | top: 0; 17 | opacity: 0; 18 | } 19 | .com-switch .mask-ans { 20 | transition: opacity 300ms cubic-bezier(0.4, 1, 0.4, 1.35), background-color 200ms cubic-bezier(0.4, 1, 0.4, 1.35); 21 | } 22 | .com-switch .mask-active { 23 | opacity: 1; 24 | } 25 | .com-switch .circle { 26 | width: 30rpx; 27 | height: 30rpx; 28 | position: absolute; 29 | left: 4rpx; 30 | top: 4rpx; 31 | border-radius: 50%; 32 | background-color: #fff; 33 | box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); 34 | transform: translate(0, 0); 35 | } 36 | .com-switch .circle-ans { 37 | transition: transform 0.35s cubic-bezier(0.3, 0.3, 0.25, 1.35); 38 | } 39 | .com-switch .circle-active { 40 | transform: translate(36rpx, 0); 41 | } 42 | .com-switch-disable { 43 | opacity: 0.6; 44 | } 45 | -------------------------------------------------------------------------------- /components/d-notify/index.wxss: -------------------------------------------------------------------------------- 1 | .com-notify { 2 | position: fixed; 3 | max-width: 690rpx; 4 | width: 60vw; 5 | height: 72rpx; 6 | top: 140rpx; 7 | margin: auto; 8 | left: 0; 9 | right: 0; 10 | overflow: hidden; 11 | display: flex; 12 | align-items: center; 13 | padding: 18rpx; 14 | background-color: #16a085; 15 | border-radius: 12rpx; 16 | z-index: 10000; 17 | opacity: 0; 18 | visibility: hidden; 19 | transform: translate(0, 0, 0); 20 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); 21 | transition: transform 300ms ease 0s, opacity 300ms ease 0s, 22 | visibility 300ms ease 0s; 23 | } 24 | .com-notify .tip-icon { 25 | width: auto; 26 | margin-left: 4rpx; 27 | margin-right: 10rpx; 28 | } 29 | .com-notify .close-icon { 30 | width: auto; 31 | margin-right: 8rpx; 32 | } 33 | .com-notify .content { 34 | flex: 1; 35 | overflow: hidden; 36 | text-overflow: ellipsis; 37 | white-space: nowrap; 38 | color: #fff; 39 | font-size: 26rpx; 40 | line-height: 36rpx; 41 | font-weight: bold; 42 | } 43 | .com-notify-show { 44 | visibility: visible; 45 | transform: translate3d(0, 50%, 0); 46 | opacity: 0.9; 47 | } 48 | -------------------------------------------------------------------------------- /components/d-notify/index.less: -------------------------------------------------------------------------------- 1 | .com-notify { 2 | position: fixed; 3 | max-width: 690rpx; 4 | width: 60vw; 5 | height: 72rpx; 6 | top: 140rpx; 7 | margin: auto; 8 | left: 0; 9 | right: 0; 10 | overflow: hidden; 11 | display: flex; 12 | align-items: center; 13 | padding: 18rpx; 14 | background-color: #16a085; 15 | border-radius: 12rpx; 16 | z-index: 10000; 17 | opacity: 0; 18 | visibility: hidden; 19 | transform: translate(0, 0, 0); 20 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); 21 | transition: transform 300ms ease 0s, opacity 300ms ease 0s, 22 | visibility 300ms ease 0s; 23 | 24 | .tip-icon { 25 | width: auto; 26 | margin-left: 4rpx; 27 | margin-right: 10rpx; 28 | } 29 | 30 | .close-icon { 31 | width: auto; 32 | margin-right: 8rpx; 33 | } 34 | 35 | .content { 36 | flex: 1; 37 | overflow: hidden; 38 | text-overflow: ellipsis; 39 | white-space: nowrap; 40 | color: #fff; 41 | font-size: 26rpx; 42 | line-height: 36rpx; 43 | font-weight: bold; 44 | } 45 | } 46 | 47 | .com-notify-show { 48 | visibility: visible; 49 | transform: translate3d(0, 50%, 0); 50 | opacity: 0.9; 51 | } 52 | -------------------------------------------------------------------------------- /components/d-placeholder/index.less: -------------------------------------------------------------------------------- 1 | .com-placeholder { 2 | width: 100vw; 3 | background-color: #f6f6f6; 4 | display: flex; 5 | align-items: flex-end; 6 | justify-content: flex-end; 7 | padding: 20rpx 30rpx; 8 | 9 | .welcome-box { 10 | display: flex; 11 | align-items: center; 12 | 13 | .word { 14 | display: inline-block; 15 | background-color: #727986; 16 | position: relative; 17 | border-radius: 6rpx; 18 | margin-right: 20rpx; 19 | 20 | .welcome { 21 | font-size: 26rpx; 22 | line-height: 44rpx; 23 | color: #ffffff; 24 | font-weight: bold; 25 | margin: 0 14rpx; 26 | display: flex; 27 | align-items: center; 28 | } 29 | 30 | .point-icon { 31 | margin-left: 5rpx; 32 | margin-right: 5rpx; 33 | display: inline-block; 34 | } 35 | } 36 | 37 | .word:after { 38 | content: ""; 39 | position: absolute; 40 | width: 0; 41 | height: 0; 42 | border: 10rpx solid rgba(0, 0, 0, 0); 43 | border-left-color: #727986; 44 | left: 100%; 45 | top: 50%; 46 | margin-top: -10rpx; 47 | } 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /components/d-switch/index.less: -------------------------------------------------------------------------------- 1 | /* components/d-switch/index.wxss */ 2 | .com-switch{ 3 | width: 72rpx; 4 | height: 38rpx; 5 | border-radius: 19rpx; 6 | position: relative; 7 | overflow: hidden; 8 | background-color: #959595; 9 | transform:translate3d(0,0,0); 10 | 11 | 12 | //遮罩 13 | .mask{ 14 | width: 100%; 15 | height: 100%; 16 | position: absolute; 17 | left:0; 18 | top:0; 19 | opacity: 0; 20 | } 21 | 22 | .mask-ans{ 23 | transition: opacity 300ms cubic-bezier(0.4, 1, 0.4, 1.35), background-color 200ms cubic-bezier(0.4, 1, 0.4, 1.35); 24 | } 25 | 26 | .mask-active{ 27 | opacity: 1; 28 | } 29 | 30 | //圆球 31 | .circle{ 32 | width: 30rpx; 33 | height: 30rpx; 34 | position: absolute; 35 | left:4rpx; 36 | top:4rpx; 37 | border-radius: 50%; 38 | background-color: #fff; 39 | box-shadow: 0 0 2px rgba(0,0,0,.3); 40 | transform:translate(0,0); 41 | 42 | } 43 | 44 | .circle-ans{ 45 | transition: transform .35s cubic-bezier(0.3, 0.3, 0.25, 1.35); 46 | } 47 | 48 | .circle-active{ 49 | transform:translate(36rpx,0); 50 | } 51 | } 52 | 53 | .com-switch-disable{ 54 | opacity: 0.6; 55 | } -------------------------------------------------------------------------------- /components/d-button/index.less: -------------------------------------------------------------------------------- 1 | @import "../../common/less/common.less"; 2 | 3 | @keyframes circleAns { 4 | 0%{ 5 | transform:rotate(0deg) 6 | } 7 | 100%{ 8 | transform:rotate(720deg) 9 | } 10 | } 11 | 12 | .com-button{ 13 | display: inline-flex; 14 | color:#FFF; 15 | background-color: #16A085; 16 | font-weight: bold; 17 | align-items: center; 18 | justify-content: center; 19 | overflow: hidden; 20 | 21 | .icon{ 22 | display: inline-block; 23 | } 24 | 25 | .icon-loading{ 26 | animation: circleAns 2s linear 0s infinite; 27 | } 28 | } 29 | 30 | .com-button-tap{ 31 | opacity: .86; 32 | transform: scale(.98,.98); 33 | } 34 | 35 | .button-size-0{ 36 | padding: 0 20rpx; 37 | height: 80rpx; 38 | border-radius: @lineBorderRadius; 39 | .medium-font(); 40 | 41 | .icon{ 42 | margin-right:8rpx; 43 | } 44 | } 45 | 46 | .button-size-1{ 47 | padding: 0 14rpx; 48 | height: 60rpx; 49 | border-radius: 10rpx; 50 | .medium-font(); 51 | 52 | .icon{ 53 | margin-right:6rpx; 54 | } 55 | } 56 | 57 | .button-size-2{ 58 | padding: 0 12rpx; 59 | height: 54rpx; 60 | border-radius: 8rpx; 61 | .small-font(); 62 | 63 | .icon{ 64 | margin-right:6rpx; 65 | } 66 | } -------------------------------------------------------------------------------- /pages/index/components/line/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /common/utils/vibrate-utils.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 封装的微信按键震动工具类 3 | * @Author: yp 4 | * @Date: 2021-10-09 18:03:23 5 | * @LastEditTime: 2021-12-09 18:15:04 6 | * @LastEditors: yp 7 | */ 8 | 9 | // 默认值振动触觉 10 | const { 11 | vibrateValue 12 | } = require('../data/default') 13 | 14 | const VIBRATE_TYPE = ['', 'light', 'medium', 'heavy'] 15 | 16 | module.exports = { 17 | 18 | //按键触感('':无振动，light:轻度振动，medium:中度震动，heavy:重度震动) 19 | vibrateType: VIBRATE_TYPE[vibrateValue], 20 | //震动值(0:无振动，1:轻度，2:中度，3:重度) 21 | vibrateValue: vibrateValue, 22 | 23 | /** 24 | * @description: 对微信按键震动进行封装 25 | * @param {*} 26 | * @return {*} 27 | */ 28 | vibrate() { 29 | 30 | if (!this.vibrateType) { 31 | return; 32 | } 33 | //震动 34 | wx.vibrateShort({ 35 | type: this.vibrateType, 36 | }) 37 | }, 38 | 39 | /** 40 | * @description: 更新当前系统震动值 41 | * @param {*} vibrateType 42 | * @return {*} 43 | */ 44 | setVibrateType(vibrate = -1) { 45 | 46 | if (vibrate < 0 || vibrate >= VIBRATE_TYPE.length) { 47 | this.vibrateValue = vibrateValue; 48 | this.vibrateType = VIBRATE_TYPE[vibrateValue]; 49 | } else { 50 | this.vibrateValue = vibrate; 51 | this.vibrateType = VIBRATE_TYPE[vibrate] 52 | } 53 | } 54 | } -------------------------------------------------------------------------------- /components/d-spread-button/index.less: -------------------------------------------------------------------------------- 1 | @import "../../common/less/common.less"; 2 | 3 | //展开控制条 4 | .com-spread-button-box { 5 | width: 100%; 6 | height: 50rpx; 7 | display: flex; 8 | flex-direction: row; 9 | text-align: center; 10 | 11 | .spread-bg-line { 12 | flex:1; 13 | height: 50%; 14 | border-bottom: 1px solid rgba(114, 121, 134, .2); 15 | } 16 | 17 | .spread-button{ 18 | height: 100%; 19 | display: inline-flex; 20 | align-items: center; 21 | justify-content: center; 22 | width: auto; 23 | padding:0 20rpx; 24 | 25 | 26 | .button-name{ 27 | .medium-font(); 28 | color:@greenColor; 29 | font-weight: bold; 30 | } 31 | 32 | .button-icon{ 33 | transform: rotate(90deg); 34 | display: inline-block; 35 | margin-left: 10rpx; 36 | transition: transform .3s linear 0s; 37 | } 38 | 39 | .button-loading{ 40 | display: inline-block; 41 | margin-left: 10rpx; 42 | } 43 | 44 | .button-icon-spread{ 45 | transform: rotate(270deg); 46 | } 47 | 48 | @keyframes circleAns { 49 | 0%{ 50 | transform:rotate(0deg) 51 | } 52 | 100%{ 53 | transform:rotate(720deg) 54 | } 55 | } 56 | 57 | .circleAns{ 58 | animation: circleAns 1.6s linear 0s infinite; 59 | } 60 | } 61 | } -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": ["pages/index/index"], 3 | "window": { 4 | "backgroundTextStyle": "light", 5 | "navigationBarBackgroundColor": "#fff", 6 | "navigationBarTitleText": "Weixin", 7 | "navigationBarTextStyle": "black" 8 | }, 9 | "style": "v2", 10 | "sitemapLocation": "sitemap.json", 11 | "usingComponents": { 12 | "iconfont": "./components/iconfont/iconfont", 13 | "d-navigation": "./components/d-navigation/index", 14 | "d-switch": "./components/d-switch/index", 15 | "d-cover-page": "./components/d-cover-page/index", 16 | "d-picker": "./components/d-picker/index", 17 | "d-popup": "./components/d-popup/index", 18 | "d-date-picker": "./components/d-date-picker/index", 19 | "d-checkbox-picker": "./components/d-checkbox-picker/index", 20 | "d-list-picker": "./components/d-list-picker/index", 21 | "d-notify": "./components/d-notify/index", 22 | "d-dialog": "./components/d-dialog/index", 23 | "d-card": "./components/d-card/index", 24 | "d-button": "./components/d-button/index", 25 | "d-spread-button": "./components/d-spread-button/index", 26 | "d-placeholder": "./components/d-placeholder/index", 27 | "d-empty": "./components/d-empty/index", 28 | "d-orderbox-picker": "./components/d-orderbox-picker/index" 29 | }, 30 | "lazyCodeLoading": "requiredComponents" 31 | } 32 | -------------------------------------------------------------------------------- /components/d-navigation/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | {{title}} 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /project.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "项目配置文件，详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html", 3 | "setting": { 4 | "urlCheck": true, 5 | "coverView": true, 6 | "es6": true, 7 | "postcss": true, 8 | "compileHotReLoad": false, 9 | "lazyloadPlaceholderEnable": false, 10 | "preloadBackgroundData": false, 11 | "minified": true, 12 | "autoAudits": false, 13 | "uglifyFileName": false, 14 | "uploadWithSourceMap": true, 15 | "useIsolateContext": true, 16 | "enhance": true, 17 | "useMultiFrameRuntime": true, 18 | "useApiHook": true, 19 | "useApiHostProcess": true, 20 | "showShadowRootInWxmlPanel": true, 21 | "packNpmManually": false, 22 | "packNpmRelationList": [], 23 | "minifyWXSS": true, 24 | "minifyWXML": true, 25 | "useStaticServer": true, 26 | "showES6CompileOption": false, 27 | "checkInvalidKey": true, 28 | "babelSetting": { 29 | "ignore": [], 30 | "disablePlugins": [], 31 | "outputPath": "" 32 | }, 33 | "disableUseStrict": false, 34 | "useCompilerPlugins": false 35 | }, 36 | "compileType": "miniprogram", 37 | "libVersion": "2.22.1", 38 | "appid": "wx68713056679a0cf6", 39 | "projectname": "miniprogram-92", 40 | "condition": {}, 41 | "packOptions": { 42 | "ignore": [], 43 | "include": [] 44 | }, 45 | "editorSetting": { 46 | "tabIndent": "insertSpaces", 47 | "tabSize": 2 48 | } 49 | } -------------------------------------------------------------------------------- /components/d-navigation/index.wxss: -------------------------------------------------------------------------------- 1 | .com-navigation { 2 | position: relative; 3 | width: 100vw; 4 | z-index: 50; 5 | } 6 | .com-navigation .navbar { 7 | width: 100vw; 8 | background-color: #fff; 9 | position: fixed; 10 | width: 100%; 11 | top: 0; 12 | z-index: 100; 13 | transform: rotate(0deg); 14 | } 15 | .com-navigation .navbar .content { 16 | position: absolute; 17 | display: flex; 18 | align-items: center; 19 | } 20 | .com-navigation .navbar .content .icon-box { 21 | display: flex; 22 | border: 1rpx solid rgba(0, 0, 0, 0.1); 23 | align-items: center; 24 | overflow: hidden; 25 | } 26 | .com-navigation .navbar .content .icon-box .icon-button { 27 | flex: 1; 28 | height: 100%; 29 | display: flex; 30 | justify-content: center; 31 | align-items: center; 32 | } 33 | @keyframes circleAns { 34 | 0% { 35 | transform: rotate(0deg); 36 | } 37 | 100% { 38 | transform: rotate(720deg); 39 | } 40 | } 41 | .com-navigation .navbar .content .icon-box .icon-button .circleAns { 42 | animation: circleAns 2s linear 0s infinite; 43 | } 44 | .com-navigation .navbar .content .icon-box .icon-button-tap { 45 | background-color: rgba(0, 0, 0, 0.2); 46 | } 47 | .com-navigation .navbar .content .icon-box .seq-line { 48 | width: 1rpx; 49 | height: 18px; 50 | background-color: rgba(180, 180, 180, 0.6); 51 | } 52 | .com-navigation .navbar .content .title { 53 | color: #000; 54 | flex: 1; 55 | text-align: center; 56 | font-weight: bold; 57 | } 58 | -------------------------------------------------------------------------------- /components/d-switch/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 3 | * @Author: yp 4 | * @Date: 2021-03-05 18:28:50 5 | * @LastEditTime: 2021-12-23 18:12:02 6 | * @LastEditors: yp 7 | */ 8 | // components/d-switch/index.js 9 | 10 | //获取封装的微信按键震动 11 | const vibrateUtils = require('../../common/utils/vibrate-utils') 12 | 13 | Component({ 14 | /** 15 | * 组件的属性列表 16 | */ 17 | properties: { 18 | color: { 19 | type: String, 20 | value: "#16A085" 21 | }, 22 | offColor: { 23 | type: String, 24 | value: "#727986" 25 | }, 26 | value: { 27 | type: Boolean, 28 | value: false 29 | }, 30 | disable: { 31 | type: Boolean, 32 | value: false, 33 | }, 34 | //初始赋值时，是否有动画效果 35 | hasInitAns: { 36 | type: Boolean, 37 | value: false, 38 | } 39 | }, 40 | 41 | /** 42 | * 组件的初始数据 43 | */ 44 | data: { 45 | 46 | }, 47 | 48 | /** 49 | * 组件的方法列表 50 | */ 51 | methods: { 52 | _handleClick() { 53 | const { 54 | disable, 55 | value: _value 56 | } = this.data; 57 | 58 | if (disable) return false; 59 | 60 | //震动 61 | vibrateUtils.vibrate(); 62 | 63 | const value = !_value; 64 | this.setData({ 65 | hasInitAns: true, 66 | value 67 | }); 68 | this.triggerEvent('onChange', { 69 | value 70 | }, { 71 | bubbles: true, 72 | composed: true 73 | }); 74 | }, 75 | } 76 | }) -------------------------------------------------------------------------------- /components/d-navigation/index.less: -------------------------------------------------------------------------------- 1 | .com-navigation { 2 | position: relative; 3 | width: 100vw; 4 | z-index: 50; 5 | 6 | .navbar { 7 | width: 100vw; 8 | background-color: #fff; 9 | position: fixed; 10 | width: 100%; 11 | top: 0; 12 | z-index: 100; 13 | transform: rotate(0deg); 14 | 15 | .content { 16 | position: absolute; 17 | display: flex; 18 | align-items: center; 19 | 20 | .icon-box { 21 | display: flex; 22 | border: 1rpx solid rgba(0,0,0,0.1); 23 | align-items: center; 24 | overflow: hidden; 25 | 26 | .icon-button{ 27 | flex:1; 28 | height: 100%; 29 | display: flex; 30 | justify-content:center; 31 | align-items: center; 32 | 33 | @keyframes circleAns { 34 | 0%{ 35 | transform:rotate(0deg) 36 | } 37 | 100%{ 38 | transform:rotate(720deg) 39 | } 40 | } 41 | 42 | .circleAns{ 43 | animation: circleAns 2s linear 0s infinite; 44 | } 45 | } 46 | .icon-button-tap{ 47 | background-color: rgba(0,0,0,0.2); 48 | } 49 | 50 | .seq-line{ 51 | width: 1rpx; 52 | height: 18px; 53 | background-color: rgba(180,180,180,.6); 54 | } 55 | } 56 | 57 | .title{ 58 | color: #000; 59 | flex: 1; 60 | text-align: center; 61 | font-weight: bold; 62 | } 63 | } 64 | } 65 | } -------------------------------------------------------------------------------- /components/d-empty/index.wxss: -------------------------------------------------------------------------------- 1 | .sline { 2 | overflow: hidden; 3 | text-overflow: ellipsis; 4 | white-space: nowrap; 5 | } 6 | .number-font { 7 | font-family: "Helvetica", "SimSun", "PingFang SC", "Microsoft YaHei"; 8 | } 9 | .card-title-font { 10 | font-size: 33rpx; 11 | line-height: 46rpx; 12 | } 13 | .big-font { 14 | font-size: 30rpx; 15 | line-height: 44rpx; 16 | } 17 | .medium-font { 18 | font-size: 28rpx; 19 | line-height: 40rpx; 20 | } 21 | .small-font { 22 | font-size: 26rpx; 23 | line-height: 36rpx; 24 | } 25 | .tiny-font { 26 | font-size: 20rpx; 27 | line-height: 26rpx; 28 | } 29 | .line-block { 30 | width: 100%; 31 | padding: 20rpx; 32 | background-color: rgba(0, 0, 0, 0.05); 33 | border-radius: 12rpx; 34 | } 35 | .light-line-block { 36 | width: 100%; 37 | padding: 20rpx; 38 | background-color: rgba(0, 0, 0, 0.03); 39 | border-radius: 12rpx; 40 | } 41 | .tip-block { 42 | white-space: nowrap; 43 | display: inline-block; 44 | font-size: 20rpx; 45 | line-height: 26rpx; 46 | padding: 5rpx 8rpx; 47 | border-radius: 6rpx; 48 | } 49 | .com-empty { 50 | width: 100%; 51 | height: calc(100rpx*5); 52 | overflow: hidden; 53 | display: flex; 54 | align-items: flex-start; 55 | justify-content: center; 56 | margin-bottom: -30rpx; 57 | position: relative; 58 | } 59 | .com-empty .empty-button { 60 | margin-top: 26%; 61 | } 62 | .com-empty .empty-img { 63 | position: absolute; 64 | margin: auto; 65 | left: 0; 66 | right: 0; 67 | bottom: 16rpx; 68 | display: block; 69 | width: 100%; 70 | height: 236rpx; 71 | } 72 | -------------------------------------------------------------------------------- /components/d-spread-button/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 3 | * @Author: yp 4 | * @Date: 2021-04-14 17:19:58 5 | * @LastEditTime: 2021-10-18 11:21:32 6 | * @LastEditors: yp 7 | */ 8 | // components/d-spread-button/index.js 9 | 10 | //获取封装的微信按键震动 11 | const vibrateUtils = require('../../common/utils/vibrate-utils') 12 | 13 | Component({ 14 | /** 15 | * 组件的属性列表 16 | */ 17 | properties: { 18 | //按钮标题 19 | title: { 20 | type: String, 21 | value: "展开" 22 | }, 23 | //按钮颜色 24 | color: { 25 | type: String, 26 | value: "#16A085" 27 | }, 28 | //是否展开 29 | isSpread: { 30 | type: Boolean, 31 | value: false 32 | }, 33 | //是否为加载状态 34 | loading: { 35 | type: Boolean, 36 | value: false 37 | }, 38 | //不改变箭头状态 39 | iconAlways: { 40 | type: Boolean, 41 | value: false 42 | } 43 | 44 | }, 45 | 46 | /** 47 | * 组件的初始数据 48 | */ 49 | data: { 50 | 51 | }, 52 | 53 | /** 54 | * 组件的方法列表 55 | */ 56 | methods: { 57 | onTap() { 58 | const { 59 | isSpread, 60 | loading, 61 | iconAlways 62 | } = this.data; 63 | 64 | if (loading) { 65 | return 66 | } 67 | 68 | //震动 69 | vibrateUtils.vibrate(); 70 | 71 | if (!iconAlways) { 72 | this.setData({ 73 | isSpread: !isSpread 74 | }) 75 | } 76 | 77 | this.triggerEvent('onSpreadButtonTap', { 78 | isSpread: !isSpread 79 | }, { 80 | bubbles: true, 81 | composed: true 82 | }) 83 | } 84 | } 85 | }) -------------------------------------------------------------------------------- /components/d-picker/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 取消 10 | {{title}} 11 | 12 | 13 | 14 | 确定 15 | 16 | 17 | 18 | 19 | 20 | {{item.label||item}} 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /components/d-date-picker/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 取消 14 | {{title}} 15 | 16 | 17 | 18 | 确定 19 | 20 | 21 | 22 | 23 | 24 | {{item}} 25 | 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /components/d-dialog/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 对话框组件 3 | * @Author: yp 4 | * @Date: 2021-03-08 10:57:31 5 | * @LastEditTime: 2021-10-15 14:31:48 6 | * @LastEditors: yp 7 | */ 8 | 9 | // components/d-dailog/index.js 10 | // const app = getApp() 11 | 12 | //获取封装的微信按键震动 13 | const vibrateUtils = require('../../common/utils/vibrate-utils') 14 | 15 | Component({ 16 | /** 17 | * 组件的属性列表 18 | */ 19 | properties: { 20 | //弹窗是否可见 21 | visible: { 22 | type: Boolean, 23 | value: false, 24 | }, 25 | //宽度 26 | width: { 27 | type: String, 28 | value: "60%" 29 | }, 30 | //标题 31 | title: { 32 | type: String, 33 | value: '' 34 | }, 35 | //标题颜色 36 | titleTextColor: { 37 | type: String, 38 | value: '#444' 39 | }, 40 | //取消按钮颜色 41 | cancelTextColor: { 42 | type: String, 43 | value: '#727986' 44 | }, 45 | //确定按钮颜色 46 | confirmTextColor: { 47 | type: String, 48 | value: '#16A085' 49 | }, 50 | iconShow:{ 51 | type:Boolean, 52 | value:true 53 | } 54 | }, 55 | 56 | /** 57 | * 组件的初始数据 58 | */ 59 | data: { 60 | 61 | }, 62 | 63 | /** 64 | * 组件的方法列表 65 | */ 66 | methods: { 67 | 68 | /** 69 | * 处理触摸滚动问题 70 | */ 71 | handleCatchTouchMove() { 72 | return false; 73 | }, 74 | 75 | onClose() { 76 | this.setData({ 77 | visible: false 78 | }) 79 | this.triggerEvent('onClose', { 80 | value: false 81 | }, {}) 82 | }, 83 | 84 | onConfirm() { 85 | //震动 86 | vibrateUtils.vibrate(); 87 | this.onClose() 88 | this.triggerEvent('onConfirm', { 89 | value: true 90 | }, {}) 91 | } 92 | 93 | } 94 | }) -------------------------------------------------------------------------------- /components/d-popup/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 3 | * @Author: yp 4 | * @Date: 2021-03-08 10:57:31 5 | * @LastEditTime: 2022-03-01 13:51:12 6 | * @LastEditors: yp 7 | */ 8 | // components/d-coverpage/index.js 9 | let touchY = 0; 10 | Component({ 11 | /** 12 | * 组件的属性列表 13 | */ 14 | properties: { 15 | //弹窗是否可见 16 | visible: { 17 | type: Boolean, 18 | value: true, 19 | observer(visible) { 20 | if (visible) { 21 | this.setData({ 22 | y: 0 23 | }); 24 | } 25 | }, 26 | }, 27 | //标题 28 | title: { 29 | type: String, 30 | value: '' 31 | } 32 | }, 33 | 34 | /** 35 | * 组件的初始数据 36 | */ 37 | data: { 38 | //导航栏相关位置信息 39 | // navHeight: app.globalData.navInfo.navHeight, 40 | // menuLeft: app.globalData.navInfo.menuLeft, 41 | // menuTop: app.globalData.navInfo.menuTop, 42 | // menuHeight : app.globalData.navInfo.menuHeight, 43 | // menuWidth: app.globalData.navInfo.menuWidth 44 | 45 | //可移动区域 46 | y: 0, 47 | }, 48 | 49 | /** 50 | * 组件的方法列表 51 | */ 52 | methods: { 53 | 54 | /** 55 | * 处理触摸滚动问题 56 | */ 57 | handleCatchTouchMove() { 58 | return false; 59 | }, 60 | 61 | onClose() { 62 | this.setData({ 63 | visible: false 64 | }) 65 | }, 66 | 67 | touchStart(e) { 68 | console.log(e); 69 | touchY = e.changedTouches[0].clientY 70 | }, 71 | 72 | toucheEnd(e) { 73 | console.log(e); 74 | const moveY = e.changedTouches[0].clientY - touchY; 75 | touchY = 0; 76 | if (moveY < 85) { 77 | this.setData({ 78 | y: 0 79 | }) 80 | } else { 81 | this.onClose(); 82 | } 83 | 84 | } 85 | } 86 | }) -------------------------------------------------------------------------------- /components/d-list-picker/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | {{title}} 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | {{item.title||item}} 19 | 20 | {{item.desc}} 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /components/d-card/behaviors/card-behavior.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 3 | * @Author: yp 4 | * @Date: 2021-09-06 17:59:50 5 | * @LastEditTime: 2022-02-06 17:04:23 6 | * @LastEditors: yp 7 | */ 8 | 9 | // 卡片组件通用属性 10 | const D_CARD_PROPERTIES = { 11 | //id，纯数据字段 12 | _id: { 13 | type: Number, 14 | value: 0 15 | }, 16 | //标题 17 | title: { 18 | type: String, 19 | value: '' 20 | }, 21 | //描述 22 | desc: { 23 | type: String, 24 | value: '' 25 | }, 26 | //图标名称 27 | iconName: { 28 | type: String, 29 | value: '' 30 | }, 31 | //图标大小 32 | iconSize: { 33 | type: Number, 34 | value: 0 35 | }, 36 | //图标底部顶起高度（部分图标居中后视觉靠下，需要设置padding-bottom抬高） 37 | iconBottom: { 38 | type: Number, 39 | value: 0 40 | }, 41 | //是否为loading状态 42 | // loading: { 43 | // type: Boolean, 44 | // value: true 45 | // }, 46 | //锚点类名 47 | archorClz: { 48 | type: String, 49 | value: '' 50 | }, 51 | //是否为空 52 | // empty: { 53 | // type: Boolean, 54 | // value: false 55 | // }, 56 | //是否隐藏分割线 57 | gapHidden: { 58 | type: Boolean, 59 | value: false 60 | }, 61 | //配置组件名称，纯数据字段 62 | _comp: { 63 | type: String, 64 | value: "" 65 | }, 66 | //错误状态 67 | // error: { 68 | // type: Boolean, 69 | // value: false 70 | // }, 71 | //卡片状态（2:空数据，1:正常，0:等待，-1:错误） 72 | status: { 73 | type: Number, 74 | value: 1 75 | }, 76 | //卡片在app.globalData.cardList中的位置（纯数据字段） 77 | // _idx: { 78 | // type: Number, 79 | // value: -1 80 | // } 81 | // 组件所在页面标示，如在分享页中：from=share 82 | from: { 83 | type: String, 84 | value: '' 85 | }, 86 | shareId: { 87 | type: String, 88 | value: '' 89 | } 90 | 91 | } 92 | 93 | //卡片组件 属性值 94 | module.exports.dCardBehavior = Behavior({ 95 | properties: { 96 | ...D_CARD_PROPERTIES 97 | } 98 | }) -------------------------------------------------------------------------------- /components/d-cover-page/index.wxss: -------------------------------------------------------------------------------- 1 | .com-cover-page { 2 | position: fixed; 3 | overflow: hidden; 4 | width: 100%; 5 | height: 100%; 6 | background: rgba(0, 0, 0, 0); 7 | transition: all 0.3s ease-in-out; 8 | transform: translate3d(0, 0, 0); 9 | opacity: 0; 10 | visibility: hidden; 11 | z-index: 100; 12 | top: 0; 13 | left: 0; 14 | } 15 | .com-cover-page .content { 16 | position: absolute; 17 | width: 100%; 18 | height: 100%; 19 | left: 0; 20 | top: 0; 21 | background-color: #fff; 22 | opacity: 0; 23 | transform: translate3d(0, 100%, 0); 24 | transition: opacity 300ms,transform 300ms; 25 | display: flex; 26 | flex-direction: column; 27 | } 28 | .com-cover-page .content .header { 29 | width: 100%; 30 | position: relative; 31 | } 32 | .com-cover-page .content .header .close-area { 33 | position: absolute; 34 | z-index: 1; 35 | top: 0; 36 | left: 0; 37 | height: 92%; 38 | width: 14vw; 39 | } 40 | .com-cover-page .content .header .title-line { 41 | position: absolute; 42 | display: flex; 43 | align-items: center; 44 | } 45 | .com-cover-page .content .header .title-line .icon { 46 | margin-left: 14rpx; 47 | } 48 | @keyframes circleAns { 49 | 0% { 50 | transform: rotate(0deg); 51 | } 52 | 100% { 53 | transform: rotate(720deg); 54 | } 55 | } 56 | .com-cover-page .content .header .title-line .circleAns { 57 | animation: circleAns 2s linear 0s infinite; 58 | } 59 | .com-cover-page .content .header .title-line .title { 60 | flex: 1; 61 | margin-left: 20rpx; 62 | color: #000; 63 | font-weight: bold; 64 | font-size: 30rpx; 65 | } 66 | .com-cover-page .content .inner-content { 67 | flex: 1; 68 | width: 100%; 69 | } 70 | .com-cover-page .content-show { 71 | opacity: 1; 72 | transform: translate3d(0, 0, 0); 73 | } 74 | .com-cover-page-show { 75 | visibility: visible; 76 | opacity: 1; 77 | } 78 | -------------------------------------------------------------------------------- /components/d-dialog/index.wxss: -------------------------------------------------------------------------------- 1 | .com-dialog { 2 | position: fixed; 3 | overflow: hidden; 4 | width: 100%; 5 | height: 100%; 6 | background: rgba(0, 0, 0, 0.5); 7 | transition: all 0.3s ease-in-out; 8 | opacity: 0; 9 | visibility: hidden; 10 | z-index: 100; 11 | left: 0; 12 | top: 0; 13 | } 14 | .com-dialog .dialog-container { 15 | width: 60%; 16 | height: 200rpx; 17 | position: absolute; 18 | margin: auto; 19 | left: 0; 20 | right: 0; 21 | top: 0; 22 | bottom: 0; 23 | background-color: #FFF; 24 | border-radius: 12rpx; 25 | overflow: hidden; 26 | display: grid; 27 | grid-template-columns: 1fr 1fr; 28 | grid-template-rows: 1.2fr 1fr; 29 | grid-template-areas: 'title title' 'cancel confirm'; 30 | font-weight: bold; 31 | font-size: 28rpx; 32 | opacity: 0; 33 | transform: scale(0.8, 0.8); 34 | } 35 | .com-dialog .dialog-container .title { 36 | grid-area: title; 37 | display: flex; 38 | flex-direction: row; 39 | justify-content: center; 40 | align-items: center; 41 | border-bottom: 1px solid rgba(114, 121, 134, 0.2); 42 | padding: 0 30rpx; 43 | } 44 | .com-dialog .dialog-container .title .icon { 45 | display: inline-block; 46 | margin-right: 10rpx; 47 | } 48 | .com-dialog .dialog-container .cancel-button { 49 | grid-area: cancel; 50 | display: flex; 51 | align-items: center; 52 | justify-content: center; 53 | } 54 | .com-dialog .dialog-container .confirm-button { 55 | grid-area: confirm; 56 | display: flex; 57 | align-items: center; 58 | justify-content: center; 59 | border-left: 1px solid rgba(114, 121, 134, 0.2); 60 | } 61 | .com-dialog .dialog-container .text { 62 | display: inline-block; 63 | width: 100%; 64 | text-align: center; 65 | } 66 | .com-dialog .dialog-container-show { 67 | opacity: 1; 68 | transform: scale(1, 1); 69 | transition: all 0.3s ease-in-out; 70 | } 71 | .dialog-show { 72 | visibility: visible; 73 | opacity: 1; 74 | } 75 | -------------------------------------------------------------------------------- /components/d-cover-page/index.less: -------------------------------------------------------------------------------- 1 | .com-cover-page { 2 | position: fixed; 3 | overflow: hidden; 4 | width: 100%; 5 | height: 100%; 6 | background: rgba(0,0,0,0); 7 | transition: all 0.3s ease-in-out; 8 | transform:translate3d(0,0,0); 9 | opacity: 0; 10 | visibility: hidden; 11 | z-index: 100; 12 | top:0; 13 | left:0; 14 | 15 | .content{ 16 | // position: fixed; 17 | // z-index: 1000; 18 | position: absolute; 19 | width: 100%; 20 | height: 100%; 21 | left: 0; 22 | top: 0; 23 | background-color: #fff; 24 | opacity: 0; 25 | transform:translate3d(0,100%,0); 26 | transition:opacity 300ms,transform 300ms; 27 | display: flex; 28 | flex-direction: column; 29 | 30 | 31 | .header{ 32 | width:100%; 33 | position: relative; 34 | 35 | .close-area{ 36 | position: absolute; 37 | z-index: 1; 38 | top:0; 39 | left:0; 40 | height: 92%; 41 | width: 14vw; 42 | } 43 | 44 | .title-line{ 45 | position: absolute; 46 | display: flex; 47 | align-items: center; 48 | 49 | .icon{ 50 | margin-left:14rpx; 51 | } 52 | 53 | @keyframes circleAns { 54 | 0%{ 55 | transform:rotate(0deg) 56 | } 57 | 100%{ 58 | transform:rotate(720deg) 59 | } 60 | } 61 | 62 | .circleAns{ 63 | animation: circleAns 2s linear 0s infinite; 64 | } 65 | 66 | .title{ 67 | flex:1; 68 | margin-left:20rpx; 69 | color: #000; 70 | font-weight: bold; 71 | font-size: 30rpx; 72 | } 73 | } 74 | } 75 | 76 | .inner-content{ 77 | flex:1; 78 | width: 100%; 79 | } 80 | } 81 | 82 | .content-show{ 83 | opacity: 1; 84 | transform:translate3d(0,0,0); 85 | } 86 | 87 | } 88 | .com-cover-page-show{ 89 | visibility: visible; 90 | opacity: 1; 91 | } 92 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 3 | * @Author: yp 4 | * @Date: 2022-03-01 21:23:08 5 | * @LastEditTime: 2022-04-08 16:34:35 6 | * @LastEditors: yp 7 | */ 8 | // app.js 9 | App({ 10 | onLaunch() { 11 | //初始化设备硬件信息 12 | this.ininSystemInfo(); 13 | }, 14 | globalData: { 15 | //导航栏位置信息 16 | navInfo: { 17 | navHeight: 0, 18 | menuLeft: 0, 19 | menuTop: 0, 20 | menuHeight: 0, 21 | menuWidth: 0, 22 | menuIconWidth: 0 23 | }, 24 | //屏幕信息 25 | screenWidth: 0, 26 | screenHeight: 0, 27 | //设备像素比 28 | pixelRatio: 2, 29 | }, 30 | 31 | /** 32 | * @description: 初始化系统设备信息 33 | * @param {*} 34 | * @return {*} 35 | */ 36 | ininSystemInfo() { 37 | //初始化导航栏位置信息 38 | const that = this; 39 | // 获取系统信息 40 | const systemInfo = wx.getSystemInfoSync(); 41 | // 胶囊按钮位置信息 42 | const menuButtonInfo = wx.getMenuButtonBoundingClientRect(); 43 | 44 | // 导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 3 + 胶囊高度 + 状态栏高度 45 | that.globalData.navInfo.navHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 3 + menuButtonInfo.height + systemInfo.statusBarHeight; 46 | // 导航栏内容左定位 47 | that.globalData.navInfo.menuLeft = systemInfo.screenWidth - menuButtonInfo.right; 48 | // 导航栏内容顶部定位 49 | that.globalData.navInfo.menuTop = menuButtonInfo.top; 50 | // 导航栏内容高度 51 | that.globalData.navInfo.menuHeight = menuButtonInfo.height; 52 | // 导航栏内容宽度 53 | that.globalData.navInfo.menuWidth = systemInfo.screenWidth - menuButtonInfo.width - that.globalData.navInfo.menuLeft * 2 54 | // 导航栏图标占位宽度 55 | that.globalData.navInfo.menuIconWidth = menuButtonInfo.width; 56 | // 获取屏幕宽度 57 | that.globalData.screenWidth = systemInfo.screenWidth; 58 | // 获取屏幕高度 59 | that.globalData.screenHeight = systemInfo.screenHeight; 60 | // 获取设备像素比 61 | that.globalData.pixelRatio = systemInfo.pixelRatio; 62 | // 获取基础库版本号 63 | that.globalData.SDKVersion = systemInfo.SDKVersion; 64 | }, 65 | }) -------------------------------------------------------------------------------- /components/d-dialog/index.less: -------------------------------------------------------------------------------- 1 | .com-dialog { 2 | position: fixed; 3 | overflow: hidden; 4 | width: 100%; 5 | height: 100%; 6 | background: rgba(0,0,0,.5); 7 | transition: all 0.3s ease-in-out; 8 | opacity: 0; 9 | visibility: hidden; 10 | z-index: 100; 11 | left:0; 12 | top:0; 13 | 14 | .dialog-container{ 15 | width: 60%; 16 | height: 200rpx; 17 | position: absolute; 18 | margin:auto; 19 | left:0; 20 | right:0; 21 | top:0; 22 | bottom:0; 23 | background-color:#FFF; 24 | border-radius: 12rpx; 25 | overflow: hidden; 26 | display: grid; 27 | grid-template-columns: 1fr 1fr; 28 | grid-template-rows: 1.2fr 1fr; 29 | grid-template-areas: 'title title' 30 | 'cancel confirm'; 31 | 32 | font-weight: bold; 33 | font-size: 28rpx; 34 | opacity: 0; 35 | transform: scale(.8,.8); 36 | 37 | 38 | .title{ 39 | grid-area: title; 40 | display: flex; 41 | flex-direction: row; 42 | justify-content: center; 43 | align-items:center; 44 | border-bottom: 1px solid rgba(114,121,134,.2); 45 | padding:0 30rpx; 46 | 47 | .icon{ 48 | display: inline-block; 49 | margin-right:10rpx; 50 | } 51 | } 52 | 53 | .cancel-button{ 54 | grid-area: cancel; 55 | display: flex; 56 | align-items: center; 57 | justify-content: center; 58 | } 59 | 60 | .confirm-button{ 61 | grid-area: confirm; 62 | display: flex; 63 | align-items: center; 64 | justify-content: center; 65 | border-left: 1px solid rgba(114,121,134,.2); 66 | } 67 | 68 | .text{ 69 | display: inline-block; 70 | width: 100%; 71 | text-align: center; 72 | } 73 | 74 | } 75 | 76 | .dialog-container-show{ 77 | opacity: 1; 78 | transform:scale(1,1); 79 | transition: all 0.3s ease-in-out; 80 | } 81 | } 82 | 83 | .dialog-show{ 84 | visibility: visible; 85 | opacity: 1; 86 | } 87 | -------------------------------------------------------------------------------- /components/d-cover-page/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 3 | * @Author: yp 4 | * @Date: 2021-03-08 10:57:31 5 | * @LastEditTime: 2022-02-14 21:12:19 6 | * @LastEditors: yp 7 | */ 8 | 9 | //获取封装的微信按键震动 10 | const vibrateUtils = require('../../common/utils/vibrate-utils') 11 | 12 | 13 | // components/d-coverpage/index.js 14 | const app = getApp() 15 | Component({ 16 | /** 17 | * 组件的属性列表 18 | */ 19 | properties: { 20 | //弹窗是否可见 21 | visible: { 22 | type: Boolean, 23 | value: true 24 | }, 25 | //标题 26 | title: { 27 | type: String, 28 | value: '' 29 | }, 30 | //等待状态 31 | loading: { 32 | type: Boolean, 33 | value: false 34 | }, 35 | //关闭由自身决定 36 | closeBySelf: { 37 | type: Boolean, 38 | value: true 39 | }, 40 | //允许被关闭 41 | allowClose: { 42 | type: Boolean, 43 | value: true 44 | } 45 | }, 46 | 47 | /** 48 | * 组件的初始数据 49 | */ 50 | data: { 51 | //导航栏相关位置信息 52 | navHeight: app.globalData.navInfo.navHeight, 53 | menuLeft: app.globalData.navInfo.menuLeft, 54 | menuTop: app.globalData.navInfo.menuTop, 55 | menuHeight: app.globalData.navInfo.menuHeight, 56 | menuWidth: app.globalData.navInfo.menuWidth 57 | }, 58 | 59 | /** 60 | * 组件的方法列表 61 | */ 62 | methods: { 63 | /** 64 | * 处理触摸滚动问题 65 | */ 66 | handleCatchTouchMove() { 67 | return false; 68 | }, 69 | 70 | /** 71 | * @description: 页面关闭后触发 72 | * @param {*} 73 | * @return {*} 74 | */ 75 | onClose() { 76 | const { 77 | visible, 78 | loading, 79 | closeBySelf 80 | } = this.data; 81 | 82 | if (loading) { 83 | return 84 | } 85 | //震动 86 | vibrateUtils.vibrate(); 87 | 88 | if (closeBySelf) { 89 | this.setData({ 90 | visible: false 91 | }) 92 | } 93 | 94 | this.triggerEvent( 95 | 'onClose', { 96 | visible 97 | }, {} 98 | ) 99 | } 100 | } 101 | }) -------------------------------------------------------------------------------- /components/d-checkbox-picker/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 取消 14 | {{title}} 15 | 16 | 17 | 18 | 确定 19 | 20 | 21 | 22 | 23 | 24 | 25 | {{item.label||item}} 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /components/d-card/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 3 | * @Author: yp 4 | * @Date: 2021-03-29 16:30:36 5 | * @LastEditTime: 2022-02-06 17:54:47 6 | * @LastEditors: yp 7 | */ 8 | const app = getApp(); 9 | 10 | const { 11 | dCardBehavior 12 | } = require('./behaviors/card-behavior.js') 13 | 14 | //获取封装的微信按键震动 15 | const vibrateUtils = require('../../common/utils/vibrate-utils') 16 | 17 | // components/d-card/index.js 18 | Component({ 19 | 20 | // 指定所有 _ 开头的数据字段为纯数据字段 21 | options: { 22 | pureDataPattern: /^_/ 23 | }, 24 | 25 | //包含了组件的属性列表 26 | behaviors: [dCardBehavior], 27 | 28 | /** 29 | * 组件的初始数据 30 | */ 31 | data: { 32 | //导航栏相关位置信息 33 | navHeight: app.globalData.navInfo.navHeight 34 | }, 35 | 36 | /** 37 | * 组件的方法列表 38 | */ 39 | methods: { 40 | 41 | /** 42 | * @description: 点击卡片顶部导航 43 | * @param {*} 44 | * @return {*} 45 | */ 46 | headTap() { 47 | const { 48 | status, 49 | _comp, 50 | _id, 51 | from 52 | } = this.data; 53 | if (status === 0 || status === -1 || from === "share") { 54 | return; 55 | } 56 | //震动 57 | vibrateUtils.vibrate(); 58 | 59 | this.triggerEvent('onHeadTap', { 60 | id: _id, 61 | comp: _comp 62 | }, { 63 | bubbles: true, 64 | composed: true 65 | }) 66 | }, 67 | 68 | /** 69 | * @description: 处理点击分享按钮事件 70 | * @param {*} 71 | * @return {*} 72 | */ 73 | handleShareButtonTap() { 74 | //震动 75 | vibrateUtils.vibrate(); 76 | }, 77 | 78 | /** 79 | * @description: 加载失败，点击“重新加载”按钮触发 80 | * @param {*} e 81 | * @return {*} 82 | */ 83 | errorButtonTap() { 84 | 85 | const { 86 | status, 87 | _comp, 88 | _id 89 | } = this.data; 90 | 91 | if (status === -1) { 92 | this.triggerEvent('onCardErrorButtonTap', { 93 | id: _id, 94 | comp: _comp 95 | }, { 96 | bubbles: true, 97 | composed: true 98 | }) 99 | } 100 | } 101 | } 102 | }) -------------------------------------------------------------------------------- /components/d-orderbox-picker/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 取消 10 | {{title}} 11 | 12 | 13 | 14 | 确定 15 | 16 | 17 | 18 | 19 | 20 | 21 | {{item.label||item}} 22 | 23 | 24 | 25 | {{resultValue[index]+1}} 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /pages/index/components/line/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 3 | * @Author: yp 4 | * @Date: 2021-04-25 11:52:13 5 | * @LastEditTime: 2021-10-18 14:08:12 6 | * @LastEditors: yp 7 | */ 8 | // pages/manage/components/line/index.js 9 | 10 | //获取封装的微信按键震动 11 | const vibrateUtils = require('../../../../common/utils/vibrate-utils') 12 | 13 | Component({ 14 | 15 | // 开启多slot 16 | options: { 17 | multipleSlots: true 18 | }, 19 | 20 | /** 21 | * 组件的属性列表 22 | */ 23 | properties: { 24 | 25 | //标题 26 | title: { 27 | type: String, 28 | value: '' 29 | }, 30 | //标题颜色 31 | titleColor: { 32 | type: String, 33 | value: '' 34 | }, 35 | //选项内容 36 | option: { 37 | type: String, 38 | value: '' 39 | }, 40 | //选项颜色 41 | optionColor: { 42 | type: String, 43 | value: '' 44 | }, 45 | //右箭头是否展示 46 | rightIconShow: { 47 | type: Boolean, 48 | value: false 49 | }, 50 | //描述 51 | desc: { 52 | type: String, 53 | value: '' 54 | }, 55 | //描述文字颜色 56 | descColor: { 57 | type: String, 58 | value: '' 59 | }, 60 | //开关按钮是否展示 61 | switchShow: { 62 | type: Boolean, 63 | value: false 64 | }, 65 | //是否开启 66 | switchValue: { 67 | type: Boolean, 68 | value: false 69 | }, 70 | //是否为不可用 71 | disable: { 72 | type: Boolean, 73 | value: false 74 | }, 75 | //微信开放能力 76 | openType: { 77 | type: String, 78 | value: '' 79 | } 80 | 81 | 82 | 83 | }, 84 | 85 | /** 86 | * 组件的初始数据 87 | */ 88 | data: { 89 | 90 | }, 91 | 92 | /** 93 | * 组件的方法列表 94 | */ 95 | methods: { 96 | onTap() { 97 | 98 | const { 99 | disable, 100 | switchShow 101 | } = this.data; 102 | if (disable) { 103 | return; 104 | } 105 | if (!switchShow) { 106 | //震动 107 | vibrateUtils.vibrate(); 108 | } 109 | 110 | this.triggerEvent('onTap', {}, { 111 | bubbles: true, 112 | composed: true 113 | }) 114 | 115 | } 116 | } 117 | }) -------------------------------------------------------------------------------- /components/iconfont/iconfont.js: -------------------------------------------------------------------------------- 1 | Component({ 2 | properties: { 3 | // suozhu | locksuo | jiesuo | xiazai1 | fenxiangx | taiyang | qidongkaiguanf | taiyang1 | dingyue1 | daiban | peizhi5 | lajitong | sort | bianji6 | shuaxin | xingshi | wendu | shuye | huodong_2 | jian2 | sousuo | diandiandian | paixu7 | dingyue | fenlei | geren2 | touxiang-fill | dingwei | huojian4 | gonggao | jia2 | kaijinduose_da10yuanjiao | taiyangchunse_da10yuanjiao | caozuo-kaiguan | rili-cuxiantiao | lvyou1 | biaoge2 | daka4 | lishijilu | piaohao | quanqiu | gupiao2 | gongmujijin | xinwen1 | xinwen4 | shuji-copy | shengliqi | shouyinjixian | shengri-weixuan | cheliang | tianqi1 | jieri | tishi | biaoqing_3 | biaoqing_2 | fuxuan | close1 | loadingroll | home1 | you | zuo 4 | name: { 5 | type: String, 6 | }, 7 | // string | string[] 8 | color: { 9 | type: null, 10 | observer: function(color) { 11 | this.setData({ 12 | colors: this.fixColor(), 13 | isStr: typeof color === 'string', 14 | }); 15 | } 16 | }, 17 | size: { 18 | type: Number, 19 | value: 18, 20 | observer: function(size) { 21 | this.setData({ 22 | svgSize: size / 750 * wx.getSystemInfoSync().windowWidth, 23 | }); 24 | }, 25 | }, 26 | }, 27 | data: { 28 | colors: '', 29 | svgSize: 18 / 750 * wx.getSystemInfoSync().windowWidth, 30 | quot: '"', 31 | isStr: true, 32 | }, 33 | methods: { 34 | fixColor: function() { 35 | var color = this.data.color; 36 | var hex2rgb = this.hex2rgb; 37 | 38 | if (typeof color === 'string') { 39 | return color.indexOf('#') === 0 ? hex2rgb(color) : color; 40 | } 41 | 42 | return color.map(function (item) { 43 | return item.indexOf('#') === 0 ? hex2rgb(item) : item; 44 | }); 45 | }, 46 | hex2rgb: function(hex) { 47 | var rgb = []; 48 | 49 | hex = hex.substr(1); 50 | 51 | if (hex.length === 3) { 52 | hex = hex.replace(/(.)/g, '$1$1'); 53 | } 54 | 55 | hex.replace(/../g, function(color) { 56 | rgb.push(parseInt(color, 0x10)); 57 | return color; 58 | }); 59 | 60 | return 'rgb(' + rgb.join(',') + ')'; 61 | } 62 | } 63 | }); 64 | -------------------------------------------------------------------------------- /common/less/common.less: -------------------------------------------------------------------------------- 1 | //颜色变量 2 | //黑色 3 | @blackColor: #444444; 4 | //绿色 5 | @greenColor: #16a085; 6 | //浅绿色 7 | @lightGreenColor: rgba(22, 160, 133, 0.2); 8 | //红色 9 | @redColor: #ec492c; 10 | //浅红色 11 | @lightRedColor: rgba(236, 73, 44, 0.2); 12 | //灰色 13 | @greyColor: #727986; 14 | //中度灰色（不可用使用） 15 | @mediumGreyColor: rgba(114, 121, 134, 0.5); 16 | //浅灰色（线条使用） 17 | @lightGreyColor: rgba(114, 121, 134, 0.2); 18 | //背景浅灰色 19 | @bgGreyColor:rgba(0, 0, 0, 0.05); 20 | //前台背景浅灰色 21 | @lightBgGreyColor: rgba(0, 0, 0, 0.03); 22 | 23 | //样式混合 24 | 25 | //卡片最小高度样式 26 | @card-min-height: 100rpx; 27 | 28 | //单行文本溢出 29 | .sline { 30 | overflow: hidden; 31 | text-overflow: ellipsis; 32 | white-space: nowrap; 33 | } 34 | 35 | //多行文本溢出 36 | .mline(@lineNumber: 3) { 37 | display: -webkit-box; 38 | -webkit-box-orient: vertical; 39 | -webkit-line-clamp: @lineNumber; 40 | overflow: hidden; 41 | } 42 | 43 | //数字字体 44 | .number-font { 45 | letter-spacing: 2rpx; 46 | font-family: "Helvetica", "SimSun", "PingFang SC", "Microsoft YaHei"; 47 | } 48 | 49 | //卡片标题字体 50 | .card-title-font { 51 | font-size: 33rpx; 52 | line-height: 46rpx; 53 | } 54 | 55 | //大字体 56 | .big-font { 57 | font-size: 30rpx; 58 | line-height: 44rpx; 59 | } 60 | 61 | //中等字体 62 | .medium-font { 63 | font-size: 28rpx; 64 | line-height: 40rpx; 65 | } 66 | 67 | //小字体 68 | .small-font { 69 | font-size: 26rpx; 70 | line-height: 36rpx; 71 | } 72 | 73 | //标签小字体 74 | .tiny-font { 75 | font-size: 20rpx; 76 | line-height: 26rpx; 77 | } 78 | 79 | //标签圆角 80 | @tipBorderRadius: 6rpx; 81 | //行圆角 82 | @lineBorderRadius: 12rpx; 83 | //卡片圆角 84 | @cardBorderRadius: 16rpx; 85 | 86 | //淡灰色背景框 87 | .line-block { 88 | width: 100%; 89 | padding: 20rpx; 90 | background-color: @bgGreyColor; 91 | border-radius: @lineBorderRadius; 92 | } 93 | 94 | //前台浅灰色背景行 95 | .light-line-block { 96 | width: 100%; 97 | padding: 20rpx; 98 | background-color: @lightBgGreyColor; 99 | border-radius: @lineBorderRadius; 100 | } 101 | 102 | //小标签 103 | .tip-block { 104 | white-space: nowrap; 105 | display: inline-block; 106 | .tiny-font(); 107 | padding: 5rpx 8rpx; 108 | border-radius: @tipBorderRadius; 109 | } 110 | -------------------------------------------------------------------------------- /components/d-button/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 3 | * @Author: yp 4 | * @Date: 2021-04-06 11:17:57 5 | * @LastEditTime: 2022-01-26 17:58:22 6 | * @LastEditors: yp 7 | */ 8 | // components/d-button/index.js 9 | 10 | //获取封装的微信按键震动 11 | const vibrateUtils = require('../../common/utils/vibrate-utils') 12 | 13 | Component({ 14 | /** 15 | * 组件的属性列表 16 | */ 17 | properties: { 18 | width: { 19 | type: Number, 20 | value: 0 21 | }, 22 | height: { 23 | type: Number, 24 | value: 0 25 | }, 26 | size: { 27 | type: Number, 28 | value: 0 29 | }, 30 | title: { 31 | type: String, 32 | value: '' 33 | }, 34 | bgColor: { 35 | type: String, 36 | value: '#16A085' 37 | }, 38 | textColor: { 39 | type: String, 40 | value: '#FFFFFF' 41 | }, 42 | iconName: { 43 | type: String, 44 | value: '' 45 | }, 46 | iconSize: { 47 | type: Number, 48 | value: 0 49 | }, 50 | iconPaddingBottom: { 51 | type: Number, 52 | value: 0 53 | }, 54 | disable: { 55 | type: Boolean, 56 | value: false 57 | }, 58 | disableBgColor: { 59 | type: String, 60 | value: 'rgba(114,121,134,.5)' 61 | }, 62 | openType: { 63 | type: String, 64 | value: '' 65 | }, 66 | loading: { 67 | type: Boolean, 68 | value: false 69 | }, 70 | loadingIconSize: { 71 | type: Number, 72 | value: 0 73 | }, 74 | loadingIconPaddingBottom: { 75 | type: Number, 76 | value: 0 77 | }, 78 | //组件内，实际button元素赋予的id 79 | innerId: { 80 | type: String, 81 | value: '' 82 | } 83 | 84 | }, 85 | 86 | /** 87 | * 组件的初始数据 88 | */ 89 | data: { 90 | 91 | }, 92 | 93 | /** 94 | * 组件的方法列表 95 | */ 96 | methods: { 97 | onTap() { 98 | 99 | const { 100 | disable, 101 | loading 102 | } = this.data; 103 | if (disable || loading) { 104 | return; 105 | } 106 | //震动 107 | vibrateUtils.vibrate(); 108 | this.triggerEvent('onTap', {}, { 109 | bubbles: true, 110 | composed: true 111 | }) 112 | 113 | } 114 | 115 | } 116 | }) -------------------------------------------------------------------------------- /common/data/default.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 默认初始数据 3 | * @Author: yp 4 | * @Date: 2021-05-26 15:32:56 5 | * @LastEditTime: 2022-03-01 21:15:31 6 | * @LastEditors: yp 7 | */ 8 | 9 | module.exports = { 10 | 11 | //默认位置 12 | location: { 13 | name: "北京", 14 | id: "101040100", 15 | lat: "29.56376", 16 | lon: "106.55046", 17 | adm2: "北京", 18 | adm1: "北京市", 19 | country: "中国", 20 | }, 21 | 22 | //默认生日 23 | birthday: { 24 | //月，从0开始 25 | month: 0, 26 | //日,从0开始 27 | day: 0, 28 | }, 29 | 30 | //默认按键振动触觉(0:无振动，1:轻度，2:中度，3:重度) 31 | vibrateValue: 2, 32 | 33 | //卡片默认配置 34 | cardsDefaultConfig: { 35 | // 失败状态的卡片 36 | 'error': { 37 | 38 | }, 39 | //加载状态的卡片 40 | 'loading': { 41 | 42 | }, 43 | // 日历 44 | 1: { 45 | //年进度条是否显示 46 | progressOpenValue: true, 47 | //农历是否显示 48 | lunarOpenValue: true, 49 | //忌宜是否显示 50 | jiyiOpenValue: true 51 | }, 52 | 53 | // 纪念日 54 | 2: { 55 | //优先显示几个列表选项 56 | firstPickerValue: [1], 57 | //是否只展示节假日数据 58 | onlyHolidayValue: false 59 | }, 60 | // 天气 61 | 3: { 62 | //自动获取当前位置开关 63 | autoLocationOpenValue: true, 64 | //优先显示几个列表选项 65 | firstPickerValue: [2], 66 | }, 67 | //尾号限行 68 | 4: { 69 | 70 | }, 71 | //生日提醒 72 | 5: { 73 | //优先显示几个列表选项 74 | firstPickerValue: [3], 75 | }, 76 | //实时快报 77 | 6: { 78 | 79 | }, 80 | //经期记录 81 | 7: { 82 | //月经周期时长，默认28天 83 | mensesPeriodPickerValue: [7], 84 | //经期时长，默认5天 85 | mensesDayPickerValue: [3], 86 | //上一次月经时间 87 | mensesDate: -1 88 | }, 89 | //历史上的今天 90 | 8: { 91 | 92 | }, 93 | //新事物 94 | 9: { 95 | 96 | }, 97 | //股市 98 | 10: { 99 | 100 | }, 101 | //基金 102 | 11: { 103 | 104 | }, 105 | //世界金融 106 | // 12: { 107 | 108 | // }, 109 | //待办事项 110 | 13: { 111 | 112 | }, 113 | //课程表 114 | 14: { 115 | 116 | }, 117 | //彩票 118 | 15: { 119 | 120 | }, 121 | //打卡 122 | 16: { 123 | 124 | }, 125 | // 旅行推荐 126 | 17: { 127 | 128 | }, 129 | // 世界时间 130 | 18: { 131 | 132 | }, 133 | } 134 | 135 | 136 | } -------------------------------------------------------------------------------- /pages/index/index.less: -------------------------------------------------------------------------------- 1 | @import "../../common/less/common.less"; 2 | 3 | page { 4 | position: relative; 5 | background-color: #fff; 6 | height: auto; 7 | padding-bottom: 96rpx; 8 | } 9 | 10 | .cover-page { 11 | padding: 20rpx 30rpx; 12 | font-weight: bold; 13 | 14 | .title { 15 | width: 100%; 16 | .medium-font(); 17 | color: @greyColor; 18 | } 19 | 20 | .show-box { 21 | margin: 30rpx 0; 22 | display: flex; 23 | height: 120rpx; 24 | align-items: flex-start; 25 | justify-content: space-evenly; 26 | } 27 | 28 | .article-title { 29 | margin-top: 30rpx; 30 | .big-font(); 31 | width: 100%; 32 | text-align: center; 33 | } 34 | 35 | .article-desc { 36 | width: 100%; 37 | text-align: center; 38 | .medium-font(); 39 | line-height: 70rpx; 40 | overflow: hidden; 41 | } 42 | 43 | .article-desc-limit { 44 | max-height: 490rpx; 45 | } 46 | 47 | .spread-button { 48 | display: block; 49 | margin-top: 10rpx; 50 | } 51 | } 52 | 53 | .popup-page { 54 | padding: 20rpx 30rpx; 55 | font-weight: bold; 56 | 57 | .popup-title { 58 | width: 100%; 59 | .big-font(); 60 | color: @blackColor; 61 | } 62 | 63 | .popup-desc { 64 | width: 100%; 65 | .medium-font(); 66 | color: @greyColor; 67 | margin: 30rpx 0; 68 | } 69 | } 70 | 71 | .container { 72 | position: relative; 73 | background-color: #ffffff; 74 | height: auto; 75 | padding: 20rpx 30rpx; 76 | // padding-bottom: 16rpx; 77 | 78 | .title-box { 79 | font-weight: bold; 80 | display: flex; 81 | flex-direction: column; 82 | align-items: center; 83 | justify-content: center; 84 | 85 | .head-icon { 86 | width: 300rpx; 87 | height: 300rpx; 88 | display: block; 89 | } 90 | 91 | .title { 92 | font-size: 40rpx; 93 | } 94 | 95 | .desc { 96 | display: flex; 97 | margin: 20rpx 0; 98 | color: #727986; 99 | font-size: 26rpx; 100 | } 101 | } 102 | 103 | .line-box { 104 | width: 100%; 105 | margin-top: 20rpx; 106 | padding-bottom: 30rpx; 107 | 108 | .line { 109 | width: 100%; 110 | height: 1rpx; 111 | margin: 30rpx 0; 112 | background-color: @lightGreyColor; 113 | } 114 | } 115 | } 116 | -------------------------------------------------------------------------------- /components/d-button/index.wxss: -------------------------------------------------------------------------------- 1 | .sline { 2 | overflow: hidden; 3 | text-overflow: ellipsis; 4 | white-space: nowrap; 5 | } 6 | .number-font { 7 | font-family: "Helvetica", "SimSun", "PingFang SC", "Microsoft YaHei"; 8 | } 9 | .card-title-font { 10 | font-size: 33rpx; 11 | line-height: 46rpx; 12 | } 13 | .big-font { 14 | font-size: 30rpx; 15 | line-height: 44rpx; 16 | } 17 | .medium-font { 18 | font-size: 28rpx; 19 | line-height: 40rpx; 20 | } 21 | .small-font { 22 | font-size: 26rpx; 23 | line-height: 36rpx; 24 | } 25 | .tiny-font { 26 | font-size: 20rpx; 27 | line-height: 26rpx; 28 | } 29 | .line-block { 30 | width: 100%; 31 | padding: 20rpx; 32 | background-color: rgba(0, 0, 0, 0.05); 33 | border-radius: 12rpx; 34 | } 35 | .light-line-block { 36 | width: 100%; 37 | padding: 20rpx; 38 | background-color: rgba(0, 0, 0, 0.03); 39 | border-radius: 12rpx; 40 | } 41 | .tip-block { 42 | white-space: nowrap; 43 | display: inline-block; 44 | font-size: 20rpx; 45 | line-height: 26rpx; 46 | padding: 5rpx 8rpx; 47 | border-radius: 6rpx; 48 | } 49 | @keyframes circleAns { 50 | 0% { 51 | transform: rotate(0deg); 52 | } 53 | 100% { 54 | transform: rotate(720deg); 55 | } 56 | } 57 | .com-button { 58 | display: inline-flex; 59 | color: #FFF; 60 | background-color: #16A085; 61 | font-weight: bold; 62 | align-items: center; 63 | justify-content: center; 64 | overflow: hidden; 65 | } 66 | .com-button .icon { 67 | display: inline-block; 68 | } 69 | .com-button .icon-loading { 70 | animation: circleAns 2s linear 0s infinite; 71 | } 72 | .com-button-tap { 73 | opacity: 0.86; 74 | transform: scale(0.98, 0.98); 75 | } 76 | .button-size-0 { 77 | padding: 0 20rpx; 78 | height: 80rpx; 79 | border-radius: 12rpx; 80 | font-size: 28rpx; 81 | line-height: 40rpx; 82 | } 83 | .button-size-0 .icon { 84 | margin-right: 8rpx; 85 | } 86 | .button-size-1 { 87 | padding: 0 14rpx; 88 | height: 60rpx; 89 | border-radius: 10rpx; 90 | font-size: 28rpx; 91 | line-height: 40rpx; 92 | } 93 | .button-size-1 .icon { 94 | margin-right: 6rpx; 95 | } 96 | .button-size-2 { 97 | padding: 0 12rpx; 98 | height: 54rpx; 99 | border-radius: 8rpx; 100 | font-size: 26rpx; 101 | line-height: 36rpx; 102 | } 103 | .button-size-2 .icon { 104 | margin-right: 6rpx; 105 | } 106 | -------------------------------------------------------------------------------- /components/d-spread-button/index.wxss: -------------------------------------------------------------------------------- 1 | .sline { 2 | overflow: hidden; 3 | text-overflow: ellipsis; 4 | white-space: nowrap; 5 | } 6 | .number-font { 7 | font-family: "Helvetica", "SimSun", "PingFang SC", "Microsoft YaHei"; 8 | } 9 | .card-title-font { 10 | font-size: 33rpx; 11 | line-height: 46rpx; 12 | } 13 | .big-font { 14 | font-size: 30rpx; 15 | line-height: 44rpx; 16 | } 17 | .medium-font { 18 | font-size: 28rpx; 19 | line-height: 40rpx; 20 | } 21 | .small-font { 22 | font-size: 26rpx; 23 | line-height: 36rpx; 24 | } 25 | .tiny-font { 26 | font-size: 20rpx; 27 | line-height: 26rpx; 28 | } 29 | .line-block { 30 | width: 100%; 31 | padding: 20rpx; 32 | background-color: rgba(0, 0, 0, 0.05); 33 | border-radius: 12rpx; 34 | } 35 | .light-line-block { 36 | width: 100%; 37 | padding: 20rpx; 38 | background-color: rgba(0, 0, 0, 0.03); 39 | border-radius: 12rpx; 40 | } 41 | .tip-block { 42 | white-space: nowrap; 43 | display: inline-block; 44 | font-size: 20rpx; 45 | line-height: 26rpx; 46 | padding: 5rpx 8rpx; 47 | border-radius: 6rpx; 48 | } 49 | .com-spread-button-box { 50 | width: 100%; 51 | height: 50rpx; 52 | display: flex; 53 | flex-direction: row; 54 | text-align: center; 55 | } 56 | .com-spread-button-box .spread-bg-line { 57 | flex: 1; 58 | height: 50%; 59 | border-bottom: 1px solid rgba(114, 121, 134, 0.2); 60 | } 61 | .com-spread-button-box .spread-button { 62 | height: 100%; 63 | display: inline-flex; 64 | align-items: center; 65 | justify-content: center; 66 | width: auto; 67 | padding: 0 20rpx; 68 | } 69 | .com-spread-button-box .spread-button .button-name { 70 | font-size: 28rpx; 71 | line-height: 40rpx; 72 | color: #16A085; 73 | font-weight: bold; 74 | } 75 | .com-spread-button-box .spread-button .button-icon { 76 | transform: rotate(90deg); 77 | display: inline-block; 78 | margin-left: 10rpx; 79 | transition: transform 0.3s linear 0s; 80 | } 81 | .com-spread-button-box .spread-button .button-loading { 82 | display: inline-block; 83 | margin-left: 10rpx; 84 | } 85 | .com-spread-button-box .spread-button .button-icon-spread { 86 | transform: rotate(270deg); 87 | } 88 | @keyframes circleAns { 89 | 0% { 90 | transform: rotate(0deg); 91 | } 92 | 100% { 93 | transform: rotate(720deg); 94 | } 95 | } 96 | .com-spread-button-box .spread-button .circleAns { 97 | animation: circleAns 1.6s linear 0s infinite; 98 | } 99 | -------------------------------------------------------------------------------- /pages/index/components/line/index.wxss: -------------------------------------------------------------------------------- 1 | .sline { 2 | overflow: hidden; 3 | text-overflow: ellipsis; 4 | white-space: nowrap; 5 | } 6 | .number-font { 7 | letter-spacing: 2rpx; 8 | font-family: "Helvetica", "SimSun", "PingFang SC", "Microsoft YaHei"; 9 | } 10 | .card-title-font { 11 | font-size: 33rpx; 12 | line-height: 46rpx; 13 | } 14 | .big-font { 15 | font-size: 30rpx; 16 | line-height: 44rpx; 17 | } 18 | .medium-font { 19 | font-size: 28rpx; 20 | line-height: 40rpx; 21 | } 22 | .small-font { 23 | font-size: 26rpx; 24 | line-height: 36rpx; 25 | } 26 | .tiny-font { 27 | font-size: 20rpx; 28 | line-height: 26rpx; 29 | } 30 | .line-block { 31 | width: 100%; 32 | padding: 20rpx; 33 | background-color: rgba(0, 0, 0, 0.05); 34 | border-radius: 12rpx; 35 | } 36 | .light-line-block { 37 | width: 100%; 38 | padding: 20rpx; 39 | background-color: rgba(0, 0, 0, 0.03); 40 | border-radius: 12rpx; 41 | } 42 | .tip-block { 43 | white-space: nowrap; 44 | display: inline-block; 45 | font-size: 20rpx; 46 | line-height: 26rpx; 47 | padding: 5rpx 8rpx; 48 | border-radius: 6rpx; 49 | } 50 | .line:not([size="mini"]) { 51 | width: 100%; 52 | } 53 | .line { 54 | width: 100%; 55 | padding: 20rpx; 56 | background-color: rgba(0, 0, 0, 0.05); 57 | border-radius: 12rpx; 58 | display: flex; 59 | flex-direction: column; 60 | color: #727986; 61 | font-weight: bold; 62 | margin-bottom: 30rpx; 63 | text-align: left; 64 | } 65 | .line .line-1 { 66 | display: flex; 67 | flex-direction: row; 68 | align-items: center; 69 | overflow: hidden; 70 | text-overflow: ellipsis; 71 | white-space: nowrap; 72 | } 73 | .line .line-1 .title { 74 | margin-right: 10rpx; 75 | flex: 1; 76 | font-size: 28rpx; 77 | line-height: 40rpx; 78 | } 79 | .line .line-1 .option { 80 | font-size: 28rpx; 81 | line-height: 40rpx; 82 | width: 64vw; 83 | } 84 | .line .line-1 .option .option-text { 85 | display: block; 86 | overflow: hidden; 87 | text-overflow: ellipsis; 88 | white-space: nowrap; 89 | text-align: right; 90 | } 91 | .line .line-1 .rightIcon { 92 | display: inline-block; 93 | margin-left: 10rpx; 94 | } 95 | .line .line-2 { 96 | margin-top: 10rpx; 97 | font-size: 28rpx; 98 | line-height: 40rpx; 99 | } 100 | .line-tap { 101 | opacity: 0.86; 102 | transform: scale(0.986, 0.986); 103 | } 104 | -------------------------------------------------------------------------------- /components/d-navigation/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: yp 3 | * @Date: 2021-03-01 11:32:15 4 | * @LastEditTime: 2022-04-08 17:00:39 5 | * @LastEditors: yp 6 | * @Description: In User Settings Edit 7 | * @FilePath: /daily-pre/miniprogram/components/naviagtion/navigation.js 8 | */ 9 | // components/naviagtion/navigation.js 10 | const app = getApp() 11 | 12 | //获取封装的微信按键震动 13 | const vibrateUtils = require('../../common/utils/vibrate-utils') 14 | 15 | Component({ 16 | /** 17 | * 组件的属性列表 18 | */ 19 | properties: { 20 | //是否为加载状态 21 | loading: { // 属性名 22 | type: Boolean, 23 | value: false 24 | }, 25 | title: { 26 | type: String, 27 | value: '' 28 | }, 29 | //是否显示左侧胶囊按钮 30 | iconShow: { 31 | type: Boolean, 32 | value: true 33 | }, 34 | textColor: { 35 | type: String, 36 | value: '#000' 37 | }, 38 | bgColor: { 39 | type: String, 40 | value: '#FFF' 41 | } 42 | }, 43 | 44 | /** 45 | * 组件的初始数据 46 | */ 47 | data: { 48 | //导航栏相关位置信息 49 | navHeight: app.globalData.navInfo.navHeight, 50 | menuLeft: app.globalData.navInfo.menuLeft, 51 | menuTop: app.globalData.navInfo.menuTop, 52 | menuHeight: app.globalData.navInfo.menuHeight, 53 | menuWidth: app.globalData.navInfo.menuWidth, 54 | menuIconWidth: app.globalData.navInfo.menuIconWidth, 55 | }, 56 | 57 | /** 58 | * 组件的方法列表 59 | */ 60 | methods: { 61 | 62 | 63 | /** 64 | * @description: 返回上一级菜单 65 | * @param {*} 66 | * @return {*} 67 | */ 68 | goBack() { 69 | 70 | if (this.data.loading) { 71 | return; 72 | } 73 | 74 | //震动 75 | vibrateUtils.vibrate(); 76 | 77 | if (typeof this.getTabBar === 'function' && 78 | this.getTabBar()) { 79 | //当前为tabbar页面 80 | wx.redirectTo({ 81 | url: '/pages/index/index' 82 | }) 83 | } else { 84 | if (getCurrentPages().length <= 1) { 85 | wx.reLaunch({ 86 | url: '/pages/index/index' 87 | }) 88 | } else { 89 | wx.navigateBack() 90 | } 91 | } 92 | }, 93 | 94 | /** 95 | * @description: 返回到主页面 96 | * @param {*} 97 | * @return {*} 98 | */ 99 | goMain() { 100 | //震动 101 | vibrateUtils.vibrate(); 102 | 103 | wx.reLaunch({ 104 | url: '/pages/index/index' 105 | }) 106 | 107 | } 108 | } 109 | }) -------------------------------------------------------------------------------- /components/d-picker/index.less: -------------------------------------------------------------------------------- 1 | .com-picker { 2 | position: fixed; 3 | overflow: hidden; 4 | width: 100%; 5 | height: 100%; 6 | background: rgba(0,0,0,.5); 7 | transition: all 0.3s ease-in-out; 8 | opacity: 0; 9 | visibility: hidden; 10 | z-index: 100; 11 | top:0; 12 | left:0; 13 | 14 | .movable-container{ 15 | width: 100%; 16 | height: 100%; 17 | position: absolute; 18 | left: 0; 19 | top:55%; 20 | opacity: 0; 21 | transform:translate3d(0,100%,0); 22 | transition:opacity 300ms,transform 300ms; 23 | 24 | .movable-inner{ 25 | width: 100%; 26 | height: 45%; 27 | background-color: #FFF; 28 | flex:1; 29 | border-radius: 12rpx 12rpx 0 0; 30 | 31 | overflow: hidden; 32 | display: flex; 33 | flex-direction: column; 34 | 35 | @borderHeight:100rpx; 36 | 37 | .header{ 38 | height: @borderHeight; 39 | border-bottom: 1px solid rgba(114,121,134,.2); 40 | display: flex; 41 | flex-direction: row; 42 | align-items: center; 43 | font-weight: bold; 44 | 45 | .cancel-item,.confirm-item{ 46 | line-height: @borderHeight; 47 | width: 18vw; 48 | min-width: 4rem; 49 | text-align: center; 50 | font-size: 32rpx; 51 | } 52 | 53 | .title{ 54 | flex:1; 55 | text-align:center; 56 | font-size: 32rpx; 57 | } 58 | 59 | .confirm-item{ 60 | position: relative; 61 | } 62 | 63 | @keyframes circleAns { 64 | 0%{ 65 | transform:rotate(0deg) 66 | } 67 | 100%{ 68 | transform:rotate(720deg) 69 | } 70 | } 71 | 72 | .circleAns{ 73 | position: absolute; 74 | z-index: 1; 75 | top:30%; 76 | animation: circleAns 1.6s linear 0s infinite; 77 | } 78 | } 79 | 80 | .picker-container{ 81 | width: 100%; 82 | flex:1; 83 | 84 | .picker-indicator{ 85 | height:100rpx; 86 | background-color: rgba(114,121,134,.05); 87 | display: flex; 88 | align-items: center; 89 | border-top:1rpx solid rgba(114,121,134,.1); 90 | border-bottom:1rpx solid rgba(114,121,134,.1); 91 | } 92 | 93 | .picker-item{ 94 | display: flex; 95 | align-items: center; 96 | text-align: center; 97 | font-weight: bold; 98 | font-size: 28rpx; 99 | .picker-item-text{ 100 | flex:1 101 | } 102 | } 103 | 104 | .picker-mask{ 105 | background:rgba(0,0,0,0); 106 | } 107 | } 108 | 109 | 110 | 111 | 112 | } 113 | 114 | } 115 | 116 | .content-show{ 117 | opacity: 1; 118 | transform:translate3d(0,0,0); 119 | } 120 | } 121 | 122 | .picker-mask-show{ 123 | visibility: visible; 124 | opacity: 1; 125 | } 126 | -------------------------------------------------------------------------------- /components/d-date-picker/index.less: -------------------------------------------------------------------------------- 1 | .com-date-picker { 2 | position: fixed; 3 | overflow: hidden; 4 | width: 100%; 5 | height: 100%; 6 | background: rgba(0,0,0,.5); 7 | transition: all 0.3s ease-in-out; 8 | opacity: 0; 9 | visibility: hidden; 10 | z-index: 100; 11 | top:0; 12 | left:0; 13 | 14 | .movable-container{ 15 | width: 100%; 16 | height: 100%; 17 | position: absolute; 18 | left: 0; 19 | top:55%; 20 | opacity: 0; 21 | transform:translate3d(0,100%,0); 22 | transition:opacity 300ms,transform 300ms; 23 | 24 | .movable-inner{ 25 | width: 100%; 26 | height: 45%; 27 | background-color: #FFF; 28 | flex:1; 29 | border-radius: 12rpx 12rpx 0 0; 30 | overflow: hidden; 31 | display: flex; 32 | flex-direction: column; 33 | 34 | @borderHeight:100rpx; 35 | 36 | .header{ 37 | height: @borderHeight; 38 | border-bottom: 1px solid rgba(114,121,134,.2); 39 | display: flex; 40 | flex-direction: row; 41 | align-items: center; 42 | font-weight: bold; 43 | 44 | .cancel-item,.confirm-item{ 45 | line-height: @borderHeight; 46 | width: 18vw; 47 | min-width: 4rem; 48 | text-align: center; 49 | font-size: 32rpx; 50 | } 51 | 52 | .title{ 53 | flex:1; 54 | text-align:center; 55 | font-size: 32rpx; 56 | } 57 | 58 | .confirm-item{ 59 | position: relative; 60 | } 61 | 62 | @keyframes circleAns { 63 | 0%{ 64 | transform:rotate(0deg) 65 | } 66 | 100%{ 67 | transform:rotate(720deg) 68 | } 69 | } 70 | 71 | .circleAns{ 72 | position: absolute; 73 | z-index: 1; 74 | top:30%; 75 | animation: circleAns 1.6s linear 0s infinite; 76 | } 77 | } 78 | 79 | .picker-container{ 80 | width: 100%; 81 | flex:1; 82 | 83 | .picker-indicator{ 84 | height:100rpx; 85 | background-color: rgba(114,121,134,.05); 86 | display: flex; 87 | align-items: center; 88 | border-top:1rpx solid rgba(114,121,134,.1); 89 | border-bottom:1rpx solid rgba(114,121,134,.1); 90 | } 91 | 92 | .picker-item{ 93 | display: flex; 94 | align-items: center; 95 | text-align: center; 96 | font-weight: bold; 97 | font-size: 28rpx; 98 | .picker-item-text{ 99 | flex:1 100 | } 101 | } 102 | 103 | .picker-mask{ 104 | background:rgba(0,0,0,0); 105 | } 106 | } 107 | 108 | 109 | 110 | 111 | } 112 | 113 | } 114 | 115 | .content-show{ 116 | opacity: 1; 117 | transform:translate3d(0,0,0); 118 | } 119 | } 120 | 121 | .date-picker-mask-show{ 122 | visibility: visible; 123 | opacity: 1; 124 | } 125 | -------------------------------------------------------------------------------- /components/d-picker/index.wxss: -------------------------------------------------------------------------------- 1 | .com-picker { 2 | position: fixed; 3 | overflow: hidden; 4 | width: 100%; 5 | height: 100%; 6 | background: rgba(0, 0, 0, 0.5); 7 | transition: all 0.3s ease-in-out; 8 | opacity: 0; 9 | visibility: hidden; 10 | z-index: 100; 11 | top: 0; 12 | left: 0; 13 | } 14 | .com-picker .movable-container { 15 | width: 100%; 16 | height: 100%; 17 | position: absolute; 18 | left: 0; 19 | top: 55%; 20 | opacity: 0; 21 | transform: translate3d(0, 100%, 0); 22 | transition: opacity 300ms,transform 300ms; 23 | } 24 | .com-picker .movable-container .movable-inner { 25 | width: 100%; 26 | height: 45%; 27 | background-color: #FFF; 28 | flex: 1; 29 | border-radius: 12rpx 12rpx 0 0; 30 | overflow: hidden; 31 | display: flex; 32 | flex-direction: column; 33 | } 34 | .com-picker .movable-container .movable-inner .header { 35 | height: 100rpx; 36 | border-bottom: 1px solid rgba(114, 121, 134, 0.2); 37 | display: flex; 38 | flex-direction: row; 39 | align-items: center; 40 | font-weight: bold; 41 | } 42 | .com-picker .movable-container .movable-inner .header .cancel-item, 43 | .com-picker .movable-container .movable-inner .header .confirm-item { 44 | line-height: 100rpx; 45 | width: 18vw; 46 | min-width: 4rem; 47 | text-align: center; 48 | font-size: 32rpx; 49 | } 50 | .com-picker .movable-container .movable-inner .header .title { 51 | flex: 1; 52 | text-align: center; 53 | font-size: 32rpx; 54 | } 55 | .com-picker .movable-container .movable-inner .header .confirm-item { 56 | position: relative; 57 | } 58 | @keyframes circleAns { 59 | 0% { 60 | transform: rotate(0deg); 61 | } 62 | 100% { 63 | transform: rotate(720deg); 64 | } 65 | } 66 | .com-picker .movable-container .movable-inner .header .circleAns { 67 | position: absolute; 68 | z-index: 1; 69 | top: 30%; 70 | animation: circleAns 1.6s linear 0s infinite; 71 | } 72 | .com-picker .movable-container .movable-inner .picker-container { 73 | width: 100%; 74 | flex: 1; 75 | } 76 | .com-picker .movable-container .movable-inner .picker-container .picker-indicator { 77 | height: 100rpx; 78 | background-color: rgba(114, 121, 134, 0.05); 79 | display: flex; 80 | align-items: center; 81 | border-top: 1rpx solid rgba(114, 121, 134, 0.1); 82 | border-bottom: 1rpx solid rgba(114, 121, 134, 0.1); 83 | } 84 | .com-picker .movable-container .movable-inner .picker-container .picker-item { 85 | display: flex; 86 | align-items: center; 87 | text-align: center; 88 | font-weight: bold; 89 | font-size: 28rpx; 90 | } 91 | .com-picker .movable-container .movable-inner .picker-container .picker-item .picker-item-text { 92 | flex: 1; 93 | } 94 | .com-picker .movable-container .movable-inner .picker-container .picker-mask { 95 | background: rgba(0, 0, 0, 0); 96 | } 97 | .com-picker .content-show { 98 | opacity: 1; 99 | transform: translate3d(0, 0, 0); 100 | } 101 | .picker-mask-show { 102 | visibility: visible; 103 | opacity: 1; 104 | } 105 | -------------------------------------------------------------------------------- /components/d-date-picker/index.wxss: -------------------------------------------------------------------------------- 1 | .com-date-picker { 2 | position: fixed; 3 | overflow: hidden; 4 | width: 100%; 5 | height: 100%; 6 | background: rgba(0, 0, 0, 0.5); 7 | transition: all 0.3s ease-in-out; 8 | opacity: 0; 9 | visibility: hidden; 10 | z-index: 100; 11 | top: 0; 12 | left: 0; 13 | } 14 | .com-date-picker .movable-container { 15 | width: 100%; 16 | height: 100%; 17 | position: absolute; 18 | left: 0; 19 | top: 55%; 20 | opacity: 0; 21 | transform: translate3d(0, 100%, 0); 22 | transition: opacity 300ms,transform 300ms; 23 | } 24 | .com-date-picker .movable-container .movable-inner { 25 | width: 100%; 26 | height: 45%; 27 | background-color: #FFF; 28 | flex: 1; 29 | border-radius: 12rpx 12rpx 0 0; 30 | overflow: hidden; 31 | display: flex; 32 | flex-direction: column; 33 | } 34 | .com-date-picker .movable-container .movable-inner .header { 35 | height: 100rpx; 36 | border-bottom: 1px solid rgba(114, 121, 134, 0.2); 37 | display: flex; 38 | flex-direction: row; 39 | align-items: center; 40 | font-weight: bold; 41 | } 42 | .com-date-picker .movable-container .movable-inner .header .cancel-item, 43 | .com-date-picker .movable-container .movable-inner .header .confirm-item { 44 | line-height: 100rpx; 45 | width: 18vw; 46 | min-width: 4rem; 47 | text-align: center; 48 | font-size: 32rpx; 49 | } 50 | .com-date-picker .movable-container .movable-inner .header .title { 51 | flex: 1; 52 | text-align: center; 53 | font-size: 32rpx; 54 | } 55 | .com-date-picker .movable-container .movable-inner .header .confirm-item { 56 | position: relative; 57 | } 58 | @keyframes circleAns { 59 | 0% { 60 | transform: rotate(0deg); 61 | } 62 | 100% { 63 | transform: rotate(720deg); 64 | } 65 | } 66 | .com-date-picker .movable-container .movable-inner .header .circleAns { 67 | position: absolute; 68 | z-index: 1; 69 | top: 30%; 70 | animation: circleAns 1.6s linear 0s infinite; 71 | } 72 | .com-date-picker .movable-container .movable-inner .picker-container { 73 | width: 100%; 74 | flex: 1; 75 | } 76 | .com-date-picker .movable-container .movable-inner .picker-container .picker-indicator { 77 | height: 100rpx; 78 | background-color: rgba(114, 121, 134, 0.05); 79 | display: flex; 80 | align-items: center; 81 | border-top: 1rpx solid rgba(114, 121, 134, 0.1); 82 | border-bottom: 1rpx solid rgba(114, 121, 134, 0.1); 83 | } 84 | .com-date-picker .movable-container .movable-inner .picker-container .picker-item { 85 | display: flex; 86 | align-items: center; 87 | text-align: center; 88 | font-weight: bold; 89 | font-size: 28rpx; 90 | } 91 | .com-date-picker .movable-container .movable-inner .picker-container .picker-item .picker-item-text { 92 | flex: 1; 93 | } 94 | .com-date-picker .movable-container .movable-inner .picker-container .picker-mask { 95 | background: rgba(0, 0, 0, 0); 96 | } 97 | .com-date-picker .content-show { 98 | opacity: 1; 99 | transform: translate3d(0, 0, 0); 100 | } 101 | .date-picker-mask-show { 102 | visibility: visible; 103 | opacity: 1; 104 | } 105 | -------------------------------------------------------------------------------- /components/d-list-picker/index.wxss: -------------------------------------------------------------------------------- 1 | .com-list-picker { 2 | position: fixed; 3 | overflow: hidden; 4 | width: 100%; 5 | height: 100%; 6 | background: rgba(0, 0, 0, 0.5); 7 | transition: all 0.3s ease-in-out; 8 | opacity: 0; 9 | visibility: hidden; 10 | z-index: 100; 11 | top: 0; 12 | left: 0; 13 | } 14 | .com-list-picker .movable-container { 15 | width: 100%; 16 | height: 100%; 17 | position: absolute; 18 | left: 0; 19 | top: 30%; 20 | opacity: 0; 21 | transform: translate3d(0, 100%, 0); 22 | transition: opacity 300ms,transform 300ms; 23 | } 24 | .com-list-picker .movable-container .movable-inner { 25 | width: 100%; 26 | height: 70%; 27 | background-color: #FFF; 28 | flex: 1; 29 | border-radius: 12rpx 12rpx 0 0; 30 | overflow: hidden; 31 | display: flex; 32 | flex-direction: column; 33 | } 34 | .com-list-picker .movable-container .movable-inner .header { 35 | height: 100rpx; 36 | border-bottom: 1px solid rgba(114, 121, 134, 0.2); 37 | display: flex; 38 | flex-direction: row; 39 | align-items: center; 40 | font-weight: bold; 41 | padding: 0 4vw; 42 | } 43 | .com-list-picker .movable-container .movable-inner .header .title { 44 | flex: 1; 45 | font-size: 32rpx; 46 | } 47 | .com-list-picker .movable-container .movable-inner .header .cancel-item { 48 | line-height: 100rpx; 49 | } 50 | .com-list-picker .movable-container .movable-inner .check-line-list { 51 | width: 100%; 52 | padding: 0 4vw; 53 | display: flex; 54 | flex-direction: column ; 55 | } 56 | .com-list-picker .movable-container .movable-inner .check-line-list .check-line { 57 | vertical-align: middle; 58 | border-bottom: 1px dashed rgba(114, 121, 134, 0.2); 59 | font-size: 28rpx; 60 | font-weight: bold; 61 | display: flex; 62 | align-items: center; 63 | } 64 | .com-list-picker .movable-container .movable-inner .check-line-list .check-line:last-of-type { 65 | border-bottom-color: rgba(0, 0, 0, 0); 66 | } 67 | .com-list-picker .movable-container .movable-inner .check-line-list .check-line .check-line-title { 68 | display: flex; 69 | flex: 1 ; 70 | height: 100%; 71 | margin-left: 2vw; 72 | overflow: hidden; 73 | flex-direction: column; 74 | } 75 | .com-list-picker .movable-container .movable-inner .check-line-list .check-line .check-line-title .title { 76 | flex: 1; 77 | text-overflow: ellipsis; 78 | white-space: nowrap; 79 | font-size: 28rpx; 80 | overflow: hidden; 81 | width: 100%; 82 | display: flex; 83 | align-items: flex-end; 84 | } 85 | .com-list-picker .movable-container .movable-inner .check-line-list .check-line .check-line-title .desc { 86 | text-overflow: ellipsis; 87 | white-space: nowrap; 88 | font-size: 26rpx; 89 | overflow: hidden; 90 | width: 100%; 91 | flex: 1; 92 | color: #727986; 93 | } 94 | .com-list-picker .movable-container .movable-inner .check-line-list .check-line .right-icon { 95 | display: inline-block; 96 | margin: 0 2vw; 97 | } 98 | .com-list-picker .content-show { 99 | opacity: 1; 100 | transform: translate3d(0, 0, 0); 101 | } 102 | .list-picker-mask-show { 103 | visibility: visible; 104 | opacity: 1; 105 | } 106 | -------------------------------------------------------------------------------- /components/d-list-picker/index.less: -------------------------------------------------------------------------------- 1 | .com-list-picker { 2 | position: fixed; 3 | overflow: hidden; 4 | width: 100%; 5 | height: 100%; 6 | background: rgba(0,0,0,.5); 7 | transition: all 0.3s ease-in-out; 8 | opacity: 0; 9 | visibility: hidden; 10 | z-index: 100; 11 | top:0; 12 | left:0; 13 | 14 | .movable-container{ 15 | width: 100%; 16 | height: 100%; 17 | position: absolute; 18 | left: 0; 19 | top: 30%; 20 | opacity: 0; 21 | transform:translate3d(0,100%,0); 22 | transition:opacity 300ms,transform 300ms; 23 | 24 | .movable-inner{ 25 | width: 100%; 26 | height: 70%; 27 | background-color: #FFF; 28 | flex:1; 29 | border-radius: 12rpx 12rpx 0 0; 30 | overflow: hidden; 31 | display: flex; 32 | flex-direction: column; 33 | 34 | @borderHeight:100rpx; 35 | 36 | .header{ 37 | height: @borderHeight; 38 | border-bottom: 1px solid rgba(114,121,134,.2); 39 | display: flex; 40 | flex-direction: row; 41 | align-items: center; 42 | font-weight: bold; 43 | padding:0 4vw; 44 | 45 | 46 | .title{ 47 | flex:1; 48 | font-size: 32rpx; 49 | } 50 | 51 | .cancel-item{ 52 | line-height: @borderHeight; 53 | } 54 | 55 | 56 | } 57 | 58 | .check-line-list{ 59 | width: 100%; 60 | padding:0 4vw; 61 | display: flex; 62 | flex-direction: column ; 63 | 64 | .check-line{ 65 | vertical-align: middle; 66 | border-bottom: 1px dashed rgba(114,121,134,.2); 67 | font-size: 28rpx; 68 | font-weight: bold; 69 | display: flex; 70 | align-items: center; 71 | 72 | &:last-of-type{ 73 | border-bottom-color:rgba(0,0,0,0); 74 | } 75 | 76 | .check-line-title{ 77 | display: flex; 78 | flex :1 ; 79 | height: 100%; 80 | margin-left:2vw; 81 | overflow: hidden; 82 | flex-direction: column; 83 | 84 | .title{ 85 | flex:1; 86 | text-overflow: ellipsis; 87 | white-space: nowrap; 88 | font-size: 28rpx; 89 | overflow: hidden; 90 | width: 100%; 91 | display: flex; 92 | align-items:flex-end; 93 | } 94 | 95 | .desc{ 96 | text-overflow: ellipsis; 97 | white-space: nowrap; 98 | font-size: 26rpx; 99 | overflow: hidden; 100 | width: 100%; 101 | flex:1; 102 | color:#727986; 103 | } 104 | 105 | } 106 | 107 | .right-icon{ 108 | display: inline-block; 109 | margin:0 2vw; 110 | } 111 | } 112 | } 113 | 114 | 115 | 116 | 117 | 118 | 119 | } 120 | 121 | } 122 | 123 | .content-show{ 124 | opacity: 1; 125 | transform:translate3d(0,0,0); 126 | } 127 | } 128 | 129 | .list-picker-mask-show{ 130 | visibility: visible; 131 | opacity: 1; 132 | } 133 | -------------------------------------------------------------------------------- /pages/index/index.wxss: -------------------------------------------------------------------------------- 1 | .sline { 2 | overflow: hidden; 3 | text-overflow: ellipsis; 4 | white-space: nowrap; 5 | } 6 | .number-font { 7 | letter-spacing: 2rpx; 8 | font-family: "Helvetica", "SimSun", "PingFang SC", "Microsoft YaHei"; 9 | } 10 | .card-title-font { 11 | font-size: 33rpx; 12 | line-height: 46rpx; 13 | } 14 | .big-font { 15 | font-size: 30rpx; 16 | line-height: 44rpx; 17 | } 18 | .medium-font { 19 | font-size: 28rpx; 20 | line-height: 40rpx; 21 | } 22 | .small-font { 23 | font-size: 26rpx; 24 | line-height: 36rpx; 25 | } 26 | .tiny-font { 27 | font-size: 20rpx; 28 | line-height: 26rpx; 29 | } 30 | .line-block { 31 | width: 100%; 32 | padding: 20rpx; 33 | background-color: rgba(0, 0, 0, 0.05); 34 | border-radius: 12rpx; 35 | } 36 | .light-line-block { 37 | width: 100%; 38 | padding: 20rpx; 39 | background-color: rgba(0, 0, 0, 0.03); 40 | border-radius: 12rpx; 41 | } 42 | .tip-block { 43 | white-space: nowrap; 44 | display: inline-block; 45 | font-size: 20rpx; 46 | line-height: 26rpx; 47 | padding: 5rpx 8rpx; 48 | border-radius: 6rpx; 49 | } 50 | page { 51 | position: relative; 52 | background-color: #fff; 53 | height: auto; 54 | padding-bottom: 96rpx; 55 | } 56 | .cover-page { 57 | padding: 20rpx 30rpx; 58 | font-weight: bold; 59 | } 60 | .cover-page .title { 61 | width: 100%; 62 | font-size: 28rpx; 63 | line-height: 40rpx; 64 | color: #727986; 65 | } 66 | .cover-page .show-box { 67 | margin: 30rpx 0; 68 | display: flex; 69 | height: 120rpx; 70 | align-items: flex-start; 71 | justify-content: space-evenly; 72 | } 73 | .cover-page .article-title { 74 | margin-top: 30rpx; 75 | font-size: 30rpx; 76 | line-height: 44rpx; 77 | width: 100%; 78 | text-align: center; 79 | } 80 | .cover-page .article-desc { 81 | width: 100%; 82 | text-align: center; 83 | font-size: 28rpx; 84 | line-height: 40rpx; 85 | line-height: 70rpx; 86 | overflow: hidden; 87 | } 88 | .cover-page .article-desc-limit { 89 | max-height: 490rpx; 90 | } 91 | .cover-page .spread-button { 92 | display: block; 93 | margin-top: 10rpx; 94 | } 95 | .popup-page { 96 | padding: 20rpx 30rpx; 97 | font-weight: bold; 98 | } 99 | .popup-page .popup-title { 100 | width: 100%; 101 | font-size: 30rpx; 102 | line-height: 44rpx; 103 | color: #444444; 104 | } 105 | .popup-page .popup-desc { 106 | width: 100%; 107 | font-size: 28rpx; 108 | line-height: 40rpx; 109 | color: #727986; 110 | margin: 30rpx 0; 111 | } 112 | .container { 113 | position: relative; 114 | background-color: #ffffff; 115 | height: auto; 116 | padding: 20rpx 30rpx; 117 | } 118 | .container .title-box { 119 | font-weight: bold; 120 | display: flex; 121 | flex-direction: column; 122 | align-items: center; 123 | justify-content: center; 124 | } 125 | .container .title-box .head-icon { 126 | width: 300rpx; 127 | height: 300rpx; 128 | display: block; 129 | } 130 | .container .title-box .title { 131 | font-size: 40rpx; 132 | } 133 | .container .title-box .desc { 134 | display: flex; 135 | margin: 20rpx 0; 136 | color: #727986; 137 | font-size: 26rpx; 138 | } 139 | .container .line-box { 140 | width: 100%; 141 | margin-top: 20rpx; 142 | padding-bottom: 30rpx; 143 | } 144 | .container .line-box .line { 145 | width: 100%; 146 | height: 1rpx; 147 | margin: 30rpx 0; 148 | background-color: rgba(114, 121, 134, 0.2); 149 | } 150 | -------------------------------------------------------------------------------- /components/d-checkbox-picker/index.less: -------------------------------------------------------------------------------- 1 | .com-checkbox-picker { 2 | position: fixed; 3 | overflow: hidden; 4 | width: 100%; 5 | height: 100%; 6 | background: rgba(0,0,0,.5); 7 | transition: all 0.3s ease-in-out; 8 | opacity: 0; 9 | visibility: hidden; 10 | z-index: 100; 11 | top:0; 12 | left:0; 13 | 14 | .movable-container{ 15 | width: 100%; 16 | height: 100%; 17 | position: absolute; 18 | left: 0; 19 | top: 30%; 20 | opacity: 0; 21 | transform:translate3d(0,100%,0); 22 | transition:opacity 300ms,transform 300ms; 23 | 24 | .movable-inner{ 25 | width: 100%; 26 | height: 70%; 27 | background-color: #FFF; 28 | flex:1; 29 | border-radius: 12rpx 12rpx 0 0; 30 | overflow: hidden; 31 | display: flex; 32 | flex-direction: column; 33 | 34 | @borderHeight:100rpx; 35 | 36 | .header{ 37 | height: @borderHeight; 38 | border-bottom: 1px solid rgba(114,121,134,.2); 39 | display: flex; 40 | flex-direction: row; 41 | align-items: center; 42 | font-weight: bold; 43 | 44 | .cancel-item,.confirm-item{ 45 | line-height: @borderHeight; 46 | width: 18vw; 47 | min-width: 4rem; 48 | text-align: center; 49 | font-size: 32rpx; 50 | } 51 | 52 | .title{ 53 | flex:1; 54 | text-align:center; 55 | font-size: 32rpx; 56 | } 57 | 58 | .confirm-item{ 59 | position: relative; 60 | } 61 | 62 | @keyframes circleAns { 63 | 0%{ 64 | transform:rotate(0deg) 65 | } 66 | 100%{ 67 | transform:rotate(720deg) 68 | } 69 | } 70 | 71 | .circleAns{ 72 | position: absolute; 73 | z-index: 1; 74 | top:30%; 75 | animation: circleAns 1.6s linear 0s infinite; 76 | } 77 | } 78 | 79 | .check-line-list{ 80 | width: 100%; 81 | padding:0 4vw; 82 | display: flex; 83 | flex-direction: column ; 84 | 85 | .check-line{ 86 | vertical-align: middle; 87 | border-bottom: 1px dashed rgba(114,121,134,.2); 88 | font-size: 28rpx; 89 | font-weight: bold; 90 | display: flex; 91 | align-items: center; 92 | 93 | &:last-of-type{ 94 | border-bottom-color:rgba(0,0,0,0); 95 | } 96 | 97 | .check-line-title{ 98 | display: block; 99 | flex :1 ; 100 | line-height: 110rpx; 101 | height: 100%; 102 | margin-left:2vw; 103 | overflow: hidden; 104 | text-overflow: ellipsis; 105 | white-space: nowrap; 106 | font-size: 28rpx; 107 | } 108 | 109 | 110 | .check-box-container{ 111 | width:36rpx; 112 | height:36rpx; 113 | border:4rpx solid rgba(114,121,134,.4); 114 | border-radius: 8rpx; 115 | margin-right:2vw; 116 | background-color: #FFF; 117 | transition:border-color,background-color 50ms linear 0s ; 118 | } 119 | 120 | .check-box-container-selected{ 121 | border-color: #16A085; 122 | background-color:#16A085; 123 | } 124 | 125 | } 126 | } 127 | 128 | } 129 | 130 | } 131 | 132 | .content-show{ 133 | opacity: 1; 134 | transform:translate3d(0,0,0); 135 | } 136 | } 137 | 138 | .checkbox-picker-mask-show{ 139 | visibility: visible; 140 | opacity: 1; 141 | } 142 | -------------------------------------------------------------------------------- /components/d-card/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | {{title}} 17 | 18 | 19 | 20 | 21 | {{status===0?'卡片数据努力加载中…':desc}} 22 | 23 | 24 | 25 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 数据加载失败，重试一下~ 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 加载中… 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 暂无数据 91 | 92 | 93 | 94 | 95 | 96 | -------------------------------------------------------------------------------- /components/d-checkbox-picker/index.wxss: -------------------------------------------------------------------------------- 1 | .com-checkbox-picker { 2 | position: fixed; 3 | overflow: hidden; 4 | width: 100%; 5 | height: 100%; 6 | background: rgba(0, 0, 0, 0.5); 7 | transition: all 0.3s ease-in-out; 8 | opacity: 0; 9 | visibility: hidden; 10 | z-index: 100; 11 | top: 0; 12 | left: 0; 13 | } 14 | .com-checkbox-picker .movable-container { 15 | width: 100%; 16 | height: 100%; 17 | position: absolute; 18 | left: 0; 19 | top: 30%; 20 | opacity: 0; 21 | transform: translate3d(0, 100%, 0); 22 | transition: opacity 300ms,transform 300ms; 23 | } 24 | .com-checkbox-picker .movable-container .movable-inner { 25 | width: 100%; 26 | height: 70%; 27 | background-color: #FFF; 28 | flex: 1; 29 | border-radius: 12rpx 12rpx 0 0; 30 | overflow: hidden; 31 | display: flex; 32 | flex-direction: column; 33 | } 34 | .com-checkbox-picker .movable-container .movable-inner .header { 35 | height: 100rpx; 36 | border-bottom: 1px solid rgba(114, 121, 134, 0.2); 37 | display: flex; 38 | flex-direction: row; 39 | align-items: center; 40 | font-weight: bold; 41 | } 42 | .com-checkbox-picker .movable-container .movable-inner .header .cancel-item, 43 | .com-checkbox-picker .movable-container .movable-inner .header .confirm-item { 44 | line-height: 100rpx; 45 | width: 18vw; 46 | min-width: 4rem; 47 | text-align: center; 48 | font-size: 32rpx; 49 | } 50 | .com-checkbox-picker .movable-container .movable-inner .header .title { 51 | flex: 1; 52 | text-align: center; 53 | font-size: 32rpx; 54 | } 55 | .com-checkbox-picker .movable-container .movable-inner .header .confirm-item { 56 | position: relative; 57 | } 58 | @keyframes circleAns { 59 | 0% { 60 | transform: rotate(0deg); 61 | } 62 | 100% { 63 | transform: rotate(720deg); 64 | } 65 | } 66 | .com-checkbox-picker .movable-container .movable-inner .header .circleAns { 67 | position: absolute; 68 | z-index: 1; 69 | top: 30%; 70 | animation: circleAns 1.6s linear 0s infinite; 71 | } 72 | .com-checkbox-picker .movable-container .movable-inner .check-line-list { 73 | width: 100%; 74 | padding: 0 4vw; 75 | display: flex; 76 | flex-direction: column ; 77 | } 78 | .com-checkbox-picker .movable-container .movable-inner .check-line-list .check-line { 79 | vertical-align: middle; 80 | border-bottom: 1px dashed rgba(114, 121, 134, 0.2); 81 | font-size: 28rpx; 82 | font-weight: bold; 83 | display: flex; 84 | align-items: center; 85 | } 86 | .com-checkbox-picker .movable-container .movable-inner .check-line-list .check-line:last-of-type { 87 | border-bottom-color: rgba(0, 0, 0, 0); 88 | } 89 | .com-checkbox-picker .movable-container .movable-inner .check-line-list .check-line .check-line-title { 90 | display: block; 91 | flex: 1 ; 92 | line-height: 110rpx; 93 | height: 100%; 94 | margin-left: 2vw; 95 | overflow: hidden; 96 | text-overflow: ellipsis; 97 | white-space: nowrap; 98 | font-size: 28rpx; 99 | } 100 | .com-checkbox-picker .movable-container .movable-inner .check-line-list .check-line .check-box-container { 101 | width: 36rpx; 102 | height: 36rpx; 103 | border: 4rpx solid rgba(114, 121, 134, 0.4); 104 | border-radius: 8rpx; 105 | margin-right: 2vw; 106 | background-color: #FFF; 107 | transition: border-color, background-color 50ms linear 0s; 108 | } 109 | .com-checkbox-picker .movable-container .movable-inner .check-line-list .check-line .check-box-container-selected { 110 | border-color: #16A085; 111 | background-color: #16A085; 112 | } 113 | .com-checkbox-picker .content-show { 114 | opacity: 1; 115 | transform: translate3d(0, 0, 0); 116 | } 117 | .checkbox-picker-mask-show { 118 | visibility: visible; 119 | opacity: 1; 120 | } 121 | -------------------------------------------------------------------------------- /components/d-orderbox-picker/index.less: -------------------------------------------------------------------------------- 1 | .com-checkbox-picker { 2 | position: fixed; 3 | overflow: hidden; 4 | width: 100%; 5 | height: 100%; 6 | background: rgba(0,0,0,.5); 7 | transition: all 0.3s ease-in-out; 8 | opacity: 0; 9 | visibility: hidden; 10 | z-index: 100; 11 | top:0; 12 | left:0; 13 | 14 | .movable-container{ 15 | width: 100%; 16 | height: 100%; 17 | position: absolute; 18 | left: 0; 19 | top: 30%; 20 | opacity: 0; 21 | transform:translate3d(0,100%,0); 22 | transition:opacity 300ms,transform 300ms; 23 | 24 | .movable-inner{ 25 | width: 100%; 26 | height: 70%; 27 | background-color: #FFF; 28 | flex:1; 29 | border-radius: 12rpx 12rpx 0 0; 30 | overflow: hidden; 31 | display: flex; 32 | flex-direction: column; 33 | 34 | @borderHeight:100rpx; 35 | 36 | .header{ 37 | height: @borderHeight; 38 | border-bottom: 1px solid rgba(114,121,134,.2); 39 | display: flex; 40 | flex-direction: row; 41 | align-items: center; 42 | font-weight: bold; 43 | 44 | .cancel-item,.confirm-item{ 45 | line-height: @borderHeight; 46 | width: 18vw; 47 | min-width: 4rem; 48 | text-align: center; 49 | font-size: 32rpx; 50 | } 51 | 52 | .title{ 53 | flex:1; 54 | text-align:center; 55 | font-size: 32rpx; 56 | } 57 | 58 | .confirm-item{ 59 | position: relative; 60 | } 61 | 62 | @keyframes circleAns { 63 | 0%{ 64 | transform:rotate(0deg) 65 | } 66 | 100%{ 67 | transform:rotate(720deg) 68 | } 69 | } 70 | 71 | .circleAns{ 72 | position: absolute; 73 | z-index: 1; 74 | top:30%; 75 | animation: circleAns 1.6s linear 0s infinite; 76 | } 77 | } 78 | 79 | .check-line-list{ 80 | width: 100%; 81 | padding:0 4vw; 82 | display: flex; 83 | flex-direction: column ; 84 | 85 | .check-line{ 86 | vertical-align: middle; 87 | border-bottom: 1px dashed rgba(114,121,134,.2); 88 | font-size: 28rpx; 89 | font-weight: bold; 90 | display: flex; 91 | align-items: center; 92 | 93 | &:last-of-type{ 94 | border-bottom-color:rgba(0,0,0,0); 95 | } 96 | 97 | .check-line-title{ 98 | display: block; 99 | flex :1 ; 100 | line-height: 110rpx; 101 | height: 100%; 102 | margin-left:2vw; 103 | overflow: hidden; 104 | text-overflow: ellipsis; 105 | white-space: nowrap; 106 | font-size: 28rpx; 107 | } 108 | 109 | 110 | .check-box-container{ 111 | width:36rpx; 112 | height:36rpx; 113 | border:4rpx solid rgba(114,121,134,.4); 114 | border-radius: 8rpx; 115 | margin-right:2vw; 116 | background-color: #FFF; 117 | transition:border-color,background-color 50ms linear 0s ; 118 | overflow: hidden; 119 | } 120 | 121 | .check-box-container-selected{ 122 | border-color: #16A085; 123 | background-color:#16A085; 124 | overflow: hidden; 125 | } 126 | 127 | .number-text{ 128 | color:#FFF; 129 | display: inline-block; 130 | width: 100%; 131 | font-size: 24rpx; 132 | line-height: 30rpx; 133 | text-align: center; 134 | font-weight: bolder; 135 | vertical-align: top; 136 | } 137 | 138 | } 139 | } 140 | 141 | } 142 | 143 | } 144 | 145 | .content-show{ 146 | opacity: 1; 147 | transform:translate3d(0,0,0); 148 | } 149 | } 150 | 151 | .checkbox-picker-mask-show{ 152 | visibility: visible; 153 | opacity: 1; 154 | } 155 | -------------------------------------------------------------------------------- /components/d-picker/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 3 | * @Author: yp 4 | * @Date: 2021-03-08 10:57:31 5 | * @LastEditTime: 2022-02-07 18:10:06 6 | * @LastEditors: yp 7 | */ 8 | // components/d-picker/index.js 9 | 10 | //获取封装的微信按键震动 11 | const vibrateUtils = require('../../common/utils/vibrate-utils') 12 | 13 | let dragY = 0 14 | 15 | Component({ 16 | options: { 17 | pureDataPattern: /^_/, // 指定所有 _ 开头的数据字段为纯数据字段 18 | }, 19 | /** 20 | * 组件的属性列表 21 | */ 22 | properties: { 23 | //弹窗是否可见 24 | visible: { 25 | type: Boolean, 26 | value: true, 27 | observer(visible) { 28 | if (visible) { 29 | const defaultValue = this.data.value 30 | if (!this.data.value || this.data.value.length <= 0) { 31 | if (this.data.options && this.data.options.length > 0) { 32 | defaultValue.length = this.data.options.length 33 | defaultValue.fill(0) 34 | } 35 | } 36 | this.setData({ 37 | y: 0, 38 | loading: false, 39 | value: defaultValue, 40 | }) 41 | } 42 | }, 43 | }, 44 | //标题 45 | title: { 46 | type: String, 47 | value: '', 48 | }, 49 | //取消按钮字体颜色 50 | cancelTextColor: { 51 | type: String, 52 | value: '#727986', 53 | }, 54 | //确认按钮字体颜色 55 | confirmTextColor: { 56 | type: String, 57 | value: '#16A085', 58 | }, 59 | //当前初始索引数组 60 | value: { 61 | type: Array, 62 | value: [], 63 | observer(value) { 64 | this.setData({ 65 | _resultValue: value, 66 | }) 67 | }, 68 | }, 69 | options: { 70 | type: Array, 71 | value: [], 72 | }, 73 | }, 74 | 75 | /** 76 | * 组件的初始数据 77 | */ 78 | data: { 79 | //可移动区域 80 | y: 0, 81 | loading: false, 82 | 83 | _resultValue: [], 84 | }, 85 | 86 | /** 87 | * 组件的方法列表 88 | */ 89 | methods: { 90 | /** 91 | * 处理触摸滚动问题 92 | */ 93 | handleCatchTouchMove() { 94 | return false 95 | }, 96 | 97 | /** 98 | * @description: 关闭弹窗 99 | * @param {*} 100 | * @return {*} 101 | */ 102 | onClose() { 103 | this.setData({ 104 | visible: false, 105 | }) 106 | this.triggerEvent('onClose', {}, {}) 107 | }, 108 | 109 | /** 110 | * @description: 拖动事件回调 111 | * @param {*} e 112 | * @return {*} 113 | */ 114 | dragMove(e) { 115 | dragY = e.detail.y 116 | }, 117 | 118 | /** 119 | * @description: 触摸结束事件回调 120 | * @param {*} e 121 | * @return {*} 122 | */ 123 | toucheEnd() { 124 | if (dragY < 70) { 125 | this.setData({ 126 | y: 0, 127 | }) 128 | } else { 129 | this.onClose() 130 | } 131 | dragY = 0 132 | }, 133 | 134 | /** 135 | * @description: 选择器开始转动 136 | * @param {*} 137 | * @return {*} 138 | */ 139 | pickerStart() { 140 | this.setData({ 141 | loading: true, 142 | }) 143 | }, 144 | 145 | /** 146 | * @description: 选择器停止转动 147 | * @param {*} 148 | * @return {*} 149 | */ 150 | pickerEnd() { 151 | this.setData({ 152 | loading: false, 153 | }) 154 | }, 155 | 156 | pickerChanged(e) { 157 | const { 158 | value 159 | } = e.detail 160 | this.setData({ 161 | _resultValue: value, 162 | }) 163 | }, 164 | 165 | /** 166 | * @description: 确认选择 167 | * @param {*} 168 | * @return {*} 169 | */ 170 | onConfirm() { 171 | 172 | //震动 173 | vibrateUtils.vibrate(); 174 | 175 | const { 176 | loading, 177 | _resultValue 178 | } = this.data 179 | if (loading) { 180 | return false 181 | } 182 | this.onClose() 183 | 184 | //将选中信息返回调用者 185 | this.triggerEvent('onConfirm', { 186 | value: _resultValue 187 | }, {}) 188 | }, 189 | }, 190 | }) -------------------------------------------------------------------------------- /components/d-orderbox-picker/index.wxss: -------------------------------------------------------------------------------- 1 | .com-checkbox-picker { 2 | position: fixed; 3 | overflow: hidden; 4 | width: 100%; 5 | height: 100%; 6 | background: rgba(0, 0, 0, 0.5); 7 | transition: all 0.3s ease-in-out; 8 | opacity: 0; 9 | visibility: hidden; 10 | z-index: 100; 11 | top: 0; 12 | left: 0; 13 | } 14 | .com-checkbox-picker .movable-container { 15 | width: 100%; 16 | height: 100%; 17 | position: absolute; 18 | left: 0; 19 | top: 30%; 20 | opacity: 0; 21 | transform: translate3d(0, 100%, 0); 22 | transition: opacity 300ms,transform 300ms; 23 | } 24 | .com-checkbox-picker .movable-container .movable-inner { 25 | width: 100%; 26 | height: 70%; 27 | background-color: #FFF; 28 | flex: 1; 29 | border-radius: 12rpx 12rpx 0 0; 30 | overflow: hidden; 31 | display: flex; 32 | flex-direction: column; 33 | } 34 | .com-checkbox-picker .movable-container .movable-inner .header { 35 | height: 100rpx; 36 | border-bottom: 1px solid rgba(114, 121, 134, 0.2); 37 | display: flex; 38 | flex-direction: row; 39 | align-items: center; 40 | font-weight: bold; 41 | } 42 | .com-checkbox-picker .movable-container .movable-inner .header .cancel-item, 43 | .com-checkbox-picker .movable-container .movable-inner .header .confirm-item { 44 | line-height: 100rpx; 45 | width: 18vw; 46 | min-width: 4rem; 47 | text-align: center; 48 | font-size: 32rpx; 49 | } 50 | .com-checkbox-picker .movable-container .movable-inner .header .title { 51 | flex: 1; 52 | text-align: center; 53 | font-size: 32rpx; 54 | } 55 | .com-checkbox-picker .movable-container .movable-inner .header .confirm-item { 56 | position: relative; 57 | } 58 | @keyframes circleAns { 59 | 0% { 60 | transform: rotate(0deg); 61 | } 62 | 100% { 63 | transform: rotate(720deg); 64 | } 65 | } 66 | .com-checkbox-picker .movable-container .movable-inner .header .circleAns { 67 | position: absolute; 68 | z-index: 1; 69 | top: 30%; 70 | animation: circleAns 1.6s linear 0s infinite; 71 | } 72 | .com-checkbox-picker .movable-container .movable-inner .check-line-list { 73 | width: 100%; 74 | padding: 0 4vw; 75 | display: flex; 76 | flex-direction: column ; 77 | } 78 | .com-checkbox-picker .movable-container .movable-inner .check-line-list .check-line { 79 | vertical-align: middle; 80 | border-bottom: 1px dashed rgba(114, 121, 134, 0.2); 81 | font-size: 28rpx; 82 | font-weight: bold; 83 | display: flex; 84 | align-items: center; 85 | } 86 | .com-checkbox-picker .movable-container .movable-inner .check-line-list .check-line:last-of-type { 87 | border-bottom-color: rgba(0, 0, 0, 0); 88 | } 89 | .com-checkbox-picker .movable-container .movable-inner .check-line-list .check-line .check-line-title { 90 | display: block; 91 | flex: 1 ; 92 | line-height: 110rpx; 93 | height: 100%; 94 | margin-left: 2vw; 95 | overflow: hidden; 96 | text-overflow: ellipsis; 97 | white-space: nowrap; 98 | font-size: 28rpx; 99 | } 100 | .com-checkbox-picker .movable-container .movable-inner .check-line-list .check-line .check-box-container { 101 | width: 36rpx; 102 | height: 36rpx; 103 | border: 4rpx solid rgba(114, 121, 134, 0.4); 104 | border-radius: 8rpx; 105 | margin-right: 2vw; 106 | background-color: #FFF; 107 | transition: border-color, background-color 50ms linear 0s; 108 | overflow: hidden; 109 | } 110 | .com-checkbox-picker .movable-container .movable-inner .check-line-list .check-line .check-box-container-selected { 111 | border-color: #16A085; 112 | background-color: #16A085; 113 | overflow: hidden; 114 | } 115 | .com-checkbox-picker .movable-container .movable-inner .check-line-list .check-line .number-text { 116 | color: #FFF; 117 | display: inline-block; 118 | width: 100%; 119 | font-size: 24rpx; 120 | line-height: 30rpx; 121 | text-align: center; 122 | font-weight: bolder; 123 | vertical-align: top; 124 | } 125 | .com-checkbox-picker .content-show { 126 | opacity: 1; 127 | transform: translate3d(0, 0, 0); 128 | } 129 | .checkbox-picker-mask-show { 130 | visibility: visible; 131 | opacity: 1; 132 | } 133 | -------------------------------------------------------------------------------- /common/utils/common-utils.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 日常使用函数工具类 3 | * @Author: yp 4 | * @Date: 2021-05-22 16:30:01 5 | * @LastEditTime: 2022-02-12 15:33:28 6 | * @LastEditors: yp 7 | */ 8 | 9 | 10 | module.exports = { 11 | 12 | /** 13 | * @description: 判断一个字符串是否为整数 14 | * @param {*} text 15 | * @return {*} 16 | */ 17 | isInt(txt = '') { 18 | return /^[0-9]*$/.test(txt) 19 | }, 20 | 21 | /** 22 | * @description: 从数组中随机获取一个元素 23 | * @param {*} array 24 | * @return {*} 25 | */ 26 | getOneFromArray(array = []) { 27 | if (!Array.isArray(array) || array.length <= 0) { 28 | return {} 29 | } 30 | return array[Math.floor(Math.random() * array.length)] 31 | }, 32 | 33 | /** 34 | * @description: 对源数据进行分页 35 | * @param { 36 | * list:源数据数组； 37 | * pageNumber:分页阈值 38 | * } 39 | * @return {*} 40 | */ 41 | getPageDataByList(list = [], pageNumber = 1) { 42 | return list.reduce((prev, cur, index) => { 43 | if (!prev[~~(index / pageNumber)]) { 44 | prev[~~(index / pageNumber)] = []; 45 | } 46 | prev[~~(index / pageNumber)].push(cur); 47 | return prev; 48 | }, []); 49 | }, 50 | 51 | /** 52 | * @description: 将对象中首字母下划线的属性转为驼峰 53 | * @param {*} data 54 | * @return {*} 55 | */ 56 | convertObjectUpper(data) { 57 | if (typeof data !== 'object' || !data) return data 58 | if (Array.isArray(data)) { 59 | return data.map(item => this.convertObjectUpper(item)) 60 | } 61 | 62 | let newObj = {} 63 | for (const key in data) { 64 | if (Object.prototype.hasOwnProperty.call(data, key)) { 65 | let newKey = key.replace(/_([a-z])/g, res => res[1].toUpperCase()) 66 | newObj[newKey] = this.convertObjectUpper(data[key]) 67 | } 68 | } 69 | return newObj 70 | }, 71 | 72 | /** 73 | * @description: 将对象及对象中属性值转化为字符串 74 | * @param {*} data 75 | * @return {*} 76 | */ 77 | converObjectEncode(data = {}) { 78 | if (typeof data !== 'object' || !data || data === {}) return data 79 | if (Array.isArray(data)) { 80 | return data.map(item => this.converObjectEncode(item)) 81 | } 82 | let newObj = {} 83 | for (const key in data) { 84 | if (Object.prototype.hasOwnProperty.call(data, key)) { 85 | if (Object.prototype.toString.call(data[key]) === '[object Object]') { 86 | newObj[key] = this.converObjectEncode(data[key]) 87 | } else if (Object.prototype.toString.call(data[key]) === '[object String]') { 88 | newObj[key] = encodeURIComponent(data[key]) 89 | } else { 90 | newObj[key] = data[key] 91 | } 92 | } 93 | } 94 | return newObj 95 | }, 96 | 97 | /** 98 | * @description: 将一个javascript对象转为url params参数 99 | * 如：{name:'yp'} -> '?name=yp' 100 | * @param {*} obj 101 | * @return {*} 102 | */ 103 | // converObjectToUrlParams(obj) { 104 | 105 | // if (!obj || Object.keys(obj).length <= 0) { 106 | // return ''; 107 | // } 108 | 109 | // const params = []; 110 | // for (let [key, value] of Object.entries(obj)) { 111 | // if (Object.prototype.toString.call(value) === "[object String]" || 112 | // Object.prototype.toString.call(value) === "[object Number]" || 113 | // Object.prototype.toString.call(value) === "[object Boolean]") { 114 | // params.push(`${key}=${value}`) 115 | // } 116 | // } 117 | // let paramsUrl = params.join('&'); 118 | // if (paramsUrl.length > 0) { 119 | // paramsUrl = "?" + paramsUrl 120 | // } 121 | // return paramsUrl; 122 | // } 123 | 124 | 125 | /** 126 | * @description: 将字段对象转化为参数字符串，例如 {name:'yp',age:18} 转化为 'name=yp&age=18' 127 | 次方法会忽略类型为obj和array的字段 128 | * @param {*} obj 129 | * @return {*} 130 | */ 131 | convertObjToParams(obj = {}) { 132 | 133 | const _result = []; 134 | for (let [key, value] of Object.entries(obj)) { 135 | if (Object.prototype.toString.call(value) === '[object String]' || Object.prototype.toString.call(value) === '[object Number]' || Object.prototype.toString.call(value) === '[object Boolean]') { 136 | _result.push(key + '=' + value); 137 | } 138 | } 139 | return _result.join('&'); 140 | } 141 | } -------------------------------------------------------------------------------- /components/d-list-picker/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 3 | * @Author: yp 4 | * @Date: 2021-03-08 10:57:31 5 | * @LastEditTime: 2021-10-15 18:23:38 6 | * @LastEditors: yp 7 | */ 8 | 9 | //获取封装的微信按键震动 10 | const vibrateUtils = require('../../common/utils/vibrate-utils') 11 | 12 | const app = getApp() 13 | let dragY = 0; 14 | 15 | Component({ 16 | 17 | /** 18 | * 组件的属性列表 19 | */ 20 | properties: { 21 | //弹窗是否可见 22 | visible: { 23 | type: Boolean, 24 | value: true, 25 | observer(visible) { 26 | if (visible) { 27 | this.setData({ 28 | y: 0, 29 | loading: false, 30 | }); 31 | 32 | } 33 | }, 34 | }, 35 | //标题 36 | title: { 37 | type: String, 38 | value: '' 39 | }, 40 | //取消按钮字体颜色 41 | cancelTextColor: { 42 | type: String, 43 | value: '#727986' 44 | }, 45 | //确认按钮字体颜色 46 | confirmTextColor: { 47 | type: String, 48 | value: '#16A085' 49 | }, 50 | //选项文本颜色 51 | lineTextColor: { 52 | type: String, 53 | value: '#444444' 54 | }, 55 | //选项 56 | options: { 57 | type: Array, 58 | value: [] 59 | }, 60 | //设置显示行数 61 | lineNumber: { 62 | type: Number, 63 | value: 8.5 64 | }, 65 | //是否展示右侧图标 66 | showIcon: { 67 | type: Boolean, 68 | value: true 69 | } 70 | 71 | }, 72 | 73 | /** 74 | * 组件的初始数据 75 | */ 76 | data: { 77 | y: 0, 78 | //可移动区域 79 | loading: false, 80 | // resultValue:-1, 81 | lineHeightRpx: 120, 82 | lineContainerHeightRpx: 360, 83 | propHeightRpx: 430, 84 | propTopRpx: 1000, 85 | //是否可以移动弹窗进行关闭 86 | moveDisable: true, 87 | }, 88 | 89 | /** 90 | * 生命周期函数 91 | */ 92 | lifetimes: { 93 | attached: function () { 94 | // 在组件实例进入页面节点树时执行 95 | this.init(); 96 | }, 97 | }, 98 | 99 | 100 | /** 101 | * 组件的方法列表 102 | */ 103 | methods: { 104 | 105 | /** 106 | * @description: 初始化弹窗高度及位置 107 | * @param {*} 108 | * @return {*} 109 | */ 110 | init() { 111 | 112 | const { 113 | lineHeightRpx, 114 | lineNumber 115 | } = this.data 116 | 117 | let realLine = lineNumber; 118 | let moveDisable = true; 119 | 120 | //滚动区域高度 121 | const lineContainerHeightRpx = lineHeightRpx * realLine; 122 | //弹窗高度 (头部高度+) 123 | const propHeightRpx = 100 + lineContainerHeightRpx; 124 | //px和rpx换算比 125 | const pixelRatio = 750 / app.globalData.screenWidth 126 | //弹窗位置高度 127 | const propTopRpx = Math.ceil(app.globalData.screenHeight * pixelRatio - propHeightRpx) 128 | 129 | this.setData({ 130 | lineContainerHeightRpx, 131 | propHeightRpx, 132 | propTopRpx, 133 | moveDisable 134 | }) 135 | 136 | }, 137 | 138 | 139 | /** 140 | * @description: 执行复选 141 | * @param {*} e 142 | * @return {*} 143 | */ 144 | lineSelect(e) { 145 | //震动 146 | vibrateUtils.vibrate(); 147 | 148 | const idx = e.currentTarget.dataset.idx 149 | this.triggerEvent('onConfirm', { 150 | 'value': idx 151 | }, {}) 152 | this.onClose(); 153 | }, 154 | 155 | /** 156 | * @description: 拖动事件回调 157 | * @param {*} e 158 | * @return {*} 159 | */ 160 | dragMove(e) { 161 | if (this.data.moveDisable === true) { 162 | return 163 | } 164 | dragY = e.detail.y; 165 | }, 166 | 167 | /** 168 | * @description: 触摸结束事件回调 169 | * @param {*} e 170 | * @return {*} 171 | */ 172 | toucheEnd() { 173 | if (this.data.moveDisable === true) { 174 | return 175 | } 176 | if (dragY < 70) { 177 | this.setData({ 178 | y: 0 179 | }) 180 | } else { 181 | this.onClose(); 182 | } 183 | dragY = 0; 184 | }, 185 | 186 | /** 187 | * 处理触摸滚动问题 188 | */ 189 | handleCatchTouchMove() { 190 | return false; 191 | }, 192 | 193 | /** 194 | * @description: 关闭弹窗 195 | * @param {*} 196 | * @return {*} 197 | */ 198 | onClose() { 199 | this.setData({ 200 | visible: false 201 | }) 202 | } 203 | } 204 | }) -------------------------------------------------------------------------------- /app.wxss: -------------------------------------------------------------------------------- 1 | /* *app.wxss* 2 | 3 | .container { 4 | display: flex; 5 | flex-direction: column; 6 | align-items: center; 7 | box-sizing: border-box; 8 | } 9 | 10 | button { 11 | background: initial; 12 | } 13 | 14 | button:focus{ 15 | outline: 0; 16 | } 17 | 18 | button::after{ 19 | border: none; 20 | } 21 | 22 | 23 | page { 24 | box-sizing: border-box; 25 | background: #f6f6f6; 26 | display: flex; 27 | flex-direction: column; 28 | justify-content: flex-start; 29 | } 30 | 31 | page, view, scroll-view, swiper, movable-area, cover-view, text, icon, rich-text, 32 | progress, button, checkbox-group, checkbox, form, input, label, picker, 33 | picker-view, radio-group, slider, switch, textarea, navigator, audio, image, 34 | video, live-player, live-pusher, open-data, web-view { 35 | box-sizing: border-box; 36 | } 37 | 38 | .userinfo, .uploader, .tunnel { 39 | margin-top: 40rpx; 40 | height: 140rpx; 41 | width: 100%; 42 | background: #fff; 43 | border: 1px solid rgba(0, 0, 0, 0.1); 44 | border-left: none; 45 | border-right: none; 46 | display: flex; 47 | flex-direction: row; 48 | align-items: center; 49 | transition: all 300ms ease; 50 | } 51 | 52 | .userinfo-avatar { 53 | width: 100rpx; 54 | height: 100rpx; 55 | margin: 20rpx; 56 | border-radius: 50%; 57 | background-size: cover; 58 | background-color: white; 59 | } 60 | 61 | .userinfo-avatar:after { 62 | border: none; 63 | } 64 | 65 | .userinfo-nickname { 66 | font-size: 32rpx; 67 | color: #007aff; 68 | background-color: white; 69 | background-size: cover; 70 | } 71 | 72 | .userinfo-nickname::after { 73 | border: none; 74 | } 75 | 76 | .uploader, .tunnel { 77 | height: auto; 78 | padding: 0 0 0 40rpx; 79 | flex-direction: column; 80 | align-items: flex-start; 81 | box-sizing: border-box; 82 | } 83 | 84 | .uploader-text, .tunnel-text { 85 | width: 100%; 86 | line-height: 52px; 87 | font-size: 34rpx; 88 | color: #007aff; 89 | } 90 | 91 | .uploader-container { 92 | width: 100%; 93 | height: 400rpx; 94 | padding: 20rpx 20rpx 20rpx 0; 95 | display: flex; 96 | align-content: center; 97 | justify-content: center; 98 | box-sizing: border-box; 99 | border-top: 1px solid rgba(0, 0, 0, 0.1); 100 | } 101 | 102 | .uploader-image { 103 | width: 100%; 104 | height: 360rpx; 105 | } 106 | 107 | .tunnel { 108 | padding: 0 0 0 40rpx; 109 | } 110 | 111 | .tunnel-text { 112 | position: relative; 113 | color: #222; 114 | display: flex; 115 | flex-direction: row; 116 | align-content: center; 117 | justify-content: space-between; 118 | box-sizing: border-box; 119 | border-top: 1px solid rgba(0, 0, 0, 0.1); 120 | } 121 | 122 | .tunnel-text:first-child { 123 | border-top: none; 124 | } 125 | 126 | .tunnel-switch { 127 | position: absolute; 128 | right: 20rpx; 129 | top: -2rpx; 130 | } 131 | 132 | .disable { 133 | color: #888; 134 | } 135 | 136 | .service { 137 | position: fixed; 138 | right: 40rpx; 139 | bottom: 40rpx; 140 | width: 140rpx; 141 | height: 140rpx; 142 | border-radius: 50%; 143 | background: linear-gradient(#007aff, #0063ce); 144 | box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); 145 | display: flex; 146 | align-content: center; 147 | justify-content: center; 148 | transition: all 300ms ease; 149 | } 150 | 151 | .service-button { 152 | position: absolute; 153 | top: 40rpx; 154 | } 155 | 156 | .service:active { 157 | box-shadow: none; 158 | } 159 | 160 | .request-text { 161 | padding: 20rpx 0; 162 | font-size: 24rpx; 163 | line-height: 36rpx; 164 | word-break: break-all; 165 | } */ 166 | 167 | 168 | 169 | /* 全局样式 */ 170 | page, 171 | view, 172 | scroll-view, 173 | swiper, 174 | movable-area, 175 | cover-view, 176 | text, 177 | icon, 178 | rich-text, 179 | progress, 180 | button, 181 | checkbox-group, 182 | checkbox, 183 | form, 184 | input, 185 | label, 186 | picker, 187 | picker-view, 188 | radio-group, 189 | slider, 190 | switch, 191 | textarea, 192 | navigator, 193 | audio, 194 | image, 195 | video, 196 | live-player, 197 | live-pusher, 198 | open-data, 199 | web-view { 200 | box-sizing: border-box; 201 | } 202 | 203 | page { 204 | background-color: #f6f6f6; 205 | /* font-family: system-ui, -apple-system, "PingFang SC", "Helvetica Neue", BlinkMacSystemFont, Arial, Helvetica, STHeiti, "Microsoft Yahei", Tahoma, Simsun, sans-serif; */ 206 | width: 100vw; 207 | height: 100%; 208 | min-height: 100vh; 209 | overflow-x: hidden; 210 | } -------------------------------------------------------------------------------- /components/d-notify/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 3 | * @Author: yp 4 | * @Date: 2021-03-24 11:02:16 5 | * @LastEditTime: 2022-02-14 16:49:20 6 | * @LastEditors: yp 7 | */ 8 | // components/d-notify/index.js 9 | let _timer = null; 10 | 11 | //获取封装的微信按键震动 12 | const vibrateUtils = require('../../common/utils/vibrate-utils') 13 | 14 | //抽象模式 15 | const MODE = { 16 | 0: { 17 | //失败模式 18 | title: "同步失败，请重试", 19 | visible: true, 20 | iconType: 2, 21 | colorType: 1 22 | }, 23 | 1: { 24 | //成功模式 25 | title: "同步成功", 26 | visible: true, 27 | iconType: 1, 28 | colorType: 0 29 | }, 30 | 2: { 31 | //查询失败模式 32 | title: "查询失败，请输入有效信息", 33 | visible: true, 34 | iconType: 2, 35 | colorType: 1 36 | }, 37 | 3: { 38 | //保存成功模式 39 | title: "保存成功", 40 | visible: true, 41 | iconType: 1, 42 | colorType: 0 43 | }, 44 | 4: { 45 | //保存失败模式 46 | title: "保存失败，请重试", 47 | visible: true, 48 | iconType: 2, 49 | colorType: 1 50 | }, 51 | 5: { 52 | //保存失败模式 53 | title: "提交失败，请输入有效信息", 54 | visible: true, 55 | iconType: 2, 56 | colorType: 1 57 | }, 58 | 6: { 59 | //超过规定额度 60 | title: "操作失败，超过限定范围", 61 | visible: true, 62 | iconType: 2, 63 | colorType: 1 64 | }, 65 | 7: { 66 | // canvas生成图片并保存 67 | title: "已保存到相册", 68 | visible: true, 69 | iconType: 1, 70 | colorType: 0 71 | }, 72 | 8: { 73 | // canvas生成图片保存失败 74 | title: "操作失败，请重试", 75 | visible: true, 76 | iconType: 2, 77 | colorType: 1 78 | }, 79 | 9: { 80 | // 未授权，无法保存到相册 81 | title: "未授权添加到相册，请设置", 82 | visible: true, 83 | iconType: 2, 84 | colorType: 1, 85 | during: 2500 86 | }, 87 | 10: { 88 | // 删除掉最后一个启用的卡片 89 | title: "请保留至少一项卡片启用", 90 | visible: true, 91 | iconType: 2, 92 | colorType: 1 93 | }, 94 | 11: { 95 | //授权失败，无法完成后续动作 96 | title: "授权失败，请重试", 97 | visible: true, 98 | iconType: 2, 99 | colorType: 1, 100 | during: 2500 101 | }, 102 | 12: { 103 | //token验证失败 104 | title: "提交失败，当前卡片已失效", 105 | visible: true, 106 | iconType: 2, 107 | colorType: 1, 108 | during: 2500 109 | }, 110 | 13: { 111 | //从分享页填写生日记录，达到卡片拥有者生日记录上限 112 | title: "很遗憾，生日记录已至上限", 113 | visible: true, 114 | iconType: 2, 115 | colorType: 1, 116 | during: 2500 117 | }, 118 | 14: { 119 | //当用户之前已经填写过，之后再填写 120 | title: "提交失败，您已提交过记录", 121 | visible: true, 122 | iconType: 2, 123 | colorType: 1, 124 | during: 2500 125 | } 126 | }; 127 | 128 | Component({ 129 | /** 130 | * 组件的属性列表 131 | */ 132 | properties: { 133 | //标题 134 | title: { 135 | type: String, 136 | value: '' 137 | }, 138 | //是否可见 139 | visible: { 140 | type: Boolean, 141 | value: false 142 | }, 143 | //持续毫秒数 144 | during: { 145 | type: Number, 146 | value: 1500 147 | }, 148 | //颜色类型 149 | colorType: { 150 | type: Number, 151 | value: 0 152 | }, 153 | //图标类型 154 | iconType: { 155 | type: Number, 156 | value: 0 157 | }, 158 | //抽象模式 159 | mode: { 160 | type: Number, 161 | value: -1, 162 | observer(mode) { 163 | if (mode >= 0 && MODE[mode]) { 164 | this.setData({ 165 | ...MODE[mode], 166 | }) 167 | } 168 | } 169 | } 170 | }, 171 | 172 | observers: { 173 | "visible": function (visible) { 174 | const { 175 | during 176 | } = this.data; 177 | if (visible) { 178 | if (_timer) { 179 | clearTimeout(_timer) 180 | _timer = null; 181 | } 182 | _timer = setTimeout(() => { 183 | const { 184 | visible 185 | } = this.data 186 | if (visible) { 187 | this.setData({ 188 | visible: false, 189 | mode: -1 190 | }) 191 | } 192 | clearTimeout(_timer) 193 | _timer = null; 194 | }, during) 195 | } 196 | } 197 | }, 198 | 199 | /** 200 | * 组件的初始数据 201 | */ 202 | data: { 203 | colorItem: [ 204 | "#16A085", 205 | "#EC492C" 206 | ], 207 | iconItem: [{ 208 | name: "gonggao", 209 | size: 30, 210 | }, 211 | { 212 | name: "biaoqing_3", 213 | size: 32, 214 | }, 215 | { 216 | name: "biaoqing_2", 217 | size: 32, 218 | } 219 | ] 220 | }, 221 | 222 | /** 223 | * 组件的方法列表 224 | */ 225 | methods: { 226 | closeNotify() { 227 | const { 228 | visible 229 | } = this.data; 230 | if (visible) { 231 | //震动 232 | vibrateUtils.vibrate(); 233 | 234 | this.setData({ 235 | visible: false, 236 | mode: -1 237 | }) 238 | if (_timer) { 239 | clearTimeout(_timer) 240 | _timer = null; 241 | } 242 | 243 | } 244 | } 245 | } 246 | }) -------------------------------------------------------------------------------- /common/wxs/format.wxs: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 用于转化显示模块 3 | * @Author: yp 4 | * @Date: 2021-03-12 23:39:00 5 | * @LastEditTime: 2022-02-14 12:09:44 6 | * @LastEditors: yp 7 | */ 8 | 9 | /** 10 | * @description: 将Date,TimeStamp转化为时间显示格式 11 | * @param {*} _date 输入的时间数据 12 | * @param {*} _fmt 格式化模式 13 | * @return {*} 14 | */ 15 | module.exports.dateFormat = function (_date, _fmt) { 16 | var date = _date; 17 | var fmt = _fmt; 18 | 19 | if (typeof _date === 'string') { 20 | date = getDate(date.replace(getRegExp('-', 'g'), '/')) 21 | } else if (typeof date === 'number') { 22 | date = getDate(date) 23 | } else { 24 | return ''; 25 | } 26 | 27 | var o = [{ 28 | reg: 'M+', 29 | value: date.getMonth() + 1 30 | }, 31 | { 32 | reg: 'd+', 33 | value: date.getDate() 34 | }, 35 | { 36 | reg: 'h+', 37 | value: (date.getHours() % 12 === 0) ? 12 : date.getHours() % 12 38 | }, 39 | { 40 | reg: 'H+', 41 | value: date.getHours() 42 | }, 43 | { 44 | reg: 'm+', 45 | value: date.getMinutes() 46 | }, 47 | { 48 | reg: 's+', 49 | value: date.getSeconds() 50 | }, 51 | { 52 | reg: 'q+', 53 | value: Math.floor((date.getMonth() + 3) / 3) 54 | }, 55 | { 56 | reg: 'S', 57 | value: date.getMilliseconds() 58 | }, //毫秒 59 | ]; 60 | 61 | 62 | //年 63 | var yearRegExp = getRegExp('(y+)'); 64 | if (yearRegExp.test(fmt)) { 65 | fmt = fmt.replace(yearRegExp, function (a) { 66 | return date.getFullYear().toString().substring(4 - a.length); 67 | }); 68 | } 69 | //星期 70 | var weekRegExp = getRegExp('(E+)'); 71 | if (weekRegExp.test(fmt)) { 72 | var week = ['日', '一', '二', '三', '四', '五', '六']; 73 | fmt = fmt.replace(weekRegExp, function (a) { 74 | return ((a.length > 1) ? (a.length > 2 ? '星期' : '周') : '') + week[date.getDay()]; 75 | }); 76 | } 77 | for (var i = 0; i < o.length; i++) { 78 | var exp = getRegExp('(' + o[i].reg + ')'); 79 | if (exp.test(fmt)) { 80 | fmt = fmt.replace(exp, function (a) { 81 | return (a.length === 1) ? 82 | (o[i].value) : 83 | (('00' + o[i].value).substring(('' + o[i].value).length)) 84 | }); 85 | } 86 | } 87 | return fmt; 88 | } 89 | 90 | /** 91 | * @description: 判断一个字符串是否为整数 92 | * @param {*} text 93 | * @return {*} 94 | */ 95 | module.exports.isInt = function (txt) { 96 | return getRegExp("^[0-9]*$", "g").test(txt) 97 | }, 98 | 99 | /** 100 | * @description: 使用某个字符串补全字符显示 101 | * @param {*} data 要填补的原始字符串 102 | * @param {*} maxLength 向前填充位数 103 | * @param {*} fillString 填充的字符 104 | * @return {*} 105 | */ 106 | module.exports.padStartString = function (data, maxLength = 0, fillString = '0') { 107 | data = data.toString(); 108 | 109 | while (data.length < maxLength) { 110 | data = fillString + data 111 | } 112 | return data 113 | } 114 | 115 | /** 116 | * @description: 多项列表显示格式化 117 | * @param {*} value 118 | * @param {*} options 119 | * @return {*} 120 | */ 121 | module.exports.checkboxString = function (value, options) { 122 | if (value.length < 1) { 123 | return '未选择' 124 | } else if (value.length === 1) { 125 | return options[value[0]].label || options[value[0]] 126 | } else { 127 | return (options[value[0]].label || options[value[0]]) + '…' + value.length + '项' 128 | } 129 | } 130 | 131 | /** 132 | * @description: 对于location对象格式化为字符串 133 | * @param {*} location 134 | * @return {*} 135 | */ 136 | module.exports.locationFormat = function (location) { 137 | 138 | var tempList = []; 139 | // if (location.country) { 140 | // tempList.push(location.country) 141 | // } 142 | if (location.adm1) { 143 | tempList.push(location.adm1) 144 | } 145 | if (location.adm2 && location.adm2 !== location.adm1 && location.adm2 + '市' !== location.adm1) { 146 | tempList.push(location.adm2) 147 | } 148 | if (location.name && location.name !== location.adm2) { 149 | tempList.push(location.name) 150 | } 151 | if (tempList.length <= 0) { 152 | return ""; 153 | } 154 | return tempList.join(' '); 155 | } 156 | 157 | /** 158 | * @description: 根据dateId转化为 当地字符串形式，如 20220127转化为：2022年01月27日 159 | * @param {*} dateId 160 | * @return {*} 161 | */ 162 | module.exports.getLocalStringByDateId = function (dateId) { 163 | if (!dateId) { 164 | return '' 165 | } 166 | var dateIdString = dateId.toString(); 167 | return dateIdString.slice(0, 4) + '年' + dateIdString.slice(4, 6) + '月' + dateIdString.slice(-2) + '日'; 168 | } 169 | 170 | /** 171 | * @description: 根据dateId获取当地字符串，如 20220127:2022年01月27日 周一 172 | * @param {*} dateId 173 | * @return {*} 174 | */ 175 | module.exports.getLocalDescByDateId = function (dateId) { 176 | 177 | var WEEK_CN = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']; 178 | 179 | if (!dateId) { 180 | return '' 181 | } 182 | var dateIdString = dateId.toString(); 183 | 184 | var year = parseInt(dateIdString.slice(0, 4)) || -1 185 | var month = parseInt(dateIdString.slice(4, 6)) || -1 186 | var day = parseInt(dateIdString.slice(-2)) || -1 187 | 188 | if (year < 0 || month < 0 || day < 0) { 189 | return '' 190 | } 191 | //计算周几 192 | var weekCN = WEEK_CN[(getDate(year, month - 1, day).getDay())] 193 | return dateIdString.slice(0, 4) + '年' + dateIdString.slice(4, 6) + '月' + dateIdString.slice(-2) + '日 ' + weekCN; 194 | } -------------------------------------------------------------------------------- /components/d-checkbox-picker/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 3 | * @Author: yp 4 | * @Date: 2021-03-08 10:57:31 5 | * @LastEditTime: 2021-12-17 11:11:08 6 | * @LastEditors: yp 7 | */ 8 | const app = getApp() 9 | let dragY = 0; 10 | 11 | //获取封装的微信按键震动 12 | const vibrateUtils = require('../../common/utils/vibrate-utils') 13 | 14 | Component({ 15 | 16 | /** 17 | * 组件的属性列表 18 | */ 19 | properties: { 20 | //弹窗是否可见 21 | visible: { 22 | type: Boolean, 23 | value: true, 24 | observer(visible) { 25 | if (visible) { 26 | const defaultValue = this.data.value; 27 | if (!this.data.value || this.data.value.length <= 0) { 28 | if (this.data.options && this.data.options.length > 0) { 29 | defaultValue.length = this.data.options.length; 30 | defaultValue.fill(false); 31 | console.log('defaultValue', defaultValue) 32 | } 33 | } 34 | this.setData({ 35 | y: 0, 36 | loading: false, 37 | value: defaultValue 38 | }); 39 | } 40 | }, 41 | }, 42 | //标题 43 | title: { 44 | type: String, 45 | value: '' 46 | }, 47 | //取消按钮字体颜色 48 | cancelTextColor: { 49 | type: String, 50 | value: '#727986' 51 | }, 52 | //确认按钮字体颜色 53 | confirmTextColor: { 54 | type: String, 55 | value: '#16A085' 56 | }, 57 | //选项文本颜色 58 | lineTextColor: { 59 | type: String, 60 | value: '#444444' 61 | }, 62 | //当前初始索引数组 63 | value: { 64 | type: Array, 65 | value: [], 66 | observer(value) { 67 | const resultValue = []; 68 | value.forEach(item => { 69 | resultValue[item] = true 70 | }) 71 | this.setData({ 72 | resultValue 73 | }) 74 | } 75 | }, 76 | options: { 77 | type: Array, 78 | value: [] 79 | } 80 | 81 | }, 82 | 83 | /** 84 | * 组件的初始数据 85 | */ 86 | data: { 87 | y: 0, 88 | //可移动区域 89 | loading: false, 90 | resultValue: [], 91 | lineHeightRpx: 110, 92 | lineContainerHeightRpx: 330, 93 | propHeightRpx: 430, 94 | propTopRpx: 1000, 95 | //是否可以移动弹窗进行关闭 96 | moveDisable: true, 97 | }, 98 | 99 | //数据监听器 100 | observers: { 101 | 'options': function (options) { 102 | this.init(options); 103 | }, 104 | 105 | }, 106 | /** 107 | * 组件的方法列表 108 | */ 109 | methods: { 110 | 111 | /** 112 | * @description: 初始化弹窗高度及位置 113 | * @param {*} 114 | * @return {*} 115 | */ 116 | init(options) { 117 | 118 | const { 119 | lineHeightRpx 120 | } = this.data 121 | let realLine = options.length; 122 | let moveDisable = false; 123 | if (realLine < 3) { 124 | realLine = 3; 125 | } else if (realLine > 7) { 126 | realLine = 7.5 127 | moveDisable = true 128 | } 129 | 130 | //滚动区域高度 131 | const lineContainerHeightRpx = lineHeightRpx * realLine; 132 | //弹窗高度 (头部高度+) 133 | const propHeightRpx = 100 + lineContainerHeightRpx; 134 | //px和rpx换算比 135 | const pixelRatio = 750 / app.globalData.screenWidth 136 | //弹窗位置高度 137 | const propTopRpx = Math.ceil(app.globalData.screenHeight * pixelRatio - propHeightRpx) 138 | 139 | this.setData({ 140 | lineContainerHeightRpx, 141 | propHeightRpx, 142 | propTopRpx, 143 | moveDisable 144 | }) 145 | 146 | }, 147 | 148 | 149 | /** 150 | * @description: 执行复选 151 | * @param {*} e 152 | * @return {*} 153 | */ 154 | lineSelect(e) { 155 | //震动 156 | vibrateUtils.vibrate(); 157 | const { 158 | resultValue 159 | } = this.data; 160 | const idx = e.currentTarget.dataset.idx 161 | 162 | if (!resultValue[idx]) { 163 | resultValue[idx] = true 164 | } else { 165 | resultValue[idx] = false; 166 | } 167 | 168 | this.setData({ 169 | resultValue 170 | }) 171 | 172 | }, 173 | 174 | /** 175 | * @description: 拖动事件回调 176 | * @param {*} e 177 | * @return {*} 178 | */ 179 | dragMove(e) { 180 | if (this.data.moveDisable === true) { 181 | return 182 | } 183 | dragY = e.detail.y; 184 | }, 185 | 186 | /** 187 | * @description: 触摸结束事件回调 188 | * @param {*} e 189 | * @return {*} 190 | */ 191 | toucheEnd() { 192 | if (this.data.moveDisable === true) { 193 | return 194 | } 195 | if (dragY < 70) { 196 | this.setData({ 197 | y: 0 198 | }) 199 | } else { 200 | this.onClose(); 201 | } 202 | dragY = 0; 203 | }, 204 | 205 | /** 206 | * 处理触摸滚动问题 207 | */ 208 | handleCatchTouchMove() { 209 | return false; 210 | }, 211 | 212 | /** 213 | * @description: 关闭弹窗 214 | * @param {*} 215 | * @return {*} 216 | */ 217 | onClose() { 218 | this.setData({ 219 | visible: false 220 | }) 221 | }, 222 | 223 | 224 | /** 225 | * @description: 确认选择 226 | * @param {*} 227 | * @return {*} 228 | */ 229 | onConfirm() { 230 | 231 | //震动 232 | vibrateUtils.vibrate(); 233 | 234 | const { 235 | loading, 236 | resultValue 237 | } = this.data; 238 | if (loading) { 239 | return false; 240 | } 241 | this.onClose(); 242 | 243 | const result = []; 244 | 245 | resultValue.forEach((item, index) => { 246 | if (item) { 247 | result.push(index) 248 | } 249 | }) 250 | this.triggerEvent('onConfirm', { 251 | 'value': result 252 | }, {}) 253 | 254 | }, 255 | } 256 | }) -------------------------------------------------------------------------------- /common/utils/time-utils.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 时间处理工具类 3 | * @Author: yp 4 | * @Date: 2021-03-12 16:27:15 5 | * @LastEditTime: 2022-02-27 17:53:19 6 | * @LastEditors: yp 7 | */ 8 | /** 9 | * @description: 时间处理工具类 10 | * @param {*} 11 | * @return {*} 12 | */ 13 | 14 | //请求处理工具 15 | const requestUtil = require('./request-utils') 16 | 17 | const WEEK_CN = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']; 18 | 19 | module.exports = { 20 | 21 | //获取到的服务器时间戳 22 | serverTimestamp: -1, 23 | //服务器时间与客户端时间差异 24 | timestampGap: 0, 25 | 26 | /** 27 | * @description: 根据服务端时间校准当前时间，获得当前时间 28 | * @param {*} 29 | * @return {*} 30 | */ 31 | getCurrentDate() { 32 | const cur = new Date(); 33 | if (this.serverTimestamp < 0) { 34 | //服务端时间和本地时间无差异(差距时间可接受) 35 | return cur; 36 | } else { 37 | //返回服务器端时间 38 | return new Date(cur.getTime() + this.timestampGap) 39 | } 40 | }, 41 | 42 | //设置服务器端时间 43 | async setServerTime() { 44 | //发起请求获取服务器时间 45 | //模拟从后端请求，如果失败，使用前端时间 46 | const serverTime = await requestUtil.getSystemCurrent() || +new Date(); 47 | 48 | //判断和本地时间差异 49 | const cilentTime = +new Date(); 50 | 51 | this.timestampGap = serverTime - cilentTime; 52 | 53 | console.log('获取服务端时间：' + serverTime + "，客户端时间：" + cilentTime); 54 | 55 | //差异大于5分钟时，则使用服务器时间显示 56 | if (Math.abs(cilentTime - serverTime) > 1000 * 60 * 5) { 57 | this.serverTime = serverTime; 58 | } else { 59 | this.serverTime = -1; 60 | } 61 | 62 | return serverTime; 63 | }, 64 | 65 | /** 66 | * @description: 在某天年月日的基础上相加/减年，获取新的年月日 67 | * @param {*} currentDate 68 | * @param {*} y 加/减 的年 69 | * @return {*} Date 未来的日期（注意：小时分钟秒都会归0） 70 | */ 71 | addYearDate(currentDate = new Date(), y = 0) { 72 | 73 | return new Date(currentDate.getFullYear() + y, currentDate.getMonth(), currentDate.getDate()) 74 | }, 75 | 76 | /** 77 | * @description: 获取某个Date对象当日0点0分0点的Date对象 78 | * @param {*} currentDate 79 | * @return {*} 80 | */ 81 | getZeroDate(currentDate = new Date()) { 82 | //兼容性好，不要使用 toLocaleDateString 方法，各个js执行环境返回不一致 83 | return new Date(currentDate.setHours(0, 0, 0, 0)) 84 | }, 85 | 86 | /** 87 | * @description: 时期格式化 88 | * @param {*} fmt 格式 89 | * @param {*} date 日期Date对象 90 | * @return {*} 91 | */ 92 | dateFormat(fmt = 'YYYY-mm-dd HH:MM:SS', date) { 93 | let ret; 94 | const opt = { 95 | "Y+": date.getFullYear().toString(), // 年 96 | "m+": (date.getMonth() + 1).toString(), // 月 97 | "d+": date.getDate().toString(), // 日 98 | "H+": date.getHours().toString(), // 时 99 | "M+": date.getMinutes().toString(), // 分 100 | "S+": date.getSeconds().toString() // 秒 101 | // 有其他格式化字符需求可以继续添加，必须转化成字符串 102 | }; 103 | for (let k in opt) { 104 | ret = new RegExp("(" + k + ")").exec(fmt); 105 | if (ret) { 106 | fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0"))) 107 | } 108 | } 109 | return fmt; 110 | }, 111 | 112 | /** 113 | * @description: 判断是否为闰年 114 | * @param {*} year 年 115 | * @return {*} 116 | */ 117 | isRun(year) { 118 | year = parseInt(year); 119 | if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) { 120 | return true; 121 | } 122 | return false; 123 | }, 124 | 125 | /** 126 | * @description: 传入date对象，返回 中文 周几 127 | * @param {*} date 128 | * @return {*} 129 | */ 130 | getWeekCN(date = new Date()) { 131 | return WEEK_CN[date.getDay()]; 132 | }, 133 | 134 | /** 135 | * @description: 获取当前时刻 中文，如 凌晨 136 | * @param {*} 137 | * @return {*} 138 | */ 139 | getMerdiemCN(date = new Date()) { 140 | 141 | const hour = date.getHours(); 142 | const minute = date.getMinutes(); 143 | const hm = (hour * 100) + minute; 144 | 145 | if (hm < 600) { 146 | return '凌晨' 147 | } else if (hm < 900) { 148 | return '早上' 149 | } else if (hm < 1100) { 150 | return '上午' 151 | } else if (hm < 1300) { 152 | return '中午' 153 | } else if (hm < 1800) { 154 | return '下午' 155 | } 156 | return '晚上' 157 | }, 158 | 159 | /** 160 | * @description: 根据当前时间，获取时刻的问候语 161 | * @param {*} date 162 | * @return {*} 163 | */ 164 | getGreetingCN(date = new Date()) { 165 | const hour = date.getHours(); 166 | const minute = date.getMinutes(); 167 | const hm = (hour * 100) + minute; 168 | 169 | if (hm < 430) { 170 | return '夜深了' 171 | } else if (hm < 900) { 172 | return '早上好' 173 | } else if (hm < 1100) { 174 | return '上午好' 175 | } else if (hm < 1330) { 176 | return '中午好' 177 | } else if (hm < 1800) { 178 | return '下午好' 179 | } 180 | return '晚上好' 181 | }, 182 | 183 | /** 184 | * @description: 获取某一年某月的第index周几具体是哪一天,以及具体时分秒，例如 2021年12月倒数第一个星期日，凌晨2点时间 timeUtils.getDateByYearMonthIndexWeek(2021,11,-1,0,2,0,0); 2021年6月第二个星期五，凌晨5点时间 timeUtils.getDateByYearMonthIndexWeek(2021,5,2,5,5,0,0); 185 | * @param {*} year 186 | * @param {*} month 187 | * @param {*} index 第几个周几，1表示第1个，-1表示本月最后一个 188 | * @param {*} week 周几，0表示周日 189 | * @param {*} hour 小时，忽略默认值为0 190 | * @param {*} minute 分钟，忽略默认值为0 191 | * @param {*} second 秒，忽略默认值为0 192 | * @return {*} Date对象 193 | */ 194 | getDateByYearMonthIndexWeek(year, month, index, week, hour = 0, minute = 0, second = 0) { 195 | 196 | if (index === 0) { 197 | index = 1; 198 | } 199 | 200 | let originDate = null; 201 | 202 | if (index >= 0) { 203 | 204 | //获取当月1日 205 | originDate = new Date(year, month, 1, hour, minute, second); 206 | const originWeek = originDate.getDay(); 207 | //计算加上的天数 208 | let addDays = week - originWeek >= 0 ? week - originWeek : week - originWeek + 7; 209 | addDays = addDays + (index - 1) * 7; 210 | 211 | originDate.setDate(originDate.getDate() + addDays); 212 | 213 | } else { 214 | //获取下个月1日 215 | originDate = new Date(year, month + 1, 1, hour, minute, second); 216 | const originWeek = originDate.getDay(); 217 | //计算减去的天数 218 | let subDays = originWeek - week > 0 ? originWeek - week : originWeek - week + 7; 219 | subDays = subDays + (Math.abs(index) - 1) * 7; 220 | originDate.setDate(originDate.getDate() - subDays); 221 | } 222 | return originDate; 223 | } 224 | 225 | 226 | 227 | } -------------------------------------------------------------------------------- /components/d-orderbox-picker/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 3 | * @Author: yp 4 | * @Date: 2021-03-08 10:57:31 5 | * @LastEditTime: 2022-08-18 14:52:02 6 | * @LastEditors: yp 7 | */ 8 | const app = getApp() 9 | let dragY = 0; 10 | 11 | //获取封装的微信按键震动 12 | const vibrateUtils = require('../../common/utils/vibrate-utils') 13 | 14 | Component({ 15 | 16 | /** 17 | * 组件的属性列表 18 | */ 19 | properties: { 20 | //弹窗是否可见 21 | visible: { 22 | type: Boolean, 23 | value: true, 24 | observer(visible) { 25 | if (visible) { 26 | const defaultValue = this.data.value; 27 | if (!this.data.value || this.data.value.length <= 0) { 28 | if (this.data.options && this.data.options.length > 0) { 29 | defaultValue.length = this.data.options.length; 30 | defaultValue.fill(false); 31 | console.log('defaultValue', defaultValue) 32 | } 33 | } 34 | this.setData({ 35 | y: 0, 36 | loading: false, 37 | value: defaultValue 38 | }); 39 | } 40 | }, 41 | }, 42 | //标题 43 | title: { 44 | type: String, 45 | value: '' 46 | }, 47 | //取消按钮字体颜色 48 | cancelTextColor: { 49 | type: String, 50 | value: '#727986' 51 | }, 52 | //确认按钮字体颜色 53 | confirmTextColor: { 54 | type: String, 55 | value: '#16A085' 56 | }, 57 | //选项文本颜色 58 | lineTextColor: { 59 | type: String, 60 | value: '#444444' 61 | }, 62 | //当前初始索引数组 63 | value: { 64 | type: Array, 65 | value: [], 66 | observer(value) { 67 | const resultValue = {}; 68 | value.forEach((item, index) => { 69 | resultValue[item] = index 70 | }) 71 | this.setData({ 72 | resultValue 73 | }) 74 | } 75 | }, 76 | options: { 77 | type: Array, 78 | value: [] 79 | } 80 | 81 | }, 82 | 83 | /** 84 | * 组件的初始数据 85 | */ 86 | data: { 87 | y: 0, 88 | //可移动区域 89 | loading: false, 90 | resultValue: {}, 91 | lineHeightRpx: 110, 92 | lineContainerHeightRpx: 330, 93 | propHeightRpx: 430, 94 | propTopRpx: 1000, 95 | //是否可以移动弹窗进行关闭 96 | moveDisable: true, 97 | }, 98 | 99 | //数据监听器 100 | observers: { 101 | 'options': function (options) { 102 | this.init(options); 103 | }, 104 | 105 | }, 106 | /** 107 | * 组件的方法列表 108 | */ 109 | methods: { 110 | 111 | /** 112 | * @description: 初始化弹窗高度及位置 113 | * @param {*} 114 | * @return {*} 115 | */ 116 | init(options) { 117 | const { 118 | lineHeightRpx 119 | } = this.data 120 | let realLine = options.length; 121 | let moveDisable = false; 122 | if (realLine < 3) { 123 | realLine = 3; 124 | } else if (realLine > 7) { 125 | realLine = 7.5 126 | moveDisable = true 127 | } 128 | 129 | //滚动区域高度 130 | const lineContainerHeightRpx = lineHeightRpx * realLine; 131 | //弹窗高度 (头部高度+) 132 | const propHeightRpx = 100 + lineContainerHeightRpx; 133 | //px和rpx换算比 134 | const pixelRatio = 750 / app.globalData.screenWidth 135 | //弹窗位置高度 136 | const propTopRpx = Math.ceil(app.globalData.screenHeight * pixelRatio - propHeightRpx) 137 | 138 | this.setData({ 139 | lineContainerHeightRpx, 140 | propHeightRpx, 141 | propTopRpx, 142 | moveDisable 143 | }) 144 | 145 | }, 146 | 147 | 148 | /** 149 | * @description: 执行复选 150 | * @param {*} e 151 | * @return {*} 152 | */ 153 | lineSelect(e) { 154 | //震动 155 | vibrateUtils.vibrate(); 156 | const { 157 | resultValue 158 | } = this.data; 159 | let idx = e.currentTarget.dataset.idx 160 | idx = Number(idx) 161 | if (isNaN(idx)) { 162 | return; 163 | } 164 | 165 | if (resultValue[idx] === undefined) { 166 | resultValue[idx] = Object.keys(resultValue).length; 167 | } else { 168 | const indexValue = resultValue[idx] || 0; 169 | delete resultValue[idx]; 170 | for (const [key, value] of Object.entries(resultValue)) { 171 | if (value > indexValue) { 172 | resultValue[key] = value - 1; 173 | } 174 | } 175 | } 176 | 177 | this.setData({ 178 | resultValue 179 | }) 180 | 181 | }, 182 | 183 | /** 184 | * @description: 拖动事件回调 185 | * @param {*} e 186 | * @return {*} 187 | */ 188 | dragMove(e) { 189 | if (this.data.moveDisable === true) { 190 | return 191 | } 192 | dragY = e.detail.y; 193 | }, 194 | 195 | /** 196 | * @description: 触摸结束事件回调 197 | * @param {*} e 198 | * @return {*} 199 | */ 200 | toucheEnd() { 201 | if (this.data.moveDisable === true) { 202 | return 203 | } 204 | if (dragY < 70) { 205 | this.setData({ 206 | y: 0 207 | }) 208 | } else { 209 | this.onClose(); 210 | } 211 | dragY = 0; 212 | }, 213 | 214 | /** 215 | * 处理触摸滚动问题 216 | */ 217 | handleCatchTouchMove() { 218 | return false; 219 | }, 220 | 221 | /** 222 | * @description: 关闭弹窗 223 | * @param {*} 224 | * @return {*} 225 | */ 226 | onClose() { 227 | this.setData({ 228 | visible: false 229 | }) 230 | }, 231 | 232 | 233 | /** 234 | * @description: 确认选择 235 | * @param {*} 236 | * @return {*} 237 | */ 238 | onConfirm() { 239 | 240 | //震动 241 | vibrateUtils.vibrate(); 242 | 243 | const { 244 | loading, 245 | resultValue 246 | } = this.data; 247 | if (loading) { 248 | return false; 249 | } 250 | this.onClose(); 251 | 252 | let result = []; 253 | for (const [key, value] of Object.entries(resultValue)) { 254 | if (!isNaN(Number(key))) { 255 | result[value] = Number(key); 256 | } 257 | 258 | } 259 | result = result.filter(item => { 260 | if (isNaN(item)) { 261 | return false; 262 | } 263 | return true; 264 | }) 265 | 266 | console.log('result', result); 267 | 268 | this.triggerEvent('onConfirm', { 269 | 'value': result 270 | }, {}) 271 | 272 | }, 273 | } 274 | }) -------------------------------------------------------------------------------- /pages/index/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 3 | * @Author: yp 4 | * @Date: 2021-04-18 09:42:57 5 | * @LastEditTime: 2022-08-18 15:18:09 6 | * @LastEditors: yp 7 | */ 8 | // pages/set/set.js 9 | 10 | const app = getApp(); 11 | 12 | Component({ 13 | /** 14 | * 组件的属性列表 15 | */ 16 | properties: { 17 | 18 | }, 19 | 20 | /** 21 | * 组件的初始数据 22 | */ 23 | data: { 24 | 25 | //展开按钮 26 | spread: false, 27 | //全页弹窗展示 28 | pageLoading: false, 29 | 30 | //底部弹窗选择器 31 | pickShow: false, 32 | pickerValue: [2, 2], 33 | pickerOptions: [ 34 | ['红色', '绿色', '黄色', '白色', '紫色', '黑色', '橙色'], 35 | ['宝石', '珍珠', '翡翠', '玛瑙', '珊瑚', '钻石'] 36 | ], 37 | 38 | listPickerShow: false, 39 | listValue: 0, 40 | //支持两种列表数据类型（数组列表和对象列表） 41 | listOptions: [{ 42 | title: "巴黎", 43 | desc: "法兰西共和国的首都，也是法国的政治和商业中心" 44 | }, 45 | { 46 | title: "华盛顿", 47 | desc: "华盛顿哥伦比亚特区，美利坚合众国的首都" 48 | }, 49 | { 50 | title: "伦敦", 51 | desc: "大不列颠及北爱尔兰联合王国首都，世界金融中心" 52 | }, 53 | { 54 | title: "伊斯坦布尔", 55 | desc: "原名君士坦丁堡，是土耳其经济、文化、交通中心" 56 | }, 57 | { 58 | title: "巴西利亚", 59 | desc: "巴西联邦共和国首都，是巴西第四大城市" 60 | }, 61 | { 62 | title: "东京", 63 | desc: "日本首都，是面向东京湾的国际大都市" 64 | }, 65 | { 66 | title: "巴塞罗那", 67 | desc: "位于伊比利亚半岛东北部，濒临地中海，是西班牙第二大城市" 68 | }, 69 | { 70 | title: "慕尼黑", 71 | desc: "也称明兴，是德国巴伐利亚州的首府" 72 | }, 73 | { 74 | title: "悉尼", 75 | desc: "位于澳大利亚的东南沿岸，是澳大利亚新南威尔士州的首府" 76 | }, 77 | { 78 | title: "布宜诺斯艾利斯", 79 | desc: "阿根廷的首都和最大城市" 80 | }, 81 | { 82 | title: "莫斯科", 83 | desc: "是俄罗斯联邦首都、莫斯科州首府" 84 | } 85 | ], 86 | 87 | 88 | checkboxPickerShow: false, 89 | chekboxValue: [1, 3, 4], 90 | chekboxOptions: [ 91 | "美国·华盛顿", 92 | "英国·伦敦", 93 | "法国·巴黎", 94 | "土耳其·伊斯坦布尔", 95 | "巴西·巴西利亚", 96 | "日本·东京", 97 | "西班牙·巴塞罗那", 98 | "韩国·汉城", 99 | "澳大利亚·悉尼", 100 | "阿根廷·布宜诺斯艾利斯", 101 | "意大利·都灵", 102 | "俄罗斯·莫斯科", 103 | ], 104 | 105 | orderboxPickerShow: false, 106 | orderboxValue: [5, 3, 1, 2], 107 | orderboxOptions: [ 108 | "美国·华盛顿", 109 | "英国·伦敦", 110 | "法国·巴黎", 111 | "土耳其·伊斯坦布尔", 112 | "巴西·巴西利亚", 113 | "日本·东京", 114 | "西班牙·巴塞罗那", 115 | "韩国·汉城", 116 | "澳大利亚·悉尼", 117 | "阿根廷·布宜诺斯艾利斯", 118 | "意大利·都灵", 119 | "俄罗斯·莫斯科", 120 | ], 121 | 122 | datePickerShow: false, 123 | startTime: 1, 124 | endTime: 1, 125 | valueTime: -1, 126 | 127 | datePickerMDShow: false, 128 | month: -1, 129 | day: -1, 130 | 131 | dialogShow: false, 132 | dialogConfirm: true, 133 | 134 | notifyVisible: false, 135 | iconType: 0, 136 | colorType: 0, 137 | notifyTitle: "通知", 138 | 139 | demo: -1, 140 | 141 | //关于组件库 142 | businessListOptions: [{ 143 | title: "项目地址", 144 | desc: "github：https://github.com/ypFish/daily-ui" 145 | }, 146 | { 147 | title: "联系作者", 148 | desc: "wechat：yp-fish" 149 | } 150 | ], 151 | 152 | }, 153 | 154 | /** 155 | * 组件的方法列表 156 | */ 157 | methods: { 158 | 159 | onShow: function () { 160 | 161 | const current = new Date(); 162 | const valueTime = +new Date(); 163 | const startTime = +new Date(current.getFullYear() - 1, current.getMonth(), current.getDate()); 164 | const endTime = +new Date(current.getFullYear() + 1, current.getMonth(), current.getDate()); 165 | 166 | const month = current.getMonth(); 167 | const day = current.getDate() - 1; 168 | 169 | this.setData({ 170 | valueTime, 171 | startTime, 172 | endTime, 173 | month, 174 | day 175 | }) 176 | }, 177 | 178 | handleSpreadButtonTap() { 179 | this.spread = !this.spread; 180 | this.setData({ 181 | spread: this.spread 182 | }) 183 | }, 184 | 185 | handleCoverPageLoading() { 186 | this.setData({ 187 | pageLoading: true 188 | }, setTimeout(() => { 189 | this.setData({ 190 | pageLoading: false 191 | }) 192 | }, 1200)) 193 | }, 194 | 195 | handlePickerConfirm(e) { 196 | this.setData({ 197 | pickerValue: [e.detail.value[0], e.detail.value[1]] 198 | }) 199 | }, 200 | 201 | handleListConfirm(e) { 202 | this.setData({ 203 | listValue: e.detail.value 204 | }) 205 | }, 206 | 207 | handleCheckboxConfirm(e) { 208 | this.setData({ 209 | chekboxValue: e.detail.value 210 | }) 211 | }, 212 | 213 | handleOrderboxConfirm(e) { 214 | this.setData({ 215 | orderboxValue: e.detail.value 216 | }) 217 | }, 218 | 219 | handleDatePickerConfirm(e) { 220 | this.setData({ 221 | valueTime: e.detail.value 222 | }) 223 | }, 224 | 225 | handleDatePickerMDConfirm(e) { 226 | this.setData({ 227 | month: e.detail.value[0], 228 | day: e.detail.value[1] 229 | }) 230 | }, 231 | 232 | handleDialogShow() { 233 | this.setData({ 234 | dialogShow: true 235 | }) 236 | }, 237 | 238 | handleDialogConfirm(e) { 239 | this.setData({ 240 | dialogConfirm: e.detail.value 241 | }) 242 | }, 243 | 244 | handleNotify() { 245 | this.setData({ 246 | notifyTitle: "操作成功！", 247 | iconType: 0, 248 | colorType: 0, 249 | notifyVisible: true 250 | }) 251 | }, 252 | 253 | handleDemoShow(e) { 254 | const demo = e.currentTarget.dataset.demo ?? -1; 255 | this.setData({ 256 | demo: parseInt(demo), 257 | spread: false 258 | }) 259 | }, 260 | 261 | /** 262 | * @description: 点击商务合作具体项，复制联系方式 263 | * @param {*} e 264 | * @return {*} 265 | */ 266 | handleBusinessListConfirm(e) { 267 | 268 | const { 269 | businessListOptions 270 | } = this.data; 271 | const value = e.detail.value 272 | if (value >= 0 && value < businessListOptions.length) { 273 | let copyValue = businessListOptions[value].desc; 274 | copyValue = businessListOptions[value].desc.includes('：') ? businessListOptions[value].desc.split('：')[1] : businessListOptions[value].desc; 275 | wx.setClipboardData({ 276 | data: copyValue 277 | }) 278 | } 279 | }, 280 | } 281 | 282 | }) -------------------------------------------------------------------------------- /components/d-card/index.less: -------------------------------------------------------------------------------- 1 | @import "../../common/less/common.less"; 2 | 3 | .com-card { 4 | // width: 94vw; 5 | // margin-left:3vw; 6 | width: 100%; 7 | background-color: #fff; 8 | padding: 30rpx; 9 | border-radius: @cardBorderRadius; 10 | box-shadow: 0 0 10rpx rgba(51, 51, 51, 0.05); 11 | overflow: hidden; 12 | position: relative; 13 | 14 | .archor { 15 | position: absolute; 16 | width: 0rpx; 17 | height: 0rpx; 18 | z-index: -1; 19 | left: 0; 20 | top: -200rpx; 21 | } 22 | 23 | .head-box { 24 | width: 100%; 25 | height: auto; 26 | display: flex; 27 | flex-direction: row; 28 | padding-bottom: 20rpx; 29 | border-bottom: 1rpx solid @lightGreyColor; 30 | 31 | @lineHeight: 86rpx; 32 | 33 | .icon-box { 34 | width: 84rpx; 35 | height: 84rpx; 36 | background-color: @greenColor; 37 | display: flex; 38 | align-items: center; 39 | justify-content: center; 40 | position: relative; 41 | border-radius: @lineBorderRadius; 42 | 43 | .icon { 44 | transition: opacity 0.3s ease 0s; 45 | } 46 | } 47 | 48 | .title-box { 49 | flex: 1; 50 | height: @lineHeight; 51 | padding: 0 16rpx; 52 | overflow: hidden; 53 | 54 | .title { 55 | color: @blackColor; 56 | font-weight: bold; 57 | .card-title-font(); 58 | min-width: 60rpx; 59 | 60 | .icon{ 61 | display: inline-block; 62 | margin-left: 10rpx; 63 | transition: opacity 0.3s ease 0s; 64 | opacity: 1; 65 | vertical-align: -2rpx; 66 | } 67 | } 68 | 69 | .desc { 70 | color: @greyColor; 71 | font-weight: bold; 72 | .medium-font(); 73 | margin-top: 2rpx; 74 | .sline(); 75 | } 76 | } 77 | 78 | .nav-box { 79 | height: @lineHeight; 80 | width: 100rpx; 81 | display: flex; 82 | align-items: center; 83 | justify-content: flex-end; 84 | overflow: hidden; 85 | 86 | .nav-share-button{ 87 | width: 100%; 88 | height:@lineHeight; 89 | background-color: #FFFFFF; 90 | color:@greenColor; 91 | display: flex; 92 | font-weight: bold; 93 | align-items: flex-end; 94 | flex-direction: column; 95 | text-align: right; 96 | padding:0; 97 | 98 | .button-icon{ 99 | display: inline-block; 100 | text-align: right; 101 | margin-right: 8rpx; 102 | } 103 | 104 | .button-text{ 105 | display: block; 106 | .small-font(); 107 | width: 100rpx; 108 | margin:4rpx; 109 | } 110 | } 111 | } 112 | } 113 | 114 | .gap-line-hidden { 115 | border-bottom: none; 116 | padding-bottom: 0; 117 | } 118 | 119 | .content-box { 120 | width: 100%; 121 | min-height: @card-min-height*3; 122 | padding-top: 20rpx; 123 | } 124 | } 125 | 126 | .com-card-empty { 127 | .content-box { 128 | display: flex; 129 | align-items: center; 130 | justify-content: center; 131 | flex-direction: column; 132 | height: 420rpx; 133 | 134 | .empty-img { 135 | display: block; 136 | width: 220rpx; 137 | height: 220rpx; 138 | margin-top: -20rpx; 139 | } 140 | 141 | .empty-text { 142 | .medium-font(); 143 | color: @greyColor; 144 | font-weight: bold; 145 | } 146 | } 147 | } 148 | 149 | .com-card-loading { 150 | .head-box-loading { 151 | .icon-box { 152 | background-color: rgba(114, 121, 134, 0.2); 153 | .icon { 154 | opacity: 0; 155 | } 156 | } 157 | .title-box { 158 | .title { 159 | width: 20%; 160 | background-color: rgba(114, 121, 134, 0.2); 161 | border-radius: @lineBorderRadius; 162 | overflow: hidden; 163 | color: rgba(0, 0, 0, 0); 164 | height: 34rpx; 165 | margin-bottom: 18rpx; 166 | 167 | .icon{ 168 | opacity: 0; 169 | } 170 | } 171 | .desc { 172 | width: 80%; 173 | height: 34rpx; 174 | background-color: rgba(114, 121, 134, 0.2); 175 | border-radius: @lineBorderRadius; 176 | overflow: hidden; 177 | color: rgba(0, 0, 0, 0); 178 | } 179 | } 180 | .nav-box { 181 | opacity: 0; 182 | } 183 | } 184 | .content-box { 185 | height: @card-min-height*6; 186 | position: relative; 187 | padding-top:30rpx; 188 | 189 | .loading-line{ 190 | display: inline-block; 191 | width: 100%; 192 | background-color: @lightGreyColor; 193 | height: 56rpx; 194 | border-radius: @lineBorderRadius; 195 | margin:10rpx 0 20rpx 0; 196 | } 197 | 198 | //失败状态提示 199 | .error-tip{ 200 | 201 | position: absolute; 202 | left:0; 203 | right:0; 204 | top:0; 205 | bottom:0; 206 | margin: auto; 207 | width: 600rpx; 208 | height: 220rpx; 209 | display: flex; 210 | align-items: center; 211 | justify-content: flex-start; 212 | flex-direction: column; 213 | 214 | 215 | .error-text{ 216 | .big-font(); 217 | color: @greenColor; 218 | font-weight: bold; 219 | width: 100%; 220 | text-align: center; 221 | display: inline-block; 222 | margin-bottom: 20rpx; 223 | 224 | .error-icon{ 225 | display: inline-block; 226 | vertical-align: -6rpx; 227 | margin-right: 6rpx; 228 | } 229 | } 230 | } 231 | 232 | //等待状态提示 233 | .loading-tip{ 234 | position: absolute; 235 | left:0; 236 | right:0; 237 | top:0; 238 | bottom:0; 239 | margin: auto; 240 | width: 300rpx; 241 | height: 260rpx; 242 | 243 | .loading-icon { 244 | position: absolute; 245 | margin:auto; 246 | left:0; 247 | right:0; 248 | top:0; 249 | width: 120rpx; 250 | height: 120rpx; 251 | transform: rotate(0deg); 252 | 253 | @keyframes circleAns { 254 | 0% { 255 | transform: rotate(0deg); 256 | } 257 | 100% { 258 | transform: rotate(-720deg); 259 | } 260 | } 261 | animation: circleAns 6s linear 0s infinite; 262 | } 263 | 264 | .loading-face-icon{ 265 | position: absolute; 266 | margin:auto; 267 | left:0; 268 | right:0; 269 | top:15rpx; 270 | width: 90rpx; 271 | height: 90rpx; 272 | } 273 | 274 | .loading-text { 275 | .big-font(); 276 | color: @greenColor; 277 | font-weight: bold; 278 | width: 100%; 279 | text-align: center; 280 | position: absolute; 281 | left:0; 282 | bottom:86rpx; 283 | padding-left: .9em; 284 | } 285 | } 286 | } 287 | } 288 | -------------------------------------------------------------------------------- /pages/index/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 不同尺寸按钮 8 | 9 | 10 | 11 | 12 | 13 | 不同颜色按钮 14 | 15 | 16 | 17 | 18 | 19 | 自定义尺寸按钮 20 | 21 | 22 | 23 | 24 | 带图标按钮 25 | 26 | 27 | 28 | 29 | 30 | 不同状态按钮 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 《冥想》——穆旦 42 | 43 | 44 | 把生命的突泉捧在我手里， 45 | 我只觉得它来得新鲜， 46 | 是浓烈的酒，清新的泡沫， 47 | 注入我的奔波、劳作、冒险。 48 | 仿佛前人从未经临的园地 49 | 就要展现在我的面前。 50 | 但如今，突然面对着坟墓， 51 | 我冷眼向过去稍稍回顾， 52 | 只见它曲折灌溉的悲喜 53 | 都消失在一片亘古的荒漠， 54 | 这才知道我的全部努力 55 | 不过完成了普通的生活。 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 底部半页弹窗组件演示 66 | * 支持点击空白弹层关闭 67 | * 支持向下滑动关闭 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | Daily UI 112 | 113 | 风格统一，细节丰富，着重用户体验的小程序组件库 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | -------------------------------------------------------------------------------- /components/d-card/index.wxss: -------------------------------------------------------------------------------- 1 | .sline { 2 | overflow: hidden; 3 | text-overflow: ellipsis; 4 | white-space: nowrap; 5 | } 6 | .number-font { 7 | letter-spacing: 2rpx; 8 | font-family: "Helvetica", "SimSun", "PingFang SC", "Microsoft YaHei"; 9 | } 10 | .card-title-font { 11 | font-size: 33rpx; 12 | line-height: 46rpx; 13 | } 14 | .big-font { 15 | font-size: 30rpx; 16 | line-height: 44rpx; 17 | } 18 | .medium-font { 19 | font-size: 28rpx; 20 | line-height: 40rpx; 21 | } 22 | .small-font { 23 | font-size: 26rpx; 24 | line-height: 36rpx; 25 | } 26 | .tiny-font { 27 | font-size: 20rpx; 28 | line-height: 26rpx; 29 | } 30 | .line-block { 31 | width: 100%; 32 | padding: 20rpx; 33 | background-color: rgba(0, 0, 0, 0.05); 34 | border-radius: 12rpx; 35 | } 36 | .light-line-block { 37 | width: 100%; 38 | padding: 20rpx; 39 | background-color: rgba(0, 0, 0, 0.03); 40 | border-radius: 12rpx; 41 | } 42 | .tip-block { 43 | white-space: nowrap; 44 | display: inline-block; 45 | font-size: 20rpx; 46 | line-height: 26rpx; 47 | padding: 5rpx 8rpx; 48 | border-radius: 6rpx; 49 | } 50 | .com-card { 51 | width: 100%; 52 | background-color: #fff; 53 | padding: 30rpx; 54 | border-radius: 16rpx; 55 | box-shadow: 0 0 10rpx rgba(51, 51, 51, 0.05); 56 | overflow: hidden; 57 | position: relative; 58 | } 59 | .com-card .archor { 60 | position: absolute; 61 | width: 0rpx; 62 | height: 0rpx; 63 | z-index: -1; 64 | left: 0; 65 | top: -200rpx; 66 | } 67 | .com-card .head-box { 68 | width: 100%; 69 | height: auto; 70 | display: flex; 71 | flex-direction: row; 72 | padding-bottom: 20rpx; 73 | border-bottom: 1rpx solid rgba(114, 121, 134, 0.2); 74 | } 75 | .com-card .head-box .icon-box { 76 | width: 84rpx; 77 | height: 84rpx; 78 | background-color: #16a085; 79 | display: flex; 80 | align-items: center; 81 | justify-content: center; 82 | position: relative; 83 | border-radius: 12rpx; 84 | } 85 | .com-card .head-box .icon-box .icon { 86 | transition: opacity 0.3s ease 0s; 87 | } 88 | .com-card .head-box .title-box { 89 | flex: 1; 90 | height: 86rpx; 91 | padding: 0 16rpx; 92 | overflow: hidden; 93 | } 94 | .com-card .head-box .title-box .title { 95 | color: #444444; 96 | font-weight: bold; 97 | font-size: 33rpx; 98 | line-height: 46rpx; 99 | min-width: 60rpx; 100 | } 101 | .com-card .head-box .title-box .title .icon { 102 | display: inline-block; 103 | margin-left: 10rpx; 104 | transition: opacity 0.3s ease 0s; 105 | opacity: 1; 106 | vertical-align: -2rpx; 107 | } 108 | .com-card .head-box .title-box .desc { 109 | color: #727986; 110 | font-weight: bold; 111 | font-size: 28rpx; 112 | line-height: 40rpx; 113 | margin-top: 2rpx; 114 | overflow: hidden; 115 | text-overflow: ellipsis; 116 | white-space: nowrap; 117 | } 118 | .com-card .head-box .nav-box { 119 | height: 86rpx; 120 | width: 100rpx; 121 | display: flex; 122 | align-items: center; 123 | justify-content: flex-end; 124 | overflow: hidden; 125 | } 126 | .com-card .head-box .nav-box .nav-share-button { 127 | width: 100%; 128 | height: 86rpx; 129 | background-color: #FFFFFF; 130 | color: #16a085; 131 | display: flex; 132 | font-weight: bold; 133 | align-items: flex-end; 134 | flex-direction: column; 135 | text-align: right; 136 | padding: 0; 137 | } 138 | .com-card .head-box .nav-box .nav-share-button .button-icon { 139 | display: inline-block; 140 | text-align: right; 141 | margin-right: 8rpx; 142 | } 143 | .com-card .head-box .nav-box .nav-share-button .button-text { 144 | display: block; 145 | font-size: 26rpx; 146 | line-height: 36rpx; 147 | width: 100rpx; 148 | margin: 4rpx; 149 | } 150 | .com-card .gap-line-hidden { 151 | border-bottom: none; 152 | padding-bottom: 0; 153 | } 154 | .com-card .content-box { 155 | width: 100%; 156 | min-height: 300rpx; 157 | padding-top: 20rpx; 158 | } 159 | .com-card-empty .content-box { 160 | display: flex; 161 | align-items: center; 162 | justify-content: center; 163 | flex-direction: column; 164 | height: 420rpx; 165 | } 166 | .com-card-empty .content-box .empty-img { 167 | display: block; 168 | width: 220rpx; 169 | height: 220rpx; 170 | margin-top: -20rpx; 171 | } 172 | .com-card-empty .content-box .empty-text { 173 | font-size: 28rpx; 174 | line-height: 40rpx; 175 | color: #727986; 176 | font-weight: bold; 177 | } 178 | .com-card-loading .head-box-loading .icon-box { 179 | background-color: rgba(114, 121, 134, 0.2); 180 | } 181 | .com-card-loading .head-box-loading .icon-box .icon { 182 | opacity: 0; 183 | } 184 | .com-card-loading .head-box-loading .title-box .title { 185 | width: 20%; 186 | background-color: rgba(114, 121, 134, 0.2); 187 | border-radius: 12rpx; 188 | overflow: hidden; 189 | color: rgba(0, 0, 0, 0); 190 | height: 34rpx; 191 | margin-bottom: 18rpx; 192 | } 193 | .com-card-loading .head-box-loading .title-box .title .icon { 194 | opacity: 0; 195 | } 196 | .com-card-loading .head-box-loading .title-box .desc { 197 | width: 80%; 198 | height: 34rpx; 199 | background-color: rgba(114, 121, 134, 0.2); 200 | border-radius: 12rpx; 201 | overflow: hidden; 202 | color: rgba(0, 0, 0, 0); 203 | } 204 | .com-card-loading .head-box-loading .nav-box { 205 | opacity: 0; 206 | } 207 | .com-card-loading .content-box { 208 | height: 600rpx; 209 | position: relative; 210 | padding-top: 30rpx; 211 | } 212 | .com-card-loading .content-box .loading-line { 213 | display: inline-block; 214 | width: 100%; 215 | background-color: rgba(114, 121, 134, 0.2); 216 | height: 56rpx; 217 | border-radius: 12rpx; 218 | margin: 10rpx 0 20rpx 0; 219 | } 220 | .com-card-loading .content-box .error-tip { 221 | position: absolute; 222 | left: 0; 223 | right: 0; 224 | top: 0; 225 | bottom: 0; 226 | margin: auto; 227 | width: 600rpx; 228 | height: 220rpx; 229 | display: flex; 230 | align-items: center; 231 | justify-content: flex-start; 232 | flex-direction: column; 233 | } 234 | .com-card-loading .content-box .error-tip .error-text { 235 | font-size: 30rpx; 236 | line-height: 44rpx; 237 | color: #16a085; 238 | font-weight: bold; 239 | width: 100%; 240 | text-align: center; 241 | display: inline-block; 242 | margin-bottom: 20rpx; 243 | } 244 | .com-card-loading .content-box .error-tip .error-text .error-icon { 245 | display: inline-block; 246 | vertical-align: -6rpx; 247 | margin-right: 6rpx; 248 | } 249 | .com-card-loading .content-box .loading-tip { 250 | position: absolute; 251 | left: 0; 252 | right: 0; 253 | top: 0; 254 | bottom: 0; 255 | margin: auto; 256 | width: 300rpx; 257 | height: 260rpx; 258 | } 259 | .com-card-loading .content-box .loading-tip .loading-icon { 260 | position: absolute; 261 | margin: auto; 262 | left: 0; 263 | right: 0; 264 | top: 0; 265 | width: 120rpx; 266 | height: 120rpx; 267 | transform: rotate(0deg); 268 | animation: circleAns 6s linear 0s infinite; 269 | } 270 | @keyframes circleAns { 271 | 0% { 272 | transform: rotate(0deg); 273 | } 274 | 100% { 275 | transform: rotate(-720deg); 276 | } 277 | } 278 | .com-card-loading .content-box .loading-tip .loading-face-icon { 279 | position: absolute; 280 | margin: auto; 281 | left: 0; 282 | right: 0; 283 | top: 15rpx; 284 | width: 90rpx; 285 | height: 90rpx; 286 | } 287 | .com-card-loading .content-box .loading-tip .loading-text { 288 | font-size: 30rpx; 289 | line-height: 44rpx; 290 | color: #16a085; 291 | font-weight: bold; 292 | width: 100%; 293 | text-align: center; 294 | position: absolute; 295 | left: 0; 296 | bottom: 86rpx; 297 | padding-left: 0.9em; 298 | } 299 | -------------------------------------------------------------------------------- /common/data/card.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 模拟数据 3 | * @Author: yp 4 | * @Date: 2021-04-19 18:04:02 5 | * @LastEditTime: 2022-02-28 11:42:02 6 | * @LastEditors: yp 7 | */ 8 | 9 | // 卡片状态：（2:数据空，1:正常，0:等待，-1:错误） 10 | 11 | //卡片基础信息 12 | const BASE_CARD_INFO = { 13 | 14 | //获取数据失败状态的卡片 15 | 'error': { 16 | id: -2, 17 | title: '', 18 | desc: '', 19 | iconName: '', 20 | iconSize: 50, 21 | iconBottom: 0, 22 | cardData: { 23 | name: '' 24 | }, 25 | archorClz: '', 26 | comp: '', 27 | iconMiniSize: 27, 28 | opening: false, 29 | from: '', 30 | shareId: '', 31 | status: -1, 32 | 33 | }, 34 | //加载状态的卡片 35 | 'loading': { 36 | id: -1, 37 | title: '', 38 | desc: '', 39 | iconName: '', 40 | iconSize: 50, 41 | iconBottom: 0, 42 | cardData: { 43 | name: '' 44 | }, 45 | archorClz: '', 46 | comp: '', 47 | iconMiniSize: 27, 48 | opening: false, 49 | from: '', 50 | shareId: '', 51 | status: 0 52 | }, 53 | // 日历 54 | 1: { 55 | id: 1, 56 | title: '日历', 57 | // desc: '2020年09月24日 周五 第42周 射手座', 58 | desc: '', 59 | iconName: 'rili-cuxiantiao', 60 | iconSize: 50, 61 | iconBottom: 0, 62 | cardData: { 63 | name: '日历' 64 | }, 65 | archorClz: 'calendar', 66 | comp: 'calendar', 67 | iconMiniSize: 27, 68 | opening: false, 69 | from: '', 70 | //卡片是否允许被分享，分享按钮id 71 | shareId: 'share_1', 72 | status: 0, 73 | }, 74 | 75 | // 纪念日 76 | 2: { 77 | id: 2, 78 | title: '纪念日', 79 | // desc: '最近30天中有3个纪念日', 80 | desc: '', 81 | iconName: 'jieri', 82 | iconSize: 52, 83 | iconBottom: 0, 84 | cardData: { 85 | name: '纪念日' 86 | }, 87 | archorClz: 'festival', 88 | comp: 'festival', 89 | iconMiniSize: 29.12, 90 | opening: false, 91 | from: '', 92 | shareId: '', 93 | status: 0 94 | }, 95 | // 天气 96 | 3: { 97 | id: 3, 98 | title: '天气', 99 | // desc: '中国 北京市 朝阳区', 100 | desc: '', 101 | iconName: 'tianqi1', 102 | iconSize: 54, 103 | iconBottom: 0, 104 | cardData: { 105 | name: '天气' 106 | }, 107 | iconMiniSize: 30.24, 108 | archorClz: 'weather', 109 | comp: 'weather', 110 | opening: false, 111 | status: 0, 112 | from: '', 113 | //卡片是否允许被分享，分享按钮id 114 | shareId: 'share_3', 115 | }, 116 | //尾号限行 117 | 4: { 118 | id: 4, 119 | title: '尾号限行', 120 | desc: '', 121 | iconName: 'cheliang', 122 | iconSize: 56, 123 | iconBottom: 0, 124 | cardData: { 125 | name: '尾号限行' 126 | }, 127 | iconMiniSize: 31.36, 128 | archorClz: 'traffic', 129 | comp: 'traffic', 130 | opening: false, 131 | status: 0, 132 | from: '', 133 | //卡片是否允许被分享，分享按钮id 134 | shareId: 'share_4', 135 | }, 136 | //生日提醒 137 | 5: { 138 | id: 5, 139 | title: '生日提醒', 140 | desc: '', 141 | iconName: 'shengri-weixuan', 142 | iconSize: 56, 143 | iconBottom: 4, 144 | cardData: { 145 | name: '生日提醒' 146 | }, 147 | iconMiniSize: 32, 148 | archorClz: 'birthday', 149 | comp: 'birthday', 150 | opening: false, 151 | from: '', 152 | shareId: '', 153 | status: 0 154 | }, 155 | //实时快报 156 | 6: { 157 | id: 6, 158 | title: '实时快报', 159 | desc: '24小时滚动播报', 160 | iconName: 'shouyinjixian', 161 | iconSize: 56, 162 | iconBottom: 4, 163 | cardData: { 164 | name: '实时快报' 165 | }, 166 | iconMiniSize: 30.4, 167 | archorClz: 'news', 168 | comp: 'news', 169 | opening: false, 170 | from: '', 171 | shareId: '', 172 | status: 0 173 | }, 174 | //经期记录 175 | 7: { 176 | id: 7, 177 | title: '经期记录', 178 | desc: '', 179 | iconName: 'shengliqi', 180 | iconSize: 54, 181 | iconBottom: 0, 182 | cardData: { 183 | name: '经期记录' 184 | }, 185 | iconMiniSize: 31, 186 | archorClz: 'menses', 187 | comp: 'menses', 188 | opening: false, 189 | from: '', 190 | shareId: '', 191 | status: 0 192 | }, 193 | //历史上的今天 194 | 8: { 195 | id: 8, 196 | title: '历史上的今天', 197 | minTitle: '历史今天', 198 | desc: '历史上的1月7日', 199 | iconName: 'shuji-copy', 200 | iconSize: 54, 201 | iconBottom: 0, 202 | cardData: { 203 | name: '历史上的今天' 204 | }, 205 | iconMiniSize: 28, 206 | archorClz: 'history', 207 | comp: 'history', 208 | opening: false, 209 | status: 0, 210 | from: '', 211 | //卡片是否允许被分享，分享按钮id 212 | shareId: 'share_8', 213 | }, 214 | //新事物 215 | 9: { 216 | id: 9, 217 | title: '新事物', 218 | desc: '2021年7月14日8点更新', 219 | iconName: 'xinwen1', 220 | iconSize: 54, 221 | iconBottom: 0, 222 | cardData: { 223 | name: '新事物' 224 | }, 225 | iconMiniSize: 28, 226 | archorClz: 'report', 227 | comp: 'report', 228 | opening: false, 229 | status: 0, 230 | from: '', 231 | //卡片是否允许被分享，分享按钮id 232 | shareId: 'share_9' 233 | }, 234 | //股市 235 | 10: { 236 | id: 10, 237 | title: '股市', 238 | desc: '已添加14支自选股，09:34更新', 239 | iconName: 'gupiao2', 240 | iconSize: 60, 241 | iconBottom: 0, 242 | cardData: { 243 | name: '股市' 244 | }, 245 | iconMiniSize: 33.6, 246 | archorClz: 'stock', 247 | comp: 'stock', 248 | opening: false, 249 | from: '', 250 | shareId: '', 251 | status: 0 252 | }, 253 | //基金 254 | 11: { 255 | id: 11, 256 | title: '基金', 257 | desc: '已添加5支自选基金，16:08更新', 258 | iconName: 'gongmujijin', 259 | iconSize: 56, 260 | iconBottom: 0, 261 | cardData: { 262 | name: '基金' 263 | }, 264 | iconMiniSize: 31.36, 265 | archorClz: 'fund', 266 | comp: 'fund', 267 | opening: false, 268 | from: '', 269 | shareId: '', 270 | status: 0 271 | }, 272 | //世界金融 273 | // 12: { 274 | // id: 12, 275 | // title: '世界金融', 276 | // desc: '16:08更新', 277 | // iconName: 'quanqiu', 278 | // iconSize: 52, 279 | // iconBottom: 0, 280 | // cardData: { 281 | // name: '世界金融' 282 | // }, 283 | // archorClz: 'finance', 284 | // comp: "finance", 285 | // iconMiniSize: 26, 286 | // from: '', 287 | // opening: false, 288 | // status: 0 289 | // }, 290 | //待办事项 291 | 13: { 292 | id: 13, 293 | title: '待办事项', 294 | desc: '今日共5条待办事项', 295 | iconName: 'xinwen4', 296 | iconSize: 58, 297 | iconBottom: 0, 298 | cardData: { 299 | name: '待办事项' 300 | }, 301 | archorClz: 'backlog', 302 | comp: 'backlog', 303 | iconMiniSize: 31, 304 | opening: false, 305 | from: '', 306 | shareId: '', 307 | status: 0 308 | }, 309 | //课程表 310 | 14: { 311 | id: 14, 312 | title: '课程表', 313 | desc: '今日共3节课程', 314 | iconName: 'biaoge2', 315 | iconSize: 48, 316 | iconBottom: 0, 317 | cardData: { 318 | name: '课程表' 319 | }, 320 | archorClz: 'timetable', 321 | comp: 'timetable', 322 | iconMiniSize: 26, 323 | opening: false, 324 | from: '', 325 | status: 0, 326 | //卡片是否允许被分享，分享按钮id 327 | shareId: 'share_14' 328 | }, 329 | //彩票 330 | 15: { 331 | id: 15, 332 | title: '彩票', 333 | desc: '已添加3类彩票', 334 | iconName: 'piaohao', 335 | iconSize: 52, 336 | iconBottom: 0, 337 | cardData: { 338 | name: '彩票' 339 | }, 340 | archorClz: 'lottery', 341 | comp: 'lottery', 342 | iconMiniSize: 29.12, 343 | opening: false, 344 | from: '', 345 | shareId: '', 346 | status: 0 347 | }, 348 | //打卡 349 | 16: { 350 | id: 16, 351 | title: '打卡', 352 | desc: '已创建3个打卡项', 353 | iconName: 'daka4', 354 | iconSize: 46, 355 | iconBottom: 0, 356 | cardData: { 357 | name: '打卡' 358 | }, 359 | archorClz: 'check', 360 | comp: 'check', 361 | iconMiniSize: 27, 362 | opening: false, 363 | from: '', 364 | shareId: '', 365 | status: 0 366 | }, 367 | // 17: { 368 | // id: 17, 369 | // title: '旅行推荐', 370 | // desc: '7月上旬推荐旅行目的地', 371 | // iconName: 'lvyou1', 372 | // iconSize: 60, 373 | // iconBottom: 0, 374 | // cardData: { 375 | // name: '当季旅行推荐' 376 | // }, 377 | // iconMiniSize: 34, 378 | // opening: false, 379 | // status: 0 380 | // }, 381 | 18: { 382 | id: 18, 383 | title: '世界时间', 384 | desc: '以北京（东八时区）时间为基准时间', 385 | iconName: 'lishijilu', 386 | iconSize: 56, 387 | iconBottom: 0, 388 | cardData: { 389 | name: '世界时间' 390 | }, 391 | archorClz: 'clock', 392 | comp: 'clock', 393 | iconMiniSize: 30, 394 | opening: false, 395 | from: '', 396 | shareId: '', 397 | status: 0 398 | }, 399 | }; 400 | 401 | module.exports = { 402 | 403 | //卡片基础信息对象 404 | baseCardInfo: BASE_CARD_INFO, 405 | 406 | //卡片默认展示卡片列表 407 | baseCardList: [ 408 | //日历 409 | BASE_CARD_INFO[1], 410 | //天气 411 | BASE_CARD_INFO[3], 412 | //待办事项 413 | BASE_CARD_INFO[13], 414 | //纪念日 415 | BASE_CARD_INFO[2], 416 | //生日提醒 417 | BASE_CARD_INFO[5], 418 | //课程表 419 | BASE_CARD_INFO[14], 420 | //经期记录 421 | BASE_CARD_INFO[7], 422 | //尾号限行 423 | BASE_CARD_INFO[4], 424 | //新事物 425 | BASE_CARD_INFO[9], 426 | //实时快报 427 | BASE_CARD_INFO[6], 428 | //历史上的今天 429 | BASE_CARD_INFO[8], 430 | //打卡 431 | BASE_CARD_INFO[16], 432 | //彩票 433 | BASE_CARD_INFO[15], 434 | //股市 435 | BASE_CARD_INFO[10], 436 | //基金 437 | BASE_CARD_INFO[11], 438 | //世界时间 439 | BASE_CARD_INFO[18], 440 | ], 441 | 442 | //默认展示的卡片id列表 443 | baseCardIdList: [ 444 | 1, 3, 13, 2, 5, 14, 7, 4, 9, 6, 8, 16, 15, 10, 11, 18 445 | ], 446 | 447 | 448 | 449 | } --------------------------------------------------------------------------------