Przeglądaj źródła

fix: 修改bug未上架列表点击编辑进入商品特色分类未显示

wuguojie 2 miesięcy temu
rodzic
commit
5ae6de5193
1 zmienionych plików z 391 dodań i 427 usunięć
  1. 391 427
      pages/groupMeal/goods/form-step1.vue

+ 391 - 427
pages/groupMeal/goods/form-step1.vue

@@ -1,87 +1,60 @@
 <template>
 	<view class="page-container">
 		<u-navbar title="新建团餐" :autoBack="true" :placeholder="true"></u-navbar>
-		
+
 		<view class="form-card">
 			<view class="section-title">基础信息</view>
-			<u-form :model="form" ref="uForm" :rules="rules" 
-				labelPosition="left" labelWidth="auto"
-				:error-type="['toast', 'border-bottom']"
-			> 
+			<u-form :model="form" ref="uForm" :rules="rules" labelPosition="left" labelWidth="auto"
+				:error-type="['toast', 'border-bottom']">
 				<u-form-item prop="category" label="商品分类" required borderBottom @click="show = true">
-					<u-input v-model="form.categoryName" class="form-input" disabled placeholder="去设置" height="41" inputAlign="right"></u-input>
+					<u-input v-model="form.categoryName" class="form-input" disabled placeholder="去设置" height="41"
+						inputAlign="right"></u-input>
 					<u-icon slot="right" name="arrow-right" color="#C7C6CA"></u-icon>
 				</u-form-item>
-				
+
 				<u-form-item prop="name" label="商品名称" required borderBottom>
 					<u-input v-model="form.name" placeholder="请输入商品名称" height="41" inputAlign="right"></u-input>
 				</u-form-item>
-				
+
 				<u-form-item prop="specialCategoryId" label="特色分类" required borderBottom @click="showSpecial = true">
-					<u-input v-model="form.specialCategoryName" class="form-input" disabled placeholder="去设置" height="41" inputAlign="right"></u-input>
+					<u-input v-model="form.specialCategoryName" class="form-input" disabled placeholder="去设置"
+						height="41" inputAlign="right"></u-input>
 					<u-icon slot="right" name="arrow-right" color="#C7C6CA"></u-icon>
 				</u-form-item>
-				
+
 				<u-form-item prop="productImage" label="商品封面图" required labelPosition="top">
 					<view class="upload-content">
 						<view class="upload-tip">支持jpg、png格式,建议尺寸为750px*750px,上传1-4张</view>
-						<u-upload
-							:action="uploadAction"
-							:file-list="fileList.cover"
-							:form-data="uploadFormData"
-							:max-count="4"
-							:multiple="true"
-							width="140"
-							height="140"
-							preview-full-image
-							@on-success="onCoverSuccess"
-							@on-remove="onCoverRemove"
-						/>
+						<u-upload :action="uploadAction" :file-list="fileList.cover" :form-data="uploadFormData"
+							:max-count="4" :multiple="true" width="140" height="140" preview-full-image
+							@on-success="onCoverSuccess" @on-remove="onCoverRemove" />
 					</view>
 				</u-form-item>
 
 				<u-form-item prop="detailImages" label="商品详情图" required borderBottom labelPosition="top">
 					<view class="upload-content">
 						<view class="upload-tip">支持jpg、png格式,最多20张</view>
-						<u-upload
-							:action="uploadAction"
-							:file-list="fileList.detail"
-							:form-data="uploadFormData"
-							:max-count="20"
-							:multiple="true"
-							width="140"
-							height="140"
-							preview-full-image
-							@on-success="onDetailSuccess"
-							@on-remove="onDetailRemove"
-						/>
+						<u-upload :action="uploadAction" :file-list="fileList.detail" :form-data="uploadFormData"
+							:max-count="20" :multiple="true" width="140" height="140" preview-full-image
+							@on-success="onDetailSuccess" @on-remove="onDetailRemove" />
 					</view>
 				</u-form-item>
 
 				<u-form-item prop="price" label="团餐价" required borderBottom>
