feat: 商品中心多规格功能开发：样式开发，功能待完善

pages.json

@@ -329,7 +329,15 @@
             "navigationBarBackgroundColor": "#ffffff",
             "navigationBarTextStyle": "black"
           }
-        }
+		},
+		{
+			"path": "productCate/productCate",
+			"style": {
+				"navigationBarTitleText": "添加规格",
+				"navigationBarBackgroundColor": "#ffffff",
+				"navigationBarTextStyle": "black"
+			}
+		}
       ]
     },
     {

pages/merchantCenters/productCate/productCate.vue

@@ -0,0 +1,335 @@
+<template>
+	<view class="container">
+		<view class="main-title">
+			<view class="tit">
+				规格类型
+			</view>
+			<view class="cate-add" @click="addCate">
+				新增
+			</view>
+		</view>
+
+		<view class="cate-list">
+			<view class="cate-item" v-for="i in 10">
+				<view class="cate-header">
+					<view class="cate-name">
+						<image class="pen" src="@/static/images/edit-pen.png"></image>
+						<up-input class="cate-name-ipt" v-model="cateDemo.attrName" placeholder="请输入规格类型" inputAlign="left"
+							border="none" type="text">
+						</up-input>
+					</view>
+					<view class="delete-icon">
+						<image class="delete" src="/static/images/delete.png"></image>
+					</view>
+				</view>
+				
+				<view class="cate-child">
+					<view class="children">
+						<view class="children-item">
+							<view class="cname">
+								金条
+							</view>
+							<image class="close" src="@/static/images/close-icon.png" mode=""></image>
+						</view>
+					</view>
+					<view class="cate-child-add">
+						<image class="plus" src="@/static/images/plus-icon.png" mode=""></image>
+						<view class="add">
+							添加规格项
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="bottom-actions">
+			<view class="action-btn" @click="ensureClickHandle"> 确定 </view>
+		</view>
+		
+		<up-popup :show="showPopUp" :round="20" :duration="150" mode="bottom"  @close="showPopUp=false" @open="showPopUp=true">
+			<view class="pop-container">
+				<view class="pop-header">
+					规格类型
+					<image class="pop-close" src="/static/images/close-icon.png" mode="" @click="showPopUp=false"></image>
+				</view>
+				<view class="pop-ipt">
+					<textarea class="item-textarea" maxlength="100" v-model="cipt"
+						placeholder="请输入规格类型" />
+				</view>
+				<view class="action-btn" @click="ensureClickHandle"> 确定 </view>
+			</view>
+		</up-popup>
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref,
+		computed,
+		watch,
+		nextTick
+	} from 'vue';
+	import {
+		onShow,
+		onLoad
+	} from "@dcloudio/uni-app";
+	import {
+		productCategory,
+		productSave,
+		productUpdate,
+		templatesList,
+		productInfo
+	} from "@/api/merchant";
+	import CategorySelector from '@/components/CategorySelector';
+	import {
+		useAppStore
+	} from "@/stores/app";
+	import {
+		useImageUpload
+	} from "@/hooks/useImageUpload";
+	import {
+		useToast
+	} from "@/hooks/useToast";
+	const {
+		Toast
+	} = useToast();
+	const {
+		imageList,
+		afterRead,
+		deletePic,
+		uploadLoading
+	} = useImageUpload({
+		pid: 1,
+		model: "product",
+	});
+	const appStore = useAppStore();
+
+	const cateDemo = {
+		"id": 1586,
+		"productId": 729,
+		"attrName": "圈号",
+		"attrValues": "56mm,68mm,78mm",
+		"type": 0,
+		"isDel": false
+	}
+	const cateList = ref([{}])
+	
+	const showPopUp = ref(true)
+	
+	const cipt = ref('')
+	
+	
+	
+	const addCate = ()=>{
+		showPopUp.value = true;
+	}
+	
+	const ensureClickHandle = ()=>{
+		console.log("ensure")
+		showPopUp.value = false;
+	}
+</script>
+
+<style scoped lang="scss">
+	page {
+		background-color: #f9f7f0;
+		height: 100%;
+	}
+
+	.container {
+		padding: 16rpx;
+		background-color: #f9f7f0;
+		padding-bottom: calc(132rpx + constant(safe-area-inset-bottom));
+		padding-bottom: calc(132rpx + env(safe-area-inset-bottom));
+
+		.main-title {
+			width: 100%;
+			height: 48rpx;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			margin-bottom: 16rpx;
+
+			.tit {
+				font-size: 32rpx;
+				color: #333;
+				font-weight: bold;
+			}
+
+			.cate-add {
+				padding: 16rpx 0 16rpx 16rpx;
+				font-size: 28rpx;
+				color: #F8C008;
+				font-weight: bold;
+			}
+		}
+	}
+	
+	.cate-list{
+		
+		
+		.cate-item{
+			width: 100%;
+			padding: 20rpx;
+			background-color: #fff;
+			border-radius: 16rpx;
+			margin-bottom: 20rpx;
+			
+			.cate-header{
+				width: 100%;
+				height: 64rpx;
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				border-bottom: 1px solid #F1F3F8;
+				padding-bottom: 20rpx;
+				
+				.cate-name{
+					display: flex;
+					justify-content: flex-start;
+					align-items: center;
+					
+					.pen{
+						width: 32rpx;
+						height: 32rpx;
+						margin-right: 16rpx;
+					}
+					.cate-name-ipt{
+						height: 44rpx;
+						line-height: 44rpx;
+						font-size: 28rpx;
+						color:#333;
+					}
+				}
+				
+				.delete-icon{
+					padding: 10rpx 0 10rpx 10rpx;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					
+					.delete{
+						width: 32rpx;
+						height: 32rpx;
+					}
+				}
+			}
+			
+			.children{
+				width: 100%;
+				display: flex;
+				margin-top: 20rpx;
+				justify-content: flex-start;
+				align-items: center;
+				flex-wrap: wrap;
+			}
+			.children-item{
+				min-width: 120rpx;
+				padding: 8rpx 16rpx;
+				border-radius: 8rpx;
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				background-color: #F9F7F0;
+				
+				.cname{
+					font-size: 28rpx;
+					color:#333;
+					margin-right: 16rpx;
+					line-height: 44rpx;
+				}
+				.close{
+					width: 32rpx;
+					height: 32rpx;
+				}
+			}
+			
+			.cate-child-add{
+				padding: 8rpx 16rpx;
+				width: 220rpx;
+				background-color: rgba(248, 192, 8, 0.10);
+				border-radius: 8rpx;
+				display: flex;
+				justify-content: flex-start;
+				align-items: center;
+				margin-top: 20rpx;
+				.add{
+					font-size: 28rpx;
+					line-height: 44rpx;
+					color: #F8C008;
+				}
+				
+				.plus{
+					width: 32rpx;
+					height: 32rpx;
+					margin-right: 16rpx;
+				}
+			}
+		}
+	}
+	
+	.bottom-actions {
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		width: 100%;
+		z-index: 8;
+		background: #FFFFFF;
+		padding: 22rpx 32rpx calc(22rpx + constant(safe-area-inset-bottom));
+		padding: 22rpx 32rpx calc(22rpx + env(safe-area-inset-bottom));
+	
+		
+	}
+	
+	.action-btn {
+		font-weight: bold;
+		line-height: 88rpx;
+		text-align: center;
+		border-radius: 16rpx;
+		font-size: 32rpx;
+		font-weight: bold;
+		background: #F8C008;
+	}
+	.pop-container{
+		background-color: #fff;
+		border-radius: 40rpx 40rpx 0 0;
+		position: relative;
+		padding: 22rpx 32rpx calc(22rpx + constant(safe-area-inset-bottom));
+		padding: 22rpx 32rpx calc(22rpx + env(safe-area-inset-bottom));
+		
+		.pop-header{
+			height: 44rpx;
+			width: 100%;
+			text-align: center;
+			line-height: 48rpx;
+			font-size: 32rpx;
+			color:#333;
+			font-weight: bold;
+			.pop-close{
+				width: 32rpx;
+				height: 32rpx;
+				position: absolute;
+				right: 32rpx;
+				top: 32rpx;
+			}
+		}
+		
+		.pop-ipt{
+			width: 100%;
+			display: flex;
+			background-color: #F9F7F0;
+			border-radius: 16rpx;
+			margin-top: 32rpx;
+			margin-bottom: 32rpx;
+		}
+		
+	}
+	
+	.item-textarea {
+		width: 100rpx;
+		height: 200rpx;
+		padding: 16rpx;
+		flex: 1;
+		text-align: left;
+	}
+</style>