Skip to content

dev / zhiliang-light-mp

Go to a project
Toggle navigation
Toggle navigation pinning
032992c4 by simon
Options

1.版本提交 

2.加ui
1 parent fafba665
Expand all
Inline Side-by-side
Showing 322 changed files with 1473 additions and 33 deletions
1 { 1 {
2 "pages": [ 2 "pages": [
3 "pages/gift-shop/gift-shop",
4 "pages/index/index", 3 "pages/index/index",
5 "pages/authorize/authorize", 4 "pages/authorize/authorize",
5 "pages/gift-shop/gift-shop",
6 "pages/register/register", 6 "pages/register/register",
7 "pages/scan-result/scan-result", 7 "pages/scan-result/scan-result",
8 "pages/integral-detail/integral-detail", 8 "pages/integral-detail/integral-detail",
...@@ -34,8 +34,7 @@ ...@@ -34,8 +34,7 @@
34 "selectedColor": "#3680EB", 34 "selectedColor": "#3680EB",
35 "borderStyle": "black", 35 "borderStyle": "black",
36 "backgroundColor": "#ffffff", 36 "backgroundColor": "#ffffff",
37 "list": [ 37 "list": [{
38 {
39 "pagePath": "pages/index/index", 38 "pagePath": "pages/index/index",
40 "iconPath": "image/tabbar/scan_bar.png", 39 "iconPath": "image/tabbar/scan_bar.png",
41 "selectedIconPath": "image/tabbar/scan_bar_selected.png", 40 "selectedIconPath": "image/tabbar/scan_bar_selected.png",
......
...@@ -116,3 +116,6 @@ ...@@ -116,3 +116,6 @@
116 color: $colorBlue; 116 color: $colorBlue;
117 } 117 }
118 118
119 .van-popup {
120 background-color: transparent !important;
121 }
......
...@@ -12,6 +12,16 @@ Component({ ...@@ -12,6 +12,16 @@ Component({
12 }, 12 },
13 methods: { 13 methods: {
14 // 这里是一个自定义方法 14 // 这里是一个自定义方法
15 customMethod() {} 15 customMethod() {
16 this.triggerEvent('evtcomp', {
17 name: "_evt_custom"
18 })
19 },
20 // 隐藏蒙层
21 hideMask() {
22 this.triggerEvent('evtcomp', {
23 name: "_evt_hide_product_detail_mask"
24 });
25 }
16 } 26 }
17 }) 27 })
......
1 Component({
2 properties: {
3 // 这里定义了innerText属性，属性值可以在组件使用时指定
4 innerText: {
5 type: String,
6 value: 'default value',
7 }
8 },
9 data: {
10 // 这里是一些组件内部数据
11 someData: {}
12 },
13 methods: {
14 // 这里是一个自定义方法
15 customMethod() {
16 this.triggerEvent('evtcomp', {
17 name: "_evt_custom"
18 })
19 },
20 // 隐藏蒙层
21 hideMask() {
22 this.triggerEvent('evtcomp', {
23 name: "_evt_hide_product_detail_mask"
24 });
25 }
26 }
27 })
1 {
2 "component": true,
3 "options": {
4 "styleIsolation": "apply-shared"
5 }
6 }
1 @import '../../assets/scss/mixins';
2 @import '../../assets/scss/utils';
3
4 .comp-item {
5 color: #333333;
6 width: 750px;
7
8 .cont {
9 background: #FFFFFF;
10 @extend .shadow;
11 width: 670px;
12 margin: 0 auto;
13 min-height: 896px;
14 @extend .bb;
15 padding: 40px 30px 30px;
16
17 .tit {
18 font-size: 40px;
19 text-align: center;
20 }
21
22 .img-wrap {
23 margin: 20px 0;
24 width: 610px;
25 height: 322px;
26 border: 1px solid #F0F0F0;
27 border-radius: 4px;
28
29 .swiper {}
30 }
31
32 .desc {
33 color: #333333;
34 font-size: 28px;
35 }
36 }
37
38 .close {
39 width: 82px;
40 height: 112px;
41 margin: 0 auto 40px;
42
43 .btn {
44 width: 82px;
45 height: 112px;
46 }
47 }
48 }
1 <view class="comp-item">
2 <view class="cont">
3 <view class="tit">LED大功率球泡灯</view>
4 <view class="img-wrap">
5 <view class="swiper"></view>
6 </view>
7 <view class="desc">产品特点：</view>
8 <view class="desc">
9 节能白光LED的能耗仅为白炽灯的1/10，节能灯的1/4，超长寿命50.000小时以上，是传统钨丝灯的50倍以上，固态封装，方便运输和安装；环保，没有汞的有害物质。采用PWM恒流技术，效率高，热量低，恒流精度高。宽电压范围，全球通用，85V-265VAC全电压范围恒流。保证寿命及亮度不受电压波动影响。
10 </view>
11 </view>
12 <view class="close">
13 <image bindtap="hideMask" class="btn" src="../../image/index/index_close.png" />
14 </view>
15 </view>
1 module.exports = { 1 module.exports = {
2 index: '/xxx/index', // Index 接口 2 index: '/xxx/index', // Index 接口
3 decrypt: '/xxx/decrypt', // 解析用户信息 3 register: '/xxx/register', // 解析用户信息
4 } 4 }
......

1.01 KB | W: | H:

5.53 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
1 let app = getApp(); 1 let app = getApp();
2 Page({ 2 Page({
3 data: {}, 3 data: {
4 onLoad(options) {} 4 value: "",
5 checked: true,
6 },
7 onLoad(options) {},
8 onChange(event) {
9 this.setData({
10 checked: event.detail
11 });
12 }
13
5 }) 14 })
......
1 { 1 {
2 "navigationBarTitleText": "more" 2 "navigationBarTitleText": "编辑收货地址",
3 "usingComponents": {
4 "van-field": "../../ui/vant-weapp/field/index",
5 "van-checkbox": "../../ui/vant-weapp/checkbox/index",
6 "van-checkbox-group": "../../ui/vant-weapp/checkbox-group/index"
7 }
3 } 8 }
......
1 @import '../../assets/scss/mixins'; 1 @import '../../assets/scss/mixins';
2 @import '../../assets/scss/utils'; 2 @import '../../assets/scss/utils';
3 3
4 $contentWidth:690px;
5
4 .page { 6 .page {
5 .bgc {} 7 .bgc {
8 background: #F8F8F8;
9 }
6 10
7 .bg {} 11 .bg {}
8 12
9 .main { 13 .main {
14 color: #333333;
15
10 .top-space { 16 .top-space {
11 height: 0px; 17 height: 40px;
12 } 18 }
13 19
14 .content { 20 .content {
15 position: relative; 21 position: relative;
22
23 .form {
24 &-item {
25 @extend .bb;
26 padding: 24px 30px;
27 background: #fff;
28 font-size: 28px;
29 display: flex;
30 align-items: center;
31 margin-bottom: 20px;
32
33 .label {
34 min-width: 150px;
35 }
36
37 .cont {
38 flex: 1;
39 @extend .bb;
40 padding-left: 20px;
41 }
42 }
43
44 &-item-textarea {
45 align-items: flex-start;
46
47 .cont {
48 margin-top: 4px;
49 height: auto;
50 min-height: 120px;
51 }
52 }
53
54 }
55
56 .check-defaut {
57 margin: 30px;
58 }
59 }
60
61 .bottom {
62 position: fixed;
63 bottom: 120px;
64 width: 750px;
65
66 .btn-wrap {
67 position: relative;
68 width: 750px;
69
70 .btn {
71 margin: 30px auto 0;
72 font-size: 32px;
73 color: #fff;
74 background: $colorBlue;
75 @include btn-center(320px, 84px);
76 border-radius: 8px;
77 }
78
79 .btn-red {
80 background: transparent;
81 border: solid 1px #E02020;
82 color: #E02020;
83 }
84
16 } 85 }
17 } 86 }
87 }
88 }
89
90 // vant样式
91 .custom-class {}
92
93 .icon-class {}
94
95 .label-class {}
96
97 .van-checkbox__icon {
98 font-size: 28px !important;
99 }
100
101 .van-checkbox__label {
102 font-size: 28px !important;
103 margin-left: 12px !important;
18 } 104 }
......
...@@ -3,6 +3,32 @@ ...@@ -3,6 +3,32 @@
3 <view class="app__bg bg"></view> 3 <view class="app__bg bg"></view>
4 <view class="app__content main"> 4 <view class="app__content main">
5 <view class="top-space"></view> 5 <view class="top-space"></view>
6 <view class="content"></view> 6 <view class="content">
7 <!-- 表单 -->
8 <view class="form">
9 <view class="form-item">
10 <view class="label">收货人姓名</view>
11 <input class="cont" placeholder="请输入" />
12 </view>
13 <view class="form-item">
14 <view class="label">手机号码</view>
15 <input class="cont" placeholder="请输入" />
16 </view>
17 <view class="form-item form-item-textarea">
18 <view class="label">收货地址</view>
19 <textarea class="cont" placeholder="请输入"></textarea>
20 </view>
21 </view>
22 <!-- 设置为默认地址 -->
23 <view class="check-defaut" custom-class="custom-class" icon-class="icon-class" label-class="label-class">
24 <van-checkbox value="{{ checked }}" bind:change="onChange">设为默认地址</van-checkbox>
25 </view>
26 </view>
27 <view class="bottom">
28 <view class="btn-wrap">
29 <view class="btn">保存</view>
30 <view class="btn btn-red">删除</view>
31 </view>
32 </view>
7 </view> 33 </view>
8 </view> 34 </view>
......
...@@ -10,11 +10,11 @@ Page({ ...@@ -10,11 +10,11 @@ Page({
10 loginData: null, 10 loginData: null,
11 authorized: false, 11 authorized: false,
12 canIUse: wx.canIUse('button.open-type.getUserInfo'), 12 canIUse: wx.canIUse('button.open-type.getUserInfo'),
13 parentMemberCode: "",
14 }, 13 },
14 onShareAppMessage() {},
15 onLoad(options) {}, 15 onLoad(options) {},
16 onReady() { 16 onReady() {
17 app.store.clear("sessionId"); 17 // app.store.clear("sessionId");
18 let _this = this; 18 let _this = this;
19 wx.login({ 19 wx.login({
20 success: function (res) { 20 success: function (res) {
...@@ -37,7 +37,6 @@ Page({ ...@@ -37,7 +37,6 @@ Page({
37 encryptedData: e.encryptedData, 37 encryptedData: e.encryptedData,
38 iv: e.iv, 38 iv: e.iv,
39 code: _this.data.loginData.code, 39 code: _this.data.loginData.code,
40 parentMemberCode: _this.data.parentMemberCode,
41 } 40 }
42 }).then((res2) => { 41 }).then((res2) => {
43 app.store.setItem('sessionId', res2.sessionId); 42 app.store.setItem('sessionId', res2.sessionId);
......
...@@ -8,9 +8,9 @@ ...@@ -8,9 +8,9 @@
8 <view class="top-space"></view> 8 <view class="top-space"></view>
9 <view class="login"> 9 <view class="login">
10 <image class="login-logo" src="../../image/logo.png" mode="aspectFit" /> 10 <image class="login-logo" src="../../image/logo.png" mode="aspectFit" />
11 <view class="login-name">美赞臣</view> 11 <view class="login-name">志亮·深士照明</view>
12 <view class="login-line"></view> 12 <view class="login-line"></view>
13 <view class="login-title">完整体验小程序功能，需要您的微信授权哦</view> 13 <view class="login-title">完整体验小程序功能，需要您的微信授权</view>
14 <view class="login-tips">· 获取您的公开信息（昵称、头像等）</view> 14 <view class="login-tips">· 获取您的公开信息（昵称、头像等）</view>
15 <button type="default" class="login-btn" wx:if="{{!authorized}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo"> 15 <button type="default" class="login-btn" wx:if="{{!authorized}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">
16 确认授权 16 确认授权
......
...@@ -10,11 +10,11 @@ Page({ ...@@ -10,11 +10,11 @@ Page({
10 loginData: null, 10 loginData: null,
11 authorized: false, 11 authorized: false,
12 canIUse: wx.canIUse('button.open-type.getUserInfo'), 12 canIUse: wx.canIUse('button.open-type.getUserInfo'),
13 parentMemberCode: "",
14 }, 13 },
14 onShareAppMessage() {},
15 onLoad(options) {}, 15 onLoad(options) {},
16 onReady() { 16 onReady() {
17 app.store.clear("sessionId"); 17 // app.store.clear("sessionId");
18 let _this = this; 18 let _this = this;
19 wx.login({ 19 wx.login({
20 success: function (res) { 20 success: function (res) {
...@@ -37,7 +37,6 @@ Page({ ...@@ -37,7 +37,6 @@ Page({
37 encryptedData: e.encryptedData, 37 encryptedData: e.encryptedData,
38 iv: e.iv, 38 iv: e.iv,
39 code: _this.data.loginData.code, 39 code: _this.data.loginData.code,
40 parentMemberCode: _this.data.parentMemberCode,
41 } 40 }
42 }).then((res2) => { 41 }).then((res2) => {
43 app.store.setItem('sessionId', res2.sessionId); 42 app.store.setItem('sessionId', res2.sessionId);
......
...@@ -6,9 +6,9 @@ ...@@ -6,9 +6,9 @@
6 <view class="top-space"></view> 6 <view class="top-space"></view>
7 <view class="login"> 7 <view class="login">
8 <image class="login-logo" src="../../image/logo.png" mode="aspectFit" /> 8 <image class="login-logo" src="../../image/logo.png" mode="aspectFit" />
9 <view class="login-name">小程序</view> 9 <view class="login-name">志亮·深士照明</view>
10 <view class="login-line"></view> 10 <view class="login-line"></view>
11 <view class="login-title">完整体验小程序功能，需要您的微信授权哦</view> 11 <view class="login-title">完整体验小程序功能，需要您的微信授权</view>
12 <view class="login-tips">· 获取您的公开信息（昵称、头像等）</view> 12 <view class="login-tips">· 获取您的公开信息（昵称、头像等）</view>
13 <button type="default" class="login-btn" wx:if="{{!authorized}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo"> 13 <button type="default" class="login-btn" wx:if="{{!authorized}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">
14 确认授权 14 确认授权
......
1 let app = getApp(); 1 let app = getApp();
2 Page({ 2 Page({
3 data: {}, 3 data: {
4 onLoad(options) {} 4 productDetailVisible: false,
5 },
6 onLoad(options) {},
7
8 // 子组件事件
9 evtcomp(evt) {
10 let {
11 name,
12 data
13 } = evt.detail;
14 switch (name) {
15
16 case "_evt_hide_product_detail_mask":
17 this.setData({
18 productDetailVisible: false
19 })
20 break;
21
22 default:
23 break;
24 }
25 },
26 /**
27 * 点击详情
28 */
29 onProductItemHandler() {
30 this.setData({
31 productDetailVisible: true
32 })
33 },
34 /**
35 * 点击扫码按钮
36 */
37 onScanHandler() {
38 wx.scanCode({
39 onlyFromCamera: true,
40 success(res) {
41 // 扫码结果
42 let result = res.result;
43 }
44 })
45 }
5 }) 46 })
......
1 { 1 {
2 "navigationBarTitleText": "志亮照明" 2 "navigationBarTitleText": "志亮照明",
3 "usingComponents": {
4 "product-detail-comp": "../../component/product-detail-comp/product-detail-comp",
5 "van-popup": "../../ui/vant-weapp/popup/index"
6 }
3 } 7 }
......
...@@ -14,8 +14,9 @@ $contentWidth:670px; ...@@ -14,8 +14,9 @@ $contentWidth:670px;
14 .main { 14 .main {
15 15
16 .top { 16 .top {
17 position: absolute; 17 position: fixed;
18 width: 750px; 18 width: 750px;
19 z-index: 11;
19 20
20 &-bg { 21 &-bg {
21 position: absolute; 22 position: absolute;
...@@ -36,13 +37,13 @@ $contentWidth:670px; ...@@ -36,13 +37,13 @@ $contentWidth:670px;
36 37
37 &-ipt-wrap { 38 &-ipt-wrap {
38 @extend .bb; 39 @extend .bb;
39 padding: 0 30px; 40 padding-left: 30px;
40 width: 568px; 41 width: 568px;
41 flex: 1; 42 flex: 1;
42 43
43 .ipt { 44 .ipt {
44 font-size: 28px; 45 font-size: 28px;
45 color: #999999; 46 color: #333333;
46 } 47 }
47 } 48 }
48 49
...@@ -107,6 +108,22 @@ $contentWidth:670px; ...@@ -107,6 +108,22 @@ $contentWidth:670px;
107 background: #F8F8F8; 108 background: #F8F8F8;
108 border-radius: 4px; 109 border-radius: 4px;
109 margin-bottom: 20px; 110 margin-bottom: 20px;
111 padding-bottom: 12px;
112
113 .image {
114 background: wheat;
115 width: 322px;
116 height: 322px;
117 }
118
119 .desc {
120 @extend .bb;
121 padding: 4px 20px;
122 font-size: 24px;
123 // line-height: 32px;
124 color: #333333;
125 @include ellipsis(3);
126 }
110 } 127 }
111 } 128 }
112 } 129 }
......
...@@ -9,8 +9,11 @@ ...@@ -9,8 +9,11 @@
9 <view class="search-ipt-wrap"> 9 <view class="search-ipt-wrap">
10 <input class="ipt" placeholder="请输入串码" /> 10 <input class="ipt" placeholder="请输入串码" />
11 </view> 11 </view>
12 <view class="search-line"></view>
13 <view class="search-scan"> 12 <view class="search-scan">
13 <image class="icon" mode="aspectFit" src="../../image/icon/icon_search.png" />
14 </view>
15 <view class="search-line"></view>
16 <view bindtap="onScanHandler" class="search-scan">
14 <image class="icon" mode="aspectFit" src="../../image/icon/icon_scan.png" /> 17 <image class="icon" mode="aspectFit" src="../../image/icon/icon_scan.png" />
15 </view> 18 </view>
16 </view> 19 </view>
...@@ -27,15 +30,38 @@ ...@@ -27,15 +30,38 @@
27 </swiper> --> 30 </swiper> -->
28 <view class="banner"></view> 31 <view class="banner"></view>
29 <view class="product"> 32 <view class="product">
30 <view class="product-title">产品推荐</view> 33 <view class="product-title">产品推荐{{codeStr}}</view>
31 <view class="product-list"> 34 <view class="product-list">
32 <!-- for循环 --> 35 <!-- for循环 -->
33 <view class="item">1</view> 36 <view class="item" bindtap="onProductItemHandler">
34 <view class="item">2</view> 37 <image class="image" mode="aspectFill" />
35 <view class="item">3</view> 38 <view class="desc">
36 <view class="item">4</view> 39 LED筒灯-3W 5W 7W 9W 12W 15W 18WLED筒灯-3W 5W 7W 9W 12W 15W 18WLED筒灯-3W 5W 7W 9W 12W 15W 18WLED筒灯-3W 5W 7W 9W 12W 15W 18W
40 </view>
41 </view>
42 <view class="item">
43 <image class="image" mode="aspectFill" />
44 <view class="desc">
45 LED筒灯-3W 5W 7W 9W 12W 15W 18WLED筒灯-3W 5W 7W 9W 12W 15W 18WLED筒灯-3W 5W 7W 9W 12W 15W 18WLED筒灯-3W 5W 7W 9W 12W 15W 18W
46 </view>
47 </view>
48 <view class="item">
49 <image class="image" mode="aspectFill" />
50 <view class="desc">
51 LED筒灯-3W 5W 7W 9W 12W 15W 18WLED筒灯-3W 5W 7W 9W 12W 15W 18WLED筒灯-3W 5W 7W 9W 12W 15W 18WLED筒灯-3W 5W 7W 9W 12W 15W 18W
52 </view>
53 </view>
54 <view class="item">
55 <image class="image" mode="aspectFill" />
56 <view class="desc">
57 LED筒灯-3W 5W 7W 9W 12W 15W 18WLED筒灯-3W 5W 7W 9W 12W 15W 18WLED筒灯-3W 5W 7W 9W 12W 15W 18WLED筒灯-3W 5W 7W 9W 12W 15W 18W
58 </view>
59 </view>
37 </view> 60 </view>
38 </view> 61 </view>
39 </view> 62 </view>
40 </view> 63 </view>
41 </view> 64 </view>
65 <van-popup show="{{ productDetailVisible }}" position="bottom">
66 <product-detail-comp bind:evtcomp="evtcomp"></product-detail-comp>
67 </van-popup>
......
1 import { VantComponent } from '../common/component';
2 import { safeArea } from '../mixins/safe-area';
3 VantComponent({
4 mixins: [safeArea()],
5 props: {
6 show: Boolean,
7 title: String,
8 cancelText: String,
9 zIndex: {
10 type: Number,
11 value: 100
12 },
13 actions: {
14 type: Array,
15 value: []
16 },
17 overlay: {
18 type: Boolean,
19 value: true
20 },
21 closeOnClickOverlay: {
22 type: Boolean,
23 value: true
24 }
25 },
26 methods: {
27 onSelect(event) {
28 const { index } = event.currentTarget.dataset;
29 const item = this.data.actions[index];
30 if (item && !item.disabled && !item.loading) {
31 this.$emit('select', item);
32 }
33 },
34 onCancel() {
35 this.$emit('cancel');
36 },
37 onClose() {
38 this.$emit('close');
39 }
40 }
41 });
1 {
2 "component": true,
3 "usingComponents": {
4 "van-icon": "../icon/index",
5 "van-popup": "../popup/index",
6 "van-loading": "../loading/index"
7 }
8 }
1 <wxs src="../wxs/utils.wxs" module="utils" />
2
3 <van-popup
4 show="{{ show }}"
5 position="bottom"
6 z-index="{{ zIndex }}"
7 overlay="{{ overlay }}"
8 custom-class="van-action-sheet"
9 safe-area-inset-bottom="{{ safeAreaInsetBottom }}"
10 close-on-click-overlay="{{ closeOnClickOverlay }}"
11 bind:close="onClose"
12 >
13 <view wx:if="{{ title }}" class="van-hairline--bottom van-action-sheet__header">
14 {{ title }}
15 <van-icon
16 name="close"
17 custom-class="van-action-sheet__close"
18 bind:click="onClose"
19 />
20 </view>
21 <view wx:if="{{ actions && actions.length }}">
22 <!-- button外包一层view，防止actions动态变化，导致渲染时button被打散 -->
23 <button
24 wx:for="{{ actions }}"
25 wx:key="index"
26 open-type="{{ item.openType }}"
27 class="{{ utils.bem('action-sheet__item', { disabled: item.disabled || item.loading }) }} van-hairline--top {{ item.className || '' }}"
28 hover-class="van-action-sheet__item--hover"
29 data-index="{{ index }}"
30 bind:tap="onSelect"
31 >
32 <block wx:if="{{ !item.loading }}">
33 {{ item.name }}
34 <text wx:if="{{ item.subname }}" class="van-action-sheet__subname" >{{ item.subname }}</text>
35 </block>
36 <van-loading wx:else size="20px" />
37 </button>
38 </view>
39 <slot />
40 <view
41 wx:if="{{ cancelText }}"
42 class="van-action-sheet__cancel"
43 hover-class="van-action-sheet__cancel--hover"
44 hover-stay-time="70"
45 bind:tap="onCancel"
46 >
47 {{ cancelText }}
48 </view>
49 </van-popup>
1 @import '../common/index.wxss';.van-action-sheet{max-height:90%!important;color:#333}.van-action-sheet__cancel,.van-action-sheet__item{height:50px;font-size:16px;line-height:50px;text-align:center;background-color:#fff}.van-action-sheet__cancel--hover,.van-action-sheet__item--hover{background-color:#f2f3f5}.van-action-sheet__cancel{height:60px}.van-action-sheet__cancel:before{display:block;height:10px;background-color:#f8f8f8;content:" "}.van-action-sheet__item--disabled{color:#c9c9c9}.van-action-sheet__item--disabled.van-action-sheet__item--hover{background-color:#fff}.van-action-sheet__subname{margin-left:5px;font-size:12px;color:#7d7e80}.van-action-sheet__header{font-size:16px;font-weight:500;line-height:44px;text-align:center}.van-action-sheet__close{position:absolute!important;top:0;right:0;padding:0 15px;font-size:18px!important;line-height:inherit!important;color:#999}
...\ No newline at end of file ...\ No newline at end of file
1 import { VantComponent } from '../common/component';
2 VantComponent({
3 classes: ['active-class', 'toolbar-class', 'column-class'],
4 props: {
5 title: String,
6 value: String,
7 loading: Boolean,
8 cancelButtonText: String,
9 confirmButtonText: String,
10 itemHeight: {
11 type: Number,
12 value: 44
13 },
14 visibleItemCount: {
15 type: Number,
16 value: 5
17 },
18 columnsNum: {
19 type: [String, Number],
20 value: 3
21 },
22 areaList: {
23 type: Object,
24 value: {}
25 }
26 },
27 data: {
28 columns: [{ values: [] }, { values: [] }, { values: [] }],
29 displayColumns: [{ values: [] }, { values: [] }, { values: [] }]
30 },
31 watch: {
32 value(value) {
33 this.code = value;
34 this.setValues();
35 },
36 areaList: 'setValues',
37 columnsNum(value) {
38 this.set({
39 displayColumns: this.data.columns.slice(0, +value)
40 });
41 }
42 },
43 methods: {
44 getPicker() {
45 if (this.picker == null) {
46 this.picker = this.selectComponent('.van-area__picker');
47 }
48 return this.picker;
49 },
50 onCancel(event) {
51 this.emit('cancel', event.detail);
52 },
53 onConfirm(event) {
54 this.emit('confirm', event.detail);
55 },
56 emit(type, detail) {
57 detail.values = detail.value;
58 delete detail.value;
59 this.$emit(type, detail);
60 },
61 onChange(event) {
62 const { index, picker, value } = event.detail;
63 this.code = value[index].code;
64 this.setValues().then(() => {
65 this.$emit('change', {
66 picker,
67 values: picker.getValues(),
68 index
69 });
70 });
71 },
72 getConfig(type) {
73 const { areaList } = this.data;
74 return (areaList && areaList[`${type}_list`]) || {};
75 },
76 getList(type, code) {
77 let result = [];
78 if (type !== 'province' && !code) {
79 return result;
80 }
81 const list = this.getConfig(type);
82 result = Object.keys(list).map(code => ({
83 code,
84 name: list[code]
85 }));
86 if (code) {
87 // oversea code
88 if (code[0] === '9' && type === 'city') {
89 code = '9';
90 }
91 result = result.filter(item => item.code.indexOf(code) === 0);
92 }
93 return result;
94 },
95 getIndex(type, code) {
96 let compareNum = type === 'province' ? 2 : type === 'city' ? 4 : 6;
97 const list = this.getList(type, code.slice(0, compareNum - 2));
98 // oversea code
99 if (code[0] === '9' && type === 'province') {
100 compareNum = 1;
101 }
102 code = code.slice(0, compareNum);
103 for (let i = 0; i < list.length; i++) {
104 if (list[i].code.slice(0, compareNum) === code) {
105 return i;
106 }
107 }
108 return 0;
109 },
110 setValues() {
111 const county = this.getConfig('county');
112 let code = this.code || Object.keys(county)[0] || '';
113 const province = this.getList('province');
114 const city = this.getList('city', code.slice(0, 2));
115 const picker = this.getPicker();
116 if (!picker) {
117 return;
118 }
119 const stack = [];
120 stack.push(picker.setColumnValues(0, province, false));
121 stack.push(picker.setColumnValues(1, city, false));
122 if (city.length && code.slice(2, 4) === '00') {
123 ;
124 [{ code }] = city;
125 }
126 stack.push(picker.setColumnValues(2, this.getList('county', code.slice(0, 4)), false));
127 return Promise.all(stack)
128 .catch(() => { })
129 .then(() => picker.setIndexes([
130 this.getIndex('province', code),
131 this.getIndex('city', code),
132 this.getIndex('county', code)
133 ]))
134 .catch(() => { });
135 },
136 getValues() {
137 const picker = this.getPicker();
138 return picker ? picker.getValues().filter(value => !!value) : [];
139 },
140 getDetail() {
141 const values = this.getValues();
142 const area = {
143 code: '',
144 country: '',
145 province: '',
146 city: '',
147 county: ''
148 };
149 if (!values.length) {
150 return area;
151 }
152 const names = values.map((item) => item.name);
153 area.code = values[values.length - 1].code;
154 if (area.code[0] === '9') {
155 area.country = names[1] || '';
156 area.province = names[2] || '';
157 }
158 else {
159 area.province = names[0] || '';
160 area.city = names[1] || '';
161 area.county = names[2] || '';
162 }
163 return area;
164 },
165 reset() {
166 this.code = '';
167 return this.setValues();
168 }
169 }
170 });
1 {
2 "component": true,
3 "usingComponents": {
4 "van-picker": "../picker/index"
5 }
6 }
1 <van-picker
2 class="van-area__picker"
3 active-class="active-class"
4 toolbar-class="toolbar-class"
5 column-class="column-class"
6 show-toolbar
7 value-key="name"
8 title="{{ title }}"
9 loading="{{ loading }}"
10 columns="{{ displayColumns }}"
11 item-height="{{ itemHeight }}"
12 visible-item-count="{{ visibleItemCount }}"
13 cancel-button-text="{{ cancelButtonText }}"
14 confirm-button-text="{{ confirmButtonText }}"
15 bind:change="onChange"
16 bind:confirm="onConfirm"
17 bind:cancel="onCancel"
18 />
1 @import '../common/index.wxss';
...\ No newline at end of file ...\ No newline at end of file
1 import { VantComponent } from '../common/component';
2 import { isNumber } from '../common/utils';
3 VantComponent({
4 relation: {
5 name: 'badge',
6 type: 'descendant',
7 linked(target) {
8 this.badges.push(target);
9 this.setActive();
10 },
11 unlinked(target) {
12 this.badges = this.badges.filter(item => item !== target);
13 this.setActive();
14 }
15 },
16 props: {
17 active: {
18 type: Number,
19 value: 0
20 }
21 },
22 watch: {
23 active: 'setActive'
24 },
25 beforeCreate() {
26 this.badges = [];
27 this.currentActive = -1;
28 },
29 methods: {
30 setActive(badge) {
31 let { active } = this.data;
32 const { badges } = this;
33 if (badge && !isNumber(badge)) {
34 active = badges.indexOf(badge);
35 }
36 if (active === this.currentActive) {
37 return;
38 }
39 if (this.currentActive !== -1 && badges[this.currentActive]) {
40 this.$emit('change', active);
41 badges[this.currentActive].setActive(false);
42 }
43 if (badges[active]) {
44 badges[active].setActive(true);
45 this.currentActive = active;
46 }
47 }
48 }
49 });
1 <view class="van-badge-group van-hairline--top-bottom custom-class">
2 <slot />
3 </view>
1 @import '../common/index.wxss';.van-badge-group{width:85px}
...\ No newline at end of file ...\ No newline at end of file
1 import { VantComponent } from '../common/component';
2 VantComponent({
3 relation: {
4 type: 'ancestor',
5 name: 'badge-group'
6 },
7 props: {
8 info: null,
9 title: String
10 },
11 methods: {
12 onClick() {
13 const group = this.getRelationNodes('../badge-group/index')[0];
14 if (group) {
15 group.setActive(this);
16 }
17 },
18 setActive(active) {
19 this.set({ active });
20 }
21 }
22 });
1 {
2 "component": true,
3 "usingComponents": {
4 "van-info": "../info/index"
5 }
6 }
1 <wxs src="../wxs/utils.wxs" module="utils" />
2
3 <view
4 class="{{ utils.bem('badge', { active }) }} van-hairline custom-class"
5 hover-class="van-badge--hover"
6 hover-stay-time="70"
7 bind:tap="onClick"
8 >
9 <view class="van-badge__text">
10 <van-info
11 wx:if="{{ info !== null }}"
12 info="{{ info }}"
13 custom-style="right: 4px"
14 />
15 {{ title }}
16 </view>
17 </view>
1 @import '../common/index.wxss';.van-badge{display:block;padding:20px 12px 20px 9px;overflow:hidden;font-size:14px;line-height:1.4;color:#7d7e80;word-break:break-all;background-color:#f8f8f8;border-left:3px solid transparent;box-sizing:border-box;-webkit-user-select:none;user-select:none}.van-badge--hover{background-color:#f2f3f5}.van-badge:after{border-bottom-width:1px}.van-badge--active{font-weight:700;color:#333;border-color:#f44}.van-badge--active:after{border-right-width:1px}.van-badge--active,.van-badge--active.van-badge--hover{background-color:#fff}.van-badge__text{position:relative}
...\ No newline at end of file ...\ No newline at end of file
1 import { VantComponent } from '../common/component';
2 import { button } from '../mixins/button';
3 import { openType } from '../mixins/open-type';
4 VantComponent({
5 mixins: [button, openType],
6 classes: ['hover-class', 'loading-class'],
7 props: {
8 plain: Boolean,
9 block: Boolean,
10 round: Boolean,
11 square: Boolean,
12 loading: Boolean,
13 hairline: Boolean,
14 disabled: Boolean,
15 loadingText: String,
16 type: {
17 type: String,
18 value: 'default'
19 },
20 size: {
21 type: String,
22 value: 'normal'
23 },
24 loadingSize: {
25 type: String,
26 value: '20px'
27 }
28 },
29 methods: {
30 onClick() {
31 if (!this.data.disabled && !this.data.loading) {
32 this.$emit('click');
33 }
34 }
35 }
36 });
1 {
2 "component": true,
3 "usingComponents": {
4 "van-loading": "../loading/index"
5 }
6 }
...\ No newline at end of file ...\ No newline at end of file
1 <wxs src="../wxs/utils.wxs" module="utils" />
2
3 <button
4 id="{{ id }}"
5 class="custom-class {{ utils.bem('button', [type, size, { block, round, plain, square, loading, disabled, hairline, unclickable: disabled || loading }]) }} {{ hairline ? 'van-hairline--surround' : '' }}"
6 open-type="{{ openType }}"
7 hover-class="van-button--active hover-class"
8 lang="{{ lang }}"
9 business-id="{{ businessId }}"
10 session-from="{{ sessionFrom }}"
11 send-message-title="{{ sendMessageTitle }}"
12 send-message-path="{{ sendMessagePath }}"
13 send-message-img="{{ sendMessageImg }}"
14 show-message-card="{{ showMessageCard }}"
15 app-parameter="{{ appParameter }}"
16 aria-label="{{ ariaLabel }}"
17 bindtap="onClick"
18 bindgetuserinfo="bindGetUserInfo"
19 bindcontact="bindContact"
20 bindgetphonenumber="bindGetPhoneNumber"
21 binderror="bindError"
22 bindlaunchapp="bindLaunchApp"
23 bindopensetting="bindOpenSetting"
24 >
25 <block wx:if="{{ loading }}">
26 <van-loading
27 custom-class="loading-class"
28 size="{{ loadingSize }}"
29 color="{{ type === 'default' ? '#c9c9c9' : '' }}"
30 />
31 <view
32 wx:if="{{ loadingText }}"
33 class="van-button__loading-text"
34 >
35 {{ loadingText }}
36 </view>
37 </block>
38 <slot wx:else />
39 </button>
1 @import '../common/index.wxss';.van-button{position:relative;display:inline-block;height:44px;padding:0;font-size:16px;line-height:42px;text-align:center;vertical-align:middle;box-sizing:border-box;border-radius:2px;-webkit-appearance:none;-webkit-text-size-adjust:100%}.van-button:before{position:absolute;top:50%;left:50%;width:100%;height:100%;background-color:#000;border:inherit;border-color:#000;border-radius:inherit;content:" ";opacity:0;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.van-button:after{border-width:0}.van-button--active:before{opacity:.15}.van-button--unclickable:after{display:none}.van-button--default{color:#333;background-color:#fff;border:1px solid #eee}.van-button--primary{color:#fff;background-color:#07c160;border:1px solid #07c160}.van-button--info{color:#fff;background-color:#1989fa;border:1px solid #1989fa}.van-button--danger{color:#fff;background-color:#f44;border:1px solid #f44}.van-button--warning{color:#fff;background-color:#ff976a;border:1px solid #ff976a}.van-button--plain{background-color:#fff}.van-button--plain.van-button--primary{color:#07c160}.van-button--plain.van-button--info{color:#1989fa}.van-button--plain.van-button--danger{color:#f44}.van-button--plain.van-button--warning{color:#ff976a}.van-button--large{width:100%;height:50px;line-height:48px}.van-button--normal{padding:0 15px;font-size:14px}.van-button--small{height:30px;min-width:60px;padding:0 8px;font-size:12px;line-height:28px}.van-button--mini{display:inline-block;width:50px;height:22px;font-size:10px;line-height:20px}.van-button--mini+.van-button--mini{margin-left:5px}.van-button--block{display:block;width:100%}.van-button--round{border-radius:10em}.van-button--square{border-radius:0}.van-button--disabled{opacity:.5}.van-button__loading-text{margin-left:5px;display:inline-block;vertical-align:middle}.van-button--hairline{border-width:0;padding-top:1px}.van-button--hairline:after{border-width:1px;border-color:inherit;border-radius:4px}.van-button--hairline.van-button--round:after{border-radius:10em}.van-button--hairline.van-button--square:after{border-radius:0}
...\ No newline at end of file ...\ No newline at end of file
1 import { link } from '../mixins/link';
2 import { VantComponent } from '../common/component';
3 VantComponent({
4 classes: [
5 'num-class',
6 'desc-class',
7 'thumb-class',
8 'title-class',
9 'price-class',
10 'origin-price-class',
11 ],
12 mixins: [link],
13 props: {
14 tag: String,
15 num: String,
16 desc: String,
17 thumb: String,
18 title: String,
19 price: String,
20 centered: Boolean,
21 lazyLoad: Boolean,
22 thumbLink: String,
23 originPrice: String,
24 thumbMode: {
25 type: String,
26 value: 'aspectFit'
27 },
28 currency: {
29 type: String,
30 value: '¥'
31 }
32 },
33 methods: {
34 onClickThumb() {
35 this.jumpLink('thumbLink');
36 }
37 }
38 });
1 {
2 "component": true,
3 "usingComponents": {
4 "van-tag": "../tag/index"
5 }
6 }
1 <wxs src="../wxs/utils.wxs" module="utils" />
2
3 <view class="custom-class van-card">
4 <view class="{{ utils.bem('card__header', { center: centered }) }}">
5 <view class="van-card__thumb" bind:tap="onClickThumb">
6 <image
7 wx:if="{{ thumb }}"
8 src="{{ thumb }}"
9 mode="{{ thumbMode }}"
10 lazy-load="{{ lazyLoad }}"
11 class="van-card__img thumb-class"
12 />
13 <slot name="thumb" />
14 <van-tag
15 wx:if="{{ tag }}"
16 mark
17 type="danger"
18 custom-class="van-card__tag"
19 >
20 {{ tag }}
21 </van-tag>
22 </view>
23
24 <view class="van-card__content">
25 <view wx:if="{{ title }}" class="van-card__title title-class">{{ title }}</view>
26 <slot wx:else name="title" />
27
28 <view wx:if="{{ desc }}" class="van-card__desc desc-class">{{ desc }}</view>
29 <slot wx:else name="desc" />
30
31 <slot name="tags" />
32
33 <view class="van-card__bottom">
34 <view wx:if="{{ price || price === 0 }}" class="van-card__price price-class">{{ currency }} {{ price }}</view>
35 <view wx:if="{{ originPrice || originPrice === 0 }}" class="van-card__origin-price origin-price-class">{{ currency }} {{ originPrice }}</view>
36 <view wx:if="{{ num }}" class="van-card__num num-class">x {{ num }}</view>
37 </view>
38 </view>
39 </view>
40
41 <view class="van-card__footer">
42 <slot name="footer" />
43 </view>
44 </view>
1 @import '../common/index.wxss';.van-card{position:relative;padding:5px 15px;font-size:12px;color:#333;background-color:#fafafa;box-sizing:border-box}.van-card__header{display:-webkit-flex;display:flex}.van-card__header--center{-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center}.van-card__thumb{position:relative;width:90px;height:90px;margin-right:10px;-webkit-flex:none;flex:none}.van-card__thumb:empty{display:none}.van-card__img{width:100%;height:100%}.van-card__content{position:relative;min-width:0;-webkit-flex:1;flex:1}.van-card__desc,.van-card__title{word-break:break-all}.van-card__title{font-weight:700;line-height:16px}.van-card__desc{color:#7d7e80}.van-card__bottom,.van-card__desc{line-height:20px}.van-card__price{display:inline-block;font-weight:700;color:#f44}.van-card__origin-price{display:inline-block;margin-left:5px;font-size:10px;color:#7d7e80;text-decoration:line-through}.van-card__num{float:right}.van-card__tag{position:absolute;top:2px;left:0}.van-card__footer{width:100%;text-align:right;-webkit-flex:none;flex:none}
...\ No newline at end of file ...\ No newline at end of file
1 import { VantComponent } from '../common/component';
2 VantComponent({
3 props: {
4 title: String,
5 border: {
6 type: Boolean,
7 value: true
8 }
9 }
10 });
1 {
2 "component": true
3 }
...\ No newline at end of file ...\ No newline at end of file
1 <view
2 wx:if="{{ title }}"
3 class="van-cell-group__title"
4 >
5 {{ title }}
6 </view>
7 <view class="custom-class van-cell-group {{ border ? 'van-hairline--top-bottom' : '' }}">
8 <slot />
9 </view>
1 @import '../common/index.wxss';.van-cell-group__title{font-size:14px;padding:15px 15px 5px;color:#999;line-height:16px}
...\ No newline at end of file ...\ No newline at end of file
1 import { link } from '../mixins/link';
2 import { VantComponent } from '../common/component';
3 VantComponent({
4 classes: [
5 'title-class',
6 'label-class',
7 'value-class',
8 'right-icon-class',
9 'hover-class'
10 ],
11 mixins: [link],
12 props: {
13 title: null,
14 value: null,
15 icon: String,
16 size: String,
17 label: String,
18 center: Boolean,
19 isLink: Boolean,
20 required: Boolean,
21 clickable: Boolean,
22 titleWidth: String,
23 customStyle: String,
24 arrowDirection: String,
25 border: {
26 type: Boolean,
27 value: true
28 }
29 },
30 methods: {
31 onClick(event) {
32 this.$emit('click', event.detail);
33 this.jumpLink();
34 }
35 }
36 });
1 {
2 "component": true,
3 "usingComponents": {
4 "van-icon": "../icon/index"
5 }
6 }
...\ No newline at end of file ...\ No newline at end of file
1 <wxs src="../wxs/utils.wxs" module="utils" />
2
3 <view
4 class="custom-class {{ utils.bem('cell', [size, { center, required, borderless: !border, clickable: isLink || clickable }]) }}"
5 hover-class="van-cell--hover hover-class"
6 hover-stay-time="70"
7 style="{{ customStyle }}"
8 bind:tap="onClick"
9 >
10 <van-icon
11 wx:if="{{ icon }}"
12 name="{{ icon }}"
13 class="van-cell__left-icon-wrap"
14 custom-class="van-cell__left-icon"
15 />
16 <slot wx:else name="icon" />
17
18 <view
19 style="{{ titleWidth ? 'max-width:' + titleWidth + ';min-width:' + titleWidth : '' }}"
20 class="van-cell__title title-class"
21 >
22 <block wx:if="{{ title }}">
23 {{ title }}
24 <view wx:if="{{ label }}" class="van-cell__label label-class">{{ label }}</view>
25 </block>
26 <slot wx:else name="title" />
27 </view>
28
29 <view class="van-cell__value value-class">
30 <block wx:if="{{ value || value === 0 }}">{{ value }}</block>
31 <slot wx:else />
32 </view>
33
34 <van-icon
35 wx:if="{{ isLink }}"
36 name="{{ arrowDirection ? 'arrow' + '-' + arrowDirection : 'arrow' }}"
37 class="van-cell__right-icon-wrap right-icon-class"
38 custom-class="van-cell__right-icon"
39 />
40 <slot wx:else name="right-icon" />
41
42 <slot name="extra" />
43 </view>
1 @import '../common/index.wxss';.van-cell{position:relative;display:-webkit-flex;display:flex;width:100%;padding:10px 15px;font-size:14px;line-height:24px;color:#333;background-color:#fff;box-sizing:border-box}.van-cell:after{content:" ";position:absolute;pointer-events:none;box-sizing:border-box;-webkit-transform-origin:center;transform-origin:center;top:auto;left:15px;right:0;bottom:0;-webkit-transform:scaleY(.5);transform:scaleY(.5);border-bottom:1px solid #eee}.van-cell--borderless:after{display:none}.van-cell-group{background-color:#fff}.van-cell__label{margin-top:3px;font-size:12px;line-height:18px;color:#999}.van-cell__value{overflow:hidden;color:#999;text-align:right;vertical-align:middle}.van-cell__title,.van-cell__value{-webkit-flex:1;flex:1}.van-cell__title:empty,.van-cell__value:empty{display:none}.van-cell__left-icon-wrap,.van-cell__right-icon-wrap{display:-webkit-flex;display:flex;height:24px;font-size:16px;-webkit-align-items:center;align-items:center}.van-cell__left-icon-wrap{margin-right:5px}.van-cell__right-icon-wrap{margin-left:5px;color:#999}.van-cell__left-icon{line-height:24px;vertical-align:middle}.van-cell__right-icon{line-height:24px}.van-cell--clickable.van-cell--hover{background-color:#f2f3f5}.van-cell--required{overflow:visible}.van-cell--required:before{position:absolute;left:7px;font-size:14px;color:#f44;content:"*"}.van-cell--center{-webkit-align-items:center;align-items:center}.van-cell--large{padding-top:12px;padding-bottom:12px}.van-cell--large .van-cell__title{font-size:16px}.van-cell--large .van-cell__label{font-size:14px}
...\ No newline at end of file ...\ No newline at end of file
1 import { VantComponent } from '../common/component';
2 VantComponent({
3 field: true,
4 relation: {
5 name: 'checkbox',
6 type: 'descendant',
7 linked(target) {
8 const { value, disabled } = this.data;
9 target.set({
10 value: value.indexOf(target.data.name) !== -1,
11 disabled: disabled || target.data.disabled
12 });
13 }
14 },
15 props: {
16 max: Number,
17 value: Array,
18 disabled: Boolean
19 },
20 watch: {
21 value(value) {
22 const children = this.getRelationNodes('../checkbox/index');
23 children.forEach(child => {
24 child.set({ value: value.indexOf(child.data.name) !== -1 });
25 });
26 },
27 disabled(disabled) {
28 const children = this.getRelationNodes('../checkbox/index');
29 children.forEach(child => {
30 child.set({ disabled: disabled || child.data.disabled });
31 });
32 }
33 }
34 });
1 {
2 "component": true,
3 "usingComponents": {
4 "van-icon": "../icon/index"
5 }
6 }
1 @import '../common/index.wxss';
...\ No newline at end of file ...\ No newline at end of file
1 import { VantComponent } from '../common/component';
2 VantComponent({
3 field: true,
4 relation: {
5 name: 'checkbox-group',
6 type: 'ancestor'
7 },
8 classes: ['icon-class', 'label-class'],
9 props: {
10 value: null,
11 disabled: Boolean,
12 useIconSlot: Boolean,
13 checkedColor: String,
14 labelPosition: String,
15 labelDisabled: Boolean,
16 shape: {
17 type: String,
18 value: 'round'
19 }
20 },
21 methods: {
22 emitChange(value) {
23 const parent = this.getRelationNodes('../checkbox-group/index')[0];
24 if (parent) {
25 this.setParentValue(parent, value);
26 }
27 else {
28 this.$emit('input', value);
29 this.$emit('change', value);
30 }
31 },
32 toggle() {
33 if (!this.data.disabled) {
34 this.emitChange(!this.data.value);
35 }
36 },
37 onClickLabel() {
38 if (!this.data.disabled && !this.data.labelDisabled) {
39 this.emitChange(!this.data.value);
40 }
41 },
42 setParentValue(parent, value) {
43 const parentValue = parent.data.value.slice();
44 const { name } = this.data;
45 if (value) {
46 if (parent.data.max && parentValue.length >= parent.data.max) {
47 return;
48 }
49 /* istanbul ignore else */
50 if (parentValue.indexOf(name) === -1) {
51 parentValue.push(name);
52 parent.$emit('input', parentValue);
53 parent.$emit('change', parentValue);
54 }
55 }
56 else {
57 const index = parentValue.indexOf(name);
58 /* istanbul ignore else */
59 if (index !== -1) {
60 parentValue.splice(index, 1);
61 parent.$emit('input', parentValue);
62 parent.$emit('change', parentValue);
63 }
64 }
65 }
66 }
67 });
1 {
2 "component": true,
3 "usingComponents": {
4 "van-icon": "../icon/index"
5 }
6 }
1 <wxs src="../wxs/utils.wxs" module="utils" />
2
3 <view class="van-checkbox custom-class">
4 <view class="van-checkbox__icon-wrap" bindtap="toggle">
5 <slot wx:if="{{ useIconSlot }}" name="icon" />
6 <van-icon
7 wx:else
8 name="success"
9 class="{{ utils.bem('checkbox__icon', [shape, { disabled, checked: value }]) }}"
10 style="{{ checkedColor && value && !disabled ? 'border-color:' + checkedColor + '; background-color:' + checkedColor : '' }}"
11 custom-class="icon-class"
12 custom-style="line-height: 20px;"
13 />
14 </view>
15 <view class="label-class {{ utils.bem('checkbox__label', [labelPosition, { disabled }]) }}" bindtap="onClickLabel">
16 <slot />
17 </view>
18 </view>
1 @import '../common/index.wxss';.van-checkbox{overflow:hidden;-webkit-user-select:none;user-select:none}.van-checkbox__icon-wrap,.van-checkbox__label{display:inline-block;line-height:20px;vertical-align:middle}.van-checkbox__icon{display:block;font-size:14px;width:20px;height:20px;color:transparent;text-align:center;box-sizing:border-box;border:1px solid #e5e5e5;transition:.2s}.van-checkbox__icon--round{border-radius:100%}.van-checkbox__icon--checked{color:#fff;border-color:#1989fa;background-color:#1989fa}.van-checkbox__icon--disabled{border-color:#c9c9c9;background-color:#eee}.van-checkbox__icon--disabled.van-checkbox__icon--checked{color:#c9c9c9}.van-checkbox__label{color:#333;margin-left:10px}.van-checkbox__label--left{float:left;margin:0 10px 0 0}.van-checkbox__label--disabled{color:#c9c9c9}.van-checkbox__label:empty{margin:0}
...\ No newline at end of file ...\ No newline at end of file
1 import { VantComponent } from '../common/component';
2 VantComponent({
3 relation: {
4 name: 'row',
5 type: 'ancestor'
6 },
7 props: {
8 span: Number,
9 offset: Number
10 },
11 data: {
12 style: ''
13 },
14 methods: {
15 setGutter(gutter) {
16 const padding = `${gutter / 2}px`;
17 const style = gutter ? `padding-left: ${padding}; padding-right: ${padding};` : '';
18 if (style !== this.data.style) {
19 this.set({ style });
20 }
21 }
22 }
23 });
1 {
2 "component": true
3 }
1 <wxs src="../wxs/utils.wxs" module="utils" />
2
3 <view
4 class="custom-class {{ utils.bem('col', [span]) }} {{ offset ? 'van-col--offset-' + offset : '' }}"
5 style="{{ style }}"
6 >
7 <slot />
8 </view>
1 @import '../common/index.wxss';.van-col{float:left;box-sizing:border-box}.van-col--1{width:4.16666667%}.van-col--offset-1{margin-left:4.16666667%}.van-col--2{width:8.33333333%}.van-col--offset-2{margin-left:8.33333333%}.van-col--3{width:12.5%}.van-col--offset-3{margin-left:12.5%}.van-col--4{width:16.66666667%}.van-col--offset-4{margin-left:16.66666667%}.van-col--5{width:20.83333333%}.van-col--offset-5{margin-left:20.83333333%}.van-col--6{width:25%}.van-col--offset-6{margin-left:25%}.van-col--7{width:29.16666667%}.van-col--offset-7{margin-left:29.16666667%}.van-col--8{width:33.33333333%}.van-col--offset-8{margin-left:33.33333333%}.van-col--9{width:37.5%}.van-col--offset-9{margin-left:37.5%}.van-col--10{width:41.66666667%}.van-col--offset-10{margin-left:41.66666667%}.van-col--11{width:45.83333333%}.van-col--offset-11{margin-left:45.83333333%}.van-col--12{width:50%}.van-col--offset-12{margin-left:50%}.van-col--13{width:54.16666667%}.van-col--offset-13{margin-left:54.16666667%}.van-col--14{width:58.33333333%}.van-col--offset-14{margin-left:58.33333333%}.van-col--15{width:62.5%}.van-col--offset-15{margin-left:62.5%}.van-col--16{width:66.66666667%}.van-col--offset-16{margin-left:66.66666667%}.van-col--17{width:70.83333333%}.van-col--offset-17{margin-left:70.83333333%}.van-col--18{width:75%}.van-col--offset-18{margin-left:75%}.van-col--19{width:79.16666667%}.van-col--offset-19{margin-left:79.16666667%}.van-col--20{width:83.33333333%}.van-col--offset-20{margin-left:83.33333333%}.van-col--21{width:87.5%}.van-col--offset-21{margin-left:87.5%}.van-col--22{width:91.66666667%}.van-col--offset-22{margin-left:91.66666667%}.van-col--23{width:95.83333333%}.van-col--offset-23{margin-left:95.83333333%}.van-col--24{width:100%}.van-col--offset-24{margin-left:100%}
...\ No newline at end of file ...\ No newline at end of file
1 import { VantComponent } from '../common/component';
2 const nextTick = () => new Promise(resolve => setTimeout(resolve, 20));
3 VantComponent({
4 classes: ['title-class', 'content-class'],
5 relation: {
6 name: 'collapse',
7 type: 'ancestor',
8 linked(parent) {
9 this.parent = parent;
10 }
11 },
12 props: {
13 name: null,
14 title: null,
15 value: null,
16 icon: String,
17 label: String,
18 disabled: Boolean,
19 border: {
20 type: Boolean,
21 value: true
22 },
23 isLink: {
24 type: Boolean,
25 value: true
26 }
27 },
28 data: {
29 contentHeight: 0,
30 expanded: false,
31 transition: false
32 },
33 mounted() {
34 this.updateExpanded()
35 .then(nextTick)
36 .then(() => {
37 this.set({ transition: true });
38 });
39 },
40 methods: {
41 updateExpanded() {
42 if (!this.parent) {
43 return Promise.resolve();
44 }
45 const { value, accordion } = this.parent.data;
46 const { children = [] } = this.parent;
47 const { name } = this.data;
48 const index = children.indexOf(this);
49 const currentName = name == null ? index : name;
50 const expanded = accordion
51 ? value === currentName
52 : (value || []).some((name) => name === currentName);
53 const stack = [];
54 if (expanded !== this.data.expanded) {
55 stack.push(this.updateStyle(expanded));
56 }
57 stack.push(this.set({ index, expanded }));
58 return Promise.all(stack);
59 },
60 updateStyle(expanded) {
61 return this.getRect('.van-collapse-item__content')
62 .then((rect) => rect.height)
63 .then((height) => {
64 if (expanded) {
65 return this.set({
66 contentHeight: height ? `${height}px` : 'auto'
67 });
68 }
69 else {
70 return this.set({ contentHeight: `${height}px` })
71 .then(nextTick)
72 .then(() => this.set({ contentHeight: 0 }));
73 }
74 });
75 },
76 onClick() {
77 if (this.data.disabled) {
78 return;
79 }
80 const { name, expanded } = this.data;
81 const index = this.parent.children.indexOf(this);
82 const currentName = name == null ? index : name;
83 this.parent.switch(currentName, !expanded);
84 },
85 onTransitionEnd() {
86 if (this.data.expanded) {
87 this.set({
88 contentHeight: 'auto'
89 });
90 }
91 }
92 }
93 });
1 {
2 "component": true,
3 "usingComponents": {
4 "van-cell": "../cell/index"
5 }
6 }
1 <wxs src="../wxs/utils.wxs" module="utils" />
2
3 <view class="van-collapse-item custom-class {{ index !== 0 ? 'van-hairline--top' : '' }}">
4 <van-cell
5 title="{{ title }}"
6 title-class="title-class"
7 icon="{{ icon }}"
8 is-link="{{ isLink }}"
9 value="{{ value }}"
10 label="{{ label }}"
11 border="{{ border && expanded }}"
12 class="{{ utils.bem('collapse-item__title', { disabled, expanded }) }}"
13 right-icon-class="van-cell__right-icon"
14 custom-class="van-cell"
15 hover-class="van-cell--hover"
16 bind:click="onClick"
17 >
18 <slot
19 name="title"
20 slot="title"
21 />
22 <slot
23 name="icon"
24 slot="icon"
25 />
26 <slot name="value" />
27 <slot
28 name="right-icon"
29 slot="right-icon"
30 />
31 </van-cell>
32 <view
33 class="{{ utils.bem('collapse-item__wrapper', { transition }) }}"
34 style="height: {{ contentHeight }};"
35 bind:transitionend="onTransitionEnd"
36 >
37 <view
38 class="van-collapse-item__content content-class"
39 >
40 <slot />
41 </view>
42 </view>
43 </view>
1 @import '../common/index.wxss';.van-collapse-item__title .van-cell__right-icon{-webkit-transform:rotate(90deg);transform:rotate(90deg);transition:.3s}.van-collapse-item__title--expanded .van-cell__right-icon{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.van-collapse-item__title--disabled .van-cell,.van-collapse-item__title--disabled .van-cell__right-icon{color:#c9c9c9!important}.van-collapse-item__title--disabled .van-cell--hover{background-color:#fff!important}.van-collapse-item__wrapper{overflow:hidden}.van-collapse-item__wrapper--transition{transition:height .3s ease-in-out}.van-collapse-item__content{padding:15px;font-size:13px;line-height:1.5;color:#999;background-color:#fff}
...\ No newline at end of file ...\ No newline at end of file
1 import { VantComponent } from '../common/component';
2 VantComponent({
3 relation: {
4 name: 'collapse-item',
5 type: 'descendant',
6 linked(child) {
7 this.children.push(child);
8 }
9 },
10 props: {
11 value: {
12 type: null,
13 observer: 'updateExpanded'
14 },
15 accordion: {
16 type: Boolean,
17 observer: 'updateExpanded'
18 },
19 border: {
20 type: Boolean,
21 value: true
22 }
23 },
24 beforeCreate() {
25 this.children = [];
26 },
27 methods: {
28 updateExpanded() {
29 this.children.forEach((child) => {
30 child.updateExpanded();
31 });
32 },
33 switch(name, expanded) {
34 const { accordion, value } = this.data;
35 if (!accordion) {
36 name = expanded
37 ? (value || []).concat(name)
38 : (value || []).filter((activeName) => activeName !== name);
39 }
40 else {
41 name = expanded ? name : '';
42 }
43 this.$emit('change', name);
44 this.$emit('input', name);
45 }
46 }
47 });
1 <view class="custom-class van-collapse {{ border ? 'van-hairline--top-bottom' : '' }}">
2 <slot />
3 </view>
1 @import '../common/index.wxss';
...\ No newline at end of file ...\ No newline at end of file
1 export declare const RED = "#f44";
2 export declare const BLUE = "#1989fa";
3 export declare const GREEN = "#07c160";
1 export const RED = '#f44';
2 export const BLUE = '#1989fa';
3 export const GREEN = '#07c160';
1 declare function VantComponent<Data, Props, Watch, Methods, Computed>(vantOptions?: VantComponentOptions<Data, Props, Watch, Methods, Computed, CombinedComponentInstance<Data, Props, Watch, Methods, Computed>>): void;
2 export { VantComponent };
1 import { basic } from '../mixins/basic';
2 import { observe } from '../mixins/observer/index';
3 function mapKeys(source, target, map) {
4 Object.keys(map).forEach(key => {
5 if (source[key]) {
6 target[map[key]] = source[key];
7 }
8 });
9 }
10 function VantComponent(vantOptions = {}) {
11 const options = {};
12 mapKeys(vantOptions, options, {
13 data: 'data',
14 props: 'properties',
15 mixins: 'behaviors',
16 methods: 'methods',
17 beforeCreate: 'created',
18 created: 'attached',
19 mounted: 'ready',
20 relations: 'relations',
21 destroyed: 'detached',
22 classes: 'externalClasses'
23 });
24 const { relation } = vantOptions;
25 if (relation) {
26 options.relations = Object.assign(options.relations || {}, {
27 [`../${relation.name}/index`]: relation
28 });
29 }
30 // add default externalClasses
31 options.externalClasses = options.externalClasses || [];
32 options.externalClasses.push('custom-class');
33 // add default behaviors
34 options.behaviors = options.behaviors || [];
35 options.behaviors.push(basic);
36 // map field to form-field behavior
37 if (vantOptions.field) {
38 options.behaviors.push('wx://form-field');
39 }
40 // add default options
41 options.options = {
42 multipleSlots: true,
43 addGlobalClass: true
44 };
45 observe(vantOptions, options);
46 Component(options);
47 }
48 export { VantComponent };
1 .van-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.van-multi-ellipsis--l2{-webkit-line-clamp:2}.van-multi-ellipsis--l2,.van-multi-ellipsis--l3{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical}.van-multi-ellipsis--l3{-webkit-line-clamp:3}.van-clearfix:after{content:"";display:table;clear:both}.van-hairline,.van-hairline--bottom,.van-hairline--left,.van-hairline--right,.van-hairline--surround,.van-hairline--top,.van-hairline--top-bottom{position:relative}.van-hairline--bottom:after,.van-hairline--left:after,.van-hairline--right:after,.van-hairline--surround:after,.van-hairline--top-bottom:after,.van-hairline--top:after,.van-hairline:after{content:" ";position:absolute;pointer-events:none;box-sizing:border-box;-webkit-transform-origin:center;transform-origin:center;top:-50%;left:-50%;right:-50%;bottom:-50%;-webkit-transform:scale(.5);transform:scale(.5);border:0 solid #eee}.van-hairline--top:after{border-top-width:1px}.van-hairline--left:after{border-left-width:1px}.van-hairline--right:after{border-right-width:1px}.van-hairline--bottom:after{border-bottom-width:1px}.van-hairline--top-bottom:after{border-width:1px 0}.van-hairline--surround:after{border-width:1px}
...\ No newline at end of file ...\ No newline at end of file
1 .van-clearfix:after{content:"";display:table;clear:both}
...\ No newline at end of file ...\ No newline at end of file
1 .van-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.van-multi-ellipsis--l2{-webkit-line-clamp:2}.van-multi-ellipsis--l2,.van-multi-ellipsis--l3{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical}.van-multi-ellipsis--l3{-webkit-line-clamp:3}
...\ No newline at end of file ...\ No newline at end of file
1 .van-hairline,.van-hairline--bottom,.van-hairline--left,.van-hairline--right,.van-hairline--surround,.van-hairline--top,.van-hairline--top-bottom{position:relative}.van-hairline--bottom:after,.van-hairline--left:after,.van-hairline--right:after,.van-hairline--surround:after,.van-hairline--top-bottom:after,.van-hairline--top:after,.van-hairline:after{content:" ";position:absolute;pointer-events:none;box-sizing:border-box;-webkit-transform-origin:center;transform-origin:center;top:-50%;left:-50%;right:-50%;bottom:-50%;-webkit-transform:scale(.5);transform:scale(.5);border:0 solid #eee}.van-hairline--top:after{border-top-width:1px}.van-hairline--left:after{border-left-width:1px}.van-hairline--right:after{border-right-width:1px}.van-hairline--bottom:after{border-bottom-width:1px}.van-hairline--top-bottom:after{border-width:1px 0}.van-hairline--surround:after{border-width:1px}
...\ No newline at end of file ...\ No newline at end of file
1 declare function isDef(value: any): boolean;
2 declare function isObj(x: any): boolean;
3 declare function isNumber(value: any): boolean;
4 declare function range(num: number, min: number, max: number): number;
5 export { isObj, isDef, isNumber, range };