Hooke / w4-vux-template

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
8e544940 1 parent 7a744615

test

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