demingshangjia/pages/release/index.vue

<template>
	<view id="release">
		<u-form :model="form" ref="uForm">
			<u-form-item label="标题" label-position="right"><u-input v-model="form.name" placeholder="请输入标题" /></u-form-item>
			<!-- form-data -->
			<view class="titles">封面</view>
			<u-upload
				:form-data="coverformdata"
				:max-count="1"
				:header="header"
				name="article_cover"
				:action="action"
				del-color="#ececec"
				upload-text="选择图片"
				del-bg-color="#fff"
				:file-list="fileListA"
				@on-success="uploadcover"
			></u-upload>
			<view class="titles">图片</view>
			<u-upload
				:form-data="imgformdata"
				name="article_image"
				:header="header"
				:action="action"
				@on-success="uploadphoto"
				del-color="#ececec"
				upload-text="选择图片"
				del-bg-color="#fff"
				:max-count="5"
				:file-list="fileListB"
			></u-upload>
			<!-- 标签 -->
			<view>
				<view class="titles flex-title">
                    <text>标签</text>
                    <text @click="editing">{{ is_edit ? "取消编辑" : "编辑" }}</text>
                </view>
				<view class="form-view active" @click="show_add()">+ 新建标签</view>
				<view :class="['form-view', item.state == true ? 'active' : '']" v-for="(item, index) in fileListes" :key="index" @click="changeselect(index)">
					{{ item.name }}
                    <u-icon v-show="is_edit && item.user_id != 0" class="close" name="close" color="#666" size="18" @click="isTable(item.id,index)"></u-icon>
				</view>
			</view>
			<!-- 简介 -->
			<view class="titles">简介</view>
			<view class="titles_border"><textarea placeholder="请输入内容..." v-model="form.intro"></textarea></view>
			<!-- 底部弹框 商品选择 -->
			<view class="show_two">
				<u-popup v-model="show_two" mode="bottom" :closeable="true">
					<view class="title"><text>选择商品</text></view>
					<!-- 商品列表 -->
					<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll">
						<view class="listes_shoping" v-for="(item, index) in list" :key="index">
							<view>
								<u-checkbox-group>
									<u-checkbox
										shape="circle"
										size="40"
										active-color="#FF780F"
										v-model="item.checked"
										:name="index"
										@change="checkboxChange"
									></u-checkbox>
								</u-checkbox-group>
							</view>
							<view><image :src="item.goods_image" mode="widthFix"></image></view>
							<view class="contentes">{{ item.goods_name }}</view>
						</view>
					</scroll-view>

					<!-- 提交按钮 -->
					<view class="u-button" @click="changes()">确定</view>
				</u-popup>
				<!-- 底部选择商品列表 -->
				<view @click="show_two = true">
					选择商品
					<image class="images" src="../../static/image/tosign/bhottom.png"></image>
				</view>
				<!-- 选择后的列表 -->
				<view class="List_tosign" v-for="list in shoplist">
					<view><image :src="list.goods_image" mode="scaleToFill"></image></view>
					<view>{{ list.goods_name }}</view>
					<view><image src="../../static/image/tosign/delete.png" mode="widthFix" @click="delarr(list.goods_id)"></image></view>
				</view>
			</view>
			<!-- 提交 -->
			<u-button :hair-line="false" class="custom-style" shape="circle" size="default" @click="publish">发表</u-button>
		</u-form>
		<!-- 添加标签的按钮 -->
		<u-popup v-model="show" mode="center" border-radius="14">
			<view class="text">创建属于你的标签吧</view>
			<view class="u-inputes"><u-input v-model="tagcontent" /></view>
			<u-button :hair-line="false" class="custom-style-button" shape="circle" size="default" @click="addLiveSpec">确定</u-button>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			form: {
				name: '',
				intro: '',
				sex: ''
			},
			// 演示地址，请勿直接使用
			action: 'http://mall.dmygkeji.com/storeapi/Upload/uploadFile',
			coverformdata: {
				name: 'article_cover'
			},
			imgformdata: {
				name: 'article_image'
			},
			fileListA: [],
			fileListB: [],
			imgarrA: [],
			imgarrB: [],
			header: {
				Authorization: 'Bearer' + ' ' + uni.getStorageSync('token')
			},
			fileListes: [],
			show: false,
			show_two: false,
			filesList: [],
			arres_list: [],
			shoplist: [],
			checked: false,
			list: [],
			List_tosign: [],
			flagA: true,
			flagB: false,
			scrollTop: 0,
			imgarr: [], //上传图片数组
			cover: '', //图文封面
			selectarr: [], //选中标签
			tagcontent: '',
            is_edit: false, // 编辑
		};
	},
	onLoad() {
		// 缓存取选择好的数据
		this.tosign();
		this.getLiveSpec();
	},
	methods: {
		publish() {
			let arr = this.imgarrB;
			let newarr = [];
			for (let index in arr) {
				newarr.push(arr[index].file_id);
			}
			console.log(this.imgarrA);
			this.$u.api
				.publishphoto({
					article_title: this.form.name,
					article_content: this.form.intro,
					article_pic: this.imgarrA[0].file_name,
					file_id: newarr,
					goods_id_arr: this.arres_list,
					label_arr: this.selectarr
				})
				.then(res => {
					if (res.errCode != 0) {
						this.$refs.uToast.show({
							title: res.message,
							type: 'error'
						});
					} else {
						this.$refs.uToast.show({
							title: res.message,
							type: 'success'
						});
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							});
						}, 1000);
					}
				});
		},
		// 获取商品数组变化
		getshoplist(id) {
			let arr = this.arres_list;
			let newarr = this.list;
			this.shoplist = [];
			for (let index in arr) {
				for (let i in newarr) {
					if (arr[index] == newarr[i].goods_id) {
						this.shoplist.push(newarr[i]);
					}
				}
			}
			console.log(this.shoplist)
		},
		// 改变选中状态
		changeselect(num) {
			if (this.fileListes[num].state == true) {
				this.fileListes[num].state = false;
				let index = this.selectarr.indexOf(this.fileListes[num].id);
				this.selectarr.splice(index, 1);
			} else {
				this.fileListes[num].state = true;
				this.selectarr.push(this.fileListes[num].id);
			}
		},
		// 获取标签
		getLiveSpec() {
			let that = this;
			this.$u.api.getLiveSpec({}).then(res => {
				if (res.errCode != 0) {
					this.$refs.uToast.show({
						title: res.message,
						type: 'error'
					});
				} else {
					let arr = res.data;
					for (let index in arr) {
						arr[index].state = false;
					}
					that.fileListes = arr;
				}
			});
		},
		// 创建标签
		addLiveSpec() {
			this.$u.api
				.createLivesp({
					spec_name: this.tagcontent
				})
				.then(res => {
					if (res.errCode != 0) {
						this.$refs.uToast.show({
							title: res.message,
							type: 'error'
						});
					} else {
						this.tagcontent = '';
						this.show = false;
                        this.fileListes.push(res.data);
						this.$refs.uToast.show({
							title: res.message,
							type: 'success'
						});
					}
				});
		},
        // 删除标签
        isTable(id,index) {
            uni.showModal({
                title: "提示",
                content: "是否删除此标签？",
                success: (res) => {
                    console.log();
                    if (res.confirm) {
                        this.delTable(id,index);
                    }
                }
            })
        },
        delTable(id,index) {
            let me = this;
            this.$u.post("Streaming/deltLabel", {label_id: id}).then(res => {
                if (res.errCode == 0) {
                    this.$refs.uToast.show({
                    	title: res.message,
                    	type: 'success'
                    });
                    this.fileListes.splice(index,1);
                }
            })
        },
		// 上传封面
		uploadcover(data) {
			console.log(data);
			if (data.errCode != 0) {
				this.$refs.uToast.show({
					title: '上传失败',
					type: 'error'
				});
			} else {
				let obj = data.data;
				obj.url = obj.file_path;
				this.imgarrA.push(obj);
			}
		},
		// 上传图片
		uploadphoto(data) {
			if (data.errCode != 0) {
				this.$refs.uToast.show({
					title: '上传失败',
					type: 'error'
				});
			} else {
				let obj = data.data;
				obj.url = obj.file_path;
				this.imgarrB.push(obj);
			}
		},
		changes() {
			let that = this;
			that.show_two = false;
		},
		show_add() {
			this.show = !this.show;
		},
        // 编辑标签
        editing() {
            this.is_edit = !this.is_edit;
        },
		// 选中某个复选框时，由checkbox时触发
		checkboxChange(e) {
			let that = this;
			let num =Number(e.name) 
			if (e.value == true) {
				that.pushes(that.list[num].goods_id);
				that.list[num].checked=true
			} else {
				that.delarr(that.list[num].goods_id);
				that.list[num].checked=false
			}
		},
		// 删除直播商品
		delarr(id) {
			var that = this;
			if (id == '') {
				console.log('为空');
			} else {
				let index = that.arres_list.indexOf(id);
				that.arres_list.splice(index, 1);
				that.getshoplist();
			}
		},
		// 增加直播商品
		pushes(id) {
			var that = this;
			if (id == '') {
				console.log('为空');
			} else {
				that.arres_list.push(id);
				that.getshoplist();
			}
		},
		tosign() {
			this.$u.api.canselectgood({}).then(res => {
				if (res.data.live_stataes == 0) {
					this.$u.route({
						url: `/pages/${url}`
					});
				} else {
					let arr = res.data.list;
					for (let index in arr) {
						arr[index].checked = false;
					}
					this.list = arr;
				}
			});
			// try {
			// 	const value = uni.getStorageSync('list_tosign');
			// 	if (value) {
			// 		console.log(value);
			// 	}
			// } catch (e) {
			// 	// error
			// }
		}
	}
};
</script>