-					<u-input type="digit" height="41" :clearable="false" 
-						inputAlign="right"
-						placeholder="请输入团餐价" 
-						v-model.number="form.price"
-						@input="onInput($event, 'price')"
-					></u-input>
+					<u-input type="digit" height="41" :clearable="false" inputAlign="right" placeholder="请输入团餐价"
+						v-model.number="form.price" @input="onInput($event, 'price')"></u-input>
 					<text slot="right" class="input-suffix">元</text>
 				</u-form-item>
-				
+
 				<u-form-item prop="sellingPrice" label="售价" required :borderBottom="true">
-					<u-input type="digit" height="41" :clearable="false" 
-					 	inputAlign="right" placeholder="请输入商品售价"
-						v-model.number="form.sellingPrice"
-						@input="onInput($event, 'sellingPrice')"
-					></u-input>
+					<u-input type="digit" height="41" :clearable="false" inputAlign="right" placeholder="请输入商品售价"
+						v-model.number="form.sellingPrice" @input="onInput($event, 'sellingPrice')"></u-input>
 					<text slot="right" class="input-suffix">元</text>
 				</u-form-item>
-				
+
 				<u-form-item prop="dailyStock" label="库存" required :borderBottom="true">
-					<u-input type="number" height="41" :clearable="false" 
-					 	inputAlign="right" placeholder="请输入每日库存"
-						v-model="form.dailyStock"
-					></u-input>
+					<u-input type="number" height="41" :clearable="false" inputAlign="right" placeholder="请输入每日库存"
+						v-model="form.dailyStock"></u-input>
 					<text slot="right" class="input-suffix">份</text>
 				</u-form-item>
 				<view class="tips">每日库存最大量的设置,当天售完后关闭该团餐</view>
@@ -99,19 +72,21 @@
 </template>
 
 <script>
