yanzong_qianduan/pages/news1/huoyuan.vue

<template>
	<view class="huoyuan">
		<view style="width:100%;position: fixed;top:0;z-index:99">
			<view class="navBarContent">
				<u-navbar title="我要货源" :border-bottom="false" :background="background" title-color="#fff"></u-navbar>
			</view>

		</view>
		<image :src="$picUrl + '/static/news1/walletBg.png'" class="bgImg" mode="widthFix"></image>
		<view style="border:1px solid transparent;margin-top:-190px;position: relative;z-index: 9;">
			<view class="process">

				<view class="pItem" v-for="(item, index) in list" :key="index">
					<image :src="item.icon" mode="widthFix" class="icon"></image>
					<view class="title">{{ item.title }}</view>
					<view class="subTitle">{{ item.subTitle }}</view>
				</view>
			</view>
			<view class="formContent">
				<u-form :model="form" ref="uForm" boder>
					<u-form-item label="商品名称" label-width="150">
						<u-input placeholder="请填写您求购的商品名称" v-model="form.name" />
					</u-form-item>
					<u-form-item label="产品描述：" label-width="150">
						<u-input maxlength="200" placeholder="如品牌、型号、参数 、配置、规格等，可复制电商标题、链接。" v-model="form.intro"
							type="textarea" />
					</u-form-item>
					<u-form-item label="求购类型" label-width="150" @click="typeShow = true">
						<u-input v-model="form.type" placeholder="请选择求购类型" type="select" @click="typeShow = true" />
						<u-picker :range="type" range-key="text" @confirm="actionSheetCallback($event)" v-model="typeShow"
							mode="selector"></u-picker>
					</u-form-item>
					<u-form-item label="交货日期" label-width="150" @click="timeShow = true">
						<u-input v-model="form.date" type="select" placeholder="请选择交货日期" @click="timeShow = true" />
						<u-picker mode="time" v-model="timeShow" :params="timeParams" @confirm="timeChage"></u-picker>
					</u-form-item>
					<u-form-item label="求购数量" label-width="150">
						<u-input placeholder="请输入数量及单位" v-model="form.num" />
					</u-form-item>
					<u-form-item label="预估单价" label-width="150">
						<view class="">
							<view class="qujian">
								<u-input placeholder="输入价格区间" border v-model="form.startNum" />
								<text style="margin:0 10upx;">-</text>
								<u-input placeholder="输入价格区间" border v-model="form.endNum" />
								<text style="margin-left:10upx">元</text>
							</view>
							<u-checkbox-group>
								<u-checkbox active-color="#FE483B" shape="circle" v-model="form.mianyi"
									v-for="(item, index) in radioList" :key="index" :name="item.name">
									{{ item.name }}
								</u-checkbox>
							</u-checkbox-group>

						</view>
					</u-form-item>
					<u-form-item label="上传照片" label-width="150" class="c">
						<u-upload :action="action" :header="header" @on-uploaded="transferSuccess"
							@on-remove="transferRemove" width="180" height="180" :file-list="transferList"
							:custom-btn="true" max-count="6">
							<template v-slot:addBtn>
								<view class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
									<image :src="$picUrl + '/static/news/icon-upload.png'"></image>
									<view class="1">上传照片</view>
								</view>
							</template>
						</u-upload>
					</u-form-item>
					<u-form-item label="收货地址" label-width="150" @click="addrshow = true">
						<u-input v-model="form.addr" placeholder="请选择收货地址" type="select" @click="addrshow = true" />
						<u-picker mode="region" v-model="addrshow" @confirm="getAddress"></u-picker>
					</u-form-item>
					<u-form-item label="备注" class="self-form" label-width="150" label-position="top">
						<u-input class="realAddr" height="258" type="textarea" placeholder="请填写您要补充的内容，如规格、包装和运输等要求"
							v-model="form.remark">
						</u-input>
					</u-form-item>

				</u-form>
				<view class="submitBtn-box">
					<button class="submitBtn" @click="sureSubmit">确认发布</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
