479 lines
11 KiB
Vue
479 lines
11 KiB
Vue
<template>
|
||
<ciy-header title="Demo示例"></ciy-header>
|
||
<view>
|
||
<view class="item ok" v-if="last" @tap="gourl" :data-url="last.url"><text class="kbd">最近</text> {{last.title}}
|
||
</view>
|
||
<view class="item" v-for="(item,index) in demos" :key="index">
|
||
<view v-if="item.childs" @tap="chgshow(index)" class="txt-wb cursor-p ok">{{item.title}}</view>
|
||
<view v-else class="ok" @tap="gourl" :data-url="item.url">{{item.title}}</view>
|
||
<template v-if="item.childs && item.show">
|
||
<view class="item" :class="{ok:citm.ok}" v-for="(citm,cidx) in item.childs" :key="cidx" @tap="godemo(citm)">
|
||
{{citm.title}}
|
||
</view>
|
||
</template>
|
||
</view>
|
||
<view class="txt-center">
|
||
<text style="color:var(--dag5)">组件上不能添加class、style属性</text>
|
||
</view>
|
||
<view style="height:1em;"></view>
|
||
</view>
|
||
</template>
|
||
|
||
<style>
|
||
.item {
|
||
margin: 2em;
|
||
color: var(--txt3);
|
||
}
|
||
|
||
.ok {
|
||
color: var(--txt9);
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
last: null,
|
||
demos: [{
|
||
title: '功能试验页 demo/test.vue',
|
||
url: 'test'
|
||
}, {
|
||
title: '首页',
|
||
url: '/pages/main/index'
|
||
}, {
|
||
title: '表单组件',
|
||
childs: [{
|
||
ok: true,
|
||
url: 'comform/define',
|
||
title: '通用组件定义'
|
||
}, {
|
||
ok: true,
|
||
url: 'comform/input',
|
||
title: '输入框'
|
||
}, {
|
||
ok: true,
|
||
url: 'comform/select',
|
||
title: '单选下拉选择框'
|
||
}, {
|
||
ok: true,
|
||
url: 'comform/selbool',
|
||
title: '开关框'
|
||
}, {
|
||
ok: true,
|
||
url: 'comform/selcas',
|
||
title: '联级选择框'
|
||
}, {
|
||
ok: true,
|
||
url: 'comform/selpage',
|
||
title: '独立页选择框'
|
||
}, {
|
||
ok: true,
|
||
url: 'comform/checkbox',
|
||
title: '复选框'
|
||
}, {
|
||
ok: true,
|
||
url: 'comform/radiobox',
|
||
title: '单选框'
|
||
}, {
|
||
ok: true,
|
||
url: 'comform/calendar',
|
||
title: '日历选择器'
|
||
}, {
|
||
ok: true,
|
||
url: 'comform/inputdatetime',
|
||
title: '时间日期选择框'
|
||
}, {
|
||
ok: true,
|
||
url: 'comform/inputdaterange',
|
||
title: '时间日期区间选择框'
|
||
}, {
|
||
ok: true,
|
||
url: 'comform/inputtimepoint',
|
||
title: '时间选择框'
|
||
}, {
|
||
ok: true,
|
||
url: 'comform/inputbet',
|
||
title: '倍数数字输入框'
|
||
}, {
|
||
ok: true,
|
||
url: 'comform/inputnumber',
|
||
title: '数量加减框'
|
||
}, {
|
||
ok: true,
|
||
url: 'comform/slider',
|
||
title: '单点拖动选择数字 -_-'
|
||
}, {
|
||
url: 'comform/slider2',
|
||
title: '两点拖动选择数字范围'
|
||
}, {
|
||
ok: true,
|
||
url: 'comform/ratestar',
|
||
title: '评价星级选择'
|
||
}, {
|
||
url: 'comform/colorpick',
|
||
title: '颜色选择/带透明度'
|
||
}, {
|
||
url: 'comform/transfer',
|
||
title: '左右穿梭多选'
|
||
}, {
|
||
ok: true,
|
||
url: 'comform/checkitem',
|
||
title: '选择块/圆块/方块'
|
||
}, {
|
||
ok: true,
|
||
url: 'comform/switch',
|
||
title: '开关选择块'
|
||
}, {
|
||
ok: true,
|
||
url: 'comform/textarea',
|
||
title: '多行文本框'
|
||
}, {
|
||
ok: true,
|
||
url: 'comform/inputcyc',
|
||
title: '执行周期输入框'
|
||
}, {
|
||
ok: true,
|
||
url: 'comform/inputunitedit',
|
||
title: '三级单位编辑'
|
||
}, {
|
||
url: 'comform/inputunitnum',
|
||
title: '三级单位数量输入'
|
||
}, {
|
||
url: 'comform/mdedit',
|
||
title: 'MarkDown编辑器'
|
||
}, {
|
||
ok: true,
|
||
url: 'comform/handsign',
|
||
title: '-_- 手写输入板'
|
||
}, {
|
||
ok: true,
|
||
url: 'comform/capcode',
|
||
title: '验证码组件'
|
||
}, {
|
||
url: 'comform/temptext',
|
||
title: '模版填写录入' //input定长框、switch框、select定长框、textarea定高整行
|
||
}, {
|
||
url: 'comform/inputcar',
|
||
title: '车牌录入'
|
||
}, {
|
||
ok: true,
|
||
url: 'comform/upload',
|
||
title: '图片多选器'
|
||
}, {
|
||
ok: true,
|
||
url: 'comform/selmap',
|
||
title: '地图选择器'
|
||
}]
|
||
}, {
|
||
title: '页面组件',
|
||
childs: [{
|
||
ok: true,
|
||
url: 'comview/header',
|
||
title: '标题栏组件 header'
|
||
}, {
|
||
ok: true,
|
||
url: 'comview/tabbar',
|
||
title: '底部导航栏组件 tabbar'
|
||
}, {
|
||
ok: true,
|
||
url: 'comview/alert',
|
||
title: '弹窗组件 alert'
|
||
}, {
|
||
ok: true,
|
||
url: 'comview/toast',
|
||
title: '提示组件 toast'
|
||
}, {
|
||
ok: true,
|
||
url: 'comview/auth',
|
||
title: '注册登录组件 auth'
|
||
}, {
|
||
ok: true,
|
||
url: 'comview/svgimg',
|
||
title: '图片svg组件'
|
||
}, {
|
||
url: 'comview/showmsg',
|
||
title: '上叠多弹框/右下多弹框'
|
||
}, {
|
||
ok: true,
|
||
url: 'comview/swipelist',
|
||
title: '列表布局'
|
||
}, {
|
||
ok: true,
|
||
url: 'comview/gesture',
|
||
title: '手势组件'
|
||
}, {
|
||
ok: true,
|
||
url: 'comview/markdown',
|
||
title: 'MarkDown显示'
|
||
}, {
|
||
ok: true,
|
||
url: 'comview/query',
|
||
title: '多搜索项栏'
|
||
}, {
|
||
ok: true,
|
||
url: 'comview/searchbar',
|
||
title: '文字搜索栏'
|
||
}, {
|
||
ok: true,
|
||
url: 'comview/segment',
|
||
title: '分类切换'
|
||
}, {
|
||
url: 'comview/noticebar',
|
||
title: '通告栏/文字跑马灯'
|
||
}, {
|
||
ok: true,
|
||
url: 'comview/popmenu',
|
||
title: '上拉弹出菜单'
|
||
}, {
|
||
ok: true,
|
||
url: 'comview/swiper',
|
||
title: '-_- 轮播图容器'
|
||
}, {
|
||
url: 'comview/timeline',
|
||
title: '时间线组件'
|
||
}, {
|
||
url: 'comview/steps',
|
||
title: '步骤组件'
|
||
}, {
|
||
ok: true,
|
||
url: 'comview/textmore',
|
||
title: '内容部分隐藏/点击显示'
|
||
// }, {
|
||
// url: 'comview/collapse',
|
||
// title: '可折叠面板'
|
||
}, {
|
||
url: 'comview/fab',
|
||
title: '浮动按钮/多个弹出/加号漂浮'
|
||
}, {
|
||
ok: true,
|
||
url: 'comview/listend',
|
||
title: '列表底部显示'
|
||
}, {
|
||
ok: true,
|
||
url: 'comview/ani',
|
||
title: '简易动画组件'
|
||
}, {
|
||
ok: true,
|
||
url: 'comview/aniheight',
|
||
title: '高度动画组件'
|
||
}, {
|
||
ok: true,
|
||
url: 'comview/anipop',
|
||
title: '上下左右弹出容器动画'
|
||
}, {
|
||
url: 'comview/aniflyto',
|
||
title: '抛物线飞到动画'
|
||
}, {
|
||
url: 'comview/dropsort',
|
||
title: '拖拽排序'
|
||
}, {
|
||
url: 'comview/showmap',
|
||
title: '地图显示/单点/多点/线段/面积'
|
||
}, {
|
||
ok: true,
|
||
url: 'comview/showimgs',
|
||
title: '多图显示'
|
||
}, {
|
||
ok: true,
|
||
url: 'comview/cameraocr',
|
||
title: '实时OCR识别'
|
||
}, {
|
||
//ok: true,
|
||
url: 'comview/cameraqrcode',
|
||
title: '实时扫码'
|
||
}, {
|
||
ok: true,
|
||
url: 'comview/shownum',
|
||
title: '数字动效显示'
|
||
}, {
|
||
ok: true,
|
||
url: 'comview/showemoney',
|
||
title: '金额显示'
|
||
}, {
|
||
url: 'comview/qrcode',
|
||
title: '生成二维码图片'
|
||
}, {
|
||
url: 'comview/barcode',
|
||
title: '生成条形码图片'
|
||
}, {
|
||
url: 'comview/advposter',
|
||
title: '生成分享海报图片'
|
||
}, {
|
||
ok: true,
|
||
url: 'comview/movable',
|
||
title: '可拖动的容器'
|
||
}, {
|
||
ok: true,
|
||
url: 'comview/audio',
|
||
title: '音乐播放器'
|
||
}, {
|
||
ok: true,
|
||
url: 'comview/audio?bg=1',
|
||
title: '背景音乐播放器'
|
||
}, {
|
||
url: 'comview/btreader',
|
||
title: '蓝牙连接状态'
|
||
}]
|
||
}, {
|
||
title: 'CSS样式',
|
||
childs: [{
|
||
ok: true,
|
||
url: 'css/cssdemo',
|
||
title: '通用CSS示例'
|
||
}, {
|
||
ok: true,
|
||
url: 'css/tailwind',
|
||
title: 'Tailwind CSS'
|
||
}, {
|
||
ok: true,
|
||
url: 'css/zindex',
|
||
title: 'z-index层叠关系'
|
||
}, {
|
||
ok: true,
|
||
url: 'css/pageflex',
|
||
title: '页面flex布局示例'
|
||
}, {
|
||
ok: true,
|
||
url: 'css/grid',
|
||
title: '-_- Grid布局示例'
|
||
}, {
|
||
ok: true,
|
||
url: 'css/waterfall',
|
||
title: '瀑布流'
|
||
}, {
|
||
ok: true,
|
||
url: 'css/skeleton',
|
||
title: '骨架屏'
|
||
}, {
|
||
ok: true,
|
||
url: 'css/chart_pie',
|
||
title: '图表/饼图'
|
||
}]
|
||
}, {
|
||
title: '常用页面',
|
||
childs: [{
|
||
ok: true,
|
||
url: 'curd/me',
|
||
title: '我的页'
|
||
}, {
|
||
ok: true,
|
||
url: 'curd/demo_list', //demo_edit
|
||
title: '列表删除页/编辑页' //复杂功能，搜索、列表、删除。添加、编辑。
|
||
}, {
|
||
url: 'curd/demo_single',
|
||
title: '增删改查/选择单页' //搜索、列表、点击直接修改、添加、选择。
|
||
}, {
|
||
url: 'curd/prod_list', //prod_info
|
||
title: '商品列表页/下单页' //顶部筛选/分类导航，商品瀑布列表。商品详情多SKU下单/加购物车。
|
||
}, {
|
||
url: 'curd/order_list', //order_refund,order_info
|
||
title: '订单页/退款页/订单详情页' //可接入的C端订单操作。退款申请操作。
|
||
}, {
|
||
url: 'curd/cart',
|
||
title: '购物车页' //购物车管理，合并支付，改变SKU/数量。
|
||
}, {
|
||
url: 'curd/shop_list',
|
||
title: '店铺采购单页' //类美团，左侧4字分类，右侧单列商品，底部结算。
|
||
}, {
|
||
url: 'curd/message_list', //message_chat
|
||
title: '消息页/对话页' //折叠消息列表(通知、告警、对话、群)、消息内容
|
||
}, {
|
||
url: 'curd/buy_now', //buy_list
|
||
title: '充值页/充值记录页' //充值买金币、充值到余额
|
||
}, {
|
||
url: 'curd/cash_now', //cash_list
|
||
title: '提现页/提现记录页' //提现申请、提现记录
|
||
}]
|
||
}, {
|
||
title: '页面函数',
|
||
childs: [{
|
||
ok: true,
|
||
url: 'page/func',
|
||
title: '通用函数'
|
||
}, {
|
||
ok: true,
|
||
url: 'page/sysinfo?sid=123&liid=456',
|
||
title: '环境参数'
|
||
}, {
|
||
ok: true,
|
||
url: 'page/lang',
|
||
title: '多语言'
|
||
}, {
|
||
ok: true,
|
||
url: 'page/theme',
|
||
title: '暗黑模式/配色'
|
||
}, {
|
||
ok: true,
|
||
url: 'page/oldfont',
|
||
title: '敬老模式/字号对比'
|
||
}]
|
||
}, {
|
||
title: '它项示例',
|
||
childs: [{
|
||
ok: true,
|
||
url: '!4187|shop_info',
|
||
title: '打开原型图'
|
||
}, {
|
||
ok: true,
|
||
url: 'http://ciyon.ciy.cn/admin/',
|
||
title: '打开H5网页'
|
||
}, {
|
||
ok: true,
|
||
url: 'case/pagefix',
|
||
title: 'fix页面位置计算'
|
||
}, {
|
||
ok: true,
|
||
url: 'case/promise',
|
||
title: 'Promise极简示例'
|
||
}, {
|
||
ok: true,
|
||
url: 'case/proxy',
|
||
title: 'Vue3 Proxy'
|
||
}, {
|
||
ok: true,
|
||
url: 'case/vproject',
|
||
title: '工程化改进'
|
||
}, {
|
||
ok: true,
|
||
url: 'case/dict',
|
||
title: '字典模式'
|
||
}, {
|
||
ok: true,
|
||
url: 'case/comlife',
|
||
title: '组件生命周期'
|
||
}, {
|
||
ok: true,
|
||
url: 'case/pagecal',
|
||
title: 'watch computed示例'
|
||
}]
|
||
}]
|
||
}
|
||
},
|
||
onLoad() {
|
||
var idx = this.getstorage('_demoindex', -1);
|
||
if (idx > -1)
|
||
this.demos[idx].show = true;
|
||
},
|
||
onShow() {
|
||
this.last = this.getstorage('_demolast');
|
||
},
|
||
methods: {
|
||
chgshow(idx) {
|
||
this.demos[idx].show = !this.demos[idx].show;
|
||
if (this.demos[idx].show)
|
||
this.setstorage('_demoindex', idx);
|
||
},
|
||
godemo(itm) {
|
||
this.setstorage('_demolast', itm);
|
||
this.gourl(itm.url);
|
||
// uni.navigateTo({
|
||
// url: itm.url,
|
||
// fail: res => {
|
||
// this.toast(res.errMsg);
|
||
// }
|
||
// });
|
||
}
|
||
}
|
||
}
|
||
</script> |