yanzong_qianduan/pages/news/goods/addOneGround.vue

<template>
	<view class="goods">
		<view class="goods-hd">
			<view class="item">
				<view class="a">商品链接<text>*</text></view>
				<view class="b b1" style="width: 500rpx;">
					<u-input v-model="from.urls" wi max-height="260" maxlength="100" type="textarea"
						placeholder="请输入商品链接" :border="true" />
				</view>
			</view>

			<view class="item">
				<view class="a">商品主图<text>*</text></view>
				<view class="b">
					<u-radio-group v-model="from.imageStorage">
						<u-radio active-color='#F34A40' v-for="(item, index) in goodsImage" :key="index"
							:name="item.value">
							{{ item.name }}
						</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="item">
				<view class="a">商品类型<text>*</text></view>
				<view class="b">
					<u-radio-group v-model="from.goods_type">
						<u-radio active-color='#F34A40' v-for="(item, index) in goodsType" :key="index"
							:name="item.value">
							{{ item.name }}
						</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="item">
				<view class="a">商品分类<text>*</text></view>
				<view class="b roomCover" style="width: 350rpx;height: 40rpx;text-align: right;" @click="choseCategory">
					<text :style="{color: from.categoryIds? '#606266' : '#C7C7C7'}">
						{{from.categoryIds?category_name:'请选商品分类'}}</text>
					<u-icon name="arrow-right" color="#C7C7C7"></u-icon>
				</view>
			</view>
			<view class="item">
				<view class="a">运费模版<text>*</text></view>
				<view class="b" style="width: 350rpx;height: 40rpx;text-align: right;">
					<picker @change="changeDeliveryTemplate" mode="selector" placeholder="请选择运费模版"
						style="width: 350rpx;height: 40rpx;" range-key="name" :value="index" :range="deliveryTemplate">
						<text :style="{color: template_name? '#606266' : '#C7C7C7'}">
							{{template_name?template_name:'请选择运费模版'}}</text>
						<u-icon name="arrow-right" color="#C7C7C7"></u-icon>
					</picker>
				</view>
			</view>
			<view class="item">
				<view class="a">商品状态<text>*</text></view>
				<view class="b">
					<u-radio-group v-model="from.goods_status">
						<u-radio active-color='#F34A40' v-for="(item, index) in goodsStatus" :key="index"
							:name="item.value">
							{{ item.name }}
						</u-radio>
					</u-radio-group>
				</view>
			</view>
		</view>
		<view class="btnGroup">
			<view class="reset" @click="reset">
				重置
			</view>
			<view class="submit" @click="submit" style="margin-left:24upx;">
				确定
			</view>
		</view>
		<view class="look" @click="toback">
			查看采集列表
		</view>
		<category ref="category" :tabList='categoryList' @getChoseCategory="getChoseCategory"
			:activeIndex='activeIndex'></category>
	</view>
</template>

