docs: ✏️ 调整一些组件代码

This commit is contained in:
xuqingkai 2023-06-12 18:41:26 +08:00
parent 69a4ef5540
commit 609eeddb3a
234 changed files with 7078 additions and 1066 deletions

View File

@ -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 获取失败')
}

View File

@ -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-----

View File

@ -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'])

View File

@ -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()

View File

@ -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')

View File

@ -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('无操作,未更新文档')
}
}

View File

@ -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
}
})

View File

@ -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)

View File

@ -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('组件库压缩包本本更新失败...')
}

View File

@ -41,18 +41,7 @@
"release-major": "standard-version --release-as major",
"release-minor": "standard-version --release-as minor",
"release-patch": "standard-version --release-as patch",
"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"
"clean:lib": "rimraf lib"
},
"dependencies": {
"@dcloudio/uni-app": "3.0.0-alpha-3080220230511001",

View File

@ -19,4 +19,14 @@ onHide(() => {
console.log('App Hide')
})
</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>

View File

@ -31,6 +31,26 @@
},
"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": {

View 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}`)
}
})

View 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"
}
}

View 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>

View File

View File

@ -30,10 +30,10 @@
</demo-block>
<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-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-badge>
</demo-block>

View File

@ -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>

View File

@ -1,4 +0,0 @@
.badge {
margin: 0 30px 20px 0;
display: inline-block;
}

116
src/pages/calendar/index.js Normal file
View 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()
})
}
})

View 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"
}
}

View 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>

View File

View 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
})
}
})

View 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"
}
}

View 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>

View File

View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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;
}

View File

@ -0,0 +1,11 @@
Page({
data: {
value1: '京麦',
value2: [1]
},
handleChange1 ({ detail }) {
this.setData({
value1: detail.value
})
}
})

View 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"
}
}

View 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>

View File

@ -0,0 +1,6 @@
.group {
display: block;
margin-top: 10px;
padding: 10px 0;
border-top: 1px solid rgba(0, 0, 0, 0.04);
}

View 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
})
}
})

View 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"
}
}

View 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>

View File

View 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 })
}
})

View 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"
}
}

View 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>

View File

@ -0,0 +1,3 @@
.more-slot{
color: red;
}

View 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'
})
}
})

View 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"
}
}

View 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>

View File

@ -0,0 +1,3 @@
button {
margin: 0 10px 10px 0;
}

View 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 () {
}
})

View 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"
}
}

View 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>

View File

View 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
})
}
})

View 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"
}
}

View 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>

View File

View File

@ -0,0 +1 @@
Page({})

View File

@ -0,0 +1,7 @@
{
"navigationBarTitleText": "Divider 分割线",
"usingComponents": {
"demo-block": "../../components/demo-block/index",
"wd-divider": "../../wot-design/divider/index"
}
}

View 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>

View File

View 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()
}
})

View 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"
}
}

View 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>

View File

@ -0,0 +1,3 @@
.demo-body{
height: 100vh;
}

144
src/pages/form/index.js Normal file
View 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
View 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
View 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
View 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
View 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('成功跳转')
}
})

View 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
View 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
View 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;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 924 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 200 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 579 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 495 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 357 B

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

File diff suppressed because one or more lines are too long

8
src/pages/img/index.js Normal file
View 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
View 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
View 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
View 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;
}

View 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)
}
})

View 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"
}
}

View 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>

View 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
View 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
})
}
})

View File

@ -0,0 +1,3 @@
{
"navigationBarTitleText": "Wot Design Mini"
}

View 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

File diff suppressed because one or more lines are too long

50
src/pages/input/index.js Normal file
View 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)
}
})

View 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"
}
}

View 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>

View 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;
}

View 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