Delivery-merchant/pages/Addcommodity.vue

<template>
	<view class="titlenav">
		<!-- <titlenav :flag="true"></titlenav> -->
		<view class="top">
			<view class="title">新增商品</view>
		</view>
		<view class="content">
			<u-cell-group :border="false" class="from">
				<view class="list">
					<view class="name">商品名称</view>
					<u-field placeholder="请输入商品名称" is-link v-model="form.storename" />
				</view>
				<view class="list">
					<view class="name name2">商品分类</view>
					<u-cell-item title="请选择所属分类" is-link></u-cell-item>
				</view>
				<view class="list">
					<view class="name">库存(件）</view>
					<u-field placeholder="请输入库存数量" is-link v-model="form.stock" />
				</view>
				<view class="list">
					<view class="name">单价(元)</view>
					<u-field placeholder="商品单价(元)" is-link v-model="form.price" />
				</view>
				<view class="list">
					<view class="name">主料</view>
					<u-field placeholder="请输入材料" is-link v-model="form.material" />
				</view>
				<view class="list">
					<view class="name">规格</view>
					<u-field placeholder="例：1人份 (200g）" is-link v-model="form.num" />
				</view>
			</u-cell-group>
		</view>
		<view class="bottom">
			<view class="characteristic">掌柜描述</view>
			<u-field type="textarea" placeholder="请介绍您的商品信息，会更受欢迎哦" v-model="form.characteristic" />
			<view class="characteristic">商品实物图</view>
			<u-upload :action="action" max-count="3" :file-list="fileList"></u-upload>
		</view>
		<view class="btn">
			<u-button block class="btn2" @click="submit">不上架</u-button>
			<u-button block type="primary" @click="submit2">上架出售</u-button>
		</view>
	</view>
</template>
<script>
import { mapState } from 'vuex';
import Titlenav from '../components/Titlenav.vue';
export default {
	components: { Titlenav },
	data() {
		return {
			form: {},
			action: 'http://www.example.com/upload',
			fileList: [
				{
					url: ''
				}
			]
		};
	},
	computed: {
		...mapState(['systemInfo'])
	},
	methods: {}
};
</script>
<style lang="scss" scoped>
.titlenav {
	background: #214bbe;
	.top {
		height: 50px;
		.title {
			font-size: 22px;
			font-weight: bold;
			color: #ffffff;
			line-height: 26px;
			padding: 10px 0 20px 20px;
		}
	}
	.content {
		background: #ffffff;
		border-radius: 16px 16px 0px 0px;
		padding: 1px 20px;
		display: flex;
		align-items: center;
	}
	.bottom {
		background: #ffffff;
		padding-bottom: 100px;
		/deep/ .u-field {
			margin: 0 20px;
			padding: 0 0 15px 0;
		}
		.characteristic {
			font-size: 14px;
			font-weight: bold;
			color: #000000;
			line-height: 24px;
			padding: 24px 0 8px 20px;
		}
	}
	/deep/ .u-btn {
		width: 162px;
		height: 48px;
		font-size: 16px;
		font-weight: 400;
		color: #ffffff;
		border-radius: 4px;
	}
	/deep/ .u-list-item {
		margin-left: 20px;
		width: 160px !important;
		height: 160px !important;
	}
	/deep/ .u-label {
		flex: 0 0 0 !important;
	}
	/deep/ .u-iconfont {
		font-size: 14px !important;
	}
	/deep/ .uni-textarea-textarea {
		font-size: 16px;
		font-weight: 400;
		color: #000000;
		line-height: 24px;
	}
	/deep/ .uni-textarea-placeholder {
		font-weight: 400;
		font-size: 16px;
	}
	.from {
		/deep/ .u-cell__value {
			color: #000000;
			font-weight: 400;
		}
		/deep/ .u-cell_title {
			font-size: 13px;
			font-weight: 400;
			color: #aaabad;
			line-height: 24px;
		}
		/deep/ .u-field {
			padding: 23px 0;
			color: #000000;
			font-weight: bold;
		}
		/deep/ .uni-input-input {
			font-weight: 400;
		}
		/deep/ .uni-input-placeholder {
			font-size: 13px;
			font-weight: 400;
			color: #aaabad;
			line-height: 24px;
		}
		/deep/ .u-cell {
			padding: 21.5px 0;
		}
		/deep/ .u-cell__value {
			height: 27px;
		}
		.list {
			display: flex;
			align-items: center;
			.name {
				font-size: 14px;
				font-weight: bold;
				width: 86px;
				color: #000000;
				line-height: 24px;
				margin-right: 14px;
				&.name2 {
					margin-right: 44px;
				}
			}
		}
	}
	.btn {
		display: flex;
		align-items: center;
		position: fixed;
		justify-content: space-between;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100;
		padding: 6px 20px;
		padding-bottom: 34px;
		padding-bottom: calc(34px + constant(safe-area-inset-bottom)); // 兼容 IOS<11.2
		padding-bottom: calc(34px + env(safe-area-inset-bottom)); // 兼容 IOS>=11.2
		background-color: #ffffff;
		.btn2 {
			color: #214bbe;
		}
	}
}
</style>