<script>
	import * as newFunApi from '@/api/newFun'
	import category from './components/category.vue'
	export default {
		components: {
			category
		},
		data() {
			return {
				afterSale: false,
				category_name: '',
				template_name: '',
				from: {
					goods_type: 10,
					urls: "",
					imageStorage: 10,
					goods_status: 10,
					delivery_id: '',
					categoryIds: '',
				},
				deliveryTemplate: [],
				goodsType: [{
						name: '实物商品',
						value: 10
					},
					{
						name: '虚拟商品',
						value: 20
					}
				],
				goodsStatus: [{
						name: '上架',
						value: 10
					},
					{
						name: '下架',
						value: 20
					}
				],
				goodsImage: [{
						name: '下载到本地',
						value: 10
					},
					{
						name: '使用源图片url',
						value: 20
					}
				],
				categoryList: [],
				activeIndex: []
			};
		},
		onLoad() {
			this.getCategory()
			this.getDelivery()
		},
		onReady() {},
		methods: {
			findElementsById(arr, ids) {
				let result = []
				arr.forEach(item => {
					if (ids.indexOf(item.category_id) > -1) {
						result.push(item.name);
					}
					item.children.forEach(item1 => {
						if (ids.indexOf(item1.category_id) > -1) {
							result.push(item1.name);
						}
					});
				});
				return result;
			},
			// 获取分类
			getChoseCategory(res) {
				let nameList = [];
				nameList = this.findElementsById(this.categoryList, res.category_id);
				this.category_name = nameList.join(',') + (nameList.length > 3 ? '等' : '');
				this.from.categoryIds = res.category_id;
				this.$refs.category.afterSale = false;
			},
			// 獲取运费模版
			async getDelivery() {
				let {
					status,
					message,
					data
				} = await newFunApi.deliveryall();
				this.deliveryTemplate = data.list
			},
			// 獲取分类
			async getCategory() {
				let {
					status,
					message,
					data
				} = await newFunApi.category();
				this.categoryList = data.list
			},
			reset() {
				this.from.goods_typ = 10;
				this.from.urls = "";
				this.from.imageStorage = 10;
				this.from.goods_status = 10;
				this.from.delivery_id = '';
				this.from.categoryIds = '';
			},
			choseCategory() {
				this.$refs.category.afterSale = true;
			},
			// 运费模板
			changeDeliveryTemplate(e) {
				this.from.delivery_id = this.deliveryTemplate[e.detail.value].delivery_id;
				this.template_name = this.deliveryTemplate[e.detail.value].name;

			},
			async submit() {
				let that = this
				if (!that.from.urls) {
					return that.$toast('请输入商品链接')
				}
				if (!that.from.categoryIds) {
					return that.$toast('请选择商品分类')
				}
				if (!that.from.delivery_id) {
					return that.$toast('请选择运费模版')
				}
				let {
					status,
					message,
					data
				} = await newFunApi.editCollector(this.from);
				if (status == 200) {
					uni.showToast({
						title: "保存成功"
					})
					uni.navigateBack()
				}
			},
			toback() {
				uni.navigateTo({
					url: '/pages/news/goods/oneGrounding'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.look {
		font-size: 30rpx;
		padding: 0rpx 50rpx 80rpx 0;
		text-align: right;
		color: #409eff;
	}

	.btnGroup {
		margin: 60rpx 50rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.reset {
			width: 300upx;
			height: 80upx;
			background: #E9E9E9;
			border-radius: 22px 22px 22px 22px;
			opacity: 1;

			font-size: 28upx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #585858;
			line-height: 80upx;
			text-align: center;
		}

		.submit {
			width: 300upx;
			height: 80upx;
			background: linear-gradient(180deg, #FD5D06 0%, #F3211A 100%);
			border-radius: 50px 50px 50px 50px;
			opacity: 1;

			font-size: 28upx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 80upx;
			text-align: center;

		}
	}

	.goods {
		padding: 0 0 130rpx;
		overflow: hidden;
		margin-top: 12rpx;

		&-top {
			background-color: #fff;
			padding: 40rpx 15rpx;
			overflow: hidden;
			margin-bottom: 20rpx;

			input {
				display: block;
				line-height: 60rpx;
				font-size: 28rpx;
				color: #212121;
			}

			.btn {
				width: 158rpx;
				line-height: 50rpx;
				background: #FF5050;
				border-radius: 50rpx;
				text-align: center;
				font-size: 24rpx;
				font-weight: 500;
				color: #FFFFFF;
				float: right;

			}
		}

		&-hd {
			background-color: #fff;
			padding: 0 25rpx 0;
			overflow: hidden;
			margin-bottom: 20rpx;

			.item {
				padding: 30rpx 20rpx;
				line-height: 50rpx;
				font-size: 28rpx;
				color: #212121;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #F7F7F7;

				.b1 {
					::v-deep .u-input {
						width: 500rpx !important;
					}
				}

				.a {
					text {
						color: #F34A40;
						margin-left: 5rpx;
					}
				}

				.b {
					font-size: 28rpx;
					color: #606266;
					display: flex;
					align-items: center;
					justify-content: flex-end;

					input {
						font-size: 28rpx;
						color: #6D6D6D;
						flex: 1;
						line-height: 50rpx;
						font-size: 28rpx;
						text-align: right;
						margin-right: 10rpx;
					}

					.select {
						width: 100%;
						display: flex;
						align-items: center;
						color: #C7C7C7;
						justify-content: flex-end;

						&-on {
							color: #212121;
						}
					}
				}
			}

			.items {
				padding: 20rpx 30rpx;
				line-height: 50rpx;
				font-size: 28rpx;
				color: #212121;
				border-bottom: 1px solid #F7F7F7;

				.t {
					width: 480rpx;
					height: 40rpx;
					padding-left: 30rpx;
					font-size: 28rpx;
					color: #212121;
					margin-top: 5rpx;
				}

				.a {
					flex: 1;
					display: flex;
					align-items: center;

					input {
						flex: 1;
						font-size: 26rpx;
						color: #212121;
						line-height: 50rpx;
						margin-left: 20rpx;
					}

					text {
						color: #F34A40;
						margin-left: 5rpx;
					}

					.select {
						flex: 1;
					}

					.tip {
						margin-left: 15rpx;
						font-size: 24rpx;
						font-weight: 500;
						color: #9F9F9F;
					}
				}

				.b {
					padding-top: 20rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #C7C7C7;
				}

				.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;

						image {
							width: 50rpx;
							height: 50rpx;
							margin-top: 30rpx;
						}
					}
				}
			}

		}

		&-fd {
			width: 100%;
			position: fixed;
			left: 0;
			bottom: 0;
			padding: 30rpx;
			z-index: 99;
			background-color: #fafafa;
			box-sizing: border-box;

			.btn {
				width: 630rpx;
				line-height: 88rpx;
				background: #F34A40;
				border-radius: 88rpx;
				text-align: center;
				font-size: 28rpx;
				font-weight: 500;
				color: #FFFFFF;
			}
		}

		&-classify {
			width: 100%;
			overflow: hidden;

			&-hd {
				padding: 30rpx 60rpx;
				position: relative;
				font-size: 32rpx;
				font-weight: 500;
				color: #303030;
				text-align: center;

				.a {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					font-weight: 500;
					color: #FF624F;
					position: absolute;
					top: 30rpx;
					left: 40rpx;
					z-index: 2;
				}
			}

			&-bd {
				overflow: hidden;
				display: flex;
				align-items: flex-start;

				.l {
					width: 210rpx;
					height: 560rpx;
					background-color: #fff;

					.item {
						text-overflow: ellipsis;
						overflow: hidden;
						height: 80rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #303030;
						white-space: nowrap;
						line-height: 80rpx;
						padding-left: 30rpx;
						box-sizing: border-box;

						&-on {
							background-color: #fff;
							font-weight: 500;
						}
					}
				}

				.m {
					width: 100%;
					text-align: center;
					max-height: 560rpx;

					.item {
						text-overflow: ellipsis;
						overflow: hidden;
						height: 70rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #303030;
						white-space: nowrap;
						line-height: 70rpx;
						box-sizing: border-box;

						&-on {
							color: #FF624F;
						}
					}
				}

				.r {
					width: 540rpx;
					height: 560rpx;

					.item {
						text-overflow: ellipsis;
						overflow: hidden;
						height: 80rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #303030;
						white-space: nowrap;
						line-height: 80rpx;
						padding-left: 80rpx;
						box-sizing: border-box;

						&-on {
							color: #FF624F;
						}
					}
				}
			}
		}
	}

	::v-deep .u-list-item {
		margin: 10rpx 20rpx 10rpx 0 !important;
	}

	::v-deep .uni-textarea {
		max-height: 100rpx !important;
	}

	::v-deep .uni-input-placeholder {
		color: #C7C7C7 !important;
	}

	.roomCover {
		overflow: hidden;

		text {
			text-overflow: ellipsis;
			white-space: nowrap;
			-webkit-line-clamp: 1;
			max-width: 400rpx;
			overflow: hidden;
			white-space: nowrap;
		}
	}
</style>