update

mobile-code/src/components/plugin/fab.vue

@@ -0,0 +1,199 @@
+<template>
+	<view @touchmove.stop.prevent>
+		<view class="tui-fab-box" :class="{'tui-fab-right':!left || (left && right)}" :style="{left:getLeft(),right:getRight(),bottom:bottom+'rpx'}">
+			<view class="tui-fab-btn" :class="{'tui-visible':isOpen,'tui-fab-hidden':hidden}">
+				<div class="tui-fab-item-box" v-for="(item,index) in btnList" :key="index" @tap.stop="handleClick(index)">
+					<div class="item-list">
+						<div class="list-icon">
+							<i class="iconfont" :class="[item.icon]"></i>
+						</div>
+						<div class="list-name">{{ item.name }}</div>
+					</div>
+				</div>
+			</view>
+			<view class="tui-fab-item" :class="{'tui-active':isOpen}" @tap.stop="handleClick(-1)">
+				<i class="iconfont" :class="[isOpen? 'icontupiantianjia' : 'iconcaidan']"></i>
+			</view>
+		</view>
+		<view class="tui-fab-mask" :class="{'tui-visible':isOpen}" @tap="handleClickCancel"></view>
+	</view>
+</template>
+
+<script>
+// 拓展出来的按钮不应多于6个，否则违反了作为悬浮按钮的快速、高效的原则
+export default {
+	name: 'tuiFab',
+	props: {
+		// rpx 为0时值为auto
+		left: {
+			type: Number,
+			default: 0
+		},
+		// rpx 当为0时且left不为0，值为auto
+		right: {
+			type: Number,
+			default: 20
+		},
+		// rpx bottom值
+		bottom: {
+			type: Number,
+			default: 140
+		},
+		// 点击遮罩 是否可关闭
+		maskClosable: {
+			type: Boolean,
+			default: true
+		}
+	},
+	data() {
+		return {
+			isOpen: false,
+			hidden: true,
+			timer: null,
+			btnList: [
+				{
+					name: '首页',
+					icon: 'iconshouye',
+					url: '/pages/admin/workbench'
+				},
+				{
+					name: '添加图库',
+					icon: 'icontianjiatuku',
+					url: '/pages/admin/workbench'
+				},
+				{
+					name: '发货',
+					icon: 'iconfahuo',
+					url: '/pages/admin/workbench'
+				}
+			]
+		}
+	},
+	methods: {
+		getLeft() {
+			let val = 'auto'
+			if (this.left && !this.right) {
+				val = this.left + 'rpx'
+			}
+			return val
+		},
+		getRight() {
+			let val = this.right + 'rpx'
+			if (this.left && !this.right) {
+				val = 'auto'
+			}
+			return val
+		},
+		handleClick: function(index) {
+			this.hidden = false
+			clearTimeout(this.timer)
+			if (index == -1 && this.btnList.length) {
+				this.isOpen = !this.isOpen
+			} else {
+				this.$emit('click', {
+					index: index
+				})
+				this.isOpen = false
+			}
+			if (!this.isOpen) {
+				this.timer = setTimeout(() => {
+					this.hidden = true
+				}, 200)
+			}
+		},
+		handleClickCancel: function() {
+			if (!this.maskClosable) return
+			this.isOpen = false
+		}
+	},
+	beforeDestroy() {
+		clearTimeout(this.timer)
+		this.timer = null
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+
+	.tui-fab-box {
+		width: 100px;
+		display: flex;
+		justify-content: center;
+		flex-direction: column;
+		position: fixed;
+		z-index: 99997;
+	}
+
+	.tui-fab-right {
+		align-items: center;
+	}
+
+	.tui-fab-btn {
+		transform: scale(0);
+		transition: all 0.2s ease-in-out;
+		opacity: 0;
+		visibility: hidden;
+		background-color: #fff;
+		border-top-left-radius: 80px;
+		border-top-right-radius: 80px;
+		position: relative;
+		top: 40px;
+		padding: 30px 0 30px;
+	}
+
+	.tui-fab-hidden {
+		height: 0;
+		width: 0;
+	}
+
+	.tui-fab-item-box {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding-bottom: 30rpx;
+		.item-list {
+			text-align: center;
+			color: #333;
+		}
+		.list-name {
+			font-weight: 400;
+			transform: scale(0.8);
+		}
+	}
+
+	.tui-fab-item {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
+		transition: all 0.2s linear;
+		background-image: linear-gradient(0deg, #357eff 0%, #0dc9fd 50%);
+		width: 100%;
+		height: 100px;
+		border-radius: 50%;
+		color: #fff;
+	}
+
+	.tui-active {
+		transform: rotate(135deg);
+	}
+
+	.tui-fab-mask {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background: rgba(0, 0, 0, 0.75);
+		z-index: 99996;
+		transition: all 0.2s ease-in-out;
+		opacity: 0;
+		visibility: hidden;
+	}
+
+	.tui-visible {
+		visibility: visible;
+		opacity: 1;
+		transform: scale(1);
+	}
+</style>

mobile-code/src/constant/index.js

@@ -7,7 +7,9 @@ const envVal = {
 	// 本地连接地址
 	hostUrl: null,
 	// 请求接口地址
-	formal: null
+	formal: null,
+	// 项目来源
+	source: ProjectName
 }
 
 // 项目配置

mobile-code/src/pages/admin/workbench.vue

@@ -1,10 +1,21 @@
 <template>
-	<div class="app-main app-content"></div>
+	<div class="app-main app-content">
+		<fab-module />
+	</div>
 </template>
 
 <script>
+import FabModule from '@/components/plugin/fab'
 export default {
-	name: 'admin-workbench'
+	name: 'admin-workbench',
+	components: {
+		FabModule
+	},
+	data() {
+		return {
+			constant: this.$constant
+		}
+	}
 }
 </script>