hotelHomestayWx/pages/HotelMerchandise/addCommodity.vue

<template>
	<view class="page" :style="{'height':(h)+'px','padding-top':mt+'px'}">
		<c-nav-bar title="添加商品" :showIcon="true"></c-nav-bar>
		<view class="body">

			<view class="typeInfo">
				<view class="cellBox">
					<text style="font-size: 32rpx; font-weight: 700;">商品名称</text>
					<input v-model="fromData.comboName" type="text" placeholder="请输入商品名称"
						style="width: 210rpx;height: 42rpx; font-size: 30rpx;flex:1" />
				</view>
				<view class="cellBox">
					<text style="font-size: 32rpx; font-weight: 700;">价格</text>
					<input v-model="fromData.price" type="text" placeholder="请输入价格"
						style="width: 210rpx;height: 42rpx; font-size: 30rpx;flex:1" />
				</view>
				<!-- 		<view class="cellBox">
					<text style="font-size: 32rpx; font-weight: 700;">库存</text>
					<input v-model="fromData.shortName" type="text" placeholder="请输入库存"
						style="width: 210rpx;height: 42rpx; font-size: 30rpx;flex:1" />
				</view> -->
				<view class="cellBox">
					<text style="font-size: 32rpx; font-weight: 700;">类型</text>
					<input v-model="fromData.comboType" type="text" placeholder="请输入类型"
						style="width: 210rpx;height: 42rpx; font-size: 30rpx;flex:1" />
				</view>
				<view class="uploadPic">
					<view style=" margin-left: 16rpx; margin-bottom: 22rpx;">
						<text style="font-size: 32rpx; font-weight: 700; ">套餐内容</text>
					</view>
					<view class="textarea">
						<u--textarea v-model="fromData.comboExplain" height='310' placeholder="最多输入60个汉字"
							count></u--textarea>
					</view>
				</view>
				<view class="uploadPic">
					<view style=" margin-left: 16rpx;">
						<text style="font-size: 32rpx; font-weight: 700; "> 主图/封面</text>
					</view>
					<view class="pic">
						<!-- 图片 -->
						<u-upload :fileList="cover" multiple :maxCount="1" :maxSize="1 * 1024 * 1024"
							@afterRead="afterReadcover" @oversize="overSize" width="180" height="180"
							@delete="deletePic">
						</u-upload>

					</view>
				</view>
				<view class="uploadPic">
					<view style=" margin-left: 16rpx;">
						<text style="font-size: 32rpx; font-weight: 700; ">套餐照片</text>
					</view>
					<view class="pic">
						<!-- 图片 -->
						<u-upload :fileList="introduction" multiple :maxCount="5" :maxSize="5 * 1024 * 1024"
							@afterRead="afterRead" @oversize="overSize" width="180" height="180" @delete="deletePic">
						</u-upload>

					</view>
				</view>
			</view>

			<!-- 图片上传
			 -->

		</view>
		<view class="btn-btn">
			<view class="hander-two">
				<view class="pop-btn-del" @click="Shelves(0)">
					保存
				</view>
				<view class="pop-btn-add" @click="Shelves(1)">
					立即上架
				</view>
			</view>
		</view>

	</view>

	</view>

</template>