<style lang="scss" scoped>
#release {
	width: 690rpx;
	margin: 0 auto;
	padding-bottom:20rpx;
    .flex-title {
        display: flex;
        justify-content: space-between;
    }
	.form-view {
		display: inline-block;
		padding: 8rpx 20rpx;
		margin-right: 20rpx;
		margin-bottom: 28rpx;
		font-size: 24rpx;
		color: #fff;
		border-radius: 6rpx;
		background-color: #cdc7c8;
        .close {
            margin-left: 10rpx;
            vertical-align: middle;
        }
	}
	.active {
		background-color: #ff780f;
	}
	.scroll {
		width: 100%;
		height: 400px;
	}
	.titles {
		font-size: 30rpx;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		margin: 30rpx 0;
	}

	textarea {
		font-size: 26rpx;
	}

	.custom-style {
		background: rgba(255, 120, 15, 1) !important;
		color: #fff !important;
		font-size: 36rpx;
	}

	.custom-style-button {
		background: rgba(255, 120, 15, 1) !important;
		color: #fff !important;
		font-size: 28rpx;
		width: 200rpx;
		margin-bottom: 23rpx;
		line-height: 60rpx;
		height: 60rpx;
	}

	.show_two .title {
		width: 100%;
		border-bottom: solid 1px #ececec;
		margin-bottom: 30rpx;
	}

	.show_two .title > text {
		font-size: 30rpx;
		padding: 30rpx;
		display: block;
	}

	.listes_shoping {
		overflow: hidden;
		zoom: 1;
		margin-bottom: 30rpx;
		height: 160rpx;
		position: relative;
	}

	.listes_shoping > view {
		float: left;
	}

	.listes_shoping > view:nth-child(1) {
		width: 36rpx;
		height: 36rpx;
		margin-top: 62rpx;
		margin-left: 30rpx;
	}

	.listes_shoping > view:nth-child(2) {
		width: 180rpx;
		height: 160rpx;
		margin: 0 31rpx 0 19rpx;
	}

	.listes_shoping > view:nth-child(2) image {
		width: 100%;
	}

	.listes_shoping > view:nth-child(3) {
		width: 425rpx;
		margin-top: 43rpx;
		overflow: hidden;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.u-button {
		background: #ff780f;
		width: 690rpx;
		height: 98rpx;
		line-height: 98rpx;
		background: rgba(255, 120, 15, 1);
		border-radius: 49px;
		font-size: 36rpx;
		color: #ffffff;
		text-align: center;
		margin: 0 auto 20rpx;
	}
}

