Hooke / w4-vux-template

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
a3dd568a 1 parent 8f2b0149

更新配置

Expand all
Inline Side-by-side
Showing 110 changed files with 198 additions and 4498 deletions
...@@ -12,11 +12,10 @@ module.exports = { ...@@ -12,11 +12,10 @@ module.exports = {
12 moment: true, 12 moment: true,
13 _: true 13 _: true
14 }, 14 },
15 - extends: [ 15 + 'extends': [
16 'plugin:vue/essential', 16 'plugin:vue/essential',
17 '@vue/standard' 17 '@vue/standard'
18 ], 18 ],
19 - // extends: 'standard',
20 rules: { 19 rules: {
21 // allow paren-less arrow functions 20 // allow paren-less arrow functions
22 'arrow-parens': 0, 21 'arrow-parens': 0,
...@@ -37,13 +36,10 @@ module.exports = { ...@@ -37,13 +36,10 @@ module.exports = {
37 'camelcase': 0, 36 'camelcase': 0,
38 'eqeqeq': 0, 37 'eqeqeq': 0,
39 'no-undef': 0, 38 'no-undef': 0,
39 + 'no-self-assign': 0,
40 'no-console': ['error', { allow: ['warn', 'error'] }] 40 'no-console': ['error', { allow: ['warn', 'error'] }]
41 }, 41 },
42 parserOptions: { 42 parserOptions: {
43 parser: 'babel-eslint' 43 parser: 'babel-eslint'
44 - },
45 - plugins: ['html', 'vue'],
46 - settings: {
47 - 'html/html-extensions': ['.html']
48 } 44 }
49 -}; 45 +}
......
1 -# test1 1 +# vant-test
2 2
3 ## Project setup 3 ## Project setup
4 ``` 4 ```
......
This diff could not be displayed because it is too large.
1 { 1 {
2 - "name": "test1", 2 + "name": "vant-test",
3 "version": "0.1.0", 3 "version": "0.1.0",
4 "private": true, 4 "private": true,
5 "scripts": { 5 "scripts": {
...@@ -12,32 +12,24 @@ ...@@ -12,32 +12,24 @@
12 "fastclick": "^1.0.6", 12 "fastclick": "^1.0.6",
13 "jquery": "^3.3.1", 13 "jquery": "^3.3.1",
14 "lodash": "^4.17.11", 14 "lodash": "^4.17.11",
15 - "register-service-worker": "^1.5.2", 15 + "moment": "^2.23.0",
16 + "vant": "^1.5.2",
16 "vue": "^2.5.21", 17 "vue": "^2.5.21",
17 - "vue-core-image-upload": "^2.4.11",
18 - "vue-pull-to": "^0.1.6",
19 "vue-router": "^3.0.1", 18 "vue-router": "^3.0.1",
20 "vuex": "^3.0.1", 19 "vuex": "^3.0.1",
21 - "vuex-router-sync": "^5.0.0", 20 + "vuex-router-sync": "^5.0.0"
22 - "vux": "^2.9.2"
23 }, 21 },
24 "devDependencies": { 22 "devDependencies": {
25 "@vue/cli-plugin-babel": "^3.3.0", 23 "@vue/cli-plugin-babel": "^3.3.0",
26 "@vue/cli-plugin-eslint": "^3.3.0", 24 "@vue/cli-plugin-eslint": "^3.3.0",
27 - "@vue/cli-plugin-pwa": "^3.3.0",
28 "@vue/cli-service": "^3.3.0", 25 "@vue/cli-service": "^3.3.0",
29 "@vue/eslint-config-standard": "^4.0.0", 26 "@vue/eslint-config-standard": "^4.0.0",
30 "babel-eslint": "^10.0.1", 27 "babel-eslint": "^10.0.1",
28 + "compression-webpack-plugin": "^2.0.0",
31 "eslint": "^5.8.0", 29 "eslint": "^5.8.0",
32 - "eslint-plugin-html": "^5.0.0",
33 "eslint-plugin-vue": "^5.0.0", 30 "eslint-plugin-vue": "^5.0.0",
34 - "less": "^3.0.4", 31 + "less": "^3.9.0",
35 "less-loader": "^4.1.0", 32 "less-loader": "^4.1.0",
36 - "lint-staged": "^8.1.0", 33 + "vue-template-compiler": "^2.5.21"
37 - "vue-loader": "^14.2.2",
38 - "vue-template-compiler": "^2.5.21",
39 - "vux-loader": "^1.2.9",
40 - "webpack-merge": "^4.2.1",
41 - "yaml-loader": "^0.5.0"
42 } 34 }
43 } 35 }
......
...@@ -3,15 +3,31 @@ ...@@ -3,15 +3,31 @@
3 <head> 3 <head>
4 <meta charset="utf-8"> 4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 - <meta name="viewport" content="width=device-width,initial-scale=1.0"> 6 + <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
7 + <meta name="apple-mobile-web-app-capable" content="yes">
7 <link rel="icon" href="<%= BASE_URL %>favicon.ico"> 8 <link rel="icon" href="<%= BASE_URL %>favicon.ico">
9 + <!-- 使用CDN加速的CSS文件，配置在vue.config.js下 -->
10 + <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
11 + <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style">
12 + <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet">
13 + <% } %>
14 +
15 + <!-- 使用CDN加速的JS文件，配置在vue.config.js下 -->
16 + <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
17 + <link href="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="preload" as="script">
18 + <% } %>
19 +
8 <title><%= htmlWebpackPlugin.options.title %></title> 20 <title><%= htmlWebpackPlugin.options.title %></title>
9 </head> 21 </head>
10 <body> 22 <body>
11 <noscript> 23 <noscript>
12 - <strong>We're sorry but test1 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> 24 + <strong>We're sorry but vant-test doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 </noscript> 25 </noscript>
14 <div id="app"></div> 26 <div id="app"></div>
27 + <!-- 使用CDN加速的JS文件，配置在vue.config.js下 -->
28 + <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
29 + <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
30 + <% } %>
15 <!-- built files will be auto injected --> 31 <!-- built files will be auto injected -->
16 </body> 32 </body>
17 </html> 33 </html>
......
...@@ -5,6 +5,16 @@ ...@@ -5,6 +5,16 @@
5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0">
7 <link rel="icon" href="<%= BASE_URL %>favicon.ico"> 7 <link rel="icon" href="<%= BASE_URL %>favicon.ico">
8 + <!-- 使用CDN加速的CSS文件，配置在vue.config.js下 -->
9 + <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
10 + <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style">
11 + <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet">
12 + <% } %>
13 +
14 + <!-- 使用CDN加速的JS文件，配置在vue.config.js下 -->
15 + <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
16 + <link href="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="preload" as="script">
17 + <% } %>
8 <title><%= htmlWebpackPlugin.options.title %></title> 18 <title><%= htmlWebpackPlugin.options.title %></title>
9 </head> 19 </head>
10 <body> 20 <body>
...@@ -12,6 +22,10 @@ ...@@ -12,6 +22,10 @@
12 <strong>We're sorry but test1 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> 22 <strong>We're sorry but test1 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 </noscript> 23 </noscript>
14 <div id="login"></div> 24 <div id="login"></div>
25 + <!-- 使用CDN加速的JS文件，配置在vue.config.js下 -->
26 + <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
27 + <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
28 + <% } %>
15 <!-- built files will be auto injected --> 29 <!-- built files will be auto injected -->
16 </body> 30 </body>
17 </html> 31 </html>
......
...@@ -4,11 +4,11 @@ ...@@ -4,11 +4,11 @@
4 <router-link to="/">Home</router-link> | 4 <router-link to="/">Home</router-link> |
5 <router-link to="/about">About</router-link> 5 <router-link to="/about">About</router-link>
6 </div> 6 </div>
7 - <router-view></router-view> 7 + <router-view/>
8 </div> 8 </div>
9 </template> 9 </template>
10 10
11 -<style lang="less"> 11 +<style>
12 #app { 12 #app {
13 font-family: 'Avenir', Helvetica, Arial, sans-serif; 13 font-family: 'Avenir', Helvetica, Arial, sans-serif;
14 -webkit-font-smoothing: antialiased; 14 -webkit-font-smoothing: antialiased;
...@@ -18,12 +18,14 @@ ...@@ -18,12 +18,14 @@
18 } 18 }
19 #nav { 19 #nav {
20 padding: 30px; 20 padding: 30px;
21 - a { 21 +}
22 - font-weight: bold; 22 +
23 - color: #2c3e50; 23 +#nav a {
24 - &.router-link-exact-active { 24 + font-weight: bold;
25 - color: #42b983; 25 + color: #2c3e50;
26 - } 26 +}
27 - } 27 +
28 +#nav a.router-link-exact-active {
29 + color: #42b983;
28 } 30 }
29 </style> 31 </style>
......
...@@ -40,7 +40,7 @@ export default { ...@@ -40,7 +40,7 @@ export default {
40 </script> 40 </script>
41 41
42 <!-- Add "scoped" attribute to limit CSS to this component only --> 42 <!-- Add "scoped" attribute to limit CSS to this component only -->
43 -<style scoped lang="less"> 43 +<style scoped>
44 h3 { 44 h3 {
45 margin: 40px 0 0; 45 margin: 40px 0 0;
46 } 46 }
......
This diff is collapsed. Click to expand it.
1 -<template lang="html">
2 -
3 -</template>
4 -
5 -<script>
6 -export default {
7 -}
8 -</script>
9 -
10 -<style lang="less">
11 -</style>
1 -<template lang="html">
2 - <div class="choose-material-page">
3 - <div v-transfer-dom>
4 - <x-dialog :show.sync="show" class="dialog-demo">
5 - <div class="material-title">请选择{{name}}</div>
6 - <div class="material-wrapper">
7 - <div class="material-classify">
8 - <div>
9 - <check-icon :value.sync="all_checked" @click.native="checkAll(all_checked)">
10 - 全部{{name}}
11 - </check-icon>
12 - <div class="material-content">
13 - <checker
14 - v-model="checkList"
15 - type="checkbox"
16 - default-item-class="item"
17 - selected-item-class="item-selected"
18 - disabled-item-class="item-disabled"
19 - >
20 - <checker-item v-for="(item, index) in list" :key="index" :disabled="item.disabled" :value="item.id" @click.native="itemCheck(item.checked, index)">{{item.name}}</checker-item>
21 - </checker>
22 - </div>
23 - </div>
24 - </div>
25 - </div>
26 - <div style="padding: 10px;">
27 - <flexbox>
28 - <flexbox-item>
29 - <x-button @click.native="cancel" mini style="background-color: #ffffff; color: #8EA8CF; border: 1px solid #8EA8CF; width: 100%;">关闭</x-button>
30 - </flexbox-item>
31 - <flexbox-item>
32 - <x-button @click.native="comfirm" mini style="background-color: #8EA8CF; color: #ffffff; border: 1px solid #8EA8CF; width: 100%;">确定</x-button>
33 - </flexbox-item>
34 - </flexbox>
35 - </div>
36 - </x-dialog>
37 - </div>
38 - </div>
39 -</template>
40 -
41 -<script>
42 -import { XDialog, TransferDomDirective as TransferDom, Flexbox, FlexboxItem, CheckIcon, XButton, Checker, CheckerItem } from 'vux'
43 -export default {
44 - props: ['show', 'list', 'checked_list', 'span', 'name'],
45 - directives: { TransferDom },
46 - components: { XDialog, Flexbox, FlexboxItem, CheckIcon, XButton, Checker, CheckerItem },
47 - beforeRouteEnter (to, from, next) {
48 - next()
49 - },
50 - mounted () {
51 - // console.warn(this.list)
52 - // console.warn(1)
53 - },
54 - data () {
55 - return {
56 - all_checked: true,
57 - checkList: []
58 - }
59 - },
60 - watch: {
61 - show (val) {
62 - // console.warn(val)
63 - this.checkList = JSON.parse(JSON.stringify(this.checked_list))
64 - if (val) {
65 - let check_list = _.filter(this.list, (val) => {
66 - let tem;
67 - if (val.disabled === false) {
68 - tem = val
69 - }
70 - return tem
71 - });
72 - if (check_list.length > 0 && this.checked_list.length > 0 && check_list.length === this.checked_list.length) {
73 - this.all_checked = true
74 - } else {
75 - this.all_checked = false
76 - }
77 - } else {
78 - this.all_checked = false
79 - }
80 - // this.checkList = val;
81 - }
82 -
83 - },
84 - computed: {
85 - // checkList () {
86 - // return JSON.parse(JSON.stringify(this.checked_list));
87 - // }
88 - },
89 - methods: {
90 - checkAll (checked) {
91 - let check_list = _.filter(this.list, (val) => {
92 - let tem;
93 - if (val.disabled === false) {
94 - tem = val
95 - }
96 - return tem
97 - });
98 - // 勾选所有品牌
99 - if (checked) {
100 - // 选中
101 - for (let i = 0; i < check_list.length; i++) {
102 - check_list[i].checked = true;
103 - }
104 - this.checkList = _.map(check_list, val => val.id)
105 - // this.checked_list = id_list;
106 - } else {
107 - // 取消
108 - this.checkList = []
109 - for (let i = 0; i < check_list.length; i++) {
110 - check_list[i].checked = false;
111 - }
112 - }
113 - },
114 - itemCheck (checked, index) {
115 - // console.warn(this.checkList)
116 - let list = _.filter(this.list, (val) => {
117 - let tem;
118 - if (val.disabled === false) {
119 - tem = val
120 - }
121 - return tem
122 - });
123 - if (checked) {
124 - this.list[index].checked = false;
125 - } else {
126 - this.list[index].checked = true;
127 - }
128 - // console.warn(id_list)
129 - if (list.length !== this.checkList.length) {
130 - this.all_checked = false
131 - } else {
132 - this.all_checked = true
133 - }
134 - },
135 - changeCategory () {
136 - },
137 - cancel () {
138 - // 关闭选择框
139 - this.$emit('cancel', !this.show)
140 - },
141 - comfirm () {
142 - // 确认选择框
143 - this.$emit('comfirm', this.checkList)
144 - }
145 - }
146 -}
147 -</script>
148 -
149 -<style lang="less" scoped>
150 -.material-classify {
151 - text-align: left;
152 - padding: 10px;
153 - .vux-checker-box {
154 - // display: -webkit-flex;
155 - // display: flex;
156 - // flex-wrap: wrap;
157 - // justify-content: space-between;
158 - }
159 - .vux-check-icon {
160 - margin-bottom: 10px;
161 - }
162 -}
163 -.item {
164 - width: 31%;
165 - // flex-basis: 31%;
166 - line-height: 26px;
167 - text-align: center;
168 - border-radius: 3px;
169 - border: 1px solid #ccc;
170 - background-color: #fff;
171 - margin-bottom: 10px;
172 - margin-right: 2%;
173 - &:nth-child(3n) {
174 - margin-right: 0;
175 - }
176 - }
177 - .item-selected {
178 - color: white;
179 - background-color: #8EA8CF;
180 - }
181 - .item-disabled {
182 - color: #cfcfcf;
183 - background-color: #ebeef7;
184 - }
185 -
186 - .weui-dialog {
187 - width: 90% !important;
188 - max-width: 400px;
189 - }
190 -
191 - @media screen and (min-width: 1024px) {
192 - .weui-dialog {
193 - width: 35%;
194 - }
195 - }
196 -
197 - .weui-btn:after {
198 - border: 0 !important;
199 - }
200 -</style>
1 -<template lang="html">
2 - <div class="">
3 - <alert
4 - :title="title"
5 - :value="show"
6 - :button_text="button_text"
7 - @on-show="onShow"
8 - @on-hide="onHide">
9 - 自定义插入内容
10 - </alert>
11 - <group>
12 - <x-switch title="测试开关" v-model="show"></x-switch>
13 - </group>
14 - </div>
15 -</template>
16 -
17 -<script>
18 -import alert from 'components/alert/index'
19 -import { Group, XSwitch } from 'vux'
20 -
21 -export default {
22 - components: { alert, Group, XSwitch },
23 - data () {
24 - return {
25 - title: '温馨提示',
26 - button_text: '确定',
27 - show: false
28 - }
29 - },
30 - mounted () {
31 - },
32 - methods: {
33 - onHide () {
34 - console.warn('on-hide');
35 - },
36 - onShow () {
37 - console.warn('on-show');
38 - }
39 - }
40 -}
41 -</script>
42 -
43 -<style lang="less">
44 -</style>
1 -<template lang="html">
2 - <div v-transfer-dom>
3 - <alert v-model="show"
4 - :title="title"
5 - :button-text="button_text"
6 - @on-show="onShow"
7 - @on-hide="onHide">
8 - <slot></slot>
9 - </alert>
10 - </div>
11 -</template>
12 -
13 -<script>
14 -import { TransferDom, Alert } from 'vux'
15 -
16 -export default {
17 - components: { Alert },
18 - directives: { TransferDom },
19 - props: ['title', 'value', 'button_text'],
20 - data () {
21 - return {
22 - }
23 - },
24 - mounted () {
25 - },
26 - computed: {
27 - show: {
28 - get () {
29 - return this.value
30 - },
31 - set (val) {}
32 - }
33 - },
34 - methods: {
35 - onHide () {
36 - this.$emit('on-hide');
37 - },
38 - onShow () {
39 - this.$emit('on-show');
40 - }
41 - }
42 -}
43 -</script>
44 -
45 -<style lang="less">
46 - .weui-dialog {
47 - width: 90%;
48 - max-width: 50rem;
49 - }
50 - .weui-dialog__btn.weui-dialog__btn_primary {
51 - color: #353535;
52 - }
53 - .weui-dialog__hd {
54 - background-color: #8ea9cf;
55 - color: #FFFFFF;
56 - padding: 0.5em 1.6em 0.5em;
57 - }
58 -
59 -</style>
1 -<template>
2 - <div>
3 - <div class="btn">
4 - <div>
5 - <x-button class="default-btn" @click.native="next">{{btnText}}</x-button>
6 - </div>
7 - </div>
8 - </div>
9 -</template>
10 -
11 -<script>
12 -import { XButton } from 'vux'
13 -export default {
14 - components: { XButton },
15 - props: ['btnText'],
16 - methods: {
17 - next () {
18 - this.$emit('btnClick')
19 - }
20 - }
21 -}
22 -</script>
23 -
24 -<style lang="less" scoped>
25 -.btn {
26 - width: 100%;
27 - background: #fff;
28 - position: fixed;
29 - bottom: 0;
30 - left: 0;
31 - z-index: 100;
32 - &>div {
33 - padding: 6px 10px;
34 - .default-btn {
35 - width: 100%;
36 - height: 38px;
37 - background: #89a9cf!important;
38 - color: #fff!important;
39 - font-size: 16px;
40 - &:after {
41 - border: 1px solid #89a9cf!important;
42 - }
43 - }
44 - }
45 -}
46 -</style>
1 -<template>
2 - <div>
3 - <div class="btn">
4 - <div>
5 - <x-button class="default-btn continue" @click.native="leftClick">{{leftText}}</x-button>
6 - <x-button class="default-btn" @click.native="rightClick">{{rightText}}</x-button>
7 - </div>
8 - </div>
9 - </div>
10 -</template>
11 -<script>
12 -import { XButton } from 'vux'
13 -export default {
14 - props: ['leftText', 'rightText'],
15 - components: {XButton},
16 - methods: {
17 - leftClick () {
18 - this.$emit('leftClick')
19 - },
20 - rightClick () {
21 - this.$emit('rightClick')
22 - }
23 - }
24 -}
25 -</script>
26 -<style lang="less" scoped>
27 - .btn {
28 - width: 100%;
29 - background: #fff;
30 - position: fixed;
31 - bottom: 0;
32 - left: 0;
33 - z-index: 100;
34 - &>div {
35 - display: flex;
36 - display: -webkit-flex;
37 - // align-content: center;
38 - justify-content: space-between;
39 - padding: 6px 10px;
40 - .default-btn {
41 - width: 49%;
42 - height: 38px;
43 - background: #89a9cf!important;
44 - margin: 0;
45 - color: #fff!important;
46 - font-size: 16px;
47 - &.continue {
48 - background-color: #fff!important;
49 - color: #89a9cf!important;
50 - &:after {
51 - width: 199%;
52 - border: 1px solid #89a9cf!important;
53 - }
54 - }
55 - }
56 - }
57 - }
58 -</style>
1 -<template lang="html">
2 - <div style="padding: 20px">
3 - <x-button disabled class="disbaled-btn">确定disabled</x-button>
4 - <x-button class="default-btn">确定default</x-button>
5 - <x-button class="active-btn">确定active</x-button>
6 - <divider> line </divider>
7 - <flexbox>
8 - <flexbox-item><x-button plain class="line-btn">关闭</x-button></flexbox-item>
9 - <flexbox-item><x-button plain class="default-btn">确定</x-button></flexbox-item>
10 - </flexbox>
11 - <divider> line </divider>
12 - <x-button mini plain class="line-btn">选好了</x-button>
13 - </div>
14 -</template>
15 -
16 -<script>
17 -import { Flexbox, FlexboxItem, XButton, Divider } from 'vux'
18 -export default {
19 - components: {
20 - Divider,
21 - Flexbox,
22 - FlexboxItem,
23 - XButton
24 - }
25 -}
26 -</script>
27 -
28 -<style lang="less">
29 -.disbaled-btn {
30 - border: 1px solid #dbdce0;
31 - background: #ebeef7;
32 - color: #c8cbd0
33 -}
34 -.default-btn {
35 - background: #86aace!important;
36 - border: 1px solid #86aace!important;
37 - color: #fff!important;
38 -}
39 -.active-btn {
40 - border: 1px solid #86aace!important;
41 - background: #697f9f!important;
42 - color: #fff!important;
43 -}
44 -.line-btn {
45 - border: 1px solid #8aa0b4!important;
46 - color: #8298b4!important;
47 -}
48 -</style>
1 -<template lang="html">
2 -
3 - <div class="">
4 - <div v-if="type === 'enable'" class="set-enable-btn">
5 - <slot></slot>
6 - </div>
7 - <div v-if="type === 'unable'" class="un-set-btn">
8 - <slot></slot>
9 - </div>
10 - </div>
11 -</template>
12 -
13 -<script>
14 -export default {
15 - props: ['type']
16 -}
17 -</script>
18 -
19 -<style lang="less">
20 - .set-enable-btn {
21 - color: #8EA8CF;
22 - background-color: #FFFFFF;
23 - text-align: center;
24 - margin: 0.5rem 1rem;
25 - padding: 0.5rem 0;
26 - border-radius: .2rem;
27 - font-size: .85rem;
28 - border: 1px solid #8EA8CF;
29 - }
30 - .un-set-btn {
31 - color: white;
32 - background-color: #8EA8CF;
33 - text-align: center;
34 - margin: 0.5rem 1rem;
35 - padding: 0.5rem 0;
36 - border-radius: .2rem;
37 - font-size: .85rem;
38 - }
39 -</style>
1 -<template lang="html">
2 - <div class="">
3 - <cell-swiper :list="list" @clickItem="clickItem" @editItem="editItem" @deleteItem="deleteItem"></cell-swiper>
4 - </div>
5 -</template>
6 -
7 -<script>
8 -import cellSwiper from 'components/cellSwiper/index'
9 -
10 -export default {
11 - components: {cellSwiper},
12 - data () {
13 - return {
14 - list: [
15 - {
16 - id: '01',
17 - title: 'item1'
18 - },
19 - {
20 - id: '02',
21 - title: 'item2'
22 - },
23 - {
24 - id: '03',
25 - title: 'item3'
26 - },
27 - {
28 - id: '04',
29 - title: 'item4'
30 - }
31 - ]
32 - }
33 - },
34 - methods: {
35 - clickItem (id) {
36 - console.warn(id);
37 - },
38 - editItem (id) {
39 - console.warn(id);
40 - },
41 - deleteItem (id) {
42 - console.warn(id);
43 - }
44 - }
45 -}
46 -</script>
47 -
48 -<style lang="less">
49 -</style>
1 -<template lang="html">
2 - <div class="container">
3 - <ul>
4 - <li class="list-item " v-for="(item,index) in list " data-type="0">
5 - <div class="list-box" @touchstart.capture="touchStart" @touchend.capture="touchEnd" @click="clickItem($event, item)" :data-id="item.id">
6 - <div class="list-content">
7 - <p class="title">{{item.title}}</p>
8 - </div>
9 - </div>
10 - <div class="edit" @click="editItem($event, item)" :data-index="index" :data-id="item.id">修 改</div>
11 - <div class="delete" @click="deleteItem" :data-index="index" :data-id="item.id">删 除</div>
12 - </li>
13 - </ul>
14 - </div>
15 -</template>
16 -
17 -<script>
18 -/**
19 - * [list 左滑修改删除列表]
20 - * @type {Array}
21 - * @field {id, title}
22 - *
23 - * [clickItem 点击表单项回调, 返回 index]
24 - * @type {Function}
25 - * @callback {index}
26 - *
27 - * [editItem 左滑点击表单编辑回调, 返回 index]]
28 - * @type {Function}
29 - * @callback {index}
30 - *
31 - * [deleteItem 左滑点击表单删除回调, 返回 index]]
32 - * @type {Function}
33 - * @callback {index}
34 - */
35 -export default{
36 - name: 'index',
37 - props: ['list'],
38 - data () {
39 - return {
40 - startX: 0,
41 - endX: 0
42 - }
43 - },
44 - methods: {
45 - // 跳转
46 - clickItem (e, item) {
47 - if (this.checkSlide()) {
48 - this.restSlide();
49 - } else {
50 - // 当前ID
51 - let id = e.currentTarget.dataset.id;
52 - this.$emit('clickItem', id, item)
53 - }
54 - },
55 - // 滑动开始
56 - touchStart (e) {
57 - // 记录初始位置
58 - this.startX = e.touches[0].clientX;
59 - },
60 - // 滑动结束
61 - touchEnd (e) {
62 - // 当前滑动的父级元素
63 - let parentElement = e.currentTarget.parentElement;
64 - // 记录结束位置
65 - this.endX = e.changedTouches[0].clientX;
66 -
67 - // 左滑
68 - if (parentElement.dataset.type == 0 && this.startX - this.endX > 30) {
69 - this.restSlide();
70 - parentElement.dataset.type = 1;
71 - }
72 -
73 - // 右滑
74 - if (parentElement.dataset.type == 1 && this.startX - this.endX < -30) {
75 - this.restSlide();
76 - parentElement.dataset.type = 0;
77 - }
78 -
79 - this.startX = 0;
80 - this.endX = 0;
81 - },
82 - // 判断当前是否有滑块处于滑动状态
83 - checkSlide () {
84 - let listItems = document.querySelectorAll('.list-item');
85 -
86 - for (let i = 0; i < listItems.length; i++) {
87 - if (listItems[i].dataset.type == 1) {
88 - return true;
89 - }
90 - }
91 - return false;
92 - },
93 - // 复位滑动状态
94 - restSlide () {
95 - let listItems = document.querySelectorAll('.list-item');
96 - // 复位
97 - for (let i = 0; i < listItems.length; i++) {
98 - listItems[i].dataset.type = 0;
99 - }
100 - },
101 - // 删除
102 - deleteItem (e) {
103 - // 当前索引
104 - let index = e.currentTarget.dataset.index;
105 - // 复位
106 - this.restSlide();
107 - // 删除
108 - // this.list.splice(index, 1);
109 - // 当前ID
110 - // let id = e.currentTarget.dataset.id;
111 - this.$emit('deleteItem', index)
112 - },
113 - // 修改
114 - editItem (e, item) {
115 - // 当前索引
116 - let id = e.currentTarget.dataset.id;
117 - // 复位
118 - this.restSlide();
119 - // 当前ID
120 - this.$emit('editItem', id, item)
121 - }
122 - }
123 -}
124 -</script>
125 -
126 -<style scoped>
127 -.page-title{
128 - text-align: center;
129 - font-size: 17px;
130 - padding: 10px 15px;
131 - position: relative;
132 -}
133 -.page-title:after{
134 - content: " ";
135 - position: absolute;
136 - left: 0;
137 - bottom: 0;
138 - right: 0;
139 - height: 1px;
140 - border-bottom: 1px solid #ccc;
141 - color: #ccc;
142 - -webkit-transform-origin: 0 100%;
143 - transform-origin: 0 100%;
144 - -webkit-transform: scaleY(0.5);
145 - transform: scaleY(0.5);
146 - z-index: 2;
147 -}
148 -.list-item{
149 - position: relative;
150 - height: 3.5rem;
151 - -webkit-transition: all 0.2s;
152 - transition: all 0.2s;
153 -}
154 -.list-item[data-type="0"]{
155 - transform: translate3d(0,0,0);
156 -}
157 -.list-item[data-type="1"]{
158 - transform: translate3d(-12rem,0,0);
159 -}
160 -.list-item:after{
161 - content: " ";
162 - position: absolute;
163 - /* left: 0.6rem; */
164 - left: 0rem;
165 - bottom: 0;
166 - right: 0;
167 - height: 1px;
168 - border-bottom: 1px solid #ebeaee;
169 - color: #ccc;
170 - -webkit-transform-origin: 0 100%;
171 - transform-origin: 0 100%;
172 - -webkit-transform: scaleY(0.5);
173 - transform: scaleY(0.5);
174 - z-index: 2;
175 -}
176 -.list-box{
177 - padding: 0.6rem;
178 - background: #fff;
179 - display: flex;
180 - align-items: center;
181 - -webkit-box-sizing: border-box;
182 - box-sizing: border-box;
183 - justify-content: flex-end;
184 - position: absolute;
185 - top: 0;
186 - right: 0;
187 - bottom: 0;
188 - left: 0;
189 - font-size: 0;
190 -}
191 -.list-item .list-img{
192 - display: block;
193 - width: 3rem;
194 - height: 3rem;
195 -}
196 -.list-item .list-content{
197 - padding: 0.3rem 0 0.3rem 0.6rem;
198 - position: relative;
199 - flex: 1;
200 - flex-direction: column;
201 - align-items: flex-start;
202 - justify-content: center;
203 - overflow: hidden;
204 -}
205 -.list-item .title{
206 - display: block;
207 - color: #333;
208 - overflow: hidden;
209 - font-size: 15px;
210 - font-weight: bold;
211 - text-overflow: ellipsis;
212 - white-space: nowrap;
213 -}
214 -.list-item .tips{
215 - display: block;
216 - overflow: hidden;
217 - font-size: 12px;
218 - color: #999;
219 - line-height: 20px;
220 - text-overflow: ellipsis;
221 - white-space: nowrap;
222 -}
223 -.list-item .time{
224 - display: block;
225 - font-size: 12px;
226 - position: absolute;
227 - right: 0;
228 - top: 0.3rem;
229 - color: #666;
230 -}
231 -.list-item .delete{
232 - width: 6rem;
233 - height: 3.5rem;
234 - background: #fc6621;
235 - font-size: 17px;
236 - color: #fff;
237 - text-align: center;
238 - line-height: 3.5rem;
239 - position: absolute;
240 - top:0;
241 - right: -12rem;
242 -}
243 -.list-item .edit{
244 - width: 6rem;
245 - height: 3.5rem;
246 - background: #f0eff5;
247 - font-size: 17px;
248 - color: #000;
249 - text-align: center;
250 - line-height: 3.5rem;
251 - position: absolute;
252 - top:0;
253 - right: -6.1rem;
254 - border-left: 1px solid #ebeaee;
255 -}
256 -</style>
1 -<template lang="html">
2 - <div class="">
3 - <checker type="checkbox" @on-change="checkerChange" v-model="checkedValue" default-item-class="checklist-item" selected-item-class="checklist-item-selected">
4 - <checker-item :value="item" v-for="(item, index) in options" :key="index"><i></i><span>{{item.value}}</span></checker-item>
5 - </checker>
6 - </div>
7 -</template>
8 -
9 -<script>
10 -import { Checker, CheckerItem, TransferDom } from 'vux'
11 -export default {
12 - directives: {
13 - TransferDom
14 - },
15 - components: {
16 - Checker,
17 - CheckerItem
18 - },
19 - data () {
20 - return {
21 - checkedValue: [
22 - {
23 - key: '1',
24 - value: '白'
25 - }
26 - ],
27 - options: [
28 - {
29 - key: '1',
30 - value: '白'
31 - },
32 - {
33 - key: '2',
34 - value: '富'
35 - },
36 - {
37 - key: '3',
38 - value: '美'
39 - }
40 - ]
41 - }
42 - },
43 - methods: {
44 - checkerChange (val) {
45 - console.warn(val);
46 - }
47 - }
48 -}
49 -</script>
50 -
51 -<style lang="less" scoped>
52 -.checklist-item {
53 - margin-right: 15px;
54 - span {
55 - display: inline-block;
56 - vertical-align: middle;
57 - }
58 - i {
59 - display: inline-block;
60 - width: 1rem;
61 - height: 1rem;
62 - background-size: cover;
63 - background-image: url(../../assets/unchecked.png);
64 - vertical-align: middle;
65 - margin-right: 0.5rem;
66 - }
67 -}
68 -.checklist-item-selected {
69 - i {
70 - background-image: url(../../assets/checked.png)
71 - }
72 -}
73 -</style>
1 -<template lang="html">
2 - <div class="">
3 - <checker type="checkbox" @on-change="checkerChange" v-model="checkValue" default-item-class="checklist-item" selected-item-class="checklist-item-selected">
4 - <checker-item :value="item.key" v-for="(item, index) in options" :key="index"><i></i><span>{{item.value}}</span></checker-item>
5 - </checker>
6 - </div>
7 -</template>
8 -
9 -<script>
10 -import { Checker, CheckerItem, TransferDom } from 'vux'
11 -export default {
12 - directives: {
13 - TransferDom
14 - },
15 - components: {
16 - Checker,
17 - CheckerItem
18 - },
19 - data () {
20 - return {
21 - checkValue: ''
22 - }
23 - },
24 - methods: {
25 - checkerChange (val) {
26 - this.$emit('change', val)
27 - }
28 - }
29 -}
30 -</script>
31 -
32 -<style lang="less" scoped>
33 -.checklist-item {
34 - margin-right: 15px;
35 - span {
36 - display: inline-block;
37 - vertical-align: middle;
38 - }
39 - i {
40 - display: inline-block;
41 - width: 1.2rem;
42 - height: 1.2rem;
43 - background-size: cover;
44 - background-image: url(../../assets/unchecked.png);
45 - vertical-align: middle;
46 - margin-right: 0.5rem;
47 - }
48 -}
49 -.checklist-item-selected {
50 - i {
51 - background-image: url(../../assets/checked.png)
52 - }
53 -}
54 -</style>
1 -<template lang="html">
2 - <div class="">
3 - <div class="check-head" style="margin: 0 0 0 10px">
4 - <check-all :value.sync="isAll" @click.native="selectAll(isAll)">全部商品</check-all>
5 - <p style="display: inline-block">
6 - (<span style="color: #8fb5de">{{currSum}}</span>/<span>{{totalSum}}</span>)
7 - </p>
8 - </div>
9 - <demo
10 - @listChange="listCheckerChange"
11 - v-for="item in data"
12 - :id="item.id"
13 - :name="item.name"
14 - :key="item.id"
15 - :list="item.list"
16 - :isCheckAll="item.isCheck"
17 - :currItemCount="item.currItemCount"
18 - :itemTotal="item.itemTotal"
19 - :listCount="testCount"></demo>
20 - </div>
21 -</template>
22 -
23 -<script>
24 -import Demo from 'components/checkBox/index'
25 -import CheckAll from 'components/isCheckAll/index'
26 -export default {
27 - components: { Demo, CheckAll },
28 - data () {
29 - return {
30 - testCount: null,
31 - isAll: false,
32 - currSum: 0,
33 - totalSum: null,
34 - data: [
35 - {
36 - isCheck: true,
37 - id: '123a',
38 - name: '蔬菜类',
39 - currItemCount: 0,
40 - itemTotal: 4,
41 - list: [
42 - {
43 - key: '1',
44 - value: '什锦冷菜'
45 - },
46 - {
47 - key: '2',
48 - value: '经典冷盘甜小菜心太软'
49 - },
50 - {
51 - key: '3',
52 - value: '凉拌黑木耳'
53 - },
54 - {
55 - key: '4',
56 - value: '私房飘香酱牛肉'
57 - }
58 - ]
59 - },
60 - {
61 - isCheck: false,
62 - id: '852a',
63 - name: '肉类',
64 - currItemCount: 0,
65 - itemTotal: 5,
66 - list: [
67 - {
68 - key: 'b',
69 - value: '咸水鸭',
70 - isSelected: true
71 - },
72 - {
73 - key: 'c',
74 - value: '酱香牛肉'
75 - },
76 - {
77 - key: 'd',
78 - value: '羊肉'
79 - },
80 - {
81 - key: 'e',
82 - value: '凉拌猪耳朵'
83 - },
84 - {
85 - key: 'g',
86 - value: '海蜇头'
87 - }
88 - ]
89 - }
90 - ]
91 - }
92 - },
93 - mounted () {
94 - this.totalSum = _.sum(_.map(this.data, 'itemTotal'))
95 - },
96 - methods: {
97 - selectAll (val) {
98 - console.warn(val);
99 - },
100 - listCheckerChange (val) {
101 - this.testCount = val.length
102 - // console.warn(this.testCount);
103 - }
104 - }
105 -}
106 -</script>
107 -
108 -<style lang="css">
109 -</style>
1 -<template>
2 - <div>
3 - <div class="dash-line">
4 - <span></span>
5 - </div>
6 - <div class="check-head" style="margin: 0 0 10px 15px">
7 - <check-all :value.sync="checkAll" @click.native="checkAllClick(checkAll)">{{ name }}</check-all>
8 - <p style="display: inline-block">
9 - (<span style="color: #8fb5de">{{currCount}}</span>/<span>{{currTotal}}</span>)
10 - </p>
11 - </div>
12 - <checker
13 - v-model="checkValue"
14 - type="checkbox"
15 - default-item-class="check-item"
16 - disabled-item-class="check-item-disabled"
17 - selected-item-class="check-item-selected"
18 - @on-change="checkerChange"
19 - class="check-item-wrap-self">
20 - <checker-item
21 - v-for="(item, index) in list"
22 - :key="index"
23 - :value="item.key"
24 - v-if="!item.disabled"
25 - :disabled="item.disabled">{{item.value}}</checker-item>
26 - </checker>
27 - </div>
28 -</template>
29 -
30 -<script>
31 -import { Checker, CheckerItem, CheckIcon, TransferDom } from 'vux'
32 -import CheckAll from 'components/isCheckAll/index'
33 -export default {
34 - props: ['list', 'id', 'name', 'currItemCount', 'itemTotal', 'isCheckAll', 'listCount'],
35 - directives: {
36 - TransferDom
37 - },
38 - components: {
39 - Checker,
40 - CheckerItem,
41 - CheckIcon,
42 - CheckAll
43 - },
44 - data () {
45 - return {
46 - checkValue: '',
47 - currCount: this.currItemCount,
48 - currTotal: this.itemTotal,
49 - checkAll: this.isCheckAll
50 - }
51 - },
52 - mounted () {
53 - if (this.isCheckAll) {
54 - this.checkValue = _.map(this.list, 'key')
55 - this.checkAll = true;
56 - this.currCount = this.checkValue.length
57 - } else {
58 - this.checkValue = this.filterKeys(this.list)
59 - this.checkAll = false;
60 - this.currCount = 0
61 - }
62 - },
63 - watch: {
64 - currItemCount (val) {
65 - this.currCount = val
66 - },
67 - itemTotal (val) {
68 - this.currTotal = val
69 - },
70 - isCheckAll (val) {
71 - this.checkAll = val
72 - }
73 - },
74 - methods: {
75 - filterKeys (arr) {
76 - let lists = [];
77 - _(arr).each(function (item) {
78 - if (item.isSelected && item.isSelected === true) {
79 - lists.push(item.key)
80 - }
81 - })
82 - return lists
83 - },
84 - checkAllClick (val) {
85 - if (val) {
86 - this.checkValue = _.map(this.list, 'key')
87 - this.checkAll = true;
88 - this.currCount = this.checkValue.length
89 - } else {
90 - this.checkValue = []
91 - this.checkAll = false;
92 - this.currCount = 0
93 - }
94 - },
95 - checkerChange (value) {
96 - let checkedCount = value.length;
97 - this.currCount = checkedCount
98 - this.checkAll = checkedCount === this.list.length;
99 - this.$emit('listChange', value)
100 - }
101 - }
102 -}
103 -</script>
104 -
105 -<style lang="less" scoped>
106 -.dash-line {
107 - padding: 0.6rem 0;
108 - span{
109 - display: block;
110 - width: 100%;
111 - border-bottom: 1px dashed #d9d9db;
112 - }
113 -}
114 -.checklist-item {
115 - span {
116 - display: inline-block;
117 - width: 1.2rem;
118 - height: 1.2rem;
119 - background-size: cover;
120 - background-image: url(../../assets/unchecked.png);
121 - vertical-align: middle;
122 - margin-right: 0.5rem;
123 - }
124 -}
125 -.checklist-item-selected {
126 - span {
127 - background-image: url(../../assets/checked.png)
128 - }
129 -}
130 -.check-item {
131 - background: #f6f6f6;
132 - color: #333;
133 - padding: 0.4rem;
134 - border-radius: 0.4rem;
135 - margin: 0.4rem
136 -}
137 -.check-item-disabled {
138 - background: #eaeff7;
139 - color: #ccc;
140 -}
141 -.check-item-selected {
142 - background: #c4d4e7;
143 - color: #2c426b;
144 -}
145 -</style>
1 -<template lang="html">
2 - <div class="">
3 - <checker radio-required @on-change="checkerChange" v-model="checkedValue" default-item-class="radio-item" selected-item-class="radio-item-selected">
4 - <checker-item :value="item.key" v-for="(item, index) in options" :key="index"><i></i><span>{{item.value}}</span></checker-item>
5 - </checker>
6 - </div>
7 -</template>
8 -
9 -<script>
10 -import { Checker, CheckerItem, TransferDom } from 'vux'
11 -export default {
12 - directives: {
13 - TransferDom
14 - },
15 - components: {
16 - Checker,
17 - CheckerItem
18 - },
19 - data () {
20 - return {
21 - checkedValue: '1',
22 - options: [
23 - {
24 - key: '1',
25 - value: '白'
26 - },
27 - {
28 - key: '2',
29 - value: '富'
30 - },
31 - {
32 - key: '3',
33 - value: '美'
34 - },
35 - {
36 - key: '4',
37 - value: '潘'
38 - }
39 - ]
40 - }
41 - },
42 - methods: {
43 - checkerChange (val) {
44 - console.warn(val);
45 - }
46 - }
47 -}
48 -</script>
49 -
50 -<style lang="less" scoped>
51 -.radio-item {
52 - margin-right: 15px;
53 - span {
54 - display: inline-block;
55 - vertical-align: middle;
56 - }
57 - i {
58 - display: inline-block;
59 - width: 1rem;
60 - height: 1rem;
61 - background-size: cover;
62 - background-image: url(../../assets/unradio.png);
63 - vertical-align: middle;
64 - margin-right: 0.5rem;
65 - }
66 -}
67 -.radio-item-selected {
68 - i {
69 - background-image: url(../../assets/radio.png)
70 - }
71 -}
72 -</style>
1 -<template lang="html">
2 - <div class="">
3 - <checker v-model="radioValue" radio-required default-item-class="radio-item" selected-item-class="radio-item-selected">
4 - <checker-item value="1">hehe</checker-item>
5 - <checker-item value="2">haha</checker-item>
6 - </checker>
7 - </div>
8 -</template>
9 -
10 -<script>
11 -import { Checker, CheckerItem, TransferDom } from 'vux'
12 -export default {
13 - directives: {
14 - TransferDom
15 - },
16 - components: {
17 - Checker,
18 - CheckerItem
19 - },
20 - data () {
21 - return {
22 - radioValue: ''
23 - }
24 - }
25 -}
26 -</script>
27 -
28 -<style lang="less">
29 -.radio-item {
30 - border: 1px solid #ececec;
31 - padding: 5px 15px;
32 -}
33 -.radio-item-selected {
34 - border: 1px solid green;
35 -}
36 -</style>
1 -<template lang="html">
2 - <label>
3 - <input type="checkbox" :checked="shouldBeChecked" :value="value" @change="updateInput">
4 - {{ label }}
5 - </label>
6 -</template>
7 -<script>
8 -export default {
9 - model: {
10 - prop: 'modelValue',
11 - event: 'change'
12 - },
13 - props: {
14 - value: {
15 - type: String
16 - },
17 - modelValue: {
18 - default: false
19 - },
20 - label: {
21 - type: String,
22 - required: true
23 - },
24 - trueValue: {
25 - default: true
26 - },
27 - falseValue: {
28 - default: false
29 - }
30 - },
31 - computed: {
32 - shouldBeChecked () {
33 - if (this.modelValue instanceof Array) {
34 - return this.modelValue.includes(this.value)
35 - }
36 - return this.modelValue === this.trueValue
37 - }
38 - },
39 - methods: {
40 - updateInput (event) {
41 - let isChecked = event.target.checked
42 -
43 - if (this.modelValue instanceof Array) {
44 - let newValue = [...this.modelValue]
45 -
46 - if (isChecked) {
47 - newValue.push(this.value)
48 - } else {
49 - newValue.splice(newValue.indexOf(this.value), 1)
50 - }
51 -
52 - this.$emit('change', newValue)
53 - } else {
54 - this.$emit('change', isChecked ? this.trueValue : this.falseValue)
55 - }
56 - }
57 - }
58 -}
59 -</script>
1 -<template>
2 - <div class="selectbox">
3 - <div class="selectall">
4 - <div class="check-head" style="margin: 0 0 0 10px">
5 - <check-all :value.sync="isAll" @click.native="selectAll(isAll)">全部商品</check-all>
6 - <p style="display: inline-block">
7 - (<span style="color: #8fb5de">{{currSum}}</span>/<span>{{totalSum}}</span>)
8 - </p>
9 - </div>
10 - </div>
11 - <div
12 - class="selectlist"
13 - v-for="(item, index) in data"
14 - :key="item.id">
15 - <div class="dash-line">
16 - <span></span>
17 - </div>
18 - <div class="check-head" style="margin: 0 0 10px 15px">
19 - <check-all :value.sync="item.isCheck" @click.native="checkAllClick(item.isCheck, index)">{{ item.name }}</check-all>
20 - <p style="display: inline-block">
21 - (<span style="color: #8fb5de">{{item.currItemCount}}</span>/<span>{{item.currTotal}}</span>)
22 - </p>
23 - </div>
24 - <checker
25 - v-model="item.selectedList"
26 - type="checkbox"
27 - default-item-class="check-item"
28 - disabled-item-class="check-item-disabled"
29 - selected-item-class="check-item-selected"
30 - @on-change="checkerChange(item.selectedList, index)"
31 - class="check-item-wrap-self">
32 - <checker-item
33 - v-for="(item, index) in item.list"
34 - :key="index"
35 - :value="item.key"
36 - v-if="!item.disabled"
37 - :disabled="item.disabled">{{item.value}}</checker-item>
38 - </checker>
39 - </div>
40 - </div>
41 -</template>
42 -
43 -<script>
44 -import { Checker, CheckerItem, CheckIcon, TransferDom } from 'vux'
45 -import CheckAll from 'components/isCheckAll/index'
46 -export default {
47 - directives: {
48 - TransferDom
49 - },
50 - components: {
51 - Checker,
52 - CheckerItem,
53 - CheckIcon,
54 - CheckAll
55 - },
56 - data () {
57 - return {
58 - isAll: false,
59 - currSum: 0,
60 - totalSum: 0,
61 - source: [
62 - {
63 - isCheck: true,
64 - id: '123a',
65 - name: '蔬菜类',
66 - currItemCount: 0,
67 - itemTotal: 4,
68 - list: [
69 - {
70 - key: '1',
71 - value: '什锦冷菜'
72 - },
73 - {
74 - key: '2',
75 - value: '经典冷盘甜小菜心太软'
76 - },
77 - {
78 - key: '3',
79 - value: '凉拌黑木耳'
80 - },
81 - {
82 - key: '4',
83 - value: '私房飘香酱牛肉'
84 - }
85 - ]
86 - },
87 - {
88 - isCheck: false,
89 - id: '852a',
90 - name: '肉类',
91 - currItemCount: 0,
92 - itemTotal: 5,
93 - list: [
94 - {
95 - key: 'b',
96 - value: '咸水鸭',
97 - isSelected: true
98 - },
99 - {
100 - key: 'c',
101 - value: '酱香牛肉'
102 - },
103 - {
104 - key: 'd',
105 - value: '羊肉'
106 - },
107 - {
108 - key: 'e',
109 - value: '凉拌猪耳朵'
110 - },
111 - {
112 - key: 'g',
113 - value: '海蜇头'
114 - }
115 - ]
116 - }
117 - ],
118 - data: [
119 - {
120 - isCheck: false,
121 - id: '123a',
122 - name: '蔬菜类',
123 - currItemCount: 2,
124 - currTotal: 4,
125 - selectedList: ['1', '2'],
126 - list: [
127 - {
128 - key: '1',
129 - value: '什锦冷菜'
130 - },
131 - {
132 - key: '2',
133 - value: '经典冷盘甜小菜心太软'
134 - },
135 - {
136 - key: '3',
137 - value: '凉拌黑木耳'
138 - },
139 - {
140 - key: '4',
141 - value: '私房飘香酱牛肉'
142 - }
143 - ]
144 - },
145 - {
146 - isCheck: false,
147 - id: '852a',
148 - name: '肉类',
149 - currItemCount: 1,
150 - currTotal: 5,
151 - selectedList: ['b'],
152 - list: [
153 - {
154 - key: 'b',
155 - value: '咸水鸭'
156 - },
157 - {
158 - key: 'c',
159 - value: '酱香牛肉'
160 - },
161 - {
162 - key: 'd',
163 - value: '羊肉'
164 - },
165 - {
166 - key: 'e',
167 - value: '凉拌猪耳朵'
168 - },
169 - {
170 - key: 'g',
171 - value: '海蜇头'
172 - }
173 - ]
174 - }
175 - ]
176 - }
177 - },
178 - mounted () {
179 - this.currSum = _.sum(_.map(this.data, 'currItemCount'))
180 - this.totalSum = _.sum(_.map(this.data, 'currTotal'))
181 - },
182 - methods: {
183 - checkAllClick (val, index) {
184 - const selectedKey = _.map(this.data[index].list, 'key')
185 - if (val === true) {
186 - this.data[index].selectedList = selectedKey
187 - this.data[index].currItemCount = this.data[index].currTotal
188 - } else {
189 - this.data[index].selectedList = []
190 - this.data[index].currItemCount = 0
191 - }
192 - this.currSum = _.sum(_.map(this.data, 'currItemCount'))
193 - if (this.currSum === this.totalSum) {
194 - this.isAll = true
195 - } else {
196 - this.isAll = false
197 - }
198 - },
199 - checkerChange (value, index) {
200 - if (value.length === this.data[index].list.length) {
201 - this.data[index].isCheck = true
202 - } else {
203 - this.data[index].isCheck = false
204 - }
205 - this.data[index].selectedList = value
206 - this.data[index].currItemCount = this.data[index].selectedList.length
207 - this.currSum = _.sum(_.map(this.data, 'currItemCount'))
208 - if (this.currSum === this.totalSum) {
209 - this.isAll = true
210 - } else {
211 - this.isAll = false
212 - }
213 - },
214 - selectAll (val) {
215 - const source = this.data
216 - if (val === true) {
217 - _(source).each(function (item, index) {
218 - source[index].selectedList = _.map(item.list, 'key')
219 - source[index].isCheck = true
220 - })
221 - this.currSum = this.totalSum
222 - } else {
223 - _(source).each(function (item, index) {
224 - source[index].selectedList = []
225 - source[index].isCheck = false
226 - })
227 - this.currSum = 0
228 - }
229 - }
230 - }
231 -}
232 -</script>
233 -
234 -<style lang="less" scoped>
235 -.dash-line {
236 - padding: 0.6rem 0;
237 - span{
238 - display: block;
239 - width: 100%;
240 - border-bottom: 1px dashed #d9d9db;
241 - }
242 -}
243 -.checklist-item {
244 - span {
245 - display: inline-block;
246 - width: 1.2rem;
247 - height: 1.2rem;
248 - background-size: cover;
249 - background-image: url(../../assets/unchecked.png);
250 - vertical-align: middle;
251 - margin-right: 0.5rem;
252 - }
253 -}
254 -.checklist-item-selected {
255 - span {
256 - background-image: url(../../assets/checked.png)
257 - }
258 -}
259 -.check-item {
260 - background: #f6f6f6;
261 - color: #333;
262 - padding: 0.4rem;
263 - border-radius: 0.4rem;
264 - margin: 0.4rem
265 -}
266 -.check-item-disabled {
267 - background: #eaeff7;
268 - color: #ccc;
269 -}
270 -.check-item-selected {
271 - background: #c4d4e7;
272 - color: #2c426b;
273 -}
274 -</style>
1 -<template lang="html">
2 - <div>
3 - <demo></demo>
4 - </div>
5 -</template>
6 -
7 -<script>
8 -import demo from './test-index'
9 -export default {
10 - components: {
11 - demo
12 - },
13 - data ( ) {
14 - return {
15 -
16 - }
17 - }
18 -}
19 -</script>
20 -
21 -<style lang="less">
22 -</style>
1 -<template lang="html">
2 - <div class="multiSelect">
3 - <div style="height: 16rem; overflow-y: scroll;">
4 - <div style="border-bottom: 1px dashed #d9d9db;">
5 - <div class="check-head" style="margin: 0.8rem 0 0.8rem 2px">
6 - <check-icon :value.sync="checkAll" @click.native="selectAll(checkAll)">{{allName}}</check-icon>
7 - <p style="display: inline-block">
8 - (<span style="color: #8fb5de">{{currCount}}</span>/<span>{{currTotal}}</span>)
9 - </p>
10 - </div>
11 - </div>
12 - <div
13 - class="list"
14 - v-for="(item, index) in items"
15 - :keys="index">
16 - <div class="check-head" style="margin: 0.4rem 0 0.4rem 15px">
17 - <check-icon :value.sync="item.currCheckAll" @click.native="checkItemAll(item.currCheckAll, index)">{{item.name}}</check-icon>
18 - <p style="display: inline-block">
19 - (<span style="color: #8fb5de">{{item.currItemCount}}</span>/<span>{{item.currItemTotal}}</span>)
20 - </p>
21 - </div>
22 - <checker
23 - v-model="item.selectedList"
24 - type="checkbox"
25 - default-item-class="check-item"
26 - disabled-item-class="check-item-disabled"
27 - selected-item-class="check-item-selected"
28 - @on-change="checkerChange(item.selectedList, index)"
29 - class="check-item-wrap-self">
30 - <checker-item
31 - v-for="(list, index) in item.lists"
32 - :key="index"
33 - :value="list.key"
34 - v-if="!list.disabled"
35 - :disabled="list.disabled">{{list.value}}</checker-item>
36 - </checker>
37 - </div>
38 - </div>
39 - <x-button mini class="default-btn" @click.native="getSelected">完成</x-button>
40 - </div>
41 -</template>
42 -
43 -<script>
44 -import { Checker, CheckerItem, CheckIcon, TransferDom, XButton } from 'vux'
45 -export default {
46 - name: 'multiCheck',
47 - props: ['items', 'allName'],
48 - components: {
49 - Checker,
50 - CheckerItem,
51 - CheckIcon,
52 - TransferDom,
53 - XButton
54 - },
55 - data () {
56 - return {
57 - currAllSelected: [],
58 - checkAll: false,
59 - currCheckAll: false,
60 - currCount: null,
61 - currTotal: null,
62 - currItemCount: null,
63 - currItemTotal: null
64 - }
65 - },
66 - mounted () {
67 - this.currCount = _.sum(_.map(this.items, 'currItemCount'))
68 - this.currTotal = _.sum(_.map(this.items, 'currItemTotal'))
69 - this.getSelectedF(this.items)
70 - },
71 - methods: {
72 - getSelectedF (arr) {
73 - this.currAllSelected = _.flattenDeep(_.map(arr, 'selectedList'))
74 - },
75 - selectAll (val) {
76 - const source = this.items
77 - if (val === true) {
78 - _(source).each(function (item, index) {
79 - source[index].selectedList = _.map(item.lists, 'key')
80 - source[index].currCheckAll = true
81 - })
82 - this.currCount = this.currTotal
83 - } else {
84 - _(source).each(function (item, index) {
85 - source[index].selectedList = []
86 - source[index].currCheckAll = false
87 - })
88 - this.currCount = 0
89 - }
90 - this.getSelectedF(this.items)
91 - },
92 - checkItemAll (val, index) {
93 - const selectedKey = _.map(this.items[index].lists, 'key')
94 - if (val === true) {
95 - this.items[index].selectedList = selectedKey
96 - this.items[index].currItemCount = this.items[index].currItemTotal
97 - } else {
98 - this.items[index].selectedList = []
99 - this.items[index].currItemCount = 0
100 - }
101 - this.currCount = _.sum(_.map(this.items, 'currItemCount'))
102 - if (this.currCount === this.currTotal) {
103 - this.checkAll = true
104 - } else {
105 - this.checkAll = false
106 - }
107 - this.getSelectedF(this.items)
108 - },
109 - checkerChange (value, index) {
110 - this.$emit('listChange', value)
111 - if (value.length === this.items[index].lists.length) {
112 - this.items[index].currCheckAll = true
113 - } else {
114 - this.items[index].currCheckAll = false
115 - }
116 - this.items[index].selectedList = value
117 - this.items[index].currItemCount = this.items[index].selectedList.length
118 - this.currCount = _.sum(_.map(this.items, 'currItemCount'))
119 - if (this.currCount === this.currTotal) {
120 - this.checkAll = true
121 - } else {
122 - this.checkAll = false
123 - }
124 - this.getSelectedF(this.items)
125 - },
126 - getSelected () {
127 - this.$emit('getSelected', this.currAllSelected)
128 - }
129 - }
130 -}
131 -</script>
132 -
133 -<style lang="less">
134 -.multiSelect {
135 - .dash-line {
136 - padding: 0.6rem 0;
137 - span{
138 - display: block;
139 - width: 100%;
140 - border-bottom: 1px dashed #d9d9db;
141 - }
142 - }
143 - .list {
144 - border-bottom: 1px dashed #d9d9db;
145 - padding: 0.3rem 0
146 - }
147 - .check-item {
148 - background: #f6f6f6;
149 - color: #333;
150 - padding: 0.4rem;
151 - border-radius: 0.4rem;
152 - margin: 0.4rem
153 - }
154 - .check-item-disabled {
155 - background: #eaeff7;
156 - color: #ccc;
157 - }
158 - .check-item-selected {
159 - background: #c4d4e7;
160 - color: #2c426b;
161 - }
162 - .default-btn {
163 - display: block;
164 - width: 60%;
165 - margin: 1rem auto 0;
166 - background: #86aace;
167 - border: 1px solid #86aace;
168 - color: #fff;
169 - }
170 - .vux-check-icon > .weui-icon-success:before, .vux-check-icon > .weui-icon-success-circle:before {
171 - color: #c4d4e7
172 - }
173 -}
174 -</style>
1 -<template lang="html">
2 - <div class="">
3 - <confirm
4 - :title="title"
5 - :value="show"
6 - :left_text="left_text"
7 - :right_text="right_text"
8 - @on-cancel="onCancel"
9 - @on-confirm="onConfirm"
10 - @on-show="onShow"
11 - @on-hide="onHide">
12 - 自定义插入内容
13 - </confirm>
14 - <group>
15 - <x-switch title="测试开关" v-model="show"></x-switch>
16 - </group>
17 - </div>
18 -</template>
19 -
20 -<script>
21 -import confirm from 'components/confirm/index'
22 -import { Group, XSwitch } from 'vux'
23 -
24 -export default {
25 - components: { confirm, Group, XSwitch },
26 - data () {
27 - return {
28 - title: '温馨提示',
29 - left_text: '下一步',
30 - right_text: '继续',
31 - show: false
32 - }
33 - },
34 - mounted () {
35 - },
36 - methods: {
37 - onCancel () {
38 - console.warn('on-cancel');
39 - },
40 - onConfirm (msg) {
41 - console.warn('on-confirm', msg);
42 - },
43 - onHide () {
44 - console.warn('on-hide');
45 - },
46 - onShow () {
47 - console.warn('on-show');
48 - }
49 - }
50 -}
51 -</script>
52 -
53 -<style lang="less">
54 -</style>
1 -<template lang="html">
2 - <div v-transfer-dom>
3 - <confirm v-model="show"
4 - :title="title"
5 - :confirm-text="right_text"
6 - :cancel-text="left_text"
7 - :close-on-confirm="close_confirm"
8 - ref="confirm"
9 - @on-cancel="onCancel"
10 - @on-confirm="onConfirm"
11 - @on-show="onShow"
12 - @on-hide="onHide">
13 - <slot></slot>
14 - </confirm>
15 - </div>
16 -</template>
17 -
18 -<script>
19 -import { TransferDomDirective as TransferDom, Confirm } from 'vux'
20 -
21 -export default {
22 - components: { Confirm },
23 - directives: { TransferDom },
24 - props: {
25 - title: {
26 - required: true
27 - },
28 - value: {
29 - required: true
30 - },
31 - left_text: {
32 - required: true
33 - },
34 - right_text: {
35 - required: true
36 - },
37 - close_confirm: {
38 - default: false
39 - }
40 - },
41 - data () {
42 - return {
43 - }
44 - },
45 - mounted () {
46 - },
47 - computed: {
48 - show: {
49 - get () {
50 - return this.value
51 - },
52 - set (val) {}
53 - }
54 - },
55 - methods: {
56 - onCancel () {
57 - this.$emit('on-cancel');
58 - },
59 - onConfirm (msg) {
60 - this.$emit('on-confirm', msg);
61 - },
62 - onHide () {
63 - this.$emit('on-hide');
64 - },
65 - onShow () {
66 - this.$emit('on-show');
67 - }
68 - }
69 -}
70 -</script>
71 -
72 -<style lang="less">
73 - .weui-dialog__btn.weui-dialog__btn_primary {
74 - color: #353535;
75 - }
76 - .weui-dialog__hd {
77 - background-color: #8ea9cf;
78 - color: #FFFFFF;
79 - padding: 0.5em 1.6em 0.5em;
80 - }
81 -</style>
1 -<template lang="html">
2 - <div class="circleBtn" @click="onClick">
3 - <i>+</i>
4 - <slot name="text" class="text"></slot>
5 - </div>
6 -</template>
7 -
8 -<script>
9 -export default {
10 - data () {
11 - return {
12 -
13 - }
14 - },
15 - methods: {
16 - onClick () {
17 - this.$emit('circleClick')
18 - }
19 - }
20 -}
21 -</script>
22 -
23 -<style lang="less">
24 -.circleBtn{
25 - display: inline-block;
26 - width: 2rem;
27 - height: 2rem;
28 - border: 1px solid #a2b8d6;
29 - border-radius: 50%;
30 - color: #a2b8d6;
31 - position: relative;
32 - i {
33 - height: 1rem;
34 - line-height: 1rem;
35 - font-size: 1.8rem;
36 - font-weight: 100;
37 - font-style: normal;
38 - position: absolute;
39 - left: 50%;
40 - top: 0;
41 - margin-left: -0.6rem;
42 - }
43 - span{
44 - display: inline-block;
45 - width: 2rem;
46 - font-size: 0.7rem;
47 - text-align: center;
48 - position: absolute;
49 - left: 50%;
50 - bottom: 0;
51 - margin-left: -1rem;
52 - }
53 -}
54 -</style>
1 -
2 -<template lang="html">
3 - <div class="">
4 - <demo @circleClick="add"><span slot="text">添加</span></demo>
5 - <demo @circleClick="relative"><span slot="text">关联</span></demo>
6 - </div>
7 -</template>
8 -
9 -<script>
10 -import Demo from 'components/customBtn/circleBtn'
11 -export default {
12 - components: {
13 - Demo
14 - },
15 - methods: {
16 - add () {
17 - console.warn('addd');
18 - },
19 - relative () {
20 - console.warn('relative');
21 - }
22 - }
23 -}
24 -</script>
25 -
26 -<style lang="css">
27 -</style>
1 -<template>
2 - <div class="">
3 - <datetime
4 - :title="dateTitle"
5 - :show="dateShow"
6 - :confirm_text="confirm_text"
7 - :cancel_text="cancel_text"
8 - @on-cancel="onCancel"
9 - @on-confirm="onConfirm"
10 - @on-hide="onHide"
11 - @on-change="onChange"
12 - ></datetime>
13 - </div>
14 -</template>
15 -<script>
16 - import datetime from 'components/datetime/index'
17 - export default {
18 - components: {
19 - datetime
20 - },
21 - data () {
22 - return {
23 - dateTitle: '生日',
24 - dateShow: true,
25 - confirm_text: '确定',
26 - cancel_text: '取消'
27 - }
28 - },
29 - methods: {
30 - onCancel () {
31 - console.warn('on-cancel');
32 - },
33 - onConfirm (msg) {
34 - console.warn('on-confirm', msg);
35 - },
36 - onHide () {
37 - console.warn('on-hide');
38 - },
39 - onShow () {
40 - console.warn('on-show');
41 - },
42 - onChange () {
43 - console.warn('on-show');
44 - }
45 - }
46 - }
47 -</script>
...\ No newline at end of file ...\ No newline at end of file
1 -<template>
2 - <div class="">
3 - <group>
4 - <datetime
5 - v-model="value"
6 - @on-change="onChange"
7 - :title="title"
8 - :confirm-text="confirm_text"
9 - :cancel-text="cancel_text"
10 - :placeholder="placeholder"
11 - @on-cancel="onCancel"
12 - @on-confirm="onConfirm"
13 - @on-hide="onHide"></datetime>
14 - </group>
15 - </div>
16 -</template>
17 -<script>
18 - /*
19 - 参考vux文档 datetime
20 - */
21 - import { Datetime, Group, XButton } from 'vux'
22 - export default {
23 - components: {
24 - Datetime,
25 - Group,
26 - XButton
27 - },
28 - props: ['title', 'confirm_text', 'cancel_text', 'placeholder', 'value'],
29 - data () {
30 - },
31 - mounted () {},
32 - methods: {
33 - onChange (value) {
34 - // console.warn('on-change', value)
35 - },
36 - log (str1, str2 = '') {
37 - console.warn(str1, str2)
38 - },
39 - onConfirm (val) {
40 - this.$emit('on-confirm', val)
41 - },
42 - onCancel () {
43 - this.$emit('on-cancel')
44 - },
45 - onHide () {
46 - this.$emit('on-hide')
47 - }
48 - }
49 - }
50 -</script>
51 -<style lang="less">
52 - .dp-header {
53 - background-color: #89A9CF;
54 - color: #fff;
55 - .dp-item.dp-left, .dp-item.dp-right {
56 - color: #fff!important;
57 - font-size: 14px;
58 - }
59 - }
60 - .dp-item {
61 - .scroller-item {
62 - font-size:14px;
63 - }
64 - .scroller-item-selected {
65 - font-size: 16px;
66 - }
67 - }
68 -</style>
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
1 -<template lang="html">
2 - <div class="distplan_detail" v-if="dialog.route_index !== null">
3 - <x-dialog :show="show">
4 - <div class="dbox">
5 - <p class="dialog-title">相同送货线路的门店</p>
6 - <p style="text-align:center;">
7 - 每<span v-if="dialog.dist_way === 'D'">天</span><span v-if="dialog.dist_way === 'W'">{{getWeek(dialog.order_day)}}</span><span v-if="dialog.dist_way === 'M'">{{getMonth(dialog.order_day)}}</span>订
8 - </p>
9 - <div>
10 - <p class="dialog-subtitle" style="color:#89a9cf">
11 - {{dialog.store_list[dialog.route_index].route_name}}
12 - </p>
13 - <div class="dialog-store-wrap">
14 - <flexbox justify="space-between">
15 - <flexbox-item style="padding-left:2.8rem;text-align:left;">门店名称</flexbox-item>
16 - <flexbox-item style="padding-right:1.2rem;text-align:right;">到货时间</flexbox-item>
17 - </flexbox>
18 - </div>
19 - <div class="dialog-store">
20 - <flexbox justify="space-between" v-for="(ite, i) in dialog.store_list[dialog.route_index].store_list" class="dialog-store-wrap dialog-store-item" :key="i">
21 - <flexbox-item style="padding-left:8px;text-align:left;">{{ite.store_name}}</flexbox-item>
22 - <flexbox-item style="padding-right:8px;text-align:right;" v-if="dialog.dist_way === 'D'">第{{getDay(ite.dist_day)}}天 {{ite.dist_time}} 到货</flexbox-item>
23 - <flexbox-item style="padding-right:8px;text-align:right;" v-if="dialog.dist_way === 'W'">{{getWeek(ite.dist_day)}} {{ite.dist_time}} 到货</flexbox-item>
24 - <flexbox-item style="padding-right:8px;text-align:right;" v-if="dialog.dist_way === 'M'">{{getMonth(ite.dist_day)}} {{ite.dist_time}} 到货</flexbox-item>
25 - </flexbox>
26 - </div>
27 - </div>
28 - <div v-if="type === 'view'" class="close" @click="close" style="margin-bottom:15px;">关闭</div>
29 - <div v-if="type === 'edit'" class="btn-box" style="margin-bottom:15px;">
30 - <div @click="close">关闭</div>
31 - <div @click="edit">修改</div>
32 - </div>
33 - </div>
34 - </x-dialog>
35 - </div>
36 -</template>
37 -
38 -<script>
39 -import { XDialog, Flexbox, FlexboxItem } from 'vux'
40 -export default {
41 - props: ['show', 'type', 'dialog'],
42 - components: {
43 - XDialog,
44 - Flexbox,
45 - FlexboxItem
46 - },
47 - methods: {
48 - getDay (str) {
49 - console.warn(str);
50 - return (Number(str.split('+')[1][0]) + 1);
51 - },
52 - getWeek (str) {
53 - switch (str) {
54 - case 'MON':
55 - return '周一';
56 - case 'TUE':
57 - return '周二';
58 - case 'WED':
59 - return '周三';
60 - case 'THU':
61 - return '周四';
62 - case 'FRI':
63 - return '周五';
64 - case 'SAT':
65 - return '周六';
66 - case 'SUN':
67 - return '周日';
68 - case 'MON+1w':
69 - return '下周一';
70 - case 'TUE+1w':
71 - return '下周二';
72 - case 'WED+1w':
73 - return '下周三';
74 - case 'THU+1w':
75 - return '下周四';
76 - case 'FRI+1w':
77 - return '下周五';
78 - case 'SAT+1w':
79 - return '下周六';
80 - case 'SUN+1w':
81 - return '下周日';
82 - }
83 - },
84 - getMonth (str) {
85 - if (str === 'last') {
86 - return '月末'
87 - } else {
88 - if (str.split('+').length > 1) {
89 - if (str.split('+')[0] === 'last') {
90 - return '次月月末'
91 - } else {
92 - return '次月' + str.split('+')[0] + '号'
93 - }
94 - } else {
95 - return str + '号';
96 - }
97 - }
98 - },
99 - close () {
100 - this.$emit('close', 'store')
101 - },
102 - edit () {
103 - this.$emit('edit', 'store')
104 - }
105 - }
106 -}
107 -</script>
108 -
109 -<style lang="less">
110 -.weui-dialog {
111 - max-width: 600px;
112 -}
113 -.distplan_detail {
114 - .dialog-title {
115 - text-align: center;
116 - padding: 0.6rem 0;
117 - color: #fff;
118 - background: #8ea8cf;
119 - }
120 - .dialog-content {
121 - max-height: 25rem;
122 - overflow-y: scroll;
123 - }
124 - .dialog-subtitle {
125 - padding: 0.4rem 0.8rem;
126 - text-align: left;
127 - }
128 - .dialog-wrap {
129 - &:after {
130 - display: block;
131 - content: '';
132 - clear: both;
133 - }
134 - .dialog-item {
135 - float: left;
136 - width: 45%;
137 - padding: 0.2rem 0;
138 - margin: 0.2rem 0.4rem;
139 - text-align: center;
140 - background: #F0EFF5;
141 - border-radius: 3px;
142 - }
143 - }
144 - .close {
145 - width: 95%;
146 - margin: 0 auto;
147 - background: #8ea8cf;
148 - text-align: center;
149 - padding: 0.4rem 0;
150 - color: #fff;
151 - margin-top: 1rem;
152 - border-radius: 5px;
153 - }
154 - .btn-box {
155 - display: flex;
156 - justify-content: space-around;
157 - margin-top: 1rem;
158 - div {
159 - width: 46%;
160 - border-radius: 5px;
161 - padding: 0.4rem 0;
162 - &:first-of-type {
163 - background: #fff;
164 - color: #89a9cf;
165 - border: 1px solid #89a9cf;
166 - }
167 - &:last-of-type {
168 - background: #89a9cf;
169 - color: #fff;
170 - }
171 - }
172 - }
173 - .dialog-store {
174 - max-height: 25rem;
175 - overflow-y: auto;
176 - }
177 - .dialog-store-wrap {
178 - border-bottom: 1px solid #d6d7dc;
179 - padding-bottom: 0.6rem;
180 - span {
181 - padding: 0.3rem 0;
182 - }
183 - }
184 - .dialog-store-item {
185 - height: 3rem;
186 - padding: 0.4rem 0;
187 - }
188 -}
189 -</style>
1 -<template lang="html">
2 - <div style="background-color: white;">
3 - <flexbox class="inline-wraper-content">
4 - <flexbox-item :span="8" class="left-wrapper">
5 - {{leftText}}
6 - <slot name="left"></slot>
7 - </flexbox-item>
8 - <flexbox-item :span="4">
9 - <slot name="right"></slot>
10 - </flexbox-item>
11 - </flexbox>
12 - <flexbox-item>
13 - <slot name="bottom"></slot>
14 - </flexbox-item>
15 - </div>
16 -</template>
17 -
18 -<script>
19 -import { Flexbox, FlexboxItem } from 'vux'
20 -export default {
21 - props: ['leftText'],
22 - components: { Flexbox, FlexboxItem }
23 -}
24 -</script>
25 -
26 -<style lang="less">
27 - .inline-wraper-content {
28 - border-bottom: 1px solid #eee;
29 - .left-wrapper {
30 - text-indent: 0.5rem;
31 - font-size: 0.85rem;
32 - }
33 - }
34 -</style>
1 -<template lang="html">
2 - <inline-wraper :leftText="v.name" v-for="(v, k) in list" :key="k">
3 - <template slot="left">
4 - <div v-if="!v.is_set" class="unset-name">{{v.name}}</div>
5 - <div v-else class="enable-set-name">{{v.name}} (已设置)</div>
6 - </template>
7 - <template slot="right">
8 - <div style="">
9 - <div v-if="!v.is_set" @click="setBom(v, k)" class="un-set-btn">设置BOM{{bom_code}}</div>
10 - <div v-else @click="editBom(v, k)" class="set-enable-btn">设置BOM{{bom_code}}</div>
11 - </div>
12 - </template>
13 - <template slot="bottom">
14 - <div>
15 - <div v-if="!item.data.is_set" @click="setBom(item.data)" class="un-set-btn">设置BOM{{bom_code > 1 ? bom_code : '1'}}</div>
16 - <div v-else class="set-enable-btn" @click="setBom(item.data)">设置BOM{{bom_code > 1 ? bom_code : '1'}}</div>
17 - </div>
18 - </template>
19 - </inline-wraper>
20 -</template>
21 -
22 -<script>
23 -import inlineWraper from 'components/inlineWraper/index'
24 -export default {
25 - components: {inlineWraper}
26 -}
27 -</script>
28 -
29 -<style lang="less">
30 -</style>
1 -<template lang="html">
2 - <div class="">
3 - <demo :value.sync="demo1" type="all" @update="choose(demo1)">test</demo>
4 - </div>
5 -</template>
6 -
7 -<script>
8 -import Demo from 'components/isCheckAll/index'
9 -export default {
10 - components: { Demo },
11 - data () {
12 - return {
13 - demo1: true
14 - }
15 - },
16 - methods: {
17 - choose (val) {
18 - console.warn(val);
19 - }
20 - }
21 -}
22 -</script>
23 -
24 -<style lang="css">
25 -</style>
1 -<template>
2 - <div class="checkBox" @click="updateValue">
3 - <span class="checkItem allSelected" v-show="type === 'all' && value"></span>
4 - <span class="checkItem noSelected" v-show="!value"></span>
5 - <font><slot></slot></font>
6 - </div>
7 -</template>
8 -<script>
9 -export default {
10 - name: 'isCheckAll',
11 - methods: {
12 - updateValue () {
13 - this.$emit('update:value', !this.value)
14 - }
15 - },
16 - props: {
17 - value: {
18 - type: Boolean,
19 - default: false
20 - },
21 - type: {
22 - type: String,
23 - default: 'all'
24 - }
25 - }
26 -}
27 -</script>
28 -
29 -<style lang="less">
30 -.checkBox {
31 - display: inline-block;
32 - .checkItem {
33 - display: inline-block;
34 - width: 1.3rem;
35 - height: 1.3rem;
36 - text-align: center;
37 - vertical-align: middle;
38 - background-size: cover;
39 - }
40 - .allSelected {
41 - background-image: url(../../assets/all.png);
42 - }
43 - .partSelected {
44 - background-image: url(../../assets/part.png);
45 - }
46 - .noSelected {
47 - background-image: url(../../assets/no.png);
48 - }
49 - font {
50 - font-size: 0.9rem;
51 - vertical-align: middle;
52 - }
53 -}
54 -</style>
1 -<template lang="html">
2 - <div class="materiel_detail">
3 - <x-dialog :show="show">
4 - <div class="dbox">
5 - <p class="dialog-title">同时订货的物料</p>
6 - <div class="dialog-content">
7 - <div v-for="(item, index) in list" :key="index">
8 - <p class="dialog-subtitle">
9 - {{item.class_name}}{{item.sku_list.length}}
10 - </p>
11 - <div class="dialog-wrap">
12 - <p class="dialog-item" v-for="(it, i) in item.sku_list">{{it.sku_name}}</p>
13 - </div>
14 - </div>
15 - </div>
16 - <div v-if="type === 'view'" class="close" @click="close" style="margin-bottom:15px;">关闭</div>
17 - <div v-if="type === 'edit'" class="btn-box" style="margin-bottom:15px;">
18 - <div @click="close">关闭</div>
19 - <div @click="edit">修改</div>
20 - </div>
21 - </div>
22 - </x-dialog>
23 - </div>
24 -</template>
25 -
26 -<script>
27 -import { XDialog } from 'vux'
28 -import { setTimeout } from 'timers';
29 -export default {
30 - props: ['type', 'list', 'show'],
31 - components: {
32 - XDialog
33 - },
34 - watch: {
35 - list () {
36 - setTimeout(() => {
37 - let items = document.getElementsByClassName('dialog-item');
38 - console.warn(items);
39 - let leftHeight = 0;
40 - let rightHeight = 0;
41 - for (let i = 0; i < items.length; i++) {
42 - if (!(i % 2)) {
43 - leftHeight = $(items[i]).innerHeight();
44 - } else if (i % 2) {
45 - rightHeight = $(items[i]).innerHeight();
46 - console.warn(leftHeight, rightHeight)
47 - if (leftHeight > rightHeight) {
48 - // items[i].style.height = leftHeight;
49 - items[i].style.paddingBottom = items[i].style.paddingTop = (leftHeight - rightHeight) / 2 + 'px';
50 - } else if (rightHeight > leftHeight) {
51 - // items[i - 1].style.height = rightHeight;
52 - items[i - 1].style.paddingBottom = items[i - 1].style.paddingTop = (rightHeight - leftHeight) / 2 + 'px';
53 - }
54 - }
55 - }
56 - }, 1)
57 - }
58 - },
59 - methods: {
60 - close () {
61 - this.$emit('close', 'materiel')
62 - },
63 - edit () {
64 - this.$emit('edit', 'materiel')
65 - }
66 - }
67 -}
68 -</script>
69 -
70 -<style lang="less" scoped>
71 -.materiel_detail {
72 - .dialog-title {
73 - text-align: center;
74 - padding: 0.6rem 0;
75 - color: #fff;
76 - background: #8ea8cf;
77 - }
78 - .dialog-content {
79 - max-height: 25rem;
80 - overflow-y: scroll;
81 - }
82 - .dialog-subtitle {
83 - padding: 0.4rem 0.8rem;
84 - text-align: left;
85 - }
86 - .dialog-wrap {
87 - display: flex;
88 - align-items: center;
89 - flex-wrap: wrap;
90 - justify-content: space-between;
91 - &:after {
92 - display: block;
93 - content: '';
94 - clear: both;
95 - }
96 - .dialog-item {
97 - width: 45%;
98 - // padding: 0.2rem 0;
99 - margin: 0.2rem 0.4rem;
100 - text-align: center;
101 - background: #F0EFF5;
102 - border-radius: 3px;
103 - }
104 - }
105 - .close {
106 - width: 95%;
107 - margin: 0 auto;
108 - background: #8ea8cf;
109 - text-align: center;
110 - padding: 0.4rem 0;
111 - color: #fff;
112 - margin-top: 1rem;
113 - border-radius: 5px;
114 - }
115 - .btn-box {
116 - display: flex;
117 - justify-content: space-around;
118 - padding-top: 1rem;
119 - margin-top: 1rem;
120 - border-top: 1px solid #f0eff5;
121 - div {
122 - width: 46%;
123 - padding: 0.4rem 0;
124 - border-radius: 5px;
125 - &:first-of-type {
126 - background: #fff;
127 - color: #89a9cf;
128 - border: 1px solid #89a9cf;
129 - }
130 - &:last-of-type {
131 - background: #89a9cf;
132 - color: #fff;
133 - }
134 - }
135 - }
136 - .dialog-store-wrap {
137 - display: flex;
138 - justify-content: space-between;
139 - padding: 0 0.8rem;
140 - border-bottom: 1px solid #d6d7dc;
141 - span {
142 - padding: 0.3rem 0;
143 - }
144 - }
145 -}
146 -</style>
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
1 -<template>
2 - <div class="pandect_select" v-transfer-dom>
3 - <x-dialog v-model="show">
4 - <div class="pandect_box">
5 - <h4>{{title}}</h4>
6 - <div class="pandect_content">
7 - <ul v-if="type === 'supplier'">
8 - <li @click="check(index)" v-for="(item, index) in data" :key="index" :class="{'actived': item.checked}">{{item.prov_name}}</li>
9 - </ul>
10 - <ul v-if="type === 'materiel'">
11 - <li @click="check(index)" v-for="(item, index) in data" :key="index" :class="{'actived': item.checked}">{{item.name}}</li>
12 - </ul>
13 - <ul v-if="type === 'route'">
14 - <li @click="check(index)" v-for="(item, index) in data" :key="index" :class="{'actived': item.checked}">{{item.name}}</li>
15 - </ul>
16 - </div>
17 - <div class="btn-box">
18 - <div class="close" @click="close">关闭</div>
19 - <div class="confirm" @click="confirm">确定</div>
20 - </div>
21 - </div>
22 - </x-dialog>
23 - </div>
24 -</template>
25 -
26 -<script>
27 -/**
28 - * 订货送货计划总览选择框组件
29 - *
30 - *
31 - * @param {string} title 标题
32 - * @param {array} list 可选择的内容
33 - * @param {boolean} show 是否显示组件
34 - * @param {string} type 类型（根据不同类型，供应商、物料、送货线路，获取到的后端数组字段不同，遍历显示的方式也不同）
35 - * @returns {object}
36 - *
37 - * @date 2018-08-31
38 - */
39 -import { XDialog, TransferDomDirective as TransferDom } from 'vux'
40 -export default {
41 - components: { XDialog, TransferDom },
42 - props: ['title', 'list', 'show', 'type'],
43 - data () {
44 - return {
45 - data: []
46 - }
47 - },
48 - watch: {
49 - list: function (val) {
50 - /**
51 - * 需要使用watch方法来监听外部传入list是否改变，然后使用数组push方法触发子组件视图更新
52 - * ------------------------------------------------------------------
53 - */
54 - this.$vux.loading.hide();
55 - this.data = [];
56 - for (let i = 0; i < val.length; i++) {
57 - // 给每条内容添加一个checked属性，是否选择
58 - val[i].checked = false;
59 - this.data.push(val[i])
60 - }
61 - }
62 - },
63 - methods: {
64 - check (index) {
65 - /**
66 - * 选择某一条内容时，将所有内容的checked设false，并将被选择的内容checked设为true，单选效果
67 - * ------------------------------------------------------------------
68 - */
69 - let arr = []
70 - this.data.forEach(v => {
71 - arr.push(v);
72 - });
73 - this.data = [];
74 - arr.forEach((v, i) => {
75 - v.checked = false;
76 - if (i === index) {
77 - v.checked = true;
78 - }
79 - this.data.push(v);
80 - });
81 - },
82 - close () {
83 - // 关闭
84 - this.$emit('close');
85 - },
86 - confirm () {
87 - /**
88 - * 确认时，返回选中的内容
89 - * ------------------------------------------------------------------
90 - */
91 - let data = null;
92 - this.data.forEach(v => {
93 - if (v.checked) {
94 - data = v;
95 - }
96 - });
97 - this.$emit('confirm', _.cloneDeep(data));
98 - }
99 - }
100 -}
101 -</script>
102 -
103 -<style lang="less" scoped>
104 - .pandect_select {
105 - font-size: 14px;
106 - color: #666;
107 - .pandect_box {
108 - position: relative;
109 - padding-bottom: 3rem;
110 - .pandect_content {
111 - max-height: 20rem;
112 - overflow-y: auto;
113 - }
114 - }
115 - h4 {
116 - font-size: 18px;
117 - color: #333;
118 - padding: 0.4rem 0;
119 - text-align: center;
120 - border-bottom: 1px solid #eee;
121 - }
122 - ul {
123 - margin: 0;
124 - list-style: none;
125 - padding: 0 0.8rem;
126 - li {
127 - padding: 0.4rem 0.6rem;
128 - background: #eee;
129 - margin: 0.6rem 0;
130 - }
131 - .actived {
132 - background: #8ea8cf;
133 - color: #fff;
134 - }
135 - }
136 - .btn-box {
137 - position: absolute;
138 - bottom: 0;
139 - width: 100%;
140 - display: flex;
141 - justify-content: space-around;
142 - div {
143 - width: 48%;
144 - border-radius: 5px;
145 - border: 1px solid #8ea8cf;
146 - text-align: center;
147 - padding: 0.4rem 0;
148 - }
149 - .close {
150 - color: #8ea8cf;
151 - background: #fff;
152 - }
153 - .confirm {
154 - color: #fff;
155 - background: #8ea8cf;
156 - }
157 - }
158 - }
159 -</style>
This diff is collapsed. Click to expand it.
1 -<template lang="html">
2 - <div class="">
3 - <select-list :show="show" :title="'请选择物料'" :caption="'所有分类的物料'" :list="list" :shortcut="shortcut_list" :span="2" @cancel="cancel" @comfirm="comfirm"></select-list>
4 - <div @click="showList">
5 - 显示
6 - </div>
7 - </div>
8 -</template>
9 -
10 -<script>
11 -import selectList from 'components/selectList/index'
12 -
13 -export default {
14 - components: { selectList },
15 - data () {
16 - return {
17 - show: false,
18 - list: [{
19 - category: '所有肉类的物料',
20 - sum: 2,
21 - material_list: [{
22 - sku_id: 1,
23 - sku_name: 'XX物料',
24 - checked: false,
25 - disabled: true
26 - }, {
27 - sku_id: 2,
28 - sku_name: 'XX物料',
29 - checked: false,
30 - disabled: false
31 - }]
32 - }, {
33 - category: '所有蔬菜类的物料',
34 - sum: 2,
35 - material_list: [{
36 - sku_id: 11,
37 - sku_name: 'XX物料',
38 - checked: false,
39 - disabled: false
40 - }, {
41 - sku_id: 22,
42 - sku_name: 'XX物料',
43 - checked: false,
44 - disabled: false
45 - }]
46 - }, {
47 - category: '所有蘑菇类的物料',
48 - sum: 2,
49 - material_list: [{
50 - sku_id: 33,
51 - sku_name: 'XX物料',
52 - checked: false,
53 - disabled: false
54 - }, {
55 - sku_id: 44,
56 - sku_name: 'XX物料',
57 - checked: false,
58 - disabled: false
59 - }]
60 - }],
61 - shortcut_list: [{
62 - sku_name: '蔬菜类12+水果8',
63 - sum: 2,
64 - list: [{
65 - sku_id: 1,
66 - sku_name: 'XX物料'
67 - }, {
68 - sku_id: 2,
69 - sku_name: 'XX物料'
70 - }],
71 - checked: false
72 - }, {
73 - sku_name: '肉类10+小器具12',
74 - sum: 2,
75 - list: [{
76 - sku_id: 11,
77 - sku_name: 'XX物料'
78 - }, {
79 - sku_id: 22,
80 - sku_name: 'XX物料'
81 - }],
82 - checked: false
83 - }, {
84 - sku_name: '肉类10+小器具12',
85 - sum: 4,
86 - list: [{
87 - sku_id: 33,
88 - sku_name: 'XX物料'
89 - }, {
90 - sku_id: 44,
91 - sku_name: 'XX物料'
92 - }, {
93 - sku_id: 55,
94 - sku_name: 'XX物料'
95 - }, {
96 - sku_id: 66,
97 - sku_name: 'XXxxxxx物料'
98 - }, {
99 - sku_id: 77,
100 - sku_name: 'XX物料'
101 - }, {
102 - sku_id: 88,
103 - sku_name: 'XX物料'
104 - }, {
105 - sku_id: 99,
106 - sku_name: 'XX物料'
107 - }, {
108 - sku_id: 100,
109 - sku_name: 'XX物料'
110 - }],
111 - checked: false
112 - }]
113 - }
114 - },
115 - methods: {
116 - showList () {
117 - this.show = true;
118 - },
119 - cancel (v) {
120 - this.show = v;
121 - },
122 - comfirm (v) {
123 - console.warn(v);
124 - }
125 - }
126 -}
127 -</script>
128 -
129 -<style lang="less">
130 -</style>
1 -<template lang="html">
2 - <div class="choose-material-page">
3 - <div v-transfer-dom>
4 - <x-dialog :show.sync="show" class="dialog-demo">
5 - <div class="material-title">请选择{{name}}</div>
6 - <div class="material-wrapper">
7 - <div class="material-classify">
8 - <div>
9 - <check-icon :value.sync="all_checked" @click.native="checkAll(all_checked)">
10 - 全部{{name}}（{{checkList.length}}/{{list.length}}）
11 - </check-icon>
12 - <div class="material-content">
13 - <checker
14 - v-model="checkList"
15 - type="checkbox"
16 - default-item-class="item"
17 - selected-item-class="item-selected"
18 - disabled-item-class="item-disabled"
19 - >
20 - <checker-item class="brand_select" v-for="(item, index) in list" :key="index" :disabled="item.disabled" :value="item.id" @click.native="itemCheck(item.checked, index)">{{item.name}}</checker-item>
21 - </checker>
22 - </div>
23 - </div>
24 - </div>
25 - </div>
26 - <div style="padding: 10px;">
27 - <flexbox>
28 - <flexbox-item>
29 - <x-button @click.native="cancel" mini style="background-color: #ffffff; color: #8EA8CF; border: 1px solid #8EA8CF; width: 100%;">关闭</x-button>
30 - </flexbox-item>
31 - <flexbox-item>
32 - <x-button @click.native="comfirm" mini style="background-color: #8EA8CF; color: #ffffff; border: 1px solid #8EA8CF; width: 100%;">确定</x-button>
33 - </flexbox-item>
34 - </flexbox>
35 - </div>
36 - </x-dialog>
37 - </div>
38 - </div>
39 -</template>
40 -
41 -<script>
42 -import { XDialog, TransferDomDirective as TransferDom, Flexbox, FlexboxItem, CheckIcon, XButton, Checker, CheckerItem } from 'vux'
43 -export default {
44 - props: ['show', 'list', 'checked_list', 'span', 'name'],
45 - directives: { TransferDom },
46 - components: { XDialog, Flexbox, FlexboxItem, CheckIcon, XButton, Checker, CheckerItem },
47 - beforeRouteEnter (to, from, next) {
48 - next()
49 - },
50 - mounted () {
51 - // console.warn(this.list)
52 - // console.warn(1)
53 - },
54 - data () {
55 - return {
56 - all_checked: true,
57 - checkList: []
58 - }
59 - },
60 - watch: {
61 - show (val) {
62 - // console.warn(val)
63 - this.checkList = JSON.parse(JSON.stringify(this.checked_list))
64 - if (val) {
65 - let check_list = _.filter(this.list, (val) => {
66 - let tem;
67 - if (val.disabled === false) {
68 - tem = val
69 - }
70 - return tem
71 - });
72 - // console.warn(check_list, this.checked_list)
73 - if (check_list.length > 0 && this.checked_list.length > 0 && check_list.length === this.checked_list.length) {
74 - this.all_checked = true
75 - } else {
76 - this.all_checked = false
77 - }
78 - } else {
79 - this.all_checked = false
80 - }
81 - // this.checkList = val;
82 - // setTimeout(() => {
83 - // let arr = []
84 - // for (let i = 0; i < $('.brand_select').length; i++) {
85 - // arr.push($('.brand_select').eq(i).height())
86 - // }
87 - // let max = _.max(arr)
88 - // $('.brand_select').height(max)
89 - // }, 100)
90 - }
91 - },
92 - computed: {
93 - // checkList () {
94 - // return JSON.parse(JSON.stringify(this.checked_list));
95 - // }
96 - },
97 - methods: {
98 - checkAll (checked) {
99 - let check_list = _.filter(this.list, (val) => {
100 - let tem;
101 - if (val.disabled === false) {
102 - tem = val
103 - }
104 - return tem
105 - });
106 - // 勾选所有品牌
107 - if (checked) {
108 - // 选中
109 - for (let i = 0; i < check_list.length; i++) {
110 - check_list[i].checked = true;
111 - }
112 - this.checkList = _.map(check_list, val => val.id)
113 - // this.checked_list = id_list;
114 - } else {
115 - // 取消
116 - this.checkList = []
117 - for (let i = 0; i < check_list.length; i++) {
118 - check_list[i].checked = false;
119 - }
120 - }
121 - },
122 - itemCheck (checked, index) {
123 - // console.warn(this.checkList)
124 - let list = _.filter(this.list, (val) => {
125 - let tem;
126 - if (val.disabled === false) {
127 - tem = val
128 - }
129 - return tem
130 - });
131 - if (checked) {
132 - this.list[index].checked = false;
133 - } else {
134 - this.list[index].checked = true;
135 - }
136 - // console.warn(id_list)
137 - if (list.length !== this.checkList.length) {
138 - this.all_checked = false
139 - } else {
140 - this.all_checked = true
141 - }
142 - },
143 - changeCategory () {
144 - },
145 - cancel () {
146 - // 关闭选择框
147 - this.$emit('cancel', !this.show)
148 - },
149 - comfirm () {
150 - // 确认选择框
151 - this.$emit('comfirm', this.checkList)
152 - }
153 - }
154 -}
155 -</script>
156 -
157 -<style lang="less">
158 - .material-title {
159 - line-height: 48px;
160 - font-size: 18px;
161 - }
162 - .material-classify {
163 - text-align: left;
164 - padding: 10px;
165 - .vux-checker-box {
166 - display: flex;
167 - flex-wrap: wrap;
168 - }
169 - .vux-check-icon {
170 - margin-bottom: 10px;
171 - }
172 -
173 - }
174 - .item {
175 - width: 31%;
176 - // flex-basis: 31%;
177 - line-height: 26px;
178 - text-align: center;
179 - border-radius: 3px;
180 - border: 1px solid #ccc;
181 - background-color: #f6f6f6;
182 - margin-bottom: 10px;
183 - margin-right: 2.5%;
184 - color: #333;
185 - display: flex!important;
186 - align-items: center;
187 - justify-content: center;
188 - &:nth-child(3n) {
189 - margin-right: 0;
190 - }
191 - }
192 - .weui-icon-circle {
193 - font-size: 20px!important;
194 - }
195 - .weui-icon-success {
196 - font-size: 20px!important;
197 - }
198 - .vux-check-icon > .weui-icon-success:before, .vux-check-icon > .weui-icon-success-circle:before {
199 - color: #c4d4e7 !important;
200 - }
201 - .item-selected {
202 - color: #2c426b;
203 - background-color: #c4d4e7;
204 - }
205 - .item-disabled {
206 - color: #cfcfcf;
207 - background-color: #ebeef7;
208 - }
209 -
210 - .weui-dialog {
211 - width: 90% !important;
212 - max-width: 400px;
213 - }
214 -
215 - @media screen and (min-width: 1024px) {
216 - .weui-dialog {
217 - width: 35%;
218 - }
219 - }
220 -
221 - .weui-btn:after {
222 - border: 0 !important;
223 - }
224 -</style>
This diff is collapsed. Click to expand it.
1 -<template lang="html">
2 - <div class="">
3 - <select-list :show="show" :title="'请选择物料'" :caption="'所有分类的物料'" :list="list" :shortcut="shortcut_list" :span="2" @cancel="cancel" @comfirm="comfirm"></select-list>
4 - <div @click="showList">
5 - 显示
6 - </div>
7 - </div>
8 -</template>
9 -
10 -<script>
11 -import selectList from 'components/selectList/index'
12 -
13 -export default {
14 - components: { selectList },
15 - data () {
16 - return {
17 - show: false,
18 - list: [{
19 - category: '所有肉类的物料',
20 - sum: 2,
21 - material_list: [{
22 - sku_id: 1,
23 - sku_name: 'XX物料',
24 - checked: false,
25 - disabled: true
26 - }, {
27 - sku_id: 2,
28 - sku_name: 'XX物料',
29 - checked: false,
30 - disabled: false
31 - }]
32 - }, {
33 - category: '所有蔬菜类的物料',
34 - sum: 2,
35 - material_list: [{
36 - sku_id: 11,
37 - sku_name: 'XX物料',
38 - checked: false,
39 - disabled: false
40 - }, {
41 - sku_id: 22,
42 - sku_name: 'XX物料',
43 - checked: false,
44 - disabled: false
45 - }]
46 - }, {
47 - category: '所有蘑菇类的物料',
48 - sum: 2,
49 - material_list: [{
50 - sku_id: 33,
51 - sku_name: 'XX物料',
52 - checked: false,
53 - disabled: false
54 - }, {
55 - sku_id: 44,
56 - sku_name: 'XX物料',
57 - checked: false,
58 - disabled: false
59 - }]
60 - }],
61 - shortcut_list: [{
62 - sku_name: '蔬菜类12+水果8',
63 - sum: 2,
64 - list: [{
65 - sku_id: 1,
66 - sku_name: 'XX物料'
67 - }, {
68 - sku_id: 2,
69 - sku_name: 'XX物料'
70 - }],
71 - checked: false
72 - }, {
73 - sku_name: '肉类10+小器具12',
74 - sum: 2,
75 - list: [{
76 - sku_id: 11,
77 - sku_name: 'XX物料'
78 - }, {
79 - sku_id: 22,
80 - sku_name: 'XX物料'
81 - }],
82 - checked: false
83 - }, {
84 - sku_name: '肉类10+小器具12',
85 - sum: 4,
86 - list: [{
87 - sku_id: 33,
88 - sku_name: 'XX物料'
89 - }, {
90 - sku_id: 44,
91 - sku_name: 'XX物料'
92 - }, {
93 - sku_id: 55,
94 - sku_name: 'XX物料'
95 - }, {
96 - sku_id: 66,
97 - sku_name: 'XXxxxxx物料'
98 - }, {
99 - sku_id: 77,
100 - sku_name: 'XX物料'
101 - }, {
102 - sku_id: 88,
103 - sku_name: 'XX物料'
104 - }, {
105 - sku_id: 99,
106 - sku_name: 'XX物料'
107 - }, {
108 - sku_id: 100,
109 - sku_name: 'XX物料'
110 - }],
111 - checked: false
112 - }]
113 - }
114 - },
115 - methods: {
116 - showList () {
117 - this.show = true;
118 - },
119 - cancel (v) {
120 - this.show = v;
121 - },
122 - comfirm (v) {
123 - console.warn(v);
124 - }
125 - }
126 -}
127 -</script>
128 -
129 -<style lang="less">
130 -</style>
1 -<template lang="html">
2 - <div class="financial_manager">
3 - <!-- <p>请选择</p> -->
4 - <selectPage :text="text" :checkedList="checked" :list="list" @change-text="changeText" @change="selected"></selectPage>
5 - </div>
6 -</template>
7 -
8 -<script>
9 - import selectPage from './index.vue'
10 - export default {
11 - components: {
12 - selectPage
13 - },
14 - data () {
15 - return {
16 - text: '',
17 - checked: ['002', '003'],
18 - list: [
19 - {
20 - id: '001',
21 - value: '肉'
22 - },
23 - {
24 - id: '002',
25 - value: '青菜'
26 - },
27 - {
28 - id: '003',
29 - value: '啤酒'
30 - },
31 - {
32 - id: '004',
33 - value: '水果'
34 - },
35 - {
36 - id: '005',
37 - value: '水果'
38 - },
39 - {
40 - id: '006',
41 - value: '水果'
42 - },
43 - {
44 - id: '007',
45 - value: '水果'
46 - },
47 - {
48 - id: '008',
49 - value: '水果'
50 - },
51 - {
52 - id: '009',
53 - value: '水果'
54 - },
55 - {
56 - id: '010',
57 - value: '水果'
58 - },
59 - {
60 - id: '011',
61 - value: '水果'
62 - }
63 - ]
64 - }
65 - },
66 - methods: {
67 - selected (id) {
68 - console.warn(id);
69 - },
70 - changeText (val) {
71 - this.text = val;
72 - }
73 - }
74 - }
75 -</script>
76 -
77 -<style lang="less">
78 -</style>
1 -<template>
2 - <div class="select-check">
3 - <p><span @touchstart.capture="open">{{text}}<icon class="Icon" type="warn"></icon></span></p>
4 - <transition name="component-fade" mode="out-in">
5 - <div class="select-content" v-if="show">
6 - <p class="select-up">请选择<icon class="Icon Icon_up" type="warn"></icon></p>
7 - <div>
8 - <checker
9 - class="checkbox"
10 - v-model="checkList"
11 - type="checkbox"
12 - default-item-class="select-item"
13 - selected-item-class="select-item-selected"
14 - @on-change="selected"
15 - >
16 - <checker-item v-for="item in list" :key="item.id" :value="item.id" >{{item.value}}</checker-item>
17 - </checker>
18 - <x-button class="select-btn" @click.native="submit">确　定</x-button>
19 - </div>
20 - </div>
21 - </transition>
22 - <!-- </transition-group> -->
23 -
24 - </div>
25 -</template>
26 -<script>
27 -/*
28 - 下拉多选
29 - 数据：
30 - checkList: 选中列表集合;
31 - list: 选项列表集合;
32 -
33 - 方法：
34 - selected: 选项发生改变之后的回调，返回选中项的id;
35 - submit: 点击确定之后的回调;
36 -*/
37 - import { XButton, Checker, CheckerItem, Icon } from 'vux'
38 - export default {
39 - components: {
40 - XButton,
41 - Checker,
42 - CheckerItem,
43 - Icon
44 - },
45 - props: {
46 - text: {
47 - type: String,
48 - default: '请选择'
49 - },
50 - list: {
51 - type: Array,
52 - default: []
53 - },
54 - checkedList: {
55 - type: Array,
56 - default: []
57 - }
58 - },
59 - data () {
60 - return {
61 - show: false,
62 - checkList: []
63 - }
64 - },
65 - created () {
66 - let text;
67 - if (this.checkedList.length != 0) {
68 - text = '已选择' + this.checkedList.length + '个选项';
69 - } else {
70 - text = '请选择'
71 - }
72 - this.$emit('change-text', text)
73 - },
74 - mounted () {
75 - // console.warn(this.checkedList)
76 - this.checkList = this.checkedList
77 - },
78 - methods: {
79 - open () {
80 - this.show = true;
81 - },
82 - selected () {
83 - let text;
84 - if (this.checkList.length != 0) {
85 - text = '已选择' + this.checkList.length + '个选项';
86 - } else {
87 - text = '请选择'
88 - };
89 - this.$emit('change-text', text)
90 - this.$emit('change', this.checkList)
91 - },
92 - submit () {
93 - if (this.checkList.length > 0) {
94 - let text = '已选择' + this.checkList.length + '个选项';
95 - this.$emit('change-text', text)
96 - this.show = false;
97 - } else {
98 - this.$vux.toast.show({
99 - text: '请选择内容',
100 - type: 'text'
101 - })
102 - }
103 - }
104 - }
105 - }
106 -</script>
107 -<style lang="less" scoped>
108 - .select-check {
109 - p {
110 - font-size: 16px;
111 - color: #333;
112 - text-align: right;
113 - padding: 10px 5px 10px 0;
114 - border-bottom: 1px solid #d6d7dc;
115 - .Icon {
116 - position: relative;
117 - font-size: 0;
118 - margin-left: 15px;
119 - }
120 - .Icon:before {
121 - width: 0;
122 - height: 0;
123 - }
124 - .Icon:after {
125 - content: " ";
126 - display: inline-block;
127 - height: 10px;
128 - width: 10px;
129 - border-width: 2px 2px 0 0;
130 - border-color: #C8C8CD;
131 - border-style: solid;
132 - transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
133 - position: relative;
134 - top: -2px;
135 - position: absolute;
136 - top: 50%;
137 - margin-top: -8px;
138 - right: 2px;
139 - }
140 - .Icon_up {
141 - margin-left: 22px;
142 - }
143 - .Icon_up:after {
144 - border-width: 0 2px 2px 0;
145 - margin-top: -11px;
146 - }
147 - }
148 - .checkbox {
149 - padding: 10px 0;
150 - display: flex;
151 - flex-flow: row wrap;
152 - justify-content: space-between;
153 - .select-item {
154 - background-color: #f6f6f6;
155 - color: #999;
156 - font-size: 14px;
157 - text-align: center;
158 - padding: 5px 10px;
159 - margin-bottom: 10px;
160 - line-height: 18px;
161 - border: 1px solid #f6f6f6;
162 - border-radius: 5px;
163 - flex: 0 0 18%;
164 - box-sizing: border-box;
165 - }
166 - .select-item-selected {
167 - background-color: #c4d4e7;
168 - color: #999;
169 - border-color: #c4d4e7;
170 - }
171 - .select-item-disabled {
172 - color: #999;
173 - }
174 - }
175 - .select-btn {
176 - background-color: #c4d4e7;
177 - font-size: 16px;
178 - color: #fff;
179 - &:after{
180 - border: 0;
181 - }
182 - &:not(.weui-btn_disabled):active {
183 - background-color: #89a9cf;
184 - color: #fff;
185 - }
186 - }
187 - }
188 -.component-fade-enter-active, .component-fade-leave-active {
189 - transition: opacity .3s ease;
190 -}
191 -.component-fade-enter, .component-fade-leave-to {
192 - opacity: 0;
193 -}
194 -</style>
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
1 -<template>
2 - <div class="choose_store_multi">
3 - <div v-transfer-dom>
4 - <x-dialog :show.sync="show" class="dialog-demo">
5 - <div class="store-title">{{title}}</div>
6 - <div class="wrap-scroll">
7 - <div class="store-wrapper">
8 - <check-icon class="store-all-checked">
9 - <!-- {{caption}}（<span style="color: #8EA8CF;">{{category_num}}</span>/{{category_sum}}） -->
10 - 所有品牌的门店（<span style="color: #8EA8CF;">{{category_num}}</span>/{{category_sum}}）
11 - </check-icon>
12 - </div>
13 - <div class="store-classify">
14 - <div v-for="(b, bi) in data_list" :key="bi">
15 - <div style="border-top: 1px dashed #eee; width: 100%;"></div>
16 - <flexbox class="brand-classify-title">
17 - <flexbox-item style="text-indent:2px;" :span="10">
18 - <check-icon class="brand-classify-checked" :value.sync="b.checked">
19 - {{b.name}}（<span style="color: #8EA8CF;">{{b.num}}</span>/{{b.city_count}}）
20 - </check-icon>
21 - </flexbox-item>
22 - <flexbox-item @click.native="fold(bi, 'brand')">
23 - <div style="padding-top: 0.2rem; padding-left: 0.5rem;">
24 - <i class="fa fa-chevron-down" style="font-size: 0.7rem; color: #838383;"></i>
25 - </div>
26 - </flexbox-item>
27 - </flexbox>
28 - <div class="brand-content">
29 - <div class="store-classify">
30 - <div v-for="(c, ci) in b.city_list" :key="ci">
31 - <div style="border-top: 1px dashed #eee; width: 100%;"></div>
32 - <flexbox class="store-classify-title">
33 - <flexbox-item style="text-indent:4px;" :span="10">
34 - <check-icon class="store-classify-checked" :value.sync="c.checked">
35 - {{c.name}}（<span style="color: #8EA8CF;">{{c.num}}</span>/{{c.store_count}}）
36 - </check-icon>
37 - </flexbox-item>
38 - <flexbox-item @click.native="fold(bi, 'store', ci)">
39 - <div style="padding-top: 0.2rem; padding-left: 0.5rem;">
40 - <i class="fa fa-chevron-down" style="font-size: 0.7rem; color: #838383;"></i>
41 - </div>
42 - </flexbox-item>
43 - </flexbox>
44 - <div class="store-content">
45 - <div class="store-list">
46 - <div v-for="(s, si) in c.store_list" :key="si" @click="itemCheck(s)">
47 - <div v-if="!+s.disabled"
48 - :class="[s.checked ? 'flex-checked' : '', 'flex-store']">
49 - {{s.name}}
50 - </div>
51 - </div>
52 - </div>
53 - </div>
54 - </div>
55 - </div>
56 - </div>
57 - </div>
58 - </div>
59 - </div>
60 - <div class="control-wrapper">
61 - <flexbox>
62 - <flexbox-item>
63 - <x-button class="close-btn" @click.native="cancel" mini>关闭</x-button>
64 - </flexbox-item>
65 - <flexbox-item>
66 - <x-button class="confirm-btn" @click.native="confirm" mini>确定</x-button>
67 - </flexbox-item>
68 - </flexbox>
69 - </div>
70 - </x-dialog>
71 - </div>
72 - </div>
73 -</template>
74 -
75 -<script>
76 -import { XDialog, TransferDomDirective as TransferDom, Flexbox, FlexboxItem, CheckIcon, XButton } from 'vux'
77 -import { Observable } from 'rxjs/Rx'
78 -export default {
79 - directives: { TransferDom },
80 - components: { XDialog, Flexbox, FlexboxItem, CheckIcon, XButton },
81 - props: ['show', 'list', 'title', 'checkList'],
82 - data () {
83 - return {
84 - data_list: [],
85 - category_num: 0
86 - }
87 - },
88 - watch: {
89 - list () {
90 - this.data_list = [];
91 - Observable.from([...this.list])
92 - .map(b => {
93 - // 品牌
94 - b.checked = false;
95 - b.num = 0;
96 - b.city_count = b.city_list.length;
97 - b.city_list.forEach(c => {
98 - // 城市
99 - c.checked = false;
100 - c.num = 0;
101 - c.store_count = c.store_list.length;
102 - c.store_list.forEach(s => {
103 - // 门店
104 - s.num = 0;
105 - s.checked = false;
106 - })
107 - })
108 - return b;
109 - }).subscribe(v => {
110 - v.city_list.forEach(c => {
111 - c.store_list.forEach(s => {
112 - this.checkList.forEach(checkStore => {
113 - if (checkStore.store_id === s.store_id) {
114 - s.checked = true;
115 - }
116 - })
117 - })
118 - })
119 - this.data_list.push(v);
120 - // 分别计算已选中的
121 - }).unsubscribe();
122 - }
123 - },
124 - computed: {
125 - category_sum () {
126 - // 获取门店总数
127 - let sum = 0;
128 - this.data_list.forEach(b => {
129 - b.city_list.forEach(c => {
130 - sum += c.store_count;
131 - })
132 - })
133 - return sum;
134 - }
135 - },
136 - methods: {
137 - fold (index, str, i) {
138 - let has_class = $($(`.${str}-classify-title`)[index]).siblings(`.${str}-content`).hasClass('fold-content');
139 - if (i && index - 1 >= 0) {
140 - // 不为第一组品牌中的城市
141 - index = this.data_list[index - 1].city_count + i;
142 - } else {
143 - // 不是城市或是第一组品牌中的城市
144 - i ? index = i : '';
145 - }
146 - if (has_class) {
147 - // 展开
148 - $($(`.${str}-classify-title`)[index]).siblings(`.${str}-content`).removeClass('fold-content');
149 - $($(`.${str}-classify-title`)[index]).find('i').addClass('fa-chevron-down').removeClass('fa-chevron-right');
150 - } else {
151 - // 折叠
152 - $($(`.${str}-classify-title`)[index]).siblings(`.${str}-content`).addClass('fold-content');
153 - $($(`.${str}-classify-title`)[index]).find('i').addClass('fa-chevron-right').removeClass('fa-chevron-down');
154 - }
155 - },
156 - itemCheck (item, method) {
157 - // 选中/取消选中单条
158 - item.checked = !item.checked;
159 - let arr = [...this.data_list];
160 - this.data_list.splice(0, [...arr]);
161 - },
162 - cancel () {
163 - this.$emit('cancel');
164 - },
165 - confirm () {
166 - let data = [];
167 - Observable.create(store$ => {
168 - this.data_list.forEach(b => {
169 - b.city_list.forEach(c => {
170 - c.store_list.forEach(s => {
171 - if (s.checked) {
172 - store$.next(s);
173 - }
174 - })
175 - })
176 - })
177 - }).subscribe(v => {
178 - data.push(v);
179 - }).unsubscribe();
180 - this.$emit('confirm', data);
181 - }
182 - }
183 -}
184 -</script>
185 -
186 -<style lang="less">
187 -.choose_store_multi {
188 -}
189 -.store-title {
190 - padding: 0.5rem;
191 - font-size: 18px;
192 - border-bottom: 1px solid #eee;
193 -}
194 -.wrap-scroll {
195 - max-height: 30rem;
196 - overflow-y: auto;
197 -}
198 -.store-wrapper {
199 - text-align: left;
200 - .store-all-checked {
201 - font-size: 0.9rem;
202 - padding: 0.5rem 0.2rem;
203 - }
204 -}
205 -
206 -.store-classify {
207 - .store-classify-checked,
208 - .brand-classify-checked {
209 - font-size: 0.9rem;
210 - padding: 0.4rem 0.2rem 0.1rem 0.85rem;
211 - }
212 - .store-classify-title,
213 - .brand-classify-title {
214 - margin-bottom: 0.5rem;
215 - }
216 - .store-content,
217 - .brand-content {
218 - border-bottom: 1px dashed #eee;
219 - .store-list {
220 - &:after {
221 - display: block;
222 - content: "";
223 - clear: both;
224 - }
225 - &>div {
226 - float: left;
227 - margin-left: .4rem;
228 - width: 48%;
229 - padding-bottom: 10px;
230 - .flex-store {
231 - text-align: center;
232 - background-color: #eee;
233 - }
234 - .flex-checked {
235 - color: white;
236 - background-color: #8EA8CF;
237 - }
238 - .flex-disabled {
239 - color: #cfcfcf;
240 - background-color: #ebeef7;
241 - }
242 - }
243 - }
244 - }
245 - .store-content {
246 - padding: 0 1rem;
247 - }
248 - .fold-content {
249 - height: 0;
250 - overflow: hidden;
251 - padding-bottom: 0;
252 - }
253 -}
254 -.control-wrapper {
255 - padding: 10px;
256 - .close-btn {
257 - background-color: #ffffff;
258 - color: #8EA8CF;
259 - border: 1px solid #8EA8CF;
260 - width: 100%;
261 - }
262 - .confirm-btn {
263 - background-color: #8EA8CF;
264 - color: #ffffff;
265 - border: 1px solid #8EA8CF;
266 - width: 100%;
267 - }
268 -}
269 -</style>
1 -<template lang="html">
2 - <div class="">
3 - <demo @handle="save"></demo>
4 - </div>
5 -</template>
6 -
7 -<script>
8 -import demo from 'components/sms/demo'
9 -
10 -export default {
11 - components: { demo },
12 - data () {
13 - return {
14 - }
15 - },
16 - methods: {
17 - save (val) {
18 - console.warn(val)
19 - }
20 - }
21 -}
22 -</script>
23 -
24 -<style lang="less">
25 -</style>
1 -<template lang="html">
2 - <div class="SMS">
3 - <!-- 验证码 -->
4 - <flexbox>
5 - <flexbox-item>
6 - <div class="flex-demo" :span="6">
7 - <x-input
8 - class="smsCodeWrap"
9 - v-model="smsCode"
10 - placeholder="请输入验证码"
11 - required
12 - :show-clear="true"
13 - @on-blur="onBlur"
14 - placeholder-align="left"></x-input>
15 - </div>
16 - </flexbox-item>
17 - <flexbox-item :span="6">
18 - <div class="ctl-btn">
19 - <span v-if="!countDownStatus" @click="getCode()">获取验证码</span>
20 - <span v-else :disabled="countDownStatus" @click="getCode()">{{ countDownDuring }}秒后重新获取</span>
21 - <x-button mini :disabled="this.smsCode === ''" @click.native="submitCode()">确定</x-button>
22 - </div>
23 - </flexbox-item>
24 - </flexbox>
25 - <toast v-model="smsCodeMsgShow" :time="1500">{{smsCodeMsg}}</toast>
26 - </div>
27 -</template>
28 -
29 -<script>
30 -import { Flexbox, FlexboxItem, XInput, XButton, Alert, TransferDomDirective as TransferDom, Toast } from 'vux'
31 -export default {
32 - directives: {
33 - TransferDom
34 - },
35 - components: {
36 - Flexbox,
37 - FlexboxItem,
38 - XInput,
39 - XButton,
40 - Alert,
41 - Toast
42 - },
43 - props: [ 'TYPE' ],
44 - data () {
45 - return {
46 - smsCode: '',
47 - smsCodeMsg: '验证码发送成功',
48 - smsCodeMsgShow: false,
49 - countDownDuring: 60,
50 - countDownStatus: false
51 - }
52 - },
53 - computed: {
54 - },
55 - methods: {
56 - onBlur () {},
57 - countDown () {
58 - this.countDownStatus = true
59 - // 倒计时 一分钟
60 - if (this.countDownDuring > 0) {
61 - var Timer = setInterval(() => {
62 - this.countDownDuring = this.countDownDuring - 1;
63 - }, 1000);
64 - } else {
65 - this.countDownStatus = true
66 - }
67 - setTimeout(() => {
68 - // 倒计时状态
69 - clearInterval(Timer)
70 - this.countDownStatus = false
71 - this.countDownDuring = 60
72 - }, 60000)
73 - },
74 - getCode () {
75 - // 获取验证码
76 - // axios.post('b/auth/pin', { type: this.TYPE })
77 - // .then(res => {
78 - // if (res.data.ret === 'OK') {
79 - // this.smsCodeMsgShow = true
80 - // // 激活倒计时
81 - // this.countDown()
82 - // } else {
83 - // this.smsCodeMsgShow = true
84 - // this.smsCodeMsg = '出错了'
85 - // console.warn(res);
86 - // }
87 - // })
88 - // .catch(err => {
89 - // console.error(err);
90 - // })
91 - this.countDown()
92 - },
93 - submitCode () {
94 - // 验证验证码
95 - this.$emit('handle', this.smsCode)
96 - this.smsCode = ''
97 - }
98 - }
99 -}
100 -</script>
101 -
102 -<style lang="less">
103 -.smsCodeWrap {
104 - font-size: 0.9rem;
105 - /* border: 1px solid #ccc; */
106 - padding: 3px 8px!important;
107 - /* border-radius: 5px */
108 -}
109 -.ctl-btn {
110 - span {
111 - display: inline-block;
112 - padding: 3px 8px;
113 - background: #f2f2f2;
114 - font-size: 0.9rem;
115 - border-radius: 5px;
116 - color: #45547a;
117 - }
118 -}
119 -</style>
1 -<template>
2 - <div class="">
3 - <tabBar @on-change="onIndexChange" :tabList="tabList"></tabBar>
4 - </div>
5 -</template>
6 -<script>
7 - import tabBar from 'components/tabBar/index'
8 - export default {
9 - components: {
10 - tabBar
11 - },
12 - data () {
13 - return {
14 - tabList: [
15 - {
16 - name: '首页',
17 - imgurl: '',
18 - num: '2',
19 - selected: false,
20 - link: ''
21 - },
22 - {
23 - name: '购物车',
24 - imgurl: '',
25 - num: '',
26 - selected: true,
27 - link: ''
28 - }
29 - ]
30 - }
31 - },
32 - methods: {
33 - onIndexChange (index) {
34 - console.warn(index)
35 - }
36 - }
37 - }
38 -</script>
...\ No newline at end of file ...\ No newline at end of file
1 -<template>
2 - <div class="tabBar">
3 - <tabbar @on-index-change="onChange">
4 - <tabbar-item v-for="(item, index) in tabList" :key="index" :selected="item.selected" :badge="item.num" :link="item.link">
5 - <img slot="icon" :src="item.imgUrl">
6 - <span slot="label">{{item.name}}</span>
7 - </tabbar-item>
8 - </tabbar>
9 - </div>
10 -</template>
11 -<script>
12 - /*
13 - 底部导航栏组件
14 - tablist: {
15 - num: 消息标记数量，传空值则没有标记,
16 - link: 跳转页面链接,
17 - imgUrl: 导航图标,
18 - name: 导航名称
19 - selected: 是否选中当前项
20 - }
21 - onChange：底部导航选中改变时的回调
22 - */
23 - import { Tabbar, TabbarItem } from 'vux'
24 - export default {
25 - components: {
26 - Tabbar,
27 - TabbarItem
28 - },
29 - props: ['tabList'],
30 - data () {
31 - return {}
32 - },
33 - methods: {
34 - onChange (index) {
35 - this.$emit('on-change', index)
36 - }
37 - }
38 - };
39 -</script>
40 -<style lang="less">
41 -.tabBar {
42 - .weui-tabbar__icon {
43 - position: relative;
44 - .vux-badge-single {
45 - width: auto;
46 - min-width: 16px;
47 - }
48 - }
49 - .weui-tabbar__icon > sup {
50 - position: absolute;
51 - top: 0;
52 - left: 35px;
53 - transform: translateX(-50%);
54 - z-index: 101;
55 - }
56 - .weui-tabbar__item.vux-tabbar-simple {
57 - padding: 0 10px;
58 - height: 50px;
59 - line-height: 50px;
60 - }
61 - .vux-tabbar-simple .weui-tabbar__label {
62 - font-size: 14px;
63 - line-height: 50px;
64 - }
65 - .weui-tabbar__item.weui-bar__item_on .weui-tabbar__label {
66 - color: #89A9CF;
67 - }
68 -}
69 -
70 -</style>
1 -<template lang="html">
2 - <div class="">
3 - <tab-swiper :list="list" :default_selected="default_selected" @on-item-click="onItemClick"></tab-swiper>
4 - </div>
5 -</template>
6 -
7 -<script>
8 -import tabSwiper from 'components/tabSwiper/index'
9 -
10 -export default {
11 - components: { tabSwiper },
12 - data () {
13 - return {
14 - list: ['消息', '通讯录'],
15 - default_selected: '消息'
16 - }
17 - },
18 - methods: {
19 - onItemClick (index) {
20 - console.warn(index);
21 - }
22 - }
23 -}
24 -</script>
25 -
26 -<style lang="less" scoped>
27 -</style>
1 -<template lang="html">
2 - <div class="tab-wrapper">
3 - <div class="tab-content">
4 - <tab bar-active-color="#8da9cf" :custom-bar-width="getBarWidth">
5 - <tab-item active-class="active" v-for="(item, index) in list" :key="index" :class="{'vux-1px-r': index+1!==list.length}" :selected="default_selected === item" @on-item-click="onItemClick">{{item}}</tab-item>
6 - </tab>
7 - </div>
8 - </div>
9 -</template>
10 -
11 -<script>
12 -/**
13 - * [参考用法 vux tab 组件]
14 - *
15 - * [list tab 显示名称]
16 - * @type {Array}
17 - *
18 - * [default_selected tab 默认显示名称]
19 - * @type {String}
20 - *
21 - * [on-item-click 点击回调返回 index]
22 - */
23 -import { Tab, TabItem } from 'vux'
24 -
25 -export default {
26 - components: { Tab, TabItem },
27 - props: ['list', 'default_selected'],
28 - data () {
29 - return {
30 - getBarWidth: function (index) {
31 - return (index + 1) * 40 + 'px'
32 - }
33 - }
34 - },
35 - methods: {
36 - onItemClick (index) {
37 - this.$emit('on-item-click', index)
38 - }
39 - }
40 -}
41 -</script>
42 -
43 -<style lang="less" scoped>
44 -@import '~vux/src/styles/1px.less';
45 -@import '~vux/src/styles/center.less';
46 -
47 -.vux-tab .vux-tab-item {
48 - background: none;
49 -}
50 -.vux-1px-r:after {
51 - height: 50%;
52 - top: 30%;
53 -}
54 -
55 -.active {
56 - color: #8da9cf !important;
57 - border-color: #8da9cf!important;
58 -}
59 -
60 -.tab-wrapper {
61 - padding: 1rem 1rem 0 1rem;
62 - .tab-content {
63 - border-top: 1px solid #dddddf;
64 - border-left: 1px solid #dddddf;
65 - border-right: 1px solid #dddddf;
66 - }
67 -}
68 -</style>
1 -<template>
2 - <div>
3 - <div class="title">
4 - <p>{{text}}</p>
5 - <p class="rightText" v-if="pShow" @click="topClick">{{rightText}}</p>
6 - </div>
7 - </div>
8 -</template>
9 -<script>
10 -export default {
11 - props: ['text', 'pShow', 'rightText'],
12 - data () {
13 - return {}
14 - },
15 - methods: {
16 - topClick () {
17 - this.$emit('topClick')
18 - }
19 - }
20 -}
21 -</script>
22 -
23 -<style lang="less" scoped>
24 - .title {
25 - width: 100%;
26 - height: 44px;
27 - background-color: #333;
28 - position: fixed;
29 - top: 0;
30 - left: 0;
31 - color: #fff;
32 - font-size: 16px;
33 - // line-height: 44px;
34 - text-align: center;
35 - z-index: 10;
36 - display: flex;
37 - align-items: center;
38 - &>p:first-child {
39 - line-height: 20px;
40 - flex: 1;
41 - }
42 - .rightText {
43 - position: absolute;
44 - top: 0;
45 - right: 20px;
46 - line-height: 44px;
47 - }
48 - }
49 -</style>
50 -
1 -<template>
2 - <div>
3 - <div v-show="multiple">
4 - <label for="file">+</label>
5 - <img v-show="multiple && imgShow" :src="img" alt="">
6 - <input id="file" type="file" multiple @change="selectImg">
7 - </div>
8 - <div v-show="!multiple">
9 - <label for="file1">+</label>
10 - <input id="file1" type="file" @change="selectImg">
11 - </div>
12 - </div>
13 -</template>
14 -<script>
15 - export default {
16 - props: {
17 - multiple: {
18 - type: Boolean,
19 - default: false
20 - },
21 - action: {
22 - type: String,
23 - default: ''
24 - },
25 - img: {
26 - type: String,
27 - default: ''
28 - }
29 - },
30 - data () {
31 - return {
32 - imgShow: false
33 - }
34 - },
35 - mounted () {
36 - console.warn(this.action)
37 - },
38 - methods: {
39 - selectImg (file) {
40 - console.warn(file)
41 - let formData = new FormData()
42 - formData.append('file', file.target.files[0])
43 - formData.append('type', 'test')
44 - this.$vux.loading.show({
45 - text: '正在上传'
46 - })
47 - axios.post(this.action, formData)
48 - .then((res) => {
49 - console.warn(res)
50 - this.imgShow = true;
51 - this.$vux.loading.hide()
52 - this.$emit('success', res.data)
53 - })
54 - }
55 - }
56 - }
57 -</script>
58 -<style lang="less" scoped>
59 - div {
60 - margin-top: 10px;
61 - }
62 - label {
63 - display: inline-block;
64 - width: 48px;
65 - height: 48px;
66 - border: 1px solid #d6d7dc;
67 - text-align: center;
68 - line-height: 46px;
69 - color: #d6d7dc;
70 - font-size: 42px;
71 - cursor: pointer;
72 - vertical-align: top;
73 - }
74 - img {
75 - width: 50px;
76 - height: 50px;
77 - }
78 - input[type="file"] {
79 - display: none;
80 - }
81 -</style>
1 -<template>
2 - <div class="vux-x-input weui-cell">
3 - <div class="weui-cell__bd weui-cell__primary">
4 - <input class="weui-input" style="text-align: center;" type="number" v-on="listeners" v-model="val" ref="input" :placeholder="placeholder" :disabled="disabled" @focus="onFocus">
5 - </div>
6 - </div>
7 -</template>
8 -
9 -<script type="text/ecmascript-6">
10 -export default {
11 - mounted () {
12 - this.updateValue(this.value)
13 - },
14 - name: 'vue-pattern-input',
15 - props: {
16 - value: {
17 - required: true,
18 - default: '',
19 - type: [Number, String]
20 - },
21 - regExp: {
22 - type: RegExp,
23 - default: null
24 - },
25 - replacement: {
26 - type: String,
27 - default: ''
28 - },
29 - placeholder: {
30 - type: String,
31 - default: ''
32 - },
33 - disabled: {
34 - type: Boolean,
35 - default: false
36 - }
37 - },
38 - data () {
39 - return {
40 - val: '',
41 - tmp: ''
42 - }
43 - },
44 - computed: {
45 - listeners () {
46 - const listeners = {}
47 -
48 - Object.keys(this.$listeners).forEach(fnName => {
49 - listeners[fnName] = (e) => {
50 - let val = e.target.value !== '' ? e.target.value : e.data
51 - // console.warn(val);
52 - this.$listeners[fnName](val)
53 - }
54 - })
55 -
56 - listeners.input = (e) => {
57 - let val = e.target.value !== '' ? e.target.value : e.data
58 - // console.warn(val);
59 - this.updateValue(val)
60 - }
61 -
62 - return listeners
63 - }
64 - },
65 - methods: {
66 - // format the value of input
67 - formatValue (val) {
68 - let formattedValue = ''
69 - // const formattedValue = val.toString().replace(this.regExp, this.replacement)
70 - val = _.isNull(val) ? '' : val
71 - if (this.regExp.test(val.toString())) {
72 - formattedValue = val.toString();
73 - this.tmp = val.toString()
74 - } else {
75 - formattedValue = this.tmp ? this.tmp : ' '
76 - }
77 -
78 - return formattedValue
79 - },
80 -
81 - // update the value of input
82 - updateValue (val) {
83 - const formattedValue = this.formatValue(val)
84 -
85 - this.val = formattedValue
86 - this.emitInput(formattedValue)
87 - this.emitChange(formattedValue)
88 - },
89 -
90 - // emit input event
91 - emitInput (val) {
92 - this.$emit('input', val)
93 - },
94 -
95 - // emit change event
96 - emitChange () {
97 - this.$emit('change', this.val)
98 - },
99 - onFocus (e) {
100 - this.$emit('on-focus', e);
101 - }
102 - },
103 - watch: {
104 - // watch value prop
105 - value (val) {
106 - if (val !== this.val) {
107 - this.updateValue(val)
108 - }
109 - }
110 - }
111 -}
112 -</script>
113 -
114 -<style lang="less">
115 - .vux-x-input.weui-cell {
116 - border: 1px solid #eee;
117 - padding: 0;
118 - border-radius: .2rem;
119 - }
120 -
121 - .weui-cell__bd {
122 - -ms-flex: 1;
123 - flex: 1;
124 - }
125 -
126 - .weui-input {
127 - width: 100%;
128 - border: 0;
129 - outline: 0;
130 - -webkit-appearance: none;
131 - background-color: transparent;
132 - font-size: inherit;
133 - color: inherit;
134 - height: 1.41176471em;
135 - line-height: 1.41176471;
136 - }
137 -</style>
1 -/* jshint esversion: 6 */ 1 +import Vue from 'vue'
2 -import Vue from 'vue'; 2 +import App from './App.vue'
3 -import Vuex from 'vuex'; 3 +import router from './router'
4 -import VueRouter from 'vue-router'; 4 +import store from './store'
5 -import App from './App.vue'; 5 +import Vant from 'vant'
6 -import router from './router'; 6 +import 'vant/lib/index.css'
7 -import store from './store';
8 -import axios from './http';
9 7
10 -Vue.use(VueRouter); 8 +Vue.use(Vant)
11 -Vue.use(Vuex);
12 9
13 -Vue.config.productionTip = false; 10 +Vue.config.productionTip = false
14 11
15 new Vue({ 12 new Vue({
16 router, 13 router,
17 store, 14 store,
18 - axios,
19 render: h => h(App) 15 render: h => h(App)
20 -}).$mount('#app'); 16 +}).$mount('#app')
......
1 +// 多页面测试入口文件
2 +import Vue from 'vue'
3 +import Vuex from 'vuex'
4 +import store from './vuex/store'
5 +import router from './router'
6 +import VueRouter from 'vue-router'
7 +import axios from './http'
8 +import A from './A.vue'
9 +import { sync } from 'vuex-router-sync'
10 +import FastClick from 'fastclick'
11 +import Vant from 'vant'
12 +import 'vant/lib/index.css'
13 +
14 +sync(store, router)
15 +Vue.use(VueRouter)
16 +Vue.use(Vuex)
17 +Vue.use(Vant)
18 +
19 +Vue.config.productionTip = false
20 +Vue.prototype.method = function () {}
21 +
22 +FastClick.attach(document.body)
23 +
24 +new Vue({
25 + store,
26 + router,
27 + axios,
28 + render: h => h(A)
29 +}).$mount('#A')
1 +<template lang="html">
2 + <div id="A" style="height:100%;">
3 + <router-view style="margin-top: 3rem"></router-view>
4 + </div>
5 +</template>
6 +
7 +<script>
8 +import { mapState } from 'vuex'
9 +export default {
10 + components: {},
11 + data () {
12 + return {
13 + isIndex: true,
14 + showMore: true
15 + }
16 + },
17 + computed: {
18 + ...mapState({
19 + title: state => state.title
20 + })
21 + },
22 + watch: {
23 + $route: 'fetchData'
24 + },
25 + mounted () {
26 + },
27 + methods: {
28 + fetchData () {
29 + if (this.$route.meta.isIndex) {
30 + this.isIndex = true
31 + } else {
32 + this.isIndex = false
33 + }
34 + }
35 + }
36 +}
37 +</script>
38 +
39 +<style lang="less">
40 + html, body {
41 + font-family: '微软雅黑', Microsoft YaHei;
42 + height: 100%;
43 + width: 100%;
44 + overflow-x: hidden;
45 + background-color: #F0EFF5;
46 + #login {
47 + }
48 + }
49 +</style>
1 /* jshint esversion: 6 */ 1 /* jshint esversion: 6 */
2 -import axios from 'axios'; 2 +import axios from 'axios'
3 -import router from './router'; 3 +import router from './router'
4 4
5 // 请求拦截器 5 // 请求拦截器
6 axios.interceptors.request.use( 6 axios.interceptors.request.use(
7 config => { 7 config => {
8 // 发送请求前 8 // 发送请求前
9 - return config; 9 + return config
10 }, 10 },
11 error => { 11 error => {
12 // 请求错误处理 12 // 请求错误处理
13 - return Promise.reject(error); 13 + return Promise.reject(error)
14 - }); 14 + })
15 15
16 // 响应拦截器 16 // 响应拦截器
17 axios.interceptors.response.use( 17 axios.interceptors.response.use(
18 response => { 18 response => {
19 - return response; 19 + return response
20 }, 20 },
21 error => { 21 error => {
22 if (error.response) { 22 if (error.response) {
23 switch (error.response.status) { 23 switch (error.response.status) {
24 case 401: 24 case 401:
25 router.replace({ 25 router.replace({
26 - path: '/login' 26 + path: '/'
27 - }); 27 + })
28 - break; 28 + break
29 case 404: 29 case 404:
30 router.replace({ 30 router.replace({
31 path: '/' 31 path: '/'
32 - }); 32 + })
33 - break; 33 + break
34 } 34 }
35 } 35 }
36 - return Promise.reject(error.response.data); 36 + return Promise.reject(error.response.data)
37 - }); 37 + })
38 38
39 -export default axios; 39 +export default axios
......
1 +/* jshint esversion: 6 */
2 +export default [
3 + {
4 + path: '/',
5 + name: '登录',
6 + component: () => import('./views/login.vue')
7 + }
8 +]
1 +/* jshint esversion: 6 */
2 +import Vue from 'vue'
3 +import VueRouter from 'vue-router'
4 +import ConfigRouter from './route.js'
5 +import store from './vuex/store'
6 +
7 +Vue.use(VueRouter)
8 +
9 +const router = new VueRouter({
10 + history: false,
11 + hashbang: true,
12 + base: __dirname,
13 + routes: ConfigRouter
14 +})
15 +
16 +router.beforeEach((to, from, next) => {
17 + store.commit('updateLoadingStatus', true)
18 + next()
19 +})
20 +
21 +router.afterEach((to, from, next) => {
22 + store.commit('updateLoadingStatus', false)
23 +})
24 +
25 +export default router
1 +function initFontSize (baseFontSize, baseWidth) {
2 + let clientWidth = document.documentElement.clientWidth || window.innerWidth()
3 + let size = Math.floor(clientWidth / baseWidth * baseFontSize)
4 + document.querySelector('html').style.fontSize = size + 'px'
5 +}
6 +initFontSize(100, 1080)
7 +window.onresize = function () {
8 + initFontSize(100, 1080)
9 +}
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.