<script>
	export default {
		data() {
			return {
				checked: false,
				weekedChecked: false,
				action: '', //图片服务器地址
				value2: '统计字数',
				introduction: [],
				introductioned: [],
				cover: [],
				covered: [],
				fromData: {
					comboName: "", //套餐名称
					comboType: '1', //套餐类型: 1包桌 2按人头
					cover: '', //主图/封面
					introduction: '', //图片 多个以,分割
					price: '', //价格
					status: '0', //是否上下架: 1是0否
					comboExplain: '', //说明
					homestayId: uni.getStorageSync('homestayId'),
				}
			}

		},
		onLoad() {},
		methods: {
			// 保存  上架
			Shelves(status) {
				if (!this.fromData.comboName) return this.$showToast("请添商品名称");
				if (!this.fromData.price) return this.$showToast("请填写价格");
				if (!this.fromData.comboType) return this.$showToast("请选择套餐类型");
				if (!this.fromData.comboExplain) return this.$showToast("请填写套餐内容");
				if (!this.fromData.cover) return this.$showToast("请上传主图/封面");
				if (!this.fromData.introduction) return this.$showToast("请上传套餐照片");

				this.$api.post('/merchant/hotel/repast', this.fromData).then(res => {
					console.log(res.data);
				})
			},

			// 删除图片
			deletePic(event) {
				this.introduction.splice(event.index, 1)
			},

			// 新增图片
			async afterReadcover(event) {
				const result = await this.uploadFilePromisecover(event.file[0].url);
				//图片路径
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let Lists = [].concat(event.file)

				for (let i = 0; i < Lists.length; i++) {
					const result = await this.uploadFilePromise(Lists[i].url)
					wx.getImageInfo({
						src: Lists[i].url,
						success: res => {

						}
					})
				}
			},
			//上传图片
			uploadFilePromisecover(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://i.ringzle.com/island-cloud-server/oss/file/upload',
						filePath: url,
						name: 'file',
						header: {
							token: wx.getStorageSync('access_token')
						},
						success: (res) => {
							let data = JSON.parse(res.data) //最终传给的是字符串，这里需要转换格式
							this.cover.push({
								url: data.data.url
							})
							this.covered.push(data.data.url)
							this.fromData.cover = this.covered.toString()
							console.log(this.covered);
							console.log(this.fromData.cover);
							resolve(data.data.url)
						}
					});
				})
			},
			//上传图片
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://i.ringzle.com/island-cloud-server/oss/file/upload',
						filePath: url,
						name: 'file',
						header: {
							token: wx.getStorageSync('access_token')
						},
						success: (res) => {
							let data = JSON.parse(res.data) //最终传给的是字符串，这里需要转换格式
							this.introduction.push({
								url: data.data.url
							})
							this.introductioned.push(data.data.url)
							this.fromData.introduction = this.introductioned.toString()
							console.log(this.introductioned);
							console.log(this.fromData.introduction);
							resolve(data.data.url)
						}
					});
				})
			},


			// 图片大小超出最大允许大小
			overSize(e) {
				uni.$u.toast('上传图片大小不能超过10MB!')
			},
		}

	}
</script>