// import img from "@/static/news1/walletBg.png";
import * as help from '@/api/help'
import Config from '@/core/config'
import * as UploadApi from '@/api/upload'
export default {
	data() {
		let img = 'https://www.royaum.com.cn/static/news1/walletBg.png'
		return {
			background: {
				background: 'url(' + img + ') center top no-repeat',
				backgroundSize: '100%',
			},
			list: [{
				icon: 'https://www.royaum.com.cn/static/news1/m1.png',
				title: '发采购询价单',
				subTitle: '填写所需信息一键发布询价'
			},
			{
				icon: 'https://www.royaum.com.cn/static/news1/m2.png',
				title: '卖家实时报价',
				subTitle: '60分钟获取卖家报价'
			},
			{
				icon: 'https://www.royaum.com.cn/static/news1/m3.png',
				title: '卖家上架商品',
				subTitle: '采购方案根据需要下单采购'
			},
			],
			form: {
				name: '',
				intro: '',
				type: '',
				date: '',
				num: '',
				startNum: '',
				endNum: '',
				mianyi: true,
				addr: '',
				remark: ''
			},
			typeShow: false,
			timeShow: false,
			addrshow: false,
			type: [{
				text: '一件代发'
			}],
			timeParams: {
				year: true,
				month: true,
				day: true,
				hour: false,
				minute: false,
				second: false
			},
			radioList: [{
				name: '面议'
			},

			],
			radio: '',
			//照片
			imageList: [],
			maxImageLength: 6,
			imgage_ids: [],
			action: '',
			header: '',
			transferList: []
		}
	},
	onReady() {
		this.action = (Config.get('apiUrl') + 'upload/image').replace("index.php?s=/", "")
		this.header = {
			'Storeid': uni.getStorageSync('Store').storeInfo.store_id,
			'Access-Token': uni.getStorageSync('AccessToken'),
			'platform': "MP-WEIXIN",
		}
	},
	methods: {
		//接受上传返回的数据
		transferSuccess(list) {
			console.log(list)
			if (list.length > 0) {
				const {
					response
				} = list[0];
				if (response.status == 200) {
					uni.showToast({
						title: "上传成功"
					})
					let idList = []
					list.forEach(item => {
						idList.push(item.response.data.fileInfo.file_id)
					});
					this.imgage_ids = idList.join(',');
				}
			}
		},
		transferRemove(file, fileList) {
			this.imgage_ids = this.handleRemove(file, fileList);
		},
		handleRemove: function (file, fileList) {
			let idList = []
			fileList.forEach(item => {
				idList.push(item.response.data.fileInfo.file_id)
			});
			return idList.join(',')

		},
		getAddress(e) {
			this.form.addr = e.province.name + e.city.name + e.area.name;
			this.address_id = e.province.code
		},
		timeChage(e) {
			this.form.date = e.year + '-' + e.month + '-' + e.day
		},
		sureSubmit() {
			// 确认发布   
			const that = this;
			if (!that.form.name) {
				return that.$toast('请输入商品名称')
			}
			if (!that.form.intro) {
				return that.$toast('请输入商品信息')
			}
			if (!that.form.type) {
				return that.$toast('请选择求购类型')
			}
			if (!that.form.date) {
				return that.$toast('请选择交货日期')
			}
			if (!that.form.num) {
				return that.$toast('请选择求购数量')
			}
			if (!that.form.startNum) {
				return that.$toast('请输入最低价')
			}
			if (!that.form.endNum) {
				return that.$toast('请输入最高价')
			}
			if (!that.form.mianyi) {
				return that.$toast('请选择价格是否面议')
			}
			if (!that.form.mianyi) {
				return that.$toast('请选择价格是否面议')
			}
			if (!that.form.remark) {
				return that.$toast('请填写备注')
			}
			let params = {
				goods_name: that.form.name,
				goods_desc: that.form.intro,
				type: that.form.type,
				deliver_at: that.form.date,
				num: that.form.num,
				min_price: that.form.startNum,
				max_price: that.form.endNum,
				is_face: that.form.mianyi,
				address_id: that.address_id,
				remark: that.form.remark,
				imgage_ids: that.imgage_ids
			}
			help.addGoodsSource(params)
				.then(res => {
					if (res.status) {
						uni.showToast({
							title: '发布成功',
							icon: 'none',
							duration: 2000
						})
						that.transferList = []
						that.imgage_ids = []
						that.form = that.$options.data().form
					} else {
						uni.showToast({
							title: '发布失败',
							icon: 'none',
							duration: 2000
						})
					}
				})
				.finally()
		},
		actionSheetCallback(index) {
			this.form.type = this.type[index].text;
		}
	}
}
</script>

