完成产品线页面收藏功能

src/api/productLine.ts

@@ -4,4 +4,8 @@ import { request } from '@/utils/request'
 export const addProductLineCart = (data: any) => request('/wx/productLine/cart', 'POST', data)
 
 // 产品线收藏
-export const productLineCollect = (data: any) => request('/wx/productLine/collect', 'POST', data)
\ No newline at end of file
+export const productLineCollect = (data: any) => request('/wx/productLine/collect', 'POST', data)
+
+// 产品线取消收藏或重新收藏
+export const delProductLineCollect = (data: any) => request('/wx/collect/addordelete', 'POST', data)
+

src/pages/productLine/components/categoryPopup.vue

@@ -93,7 +93,7 @@ const search = (val: any) => {
 	// uni.navigateTo({ url: '../index/search?keyword=' + val.value });
 };
 
-// 添加产品线产品
+// 开始添加产品线产品
 let cateGoryGoods = (data: any) => {
 	emits('categoryData', data);
 	handleClose();
@@ -139,7 +139,6 @@ let initIndex = () => {
 			if (listQuery.value.categoryId === 0)
 				listQuery.value.categoryId = categoryList.value[0].id;
 			initGoodsList(listQuery.value);
-			console.log(categoryList.value, '分类数据');
 		}
 	});
 };

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

