Hooke / w4-vux-template

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

更新配置

Inline Side-by-side
Showing 110 changed files with 1202 additions and 10553 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 }
......
1 -<template lang="html">
2 - <div v-transfer-dom>
3 - <x-dialog v-model="tmp_show" class="material_dialog" :hide-on-blur="false">
4 - <div class="dialogTitle">录入新/原物料</div>
5 - <div class="material_info">
6 - <ul>
7 - <li>
8 - <label for="">
9 - <span style="margin-top: 0.2rem;">物料类别<em class="red">*</em></span>
10 - </label>
11 - <div class="el-form-item_content">
12 - <!-- <el-select style="width: 100%;" ref="select1" v-model="form.class_id" placeholder="请选择" @blur="blurs('select1')">
13 - <el-option
14 - v-for="item in classList"
15 - :key="item.class_id"
16 - :label="item.name"
17 - :value="item.class_id">
18 - </el-option>
19 - </el-select> -->
20 - <selector placeholder="请选择" v-model="form.class_id" :options="classList" @on-change="changeScroll"></selector>
21 - </div>
22 - </li>
23 - <li>
24 - <label for="">
25 - <span>物料编号<em class="red">*</em></span>
26 - </label>
27 - <div class="el-form-item_content">
28 - <el-input v-model="form.code" placeholder="请输入物料编号"></el-input>
29 - </div>
30 - </li>
31 - <li>
32 - <label for="">
33 - <span>物料名称<em class="red">*</em></span>
34 - </label>
35 - <div class="el-form-item_content">
36 - <el-input v-model="form.name" placeholder="请输入物料名称"></el-input>
37 - </div>
38 - </li>
39 - <li>
40 - <label for="">
41 - <span>适用的品牌<em class="red">*</em></span>
42 - </label>
43 - <div class="el-form-item_content p-right">
44 - <p @click="getBrandList">{{brand_text}}<i class="el-icon-arrow-right"></i></p>
45 - </div>
46 - </li>
47 - <li class="twoLabel">
48 - <label for="">
49 - <span style="font-size: 0.9rem; margin-top: 0.3rem;">订货单位<em class="red">*</em></span>
50 - <div style="width: 5rem;" class="el-form-item">
51 - <selector @on-change="changeScroll" placeholder="请选择" v-model="form.order_unit_name" :options="order_unit_list"></selector>
52 - </div>
53 - </label>
54 - <label>
55 - <span style="font-size: 0.9rem; margin-top: 0.3rem;">盘点单位<em class="red">*</em></span>
56 - <div style="width: 5rem;" class="el-form-item">
57 - <selector @on-change="changeScroll" placeholder="请选择" v-model="form.unit_name" :options="unit_list"></selector>
58 - </div>
59 - </label>
60 - </li>
61 - <li v-if="form.order_unit_name && form.unit_name">
62 - <label>
63 - <span></span>
64 - </label>
65 - <div>
66 - <p>1{{getOrderUnitName(form.order_unit_name)}} = <x-input style="width: 60px;" v-model="form.order_unit_qty" placeholder="请输入"></x-input> {{getUnitName(form.unit_name)}}<em class="red">*</em></p>
67 - </div>
68 - </li>
69 - <li class="twoLabel" v-if="form.order_unit_name && form.unit_name">
70 - <label for="">
71 - <span style="font-size: 0.8rem; margin-top: 0.3rem;">BOM单位<em class="red">*</em></span>
72 - <div class="el-form-item">
73 - <selector placeholder="请选择" v-model="form.bom_unit_name" :options="bom_unit_list" @on-change="bomUnitChange"></selector>
74 - </div>
75 - </label>
76 - <label>
77 - <div class="el-form-item">
78 - <div>1{{getUnitName(form.unit_name)}} = <x-input style="width: 70px;" v-model="form.bom_unit_qty" placeholder="请输入"></x-input> {{bom_unit_name_value}}<em class="red">*</em></div>
79 - </div>
80 - </label>
81 - </li>
82 - </ul>
83 - </div>
84 - <div class="btn" style="padding: 10px;">
85 - <flexbox>
86 - <flexbox-item>
87 - <x-button class="close-btn" @click.native="closeMetrial">取消</x-button>
88 - </flexbox-item>
89 - <flexbox-item>
90 - <x-button class="comfirm-btn" @click.native="addMetrial">完成</x-button>
91 - </flexbox-item>
92 - </flexbox>
93 - </div>
94 - </x-dialog>
95 -
96 - <add-select-brand :show="brand_show" :name="'品牌'" :list="brand_list" :checked_list="checked_list" :span="span" @cancel="cancel" @comfirm="comfirm"></add-select-brand>
97 - </div>
98 -</template>
99 -
100 -<script>
101 -import { Flexbox, FlexboxItem, XDialog, TransferDomDirective as TransferDom, Badge, XButton, Selector, XInput } from 'vux'
102 -import addSelectBrand from 'components/addSelectBrand/index'
103 -export default {
104 - directives: { TransferDom },
105 - components: { Flexbox, FlexboxItem, XDialog, addSelectBrand, Badge, XButton, Selector, XInput },
106 - props: ['show_dialog', 'add_class_list', 'add_brand_list', 'add_checked_list', 'add_order_unit_list', 'add_units_list', 'add_bom_unit_list'],
107 - data () {
108 - return {
109 - pShow: true,
110 - titleText: '新物料匹配供应商',
111 - leftText: '匹配供应商',
112 - rightText: '完成',
113 - scroller_height: '',
114 - list: [],
115 - form: {
116 - class_id: '',
117 - brand_ids: this.$route.params.checked_list,
118 - code: '',
119 - name: '',
120 - order_unit_name: '',
121 - unit_name: '',
122 - order_unit_qty: '',
123 - bom_unit_name: '',
124 - bom_unit_qty: ''
125 - },
126 - brand_text: '已选全部品牌',
127 - brand_show: false,
128 - span: 3,
129 - checked_list: this.add_checked_list,
130 - classList: this.add_class_list,
131 - brand_list: this.add_brand_list,
132 - order_unit_list: this.add_order_unit_list,
133 - unit_list: this.add_units_list,
134 - bom_unit_list: this.add_bom_unit_list,
135 - tmp_show: false,
136 - bom_unit_name_value: ''
137 - }
138 - },
139 - created () {
140 - this.getList();
141 - },
142 - mounted () {
143 - this.scroller_height = ($('body').height() - 50) + 'px';
144 - this.form = {
145 - class_id: '',
146 - brand_ids: this.$route.params.checked_list,
147 - code: '',
148 - name: '',
149 - order_unit_name: '',
150 - unit_name: '',
151 - order_unit_qty: '',
152 - bom_unit_name: '',
153 - bom_unit_qty: ''
154 - }
155 - $('.vux-x-dialog.material_dialog').click(() => {
156 - this.changeScroll()
157 - })
158 - },
159 - watch: {
160 - show_dialog (val, old) {
161 - if (val !== old) {
162 - this.tmp_show = val
163 - }
164 - }
165 - },
166 - methods: {
167 - // 获取新物料列表
168 - getList () {
169 - axios.get('fi/sku/all?ctrl_status=XP_prov')
170 - .then(res => {
171 - if (res.data.ret === 'OK') {
172 - for (let i = 0; i < res.data.content.length; i++) {
173 - res.data.content[i].checked = false
174 - if (res.data.content[i].XP_prov_status === 'DISABLE') {
175 - res.data.content[i].disabled = true
176 - } else {
177 - res.data.content[i].disabled = false
178 - }
179 - }
180 - this.list = res.data.content
181 - } else {
182 - this.list = []
183 - }
184 - })
185 - },
186 - // 选择品牌弹窗
187 - getBrandList () {
188 - this.brand_show = true
189 - this.tmp_show = false
190 - },
191 - // 品牌弹窗组件关闭
192 - cancel (v) {
193 - this.brand_show = v;
194 - this.tmp_show = true
195 - },
196 - // 品牌弹窗组件确定
197 - comfirm (v) {
198 - // console.warn(v);
199 - this.brand_show = false
200 - this.tmp_show = true
201 - this.form.brand_ids = v
202 - this.checked_list = v
203 - if (v.length === 0) {
204 - this.brand_text = '请选择品牌'
205 - }
206 - if (v.length > 0 && v.length !== this.brand_list.length) {
207 - this.brand_text = '已选' + v.length + '种品牌'
208 - }
209 - if (v.length === this.brand_list.length) {
210 - this.brand_text = '已选全部品牌'
211 - }
212 - },
213 - // 匹配供应商
214 - leftClick () {
215 - let newList = _.filter(this.list, val => {
216 - if (val.checked) {
217 - return val
218 - }
219 - })
220 - // console.warn(newList)
221 - if (newList.length > 0) {
222 - sessionStorage.setItem('newList', JSON.stringify(newList))
223 - this.$router.push({path: '/matchingSuppliers'})
224 - } else {
225 - this.$vux.toast.text('请选择物料')
226 - }
227 - },
228 - // 完成
229 - rightClick () {
230 - axios.get('fi/sku/noMatch?ctrl_status=XP_prov')
231 - .then(res => {
232 - if (res.data.ret === 'OK') {
233 - console.warn(res.data.content.count)
234 - let _this = this
235 - if (res.data.content.count > 0) {
236 - _this.$vux.confirm.show({
237 - title: '温馨提示',
238 - content: '<p style="text-align: left; padding: 1.5em 0 1em">还有' + res.data.content.count + '个新商品没有匹配供应商</p>',
239 - confirmText: '继续设置',
240 - cancelText: '否',
241 - showCancelButton: false,
242 - // onCancel () {
243 - // _this.$vux.confirm.hide()
244 - // },
245 - onConfirm () {
246 - _this.$vux.confirm.hide()
247 - }
248 - })
249 - } else {
250 - _this.$vux.confirm.show({
251 - title: '温馨提示',
252 - content: '<p style="text-align: left; padding: 1.5em 0 1em">您已完成所有新物料的供应商匹配，及门店采购价的设置工作，接下来需要设置新物料的门店盘点规则。</p>',
253 - confirmText: '确定',
254 - cancelText: '否',
255 - showCancelButton: false,
256 - // onCancel () {
257 - // _this.$vux.confirm.hide()
258 - // },
259 - onConfirm () {
260 - _this.$router.push({path: '/newInventoryRule'})
261 - }
262 - })
263 - }
264 - } else {
265 - this.$vux.toast.text(res.data.msg)
266 - }
267 - })
268 - },
269 - // element下拉框失去焦点
270 - blurs (val) {
271 - // console.warn(this.$refs)
272 - this.$refs[val].blur()
273 - },
274 - add () {
275 - this.tmp_show = true
276 - },
277 - addMetrial (e) {
278 - if (this.form.class_id === '') {
279 - this.$vux.toast.text('请选择物料类别');
280 - return false;
281 - } else if (this.form.code === '') {
282 - this.$vux.toast.text('请输入物料编号');
283 - } else if (this.form.name === '') {
284 - this.$vux.toast.text('请输入物料名称');
285 - } else if (this.form.code === '') {
286 - this.$vux.toast.text('请输入物料编号');
287 - } else if (this.form.brand_ids.length === 0) {
288 - this.$vux.toast.text('请选择品牌');
289 - } else if (this.form.order_unit_name === '') {
290 - this.$vux.toast.text('请选择门店订货单位');
291 - } else if (this.form.unit_name === '') {
292 - this.$vux.toast.text('请选择门店盘点单位');
293 - } else if (this.form.order_unit_qty === '') {
294 - this.$vux.toast.text('请输入单位换算量');
295 - } else if (this.form.bom_unit_name === '') {
296 - this.$vux.toast.text('请选择BOM单位');
297 - } else if (this.form.bom_unit_qty === '') {
298 - this.$vux.toast.text('请选择BOM单位数');
299 - } else {
300 - this.form.order_unit_name = this.getOrderUnitName(this.form.order_unit_name);
301 - this.form.unit_name = this.getUnitName(this.form.unit_name);
302 - this.form.bom_unit_name = this.bom_unit_name_value;
303 - axios.post('fi/sku/add', this.form)
304 - .then(res => {
305 - if (res.data.ret === 'OK') {
306 - this.$vux.toast.text(res.data.msg);
307 - let brand_ids = _.map(this.brand_list, val => val.brand_id)
308 - this.brand_text = '已选全部品牌'
309 - this.form = {
310 - class_id: '',
311 - brand_ids: brand_ids,
312 - code: '',
313 - name: '',
314 - order_unit_name: '',
315 - unit_name: '',
316 - order_unit_qty: '',
317 - bom_unit_name: '',
318 - bom_unit_qty: ''
319 - }
320 - this.getList()
321 - this.tmp_show = false;
322 - this.$emit('showDM', true);
323 - } else {
324 - this.$vux.toast.text(res.data.msg);
325 - this.tmp_show = false;
326 - this.$emit('showDM', true);
327 - }
328 - })
329 - .catch(error => {
330 - console.error(error);
331 - this.tmp_show = false;
332 - this.$emit('showDM', true);
333 - })
334 - }
335 - // this.getList()
336 - // this.tmp_show = false;
337 - // this.$emit('showDM', true);
338 - },
339 - closeMetrial () {
340 - this.tmp_show = false;
341 - this.$emit('showDM', true);
342 - },
343 - getOrderUnitName (name) {
344 - // 门店订货单位
345 - let unit = _.filter(this.order_unit_list, v => {
346 - if (v.key === name) {
347 - return v.value
348 - }
349 - });
350 - if (unit.length) {
351 - return unit[0]['value']
352 - }
353 - },
354 - getUnitName (name) {
355 - // 门店盘点单位
356 - let unit = _.filter(this.unit_list, v => {
357 - if (v.key === name) {
358 - return v.value
359 - }
360 - });
361 - if (unit.length) {
362 - return unit[0]['value']
363 - }
364 - },
365 - bomUnitChange (name) {
366 - // 门店盘点单位
367 - let unit = _.filter(this.bom_unit_list, v => {
368 - if (v.key === name) {
369 - return v.value
370 - }
371 - });
372 - if (unit.length) {
373 - this.bom_unit_name_value = unit[0]['value'];
374 - }
375 - this.changeScroll()
376 - },
377 - changeScroll () {
378 - $('html,body').scrollTop(0)
379 - }
380 - }
381 -}
382 -</script>
383 -
384 -<style lang="less" scoped>
385 -// 新增物料弹窗
386 -.material_dialog {
387 - font-size: 14px;
388 - .weui-dialog {
389 - width: 100% !important;
390 - max-width: 400px;
391 - text-align: left;
392 - .dialogTitle {
393 - background-color: #8ea9cf;
394 - color: #FFFFFF;
395 - text-align: center;
396 - font-size: 16px;
397 - padding: 0.6rem 0;
398 - }
399 - .material_info {
400 - background-color: #fff;
401 - margin-bottom: 10px;
402 - .red {
403 - font-style: normal;
404 - color: #ff6600;
405 - }
406 - ul {
407 - li {
408 - display: -webkit-flex;
409 - display: flex;
410 - position: relative;
411 - padding: 4px 0 4px 10px;
412 - border-bottom: 1px solid #e5e5e5;
413 - label {
414 - &>span {
415 - display: block;
416 - // float: left;
417 - width: 95px;
418 - height: 36px;
419 - line-height: 36px;
420 - }
421 - }
422 - &.twoLabel {
423 - display: -webkit-flex;
424 - display: flex;
425 - label {
426 - -webkit-flex: 1;
427 - flex: 1;
428 - display: -webkit-flex;
429 - display: flex;
430 - padding-right: 10px;
431 - .el-form-item {
432 - flex: 1;
433 - margin-bottom: 0;
434 - }
435 - }
436 - }
437 - .el-form-item_content{
438 - -webkit-flex: 1;
439 - flex: 1;
440 - float: left!important;
441 - margin-left: 0!important;
442 - line-height: 20px!important;
443 - padding-right: 10px;
444 - &.p-right {
445 - padding-right: 7px;
446 - }
447 - p {
448 - line-height: 36px;
449 - text-align: right;
450 - i {
451 - color: rgb(153, 153, 153);
452 - font-size: 18px;
453 - position: relative;
454 - top: 2px;
455 - }
456 - }
457 - }
458 - }
459 - }
460 - }
461 - .btn {
462 - background-color: #fff;
463 - &>div {
464 - .default-btn {
465 - width: 100%;
466 - height: 38px;
467 - background: #89a9cf!important;
468 - color: #fff!important;
469 - font-size: 16px;
470 - }
471 - .close-btn {
472 - background-color: #ffffff;
473 - color: #8EA8CF;
474 - border: 1px solid #8EA8CF;
475 - width: 100%;
476 - font-size: 16px;
477 - }
478 - .comfirm-btn {
479 - background-color: #8EA8CF;
480 - color: #ffffff;
481 - border: 1px solid #8EA8CF;
482 - width: 100%;
483 - font-size: 16px;
484 - }
485 - }
486 - }
487 - }
488 -}
489 -</style>
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>
1 -<template lang="html">
2 - <div class="setTimeBox" v-transfer-dom>
3 - <x-dialog v-model="this.$store.state.setTimeBox_show">
4 - <div class="title">设置门店到货时间</div>
5 - <div class="title-prov">{{supplier_name}}</div>
6 - <div class="title-materiel">{{materiel_name}}</div>
7 - <div class="content" v-if="dist_plan.dist_way === 'D'">
8 - <div class="content-title">每天订货</div>
9 - <ul class="list">
10 - <li v-for="(item, index) in store_list" :key="index">
11 - <flexbox>
12 - <flexbox-item :span="4">
13 - <div class="store-name">
14 - <i class="fa fa-minus-circle fa-2x" @click="deleteItem(index)"></i>
15 - <span v-if="item.store_name">{{item.store_name}}</span>
16 - <span v-else>{{item.name}}</span>
17 - </div>
18 - </flexbox-item>
19 - <flexbox-item style="margin-left:2.5rem;" :span="8">
20 - <div>
21 - 第<selector class="selector" v-model="item.dist_day" placeholder="请选择" :options="distDay" @on-change="preventS"></selector>天<selector class="selector" v-model="item.dist_time" placeholder="请选择" :options="distTime" @on-change="preventS"></selector>到货
22 - </div>
23 - </flexbox-item>
24 - </flexbox>
25 - </li>
26 - </ul>
27 - </div>
28 - <div class="content" v-if="dist_plan.dist_way === 'W'">
29 - <div class="content-title">每{{getWeek('order')}}订货</div>
30 - <ul class="list">
31 - <li v-for="(item, index) in store_list" :key="index">
32 - <flexbox>
33 - <flexbox-item :span="4">
34 - <div class="store-name">
35 - <i class="fa fa-minus-circle fa-2x" @click="deleteItem(index)"></i>
36 - <span v-if="item.store_name">{{item.store_name}}</span>
37 - <span v-else>{{item.name}}</span>
38 - </div>
39 - </flexbox-item>
40 - <flexbox-item style="margin-left:2.5rem;" :span="8">
41 - <div>
42 - <selector class="selector" v-model="item.dist_day" :placeholder="'请选择'" :options="distWeek" @on-change="preventS"></selector>
43 - <selector class="selector" v-model="item.dist_time" :placeholder="'请选择'" :options="distTime" @on-change="preventS"></selector>
44 - 到货
45 - </div>
46 - </flexbox-item>
47 - </flexbox>
48 - </li>
49 - </ul>
50 - </div>
51 - <div class="content" v-if="dist_plan.dist_way === 'M'">
52 - <div class="content-title">每月{{getMonth(dist_plan.order_day)}}订货</div>
53 - <ul class="list">
54 - <li v-for="(item, index) in store_list" :key="index">
55 - <flexbox>
56 - <flexbox-item :span="4">
57 - <div class="store-name">
58 - <i class="fa fa-minus-circle fa-2x" @click="deleteItem(index)"></i>
59 - <span v-if="item.store_name">{{item.store_name}}</span>
60 - <span v-else>{{item.name}}</span>
61 - </div>
62 - </flexbox-item>
63 - <flexbox-item style="margin-left:2.5rem;" :span="8">
64 - <div>
65 - <selector class="selector" v-model="item.dist_day" placeholder="请选择" :options="distMonth" @on-change="preventS"></selector>
66 - <selector class="selector" v-model="item.dist_time" placeholder="请选择" :options="distTime" @on-change="preventS"></selector>
67 - 到货
68 - </div>
69 - </flexbox-item>
70 - </flexbox>
71 - </li>
72 - </ul>
73 - </div>
74 - <div class="add" @click="addItem">
75 - <i class="fa fa-plus-circle fa-2x"></i>
76 - <span>添加相同送货线路的门店</span>
77 - </div>
78 - <div class="set-finish">
79 - <div @click="finishSet()" class="set-finish-btn">确定</div>
80 - </div>
81 - <confirm v-model="show"
82 - :title="'操作提示'"
83 - @on-cancel="onCancel"
84 - @on-confirm="onConfirm">
85 - <div style="padding-top:0.8rem;">你确定要放弃修改并退出吗</div>
86 - </confirm>
87 - </x-dialog>
88 - </div>
89 -</template>
90 -
91 -<script>
92 -import {
93 - TransferDomDirective as TransferDom,
94 - XDialog,
95 - Flexbox,
96 - FlexboxItem,
97 - Selector,
98 - Confirm
99 -} from 'vux'
100 -import { compat } from 'logistics/static/js/compatibility'
101 -export default {
102 - components: {
103 - TransferDom,
104 - XDialog,
105 - Flexbox,
106 - FlexboxItem,
107 - Selector,
108 - Confirm
109 - },
110 - mixins: [compat],
111 - mounted () {
112 - this.$nextTick(() => {
113 - let mask = document.getElementsByClassName('setTimeBox')[0].getElementsByClassName('weui-mask')[0];
114 - mask.addEventListener('click', () => {
115 - this.show = true;
116 - });
117 - });
118 - },
119 - props: ['supplier_name', 'list', 'materiel_name'],
120 - data () {
121 - return {
122 - distDay: [
123 - {
124 - value: 2,
125 - key: 'DAY+1d'
126 - },
127 - {
128 - value: 3,
129 - key: 'DAY+2d'
130 - },
131 - {
132 - value: 4,
133 - key: 'DAY+3d'
134 - },
135 - {
136 - value: 5,
137 - key: 'DAY+4d'
138 - },
139 - {
140 - value: 6,
141 - key: 'DAY+5d'
142 - },
143 - {
144 - value: 7,
145 - key: 'DAY+6d'
146 - },
147 - {
148 - value: 8,
149 - key: 'DAY+7d'
150 - },
151 - {
152 - value: 9,
153 - key: 'DAY+8d'
154 - },
155 - {
156 - value: 10,
157 - key: 'DAY+9d'
158 - }
159 - ],
160 - distWeek: [
161 - {
162 - value: '周一',
163 - key: 'MON'
164 - },
165 - {
166 - value: '周二',
167 - key: 'TUE'
168 - },
169 - {
170 - value: '周三',
171 - key: 'WED'
172 - },
173 - {
174 - value: '周四',
175 - key: 'THU'
176 - },
177 - {
178 - value: '周五',
179 - key: 'FRI'
180 - },
181 - {
182 - value: '周六',
183 - key: 'SAT'
184 - },
185 - {
186 - value: '周日',
187 - key: 'SUN'
188 - },
189 - {
190 - value: '下周一',
191 - key: 'MON+1w'
192 - },
193 - {
194 - value: '下周二',
195 - key: 'TUE+1w'
196 - },
197 - {
198 - value: '下周三',
199 - key: 'WED+1w'
200 - },
201 - {
202 - value: '下周四',
203 - key: 'THU+1w'
204 - },
205 - {
206 - value: '下周五',
207 - key: 'FRI+1w'
208 - },
209 - {
210 - value: '下周六',
211 - key: 'SAT+1w'
212 - },
213 - {
214 - value: '下周日',
215 - key: 'SUN+1w'
216 - }
217 - ],
218 - distMonth: [
219 - {
220 - value: '1号',
221 - key: '1'
222 - },
223 - {
224 - value: '2号',
225 - key: '2'
226 - },
227 - {
228 - value: '3号',
229 - key: '3'
230 - },
231 - {
232 - value: '4号',
233 - key: '4'
234 - },
235 - {
236 - value: '5号',
237 - key: '5'
238 - },
239 - {
240 - value: '6号',
241 - key: '6'
242 - },
243 - {
244 - value: '7号',
245 - key: '7'
246 - },
247 - {
248 - value: '8号',
249 - key: '8'
250 - },
251 - {
252 - value: '9号',
253 - key: '9'
254 - },
255 - {
256 - value: '10号',
257 - key: '10'
258 - },
259 - {
260 - value: '11号',
261 - key: '11'
262 - },
263 - {
264 - value: '12号',
265 - key: '12'
266 - },
267 - {
268 - value: '13号',
269 - key: '13'
270 - },
271 - {
272 - value: '14号',
273 - key: '14'
274 - },
275 - {
276 - value: '15号',
277 - key: '15'
278 - },
279 - {
280 - value: '16号',
281 - key: '16'
282 - },
283 - {
284 - value: '17号',
285 - key: '17'
286 - },
287 - {
288 - value: '18号',
289 - key: '18'
290 - },
291 - {
292 - value: '19号',
293 - key: '19'
294 - },
295 - {
296 - value: '20号',
297 - key: '20'
298 - },
299 - {
300 - value: '21号',
301 - key: '21'
302 - },
303 - {
304 - value: '22号',
305 - key: '22'
306 - },
307 - {
308 - value: '23号',
309 - key: '23'
310 - },
311 - {
312 - value: '24号',
313 - key: '24'
314 - },
315 - {
316 - value: '25号',
317 - key: '25'
318 - },
319 - {
320 - value: '26号',
321 - key: '26'
322 - },
323 - {
324 - value: '27号',
325 - key: '27'
326 - },
327 - {
328 - value: '28号',
329 - key: '28'
330 - },
331 - {
332 - value: '29号',
333 - key: '29'
334 - },
335 - {
336 - value: '30号',
337 - key: '30'
338 - },
339 - {
340 - value: '31号',
341 - key: '31'
342 - },
343 - {
344 - value: '月末',
345 - key: 'last'
346 - },
347 - {
348 - value: '次月1号',
349 - key: '1+1m'
350 - },
351 - {
352 - value: '次月2号',
353 - key: '2+1m'
354 - },
355 - {
356 - value: '次月3号',
357 - key: '3+1m'
358 - },
359 - {
360 - value: '次月4号',
361 - key: '4+1m'
362 - },
363 - {
364 - value: '次月5号',
365 - key: '5+1m'
366 - },
367 - {
368 - value: '次月6号',
369 - key: '6+1m'
370 - },
371 - {
372 - value: '次月7号',
373 - key: '7+1m'
374 - },
375 - {
376 - value: '次月8号',
377 - key: '8+1m'
378 - },
379 - {
380 - value: '次月9号',
381 - key: '9+1m'
382 - },
383 - {
384 - value: '次月10号',
385 - key: '10+1m'
386 - },
387 - {
388 - value: '次月11号',
389 - key: '11+1m'
390 - },
391 - {
392 - value: '次月12号',
393 - key: '12+1m'
394 - },
395 - {
396 - value: '次月13号',
397 - key: '13+1m'
398 - },
399 - {
400 - value: '次月14号',
401 - key: '14+1m'
402 - },
403 - {
404 - value: '次月15号',
405 - key: '15+1m'
406 - },
407 - {
408 - value: '次月16号',
409 - key: '16+1m'
410 - },
411 - {
412 - value: '次月17号',
413 - key: '17+1m'
414 - },
415 - {
416 - value: '次月18号',
417 - key: '18+1m'
418 - },
419 - {
420 - value: '次月19号',
421 - key: '19+1m'
422 - },
423 - {
424 - value: '次月20号',
425 - key: '20+1m'
426 - },
427 - {
428 - value: '次月21号',
429 - key: '21+1m'
430 - },
431 - {
432 - value: '次月22号',
433 - key: '22+1m'
434 - },
435 - {
436 - value: '次月23号',
437 - key: '23+1m'
438 - },
439 - {
440 - value: '次月24号',
441 - key: '24+1m'
442 - },
443 - {
444 - value: '次月25号',
445 - key: '25+1m'
446 - },
447 - {
448 - value: '次月26号',
449 - key: '26+1m'
450 - },
451 - {
452 - value: '次月27号',
453 - key: '27+1m'
454 - },
455 - {
456 - value: '次月28号',
457 - key: '28+1m'
458 - },
459 - {
460 - value: '次月29号',
461 - key: '29+1m'
462 - },
463 - {
464 - value: '次月30号',
465 - key: '30+1m'
466 - },
467 - {
468 - value: '次月31号',
469 - key: '31+1m'
470 - },
471 - {
472 - value: '次月月末',
473 - key: 'last+1m'
474 - }
475 - ],
476 - distTime: [
477 - {
478 - value: '00:00',
479 - key: '00:00'
480 - },
481 - {
482 - value: '00:30',
483 - key: '00:30'
484 - },
485 - {
486 - value: '01:00',
487 - key: '01:00'
488 - },
489 - {
490 - value: '01:30',
491 - key: '01:30'
492 - },
493 - {
494 - value: '02:00',
495 - key: '02:00'
496 - },
497 - {
498 - value: '02:30',
499 - key: '02:30'
500 - },
501 - {
502 - value: '03:00',
503 - key: '03:00'
504 - },
505 - {
506 - value: '03:30',
507 - key: '03:30'
508 - },
509 - {
510 - value: '04:00',
511 - key: '04:00'
512 - },
513 - {
514 - value: '04:30',
515 - key: '04:30'
516 - },
517 - {
518 - value: '05:00',
519 - key: '05:00'
520 - },
521 - {
522 - value: '05:30',
523 - key: '05:30'
524 - },
525 - {
526 - value: '06:00',
527 - key: '06:00'
528 - },
529 - {
530 - value: '06:30',
531 - key: '06:30'
532 - },
533 - {
534 - value: '07:30',
535 - key: '07:30'
536 - },
537 - {
538 - value: '08:00',
539 - key: '08:00'
540 - },
541 - {
542 - value: '08:30',
543 - key: '08:30'
544 - },
545 - {
546 - value: '09:00',
547 - key: '09:00'
548 - },
549 - {
550 - value: '09:30',
551 - key: '09:30'
552 - },
553 - {
554 - value: '10:00',
555 - key: '10:00'
556 - },
557 - {
558 - value: '10:30',
559 - key: '10:30'
560 - },
561 - {
562 - value: '11:00',
563 - key: '11:00'
564 - },
565 - {
566 - value: '11:30',
567 - key: '11:30'
568 - },
569 - {
570 - value: '12:00',
571 - key: '12:00'
572 - },
573 - {
574 - value: '12:30',
575 - key: '12:30'
576 - },
577 - {
578 - value: '13:00',
579 - key: '13:00'
580 - },
581 - {
582 - value: '13:30',
583 - key: '13:30'
584 - },
585 - {
586 - value: '14:00',
587 - key: '14:00'
588 - },
589 - {
590 - value: '14:30',
591 - key: '14:30'
592 - },
593 - {
594 - value: '15:00',
595 - key: '15:00'
596 - },
597 - {
598 - value: '15:30',
599 - key: '15:30'
600 - },
601 - {
602 - value: '16:00',
603 - key: '16:00'
604 - },
605 - {
606 - value: '16:30',
607 - key: '16:30'
608 - },
609 - {
610 - value: '17:00',
611 - key: '17:00'
612 - },
613 - {
614 - value: '17:30',
615 - key: '17:30'
616 - },
617 - {
618 - value: '18:00',
619 - key: '18:00'
620 - },
621 - {
622 - value: '18:30',
623 - key: '18:30'
624 - },
625 - {
626 - value: '19:00',
627 - key: '19:00'
628 - },
629 - {
630 - value: '19:30',
631 - key: '19:30'
632 - },
633 - {
634 - value: '20:00',
635 - key: '20:00'
636 - },
637 - {
638 - value: '20:30',
639 - key: '20:30'
640 - },
641 - {
642 - value: '21:00',
643 - key: '21:00'
644 - },
645 - {
646 - value: '21:30',
647 - key: '21:30'
648 - },
649 - {
650 - value: '22:00',
651 - key: '22:00'
652 - },
653 - {
654 - value: '22:30',
655 - key: '22:30'
656 - },
657 - {
658 - value: '23:00',
659 - key: '23:00'
660 - },
661 - {
662 - value: '23:30',
663 - key: '23:30'
664 - }
665 - ],
666 - dist_plan: {},
667 - store_list: [],
668 - show: false
669 - }
670 - },
671 - /***
672 - * ----------------------------------------------------------------------------
673 - * 父子组件没有嵌套关系，无法获得数组中的index值，需要获得父级当前正在设置的计划
674 - * 并把此计划已设置完的订货计划传到vuex里
675 - * 子组件在从vuex里获得设置到一半的订货计划，在子组件中设置到货计划
676 - * 因为子组件与父组件一起刷新所以mounted不适用
677 - * 需要用watch监听vuex里的stat状态，当父级设置完成订货计划时
678 - * 子组件再设置完到货计划时，将完成的数据一起传给父组件
679 - * ----------------------------------------------------------------------------
680 - * 注意：因为子组件中还可以添加相同线路的门店，已添加的门店若已设置到货时间，那么为了
681 - * 保证已设置的数据不会被清空，需要存到vuex里，当添加完门店回到此组件时，再次展示，并且
682 - * 展示添加的门店。
683 - * ----------------------------------------------------------------------------
684 - */
685 - computed: {
686 - getOrderDetail () {
687 - return this.$store.state.order_detail;
688 - }
689 - },
690 - watch: {
691 - getOrderDetail (val) {
692 - for (let i in val) {
693 - this.dist_plan[i] = val[i];
694 - };
695 - if (this.dist_plan.dist_way === 'W') {
696 - this.distWeek.forEach((v, i) => {
697 - if (this.dist_plan.order_day === v.key) {
698 - this.distWeek = this.distWeek.slice(i);
699 - }
700 - });
701 - } else if (this.dist_plan.dist_way === 'M') {
702 - this.distMonth.forEach((v, i) => {
703 - if (this.dist_plan.order_day === v.key) {
704 - this.distMonth = this.distMonth.slice(i);
705 - }
706 - });
707 - }
708 - },
709 - list: function (val) {
710 - let list = [];
711 - for (let i = 0; i < val.length; i++) {
712 - list.push(val[i]);
713 - }
714 - this.store_list = _.cloneDeep(list);
715 - }
716 - },
717 - methods: {
718 - finishSet () {
719 - for (let n = 0; n < this.store_list.length; n++) {
720 - if (!this.store_list[n].dist_day || !this.store_list[n].dist_time) {
721 - this.$vux.toast.show({
722 - type: 'warn',
723 - text: '到货日期或到货时间不能为空'
724 - });
725 - return;
726 - }
727 - }
728 - this.$store.commit('emptyOldList');
729 - let arr = [];
730 - let list = this.store_list;
731 - list.map(v => {
732 - if (!v.route_name) {
733 - v.route_name = v.city;
734 - }
735 - return v;
736 - })
737 - let obj = _.groupBy(list, 'route_name');
738 - for (let i in obj) {
739 - let saveData = {
740 - route_name: `${i}${obj[i].length}`,
741 - store_list: obj[i]
742 - }
743 - arr.push(saveData);
744 - }
745 - this.$emit('compelete', _.cloneDeep(arr));
746 - this.$store.commit('checksetTimeBox');
747 - },
748 - getWeek (t) {
749 - let str;
750 - switch (t) {
751 - case 'order':
752 - str = this.dist_plan.order_day;
753 - switch (str) {
754 - case 'MON':
755 - return '周一';
756 - case 'TUE':
757 - return '周二';
758 - case 'WED':
759 - return '周三';
760 - case 'THU':
761 - return '周四';
762 - case 'FRI':
763 - return '周五';
764 - case 'SAT':
765 - return '周六';
766 - case 'SUN':
767 - return '周日';
768 - };
769 - break;
770 - case 'dist':
771 - str = this.dist_plan.store_list[arguments[1]].dist_day;
772 - switch (str) {
773 - case 'MON':
774 - return '周一';
775 - case 'TUE':
776 - return '周二';
777 - case 'WED':
778 - return '周三';
779 - case 'THU':
780 - return '周四';
781 - case 'FRI':
782 - return '周五';
783 - case 'SAT':
784 - return '周六';
785 - case 'SUN':
786 - return '周日';
787 - case 'MON+1w':
788 - return '下周一';
789 - case 'TUE+1w':
790 - return '下周二';
791 - case 'WED+1w':
792 - return '下周三';
793 - case 'THU+1w':
794 - return '下周四';
795 - case 'FRI+1w':
796 - return '下周五';
797 - case 'SAT+1w':
798 - return '下周六';
799 - case 'SUN+1w':
800 - return '下周日';
801 - };
802 - break;
803 - }
804 - },
805 - getMonth (str) {
806 - if (str === 'last') {
807 - return '月末'
808 - } else {
809 - if (str.split('+').length > 1) {
810 - if (str.split('+')[0] === 'last') {
811 - return '次月月末'
812 - } else {
813 - return '次月' + str.split('+')[0] + '号'
814 - }
815 - } else {
816 - return str + '号';
817 - }
818 - }
819 - },
820 - deleteItem (i) {
821 - this.store_list.splice(i, 1);
822 - },
823 - addItem () {
824 - this.$store.commit('checksetTimeBox');
825 - this.$store.commit('saveOldList', this.store_list);
826 - this.$emit('addStoreInChild', this.store_list);
827 - },
828 - onCancel () {
829 - this.show = false;
830 - },
831 - onConfirm () {
832 - this.$store.commit('checksetTimeBox');
833 - this.$store.commit('emptyOldList');
834 - }
835 - }
836 -}
837 -</script>
838 -
839 -<style lang="less">
840 -.setTimeBox {
841 - font-size: 14px;
842 - color: #666;
843 - .title {
844 - font-size: 18px;
845 - background: #8ea9cf;
846 - color: #fff;
847 - text-align: center;
848 - padding: 0.6rem 0;
849 - }
850 - .title-prov,
851 - .title-materiel {
852 - padding: 0.2rem 0 0.2rem 0.4rem;
853 - font-size: 16px;
854 - text-align: left;
855 - }
856 - .title-prov {
857 - color: #333;
858 - }
859 - .title-materiel {
860 - color: #8ea9cf;
861 - }
862 - .content {
863 - .content-title {
864 - font-size: 16px;
865 - padding: 0.4rem 0;
866 - text-align: center;
867 - }
868 - .list {
869 - margin: 0;
870 - max-height: 10rem;
871 - overflow-y: auto;
872 - overflow-x: hidden;
873 - li {
874 - list-style: none;
875 - padding: 0.4rem;
876 - border-top: 1px solid #c7c7c7;
877 - .store-name {
878 - i {
879 - color: #8ea9cf;
880 - vertical-align: middle;
881 - }
882 - span {
883 - vertical-align: middle;
884 - }
885 - }
886 - }
887 - }
888 -
889 - select {
890 - width: 4rem;
891 - margin: 0 3px;
892 - padding-left: 10px;
893 - background-color: #fff;
894 - border-radius: 4px;
895 - border: 1px solid #dcdfe6;
896 - color: #606266;
897 - height: 40px;
898 - line-height: 40px;
899 - outline: 0;
900 - transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
901 - }
902 - }
903 -
904 - .add {
905 - text-align: center;
906 - color: #8ea9cf;
907 - padding: 0.5rem 0;
908 - border-top: 3px solid #c7c7c7;
909 - border-bottom: 3px solid #c7c7c7;
910 - i {
911 - vertical-align: middle;
912 - }
913 - span {
914 - vertical-align: middle;
915 - }
916 - }
917 - .set-finish {
918 - width: 90%;
919 - margin: 0 auto;
920 - margin-top: 1rem;
921 - border-radius: 5px;
922 - color: #fff;
923 - background: #8ea9cf;
924 - padding: 0.4rem 0;
925 - }
926 -}
927 -.vux-selector {
928 - display: inline-block !important;
929 - .weui-select {
930 - padding-right: 0 !important;
931 - }
932 -}
933 -</style>
1 -<!--
2 - 复选门店到货时间弹出框
3 --->
4 -<template>
5 - <div class="setTimeBox" v-transfer-dom>
6 - <x-dialog class="set-bom-prop" v-model="this.$store.state.setTimeBox_show">
7 - <div class="set-bom-prop-title">
8 - <div>设置门店到货时间</div>
9 - </div>
10 - <ul class="title-list">
11 - <li class="supplier">{{supplier_name}}</li>
12 - <li class="materiel">{{materiel_name}}</li>
13 - </ul>
14 - <div v-if="dist_plan.dist_way === 'D'">
15 - <div class="row-title">
16 - 每天订货
17 - </div>
18 - <ul class="row-list">
19 - <li v-for="(item, index) in store_list" :key="index">
20 - <flexbox align="center">
21 - <flexbox-item class="store-name" :span="4">
22 - <i class="fa fa-minus-circle fa-2x" @click="deleteItem(index)"></i>
23 - <span>{{item.name}}</span>
24 - </flexbox-item>
25 - <flexbox-item :span="8">
26 - 第<select v-model="item.dist_day">
27 - <option v-for="(o, oi) in distDay" :value="o.val" :key="oi">{{o.lab}}</option>
28 - </select>天<select v-model="item.dist_time">
29 - <option v-for="(o, oi) in distTime" :value="o" :key="oi">{{o}}</option>
30 - </select>到货
31 - </flexbox-item>
32 - </flexbox>
33 - </li>
34 - </ul>
35 - <div class="add-store" @click="addItem">
36 - <i class="fa fa-plus-circle fa-2x"></i>
37 - <span>添加相同送货线路的门店</span>
38 - </div>
39 - </div>
40 - <ul class="row-list" v-if="dist_plan.dist_way === 'W'">
41 - <li class="row-title">
42 - 每周{{getWeek('order')}}订货
43 - </li>
44 - <li v-for="(item, index) in store_list" :key="index">
45 - <flexbox align="center">
46 - <flexbox-item class="store-name" :span="4">
47 - <i class="fa fa-minus-circle fa-2x" @click="deleteItem(index)"></i>
48 - <span>{{item.name}}</span>
49 - </flexbox-item>
50 - <flexbox-item :span="8">
51 - <select v-model="item.dist_day">
52 - <option v-for="(o, oi) in distWeek" :value="o.val" :key="oi">{{o.lab}}</option>
53 - </select>
54 - <select v-model="item.dist_time">
55 - <option v-for="(o, oi) in distTime" :value="o" :key="oi">{{o}}</option>
56 - </select>
57 - 到货
58 - </flexbox-item>
59 - </flexbox>
60 - </li>
61 - <li class="add-store" @click="addItem">
62 - <i class="fa fa-plus-circle fa-2x"></i>
63 - <span>添加相同送货线路的门店</span>
64 - </li>
65 - </ul>
66 - <ul class="row-list" v-if="dist_plan.dist_way === 'M'">
67 - <li class="row-title">
68 - 每月{{getMonth(dist_plan.order_day)}}订货
69 - </li>
70 - <li v-for="(item, index) in store_list" :key="index">
71 - <flexbox align="center">
72 - <flexbox-item class="store-name" :span="4">
73 - <i class="fa fa-minus-circle fa-2x" @click="deleteItem(index)"></i>
74 - <span>{{item.name}}</span>
75 - </flexbox-item>
76 - <flexbox-item :span="8">
77 - <select v-model="item.dist_day">
78 - <option v-for="(o, oi) in distMonth" :value="o.val" :key="oi">{{o.lab}}</option>
79 - </select>
80 - <select v-model="item.dist_time">
81 - <option v-for="(o, oi) in distTime" :value="o" :key="oi">{{o}}</option>
82 - </select>
83 - 到货
84 - </flexbox-item>
85 - </flexbox>
86 - </li>
87 - <li class="add-store" @click="addItem">
88 - <i class="fa fa-plus-circle fa-2x"></i>
89 - <span>添加相同送货线路的门店</span>
90 - </li>
91 - </ul>
92 - <div class="set-finish">
93 - <div @click="finishSet()" class="set-finish-btn">确定</div>
94 - </div>
95 - </x-dialog>
96 - </div>
97 -</template>
98 -
99 -<script>
100 -import { Flexbox, FlexboxItem, XDialog, TransferDomDirective as TransferDom, Popup, Picker } from 'vux'
101 -export default {
102 - components: {
103 - Flexbox, FlexboxItem, XDialog, TransferDom, Popup, Picker
104 - },
105 - mounted () {
106 - this.$nextTick(() => {
107 - let mask = document.getElementsByClassName('setTimeBox')[0].getElementsByClassName('weui-mask')[0];
108 - mask.addEventListener('click', () => {
109 - this.$store.commit('checksetTimeBox');
110 - this.$store.commit('emptyOldList');
111 - });
112 - });
113 - },
114 - props: ['supplier_name', 'list', 'materiel_name'],
115 - data () {
116 - return {
117 - distDay: [
118 - {
119 - lab: 2,
120 - val: 'DAY+1d'
121 - },
122 - {
123 - lab: 3,
124 - val: 'DAY+2d'
125 - },
126 - {
127 - lab: 4,
128 - val: 'DAY+3d'
129 - },
130 - {
131 - lab: 5,
132 - val: 'DAY+4d'
133 - },
134 - {
135 - lab: 6,
136 - val: 'DAY+5d'
137 - },
138 - {
139 - lab: 7,
140 - val: 'DAY+6d'
141 - },
142 - {
143 - lab: 8,
144 - val: 'DAY+7d'
145 - },
146 - {
147 - lab: 9,
148 - val: 'DAY+8d'
149 - },
150 - {
151 - lab: 10,
152 - val: 'DAY+9d'
153 - }
154 - ],
155 - distWeek: [
156 - {
157 - lab: '周一',
158 - val: 'MON'
159 - },
160 - {
161 - lab: '周二',
162 - val: 'TUE'
163 - },
164 - {
165 - lab: '周三',
166 - val: 'WED'
167 - },
168 - {
169 - lab: '周四',
170 - val: 'THU'
171 - },
172 - {
173 - lab: '周五',
174 - val: 'FRI'
175 - },
176 - {
177 - lab: '周六',
178 - val: 'SAT'
179 - },
180 - {
181 - lab: '周日',
182 - val: 'SUN'
183 - },
184 - {
185 - lab: '下周一',
186 - val: 'MON+1w'
187 - },
188 - {
189 - lab: '下周二',
190 - val: 'TUE+1w'
191 - },
192 - {
193 - lab: '下周三',
194 - val: 'WED+1w'
195 - },
196 - {
197 - lab: '下周四',
198 - val: 'THU+1w'
199 - },
200 - {
201 - lab: '下周五',
202 - val: 'FRI+1w'
203 - },
204 - {
205 - lab: '下周六',
206 - val: 'SAT+1w'
207 - },
208 - {
209 - lab: '下周日',
210 - val: 'SUN+1w'
211 - }
212 - ],
213 - distMonth: [
214 - {
215 - lab: '1号',
216 - val: '1'
217 - },
218 - {
219 - lab: '2号',
220 - val: '2'
221 - },
222 - {
223 - lab: '3号',
224 - val: '3'
225 - },
226 - {
227 - lab: '4号',
228 - val: '4'
229 - },
230 - {
231 - lab: '5号',
232 - val: '5'
233 - },
234 - {
235 - lab: '6号',
236 - val: '6'
237 - },
238 - {
239 - lab: '7号',
240 - val: '7'
241 - },
242 - {
243 - lab: '8号',
244 - val: '8'
245 - },
246 - {
247 - lab: '9号',
248 - val: '9'
249 - },
250 - {
251 - lab: '10号',
252 - val: '10'
253 - },
254 - {
255 - lab: '11号',
256 - val: '11'
257 - },
258 - {
259 - lab: '12号',
260 - val: '12'
261 - },
262 - {
263 - lab: '13号',
264 - val: '13'
265 - },
266 - {
267 - lab: '14号',
268 - val: '14'
269 - },
270 - {
271 - lab: '15号',
272 - val: '15'
273 - },
274 - {
275 - lab: '16号',
276 - val: '16'
277 - },
278 - {
279 - lab: '17号',
280 - val: '17'
281 - },
282 - {
283 - lab: '18号',
284 - val: '18'
285 - },
286 - {
287 - lab: '19号',
288 - val: '19'
289 - },
290 - {
291 - lab: '20号',
292 - val: '20'
293 - },
294 - {
295 - lab: '21号',
296 - val: '21'
297 - },
298 - {
299 - lab: '22号',
300 - val: '22'
301 - },
302 - {
303 - lab: '23号',
304 - val: '23'
305 - },
306 - {
307 - lab: '24号',
308 - val: '24'
309 - },
310 - {
311 - lab: '25号',
312 - val: '25'
313 - },
314 - {
315 - lab: '26号',
316 - val: '26'
317 - },
318 - {
319 - lab: '27号',
320 - val: '27'
321 - },
322 - {
323 - lab: '28号',
324 - val: '28'
325 - },
326 - {
327 - lab: '29号',
328 - val: '29'
329 - },
330 - {
331 - lab: '30号',
332 - val: '30'
333 - },
334 - {
335 - lab: '31号',
336 - val: '31'
337 - },
338 - {
339 - lab: '月末',
340 - val: 'last'
341 - },
342 - {
343 - lab: '次月1号',
344 - val: '1+1m'
345 - },
346 - {
347 - lab: '次月2号',
348 - val: '2+1m'
349 - },
350 - {
351 - lab: '次月3号',
352 - val: '3+1m'
353 - },
354 - {
355 - lab: '次月4号',
356 - val: '4+1m'
357 - },
358 - {
359 - lab: '次月5号',
360 - val: '5+1m'
361 - },
362 - {
363 - lab: '次月6号',
364 - val: '6+1m'
365 - },
366 - {
367 - lab: '次月7号',
368 - val: '7+1m'
369 - },
370 - {
371 - lab: '次月8号',
372 - val: '8+1m'
373 - },
374 - {
375 - lab: '次月9号',
376 - val: '9+1m'
377 - },
378 - {
379 - lab: '次月10号',
380 - val: '10+1m'
381 - },
382 - {
383 - lab: '次月11号',
384 - val: '11+1m'
385 - },
386 - {
387 - lab: '次月12号',
388 - val: '12+1m'
389 - },
390 - {
391 - lab: '次月13号',
392 - val: '13+1m'
393 - },
394 - {
395 - lab: '次月14号',
396 - val: '14+1m'
397 - },
398 - {
399 - lab: '次月15号',
400 - val: '15+1m'
401 - },
402 - {
403 - lab: '次月16号',
404 - val: '16+1m'
405 - },
406 - {
407 - lab: '次月17号',
408 - val: '17+1m'
409 - },
410 - {
411 - lab: '次月18号',
412 - val: '18+1m'
413 - },
414 - {
415 - lab: '次月19号',
416 - val: '19+1m'
417 - },
418 - {
419 - lab: '次月20号',
420 - val: '20+1m'
421 - },
422 - {
423 - lab: '次月21号',
424 - val: '21+1m'
425 - },
426 - {
427 - lab: '次月22号',
428 - val: '22+1m'
429 - },
430 - {
431 - lab: '次月23号',
432 - val: '23+1m'
433 - },
434 - {
435 - lab: '次月24号',
436 - val: '24+1m'
437 - },
438 - {
439 - lab: '次月25号',
440 - val: '25+1m'
441 - },
442 - {
443 - lab: '次月26号',
444 - val: '26+1m'
445 - },
446 - {
447 - lab: '次月27号',
448 - val: '27+1m'
449 - },
450 - {
451 - lab: '次月28号',
452 - val: '28+1m'
453 - },
454 - {
455 - lab: '次月29号',
456 - val: '29+1m'
457 - },
458 - {
459 - lab: '次月30号',
460 - val: '30+1m'
461 - },
462 - {
463 - lab: '次月31号',
464 - val: '31+1m'
465 - },
466 - {
467 - lab: '次月月末',
468 - val: 'last+1m'
469 - }
470 - ],
471 - distTime: [
472 - '00:00', '00:30', '01:00', '01:30', '02:00', '02:30', '03:00', '03:30', '04:00', '04:30', '05:00', '05:30', '06:00', '06:30', '07:00', '07:30', '08:00', '08:30', '09:00', '09:30', '10:00', '10:30', '11:00', '11:30', '12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30', '17:00', '17:30', '18:00', '18:30', '19:00', '19:30', '20:00', '20:30', '21:00', '21:30', '22:00', '22:30', '23:00', '23:30'
473 - ],
474 - dist_plan: {},
475 - store_line: {
476 - city: '上海3',
477 - store_list: [
478 - {
479 - store_id: '0b805b3a3a9b4d36b5dd9a876592de15',
480 - name: 'XXX门店',
481 - dist_day: '',
482 - dist_time: ''
483 - },
484 - {
485 - store_id: '433f045dba264b6ea5d6bb717589974c',
486 - name: 'XXX门店',
487 - dist_day: '',
488 - dist_time: ''
489 - },
490 - {
491 - store_id: 'd6346c870e384d7ea0d093fc94a82882',
492 - name: 'XXX门店',
493 - dist_day: '',
494 - dist_time: ''
495 - }
496 - ]
497 - },
498 - store_list: []
499 - }
500 - },
501 - /***
502 - * ----------------------------------------------------------------------------
503 - * 父子组件没有嵌套关系，无法获得数组中的index值，需要获得父级当前正在设置的计划
504 - * 并把此计划已设置完的订货计划传到vuex里
505 - * 子组件在从vuex里获得设置到一半的订货计划，在子组件中设置到货计划
506 - * 因为子组件与父组件一起刷新所以mounted不适用
507 - * 需要用watch监听vuex里的stat状态，当父级设置完成订货计划时
508 - * 子组件再设置完到货计划时，将完成的数据一起传给父组件
509 - * ----------------------------------------------------------------------------
510 - * 注意：因为子组件中还可以添加相同线路的门店，已添加的门店若已设置到货时间，那么为了
511 - * 保证已设置的数据不会被清空，需要存到vuex里，当添加完门店回到此组件时，再次展示，并且
512 - * 展示添加的门店。
513 - * ----------------------------------------------------------------------------
514 - */
515 - computed: {
516 - getOrderDetail () {
517 - return this.$store.state.order_detail;
518 - }
519 - },
520 - watch: {
521 - getOrderDetail (val) {
522 - for (let i in val) {
523 - this.dist_plan[i] = val[i];
524 - }
525 - },
526 - list: function (val) {
527 - let list = [];
528 - for (let i = 0; i < val.length; i++) {
529 - list.push(val[i]);
530 - }
531 - this.store_list = _.cloneDeep(list);
532 - }
533 - },
534 - methods: {
535 - finishSet () {
536 - for (let n = 0; n < this.store_list.length; n++) {
537 - if (!this.store_list[n].dist_day || !this.store_list[n].dist_time) {
538 - alert('到货日期或到货时间不能为空');
539 - return;
540 - }
541 - }
542 - this.$store.commit('emptyOldList');
543 - let arr = [];
544 - let obj = {};
545 - let list = this.store_list;
546 - list.forEach((e, i) => {
547 - if (obj.route_name === (e.city || e.route_name)) {
548 - obj.store_list.push(e);
549 - } else if (obj.route_name && obj.route_name !== (e.city || e.route_name)) {
550 - arr.push(obj);
551 - obj = {};
552 - obj.route_name = (e.city || e.route_name);
553 - obj.store_list = [];
554 - obj.store_list.push(e);
555 - } else {
556 - obj.route_name = (e.city || e.route_name);
557 - obj.store_list = [];
558 - obj.store_list.push(e);
559 - }
560 - if (i === list.length - 1) {
561 - arr.push(obj);
562 - }
563 - })
564 - for (let j = 0; j < arr.length; j++) {
565 - arr[j].route_name += arr[j].store_list.length;
566 - }
567 - this.$emit('compelete', _.cloneDeep(arr));
568 - this.$store.commit('checksetTimeBox');
569 - },
570 - getWeek (t) {
571 - let str;
572 - switch (t) {
573 - case 'order':
574 - str = this.dist_plan.order_day;
575 - switch (str) {
576 - case 'MON':
577 - return '周一';
578 - case 'TUE':
579 - return '周二';
580 - case 'WED':
581 - return '周三';
582 - case 'THU':
583 - return '周四';
584 - case 'FRI':
585 - return '周五';
586 - case 'SAT':
587 - return '周六';
588 - case 'SUN':
589 - return '周日';
590 - };
591 - break;
592 - case 'dist':
593 - str = this.dist_plan.store_list[arguments[1]].dist_day;
594 - switch (str) {
595 - case 'MON':
596 - return '周一';
597 - case 'TUE':
598 - return '周二';
599 - case 'WED':
600 - return '周三';
601 - case 'THU':
602 - return '周四';
603 - case 'FRI':
604 - return '周五';
605 - case 'SAT':
606 - return '周六';
607 - case 'SUN':
608 - return '周日';
609 - case 'MON+1w':
610 - return '下周一';
611 - case 'TUE+1w':
612 - return '下周二';
613 - case 'WED+1w':
614 - return '下周三';
615 - case 'THU+1w':
616 - return '下周四';
617 - case 'FRI+1w':
618 - return '下周五';
619 - case 'SAT+1w':
620 - return '下周六';
621 - case 'SUN+1w':
622 - return '下周日';
623 - };
624 - break;
625 - }
626 - },
627 - getMonth (str) {
628 - if (str !== 'last') {
629 - if (str.split('+').length === 1) {
630 - return str + '号';
631 - } else {
632 - return '次月' + str + '号';
633 - }
634 - } else if (str === 'last') {
635 - return '月末';
636 - }
637 - },
638 - deleteItem (i) {
639 - this.store_list.splice(i, 1);
640 - },
641 - addItem () {
642 - this.$store.commit('checksetTimeBox');
643 - this.$store.commit('saveOldList', this.store_list);
644 - this.$emit('addStoreInChild', this.store_list);
645 - }
646 - }
647 -}
648 -</script>
649 -
650 -<style lang="less" scoped>
651 -.set-bom-prop {
652 - font-size: 14px;
653 - color: #666;
654 -}
655 -.weui-dialog {
656 - padding-bottom: 1rem !important;
657 - max-width: 800px !important;
658 -}
659 -.red {
660 - color: red;
661 - font-style: normal;
662 -}
663 -.green {
664 - color: green;
665 -}
666 -.title-list {
667 - font-size: 16px;
668 - color: #333;
669 -}
670 -.supplier {
671 - text-align: left;
672 - padding: 0.4rem 0.8rem;
673 -}
674 -.materiel {
675 - text-align: left;
676 - padding: 0.4rem 0.8rem;
677 - color: #8ea8cf;
678 -}
679 -select {
680 - width: 4rem;
681 - margin: 0 3px;
682 - padding-left: 10px;
683 - background-color: #fff;
684 - border-radius: 4px;
685 - border: 1px solid #dcdfe6;
686 - color: #606266;
687 - height: 40px;
688 - line-height: 40px;
689 - outline: 0;
690 - transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
691 -}
692 -.setTimeBox {
693 - ul {
694 - list-style: none;
695 - margin: 0;
696 - padding: 0;
697 - }
698 - .set-bom-prop {
699 - padding: 0;
700 - min-height: 40px;
701 - font-size: 15px;
702 - line-height: 1.3;
703 - word-wrap: break-word;
704 - word-break: break-all;
705 - color: #999999;
706 - touch-action: none;
707 - .set-bom-prop-title {
708 - background-color: #8ea9cf;
709 - color: #FFFFFF;
710 - padding: 0.5em 1.6em 0.5em;
711 - font-size: 18px;
712 - }
713 - .row-title {
714 - text-align: center;
715 - padding: 0.8rem 0;
716 - border-bottom: 1px solid #c7c7c7;
717 - }
718 - .row-list {
719 - max-height: 25rem;
720 - overflow-x: hidden;
721 - overflow-y: auto;
722 - list-style: none;
723 - li {
724 - display: flex;
725 - padding: 0.4rem 0 0.4rem 0.8rem;
726 - border-bottom: 1px solid #c7c7c7;
727 - em {
728 - font-style: normal;
729 - }
730 - .el-input {
731 - width: 4rem;
732 - margin: 0 3px;
733 - }
734 - .el-input__inner {
735 - padding: 0;
736 - padding-left: 10px;
737 - }
738 - }
739 - .store-name {
740 - i {
741 - vertical-align: middle;
742 - color: #8ea8cf;
743 - }
744 - span {
745 - vertical-align: middle;
746 - line-height: 2em;
747 - }
748 - }
749 - }
750 - .add-store {
751 - padding: 0.4rem 0 0.4rem 0 !important;
752 - border-top: 2px solid #c7c7c7;
753 - border-bottom: 2px solid #c7c7c7;
754 - text-align: center;
755 - i {
756 - vertical-align: middle;
757 - color: #8ea8cf;
758 - }
759 - span {
760 - vertical-align: middle;
761 - line-height: 2em;
762 - }
763 - }
764 - .set-finish {
765 - width: 90%;
766 - margin: 0 auto;
767 - margin-top: 1rem;
768 - border-radius: 0.25rem;
769 - color: white;
770 - padding: 0.35rem 0;
771 - background-color: #8ea8cf;
772 - }
773 - }
774 - .el-input__prefix {
775 - display: none;
776 - }
777 -}
778 -
779 -</style>
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>
1 -<!--
2 - 添加订货计划弹出框
3 --->
4 -<template>
5 - <div class="orderPlanBox" v-transfer-dom>
6 - <x-dialog class="set-bom-prop" v-model="this.$store.state.orderPlanBox_show">
7 - <div class="set-bom-prop-title">
8 - <div :title="title">{{title}}</div>
9 - </div>
10 - <ul class="row-list title-list">
11 - <li class="supplier-name">
12 - {{supplier_name}}
13 - </li>
14 - <li class="materiel-name">
15 - {{materiel}}
16 - </li>
17 - <li>
18 - <label for="">
19 - <span>订货频次<em class="red">*</em></span>
20 - </label>
21 - <div class="radioBox">
22 - <el-radio-group v-model="list.dist_way">
23 - <el-radio @change="changeRadio" label="D">每天</el-radio>
24 - <el-radio @change="changeRadio" label="W">每周</el-radio>
25 - <el-radio @change="changeRadio" label="M">每月</el-radio>
26 - </el-radio-group>
27 - </div>
28 - </li>
29 - <li v-if="list.dist_way === 'D' || list.dist_way === 'M'">
30 - 设置送货休息日（休息日将顺延送货)
31 - </li>
32 - <li v-if="list.dist_way === 'D' || list.dist_way === 'M'" class="dailyBox">
33 - <el-checkbox-group class="dailyGroup" v-model="list.rest_date">
34 - <el-checkbox label="MON">周一</el-checkbox>
35 - <el-checkbox label="TUE">周二</el-checkbox>
36 - <el-checkbox label="WED">周三</el-checkbox>
37 - <el-checkbox label="THU">周四</el-checkbox>
38 - <el-checkbox label="FRI">周五</el-checkbox>
39 - <el-checkbox label="SAT">周六</el-checkbox>
40 - <el-checkbox label="SUN">周日</el-checkbox>
41 - </el-checkbox-group>
42 - <div class="dailyLine"></div>
43 - </li>
44 - </ul>
45 - <ul class="detailBox" v-if="list.dist_way === 'W'">
46 - <li>
47 - <flexbox>
48 - <flexbox-item :span="3">
49 - <label for="">
50 - <span>订货计划<em class="red">*</em></span>
51 - </label>
52 - </flexbox-item>
53 - <flexbox-item>
54 - 每
55 - <selector @on-change="preventS" v-model="list.order_day" placeholder="请选择" :options="orderWeek"></selector>
56 - 订货
57 - </flexbox-item>
58 - </flexbox>
59 - </li>
60 - </ul>
61 - <ul class="detailBox" v-if="list.dist_way === 'M'">
62 - <li>
63 - <flexbox>
64 - <flexbox-item :span="3">
65 - <label for="">
66 - <span>订货计划<em class="red">*</em></span>
67 - </label>
68 - </flexbox-item>
69 - <flexbox-item>
70 - 每月
71 - <selector @on-change="preventS" v-model="list.order_day" placeholder="请选择" :options="orderMonth"></selector>
72 - 订货
73 - </flexbox-item>
74 - </flexbox>
75 - </li>
76 - </ul>
77 - <div class="set-finish">
78 - <div @click="finishSet()" class="set-finish-btn">确定</div>
79 - </div>
80 - </x-dialog>
81 - </div>
82 -</template>
83 -
84 -<script>
85 -import { XDialog, TransferDomDirective as TransferDom, Flexbox, FlexboxItem, Selector } from 'vux'
86 -import { compat } from 'logistics/static/js/compatibility'
87 -export default {
88 - directives: {
89 - TransferDom
90 - },
91 - components: {
92 - XDialog, Flexbox, FlexboxItem, Selector
93 - },
94 - mixins: [compat],
95 - props: ['title', 'supplier_name', 'materiel'],
96 - data () {
97 - return {
98 - orderWeek: [
99 - {
100 - value: '周一',
101 - key: 'MON'
102 - },
103 - {
104 - value: '周二',
105 - key: 'TUE'
106 - },
107 - {
108 - value: '周三',
109 - key: 'WED'
110 - },
111 - {
112 - value: '周四',
113 - key: 'THU'
114 - },
115 - {
116 - value: '周五',
117 - key: 'FRI'
118 - },
119 - {
120 - value: '周六',
121 - key: 'SAT'
122 - },
123 - {
124 - value: '周日',
125 - key: 'SUN'
126 - }
127 - ],
128 - orderMonth: [
129 - {
130 - value: '1号',
131 - key: '1'
132 - },
133 - {
134 - value: '2号',
135 - key: '2'
136 - },
137 - {
138 - value: '3号',
139 - key: '3'
140 - },
141 - {
142 - value: '4号',
143 - key: '4'
144 - },
145 - {
146 - value: '5号',
147 - key: '5'
148 - },
149 - {
150 - value: '6号',
151 - key: '6'
152 - },
153 - {
154 - value: '7号',
155 - key: '7'
156 - },
157 - {
158 - value: '8号',
159 - key: '8'
160 - },
161 - {
162 - value: '9号',
163 - key: '9'
164 - },
165 - {
166 - value: '10号',
167 - key: '10'
168 - },
169 - {
170 - value: '11号',
171 - key: '11'
172 - },
173 - {
174 - value: '12号',
175 - key: '12'
176 - },
177 - {
178 - value: '13号',
179 - key: '13'
180 - },
181 - {
182 - value: '14号',
183 - key: '14'
184 - },
185 - {
186 - value: '15号',
187 - key: '15'
188 - },
189 - {
190 - value: '16号',
191 - key: '16'
192 - },
193 - {
194 - value: '17号',
195 - key: '17'
196 - },
197 - {
198 - value: '18号',
199 - key: '18'
200 - },
201 - {
202 - value: '19号',
203 - key: '19'
204 - },
205 - {
206 - value: '20号',
207 - key: '20'
208 - },
209 - {
210 - value: '21号',
211 - key: '21'
212 - },
213 - {
214 - value: '22号',
215 - key: '22'
216 - },
217 - {
218 - value: '23号',
219 - key: '23'
220 - },
221 - {
222 - value: '24号',
223 - key: '24'
224 - },
225 - {
226 - value: '25号',
227 - key: '25'
228 - },
229 - {
230 - value: '26号',
231 - key: '26'
232 - },
233 - {
234 - value: '27号',
235 - key: '27'
236 - },
237 - {
238 - value: '28号',
239 - key: '28'
240 - },
241 - {
242 - value: '29号',
243 - key: '29'
244 - },
245 - {
246 - value: '30号',
247 - key: '30'
248 - },
249 - {
250 - value: '31号',
251 - key: '31'
252 - },
253 - {
254 - value: '月末',
255 - key: 'last'
256 - }
257 - ],
258 - list: {
259 - dist_way: '',
260 - rest_date: [],
261 - order_day: '',
262 - order_time: ''
263 - }
264 - }
265 - },
266 - mounted () {
267 - // 点击遮罩层，弹框消失 start
268 - this.$nextTick(() => {
269 - let mask = document.getElementsByClassName('orderPlanBox')[0].getElementsByClassName('weui-mask')[0];
270 - mask.addEventListener('click', () => {
271 - this.$store.commit('checkOrderPlanBox');
272 - });
273 - })
274 - // 点击遮罩层，弹框消失 end
275 - },
276 - methods: {
277 - changeRadio () {
278 - // 切换订货频次
279 - this.list.order_day = '';
280 - this.list.rest_date = [];
281 - },
282 - finishSet () {
283 - /**
284 - * 完成
285 - * 把订货计划数据传给父组件
286 - * 注意：如果按每天订货，需要将对象中的order_day设置为DAY
287 - * 任何频次的order_time都可以为空
288 - * ------------------------------------------------------------------
289 - */
290 - let obj = {};
291 - for (let i in this.list) {
292 - obj[i] = this.list[i];
293 - }
294 - obj.route_list = [];
295 - if (obj.dist_way === 'D') {
296 - obj.order_day = 'DAY';
297 - } else if (obj.order_day === '') {
298 - this.$vux.toast.show({
299 - type: 'warn',
300 - text: '订货日期不能为空'
301 - });
302 - return;
303 - }
304 - this.$emit('compelete', obj);
305 - this.$store.commit('checkOrderPlanBox')
306 - }
307 - }
308 -}
309 -</script>
310 -
311 -<style lang="less">
312 -.weui-dialog {
313 - padding-bottom: 1rem !important;
314 - max-width: 800px !important;
315 -}
316 -.red {
317 - color: red;
318 - font-style: normal;
319 -}
320 -.green {
321 - color: green;
322 -}
323 -.orderPlanBox {
324 - ul {
325 - list-style: none;
326 - margin: 0;
327 - padding: 0;
328 - }
329 - .set-bom-prop {
330 - padding: 0;
331 - min-height: 40px;
332 - font-size: 14px;
333 - line-height: 1.3;
334 - word-wrap: break-word;
335 - word-break: break-all;
336 - color: #666;
337 - touch-action: none;
338 - .set-bom-prop-title {
339 - background-color: #8ea9cf;
340 - font-size: 18px;
341 - color: #FFFFFF;
342 - padding: 0.5em 1.6em 0.5em;
343 - }
344 - .title-list {
345 - color: #333;
346 - font-size: 16px;
347 - }
348 - .row-list {
349 - li {
350 - display: flex;
351 - padding: 0.4rem 0 0.4rem 0.8rem;
352 - border-bottom: 1px solid #C7C7C7;
353 - em {
354 - font-style: normal;
355 - }
356 - label {
357 - text-align: left;
358 - &>span {
359 - display: block;
360 - float: left;
361 - height: 36px;
362 - line-height: 36px;
363 - }
364 - }
365 - .radioBox {
366 - display: flex;
367 - justify-content: space-around;
368 - margin-left: 10px;
369 - span {
370 - display: inline-block;
371 - }
372 - .el-radio__label {
373 - padding-left: 0;
374 - }
375 - }
376 - }
377 - .supplier-name {
378 - border: none;
379 - color: #000;
380 - }
381 - .materiel-name {
382 - color: #8ea9cf;
383 - }
384 - .el-form-item_content{
385 - -webkit-flex: 1;
386 - flex: 1;
387 - float: left!important;
388 - margin-left: 0!important;
389 - line-height: 20px!important;
390 - padding-right: 10px;
391 - &.p-right {
392 - padding-right: 7px;
393 - }
394 - p {
395 - line-height: 36px;
396 - text-align: right;
397 - span {
398 - margin-left: 0.3rem;
399 - }
400 - i {
401 - color: rgb(153, 153, 153);
402 - font-size: 18px;
403 - position: relative;
404 - top: 2px;
405 - }
406 - }
407 - }
408 - }
409 -
410 - .detailBox {
411 - max-height: 20rem;
412 - overflow-y: auto;
413 - li {
414 - padding: 0.4rem 0 0.4rem 0.8rem;
415 - border-bottom: 1px solid #C7C7C7;
416 - i {
417 - vertical-align: middle;
418 - color: #8ea8cf;
419 - }
420 - }
421 - .el-input {
422 - width: 4rem;
423 - margin: 0 3px;
424 - }
425 - .el-input__inner {
426 - padding: 0;
427 - padding-left: 10px;
428 - }
429 - select {
430 - width: 4rem;
431 - margin: 0 3px;
432 - padding-left: 10px;
433 - background-color: #fff;
434 - border-radius: 4px;
435 - border: 1px solid #dcdfe6;
436 - color: #606266;
437 - height: 40px;
438 - line-height: 40px;
439 - outline: 0;
440 - transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
441 - }
442 - .el-input__prefix {
443 - display: none;
444 - }
445 - }
446 -
447 - .dailyBox {
448 - position: relative;
449 - .dailyGroup {
450 - .el-checkbox {
451 - float: left;
452 - width: 25%;
453 - margin-left: 0;
454 - }
455 -
456 - &:after {
457 - clear: both;
458 - display: block;
459 - content: "";
460 - }
461 - }
462 - .dailyLine {
463 - width: 100%;
464 - height: 1px;
465 - background: #C7C7C7;
466 - position: absolute;
467 - top: 50%;
468 - left: 0;
469 - }
470 - }
471 -
472 - .set-finish {
473 - width: 90%;
474 - margin: 0 auto;
475 - margin-top: 1rem;
476 - border-radius: 0.25rem;
477 - color: white;
478 - padding: 0.35rem 0;
479 - background-color: #8ea8cf;
480 - }
481 - }
482 -}
483 -.el-picker-panel {
484 - z-index: 9999999 !important;
485 -}
486 -.el-select-dropdown {
487 - z-index: 9999999 !important;
488 -}
489 -.vux-selector {
490 - display: inline-block !important;
491 - .weui-select {
492 - padding-right: 0 !important;
493 - }
494 -}
495 -</style>
1 -<template>
2 - <div class="setTimeBox" v-transfer-dom>
3 - <x-dialog class="set-bom-prop" v-model="this.$store.state.setTimeBox_show">
4 - <div class="set-bom-prop-title">
5 - <div>设置门店到货时间</div>
6 - </div>
7 - <ul class="title-list">
8 - <li class="supplier">{{supplier_name}}</li>
9 - <li class="materiel">{{materiel_name}}</li>
10 - </ul>
11 - <ul class="row-list" v-for="(item, index) in store_list" :key="index" v-if="item.dist_way === 'D'">
12 - <li class="row-title">
13 - 每天订货
14 - </li>
15 - <li>
16 - <flexbox justify="space-between">
17 - <flexbox-item :span="4.5" class="store-name">
18 - <span>{{item.store_name}}</span>
19 - </flexbox-item>
20 - <flexbox-item :span="7" style="text-align:right;padding-right:5px;">
21 - 第
22 - <selector @on-change="preventS" class="selector" v-model="item.dist_day" placeholder="请选择" :options="distDay"></selector>
23 - 天
24 - <selector @on-change="preventS" class="selector" v-model="item.dist_time" placeholder="请选择" :options="distTime"></selector>
25 - 到货
26 - </flexbox-item>
27 - </flexbox>
28 - </li>
29 - </ul>
30 - <ul class="row-list" v-for="(item, index) in store_list" :key="index" v-if="item.dist_way === 'W'">
31 - <li class="row-title">
32 - 每周{{getWeek('order')}}订货
33 - </li>
34 - <li>
35 - <flexbox justify="space-between">
36 - <flexbox-item :span="5.5" class="store-name">
37 - <span>{{item.store_name}}</span>
38 - </flexbox-item>
39 - <flexbox-item :span="6.5" style="text-align:right;padding-right:5px;">
40 - <selector @on-change="preventS" class="selector" v-model="item.dist_day" placeholder="请选择" :options="distWeek"></selector>
41 - <selector @on-change="preventS" class="selector" v-model="item.dist_time" placeholder="请选择" :options="distTime"></selector>
42 - 到货
43 - </flexbox-item>
44 - </flexbox>
45 - </li>
46 - </ul>
47 - <ul class="row-list" v-for="(item, index) in store_list" :key="index" v-if="item.dist_way === 'M'">
48 - <li class="row-title">
49 - 每月{{getMonth(item.order_day)}}订货
50 - </li>
51 - <li>
52 - <flexbox justify="space-between">
53 - <flexbox-item :span="4.5" class="store-name">
54 - <span>{{item.store_name}}</span>
55 - </flexbox-item>
56 - <flexbox-item :span="7" style="text-align:right;padding-right:5px;">
57 - <selector @on-change="preventS" class="selector" v-model="item.dist_day" placeholder="请选择" :options="distMonth" style="text-align:center;"></selector>
58 - <selector @on-change="preventS" class="selector" v-model="item.dist_time" placeholder="请选择" :options="distTime"></selector>
59 - 到货
60 - </flexbox-item>
61 - </flexbox>
62 - </li>
63 - </ul>
64 - <div class="set-finish">
65 - <div @click="finishSet()" class="set-finish-btn">确定</div>
66 - </div>
67 - </x-dialog>
68 - </div>
69 -</template>
70 -
71 -<script>
72 -/**
73 - * 订货送货计划总览设置门店到货时间组件
74 - *
75 - * 此组件是否显示的boolean值存在vuex中，无需传入
76 - *
77 - * @param {string} supplier_name 供应商名
78 - * @param {string} materiel_name 物料组名
79 - * @param {array} list 内容
80 - * @returns {object}
81 - *
82 - * @date 2018-08-31
83 - */
84 -import { Flexbox, FlexboxItem, XDialog, TransferDomDirective as TransferDom, Popup, Picker, Selector } from 'vux'
85 -import { compat } from 'logistics/static/js/compatibility'
86 -export default {
87 - components: {
88 - Flexbox, FlexboxItem, XDialog, TransferDom, Popup, Picker, Selector
89 - },
90 - mixins: [compat],
91 - mounted () {
92 - // 没有关闭按钮的组件，点击遮罩层可以直接关闭此弹框（不保存设置内容）
93 - this.$nextTick(() => {
94 - let mask = document.getElementsByClassName('setTimeBox')[0].getElementsByClassName('weui-mask')[0];
95 - mask.addEventListener('click', () => {
96 - this.$store.commit('checksetTimeBox');
97 - });
98 - });
99 - },
100 - props: ['supplier_name', 'materiel_name', 'list'],
101 - data () {
102 - return {
103 - distDay: [
104 - {
105 - value: 2,
106 - key: 'DAY+1d'
107 - },
108 - {
109 - value: 3,
110 - key: 'DAY+2d'
111 - },
112 - {
113 - value: 4,
114 - key: 'DAY+3d'
115 - },
116 - {
117 - value: 5,
118 - key: 'DAY+4d'
119 - },
120 - {
121 - value: 6,
122 - key: 'DAY+5d'
123 - },
124 - {
125 - value: 7,
126 - key: 'DAY+6d'
127 - },
128 - {
129 - value: 8,
130 - key: 'DAY+7d'
131 - },
132 - {
133 - value: 9,
134 - key: 'DAY+8d'
135 - },
136 - {
137 - value: 10,
138 - key: 'DAY+9d'
139 - }
140 - ],
141 - distWeek: [
142 - {
143 - value: '周一',
144 - key: 'MON'
145 - },
146 - {
147 - value: '周二',
148 - key: 'TUE'
149 - },
150 - {
151 - value: '周三',
152 - key: 'WED'
153 - },
154 - {
155 - value: '周四',
156 - key: 'THU'
157 - },
158 - {
159 - value: '周五',
160 - key: 'FRI'
161 - },
162 - {
163 - value: '周六',
164 - key: 'SAT'
165 - },
166 - {
167 - value: '周日',
168 - key: 'SUN'
169 - },
170 - {
171 - value: '下周一',
172 - key: 'MON+1w'
173 - },
174 - {
175 - value: '下周二',
176 - key: 'TUE+1w'
177 - },
178 - {
179 - value: '下周三',
180 - key: 'WED+1w'
181 - },
182 - {
183 - value: '下周四',
184 - key: 'THU+1w'
185 - },
186 - {
187 - value: '下周五',
188 - key: 'FRI+1w'
189 - },
190 - {
191 - value: '下周六',
192 - key: 'SAT+1w'
193 - },
194 - {
195 - value: '下周日',
196 - key: 'SUN+1w'
197 - }
198 - ],
199 - distMonth: [
200 - {
201 - value: '1号',
202 - key: '1'
203 - },
204 - {
205 - value: '2号',
206 - key: '2'
207 - },
208 - {
209 - value: '3号',
210 - key: '3'
211 - },
212 - {
213 - value: '4号',
214 - key: '4'
215 - },
216 - {
217 - value: '5号',
218 - key: '5'
219 - },
220 - {
221 - value: '6号',
222 - key: '6'
223 - },
224 - {
225 - value: '7号',
226 - key: '7'
227 - },
228 - {
229 - value: '8号',
230 - key: '8'
231 - },
232 - {
233 - value: '9号',
234 - key: '9'
235 - },
236 - {
237 - value: '10号',
238 - key: '10'
239 - },
240 - {
241 - value: '11号',
242 - key: '11'
243 - },
244 - {
245 - value: '12号',
246 - key: '12'
247 - },
248 - {
249 - value: '13号',
250 - key: '13'
251 - },
252 - {
253 - value: '14号',
254 - key: '14'
255 - },
256 - {
257 - value: '15号',
258 - key: '15'
259 - },
260 - {
261 - value: '16号',
262 - key: '16'
263 - },
264 - {
265 - value: '17号',
266 - key: '17'
267 - },
268 - {
269 - value: '18号',
270 - key: '18'
271 - },
272 - {
273 - value: '19号',
274 - key: '19'
275 - },
276 - {
277 - value: '20号',
278 - key: '20'
279 - },
280 - {
281 - value: '21号',
282 - key: '21'
283 - },
284 - {
285 - value: '22号',
286 - key: '22'
287 - },
288 - {
289 - value: '23号',
290 - key: '23'
291 - },
292 - {
293 - value: '24号',
294 - key: '24'
295 - },
296 - {
297 - value: '25号',
298 - key: '25'
299 - },
300 - {
301 - value: '26号',
302 - key: '26'
303 - },
304 - {
305 - value: '27号',
306 - key: '27'
307 - },
308 - {
309 - value: '28号',
310 - key: '28'
311 - },
312 - {
313 - value: '29号',
314 - key: '29'
315 - },
316 - {
317 - value: '30号',
318 - key: '30'
319 - },
320 - {
321 - value: '31号',
322 - key: '31'
323 - },
324 - {
325 - value: '月末',
326 - key: 'last'
327 - },
328 - {
329 - value: '次月1号',
330 - key: '1+1m'
331 - },
332 - {
333 - value: '次月2号',
334 - key: '2+1m'
335 - },
336 - {
337 - value: '次月3号',
338 - key: '3+1m'
339 - },
340 - {
341 - value: '次月4号',
342 - key: '4+1m'
343 - },
344 - {
345 - value: '次月5号',
346 - key: '5+1m'
347 - },
348 - {
349 - value: '次月6号',
350 - key: '6+1m'
351 - },
352 - {
353 - value: '次月7号',
354 - key: '7+1m'
355 - },
356 - {
357 - value: '次月8号',
358 - key: '8+1m'
359 - },
360 - {
361 - value: '次月9号',
362 - key: '9+1m'
363 - },
364 - {
365 - value: '次月10号',
366 - key: '10+1m'
367 - },
368 - {
369 - value: '次月11号',
370 - key: '11+1m'
371 - },
372 - {
373 - value: '次月12号',
374 - key: '12+1m'
375 - },
376 - {
377 - value: '次月13号',
378 - key: '13+1m'
379 - },
380 - {
381 - value: '次月14号',
382 - key: '14+1m'
383 - },
384 - {
385 - value: '次月15号',
386 - key: '15+1m'
387 - },
388 - {
389 - value: '次月16号',
390 - key: '16+1m'
391 - },
392 - {
393 - value: '次月17号',
394 - key: '17+1m'
395 - },
396 - {
397 - value: '次月18号',
398 - key: '18+1m'
399 - },
400 - {
401 - value: '次月19号',
402 - key: '19+1m'
403 - },
404 - {
405 - value: '次月20号',
406 - key: '20+1m'
407 - },
408 - {
409 - value: '次月21号',
410 - key: '21+1m'
411 - },
412 - {
413 - value: '次月22号',
414 - key: '22+1m'
415 - },
416 - {
417 - value: '次月23号',
418 - key: '23+1m'
419 - },
420 - {
421 - value: '次月24号',
422 - key: '24+1m'
423 - },
424 - {
425 - value: '次月25号',
426 - key: '25+1m'
427 - },
428 - {
429 - value: '次月26号',
430 - key: '26+1m'
431 - },
432 - {
433 - value: '次月27号',
434 - key: '27+1m'
435 - },
436 - {
437 - value: '次月28号',
438 - key: '28+1m'
439 - },
440 - {
441 - value: '次月29号',
442 - key: '29+1m'
443 - },
444 - {
445 - value: '次月30号',
446 - key: '30+1m'
447 - },
448 - {
449 - value: '次月31号',
450 - key: '31+1m'
451 - },
452 - {
453 - value: '次月月末',
454 - key: 'last+1m'
455 - }
456 - ],
457 - distTime: [
458 - {
459 - value: '00:00',
460 - key: '00:00'
461 - },
462 - {
463 - value: '00:30',
464 - key: '00:30'
465 - },
466 - {
467 - value: '01:00',
468 - key: '01:00'
469 - },
470 - {
471 - value: '01:30',
472 - key: '01:30'
473 - },
474 - {
475 - value: '02:00',
476 - key: '02:00'
477 - },
478 - {
479 - value: '02:30',
480 - key: '02:30'
481 - },
482 - {
483 - value: '03:00',
484 - key: '03:00'
485 - },
486 - {
487 - value: '03:30',
488 - key: '03:30'
489 - },
490 - {
491 - value: '04:00',
492 - key: '04:00'
493 - },
494 - {
495 - value: '04:30',
496 - key: '04:30'
497 - },
498 - {
499 - value: '05:00',
500 - key: '05:00'
501 - },
502 - {
503 - value: '05:30',
504 - key: '05:30'
505 - },
506 - {
507 - value: '06:00',
508 - key: '06:00'
509 - },
510 - {
511 - value: '06:30',
512 - key: '06:30'
513 - },
514 - {
515 - value: '07:30',
516 - key: '07:30'
517 - },
518 - {
519 - value: '08:00',
520 - key: '08:00'
521 - },
522 - {
523 - value: '08:30',
524 - key: '08:30'
525 - },
526 - {
527 - value: '09:00',
528 - key: '09:00'
529 - },
530 - {
531 - value: '09:30',
532 - key: '09:30'
533 - },
534 - {
535 - value: '10:00',
536 - key: '10:00'
537 - },
538 - {
539 - value: '10:30',
540 - key: '10:30'
541 - },
542 - {
543 - value: '11:00',
544 - key: '11:00'
545 - },
546 - {
547 - value: '11:30',
548 - key: '11:30'
549 - },
550 - {
551 - value: '12:00',
552 - key: '12:00'
553 - },
554 - {
555 - value: '12:30',
556 - key: '12:30'
557 - },
558 - {
559 - value: '13:00',
560 - key: '13:00'
561 - },
562 - {
563 - value: '13:30',
564 - key: '13:30'
565 - },
566 - {
567 - value: '14:00',
568 - key: '14:00'
569 - },
570 - {
571 - value: '14:30',
572 - key: '14:30'
573 - },
574 - {
575 - value: '15:00',
576 - key: '15:00'
577 - },
578 - {
579 - value: '15:30',
580 - key: '15:30'
581 - },
582 - {
583 - value: '16:00',
584 - key: '16:00'
585 - },
586 - {
587 - value: '16:30',
588 - key: '16:30'
589 - },
590 - {
591 - value: '17:00',
592 - key: '17:00'
593 - },
594 - {
595 - value: '17:30',
596 - key: '17:30'
597 - },
598 - {
599 - value: '18:00',
600 - key: '18:00'
601 - },
602 - {
603 - value: '18:30',
604 - key: '18:30'
605 - },
606 - {
607 - value: '19:00',
608 - key: '19:00'
609 - },
610 - {
611 - value: '19:30',
612 - key: '19:30'
613 - },
614 - {
615 - value: '20:00',
616 - key: '20:00'
617 - },
618 - {
619 - value: '20:30',
620 - key: '20:30'
621 - },
622 - {
623 - value: '21:00',
624 - key: '21:00'
625 - },
626 - {
627 - value: '21:30',
628 - key: '21:30'
629 - },
630 - {
631 - value: '22:00',
632 - key: '22:00'
633 - },
634 - {
635 - value: '22:30',
636 - key: '22:30'
637 - },
638 - {
639 - value: '23:00',
640 - key: '23:00'
641 - },
642 - {
643 - value: '23:30',
644 - key: '23:30'
645 - }
646 - ],
647 - store_list: [] // 商店列表
648 - }
649 - },
650 - watch: {
651 - /**
652 - * 需要使用watch方法来监听外部传入list是否改变，然后使用数组push方法触发子组件视图更新
653 - * -------------------------
654 - **/
655 - list: function (val) {
656 - let list = [];
657 - for (let i = 0; i < val.length; i++) {
658 - list.push(val[i]);
659 - }
660 - this.store_list = _.cloneDeep(list);
661 - this.store_list.forEach((v, i) => {
662 - if (v.dist_way === 'W') {
663 - this.distWeek.forEach((w, wi) => {
664 - if (v.order_day === w.key) {
665 - this.distWeek = this.distWeek.slice(wi);
666 - }
667 - });
668 - } else if (v.dist_way === 'M') {
669 - this.distWeek.forEach((m, mi) => {
670 - if (v.order_day === m.key) {
671 - this.distMonth = this.distMonth.slice(mi);
672 - }
673 - });
674 - }
675 - });
676 - console.warn(this.store_list);
677 - }
678 - },
679 - methods: {
680 - finishSet () {
681 - /**
682 - * 确定
683 - * -------------------------
684 - **/
685 - this.$store.commit('checksetTimeBox');
686 - this.$emit('compelete', _.cloneDeep(this.store_list));
687 - },
688 - getWeek (t) {
689 - let str;
690 - switch (t) {
691 - case 'order':
692 - str = this.store_list[0].order_day;
693 - switch (str) {
694 - case 'MON':
695 - return '周一';
696 - case 'TUE':
697 - return '周二';
698 - case 'WED':
699 - return '周三';
700 - case 'THU':
701 - return '周四';
702 - case 'FRI':
703 - return '周五';
704 - case 'SAT':
705 - return '周六';
706 - case 'SUN':
707 - return '周日';
708 - };
709 - break;
710 - case 'dist':
711 - str = this.store_list[arguments[1]].dist_day;
712 - switch (str) {
713 - case 'MON':
714 - return '周一';
715 - case 'TUE':
716 - return '周二';
717 - case 'WED':
718 - return '周三';
719 - case 'THU':
720 - return '周四';
721 - case 'FRI':
722 - return '周五';
723 - case 'SAT':
724 - return '周六';
725 - case 'SUN':
726 - return '周日';
727 - case 'MON+1w':
728 - return '下周一';
729 - case 'TUE+1w':
730 - return '下周二';
731 - case 'WED+1w':
732 - return '下周三';
733 - case 'THU+1w':
734 - return '下周四';
735 - case 'FRI+1w':
736 - return '下周五';
737 - case 'SAT+1w':
738 - return '下周六';
739 - case 'SUN+1w':
740 - return '下周日';
741 - };
742 - break;
743 - }
744 - },
745 - getMonth (str) {
746 - if (str === 'last') {
747 - return '月末'
748 - } else {
749 - if (str.split('+').length > 1) {
750 - if (str.split('+')[0] === 'last') {
751 - return '次月月末'
752 - } else {
753 - return '次月' + str.split('+')[0] + '号'
754 - }
755 - } else {
756 - return str + '号';
757 - }
758 - }
759 - }
760 - }
761 -}
762 -</script>
763 -
764 -<style lang="less">
765 -.weui-dialog {
766 - padding-bottom: 1rem !important;
767 - width: 90% !important;
768 - max-width: 1000px !important;
769 -}
770 -.red {
771 - color: red;
772 - font-style: normal;
773 -}
774 -.green {
775 - color: green;
776 -}
777 -.supplier {
778 - text-align: left;
779 - padding: 0.4rem 0.8rem;
780 -}
781 -.materiel {
782 - text-align: left;
783 - padding: 0.4rem 0.8rem;
784 - color: #8ea8cf;
785 -}
786 -.setTimeBox {
787 - color: #666;
788 - font-size: 14px;
789 - ul {
790 - list-style: none;
791 - margin: 0;
792 - padding: 0;
793 - }
794 - .set-bom-prop {
795 - padding: 0;
796 - min-height: 40px;
797 - font-size: 15px;
798 - line-height: 1.3;
799 - word-wrap: break-word;
800 - word-break: break-all;
801 - color: #999999;
802 - touch-action: none;
803 - .set-bom-prop-title {
804 - font-size: 18px;
805 - background-color: #8ea9cf;
806 - color: #FFFFFF;
807 - padding: 0.5em 1.6em 0.5em;
808 - }
809 - .title-list {
810 - font-size: 16px;
811 - color: #333;
812 - }
813 - .row-list {
814 - li {
815 - display: flex;
816 - padding: 0.4rem 0 0.4rem 0.8rem;
817 - border-bottom: 1px solid #c7c7c7;
818 - em {
819 - font-style: normal;
820 - }
821 - .el-input {
822 - width: 4rem;
823 - margin: 0 3px;
824 - }
825 - .el-input__inner {
826 - padding: 0;
827 - padding-left: 10px;
828 - }
829 - }
830 - .row-title {
831 - display: block;
832 - text-align: center;
833 - padding: 0.8rem 0;
834 - }
835 - .store-name {
836 - i {
837 - vertical-align: middle;
838 - color: #8ea8cf;
839 - }
840 - span {
841 - vertical-align: middle;
842 - line-height: 2em;
843 - }
844 - }
845 - .add-store {
846 - padding-left: 4.5rem;
847 - border-top: 2px solid #c7c7c7;
848 - border-bottom: 4px solid #c7c7c7;
849 - i {
850 - vertical-align: middle;
851 - color: #8ea8cf;
852 - }
853 - span {
854 - vertical-align: middle;
855 - line-height: 2em;
856 - }
857 - }
858 - }
859 - .set-finish {
860 - width: 90%;
861 - margin: 0 auto;
862 - margin-top: 1rem;
863 - border-radius: 0.25rem;
864 - color: white;
865 - padding: 0.35rem 0;
866 - background-color: #8ea8cf;
867 - }
868 - }
869 - .el-input__prefix {
870 - display: none;
871 - }
872 -}
873 -
874 -select {
875 - width: 4rem;
876 - margin: 0 3px;
877 - padding-left: 10px;
878 - background-color: #fff;
879 - border-radius: 4px;
880 - border: 1px solid #dcdfe6;
881 - color: #606266;
882 - height: 40px;
883 - line-height: 40px;
884 - outline: 0;
885 - transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
886 -}
887 -
888 -.vux-selector {
889 - display: inline-block !important;
890 - .weui-select {
891 - padding: 0 5px !important;
892 - border-radius: 5px;
893 - border: 1px solid #d6d7dc;
894 - text-align: center !important;
895 - }
896 -}
897 -.weui-cell_select .weui-cell__bd:after {
898 - display: none !important;
899 -}
900 -.weui-cell:before {
901 - display: none;
902 -}
903 -
904 -</style>
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>
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">
6 - {{title}}
7 - </div>
8 - <div class="wrapper-scroll">
9 - <div v-for="(v, k) in shortcut" :key="k">
10 - <flexbox class="shortcut-title">
11 - <flexbox-item :span="9">
12 - <check-icon @click.native="shortcutCheck(k)" :value.sync="shortcut[k].checked">
13 - <span>{{v.sku_name}}</span>
14 - </check-icon>
15 - </flexbox-item>
16 - <flexbox-item @click.native="shortcutFold(k)" style="margin-left: 0;">
17 - <span style="color: #8EA8CF;">{{v.sku_count}}种物料</span>
18 - <i class="fa fa-chevron-right"></i>
19 - </flexbox-item>
20 - </flexbox>
21 - <div class="shortcut-content fold-content">
22 - <div v-for="(item, index) in v.list" :key="index">{{item.sku_name}}</div>
23 - </div>
24 - </div>
25 - <div class="material-wrapper">
26 - <flexbox>
27 - <flexbox-item :span="7.5">
28 - <check-icon class="material-all-checked" @click.native="checkAll(all_checked)" :value.sync="all_checked">
29 - {{caption}}（<span style="color: #8EA8CF;">{{category_num}}</span>/{{category_sum}}）
30 - </check-icon>
31 - </flexbox-item>
32 - <flexbox-item :span="4.5" style="margin-left: 0;">
33 - <div class="add-product-wrapper">
34 - <x-button class="add-btn" @click.native="addProduct" mini>新增原/物料</x-button>
35 - </div>
36 - </flexbox-item>
37 - </flexbox>
38 - <!-- <div class="material-all-checked">
39 - <flexbox>
40 - <flexbox-item :span="7">
41 - {{caption}}（<span style="color: #8EA8CF;">{{category_num}}</span>/{{product_sum}}）
42 - </flexbox-item>
43 - <flexbox-item :span="6">
44 - <div class="add-product-wrapper">
45 - <x-button class="add-btn" @click.native="cancel" mini>新增原/物料</x-button>
46 - </div>
47 - </flexbox-item>
48 - </flexbox>
49 - </div> -->
50 - <div class="material-classify">
51 - <div v-for="(item, index) in data_list" :key="index">
52 - <div style="border-top: 1px dashed #eee; width: 100%;"></div>
53 - <flexbox class="material-classify-title">
54 - <flexbox-item :span="10">
55 - <check-icon class="material-classify-checked" @click.native="changeCategory(index)" :value.sync="data_list[index].checked">
56 - {{item.name}}（<span style="color: #8EA8CF;">{{item.num}}</span>/{{item.sku_count}}）
57 - </check-icon>
58 - <!-- <div class="material-classify-checked">
59 - {{item.name}}（<span style="color: #8EA8CF;">{{item.num}}</span>/{{item.sku_count}}）
60 - </div> -->
61 - </flexbox-item>
62 - <flexbox-item @click.native="fold(index)">
63 - <div style="padding-top: 0.2rem; padding-left: 0.5rem;">
64 - <i class="fa fa-chevron-down" style="font-size: 0.7rem; color: #838383;"></i>
65 - </div>
66 - </flexbox-item>
67 - </flexbox>
68 - <div class="material-content">
69 - <flexbox :gutter="10" class="flexbox-material" v-for="(m, key) in item.sku_list" :key="key">
70 - <flexbox-item v-for="(v, k) in m" :key="k" class="store-item">
71 - <div v-if="!+v.disabled" @click="itemCheck(v, index, 'click')"
72 - :class="[v.checked === true ? 'flex-checked' : '', 'flex-material']">
73 - {{v.sku_name}}
74 - </div>
75 - <div v-else class="flex-material flex-disabled"> {{v.sku_name}} </div>
76 - </flexbox-item>
77 - </flexbox>
78 - </div>
79 - </div>
80 - </div>
81 - </div>
82 - </div>
83 - <div class="control-wrapper">
84 - <flexbox>
85 - <flexbox-item>
86 - <x-button class="close-btn" @click.native="cancel" mini>关闭</x-button>
87 - </flexbox-item>
88 - <flexbox-item>
89 - <x-button class="comfirm-btn" @click.native="comfirm" mini>确定</x-button>
90 - </flexbox-item>
91 - </flexbox>
92 - </div>
93 - </x-dialog>
94 - </div>
95 - </div>
96 -</template>
97 -
98 -<script>
99 -import { XDialog, TransferDomDirective as TransferDom, Flexbox, FlexboxItem, CheckIcon, XButton } from 'vux'
100 -
101 -export default {
102 - props: ['show', 'title', 'caption', 'list', 'span', 'shortcut'],
103 - directives: { TransferDom },
104 - components: { XDialog, Flexbox, FlexboxItem, CheckIcon, XButton },
105 - mounted () {
106 - },
107 - data () {
108 - return {
109 - all_checked: false,
110 - item_checked: false,
111 - data_list: [],
112 - category_num: 0,
113 - product_num: 0,
114 - checked_list: [],
115 - shortcut_checked_list: [],
116 - add_checked_list: []
117 - }
118 - },
119 - watch: {
120 - list (val, old) {
121 - if (val !== old) {
122 - this.data_list = [];
123 - // 动态生成绑定变量
124 - let foo = val;
125 - for (let i = 0; i < foo.length; i++) {
126 - // 补全物料占位
127 - let remainder = foo[i]['sku_list'].length % this.span;
128 - if (remainder > 0) {
129 - for (let y = 0; y < (this.span - remainder); y++) {
130 - foo[i]['sku_list'].push({
131 - sku_id: '',
132 - sku_name: '',
133 - checked: false,
134 - disabled: '0'
135 - })
136 - }
137 - }
138 - // 分割计算
139 - let tmp = [];
140 - while (foo[i]['sku_list'].length) {
141 - tmp.push(foo[i]['sku_list'].splice(0, this.span));
142 - }
143 - this.data_list.push({
144 - checked: false,
145 - name: foo[i]['name'],
146 - num: 0,
147 - sku_count: foo[i]['sku_count'],
148 - sku_list: tmp
149 - });
150 - }
151 - this.add_checked_list = _.uniq(this.add_checked_list)
152 - _.each(this.add_checked_list, item => {
153 - this.itemCheck(item, item.index)
154 - });
155 -
156 - // 模拟选中
157 - _.each(this.data_list, item => {
158 - _.each(item.sku_list, x => {
159 - _.each(x, y => {
160 - _.each(this.add_checked_list, z => {
161 - if (y.sku_id === z.sku_id) {
162 - y.checked = true;
163 - }
164 - })
165 - })
166 - })
167 - });
168 - setTimeout(() => {
169 - for (let i = 0; i < $('.store-item').length; i++) {
170 - if (i % this.span !== 0) {
171 - continue;
172 - }
173 - if ($($('.store-item')[i]).height() > $($('.store-item')[i + 1]).height()) {
174 - $($('.store-item')[i + 1]).css('line-height', $($('.store-item')[i]).height() + 'px')
175 - } else if ($($('.store-item')[i]).height() < $($('.store-item')[i + 1]).height()) {
176 - $($('.store-item')[i]).css('line-height', $($('.store-item')[i + 1]).height() + 'px')
177 - }
178 - }
179 - }, 100);
180 - }
181 - },
182 - category_num (val) {
183 - // 小分类全选状态
184 - if (val === this.category_sum) {
185 - this.all_checked = true;
186 - } else {
187 - this.all_checked = false;
188 - }
189 - }
190 - },
191 - computed: {
192 - category_sum () {
193 - return _.reduce(this.data_list, (sum, n) => {
194 - return sum + n.sku_count;
195 - }, 0);
196 - },
197 - product_sum () {
198 - let foo = _.reduce(this.data_list, (sum, n) => {
199 - return sum + n.sku_count;
200 - }, 0);
201 - return foo;
202 - }
203 - },
204 - methods: {
205 - checkAll (checked) {
206 - // 勾选所有类别
207 - if (checked) {
208 - // 选中
209 - _.each(this.data_list, (item, key) => {
210 - this.data_list[key]['checked'] = true;
211 - this.changeCategory(key)
212 - });
213 - } else {
214 - // 取消
215 - _.each(this.data_list, (item, key) => {
216 - this.data_list[key]['checked'] = false;
217 - this.changeCategory(key)
218 - });
219 - }
220 - },
221 - itemCheck (item, i, method) {
222 - // 选中项
223 - if (method === 'click') {
224 - item.checked = !item.checked;
225 - }
226 - // 选中数量
227 - if (item.checked) {
228 - this.data_list[i]['num'] = this.data_list[i]['num'] < this.data_list[i]['sku_count'] ? this.data_list[i]['num'] + 1 : this.data_list[i]['sku_count'];
229 - // 新增数组内容
230 - this.checked_list.push(item.sku_id);
231 - //
232 - item.index = i;
233 - this.add_checked_list.push(item);
234 - } else {
235 - this.data_list[i]['checked'] = false;
236 - this.data_list[i]['num'] = this.data_list[i]['num'] > 0 ? this.data_list[i]['num'] - 1 : 0;
237 - // 移除数组内容
238 - _.each(this.checked_list, (v, k) => {
239 - if (item.sku_id && v === item.sku_id) {
240 - this.checked_list.splice(k, 1);
241 - }
242 - });
243 - _.each(this.add_checked_list, (v, k) => {
244 - if (v && v.sku_id === item.sku_id) {
245 - this.add_checked_list.splice(k, 1);
246 - }
247 - });
248 - }
249 - // 选中列表项
250 - this.$emit('check', this.add_checked_list);
251 - // 遍历勾选项 全选
252 - // 查询小分类勾选数量
253 - if (this.data_list[i]['num'] === this.data_list[i]['sku_count']) {
254 - this.data_list[i]['checked'] = true;
255 - }
256 - // 小分类勾选状态调整大分类状态
257 - let cat_checked = [];
258 - _.each(this.data_list, item => {
259 - if (item.checked) {
260 - cat_checked.push(item.checked)
261 - }
262 - });
263 - // this.category_num = cat_checked.length < this.data_list.length ? cat_checked.length : this.data_list.length;
264 - this.category_num = this.checked_list.length;
265 - },
266 - changeCategory (i) {
267 - // 勾选分类
268 - if (this.data_list[i]['checked']) {
269 - // 全选
270 - _.each(this.data_list[i]['sku_list'], item => {
271 - _.each(item, v => {
272 - v.checked = true;
273 - // 选中项ID
274 - if (!+v.disabled) {
275 - if (_.indexOf(this.checked_list, v.sku_id) < 0 && v.sku_id) {
276 - this.checked_list.push(v.sku_id);
277 - //
278 - v.index = i;
279 - this.add_checked_list.push(v);
280 - }
281 - }
282 - })
283 - });
284 - // 小分类数量全选
285 - this.data_list[i]['num'] = this.data_list[i]['sku_count'];
286 - // 新增所有分类勾选数量
287 - // this.category_num = this.category_num < this.data_list.length ? this.category_num + 1 : this.data_list.length;
288 - this.category_num = this.checked_list.length;
289 - } else {
290 - // 小分类ID集合
291 - let id_list = [];
292 - // 取消全选
293 - _.each(this.data_list[i]['sku_list'], item => {
294 - _.each(item, v => {
295 - v.checked = false;
296 - // 集合
297 - id_list.push(v.sku_id)
298 - })
299 - });
300 - // 移除数组内容
301 - _.each(id_list, n => {
302 - _.each(this.checked_list, (v, k) => {
303 - if (v === n) {
304 - this.checked_list.splice(k, 1);
305 - }
306 - });
307 - });
308 - this.add_checked_list = _.uniq(this.add_checked_list)
309 - _.each(id_list, n => {
310 - _.each(this.add_checked_list, (v, k) => {
311 - if (v && v.sku_id === n) {
312 - this.add_checked_list.splice(k, 1);
313 - }
314 - });
315 - });
316 - // 小分类数量归零
317 - this.data_list[i]['num'] = 0;
318 - // 减少所有分类勾选数量
319 - // this.category_num = this.category_num > 0 ? this.category_num - 1 : 0;
320 - this.category_num = this.checked_list.length;
321 - }
322 - },
323 - cancel () {
324 - // 关闭选择框
325 - this.$emit('cancel', !this.show);
326 - this.clear();
327 - },
328 - comfirm () {
329 - // 确认选择框
330 - let arr = [];
331 - _.each(this.data_list, x => {
332 - _.each(x.sku_list, y => {
333 - _.each(y, z => {
334 - _.each(this.checked_list, item => {
335 - if (item === z.sku_id) {
336 - z.sku_classname = x.name;
337 - arr.push(z);
338 - }
339 - })
340 - })
341 - })
342 - });
343 - arr = _.uniq(arr);
344 - this.$emit('comfirm', arr);
345 - this.clear();
346 - },
347 - clear () {
348 - // 清空选择项
349 - if (this.all_checked) {
350 - this.all_checked = false;
351 - }
352 - this.category_num = 0;
353 - _.each(this.data_list, (item, key) => {
354 - if (item.checked) {
355 - item.checked = false;
356 - item.num = 0;
357 - }
358 - _.each(item.sku_list, (v, k) => {
359 - _.each(v, x => {
360 - if (x.checked) {
361 - x.checked = false;
362 - item.num = 0;
363 - }
364 - })
365 - })
366 - });
367 - this.checked_list = [];
368 - // 清空快捷
369 - _.each(this.shortcut, item => {
370 - item.checked = false;
371 - });
372 - this.shortcut_checked_list = [];
373 - this.add_checked_list = [];
374 - },
375 - fold (index) {
376 - let has_class = $($('.material-classify-title')[index]).siblings('.material-content').hasClass('fold-content');
377 - if (has_class) {
378 - // 展开
379 - $($('.material-classify-title')[index]).siblings('.material-content').removeClass('fold-content');
380 - $($('.material-classify-title')[index]).find('i').addClass('fa-chevron-down').removeClass('fa-chevron-right');
381 - } else {
382 - // 折叠
383 - $($('.material-classify-title')[index]).siblings('.material-content').addClass('fold-content');
384 - $($('.material-classify-title')[index]).find('i').addClass('fa-chevron-right').removeClass('fa-chevron-down');
385 - }
386 - },
387 - shortcutFold (index) {
388 - let has_class = $($('.shortcut-title')[index]).siblings('.shortcut-content').hasClass('fold-content');
389 - if (has_class) {
390 - // 展开
391 - $($('.shortcut-title')[index]).siblings('.shortcut-content').removeClass('fold-content');
392 - $($('.shortcut-title')[index]).find('i').addClass('fa-chevron-down').removeClass('fa-chevron-right');
393 - } else {
394 - // 折叠
395 - $($('.shortcut-title')[index]).siblings('.shortcut-content').addClass('fold-content');
396 - $($('.shortcut-title')[index]).find('i').addClass('fa-chevron-right').removeClass('fa-chevron-down');
397 - }
398 - },
399 - shortcutCheck (i) {
400 - // 快捷方式选中
401 - let list = _.map(this.shortcut[i].list, item => {
402 - return item.sku_id
403 - });
404 - if (this.shortcut[i]['checked']) {
405 - // 勾选
406 - this.shortcut_checked_list = this.shortcut_checked_list.concat(list);
407 - //
408 - _.each(this.data_list, (item, key) => {
409 - _.each(item.sku_list, (v, k) => {
410 - _.each(v, x => {
411 - // ID在快捷列表中存在
412 - if (_.indexOf(this.shortcut_checked_list, x.sku_id) >= 0 && !+x.disabled) {
413 - x.checked = true;
414 - if (!+x.disabled) {
415 - if (_.indexOf(this.checked_list, x.sku_id) < 0 && x.sku_id) {
416 - this.checked_list.push(x.sku_id);
417 - }
418 - }
419 - this.setCheck()
420 - }
421 - });
422 - })
423 - });
424 - } else {
425 - // 取消
426 - this.shortcut_checked_list = _.difference(this.shortcut_checked_list, list);
427 - this.removeCheck(list)
428 - }
429 - },
430 - setCheck () {
431 - // 勾选取消大小分类
432 - _.each(this.data_list, i => {
433 - _.each(i.sku_list, x => {
434 - let sum = 0;
435 - _.each(x, item => {
436 - if (_.indexOf(this.shortcut_checked_list, item.sku_id) >= 0 && !+item.disabled && item.sku_id) {
437 - sum = sum + 1;
438 - if (i.sku_count === sum) {
439 - i.checked = true;
440 - i.num = sum;
441 - } else {
442 - i.checked = false;
443 - i.num = sum;
444 - }
445 - }
446 - })
447 - });
448 - });
449 - let checked_list = []
450 - _.each(this.data_list, i => {
451 - if (i.checked) {
452 - checked_list.push(i.checked)
453 - }
454 - });
455 - // this.category_num = checked_list.length;
456 - this.category_num = this.checked_list.length;
457 - if (this.data_list.length === checked_list.length) {
458 - this.all_checked = true;
459 - }
460 - },
461 - removeCheck (list) {
462 - // 勾选取消大小分类
463 - _.each(this.data_list, i => {
464 - _.each(i.sku_list, x => {
465 - let sum = i.sku_count;
466 - _.each(x, item => {
467 - if (_.indexOf(list, item.sku_id) >= 0 && !+item.disabled && item.sku_id) {
468 - item.checked = false;
469 - sum = sum - 1;
470 - i.checked = false;
471 - i.num = sum;
472 - }
473 - })
474 - })
475 - });
476 - let checked_list = []
477 - _.each(this.data_list, i => {
478 - if (i.checked) {
479 - checked_list.push(i.checked)
480 - }
481 - });
482 - // this.category_num = checked_list.length;
483 - this.category_num = this.checked_list.length;
484 - if (this.data_list.length !== checked_list.length) {
485 - this.all_checked = false;
486 - }
487 - // 移除数组内容
488 - _.each(list, n => {
489 - _.each(this.checked_list, (v, k) => {
490 - if (v === n) {
491 - this.checked_list.splice(k, 1);
492 - }
493 - });
494 - });
495 - },
496 - addProduct () {
497 - // 打开新增原物料
498 - this.$emit('add', true);
499 - }
500 - }
501 -}
502 -</script>
503 -
504 -<style lang="less">
505 - .choose-material-page {
506 - }
507 -
508 -
509 - .material-title {
510 - padding: 0.5rem;
511 - font-size: 1.1rem;
512 - border-bottom: 1px solid #eee;
513 - }
514 -
515 - .wrapper-scroll {
516 - overflow-y: scroll;
517 - max-height: 30rem;
518 - .shortcut-title {
519 - span {
520 - font-size: 0.8rem;
521 - }
522 - i {
523 - font-size: 0.7rem;
524 - color: #838383;
525 - }
526 - }
527 - .shortcut-content {
528 - text-align: left;
529 - padding: 0rem 0 0.5rem 2rem;
530 - div {
531 - font-size: 0.5rem;
532 - border: 1px solid #8EA8CF;
533 - color: #8EA8CF;
534 - padding: 0.2rem 0.4rem;
535 - margin-right: 0.5rem;
536 - margin-top: 0.5rem;
537 - display: inline-block;
538 - }
539 - }
540 - .fold-content {
541 - height: 0;
542 - overflow: hidden;
543 - padding-bottom: 0;
544 - }
545 - }
546 -
547 - .material-wrapper {
548 - text-align: left;
549 - .material-all-checked {
550 - font-size: 0.9rem;
551 - padding: 0.5rem 0 0.8rem 0.5rem;
552 - }
553 - .material-classify {
554 - .material-classify-checked {
555 - font-size: 0.9rem;
556 - padding: 0.4rem 0.2rem 0.1rem 0.85rem;
557 - }
558 - .material-classify-title {
559 - margin-bottom: 0.5rem;
560 - }
561 - .material-content {
562 - padding: 0 0.5rem;
563 - border-bottom: 1px dashed #eee;
564 - .flexbox-material {
565 - padding-bottom: 10px;
566 - .flex-material {
567 - text-align: center;
568 - color: #333333;
569 - background-color: #f6f6f6;
570 - }
571 - .flex-checked {
572 - color: #2c426b;
573 - background-color: #C4D4E7;
574 - }
575 - .flex-disabled {
576 - color: #CCCCCC;
577 - background-color: #EAEFF7;
578 - }
579 - }
580 - }
581 - .fold-content {
582 - height: 0;
583 - overflow: hidden;
584 - padding-bottom: 0;
585 - }
586 - }
587 - }
588 -
589 - .control-wrapper {
590 - padding: 10px;
591 - .close-btn {
592 - background-color: #ffffff;
593 - color: #8EA8CF;
594 - border: 1px solid #8EA8CF;
595 - width: 100%;
596 - }
597 - .comfirm-btn {
598 - background-color: #8EA8CF;
599 - color: #ffffff;
600 - border: 1px solid #8EA8CF;
601 - width: 100%;
602 - }
603 - }
604 -
605 - .add-product-wrapper {
606 - padding: 10px;
607 - display: inline-block;
608 - .add-btn {
609 - background-color: #ffffff;
610 - color: #8EA8CF;
611 - border: 1px solid #8EA8CF;
612 - width: 100%;
613 - }
614 - }
615 -
616 - .weui-dialog {
617 - width: 90% !important;
618 - max-width: 400px;
619 - }
620 -
621 - @media screen and (min-width: 1024px) {
622 - .weui-dialog {
623 - width: 35%;
624 - }
625 - }
626 -
627 - .weui-btn:after {
628 - border: 0 !important;
629 - }
630 -
631 - .weui-icon-circle {
632 - font-size: 20px !important;
633 - }
634 -
635 - .weui-icon-success {
636 - font-size: 20px !important;
637 - }
638 -
639 - .vux-check-icon > .weui-icon-success:before, .vux-check-icon > .weui-icon-success-circle:before {
640 - color: #8EA8CF !important;
641 - }
642 -
643 -</style>
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>
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">{{title}}</div>
6 - <div class="wrapper-scroll">
7 - <div v-for="(v, k) in shortcut" :key="k">
8 - <flexbox class="shortcut-title">
9 - <flexbox-item :span="9">
10 - <check-icon @click.native="shortcutCheck(k)" :value.sync="shortcut[k].checked">
11 - <span>{{v.sku_name}}</span>
12 - </check-icon>
13 - </flexbox-item>
14 - <flexbox-item @click.native="shortcutFold(k)" style="margin-left: 0;">
15 - <span style="color: #8EA8CF;">{{v.sku_count}}种物料</span>
16 - <i class="fa fa-chevron-right"></i>
17 - </flexbox-item>
18 - </flexbox>
19 - <div class="shortcut-content fold-content">
20 - <div v-for="(item, index) in v.list" :key="index">{{item.sku_name}}</div>
21 - </div>
22 - </div>
23 - <div class="material-wrapper">
24 - <check-icon class="material-all-checked" @click.native="checkAll(all_checked)" :value.sync="all_checked">
25 - {{caption}}（<span style="color: #8EA8CF;">{{category_num}}</span>/{{category_sum}}）
26 - </check-icon>
27 - <div class="material-classify">
28 - <div class="material-index" v-for="(item, index) in data_list" :key="index">
29 - <div style="border-top: 1px dashed #eee; width: 100%;"></div>
30 - <flexbox class="material-classify-title">
31 - <flexbox-item :span="10">
32 - <check-icon class="material-classify-checked" @click.native="changeCategory(index)" :value.sync="data_list[index].checked">
33 - {{item.name}}（<span style="color: #8EA8CF;">{{item.num}}</span>/{{item.sku_count}}）
34 - </check-icon>
35 - </flexbox-item>
36 - <flexbox-item @click.native="fold(index)">
37 - <div style="padding-top: 0.2rem; padding-left: 0.5rem;">
38 - <i class="fa fa-chevron-down" style="font-size: 0.7rem; color: #838383;"></i>
39 - </div>
40 - </flexbox-item>
41 - </flexbox>
42 - <div class="material-content">
43 - <flexbox :gutter="10" class="flexbox-material material-item" v-for="(m, key) in item.sku_list" :key="key">
44 - <flexbox-item v-for="(v, k) in m" :key="k" :class="['material-item' + '-' + k]">
45 - <div v-if="!+v.disabled" @click="itemCheck(v, index, 'click')"
46 - :class="[v.checked === true ? 'flex-checked' : '', 'flex-material']">
47 - {{v.sku_name}}
48 - </div>
49 - <div v-else class="flex-material flex-disabled"> {{v.sku_name}} </div>
50 - </flexbox-item>
51 - </flexbox>
52 - </div>
53 - </div>
54 - </div>
55 - </div>
56 - </div>
57 - <div class="control-wrapper">
58 - <flexbox>
59 - <flexbox-item>
60 - <x-button class="close-btn" @click.native="cancel" mini>关闭</x-button>
61 - </flexbox-item>
62 - <flexbox-item>
63 - <x-button class="comfirm-btn" @click.native="comfirm" mini>确定</x-button>
64 - </flexbox-item>
65 - </flexbox>
66 - </div>
67 - </x-dialog>
68 - </div>
69 - </div>
70 -</template>
71 -
72 -<script>
73 -import { XDialog, TransferDomDirective as TransferDom, Flexbox, FlexboxItem, CheckIcon, XButton } from 'vux'
74 -
75 -export default {
76 - props: ['show', 'title', 'caption', 'list', 'span', 'shortcut'],
77 - directives: { TransferDom },
78 - components: { XDialog, Flexbox, FlexboxItem, CheckIcon, XButton },
79 - mounted () {
80 - },
81 - data () {
82 - return {
83 - all_checked: false,
84 - item_checked: false,
85 - data_list: [],
86 - category_num: 0,
87 - checked_list: [],
88 - shortcut_checked_list: []
89 - }
90 - },
91 - watch: {
92 - list (val, old) {
93 - if (val !== old) {
94 - this.data_list = [];
95 - // 动态生成绑定变量
96 - let foo = val;
97 - for (let i = 0; i < foo.length; i++) {
98 - // 补全物料占位
99 - let remainder = foo[i]['sku_list'].length % this.span;
100 - if (remainder > 0) {
101 - for (let y = 0; y < (this.span - remainder); y++) {
102 - foo[i]['sku_list'].push({
103 - sku_id: '',
104 - sku_name: '',
105 - checked: false,
106 - disabled: '0'
107 - })
108 - }
109 - }
110 - // 分割计算
111 - let tmp = [];
112 - while (foo[i]['sku_list'].length) {
113 - tmp.push(foo[i]['sku_list'].splice(0, this.span));
114 - }
115 - this.data_list.push({
116 - checked: false,
117 - name: foo[i]['name'],
118 - num: 0,
119 - sku_count: foo[i]['sku_count'],
120 - sku_list: tmp
121 - });
122 - }
123 - }
124 - setTimeout(() => {
125 - let arr = $('.material-item');
126 - function getDom (dom, index) {
127 - return $(dom).children().eq(index)
128 - }
129 - _.each(arr, (v, k) => {
130 - _.each($(v), x => {
131 - if (getDom(x, 0).height() > getDom(x, 1).height()) {
132 - getDom(x, 1).css('line-height', getDom(x, 0).height() + 'px')
133 - getDom(x, 1).css('height', getDom(x, 0).height() + 'px')
134 - } else if (getDom(x, 0).height() < getDom(x, 1).height()) {
135 - getDom(x, 0).css('line-height', getDom(x, 1).height() + 'px')
136 - getDom(x, 0).css('height', getDom(x, 1).height() + 'px')
137 - }
138 - })
139 - });
140 - }, 100);
141 - },
142 - category_num (val) {
143 - // 小分类全选状态
144 - if (val === this.category_sum) {
145 - this.all_checked = true;
146 - } else {
147 - this.all_checked = false;
148 - }
149 - }
150 - },
151 - computed: {
152 - category_sum () {
153 - return _.reduce(this.data_list, (sum, n) => {
154 - return sum + n.sku_count;
155 - }, 0);
156 - }
157 - },
158 - methods: {
159 - checkAll (checked) {
160 - // 勾选所有类别
161 - if (checked) {
162 - // 选中
163 - _.each(this.data_list, (item, key) => {
164 - this.data_list[key]['checked'] = true;
165 - this.changeCategory(key)
166 - });
167 - } else {
168 - // 取消
169 - _.each(this.data_list, (item, key) => {
170 - this.data_list[key]['checked'] = false;
171 - this.changeCategory(key)
172 - });
173 - }
174 - },
175 - itemCheck (item, i, method) {
176 - // 选中项
177 - if (method === 'click') {
178 - item.checked = !item.checked;
179 - }
180 - // 选中数量
181 - if (item.checked) {
182 - this.data_list[i]['num'] = this.data_list[i]['num'] < this.data_list[i]['sku_count'] ? this.data_list[i]['num'] + 1 : this.data_list[i]['sku_count'];
183 - // 新增数组内容
184 - this.checked_list.push(item.sku_id);
185 - } else {
186 - this.data_list[i]['checked'] = false;
187 - this.data_list[i]['num'] = this.data_list[i]['num'] > 0 ? this.data_list[i]['num'] - 1 : 0;
188 - // 移除数组内容
189 - _.each(this.checked_list, (v, k) => {
190 - if (item.sku_id && v === item.sku_id) {
191 - this.checked_list.splice(k, 1);
192 - }
193 - });
194 - }
195 - // 遍历勾选项 全选
196 - // 查询小分类勾选数量
197 - if (this.data_list[i]['num'] === this.data_list[i]['sku_count']) {
198 - this.data_list[i]['checked'] = true;
199 - }
200 - // 小分类勾选状态调整大分类状态
201 - let cat_checked = [];
202 - _.each(this.data_list, item => {
203 - if (item.checked) {
204 - cat_checked.push(item.checked)
205 - }
206 - });
207 - // this.category_num = cat_checked.length < this.data_list.length ? cat_checked.length : this.data_list.length;
208 - this.category_num = this.checked_list.length;
209 - },
210 - changeCategory (i) {
211 - // 勾选分类
212 - if (this.data_list[i]['checked']) {
213 - // 全选
214 - _.each(this.data_list[i]['sku_list'], item => {
215 - _.each(item, v => {
216 - v.checked = true;
217 - // 选中项ID
218 - if (!+v.disabled) {
219 - if (_.indexOf(this.checked_list, v.sku_id) < 0 && v.sku_id) {
220 - this.checked_list.push(v.sku_id);
221 - }
222 - }
223 - })
224 - });
225 - // 小分类数量全选
226 - this.data_list[i]['num'] = this.data_list[i]['sku_count'];
227 - // 新增所有分类勾选数量
228 - // this.category_num = this.category_num < this.data_list.length ? this.category_num + 1 : this.data_list.length;
229 - this.category_num = this.checked_list.length;
230 - } else {
231 - // 小分类ID集合
232 - let id_list = [];
233 - // 取消全选
234 - _.each(this.data_list[i]['sku_list'], item => {
235 - _.each(item, v => {
236 - v.checked = false;
237 - // 集合
238 - id_list.push(v.sku_id)
239 - })
240 - });
241 - // 移除数组内容
242 - _.each(id_list, n => {
243 - _.each(this.checked_list, (v, k) => {
244 - if (v === n) {
245 - this.checked_list.splice(k, 1);
246 - }
247 - });
248 - });
249 - // 小分类数量归零
250 - this.data_list[i]['num'] = 0;
251 - // 减少所有分类勾选数量
252 - // this.category_num = this.category_num > 0 ? this.category_num - 1 : 0;
253 - this.category_num = this.checked_list.length;
254 - }
255 - },
256 - cancel () {
257 - // 关闭选择框
258 - this.$emit('cancel', !this.show);
259 - this.clear();
260 - },
261 - comfirm () {
262 - // 确认选择框
263 - let arr = [];
264 - _.each(this.data_list, x => {
265 - _.each(x.sku_list, y => {
266 - _.each(y, z => {
267 - _.each(this.checked_list, item => {
268 - if (item === z.sku_id) {
269 - z.sku_classname = x.name;
270 - arr.push(z);
271 - }
272 - })
273 - })
274 - })
275 - });
276 - this.$emit('comfirm', arr);
277 - this.clear();
278 - },
279 - clear () {
280 - // 清空选择项
281 - if (this.all_checked) {
282 - this.all_checked = false;
283 - }
284 - this.category_num = 0;
285 - _.each(this.data_list, (item, key) => {
286 - if (item.checked) {
287 - item.checked = false;
288 - item.num = 0;
289 - }
290 - _.each(item.sku_list, (v, k) => {
291 - _.each(v, x => {
292 - if (x.checked) {
293 - x.checked = false;
294 - item.num = 0;
295 - }
296 - })
297 - })
298 - });
299 - this.checked_list = [];
300 - // 清空快捷
301 - _.each(this.shortcut, item => {
302 - item.checked = false;
303 - });
304 - this.shortcut_checked_list = [];
305 - },
306 - fold (index) {
307 - let has_class = $($('.material-classify-title')[index]).siblings('.material-content').hasClass('fold-content');
308 - if (has_class) {
309 - // 展开
310 - $($('.material-classify-title')[index]).siblings('.material-content').removeClass('fold-content');
311 - $($('.material-classify-title')[index]).find('i').addClass('fa-chevron-down').removeClass('fa-chevron-right');
312 - } else {
313 - // 折叠
314 - $($('.material-classify-title')[index]).siblings('.material-content').addClass('fold-content');
315 - $($('.material-classify-title')[index]).find('i').addClass('fa-chevron-right').removeClass('fa-chevron-down');
316 - }
317 - },
318 - shortcutFold (index) {
319 - let has_class = $($('.shortcut-title')[index]).siblings('.shortcut-content').hasClass('fold-content');
320 - if (has_class) {
321 - // 展开
322 - $($('.shortcut-title')[index]).siblings('.shortcut-content').removeClass('fold-content');
323 - $($('.shortcut-title')[index]).find('i').addClass('fa-chevron-down').removeClass('fa-chevron-right');
324 - } else {
325 - // 折叠
326 - $($('.shortcut-title')[index]).siblings('.shortcut-content').addClass('fold-content');
327 - $($('.shortcut-title')[index]).find('i').addClass('fa-chevron-right').removeClass('fa-chevron-down');
328 - }
329 - },
330 - shortcutCheck (i) {
331 - // 快捷方式选中
332 - let list = _.map(this.shortcut[i].list, item => {
333 - return item.sku_id
334 - });
335 - if (this.shortcut[i]['checked']) {
336 - // 勾选
337 - this.shortcut_checked_list = this.shortcut_checked_list.concat(list);
338 - //
339 - _.each(this.data_list, (item, key) => {
340 - _.each(item.sku_list, (v, k) => {
341 - _.each(v, x => {
342 - // ID在快捷列表中存在
343 - if (_.indexOf(this.shortcut_checked_list, x.sku_id) >= 0 && !+x.disabled) {
344 - x.checked = true;
345 - if (!+x.disabled) {
346 - if (_.indexOf(this.checked_list, x.sku_id) < 0 && x.sku_id) {
347 - this.checked_list.push(x.sku_id);
348 - }
349 - }
350 - this.setCheck()
351 - }
352 - });
353 - })
354 - });
355 - } else {
356 - // 取消
357 - this.shortcut_checked_list = _.difference(this.shortcut_checked_list, list);
358 - this.removeCheck(list)
359 - }
360 - },
361 - setCheck () {
362 - // 勾选取消大小分类
363 - _.each(this.data_list, i => {
364 - _.each(i.sku_list, x => {
365 - let sum = 0;
366 - _.each(x, item => {
367 - if (_.indexOf(this.shortcut_checked_list, item.sku_id) >= 0 && !+item.disabled && item.sku_id) {
368 - sum = sum + 1;
369 - if (i.sku_count === sum) {
370 - i.checked = true;
371 - i.num = sum;
372 - } else {
373 - i.checked = false;
374 - i.num = sum;
375 - }
376 - }
377 - })
378 - });
379 - });
380 - let checked_list = []
381 - _.each(this.data_list, i => {
382 - if (i.checked) {
383 - checked_list.push(i.checked)
384 - }
385 - });
386 - // this.category_num = checked_list.length;
387 - this.category_num = this.checked_list.length;
388 - if (this.data_list.length === checked_list.length) {
389 - this.all_checked = true;
390 - }
391 - },
392 - removeCheck (list) {
393 - // 勾选取消大小分类
394 - _.each(this.data_list, i => {
395 - _.each(i.sku_list, x => {
396 - let sum = i.sku_count;
397 - _.each(x, item => {
398 - if (_.indexOf(list, item.sku_id) >= 0 && !+item.disabled && item.sku_id) {
399 - item.checked = false;
400 - sum = sum - 1;
401 - i.checked = false;
402 - i.num = sum;
403 - }
404 - })
405 - })
406 - });
407 - let checked_list = []
408 - _.each(this.data_list, i => {
409 - if (i.checked) {
410 - checked_list.push(i.checked)
411 - }
412 - });
413 - // this.category_num = checked_list.length;
414 - this.category_num = this.checked_list.length;
415 - if (this.data_list.length !== checked_list.length) {
416 - this.all_checked = false;
417 - }
418 - // 移除数组内容
419 - _.each(list, n => {
420 - _.each(this.checked_list, (v, k) => {
421 - if (v === n) {
422 - this.checked_list.splice(k, 1);
423 - }
424 - });
425 - });
426 - }
427 - }
428 -}
429 -</script>
430 -
431 -<style lang="less">
432 - .choose-material-page {
433 - }
434 -
435 -
436 - .material-title {
437 - padding: 0.5rem;
438 - font-size: 1.1rem;
439 - border-bottom: 1px solid #eee;
440 - }
441 -
442 - .wrapper-scroll {
443 - overflow-y: scroll;
444 - max-height: 30rem;
445 - .shortcut-title {
446 - span {
447 - font-size: 0.8rem;
448 - }
449 - i {
450 - font-size: 0.7rem;
451 - color: #838383;
452 - }
453 - }
454 - .shortcut-content {
455 - text-align: left;
456 - padding: 0rem 0 0.5rem 2rem;
457 - div {
458 - font-size: 0.5rem;
459 - border: 1px solid #8EA8CF;
460 - color: #8EA8CF;
461 - padding: 0.2rem 0.4rem;
462 - margin-right: 0.5rem;
463 - margin-top: 0.5rem;
464 - display: inline-block;
465 - }
466 - }
467 - .fold-content {
468 - height: 0;
469 - overflow: hidden;
470 - padding-bottom: 0;
471 - }
472 - }
473 -
474 - .material-wrapper {
475 - text-align: left;
476 - .material-all-checked {
477 - font-size: 0.9rem;
478 - padding: 0.5rem 0.2rem;
479 - }
480 - .material-classify {
481 - .material-classify-checked {
482 - font-size: 0.9rem;
483 - padding: 0.4rem 0.2rem 0.1rem 0.85rem;
484 - }
485 - .material-classify-title {
486 - margin-bottom: 0.5rem;
487 - }
488 - .material-content {
489 - padding: 0 0.5rem;
490 - border-bottom: 1px dashed #eee;
491 - .flexbox-material {
492 - padding-bottom: 10px;
493 - // align-items: center;
494 - // justify-content: center;
495 - .flex-material {
496 - text-align: center;
497 - color: #333333;
498 - background-color: #f6f6f6;
499 - }
500 - .flex-checked {
501 - color: #2c426b;
502 - background-color: #C4D4E7;
503 - }
504 - .flex-disabled {
505 - color: #CCCCCC;
506 - background-color: #EAEFF7;
507 - }
508 - }
509 - }
510 - .fold-content {
511 - height: 0;
512 - overflow: hidden;
513 - padding-bottom: 0;
514 - }
515 - }
516 - }
517 -
518 - .control-wrapper {
519 - padding: 10px;
520 - .close-btn {
521 - background-color: #ffffff;
522 - color: #8EA8CF;
523 - border: 1px solid #8EA8CF;
524 - width: 100%;
525 - }
526 - .comfirm-btn {
527 - background-color: #8EA8CF;
528 - color: #ffffff;
529 - border: 1px solid #8EA8CF;
530 - width: 100%;
531 - }
532 - }
533 -
534 - .weui-dialog {
535 - width: 90% !important;
536 - max-width: 400px;
537 - }
538 -
539 - @media screen and (min-width: 1024px) {
540 - .weui-dialog {
541 - width: 35%;
542 - }
543 - }
544 -
545 - .weui-btn:after {
546 - border: 0 !important;
547 - }
548 -
549 - .weui-icon-circle {
550 - font-size: 20px !important;
551 - }
552 -
553 - .weui-icon-success {
554 - font-size: 20px !important;
555 - }
556 -
557 - .vux-check-icon > .weui-icon-success:before, .vux-check-icon > .weui-icon-success-circle:before {
558 - color: #8EA8CF !important;
559 - }
560 -
561 -</style>
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>
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">{{title}}</div>
6 - <div class="wrapper-scroll">
7 - <div v-for="(v, k) in shortcut" :key="k">
8 - <flexbox class="shortcut-title">
9 - <flexbox-item :span="9">
10 - <check-icon @click.native="shortcutCheck(k)" :value.sync="shortcut[k].checked">
11 - <span>{{v.store_name}}</span>
12 - </check-icon>
13 - </flexbox-item>
14 - <flexbox-item @click.native="shortcutFold(k)" style="margin-left: 0;">
15 - <span style="color: #8EA8CF;">{{v.store_count}}种物料</span>
16 - <i class="fa fa-chevron-right"></i>
17 - </flexbox-item>
18 - </flexbox>
19 - <div class="shortcut-content fold-content">
20 - <div v-for="(item, index) in v.list" :key="index">{{item.store_name}}</div>
21 - </div>
22 - </div>
23 - <div class="material-wrapper">
24 - <check-icon class="material-all-checked" @click.native="checkAll(all_checked)" :value.sync="all_checked">
25 - {{caption}}（<span style="color: #8EA8CF;">{{category_num}}</span>/{{category_sum}}）
26 - </check-icon>
27 - <div class="material-classify">
28 - <div v-for="(item, index) in data_list" :key="index">
29 - <div style="border-top: 1px dashed #eee; width: 100%;"></div>
30 - <flexbox class="material-classify-title">
31 - <flexbox-item :span="10">
32 - <check-icon class="material-classify-checked" @click.native="changeCategory(index)" :value.sync="data_list[index].checked">
33 - {{item.name}}（<span style="color: #8EA8CF;">{{item.num}}</span>/{{item.store_count}}）
34 - </check-icon>
35 - </flexbox-item>
36 - <flexbox-item @click.native="fold(index)">
37 - <div style="padding-top: 0.2rem; padding-left: 0.5rem;">
38 - <i class="fa fa-chevron-down" style="font-size: 0.7rem; color: #838383;"></i>
39 - </div>
40 - </flexbox-item>
41 - </flexbox>
42 - <div class="material-content">
43 - <flexbox :gutter="10" class="flexbox-material" v-for="(m, key) in item.store_list" :key="key">
44 - <flexbox-item v-for="(v, k) in m" :key="k">
45 - <div v-if="!+v.disabled" @click="itemCheck(v, index, 'click')"
46 - :class="[v.checked === true ? 'flex-checked' : '', 'flex-material']">
47 - {{v.store_name}}
48 - </div>
49 - <div v-else class="flex-material flex-disabled"> {{v.store_name}} </div>
50 - </flexbox-item>
51 - </flexbox>
52 - </div>
53 - </div>
54 - </div>
55 - </div>
56 - </div>
57 - <div class="control-wrapper">
58 - <flexbox>
59 - <flexbox-item>
60 - <x-button class="close-btn" @click.native="cancel" mini>关闭</x-button>
61 - </flexbox-item>
62 - <flexbox-item>
63 - <x-button class="comfirm-btn" @click.native="comfirm" mini>确定</x-button>
64 - </flexbox-item>
65 - </flexbox>
66 - </div>
67 - </x-dialog>
68 - </div>
69 - </div>
70 -</template>
71 -
72 -<script>
73 -import { XDialog, TransferDomDirective as TransferDom, Flexbox, FlexboxItem, CheckIcon, XButton } from 'vux'
74 -
75 -export default {
76 - props: ['show', 'title', 'caption', 'list', 'span', 'shortcut', 'checkedList'],
77 - directives: { TransferDom },
78 - components: { XDialog, Flexbox, FlexboxItem, CheckIcon, XButton },
79 - mounted () {
80 - },
81 - data () {
82 - return {
83 - all_checked: false,
84 - item_checked: false,
85 - data_list: [],
86 - category_num: 0,
87 - checked_list: [],
88 - shortcut_checked_list: []
89 - }
90 - },
91 - watch: {
92 - list (val, old) {
93 - if (val !== old) {
94 - this.data_list = [];
95 - // 动态生成绑定变量
96 - let foo = val;
97 - for (let i = 0; i < foo.length; i++) {
98 - // 补全物料占位
99 - let remainder = foo[i]['store_list'].length % this.span;
100 - if (remainder > 0) {
101 - for (let y = 0; y < (this.span - remainder); y++) {
102 - foo[i]['store_list'].push({
103 - store_id: '',
104 - store_name: '',
105 - checked: false,
106 - disabled: '0'
107 - })
108 - }
109 - }
110 - // 分割计算
111 - let tmp = [];
112 - while (foo[i]['store_list'].length) {
113 - tmp.push(foo[i]['store_list'].splice(0, this.span));
114 - }
115 - this.data_list.push({
116 - checked: false,
117 - name: foo[i]['name'],
118 - num: 0,
119 - store_count: foo[i]['store_count'],
120 - store_list: tmp
121 - });
122 - }
123 - }
124 - },
125 - category_num (val) {
126 - // 小分类全选状态
127 - if (val === this.category_sum) {
128 - this.all_checked = true;
129 - } else {
130 - this.all_checked = false;
131 - }
132 - },
133 - checkedList (val) {
134 - if (val.length !== 0) {
135 - val.forEach(element => {
136 - this.data_list.forEach((data, index) => {
137 - data.store_list.forEach(s => {
138 - s.forEach(v => {
139 - if (element.store_id === v.store_id) {
140 - this.itemCheck(v, index, 'click');
141 - }
142 - })
143 - })
144 - })
145 - });
146 - }
147 - }
148 - },
149 - computed: {
150 - category_sum () {
151 - return _.reduce(this.data_list, (sum, n) => {
152 - return sum + n.store_count;
153 - }, 0);
154 - }
155 - },
156 - methods: {
157 - checkAll (checked) {
158 - // 勾选所有类别
159 - if (checked) {
160 - // 选中
161 - _.each(this.data_list, (item, key) => {
162 - this.data_list[key]['checked'] = true;
163 - this.changeCategory(key)
164 - });
165 - } else {
166 - // 取消
167 - _.each(this.data_list, (item, key) => {
168 - this.data_list[key]['checked'] = false;
169 - this.changeCategory(key)
170 - });
171 - }
172 - },
173 - itemCheck (item, i, method) {
174 - // 选中项
175 - if (method === 'click') {
176 - item.checked = !item.checked;
177 - }
178 - // 选中数量
179 - if (item.checked) {
180 - this.data_list[i]['num'] = this.data_list[i]['num'] < this.data_list[i]['store_count'] ? this.data_list[i]['num'] + 1 : this.data_list[i]['store_count'];
181 - // 新增数组内容
182 - this.checked_list.push(item.store_id);
183 - } else {
184 - this.data_list[i]['checked'] = false;
185 - this.data_list[i]['num'] = this.data_list[i]['num'] > 0 ? this.data_list[i]['num'] - 1 : 0;
186 - // 移除数组内容
187 - _.each(this.checked_list, (v, k) => {
188 - if (item.store_id && v === item.store_id) {
189 - this.checked_list.splice(k, 1);
190 - }
191 - });
192 - }
193 - // 遍历勾选项 全选
194 - // 查询小分类勾选数量
195 - if (this.data_list[i]['num'] === this.data_list[i]['store_count']) {
196 - this.data_list[i]['checked'] = true;
197 - }
198 - // 小分类勾选状态调整大分类状态
199 - let cat_checked = [];
200 - _.each(this.data_list, item => {
201 - if (item.checked) {
202 - cat_checked.push(item.checked)
203 - }
204 - });
205 - this.category_num = cat_checked.length < this.data_list.length ? cat_checked.length : this.data_list.length;
206 - },
207 - changeCategory (i) {
208 - // 勾选分类
209 - if (this.data_list[i]['checked']) {
210 - // 全选
211 - _.each(this.data_list[i]['store_list'], item => {
212 - _.each(item, v => {
213 - v.checked = true;
214 - // 选中项ID
215 - if (!+v.disabled) {
216 - if (_.indexOf(this.checked_list, v.store_id) < 0 && v.store_id) {
217 - this.checked_list.push(v.store_id);
218 - }
219 - }
220 - })
221 - });
222 - // 小分类数量全选
223 - this.data_list[i]['num'] = this.data_list[i]['store_count'];
224 - // 新增所有分类勾选数量
225 - this.category_num = this.category_num < this.data_list.length ? this.category_num + 1 : this.data_list.length;
226 - } else {
227 - // 小分类ID集合
228 - let id_list = [];
229 - // 取消全选
230 - _.each(this.data_list[i]['store_list'], item => {
231 - _.each(item, v => {
232 - v.checked = false;
233 - // 集合
234 - id_list.push(v.store_id)
235 - })
236 - });
237 - // 移除数组内容
238 - _.each(id_list, n => {
239 - _.each(this.checked_list, (v, k) => {
240 - if (v === n) {
241 - this.checked_list.splice(k, 1);
242 - }
243 - });
244 - });
245 - // 小分类数量归零
246 - this.data_list[i]['num'] = 0;
247 - // 减少所有分类勾选数量
248 - this.category_num = this.category_num > 0 ? this.category_num - 1 : 0;
249 - }
250 - },
251 - cancel () {
252 - // 关闭选择框
253 - this.$emit('cancel', !this.show);
254 - this.clear();
255 - },
256 - comfirm () {
257 - // 确认选择框
258 - let arr = [];
259 - _.each(this.data_list, x => {
260 - _.each(x.store_list, y => {
261 - _.each(y, z => {
262 - _.each(this.checked_list, item => {
263 - if (item === z.store_id) {
264 - z.route_name = x.name;
265 - arr.push(z);
266 - }
267 - })
268 - })
269 - })
270 - });
271 - this.$emit('comfirm', arr);
272 - this.clear();
273 - },
274 - clear () {
275 - // 清空选择项
276 - if (this.all_checked) {
277 - this.all_checked = false;
278 - }
279 - this.category_num = 0;
280 - _.each(this.data_list, (item, key) => {
281 - if (item.checked) {
282 - item.checked = false;
283 - item.num = 0;
284 - }
285 - _.each(item.store_list, (v, k) => {
286 - _.each(v, x => {
287 - if (x.checked) {
288 - x.checked = false;
289 - item.num = 0;
290 - }
291 - })
292 - })
293 - });
294 - this.checked_list = [];
295 - // 清空快捷
296 - _.each(this.shortcut, item => {
297 - item.checked = false;
298 - });
299 - this.shortcut_checked_list = [];
300 - },
301 - fold (index) {
302 - let has_class = $($('.material-classify-title')[index]).siblings('.material-content').hasClass('fold-content');
303 - if (has_class) {
304 - // 展开
305 - $($('.material-classify-title')[index]).siblings('.material-content').removeClass('fold-content');
306 - $($('.material-classify-title')[index]).find('i').addClass('fa-chevron-down').removeClass('fa-chevron-right');
307 - } else {
308 - // 折叠
309 - $($('.material-classify-title')[index]).siblings('.material-content').addClass('fold-content');
310 - $($('.material-classify-title')[index]).find('i').addClass('fa-chevron-right').removeClass('fa-chevron-down');
311 - }
312 - },
313 - shortcutFold (index) {
314 - let has_class = $($('.shortcut-title')[index]).siblings('.shortcut-content').hasClass('fold-content');
315 - if (has_class) {
316 - // 展开
317 - $($('.shortcut-title')[index]).siblings('.shortcut-content').removeClass('fold-content');
318 - $($('.shortcut-title')[index]).find('i').addClass('fa-chevron-down').removeClass('fa-chevron-right');
319 - } else {
320 - // 折叠
321 - $($('.shortcut-title')[index]).siblings('.shortcut-content').addClass('fold-content');
322 - $($('.shortcut-title')[index]).find('i').addClass('fa-chevron-right').removeClass('fa-chevron-down');
323 - }
324 - },
325 - shortcutCheck (i) {
326 - // 快捷方式选中
327 - let list = _.map(this.shortcut[i].list, item => {
328 - return item.store_id
329 - });
330 - if (this.shortcut[i]['checked']) {
331 - // 勾选
332 - this.shortcut_checked_list = this.shortcut_checked_list.concat(list);
333 - //
334 - _.each(this.data_list, (item, key) => {
335 - _.each(item.store_list, (v, k) => {
336 - _.each(v, x => {
337 - // ID在快捷列表中存在
338 - if (_.indexOf(this.shortcut_checked_list, x.store_id) >= 0 && !+x.disabled) {
339 - x.checked = true;
340 - if (!+x.disabled) {
341 - if (_.indexOf(this.checked_list, x.store_id) < 0 && x.store_id) {
342 - this.checked_list.push(x.store_id);
343 - }
344 - }
345 - this.setCheck()
346 - }
347 - });
348 - })
349 - });
350 - } else {
351 - // 取消
352 - this.shortcut_checked_list = _.difference(this.shortcut_checked_list, list);
353 - this.removeCheck(list)
354 - }
355 - },
356 - setCheck () {
357 - // 勾选取消大小分类
358 - _.each(this.data_list, i => {
359 - _.each(i.store_list, x => {
360 - let sum = 0;
361 - _.each(x, item => {
362 - if (_.indexOf(this.shortcut_checked_list, item.store_id) >= 0 && !+item.disabled && item.store_id) {
363 - sum = sum + 1;
364 - if (i.store_count === sum) {
365 - i.checked = true;
366 - i.num = sum;
367 - } else {
368 - i.checked = false;
369 - i.num = sum;
370 - }
371 - }
372 - })
373 - });
374 - });
375 - let checked_list = []
376 - _.each(this.data_list, i => {
377 - if (i.checked) {
378 - checked_list.push(i.checked)
379 - }
380 - });
381 - this.category_num = checked_list.length;
382 - if (this.data_list.length === checked_list.length) {
383 - this.all_checked = true;
384 - }
385 - },
386 - removeCheck (list) {
387 - // 勾选取消大小分类
388 - _.each(this.data_list, i => {
389 - _.each(i.store_list, x => {
390 - let sum = i.store_count;
391 - _.each(x, item => {
392 - if (_.indexOf(list, item.store_id) >= 0 && !+item.disabled && item.store_id) {
393 - item.checked = false;
394 - sum = sum - 1;
395 - i.checked = false;
396 - i.num = sum;
397 - }
398 - })
399 - })
400 - });
401 - let checked_list = []
402 - _.each(this.data_list, i => {
403 - if (i.checked) {
404 - checked_list.push(i.checked)
405 - }
406 - });
407 - this.category_num = checked_list.length;
408 - if (this.data_list.length !== checked_list.length) {
409 - this.all_checked = false;
410 - }
411 - // 移除数组内容
412 - _.each(list, n => {
413 - _.each(this.checked_list, (v, k) => {
414 - if (v === n) {
415 - this.checked_list.splice(k, 1);
416 - }
417 - });
418 - });
419 - }
420 - }
421 -}
422 -</script>
423 -
424 -<style lang="less">
425 - .choose-material-page {
426 - }
427 -
428 -
429 - .material-title {
430 - padding: 0.5rem;
431 - font-size: 18px;
432 - border-bottom: 1px solid #eee;
433 - }
434 -
435 - .wrapper-scroll {
436 - overflow-y: scroll;
437 - max-height: 30rem;
438 - .shortcut-title {
439 - span {
440 - font-size: 0.8rem;
441 - }
442 - i {
443 - font-size: 0.7rem;
444 - color: #838383;
445 - }
446 - }
447 - .shortcut-content {
448 - text-align: left;
449 - padding: 0rem 0 0.5rem 2rem;
450 - div {
451 - font-size: 0.5rem;
452 - border: 1px solid #8EA8CF;
453 - color: #8EA8CF;
454 - padding: 0.2rem 0.4rem;
455 - margin-right: 0.5rem;
456 - margin-top: 0.5rem;
457 - display: inline-block;
458 - }
459 - }
460 - .fold-content {
461 - height: 0;
462 - overflow: hidden;
463 - padding-bottom: 0;
464 - }
465 - }
466 -
467 - .material-wrapper {
468 - text-align: left;
469 - .material-all-checked {
470 - font-size: 0.9rem;
471 - padding: 0.5rem 0.2rem;
472 - }
473 - .material-classify {
474 - .material-classify-checked {
475 - font-size: 0.9rem;
476 - padding: 0.4rem 0.2rem 0.1rem 0.85rem;
477 - }
478 - .material-classify-title {
479 - margin-bottom: 0.5rem;
480 - }
481 - .material-content {
482 - padding: 0 0.5rem;
483 - border-bottom: 1px dashed #eee;
484 - .flexbox-material {
485 - padding-bottom: 10px;
486 - .flex-material {
487 - text-align: center;
488 - background-color: #eee;
489 - }
490 - .flex-checked {
491 - color: white;
492 - background-color: #8EA8CF;
493 - }
494 - .flex-disabled {
495 - color: #cfcfcf;
496 - background-color: #ebeef7;
497 - }
498 - }
499 - }
500 - .fold-content {
501 - height: 0;
502 - overflow: hidden;
503 - padding-bottom: 0;
504 - }
505 - }
506 - }
507 -
508 - .control-wrapper {
509 - padding: 10px;
510 - .close-btn {
511 - background-color: #ffffff;
512 - color: #8EA8CF;
513 - border: 1px solid #8EA8CF;
514 - width: 100%;
515 - }
516 - .comfirm-btn {
517 - background-color: #8EA8CF;
518 - color: #ffffff;
519 - border: 1px solid #8EA8CF;
520 - width: 100%;
521 - }
522 - }
523 -
524 - .weui-dialog {
525 - width: 90% !important;
526 - max-width: 400px;
527 - }
528 -
529 - @media screen and (min-width: 1024px) {
530 - .weui-dialog {
531 - width: 35%;
532 - }
533 - }
534 -
535 - .weui-btn:after {
536 - border: 0 !important;
537 - }
538 -
539 - .weui-icon-circle {
540 - font-size: 20px !important;
541 - }
542 -
543 - .weui-icon-success {
544 - font-size: 20px !important;
545 - }
546 -
547 - .vux-check-icon > .weui-icon-success:before, .vux-check-icon > .weui-icon-success-circle:before {
548 - color: #8EA8CF !important;
549 - }
550 -
551 -</style>
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" :value.sync="category_checked" @click.native="checkAll">
9 - 所有品牌的门店（<span style="color: #8EA8CF;">{{category_num}}</span>/{{category_sum}}）
10 - </check-icon>
11 - </div> -->
12 - <div class="store-classify">
13 - <div v-for="(b, bi) in data_list" :key="bi">
14 - <div style="border-top: 1px dashed #eee; width: 100%;"></div>
15 - <flexbox class="brand-classify-title">
16 - <flexbox-item :span="10">
17 - <check-icon v-if="b.city_count != 0" class="brand-classify-checked" @click.native="changeCategory(b, 'brand')" :value.sync="b.checked">
18 - 所有{{b.name}}门店（<span style="color: #8EA8CF;">{{b.num}}</span>/{{b.city_count}}）
19 - </check-icon>
20 - <check-icon v-else class="brand-classify-checked" :value="false">
21 - 所有{{b.name}}门店（<span style="color: #8EA8CF;">{{b.num}}</span>/{{b.city_count}}）
22 - </check-icon>
23 - </flexbox-item>
24 - <flexbox-item @click.native="fold(bi, 'brand')">
25 - <div style="padding-top: 0.2rem; padding-left: 0.5rem;">
26 - <i class="fa fa-chevron-down" style="font-size: 0.7rem; color: #838383;"></i>
27 - </div>
28 - </flexbox-item>
29 - </flexbox>
30 - <div class="brand-content">
31 - <div class="store-classify">
32 - <div v-for="(c, ci) in b.city_list" :key="ci">
33 - <div style="border-top: 1px dashed #eee; width: 100%;"></div>
34 - <flexbox class="store-classify-title">
35 - <flexbox-item style="text-indent:2px;" :span="10">
36 - <check-icon v-if="c.store_count != 0" class="store-classify-checked" :value.sync="c.checked" @click.native="changeCategory(c, 'city', b)">
37 - 所有{{c.name}}{{b.name}}门店（<span style="color: #8EA8CF;">{{c.num}}</span>/{{c.store_count}}）
38 - </check-icon>
39 - <check-icon v-else class="store-classify-checked" :value="false">
40 - 所有{{c.name}}{{b.name}}门店（<span style="color: #8EA8CF;">{{c.num}}</span>/{{c.store_count}}）
41 - </check-icon>
42 - </flexbox-item>
43 - <flexbox-item @click.native="fold(bi, 'store', ci)">
44 - <div style="padding-top: 0.2rem; padding-left: 0.5rem;">
45 - <i class="fa fa-chevron-down" style="font-size: 0.7rem; color: #838383;"></i>
46 - </div>
47 - </flexbox-item>
48 - </flexbox>
49 - <div class="store-content">
50 - <div class="store-list">
51 - <div v-for="(s, si) in c.store_list" :key="si" @click="itemCheck(s, b, ci)" class="store-item">
52 - <div v-if="!s.disabled"
53 - :class="[s.checked ? 'flex-checked' : '', 'flex-store']">
54 - {{s.name}}
55 - </div>
56 - <div v-else class="flex-store flex-disabled"> {{s.name}} </div>
57 - </div>
58 - </div>
59 - </div>
60 - </div>
61 - </div>
62 - </div>
63 - </div>
64 - </div>
65 - </div>
66 - <div class="control-wrapper">
67 - <flexbox>
68 - <flexbox-item>
69 - <x-button class="close-btn" @click.native="cancel" mini>关闭</x-button>
70 - </flexbox-item>
71 - <flexbox-item>
72 - <x-button class="confirm-btn" @click.native="confirm" mini>确定</x-button>
73 - </flexbox-item>
74 - </flexbox>
75 - </div>
76 - </x-dialog>
77 - </div>
78 - </div>
79 -</template>
80 -
81 -<script>
82 -import { XDialog, TransferDomDirective as TransferDom, Flexbox, FlexboxItem, CheckIcon, XButton } from 'vux'
83 -import { Observable } from 'rxjs/Rx'
84 -export default {
85 - directives: { TransferDom },
86 - components: { XDialog, Flexbox, FlexboxItem, CheckIcon, XButton },
87 - props: ['show', 'list', 'title', 'checkList'],
88 - data () {
89 - return {
90 - data_list: [],
91 - category_num: 0,
92 - category_checked: false
93 - }
94 - },
95 - watch: {
96 - list () {
97 - this.data_list = [];
98 - this.category_num = 0;
99 - this.category_checked = false;
100 - Observable.from([...this.list])
101 - .map(b => {
102 - // 品牌
103 - b.checked = false;
104 - b.num = 0;
105 - b.city_count = 0;
106 - b.city_list.forEach(c => {
107 - // 城市
108 - let cnt = 0;
109 - c.checked = false;
110 - c.num = 0;
111 - // c.store_count = c.store_list.length;
112 - // b.city_count += c.store_count;
113 - c.store_list.forEach(s => {
114 - // 门店
115 - s.checked = false;
116 - if (!s.disabled) {
117 - cnt++;
118 - }
119 - })
120 - c.store_count = cnt;
121 - b.city_count += c.store_count;
122 - })
123 - return b;
124 - }).subscribe(v => {
125 - this.data_list.push(v);
126 - // 判断是否有已选中
127 - if (this.checkList.length) {
128 - v.city_list.forEach((c, ci) => {
129 - c.store_list.forEach(s => {
130 - this.checkList.forEach(checkStore => {
131 - if (checkStore.store_id === s.store_id) {
132 - this.itemCheck(s, v, ci, true)
133 - }
134 - })
135 - })
136 - })
137 - }
138 - // 分别计算已选中的
139 - }).unsubscribe();
140 - setTimeout(() => {
141 - for (let i = 0; i < $('.store-item').length; i++) {
142 - if (i % 2 !== 0) {
143 - continue;
144 - }
145 - if ($($('.store-item')[i]).height() > $($('.store-item')[i + 1]).height() && $($('.store-item')[i + 1]).height() !== 0) {
146 - $($('.store-item')[i + 1]).children('div').css('height', $($('.store-item')[i]).height() + 'px')
147 - } else if ($($('.store-item')[i]).height() < $($('.store-item')[i + 1]).height()) {
148 - $($('.store-item')[i]).children('div').css('height', $($('.store-item')[i + 1]).height() + 'px')
149 - }
150 - }
151 - }, 100);
152 - }
153 - },
154 - computed: {
155 - category_sum () {
156 - // 获取门店总数
157 - let sum = 0;
158 - this.data_list.forEach(b => {
159 - b.city_list.forEach(c => {
160 - sum += c.store_count;
161 - })
162 - })
163 - return sum;
164 - }
165 - },
166 - methods: {
167 - fold (index, str, i) {
168 - let has_class = $($(`.${str}-classify-title`)[index]).siblings(`.${str}-content`).hasClass('fold-content');
169 - if (i && index - 1 >= 0) {
170 - // 不为第一组品牌中的城市
171 - index = this.data_list[index - 1].city_count + i;
172 - } else {
173 - // 不是城市或是第一组品牌中的城市
174 - i ? index = i : '';
175 - }
176 - if (has_class) {
177 - // 展开
178 - $($(`.${str}-classify-title`)[index]).siblings(`.${str}-content`).removeClass('fold-content');
179 - $($(`.${str}-classify-title`)[index]).find('i').addClass('fa-chevron-down').removeClass('fa-chevron-right');
180 - } else {
181 - // 折叠
182 - $($(`.${str}-classify-title`)[index]).siblings(`.${str}-content`).addClass('fold-content');
183 - $($(`.${str}-classify-title`)[index]).find('i').addClass('fa-chevron-right').removeClass('fa-chevron-down');
184 - }
185 - },
186 - itemCheck (item, b, ci, bool) {
187 - // 选中/取消选中单条
188 - // item.checked = !item.checked;
189 - bool ? item.checked = bool : item.checked = !item.checked;
190 - // 计算父类的选中个数
191 - if (item.checked) {
192 - b.num++;
193 - b.city_list[ci].num++;
194 - this.category_num++;
195 - } else {
196 - b.num--;
197 - b.city_list[ci].num--;
198 - this.category_num--;
199 - }
200 - this.checkIcon();
201 - },
202 - /*
203 - * 计算num数量判断逻辑：
204 - * 1、如果点击状态为切换状态时，不等于目标状态的门店为待切换门店。
205 - * 2、待切换门店切换状态时，增加或减少num（根据父类的选择状态判断）。
206 - * 3、切换父类状态时，需要避免计算时累加或累减之前已切换过状态且无需在切换的门店。
207 - * 4、只需要计算待切换状态的门店。
208 - * 5、根据被点击父类的状态判断是增加还是减少，选中为增，取消选中为减。
209 - * 6、最后根据num和count来判断子类被点击选中或取消选中时，切换父类的选中状态。
210 - * ------------------------------------------------------------------------
211 - */
212 - changeCategory (item, type, brand) {
213 - // 选中分类
214 - // checkicon会自动重置，当用户看到选中时，传入的是false
215 - item.checked ? item.checked = true : item.checked = false;
216 - if (type === 'brand') {
217 - // 品牌分类
218 - Observable.from(item.city_list)
219 - .map(v => {
220 - v.checked = item.checked;
221 - v.store_list.forEach(s => {
222 - if (!s.disabled) {
223 - // 计算选中数量
224 - if (s.checked == !item.checked && item.checked) {
225 - v.num++;
226 - item.num++;
227 - this.category_num++;
228 - } else if (s.checked == !item.checked && !item.checked) {
229 - v.num--;
230 - item.num--;
231 - this.category_num--;
232 - }
233 - s.checked = item.checked;
234 - }
235 - })
236 - return v;
237 - }).subscribe().unsubscribe();
238 - } else if (type === 'city') {
239 - // 城市分类
240 - Observable.from(item.store_list)
241 - .map(v => {
242 - if (!v.disabled) {
243 - // 计算选中数量
244 - if (v.checked == !item.checked && item.checked) {
245 - brand.num++;
246 - item.num++;
247 - this.category_num++;
248 - } else if (v.checked == !item.checked && !item.checked) {
249 - brand.num--;
250 - item.num--;
251 - this.category_num--;
252 - }
253 - v.checked = item.checked;
254 - }
255 - return v;
256 - }).subscribe().unsubscribe();
257 - }
258 - this.checkIcon();
259 - },
260 - checkAll () {
261 - // 全选
262 - let allCheck = this.category_checked;
263 - allCheck ? allCheck = true : allCheck = false;
264 - let arr = [...this.data_list];
265 - this.data_list = [];
266 - Observable.from(arr)
267 - .map(v => {
268 - v.checked = allCheck;
269 - v.city_list.forEach(c => {
270 - c.checked = allCheck;
271 - c.store_list.forEach(s => {
272 - if (!s.disabled) {
273 - if (s.checked == !allCheck && allCheck) {
274 - v.num++;
275 - c.num++;
276 - this.category_num++;
277 - } else if (s.checked == !allCheck && !allCheck) {
278 - v.num--;
279 - c.num--;
280 - this.category_num--;
281 - }
282 - s.checked = allCheck;
283 - }
284 - })
285 - })
286 - return v;
287 - }).subscribe(v => {
288 - this.data_list.push(v);
289 - }).unsubscribe();
290 - },
291 - checkIcon () {
292 - // 根据选中个数和总数来判断是否让父菜单选中
293 - this.data_list.forEach(b => {
294 - b.num === b.city_count ? b.checked = true : b.checked = false;
295 - b.city_list.forEach(c => {
296 - c.num === c.store_count ? c.checked = true : c.checked = false;
297 - })
298 - })
299 - // 总分类数
300 - this.category_sum === this.category_num ? this.category_checked = true : this.category_checked = false;
301 - let arr = [...this.data_list];
302 - this.data_list.splice(0, [...arr]);
303 - },
304 - cancel () {
305 - this.$emit('cancel');
306 - },
307 - confirm () {
308 - // 返回选中
309 - let data = [];
310 - Observable.create(store$ => {
311 - this.data_list.forEach(b => {
312 - b.city_list.forEach(c => {
313 - c.store_list.forEach(s => {
314 - if (s.checked && !s.disabled) {
315 - s.route_name = c.name;
316 - store$.next(s);
317 - }
318 - })
319 - })
320 - })
321 - }).subscribe(v => {
322 - data.push(v);
323 - }).unsubscribe();
324 - if (!data.length) {
325 - this.$vux.toast.show({
326 - type: 'warn',
327 - text: '请至少选择一个！'
328 - });
329 - return;
330 - }
331 - this.$emit('confirm', data);
332 - }
333 - }
334 -}
335 -</script>
336 -
337 -<style lang="less">
338 -.choose_store_multi {
339 -}
340 -.store-title {
341 - padding: 0.5rem;
342 - font-size: 18px;
343 - border-bottom: 1px solid #eee;
344 -}
345 -.wrap-scroll {
346 - max-height: 30rem;
347 - overflow-y: auto;
348 -}
349 -.store-wrapper {
350 - text-align: left;
351 - .store-all-checked {
352 - font-size: 0.9rem;
353 - padding: 0.5rem 0.2rem;
354 - }
355 -}
356 -
357 -.store-classify {
358 - .store-classify-checked,
359 - .brand-classify-checked {
360 - font-size: 0.9rem;
361 - padding: 0.4rem 0.2rem 0.1rem 0.85rem;
362 - }
363 - .store-classify-title,
364 - .brand-classify-title {
365 - margin-bottom: 0.5rem;
366 - }
367 - .store-content,
368 - .brand-content {
369 - border-bottom: 1px dashed #eee;
370 - .store-list {
371 - &:after {
372 - display: block;
373 - content: "";
374 - clear: both;
375 - }
376 - &>div {
377 - float: left;
378 - margin-left: 2%;
379 - width: 48%;
380 - padding-bottom: 10px;
381 - .flex-store {
382 - text-align: center;
383 - background-color: #f6f6f6;
384 - color: #333;
385 - }
386 - .flex-checked {
387 - color: #2c426b;
388 - background-color: #c4d4e7;
389 - }
390 - .flex-disabled {
391 - color: #ccc;
392 - background-color: #eaeff7;
393 - }
394 - }
395 - }
396 - }
397 - .store-content {
398 - padding: 0 1rem;
399 - }
400 - .fold-content {
401 - height: 0;
402 - overflow: hidden;
403 - padding-bottom: 0;
404 - }
405 -}
406 -.control-wrapper {
407 - padding: 10px;
408 - .close-btn {
409 - background-color: #ffffff;
410 - color: #8EA8CF;
411 - border: 1px solid #8EA8CF;
412 - width: 100%;
413 - }
414 - .confirm-btn {
415 - background-color: #8EA8CF;
416 - color: #ffffff;
417 - border: 1px solid #8EA8CF;
418 - width: 100%;
419 - }
420 -}
421 -.vux-check-icon > .weui-icon-success:before, .vux-check-icon > .weui-icon-success-circle:before {
422 - color: #8ea8cf !important;
423 -}
424 -</style>
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 +}
1 +<template>
2 + <div>
3 + <!-- <van-password-input
4 + :value="value"
5 + info="密码为6位数字"
6 + @focus="keyboard = 'custom'"
7 + /> -->
8 + <van-field v-model="value" :maxlength="10" @click.native="keyboard = 'custom'" @blur="onBlur" readonly placeholder="请输入用户名" />
9 + <!-- <van-number-keyboard
10 + :show="showKeyboard"
11 + @input="onInput"
12 + @delete="onDelete"
13 + @blur="showKeyboard = false"
14 + /> -->
15 + <van-number-keyboard
16 + :show="keyboard === 'custom'"
17 + close-button-text="完成"
18 + theme="custom"
19 + extra-key="."
20 + @blur="keyboard = ''"
21 + @input="onInput"
22 + @delete="onDelete"
23 + @close="onClose"
24 + />
25 + </div>
26 +</template>
27 +
28 +<script>
29 +export default {
30 + data () {
31 + return {
32 + value: '',
33 + showKeyboard: true,
34 + keyboard: 'default'
35 + }
36 + },
37 + methods: {
38 + onInput (key) {
39 + this.value = (this.value + key).slice(0, 5)
40 + },
41 + onDelete () {
42 + this.value = this.value.slice(0, this.value.length - 1)
43 + },
44 + onBlur () {
45 + // console.warn(this.value);
46 + },
47 + onClose () {
48 + this.keyboard = false
49 + }
50 + }
51 +}
52 +</script>
53 +
54 +<style lang="less" scoped>
55 +.login {
56 + position: absolute;
57 + top: 25%;
58 + left: 50%;
59 + transform: translateX(-50%);
60 + padding: 1.8rem 2.5rem;
61 + width: 15rem;
62 + button {
63 + margin-top: 1.2rem;
64 + position: absolute;
65 + right: 2.5rem;
66 + }
67 + input {
68 + display: block;
69 + width: 95%;
70 + padding: 0.8rem 0.4rem;
71 + background: #fff;
72 + border: 1px solid #d6d7dc;
73 + font-size: 0.95rem;
74 + }
75 +}
76 +</style>
1 +export const increment = ({ commit }) => {
2 + commit('INCREMENT')
3 +}
4 +export const decrement = ({ commit }) => {
5 + commit('DECREMENT')
6 +}
1 +export const getCount = state => {
2 + return state.count
3 +}
1 +import Vue from 'vue'
2 +import Vuex from 'vuex'
3 +import * as actions from './actions'
4 +import * as getters from './getters'
5 +
6 +Vue.use(Vuex)
7 +
8 +// 应用初始状态
9 +const state = {
10 + isLoading: false,
11 + title: '登录',
12 + form: '',
13 + direction: 'forward'
14 +}
15 +
16 +// 定义所需的 mutations
17 +const mutations = {
18 + updateLoadingStatus (state, status) {
19 + state.isLoading = status
20 + },
21 + changeTitle (state, title) {
22 + state.title = title
23 + },
24 + savedForm (state, form) {
25 + state.form = form
26 + },
27 + UPDATE_DIRECTION (state, direction) {
28 + state.direction = direction
29 + }
30 +}
31 +
32 +// 创建 store 实例
33 +export default new Vuex.Store({
34 + actions,
35 + getters,
36 + state,
37 + mutations
38 +})
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 B from './B.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(B)
29 +}).$mount('#B')
1 +<template lang="html">
2 + <div id="B" 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 */
2 +import axios from 'axios'
3 +import router from './router'
4 +
5 +// 请求拦截器
6 +axios.interceptors.request.use(
7 + config => {
8 + // 发送请求前
9 + return config
10 + },
11 + error => {
12 + // 请求错误处理
13 + return Promise.reject(error)
14 + })
15 +
16 +// 响应拦截器
17 +axios.interceptors.response.use(
18 + response => {
19 + return response
20 + },
21 + error => {
22 + if (error.response) {
23 + switch (error.response.status) {
24 + case 401:
25 + router.replace({
26 + path: '/'
27 + })
28 + break
29 + case 404:
30 + router.replace({
31 + path: '/'
32 + })
33 + break
34 + }
35 + }
36 + return Promise.reject(error.response.data)
37 + })
38 +
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 +}
1 +<template>
2 + <div>
3 + <!-- <van-password-input
4 + :value="value"
5 + info="密码为6位数字"
6 + @focus="keyboard = 'custom'"
7 + /> -->
8 + <van-field v-model="value" :maxlength="10" @click.native="keyboard = 'custom'" @blur="onBlur" readonly placeholder="请输入用户名" />
9 + <!-- <van-number-keyboard
10 + :show="showKeyboard"
11 + @input="onInput"
12 + @delete="onDelete"
13 + @blur="showKeyboard = false"
14 + /> -->
15 + <van-number-keyboard
16 + :show="keyboard === 'custom'"
17 + close-button-text="完成"
18 + theme="custom"
19 + extra-key="."
20 + @blur="keyboard = ''"
21 + @input="onInput"
22 + @delete="onDelete"
23 + @close="onClose"
24 + />
25 + </div>
26 +</template>
27 +
28 +<script>
29 +export default {
30 + data () {
31 + return {
32 + value: '',
33 + showKeyboard: true,
34 + keyboard: 'default'
35 + }
36 + },
37 + methods: {
38 + onInput (key) {
39 + this.value = (this.value + key).slice(0, 5)
40 + },
41 + onDelete () {
42 + this.value = this.value.slice(0, this.value.length - 1)
43 + },
44 + onBlur () {
45 + // console.warn(this.value);
46 + },
47 + onClose () {
48 + this.keyboard = false
49 + }
50 + }
51 +}
52 +</script>
53 +
54 +<style lang="less" scoped>
55 +.login {
56 + position: absolute;
57 + top: 25%;
58 + left: 50%;
59 + transform: translateX(-50%);
60 + padding: 1.8rem 2.5rem;
61 + width: 15rem;
62 + button {
63 + margin-top: 1.2rem;
64 + position: absolute;
65 + right: 2.5rem;
66 + }
67 + input {
68 + display: block;
69 + width: 95%;
70 + padding: 0.8rem 0.4rem;
71 + background: #fff;
72 + border: 1px solid #d6d7dc;
73 + font-size: 0.95rem;
74 + }
75 +}
76 +</style>
1 +export const increment = ({ commit }) => {
2 + commit('INCREMENT')
3 +}
4 +export const decrement = ({ commit }) => {
5 + commit('DECREMENT')
6 +}
1 +export const getCount = state => {
2 + return state.count
3 +}
1 +import Vue from 'vue'
2 +import Vuex from 'vuex'
3 +import * as actions from './actions'
4 +import * as getters from './getters'
5 +
6 +Vue.use(Vuex)
7 +
8 +// 应用初始状态
9 +const state = {
10 + isLoading: false,
11 + title: '登录',
12 + form: '',
13 + direction: 'forward'
14 +}
15 +
16 +// 定义所需的 mutations
17 +const mutations = {
18 + updateLoadingStatus (state, status) {
19 + state.isLoading = status
20 + },
21 + changeTitle (state, title) {
22 + state.title = title
23 + },
24 + savedForm (state, form) {
25 + state.form = form
26 + },
27 + UPDATE_DIRECTION (state, direction) {
28 + state.direction = direction
29 + }
30 +}
31 +
32 +// 创建 store 实例
33 +export default new Vuex.Store({
34 + actions,
35 + getters,
36 + state,
37 + mutations
38 +})
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 C from './C.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(C)
29 +}).$mount('#C')
1 +<template lang="html">
2 + <div id="C" 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 */
2 +import axios from 'axios'
3 +import router from './router'
4 +
5 +// 请求拦截器
6 +axios.interceptors.request.use(
7 + config => {
8 + // 发送请求前
9 + return config
10 + },
11 + error => {
12 + // 请求错误处理
13 + return Promise.reject(error)
14 + })
15 +
16 +// 响应拦截器
17 +axios.interceptors.response.use(
18 + response => {
19 + return response
20 + },
21 + error => {
22 + if (error.response) {
23 + switch (error.response.status) {
24 + case 401:
25 + router.replace({
26 + path: '/'
27 + })
28 + break
29 + case 404:
30 + router.replace({
31 + path: '/'
32 + })
33 + break
34 + }
35 + }
36 + return Promise.reject(error.response.data)
37 + })
38 +
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 +}
1 +<template>
2 + <div>
3 + <!-- <van-password-input
4 + :value="value"
5 + info="密码为6位数字"
6 + @focus="keyboard = 'custom'"
7 + /> -->
8 + <van-field v-model="value" :maxlength="10" @click.native="keyboard = 'custom'" @blur="onBlur" readonly placeholder="请输入用户名" />
9 + <!-- <van-number-keyboard
10 + :show="showKeyboard"
11 + @input="onInput"
12 + @delete="onDelete"
13 + @blur="showKeyboard = false"
14 + /> -->
15 + <van-number-keyboard
16 + :show="keyboard === 'custom'"
17 + close-button-text="完成"
18 + theme="custom"
19 + extra-key="."
20 + @blur="keyboard = ''"
21 + @input="onInput"
22 + @delete="onDelete"
23 + @close="onClose"
24 + />
25 + </div>
26 +</template>
27 +
28 +<script>
29 +export default {
30 + data () {
31 + return {
32 + value: '',
33 + showKeyboard: true,
34 + keyboard: 'default'
35 + }
36 + },
37 + methods: {
38 + onInput (key) {
39 + this.value = (this.value + key).slice(0, 5)
40 + },
41 + onDelete () {
42 + this.value = this.value.slice(0, this.value.length - 1)
43 + },
44 + onBlur () {
45 + // console.warn(this.value);
46 + },
47 + onClose () {
48 + this.keyboard = false
49 + }
50 + }
51 +}
52 +</script>
53 +
54 +<style lang="less" scoped>
55 +.login {
56 + position: absolute;
57 + top: 25%;
58 + left: 50%;
59 + transform: translateX(-50%);
60 + padding: 1.8rem 2.5rem;
61 + width: 15rem;
62 + button {
63 + margin-top: 1.2rem;
64 + position: absolute;
65 + right: 2.5rem;
66 + }
67 + input {
68 + display: block;
69 + width: 95%;
70 + padding: 0.8rem 0.4rem;
71 + background: #fff;
72 + border: 1px solid #d6d7dc;
73 + font-size: 0.95rem;
74 + }
75 +}
76 +</style>
1 +export const increment = ({ commit }) => {
2 + commit('INCREMENT')
3 +}
4 +export const decrement = ({ commit }) => {
5 + commit('DECREMENT')
6 +}
1 +export const getCount = state => {
2 + return state.count
3 +}
1 +import Vue from 'vue'
2 +import Vuex from 'vuex'
3 +import * as actions from './actions'
4 +import * as getters from './getters'
5 +
6 +Vue.use(Vuex)
7 +
8 +// 应用初始状态
9 +const state = {
10 + isLoading: false,
11 + title: '登录',
12 + form: '',
13 + direction: 'forward'
14 +}
15 +
16 +// 定义所需的 mutations
17 +const mutations = {
18 + updateLoadingStatus (state, status) {
19 + state.isLoading = status
20 + },
21 + changeTitle (state, title) {
22 + state.title = title
23 + },
24 + savedForm (state, form) {
25 + state.form = form
26 + },
27 + UPDATE_DIRECTION (state, direction) {
28 + state.direction = direction
29 + }
30 +}
31 +
32 +// 创建 store 实例
33 +export default new Vuex.Store({
34 + actions,
35 + getters,
36 + state,
37 + mutations
38 +})
...@@ -6,17 +6,17 @@ import router from './router' ...@@ -6,17 +6,17 @@ import router from './router'
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) {
...@@ -25,15 +25,15 @@ axios.interceptors.response.use( ...@@ -25,15 +25,15 @@ axios.interceptors.response.use(
25 router.replace({ 25 router.replace({
26 path: '/' 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
......
...@@ -8,18 +8,13 @@ import axios from './http' ...@@ -8,18 +8,13 @@ import axios from './http'
8 import login from './login.vue' 8 import login from './login.vue'
9 import { sync } from 'vuex-router-sync' 9 import { sync } from 'vuex-router-sync'
10 import FastClick from 'fastclick' 10 import FastClick from 'fastclick'
11 -import { WechatPlugin, LoadingPlugin, ToastPlugin, ConfirmPlugin, TransferDom, AlertPlugin } from 'vux' 11 +import Vant from 'vant'
12 -// import 'font-awesome/css/font-awesome.css' 12 +import 'vant/lib/index.css'
13 13
14 sync(store, router) 14 sync(store, router)
15 Vue.use(VueRouter) 15 Vue.use(VueRouter)
16 Vue.use(Vuex) 16 Vue.use(Vuex)
17 -Vue.use(WechatPlugin) 17 +Vue.use(Vant)
18 -Vue.use(LoadingPlugin)
19 -Vue.use(ToastPlugin)
20 -Vue.use(ConfirmPlugin)
21 -Vue.use(AlertPlugin)
22 -Vue.directive('transfer-dom', TransferDom)
23 18
24 Vue.config.productionTip = false 19 Vue.config.productionTip = false
25 Vue.prototype.method = function () {} 20 Vue.prototype.method = function () {}
...@@ -27,9 +22,8 @@ Vue.prototype.method = function () {} ...@@ -27,9 +22,8 @@ Vue.prototype.method = function () {}
27 FastClick.attach(document.body) 22 FastClick.attach(document.body)
28 23
29 new Vue({ 24 new Vue({
30 - el: '#login',
31 store, 25 store,
32 router, 26 router,
33 axios, 27 axios,
34 render: h => h(login) 28 render: h => h(login)
35 -}) 29 +}).$mount('#login')
......
1 <template lang="html"> 1 <template lang="html">
2 <div id="login" style="height:100%;"> 2 <div id="login" style="height:100%;">
3 - <x-header
4 - :left-options="{showBack: false}"
5 - :title="title">
6 - </x-header>
7 <router-view style="margin-top: 3rem"></router-view> 3 <router-view style="margin-top: 3rem"></router-view>
8 </div> 4 </div>
9 </template> 5 </template>
10 6
11 <script> 7 <script>
12 -import { XHeader } from 'vux'
13 import { mapState } from 'vuex' 8 import { mapState } from 'vuex'
14 export default { 9 export default {
15 - components: { XHeader }, 10 + components: {},
16 data () { 11 data () {
17 return { 12 return {
18 isIndex: true, 13 isIndex: true,
...@@ -42,9 +37,6 @@ export default { ...@@ -42,9 +37,6 @@ export default {
42 </script> 37 </script>
43 38
44 <style lang="less"> 39 <style lang="less">
45 - @import '~vux/src/styles/reset.less';
46 - @import '~vux/src/styles/1px.less';
47 - @import '~vux/src/styles/close.less';
48 html, body { 40 html, body {
49 font-family: '微软雅黑', Microsoft YaHei; 41 font-family: '微软雅黑', Microsoft YaHei;
50 height: 100%; 42 height: 100%;
...@@ -52,17 +44,6 @@ export default { ...@@ -52,17 +44,6 @@ export default {
52 overflow-x: hidden; 44 overflow-x: hidden;
53 background-color: #F0EFF5; 45 background-color: #F0EFF5;
54 #login { 46 #login {
55 - .vux-header {
56 - width: 100%;
57 - position: absolute;
58 - left: 0;
59 - top: 0;
60 - z-index: 100;
61 - background: #333;
62 - .vux-header-title {
63 - color: #fff;
64 - }
65 - }
66 } 47 }
67 } 48 }
68 </style> 49 </style>
......
1 +/* jshint esversion: 6 */
1 export default [ 2 export default [
2 { 3 {
3 path: '/', 4 path: '/',
4 name: '登录', 5 name: '登录',
5 - component: r => { 6 + component: () => import('./views/login.vue')
6 - require(['./views/login'], r)
7 - }
8 - },
9 - {
10 - path: '/function_list',
11 - name: '功能列表',
12 - component: r => {
13 - require(['./views/function_list'], r)
14 - }
15 } 7 }
16 ] 8 ]
......
1 +/* jshint esversion: 6 */
1 import Vue from 'vue' 2 import Vue from 'vue'
2 import VueRouter from 'vue-router' 3 import VueRouter from 'vue-router'
3 import ConfigRouter from './route.js' 4 import ConfigRouter from './route.js'
4 -// import NProgress from 'nprogress'
5 -// import 'nprogress/nprogress.css'
6 import store from './vuex/store' 5 import store from './vuex/store'
7 6
8 Vue.use(VueRouter) 7 Vue.use(VueRouter)
9 -// NProgress.configure({ minimum: 0.1, easing: 'ease', speed: 500 });
10 8
11 const router = new VueRouter({ 9 const router = new VueRouter({
12 history: false, 10 history: false,
......
1 -<template>
2 - <div class="function_list">
3 - <x-header title="功能列表" :left-options="{showBack: false}"></x-header>
4 - <ul class="list">
5 - <li v-for="(item, index) in fun_list" :key="index" @click="goHandler(index)">
6 - <span>{{item.name}}</span>
7 - </li>
8 - </ul>
9 - <bottomBtn :btnText="'返回登录'" @btnClick="btnClick"></bottomBtn>
10 - </div>
11 -</template>
12 -
13 -<script>
14 -import { XHeader } from 'vux'
15 -import bottomBtn from 'components/bottomBtn/index'
16 -export default {
17 - components: { XHeader, bottomBtn },
18 - beforeRouteEnter (to, from, next) {
19 - function getFunctionList () {
20 - return axios.get('b/auth/getFunctions')
21 - }
22 - axios.all([getFunctionList()])
23 - .then(axios.spread(fun => {
24 - to.params.fun = fun.data.content
25 - console.warn(fun.data.content);
26 - next();
27 - }))
28 - },
29 - data () {
30 - return {
31 - fun_list: this.$route.params.fun
32 - }
33 - },
34 - mounted () {
35 - let lis = document.getElementsByTagName('li');
36 - for (let i = 0; i < lis.length; i++) {
37 - lis[i].style.height = lis[i].offsetWidth + 'px';
38 - }
39 - },
40 - methods: {
41 - goHandler (i) {
42 - let url = this.$route.params.fun[i].boh_url.split('boh');
43 - let loc = window.location;
44 - console.warn(loc);
45 - if (loc.hostname === 'localhost') {
46 - let res = url[1] ? loc.origin + url[1] : url[0];
47 - window.location.href = res;
48 - } else {
49 - let host = loc.hostname;
50 - if (!isNaN(Number(host.split('.')[0]))) {
51 - let res = url[1] ? loc.origin + url[1] : url[0];
52 - window.location.href = res;
53 - } else {
54 - window.location.href = this.$route.params.fun[i].boh_url;
55 - }
56 - }
57 - },
58 - btnClick () {
59 - this.$router.push('/');
60 - }
61 - }
62 -}
63 -</script>
64 -
65 -<style lang="less" scoped>
66 -.function_list {
67 - .list {
68 - margin: 0;
69 - margin-top: 3rem;
70 - list-style: none;
71 - li {
72 - float: left;
73 - text-align: center;
74 - border: 1px solid #ccc;
75 - width: 32.5%;
76 - background: #fff;
77 - position: relative;
78 - span {
79 - position: absolute;
80 - width: 100%;
81 - top: 50%;
82 - left: 50%;
83 - transform: translate(-50%, -50%);
84 - }
85 - }
86 - &:after {
87 - display: block;
88 - content: '';
89 - clear: both;
90 - }
91 - }
92 -}
93 -</style>
1 <template> 1 <template>
2 - <div class="login"> 2 + <div>
3 - <p> 3 + <!-- <van-password-input
4 - <span>用户名</span> 4 + :value="value"
5 - <input v-model="login_data.login_code" @keyup.enter="loginHandler" /> 5 + info="密码为6位数字"
6 - </p> 6 + @focus="keyboard = 'custom'"
7 - <p> 7 + /> -->
8 - <span>密码</span> 8 + <van-field v-model="value" :maxlength="10" @click.native="keyboard = 'custom'" @blur="onBlur" readonly placeholder="请输入用户名" />
9 - <input type="password" v-model="login_data.login_password" @keyup.enter="loginHandler" /> 9 + <!-- <van-number-keyboard
10 - </p> 10 + :show="showKeyboard"
11 - <el-button type="primary" @click="loginHandler">登录</el-button> 11 + @input="onInput"
12 + @delete="onDelete"
13 + @blur="showKeyboard = false"
14 + /> -->
15 + <van-number-keyboard
16 + :show="keyboard === 'custom'"
17 + close-button-text="完成"
18 + theme="custom"
19 + extra-key="."
20 + @blur="keyboard = ''"
21 + @input="onInput"
22 + @delete="onDelete"
23 + @close="onClose"
24 + />
12 </div> 25 </div>
13 </template> 26 </template>
14 27
...@@ -16,45 +29,23 @@ ...@@ -16,45 +29,23 @@
16 export default { 29 export default {
17 data () { 30 data () {
18 return { 31 return {
19 - login_data: { 32 + value: '',
20 - login_code: '', 33 + showKeyboard: true,
21 - login_password: '1' 34 + keyboard: 'default'
22 - }
23 } 35 }
24 }, 36 },
25 methods: { 37 methods: {
26 - loginHandler () { 38 + onInput (key) {
27 - if (this.login_data.login_code === '') { 39 + this.value = (this.value + key).slice(0, 5)
28 - this.$vux.toast.show({ 40 + },
29 - type: 'warn', 41 + onDelete () {
30 - text: '请输入账号！' 42 + this.value = this.value.slice(0, this.value.length - 1)
31 - }) 43 + },
32 - return; 44 + onBlur () {
33 - } 45 + // console.warn(this.value);
34 - axios.post('b/auth/syslogin', this.login_data) 46 + },
35 - .then(res => { 47 + onClose () {
36 - if (res.data.ret === 'OK') { 48 + this.keyboard = false
37 - let user = res.data.content.user;
38 - window.localStorage['user_name'] = user.user_name
39 - window.localStorage['role'] = user.role
40 - window.localStorage['user_id'] = user.user_id
41 - if (user.role === 'PB') {
42 - window.localStorage['prov_id'] = user.parent_id;
43 - }
44 - if (user.role === 'FB') {
45 - window.localStorage['fran_id'] = user.parent_id;
46 - }
47 - if (user.role === 'SM' || user.role === 'SE') {
48 - window.localStorage['store_id'] = user.parent_id;
49 - }
50 - this.$router.push('./function_list')
51 - } else {
52 - this.$vux.toast.text(res.data.msg);
53 - }
54 - })
55 - .catch(err => {
56 - console.error(err);
57 - })
58 } 49 }
59 } 50 }
60 } 51 }
......
1 -/* jshint esversion: 6 */
2 -export default [
3 - {
4 - path: '/',
5 - name: 'home',
6 - component: () => import('./views/Home.vue')
7 - },
8 - {
9 - path: '/about',
10 - name: 'about',
11 - component: () => import('./views/About.vue')
12 - }
13 -];
1 -/* jshint esversion: 6 */ 1 +import Vue from 'vue'
2 -import Vue from 'vue'; 2 +import Router from 'vue-router'
3 -import VueRouter from 'vue-router'; 3 +import Home from './views/Home.vue'
4 -import ConfigRouter from './route.js'; 4 +
5 - 5 +Vue.use(Router)
6 -Vue.use(VueRouter); 6 +
7 - 7 +export default new Router({
8 -const router = new VueRouter({ 8 + routes: [
9 - history: false, 9 + {
10 - hashbang: true, 10 + path: '/',
11 - base: __dirname, 11 + name: 'home',
12 - routes: ConfigRouter 12 + component: Home
13 -}); 13 + }
14 - 14 + ]
15 -router.beforeEach((to, from, next) => { 15 +})
16 - // store.commit('updateLoadingStatus', true)
17 - next();
18 -});
19 -
20 -router.afterEach((to, from, next) => {
21 - // store.commit('updateLoadingStatus', false)
22 -});
23 -
24 -export default router;
......
1 -/* jshint esversion: 6 */ 1 +import Vue from 'vue'
2 -import Vue from 'vue'; 2 +import Vuex from 'vuex'
3 -import Vuex from 'vuex';
4 3
5 -Vue.use(Vuex); 4 +Vue.use(Vuex)
6 5
7 export default new Vuex.Store({ 6 export default new Vuex.Store({
8 state: { 7 state: {
...@@ -14,4 +13,4 @@ export default new Vuex.Store({ ...@@ -14,4 +13,4 @@ export default new Vuex.Store({
14 actions: { 13 actions: {
15 14
16 } 15 }
17 -}); 16 +})
......
1 -<template>
2 - <div class="about">
3 - <h1>This is an about page</h1>
4 - </div>
5 -</template>
1 -<template> 1 +<template lang="html">
2 - <div class="home"> 2 + <div class="">
3 - <x-header></x-header> 3 + <van-pull-refresh
4 - <img alt="Vue logo" src="../assets/logo.png"> 4 + v-model="refreshing"
5 - <HelloWorld msg="Welcome to Your Vue.js App"/> 5 + @refresh="onRefresh">
6 + <van-list
7 + v-model="loading"
8 + :finished="finished"
9 + finished-text="没有更多了"
10 + @load="onLoad">
11 + <van-cell
12 + @click.native="onClick()"
13 + v-for="item in list"
14 + :key="item"
15 + :title="item + ''"/>
16 + </van-list>
17 + </van-pull-refresh>
18 +
19 + <van-dialog
20 + v-model="show"
21 + show-cancel-button
22 + :before-close="beforeClose"
23 + >
24 + <van-field
25 + v-model="username"
26 + label="用户名"
27 + placeholder="请输入"
28 + />
29 + <van-field
30 + v-model="password"
31 + type="password"
32 + label="密码"
33 + placeholder="请输入"
34 + />
35 + <van-field
36 + v-model="username"
37 + label="用户名"
38 + placeholder="请输入"
39 + />
40 + <van-field
41 + v-model="password"
42 + type="password"
43 + label="密码"
44 + placeholder="请输入"
45 + />
46 + <van-field
47 + v-model="username"
48 + label="用户名"
49 + placeholder="请输入"
50 + />
51 + <van-field
52 + v-model="password"
53 + type="password"
54 + label="密码"
55 + placeholder="请输入"
56 + />
57 + <van-field
58 + v-model="username"
59 + label="用户名"
60 + placeholder="请输入"
61 + />
62 + <van-field
63 + @blur="onBlur"
64 + v-model="password"
65 + type="password"
66 + label="密码"
67 + placeholder="请输入"
68 + />
69 + </van-dialog>
6 </div> 70 </div>
7 </template> 71 </template>
8 72
9 <script> 73 <script>
10 -// @ is an alias to /src 74 +import { ImagePreview } from 'vant';
11 -import HelloWorld from '@/components/HelloWorld.vue' 75 +
12 -import { XHeader } from 'vux' 76 +// const images = [
77 +// 'https://img.yzcdn.cn/public_files/2017/09/05/3bd347e44233a868c99cf0fe560232be.jpg',
78 +// 'https://img.yzcdn.cn/public_files/2017/09/05/c0dab461920687911536621b345a0bc9.jpg'
79 +// ];
13 80
14 export default { 81 export default {
15 - name: 'home', 82 + data () {
16 - components: { 83 + return {
17 - HelloWorld, 84 + list: [],
18 - XHeader 85 + refreshing: false,
86 + loading: false,
87 + finished: false,
88 + show: false,
89 + username: '',
90 + password: '',
91 + images: []
92 + }
19 }, 93 },
20 - mounted () { 94 + methods: {
21 - axios.get('b/auth/getFunctions') 95 + onLoad () {
22 - .then(res => { 96 + setTimeout(() => {
23 - console.warn(res); 97 + for (let i = 0; i < 10; i++) {
24 - }) 98 + const text = this.list.length + 1
25 - .catch(error => { 99 + this.list.push(text < 10 ? '0' + text : text)
26 - console.error(error); 100 + }
101 + this.loading = false
102 + if (this.list.length >= 40) {
103 + this.finished = true
104 + }
105 + }, 500)
106 + },
107 + onRefresh () {
108 + setTimeout(() => {
109 + this.list = []
110 + this.finished = false
111 + this.refreshing = false
112 + window.scrollTo(0, 10)
113 + }, 1000)
114 + },
115 + onClick () {
116 + // this.show = true;
117 + if (_.random(1, true) > 0.5) {
118 + const images = [
119 + 'https://img.yzcdn.cn/public_files/2017/09/05/3bd347e44233a868c99cf0fe560232be.jpg'
120 + ];
121 + this.showImagePreview(images);
122 + } else {
123 + const images = [
124 + 'https://img.yzcdn.cn/public_files/2017/09/05/c0dab461920687911536621b345a0bc9.jpg'
125 + ];
126 + this.showImagePreview(images);
127 + }
128 + },
129 + beforeClose (action, done) {
130 + if (action === 'confirm') {
131 + setTimeout(done, 1000);
132 + } else {
133 + done();
134 + }
135 + },
136 + onBlur (e) {
137 + document.body && (document.body.scrollTop = document.body.scrollTop);
138 + },
139 + showImagePreview (images, position, timer) {
140 + const instance = ImagePreview({
141 + images,
142 + asyncClose: !!timer,
143 + startPosition: typeof position === 'number' ? position : 0,
144 + showIndex: false
27 }); 145 });
146 + if (timer) {
147 + setTimeout(() => {
148 + instance.close();
149 + }, timer);
150 + }
151 + }
28 } 152 }
29 } 153 }
30 </script> 154 </script>
155 +
156 +<style lang="less" scoped>
157 +</style>
......
1 /* jshint esversion: 6 */ 1 /* jshint esversion: 6 */
2 -const vuxLoader = require('vux-loader'); 2 +const path = require('path')
3 -const path = require('path'); 3 +const webpack = require('webpack')
4 -const webpack = require('webpack'); 4 +const CompressionWebpackPlugin = require('compression-webpack-plugin')
5 +
6 +// function resolve (dir) {
7 +// return path.join(__dirname, './', dir)
8 +// }
9 +
10 +// cdn预加载使用
11 +const externals = {
12 + 'vue': 'Vue',
13 + 'vue-router': 'VueRouter',
14 + 'vuex': 'Vuex',
15 + 'axios': 'axios',
16 + 'vant': 'Vant',
17 + '$': 'jquery',
18 + 'jquery': 'Jquery',
19 + 'moment': 'moment'
20 +}
21 +
22 +const cdn = {
23 + // 开发环境
24 + dev: {
25 + css: [],
26 + js: []
27 + },
28 + // 生产环境
29 + build: {
30 + css: [
31 + 'https://cdn.jsdelivr.net/npm/vant@1.5/lib/index.css'
32 + ],
33 + js: [
34 + 'https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js',
35 + 'https://cdn.jsdelivr.net/npm/vue-router@3.0.1/dist/vue-router.min.js',
36 + 'https://cdn.jsdelivr.net/npm/vuex@3.0.1/dist/vuex.min.js',
37 + 'https://cdn.jsdelivr.net/npm/axios@0.18.0/dist/axios.min.js',
38 + 'https://cdn.jsdelivr.net/npm/vant@1.5/lib/vant.min.js',
39 + 'https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js',
40 + 'https://cdn.jsdelivr.net/npm/moment@2.23.0/moment.min.js'
41 + ]
42 + }
43 +}
44 +
45 +// 是否使用gzip
46 +const productionGzip = true
47 +// 需要gzip压缩的文件后缀
48 +const productionGzipExtensions = ['js', 'css']
5 49
6 module.exports = { 50 module.exports = {
7 // 基本路径 51 // 基本路径
...@@ -53,10 +97,6 @@ module.exports = { ...@@ -53,10 +97,6 @@ module.exports = {
53 // 如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中。 97 // 如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中。
54 // 如果这个值是一个函数，则会接收被解析的配置作为参数。该函数及可以修改配置并不返回任何东西，也可以返回一个被克隆或合并过的配置版本。 98 // 如果这个值是一个函数，则会接收被解析的配置作为参数。该函数及可以修改配置并不返回任何东西，也可以返回一个被克隆或合并过的配置版本。
55 configureWebpack: config => { 99 configureWebpack: config => {
56 - vuxLoader.merge(config, {
57 - options: {},
58 - plugins: ['vux-ui']
59 - });
60 config.plugins.push( 100 config.plugins.push(
61 new webpack.ProvidePlugin({ 101 new webpack.ProvidePlugin({
62 $: 'jquery', 102 $: 'jquery',
...@@ -65,21 +105,59 @@ module.exports = { ...@@ -65,21 +105,59 @@ module.exports = {
65 'axios': 'axios', 105 'axios': 'axios',
66 'moment': 'moment' 106 'moment': 'moment'
67 }) 107 })
68 - ); 108 + )
69 - config.resolve.extensions.push('.less'); 109 + config.resolve.extensions.push('.less')
70 - config.resolve.extensions.push('.css'); 110 + config.resolve.extensions.push('.css')
71 // 111 //
72 - config.resolve.alias.src = path.resolve(__dirname, './src/src'); 112 + config.resolve.alias.src = path.resolve(__dirname, './src/src')
73 - config.resolve.alias.assets = path.resolve(__dirname, './src/assets'); 113 + config.resolve.alias.assets = path.resolve(__dirname, './src/assets')
74 - config.resolve.alias.components = path.resolve(__dirname, './src/components'); 114 + config.resolve.alias.components = path.resolve(__dirname, './src/components')
115 + // 修改webpack config, 使其不打包externals下的资源
75 if (process.env.NODE_ENV === 'production') { 116 if (process.env.NODE_ENV === 'production') {
76 - // 为生产环境修改配置... 117 + // 1. 生产环境npm包转CDN
77 - } else { 118 + config.externals = externals
78 - // 为开发环境修改配置... 119 + // 2. 构建时开启gzip，降低服务器压缩对CPU资源的占用，服务器也要相应开启gzip
120 + productionGzip && config.plugins.push(
121 + new CompressionWebpackPlugin({
122 + test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
123 + threshold: 8192,
124 + minRatio: 0.8
125 + })
126 + )
127 + }
128 + if (process.env.NODE_ENV === 'development') {
79 } 129 }
80 }, 130 },
81 // 是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。 131 // 是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。
82 - chainWebpack: () => {}, 132 + chainWebpack: (config) => {
133 + /**
134 + * 添加CDN参数到htmlWebpackPlugin配置中， 详见public/index.html 修改
135 + * vue inspect --plugins 查询插件 使用pages会有多个html实例
136 + */
137 + config
138 + .plugin('html-index')
139 + .tap(args => {
140 + if (process.env.NODE_ENV === 'production') {
141 + args[0].cdn = cdn.build
142 + }
143 + if (process.env.NODE_ENV === 'development') {
144 + args[0].cdn = cdn.dev
145 + }
146 + return args
147 + })
148 + .end()
149 + .plugin('html-login')
150 + .tap(args => {
151 + if (process.env.NODE_ENV === 'production') {
152 + args[0].cdn = cdn.build
153 + }
154 + if (process.env.NODE_ENV === 'development') {
155 + args[0].cdn = cdn.dev
156 + }
157 + return args
158 + })
159 + .end()
160 + },
83 // css相关配置 161 // css相关配置
84 css: { 162 css: {
85 // 是否使用css分离插件 ExtractTextPlugin 163 // 是否使用css分离插件 ExtractTextPlugin
...@@ -106,7 +184,8 @@ module.exports = { ...@@ -106,7 +184,8 @@ module.exports = {
106 pwa: {}, 184 pwa: {},
107 // webpack-dev-server 相关配置 185 // webpack-dev-server 相关配置
108 devServer: { 186 devServer: {
109 - open: process.platform === 'darwin', 187 + open: false,
188 + // open: process.platform === 'darwin',
110 host: '0.0.0.0', 189 host: '0.0.0.0',
111 port: 8080, 190 port: 8080,
112 https: false, 191 https: false,
...@@ -122,8 +201,8 @@ module.exports = { ...@@ -122,8 +201,8 @@ module.exports = {
122 '^/(.*)': '/$1' 201 '^/(.*)': '/$1'
123 }, 202 },
124 onProxyReq: function (proxyReq, req, res, options) { 203 onProxyReq: function (proxyReq, req, res, options) {
125 - proxyReq.setHeader('X-Proxy-Host', req.header('host')); 204 + proxyReq.setHeader('X-Proxy-Host', req.header('host'))
126 - proxyReq.setHeader('X-Proxy-Request-URI', req.url); 205 + proxyReq.setHeader('X-Proxy-Request-URI', req.url)
127 } 206 }
128 } 207 }
129 }, 208 },
...@@ -137,4 +216,4 @@ module.exports = { ...@@ -137,4 +216,4 @@ module.exports = {
137 pluginOptions: { 216 pluginOptions: {
138 // ... 217 // ...
139 } 218 }
140 -}; 219 +}
......