-import Upload from '@/components/upload/index.vue';
-import configService from '@/common/service/config.service';
-export default {
-	components: {
-		Upload,
-	},
-	data() {
+	import Upload from '@/components/upload/index.vue';
+	import configService from '@/common/service/config.service';
+	export default {
+		components: {
+			Upload,
+		},
+		data() {
 			return {
 				show: false,
 				showSpecial: false,
 				uploadAction: configService.apiUrl + '/sys/common/upload',
 				imageHttp: configService.apiUrl + '/',
-			uploadFormData: { biz: 'temp' },
+				uploadFormData: {
+					biz: 'temp'
+				},
 				form: {
 					name: '',
 					category: '',
@@ -122,426 +97,415 @@ export default {
 					detailImages: '',
 					price: '',
 					sellingPrice: '',
-					dailyStock:null,
-					saleDays:''
+					dailyStock: null,
+					saleDays: ''
 				},
-			categoryList:[],
-			query: {},
-			fileList: {
-				cover: [],
-				detail: [],
-			},
-			actionSheetList: [
-				{
-					text: '早餐',
-					value: '1'
-				},
-				{
-					text: '午餐',
-					value: '2'
+				categoryList: [],
+				query: {},
+				fileList: {
+					cover: [],
+					detail: [],
 				},
-				{
-					text: '晚餐',
-					value: '3'
-				}
-			],
-			rules: {
-				name: [
-					{
+				actionSheetList: [],
+				rules: {
+					name: [{
 						required: true,
 						message: '请输入名称',
 						trigger: ['blur', 'change']
-					}
-				],
-				category: [
-					{
+					}],
+					category: [{
 						required: true,
 						message: '请选择商品分类',
 						trigger: ['blur', 'change']
-					}
-				],
-				specialCategoryId: [
-					{
+					}],
+					specialCategoryId: [{
 						required: true,
 						message: '请选择特色分类',
 						trigger: ['blur', 'change']
-					}
-				],
-				price: [
-					{
-						required: true,
-						type: 'number',
-						message: '请输入团餐价格',
-						trigger: ['blur', 'change']
-					},
-					{
-						asyncValidator: (rule, value, callback) => {
-							if (this.form.sellingPrice && value > this.form.sellingPrice) {
-								callback(new Error('团餐价格不能大于商品售价'));
-							} else {
-								callback();
-							}
+					}],
+					price: [{
+							required: true,
+							type: 'number',
+							message: '请输入团餐价格',
+							trigger: ['blur', 'change']
 						},
-						trigger: ['blur', 'change']
-					},
-				],
-				sellingPrice: [
-					{
-						required: true,
-						type: 'number',
-						message: '请输入商品售价',
-						trigger: ['blur', 'change']
-					},
-					{
-						asyncValidator: (rule, value, callback) => {
-							if (this.form.price && value < this.form.price) {
-								callback(new Error('商品售价不能小于团餐价格'));
-							} else {
-								callback();
-							}
+						{
+							asyncValidator: (rule, value, callback) => {
+								if (this.form.sellingPrice && value > this.form.sellingPrice) {
+									callback(new Error('团餐价格不能大于商品售价'));
+								} else {
+									callback();
+								}
+							},
+							trigger: ['blur', 'change']
 						},
-						trigger: ['blur', 'change']
-					},
-				],
-				productImage: [
-					{
+					],
+					sellingPrice: [{
+							required: true,
+							type: 'number',
+							message: '请输入商品售价',
+							trigger: ['blur', 'change']
+						},
+						{
+							asyncValidator: (rule, value, callback) => {
+								if (this.form.price && value < this.form.price) {
+									callback(new Error('商品售价不能小于团餐价格'));
+								} else {
+									callback();
+								}
+							},
+							trigger: ['blur', 'change']
+						},
+					],
+					productImage: [{
 						required: true,
 						message: '请上传商品封面图',
 						trigger: ['blur', 'change']
-					}
-				],
-				detailImages: [
-					{
+					}],
+					detailImages: [{
 						required: true,
 						message: '请上传商品详情图片',
 						trigger: ['blur', 'change']
-					}
-				],
-				dailyStock:[
-					{
+					}],
+					dailyStock: [{
 						required: true,
 						type: 'number',
 						message: '请填写库存',
 						trigger: ['blur', 'change']
-					}
-				]
-			}
-		};
-	},
-	async onLoad(query) {
-			
-		if (query.id) {
-			this.query = query;
-			await this.getData();
-		}
-		// 清除
-		uni.removeStorageSync('gm_goods');
-		// 获取餐品分类
-		this.getClassData();
-		
-	},
-	onShow() {
-		this.getCategoryList()
-	},
-	onReady() {
-		this.$refs.uForm.setRules(this.rules);
-	},
-	methods: {
-		onCoverSuccess(res, index, lists) {
-			this.fileList.cover = lists;
-			this.processImageList(lists, 'productImage');
-		},
-		onCoverRemove(index, lists) {
-			this.fileList.cover = lists;
-			this.processImageList(lists, 'productImage');
+					}]
+				}
+			};
 		},
-		onDetailSuccess(res, index, lists) {
-			this.fileList.detail = lists;
-			this.processImageList(lists, 'detailImages');
+		onLoad(query) {
+			if (query.id) {
+				this.query = query;
+				this.getData();
+			}
+			// 清除
+			uni.removeStorageSync('gm_goods');
+
 		},
-		onDetailRemove(index, lists) {
-			this.fileList.detail = lists;
-			this.processImageList(lists, 'detailImages');
+		onShow() {
+			// 获取特色分类
+			this.getCategoryList()
+			// 获取餐品分类
+			this.getClassData();
 		},
-		processImageList(lists, formKey) {
-			const urls = lists.map(item => {
-				if (item.response && item.response.message) {
-					return this.imageHttp + item.response.message;
-				}
-				if (item.url) {
-					return item.url;
-				}
-				return '';
-			}).filter(Boolean);
-			this.form[formKey] = urls.join(',');
-			console.log(this.form)
+		onReady() {
+			this.$refs.uForm.setRules(this.rules);
 		},
-		//获取特色分类
-		getCategoryList(){
-			this.$http.get('/groupmeal/gmSpecialCategory/listAll').then(res => {
-				console.log(res)
-				if (res.data.code === 200 && res.data.result) {
-					this.categoryList = res.data.result.map(item => {
-						return {
-							text: item.categoryName,
-							value: item.id 
-						}
-					})
-				}
-			})
-		},
-		// 编辑数据
-		getData() {
-			this.$http.get('/groupmeal/gmCustomerPackage/mer/queryById', { params: { id: this.query.id } }).then(res => {
-				if (res.data.code === 200) {
-					let data = res.data.result;
-					// 查找商品分类名称
-					const categoryItem = this.actionSheetList.find(item => item.value == data.category);
-					// 查找特色分类名称
-					const specialCategoryItem = this.categoryList.find(item => item.value == data.specialCategoryId);
-					console.log(specialCategoryItem)
-					this.form = {
-						...data,
-						categoryName: categoryItem ? categoryItem.text : '',
-						specialCategoryId: data.specialCategoryId+'',
-						specialCategoryName: specialCategoryItem ? specialCategoryItem.text : ''
-					};
-					this.fileList = {
-						cover: data.productImage.split(',').map(item => {
+		methods: {
+			onCoverSuccess(res, index, lists) {
+				this.fileList.cover = lists;
+				this.processImageList(lists, 'productImage');
+			},
+			onCoverRemove(index, lists) {
+				this.fileList.cover = lists;
+				this.processImageList(lists, 'productImage');
+			},
+			onDetailSuccess(res, index, lists) {
+				this.fileList.detail = lists;
+				this.processImageList(lists, 'detailImages');
+			},
+			onDetailRemove(index, lists) {
+				this.fileList.detail = lists;
+				this.processImageList(lists, 'detailImages');
+			},
+			processImageList(lists, formKey) {
+				const urls = lists.map(item => {
+					if (item.response && item.response.message) {
+						return this.imageHttp + item.response.message;
+					}
+					if (item.url) {
+						return item.url;
+					}
+					return '';
+				}).filter(Boolean);
+				this.form[formKey] = urls.join(',');
+				console.log(this.form)
+			},
+			// 餐品分类
+			getClassData() {
+				this.$http.get('/groupmeal/gmMerchantPackage/getGroupMealCategory', {}).then(res => {
+					if (res.data.code === 200) {
+						this.actionSheetList = res.data.result.map(item => {
 							return {
-								url: item
+								text: item.name,
+								value: item.code
 							}
-						}),
-						detail: data.detailImages.split(',').map(item => {
+						})
+					}
+				});
+			},
+			//获取特色分类
+			getCategoryList() {
+				this.$http.get('/groupmeal/gmSpecialCategory/listAll').then(res => {
+					console.log(res)
+					if (res.data.code === 200) {
+						this.categoryList = res.data.result.map(item => {
 							return {
-								url: item
+								text: item.categoryName,
+								value: item.id 
 							}
-						}),
-					};
-				}
-			});
-		},
-		// 餐品分类
-		getClassData() {
-			this.$http.get('/groupmeal/gmMerchantPackage/getGroupMealCategory', {}).then(res => {
-				if (res.data.code === 200) {
-					this.actionSheetList = res.data.result.map(item => {
-						return {
-							text: item.name,
-							value: item.code
-						}
-					})
-				}
-			});
-		},
-		// 商品分类选择回调
-		actionSheetCallback(e) {
-			this.form.category = e.value;
-			this.form.categoryName = e.text;
-		},
-		// 特色分类选择回调
-		specialCategoryCallback(e) {
-			console.log(e)
-			this.form.specialCategoryId = e.value;
-			this.form.specialCategoryName = e.text;
-		},
-		// 价格数值处理
-		onInput(value, key) {
-			// 过滤所有非数字和非小数点的字符
-			let filtered = value.replace(/[^\d.]/g, '');
-			
-			// 处理多个小数点(只保留第一个)
-			filtered = filtered.replace(/^\./g, ''); // 移除开头的小数点(避免 ".123" 情况)
-			filtered = filtered.replace(/\.{2,}/g, '.'); // 多个小数点只保留第一个
-			
-			// 分割整数和小数部分,限制小数最多两位
-			const parts = filtered.split('.');
-			if (parts.length > 1) {
-				// 小数部分只保留前两位
-				filtered = parts[0] + '.' + (parts[1].slice(0, 2) || '');
-			}
-			
-			// 处理特殊情况(如 "000" 转为 "0",但价格允许 "0.00")
-			// 若需要严格限制整数部分首位不为0(非必须,根据业务决定):
-			// if (parts.length === 1 && filtered.length > 1 && filtered[0] === '0') {
-			//   filtered = filtered.replace(/^0+/, '0');
-			// }
-			
-			// 更新绑定值
-			this.$nextTick(() => {
-				this.form[key] = !filtered ? filtered : filtered - 0;
-			});
-		},
-		// 图片处理
-		onUpload(event, type) {
-			this.fileList[type] = event;
-			this.form[type == 'cover' ? 'productImage' : 'detailImages'] = this.fileList[type].map(f => f.url).join();
-		},
-		// 下一步
-		goNextStep() {
-			// 表单校验
-			this.$refs.uForm.validate(valid => {
-				if (valid) {
-					const {
-						categoryName,
-						specialCategoryName,
-						saleDays,
-						dayCodes,
-						gmMerchantPackageDetails,
-						...form
-					} = this.form;
-					const goods = uni.getStorageSync('gm_goods') || {};
-					const nextGoods = {
-						...goods,
-						...form
-					};
-					if (!Object.prototype.hasOwnProperty.call(nextGoods, 'saleDays') && saleDays) {
-						nextGoods.saleDays = saleDays;
+						})
+					}
+				})
+			},
+			// 编辑数据
+			getData() {
+				this.$http.get('/groupmeal/gmCustomerPackage/mer/queryById', {
+					params: {
+						id: this.query.id
 					}
-					if (
-						!Object.prototype.hasOwnProperty.call(nextGoods, 'gmMerchantPackageDetails') &&
-						gmMerchantPackageDetails
-					) {
-						nextGoods.gmMerchantPackageDetails = gmMerchantPackageDetails;
+				}).then(res => {
+					if (res.data.code === 200) {
+						let data = res.data.result;
+						this.$nextTick(() => {
+							// 查找商品分类名称
+							const categoryItem = this.actionSheetList.find(item => item.value == data.category);
+							// 查找特色分类名称
+							const specialCategoryItem = this.categoryList.find(item => item.value == data
+								.specialCategoryId);
+							console.log('111111', categoryItem)
+							console.log('222222', specialCategoryItem)
+							this.form = {
+								...data,
+								categoryName: categoryItem ? categoryItem.text : '',
+								specialCategoryId: data.specialCategoryId + '',
+								specialCategoryName: specialCategoryItem ? specialCategoryItem.text : ''
+							};
+							console.log(123123, this.form)
+							this.fileList = {
+								cover: data.productImage.split(',').map(item => {
+									return {
+										url: item
+									}
+								}),
+								detail: data.detailImages.split(',').map(item => {
+									return {
+										url: item
+									}
+								}),
+							};
+						})
 					}
-					uni.setStorageSync('gm_goods', nextGoods);
-					uni.navigateTo({
-						url: '/pages/groupMeal/goods/form-day'
-					});
-				} else {
-					console.log('验证失败');
+				});
+			},
+			// 商品分类选择回调
+			actionSheetCallback(e) {
+				this.form.category = e.value;
+				this.form.categoryName = e.text;
+			},
+			// 特色分类选择回调
+			specialCategoryCallback(e) {
+				console.log(e)
+				this.form.specialCategoryId = e.value;
+				this.form.specialCategoryName = e.text;
+			},
+			// 价格数值处理
+			onInput(value, key) {
+				// 过滤所有非数字和非小数点的字符
+				let filtered = value.replace(/[^\d.]/g, '');
+
+				// 处理多个小数点(只保留第一个)
+				filtered = filtered.replace(/^\./g, ''); // 移除开头的小数点(避免 ".123" 情况)
+				filtered = filtered.replace(/\.{2,}/g, '.'); // 多个小数点只保留第一个
+
+				// 分割整数和小数部分,限制小数最多两位
+				const parts = filtered.split('.');
+				if (parts.length > 1) {
+					// 小数部分只保留前两位
+					filtered = parts[0] + '.' + (parts[1].slice(0, 2) || '');
 				}
-			});
+
+				// 处理特殊情况(如 "000" 转为 "0",但价格允许 "0.00")
+				// 若需要严格限制整数部分首位不为0(非必须,根据业务决定):
+				// if (parts.length === 1 && filtered.length > 1 && filtered[0] === '0') {
+				//   filtered = filtered.replace(/^0+/, '0');
+				// }
+
+				// 更新绑定值
+				this.$nextTick(() => {
+					this.form[key] = !filtered ? filtered : filtered - 0;
+				});
+			},
+			// 图片处理
+			onUpload(event, type) {
+				this.fileList[type] = event;
+				this.form[type == 'cover' ? 'productImage' : 'detailImages'] = this.fileList[type].map(f => f.url).join();
+			},
+			// 下一步
+			goNextStep() {
+				// 表单校验
+				this.$refs.uForm.validate(valid => {
+					if (valid) {
+						const {
+							categoryName,
+							specialCategoryName,
+							saleDays,
+							dayCodes,
+							gmMerchantPackageDetails,
+							...form
+						} = this.form;
+						const goods = uni.getStorageSync('gm_goods') || {};
+						const nextGoods = {
+							...goods,
+							...form
+						};
+						if (!Object.prototype.hasOwnProperty.call(nextGoods, 'saleDays') && saleDays) {
+							nextGoods.saleDays = saleDays;
+						}
+						if (
+							!Object.prototype.hasOwnProperty.call(nextGoods, 'gmMerchantPackageDetails') &&
+							gmMerchantPackageDetails
+						) {
+							nextGoods.gmMerchantPackageDetails = gmMerchantPackageDetails;
+						}
+						uni.setStorageSync('gm_goods', nextGoods);
+						uni.navigateTo({
+							url: '/pages/groupMeal/goods/form-day'
+						});
+					} else {
+						console.log('验证失败');
+					}
+				});
+			}
 		}
-	}
-};
+	};
 </script>
 
 <style lang="scss" scoped>
-$uni-text-color: #303133;
-$uni-color-primary: #2979ff;
-
-.page-container {
-	min-height: 100vh;
-	background-color: #f5f5f5;
-	.section-title {
-		font-weight: 500;
-		font-size: 30rpx;
-		color: #333333;
-		margin-bottom: 32rpx;
-	}
-}
-
-.form-card {
-	margin: 24rpx;
-	padding: 16rpx 16rpx;
-	background-color: #fff;
-	border-radius: 16rpx;
-
-	::v-deep .u-form-item {
-		padding: 16rpx 0;
-		line-height: 1;
-		.u-form-item--left__content {
-			flex: none;
-			.u-form-item--left__content__label {
-				font-weight: 600;
-			}
-			.u-form-item--left__content--required {
-				color: #fa3534; 
-				left: auto;
-				right: 0;
-			}
+	$uni-text-color: #303133;
+	$uni-color-primary: #2979ff;
+
+	.page-container {
+		min-height: 100vh;
+		background-color: #f5f5f5;
+
+		.section-title {
+			font-weight: 500;
+			font-size: 30rpx;
+			color: #333333;
+			margin-bottom: 32rpx;
 		}
 	}
 
-	.form-input {
-		pointer-events: none;
-	}
-	::v-deep .uni-input-input:disabled {
-		pointer-events: none;
-	}
+	.form-card {
+		margin: 24rpx;
+		padding: 16rpx 16rpx;
+		background-color: #fff;
+		border-radius: 16rpx;
 
-	.input-suffix {
-		color: #232832;
-		font-size: 26rpx;
-		margin-left: 10rpx;
-	}
+		::v-deep .u-form-item {
+			padding: 16rpx 0;
+			line-height: 1;
 
-	.upload-content {
-		width: 100%;
+			.u-form-item--left__content {
+				flex: none;
 
-		.upload-tip {
-			font-weight: 400;
-			font-size: 20rpx;
-			color: #999999;
-			margin-bottom: 20rpx;
+				.u-form-item--left__content__label {
+					font-weight: 600;
+				}
+
+				.u-form-item--left__content--required {
+					color: #fa3534;
+					left: auto;
+					right: 0;
+				}
+			}
+		}
+
+		.form-input {
+			pointer-events: none;
 		}
-::v-deep .u-add-tips {
-			margin-top: 10rpx;
+
+		::v-deep .uni-input-input:disabled {
+			pointer-events: none;
+		}
+
+		.input-suffix {
+			color: #232832;
+			font-size: 26rpx;
+			margin-left: 10rpx;
+		}
+
+		.upload-content {
+			width: 100%;
+
+			.upload-tip {
+				font-weight: 400;
+				font-size: 20rpx;
+				color: #999999;
+				margin-bottom: 20rpx;
+			}
+
+			::v-deep .u-add-tips {
+				margin-top: 10rpx;
+			}
 		}
 	}
-}
-.tips{
-	
-	width: 100%;
-	font-weight: 400;
-	font-size: 20rpx;
-	color: #999999;
-	margin-top: 66rpx;
-	text-align: center;
-}
-
-// 底部按钮
-.footer-bar {
-	::v-deep .u-btn {
+
+	.tips {
+
 		width: 100%;
-		height: 76rpx;
 		font-weight: 400;
-		font-size: 28rpx;
-		color: #449AFF;
-		border-radius: 54rpx;
-		border: 1rpx solid #449AFF;
-		background: #FFFFFF;
-	}
-}
-
-// 分类选择弹窗样式
-.category-popup {
-	padding: 30rpx;
-	
-	.popup-title {
+		font-size: 20rpx;
+		color: #999999;
+		margin-top: 66rpx;
 		text-align: center;
-		font-size: 34rpx;
-		font-weight: bold;
-		color: $uni-text-color;
-		margin-bottom: 30rpx;
-	}
-	
-	.category-list {
-		max-height: 600rpx; // 限制高度,可滚动
 	}
-	
-	.category-item {
-		padding: 20rpx 0;
-		font-size: 30rpx;
-		color: $uni-text-color;
-		border-bottom: 1rpx solid #eee;
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		
-		&:last-child {
-			border-bottom: none;
+
+	// 底部按钮
+	.footer-bar {
+		::v-deep .u-btn {
+			width: 100%;
+			height: 76rpx;
+			font-weight: 400;
+			font-size: 28rpx;
+			color: #449AFF;
+			border-radius: 54rpx;
+			border: 1rpx solid #449AFF;
+			background: #FFFFFF;
 		}
-		
-		&.selected {
-			color: $uni-color-primary;
+	}
+
+	// 分类选择弹窗样式
+	.category-popup {
+		padding: 30rpx;
+
+		.popup-title {
+			text-align: center;
+			font-size: 34rpx;
 			font-weight: bold;
+			color: $uni-text-color;
+			margin-bottom: 30rpx;
+		}
+
+		.category-list {
+			max-height: 600rpx; // 限制高度,可滚动
+		}
+
+		.category-item {
+			padding: 20rpx 0;
+			font-size: 30rpx;
+			color: $uni-text-color;
+			border-bottom: 1rpx solid #eee;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+
+			&:last-child {
+				border-bottom: none;
+			}
+
+			&.selected {
+				color: $uni-color-primary;
+				font-weight: bold;
+			}
+		}
+
+		.popup-footer {
+			padding-top: 30rpx;
 		}
 	}
-	
-	.popup-footer {
-		padding-top: 30rpx;
-	}
-}
-</style>
+</style>