vpUni/.svn/pristine/14/143fc96729ee2f646e4c4b33ce68a901144d92d2.svn-base

<template>
	<view style="margin: 20rpx 30rpx;">
		<view class="" style="border-radius: 20rpx;  background-color: #fff; padding: 20rpx; ">
			<view class="" style="font-weight: 600;  font-size: 30rpx;">
				商品封面
			</view>
			<view class=""
				style="  margin-top: 20rpx; width: 100%; height: 320rpx;  border: 4rpx dashed #e2e2e2;  border-radius: 20rpx; overflow: hidden; ">
				<view class=""
					style="width: 100%; height: 100%;  display: flex; flex-direction: column; align-items: center; justify-content: center; ">
					<img :src="Service.GetIconImg('/static/goods/photo.png')" style="width: 80rpx;  height: 80rpx;"
						alt="" />
					<view class="" style=" color: #666666; font-size: 28rpx;">
						上传图片
					</view>
				</view>
				<!-- <image :src="Service.GetMateUrlByImg('/static/dele/dele4.jpg')"   mode="aspectFill" style="width: 100%;  height: 100%; " alt="" /> -->
			</view>
		</view>



		<view class="" style="  margin-top: 20rpx; border-radius: 20rpx;  background-color: #fff; padding: 20rpx; ">
			<up-form labelWidth='90' :labelStyle="{'font-weight': 600 }" labelPosition="top" :model="goodsInfo"
				ref="form1">
				<up-form-item label="商品名称" prop="goodsInfo.name" :borderBottom="false" ref="item1">
					<up-input :customStyle="{'border-radius': '15rpx' }" placeholder="请输入商品名称" border='surround'
						v-model="goodsInfo.name"></up-input>
				</up-form-item>
				<up-form-item label="价格" prop="goodsInfo.sex" :borderBottom="false">
					<up-input prefixIcon='rmb' :prefixIconStyle="{ 'color':'#000','font-weight': 600  }"
						:customStyle="{'border-radius': '15rpx' }" placeholder="请输入价格" v-model="goodsInfo.prince"
						border="surround"></up-input>
				</up-form-item>
				<up-form-item label="描述" prop="goodsInfo.sex" :borderBottom="false">
					<up-textarea v-model="goodsInfo.des" placeholder="请输入商品描述"></up-textarea>
				</up-form-item>
				<up-form-item label="分类" prop="goodsInfo.sex" :borderBottom="false">
					<view class=""
						style="padding: 12rpx 18rpx; border-radius: 7px; border: 1rpx solid #e2e2e2; width: 100%; ">
						<view class="" @click="showClass=true"
							style="display: flex; height: 48rpx; align-items: center; justify-content: space-between;">
							<view class="" :style="{ 'color':goodsInfo.class? '#000':'#c0c4cc'  } ">
								{{ goodsInfo.class?goodsInfo.class:'请选择分类'}}
							</view>
							<view class="">
								<up-icon name="arrow-right" size="14" color='#666666' :bold='true'></up-icon>
							</view>
						</view>
					</view>
				</up-form-item>
				<up-form-item label="状态" prop="goodsInfo.sex" :borderBottom="false">
					<up-radio-group v-model="goodsInfo.status" placement="row">
						<up-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist" :key="index"
							:label="item.name" :name="item.value" @change="radioChange">
						</up-radio>
					</up-radio-group>
				</up-form-item>
				<up-form-item label="标签" :borderBottom="false">
					<view v-for="(item, index) in tabsList" @click="clickTab(index)" :key="index"
						:class="{active:!goodsInfo.tabs.includes(index),actived:goodsInfo.tabs.includes(index)}">
						{{item}}
					</view>
				</up-form-item>
			</up-form>
		</view>

		<view class="" style="width: 100%;   height: 200rpx;">

		</view>
		
		
		<!-- 底部操作按钮 -->
		<view class="action-buttons">
			<u-button type="primary"  @click="Service.GoPageBack()" :custom-style="ButtonStyle">取消</u-button>
			<u-button type="primary"  @click="save()"  :custom-style="ButtonStyle">保存</u-button>
		</view>
		
		
		<up-picker :show="showClass" @cancel="showClass=!showClass" @confirm="confirmClass"
			:columns="columns"></up-picker>
	</view>
</template>

<script setup lang="ts">
	import { onShow, onLoad } from "@dcloudio/uni-app";
	import { Service } from "@/Service/Service"
	import { ref } from "vue";


	let goodsInfo = ref({
		name: "",
		prince: '',
		des: "",
		class: '',
		status: '',
		tabs: []
	})

	let showClass = ref(false)
	const columns = ref([
		['中国', '美国', '日本']
	]);

	const radiolist = ref([
		{
			name: '上架中',
			value: '0'

		},
		{
			name: '已下架',
			value: '1'
		}
	]);


	let tabsList = ref([
		'新品',
		'热销',
		'推荐',
		'折扣',
		'特惠'
	])
	
	
	const ButtonStyle = ref({
		backgroundColor: '#FF6600',
		borderColor: '#FF6600',
		color: '#FFFFFF',
		fontSize: '28rpx',
		height: '75rpx',
		borderRadius: '45rpx',
		marginLeft: '20rpx'
	});
	
	onLoad(() => {

	});

	onShow(() => {

	});


	const confirmClass = (e) => {
		goodsInfo.value.class = e.value[0]
		showClass.value = !showClass.value
	}


	const radioChange = (e) => {
		goodsInfo.value.status = e
	}

	const clickTab = (e : any) => {
		if (goodsInfo.value.tabs.includes(e)) {
			let a = goodsInfo.value.tabs.findIndex((x) => {
				return x == e
			})
			goodsInfo.value.tabs.splice(a, 1)
			return
		}

		goodsInfo.value.tabs.push(e)
	}
	
	const save=()=>{
		Service.GoPageBack()
	}
	
</script>

<style lang="scss">
	page {
		background-color: #f6f6f6;
	}

	.active {
		color: #b5b5b5;
		border: 1rpx solid #b5b5b5;
		margin-right: 15rpx;
		border-radius: 23rpx;
		padding: 5rpx 16rpx;
		width: fit-content;
	}

	.actived {
		color: var(--nav-mian);
		border: 1rpx solid var(--nav-mian);
		margin-right: 15rpx;
		border-radius: 23rpx;
		padding: 5rpx 16rpx;
		width: fit-content;
	}
	
	/* 底部操作按钮 */
	.action-buttons {
		display: flex;
		padding: 30rpx 30rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #ffffff;
		border-top: 1rpx solid #f0f0f0;
	}
</style>