.u-mode-center-box {
	padding: 120rpx;

	.text {
		font-size: 30rpx;
		margin-top: 74rpx;
		text-align: center;
		font-weight: 500;
		color: #333;
	}
}
.u-btn {
	width: 628rpx;
	height: 98rpx;
	background: rgba(255, 120, 15, 1) !important;
	border-radius: 49rpx;
	margin: 0 auto;
	font-size: 36rpx;
	color: rgba(255, 255, 255, 1) !important;
	line-height: 36px;
	border: 1px #ff780f solid;
	outline: none;
	border-color: rgba(255, 120, 15, 1) !important;
}
.custom-style-button {
	background: rgba(255, 120, 15, 1) !important;
	color: #fff !important;
	font-size: 28rpx;
	width: 200rpx;
	margin-bottom: 23rpx;
	line-height: 60rpx;
	height: 60rpx;
}

.titles_border,
.uni-textarea-compute {
	border: 1px #bababa solid !important;
	padding: 10rpx;
	border-radius: 10rpx;
}

.u-inputes {
	margin: 30rpx 0;
	border: 1px #ececec solid;
	padding-left: 14rpx;
	width: 420rpx;
}

.show_two {
	padding: 30rpx 0 70rpx 0;
}

.show_two > view {
	font-size: 30rpx;
	font-weight: 400;
	color: rgba(51, 51, 51, 1);
}

.show_two .images {
	width: 22rpx;
	height: 12rpx;
	float: right;
	top: 14rpx;
}
.List_tosign {
	overflow: hidden;
	zoom: 1;
	margin-top: 21rpx;
	position: relative;
}
.List_tosign > view {
	float: left;
}
.List_tosign > view:nth-child(1) {
	width: 180rpx;
	height: 160rpx;
	margin-bottom: 30rpx;
	image {
		border-radius: 15rpx;
		width: 100%;
		height: 100%;
	}
}
.List_tosign > view:nth-child(2) {
	width: 420rpx;
	height: 76rpx;
	margin: 43rpx 43rpx 0 21rpx;
}
.List_tosign > view:nth-child(3) {
	width: 26rpx;
	height: 27rpx;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	image {
		width: 100%;
		height: 100%;
		display: block;
	}
}
</style>