jiuyiUniapp/jiuyi2/pages/release/commodity.vue

<script setup>
	// 发布商品
	import {
		ref,
		reactive
	} from 'vue'
	// 
	import {
		onLoad
	} from '@dcloudio/uni-app'
	// 表单
	const form = reactive({
		// 
	})

	onLoad((options) => {
		// 
	})

	// 发布商品
	function handleSubmit() {
		const data = {
			...form
		}
	}
</script>

<template>
	<view class="app">
		<view class="container">

			<view class="main area">
				<view class="title mtb20">商品图片</view>
				<view class="imgList mt20">
					<view class="imgs">
						<image class="wh120" src="/static/shop-upload-image.png" mode="aspectFit" />
					</view>
				</view>
			</view>

			<view class="main area">
				<view class="title mtb20">商品标题</view>
				<textarea class="textarea mtb20" placeholder="最多输入60字符（30个汉字）" />
			</view>

			<view class="main area">
				<view class="line rows ptb20">
					<view class="title w150">类目</view>
					<view class="col f1">
						<text class="placeholderStyle">点击选择</text>
					</view>
				</view>

				<view class="line rows ptb20">
					<view class="title w150">规格</view>
					<view class="col f1">
						<input type="text" placeholder="输入规格" placeholder-class="placeholderStyle" />
					</view>
				</view>

				<view class="line rows ptb20">
					<view class="title w150">价格</view>
					<view class="col f1">
						<input type="text" placeholder="输入价格" placeholder-class="placeholderStyle" />
					</view>
				</view>

				<view class="line rows ptb20">
					<view class="title w150">库存</view>
					<view class="col f1">
						<input type="text" placeholder="输入库存" placeholder-class="placeholderStyle" />
					</view>
				</view>
			</view>

			<view class="main area">
				<view class="line rows ptb20">
					<view class="title w150">发货时间</view>
					<view class="col f1">
						<input type="text" placeholder="输入时间" placeholder-class="placeholderStyle" />
					</view>
				</view>
				<view class="line rows ptb20">
					<view class="title w150">所在地</view>
					<view class="col f1">
						<input type="text" placeholder="输入所在地" placeholder-class="placeholderStyle" />
					</view>
				</view>
				<view class="line rows ptb20">
					<view class="title w150">详细所在地</view>
					<view class="col f1">
						<input type="text" placeholder="输入详细所在地" placeholder-class="placeholderStyle" />
					</view>
				</view>
				<view class="line rows ptb20">
					<view class="title w150">出让佣金</view>
					<view class="col f1">
						<input type="text" placeholder="输入价格" placeholder-class="placeholderStyle" />
					</view>
				</view>
			</view>

			<view class="main area">
				<view class="line rows ptb20">
					<view class="title w150">代金券</view>
					<view class="col f1">
						<text class="placeholderStyle">点击选择</text>
					</view>
				</view>
			</view>

			<view class="main area">
				<view class="title rows mtb20">
					<image src="/static/commodity-release-video.png" mode="aspectFit" class="wh45" />
					<view class="f1 ml20">添加链接到视频</view>
				</view>
				<view class="rows mtb20">
					<view class="mr10 f28">再第几秒展示</view>
					<input type="text" placeholder="输入秒数" placeholder-class="placeholderStyle" />
				</view>
			</view>
		</view>

		<view class="fill" style="height: 210rpx;"></view>

		<view class="footer plr30 bfff shadow">
			<view class="btn lg primary">立即上架</view>
		</view>
	</view>
</template>

<style lang="scss">
	// 
	.container {
		color: #333;

		// 内容
		.area {
			overflow: hidden;
			margin: 20rpx;
			padding: 0 30rpx;
			background-color: #fff;
			border-radius: 20rpx;

		}

		.line+.line {
			border-top: 2rpx solid #eee;
		}

		// 标题
		.title {
			font-size: 28rpx;
		}

		// 
		.textarea {
			width: 100%;
			height: 200rpx;
		}
	}
</style>