GuangYuYuan-shanghu/src/workbench/skill/edit.vue

<template>
	<view class="edit-page">
		<!-- 项目摘要 -->
		<view class="summary">
			<view class="cover"></view>
			<view class="summary-info">
				<text class="title">{{ detail.title }}</text>
				<text class="billing">{{ detail.billingType }}</text>
			</view>
		</view>

		<!-- 只读信息行 -->
		<view class="info-section">
			<view class="info-row">
				<text class="label">服务分类</text>
				<text class="value">{{ detail.categoryName }} &gt;</text>
			</view>
			<view class="info-row">
				<text class="label">价格</text>
				<text class="value">￥{{ detail.platformPrice }} &gt;</text>
			</view>
			<view class="info-row">
				<text class="label">价格区间</text>
				<text class="value">{{ priceRangeText }}</text>
			</view>
		</view>

		<!-- 我的售价 -->
		<view class="price-section">
			<text class="section-label">我的售价</text>
			<input
				class="price-input"
				v-model="myPrice"
				type="digit"
				placeholder="请输入"
			/>
			<text class="price-tip">
				设置您的服务价格，请参照价格区间的最高价和最低价，不允许高于最高价或者低于最低价
			</text>
		</view>

		<view class="footer-bar">
			<view class="submit-btn" :class="{ active: canSubmit }" @click="onSubmit">提交</view>
		</view>
	</view>
</template>

<script>
import { formatPriceRange } from './mock.js'

export default {
	data() {
		return {
			detail: {
				id: '',
				title: '',
				categoryName: '',
				billingType: '',
				platformPrice: '',
				priceRangeMin: '',
				priceRangeMax: '',
			},
			myPrice: '',
		}
	},
	computed: {
		priceRangeText() {
			const { priceRangeMin, priceRangeMax } = this.detail
			if (priceRangeMin && priceRangeMax) {
				return formatPriceRange(priceRangeMin, priceRangeMax)
			}
			return '-'
		},
		canSubmit() {
			return this.myPrice !== '' && this.validatePrice()
		},
	},
	onLoad(query) {
		this.detail = {
			id: query.id || '',
			title: query.title || '中式推拿-培元疏通',
			categoryName: query.categoryName || '上门按摩',
			billingType: query.billingType || '按分钟计费',
			platformPrice: query.platformPrice || '368.00',
			priceRangeMin: Number(query.priceRangeMin) || 288,
			priceRangeMax: Number(query.priceRangeMax) || 368,
		}
		this.myPrice = query.myPrice || ''
	},
	methods: {
		validatePrice() {
			const val = Number(this.myPrice)
			if (isNaN(val)) return false
			return val >= this.detail.priceRangeMin && val <= this.detail.priceRangeMax
		},
		onSubmit() {
			if (!this.myPrice) {
				uni.showToast({ title: '请输入售价', icon: 'none' })
				return
			}
			if (!this.validatePrice()) {
				uni.showToast({
					title: `价格需在${this.detail.priceRangeMin}-${this.detail.priceRangeMax}之间`,
					icon: 'none',
				})
				return
			}
			uni.showToast({ title: '修改完成', icon: 'none' })
			setTimeout(() => uni.navigateBack(), 1000)
		},
	},
}
</script>

<style lang="scss" scoped>
.edit-page {
	min-height: 100vh;
	background: #f5f5f5;
	padding-bottom: 140rpx;
}

.summary {
	display: flex;
	align-items: center;
	background: #fff;
	padding: 32rpx;
	margin-bottom: 16rpx;
}

.cover {
	width: 120rpx;
	height: 120rpx;
	background: #eee;
	border-radius: 8rpx;
	flex-shrink: 0;
}

.summary-info {
	margin-left: 24rpx;
}

.title {
	display: block;
	font-size: 30rpx;
	color: #333;
	font-weight: 500;
	margin-bottom: 8rpx;
}

.billing {
	font-size: 24rpx;
	color: #999;
}

.info-section {
	background: #fff;
	margin-bottom: 16rpx;
}

.info-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 28rpx 32rpx;
	border-bottom: 1rpx solid #eee;
	font-size: 28rpx;

	&:last-child {
		border-bottom: none;
	}
}

.label {
	color: #333;
}

.value {
	color: #666;
}

.price-section {
	background: #fff;
	padding: 32rpx;
}

.section-label {
	display: block;
	font-size: 28rpx;
	color: #333;
	margin-bottom: 20rpx;
}

.price-input {
	width: 100%;
	height: 80rpx;
	border-bottom: 1rpx solid #eee;
	font-size: 30rpx;
	color: #333;
	margin-bottom: 20rpx;
}

.price-tip {
	font-size: 24rpx;
	color: #999;
	line-height: 1.6;
}

.footer-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 20rpx 32rpx;
	padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
	background: #fff;
	border-top: 1rpx solid #eee;
}

.submit-btn {
	height: 88rpx;
	line-height: 88rpx;
	text-align: center;
	border-radius: 12rpx;
	font-size: 32rpx;
	color: #999;
	background: #f0f0f0;

	&.active {
		color: #fff;
		background: #333;
	}
}
</style>