<style lang="scss" scoped>
page {
	min-height: 100%;
	padding-bottom: 100upx;
}

.c {
	padding-top: 20rpx;
	overflow: hidden;

	.slot-btn {
		width: 180rpx;
		height: 180rpx;
		background: #F6F6F6;
		border-radius: 10rpx;
		border: 1px solid #C0C0C0;
		text-align: center;
		font-size: 28rpx;
		font-weight: 500;
		color: #6D6D6D;

		.l {
			line-height: 30rpx;
		}

		image {
			width: 50rpx;
			height: 50rpx;
			display: block;
			margin: 0 auto;
			margin-top: 30rpx;
		}
	}
}

.self-form {
	::v-deep .u-form-item {
		border: none !important;
		;
	}
}

.realAddr {
	::v-deep .u-input {
		padding: 10rpx 22upx !important;
		background: #F7F8FA;
	}

}

.huoyuan {
	.process {
		height: 266upx;
		background: #FFFFFF;
		border-radius: 14upx;
		opacity: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 30upx;
		// padding:0 28upx;
		position: relative;

		.pItem {
			flex: 1;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			image {
				width: 56upx;
				height: auto;
			}

			.title {
				font-size: 24upx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				color: #2D2D2D;
				margin: 16upx 0;
			}

			.subTitle {
				font-size: 24upx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #8A8A8A;
				width: 75%;
				text-align: center;

			}
		}
	}

	.formContent {
		margin: 0 30upx;
		background-color: #fff;
		border-radius: 14upx;
		margin-top: 20upx;
		padding: 0 38upx;
		padding-bottom: 135upx;

		::v-deep .u-form-item--left {
			align-items: flex-start;
		}

		::v-deep .u-form-item--left__content__label {
			color: #2D2D2D;
			font-size: 28upx;
		}

		.qujian {
			width: 100%;
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;
		}
	}
}

.remarkInput {
	// width: 100%;
	// height: 246upx;
	background: green;
	border-radius: 3px;
	padding: 20upx !important;
}

.submitBtn-box {
	position: fixed;
	width: 100%;
	left: 0;
	bottom: 0;
	padding: 30rpx 34rpx;
	z-index: 88;
	background: #fff;
}

.submitBtn {
	height: 88upx;
	line-height: 88upx;
	// background: #FFAAA4;
	background: #FE483B;
	border-radius: 36px;
	font-size: 28upx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 500;
	color: #FFFFFF;
	text-align: center;
}

.navBarContent {
	height: 88upx;
	line-height: 88upx;
	text-align: center;
	position: relative;

	text {
		font-size: 32upx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

}

.bgImg {
	width: 100%;
}

.file_img {
	overflow: hidden;
	position: relative;

	image {
		width: 80px;
		height: 80px;
		margin-right: 10rpx;
	}

	.image-delete {
		position: absolute;
		top: -10rpx;
		right: -10rpx;
		height: 42rpx;
		width: 42rpx;
		background: rgba(0, 0, 0, 0.64);
		border-radius: 50%;
		color: #fff;
		font-weight: bolder;
		font-size: 22rpx;
		z-index: 10;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}
</style>