<style lang="scss">
	.uicon-camera-fill {
		font-size: 50rpx !important;
	}

	.btn-btn {
		width: 100%;
		height: 136rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		// margin: 0 auto;
		z-index: 999999;
		// margin-top: 30rpx;
		// margin-left: 30rpx;

		.hander-two {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 30rpx 0;

			.pop-btn-del {
				margin: 0 15rpx;
				padding: 22rpx 136rpx;
				font-size: 32rpx;
				color: #111111;
				font-weight: Regular;
				background-color: #F0F2F5;
				border-radius: 50rpx;
			}

			.pop-btn-add {
				border-radius: 50rpx;
				margin: 0 15rpx;
				background-color: #1372FF;
				padding: 22rpx 100rpx;
				font-size: 32rpx;
				color: #FFFFFF;
				font-weight: Regular;
			}


		}

	}

	.btn {
		margin: 0 auto;
		width: 690rpx;
		height: 96rpx;
		background-color: #1372FF;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 34rpx;
		border-radius: 48rpx;
	}

	.uicon-close {
		font-size: 30rpx !important;
		top: 8rpx !important;
	}

	.page {
		background: #F3F4F4;
		padding-bottom: 260rpx;
		box-sizing: border-box;
		overflow-y: auto;
		overflow-x: auto;
	}

	.body {
		padding-top: 20rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.typeInfo {
		background-color: #fff;
		width: 100%;
		// height: 145px;
		border-radius: 5px;
		padding-top: 15px;
		padding-left: 7px;
		padding-right: 15px;
		box-sizing: border-box;
	}

	.titleInfo {
		// margin-top: 30rpx;
		margin-left: 20rpx;
		margin-bottom: 40rpx;
	}

	.cellBox {
		margin-left: 20rpx;
		display: flex;
		padding: 20rpx 0 30rpx;
		border-bottom: 1rpx solid #E1E1E1;

		text {
			margin-top: 10rpx;
			width: 170rpx;
		}
	}

	.bigRoom {
		margin-left: 20rpx;
		width: 100%;
		height: 102rpx;
		display: flex;
		// justify-content: center;
		align-items: center;

	}

	.shelves {
		width: 695rpx;
		height: 102rpx;
		background-color: #fff;
		margin-top: 20rpx;
		border-radius: 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		// padding-left: 30rpx;
		// padding-right: 30rpx;
	}

	.uploadPic {
		padding-top: 28rpx;
		// width: 690rpx;
		// height: 293rpx;
		background-color: #fff;
		border-radius: 10rpx;
		margin-top: 20rpx;
	}

	.pic {
		// margin-left: 30rpx;
		// margin-top: 20rpx;
		// width: 190rpx;
		// height: 120rpx;
		margin: 20rpx 26rpx;
		padding-bottom: 20rpx;
	}

	// .custom-upload-button{
	// 	width: 190rpx;
	// 	height: 120rpx;

	// }
	.priceInfo {
		width: 690rpx;
		// height: 908rpx;
		background-color: #fff;
		border-radius: 10rpx;
		margin-top: 20rpx;
		padding-top: 30rpx;
	}

	.week {

		padding-left: 30rpx;
		padding-right: 30rpx;
		margin-bottom: 20rpx;
	}

	.weekend {
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid #E1E1E1;
		padding-bottom: 30rpx;
	}

	.everyDay {
		padding-left: 30rpx;
		padding-right: 30rpx;
		width: 100%;
		// background-color: pink;
		height: 102rpx;
		display: flex;
		align-items: center;
	}

	.days {
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #E1E1E1;
		padding-bottom: 30rpx;
	}

	.priceBoxWeek {
		display: flex;
		align-items: center;
		padding-left: 30rpx;
		padding-right: 30rpx;

	}

	.weekendBox {
		width: 630rpx;
		display: flex;
		align-items: center;
		// margin-right: 90rpx;
		// justify-content: space-between;
		border-bottom: 1rpx solid #E1E1E1;
		height: 102rpx;
		overflow: hidden;
		box-sizing: border-box;
	}

	.everyHouseList {
		// padding-right: 30rpx;
		width: 690rpx;
		// height: 908rpx;
		background-color: #fff;
		border-radius: 10rpx;
		margin-top: 20rpx;
		// padding-top: 30rpx;
	}

	.HouseListTitleInfo {
		margin-right: 30rpx;
		margin-left: 20rpx;
		margin-bottom: 40rpx;
		display: flex;
		justify-content: space-between;
	}

	.submit {
		margin-top: 20rpx;
		border-radius: 10rpx;
		width: 690rpx;
		height: 102rpx;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}


	.addSubmit {
		width: 100%;
		position: fixed;
		/* 固定定位 */
		bottom: 20rpx;
		/* 底部对齐 */
		left: 0;
		/* 可选：左对齐 */
		// width: 690rpx;
		/* 可选：宽度为 100% */
		height: 96rpx;
		margin-left: 30rpx;
		// padding-top: 20rpx;
		margin-top: 30rpx;
		background-color: #1372FF;
		border-radius: 48rpx;
	}

	.uploadPicPic {
		position: relative;
		top: -96rpx;
	}

	.u-upload__deletable[data-v-69e2a36e] {
		width: 0 !important;
	}
</style>