hive-app/App.vue
@@ -14,4 +14,5 @@ <style> /*每个页面公共css */ @import url("./common/styles/index"); </style> hive-app/common/styles/index.css
New file @@ -0,0 +1,113 @@ /* 间距 */ .mt-5{ margin-top: 5px; } .mt-10{ margin-top: 10px; } .mt-15{ margin-top: 15px; } .mt-20{ margin-top: 20px; } .mt-30{ margin-top: 30px; } .ml-5{ margin-left: 5px; } .ml-10{ margin-left: 10px; } .ml-15{ margin-left: 15px; } .ml-20{ margin-left: 20px; } .mr-5{ margin-right: 5px; } .mr-10{ margin-right: 10px; } .mr-15{ margin-right: 15px; } .mr-20{ margin-right: 20px; } .mb-5{ margin-bottom: 5px; } .mb-10{ margin-bottom: 10px; } .mb-20{ margin-bottom: 20px; } .mb-30{ margin-bottom: 30px; } /* 字体 */ .font-12{ font-size: 12px; } .font-14{ font-size: 14px; } .font-16{ font-size: 16px; } .font-18{ font-size: 18px; } .font-20{ font-size: 20px; } /* 颜色 */ .blue{ color: #518EFF; } .white{ color: #FFFFFF; } .font-gray{ color: #666666; } .font-dark{ color: #111111; } .font-bold{ font-weight: 700; } /* 布局 */ .flex{ display: flex; } .flex-1{ flex: 1; } .flex-v{ flex-direction: column; } .align-center{ align-items: center; } .justify-between{ justify-content: space-between; } .justify-around{ justify-content: space-around; } .block{ display: block; } hive-app/components/sl-filter/filter-view.vue
New file @@ -0,0 +1,475 @@ <template> <view> <view style="padding: 0px 0px;"> <view class="filter-content" v-for="(item, index) in menuList" :key="index" v-if="menuIndex == index"> <view v-if="item.isSort"> <view class="filter-content-list"> <view v-for="(detailItem,idx) in selectDetailList" :key="idx" :class="detailItem.isSelected?'filter-content-list-item-active':'filter-content-list-item-default'" :style="{'color': detailItem.isSelected?themeColor:'#666666'}" @tap="sortTap(idx,selectDetailList,item.key)"> <text>{{detailItem.title}}</text> </view> </view> </view> <view v-else> <view class="filter-content-title" v-if="item.detailTitle && item.detailTitle.length"> <text>{{item.detailTitle}}</text> </view> <view class="filter-content-detail"> <text v-for="(detailItem,idx) in selectDetailList" :key="idx" class='filter-content-detail-item-default' :style="{'background-color':detailItem.isSelected?themeColor:'#FFFFFF','color':detailItem.isSelected?'#FFFFFF':'#666666'}" @tap="itemTap(idx,selectDetailList,item.isMutiple,item.key)"> {{detailItem.title}} </text> </view> <view class="filter-content-footer"> <view class="filter-content-footer-item" style="color: #777777; background-color: #FFFFFF;" @tap="resetClick(selectDetailList,item.key)"> <text>重置</text> </view> <view class="filter-content-footer-item" :style="{'color': '#FFFFFF', 'background-color': themeColor}" @tap="sureClick"> <text>确定</text> </view> </view> </view> </view> </view> </view> </template> <script> export default { data() { return { selectArr: [], result: {}, menuIndex: 0, selectDetailList: [], independenceObj: {}, selectedKey: '', cacheSelectedObj: {}, defaultSelectedTitleObj: {} }; }, props: { themeColor: { type: String, default () { return '#D1372C' } }, menuList: { type: Array, default () { return [] } }, independence: { type: Boolean, default: false } }, computed: { selectedTitleObj() { let obj = {} for (let i = 0; i < this.menuList.length; i++) { let item = this.menuList[i]; obj[item.key] = item.title; } return obj; }, defaultSelectedObj() { // 保存初始状态 return this.getSelectedObj() }, selectedObj: { get() { return this.getSelectedObj() }, set(newObj) { return newObj; } } }, methods: { getSelectedObj() { let obj = {} for (let i = 0; i < this.menuList.length; i++) { let item = this.menuList[i]; if (!this.independence && item.defaultSelectedIndex != null && item.defaultSelectedIndex.toString().length > 0) { // 处理并列菜单默认值 if (item.isMutiple) { obj[item.key] = []; item.detailList[0].isSelected = false; if (!Array.isArray(item.defaultSelectedIndex)) { // 如果默认值不是数组 item.defaultSelectedIndex = [item.defaultSelectedIndex]; } for (let j = 0; j < item.defaultSelectedIndex.length; j++) { // 将默认选中的值放入selectedObj item.detailList[item.defaultSelectedIndex[j]].isSelected = true; obj[item.key].push(item.detailList[item.defaultSelectedIndex[j]].value) } } else { obj[item.key] = item.detailList[item.defaultSelectedIndex].value; this.selectedTitleObj[item.key] = item.detailList[item.defaultSelectedIndex].title; this.defaultSelectedTitleObj[item.key] = item.detailList[item.defaultSelectedIndex].title; item.detailList[0].isSelected = false; item.detailList[item.defaultSelectedIndex].isSelected = true; } } else { if (item.isMutiple) { obj[item.key] = []; } else { obj[item.key] = ''; } } } this.result = obj; return obj; }, // 重置所有选项，包括默认选项，并更新result resetAllSelect(callback) { let titles = []; for (let i = 0; i < this.menuList.length; i++) { this.resetSelected(this.menuList[i].detailList,this.menuList[i].key); titles[this.menuList[i].key] = this.menuList[i].title; } let obj = { 'result': this.result, 'titles': titles, 'isReset': true } this.$emit("confirm", obj); callback(this.result); }, // 重置选项为设置的默认值，并更新result resetSelectToDefault(callback) { for (let i = 0; i < this.menuList.length; i++) { this.selectDetailList = this.menuList[i].detailList; if (this.menuList[i].defaultSelectedIndex) { if (Array.isArray(this.menuList[i].defaultSelectedIndex)) { // 把所有默认的为false的点为true for (let j = 0; j < this.menuList[i].defaultSelectedIndex.length; j++) { if (this.selectDetailList[this.menuList[i].defaultSelectedIndex[j]].isSelected == false) { this.itemTap(this.menuList[i].defaultSelectedIndex[j], this.selectDetailList, this.menuList[i].isMutiple, this .menuList[i].key) } } } else { this.itemTap(this.menuList[i].defaultSelectedIndex, this.selectDetailList, this.menuList[i].isMutiple, this.menuList[ i].key) } // 获取非默认项的下标 let unDefaultSelectedIndexArr = this.getUnDefaultSelectedIndex(this.menuList[i]) // 把所有不是默认的为true的点为false for (let j = 0; j < unDefaultSelectedIndexArr.length; j++) { if (this.selectDetailList[unDefaultSelectedIndexArr[j]].isSelected == true) { this.itemTap(unDefaultSelectedIndexArr[j], this.selectDetailList, this.menuList[i].isMutiple, this .menuList[i].key) } } } } this.selectedObj = this.defaultSelectedObj; this.result = this.defaultSelectedObj; let obj = { 'result': this.result, 'titles': this.defaultSelectedTitleObj, 'isReset': true } this.$emit("confirm", obj); callback(this.result) }, getUnDefaultSelectedIndex(menuListItem) { // 获取非默认项 let tempDefault = menuListItem.defaultSelectedIndex; if (!Array.isArray(tempDefault)) { tempDefault = [tempDefault]; } // 获取所有项的下标 组成新的数组 let all = []; for (let i = 0; i < menuListItem.detailList.length; i++) { all.push(i) } // 将默认选中的数组与所有项的数组的不同值合并为一个新数组 var unDefaultSelectedIndex = tempDefault.filter(function(v) { return !(all.indexOf(v) > -1) }).concat(all.filter(function(v) { return !(tempDefault.indexOf(v) > -1) })); return unDefaultSelectedIndex; }, resetMenuList(val) { this.menuList = val; this.$emit('update:menuList', val) }, menuTabClick(index) { this.menuIndex = index; this.selectDetailList = this.menuList[index].detailList; this.selectedKey = this.menuList[index].key; // 如果是独立菜单 if (this.independence && !this.menuList[index].isSort) { if (JSON.stringify(this.independenceObj) == '{}') { this.initIndependenceObj(index); } else { for (let key in this.independenceObj) { if (key != this.selectedKey) { this.initIndependenceObj(index); this.resetSelected(this.menuList[index].detailList, this.selectedKey); } } } } if (this.independence && this.menuList[index].isSort) { this.independenceObj = {}; } if (this.independence) { let idx = this.menuList[index].defaultSelectedIndex; if (idx != null && idx.toString().length > 0) { // 处理独立菜单默认值 if (this.menuList[index].isMutiple) { for (let i = 0; i < idx.length; i++) { if (this.menuList[index].detailList[idx[i]].isSelected == false) { this.itemTap(idx[i], this.menuList[index].detailList, true, this.selectedKey); } } } else { if (this.menuList[index].detailList[idx].isSelected == false) { this.itemTap(idx, this.menuList[index].detailList, false, this.selectedKey); } } } } // #ifdef H5 this.selectedObj = this.selectedObj; this.$forceUpdate(); // #endif }, initIndependenceObj(index) { this.independenceObj = {}; if (this.menuList[index].isMutiple) { this.independenceObj[this.selectedKey] = []; } else { this.independenceObj[this.selectedKey] = ''; } }, itemTap(index, list, isMutiple, key) { if (isMutiple == true) { list[index].isSelected = !list[index].isSelected; if (index == 0) { this.resetSelected(list, key) if (!this.independence) { this.selectedTitleObj[key] = list[index].title; } } else { list[0].isSelected = false if (list[index].isSelected) { if (this.independence) { this.independenceObj[this.selectedKey].push(list[index].value); } else { this.selectedObj[key].push(list[index].value); } } else { list[index].isSelected = false; if (this.independence) { var idx = this.independenceObj[this.selectedKey].indexOf(list[index].value); this.independenceObj[this.selectedKey].splice(idx, 1); } else { var idx = this.selectedObj[key].indexOf(list[index].value); this.selectedObj[key].splice(idx, 1); } } if (this.independence) { this.result = this.independenceObj; } else { this.result = this.selectedObj; } } } else { if (index == 0) { this.resetSelected(list, key) if (!this.independence) { this.selectedTitleObj[key] = list[index].title; } } else { list[0].isSelected = false if (this.independence) { this.independenceObj[this.selectedKey] = list[index].value; this.result = this.independenceObj; } else { this.selectedObj[key] = list[index].value; this.result = this.selectedObj; this.selectedTitleObj[key] = list[index].title; } for (let i = 0; i < list.length; i++) { if (index == i) { list[i].isSelected = true } else { list[i].isSelected = false } } } } // #ifdef H5 this.$forceUpdate(); // #endif }, resetSelected(list, key) { if (typeof this.result[key] == 'object') { this.result[key] = []; this.selectedTitleObj[key] = list[0].title; } else { this.result[key] = ''; this.selectedTitleObj[key] = list[0].title; } for (let i = 0; i < list.length; i++) { if (i == 0) { list[i].isSelected = true; } else { list[i].isSelected = false; } } // #ifdef H5 this.$forceUpdate(); // #endif }, sortTap(index, list, key) { if (this.independence) { this.independenceObj[this.selectedKey] = list[index].value; this.result = this.independenceObj; } else { this.selectedObj[key] = list[index].value; this.result = this.selectedObj; this.selectedTitleObj[key] = list[index].title; } for (let i = 0; i < list.length; i++) { if (index == i) { list[i].isSelected = true; } else { list[i].isSelected = false; } } let obj = { 'result': this.result, 'titles': this.selectedTitleObj, 'isReset': false } this.$emit("confirm", obj); }, sureClick() { let obj = { 'result': this.result, 'titles': this.selectedTitleObj, 'isReset': false } this.$emit("confirm", obj); }, resetClick(list, key) { this.resetSelected(list, key) } } } </script> <style> .filter-content { background-color: #F6F7F8; } .filter-content-title { border-bottom: #EEEEEE 1px solid; padding: 10px 15px; font-size: 13px; color: #999999; } .filter-content-detail { padding: 5px 15px; } .filter-content-detail-item-active { background-color: #D1372C; color: #FFFFFF; padding: 5px 15px; border-radius: 20px; margin-right: 10px; margin-top: 10px; display: inline-block; font-size: 14px; } .filter-content-detail-item-default { background-color: #FFFFFF; color: #666666; padding: 5px 15px; border-radius: 20px; margin-right: 10px; margin-top: 10px; display: inline-block; font-size: 14px; } .filter-content-footer { display: flex; justify-content: space-between; width: 100%; height: 45px; margin-top: 10px; } .filter-content-footer-item { width: 50%; display: flex; justify-content: center; align-items: center; font-size: 16px; } .filter-content-list { padding: 5px 15px; } .filter-content-list-item-default { color: #666666; width: 100%; padding: 10px 0px; } .filter-content-list-item-default text { width: 90%; font-size: 14px; display: inline-block; } .filter-content-list-item-active { color: #D1372C; width: 100%; padding: 10px 0px; } .filter-content-list-item-active text { font-size: 14px; width: 90%; display: inline-block; } .filter-content-list-item-active:after { content: '✓'; } </style> hive-app/components/sl-filter/iconfont/iconfont.css
New file @@ -0,0 +1,20 @@ @font-face { font-family: 'sl-font'; src: url('data:font/truetype;charset=utf-8;base64,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') format('truetype'); } .sl-font { font-family: "sl-font" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .sl-down:before { content: "\e61a"; } .sl-up:before { content: "\e61c"; } hive-app/components/sl-filter/popup-layer.vue
New file @@ -0,0 +1,122 @@ <template> <scroll-view scroll-y v-show="ifshow" @tap="ableClose" @touchmove.stop.prevent class="popup-layer"> <view ref="popRef" class="popup-content" @tap.stop="stopEvent" :style="_location"> <slot></slot> </view> </scroll-view> </template> <script> export default { name: 'popup-layer', props: { direction: { type: String, default: 'top', // 方向 top，bottom，left，right }, autoClose: { type: Boolean, default: true, }, isTransNav: { type: Boolean, default: false }, navHeight: { type: Number, default: 0 } }, data() { return { ifshow: false, // 是否展示, translateValue: -100, // 位移距离 timer: null, iftoggle: false, }; }, computed: { _translate() { if (this.isTransNav) { const transformObj = { 'top': `transform:translateY(${-this.translateValue}%)`, 'bottom': `transform:translateY(calc(${this.translateValue}% + ${this.navHeight}px))`, 'left': `transform:translateX(${-this.translateValue}%)`, 'right': `transform:translateX(${this.translateValue}%)` }; return transformObj[this.direction] } else { const transformObj = { 'top': `transform:translateY(${-this.translateValue}%)`, 'bottom': `transform:translateY(${this.translateValue}%)`, 'left': `transform:translateX(${-this.translateValue}%)`, 'right': `transform:translateX(${this.translateValue}%)` }; return transformObj[this.direction] } }, _location() { const positionValue = { 'top': 'bottom:0px;width:100%;', 'bottom': 'top:0px;width:100%;', 'left': 'right:0px;height:100%;', 'right': 'left:0px;height:100%;', }; return positionValue[this.direction] + this._translate; } }, methods: { show() { let _this = this; this.ifshow = true; let _open = setTimeout(() => { this.translateValue = 0; _open = null; }, 100) let _toggle = setTimeout(() => { this.iftoggle = true; _toggle = null; }, 300); }, close() { if (this.timer !== null || !this.iftoggle) { return; } this.translateValue = -100 - this.navHeight; this.timer = setTimeout(() => { this.ifshow = false; this.timer = null; this.iftoggle = false; }, 300); this.$emit("close") }, ableClose() { if (this.autoClose) { this.close(); } }, stopEvent(event) {}, } } </script> <style> .popup-layer { position: absolute; z-index: 999999; background: rgba(0, 0, 0, .3); height: calc(100% - 50px); width: 100%; left: 0px; overflow: hidden; } .popup-content { position: absolute; z-index: 1000000; background: #FFFFFF; transition: all .3s ease; } </style> hive-app/components/sl-filter/sl-filter.vue
New file @@ -0,0 +1,302 @@ <template> <view class="content"> <view :style="{height: tabHeight + 1 +'px'}"> <view :class="topFixed?'select-tab-fixed-top':'select-tab'" :style="{height: tabHeight+'px'}"> <view class="select-tab-item" :style="{width: itemWidth}" v-for="(item,index) in titleList" :key="index" @tap="showMenuClick(index)"> <text :style="{color:color}">{{item.title}}</text> <text class="arrows sl-font" :class="statusList[index].isActive?up:down"></text> </view> </view> </view> <popup-layer ref="popupRef" :direction="'bottom'" @close="close" :isTransNav="isTransNav" :navHeight="navHeight" :tabHeight="tabHeight"> <sl-filter-view :ref="'slFilterView'" :independence="independence" :themeColor="themeColor" :menuList.sync="menuListTemp" ref="slFilterView" @confirm="filterResult"></sl-filter-view> </popup-layer> </view> </template> <script> import popupLayer from '@/components/sl-filter/popup-layer.vue'; import slFilterView from '@/components/sl-filter/filter-view.vue'; export default { components: { popupLayer, slFilterView }, props: { menuList: { type: Array, default () { return [] } }, themeColor: { type: String, default () { return '#000000' } }, color: { type: String, default () { return '#666666' } }, independence: { type: Boolean, default: false }, isTransNav: { type: Boolean, default: false }, navHeight: { type: Number, default: 0 }, topFixed: { type: Boolean, default: false } }, computed: { itemWidth() { return 'calc(100%/2)' }, menuListTemp: { get() { return this.getMenuListTemp(); }, set(newObj) { return newObj; } } }, // #ifndef H5 onReady: function() { let arr = []; let titleArr = []; let r = {}; for (let i = 0; i < this.menuList.length; i++) { arr.push({ 'isActive': false }); // titleArr.push({ // 'title': this.menuList[i].title, // 'key': this.menuList[i].key // }) r[this.menuList[i].key] = this.menuList[i].title; if (this.menuList[i].reflexTitle && this.menuList[i].defaultSelectedIndex > -1) { titleArr.push({ 'title': this.menuList[i].detailList[this.menuList[i].defaultSelectedIndex].title, 'key': this.menuList[i].key }) } else { titleArr.push({ 'title': this.menuList[i].title, 'key': this.menuList[i].key }) } } this.statusList = arr; this.titleList = titleArr; this.tempTitleObj = r; }, // #endif // #ifdef H5 created: function() { let arr = []; let titleArr = []; let r = {}; for (let i = 0; i < this.menuList.length; i++) { arr.push({ 'isActive': false }); // titleArr.push({ // 'title': this.menuList[i].title, // 'key': this.menuList[i].key // }); r[this.menuList[i].key] = this.menuList[i].title; if (this.menuList[i].reflexTitle && this.menuList[i].defaultSelectedIndex > -1) { titleArr.push({ 'title': this.menuList[i].detailList[this.menuList[i].defaultSelectedIndex].title, 'key': this.menuList[i].key }) } else { titleArr.push({ 'title': this.menuList[i].title, 'key': this.menuList[i].key }) } } this.statusList = arr; this.titleList = titleArr; this.tempTitleObj = r; }, // #endif data() { return { down: 'sl-down', up: 'sl-up', tabHeight: 50, statusList: [], selectedIndex: '', titleList: [], tempTitleObj: {} }; }, methods: { getMenuListTemp() { let arr = this.menuList; for (let i = 0; i < arr.length; i++) { let item = arr[i]; for (let j = 0; j < item.detailList.length; j++) { let d_item = item.detailList[j]; if (j == 0) { d_item.isSelected = true } else { d_item.isSelected = false } } } return arr; }, // 重置所有选项，包括默认选项，并更新result resetAllSelect(callback) { this.$refs.slFilterView.resetAllSelect(function(e){ callback(e); }); }, // 重置选项为设置的默认值，并更新result resetSelectToDefault(callback) { this.$refs.slFilterView.resetSelectToDefault(function(e){ callback(e); }); }, resetMenuList(val) { this.menuList = val; this.$emit('update:menuList', val) this.$forceUpdate(); this.$refs.slFilterView.resetMenuList(val) }, showMenuClick(index) { this.selectedIndex = index; if (this.statusList[index].isActive == true) { this.$refs.popupRef.close(); this.statusList[index].isActive = false } else { this.menuTabClick(index); this.$refs.popupRef.show() } }, menuTabClick(index) { this.$refs.slFilterView.menuTabClick(index); for (let i = 0; i < this.statusList.length; i++) { if (index == i) { this.statusList[i].isActive = true; } else { this.statusList[i].isActive = false; } } }, filterResult(obj) { let val = obj.result; let titlesObj = obj.titles; // 处理选项映射到菜单title if (this.independence) { if (!this.menuList[this.selectedIndex].isMutiple || this.menuList[this.selectedIndex].isSort) { let tempTitle = ''; for (let i = 0; i < this.menuList[this.selectedIndex].detailList.length; i++) { let item = this.menuList[this.selectedIndex].detailList[i]; if (item.value == val[this.menuList[this.selectedIndex].key]) { tempTitle = item.title; } } if (this.menuList[this.selectedIndex].reflexTitle) { this.titleList[this.selectedIndex].title = tempTitle; } } } else { for (let key in titlesObj) { if (!Array.isArray(titlesObj[key])) { this.tempTitleObj[key] = titlesObj[key]; } } for (let key in this.tempTitleObj) { for (let i = 0; i < this.titleList.length; i++) { if (this.titleList[i].key == key) { this.titleList[i].title = this.tempTitleObj[key]; } } } } this.$refs.popupRef.close() if (obj.isReset) { } else{ this.$emit("result", val) } }, close() { for (let i = 0; i < this.statusList.length; i++) { this.statusList[i].isActive = false; } } } } </script> <style> @import 'iconfont/iconfont.css'; .select-tab { border-bottom: #F7F7F7 1px solid; background-color: #FFFFFF; display: flex; width: 100%; } .select-tab-fixed-top { border-bottom: #F7F7F7 1px solid; background-color: #FFFFFF; display: flex; width: 100%; position: fixed; /* #ifdef H5 */ top: 44px; /* #endif */ /* #ifndef H5 */ top: 0; /* #endif */ } .arrows { margin-left: 5px; } .select-tab .select-tab-item, .select-tab-fixed-top .select-tab-item { display: flex; justify-content: center; align-items: center; } .select-tab .select-tab-item text, .select-tab-fixed-top .select-tab-item text { color: #666666; font-size: 14px; } </style> hive-app/components/uni-badge/uni-badge.vue
File was deleted hive-app/components/uni-calendar/calendar.js
File was deleted hive-app/components/uni-calendar/uni-calendar-item.vue
File was deleted hive-app/components/uni-calendar/uni-calendar.vue
File was deleted hive-app/components/uni-calendar/util.js
File was deleted hive-app/components/uni-card/uni-card.vue
File was deleted hive-app/components/uni-collapse-item/uni-collapse-item.vue
File was deleted hive-app/components/uni-collapse/uni-collapse.vue
File was deleted hive-app/components/uni-combox/uni-combox.vue
File was deleted hive-app/components/uni-countdown/uni-countdown.vue
File was deleted hive-app/components/uni-data-checkbox/clientdb.js
File was deleted hive-app/components/uni-data-checkbox/uni-data-checkbox.vue
File was deleted hive-app/components/uni-dateformat/date-format.js
File was deleted hive-app/components/uni-dateformat/uni-dateformat.vue
File was deleted hive-app/components/uni-datetime-picker/uni-datetime-picker.vue
File was deleted hive-app/components/uni-drawer/uni-drawer.vue
File was deleted hive-app/components/uni-easyinput/common.js
File was deleted hive-app/components/uni-easyinput/uni-easyinput.vue
File was deleted hive-app/components/uni-fab/uni-fab.vue
File was deleted hive-app/components/uni-fav/uni-fav.vue
File was deleted hive-app/components/uni-field/uni-field.vue
File was deleted hive-app/components/uni-forms-item/uni-forms-item.vue
File was deleted hive-app/components/uni-forms/uni-forms.vue
File was deleted hive-app/components/uni-forms/validate.js
File was deleted hive-app/components/uni-goods-nav/uni-goods-nav.vue
File was deleted hive-app/components/uni-grid-item/uni-grid-item.vue
File was deleted hive-app/components/uni-grid/uni-grid.vue
File was deleted hive-app/components/uni-group/uni-group.vue
File was deleted hive-app/components/uni-icons/icons.js
File was deleted hive-app/components/uni-icons/uni-icons.vue
File was deleted hive-app/components/uni-icons/uni.ttfBinary files differ
hive-app/components/uni-indexed-list/uni-indexed-list-item.vue
File was deleted hive-app/components/uni-indexed-list/uni-indexed-list.vue
File was deleted hive-app/components/uni-link/uni-link.vue
File was deleted hive-app/components/uni-list-ad/uni-list-ad.vue
File was deleted hive-app/components/uni-list-chat/uni-list-chat.scss
File was deleted hive-app/components/uni-list-chat/uni-list-chat.vue
File was deleted hive-app/components/uni-list-item/uni-list-item.vue
File was deleted hive-app/components/uni-list/uni-list.vue
File was deleted hive-app/components/uni-list/uni-refresh.vue
File was deleted hive-app/components/uni-list/uni-refresh.wxs
File was deleted hive-app/components/uni-load-more/uni-load-more.vue
File was deleted hive-app/components/uni-nav-bar/uni-nav-bar.vue
File was deleted hive-app/components/uni-notice-bar/uni-notice-bar.vue
File was deleted hive-app/components/uni-number-box/uni-number-box.vue
File was deleted hive-app/components/uni-pagination/uni-pagination.vue
File was deleted hive-app/components/uni-popup-dialog/uni-popup-dialog.vue
File was deleted hive-app/components/uni-popup-message/uni-popup-message.vue
File was deleted hive-app/components/uni-popup-share/uni-popup-share.vue
File was deleted hive-app/components/uni-popup/message.js
File was deleted hive-app/components/uni-popup/popup.js
File was deleted hive-app/components/uni-popup/share.js
File was deleted hive-app/components/uni-popup/uni-popup.vue
File was deleted hive-app/components/uni-rate/uni-rate.vue
File was deleted hive-app/components/uni-search-bar/uni-search-bar.vue
File was deleted hive-app/components/uni-section/uni-section.vue
File was deleted hive-app/components/uni-segmented-control/uni-segmented-control.vue
File was deleted hive-app/components/uni-status-bar/uni-status-bar.vue
File was deleted hive-app/components/uni-steps/uni-steps.vue
File was deleted hive-app/components/uni-swipe-action-item/bindingx.js
File was deleted hive-app/components/uni-swipe-action-item/index.wxs
File was deleted hive-app/components/uni-swipe-action-item/mpalipay.js
File was deleted hive-app/components/uni-swipe-action-item/mpother.js
File was deleted hive-app/components/uni-swipe-action-item/mpwxs.js
File was deleted hive-app/components/uni-swipe-action-item/uni-swipe-action-item.vue
File was deleted hive-app/components/uni-swipe-action/uni-swipe-action.vue
File was deleted hive-app/components/uni-swiper-dot/uni-swiper-dot.vue
File was deleted hive-app/components/uni-table/uni-table.vue
File was deleted hive-app/components/uni-tag/uni-tag.vue
File was deleted hive-app/components/uni-td/uni-td.vue
File was deleted hive-app/components/uni-test/uni-test.vue
File was deleted hive-app/components/uni-th/uni-th.vue
File was deleted hive-app/components/uni-title/uni-title.vue
File was deleted hive-app/components/uni-tr/uni-tr.vue
File was deleted hive-app/components/uni-transition/uni-transition.vue
File was deleted hive-app/pages.json
@@ -1,17 +1,69 @@ { "pages": [{ "path": "pages/index/index", "style": { "navigationBarTitleText": "uni-app" "pages": [ { "path": "pages/workbench/index", "style": { "transparentTitle": "always", "app-plus":{ "scrollIndicator": "none" } } }, { "path": "pages/login/index", "style": { "transparentTitle": "always", "app-plus":{ "scrollIndicator": "none" } } }, { "path": "pages/member/index", "style": { "transparentTitle": "always", "app-plus":{ "scrollIndicator": "none" } } }, { "path": "pages/mine/index", "style": { "transparentTitle": "always", "app-plus":{ "scrollIndicator": "none" } } } }], ], "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "uni-app", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8", "app-plus": { "background": "#efeff4" } "backgroundColor":"#F8F8F8" }, "tabBar":{ "color": "#abb1cc", "selectedColor": "#518EFF", "backgroundColor": "#FFFFFF", "list":[ { "pagePath": "pages/workbench/index", "iconPath": "static/images/tabbar1.png", "selectedIconPath": "static/images/tabbar1-2.png", "text": "工作台" }, { "pagePath": "pages/member/index", "iconPath": "static/images/tabbar2.png", "selectedIconPath": "static/images/tabbar2-2.png", "text": "会员" }, { "pagePath": "pages/mine/index", "iconPath": "static/images/tabbar3.png", "selectedIconPath": "static/images/tabbar3-2.png", "text": "我的" } ] } } hive-app/pages/index/index.vue
File was deleted hive-app/pages/login/index.vue
New file @@ -0,0 +1,37 @@ <template> <!-- 登录 --> <view> <view class="login-box"> <input placeholder="输入账号" class="login-input"/> <input placeholder="输入密码" class="login-input mt-20"/> <button class="blue-btn mt-20">登录</button> </view> </view> </template> <script> </script> <style> .login-box{ padding: 30px; box-sizing: border-box; width: 100%; position: absolute; bottom: 40px; } .login-input{ border: 1px solid #ABB1CC; border-radius: 20px; text-align: center; padding: 10px 0; font-size: 14px; } .blue-btn{ background: #2483ff; border-radius: 20px; color: #FFFFFF; font-size: 16px; } </style> hive-app/pages/member/index.vue
New file @@ -0,0 +1,9 @@ <template> <!-- 会员 --> </template> <script> </script> <style> </style> hive-app/pages/mine/index.vue
New file @@ -0,0 +1,9 @@ <template> <!-- 我的 --> </template> <script> </script> <style> </style> hive-app/pages/workbench/index.vue
New file @@ -0,0 +1,173 @@ <template> <!-- 工作台 --> <view class="container"> <!-- #ifndef H5 --> <view class="status_bar"></view> <!-- #endif --> <view class="header flex align-center justify-between"> <text class="font-18">HIVE</text> <view> <image class="header-icon mr-15" src="../../static/images/search.png"></image> <image class="header-icon" src="../../static/images/add.png"></image> </view> </view> <view class="status-bar flex justify-between mt-15"> <view class="flex flex-v align-center"> <text class="font-18 white">0</text> <text class="font-16 white">预约</text> </view> <view class="flex flex-v align-center"> <text class="font-18 white">2</text> <text class="font-16 white">进行中</text> </view> <view class="flex flex-v align-center"> <text class="font-18 white">5</text> <text class="font-16 white">代付款</text> </view> <view class="flex flex-v align-center"> <text class="font-18 white">15</text> <text class="font-16 white">欠款</text> </view> </view> <view class="content-item mt-10"> <text class="font-14 font-gray">订单</text> <view class="flex align-center mt-10"> <view class="flex flex-v align-center list-item"> <image class="content-icon" src="../../static/images/order1.png"></image> <text class="font-12 mt-10 font-dark">新建订单</text> </view> <view class="flex flex-v align-center list-item"> <image class="content-icon" src="../../static/images/order2.png"></image> <text class="font-12 mt-10 font-dark">代付款</text> </view> <view class="flex flex-v align-center list-item"> <image class="content-icon" src="../../static/images/order3.png"></image> <text class="font-12 mt-10 font-dark">已付款</text> </view> <view class="flex flex-v align-center list-item"> <image class="content-icon" src="../../static/images/order4.png"></image> <text class="font-12 mt-10 font-dark">欠款</text> </view> </view> </view> <view class="content-item mt-10"> <text class="font-14 font-gray">项目/服务</text> <view class="flex align-center mt-10"> <view class="flex flex-v align-center list-item"> <image class="content-icon" src="../../static/images/sever1.png"></image> <text class="font-12 mt-10 font-dark">新建预约</text> </view> <view class="flex flex-v align-center list-item"> <image class="content-icon" src="../../static/images/sever2.png"></image> <text class="font-12 mt-10 font-dark">看板</text> </view> <view class="flex flex-v align-center list-item"> <image class="content-icon" src="../../static/images/sever3.png"></image> <text class="font-12 mt-10 font-dark">待服务</text> </view> <view class="flex flex-v align-center list-item"> <image class="content-icon" src="../../static/images/sever4.png"></image> <text class="font-12 mt-10 font-dark">服务完成</text> </view> </view> </view> <view class="content-item mt-10"> <text class="font-14 font-gray">代办</text> <view class="flex align-center mt-10"> <view class="flex flex-v align-center list-item"> <image class="content-icon" src="../../static/images/commission1.png"></image> <text class="font-12 mt-10 font-dark">跟进</text> </view> <view class="flex flex-v align-center list-item"> <image class="content-icon" src="../../static/images/commission2.png"></image> <text class="font-12 mt-10 font-dark">日报</text> </view> <view class="flex flex-v align-center list-item"> <image class="content-icon" src="../../static/images/commission3.png"></image> <text class="font-12 mt-10 font-dark">通知</text> </view> </view> </view> <view class="content-item mt-10"> <text class="font-14 font-gray">仓库</text> <view class="flex align-center mt-10"> <view class="flex flex-v align-center list-item"> <image class="content-icon" src="../../static/images/warehouse1.png"></image> <text class="font-12 mt-10 font-dark">库存查询</text> </view> <view class="flex flex-v align-center list-item"> <image class="content-icon" src="../../static/images/warehouse2.png"></image> <text class="font-12 mt-10 font-dark">盘点</text> </view> </view> </view> <view class="content-item"> <text class="font-14 font-gray">报表</text> <view class="flex align-center mt-10"> <view class="flex flex-v align-center list-item"> <image class="content-icon" src="../../static/images/statement1.png"></image> <text class="font-12 mt-10 font-dark">排行榜</text> </view> <view class="flex flex-v align-center list-item"> <image class="content-icon" src="../../static/images/statement2.png"></image> <text class="font-12 mt-10 font-dark">员工业绩</text> </view> <view class="flex flex-v align-center list-item"> <image class="content-icon" src="../../static/images/statement3.png"></image> <text class="font-12 mt-10 font-dark">门店业绩</text> </view> <view class="flex flex-v align-center list-item"> <image class="content-icon" src="../../static/images/statement4.png"></image> <text class="font-12 mt-10 font-dark">产品报表</text> </view> </view> <view class="flex align-center mt-10"> <view class="flex flex-v align-center list-item"> <image class="content-icon" src="../../static/images/statement5.png"></image> <text class="font-12 mt-10 font-dark">库存预警</text> </view> <view class="flex flex-v align-center list-item"> <image class="content-icon" src="../../static/images/statement6.png"></image> <text class="font-12 mt-10 font-dark">客户流失预警</text> </view> </view> </view> </view> </template> <script> </script> <style> page{ background: #F8F8F8; } .container{ padding: 0 8px; } .header{ padding: 10px 5px; } .header-icon{ width: 20px; height: 20px; } .status-bar{ background-color: #518EFF; padding: 16px 30px; border-radius: 4px; } .content-item{ background: #FFFFFF; padding:16px; border-radius: 4px; margin: 10px 0; } .content-icon{ width: 32px; height: 32px; } .list-item{ width: 25%; } </style> hive-app/static/images/add.png
