Commit 4ca43c37 authored by wlxuqu's avatar wlxuqu

完成表单开发

parent a7403ccd
......@@ -5,85 +5,85 @@ export default[
{
"name": "A字裙",
"key": "A字裙",
"icon": "http://img.kiwifruits.cn/classify/1/1.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/1/1.jpg",
"cat": 10
},
{
"name": "T恤",
"key": "T恤",
"icon": "http://img.kiwifruits.cn/classify/1/2.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/1/2.jpg",
"cat": 10
},
{
"name": "半身裙",
"key": "半身裙",
"icon": "http://img.kiwifruits.cn/classify/1/3.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/1/3.jpg",
"cat": 10
},
{
"name": "衬衫",
"key": "衬衫",
"icon": "http://img.kiwifruits.cn/classify/1/4.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/1/4.jpg",
"cat": 10
},
{
"name": "短裙",
"key": "短裙",
"icon": "http://img.kiwifruits.cn/classify/1/5.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/1/5.jpg",
"cat": 10
},
{
"name": "阔腿裤",
"key": "阔腿裤",
"icon": "http://img.kiwifruits.cn/classify/1/6.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/1/6.jpg",
"cat": 10
},
{
"name": "连衣裙",
"key": "连衣裙",
"icon": "http://img.kiwifruits.cn/classify/1/7.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/1/7.jpg",
"cat": 10
},
{
"name": "妈妈装",
"key": "妈妈装",
"icon": "http://img.kiwifruits.cn/classify/1/8.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/1/8.jpg",
"cat": 10
},
{
"name": "牛仔裤",
"key": "牛仔裤",
"icon": "http://img.kiwifruits.cn/classify/1/9.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/1/9.jpg",
"cat": 10
},
{
"name": "情侣装",
"key": "情侣装",
"icon": "http://img.kiwifruits.cn/classify/1/10.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/1/10.jpg",
"cat": 10
},
{
"name": "休闲裤",
"key": "休闲裤",
"icon": "http://img.kiwifruits.cn/classify/1/11.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/1/11.jpg",
"cat": 10
},
{
"name": "雪纺衫",
"key": "雪纺衫",
"icon": "http://img.kiwifruits.cn/classify/1/12.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/1/12.jpg",
"cat": 10
},
{
"name": "防晒衣",
"key": "防晒衣",
"icon": "http://img.kiwifruits.cn/classify/1/13.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/1/13.jpg",
"cat": 10
},
{
"name": "礼服/婚纱",
"key": "礼服婚纱",
"icon": "http://img.kiwifruits.cn/classify/1/14.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/1/14.jpg",
"cat": 10
}
]
......@@ -94,85 +94,85 @@ export default[
{
"name": "火锅",
"key": "火锅",
"icon": "http://img.kiwifruits.cn/classify/2/1.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/2/1.jpg",
"cat": 6
},
{
"name": "糕点饼干",
"key": "糕点饼干",
"icon": "http://img.kiwifruits.cn/classify/2/2.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/2/2.jpg",
"cat": 6
},
{
"name": "坚果果干",
"key": "坚果果干",
"icon": "http://img.kiwifruits.cn/classify/2/3.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/2/3.jpg",
"cat": 6
},
{
"name": "酒类",
"key": "酒类",
"icon": "http://img.kiwifruits.cn/classify/2/4.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/2/4.jpg",
"cat": 6
},
{
"name": "辣条",
"key": "辣条",
"icon": "http://img.kiwifruits.cn/classify/2/5.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/2/5.jpg",
"cat": 6
},
{
"name": "大礼包",
"key": "大礼包",
"icon": "http://img.kiwifruits.cn/classify/2/6.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/2/6.jpg",
"cat": 6
},
{
"name": "精品茗茶",
"key": "",
"icon": "http://img.kiwifruits.cn/classify/2/7.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/2/7.jpg",
"cat": 6
},
{
"name": "休闲食品",
"key": "休闲食品",
"icon": "http://img.kiwifruits.cn/classify/2/8.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/2/8.jpg",
"cat": 6
},
{
"name": "糖果巧克力",
"key": "糖果巧克力",
"icon": "http://img.kiwifruits.cn/classify/2/9.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/2/9.jpg",
"cat": 6
},
{
"name": "方便速食",
"key": "方便速食",
"icon": "http://img.kiwifruits.cn/classify/2/10.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/2/10.jpg",
"cat": 6
},
{
"name": "营养代餐",
"key": "营养代餐",
"icon": "http://img.kiwifruits.cn/classify/2/11.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/2/11.jpg",
"cat": 6
},
{
"name": "粮油副食",
"key": "粮油",
"icon": "http://img.kiwifruits.cn/classify/2/12.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/2/12.jpg",
"cat": 6
},
{
"name": "生鲜水果",
"key": "水果",
"icon": "http://img.kiwifruits.cn/classify/2/13.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/2/13.jpg",
"cat": 6
},
{
"name": "饮品",
"key": "饮品",
"icon": "http://img.kiwifruits.cn/classify/2/14.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/2/14.jpg",
"cat": 6
}
]
......@@ -183,91 +183,91 @@ export default[
{
"name": "化妆刷",
"key": "化妆刷",
"icon": "http://img.kiwifruits.cn/classify/3/1.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/3/1.jpg",
"cat": 3
},
{
"name": "粉底",
"key": "粉底",
"icon": "http://img.kiwifruits.cn/classify/3/2.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/3/2.jpg",
"cat": 3
},
{
"name": "洗发护发",
"key": "洗发护发",
"icon": "http://img.kiwifruits.cn/classify/3/3.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/3/3.jpg",
"cat": 3
},
{
"name": "美容工具",
"key": "美容工具",
"icon": "http://img.kiwifruits.cn/classify/3/4.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/3/4.jpg",
"cat": 3
},
{
"name": "眼部护理",
"key": "眼部护理",
"icon": "http://img.kiwifruits.cn/classify/3/5.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/3/5.jpg",
"cat": 3
},
{
"name": "眉妆",
"key": "眉妆",
"icon": "http://img.kiwifruits.cn/classify/3/6.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/3/6.jpg",
"cat": 3
},
{
"name": "卸妆品",
"key": "卸妆品",
"icon": "http://img.kiwifruits.cn/classify/3/7.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/3/7.jpg",
"cat": 3
},
{
"name": "基础护肤",
"key": "基础护肤",
"icon": "http://img.kiwifruits.cn/classify/3/8.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/3/8.jpg",
"cat": 3
},
{
"name": "眼妆",
"key": "眼妆",
"icon": "http://img.kiwifruits.cn/classify/3/9.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/3/9.jpg",
"cat": 3
},
{
"name": "唇妆",
"key": "唇妆",
"icon": "http://img.kiwifruits.cn/classify/3/10.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/3/10.jpg",
"cat": 3
},
{
"name": "面膜",
"key": "面膜",
"icon": "http://img.kiwifruits.cn/classify/3/11.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/3/11.jpg",
"cat": 3
},
{
"name": "沐浴用品",
"key": "沐浴用品",
"icon": "http://img.kiwifruits.cn/classify/3/12.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/3/12.jpg",
"cat": 3
},
{
"name": "护肤套装",
"key": "护肤套装",
"icon": "http://img.kiwifruits.cn/classify/3/13.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/3/13.jpg",
"cat": 3
},
{
"name": "防晒品",
"key": "防晒品",
"icon": "http://img.kiwifruits.cn/classify/3/14.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/3/14.jpg",
"cat": 3
},
{
"name": "美甲",
"key": "美甲",
"icon": "http://img.kiwifruits.cn/classify/3/15.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/3/15.jpg",
"cat": 3
}
......@@ -279,79 +279,79 @@ export default[
{
"name": "垃圾袋",
"key": "垃圾袋",
"icon": "http://img.kiwifruits.cn/classify/4/1.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/4/1.jpg",
"cat": 4
},
{
"name": "纸巾",
"key": "纸巾",
"icon": "http://img.kiwifruits.cn/classify/4/2.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/4/2.jpg",
"cat": 4
},
{
"name": "驱蚊用品",
"key": "驱蚊用品",
"icon": "http://img.kiwifruits.cn/classify/4/3.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/4/3.jpg",
"cat": 4
},
{
"name": "收纳神器",
"key": "收纳神器",
"icon": "http://img.kiwifruits.cn/classify/4/4.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/4/4.jpg",
"cat": 4
},
{
"name": "厨房用品",
"key": "厨房用品",
"icon": "http://img.kiwifruits.cn/classify/4/5.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/4/5.jpg",
"cat": 4
},
{
"name": "厨房烹饪",
"key": "烹饪",
"icon": "http://img.kiwifruits.cn/classify/4/6.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/4/6.jpg",
"cat": 4
},
{
"name": "衣物晾晒",
"key": "衣物晾晒",
"icon": "http://img.kiwifruits.cn/classify/4/7.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/4/7.jpg",
"cat": 4
},
{
"name": "衣物护理",
"key": "衣物护理",
"icon": "http://img.kiwifruits.cn/classify/4/8.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/4/8.jpg",
"cat": 4
},
{
"name": "宠物用品",
"key": "宠物用品",
"icon": "http://img.kiwifruits.cn/classify/4/9.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/4/9.jpg",
"cat": 4
},
{
"name": "医药保健",
"key": "医药",
"icon": "http://img.kiwifruits.cn/classify/4/10.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/4/10.jpg",
"cat": 4
},
{
"name": "日用百货",
"key": "百货",
"icon": "http://img.kiwifruits.cn/classify/4/11.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/4/11.jpg",
"cat": 4
},
{
"name": "清洁用品",
"key": "清洁",
"icon": "http://img.kiwifruits.cn/classify/4/12.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/4/12.jpg",
"cat": 4
},
{
"name": "绿植园艺",
"key": "绿植",
"icon": "http://img.kiwifruits.cn/classify/4/13.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/4/13.jpg",
"cat": 4
}
]
......@@ -362,67 +362,67 @@ export default[
{
"name": "爸爸装",
"key": "爸爸装",
"icon": "http://img.kiwifruits.cn/classify/5/1.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/5/1.jpg",
"cat": 12
},
{
"name": "牛仔裤",
"key": "牛仔裤",
"icon": "http://img.kiwifruits.cn/classify/5/2.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/5/2.jpg",
"cat": 12
},
{
"name": "衬衫",
"key": "衬衫",
"icon": "http://img.kiwifruits.cn/classify/5/3.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/5/3.jpg",
"cat": 12
},
{
"name": "休闲裤",
"key": "休闲裤",
"icon": "http://img.kiwifruits.cn/classify/5/4.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/5/4.jpg",
"cat": 12
},
{
"name": "外套",
"key": "外套",
"icon": "http://img.kiwifruits.cn/classify/5/5.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/5/5.jpg",
"cat": 12
},
{
"name": "T恤",
"key": "T恤",
"icon": "http://img.kiwifruits.cn/classify/5/6.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/5/6.jpg",
"cat": 12
},
{
"name": "套装",
"key": "套装",
"icon": "http://img.kiwifruits.cn/classify/5/7.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/5/7.jpg",
"cat": 12
},
{
"name": "运动裤",
"key": "运动裤",
"icon": "http://img.kiwifruits.cn/classify/5/8.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/5/8.jpg",
"cat": 12
},
{
"name": "马甲/背心",
"key": "马甲背心",
"icon": "http://img.kiwifruits.cn/classify/5/9.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/5/9.jpg",
"cat": 12
},
{
"name": "POLO衫",
"key": "POLO衫",
"icon": "http://img.kiwifruits.cn/classify/5/10.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/5/10.jpg",
"cat": 12
},
{
"name": "商务装",
"key": "商务装",
"icon": "http://img.kiwifruits.cn/classify/5/11.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/5/11.jpg",
"cat": 12
}
]
......@@ -433,67 +433,67 @@ export default[
{
"name": "单鞋",
"key": "单鞋",
"icon": "http://img.kiwifruits.cn/classify/6/1.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/6/1.jpg",
"cat": 5
},
{
"name": "皮鞋",
"key": "皮鞋",
"icon": "http://img.kiwifruits.cn/classify/6/2.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/6/2.jpg",
"cat": 5
},
{
"name": "帆布鞋",
"key": "帆布鞋",
"icon": "http://img.kiwifruits.cn/classify/6/3.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/6/3.jpg",
"cat": 5
},
{
"name": "北京老布鞋",
"key": "北京老布鞋",
"icon": "http://img.kiwifruits.cn/classify/6/4.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/6/4.jpg",
"cat": 5
},
{
"name": "运动鞋",
"key": "运动鞋",
"icon": "http://img.kiwifruits.cn/classify/6/5.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/6/5.jpg",
"cat": 5
},
{
"name": "拖鞋",
"key": "拖鞋",
"icon": "http://img.kiwifruits.cn/classify/6/6.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/6/6.jpg",
"cat": 5
},
{
"name": "凉鞋",
"key": "凉鞋",
"icon": "http://img.kiwifruits.cn/classify/6/7.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/6/7.jpg",
"cat": 5
},
{
"name": "休闲鞋",
"key": "休闲鞋",
"icon": "http://img.kiwifruits.cn/classify/6/8.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/6/8.jpg",
"cat": 5
},
{
"name": "高跟鞋",
"key": "高跟鞋",
"icon": "http://img.kiwifruits.cn/classify/6/9.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/6/9.jpg",
"cat": 5
},
{
"name": "老人鞋",
"key": "老人鞋",
"icon": "http://img.kiwifruits.cn/classify/6/10.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/6/10.jpg",
"cat": 5
},
{
"name": "懒人鞋",
"key": "懒人鞋",
"icon": "http://img.kiwifruits.cn/classify/6/11.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/6/11.jpg",
"cat": 5
}
]
......@@ -504,85 +504,85 @@ export default[
{
"name": "数据线",
"key": "数据线",
"icon": "http://img.kiwifruits.cn/classify/7/1.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/7/1.jpg",
"cat": 8
},
{
"name": "耳机",
"key": "耳机",
"icon": "http://img.kiwifruits.cn/classify/7/2.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/7/2.jpg",
"cat": 8
},
{
"name": "生活家电",
"key": "家电",
"icon": "http://img.kiwifruits.cn/classify/7/3.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/7/3.jpg",
"cat": 8
},
{
"name": "电风扇",
"key": "电风扇",
"icon": "http://img.kiwifruits.cn/classify/7/4.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/7/4.jpg",
"cat": 8
},
{
"name": "电吹风",
"key": "电吹风",
"icon": "http://img.kiwifruits.cn/classify/7/5.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/7/5.jpg",
"cat": 8
},
{
"name": "手机壳",
"key": "手机壳",
"icon": "http://img.kiwifruits.cn/classify/7/6.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/7/6.jpg",
"cat": 8
},
{
"name": "榨汁机",
"key": "榨汁机",
"icon": "http://img.kiwifruits.cn/classify/7/7.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/7/7.jpg",
"cat": 8
},
{
"name": "小家电",
"key": "小家电",
"icon": "http://img.kiwifruits.cn/classify/7/8.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/7/8.jpg",
"cat": 8
},
{
"name": "数码电子",
"key": "数码",
"icon": "http://img.kiwifruits.cn/classify/7/9.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/7/9.jpg",
"cat": 8
},
{
"name": "电饭锅",
"key": "电饭锅",
"icon": "http://img.kiwifruits.cn/classify/7/10.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/7/10.jpg",
"cat": 8
},
{
"name": "手机支架",
"key": "手机支架",
"icon": "http://img.kiwifruits.cn/classify/7/11.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/7/11.jpg",
"cat": 8
},
{
"name": "剃须刀",
"key": "剃须刀",
"icon": "http://img.kiwifruits.cn/classify/7/12.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/7/12.jpg",
"cat": 8
},
{
"name": "充电宝",
"key": "充电宝",
"icon": "http://img.kiwifruits.cn/classify/7/13.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/7/13.jpg",
"cat": 8
},
{
"name": "手机配件",
"key": "手机配件",
"icon": "http://img.kiwifruits.cn/classify/7/14.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/7/14.jpg",
"cat": 8
}
]
......@@ -593,85 +593,85 @@ export default[
{
"name": "婴童服饰",
"key": "衣服",
"icon": "http://img.kiwifruits.cn/classify/8/1.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/8/1.jpg",
"cat": 2
},
{
"name": "玩具乐器",
"key": "玩具乐器",
"icon": "http://img.kiwifruits.cn/classify/8/2.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/8/2.jpg",
"cat": 2
},
{
"name": "尿不湿",
"key": "尿不湿",
"icon": "http://img.kiwifruits.cn/classify/8/3.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/8/3.jpg",
"cat": 2
},
{
"name": "安抚牙胶",
"key": "安抚牙胶",
"icon": "http://img.kiwifruits.cn/classify/8/4.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/8/4.jpg",
"cat": 2
},
{
"name": "奶瓶奶嘴",
"key": "奶瓶奶嘴",
"icon": "http://img.kiwifruits.cn/classify/8/5.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/8/5.jpg",
"cat": 2
},
{
"name": "孕妈用品",
"key": "孕妈用品",
"icon": "http://img.kiwifruits.cn/classify/8/6.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/8/6.jpg",
"cat": 2
},
{
"name": "宝宝用品",
"key": "宝宝用品",
"icon": "http://img.kiwifruits.cn/classify/8/7.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/8/7.jpg",
"cat": 2
},
{
"name": "婴童湿巾",
"key": "湿巾",
"icon": "http://img.kiwifruits.cn/classify/8/8.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/8/8.jpg",
"cat": 2
},
{
"name": "喂养洗护",
"key": "洗护",
"icon": "http://img.kiwifruits.cn/classify/8/9.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/8/9.jpg",
"cat": 2
},
{
"name": "婴童鞋靴",
"key": "童鞋",
"icon": "http://img.kiwifruits.cn/classify/8/10.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/8/10.jpg",
"cat": 2
},
{
"name": "口水巾",
"key": "口水巾",
"icon": "http://img.kiwifruits.cn/classify/8/11.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/8/11.jpg",
"cat": 2
},
{
"name": "营养辅食",
"key": "营养",
"icon": "http://img.kiwifruits.cn/classify/8/12.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/8/12.jpg",
"cat": 2
},
{
"name": "婴幼书籍",
"key": "书籍",
"icon": "http://img.kiwifruits.cn/classify/8/13.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/8/13.jpg",
"cat": 2
},
{
"name": "婴儿车",
"key": "婴儿车",
"icon": "http://img.kiwifruits.cn/classify/8/14.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/8/14.jpg",
"cat": 2
}
]
......@@ -682,67 +682,67 @@ export default[
{
"name": "单肩包",
"key": "单肩包",
"icon": "http://img.kiwifruits.cn/classify/9/1.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/9/1.jpg",
"cat": 0
},
{
"name": "斜挎包",
"key": "斜挎包",
"icon": "http://img.kiwifruits.cn/classify/9/2.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/9/2.jpg",
"cat": 0
},
{
"name": "女包",
"key": "女包",
"icon": "http://img.kiwifruits.cn/classify/9/3.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/9/3.jpg",
"cat": 0
},
{
"name": "男包",
"key": "男包",
"icon": "http://img.kiwifruits.cn/classify/9/4.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/9/4.jpg",
"cat": 0
},
{
"name": "双肩包",
"key": "双肩包",
"icon": "http://img.kiwifruits.cn/classify/9/5.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/9/5.jpg",
"cat": 0
},
{
"name": "小方包",
"key": "小方包",
"icon": "http://img.kiwifruits.cn/classify/9/6.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/9/6.jpg",
"cat": 0
},
{
"name": "钱包",
"key": "钱包",
"icon": "http://img.kiwifruits.cn/classify/9/7.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/9/7.jpg",
"cat": 0
},
{
"name": "旅行箱包",
"key": "旅行箱包",
"icon": "http://img.kiwifruits.cn/classify/9/8.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/9/8.jpg",
"cat": 0
},
{
"name": "零钱包",
"key": "零钱包",
"icon": "http://img.kiwifruits.cn/classify/9/9.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/9/9.jpg",
"cat": 0
},
{
"name": "手提包",
"key": "手提包",
"icon": "http://img.kiwifruits.cn/classify/9/10.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/9/10.jpg",
"cat": 0
},
{
"name": "胸包",
"key": "胸包",
"icon": "http://img.kiwifruits.cn/classify/9/11.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/9/11.jpg",
"cat": 0
}
]
......@@ -753,67 +753,67 @@ export default[
{
"name": "袜子",
"key": "袜子",
"icon": "http://img.kiwifruits.cn/classify/10/1.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/10/1.jpg",
"cat": 11
},
{
"name": "吊带背心",
"key": "吊带背心",
"icon": "http://img.kiwifruits.cn/classify/10/2.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/10/2.jpg",
"cat": 11
},
{
"name": "抹胸",
"key": "抹胸",
"icon": "http://img.kiwifruits.cn/classify/10/3.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/10/3.jpg",
"cat": 11
},
{
"name": "内裤",
"key": "内裤",
"icon": "http://img.kiwifruits.cn/classify/10/4.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/10/4.jpg",
"cat": 11
},
{
"name": "文胸",
"key": "文胸",
"icon": "http://img.kiwifruits.cn/classify/10/5.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/10/5.jpg",
"cat": 11
},
{
"name": "文胸套装",
"key": "文胸套装",
"icon": "http://img.kiwifruits.cn/classify/10/6.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/10/6.jpg",
"cat": 11
},
{
"name": "打底塑身",
"key": "打底塑身",
"icon": "http://img.kiwifruits.cn/classify/10/7.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/10/7.jpg",
"cat": 11
},
{
"name": "家居服",
"key": "家居服",
"icon": "http://img.kiwifruits.cn/classify/10/8.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/10/8.jpg",
"cat": 11
},
{
"name": "船袜",
"key": "船袜",
"icon": "http://img.kiwifruits.cn/classify/10/9.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/10/9.jpg",
"cat": 11
},
{
"name": "情侣睡衣",
"key": "情侣睡衣",
"icon": "http://img.kiwifruits.cn/classify/10/10.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/10/10.jpg",
"cat": 11
},
{
"name": "丝袜",
"key": "丝袜",
"icon": "http://img.kiwifruits.cn/classify/10/11.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/10/11.jpg",
"cat": 11
}
]
......@@ -824,55 +824,55 @@ export default[
{
"name": "车市车品",
"key": "车市车品",
"icon": "http://img.kiwifruits.cn/classify/11/1.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/11/1.jpg",
"cat": 7
},
{
"name": "办公文具",
"key": "办公文具",
"icon": "http://img.kiwifruits.cn/classify/11/2.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/11/2.jpg",
"cat": 7
},
{
"name": "考试必备",
"key": "考试必备",
"icon": "http://img.kiwifruits.cn/classify/11/3.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/11/3.jpg",
"cat": 7
},
{
"name": "笔记本",
"key": "笔记本",
"icon": "http://img.kiwifruits.cn/classify/11/4.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/11/4.jpg",
"cat": 7
},
{
"name": "艺术礼品",
"key": "礼品",
"icon": "http://img.kiwifruits.cn/classify/11/5.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/11/5.jpg",
"cat": 7
},
{
"name": "书写工具",
"key": "书写工具",
"icon": "http://img.kiwifruits.cn/classify/11/6.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/11/6.jpg",
"cat": 7
},
{
"name": "车载电器",
"key": "车载电器",
"icon": "http://img.kiwifruits.cn/classify/11/7.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/11/7.jpg",
"cat": 7
},
{
"name": "图书音像",
"key": "图书音像",
"icon": "http://img.kiwifruits.cn/classify/11/8.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/11/8.jpg",
"cat": 7
},
{
"name": "画具画材",
"key": "画具画材",
"icon": "http://img.kiwifruits.cn/classify/11/9.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/11/9.jpg",
"cat": 7
}
]
......@@ -883,67 +883,67 @@ export default[
{
"name": "太阳镜",
"key": "太阳镜",
"icon": "http://img.kiwifruits.cn/classify/12/1.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/12/1.jpg",
"cat": 0
},
{
"name": "皮带",
"key": "皮带",
"icon": "http://img.kiwifruits.cn/classify/12/2.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/12/2.jpg",
"cat": 0
},
{
"name": "棒球帽",
"key": "棒球帽",
"icon": "http://img.kiwifruits.cn/classify/12/3.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/12/3.jpg",
"cat": 0
},
{
"name": "手表",
"key": "手表",
"icon": "http://img.kiwifruits.cn/classify/12/4.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/12/4.jpg",
"cat": 0
},
{
"name": "发饰",
"key": "发饰",
"icon": "http://img.kiwifruits.cn/classify/12/5.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/12/5.jpg",
"cat": 0
},
{
"name": "项链",
"key": "项链",
"icon": "http://img.kiwifruits.cn/classify/12/6.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/12/6.jpg",
"cat": 0
},
{
"name": "手饰",
"key": "手饰",
"icon": "http://img.kiwifruits.cn/classify/12/7.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/12/7.jpg",
"cat": 0
},
{
"name": "耳环",
"key": "耳环",
"icon": "http://img.kiwifruits.cn/classify/12/8.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/12/8.jpg",
"cat": 0
},
{
"name": "帽子丝巾",
"key": "帽子丝巾",
"icon": "http://img.kiwifruits.cn/classify/12/9.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/12/9.jpg",
"cat": 0
},
{
"name": "眼镜墨镜",
"key": "眼镜墨镜",
"icon": "http://img.kiwifruits.cn/classify/12/10.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/12/10.jpg",
"cat": 0
},
{
"name": "发带发箍",
"key": "发带发箍",
"icon": "http://img.kiwifruits.cn/classify/12/11.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/12/11.jpg",
"cat": 0
}
]
......@@ -954,73 +954,73 @@ export default[
{
"name": "家居饰品",
"key": "家居饰品",
"icon": "http://img.kiwifruits.cn/classify/13/1.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/13/1.jpg",
"cat": 0
},
{
"name": "凉席",
"key": "凉席",
"icon": "http://img.kiwifruits.cn/classify/13/2.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/13/2.jpg",
"cat": 0
},
{
"name": "背枕靠枕",
"key": "靠枕",
"icon": "http://img.kiwifruits.cn/classify/13/3.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/13/3.jpg",
"cat": 0
},
{
"name": "床上用品",
"key": "床上用品",
"icon": "http://img.kiwifruits.cn/classify/13/4.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/13/4.jpg",
"cat": 0
},
{
"name": "摆件",
"key": "摆件",
"icon": "http://img.kiwifruits.cn/classify/13/5.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/13/5.jpg",
"cat": 0
},
{
"name": "四件套",
"key": "四件套",
"icon": "http://img.kiwifruits.cn/classify/13/6.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/13/6.jpg",
"cat": 0
},
{
"name": "装饰品",
"key": "装饰品",
"icon": "http://img.kiwifruits.cn/classify/13/7.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/13/7.jpg",
"cat": 0
},
{
"name": "卫浴用品",
"key": "卫浴",
"icon": "http://img.kiwifruits.cn/classify/13/8.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/13/8.jpg",
"cat": 0
},
{
"name": "家居家装",
"key": "家具",
"icon": "http://img.kiwifruits.cn/classify/13/9.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/13/9.jpg",
"cat": 0
},
{
"name": "蚊帐",
"key": "蚊帐",
"icon": "http://img.kiwifruits.cn/classify/13/10.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/13/10.jpg",
"cat": 0
},
{
"name": "墙纸贴纸",
"key": "墙纸",
"icon": "http://img.kiwifruits.cn/classify/13/11.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/13/11.jpg",
"cat": 0
},
{
"name": "空调被",
"key": "空调被",
"icon": "http://img.kiwifruits.cn/classify/13/12.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/13/12.jpg",
"cat": 0
}
]
......@@ -1031,55 +1031,55 @@ export default[
{
"name": "游泳装备",
"key": "游泳",
"icon": "http://img.kiwifruits.cn/classify/14/1.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/14/1.jpg",
"cat": 0
},
{
"name": "泳镜",
"key": "泳镜",
"icon": "http://img.kiwifruits.cn/classify/14/2.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/14/2.jpg",
"cat": 0
},
{
"name": "户外装备",
"key": "户外",
"icon": "http://img.kiwifruits.cn/classify/14/3.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/14/3.jpg",
"cat": 0
},
{
"name": "健身服饰",
"key": "健身",
"icon": "http://img.kiwifruits.cn/classify/14/4.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/14/4.jpg",
"cat": 0
},
{
"name": "泳衣",
"key": "泳衣",
"icon": "http://img.kiwifruits.cn/classify/14/5.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/14/5.jpg",
"cat": 0
},
{
"name": "瑜伽垫",
"key": "瑜伽垫",
"icon": "http://img.kiwifruits.cn/classify/14/6.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/14/6.jpg",
"cat": 0
},
{
"name": "瑜伽用品",
"key": "瑜伽",
"icon": "http://img.kiwifruits.cn/classify/14/7.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/14/7.jpg",
"cat": 0
},
{
"name": "健身装备",
"key": "健身",
"icon": "http://img.kiwifruits.cn/classify/14/8.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/14/8.jpg",
"cat": 0
},
{
"name": "球迷用品",
"key": "球迷",
"icon": "http://img.kiwifruits.cn/classify/14/9.jpg",
"icon": "https://cdn.uviewui.com/uview/common/classify/14/9.jpg",
"cat": 0
}
]
......
<template>
<view class="u-demo">
<view class="u-demo-wrap" style="background-color: #FFFFFF;">
<view class="u-demo-title">演示效果</view>
<view class="u-demo-area">
<u-calendar isFixed :minDate="minDate" :maxDate="maxDate" :btnType="btnType" :activeBgColor="activeBgColor"
:rangeBgColor="rangeBgColor" :rangeColor="rangeColor" :startText="startText" :endText="endText" :arrowType="arrowType"
:type="type" ref="calendar" @change="change"></-calendar>
</view>
</view>
<view class="u-config-wrap">
<view class="u-config-title u-border-bottom">
参数配置
</view>
<view class="u-config-item">
<view class="u-item-title">右侧按钮</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="showBtnChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">显示错误信息</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="errorMessageChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">是否必填</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="requiredChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">显示左图标和右箭头</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="customChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">第一个输入框为textarea类型</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="textareaChange"></u-subsection>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
type: 1,
status: [],
arrowType: 1,
minDate: "1920-01-01",
maxDate: "",
btnType: "primary",
activeBgColor: "#5677fc",
rangeBgColor: "rgba(86,119,252,0.1)",
rangeColor: "#5677fc",
startText: "开始",
endText: "结束",
result: ""
}
},
methods: {
showBtnChange(index) {
this.showBtn = index == 0 ? true : false;
},
errorMessageChange(index) {
this.errorMessage = index == 0 ? '手机号有误' : false
},
requiredChange(index) {
this.required = index == 0 ? true : false;
},
customChange(index) {
if(index == 0) {
this.icon1 = 'map';
this.icon2 = 'photo';
this.arrow = true;
} else {
this.icon1 = '';
this.icon2 = '';
this.arrow = false;
}
},
textareaChange(index) {
this.type = index == 0 ? 'textarea' : 'text';
}
}
}
</script>
<style lang="scss" scoped>
.u-demo {
}
</style>
<template>
<view class="wrap">
<u-form :model="model" :rules="rules" ref="uForm">
<u-form-item label="姓名" prop="name">
<u-form-item left-icon="map" label-width="120" :label-position="labelPosition" label="姓名" prop="name">
<u-input :border="border" placeholder="请输入姓名" v-model="model.name" type="text"></u-input>
</u-form-item>
<u-form-item label="性别" prop="sex">
<u-form-item :label-position="labelPosition" label="性别" prop="sex">
<u-input :border="border" type="select" :select-open="actionSheetShow" v-model="model.sex" placeholder="请选择性别" @click="actionSheetShow = true"></u-input>
</u-form-item>
<u-form-item label="简介" prop="intro">
<u-input type="textarea" placeholder="请填写简介" v-model="model.intro" />
<u-form-item :label-position="labelPosition" label="简介" prop="intro">
<u-input type="textarea" :border="border" placeholder="请填写简介" v-model="model.intro" />
</u-form-item>
<u-form-item label="水果品种" label-width="150" prop="likeFruit">
<u-checkbox-group @change="checkboxGroupChange">
<u-form-item :label-position="labelPosition" label="密码" prop="password">
<u-input :border="border" type="text" :password="true" v-model="model.password" placeholder="请输入密码"></u-input>
</u-form-item>
<u-form-item :label-position="labelPosition" label="确认密码" label-width="150" prop="rePassword">
<u-input :border="border" type="text" :password="true" v-model="model.rePassword" placeholder="请确认密码"></u-input>
</u-form-item>
<u-form-item :label-position="labelPosition" label="水果品种" label-width="150" prop="likeFruit">
<u-checkbox-group @change="checkboxGroupChange" :width="radioCheckWidth" :wrap="radioCheckWrap">
<u-checkbox v-model="item.checked" v-for="(item, index) in checkboxList" :key="index" :name="item.name">{{ item.name }}</u-checkbox>
</u-checkbox-group>
</u-form-item>
<u-form-item label="结算方式" prop="payType" label-width="150">
<u-radio-group v-model="radio" @change="radioGroupChange">
<u-form-item :label-position="labelPosition" label="结算方式" prop="payType" label-width="150">
<u-radio-group v-model="radio" @change="radioGroupChange" :width="radioCheckWidth" :wrap="radioCheckWrap">
<u-radio shape="circle" v-model="item.checked" v-for="(item, index) in radioList" :key="index" :name="item.name">{{ item.name }}</u-radio>
</u-radio-group>
</u-form-item>
<u-form-item label="所在地区" prop="region" label-width="150">
<u-form-item :label-position="labelPosition" label="所在地区" prop="region" label-width="150">
<u-input :border="border" type="select" :select-open="pickerShow" v-model="model.region" placeholder="请选择地区" @click="pickerShow = true"></u-input>
</u-form-item>
<u-form-item label="所在地区" prop="goodsType" label-width="150">
<u-form-item :label-position="labelPosition" label="商品类型" prop="goodsType" label-width="150">
<u-input :border="border" type="select" :select-open="selectShow" v-model="model.goodsType" placeholder="请选择商品类型" @click="selectShow = true"></u-input>
</u-form-item>
<u-form-item :label-position="labelPosition" label="手机号码" prop="phone" label-width="150">
<u-input :border="border" placeholder="请输入手机号" v-model="model.phone" type="number"></u-input>
</u-form-item>
<u-form-item :label-position="labelPosition" label="验证码" prop="code" label-width="150">
<u-input :border="border" placeholder="请输入验证码" v-model="model.code" type="text"></u-input>
<u-button slot="right" type="success" size="mini" @click="getCode">{{codeTips}}</u-button>
</u-form-item>
</u-form>
<view class="agreement">
<u-checkbox v-model="check" @change="checkboxChange"></u-checkbox>
......@@ -37,6 +50,36 @@
<u-action-sheet :list="actionSheetList" v-model="actionSheetShow" @click="actionSheetCallback"></u-action-sheet>
<u-select mode="single-column" :list="selectList" v-model="selectShow" @confirm="selectConfirm"></u-select>
<u-picker mode="region" v-model="pickerShow" @confirm="regionConfirm"></u-picker>
<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
<view class="u-config-wrap">
<view class="u-config-title u-border-bottom">
参数配置
</view>
<view class="u-config-item">
<view class="u-item-title">label对齐方式</view>
<u-subsection vibrateShort :list="['左边', '上方']" @change="labelPositionChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">边框</view>
<u-subsection vibrateShort current="1" :list="['显示', '隐藏']" @change="borderChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">radio、checkbox样式</view>
<u-subsection vibrateShort :list="['自适应', '换行', '50%宽度']" @change="radioCheckboxChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">打乱顺序</view>
<u-subsection vibrateShort :current="1" :list="['是', '否']" @change="randomChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">上方工具条</view>
<u-subsection vibrateShort :list="['显示', '隐藏']" @change="tooltipChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">是否显示遮罩</view>
<u-subsection vibrateShort :list="['显示', '隐藏']" @change="maskChange"></u-subsection>
</view>
</view>
</view>
</template>
......@@ -54,6 +97,10 @@ export default {
agreement: false,
region: '',
goodsType: '',
phone: '',
code: '',
password: '',
rePassword: '',
},
selectList: [
......@@ -86,9 +133,8 @@ export default {
{
validator: (rule, value, callback) => {
// 调用uView自带的js验证规则,详见:https://www.uviewui.com/js/test.html
//return that.$u.test.chinese(value);
return this.$u.test.chinese(value);
},
validator1: 33,
message: '姓名必须为中文',
// 触发器可以同时用blur和change,二者之间用英文逗号隔开
trigger: 'change,blur',
......@@ -113,7 +159,7 @@ export default {
},
// 正则校验示例,此处用正则校验是否中文,此处仅为示例,因为uView有this.$u.test.chinese可以判断是否中文
{
pattern: "/^[\u4e00-\u9fa5]+$/gi",
pattern: /^[\u4e00-\u9fa5]+$/gi,
message: '简介只能为中文',
trigger: 'change',
},
......@@ -147,6 +193,61 @@ export default {
trigger: 'change',
}
],
phone: [
{
required: true,
message: '请输入手机号',
trigger: 'change,blur',
},
{
validator: (rule, value, callback) => {
// 调用uView自带的js验证规则,详见:https://www.uviewui.com/js/test.html
return this.$u.test.mobile(value);
},
message: '手机号码不正确',
// 触发器可以同时用blur和change,二者之间用英文逗号隔开
trigger: 'change,blur',
}
],
code: [
{
required: true,
message: '请输入验证码',
trigger: 'change,blur',
},
{
type: 'number',
message: '验证码只能为数字',
trigger: 'change,blur',
}
],
password: [
{
required: true,
message: '请输入密码',
trigger: 'change,blur',
},
{
// 正则不能含有两边的引号
pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]+\S{6,12}$/,
message: '需同时含有字母和数字,长度在6-12之间',
trigger: 'change,blur',
}
],
rePassword: [
{
required: true,
message: '请重新输入密码',
trigger: 'change,blur',
},
{
validator: (rule, value, callback) => {
return value === this.model.password;
},
message: '两次输入的密码不相等',
trigger: 'change,blur',
}
],
},
border: false,
check: false,
......@@ -210,17 +311,19 @@ export default {
actionSheetShow: false,
pickerShow: false,
selectShow: false,
radioCheckWidth: 'auto',
radioCheckWrap: false,
labelPosition: 'left',
codeTips: '',
};
},
computed: {
current() {
return this.show ? 0 : 1;
}
},
onLoad() {
},
onReady() {
this.$refs.uForm.setRules(this.rules);
},
methods: {
submit() {
......@@ -259,7 +362,46 @@ export default {
e.map((val, index) => {
this.model.goodsType += this.model.goodsType == '' ? val.label : '-' + val.label;
})
},
borderChange(index) {
this.border = !index;
},
radioCheckboxChange(index) {
if(index == 0) {
this.radioCheckWrap = false;
this.radioCheckWidth = 'auto';
} else if(index == 1) {
this.radioCheckWrap = true;
this.radioCheckWidth = 'auto';
} else if(index == 2) {
this.radioCheckWrap = false;
this.radioCheckWidth = '50%';
}
},
labelPositionChange(index) {
this.labelPosition = index == 0 ? 'left' : 'right';
},
codeChange(text) {
this.codeTips = text;
},
// 获取验证码
getCode() {
if(this.$refs.uCode.canGetCode) {
// 模拟向后端请求验证码
uni.showLoading({
title: '正在获取验证码'
})
setTimeout(() => {
uni.hideLoading();
// 这里此提示会被this.start()方法中的提示覆盖
this.$u.toast('验证码已发送');
// 通知验证码组件内部开始倒计时
this.$refs.uCode.start();
}, 2000);
} else {
this.$u.toast('倒计时结束后再发送');
}
},
}
};
</script>
......
......@@ -177,7 +177,6 @@ export default {
let type = ['single-column', 'mutil-column', 'mutil-column-auto'];
this.mode = type[index];
this.list = index == 0 ? this.list1 : index == 1 ? this.list2 : this.list3;
console.log(this.list);
this.show = true;
},
confirm(e) {
......
......@@ -102,7 +102,7 @@
})
},
change(value) {
// console.log(value, this.checked);
// console.log(value);
}
}
}
......
<template>
<u-popup :maskCloseAble="maskCloseAble" mode="bottom" :popup="false" v-model="value" length="auto"
:safeAreaInsetBottom="safeAreaInsetBottom" @close="close" :z-index="uZIndex">
<view class="u-calendar-header" :class="{'u-calendar-radius':radius}" @touchmove.stop.prevent="stop" v-if="isFixed">
<view>日期选择</view>
<view class="u-iconfont u-font-close" hover-class="u-opacity" :hover-stay-time="150" @tap="hide"></view>
</view>
<view class="u-date-box">
<view class="u-iconfont u-font-arrowleft" :style="{color:yearArrowColor}" hover-class="u-opacity"
:hover-stay-time="150" v-if="arrowType == 1" @tap="changeYear(0)"></view>
<view class="u-iconfont u-font-arrowleft" :style="{color:monthArrowColor}" hover-class="u-opacity"
:hover-stay-time="150" @tap="changeMonth(0)"></view>
<view class="u-date_time">{{ showTitle }}</view>
<view class="u-iconfont u-font-arrowright" :style="{color:monthArrowColor}" hover-class="u-opacity"
:hover-stay-time="150" @tap="changeMonth(1)"></view>
<view class="u-iconfont u-font-arrowright" :style="{color:yearArrowColor}" hover-class="u-opacity"
:hover-stay-time="150" v-if="arrowType == 1" @tap="changeYear(1)"></view>
</view>
<view class="u-date-header">
<view class="u-date"></view>
<view class="u-date"></view>
<view class="u-date"></view>
<view class="u-date"></view>
<view class="u-date"></view>
<view class="u-date"></view>
<view class="u-date"></view>
</view>
<view class="u-date-content">
<block v-for="(item, index) in weekdayArr" :key="index">
<view class="u-date"></view>
</block>
<view class="u-date" :class="{'u-opacity':openDisAbled(year,month,index+1),'u-start-date':(type==2 && startDate==`${year}-${month}-${index+1}`) ||type==1,'u-end-date':(type==2 && endDate==`${year}-${month}-${index+1}`) || type==1}"
:style="{backgroundColor:isFixed? getColor(index,1):'transparent'}" v-for="(item, index) in daysArr" :key="index"
@tap="dateClick(index)">
<view class="u-date-text" :style="{color:isFixed? getColor(index,2):getStatusData(3,index),backgroundColor: getStatusData(2,index)}">
<view v-if="isFixed || !getStatusData(4,index)">{{ index + 1 }}</view>
<view class="u-custom-desc">{{getStatusData(1,index)}}</view>
<text class="u-iconfont u-font-check" v-if="getStatusData(4,index)"></text>
</view>
<view class="u-date-desc" :style="{color:activeColor}" v-if="type==2 && startDate==`${year}-${month}-${index+1}` && startDate!=endDate">{{startText}}</view>
<view class="u-date-desc" :style="{color:activeColor}" v-if="type==2 && endDate==`${year}-${month}-${index+1}`">{{endText}}</view>
</view>
<view class="u-bg-month">{{month}}</view>
</view>
<view class="u-calendar-op" v-if="isFixed" @touchmove.stop.prevent="stop">
<view class="u-calendar-result">
<text>{{type==1?activeDate:startDate}}</text>
<text v-if="endDate">{{endDate}}</text>
</view>
<view class="u-calendar-btn_box">
<u-button :type="btnType" height="72rpx" shape="circle" :size="28" @click="btnFix(false)">确定</u-button>
</view>
</view>
</view>
</u-popup>
</template>
<script>
export default {
name: 'u-calendar',
props: {
safeAreaInsetBottom: {
type: Boolean,
default: false
},
// 是否允许通过点击遮罩关闭Picker
maskCloseAble: {
type: Boolean,
default: true
},
// 通过双向绑定控制组件的弹出与收起
value: {
type: Boolean,
default: false
},
// 弹出的z-index值
zIndex: {
type: [String, Number],
default: 0
},
//1-切换月份和年份 2-切换月份
arrowType: {
type: [Number, String],
default: 1
},
//1-单个日期选择 2-开始日期+结束日期选择
type: {
type: Number,
default: 1
},
//可切换最大年份
maxYear: {
type: Number,
default: 2030
},
//可切换最小年份
minYear: {
type: Number,
default: 1920
},
//最小可选日期(不在范围内日期禁用不可选)
minDate: {
type: String,
default: '1920-01-01'
},
/**
* 最大可选日期
* 默认最大值为今天,之后的日期不可选
* 2030-12-31
* */
maxDate: {
type: String,
default: ''
},
//显示圆角
radius: {
type: Boolean,
default: true
},
//状态 数据顺序与当月天数一致,index=>day
/**
* [{
* text:"", 描述:2字以内
* value:"",状态值
* bgColor:"",背景色
* color:"" 文字颜色,
* check:false //是否显示对勾
*
}]
*
* **/
status: {
type: Array,
default () {
return [];
}
},
//月份切换箭头颜色
monthArrowColor: {
type: String,
default: '#999'
},
//年份切换箭头颜色
yearArrowColor: {
type: String,
default: '#bcbcbc'
},
//默认日期字体颜色
color: {
type: String,
default: '#333'
},
//选中|起始结束日期背景色
activeBgColor: {
type: String,
default: '#5677fc'
},
//选中|起始结束日期字体颜色
activeColor: {
type: String,
default: '#fff'
},
//范围内日期背景色
rangeBgColor: {
type: String,
default: 'rgba(86,119,252,0.1)'
},
//范围内日期字体颜色
rangeColor: {
type: String,
default: '#5677fc'
},
//type=2时生效,起始日期自定义文案
startText: {
type: String,
default: '开始'
},
//type=2时生效,结束日期自定义文案
endText: {
type: String,
default: '结束'
},
//按钮样式类型
btnType: {
type: String,
default: 'primary'
},
isFixed: {
type: Boolean,
default: false
},
//当前选中日期带选中效果
isActiveCurrent: {
type: Boolean,
default: true
},
//切换年月是否触发事件 type=1时生效
isChange: {
type: Boolean,
default: false
}
},
data() {
return {
isShow: false,
weekday: 1, // 星期几,值为1-7
weekdayArr:[],
days: 0, //当前月有多少天
daysArr:[],
showTitle: '',
year: 2020,
month: 0,
day: 0,
startYear: 0,
startMonth: 0,
startDay: 0,
endYear: 0,
endMonth: 0,
endDay: 0,
today: '',
activeDate: '',
startDate: '',
endDate: '',
isStart: true,
min: null,
max: null
};
},
computed: {
dataChange() {
return `${this.type}-${this.minDate}-${this.maxDate}`;
}
},
watch: {
dataChange(val) {
this.init()
}
},
created() {
this.init()
},
methods: {
getColor(index, type) {
let color = type == 1 ? '' : this.color;
let day = index + 1
let date = `${this.year}-${this.month}-${day}`
let timestamp = new Date(date.replace(/\-/g, '/')).getTime();
let start = this.startDate.replace(/\-/g, '/')
let end = this.endDate.replace(/\-/g, '/')
if ((this.isActiveCurrent && this.activeDate == date) || this.startDate == date || this.endDate == date) {
color = type == 1 ? this.activeBgColor : this.activeColor;
} else if (this.endDate && timestamp > new Date(start).getTime() && timestamp < new Date(end).getTime()) {
color = type == 1 ? this.rangeBgColor : this.rangeColor;
}
return color;
},
//获取状态数据
getStatusData(type, index) {
//1-描述text,2-bgColor背景色,3-color文字颜色 4-check 是否显示对勾
let val = ["", "transparent", "#333", ""][type - 1];
if (!this.isFixed && this.status && this.status.length > 0) {
let item = this.status[index]
if (item) {
switch (type) {
case 1:
val = item.text;
break;
case 2:
val = item.bgColor;
break;
case 3:
val = item.color;
break;
case 4:
val = item.check;
break;
default:
break;
}
}
}
return val;
},
init() {
let now = new Date();
this.year = now.getFullYear();
this.month = now.getMonth() + 1;
this.day = now.getDate();
this.today = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`;
this.activeDate = this.today;
this.min = this.initDate(this.minDate);
this.max = this.initDate(this.maxDate || this.today);
this.startDate = "";
this.startYear = 0;
this.startMonth = 0;
this.startDay = 0;
this.endYear = 0;
this.endMonth = 0;
this.endDay = 0;
this.endDate = "";
this.isStart = true;
this.changeData();
},
//日期处理
initDate(date) {
let fdate = date.split('-');
return {
year: Number(fdate[0] || 1920),
month: Number(fdate[1] || 1),
day: Number(fdate[2] || 1)
}
},
openDisAbled: function(year, month, day) {
let bool = true;
let date = `${year}/${month}/${day}`;
// let today = this.today.replace(/\-/g, '/');
let min = `${this.min.year}/${this.min.month}/${this.min.day}`;
let max = `${this.max.year}/${this.max.month}/${this.max.day}`;
let timestamp = new Date(date).getTime();
if (timestamp >= new Date(min).getTime() && timestamp <= new Date(max).getTime()) {
bool = false;
}
return bool;
},
generateArray: function(start, end) {
return Array.from(new Array(end + 1).keys()).slice(start);
},
formatNum: function(num) {
return num < 10 ? '0' + num : num + '';
},
stop() {
return !this.isFixed
},
//一个月有多少天
getMonthDay(year, month) {
let days = new Date(year, month, 0).getDate();
return days;
},
getWeekday(year, month) {
let date = new Date(`${year}/${month}/01 00:00:00`);
return date.getDay();
},
checkRange(year) {
let overstep = false;
if (year < this.minYear || year > this.maxYear) {
uni.showToast({
title: "日期超出范围啦~",
icon: 'none'
})
overstep = true;
}
return overstep;
},
changeMonth(isAdd) {
if (isAdd) {
let month = this.month + 1;
let year = month > 12 ? this.year + 1 : this.year;
if (!this.checkRange(year)) {
this.month = month > 12 ? 1 : month;
this.year = year;
this.changeData();
}
} else {
let month = this.month - 1;
let year = month < 1 ? this.year - 1 : this.year;
if (!this.checkRange(year)) {
this.month = month < 1 ? 12 : month;
this.year = year;
this.changeData();
}
}
},
changeYear(isAdd) {
let year = isAdd ? this.year + 1 : this.year - 1;
if (!this.checkRange(year)) {
this.year = year;
this.changeData();
}
},
changeData() {
this.days = this.getMonthDay(this.year, this.month);
this.daysArr=this.generateArray(1,this.days)
this.weekday = this.getWeekday(this.year, this.month);
this.weekdayArr=this.generateArray(1,this.weekday)
this.showTitle = `${this.year}${this.month}月`;
if (this.isChange && this.type == 1) {
this.btnFix(true);
}
},
dateClick: function(day) {
day += 1;
if (!this.openDisAbled(this.year, this.month, day)) {
this.day = day;
let date = `${this.year}-${this.month}-${day}`;
if (this.type == 1) {
this.activeDate = date;
} else {
let compare = new Date(date.replace(/\-/g, '/')).getTime() < new Date(this.startDate.replace(/\-/g, '/')).getTime()
if (this.isStart || compare) {
this.startDate = date;
this.startYear = this.year;
this.startMonth = this.month;
this.startDay = this.day;
this.endYear = 0;
this.endMonth = 0;
this.endDay = 0;
this.endDate = "";
this.activeDate = "";
this.isStart = false;
} else {
this.endDate = date;
this.endYear = this.year;
this.endMonth = this.month;
this.endDay = this.day;
this.isStart = true;
}
}
if (!this.isFixed) {
this.btnFix();
}
}
},
show() {
this.isShow = true;
},
hide() {
this.isShow = false;
},
getWeekText(date) {
date = new Date(`${date.replace(/\-/g, '/')} 00:00:00`);
let week = date.getDay();
return '星期' + ['', '', '', '', '', '', ''][week];
},
btnFix(show) {
if (!show) {
this.hide();
}
if (this.type == 1) {
let arr = this.activeDate.split('-')
let year = this.isChange ? this.year : Number(arr[0]);
let month = this.isChange ? this.month : Number(arr[1]);
let day = this.isChange ? this.day : Number(arr[2]);
//当前月有多少天
let days = this.getMonthDay(year, month);
let result = `${year}-${this.formatNum(month)}-${this.formatNum(day)}`;
let weekText = this.getWeekText(result);
let isToday = false;
if (`${year}-${month}-${day}` == this.today) {
//今天
isToday = true;
}
this.$emit('change', {
year: year,
month: month,
day: day,
days: days,
result: result,
week: weekText,
isToday: isToday,
switch: show //是否是切换年月操作
});
} else {
if (!this.startDate || !this.endDate) return;
let startMonth = this.formatNum(this.startMonth);
let startDay = this.formatNum(this.startDay);
let startDate = `${this.startYear}-${startMonth}-${startDay}`;
let startWeek = this.getWeekText(startDate)
let endMonth = this.formatNum(this.endMonth);
let endDay = this.formatNum(this.endDay);
let endDate = `${this.endYear}-${endMonth}-${endDay}`;
let endWeek = this.getWeekText(endDate);
this.$emit('change', {
startYear: this.startYear,
startMonth: this.startMonth,
startDay: this.startDay,
startDate: startDate,
startWeek: startWeek,
endYear: this.endYear,
endMonth: this.endMonth,
endDay: this.endDay,
endDate: endDate,
endWeek: endWeek
});
}
}
}
};
</script>
<style scoped>
@font-face {
font-family: 'tuiDateFont';
src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAVgAA0AAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAFRAAAABoAAAAci0/w50dERUYAAAUkAAAAHgAAAB4AKQANT1MvMgAAAaAAAABDAAAAVjxuSNNjbWFwAAAB+AAAAEoAAAFS5iPQt2dhc3AAAAUcAAAACAAAAAj//wADZ2x5ZgAAAlQAAAFHAAABvPf29TBoZWFkAAABMAAAADAAAAA2GMsN3WhoZWEAAAFgAAAAHQAAACQHjAOFaG10eAAAAeQAAAATAAAAFgzQAPJsb2NhAAACRAAAABAAAAAQAOoBSG1heHAAAAGAAAAAHgAAACABEwA3bmFtZQAAA5wAAAFJAAACiCnmEVVwb3N0AAAE6AAAADQAAABLUwjqHHjaY2BkYGAAYp5Gj5/x/DZfGbhZGEDg1tUn7+F00P/LzOuY9YFcDgYmkCgAa0gNlHjaY2BkYGBu+N/AEMPCAALM6xgYGVABCwBT4AMaAAAAeNpjYGRgYGBn0GZgYgABEMkFhAwM/8F8BgANaAFLAAB42mNgZGFgnMDAysDA1Ml0hoGBoR9CM75mMGLkAIoysDIzYAUBaa4pDA7PGJ49ZG7438AQw9zA0AAUZgTJAQDrcAy8AHjaY2GAABYIDgLCBQx1AAcEAc8AeNpjYGBgZoBgGQZGBhDwAfIYwXwWBgMgzQGETAwMzxifcTx7+P8/kMUAYUkxS/6VVIXqAgNGNgY4lxGoB6QPBTAyDHsAADDkDYkAAAAAAAAAAAAAADQAagC2AN542m2QsU7DMBCG/Tt1bNPUiUnkSgiVtqKpxJAgVLVbeAa6MaK+B4JXgJWBjY21UtW5gpkdMTFX7dzApaJLhXU6n8+n//ttxtn458N79XJWZ8eMxS00C4wy9A1EP8PQncAlIQzS4WgsVtPpSmwzV3OFRqLetH5TSQMK939X61ptPZ2p2EAttNMLBRMrtschQblDeS34aY50cIkCzg/B2Y5C+VpyQxhFkRgu515O8jvU5mmPM2O0wJ5Z27vhX+yMsV437WvCdTM+GI40MgwKfuGammC0uURqeqFMfe9cxaJclkt5GMaB1hIR1VobOgpEiKq+sLZcIrJWhO3/Jw7qWlYj1Jf21FaCtmd5bevrlk28O/7A4spXTl4KTh9MTlqQ8PESBRstReic+sRj0Dni9fIqmNS/pXNWCvWOeYBmx5S9Bsn9Ah+5WtAAeNp9kD1OAzEQhZ/zByQSQiCoXVEA2vyUKRMp9Ailo0g23pBo1155nUg5AS0VB6DlGByAGyDRcgpelkmTImvt6PObmeexAZzjGwr/3yXuhBWO8ShcwREy4Sr1F+Ea+V24jhY+hRvUf4SbuFUD4RYu1BsdVO2Eu5vSbcsKZxgIV3CKJ+Eq9ZVwjfwqXMcVPoQb1L+EmxjjV7iFa2WpDOFhMEFgnEFjig3jAjEcLJIyBtahOfRmEsxMTzd6ETubOBso71dilwMeaDnngCntPbdmvkon/mDLgdSYbh4FS7YpjS4idCgbXyyc1d2oc7D9nu22tNi/a4E1x+xRDWzU/D3bM9JIbAyvkJI18jK3pBJTj2hrrPG7ZynW814IiU68y/SIx5o0dTr3bmniwOLn8owcfbS5kj33qBw+Y1kIeb/dTsQgil2GP5PYcRkAAAB42mNgYoAALjDJyIAO2MGiTIxMjMyMLIys7GmJeRmlmWZQ2pQ5OSORLaU0Mz2/FACDfwlbAAAAAf//AAIAAQAAAAwAAAAWAAAAAgABAAMABgABAAQAAAACAAAAAHjaY2BgYGQAgqtL1DlA9K2rT97DaABNlwiuAAA=) format('woff');
font-weight: normal;
font-style: normal;
}
.u-iconfont {
font-family: "tuiDateFont" !important;
font-size: 36rpx;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.u-font-close:before {
content: "\e608";
}
.u-font-check:before {
content: "\e6e1";
}
.u-font-arrowright:before {
content: "\e600";
}
.u-font-arrowleft:before {
content: "\e601";
}
.u-date-box {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 20rpx 0 30rpx;
background-color: #fff;
}
.u-calendar-radius {
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
overflow: hidden;
}
.u-date_time {
padding: 0 16rpx;
color: #333;
font-size: 32rpx;
line-height: 32rpx;
font-weight: bold;
}
.u-font-arrowleft {
margin-right: 32rpx;
}
.u-font-arrowright {
margin-left: 32rpx;
}
.u-date-header {
width: 100%;
display: flex;
align-items: center;
background-color: #fff;
font-size: 24rpx;
line-height: 24rpx;
color: #555;
box-shadow: 0 15rpx 20rpx -15rpx #efefef;
position: relative;
z-index: 2;
}
.u-date-content {
width: 100%;
display: flex;
flex-wrap: wrap;
padding: 12rpx 0;
box-sizing: border-box;
background-color: #fff;
position: relative;
}
.u-bg-month {
position: absolute;
font-size: 260rpx;
line-height: 260rpx;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: #F5F5F7;
z-index: 1;
}
.u-date {
width: 14.2857%;
display: flex;
align-items: center;
justify-content: center;
padding: 12rpx 0;
overflow: hidden;
position: relative;
z-index: 2;
}
.u-start-date {
border-top-left-radius: 8rpx;
border-bottom-left-radius: 8rpx;
}
.u-end-date {
border-top-right-radius: 8rpx;
border-bottom-right-radius: 8rpx;
}
.u-date-text {
width: 80rpx;
height: 80rpx;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-size: 32rpx;
position: relative;
border-radius: 50%;
}
.u-btn-calendar {
padding: 16rpx;
box-sizing: border-box;
text-align: center;
text-decoration: none;
}
.u-opacity {
opacity: 0.5;
}
.u-bottom-popup {
width: 100%;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
visibility: hidden;
transform: translate3d(0, 100%, 0);
transform-origin: center;
transition: all 0.3s ease-in-out;
min-height: 20rpx;
}
.u-popup-show {
transform: translate3d(0, 0, 0);
visibility: visible;
}
.u-popup-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 9996;
transition: all 0.3s ease-in-out;
opacity: 0;
visibility: hidden;
}
.u-mask-show {
opacity: 1;
visibility: visible;
}
.u-calendar-header {
width: 100%;
height: 80rpx;
padding: 0 40rpx;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
font-size: 30rpx;
background-color: #fff;
color: #555;
position: relative;
}
.u-font-close {
position: absolute;
right: 30rpx;
top: 50%;
transform: translateY(-50%);
color: #999;
}
.u-btn-calendar {
padding: 16rpx;
box-sizing: border-box;
text-align: center;
text-decoration: none;
}
.u-font-check {
color: #fff;
font-size: 54rpx;
line-height: 54rpx;
}
.u-custom-desc {
width: 100%;
font-size: 24rpx;
line-height: 24rpx;
transform: scale(0.75);
transform-origin: center center;
position: absolute;
left: 0;
text-align: center;
bottom: 2rpx;
}
.u-date-desc {
width: 100%;
font-size: 24rpx;
line-height: 24rpx;
position: absolute;
left: 0;
transform: scale(0.8);
transform-origin: center center;
text-align: center;
bottom: 8rpx;
z-index: 2;
}
.u-calendar-op {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background-color: #fff;
padding: 0 42rpx 30rpx;
box-sizing: border-box;
font-size: 24rpx;
color: #666;
}
.u-calendar-result {
height: 48rpx;
}
.u-calendar-btn_box {
width: 100%;
}
</style>
\ No newline at end of file
......@@ -171,7 +171,16 @@ export default {
default: 34
}
},
inject: ['uCellGroup'],
inject: {
uCellGroup: {
// 添加默认值,是为了能让u-cell-item组件无需u-cell-group组件嵌套亦可单独使用
default() {
return {
index: 0
}
}
}
},
data() {
return {
itemIndex: 0
......
<template>
<view class="u-form-item" :class="{'u-border-bottom': borderBottom}">
<view class="u-flex u-list-item__body">
<view class="u-form-item" :class="{'u-border-bottom': borderBottom, 'u-form-item__border-bottom--error': validateState === 'error' && showError('border-bottom')}">
<view class="u-form-item__body" :style="{
flexDirection: labelPosition == 'left' ? 'row' : 'column'
}">
<view class="u-form-item--left" :style="{
width: labelWidth + 'rpx',
flex: `0 0 ${labelWidth}rpx`
width: labelPosition == 'left' ? labelWidth + 'rpx' : '100%',
flex: `0 0 ${labelPosition == 'left' ? labelWidth + 'rpx' : '100%'}`,
marginBottom: labelPosition == 'left' ? 0 : '10rpx'
}">
<!-- 为了块对齐 -->
<view class="u-form-item--left__content">
<!-- nvue不支持伪元素before -->
<text v-if="isRequired" class="u-form-item--left__content--required">*</text>
<u-icon v-if="leftIcon" :name="leftIcon"></u-icon>
<view class="u-form-item--left__content__label">
<view class="u-form-item--left__content__icon" v-if="leftIcon">
<u-icon :name="leftIcon"></u-icon>
</view>
<view class="u-form-item--left__content__label" :style="[labelStyle]">
{{label}}
</view>
</view>
</view>
<view class="u-form-item--right">
<view class="u-form-item--right__content">
<view class="u-form-item--right__content__slot">
<slot />
</view>
<u-icon v-if="rightIcon" :name="rightIcon"></u-icon>
<slot name="right" />
</view>
</view>
</view>
<view class="u-form-item__message" v-if="validateState==='error' && errorType == 'message'" :style="{
paddingLeft: labelWidth + 'rpx',
<view class="u-form-item__message" v-if="validateState === 'error' && showError('message')" :style="{
paddingLeft: labelPosition == 'left' ? `${labelWidth}rpx` : '0',
}">{{validateMessage}}</view>
</view>
</template>
......@@ -64,6 +71,13 @@ export default {
type: [String, Number],
default: 90
},
// lable的样式,对象形式
labelStyle: {
type: Object,
default() {
return {}
}
},
// 右侧图标
rightIcon: {
type: String,
......@@ -74,10 +88,13 @@ export default {
type: String,
default: ''
},
// 错误信息的提示方式,message-输入框下方提示,toast-toast提示,none-无提示
// 有错误时的提示方式,message-提示信息,border-下边框呈现红色,
// all-所有提示方式同时起效,toast-只对提交表单时有效,none-无提示
errorType: {
type: String,
default: 'message'
type: Array,
default() {
return ['message', 'border', 'border-bottom']
}
}
},
data() {
......@@ -88,11 +105,29 @@ export default {
validateMessage: '' // 校验失败的提示语
};
},
watch: {
validateState(val) {
// 箱子组件发出事件,第三个参数为true或者false,true代表有错误
if(this.showError('border')) {
this.broadcast('u-input', 'on-form-item-error', val === 'error');
}
}
},
computed: {
fieldValue() {
return this.uForm.model[this.prop];
},
showError() {
return type => {
// 如果errorType数组中含有none,就不提示错误信息
if(this.errorType.indexOf('none') >= 0) return false;
else if(this.errorType.indexOf(type) >= 0) return true;
else return false;
}
},
},
methods: {
// 判断是否需要required校验
setRules() {
......@@ -139,14 +174,13 @@ export default {
// 历遍判断规则是否有对应的事件,比如blur,change触发等的事件
// return rules.filter(res => res.trigger == triggerType);
// 使用indexOf判断,是因为某些时候设置的验证规则的trigger属性可能为多个,比如"blur,change"
return rules.filter(res => res=>!res.trigger || res.trigger.indexOf(triggerType) !== -1);
return rules.filter(res => !res.trigger || res.trigger.indexOf(triggerType) !== -1);
},
// 校验数据
validation(trigger, callback = () => {}) {
// blur和change是否有当前方式的校验规则
let rules = this.getFilteredRule(trigger);
console.log(rules);
// 判断是否有验证规则
if (!rules || rules.length === 0) return;
// 设置当前的装填,标识为校验中
......@@ -195,9 +229,17 @@ export default {
font-size: 28rpx;
color: $u-main-color;
box-sizing: border-box;
line-height: $u-form-item-height;
// line-height: $u-form-item-height;
flex-direction: column;
&__border-bottom--error:after {
border-color: $u-type-error;
}
&__body {
display: flex;
}
&--left {
display: flex;
align-items: center;
......@@ -208,6 +250,10 @@ export default {
align-items: center;
padding-right: 10rpx;
&__icon {
margin-right: 4rpx;
}
&--required {
position: absolute;
left: -16rpx;
......@@ -225,6 +271,15 @@ export default {
&--right {
flex: 1;
&__content {
display: flex;
align-items: center;
&__slot {
flex: 1;
}
}
}
&__message {
......
......@@ -14,12 +14,12 @@ export default {
}
},
// 验证规则
rules: {
type: Object,
default() {
return {};
}
}
// rules: {
// type: [Object, Function, Array],
// default() {
// return {};
// }
// }
},
provide() {
return {
......@@ -28,11 +28,10 @@ export default {
},
data() {
return {
rules: {}
};
},
created() {
console.log(this.rules);
// 存储当前form下的所有u-form-item的实例
// 不能定义在data中,否则微信小程序会造成循环引用而报错
this.fields = [];
......@@ -53,11 +52,14 @@ export default {
});
},
methods: {
setRules(rules) {
this.rules = rules;
},
// 清空所有u-form-item组件的内容,本质上是调用了u-form-item组件中的resetField()方法
resetFields() {
this.fields.map(field => {
field.resetField();
})
});
},
// 校验全部数据
validate(callback) {
......@@ -69,16 +71,16 @@ export default {
// 调用每一个u-form-item实例的validation的校验方法
field.validation('', error => {
// 如果任意一个u-form-item校验不通过,就意味着整个表单不通过
if(error) valid = false;
if (error) valid = false;
// 当历遍了所有的u-form-item时,调用promise的then方法
if(++count === this.fields.length) {
if (++count === this.fields.length) {
resolve(valid); // 进入promise的then方法
// 调用回调方法
if(typeof callback == 'function') callback(valid);
if (typeof callback == 'function') callback(valid);
}
})
})
})
});
});
});
}
}
};
......
......@@ -2,7 +2,8 @@
<view
class="u-input"
:class="{
'u-input--border': border
'u-input--border': border,
'u-input--error': validateState
}"
:style="{
padding: `0 ${border ? 20 : 0}rpx`
......@@ -12,7 +13,7 @@
<textarea
v-if="type == 'textarea'"
class="u-input__input u-input__textarea"
:style="[fieldStyle]"
:style="[getStyle]"
:value="value"
:placeholder="placeholder"
:placeholderStyle="placeholderStyle"
......@@ -26,12 +27,12 @@
@confirm="onConfirm"
/>
<input
v-if="type == 'text' || type == 'select'"
v-else
class="u-input__input"
:style="[fieldStyle]"
:style="[getStyle]"
:type="type"
:value="defaultValue"
:password="password || type === 'password'"
:password="(type == 'password' || password) && showPassword"
:placeholder="placeholder"
:placeholderStyle="placeholderStyle"
:disabled="disabled || type === 'select'"
......@@ -43,12 +44,20 @@
@input="handleInput"
@confirm="onConfirm"
/>
<view class="u-input--select" v-if="type=='select'" :class="{
'u-input--select--reverse': selectOpen
<view class="u-input__right-icon u-flex">
<view class="u-input__right-icon__clear u-input__right-icon__item" v-if="clearable && value && focused">
<u-icon size="32" name="close-circle-fill" color="#c0c4cc" @touchstart="onClear"/>
</view>
<view class="u-input__right-icon__clear u-input__right-icon__item" v-if="type == 'password' || password">
<u-icon size="32" :name="showPassword ? 'eye' : 'eye-fill'" color="#c0c4cc" @click="showPassword = !showPassword"/>
</view>
<view class="u-input__right-icon--select u-input__right-icon__item" v-if="type=='select'" :class="{
'u-input__right-icon--select--reverse': selectOpen
}">
<u-icon name="arrow-down-fill" size="26" color="#c0c4cc"></u-icon>
</view>
</view>
</view>
</template>
<script>
......@@ -88,14 +97,14 @@ export default {
},
placeholderStyle: {
type: String,
default: ''
default: 'color: #c0c4cc;'
},
confirmType: {
type: String,
default: 'done'
},
// 输入框的自定义样式
fieldStyle: {
customStyle: {
type: Object,
default() {
return {};
......@@ -125,11 +134,26 @@ export default {
selectOpen: {
type: Boolean,
default: false
}
},
// 高度,单位rpx
height: {
type: [Number, String],
default: ''
},
// 是否可清空
clearable: {
type: Boolean,
default: true
},
},
data() {
return {
defaultValue: this.value
defaultValue: this.value,
inputHeight: 70, // input的高度
textareaHeight: 100, // textarea的高度
validateState: false, // 当前input的验证状态,用于错误时,边框是否改为红色
focused: false, // 当前是否处于获得焦点的状态
showPassword: this.password, // 是否预览密码
};
},
watch: {
......@@ -141,14 +165,25 @@ export default {
value: nVal
}
})
}
},
},
computed: {
// 因为uniapp的input组件的maxlength组件必须要数值,这里转为数值,给用户可以传入字符串数值
inputMaxlength() {
return Number(this.maxlength);
},
getStyle() {
let style = {};
// 如果没有自定义高度,就根据type为input还是textare来分配一个默认的高度
style.minHeight = this.height ? this.height + 'rpx' : this.type == 'textarea' ?
this.textareaHeight + 'rpx' : this.inputHeight + 'rpx';
style = Object.assign(style, this.customStyle);
return style;
}
},
created() {
this.$on('on-form-item-error', this.onFormItemError);
},
methods: {
/**
* change 事件
......@@ -171,6 +206,7 @@ export default {
* @param event
*/
handleBlur(event) {
this.focused = false;
// vue 原生的方法 return 出去
this.$emit('blur', event.detail.value);
this.$nextTick(() => {
......@@ -178,6 +214,9 @@ export default {
this.dispatch('u-form-item', 'on-form-blur', event.detail.value);
});
},
onFormItemError(status) {
this.validateState = status;
},
onFocus(event) {
this.focused = true;
this.$emit('focus');
......@@ -200,17 +239,17 @@ export default {
position: relative;
&__input {
height: $u-form-item-height;
//height: $u-form-item-height;
font-size: 28rpx;
color: $u-main-color;
}
&__textarea {
min-height: 96rpx;
width: auto;
font-size: 28rpx;
color: $u-main-color;
padding: 10rpx 0;
line-height: normal;
}
&--border {
......@@ -219,16 +258,27 @@ export default {
border: 1px solid $u-form-item-border-color;
}
&--select {
&--error {
border-color: $u-type-error;
}
&__right-icon {
position: absolute;
right: 20rpx;
top: 50%;
transition: transform .4s;
transform: translateY(-50%);
z-index: 1;
transform: translateY(-50%);
&__item {
margin-left: 10rpx;
}
&--select {
transition: transform .4s;
&--reverse {
transform: rotate(-180deg) translateY(50%);
transform: rotate(-180deg);
}
}
}
}
......
......@@ -94,7 +94,7 @@
if(this.vibrateShort) uni.vibrateShort();
this.$emit('input', !this.value);
// 放到下一个生命周期,因为双向绑定的value修改父组件状态需要时间,且是异步的
this.$nextTick(function() {
this.$nextTick(() => {
this.$emit('change', this.value ? this.activeValue : this.inactiveValue);
})
}
......
......@@ -53,10 +53,6 @@ u-grid {
width: 100%;
flex: 0 0 100%;
}
// u-checkbox {
// display: inline-block;
// }
/* #endif */
/* end-微信小程序编译后页面有组件名的元素,特别处理--end */
......
......@@ -343,7 +343,8 @@ var types = {
return false;
}
return typeof value === 'number';
// 修改源码,将字符串数值先转为数值
return typeof +value === 'number';
},
object: function object(value) {
return typeof value === 'object' && !types.array(value);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment