mianxueyoupin/pages/apps/find/user/add.vue

<template>
	<view class="wanlfind-add-container">
		<view class="edgeInsetTop"></view>
		<view class="wanlfind-add-container__main">
			<!-- 发布种草 -->
			<view  class="want">
				<view class="padding-bj flex justify-between align-center">
					<view class="text-30">上传图片</view>
				</view>
				<view class="grid col-4 grid-square flex-sub padding-lr-bj">
					<view
						v-if="params.images.length > 0"
						v-for="(item, index) in params.images"
						:key="index"
					>
						<view class="item" @tap="handlePreview(index)">
							<image :src="$wanlshop.oss(item, 100, 100)" mode="widthFix"></image>
						</view>
						<view class="tag" @tap="handleDelImage(index)">
							<text class="wlIcon-31guanbi text-white"></text>
						</view>
					</view>
					<view v-if="params.images.length < 9" @tap="handleImage()">
						<view class="item">
							<view class="text-lg text-gray">
								<text class="wlIcon-tianjia"></text>
								<view v-if="params.images.length === 0" class="margin-top-xs text-sm">添加图片</view>
								<view v-else class="margin-top-xs text-sm">继续添加</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 种草内容 -->
				<view class="padding-bj flex justify-between align-center">
					<view class="text-30">
						<text class="wlIcon-xiugaioryijian margin-right-xs text-bold"></text>
						种草内容
					</view>
				</view>
				<view class="padding-bj bg-gray margin-lr-bj radius-bock">
					<editor
						id="editor"
						@ready="onEditorReady"
						@input="onEditorInput"
						placeholder="编辑种草文案~"
					/>
				</view>
			</view>
			<!-- 发布视频 -->
			<view  class="video">
				<view class="padding-bj flex">
					<view
						class="upload margin-right-bj flex align-center justify-center radius-bock bg-gray"
					>
						<view v-if="video.tempFilePath" @tap="handleVideo">
							<!-- #ifdef APP-PLUS -->
							<video class="radius-bock" :controls="false" :show-center-play-btn="false" :src="video.tempFilePath" object-fit="fill" autoplay muted/>
							<!-- #endif -->
							<!-- #ifndef APP-PLUS -->
							<video class="radius-bock" :controls="false" :show-center-play-btn="false" :src="video.tempFilePath" object-fit="cover" />
							<!-- #endif -->
						</view>
						<block v-else>
							<view v-if="video.progress === 0 && video.progress !== 100" class="text-lg text-gray text-center" @tap="handleVideo">
								<text class="wlIcon-tianjia"></text>
								<view class="margin-top-xs text-sm">添加视频</view>
							</view>
						</block>
						<view v-if="video.progress > 0 && video.progress !== 100" class="loading flex align-center justify-center">
							<view class="text-xxl text-gray text-center">
								<text class="wlIcon-jiazai wlIconfont-spin"></text>
								<view class="margin-top-xs text-min">
									{{$wanlshop.conver(video.totalBytesSent, false)}}/{{$wanlshop.conver(video.totalBytesExpectedToSend)}}
								</view>
							</view>
						</view>
					</view>
					<editor
						id="editor"
						@ready="onEditorReady"
						@input="onEditorInput"
						placeholder="给视频添加标题，提升曝光率获取更多赞赏~"
					/>
				</view>
			</view>
			<!-- 选择商品 -->
			<view class="solid-top">
				<view class="padding-bj flex justify-between align-center" @tap="handleGoods()">
					<view class="text-30">
						<text class="wlIcon-goods margin-right-xs text-bold"></text>
						选择商品
					</view>
					<view class="text-30"><text class="wlIcon-fanhui2"></text></view>
				</view>
				<view class="grid col-4 grid-square flex-sub padding-lr-bj">
					<view v-if="chooseList.length === 0" @tap="handleGoods()">
						<view class="item">
							<view class="text-lg text-gray">
								<text class="wlIcon-tianjia"></text>
								<view class="margin-top-xs text-sm">添加商品</view>
							</view>
						</view>
					</view>
					<view
						v-if="chooseList.length > 0"
						v-for="(item, index) in chooseList"
						:key="index"
						@tap="handleGoods()"
					>
						<view class="item">
							<image
								:src="$wanlshop.oss(item.image, 100, 100)"
								mode="widthFix"
							></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<view class="safeAreaBottom"></view>
		<view class="wanlfind-add-container__foot">
			<view class="cu-bar tabbar foot flex flex-direction">
				<button class="cu-btn bg-red lg" @tap="handleSubmit">
					<text class="wlIcon-fabu margin-right-sm"></text>
					发布{{ params.type === 'want' ? '种草' : '短视频' }}
				</button>
			</view>
		</view>
		<!-- 模态框 -->
		<view class="wanlfind-add-container__modal">
			<view
				class="cu-modal bottom-modal"
				:class="modalName == 'goods' ? 'show' : ''"
				@tap="handleHideModal"
			>
				<view class="cu-dialog bg-bgcolor" @tap.stop="">
					<view class="wanl-modal">
						<view class="head padding-bj">
							<view class="content"><view class="text-lg">购买过的商品</view></view>
							<view class="close wlIcon-31guanbi" @tap="handleHideModal"></view>
						</view>
						<scroll-view class="scroll-y" scroll-y @scrolltoupper="handleUpper">
							<wanl-empty v-if="orderList.length === 0 && status !== 'loading'" text="还没有购买过任何商品"/>
							<view v-if="orderList.length > 0">
								<view
									class="item bg-white padding-bj margin-bottom-bj radius-bock"
									v-for="(item, index) in orderList"
									:key="index"
									@tap="handleChoose(index)"
								>
									<image
										class="radius margin-right-bj"
										:src="$wanlshop.oss(item.image, 100, 100)"
										mode="aspectFill"
									></image>
									<view class="details margin-right-bj">
										<view class="text-cut-2 text-sm">
											<text>{{ item.title }}</text>
										</view>
										<view class="text-orange">
											<text class="text-price">{{ item.price }}</text>
										</view>
									</view>
									<view class="flex align-center text-xxl">
										<text
											v-if="item.choose"
											class="wlIcon-xuanze-danxuan text-red"
										/>
										<text v-else class="wlIcon-xuanze text-gray" />
									</view>
								</view>
							</view>
							<uni-load-more :status="status" :content-text="contentText" />
						</scroll-view>
						<view class="foot padding-lr-bj">
							<button class="cu-btn bg-red text-bold complete" @tap="handleHideModal">
								完成
							</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			modalName: null,
			orderList: [],
			current_page: 1, //当前页码
			last_page: 1, //总页码
			status: 'loading',
			contentText: {
				contentdown: '下拉加载更多',
				contentrefresh: '加载中...',
				contentnomore: ''
			},
			chooseList: [],
			video:{
				tempFilePath: null, // 本地缓存
				progress: 0, //上传进度
				totalBytesSent: 0, //已经上传的数据长度
				totalBytesExpectedToSend: 0, //预期需要上传的数据总长度
			},
			params: {
				type: null,
				content: '',
				goods_ids: [],
				video_id: null,
				images: []
			},
		};
	},
	onLoad(option) {
		this.params.type = option.type;
	},
	methods: {
		// 发布
		async handleSubmit() {
			const params = this.params;
			if(params.type === 'video'){
				const video = this.video;
				// 判断视频是否上传完成
				if(video.tempFilePath === null ||  params.video_id === null ){
					this.$wanlshop.msg('请上传视频');
					return;
				}else{
					if(video.progress === 0){
						this.$wanlshop.msg('异常请重开此页面');
						return;
					}
					if(video.progress < 100 || video.totalBytesSent !== video.totalBytesExpectedToSend){
						this.$wanlshop.msg('视频还没有上传完成哦~');
						return;
					}
				}
				if(!params.content){
					this.$wanlshop.msg('请编辑视频标题~');
					return;
				}
			}else if(params.type === 'want'){
				if(params.images.length === 0){
					this.$wanlshop.msg('至少添加一张图片');
					return;
				}
				if(!params.content){
					this.$wanlshop.msg('请编辑种草详情~');
					return;
				}
			}
			if(params.goods_ids.length === 0){
				this.$wanlshop.msg('至少选择一个商品');
				this.handleGoods();
				return;
			}
			await uni.request({
				url: '/wanlshop/find/find/addData',
				method: 'POST',
				data: params,
				success: res => {
					this.$wanlshop.msg('发布成功！');
					this.$wanlshop.to('/pages/page/success?type=find');
				}
			});
		},
		// 选择视频
		handleVideo(e) {
			uni.chooseVideo({
				success: ch => {
					let name = ch.name ? ch.name : `${this.$wanlshop.guid(12)}.mp4`;
					uni.request({
						url: '/wanlshop/video/getUploadProof',
						data: {
							name: name,
						},
						success: sts => {
							const uploadTask = uni.uploadFile({
								url: sts.data.ossUrl, 
								filePath: ch.tempFilePath,
								name: sts.data.file,
								formData: sts.data.formData,
								success: upload => {
									if(upload.statusCode === 200){
										this.params.video_id = sts.data.videoId;
										this.video.tempFilePath = ch.tempFilePath;
									}else{
										this.params.video_id = null;
										this.video.tempFilePath = null;
										this.$wanlshop.msg('视频点播接口异常');
									}
								},
								fail: (res) => {
									console.info(res);
								}
							});
							uploadTask.onProgressUpdate((res) => {
								this.video.progress = res.progress;
								this.video.totalBytesSent = res.totalBytesSent;
								this.video.totalBytesExpectedToSend = res.totalBytesExpectedToSend;
							});
						}
					});
				}
			});
		},
		handleImage() {
			uni.chooseImage({
				crop: {
					quality: 60
				},
				success: res => {
					uni.request({
						url: '/wanlshop/common/uploadData',
						success: updata => {
							for (let i = 0; i < res.tempFilePaths.length; i++) {
								// 读取图片宽高
								uni.getImageInfo({
									src: res.tempFilePaths[i],
									success: image => {
										uni.uploadFile({
											url: updata.data.uploadurl,
											filePath: image.path,
											name: 'file',
											formData:updata.data.storage == 'local' ? null : updata.data.multipart,
											success: data => {
												this.params.images.push(JSON.parse(data.data).data.url);
											},
											fail: error =>{
												uni.showToast({title: JSON.parse(error.data).msg, icon: 'error', position: true});
											}
										});
									}
								});
							}
						}
					});
				}
			});
		},
		handlePreview(index) {
			let imgArr = [];
			for (let item of this.params.images) {
				imgArr = imgArr.concat(this.$wanlshop.oss(item, 500));
			}
			uni.previewImage({
				urls: imgArr,
				current: imgArr[index],
				indicator: 'number'
			});
		},
		handleDelImage(index) {
			this.params.images.splice(index, 1);
		},
		handleUpper() {
			if (this.last_page === this.current_page) {
				this.status = 'noMore';
			} else {
				this.status = 'loading';
				this.current_page++;
				this.handleGoods('upper');
			}
		},
		handleGoods(type) {
			this.modalName = 'goods';
			if (this.orderList.length > 0 && type !== 'upper') {
				return;
			}
			uni.request({
				url: '/wanlshop/order/getBuyList',
				data: {
					page: this.current_page
				},
				success: res => {
					this.last_page = res.data.last_page; // 总页码
					this.current_page = res.data.current_page; // 当前页面
					if (res.data.last_page === res.data.current_page) {
						this.status = 'noMore';
					} else {
						this.status = 'more';
					}
					if (res.data.total === 0) {
						this.status = 'noMore';
					}
					this.orderList = type === 'upper' ? this.orderList.concat(res.data.data) : res.data.data;
				}
			});
		},
		handleHideModal() {
			this.modalName = null;
		},
		handleChoose(index) {
			if (this.chooseList.length >= 8) {
				this.$wanlshop.msg('最多选择 8 个商品');
			} else {
				let goods = this.orderList[index];
				if (!goods.choose) {
					this.$set(goods, 'choose', true);
				} else {
					goods.choose = false;
				}
				this.formatGoods();
			}
		},
		formatGoods() {
			var list = [];
			var ids = [];
			this.orderList.map(item => {
				if (item.choose) {
					list.push(item);
					ids.push(item.id);
				}
			});
			this.chooseList = list;
			this.params.goods_ids = ids;
		},
		onEditorInput(e) {
			this.params.content = e.detail.html;
		},
		onEditorReady() {
			// #ifdef MP-BAIDU
			this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editorId');
			// #endif

			// #ifdef APP-PLUS || H5 ||MP-WEIXIN
			uni.createSelectorQuery()
				.select('#editor')
				.context(res => {
					this.editorCtx = res.context;
				})
				.exec();
			// #endif
		}
	}
};
</script>

<style lang="scss">
.wanlfind-add-container {
	&__main {
		.video {
			.upload {
				position: relative;
				width: 220rpx;
				height: 300rpx;
				video{
					width: 220rpx;
					height: 300rpx;
				}
				.loading{
					position: absolute;
					top: 0;
					bottom: 0;
					right: 0;
					left: 0;
				}
			}
			#editor {
				flex: 1;
				height: 240rpx;
				min-height: 100rpx;
			}
		}
		.grid {
			position: relative;
			.item {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				z-index: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				text-align: center;
				border-radius: 18rpx;
				overflow: hidden;
				background-color: #f0f0f0;
			}
			.tag {
				position: absolute;
				top: 0rpx;
				right: 0rpx;
				z-index: 3;
				width: 40rpx;
				height: 40rpx;
				border-radius: 5500rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				text-align: center;
				overflow: hidden;
				background-color: #e6162c;
			}
		}
	}
	&__foot {
		.tabbar {
			z-index: 10;
			background-color: transparent;
			.cu-btn {
				width: calc(100% - 50rpx);
				font-size: 32rpx;
				height: 86rpx;
			}
		}
	}
	&__modal {
		.scroll-y {
			padding-bottom: 0;
			.item {
				display: flex;
				image {
					width: 120rpx;
					height: 120rpx;
					flex-shrink: 1;
				}
				.details {
					& > view {
						width: 100%;
					}
					flex: 1;
					display: flex;
					flex-wrap: wrap;
					align-content: space-between;
				}
			}
		}
	}
}
</style>