Hooke / w4-vux-template

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

更新配置

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