配件申请悬浮按钮

src/components/parts/applyButton.vue

+<template>
+	<!-- 申请配件按钮 -->
+	<view class="apply-button" @click="handleClick">
+		<u-button :custom-style="customStyle" shape="circle" @click.stop="handleOperate" type="primary">
+			<u-icon class="apply-icon" name="plus"></u-icon>
+			<text class="apply-text" v-if="showText">申请配件</text>
+		</u-button>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			type: { // 按钮宽'collapse': '80rpx', 'expand': '220rpx'
+				type: String,
+				default: 'expand'
+			}
+		},
+		computed: {
+			typeWidth() {
+				return {
+					'collapse': '80rpx',
+					'expand': '220rpx'
+				}
+			},
+			showText() {
+				return this.type == 'expand'
+			},
+			customStyle() {
+				return {
+					'height': '80rpx',
+					'width': this.typeWidth[this.type],
+				}
+			}
+		},
+		methods: {
+			handleClick() {
+				this.$emit('click')
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.apply-button {
+		.apply-icon {
+			font-size: 36rpx;
+		}
+		.apply-text {
+			font-size: 32rpx;
+			padding-left: 10rpx;
+		}
+	}
+</style>

src/pages/index/mine.vue

@@ -283,7 +283,7 @@
 						width: 120rpx;
 						height: 120rpx;
 						background-color: #FFFFFF;
-						border-radius: 56rpx;
+						border-radius: 60rpx;
 						display: flex;
 						align-items: center;
 						justify-content: center;
@@ -335,7 +335,7 @@
 					color: #FFFFFF;
 					margin-right: 4rpx;
 					font-size: 26rpx;
-					margin-top: -26rpx;
+					margin-top: -24rpx;
 					.right-image-view {
 						width: 34rpx;
 						height: 32rpx;

src/pages/mine/warehouse/index.vue

@@ -2,17 +2,7 @@
 	<!-- 我的配件 -->
 	<view class="ware-house">
 		<u-navbar back-icon-color="#333333" background="#FFFFFF" title="我的配件" titleColor="#333333"
-			:border-bottom="false" title-bold></u-navbar>
-<!-- 		<view class="tools-box">
-			<view class="search-sub">
-				<u-subsection :current="curNow" :list="subList" active-color="white" bg-color="white"
-					inactive-color="#666" button-color="#2272FF" bparts-radius="36" @change="sectionChange" height="72"
-					bold>
-				</u-subsection>
-			</view>
-			<u-button class="right-btn" @click="handleClickRecords" :custom-style="buttonStyle" type="primary"
-				shape="circle">操作记录</u-button>
-		</view> -->
+			:border-bottom="false" title-bold></u-navbar>
 		<view class="search-view">
 			<view class="search-btn" @click="handleClickSearch">
 				<image class="search-image" mode="widthFix" :src="sousuoImage"></image>
@@ -27,7 +17,7 @@
 		</view>
 		<view class="tab-view">
 			<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom" scroll-anchoring
-				refresher-enabled="true" :refresher-triggered="triggered" :refresher-threshold="100"
+				refresher-enabled="true" :refresher-triggered="triggered" :refresher-threshold="100" @scroll="scroll"
 				:scroll-top="scrollTop" refresher-background="#F4F5F7" @refresherpulling="triggered = true"
 				@refresherrefresh="onRefresh" @refresherrestore="onRestore" enable-back-to-top>
 				<view class="loading-view" v-if="!loaded">
@@ -45,28 +35,21 @@
 				</template>
 			</scroll-view>
 		</view>
-<!-- 		<view class="bottom-view" v-if="isReserve">
-			<view class="selected-all-view" @click="radioChange">
-				<u-icon class="selected-all-icon" name="checkbox-mark" :color="radioColor"></u-icon>
-				<text>全选</text>
-			</view>
-			<view class="right-view">
-				<u-button class="scd-btn" @click="handleClickRecords" :custom-style="buttonStyle" type="primary"
-					shape="circle">{{buttonText}}</u-button>
-			</view>
-			
-		</view> -->
+		<view class="fixed-button">
+			<ApplyButton :type="buttonType" @click="handleClickApply"/>
+		</view>
 	</view>
 </template>
 
 <script>
 	import AppliedCell from "@/components/parts/appliedPartsCell.vue"
 	import NoOrder from "@/components/order/noOrder.vue"
-
+	import ApplyButton from "@/components/parts/applyButton.vue"
 	export default {
 		components: {
 			AppliedCell,
-			NoOrder
+			NoOrder,
+			ApplyButton
 		},
 		data() {
 			return {
@@ -79,6 +62,7 @@
 				triggered: false,
 				_freshing: false,
 				selectedAll: false,
+				buttonType: 'expand' // 申请按钮宽 collapse': '80rpx', 'expand': '220rpx''
 			};
 		},
 		computed: {
@@ -126,19 +110,7 @@
 					'height': '80rpx',
 					'width': '200rpx'
 				}
-			},
-			// radioColor() {
-			// 	return this.selectedAll ? '#2272FF' : 'transparent'
-			// },
-			// buttonTexts() {
-			// 	return [['签收', '', '取消申请', '', ''], ['退件', '']]
-			// },
-			// buttonText() {
-			// 	return this.buttonTexts[this.curNow][this.currentIndex]
-			// },
-			// isReserve() { // 选中备件仓
-			// 	return this.curNow == 1 && this.currentIndex == 0
-			// }
+			},
 		},
 		onLoad(e) {
 			getApp().trackPage('我的配件页')
@@ -146,10 +118,6 @@
 			this._freshing = false;
 		},
 		methods: {
-			// sectionChange(index) {
-			// 	this.curNow = index;
-			// 	this.reloadPartsList()
-			// },
 			// tab栏切换
 			change(index) {
 				this.currentIndex = index;
@@ -186,51 +154,6 @@
 					this.loaded = true
 				});
 			},