@@ -108,15 +108,17 @@ export default {
 		};
 	},
 	mounted() {
-		// 获取系统信息
-		this.systemInfo = uni.getSystemInfoSync();
-		this.containerSize.height = this.systemInfo.windowHeight * 2;
-		// 获取控件列表
-		this.controlsArray = this.controlsList;
-		// 初始化控件的位置
-		this.controlsPositionArray = this.initControlsPosition();
+		this.init();
 	},
 	methods: {
+		init() {
+			// 获取系统信息
+			this.systemInfo = uni.getSystemInfoSync();
+			// 获取控件列表
+			this.controlsArray = this.controlsList;
+			// 初始化控件的位置
+			this.controlsPositionArray = this.initControlsPosition();
+		},
 		/** 初始化各个控件的位置 */
 		initControlsPosition() {
 			// 用于返回出去的新数组

src/pages/productLine/components/setTitle.vue

+<template>
+	<u-popup v-model="showTitle" mode="center" height="22%" width="80%">
+		<view style="padding: 30rpx; height: 100%; margin-top: 0%;">
+			<view style="font-size: 34rpx; width: 100%; text-align: center; margin-bottom: 20rpx;">
+				设置产品线名称
+			</view>
+			<u-form label-width="110">
+				<u-form-item label="名称:">
+					<u-input
+						v-model="title"
+						:type="type"
+						:border="true"
+						clearable
+						placeholder="请输入名称"
+					/>
+				</u-form-item>
+			</u-form>
+			<u-button :maxlength="11" type="error" style="margin-top: 8%;" @tap="saveTitle">
+				保存
+			</u-button>
+		</view>
+	</u-popup>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useStore } from '@/store/useStore';
+
+let store = useStore();
+let showTitle = ref(false);
+let title = ref(store.title);
+let type = ref('text');
+
+let saveTitle = () => {
+	if (title.value) {
+		store.$patch({
+			title: title.value,
+		});
+		uni.showToast({
+			title: '设置成功',
+			icon: 'none',
+		});
+		showTitle.value = false;
+	} else {
+		uni.showToast({
+			title: '设置失败',
+			icon: 'none',
+		});
+	}
+};
+
+defineExpose({
+	showTitle,
+	title
+});
+</script>
+
+<style></style>

src/pages/productLine/productLine.vue

@@ -3,13 +3,14 @@
 		<view class="u-menu-wrap">
 			<view style="position: fixed; left: 8rpx; top: 5%;">
 				<drag-and-drop-sort
+					ref="dragRef"
 					style="display: flex; justify-content: center;"
 					:controlsList="lineList"
 					:controlsSize="{ width: 180, height: 40 }"
 				>
 					<template #default="scope">
 						<u-section
-							v-if="lineList[scope.index].name !== undefined"
+							v-if="lineList[scope.index]?.status === 1"
 							:title="scope.row.name"
 							:right="false"
 							:show-line="scope.row.show"
@@ -54,36 +55,47 @@
 		@categoryData="initCategory"
 	/>
 	<!-- 产品线sku -->
-	<goodsSku ref="goodsSkuRef" @add-product="addProduct"></goodsSku>
+	<goods-sku ref="goodsSkuRef" @add-product="addProduct" />
+
+	<!-- 设置标题 -->
+	<set-title ref="setTitleRef" />
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue';
+import { indexDetails } from '@/api/index';
+import { useStore } from '@/store/useStore';
+import { addProductLineCart, productLineCollect, delProductLineCollect } from '@/api/productLine';
 import config from '@/utils/config';
 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';
-import { useStore } from '@/store/useStore';
+import setTitle from './components/setTitle.vue';
 
 let store = useStore();
-console.log(store.lineData);
 
 let baseUrl = config.baseUrl;
-let lineList = ref(store.lineData); //右侧tabber数据
+let lineList: any = ref(store.lineData); //右侧tabber数据
 let showPopup = ref(false as Boolean);
 let categoryRef = ref();
 let goodsSkuRef = ref();
+let setTitleRef = ref();
+let dragRef = ref();
 let detailData = ref();
-let star = ref('star-filled');
+let star = ref(store.star);
+let collectData = ref();
 
-let options = [
+let options = ref([
 	{
 		icon: star.value ? 'star-filled' : 'star',
 		text: '收藏',
 	},
-];
-let buttonGroup = [
+	{
+		icon: 'plusempty',
+		text: '设置名称',
+	},
+]);
+let buttonGroup = ref([
 	{
 		text: '加入购物车',
 		backgroundColor: '#ff0000',
@@ -94,25 +106,116 @@ let buttonGroup = [
 		backgroundColor: '#ffa200',
 		color: '#fff',
 	},
-];
+]);
 
 let addTabs = () => {
 	showPopup.value = true;
 	categoryRef.value.initIndex();
 };
 
+// 商品加入购物车等左侧事件
 let onClick = (e: any) => {
-	uni.showToast({
-		title: `点击${e.content.text}`,
-		icon: 'none',
-	});
+	if (e.index === 1) {
+		setTitleRef.value.showTitle = true;
+	} else {
+		// 收藏
+		if (!star.value) {
+			if (JSON.stringify(store.collectData) === '{}') {
+				complete().then((data: any) => {
+					productLineCollect(data).then((res: any) => {
+						if (res.data.code === 200) {
+							store.$patch({
+								star: true,
+								collectData: {
+									type: 2,
+									valueId: res.data.data.valueId,
+								},
+							});
+							star.value = true;
+							options.value[0].icon = 'star-filled';
+						}
+					});
+				});
+			} else {
+				console.log(star.value);
+				delProductLineCollect(store.collectData).then((res: any) => {
+					if (res.data.code === 200) {
+						store.$patch({
+							star: true,
+						});
+						star.value = true;
+						options.value[0].icon = 'star-filled';
+					}
+				});
+			}
+		} else {
+			delProductLineCollect(store.collectData).then((res: any) => {
+				if (res.data.code === 200) {
+					store.$patch({
+						star: false,
+					});
+					star.value = false;
+					options.value[0].icon = 'star';
+				}
+			});
+		}
+	}
 };
 
+// 商品加入购物车等右侧侧事件
 let buttonClick = (e: any) => {
-	console.log(e);
-	// this.options[2].info++
+	switch (e.index) {
+		case 0:
+			addCart();
+			break;
+		case 1:
+			console.log('下单', JSON.stringify(store.lineData));
+			break;
+		default:
+			break;
+	}
 };
 
+// 加入购物车
+let addCart = () => {
+	complete().then((data: any) => {
+		addProductLineCart(data).then((res: any) => {
+			if (res.data.code === 200) {
+				uni.showToast({
+					title: '加入购物车成功',
+					icon: 'none',
+				});
+				reload();
+			}
+		});
+	});
+};
+
+// 立即购买
+let buyNow = () => {};
+
+// 点击 收藏，加入购物车，立即购买 前逻辑
+let complete = () => {
+	return new Promise((resolve, reject) => {
+		if (store.lineData.length === 1)
+			return uni.showToast({
+				title: '请先选择产品',
+				icon: 'none',
+			});
+		if (!store.title)
+			return uni.showToast({
+				title: '请先设置标题',
+				icon: 'none',
+			});
+		let lineData: any = [...store.lineData]; // 拷贝
+		lineData.length = lineData.length - 1; // 删除最后一个数据
+		let data = {
+			item: lineData,
+			title: store.title,
+		};
+		resolve(data);
+	});
+};
 
 // 添加产品线产品
 let initCategory = (data: any) => {
@@ -132,11 +235,11 @@ let addProduct = (data: any, productId: number) => {
 		number: data.buy_num,
 		productId: productId,
 		show: false,
+		status: 1,
 	});
 	store.$patch({
 		lineData: lineList.value,
 	});
-	console.log(store.lineData);
 	goodsSkuRef.value.skuKey = false;
 };
 
@@ -144,7 +247,7 @@ let addProduct = (data: any, productId: number) => {
 let handleClose = (val: Boolean) => (showPopup.value = val);
 
 // 根据id获取商品信息
-const initDetails = (id: number) => {
+let initDetails = (id: number) => {
 	indexDetails({
 		id,
 	}).then((res: any) => {
@@ -154,10 +257,20 @@ const initDetails = (id: number) => {
 			goodsSkuRef.value.init(detailData.value, id);
 			goodsSkuRef.value.skuKey = true;
 			goodsSkuRef.value.skuMode = 5;
-			console.log(res.data.data, '商品详情数据');
+			// console.log(res.data.data, '商品详情数据');
 		}
 	});
 };
+
+// 重置页面数据
+let reload = () => {
+	let pages = getCurrentPages(); //获取所有页面的数组对象
+	let currPage: any = pages[pages.length - 1]; //当前页面
+	store.$reset();
+	uni.reLaunch({
+		url: '/' + currPage.route,
+	});
+};
 </script>
 
 <style lang="scss" scoped>

src/store/useStore.ts

 import { defineStore, createPinia } from 'pinia'
 
+// 产品线数据管理
 export let useStore = defineStore('productLine', {
 	state: () => {
 		return {
-			lineData: [{}]
+			lineData: [{show: false, status: 0}],
+			title: '',
+			star: false,
+			collectData: {} // 收藏返回数据
 		}
 	}
 })