提交

src/pages/productLine/drag-and-drop-sort.vue → src/pages/productLine/components/drag-and-drop-sort.vue

@@ -19,7 +19,7 @@
 					@touchstart="handleTouchstart($event, index)"
 					@touchmove.prevent="handleTouchmove($event, index)"
 					@touchend="handleTouchend"
-					@tap="handleTap(index)"
+					@tap.prevent="handleTap(index)"
 					style="width: 100%; height: 100%;"
 				>
 					<!-- 自定义内容 -->
@@ -119,13 +119,13 @@ export default {
 			return tempArray;
 		},
 		handleTap(index) {
-			if (index == this.controlsArray.length - 1) return;
-			for (let s in this.controlsArray) {
+			let that = this;
+			if (index == that.controlsArray.length - 1) return;
+			for (let s in that.controlsArray) {
 				if (s === index) return;
-				this.controlsArray[s].show = false;
-				// console.log(s);
+				that.controlsArray[s].show = false;
 			}
-			this.controlsArray[index].show = true;
+			that.controlsArray[index].show = true;
 		},
 		/** 处理手指触摸后移动 */
 		handleTouchmove(event, index) {

src/pages/productLine/productLine.vue

 <template>
 	<view class="u-wrap">
 		<view class="u-menu-wrap">
-			<view style="position: fixed; left: 8rpx; top: 8%;">
+			<view style="position: fixed; left: 8rpx; top: 5%;">
 				<drag-and-drop-sort
 					style="display: flex; justify-content: center;"
 					:controlsList="lineList"
-					:controlsSize="{ width: 120, height: 40 }"
+					:controlsSize="{ width: 180, height: 40 }"
 				>
 					<template #default="scope">
 						<u-section
@@ -15,6 +15,7 @@
 							:show-line="scope.row.show"
 							:line-color="scope.row.show ? '#0000f0' : ''"
 							style="margin-left: 20rpx;"
+							@longPress="handleLongPress"
 						></u-section>
 						<view v-else class="add">
 							<u-icon name="plus" color="#c6c6c6" size="50" @tap="addTabs"></u-icon>
@@ -36,6 +37,14 @@
 				</view>
 			</view>
 		</view>
+		<uni-goods-nav
+			class="goods-nav"
+			:fill="true"
+			:options="options"
+			:buttonGroup="buttonGroup"
+			@click="onClick"
+			@buttonClick="buttonClick"
+		/>
 	</view>
 	<category-popup
 		ref="categoryRef"
@@ -49,7 +58,7 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 import config from '@/utils/config';
-import dragAndDropSort from './drag-and-drop-sort.vue';
+import dragAndDropSort from './components/drag-and-drop-sort.vue';
 import categoryPopup from './components/categoryPopup.vue';
 import goodsSku from '@/pages/goods/goodsSku';
 import { indexDetails } from '@/api/index';
@@ -60,12 +69,46 @@ let showPopup = ref(false as Boolean);
 let categoryRef = ref();
 let goodsSkuRef = ref();
 let detailData = ref();
+let star = ref('star-filled');
+
+let options = [
+	{
+		icon: star.value ? 'star-filled' : 'star',
+		text: '收藏',
+	},
+];
+let buttonGroup = [
+	{
+		text: '加入购物车',
+		backgroundColor: '#ff0000',
+		color: '#fff',
+	},
+	{
+		text: '立即购买',
+		backgroundColor: '#ffa200',
+		color: '#fff',
+	},
+];
 
 let addTabs = () => {
 	showPopup.value = true;
 	categoryRef.value.initIndex();
 };
 
+let onClick = (e: any) => {
+	uni.showToast({
+		title: `点击${e.content.text}`,
+		icon: 'none',
+	});
+};
+let buttonClick = (e: any) => {
+	console.log(e);
+	// this.options[2].info++
+};
+
+// 长按选择操作
+let handleLongPress = () => {};
+
 // 添加产品线产品
 let initCategory = (data: any) => {
 	initDetails(data.id);
@@ -126,7 +169,7 @@ const initDetails = (id: number) => {
 }
 .add {
 	position: absolute;
-	width: 120px;
+	width: 180px;
 	height: 40px;
 	background-color: #fff;
 	z-index: 0;
@@ -135,7 +178,7 @@ const initDetails = (id: number) => {
 	margin-top: 20rpx;
 }
 .left-cates {
-	width: 124px;
+	width: 360rpx;
 }
 .right-cates {
 	flex: 1;
@@ -165,4 +208,10 @@ const initDetails = (id: number) => {
 	overflow: hidden;
 	justify-content: space-between;
 }
+.goods-nav {
+	width: 100%;
+	position: fixed;
+	bottom: 50px;
+	z-index: 99;
+}
 </style>