-
-			// getReturnedParts(status) { // 返件列表
-			// 	this.pageNumber += 1
-			// 	this.loaded = false
-			// 	var param = {
-			// 		'pageSize': 20,
-			// 		'pageNumbr': 1,
-			// 		'items': true,
-			// 		'type': 'new'
-			// 	}
-			// 	this.$u.api.returnedParts(param).then((res) => {
-			// 		if (res.code == 200) {
-			// 			if (res.data.type != this.partsType) return
-			// 			this.triggered = false;
-			// 			this._freshing = false;
-			// 			if (this.pageNumber == 1) {
-			// 				this.partsList = []
-			// 			}
-			// 			if (res.data) {
-			// 				this.partsList.push(...res.data)
-			// 				this.loadStatus = res.data.length < this.pageSize ? 'nomore' : 'loadmore'
-			// 			}
-			// 		} else {
-			// 			console.log(res.message)
-			// 		}
-			// 		this.loaded = true
-			// 	});
-
-			// },
-			// getReserveList() { // 备件列表
-			// 	this.pageNumber += 1
-			// 	this.loaded = false
-			// 	this.$u.api.reserveList().then((res) => {
-			// 		if (res.code == 200) {
-			// 			if (res.data.type != this.partsType) return
-			// 			this.triggered = false
-			// 			this._freshing = false
-			// 			this.partsList = res.data || []
-			// 			this.loadStatus = 'nomore'
-			// 		} else {
-			// 			console.log(res.message);
-			// 		}
-			// 		this.loaded = true
-			// 	});
-			// },
 			handleOperate(info) {
 				// 调接口
 				// 修改info的status
@@ -246,11 +169,11 @@
 					url: 'pages/mine/warehouse/partsDetail'
 				})
 			},
-			// handleClickRecords() {
-			// 	uni.navigateTo({
-			// 		url: 'pages/mine/warehouse/records'
-			// 	})
-			// },
+			handleClickApply() {
+				uni.navigateTo({
+					url: 'pages/parts/application'
+				})
+			},
 			handleClickSearch() {
 				uni.navigateTo({
 					url: 'pages/mine/warehouse/searchParts'
@@ -276,6 +199,9 @@
 				if (this.loadStatus != 'loadmore') return
 				this.loadStatus == 'loading'
 				this.getUnstockedList(this.currentTab.status)
+			},
+			scroll() {
+				this.buttonType = 'collapse'
 			},
 		}
 	};
@@ -342,37 +268,11 @@
 				position: absolute;
 			}
 		}
-
-		// .tools-box {
-		// 	display: flex;
-		// 	flex-direction: row;
-		// 	justify-content: space-between;
-		// 	padding-bottom: 20rpx;
-
-		// 	.search-sub {
-		// 		height: 72rpx;
-		// 		width: 320rpx;
-		// 	}
-		// }
-		.bottom-view {
-			display: flex;
-			justify-content: space-around;
-			align-items: center;
-			.selected-all-view {
-				.selected-all-icon {
-					border: 2rpx solid #666666;
-				}
-			}
-			.right-view {
-				display: flex;
-				align-items: center;
-				.fst-btn {
-					
-				}
-				.scd-btn {
-					
-				}
-			}
+
+		.fixed-button {
+			position: fixed;
+			right: 20rpx;
+			bottom: 140rpx;
 			
 		}
 	}