mirror of
https://gitee.com/wot-design-uni/wot-design-uni.git
synced 2025-12-06 17:18:40 +08:00
docs: ✏️ 调整一些组件代码
This commit is contained in:
xuqingkai
parent
69a4ef5540
commit
609eeddb3a
@ -1,22 +0,0 @@
|
|||||||
/*
|
|
||||||
* @Author: weisheng
|
|
||||||
* @Date: 2022-02-24 15:37:04
|
|
||||||
* @LastEditTime: 2023-03-21 20:57:36
|
|
||||||
* @LastEditors: weisheng
|
|
||||||
* @Description: 讲生成的changelog移动到文档和组件中
|
|
||||||
* @FilePath: \fant-mini-plus-plus\build\changelog.js
|
|
||||||
* 记得注释
|
|
||||||
*/
|
|
||||||
const fs = require('fs')
|
|
||||||
const path = require('path')
|
|
||||||
const fromPath = path.resolve(__dirname, '../CHANGELOG.md')
|
|
||||||
const toPath = path.resolve(__dirname, '../src/uni_modules/fant-mini-plus')
|
|
||||||
const docPath = path.resolve(__dirname, '../fant-doc/docs/components')
|
|
||||||
|
|
||||||
try {
|
|
||||||
const file = fs.readFileSync(fromPath, 'utf-8')
|
|
||||||
fs.writeFileSync(`${toPath}/changelog.md`, file)
|
|
||||||
fs.writeFileSync(`${docPath}/changelog.md`, file)
|
|
||||||
} catch (error) {
|
|
||||||
console.log('CHANGELOG 获取失败')
|
|
||||||
}
|
|
||||||
@ -1,27 +0,0 @@
|
|||||||
-----BEGIN RSA PRIVATE KEY-----
|
|
||||||
MIIEogIBAAKCAQEAqtvdTeEPKGwStj1fVg6UWlMN5uxMv7TQDVs/6vlHSf307ObC
|
|
||||||
6acjvH+Id2ci5OepN6NgKoGh3P3xwLAXQsOQsCvfnlwiRFaTZ/kD6BWTPSxLHmpf
|
|
||||||
oS4LYEqUxTrRKnypOarGvqOIvkLNyzpw5En8Vnf1/K67eoFY0UFF87fn4763zlUW
|
|
||||||
wOuzvVYu56i7FLdU2v0m3UdguJ6pZ3VGpTVfOpkA/nnTjRvPVjFK0BgQBLnHzXUx
|
|
||||||
1kcA3ZRuCOEFGnyxgaIGwxmD2k5rcwFmvgXkOTaZeERdlRj3As8N7scGsSaIm2RJ
|
|
||||||
y43lQg2l4gEY2F9HZniGC3H5Qiqa8YttVFGX2wIDAQABAoIBAFUk2eTceeRH7w84
|
|
||||||
CFFnVJCqgOwJ57lFDsUJKxIahWcfEjYYTRuI+isOVuBB2ka+FzqtxNeJ4DKzrgy6
|
|
||||||
8+yGbo0MYBSXj1AE4NJYapT2Y3iBoTGYCu3Ud0DWCcs7o06L7vzY2M/ZyOQfgFR9
|
|
||||||
XBK3t/MTNtdj7/N9j9g/se9hP0LjUEqBBzsE27CGNIu2YzbXxQ5Se72WkM665v5K
|
|
||||||
Ivkb7Pgh+duN0Bt4hR2BsMUWK/SGOoGoXpM1TgDwzNyRQEgjPOpX/Ipt0AO3jVhL
|
|
||||||
xS3mFQD6NQckm6l8QTma8su7lFod+K3nvC24QTwbtAfxWdrioLfDyxcGZzUk82Gb
|
|
||||||
XYXnkIECgYEA1tGQFk1H4bU+ARDrwolPQJI/WPdLs9sscheEeiu2nM6kdbAmwnzm
|
|
||||||
sY2NtOynksrLMXeEyGCnXtKm7qEH+tUBVB/lsgEXw9Te1gHGZSBk/aPNcA5jXTOA
|
|
||||||
8684zZBJ6JZVsGmAVbAjti6yUsMhSZk8MjGJnhNKlPqWoURl1q3TmcECgYEAy5zu
|
|
||||||
wIkd7pmoWHczv9aoMRUUu8xtTNUTq1pfbCb6sc2v4Nocw3+Wtbf3xwe7gwd7QhBn
|
|
||||||
clwMF/reNslFxyuQQRB1UIOP3igJ6r4sTCPAl8Qsj8xdmN9DMa1WVSLPjCEdj+6Z
|
|
||||||
0tAnOiYPYCqxG+Hsvbmm5vGk3Kj+nW97lZ8TgJsCgYB95rC2AXEhneHLKimjCGrE
|
|
||||||
g3JRKA7cSJZR/+qK19fdK1dECouM7Tsf0MC+yvyjketpAI14Cv3NG1TvAr30iqaO
|
|
||||||
sWsj2nQdOEOp1bx7RHMsHLao+CXQWAE50PZPtEM85+8sx4iJsAQeIFwvGWIHCqI3
|
|
||||||
IMVxOgk6K2vg9H9jRNmBgQKBgGTpzYbNLnGP5FicE6DToZ5Z5WHCSrWWsV3ut3Zh
|
|
||||||
x0QSPkYBs9nMxYQgvoP9OBkTvyoZ+Ts7lZ7Y7gNXM+cnlyI4JvyVh9tCGtAmGsxN
|
|
||||||
t+lACBno3saieKoJT814KEc6Lm2kgsZx9c8jB+HQpuC701qgxbCWOPBILZEXrLeW
|
|
||||||
FNNbAoGAfxFWLGPXl6oB8qAXX/41v8RhhsziBAuOfoRy7CzkGm1L2BWjTXF/gR/0
|
|
||||||
xVrNTm/sRIX82zLt/AwWZZja9TutEa3PIGo+E6VaTDIMMyT/vPFol1SWabcRaQgk
|
|
||||||
KivcysDoP2DLtwYjVznD3WLmxNVN0boNjnZWto3hYzxAqlkVcg4=
|
|
||||||
-----END RSA PRIVATE KEY-----
|
|
||||||
@ -1,46 +0,0 @@
|
|||||||
/*
|
|
||||||
* @Author: weisheng
|
|
||||||
* @Date: 2023-03-21 20:58:19
|
|
||||||
* @LastEditTime: 2023-03-21 20:58:31
|
|
||||||
* @LastEditors: weisheng
|
|
||||||
* @Description:
|
|
||||||
* @FilePath: \fant-mini-plus-plus\build\compiler.js
|
|
||||||
* 记得注释
|
|
||||||
*/
|
|
||||||
const fs = require('fs')
|
|
||||||
const path = require('path')
|
|
||||||
|
|
||||||
const src = path.resolve(__dirname, '../src/uni_modules/fant-mini-plus')
|
|
||||||
const libDir = path.resolve(__dirname, '../lib')
|
|
||||||
|
|
||||||
const copyFile = function (srcPath, tarPath, filter = []) {
|
|
||||||
fs.mkdir(tarPath, (err) => {})
|
|
||||||
fs.readdir(srcPath, function (err, files) {
|
|
||||||
if (err === null) {
|
|
||||||
files.forEach(function (filename) {
|
|
||||||
const filedir = path.join(srcPath, filename)
|
|
||||||
const filterFlag = filter.some((item) => {
|
|
||||||
return path.extname(filename).toLowerCase() === item && filename !== 'changelog.md'
|
|
||||||
})
|
|
||||||
if (!filterFlag) {
|
|
||||||
fs.stat(filedir, function (errs, stats) {
|
|
||||||
const isFile = stats.isFile()
|
|
||||||
if (isFile) {
|
|
||||||
// 复制文件
|
|
||||||
const destPath = path.join(tarPath, filename)
|
|
||||||
fs.copyFile(filedir, destPath, (err) => {})
|
|
||||||
} else {
|
|
||||||
// 创建文件夹
|
|
||||||
const tarFiledir = path.join(tarPath, filename)
|
|
||||||
copyFile(filedir, tarFiledir, filter) // 递归
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
if (err) console.error(err)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
copyFile(src, libDir, ['.md'])
|
|
||||||
@ -1,72 +0,0 @@
|
|||||||
/*
|
|
||||||
* @Author: weisheng
|
|
||||||
* @Date: 2022-01-28 14:23:02
|
|
||||||
* @LastEditTime: 2023-03-21 20:59:16
|
|
||||||
* @LastEditors: weisheng
|
|
||||||
* @Description:
|
|
||||||
* @FilePath: \fant-mini-plus\build\deploy.js
|
|
||||||
* 记得注释
|
|
||||||
*/
|
|
||||||
|
|
||||||
const OSS = require('ali-oss')
|
|
||||||
const fs = require('fs')
|
|
||||||
|
|
||||||
const client = new OSS({
|
|
||||||
region: 'oss-cn-hongkong',
|
|
||||||
accessKeyId: 'LTAI5tJ6okg3xgdy4VfCjmzs',
|
|
||||||
accessKeySecret: '8Hk0Af1CQufErdjrnTI2o5BQmbhY41',
|
|
||||||
bucket: 'historysoa'
|
|
||||||
})
|
|
||||||
|
|
||||||
async function putOss(ossPath, filePath) {
|
|
||||||
try {
|
|
||||||
const result = await client.multipartUpload(ossPath, filePath)
|
|
||||||
console.log(`上传远程oss文件:${filePath}成功！`)
|
|
||||||
} catch (e) {
|
|
||||||
console.log(`上传异常：${e}`)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 上传前删除所有的文件
|
|
||||||
*/
|
|
||||||
async function deleteAll(object) {
|
|
||||||
const result = await client.list({
|
|
||||||
prefix: `${object}`
|
|
||||||
})
|
|
||||||
result.objects.forEach((item) => {
|
|
||||||
client.delete(item.name)
|
|
||||||
console.log(`删除远程oss文件:${item.name}成功！`)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 获取指定文件夹下的文件
|
|
||||||
* @param {string} local 文件夹路径
|
|
||||||
*/
|
|
||||||
async function addFile(local, objectName, srcName) {
|
|
||||||
const localFiles = fs.readdirSync(local)
|
|
||||||
localFiles.forEach(async (localFile) => {
|
|
||||||
// 拼接文件夹子项的路径
|
|
||||||
const filePath = `${local}/${localFile}`
|
|
||||||
// 获取子项文件信息
|
|
||||||
const stat = fs.statSync(filePath)
|
|
||||||
if (stat.isFile()) {
|
|
||||||
console.log(srcName, 'srcName')
|
|
||||||
const ossPath = filePath.split(`${srcName ? srcName : local}`).join(`${objectName}`)
|
|
||||||
// 上传到oss
|
|
||||||
await putOss(ossPath, filePath)
|
|
||||||
} else {
|
|
||||||
addFile(filePath, objectName, srcName ? srcName : local)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
async function upload() {
|
|
||||||
await deleteAll('fant-mini-plus')
|
|
||||||
await addFile('fant-doc/dist', 'fant-mini-plus')
|
|
||||||
await deleteAll('fant-demo')
|
|
||||||
await addFile('dist/build/h5', 'fant-demo')
|
|
||||||
}
|
|
||||||
|
|
||||||
upload()
|
|
||||||
@ -1,54 +0,0 @@
|
|||||||
/*
|
|
||||||
* @Author: weisheng
|
|
||||||
* @Date: 2022-02-11 15:19:37
|
|
||||||
* @LastEditTime: 2023-03-28 16:40:46
|
|
||||||
* @LastEditors: weisheng
|
|
||||||
* @Description:
|
|
||||||
* @FilePath: \fant-mini-plus\build\docs.js
|
|
||||||
* 记得注释
|
|
||||||
*/
|
|
||||||
const fs = require('fs')
|
|
||||||
const path = require('path')
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 获取指定文件夹下的文件
|
|
||||||
* @param {string} local 文件夹路径
|
|
||||||
*/
|
|
||||||
function getFile(local) {
|
|
||||||
const localFiles = fs.readdirSync(local).filter((file) => {
|
|
||||||
return path.extname(file).toLowerCase() === '' || path.extname(file).toLowerCase() === '.md'
|
|
||||||
})
|
|
||||||
const docfile = {
|
|
||||||
introduction: '', // 简介
|
|
||||||
instructions: '', // 使用说明
|
|
||||||
api: ''
|
|
||||||
} // 文档文件内容
|
|
||||||
localFiles.forEach((localFile) => {
|
|
||||||
// 拼接文件夹子项的路径
|
|
||||||
const filePath = `${local}/${localFile}`
|
|
||||||
// 获取子项文件信息
|
|
||||||
const stat = fs.statSync(filePath)
|
|
||||||
if (stat.isFile()) {
|
|
||||||
if (localFile === 'API.md') {
|
|
||||||
// 读取markdown
|
|
||||||
const file = fs.readFileSync(filePath, 'utf-8')
|
|
||||||
docfile.api = file.replace(new RegExp(file.split('\n\n', 2)[0], 'g'), '').replace(new RegExp(file.split('\n\n', 2)[1], 'g'), '')
|
|
||||||
// fs.writeFileSync(`docs/components/${filePath.split('/').reverse()[1]}.md`, file)
|
|
||||||
} else if (localFile === 'README.md') {
|
|
||||||
// 读取markdown为数组
|
|
||||||
docfile.introduction = fs.readFileSync(filePath, 'utf-8')
|
|
||||||
} else if (localFile === 'INDEX.md') {
|
|
||||||
// 读取markdown为数组
|
|
||||||
docfile.instructions = fs.readFileSync(filePath, 'utf-8')
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
getFile(filePath)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
if (docfile.api || docfile.instructions || docfile.introduction) {
|
|
||||||
fs.writeFileSync(`fant-doc/docs/components/${local.split('/').reverse()[0]}.md`, docfile.introduction + docfile.instructions + docfile.api)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 合并文档
|
|
||||||
getFile('src/uni_modules/fant-mini-plus/components')
|
|
||||||
@ -1,283 +0,0 @@
|
|||||||
/*
|
|
||||||
* @Author: 庞昭昭
|
|
||||||
* @Date: 2022-02-21 10:23:46
|
|
||||||
* @LastEditTime: 2023-03-21 20:59:58
|
|
||||||
* @LastEditors: weisheng
|
|
||||||
* @Description: 创建文件夹并初始化
|
|
||||||
* @FilePath: \fant-mini-plus\build\generate.js
|
|
||||||
* 记得注释
|
|
||||||
*/
|
|
||||||
const fs = require('fs')
|
|
||||||
const path = require('path')
|
|
||||||
const inquirer = require('inquirer')
|
|
||||||
const { execSync } = require('child_process')
|
|
||||||
|
|
||||||
inquirer
|
|
||||||
.prompt([
|
|
||||||
{
|
|
||||||
type: 'list',
|
|
||||||
name: 'operation',
|
|
||||||
message: '请选择操作类型（默认值：✨ create）',
|
|
||||||
choices: ['✨ create 创建', '🐛 modify 编辑', '🚀 remove 移除'],
|
|
||||||
default: '✨ create 创建'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'list',
|
|
||||||
name: 'type',
|
|
||||||
message: '请选择组件类型（默认值：✨ basic 基础组件）',
|
|
||||||
choices: ['✨ basic 基础组件', '🐛 form 表单组件', '🚀 action 反馈组件', '🔬 display 展示组件', '🧭 navigation 导航组件'],
|
|
||||||
default: '✨ basic 基础组件'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'input',
|
|
||||||
name: 'oldname',
|
|
||||||
message: '请输入原组件名',
|
|
||||||
default: '',
|
|
||||||
when: function (answers) {
|
|
||||||
// 当操作不是创建
|
|
||||||
return answers['operation'] !== '✨ create 创建'
|
|
||||||
},
|
|
||||||
validate: function (val) {
|
|
||||||
if (!val || !val.trim()) {
|
|
||||||
return '请输入原组件名'
|
|
||||||
} else {
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'input',
|
|
||||||
name: 'name',
|
|
||||||
message: '请输入组件名',
|
|
||||||
default: '',
|
|
||||||
validate: function (val) {
|
|
||||||
if (!val || !val.trim()) {
|
|
||||||
return '请输入组件名'
|
|
||||||
} else {
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'list',
|
|
||||||
name: 'confirm',
|
|
||||||
message: '确认操作吗？',
|
|
||||||
choices: ['Y', 'N'],
|
|
||||||
default: 'Y'
|
|
||||||
}
|
|
||||||
])
|
|
||||||
.then((answers) => {
|
|
||||||
if (!answers['confirm'] || answers['confirm'].toLowerCase() != 'y') {
|
|
||||||
console.log('🚨 操作取消')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
let name = ''
|
|
||||||
if (answers['name']) {
|
|
||||||
name = answers['name']
|
|
||||||
}
|
|
||||||
|
|
||||||
let oldname = ''
|
|
||||||
if (answers['oldname']) {
|
|
||||||
oldname = answers['oldname']
|
|
||||||
}
|
|
||||||
|
|
||||||
let type = ''
|
|
||||||
if (answers['type']) {
|
|
||||||
type = answers['type'].split(' ')[1]
|
|
||||||
}
|
|
||||||
|
|
||||||
// 文件夹父目录
|
|
||||||
const parentPath = 'src/uni_modules/fant-mini-plus/components'
|
|
||||||
// 文件夹目录
|
|
||||||
const folderPath = `${parentPath}/${name}`
|
|
||||||
|
|
||||||
// 操作
|
|
||||||
switch (answers['operation']) {
|
|
||||||
case '✨ create 创建':
|
|
||||||
create(folderPath, type, name) // 新建
|
|
||||||
break
|
|
||||||
case '🐛 modify 编辑':
|
|
||||||
modify(folderPath, type, name, oldname) // 编辑名称
|
|
||||||
break
|
|
||||||
case '🚀 remove 移除':
|
|
||||||
remove(folderPath, type, name, oldname) // 删除
|
|
||||||
break
|
|
||||||
default:
|
|
||||||
break
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((error) => {
|
|
||||||
if (error.isTtyError) {
|
|
||||||
// Prompt couldn't be rendered in the current environment
|
|
||||||
} else {
|
|
||||||
// Something else went wrong
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// 创建
|
|
||||||
function create(url, type, name) {
|
|
||||||
// 检查创建路径是否存在
|
|
||||||
if (!fs.existsSync(url)) {
|
|
||||||
// 不存在，创建文件夹
|
|
||||||
fs.mkdirSync(url)
|
|
||||||
// vue模板代码
|
|
||||||
const vueTemplate = `<template>
|
|
||||||
<view class="${name}"></view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: '${name}',
|
|
||||||
props: {}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.${name} {}
|
|
||||||
</style>`
|
|
||||||
// 创建vue组件
|
|
||||||
fs.writeFile(`${url}/${name}.vue`, vueTemplate, (err) => {
|
|
||||||
if (err) throw err
|
|
||||||
})
|
|
||||||
// 创建代码演示文档
|
|
||||||
fs.writeFile(`${url}/INDEX.md`, '## 代码演示', (err) => {
|
|
||||||
if (err) throw err
|
|
||||||
})
|
|
||||||
// 创建组件说明文档
|
|
||||||
fs.writeFile(`${url}/README.md`, '', (err) => {
|
|
||||||
if (err) throw err
|
|
||||||
})
|
|
||||||
// 更新doc文档
|
|
||||||
updateDoc('create', type, name)
|
|
||||||
} else {
|
|
||||||
console.error('warning：文件夹已存在', url)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 编辑
|
|
||||||
function modify(url, type, name, oldname) {
|
|
||||||
const oldName = oldname
|
|
||||||
const newName = name
|
|
||||||
// 判断给定的路径是否存在
|
|
||||||
if (fs.existsSync(url)) {
|
|
||||||
if (!newName) {
|
|
||||||
console.log('error：请传入新名称')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* 返回文件和子目录的数组
|
|
||||||
*/
|
|
||||||
files = fs.readdirSync(url)
|
|
||||||
files.forEach((file, index) => {
|
|
||||||
// 规范化生成文件路径。
|
|
||||||
const curPath = path.join(url, file)
|
|
||||||
/**
|
|
||||||
* fs.statSync同步读取文件夹文件，如果是文件夹，在重复触发函数
|
|
||||||
*/
|
|
||||||
if (fs.statSync(curPath).isDirectory()) {
|
|
||||||
// recurse
|
|
||||||
modify(curPath.replace(/\\/g, '/'))
|
|
||||||
} else {
|
|
||||||
// 获取文件内容
|
|
||||||
const cur = fs.readFileSync(curPath, 'utf-8')
|
|
||||||
// 替换文件名称
|
|
||||||
fs.writeFileSync(curPath, cur.replace(new RegExp(oldName, 'g'), newName), (err) => {
|
|
||||||
if (err) throw err
|
|
||||||
})
|
|
||||||
if (file.includes(oldName)) {
|
|
||||||
// 修改文件名称
|
|
||||||
fs.renameSync(`${url}/${file}`, `${url}/${file.replace(new RegExp(oldName, 'g'), newName)}`)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
/**
|
|
||||||
* 修改文件夹名称
|
|
||||||
*/
|
|
||||||
const newUrlArr = url.split('/')
|
|
||||||
newUrlArr.splice(newUrlArr.length - 1, 1, newName)
|
|
||||||
const newUrl = newUrlArr.join('/')
|
|
||||||
fs.renameSync(url, newUrl, (err) => {
|
|
||||||
if (err) throw err
|
|
||||||
})
|
|
||||||
// 更新doc文档配置
|
|
||||||
updateDoc(type, name)
|
|
||||||
} else {
|
|
||||||
console.error('error：给定的路径不存在，请给出正确的路径', folderPath)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 删除
|
|
||||||
function remove(url, type, name, oldname) {
|
|
||||||
// 判断给定的路径是否存在
|
|
||||||
if (fs.existsSync(url)) {
|
|
||||||
/**
|
|
||||||
* 返回文件和子目录的数组
|
|
||||||
*/
|
|
||||||
files = fs.readdirSync(url)
|
|
||||||
files.forEach((file, index) => {
|
|
||||||
// 规范化生成文件路径。
|
|
||||||
const curPath = path.join(url, file)
|
|
||||||
/**
|
|
||||||
* fs.statSync同步读取文件夹文件，如果是文件夹，在重复触发函数
|
|
||||||
*/
|
|
||||||
if (fs.statSync(curPath).isDirectory()) {
|
|
||||||
// recurse
|
|
||||||
remove(curPath)
|
|
||||||
} else {
|
|
||||||
// 函数删除文件
|
|
||||||
fs.unlinkSync(curPath)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
/**
|
|
||||||
* 清除文件夹
|
|
||||||
*/
|
|
||||||
fs.rmdirSync(url)
|
|
||||||
// 更新doc文档配置
|
|
||||||
updateDoc(type, name, oldname)
|
|
||||||
} else {
|
|
||||||
console.error('error：给定的路径不存在，请给出正确的路径', folderPath)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 更新doc文档新config
|
|
||||||
function updateDoc(operation, type, name, oldname) {
|
|
||||||
// 更新config配置
|
|
||||||
// 获取组件list集合
|
|
||||||
const cmpList = require(`../fant-doc/docs/.vuepress/cmp/${type}.js`)
|
|
||||||
|
|
||||||
// 操作
|
|
||||||
if (operation == 'create') {
|
|
||||||
// 将新建文档插入到数组末尾
|
|
||||||
if (!cmpList.children.includes(`/components/${name}`)) {
|
|
||||||
// 检查是否已存在文档路径配置，避免重复加入
|
|
||||||
cmpList.children.push(`/components/${name}`)
|
|
||||||
// 重写cmpList文件
|
|
||||||
fs.writeFileSync(`fant-doc/docs/.vuepress/cmp/${type}.js`, `module.exports = ${JSON.stringify(cmpList)}`, (err) => {
|
|
||||||
if (err) throw err
|
|
||||||
})
|
|
||||||
}
|
|
||||||
} else if (operation == 'modify') {
|
|
||||||
const oldName = oldname
|
|
||||||
const newName = name
|
|
||||||
// 替换文档路径名称
|
|
||||||
cmpList.children.splice(cmpList.children.indexOf(`/components/${oldName}`), 1, `/components/${newName}`)
|
|
||||||
// 重写cmpList文件
|
|
||||||
fs.writeFileSync(`fant-doc/docs/.vuepress/cmp/${type}.js`, `module.exports = ${JSON.stringify(cmpList)}`, (err) => {
|
|
||||||
if (err) throw err
|
|
||||||
})
|
|
||||||
} else if (operation == 'remove') {
|
|
||||||
// 获取删除文档路径配置下标
|
|
||||||
const index = cmpList.children.indexOf(`/components/${name}`)
|
|
||||||
if (index > -1) {
|
|
||||||
// 检查是否已存在文档路径配置，存在时删除
|
|
||||||
cmpList.children.splice(index, 1)
|
|
||||||
// 重写cmpList文件
|
|
||||||
fs.writeFileSync(`fant-doc/docs/.vuepress/cmp/${type}.js`, `module.exports = ${JSON.stringify(cmpList)}`, (err) => {
|
|
||||||
if (err) throw err
|
|
||||||
})
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
console.log('无操作，未更新文档')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,87 +0,0 @@
|
|||||||
/*
|
|
||||||
* @Author: weisheng
|
|
||||||
* @Date: 2022-11-01 17:12:57
|
|
||||||
* @LastEditTime: 2023-03-28 16:40:56
|
|
||||||
* @LastEditors: weisheng
|
|
||||||
* @Description: 组件发版问答
|
|
||||||
* @FilePath: \fant-mini-plus\build\release.js
|
|
||||||
* 记得注释
|
|
||||||
*/
|
|
||||||
const inquirer = require('inquirer')
|
|
||||||
// Node 核心模块
|
|
||||||
const { execSync } = require('child_process')
|
|
||||||
const { writeFileSync, readFileSync } = require('fs')
|
|
||||||
const path = require('path')
|
|
||||||
const src = path.resolve(__dirname, '../src/uni_modules/fant-mini-plus')
|
|
||||||
const oldVersion = require('../package.json').version
|
|
||||||
inquirer
|
|
||||||
.prompt([
|
|
||||||
{
|
|
||||||
type: 'list',
|
|
||||||
name: 'version',
|
|
||||||
message: '请选择发版类型（默认值：✨ minor）',
|
|
||||||
choices: ['🐛 patch 小版本', '✨ minor 中版本', '🚀 major 大版本'],
|
|
||||||
default: '✨ minor 中版本'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'list',
|
|
||||||
name: 'release',
|
|
||||||
message: '确认发布？',
|
|
||||||
choices: ['Y', 'N'],
|
|
||||||
default: 'Y'
|
|
||||||
}
|
|
||||||
])
|
|
||||||
.then((answers) => {
|
|
||||||
if (!answers['release'] || answers['release'].toLowerCase() != 'y') {
|
|
||||||
console.log('🚨 操作取消')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
// 项目版本更新
|
|
||||||
switch (answers['version']) {
|
|
||||||
case '🐛 patch 小版本':
|
|
||||||
execSync('yarn release-patch')
|
|
||||||
break
|
|
||||||
case '✨ minor 中版本':
|
|
||||||
execSync('yarn release-minor')
|
|
||||||
break
|
|
||||||
case '🚀 major 大版本':
|
|
||||||
execSync('yarn release-major')
|
|
||||||
break
|
|
||||||
default:
|
|
||||||
execSync('yarn release-minor')
|
|
||||||
break
|
|
||||||
}
|
|
||||||
// 生成日志
|
|
||||||
execSync('yarn changelog')
|
|
||||||
// 更新版本
|
|
||||||
const file = readFileSync(path.resolve(__dirname, '../package.json'))
|
|
||||||
const packageJson = JSON.parse(file.toString())
|
|
||||||
const version = packageJson.version
|
|
||||||
console.log(`√ bumping version in package.json from ${oldVersion} to ${version}`)
|
|
||||||
const package = require('../src/uni_modules/fant-mini-plus/package.json')
|
|
||||||
package.version = version
|
|
||||||
writeFileSync(path.resolve(src, 'package.json'), JSON.stringify(package))
|
|
||||||
// 生成声明文件
|
|
||||||
execSync('yarn build:types')
|
|
||||||
console.log('√ build:types complete')
|
|
||||||
// 生成制品
|
|
||||||
execSync('yarn compiler')
|
|
||||||
console.log('√ compiler complete')
|
|
||||||
execSync(`node build/updateDownloadVersion.js ${oldVersion} ${version}`)
|
|
||||||
execSync('yarn lint')
|
|
||||||
execSync('git add -A ')
|
|
||||||
execSync(`git commit -am "build: compile ${version}"`)
|
|
||||||
execSync(`git tag -a v${version} -am "chore(release): ${version}"`)
|
|
||||||
console.log('√ committing changes')
|
|
||||||
const branch = execSync('git branch --show-current').toString().replace(/\*/g, '').replace(/ /g, '')
|
|
||||||
console.log('🎉 版本发布成功')
|
|
||||||
const tip = 'Run `git push --follow-tags origin ' + branch + '` ' + 'to publish'
|
|
||||||
console.log(tip.replace(/\n/g, ''))
|
|
||||||
})
|
|
||||||
.catch((error) => {
|
|
||||||
if (error.isTtyError) {
|
|
||||||
// Prompt couldn't be rendered in the current environment
|
|
||||||
} else {
|
|
||||||
// Something else went wrong
|
|
||||||
}
|
|
||||||
})
|
|
||||||
@ -1,44 +0,0 @@
|
|||||||
/*
|
|
||||||
* @Author: weisheng
|
|
||||||
* @Date: 2023-06-10 23:33:04
|
|
||||||
* @LastEditTime: 2023-06-10 23:42:45
|
|
||||||
* @LastEditors: weisheng
|
|
||||||
* @Description:
|
|
||||||
* @FilePath: \wot-design-uni\build\test.js
|
|
||||||
* 记得注释
|
|
||||||
*/
|
|
||||||
const fs = require('fs')
|
|
||||||
const path = require('path')
|
|
||||||
// 文件夹父目录
|
|
||||||
|
|
||||||
const src = path.resolve(__dirname, '../src/uni_modules/wot-design-uni/components')
|
|
||||||
|
|
||||||
const make = (local) => {
|
|
||||||
fs.readdir(local, function (err, files) {
|
|
||||||
if (err === null) {
|
|
||||||
files.forEach(function (filename) {
|
|
||||||
const url = path.resolve(local, filename + '/' + filename + '.vue')
|
|
||||||
// 检查创建路径是否存在
|
|
||||||
if (!fs.existsSync(url)) {
|
|
||||||
// vue模板代码
|
|
||||||
const vueTemplate = `<template>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
</style>`
|
|
||||||
// 创建vue组件
|
|
||||||
fs.writeFile(`${url}`, vueTemplate, (err) => {
|
|
||||||
if (err) throw err
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
console.error('warning：文件夹已存在', url)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
if (err) console.error(err)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
make(src)
|
|
||||||
@ -1,27 +0,0 @@
|
|||||||
/*
|
|
||||||
* @Author: weisheng
|
|
||||||
* @Date: 2023-03-14 17:35:30
|
|
||||||
* @LastEditTime: 2023-03-28 16:41:20
|
|
||||||
* @LastEditors: weisheng
|
|
||||||
* @Description:
|
|
||||||
* @FilePath: \fant-mini-plus\build\updateDownloadVersion.js
|
|
||||||
* 记得注释
|
|
||||||
*/
|
|
||||||
const fs = require('fs')
|
|
||||||
const path = require('path')
|
|
||||||
const docPath = path.resolve(__dirname, '../fant-doc/docs/components')
|
|
||||||
// 传入参数
|
|
||||||
const args = process.argv.splice(2)
|
|
||||||
const oldVersion = args[0]
|
|
||||||
const newVersion = args[1]
|
|
||||||
console.log(oldVersion, 'oldVersion')
|
|
||||||
console.log(newVersion, 'newVersion')
|
|
||||||
|
|
||||||
if (oldVersion && newVersion) {
|
|
||||||
let installation = fs.readFileSync(`${docPath}/installation.md`, 'utf-8')
|
|
||||||
installation = installation.replace(new RegExp(`<span >fant-mini-plus@${oldVersion}</span>`, 'g'), `<span >fant-mini-plus@${newVersion}</span>`)
|
|
||||||
installation = installation.replace(new RegExp('<span >fant-mini-plus</span>', 'g'), `<span >fant-mini-plus@${newVersion}</span>`)
|
|
||||||
fs.writeFileSync(`${docPath}/installation.md`, installation)
|
|
||||||
} else {
|
|
||||||
console.log('组件库压缩包本本更新失败...')
|
|
||||||
}
|
|
||||||
13
package.json
13
package.json
@ -41,18 +41,7 @@
|
|||||||
"release-major": "standard-version --release-as major",
|
"release-major": "standard-version --release-as major",
|
||||||
"release-minor": "standard-version --release-as minor",
|
"release-minor": "standard-version --release-as minor",
|
||||||
"release-patch": "standard-version --release-as patch",
|
"release-patch": "standard-version --release-as patch",
|
||||||
"clean:lib": "rimraf lib",
|
"clean:lib": "rimraf lib"
|
||||||
"release-lib": "node build/release.js",
|
|
||||||
"build:types": "tsc -b ./tsconfig.types.json && node ./typesCopy.js",
|
|
||||||
"compiler": "npm run clean:lib && node build/compiler.js",
|
|
||||||
"publish-lib": "cd lib && npm publish",
|
|
||||||
"install:fant-doc": "cd fant-doc && yarn",
|
|
||||||
"docs:generate": "yarn compiler && node build/docs.js",
|
|
||||||
"docs:dev": "yarn docs:generate && cd fant-doc && yarn serve",
|
|
||||||
"docs:build": "yarn docs:generate && cd fant-doc && yarn build",
|
|
||||||
"deploy": "yarn docs:build && node build/deploy.js",
|
|
||||||
"component:generate": "node build/generate.js",
|
|
||||||
"changelog": "node build/changelog.js"
|
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@dcloudio/uni-app": "3.0.0-alpha-3080220230511001",
|
"@dcloudio/uni-app": "3.0.0-alpha-3080220230511001",
|
||||||
|
|||||||
12
src/App.vue
12
src/App.vue
@ -19,4 +19,14 @@ onHide(() => {
|
|||||||
console.log('App Hide')
|
console.log('App Hide')
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss"></style>
|
<style lang="scss">
|
||||||
|
page {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-family: San Francisco, Rotobo, arial, PingFang SC, Noto SansCJK, Microsoft Yahei, sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
font-size: 13px;
|
||||||
|
background: #f8f9fa;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@ -31,6 +31,26 @@
|
|||||||
},
|
},
|
||||||
"navigationBarTitleText": "Badge 徽标"
|
"navigationBarTitleText": "Badge 徽标"
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/cell/Cell",
|
||||||
|
"name": "cell",
|
||||||
|
"style": {
|
||||||
|
"mp-alipay": {
|
||||||
|
"allowsBounceVertical": "NO"
|
||||||
|
},
|
||||||
|
"navigationBarTitleText": "Cell 单元格"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/rate/Rate",
|
||||||
|
"name": "rate",
|
||||||
|
"style": {
|
||||||
|
"mp-alipay": {
|
||||||
|
"allowsBounceVertical": "NO"
|
||||||
|
},
|
||||||
|
"navigationBarTitleText": "Rate 单元格"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"tabBar": {
|
"tabBar": {
|
||||||
|
|||||||
183
src/pages/actionSheet/index.js
Normal file
183
src/pages/actionSheet/index.js
Normal file
@ -0,0 +1,183 @@
|
|||||||
|
import Toast from '../../wot-design/toast/toast'
|
||||||
|
|
||||||
|
Page({
|
||||||
|
data: {
|
||||||
|
show: false,
|
||||||
|
actions: '',
|
||||||
|
panels: '',
|
||||||
|
cancelText: '',
|
||||||
|
show1: false,
|
||||||
|
show2: false,
|
||||||
|
show3: false,
|
||||||
|
show4: false
|
||||||
|
|
||||||
|
},
|
||||||
|
showActions1 () {
|
||||||
|
this.setData({
|
||||||
|
show: true,
|
||||||
|
actions: [
|
||||||
|
{
|
||||||
|
name: '选项1'
|
||||||
|
}, {
|
||||||
|
name: '选项2'
|
||||||
|
}, {
|
||||||
|
name: '选项3',
|
||||||
|
subname: '描述信息'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
},
|
||||||
|
showActions2 () {
|
||||||
|
this.setData({
|
||||||
|
show: true,
|
||||||
|
actions: [
|
||||||
|
{
|
||||||
|
name: '颜色',
|
||||||
|
color: '#0083ff'
|
||||||
|
}, {
|
||||||
|
name: '禁用',
|
||||||
|
disabled: true
|
||||||
|
}, {
|
||||||
|
loading: true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
},
|
||||||
|
showActions3 () {
|
||||||
|
this.setData({
|
||||||
|
show1: true,
|
||||||
|
actions: [
|
||||||
|
{
|
||||||
|
name: '选项1'
|
||||||
|
}, {
|
||||||
|
name: '选项2'
|
||||||
|
}, {
|
||||||
|
name: '选项3',
|
||||||
|
subname: '描述信息'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
},
|
||||||
|
showActions4 () {
|
||||||
|
this.setData({
|
||||||
|
show2: true,
|
||||||
|
panels: [
|
||||||
|
{
|
||||||
|
iconUrl: 'https://img12.360buyimg.com/imagetools/jfs/t1/122016/33/6657/1362/5f0692a1E8708d245/e47299e5945a6956.png',
|
||||||
|
title: '微信好友'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
iconUrl: 'https://img14.360buyimg.com/imagetools/jfs/t1/111572/11/11734/1245/5f0692a1E39d13d21/b35dfe9243bd6c2a.png',
|
||||||
|
title: '微信朋友圈'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
iconUrl: 'https://img14.360buyimg.com/imagetools/jfs/t1/132639/25/4003/945/5f069336E18778248/fa181913030bed8a.png',
|
||||||
|
title: 'QQ好友'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
iconUrl: 'https://img14.360buyimg.com/imagetools/jfs/t1/134807/4/3950/1256/5f069336E76949e27/d20641da8e699f07.png',
|
||||||
|
title: '微信收藏'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
iconUrl: 'https://img14.360buyimg.com/imagetools/jfs/t1/111572/11/11734/1245/5f0692a1E39d13d21/b35dfe9243bd6c2a.png',
|
||||||
|
title: '微信朋友圈'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
iconUrl: 'https://img14.360buyimg.com/imagetools/jfs/t1/132639/25/4003/945/5f069336E18778248/fa181913030bed8a.png',
|
||||||
|
title: 'QQ好友'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
},
|
||||||
|
showActions5 () {
|
||||||
|
this.setData({
|
||||||
|
show3: true,
|
||||||
|
panels: [
|
||||||
|
[
|
||||||
|
{
|
||||||
|
iconUrl: 'https://img12.360buyimg.com/imagetools/jfs/t1/122016/33/6657/1362/5f0692a1E8708d245/e47299e5945a6956.png',
|
||||||
|
title: '微信好友'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
iconUrl: 'https://img14.360buyimg.com/imagetools/jfs/t1/111572/11/11734/1245/5f0692a1E39d13d21/b35dfe9243bd6c2a.png',
|
||||||
|
title: '微信朋友圈'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
iconUrl: 'https://img14.360buyimg.com/imagetools/jfs/t1/132639/25/4003/945/5f069336E18778248/fa181913030bed8a.png',
|
||||||
|
title: 'QQ好友'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
iconUrl: 'https://img14.360buyimg.com/imagetools/jfs/t1/134807/4/3950/1256/5f069336E76949e27/d20641da8e699f07.png',
|
||||||
|
title: '微信收藏'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
iconUrl: 'https://img12.360buyimg.com/imagetools/jfs/t1/122016/33/6657/1362/5f0692a1E8708d245/e47299e5945a6956.png',
|
||||||
|
title: '微信好友'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
iconUrl: 'https://img14.360buyimg.com/imagetools/jfs/t1/111572/11/11734/1245/5f0692a1E39d13d21/b35dfe9243bd6c2a.png',
|
||||||
|
title: '微信朋友圈'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
iconUrl: 'https://img12.360buyimg.com/imagetools/jfs/t1/122016/33/6657/1362/5f0692a1E8708d245/e47299e5945a6956.png',
|
||||||
|
title: '微信好友'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
iconUrl: 'https://img14.360buyimg.com/imagetools/jfs/t1/111572/11/11734/1245/5f0692a1E39d13d21/b35dfe9243bd6c2a.png',
|
||||||
|
title: '微信朋友圈'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
iconUrl: 'https://img14.360buyimg.com/imagetools/jfs/t1/132639/25/4003/945/5f069336E18778248/fa181913030bed8a.png',
|
||||||
|
title: 'QQ好友'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
iconUrl: 'https://img14.360buyimg.com/imagetools/jfs/t1/134807/4/3950/1256/5f069336E76949e27/d20641da8e699f07.png',
|
||||||
|
title: '微信收藏'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
iconUrl: 'https://img12.360buyimg.com/imagetools/jfs/t1/122016/33/6657/1362/5f0692a1E8708d245/e47299e5945a6956.png',
|
||||||
|
title: '微信好友'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
]
|
||||||
|
})
|
||||||
|
},
|
||||||
|
showActions6 () {
|
||||||
|
this.setData({
|
||||||
|
show4: true
|
||||||
|
})
|
||||||
|
},
|
||||||
|
close () {
|
||||||
|
this.setData({
|
||||||
|
show: false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
close1 () {
|
||||||
|
this.setData({
|
||||||
|
show1: false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
close2 () {
|
||||||
|
this.setData({
|
||||||
|
show2: false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
close3 () {
|
||||||
|
this.setData({
|
||||||
|
show3: false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
close4 () {
|
||||||
|
this.setData({
|
||||||
|
show4: false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
select ({ detail: { item, index } }) {
|
||||||
|
Toast(`当前选中项: ${item.title}, 下标: ${index}`, 1)
|
||||||
|
},
|
||||||
|
select1 ({ detail: { item, rowIndex, colIndex } }) {
|
||||||
|
Toast(`当前选中项: ${item.title}, 行下标: ${rowIndex}, 列下标: ${colIndex}`)
|
||||||
|
}
|
||||||
|
})
|
||||||
9
src/pages/actionSheet/index.json
Normal file
9
src/pages/actionSheet/index.json
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"navigationBarTitleText": "ActionSheet 动作面板",
|
||||||
|
"usingComponents": {
|
||||||
|
"demo-block": "../../components/demo-block/index",
|
||||||
|
"wd-action-sheet": "../../wot-design/actionSheet/index",
|
||||||
|
"wd-toast": "../../wot-design/toast/index",
|
||||||
|
"wd-button": "../../wot-design/button/index"
|
||||||
|
}
|
||||||
|
}
|
||||||
49
src/pages/actionSheet/index.jxml
Normal file
49
src/pages/actionSheet/index.jxml
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
<wd-toast id="wd-toast"/>
|
||||||
|
<view>
|
||||||
|
<demo-block title="基本用法">
|
||||||
|
<wd-button bind:click="showActions1">弹出菜单</wd-button>
|
||||||
|
<wd-action-sheet
|
||||||
|
show="{{ show }}"
|
||||||
|
actions="{{ actions }}"
|
||||||
|
bind:close="close"
|
||||||
|
/>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="选项状态">
|
||||||
|
<wd-button bind:click="showActions2">弹出菜单</wd-button>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="取消按钮">
|
||||||
|
<wd-button bind:click="showActions3">弹出菜单</wd-button>
|
||||||
|
<wd-action-sheet
|
||||||
|
show="{{ show1 }}"
|
||||||
|
actions="{{ actions }}"
|
||||||
|
cancel-text="取消"
|
||||||
|
bind:close="close1"
|
||||||
|
/>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="自定义面板单行">
|
||||||
|
<wd-button bind:click="showActions4">弹出菜单</wd-button>
|
||||||
|
<wd-action-sheet
|
||||||
|
show="{{ show2 }}"
|
||||||
|
panels="{{ panels }}"
|
||||||
|
cancel-text="取消"
|
||||||
|
bind:close="close2"
|
||||||
|
bind:select="select"
|
||||||
|
/>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="自定义面板多行">
|
||||||
|
<wd-button bind:click="showActions5">弹出菜单</wd-button>
|
||||||
|
<wd-action-sheet
|
||||||
|
show="{{ show3 }}"
|
||||||
|
panels="{{ panels }}"
|
||||||
|
cancel-text="取消"
|
||||||
|
bind:close="close3"
|
||||||
|
bind:select="select1"
|
||||||
|
/>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="标题">
|
||||||
|
<wd-button bind:click="showActions6">弹出菜单</wd-button>
|
||||||
|
</demo-block>
|
||||||
|
<wd-action-sheet show="{{ show4 }}" title="标题" bind:close="close4">
|
||||||
|
<view style="padding: 15px 15px 150px 15px;">内容</view>
|
||||||
|
</wd-action-sheet>
|
||||||
|
</view>
|
||||||
0
src/pages/actionSheet/index.jxss
Normal file
0
src/pages/actionSheet/index.jxss
Normal file
@ -30,10 +30,10 @@
|
|||||||
</demo-block>
|
</demo-block>
|
||||||
|
|
||||||
<demo-block title="自定义内容">
|
<demo-block title="自定义内容">
|
||||||
<wd-badge custom-class="badge" model:modelValue="new">
|
<wd-badge custom-class="badge" modelValue="new">
|
||||||
<wd-button :round="false" type="info" size="small">评论</wd-button>
|
<wd-button :round="false" type="info" size="small">评论</wd-button>
|
||||||
</wd-badge>
|
</wd-badge>
|
||||||
<wd-badge custom-class="badge" model:modelValue="hot">
|
<wd-badge custom-class="badge" modelValue="hot">
|
||||||
<wd-button :round="false" type="info" size="small">回复</wd-button>
|
<wd-button :round="false" type="info" size="small">回复</wd-button>
|
||||||
</wd-badge>
|
</wd-badge>
|
||||||
</demo-block>
|
</demo-block>
|
||||||
|
|||||||
@ -1,132 +0,0 @@
|
|||||||
<demo-block title="展示消息数量">
|
|
||||||
<wd-badge
|
|
||||||
custom-class="badge"
|
|
||||||
value="12"
|
|
||||||
>
|
|
||||||
<wd-button
|
|
||||||
round="{{false}}"
|
|
||||||
type="info"
|
|
||||||
size="small"
|
|
||||||
>评论</wd-button>
|
|
||||||
</wd-badge>
|
|
||||||
<wd-badge
|
|
||||||
custom-class="badge"
|
|
||||||
value="3"
|
|
||||||
bg-color="pink"
|
|
||||||
>
|
|
||||||
<wd-button
|
|
||||||
round="{{false}}"
|
|
||||||
type="info"
|
|
||||||
size="small"
|
|
||||||
>回复</wd-button>
|
|
||||||
</wd-badge>
|
|
||||||
<wd-badge
|
|
||||||
custom-class="badge"
|
|
||||||
value="1"
|
|
||||||
type="primary"
|
|
||||||
>
|
|
||||||
<wd-button
|
|
||||||
round="{{false}}"
|
|
||||||
type="info"
|
|
||||||
size="small"
|
|
||||||
>评论</wd-button>
|
|
||||||
</wd-badge>
|
|
||||||
<wd-badge
|
|
||||||
custom-class="badge"
|
|
||||||
value="2"
|
|
||||||
type="warning"
|
|
||||||
>
|
|
||||||
<wd-button
|
|
||||||
round="{{false}}"
|
|
||||||
type="info"
|
|
||||||
size="small"
|
|
||||||
>回复</wd-button>
|
|
||||||
</wd-badge>
|
|
||||||
<wd-badge
|
|
||||||
custom-class="badge"
|
|
||||||
value="1"
|
|
||||||
type="success"
|
|
||||||
>
|
|
||||||
<wd-button
|
|
||||||
round="{{false}}"
|
|
||||||
type="info"
|
|
||||||
size="small"
|
|
||||||
>评论</wd-button>
|
|
||||||
</wd-badge>
|
|
||||||
<wd-badge
|
|
||||||
custom-class="badge"
|
|
||||||
value="2"
|
|
||||||
type="info"
|
|
||||||
>
|
|
||||||
<wd-button
|
|
||||||
round="{{false}}"
|
|
||||||
type="info"
|
|
||||||
size="small"
|
|
||||||
>回复</wd-button>
|
|
||||||
</wd-badge>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block title="可定义消息最大值">
|
|
||||||
<wd-badge
|
|
||||||
custom-class="badge"
|
|
||||||
value="200"
|
|
||||||
max="99"
|
|
||||||
>
|
|
||||||
<wd-button
|
|
||||||
round="{{false}}"
|
|
||||||
type="info"
|
|
||||||
size="small"
|
|
||||||
>评论</wd-button>
|
|
||||||
</wd-badge>
|
|
||||||
<wd-badge
|
|
||||||
custom-class="badge"
|
|
||||||
value="200"
|
|
||||||
max="10"
|
|
||||||
>
|
|
||||||
<wd-button
|
|
||||||
round="{{false}}"
|
|
||||||
type="info"
|
|
||||||
size="small"
|
|
||||||
>回复</wd-button>
|
|
||||||
</wd-badge>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block title="自定义内容">
|
|
||||||
<wd-badge
|
|
||||||
custom-class="badge"
|
|
||||||
value="new"
|
|
||||||
>
|
|
||||||
<wd-button
|
|
||||||
round="{{false}}"
|
|
||||||
type="info"
|
|
||||||
size="small"
|
|
||||||
>评论</wd-button>
|
|
||||||
</wd-badge>
|
|
||||||
<wd-badge
|
|
||||||
custom-class="badge"
|
|
||||||
value="hot"
|
|
||||||
>
|
|
||||||
<wd-button
|
|
||||||
round="{{false}}"
|
|
||||||
type="info"
|
|
||||||
size="small"
|
|
||||||
>回复</wd-button>
|
|
||||||
</wd-badge>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block title="点状类型">
|
|
||||||
<wd-badge
|
|
||||||
custom-class="badge"
|
|
||||||
is-dot
|
|
||||||
>数据查询</wd-badge>
|
|
||||||
<wd-badge
|
|
||||||
custom-class="badge"
|
|
||||||
is-dot
|
|
||||||
>
|
|
||||||
<wd-button
|
|
||||||
round="{{false}}"
|
|
||||||
type="info"
|
|
||||||
size="small"
|
|
||||||
>回复</wd-button>
|
|
||||||
</wd-badge>
|
|
||||||
</demo-block>
|
|
||||||
@ -1,4 +0,0 @@
|
|||||||
.badge {
|
|
||||||
margin: 0 30px 20px 0;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
116
src/pages/calendar/index.js
Normal file
116
src/pages/calendar/index.js
Normal file
@ -0,0 +1,116 @@
|
|||||||
|
import dayjs from '../../wot-design/common/dayjs.min.js'
|
||||||
|
import Toast from '../../wot-design/toast/toast.js'
|
||||||
|
|
||||||
|
Page({
|
||||||
|
data: {
|
||||||
|
value1: Date.now(),
|
||||||
|
value2: [Date.now() - 24 * 60 * 60 * 1000 * 3, Date.now()],
|
||||||
|
value3: [],
|
||||||
|
value4: Date.now(),
|
||||||
|
value5: [Date.now() - 24 * 60 * 60 * 1000 * 3, Date.now() - 24 * 60 * 60 * 1000],
|
||||||
|
value6: Date.now(),
|
||||||
|
value7: Date.now(),
|
||||||
|
value8: [Date.now() - 24 * 60 * 60 * 1000 * 14, Date.now()],
|
||||||
|
value9: [Date.now() - 24 * 60 * 60 * 1000 * 33, Date.now()],
|
||||||
|
value10: Date.now(),
|
||||||
|
value11: [Date.now() - 24 * 60 * 60 * 1000 * 3, Date.now()],
|
||||||
|
value12: '',
|
||||||
|
value13: [Date.now() - 24 * 60 * 60 * 1000 * 3, Date.now()],
|
||||||
|
value14: '',
|
||||||
|
formatValue: '',
|
||||||
|
formatter: function (day) {
|
||||||
|
const date = new Date(day.date)
|
||||||
|
const now = new Date()
|
||||||
|
|
||||||
|
const year = date.getFullYear()
|
||||||
|
const month = date.getMonth()
|
||||||
|
const da = date.getDate()
|
||||||
|
const nowYear = now.getFullYear()
|
||||||
|
const nowMonth = now.getMonth()
|
||||||
|
const nowDa = now.getDate()
|
||||||
|
|
||||||
|
if (year === nowYear && month === nowMonth && da === nowDa) {
|
||||||
|
day.topInfo = '今天'
|
||||||
|
}
|
||||||
|
|
||||||
|
if (month === 5 && da === 18) {
|
||||||
|
day.topInfo = '618大促'
|
||||||
|
}
|
||||||
|
|
||||||
|
if (month === 10 && da === 11) {
|
||||||
|
day.topInfo = '京东双11'
|
||||||
|
}
|
||||||
|
|
||||||
|
if (day.type === 'start') {
|
||||||
|
day.bottomInfo = '开始'
|
||||||
|
}
|
||||||
|
|
||||||
|
if (day.type === 'end') {
|
||||||
|
day.bottomInfo = '结束'
|
||||||
|
}
|
||||||
|
|
||||||
|
if (day.type === 'same') {
|
||||||
|
day.bottomInfo = '开始/结束'
|
||||||
|
}
|
||||||
|
|
||||||
|
return day
|
||||||
|
},
|
||||||
|
shortcuts: [
|
||||||
|
{
|
||||||
|
text: '近7天',
|
||||||
|
id: 7
|
||||||
|
}, {
|
||||||
|
text: '近15天',
|
||||||
|
id: 15
|
||||||
|
}, {
|
||||||
|
text: '近30天',
|
||||||
|
id: 30
|
||||||
|
}
|
||||||
|
],
|
||||||
|
onShortcutsClick ({ item }) {
|
||||||
|
const dayDiff = item.id
|
||||||
|
const endDate = Date.now() - 24 * 60 * 60 * 1000
|
||||||
|
const startDate = endDate - dayDiff * 24 * 60 * 60 * 1000
|
||||||
|
|
||||||
|
return [startDate, endDate]
|
||||||
|
},
|
||||||
|
displayFormat (value) {
|
||||||
|
return dayjs(value[0]).format('YY年MM月DD日') + ' - ' + dayjs(value[1]).format('YY年MM月DD日')
|
||||||
|
},
|
||||||
|
innerDisplayFormat (value, rangeType) {
|
||||||
|
if (!value) {
|
||||||
|
return rangeType === 'start' ? '活动开始时间' : '活动结束时间'
|
||||||
|
}
|
||||||
|
|
||||||
|
return dayjs(value).format('YY年MM月DD日')
|
||||||
|
},
|
||||||
|
beforeConfirm ({ value, resolve }) {
|
||||||
|
if (value > Date.now()) {
|
||||||
|
Toast.error('该日期暂无数据')
|
||||||
|
resolve(false)
|
||||||
|
} else {
|
||||||
|
resolve(true)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleConfirm1 (event) {
|
||||||
|
this.setData({
|
||||||
|
value1: event.detail.value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleConfirm2 (event) {
|
||||||
|
this.setData({
|
||||||
|
value2: event.detail.value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleConfirm3 (event) {
|
||||||
|
this.setData({
|
||||||
|
value12: event.detail.value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleConfirm4 (event) {
|
||||||
|
this.setData({
|
||||||
|
formatValue: new Date(event.detail.value).toString()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
10
src/pages/calendar/index.json
Normal file
10
src/pages/calendar/index.json
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"navigationBarTitleText": "Calendar 日历选择器",
|
||||||
|
"usingComponents": {
|
||||||
|
"demo-block": "../../components/demo-block/index",
|
||||||
|
"wd-cell-group": "../../wot-design/cellGroup/index",
|
||||||
|
"wd-calendar": "../../wot-design/calendar/index",
|
||||||
|
"wd-button": "../../wot-design/button/index",
|
||||||
|
"wd-toast": "../../wot-design/toast/index"
|
||||||
|
}
|
||||||
|
}
|
||||||
32
src/pages/calendar/index.jxml
Normal file
32
src/pages/calendar/index.jxml
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
<wd-toast id="wd-toast" />
|
||||||
|
|
||||||
|
<view style="margin: 20px 0">
|
||||||
|
<wd-cell-group border>
|
||||||
|
<wd-calendar label="单个日期选择" value="{{ value1 }}" bind:confirm="handleConfirm1" />
|
||||||
|
<wd-calendar label="多个日期选择" type="dates" value="{{ value2 }}" bind:confirm="handleConfirm2" />
|
||||||
|
<wd-calendar label="日期范围选择" type="daterange" value="{{ value3 }}" />
|
||||||
|
<wd-calendar label="日期时间选择" type="datetime" value="{{ value4 }}" />
|
||||||
|
<wd-calendar label="日期时间范围选择" type="datetimerange" value="{{ value5 }}" />
|
||||||
|
<wd-calendar label="周选择" type="week" value="{{ value6 }}" />
|
||||||
|
<wd-calendar label="月选择" type="month" value="{{ value7 }}" />
|
||||||
|
<wd-calendar label="周范围选择" first-day-of-week="{{ 1 }}" type="weekrange" value="{{ value8 }}" />
|
||||||
|
<wd-calendar label="月范围选择" type="monthrange" value="{{ value9 }}" />
|
||||||
|
<wd-calendar label="日周月切换" first-day-of-week="{{ 1 }}" show-type-switch value="{{ value10 }}" />
|
||||||
|
<wd-calendar label="快捷操作" show-confirm="{{ false }}" />
|
||||||
|
<wd-calendar label="日期格式化" type="daterange" value="{{ value11 }}" formatter="{{ formatter }}" />
|
||||||
|
<wd-calendar label="快捷选项" shortcuts="{{ shortcuts }}" on-shortcuts-click="{{ onShortcutsClick }}" type="daterange" value="{{ value12 }}" bind:confirm="handleConfirm3" />
|
||||||
|
<wd-calendar label="自定义展示" type="daterange" value="{{ value13 }}" display-format="{{ displayFormat }}" inner-display-format="{{ innerDisplayFormat }}" />
|
||||||
|
<wd-calendar label="before-confirm" value="{{ value14 }}" before-confirm="{{ beforeConfirm }}" />
|
||||||
|
</wd-cell-group>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<demo-block transparent title="自定义选择器">
|
||||||
|
<view style="margin: 0 15px">
|
||||||
|
<view style="margin-bottom: 10px;">
|
||||||
|
当前选中日期：{{ formatValue }}
|
||||||
|
</view>
|
||||||
|
<wd-calendar use-default-slot bind:confirm="handleConfirm4">
|
||||||
|
<wd-button>选择日期</wd-button>
|
||||||
|
</wd-calendar>
|
||||||
|
</view>
|
||||||
|
</demo-block>
|
||||||
0
src/pages/calendar/index.jxss
Normal file
0
src/pages/calendar/index.jxss
Normal file
75
src/pages/calendarView/index.js
Normal file
75
src/pages/calendarView/index.js
Normal file
@ -0,0 +1,75 @@
|
|||||||
|
Page({
|
||||||
|
data: {
|
||||||
|
type1: 'date',
|
||||||
|
type2: 'daterange',
|
||||||
|
minDate: Date.now(),
|
||||||
|
value1: Date.now(),
|
||||||
|
value2: '',
|
||||||
|
value3: [Date.now() - 24 * 60 * 60 * 1000 * 33, Date.now()],
|
||||||
|
value4: Date.now(),
|
||||||
|
value5: [Date.now() - 24 * 60 * 60 * 1000 * 3, Date.now() - 24 * 60 * 60 * 1000],
|
||||||
|
value6: [Date.now() - 24 * 60 * 60 * 1000 * 3, Date.now() - 24 * 60 * 60 * 1000],
|
||||||
|
formatter: function (day) {
|
||||||
|
const date = new Date(day.date)
|
||||||
|
const now = new Date()
|
||||||
|
|
||||||
|
const year = date.getFullYear()
|
||||||
|
const month = date.getMonth()
|
||||||
|
const da = date.getDate()
|
||||||
|
const nowYear = now.getFullYear()
|
||||||
|
const nowMonth = now.getMonth()
|
||||||
|
const nowDa = now.getDate()
|
||||||
|
|
||||||
|
if (year === nowYear && month === nowMonth && da === nowDa) {
|
||||||
|
day.topInfo = '今天'
|
||||||
|
}
|
||||||
|
|
||||||
|
if (month === 5 && da === 18) {
|
||||||
|
day.topInfo = '618大促'
|
||||||
|
}
|
||||||
|
|
||||||
|
if (month === 10 && da === 11) {
|
||||||
|
day.topInfo = '京东双11'
|
||||||
|
}
|
||||||
|
|
||||||
|
if (day.type === 'start') {
|
||||||
|
day.bottomInfo = '开始'
|
||||||
|
}
|
||||||
|
|
||||||
|
if (day.type === 'end') {
|
||||||
|
day.bottomInfo = '结束'
|
||||||
|
}
|
||||||
|
|
||||||
|
if (day.type === 'same') {
|
||||||
|
day.bottomInfo = '开始/结束'
|
||||||
|
}
|
||||||
|
|
||||||
|
return day
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleTypeChange1 (event) {
|
||||||
|
this.setData({
|
||||||
|
type1: event.detail.value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleTypeChange2 (event) {
|
||||||
|
this.setData({
|
||||||
|
type2: event.detail.value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleChange1 (event) {
|
||||||
|
this.setData({
|
||||||
|
value1: event.detail.value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleChange2 (event) {
|
||||||
|
this.setData({
|
||||||
|
value2: event.detail.value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleChange3 (event) {
|
||||||
|
this.setData({
|
||||||
|
value3: event.detail.value
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
9
src/pages/calendarView/index.json
Normal file
9
src/pages/calendarView/index.json
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"navigationBarTitleText": "CalendarView 日历面板",
|
||||||
|
"usingComponents": {
|
||||||
|
"demo-block": "../../components/demo-block/index",
|
||||||
|
"wd-calendar-view": "../../wot-design/calendarView/index",
|
||||||
|
"wd-radio": "../../wot-design/radio/index",
|
||||||
|
"wd-radio-group": "../../wot-design/radioGroup/index"
|
||||||
|
}
|
||||||
|
}
|
||||||
40
src/pages/calendarView/index.jxml
Normal file
40
src/pages/calendarView/index.jxml
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
<demo-block title="单个日期选择" hor="{{ 0 }}">
|
||||||
|
<view style="margin: 0 15px 10px;">
|
||||||
|
<view style="margin-bottom: 10px; font-size: 13px;">切换类型：</view>
|
||||||
|
<wd-radio-group value="{{ type1 }}" shape="button" bind:change="handleTypeChange1">
|
||||||
|
<wd-radio value="date">date</wd-radio>
|
||||||
|
<wd-radio value="week">week</wd-radio>
|
||||||
|
<wd-radio value="month">month</wd-radio>
|
||||||
|
</wd-radio-group>
|
||||||
|
</view>
|
||||||
|
<wd-calendar-view type="{{ type1 }}" value="{{ value1 }}" bind:change="handleChange1"></wd-calendar-view>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="多个日期选择" hor="{{ 0 }}">
|
||||||
|
<wd-calendar-view type="dates" value="{{ value2 }}" bind:change="handleChange2"></wd-calendar-view>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="日期范围选择" hor="{{ 0 }}">
|
||||||
|
<view style="margin: 0 15px 10px;">
|
||||||
|
<view style="margin-bottom: 10px; font-size: 13px;">切换类型：</view>
|
||||||
|
<wd-radio-group value="{{ type2 }}" shape="button" bind:change="handleTypeChange2">
|
||||||
|
<wd-radio value="daterange">daterange</wd-radio>
|
||||||
|
<wd-radio value="weekrange">weekrange</wd-radio>
|
||||||
|
<wd-radio value="monthrange">monthrange</wd-radio>
|
||||||
|
</wd-radio-group>
|
||||||
|
</view>
|
||||||
|
<wd-calendar-view type="{{ type2 }}" allow-same-day value="{{ value3 }}" bind:change="handleChange3"></wd-calendar-view>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="时间类型" hor="{{ 0 }}">
|
||||||
|
<wd-calendar-view type="datetime" value="{{ value4 }}"></wd-calendar-view>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="时间范围类型" hor="{{ 0 }}">
|
||||||
|
<wd-calendar-view type="datetimerange" value="{{ value5 }}"></wd-calendar-view>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="限制最大选择范围" hor="{{ 0 }}">
|
||||||
|
<wd-calendar-view type="daterange" max-range="{{ 3 }}"></wd-calendar-view>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="自定义日期" hor="{{ 0 }}">
|
||||||
|
<wd-calendar-view type="daterange" allow-same-day value="{{ value6 }}" formatter="{{ formatter }}"></wd-calendar-view>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="设置周起始日" hor="{{ 0 }}">
|
||||||
|
<wd-calendar-view first-day-of-week="{{ 1 }}"></wd-calendar-view>
|
||||||
|
</demo-block>
|
||||||
0
src/pages/calendarView/index.jxss
Normal file
0
src/pages/calendarView/index.jxss
Normal file
9
src/pages/card/index.json
Normal file
9
src/pages/card/index.json
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"navigationBarTitleText": "Card 卡片",
|
||||||
|
"usingComponents": {
|
||||||
|
"demo-block": "../../components/demo-block/index",
|
||||||
|
"wd-card": "../../wot-design/card/index",
|
||||||
|
"wd-button": "../../wot-design/button/index",
|
||||||
|
"wd-icon": "../../wot-design/icon/index"
|
||||||
|
}
|
||||||
|
}
|
||||||
50
src/pages/card/index.jxml
Normal file
50
src/pages/card/index.jxml
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
<demo-block title="基本使用" transparent>
|
||||||
|
<wd-card title="经营分析">
|
||||||
|
一般的，检举内容由承办的党的委员会或纪律检查委员会将处理意见或复议、复查结论同申诉人见面，听取其意见。复议、复查的结论和决定，应交给申诉人一份。
|
||||||
|
<wd-button slot="footer" size="small" plain>查看详情</wd-button>
|
||||||
|
</wd-card>
|
||||||
|
<wd-card title="新订单">
|
||||||
|
<view class="content">
|
||||||
|
<image src="https://img11.360buyimg.com/imagetools/jfs/t1/143248/37/5695/265818/5f3a8546E98d998a4/745897ca9c9e474b.jpg" alt="joy" style="width: 70px; height: 70px; border-radius: 4px; margin-right: 12px;"/>
|
||||||
|
<view>
|
||||||
|
<view>蜜滋兰(mizland)新西兰进口多花种…</view>
|
||||||
|
<view>数量：1件</view>
|
||||||
|
<view>金额：29.08</view>
|
||||||
|
<view>买家昵称：Joy</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<wd-button slot="footer" size="small" plain>查看详情</wd-button>
|
||||||
|
</wd-card>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="矩形卡片" transparent>
|
||||||
|
<wd-card title="2020-02-03服务到期" type="rectangle">
|
||||||
|
<view style="height: 40px;" class="content">
|
||||||
|
<image src="https://img11.360buyimg.com/imagetools/jfs/t1/143248/37/5695/265818/5f3a8546E98d998a4/745897ca9c9e474b.jpg" width="40" height="40" alt="joy" style="width: 40px; height: 40px; border-radius: 4px; margin-right: 12px;" />
|
||||||
|
<view>
|
||||||
|
<view style="color: rgba(0,0,0,0.85); font-size: 16px;">智云好客CRM短信_催评营销</view>
|
||||||
|
<view style="color: rgba(0,0,0,0.25); font-size: 12px;">高级版-快速吸粉 | 周期一年 </view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view slot="footer">
|
||||||
|
<wd-button size="small" plain style="margin-right: 8px;">评价</wd-button>
|
||||||
|
<wd-button size="small">立即使用</wd-button>
|
||||||
|
</view>
|
||||||
|
</wd-card>
|
||||||
|
<wd-card type="rectangle">
|
||||||
|
<view class="title" slot="title">
|
||||||
|
<view>2020-02-03服务到期</view>
|
||||||
|
<view class="title-tip"><wd-icon name="warning" size="14px" style="vertical-align: bottom"/> 您可以去电脑上使用该服务</view>
|
||||||
|
</view>
|
||||||
|
<view style="height: 40px;" class="content">
|
||||||
|
<image src="https://img11.360buyimg.com/imagetools/jfs/t1/143248/37/5695/265818/5f3a8546E98d998a4/745897ca9c9e474b.jpg" width="40" height="40" alt="joy" style="width: 40px; height: 40px; border-radius: 4px; margin-right: 12px;" />
|
||||||
|
<view>
|
||||||
|
<view style="color: rgba(0,0,0,0.85); font-size: 16px;">智云好客CRM短信_催评营销</view>
|
||||||
|
<view style="color: rgba(0,0,0,0.25); font-size: 12px;">高级版-快速吸粉 | 周期一年 </view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view slot="footer">
|
||||||
|
<wd-button size="small" plain style="margin-right: 8px;">评价</wd-button>
|
||||||
|
<wd-button size="small">立即使用</wd-button>
|
||||||
|
</view>
|
||||||
|
</wd-card>
|
||||||
|
</demo-block>
|
||||||
16
src/pages/card/index.jxss
Normal file
16
src/pages/card/index.jxss
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
.content, .title {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.title-tip {
|
||||||
|
color: rgba(0, 0, 0, 0.25);
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
148
src/pages/cell/Cell.vue
Normal file
148
src/pages/cell/Cell.vue
Normal file
@ -0,0 +1,148 @@
|
|||||||
|
<template>
|
||||||
|
<!-- <wd-toast id="wd-toast" /> -->
|
||||||
|
<demo-block title="基本用法" transparent>
|
||||||
|
<wd-cell-group>
|
||||||
|
<wd-cell title="标题文字" value="内容" />
|
||||||
|
<wd-cell title="标题文字" label="描述信息" value="内容" />
|
||||||
|
</wd-cell-group>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="图标" transparent>
|
||||||
|
<wd-cell-group>
|
||||||
|
<wd-cell title="标题文字" value="内容" icon="setting" />
|
||||||
|
<wd-cell title="标题文字" value="内容">
|
||||||
|
<template #icon>
|
||||||
|
<view class="cell-icon"></view>
|
||||||
|
</template>
|
||||||
|
</wd-cell>
|
||||||
|
</wd-cell-group>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="分组标题" transparent>
|
||||||
|
<wd-cell-group title="交易管理" value="内容">
|
||||||
|
<wd-cell title="标题文字" value="内容" />
|
||||||
|
<wd-cell title="标题文字" label="描述信息" value="内容"></wd-cell>
|
||||||
|
</wd-cell-group>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="大尺寸" transparent>
|
||||||
|
<wd-cell-group>
|
||||||
|
<wd-cell size="large" title="标题文字" value="内容" />
|
||||||
|
<wd-cell title="标题文字" value="内容" size="large" icon="setting" is-link />
|
||||||
|
<wd-cell size="large" title="标题文字" label="描述信息" value="内容" />
|
||||||
|
</wd-cell-group>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="展示边框线" transparent>
|
||||||
|
<wd-cell-group title="交易管理" border>
|
||||||
|
<wd-cell title="标题文字" value="内容" />
|
||||||
|
<wd-cell title="标题文字" label="描述信息" value="内容"></wd-cell>
|
||||||
|
</wd-cell-group>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="点击事件" transparent>
|
||||||
|
<wd-cell-group>
|
||||||
|
<wd-cell title="标题文字" value="内容" clickable />
|
||||||
|
</wd-cell-group>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="页面跳转" transparent>
|
||||||
|
<wd-cell-group>
|
||||||
|
<wd-cell title="帮助与反馈" is-link to="/pages/index/index" />
|
||||||
|
<wd-cell title="设置" value="内容" is-link to="/pages/button/index" replace></wd-cell>
|
||||||
|
</wd-cell-group>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="垂直居中" transparent>
|
||||||
|
<wd-cell-group>
|
||||||
|
<wd-cell title="标题文字" value="内容" center />
|
||||||
|
<wd-cell title="标题文字" label="描述信息" value="内容" center />
|
||||||
|
</wd-cell-group>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="表单属性" transparent>
|
||||||
|
<wd-cell-group border>
|
||||||
|
<wd-cell title="必填" required>
|
||||||
|
<wd-rate v-model="rate" icon="dong" active-icon="dong" @change="handleRateChange" />
|
||||||
|
</wd-cell>
|
||||||
|
<wd-cell title="上下结构" vertical>
|
||||||
|
<wd-slider :value="slider" @change="handleSliderChange" />
|
||||||
|
</wd-cell>
|
||||||
|
</wd-cell-group>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="设置宽度" transparent>
|
||||||
|
<wd-cell-group>
|
||||||
|
<wd-cell title="标题文字" label="这里是文字描述这里是文字描述这里是文字描述" title-width="200px" value="内容" />
|
||||||
|
</wd-cell-group>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="自定义slot" transparent>
|
||||||
|
<wd-cell-group>
|
||||||
|
<wd-cell title="标题文字" center>
|
||||||
|
<wd-button custom-class="custom-value" size="small" plain>按钮</wd-button>
|
||||||
|
</wd-cell>
|
||||||
|
<wd-cell title="标题文字" center>
|
||||||
|
<view class="custom-value" style="height: 32px">
|
||||||
|
<wd-switch :value="switchValue" @change="handleSwitchChange" />
|
||||||
|
</view>
|
||||||
|
</wd-cell>
|
||||||
|
<wd-cell title="标题文字" is-link to="/pages/index/index">
|
||||||
|
<view class="custom-text">订购</view>
|
||||||
|
</wd-cell>
|
||||||
|
<wd-cell>
|
||||||
|
<template #title>
|
||||||
|
<view>
|
||||||
|
<view style="display: inline-block">标题文字</view>
|
||||||
|
<view class="end-time">25天后到期</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</wd-cell>
|
||||||
|
</wd-cell-group>
|
||||||
|
</demo-block>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
const rate = ref(0)
|
||||||
|
const slider = ref('')
|
||||||
|
const switchValue = ref('')
|
||||||
|
|
||||||
|
function handleRateChange({ value }) {
|
||||||
|
console.log(value)
|
||||||
|
}
|
||||||
|
function handleSliderChange({ detail }) {
|
||||||
|
slider.value = detail
|
||||||
|
}
|
||||||
|
function handleSwitchChange({ detail }) {
|
||||||
|
switchValue.value = detail
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.cell-icon {
|
||||||
|
display: block;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
margin-top: 2px;
|
||||||
|
margin-right: 15px;
|
||||||
|
background: url('https://img10.360buyimg.com/jmadvertisement/jfs/t1/71075/7/3762/1820/5d1f26d1E0d600b9e/a264c901943080ac.png') no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
.custom-value {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
right: 0;
|
||||||
|
transform: translate(0, -50%);
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.custom-text {
|
||||||
|
color: #f0883a;
|
||||||
|
}
|
||||||
|
.end-time {
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: 8px;
|
||||||
|
border: 1px solid #faa21e;
|
||||||
|
padding: 0 4px;
|
||||||
|
font-size: 10px;
|
||||||
|
color: #faa21e;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
26
src/pages/cell/index.js
Normal file
26
src/pages/cell/index.js
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
import Toast from '../../wot-design/toast/toast'
|
||||||
|
Page({
|
||||||
|
data: {
|
||||||
|
rate: 0,
|
||||||
|
slider: 0,
|
||||||
|
value: true
|
||||||
|
},
|
||||||
|
toast () {
|
||||||
|
Toast('点击')
|
||||||
|
},
|
||||||
|
handleRateChange ({ detail }) {
|
||||||
|
this.setData({
|
||||||
|
rate: detail
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleSliderChange ({ detail }) {
|
||||||
|
this.setData({
|
||||||
|
slider: detail
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleSwitchChange ({ detail }) {
|
||||||
|
this.setData({
|
||||||
|
switch: detail
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
14
src/pages/cell/index.json
Normal file
14
src/pages/cell/index.json
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
{
|
||||||
|
"navigationBarTitleText": "Cell 单元格",
|
||||||
|
"usingComponents": {
|
||||||
|
"demo-block": "../../components/demo-block/index",
|
||||||
|
"wd-icon": "../../wot-design/icon/index",
|
||||||
|
"wd-button": "../../wot-design/button/index",
|
||||||
|
"wd-cell": "../../wot-design/cell/index",
|
||||||
|
"wd-cell-group": "../../wot-design/cellGroup/index",
|
||||||
|
"wd-toast": "../../wot-design/toast/index",
|
||||||
|
"wd-rate": "../../wot-design/rate/index",
|
||||||
|
"wd-slider": "../../wot-design/slider/index",
|
||||||
|
"wd-switch": "../../wot-design/switch/index"
|
||||||
|
}
|
||||||
|
}
|
||||||
100
src/pages/cell/index.jxml
Normal file
100
src/pages/cell/index.jxml
Normal file
@ -0,0 +1,100 @@
|
|||||||
|
<wd-toast id="wd-toast" />
|
||||||
|
<demo-block title="基本用法" transparent>
|
||||||
|
<wd-cell-group>
|
||||||
|
<wd-cell title="标题文字" value="内容" />
|
||||||
|
<wd-cell title="标题文字" label="描述信息" value="内容" />
|
||||||
|
</wd-cell-group>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="图标" transparent>
|
||||||
|
<wd-cell-group>
|
||||||
|
<wd-cell title="标题文字" value="内容" icon="setting" />
|
||||||
|
<wd-cell title="标题文字" value="内容">
|
||||||
|
<view class="cell-icon" slot="icon"></view>
|
||||||
|
</wd-cell>
|
||||||
|
</wd-cell-group>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="分组标题" transparent>
|
||||||
|
<wd-cell-group title="交易管理" value="内容">
|
||||||
|
<wd-cell title="标题文字" value="内容" />
|
||||||
|
<wd-cell title="标题文字" label="描述信息" value="内容">
|
||||||
|
</wd-cell>
|
||||||
|
</wd-cell-group>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="大尺寸" transparent>
|
||||||
|
<wd-cell-group>
|
||||||
|
<wd-cell size="large" title="标题文字" value="内容" />
|
||||||
|
<wd-cell title="标题文字" value="内容" size="large" icon="setting" is-link />
|
||||||
|
<wd-cell size="large" title="标题文字" label="描述信息" value="内容" />
|
||||||
|
</wd-cell-group>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="展示边框线" transparent>
|
||||||
|
<wd-cell-group title="交易管理" border>
|
||||||
|
<wd-cell title="标题文字" value="内容" />
|
||||||
|
<wd-cell title="标题文字" label="描述信息" value="内容">
|
||||||
|
</wd-cell>
|
||||||
|
</wd-cell-group>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="点击事件" transparent>
|
||||||
|
<wd-cell-group>
|
||||||
|
<wd-cell title="标题文字" value="内容" clickable bind:click="toast" />
|
||||||
|
</wd-cell-group>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="页面跳转" transparent>
|
||||||
|
<wd-cell-group>
|
||||||
|
<wd-cell title="帮助与反馈" is-link to="/pages/index/index" />
|
||||||
|
<wd-cell title="设置" value="内容" is-link to="/pages/button/index" replace>
|
||||||
|
</wd-cell>
|
||||||
|
</wd-cell-group>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="垂直居中" transparent>
|
||||||
|
<wd-cell-group>
|
||||||
|
<wd-cell title="标题文字" value="内容" center/>
|
||||||
|
<wd-cell title="标题文字" label="描述信息" value="内容" center/>
|
||||||
|
</wd-cell-group>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="表单属性" transparent>
|
||||||
|
<wd-cell-group border>
|
||||||
|
<wd-cell title="必填" required>
|
||||||
|
<wd-rate value="{{rate}}" bind:change="handleRateChange" icon="dong" active-icon="dong" />
|
||||||
|
</wd-cell>
|
||||||
|
<wd-cell title="上下结构" vertical>
|
||||||
|
<wd-slider value="{{slider}}" bind:change="handleSliderChange" />
|
||||||
|
</wd-cell>
|
||||||
|
</wd-cell-group>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="设置宽度" transparent>
|
||||||
|
<wd-cell-group>
|
||||||
|
<wd-cell title="标题文字" label="这里是文字描述这里是文字描述这里是文字描述" title-width="200px" value="内容" />
|
||||||
|
</wd-cell-group>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="自定义slot" transparent>
|
||||||
|
<wd-cell-group>
|
||||||
|
<wd-cell title="标题文字" center>
|
||||||
|
<wd-button custom-class="custom-value" size="small" plain>按钮</wd-button>
|
||||||
|
</wd-cell>
|
||||||
|
<wd-cell title="标题文字" center>
|
||||||
|
<view class="custom-value" style="height: 32px;">
|
||||||
|
<wd-switch value="{{value}}" bind:change="handleSwitchChange" />
|
||||||
|
</view>
|
||||||
|
</wd-cell>
|
||||||
|
<wd-cell title="标题文字" is-link to="/pages/index/index">
|
||||||
|
<view class="custom-text">订购</view>
|
||||||
|
</wd-cell>
|
||||||
|
<wd-cell>
|
||||||
|
<view slot="title">
|
||||||
|
<view style="display: inline-block;">标题文字</view>
|
||||||
|
<view class="end-time">25天后到期</view>
|
||||||
|
</view>
|
||||||
|
</wd-cell>
|
||||||
|
</wd-cell-group>
|
||||||
|
</demo-block>
|
||||||
27
src/pages/cell/index.jxss
Normal file
27
src/pages/cell/index.jxss
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
.cell-icon {
|
||||||
|
display: block;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
margin-top: 2px;
|
||||||
|
margin-right: 15px;
|
||||||
|
background: url('https://img10.360buyimg.com/jmadvertisement/jfs/t1/71075/7/3762/1820/5d1f26d1E0d600b9e/a264c901943080ac.png') no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
.custom-value {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
right: 0;
|
||||||
|
transform: translate(0, -50%);
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.custom-text {
|
||||||
|
color: #f0883a;
|
||||||
|
}
|
||||||
|
.end-time {
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: 8px;
|
||||||
|
border: 1px solid #faa21e;
|
||||||
|
padding: 0 4px;
|
||||||
|
font-size: 10px;
|
||||||
|
color: #faa21e;
|
||||||
|
}
|
||||||
11
src/pages/checkbox/index.js
Normal file
11
src/pages/checkbox/index.js
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
Page({
|
||||||
|
data: {
|
||||||
|
value1: '京麦',
|
||||||
|
value2: [1]
|
||||||
|
},
|
||||||
|
handleChange1 ({ detail }) {
|
||||||
|
this.setData({
|
||||||
|
value1: detail.value
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
8
src/pages/checkbox/index.json
Normal file
8
src/pages/checkbox/index.json
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"navigationBarTitleText": "Checkbox 复选框",
|
||||||
|
"usingComponents": {
|
||||||
|
"demo-block": "../../components/demo-block/index",
|
||||||
|
"wd-checkbox": "../../wot-design/checkbox/index",
|
||||||
|
"wd-checkbox-group": "../../wot-design/checkboxGroup/index"
|
||||||
|
}
|
||||||
|
}
|
||||||
95
src/pages/checkbox/index.jxml
Normal file
95
src/pages/checkbox/index.jxml
Normal file
@ -0,0 +1,95 @@
|
|||||||
|
<demo-block title="基本用法">
|
||||||
|
<wd-checkbox value="{{true}}">京麦</wd-checkbox>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="修改形状: square">
|
||||||
|
<wd-checkbox value="{{true}}" shape="square">京麦</wd-checkbox>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="修改形状: button">
|
||||||
|
<wd-checkbox value="{{true}}" shape="button">京麦</wd-checkbox>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="修改选中颜色">
|
||||||
|
<wd-checkbox value="{{true}}" checked-color="rgb(52, 209, 157)">京麦</wd-checkbox>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="禁用状态">
|
||||||
|
<view style="margin-bottom: 10px;">
|
||||||
|
<wd-checkbox-group value="{{[1,3]}}" disabled>
|
||||||
|
<wd-checkbox value="{{1}}">京麦</wd-checkbox>
|
||||||
|
<wd-checkbox value="{{2}}" disabled="{{false}}">商家后台</wd-checkbox>
|
||||||
|
<wd-checkbox value="{{3}}" shape="square">京麦</wd-checkbox>
|
||||||
|
<wd-checkbox value="{{4}}" shape="square">商家后台</wd-checkbox>
|
||||||
|
</wd-checkbox-group>
|
||||||
|
</view>
|
||||||
|
<wd-checkbox-group value="{{[1]}}" disabled>
|
||||||
|
<wd-checkbox value="{{1}}" shape="button">京麦</wd-checkbox>
|
||||||
|
<wd-checkbox value="{{2}}" shape="button">商家后台</wd-checkbox>
|
||||||
|
</wd-checkbox-group>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
|
||||||
|
<demo-block title="修改 true-value 和 false-value {{value1}}">
|
||||||
|
<wd-checkbox
|
||||||
|
value="{{value1}}"
|
||||||
|
true-value="京麦"
|
||||||
|
false-value="商家后台"
|
||||||
|
bind:change="handleChange1"
|
||||||
|
>
|
||||||
|
复选框
|
||||||
|
</wd-checkbox>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="同行展示">
|
||||||
|
<wd-checkbox-group value="{{[1]}}" inline>
|
||||||
|
<wd-checkbox value="{{1}}">京麦</wd-checkbox>
|
||||||
|
<wd-checkbox value="{{2}}">商家后台</wd-checkbox>
|
||||||
|
</wd-checkbox-group>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="复选框组">
|
||||||
|
<wd-checkbox-group>
|
||||||
|
<wd-checkbox value="{{1}}">京麦</wd-checkbox>
|
||||||
|
<wd-checkbox value="{{2}}">商家后台</wd-checkbox>
|
||||||
|
</wd-checkbox-group>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="表单模式---复选框组" transparent>
|
||||||
|
<wd-checkbox-group value="{{[1]}}" cell>
|
||||||
|
<wd-checkbox value="{{1}}">京麦</wd-checkbox>
|
||||||
|
<wd-checkbox value="{{2}}">商家后台</wd-checkbox>
|
||||||
|
</wd-checkbox-group>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="表单模式---复选框按钮组" transparent>
|
||||||
|
<wd-checkbox-group value="{{[1]}}" cell shape="button">
|
||||||
|
<wd-checkbox value="{{1}}" disabled>选项一</wd-checkbox>
|
||||||
|
<wd-checkbox value="{{2}}">选项二</wd-checkbox>
|
||||||
|
<wd-checkbox value="{{3}}">选项三</wd-checkbox>
|
||||||
|
<wd-checkbox value="{{4}}">选项四</wd-checkbox>
|
||||||
|
<wd-checkbox value="{{5}}">选项五</wd-checkbox>
|
||||||
|
<wd-checkbox value="{{6}}">选项六</wd-checkbox>
|
||||||
|
<wd-checkbox value="{{7}}">选项七</wd-checkbox>
|
||||||
|
</wd-checkbox-group>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="设置最小选中数量和最大选中数量" transparent>
|
||||||
|
<wd-checkbox-group value="{{[1]}}" min="{{1}}" max="{{3}}" cell>
|
||||||
|
<wd-checkbox value="{{1}}">京东</wd-checkbox>
|
||||||
|
<wd-checkbox value="{{2}}">京麦</wd-checkbox>
|
||||||
|
<wd-checkbox value="{{3}}">商家后台</wd-checkbox>
|
||||||
|
<wd-checkbox value="{{4}}">营销中心</wd-checkbox>
|
||||||
|
</wd-checkbox-group>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="大尺寸">
|
||||||
|
<wd-checkbox-group value="{{jingmai}}" inline size="large">
|
||||||
|
<wd-checkbox value="jingmai">京麦</wd-checkbox>
|
||||||
|
<wd-checkbox value="shop">商家后台</wd-checkbox>
|
||||||
|
</wd-checkbox-group>
|
||||||
|
<wd-checkbox-group value="{{jingmai}}" size="large" class="group">
|
||||||
|
<wd-checkbox value="jingmai">京麦</wd-checkbox>
|
||||||
|
<wd-checkbox value="shop">商家后台</wd-checkbox>
|
||||||
|
</wd-checkbox-group>
|
||||||
|
</demo-block>
|
||||||
6
src/pages/checkbox/index.jxss
Normal file
6
src/pages/checkbox/index.jxss
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
.group {
|
||||||
|
display: block;
|
||||||
|
margin-top: 10px;
|
||||||
|
padding: 10px 0;
|
||||||
|
border-top: 1px solid rgba(0, 0, 0, 0.04);
|
||||||
|
}
|
||||||
116
src/pages/colPicker/index.js
Normal file
116
src/pages/colPicker/index.js
Normal file
@ -0,0 +1,116 @@
|
|||||||
|
import areaData from '../../utils/area'
|
||||||
|
import Toast from '../../wot-design/toast/toast.js'
|
||||||
|
|
||||||
|
Page({
|
||||||
|
data: {
|
||||||
|
value1: [],
|
||||||
|
value2: ['150000', '150100', '150121'],
|
||||||
|
value3: ['130000', '130200', '130204'],
|
||||||
|
value4: [],
|
||||||
|
value5: [],
|
||||||
|
value6: ['130000', '130200', '130204'],
|
||||||
|
value7: [],
|
||||||
|
value8: [],
|
||||||
|
value9: [],
|
||||||
|
value10: [],
|
||||||
|
value11: [],
|
||||||
|
value12: [],
|
||||||
|
value13: [],
|
||||||
|
value14: [],
|
||||||
|
value15: [],
|
||||||
|
displayValue: '',
|
||||||
|
areaData1: [Object.keys(areaData[86]).map(key => {
|
||||||
|
return {
|
||||||
|
value: key,
|
||||||
|
label: areaData[86][key]
|
||||||
|
}
|
||||||
|
})],
|
||||||
|
areaData2: [],
|
||||||
|
areaData3: [Object.keys(areaData[86]).map(key => {
|
||||||
|
return {
|
||||||
|
value: key,
|
||||||
|
label: areaData[86][key]
|
||||||
|
}
|
||||||
|
}), Object.keys(areaData[130000]).map(key => {
|
||||||
|
return {
|
||||||
|
value: key,
|
||||||
|
label: areaData[130000][key]
|
||||||
|
}
|
||||||
|
}), Object.keys(areaData[130200]).map(key => {
|
||||||
|
return {
|
||||||
|
value: key,
|
||||||
|
label: areaData[130200][key]
|
||||||
|
}
|
||||||
|
})],
|
||||||
|
areaData4: [Object.keys(areaData[86]).map(key => {
|
||||||
|
return {
|
||||||
|
value: key,
|
||||||
|
label: areaData[86][key],
|
||||||
|
disabled: key === '140000'
|
||||||
|
}
|
||||||
|
})],
|
||||||
|
areaData5: [Object.keys(areaData[86]).map(key => {
|
||||||
|
return {
|
||||||
|
value: key,
|
||||||
|
label: areaData[86][key],
|
||||||
|
disabled: key === '140000',
|
||||||
|
tip: key === '140000' ? '该地区无货，暂时无法选择' : (key === '150000' ? '该地区配送时间可能较长' : '')
|
||||||
|
}
|
||||||
|
})],
|
||||||
|
columnChange1 ({ selectedItem, resolve, finish, index, rowIndex }) {
|
||||||
|
const value = index === -1 ? 86 : selectedItem.value
|
||||||
|
if (areaData[value]) {
|
||||||
|
resolve(Object.keys(areaData[value]).map(key => {
|
||||||
|
return {
|
||||||
|
value: key,
|
||||||
|
label: areaData[value][key]
|
||||||
|
}
|
||||||
|
}))
|
||||||
|
} else {
|
||||||
|
finish()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
columnChange2 ({ selectedItem, resolve, finish }) {
|
||||||
|
setTimeout(() => {
|
||||||
|
if (Math.random() > 0.7) {
|
||||||
|
finish(false)
|
||||||
|
Toast.error('数据请求失败，请重试')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (areaData[selectedItem.value]) {
|
||||||
|
resolve(Object.keys(areaData[selectedItem.value]).map(key => {
|
||||||
|
return {
|
||||||
|
value: key,
|
||||||
|
label: areaData[selectedItem.value][key]
|
||||||
|
}
|
||||||
|
}))
|
||||||
|
} else {
|
||||||
|
finish()
|
||||||
|
}
|
||||||
|
}, 300)
|
||||||
|
},
|
||||||
|
displayFormat (selectedItems) {
|
||||||
|
return selectedItems[selectedItems.length - 2].label + '-' + selectedItems[selectedItems.length - 1].label
|
||||||
|
},
|
||||||
|
beforeConfirm (value, selectedItems, resolve) {
|
||||||
|
if (parseInt(value[2]) > 120000) {
|
||||||
|
Toast.error('该地区库存不足')
|
||||||
|
resolve(false)
|
||||||
|
} else {
|
||||||
|
resolve(true)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleConfirm ({ detail: { selectedItems } }) {
|
||||||
|
this.setData({
|
||||||
|
displayValue: selectedItems.map(item => {
|
||||||
|
return item.label
|
||||||
|
}).join('')
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleValue ({ detail: { value } }) {
|
||||||
|
this.setData({
|
||||||
|
value1: value
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
10
src/pages/colPicker/index.json
Normal file
10
src/pages/colPicker/index.json
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"navigationBarTitleText": "ColPicker 多列选择器",
|
||||||
|
"usingComponents": {
|
||||||
|
"demo-block": "../../components/demo-block/index",
|
||||||
|
"wd-col-picker": "../../wot-design/colPicker/index",
|
||||||
|
"wd-cell-group": "../../wot-design/cellGroup/index",
|
||||||
|
"wd-toast": "../../wot-design/toast/index",
|
||||||
|
"wd-button": "../../wot-design/button/index"
|
||||||
|
}
|
||||||
|
}
|
||||||
36
src/pages/colPicker/index.jxml
Normal file
36
src/pages/colPicker/index.jxml
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
<wd-toast id="wd-toast"/>
|
||||||
|
<view style="margin: 20px 0">
|
||||||
|
<wd-cell-group border>
|
||||||
|
<wd-col-picker label="选择地址" value="{{value1}}" columns="{{areaData1}}" column-change="{{columnChange1}}" bind:confirm="handleValue" />
|
||||||
|
<wd-col-picker label="初始选项" value="{{value2}}" columns="{{areaData2}}" column-change="{{columnChange1}}" auto-complete />
|
||||||
|
<wd-col-picker label="禁用" disabled value="{{value3}}" columns="{{areaData3}}" column-change="{{columnChange1}}" />
|
||||||
|
<wd-col-picker label="只读" readonly value="{{value3}}" columns="{{areaData3}}" column-change="{{columnChange1}}" />
|
||||||
|
<wd-col-picker label="禁用选项" value="{{value4}}" columns="{{areaData4}}" column-change="{{columnChange1}}" />
|
||||||
|
<wd-col-picker label="选项提示信息" value="{{value5}}" columns="{{areaData5}}" column-change="{{columnChange1}}" />
|
||||||
|
<wd-col-picker label="展示格式化" value="{{value6}}" columns="{{areaData3}}" column-change="{{columnChange1}}" display-format="{{displayFormat}}" />
|
||||||
|
<wd-col-picker label="标题" value="{{value7}}" title="选择地址" columns="{{areaData1}}" column-change="{{columnChange1}}" />
|
||||||
|
<wd-col-picker label="before-confirm" value="{{value8}}" columns="{{areaData1}}" column-change="{{columnChange1}}" before-confirm="{{beforeConfirm}}" />
|
||||||
|
<wd-col-picker label="错误" error value="{{value9}}" columns="{{areaData1}}" column-change="{{columnChange1}}" />
|
||||||
|
<wd-col-picker label="必填" required value="{{value10}}" columns="{{areaData1}}" column-change="{{columnChange1}}" />
|
||||||
|
</wd-cell-group>
|
||||||
|
</view>
|
||||||
|
<demo-block title="一般column-change是个异步获取数据的操作，触发column-change组件会有默认loading，数据响应后关闭loading" transparent>
|
||||||
|
<wd-col-picker label="选择地址" value="{{value11}}" columns="{{areaData1}}" column-change="{{columnChange2}}" />
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="label不传" transparent>
|
||||||
|
<wd-col-picker value="{{value12}}" columns="{{areaData1}}" column-change="{{columnChange1}}" />
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="大小" transparent>
|
||||||
|
<wd-col-picker label="选择地址" value="{{value13}}" size="large" columns="{{areaData1}}" column-change="{{columnChange1}}" />
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="值靠右展示" transparent>
|
||||||
|
<wd-col-picker label="选择地址" align-right value="{{value14}}" columns="{{areaData1}}" column-change="{{columnChange1}}" />
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="自定义选择器" transparent>
|
||||||
|
<view style="margin-left: 15px;">
|
||||||
|
<view style="margin-bottom: 10px;">当前选中项: {{ displayValue }}</view>
|
||||||
|
<wd-col-picker value="{{value15}}" use-default-slot columns="{{areaData1}}" column-change="{{columnChange1}}" style="display: inline-block;" bind:confirm="handleConfirm">
|
||||||
|
<wd-button>选择地址</wd-button>
|
||||||
|
</wd-col-picker>
|
||||||
|
</view>
|
||||||
|
</demo-block>
|
||||||
0
src/pages/colPicker/index.jxss
Normal file
0
src/pages/colPicker/index.jxss
Normal file
30
src/pages/collapse/index.js
Normal file
30
src/pages/collapse/index.js
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
Page({
|
||||||
|
options: {
|
||||||
|
multipleSlots: true
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
value1: ['item1'],
|
||||||
|
value2: 'item1',
|
||||||
|
value3: ['item1'],
|
||||||
|
value4: false,
|
||||||
|
value5: false,
|
||||||
|
value6: false,
|
||||||
|
accordion: true,
|
||||||
|
name: 'item1'
|
||||||
|
},
|
||||||
|
handleChange1 ({ detail }) {
|
||||||
|
this.setData({ value1: detail.value })
|
||||||
|
},
|
||||||
|
handleChange2 ({ detail }) {
|
||||||
|
this.setData({ value2: detail.value })
|
||||||
|
},
|
||||||
|
handleChange3 ({ detail }) {
|
||||||
|
this.setData({ value3: detail.value })
|
||||||
|
},
|
||||||
|
handleChange4 ({ detail }) {
|
||||||
|
this.setData({ value4: detail.value })
|
||||||
|
},
|
||||||
|
handleChange5 ({ detail }) {
|
||||||
|
this.setData({ value5: detail.value })
|
||||||
|
}
|
||||||
|
})
|
||||||
8
src/pages/collapse/index.json
Normal file
8
src/pages/collapse/index.json
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"navigationBarTitleText": "Collapse 折叠面板",
|
||||||
|
"usingComponents": {
|
||||||
|
"demo-block": "../../components/demo-block/index",
|
||||||
|
"wd-collapse": "../../wot-design/collapse/index",
|
||||||
|
"wd-collapse-item": "../../wot-design/collapseItem/index"
|
||||||
|
}
|
||||||
|
}
|
||||||
57
src/pages/collapse/index.jxml
Normal file
57
src/pages/collapse/index.jxml
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
<view>
|
||||||
|
<demo-block title="基础用法" transparent>
|
||||||
|
<wd-collapse value="{{ value1 }}" bind:change="handleChange1">
|
||||||
|
<wd-collapse-item title="标签1" name="{{ name }}">
|
||||||
|
这是一条简单的示例文字。
|
||||||
|
</wd-collapse-item>
|
||||||
|
<wd-collapse-item title="标签2" name="item2">
|
||||||
|
这是一条简单的示例文字。
|
||||||
|
</wd-collapse-item>
|
||||||
|
<wd-collapse-item title="标签3" name="item3">
|
||||||
|
这是一条简单的示例文字。
|
||||||
|
</wd-collapse-item>
|
||||||
|
</wd-collapse>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="手风琴" transparent>
|
||||||
|
<wd-collapse value="{{ value2 }}" accordion="{{ accordion }}" bindchange="handleChange2">
|
||||||
|
<wd-collapse-item title="标签1" name="item1">
|
||||||
|
这是一条简单的示例文字。
|
||||||
|
</wd-collapse-item>
|
||||||
|
<wd-collapse-item title="标签2" name="item2">
|
||||||
|
这是一条简单的示例文字。
|
||||||
|
</wd-collapse-item>
|
||||||
|
<wd-collapse-item title="标签3" name="item3">
|
||||||
|
这是一条简单的示例文字。
|
||||||
|
</wd-collapse-item>
|
||||||
|
</wd-collapse>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="禁用" transparent>
|
||||||
|
<wd-collapse value="{{ value3 }}" bind:change="handleChange3">
|
||||||
|
<wd-collapse-item title="标签1" name="item1">
|
||||||
|
这是一条简单的示例文字。
|
||||||
|
</wd-collapse-item>
|
||||||
|
<wd-collapse-item title="标签2" name="item2" disabled>
|
||||||
|
这是一条简单的示例文字。
|
||||||
|
</wd-collapse-item>
|
||||||
|
<wd-collapse-item title="标签3" name="item3">
|
||||||
|
这是一条简单的示例文字。
|
||||||
|
</wd-collapse-item>
|
||||||
|
</wd-collapse>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="查看更多" transparent>
|
||||||
|
<wd-collapse viewmore value="{{ value4 }}" bind:change="handleChange4">
|
||||||
|
这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。
|
||||||
|
</wd-collapse>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="查看更多-行数显示设置" transparent>
|
||||||
|
<wd-collapse viewmore value="{{ value5 }}" bind:change="handleChange5" line-num="3">
|
||||||
|
行数显示设置：这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。
|
||||||
|
</wd-collapse>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="查看更多-具名插槽" transparent>
|
||||||
|
<wd-collapse viewmore value="{{ value6 }}" bind:change="handleChange6" use-more-slot custom-more-slot-class="more-slot">
|
||||||
|
具名插槽：这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。
|
||||||
|
<view slot="more">显示全部</view>
|
||||||
|
</wd-collapse>
|
||||||
|
</demo-block>
|
||||||
|
</view>
|
||||||
3
src/pages/collapse/index.jxss
Normal file
3
src/pages/collapse/index.jxss
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
.more-slot{
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
99
src/pages/curtain/index.js
Normal file
99
src/pages/curtain/index.js
Normal file
@ -0,0 +1,99 @@
|
|||||||
|
Page({
|
||||||
|
data: {
|
||||||
|
value1: false,
|
||||||
|
value2: false,
|
||||||
|
value3: false,
|
||||||
|
value4: false,
|
||||||
|
value5: false,
|
||||||
|
value6: false,
|
||||||
|
value7: false,
|
||||||
|
value8: false,
|
||||||
|
img: 'https://img20.360buyimg.com/da/jfs/t1/141592/25/8861/261559/5f68d8c1E33ed78ab/698ad655bfcfbaed.png',
|
||||||
|
link: '/pages/index/index'
|
||||||
|
},
|
||||||
|
handleClick1 () {
|
||||||
|
this.setData({
|
||||||
|
value1: true
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleClose1 () {
|
||||||
|
this.setData({
|
||||||
|
value1: false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleClick2 () {
|
||||||
|
this.setData({
|
||||||
|
value2: true
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleClose2 () {
|
||||||
|
this.setData({
|
||||||
|
value2: false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleClick3 () {
|
||||||
|
this.setData({
|
||||||
|
value3: true
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleClose3 () {
|
||||||
|
this.setData({
|
||||||
|
value3: false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleClick4 () {
|
||||||
|
this.setData({
|
||||||
|
value4: true
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleClose4 () {
|
||||||
|
this.setData({
|
||||||
|
value4: false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleClick5 () {
|
||||||
|
this.setData({
|
||||||
|
value5: true
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleClose5 () {
|
||||||
|
this.setData({
|
||||||
|
value5: false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleClick6 () {
|
||||||
|
this.setData({
|
||||||
|
value6: true
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleClose6 () {
|
||||||
|
this.setData({
|
||||||
|
value6: false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleClick7 () {
|
||||||
|
this.setData({
|
||||||
|
value7: true
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleClose7 () {
|
||||||
|
this.setData({
|
||||||
|
value7: false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleClick8 () {
|
||||||
|
this.setData({
|
||||||
|
value8: true
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleClose8 () {
|
||||||
|
this.setData({
|
||||||
|
value8: false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
clickImg () {
|
||||||
|
jd.navigateTo({
|
||||||
|
url: '/pages/index/index'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
8
src/pages/curtain/index.json
Normal file
8
src/pages/curtain/index.json
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"navigationBarTitleText": "Curtain 幕帘",
|
||||||
|
"usingComponents": {
|
||||||
|
"demo-block": "../../components/demo-block/index",
|
||||||
|
"wd-button": "../../wot-design/button/index",
|
||||||
|
"wd-curtain": "../../wot-design/curtain/index"
|
||||||
|
}
|
||||||
|
}
|
||||||
29
src/pages/curtain/index.jxml
Normal file
29
src/pages/curtain/index.jxml
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
<view>
|
||||||
|
<demo-block title="基本用法">
|
||||||
|
<wd-button bind:click="handleClick1">关闭按钮在内部</wd-button>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="修改按钮位置">
|
||||||
|
<view>
|
||||||
|
<wd-button bind:click="handleClick2">左上</wd-button>
|
||||||
|
<wd-button bind:click="handleClick3">顶部</wd-button>
|
||||||
|
<wd-button bind:click="handleClick4">右上</wd-button>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<wd-button bind:click="handleClick5">左下</wd-button>
|
||||||
|
<wd-button bind:click="handleClick6">底部</wd-button>
|
||||||
|
<wd-button bind:click="handleClick7">右下</wd-button>
|
||||||
|
</view>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="点击遮罩关闭">
|
||||||
|
<wd-button bind:click="handleClick8">点击遮罩关闭</wd-button>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<wd-curtain value="{{ value1 }}" src="{{ img }}" to="{{ link }}" bind:close="handleClose1" width="280"></wd-curtain>
|
||||||
|
<wd-curtain value="{{ value2 }}" src="{{ img }}" to="{{ link }}" close-position="top-left" width="200" bind:close="handleClose2"></wd-curtain>
|
||||||
|
<wd-curtain value="{{ value3 }}" src="{{ img }}" to="{{ link }}" close-position="top" width="200" bind:close="handleClose3"></wd-curtain>
|
||||||
|
<wd-curtain value="{{ value4 }}" src="{{ img }}" to="{{ link }}" close-position="top-right" width="240" bind:close="handleClose4"></wd-curtain>
|
||||||
|
<wd-curtain value="{{ value5 }}" src="{{ img }}" to="{{ link }}" close-position="bottom-left" width="240" bind:close="handleClose5"></wd-curtain>
|
||||||
|
<wd-curtain value="{{ value6 }}" src="{{ img }}" to="{{ link }}" close-position="bottom" width="240" bind:close="handleClose6"></wd-curtain>
|
||||||
|
<wd-curtain value="{{ value7 }}" src="{{ img }}" to="{{ link }}" close-position="bottom-right" width="240" bind:close="handleClose7"></wd-curtain>
|
||||||
|
<wd-curtain value="{{ value8 }}" src="{{ img }}" to="{{ link }}" close-position="bottom-right" width="240" bind:close="handleClose8" close-on-click-modal="{{ true }}"></wd-curtain>
|
||||||
|
</view>
|
||||||
3
src/pages/curtain/index.jxss
Normal file
3
src/pages/curtain/index.jxss
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
button {
|
||||||
|
margin: 0 10px 10px 0;
|
||||||
|
}
|
||||||
149
src/pages/datetimePicker/index.js
Normal file
149
src/pages/datetimePicker/index.js
Normal file
@ -0,0 +1,149 @@
|
|||||||
|
import Toast from '../../wot-design/toast/toast.js'
|
||||||
|
|
||||||
|
Page({
|
||||||
|
data: {
|
||||||
|
type: 'date',
|
||||||
|
value1: '',
|
||||||
|
value2: Date.now(),
|
||||||
|
value3: Date.now(),
|
||||||
|
value4: '09:20',
|
||||||
|
value5: Date.now(),
|
||||||
|
value6: Date.now(),
|
||||||
|
value7: Date.now(),
|
||||||
|
value8: Date.now(),
|
||||||
|
value9: Date.now(),
|
||||||
|
value10: Date.now(),
|
||||||
|
value11: '',
|
||||||
|
value12: '',
|
||||||
|
value13: Date.now(),
|
||||||
|
value14: [],
|
||||||
|
value15: ['', Date.now()],
|
||||||
|
defaultValue: [Date.now() - 24 * 60 * 60 * 1000, Date.now()],
|
||||||
|
showstart: false,
|
||||||
|
formatter (type, value) {
|
||||||
|
switch (type) {
|
||||||
|
case 'year':
|
||||||
|
return value + '年'
|
||||||
|
case 'month':
|
||||||
|
return value + '月'
|
||||||
|
case 'date':
|
||||||
|
return value + '日'
|
||||||
|
case 'hour':
|
||||||
|
return value + '时'
|
||||||
|
case 'minute':
|
||||||
|
return value + '分'
|
||||||
|
default:
|
||||||
|
return value
|
||||||
|
}
|
||||||
|
},
|
||||||
|
filter (type, values) {
|
||||||
|
if (type === 'minute') {
|
||||||
|
return values.filter(value => value % 5 === 0)
|
||||||
|
}
|
||||||
|
return values
|
||||||
|
},
|
||||||
|
displayFormat (items) {
|
||||||
|
return `${items[0].label}年${items[1].label}月${items[2].label}日 ${items[3].label}:${items[4].label}`
|
||||||
|
},
|
||||||
|
beforeConfirm (value, resolve, picker) {
|
||||||
|
picker.setData({
|
||||||
|
loading: true
|
||||||
|
})
|
||||||
|
setTimeout(() => {
|
||||||
|
picker.setData({
|
||||||
|
loading: false
|
||||||
|
})
|
||||||
|
if (value > Date.now()) {
|
||||||
|
resolve(false)
|
||||||
|
Toast.error('不能选择大于今天的日期')
|
||||||
|
} else {
|
||||||
|
resolve(true)
|
||||||
|
}
|
||||||
|
}, 2000)
|
||||||
|
},
|
||||||
|
displayFormatTabLabel (items) {
|
||||||
|
return `${items[0].label}年${items[1].label}月${items[2].label}日 ${items[3].label}:${items[4].label}`
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/** picker触发confirm事件，同步触发confirm事件 */
|
||||||
|
handleConfirm1 (event) {
|
||||||
|
console.log(new Date(event.detail.value))
|
||||||
|
this.setData({
|
||||||
|
value1: event.detail.value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleConfirm2 (event) {
|
||||||
|
this.setData({
|
||||||
|
value2: event.detail.value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleConfirm3 (event) {
|
||||||
|
this.setData({
|
||||||
|
value3: event.detail.value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleConfirm4 (event) {
|
||||||
|
this.setData({
|
||||||
|
value4: event.detail.value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleConfirm5 (event) {
|
||||||
|
this.setData({
|
||||||
|
value5: event.detail.value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleConfirm6 (event) {
|
||||||
|
this.setData({
|
||||||
|
value6: event.detail.value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleConfirm7 (event) {
|
||||||
|
this.setData({
|
||||||
|
value7: event.detail.value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
handleConfirm8 (event) {
|
||||||
|
this.setData({
|
||||||
|
value8: event.detail.value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleConfirm9 (event) {
|
||||||
|
this.setData({
|
||||||
|
value9: event.detail.value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleConfirm10 (event) {
|
||||||
|
this.setData({
|
||||||
|
value10: event.detail.value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleConfirm11 (event) {
|
||||||
|
this.setData({
|
||||||
|
value11: event.detail.value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleConfirm12 (event) {
|
||||||
|
this.setData({
|
||||||
|
value12: event.detail.value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleConfirm13 (event) {
|
||||||
|
this.setData({
|
||||||
|
value13: event.detail.value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleConfirm14 (event) {
|
||||||
|
this.setData({
|
||||||
|
value14: event.detail.value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleConfirm15 (event) {
|
||||||
|
this.setData({
|
||||||
|
value15: event.detail.value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/** picker触发cancel事件，同步触发cancel事件 */
|
||||||
|
onCancel () {
|
||||||
|
}
|
||||||
|
})
|
||||||
9
src/pages/datetimePicker/index.json
Normal file
9
src/pages/datetimePicker/index.json
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"navigationBarTitleText": "DatetimePicker 时间选择器",
|
||||||
|
"usingComponents": {
|
||||||
|
"demo-block": "../../components/demo-block/index",
|
||||||
|
"wd-datetime-picker": "../../wot-design/datetimePicker/index",
|
||||||
|
"wd-cell-group": "../../wot-design/cellGroup/index",
|
||||||
|
"wd-toast": "../../wot-design/toast/index"
|
||||||
|
}
|
||||||
|
}
|
||||||
31
src/pages/datetimePicker/index.jxml
Normal file
31
src/pages/datetimePicker/index.jxml
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
<wd-toast id="wd-toast" />
|
||||||
|
<demo-block transparent>
|
||||||
|
<wd-cell-group border>
|
||||||
|
<wd-datetime-picker label="日期选择" value="{{value1}}" bind:confirm="handleConfirm1" />
|
||||||
|
<wd-datetime-picker label="年月日" value="{{value2}}" type="date" bind:confirm="handleConfirm2" />
|
||||||
|
<wd-datetime-picker label="年月" value="{{value3}}" type="year-month" bind:confirm="handleConfirm3" />
|
||||||
|
<wd-datetime-picker label="时分" value="{{value4}}" type="time" bind:confirm="handleConfirm4" />
|
||||||
|
<wd-datetime-picker label="展示格式" value="{{value5}}" display-format="{{displayFormat}}" bind:confirm="handleConfirm5" />
|
||||||
|
<wd-datetime-picker label="内部格式" value="{{value6}}" formatter="{{formatter}}" bind:confirm="handleConfirm6" />
|
||||||
|
<wd-datetime-picker label="过滤选项" value="{{value7}}" filter="{{filter}}" bind:confirm="handleConfirm7" />
|
||||||
|
<wd-datetime-picker label="before-confirm" value="{{value8}}" before-confirm="{{beforeConfirm}}" bind:confirm="handleConfirm8" />
|
||||||
|
<wd-datetime-picker label="错误" value="{{value9}}" error bind:confirm="handleConfirm9" />
|
||||||
|
<wd-datetime-picker label="必填" value="{{value10}}" required bind:confirm="handleConfirm10" />
|
||||||
|
<wd-datetime-picker label="默认日期" default-value="{{ value2 }}" />
|
||||||
|
</wd-cell-group>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="label 不传" transparent>
|
||||||
|
<wd-datetime-picker value="{{value11}}" bind:confirm="handleConfirm11" />
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="大小" transparent>
|
||||||
|
<wd-datetime-picker label="日期选择" size="large" value="{{value12}}" bind:confirm="handleConfirm12" />
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="值靠右展示" transparent>
|
||||||
|
<wd-datetime-picker label="日期选择" align-right value="{{value13}}" bind:confirm="handleConfirm13" />
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="区域选择" transparent>
|
||||||
|
<wd-datetime-picker label="日期选择" value="{{value14}}" bind:confirm="handleConfirm14" />
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="范围tab展示格式" transparent>
|
||||||
|
<wd-datetime-picker label="日期选择" value="{{value15}}" bind:confirm="handleConfirm15" display-format-tab-label="{{displayFormatTabLabel}}"/>
|
||||||
|
</demo-block>
|
||||||
0
src/pages/datetimePicker/index.jxss
Normal file
0
src/pages/datetimePicker/index.jxss
Normal file
65
src/pages/datetimePickerView/index.js
Normal file
65
src/pages/datetimePickerView/index.js
Normal file
@ -0,0 +1,65 @@
|
|||||||
|
import Toast from '../../wot-design/toast/toast'
|
||||||
|
|
||||||
|
Page({
|
||||||
|
data: {
|
||||||
|
value1: '',
|
||||||
|
value2: Date.now(),
|
||||||
|
value3: Date.now(),
|
||||||
|
value4: '11:12',
|
||||||
|
value5: Date.now(),
|
||||||
|
value6: Date.now(),
|
||||||
|
formatter (type, value) {
|
||||||
|
switch (type) {
|
||||||
|
case 'year':
|
||||||
|
return value + '年'
|
||||||
|
case 'month':
|
||||||
|
return value + '月'
|
||||||
|
case 'date':
|
||||||
|
return value + '日'
|
||||||
|
case 'hour':
|
||||||
|
return value + '时'
|
||||||
|
case 'minute':
|
||||||
|
return value + '分'
|
||||||
|
default:
|
||||||
|
return value
|
||||||
|
}
|
||||||
|
},
|
||||||
|
filter (type, values) {
|
||||||
|
if (type === 'minute') {
|
||||||
|
return values.filter(value => value % 5 === 0)
|
||||||
|
}
|
||||||
|
return values
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onChange1 (event) {
|
||||||
|
Toast('选择了' + new Date(event.detail.value))
|
||||||
|
this.setData({
|
||||||
|
value1: event.detail.value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
onChange2 (event) {
|
||||||
|
this.setData({
|
||||||
|
value2: event.detail.value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
onChange3 (event) {
|
||||||
|
this.setData({
|
||||||
|
value3: event.detail.value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
onChange4 (event) {
|
||||||
|
this.setData({
|
||||||
|
value4: event.detail.value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
onChange5 (event) {
|
||||||
|
this.setData({
|
||||||
|
value5: event.detail.value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
onChange6 (event) {
|
||||||
|
this.setData({
|
||||||
|
value6: event.detail.value
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
8
src/pages/datetimePickerView/index.json
Normal file
8
src/pages/datetimePickerView/index.json
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"navigationBarTitleText": "DatetimePickerView 时间选择器视图",
|
||||||
|
"usingComponents": {
|
||||||
|
"demo-block": "../../components/demo-block/index",
|
||||||
|
"wd-datetime-picker-view": "../../wot-design/datetimePickerView/index",
|
||||||
|
"wd-toast": "../../wot-design/toast/index"
|
||||||
|
}
|
||||||
|
}
|
||||||
47
src/pages/datetimePickerView/index.jxml
Normal file
47
src/pages/datetimePickerView/index.jxml
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
<wd-toast id="wd-toast"/>
|
||||||
|
<demo-block title="日期选择" transparent>
|
||||||
|
<wd-datetime-picker-view
|
||||||
|
value="{{value1}}"
|
||||||
|
bind:change="onChange1"
|
||||||
|
/>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="年月日" transparent>
|
||||||
|
<wd-datetime-picker-view
|
||||||
|
type="date"
|
||||||
|
value="{{value2}}"
|
||||||
|
bind:change="onChange2"
|
||||||
|
/>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="年月" transparent>
|
||||||
|
<wd-datetime-picker-view
|
||||||
|
type="year-month"
|
||||||
|
value="{{value3}}"
|
||||||
|
bind:change="onChange3"
|
||||||
|
/>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="时分" transparent>
|
||||||
|
<wd-datetime-picker-view
|
||||||
|
type="time"
|
||||||
|
value="{{value4}}"
|
||||||
|
bind:change="onChange4"
|
||||||
|
/>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="内部格式" transparent>
|
||||||
|
<wd-datetime-picker-view
|
||||||
|
value="{{value5}}"
|
||||||
|
formatter="{{formatter}}"
|
||||||
|
bind:change="onChange5"
|
||||||
|
/>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="过滤选项" transparent>
|
||||||
|
<wd-datetime-picker-view
|
||||||
|
value="{{value6}}"
|
||||||
|
filter="{{filter}}"
|
||||||
|
bind:change="onChange6"
|
||||||
|
/>
|
||||||
|
</demo-block>
|
||||||
0
src/pages/datetimePickerView/index.jxss
Normal file
0
src/pages/datetimePickerView/index.jxss
Normal file
1
src/pages/divider/index.js
Normal file
1
src/pages/divider/index.js
Normal file
@ -0,0 +1 @@
|
|||||||
|
Page({})
|
||||||
7
src/pages/divider/index.json
Normal file
7
src/pages/divider/index.json
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"navigationBarTitleText": "Divider 分割线",
|
||||||
|
"usingComponents": {
|
||||||
|
"demo-block": "../../components/demo-block/index",
|
||||||
|
"wd-divider": "../../wot-design/divider/index"
|
||||||
|
}
|
||||||
|
}
|
||||||
6
src/pages/divider/index.jxml
Normal file
6
src/pages/divider/index.jxml
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<demo-block title="基本用法" transparent>
|
||||||
|
<wd-divider>这是分割线</wd-divider>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="自定义颜色" transparent>
|
||||||
|
<wd-divider color="#4D80F0">自定义颜色</wd-divider>
|
||||||
|
</demo-block>
|
||||||
0
src/pages/divider/index.jxss
Normal file
0
src/pages/divider/index.jxss
Normal file
77
src/pages/dropMenu/index.js
Normal file
77
src/pages/dropMenu/index.js
Normal file
@ -0,0 +1,77 @@
|
|||||||
|
import clickoutside from '../../wot-design/common/clickoutside'
|
||||||
|
|
||||||
|
Page({
|
||||||
|
data: {
|
||||||
|
show: false,
|
||||||
|
value1: 1,
|
||||||
|
value2: 0,
|
||||||
|
value3: 0,
|
||||||
|
value4: 0,
|
||||||
|
value5: 0,
|
||||||
|
value6: 0,
|
||||||
|
value7: 0,
|
||||||
|
value8: 0,
|
||||||
|
value9: 0,
|
||||||
|
option1: [
|
||||||
|
{ label: '全部商品', value: 0 },
|
||||||
|
{ label: '新款商品', value: 1, tip: '这是补充信息' },
|
||||||
|
{ label: '这是比较长的筛选条件这是比较长的筛选条件', value: 2 }
|
||||||
|
],
|
||||||
|
option2: [
|
||||||
|
{ label: '综合', value: 0 },
|
||||||
|
{ label: '销量', value: 1 },
|
||||||
|
{ label: '上架时间', value: 2 }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
clickOutside: clickoutside,
|
||||||
|
handleChange1 ({ detail }) {
|
||||||
|
this.setData({
|
||||||
|
value1: detail.value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleChange2 ({ detail }) {
|
||||||
|
this.setData({
|
||||||
|
value2: detail.value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleChange3 ({ detail }) {
|
||||||
|
this.setData({
|
||||||
|
value3: detail.value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleChange4 ({ detail }) {
|
||||||
|
this.setData({
|
||||||
|
value4: detail.value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleChange5 ({ detail }) {
|
||||||
|
this.setData({
|
||||||
|
value5: detail.value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleChange6 ({ detail }) {
|
||||||
|
this.setData({
|
||||||
|
value6: detail.value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleChange7 ({ detail }) {
|
||||||
|
this.setData({
|
||||||
|
value7: detail.value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleChange8 ({ detail }) {
|
||||||
|
this.setData({
|
||||||
|
value8: detail.value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleChange9 ({ detail }) {
|
||||||
|
this.setData({
|
||||||
|
value9: detail.value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
confirm () {
|
||||||
|
// 关闭下拉框
|
||||||
|
const drop = this.selectComponent('#drop-menu')
|
||||||
|
drop.close()
|
||||||
|
}
|
||||||
|
})
|
||||||
11
src/pages/dropMenu/index.json
Normal file
11
src/pages/dropMenu/index.json
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
{
|
||||||
|
"navigationBarTitleText": "drop-menu 下拉列表",
|
||||||
|
"usingComponents": {
|
||||||
|
"demo-block": "../../components/demo-block/index",
|
||||||
|
"wd-drop-menu": "../../wot-design/dropMenu/index",
|
||||||
|
"wd-cell": "../../wot-design/cell/index",
|
||||||
|
"wd-sort-button": "../../wot-design/sortButton/index",
|
||||||
|
"wd-button": "../../wot-design/button/index",
|
||||||
|
"wd-drop-menu-item": "../../wot-design/dropMenuItem/index"
|
||||||
|
}
|
||||||
|
}
|
||||||
112
src/pages/dropMenu/index.jxml
Normal file
112
src/pages/dropMenu/index.jxml
Normal file
@ -0,0 +1,112 @@
|
|||||||
|
<view class="demo-body" catchtap="clickOutside">
|
||||||
|
<demo-block
|
||||||
|
title="基本用法"
|
||||||
|
transparent
|
||||||
|
>
|
||||||
|
<wd-drop-menu>
|
||||||
|
<wd-drop-menu-item
|
||||||
|
id="drop-menu1"
|
||||||
|
value="{{ value1 }}"
|
||||||
|
options="{{ option1 }}"
|
||||||
|
bind:change="handleChange1"
|
||||||
|
/>
|
||||||
|
<wd-drop-menu-item
|
||||||
|
id="drop-menu2"
|
||||||
|
value="{{ value2 }}"
|
||||||
|
options="{{ option2 }}"
|
||||||
|
bind:change="handleChange2"
|
||||||
|
/>
|
||||||
|
</wd-drop-menu>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block
|
||||||
|
title="自定义菜单内容"
|
||||||
|
transparent
|
||||||
|
>
|
||||||
|
<wd-drop-menu>
|
||||||
|
<wd-drop-menu-item
|
||||||
|
value="{{ value3 }}"
|
||||||
|
options="{{ option1 }}"
|
||||||
|
bind:change="handleChange3"
|
||||||
|
/>
|
||||||
|
<wd-drop-menu-item
|
||||||
|
id="drop-menu"
|
||||||
|
title="筛选"
|
||||||
|
>
|
||||||
|
<view>
|
||||||
|
<wd-cell
|
||||||
|
title="标题文字"
|
||||||
|
value="内容"
|
||||||
|
/>
|
||||||
|
<wd-cell
|
||||||
|
title="标题文字"
|
||||||
|
label="描述信息"
|
||||||
|
value="内容"
|
||||||
|
/>
|
||||||
|
<view style="padding: 0 10px 20px; box-sizing: border-box;">
|
||||||
|
<wd-button
|
||||||
|
block
|
||||||
|
size="large"
|
||||||
|
bind:click="confirm"
|
||||||
|
>主要按钮</wd-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</wd-drop-menu-item>
|
||||||
|
</wd-drop-menu>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block
|
||||||
|
title="自定义菜单选项"
|
||||||
|
transparent
|
||||||
|
>
|
||||||
|
<view style="display: flex; background: #fff; text-align: center;">
|
||||||
|
<wd-drop-menu style="flex: 1; min-width: 0;">
|
||||||
|
<wd-drop-menu-item
|
||||||
|
value="{{ value4 }}"
|
||||||
|
options="{{ option1 }}"
|
||||||
|
bind:change="handleChange4"
|
||||||
|
/>
|
||||||
|
</wd-drop-menu>
|
||||||
|
<view style="flex: 1;">
|
||||||
|
<wd-sort-button
|
||||||
|
value="{{ value5 }}"
|
||||||
|
title="上架时间"
|
||||||
|
bind:change="handleChange5"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block
|
||||||
|
title="向上弹出"
|
||||||
|
transparent
|
||||||
|
>
|
||||||
|
<wd-drop-menu direction="up">
|
||||||
|
<wd-drop-menu-item
|
||||||
|
value="{{ value6 }}"
|
||||||
|
options="{{ option1 }}"
|
||||||
|
bind:change="handleChange6"
|
||||||
|
/>
|
||||||
|
<wd-drop-menu-item
|
||||||
|
value="{{ value7 }}"
|
||||||
|
options="{{ option2 }}"
|
||||||
|
bind:change="handleChange7"
|
||||||
|
/>
|
||||||
|
</wd-drop-menu>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block
|
||||||
|
title="禁用"
|
||||||
|
transparent
|
||||||
|
>
|
||||||
|
<wd-drop-menu direction="up">
|
||||||
|
<wd-drop-menu-item
|
||||||
|
value="{{ value8 }}"
|
||||||
|
disabled
|
||||||
|
options="{{ option1 }}"
|
||||||
|
bind:change="handleChange8"
|
||||||
|
/>
|
||||||
|
<wd-drop-menu-item
|
||||||
|
value="{{ value9 }}"
|
||||||
|
options="{{ option2 }}"
|
||||||
|
bind:change="handleChange9"
|
||||||
|
/>
|
||||||
|
</wd-drop-menu>
|
||||||
|
</demo-block>
|
||||||
|
</view>
|
||||||
3
src/pages/dropMenu/index.jxss
Normal file
3
src/pages/dropMenu/index.jxss
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
.demo-body{
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
144
src/pages/form/index.js
Normal file
144
src/pages/form/index.js
Normal file
@ -0,0 +1,144 @@
|
|||||||
|
import Toast from '../../wot-design/toast/toast.js'
|
||||||
|
import MessageBox from '../../wot-design/messageBox/messageBox.js'
|
||||||
|
import areaData from '../../utils/area'
|
||||||
|
|
||||||
|
Page({
|
||||||
|
data: {
|
||||||
|
couponName: '',
|
||||||
|
couponNameErr: false,
|
||||||
|
platform: [],
|
||||||
|
platformList: [
|
||||||
|
{
|
||||||
|
value: '1',
|
||||||
|
label: '京东'
|
||||||
|
}, {
|
||||||
|
value: '2',
|
||||||
|
label: '开普勒'
|
||||||
|
}, {
|
||||||
|
value: '3',
|
||||||
|
label: '手Q'
|
||||||
|
}, {
|
||||||
|
value: '4',
|
||||||
|
label: '微信'
|
||||||
|
}, {
|
||||||
|
value: '5',
|
||||||
|
label: '1号店'
|
||||||
|
}, {
|
||||||
|
value: '6',
|
||||||
|
label: '十元街'
|
||||||
|
}, {
|
||||||
|
value: '7',
|
||||||
|
label: '京东极速版'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
promotion: '1',
|
||||||
|
promotionlist: [
|
||||||
|
{
|
||||||
|
value: '1',
|
||||||
|
label: '满减'
|
||||||
|
}, {
|
||||||
|
value: '2',
|
||||||
|
label: '无门槛'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
threshold: '',
|
||||||
|
price: '',
|
||||||
|
date: Date.now(),
|
||||||
|
address: [],
|
||||||
|
area: [Object.keys(areaData[86]).map(key => {
|
||||||
|
return {
|
||||||
|
value: key,
|
||||||
|
label: areaData[86][key]
|
||||||
|
}
|
||||||
|
})],
|
||||||
|
areaChange ({ selectedItem, resolve, finish }) {
|
||||||
|
if (areaData[selectedItem.value]) {
|
||||||
|
resolve(Object.keys(areaData[selectedItem.value]).map(key => {
|
||||||
|
return {
|
||||||
|
value: key,
|
||||||
|
label: areaData[selectedItem.value][key]
|
||||||
|
}
|
||||||
|
}))
|
||||||
|
} else {
|
||||||
|
finish()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
content: '',
|
||||||
|
count: 1,
|
||||||
|
read: false,
|
||||||
|
switchVal: true,
|
||||||
|
cardId: '',
|
||||||
|
phone: ''
|
||||||
|
},
|
||||||
|
handleCouponName ({ detail: { value } }) {
|
||||||
|
this.setData({
|
||||||
|
couponName: value,
|
||||||
|
couponNameErr: false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handlePlatform ({ detail: { value } }) {
|
||||||
|
this.setData({
|
||||||
|
platform: value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleThreshold ({ detail: { value } }) {
|
||||||
|
this.setData({
|
||||||
|
threshold: value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handlePrice ({ detail: { value } }) {
|
||||||
|
this.setData({
|
||||||
|
price: value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleAddress ({ detail: { value } }) {
|
||||||
|
this.setData({
|
||||||
|
address: value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleContent ({ detail: { value } }) {
|
||||||
|
this.setData({
|
||||||
|
content: value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleCount ({ detail: { value } }) {
|
||||||
|
this.setData({
|
||||||
|
count: value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleSwitch ({ detail: { value } }) {
|
||||||
|
this.setData({
|
||||||
|
switchVal: value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleRead ({ detail: { value } }) {
|
||||||
|
this.setData({
|
||||||
|
read: value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleCardId ({ detail: { value } }) {
|
||||||
|
this.setData({
|
||||||
|
cardId: value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handlePhone ({ detail: { value } }) {
|
||||||
|
this.setData({
|
||||||
|
phone: value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
formSubmit ({ detail }) {
|
||||||
|
if (!detail.value.couponName) {
|
||||||
|
Toast.error('请填写优惠券名称')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
MessageBox.alert(`获取的数据为 ${JSON.stringify(detail.value)}`)
|
||||||
|
},
|
||||||
|
handleIconClick () {
|
||||||
|
Toast.info('优惠券提示信息')
|
||||||
|
},
|
||||||
|
handleDate ({ detail }) {
|
||||||
|
this.setData({
|
||||||
|
date: detail.value
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
19
src/pages/form/index.json
Normal file
19
src/pages/form/index.json
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
{
|
||||||
|
"navigationBarTitleText": "Form 表单组件组合",
|
||||||
|
"usingComponents": {
|
||||||
|
"demo-block": "../../components/demo-block/index",
|
||||||
|
"wd-button": "../../wot-design/button/index",
|
||||||
|
"wd-cell": "../../wot-design/cell/index",
|
||||||
|
"wd-cell-group": "../../wot-design/cellGroup/index",
|
||||||
|
"wd-datetime-picker": "../../wot-design/datetimePicker/index",
|
||||||
|
"wd-input": "../../wot-design/input/index",
|
||||||
|
"wd-picker": "../../wot-design/picker/index",
|
||||||
|
"wd-checkbox": "../../wot-design/checkbox/index",
|
||||||
|
"wd-switch": "../../wot-design/switch/index",
|
||||||
|
"wd-toast": "../../wot-design/toast/index",
|
||||||
|
"wd-message-box": "../../wot-design/messageBox/index",
|
||||||
|
"wd-input-number": "../../wot-design/inputNumber/index",
|
||||||
|
"wd-col-picker": "../../wot-design/colPicker/index",
|
||||||
|
"wd-select-picker": "../../wot-design/selectPicker/index"
|
||||||
|
}
|
||||||
|
}
|
||||||
65
src/pages/form/index.jxml
Normal file
65
src/pages/form/index.jxml
Normal file
@ -0,0 +1,65 @@
|
|||||||
|
<wd-message-box id="wd-message-box" />
|
||||||
|
<wd-toast id="wd-toast"/>
|
||||||
|
<form bindsubmit="formSubmit">
|
||||||
|
<wd-cell-group custom-class="group" title="基础信息" border>
|
||||||
|
<wd-input label="优惠券名称" label-width="100px" maxlength="20" show-word-limit name="couponName" required suffix-icon="warn-bold" clearable value="{{ couponName }}" placeholder="请输入优惠券名称" bind:change="handleCouponName" bind:clicksuffixicon="handleIconClick" />
|
||||||
|
<wd-select-picker label="推广平台" label-width="100px" name="platform" value="{{platform}}" columns="{{platformList}}" placeholder="请选择推广平台" bind:confirm="handlePlatform" />
|
||||||
|
<wd-picker label="优惠方式" label-width="100px" name="promotion" align-right value="{{promotion}}" columns="{{promotionlist}}" bind:confirm="handlePromotion" />
|
||||||
|
<wd-cell title="券面额" required title-width="100px" custom-value-class="cell-left">
|
||||||
|
<view style="text-align: left;">
|
||||||
|
<view class="inline-txt" style="margin-left: 0;">满</view>
|
||||||
|
<wd-input
|
||||||
|
no-border
|
||||||
|
style="display: inline-block; width: 70px; vertical-align: middle;"
|
||||||
|
placeholder="请输入金额"
|
||||||
|
value="{{threshold}}"
|
||||||
|
name="threshold"
|
||||||
|
bind:change="handleThreshold"
|
||||||
|
/>
|
||||||
|
<view class="inline-txt">减</view>
|
||||||
|
<wd-input
|
||||||
|
no-border
|
||||||
|
style="display: inline-block; width: 70px; vertical-align: middle;"
|
||||||
|
placeholder="请输入金额"
|
||||||
|
value="{{price}}"
|
||||||
|
name="price"
|
||||||
|
bind:change="handlePrice"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</wd-cell>
|
||||||
|
</wd-cell-group>
|
||||||
|
<wd-cell-group custom-class="group" title="时间和地址" border>
|
||||||
|
<wd-datetime-picker label="时间" label-width="100px" name="date" value="{{date}}" bind:confirm="handleDate" />
|
||||||
|
<wd-col-picker label="地址" label-width="100px" name="address" value="{{address}}" columns="{{area}}" column-change="{{areaChange}}" bind:confirm="handleAddress" />
|
||||||
|
</wd-cell-group>
|
||||||
|
<wd-cell-group custom-class="group" title="其他信息" border>
|
||||||
|
<wd-input
|
||||||
|
label="活动细则"
|
||||||
|
label-width="100px"
|
||||||
|
type="textarea"
|
||||||
|
value="{{content}}"
|
||||||
|
maxlength="300"
|
||||||
|
show-word-limit
|
||||||
|
placeholder="请输入活动细则信息"
|
||||||
|
clearable
|
||||||
|
name="content"
|
||||||
|
bind:change="handleContent"
|
||||||
|
/>
|
||||||
|
<wd-cell title="发货数量" center>
|
||||||
|
<wd-input-number value="{{count}}" name="count" bind:change="handleCount" />
|
||||||
|
</wd-cell>
|
||||||
|
<wd-cell title="这里显示的是多文字标题包含非常的文字" title-width="240px" center>
|
||||||
|
<wd-switch value="{{switchVal}}" name="switchVal" bind:change="handleSwitch" />
|
||||||
|
</wd-cell>
|
||||||
|
<wd-input label="卡号" label-width="100px" name="cardId" suffix-icon="camera" placeholder="请输入卡号" clearable value="{{ cardId }}" bind:change="handleCardId" />
|
||||||
|
<wd-input label="手机号" label-width="100px" name="phone" placeholder="请输入手机号" clearable value="{{ phone }}" bind:change="handlePhone" />
|
||||||
|
</wd-cell-group>
|
||||||
|
<view class="tip">
|
||||||
|
<wd-checkbox value="{{read}}" name="read" bind:change="handleRead" custom-label-class="label-class">
|
||||||
|
已阅读并同意<text style="color: #4D80F0">《借款额度合同及相关授权》</text>
|
||||||
|
</wd-checkbox>
|
||||||
|
</view>
|
||||||
|
<view class="footer">
|
||||||
|
<button class="wd-button is-primary is-block is-round is-large" form-type="submit">提交</button>
|
||||||
|
</view>
|
||||||
|
</form>
|
||||||
24
src/pages/form/index.jxss
Normal file
24
src/pages/form/index.jxss
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
@import "../../wot-design/button/index.jxss";
|
||||||
|
|
||||||
|
.inline-txt {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 14px;
|
||||||
|
margin: 0 8px;
|
||||||
|
color: rgba(0, 0, 0, 0.45);
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.group {
|
||||||
|
margin-top: 12px;
|
||||||
|
}
|
||||||
|
.tip {
|
||||||
|
margin: 10px 15px 21px;
|
||||||
|
color: #999;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.footer {
|
||||||
|
padding: 0 25px 21px;
|
||||||
|
}
|
||||||
|
.label-class {
|
||||||
|
color: #999 !important;
|
||||||
|
font-size: 12px !important;
|
||||||
|
}
|
||||||
14
src/pages/grid/index.js
Normal file
14
src/pages/grid/index.js
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import { joy } from '../images/joy'
|
||||||
|
import Toast from '../../wot-design/toast/toast'
|
||||||
|
|
||||||
|
Page({
|
||||||
|
data: {
|
||||||
|
joy
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
multipleSlots: true
|
||||||
|
},
|
||||||
|
click (event) {
|
||||||
|
Toast('成功跳转')
|
||||||
|
}
|
||||||
|
})
|
||||||
9
src/pages/grid/index.json
Normal file
9
src/pages/grid/index.json
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"navigationBarTitleText": "Grid 宫格",
|
||||||
|
"usingComponents": {
|
||||||
|
"demo-block": "../../components/demo-block/index",
|
||||||
|
"wd-toast": "../../wot-design/toast/index",
|
||||||
|
"wd-grid": "../../wot-design/grid/index",
|
||||||
|
"wd-grid-item": "../../wot-design/gridItem/index"
|
||||||
|
}
|
||||||
|
}
|
||||||
120
src/pages/grid/index.jxml
Normal file
120
src/pages/grid/index.jxml
Normal file
@ -0,0 +1,120 @@
|
|||||||
|
<wd-toast id="wd-toast" />
|
||||||
|
<view>
|
||||||
|
<demo-block title="基本用法" transparent>
|
||||||
|
<wd-grid>
|
||||||
|
<wd-grid-item icon="picture" text="文字" />
|
||||||
|
<wd-grid-item icon="picture" text="文字" />
|
||||||
|
<wd-grid-item icon="picture" text="文字" />
|
||||||
|
<wd-grid-item icon="picture" text="文字" />
|
||||||
|
</wd-grid>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="自定义列数" transparent>
|
||||||
|
<wd-grid column="3">
|
||||||
|
<wd-grid-item icon="picture" text="文字" />
|
||||||
|
<wd-grid-item icon="picture" text="文字" />
|
||||||
|
<wd-grid-item icon="picture" text="文字" />
|
||||||
|
<wd-grid-item icon="picture" text="文字" />
|
||||||
|
<wd-grid-item icon="picture" text="文字" />
|
||||||
|
<wd-grid-item icon="picture" text="文字" />
|
||||||
|
</wd-grid>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="自定义背景颜色">
|
||||||
|
<wd-grid bg-color="rgba(0, 0, 0, 0.02)">
|
||||||
|
<wd-grid-item icon="picture" text="文字" />
|
||||||
|
<wd-grid-item icon="picture" text="文字" />
|
||||||
|
<wd-grid-item icon="picture" text="文字" />
|
||||||
|
<wd-grid-item icon="picture" text="文字" />
|
||||||
|
</wd-grid>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="显示border">
|
||||||
|
<wd-grid column="3" border>
|
||||||
|
<wd-grid-item icon="picture" text="文字" />
|
||||||
|
<wd-grid-item icon="picture" text="文字" />
|
||||||
|
<wd-grid-item icon="picture" text="文字" />
|
||||||
|
<wd-grid-item icon="picture" text="文字" />
|
||||||
|
<wd-grid-item icon="picture" text="文字" />
|
||||||
|
<wd-grid-item icon="picture" text="文字" />
|
||||||
|
</wd-grid>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="内容插槽" transparent>
|
||||||
|
<wd-grid>
|
||||||
|
<wd-grid-item use-slot>
|
||||||
|
<image class="img" src="{{ joy }}" />
|
||||||
|
</wd-grid-item>
|
||||||
|
<wd-grid-item use-slot>
|
||||||
|
<image class="img" src="{{ joy }}" />
|
||||||
|
</wd-grid-item>
|
||||||
|
<wd-grid-item use-slot>
|
||||||
|
<image class="img" src="{{ joy }}" />
|
||||||
|
</wd-grid-item>
|
||||||
|
</wd-grid>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="图标插槽" transparent>
|
||||||
|
<wd-grid>
|
||||||
|
<wd-grid-item use-icon-slot text="文字" icon-size="36px">
|
||||||
|
<image slot="icon" class="slot-img" src="{{ joy }}" />
|
||||||
|
</wd-grid-item>
|
||||||
|
<wd-grid-item use-icon-slot text="文字" icon-size="36px">
|
||||||
|
<image slot="icon" class="slot-img" src="{{ joy }}" />
|
||||||
|
</wd-grid-item>
|
||||||
|
<wd-grid-item use-icon-slot text="文字" icon-size="36px">
|
||||||
|
<image slot="icon" class="slot-img" src="{{ joy }}" />
|
||||||
|
</wd-grid-item>
|
||||||
|
</wd-grid>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="文字插槽" transparent>
|
||||||
|
<wd-grid >
|
||||||
|
<wd-grid-item use-text-slot icon="picture">
|
||||||
|
<view slot="text" class="text">自定义文字插槽</view>
|
||||||
|
</wd-grid-item>
|
||||||
|
<wd-grid-item use-text-slot icon="picture">
|
||||||
|
<view slot="text" class="text">自定义文字插槽</view>
|
||||||
|
</wd-grid-item>
|
||||||
|
<wd-grid-item use-text-slot icon="picture">
|
||||||
|
<view slot="text" class="text">自定义文字插槽</view>
|
||||||
|
</wd-grid-item>
|
||||||
|
</wd-grid>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="自定义样式" transparent>
|
||||||
|
<wd-grid>
|
||||||
|
<wd-grid-item custom-class="custom-item" icon="search" text="京东JD.COM-专业的综合网上购物商城，销售超数万品牌、4020万种商品，囊括家电、手机、电脑、母婴、服装等13大品类。" />
|
||||||
|
<wd-grid-item custom-class="custom-item" icon="setting" text="秉承客户为先的理念，京东所售商品为正品行货、全国联保、机打发票。" />
|
||||||
|
</wd-grid>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="正方形格子" transparent>
|
||||||
|
<wd-grid square column="4" gutter="10">
|
||||||
|
<wd-grid-item icon="picture" text="文字" />
|
||||||
|
<wd-grid-item icon="picture" text="文字" />
|
||||||
|
<wd-grid-item icon="picture" text="文字" />
|
||||||
|
<wd-grid-item icon="picture" text="文字" />
|
||||||
|
<wd-grid-item icon="picture" text="文字" />
|
||||||
|
<wd-grid-item icon="picture" text="文字" />
|
||||||
|
<wd-grid-item icon="picture" text="文字" />
|
||||||
|
<wd-grid-item icon="picture" text="文字" />
|
||||||
|
</wd-grid>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="设定格间隙" transparent>
|
||||||
|
<wd-grid gutter="10" column="4">
|
||||||
|
<wd-grid-item icon="picture" text="文字" />
|
||||||
|
<wd-grid-item icon="picture" text="文字" />
|
||||||
|
<wd-grid-item icon="picture" text="文字" />
|
||||||
|
<wd-grid-item icon="picture" text="文字" />
|
||||||
|
<wd-grid-item icon="picture" text="文字" />
|
||||||
|
<wd-grid-item icon="picture" text="文字" />
|
||||||
|
<wd-grid-item icon="picture" text="文字" />
|
||||||
|
<wd-grid-item icon="picture" text="文字" />
|
||||||
|
</wd-grid>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="页面导航" transparent>
|
||||||
|
<wd-grid clickable>
|
||||||
|
<wd-grid-item link-type="redirectTo" url="/pages/button/index" bind:itemclick="click" icon="edit-outline" text="Redirect to ..." />
|
||||||
|
<wd-grid-item link-type="navigateTo" url="/pages/button/index" bind:itemclick="click" icon="edit-outline" text="Navigate to ..." />
|
||||||
|
</wd-grid>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="提示信息" transparent>
|
||||||
|
<wd-grid>
|
||||||
|
<wd-grid-item is-dot icon="goods" text="文字" />
|
||||||
|
<wd-grid-item value="100" max="99" icon="computer" text="文字" />
|
||||||
|
</wd-grid>
|
||||||
|
</demo-block>
|
||||||
|
</view>
|
||||||
24
src/pages/grid/index.jxss
Normal file
24
src/pages/grid/index.jxss
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
|
||||||
|
.custom-item{
|
||||||
|
height: 80px!important;
|
||||||
|
color: #e2231a;
|
||||||
|
text-align: left!important;
|
||||||
|
padding: 0 10px;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
.img{
|
||||||
|
width: 100%;
|
||||||
|
height: 90px;
|
||||||
|
display:inline-block;
|
||||||
|
background-size: cover;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.slot-img{
|
||||||
|
height: 36px;
|
||||||
|
width: 36px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.text{
|
||||||
|
color: #ffb300;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
BIN
src/pages/images/icon_nav_feedback.png
Normal file
BIN
src/pages/images/icon_nav_feedback.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 924 B |
BIN
src/pages/images/icon_nav_form.png
Normal file
BIN
src/pages/images/icon_nav_form.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 200 B |
BIN
src/pages/images/icon_nav_nav.png
Normal file
BIN
src/pages/images/icon_nav_nav.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 579 B |
BIN
src/pages/images/icon_nav_show.png
Normal file
BIN
src/pages/images/icon_nav_show.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 495 B |
BIN
src/pages/images/icon_nav_widget.png
Normal file
BIN
src/pages/images/icon_nav_widget.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 357 B |
BIN
src/pages/images/jd.png
Normal file
BIN
src/pages/images/jd.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
1
src/pages/images/joy.js
Normal file
1
src/pages/images/joy.js
Normal file
File diff suppressed because one or more lines are too long
8
src/pages/img/index.js
Normal file
8
src/pages/img/index.js
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
import { joy } from '../images/joy'
|
||||||
|
|
||||||
|
Page({
|
||||||
|
data: {
|
||||||
|
joy,
|
||||||
|
modes: ['top left', 'top right', 'bottom left', 'bottom right', 'right', 'left', 'center', 'bottom', 'top', 'heightFix', 'widthFix', 'scaleToFill', 'aspectFit', 'aspectFill']
|
||||||
|
}
|
||||||
|
})
|
||||||
7
src/pages/img/index.json
Normal file
7
src/pages/img/index.json
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"navigationBarTitleText": "Img 图片",
|
||||||
|
"usingComponents": {
|
||||||
|
"demo-block": "../../components/demo-block/index",
|
||||||
|
"wd-img": "../../wot-design/img/index"
|
||||||
|
}
|
||||||
|
}
|
||||||
17
src/pages/img/index.jxml
Normal file
17
src/pages/img/index.jxml
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
<demo-block title="基本用法">
|
||||||
|
<wd-img width="100" height="100" src="{{ joy }}" />
|
||||||
|
<!-- 以组件位置为定位原点 -->
|
||||||
|
<wd-img width="100" height="100" src="../../pages/images/jd.png" custom-class="border"/>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="填充">
|
||||||
|
<view class="col" jd:for="{{ modes }}" jd:key="index">
|
||||||
|
<wd-img width="100%" height="27vw" src="{{ joy }}" mode="{{ item }}" />
|
||||||
|
<view class="center">{{ item }}</view>
|
||||||
|
</view>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="圆形">
|
||||||
|
<view class="col" jd:for="{{ modes }}" jd:key="index">
|
||||||
|
<wd-img round width="100%" height="27vw" src="{{ joy }}" mode="{{ item }}" />
|
||||||
|
<view class="center">{{ item }}</view>
|
||||||
|
</view>
|
||||||
|
</demo-block>
|
||||||
16
src/pages/img/index.jxss
Normal file
16
src/pages/img/index.jxss
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
.col {
|
||||||
|
float: left;
|
||||||
|
width: 33.333%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
min-height: 1px;
|
||||||
|
padding-left: 10px;
|
||||||
|
padding-right: 10px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.border{
|
||||||
|
border: 1px solid red;
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
37
src/pages/imgCropper/index.js
Normal file
37
src/pages/imgCropper/index.js
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
Page({
|
||||||
|
data: {
|
||||||
|
src: '',
|
||||||
|
imgSrc: '',
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
upload () {
|
||||||
|
const that = this
|
||||||
|
jd.chooseImage({
|
||||||
|
count: 1,
|
||||||
|
sizeType: ['original', 'compressed'],
|
||||||
|
sourceType: ['album', 'camera'],
|
||||||
|
success (res) {
|
||||||
|
const tempFilePaths = res.tempFilePaths[0]
|
||||||
|
that.setData({
|
||||||
|
show: true,
|
||||||
|
src: tempFilePaths
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleConfirm (event) {
|
||||||
|
const { tempFilePath } = event.detail
|
||||||
|
this.setData({
|
||||||
|
imgSrc: tempFilePath
|
||||||
|
})
|
||||||
|
},
|
||||||
|
imgLoaderror (res) {
|
||||||
|
console.log('加载失败', res)
|
||||||
|
},
|
||||||
|
imgLoaded (res) {
|
||||||
|
console.log('加载成功', res)
|
||||||
|
},
|
||||||
|
handleCancel (event) {
|
||||||
|
console.log('取消', event)
|
||||||
|
}
|
||||||
|
})
|
||||||
10
src/pages/imgCropper/index.json
Normal file
10
src/pages/imgCropper/index.json
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"navigationBarTitleText": "裁剪图片",
|
||||||
|
"usingComponents": {
|
||||||
|
"demo-block": "../../components/demo-block/index",
|
||||||
|
"wd-img-cropper": "../../wot-design/imgCropper/index",
|
||||||
|
"wd-button": "../../wot-design/button/index",
|
||||||
|
"wd-img": "../../wot-design/img/index",
|
||||||
|
"wd-icon": "../../wot-design/icon/index"
|
||||||
|
}
|
||||||
|
}
|
||||||
18
src/pages/imgCropper/index.jxml
Normal file
18
src/pages/imgCropper/index.jxml
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
<demo-block title="基本用法" style="text-align: center">
|
||||||
|
<wd-img-cropper
|
||||||
|
id="wd-img-cropper"
|
||||||
|
show="{{show}}"
|
||||||
|
img-src="{{src}}"
|
||||||
|
bind:confirm="handleConfirm"
|
||||||
|
bind:cancel="handleCancel"
|
||||||
|
bind:imgloaderror="imgLoaderror"
|
||||||
|
bind:imgloaded="imgLoaded">
|
||||||
|
</wd-img-cropper>
|
||||||
|
<view class="profile">
|
||||||
|
<view jd:if="{{ !imgSrc }}" class="img" bindtap="upload">
|
||||||
|
<wd-icon name="fill-camera" custom-class="img-icon"></wd-icon>
|
||||||
|
</view>
|
||||||
|
<wd-img jd:if="{{ imgSrc }}" round width="200px" height="200px" src="{{ imgSrc }}" mode="aspectFit" custom-class="profile-img" bindtap="upload" />
|
||||||
|
<view style="font-size: 14px;">点击上传头像</view>
|
||||||
|
</view>
|
||||||
|
</demo-block>
|
||||||
26
src/pages/imgCropper/index.jxss
Normal file
26
src/pages/imgCropper/index.jxss
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
.profile{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
align-items: center;
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-img {
|
||||||
|
border: 1px solid rgba(0,0,0,0.09);
|
||||||
|
}
|
||||||
|
.img {
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: rgba(0,0,0,0.04);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.img-icon {
|
||||||
|
font-size: 60px;
|
||||||
|
color: #fff;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
209
src/pages/index/index.js
Normal file
209
src/pages/index/index.js
Normal file
@ -0,0 +1,209 @@
|
|||||||
|
Page({
|
||||||
|
data: {
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
id: 'widget',
|
||||||
|
name: '基础',
|
||||||
|
open: false,
|
||||||
|
pages: [
|
||||||
|
{
|
||||||
|
id: 'button',
|
||||||
|
name: 'Button 按钮'
|
||||||
|
}, {
|
||||||
|
id: 'icon',
|
||||||
|
name: 'Icon 图标'
|
||||||
|
}, {
|
||||||
|
id: 'layout',
|
||||||
|
name: 'Layout 布局'
|
||||||
|
}, {
|
||||||
|
id: 'popup',
|
||||||
|
name: 'Popup 弹出层'
|
||||||
|
}, {
|
||||||
|
id: 'resize',
|
||||||
|
name: 'Resize 监听元素尺寸变化'
|
||||||
|
}, {
|
||||||
|
id: 'transition',
|
||||||
|
name: 'Transition 动画'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
id: 'nav',
|
||||||
|
name: '导航',
|
||||||
|
open: false,
|
||||||
|
pages: [
|
||||||
|
{
|
||||||
|
id: 'pagination',
|
||||||
|
name: 'Pagination 分页'
|
||||||
|
}, {
|
||||||
|
id: 'popover',
|
||||||
|
name: 'Popover 气泡'
|
||||||
|
}, {
|
||||||
|
id: 'tabs',
|
||||||
|
name: 'Tabs 标签页'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
id: 'form',
|
||||||
|
name: '数据输入',
|
||||||
|
open: false,
|
||||||
|
pages: [
|
||||||
|
{
|
||||||
|
id: 'calendar',
|
||||||
|
name: 'Calendar 日历选择器'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'calendarView',
|
||||||
|
name: 'CalendarView 日历面板'
|
||||||
|
}, {
|
||||||
|
id: 'checkbox',
|
||||||
|
name: 'Checkbox 复选框'
|
||||||
|
}, {
|
||||||
|
id: 'colPicker',
|
||||||
|
name: 'ColPicker 多列选择器'
|
||||||
|
}, {
|
||||||
|
id: 'datetimePicker',
|
||||||
|
name: 'DatetimePicker 时间选择器'
|
||||||
|
}, {
|
||||||
|
id: 'datetimePickerView',
|
||||||
|
name: 'DatetimePickerView 时间选择器视图'
|
||||||
|
}, {
|
||||||
|
id: 'input',
|
||||||
|
name: 'Input 输入框'
|
||||||
|
}, {
|
||||||
|
id: 'inputNumber',
|
||||||
|
name: 'InputNumber 计数器'
|
||||||
|
}, {
|
||||||
|
id: 'picker',
|
||||||
|
name: 'Picker 选择器'
|
||||||
|
}, {
|
||||||
|
id: 'pickerView',
|
||||||
|
name: 'PickerView 选择器视图'
|
||||||
|
}, {
|
||||||
|
id: 'radio',
|
||||||
|
name: 'Radio 单选框'
|
||||||
|
}, {
|
||||||
|
id: 'rate',
|
||||||
|
name: 'Rate 评分'
|
||||||
|
}, {
|
||||||
|
id: 'search',
|
||||||
|
name: 'Search 搜索'
|
||||||
|
}, {
|
||||||
|
id: 'selectPicker',
|
||||||
|
name: 'SelectPicker 单复选选择器'
|
||||||
|
}, {
|
||||||
|
id: 'slider',
|
||||||
|
name: 'Slider 滑块'
|
||||||
|
}, {
|
||||||
|
id: 'switch',
|
||||||
|
name: 'Switch 开关'
|
||||||
|
}, {
|
||||||
|
id: 'form',
|
||||||
|
name: 'Form 表单组件组合'
|
||||||
|
}, {
|
||||||
|
id: 'upload',
|
||||||
|
name: 'Upload 上传'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
id: 'feedback',
|
||||||
|
name: '反馈',
|
||||||
|
open: false,
|
||||||
|
pages: [
|
||||||
|
{
|
||||||
|
id: 'actionSheet',
|
||||||
|
name: 'ActionSheet 上拉菜单'
|
||||||
|
}, {
|
||||||
|
id: 'dropMenu',
|
||||||
|
name: 'DropMenu 下拉菜单'
|
||||||
|
}, {
|
||||||
|
id: 'loading',
|
||||||
|
name: 'Loading 加载指示器'
|
||||||
|
}, {
|
||||||
|
id: 'messageBox',
|
||||||
|
name: 'MessageBox 弹框'
|
||||||
|
}, {
|
||||||
|
id: 'noticeBar',
|
||||||
|
name: 'NoticeBar 通知栏'
|
||||||
|
}, {
|
||||||
|
id: 'progress',
|
||||||
|
name: 'Progress 进度条'
|
||||||
|
}, {
|
||||||
|
id: 'sortButton',
|
||||||
|
name: 'SortButton 排序按钮'
|
||||||
|
}, {
|
||||||
|
id: 'statusTip',
|
||||||
|
name: 'StatusTip 缺省提示'
|
||||||
|
}, {
|
||||||
|
id: 'swipeAction',
|
||||||
|
name: 'SwipeAction 滑动操作'
|
||||||
|
}, {
|
||||||
|
id: 'toast',
|
||||||
|
name: 'Toast 轻提示'
|
||||||
|
}, {
|
||||||
|
id: 'tooltip',
|
||||||
|
name: 'Tooltip 文字提示'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
id: 'show',
|
||||||
|
name: '数据展示',
|
||||||
|
open: false,
|
||||||
|
pages: [
|
||||||
|
{
|
||||||
|
id: 'badge',
|
||||||
|
name: 'Badge 徽标'
|
||||||
|
}, {
|
||||||
|
id: 'card',
|
||||||
|
name: 'Card 卡片'
|
||||||
|
}, {
|
||||||
|
id: 'cell',
|
||||||
|
name: 'Cell 单元格'
|
||||||
|
}, {
|
||||||
|
id: 'collapse',
|
||||||
|
name: 'Collapse 折叠面板'
|
||||||
|
}, {
|
||||||
|
id: 'curtain',
|
||||||
|
name: 'Curtain 幕帘'
|
||||||
|
}, {
|
||||||
|
id: 'divider',
|
||||||
|
name: 'Divider 分割线'
|
||||||
|
}, {
|
||||||
|
id: 'img',
|
||||||
|
name: 'Img 图片'
|
||||||
|
}, {
|
||||||
|
id: 'imgCropper',
|
||||||
|
name: 'imgCropper 图片裁剪'
|
||||||
|
}, {
|
||||||
|
id: 'grid',
|
||||||
|
name: 'Grid 宫格'
|
||||||
|
}, {
|
||||||
|
id: 'loadmore',
|
||||||
|
name: 'Loadmore 加载更多'
|
||||||
|
}, {
|
||||||
|
id: 'steps',
|
||||||
|
name: 'Steps 步骤条'
|
||||||
|
}, {
|
||||||
|
id: 'sticky',
|
||||||
|
name: 'Sticky 吸顶布局'
|
||||||
|
}, {
|
||||||
|
id: 'tag',
|
||||||
|
name: 'Tag 标签'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
kindToggle: function (e) {
|
||||||
|
const { id } = e.currentTarget
|
||||||
|
const list = this.data.list
|
||||||
|
for (let i = 0, len = list.length; i < len; ++i) {
|
||||||
|
if (list[i].id === id) {
|
||||||
|
list[i].open = !list[i].open
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.setData({
|
||||||
|
list: list
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
3
src/pages/index/index.json
Normal file
3
src/pages/index/index.json
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"navigationBarTitleText": "Wot Design Mini"
|
||||||
|
}
|
||||||
30
src/pages/index/index.jxml
Normal file
30
src/pages/index/index.jxml
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
<!--index.jxml-->
|
||||||
|
<view class="page">
|
||||||
|
<view class="page__hd">
|
||||||
|
<view class="page__title">
|
||||||
|
<view class="logo"></view>
|
||||||
|
<view class="inline">Wot Design Mini</view>
|
||||||
|
</view>
|
||||||
|
<view class="page__desc">该组件库基于小程序构建，根据京东商家侧的UI设计规范（京麦移动端设计规范）开发，旨在给商家提供统一的UI交互，同时提高研发的开发效率。</view>
|
||||||
|
</view>
|
||||||
|
<view class="page__bd">
|
||||||
|
<block jd:for="{{list}}" jd:key="id">
|
||||||
|
<view class="kind-list__item">
|
||||||
|
<view id="{{item.id}}" class="wd-flex kind-list__item-hd" bindtap="kindToggle">
|
||||||
|
<view class="wd-flex__item title">{{item.name}}</view>
|
||||||
|
<image class="kind-list__img" src="../images/icon_nav_{{item.id}}.png"></image>
|
||||||
|
</view>
|
||||||
|
<view class="kind-list__item-bd {{item.open ? 'kind-list__item-bd_show' : ''}}">
|
||||||
|
<view class="wd-cells {{item.open ? 'wd-cells_show' : ''}}">
|
||||||
|
<block jd:for="{{item.pages}}" jd:for-item="page" jd:key="id">
|
||||||
|
<navigator url="../{{page.id}}/index" class="wd-cell wd-flex wd-cell_access">
|
||||||
|
<view class="wd-flex__item page-name">{{page.name}}</view>
|
||||||
|
<view class="wd-cell__ft wd-tool-right-line-angle"></view>
|
||||||
|
</navigator>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
116
src/pages/index/index.jxss
Normal file
116
src/pages/index/index.jxss
Normal file
File diff suppressed because one or more lines are too long
50
src/pages/input/index.js
Normal file
50
src/pages/input/index.js
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
Page({
|
||||||
|
options: {
|
||||||
|
multipleSlots: true
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
value: '',
|
||||||
|
value1: '这是禁用状态',
|
||||||
|
value2: '这是只读状态',
|
||||||
|
value3: '123456',
|
||||||
|
value4: '支持清空',
|
||||||
|
value5: 'password',
|
||||||
|
value6: '',
|
||||||
|
value7: '1234',
|
||||||
|
value8: '',
|
||||||
|
value9: '',
|
||||||
|
value10: '支持清空和字数限制的文本域',
|
||||||
|
value11: '输入文字后，输入框高度跟随字数多少变化',
|
||||||
|
value12: '',
|
||||||
|
value13: '该输入框禁用',
|
||||||
|
value14: '12345678',
|
||||||
|
value15: '',
|
||||||
|
value16: '',
|
||||||
|
value17: '',
|
||||||
|
value18: '',
|
||||||
|
value19: ''
|
||||||
|
},
|
||||||
|
handleChange (event) {
|
||||||
|
this.setData({
|
||||||
|
value: event.detail.value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleChange1 (event) {
|
||||||
|
this.setData({
|
||||||
|
value4: event.detail.value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleChange2 (event) {
|
||||||
|
this.setData({
|
||||||
|
value5: event.detail.value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleChange3 (event) {
|
||||||
|
this.setData({
|
||||||
|
value6: event.detail.value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleBlur (event) {
|
||||||
|
console.log('失焦', event.detail.value)
|
||||||
|
}
|
||||||
|
})
|
||||||
10
src/pages/input/index.json
Normal file
10
src/pages/input/index.json
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"navigationBarTitleText": "Input 输入框",
|
||||||
|
"usingComponents": {
|
||||||
|
"demo-block": "../../components/demo-block/index",
|
||||||
|
"wd-input": "../../wot-design/input/index",
|
||||||
|
"wd-icon": "../../wot-design/icon/index",
|
||||||
|
"wd-cell-group": "../../wot-design/cellGroup/index",
|
||||||
|
"wd-button": "../../wot-design/button/index"
|
||||||
|
}
|
||||||
|
}
|
||||||
53
src/pages/input/index.jxml
Normal file
53
src/pages/input/index.jxml
Normal file
@ -0,0 +1,53 @@
|
|||||||
|
<view>
|
||||||
|
<demo-block title="基本用法">
|
||||||
|
<wd-input type="text" value="{{ value }}" placeholder="请输入用户名" bind:change="handleChange" bind:blur="handleBlur" />
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="禁用状态">
|
||||||
|
<wd-input type="text" value="{{ value1 }}" disabled="true" />
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="只读状态">
|
||||||
|
<wd-input type="text" value="{{ value2 }}" readonly />
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="错误状态">
|
||||||
|
<wd-input type="text" value="{{ value3 }}" placeholder="请输入用户名" error />
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="清空按钮">
|
||||||
|
<wd-input type="text" value="{{ value4 }}" clearable bind:change="handleChange1" />
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="密码框">
|
||||||
|
<wd-input type="text" value="{{ value5 }}" clearable show-password bind:change="handleChange2" />
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="设置前后Icon">
|
||||||
|
<wd-input type="text" value="{{ value6 }}" prefix-icon="dong" suffix-icon="list" clearable bind:change="handleChange3" />
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="字数限制">
|
||||||
|
<wd-input type="text" value="{{ value7 }}" maxlength="20" show-word-limit />
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="取消底部边框，自定义使用">
|
||||||
|
<wd-input value="{{value8}}" no-border placeholder="请输入价格" style="display: inline-block; width: 70px; vertical-align: middle;" />
|
||||||
|
<text style="display: inline-block; vertical-align: middle; font-size: 14px;">元</text>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="textarea" transparent>
|
||||||
|
<wd-input type="textarea" value="{{ value9 }}" placeholder="请填写评价" bind:blur="handleBlur" />
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="textarea 清空按钮 和 字数限制" transparent>
|
||||||
|
<wd-input type="textarea" value="{{ value10 }}" maxlength="120" clearable show-word-limit />
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="textarea 高度自适应">
|
||||||
|
<wd-input type="textarea" value="{{value11}}" auto-height='true' clearable></wd-input>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="cell 类型" transparent>
|
||||||
|
<wd-cell-group border>
|
||||||
|
<wd-input type="text" label="基本用法" value="{{ value12 }}" placeholder="请输入..." />
|
||||||
|
<wd-input type="text" label="禁用" value="{{ value13 }}" disabled placeholder="用户名" />
|
||||||
|
<wd-input type="text" label="清除、密码" value="{{ value14 }}" placeholder="密码" clearable show-password />
|
||||||
|
<wd-input type="text" label="错误状态" value="{{ value15 }}" placeholder="请输入用户名" error />
|
||||||
|
<wd-input type="text" label="必填" value="{{ value16 }}" placeholder="请输入用户名" required />
|
||||||
|
<wd-input type="text" label="图标" value="{{ value17 }}" placeholder="请输入..." prefix-icon="dong" suffix-icon="list" />
|
||||||
|
<wd-input type="text" label="自定义插槽" value="{{ value18 }}" placeholder="请输入..." use-suffix-slot clearable>
|
||||||
|
<wd-button slot="suffix" size="small" custom-class="button">获取验证码</wd-button>
|
||||||
|
</wd-input>
|
||||||
|
<wd-input type="text" label="大尺寸" size="large" value="{{ value19 }}" placeholder="请输入..." />
|
||||||
|
</wd-cell-group>
|
||||||
|
</demo-block>
|
||||||
|
</view>
|
||||||
16
src/pages/input/index.jxss
Normal file
16
src/pages/input/index.jxss
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
.flex {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.suffix-slot{
|
||||||
|
display: inline-block;
|
||||||
|
height: 37px;
|
||||||
|
line-height: 37px;
|
||||||
|
margin-left: 8px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.button {
|
||||||
|
margin-left: 8px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
58
src/pages/inputNumber/index.js
Normal file
58
src/pages/inputNumber/index.js
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
Page({
|
||||||
|
data: {
|
||||||
|
value1: 1,
|
||||||
|
value2: 1,
|
||||||
|
value3: 1,
|
||||||
|
value4: 2,
|
||||||
|
value5: 1,
|
||||||
|
value6: '1.205',
|
||||||
|
value7: 1,
|
||||||
|
value8: 2,
|
||||||
|
value9: ''
|
||||||
|
},
|
||||||
|
handleChange1 ({ detail }) {
|
||||||
|
this.setData({
|
||||||
|
value1: detail.value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleChange2 ({ detail }) {
|
||||||
|
this.setData({
|
||||||
|
value2: detail.value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleChange3 ({ detail }) {
|
||||||
|
this.setData({
|
||||||
|
value3: detail.value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleChange4 ({ detail }) {
|
||||||
|
this.setData({
|
||||||
|
value4: detail.value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleChange5 ({ detail }) {
|
||||||
|
this.setData({
|
||||||
|
value5: detail.value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleChange6 ({ detail }) {
|
||||||
|
this.setData({
|
||||||
|
value6: detail.value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleChange7 ({ detail }) {
|
||||||
|
this.setData({
|
||||||
|
value7: detail.value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleChange8 ({ detail }) {
|
||||||
|
this.setData({
|
||||||
|
value8: detail.value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleChange9 ({ detail }) {
|
||||||
|
this.setData({
|
||||||
|
value9: detail.value
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user