shop-applet/pages/product/addGood/components/commodity.vue

<template>
	<view class=" writeBg  ">

		<view class="content_list">
			<view class="content_list_item">
				<view>商品详情</view>
			</view>
			<input-goods-detils class="input-goods-detils" @getProductContent="getProductContent" :title="store_name"
				:prodectContent="goodsDis" :maxLength="200"></input-goods-detils>
			<block v-if="!moreThanFlag">
				<view class="content_list_video input-goods-detils">
					<view class="content_list_video_title">商品视频</view>
					<view class="video_list">
						<view class="video_list_item photo" v-if="addGoodsSecoundData.video_link">
							<view class="jiao" @click="deleteImage()">
								<!-- video标签在app端层级过高 -->
								<!--#ifndef APP-PLUS-->
								<video :src="addGoodsSecoundData.video_link"></video>
								<!--#endif-->
								<!--#ifdef APP-PLUS-->
								<img src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/3/video_bg.png"
									style=" width:150rpx"></img>
								<!--#endif-->
								<image src="../../static/images/close.png" mode="widthFix"></image>
							</view>

							<!--#ifndef APP-PLUS-->
							<view style="position: absolute;">
								<view class="videoHover" @click="videoshow">
								</view>
								<text class="video-text">点击可预览视频</text>
							</view>
							<!--#endif-->

							<!--#ifdef APP-PLUS-->
							<view class='preview_video'>
								<view class="videoHover" @click="videoshow">
								</view>
								<text class="video-text">点击可预览视频</text>
							</view>
							<!--#endif-->
						</view>
						<view class="photo" @click="uploadVideo" v-else>
							<view>
								<image src="../../static/images/creamer.png" mode="widthFix"></image>
							</view>
							<view>添加视频</view>
						</view>
					</view>
				</view>
				<view class="container_input marginTop_none input-goods-detils">
					<view class="container_input_item">
						<view class="container_input_item_label"><span>是否推荐</span></view>
						<view class="container_input_item_value">
							<switch :checked="addGoodsSecoundData.is_good == 1" color="#E93323"
								style="transform:scale(0.8)" @change="isGood" />
						</view>
					</view>
					<!-- <view class="container_input_item">
            <view class="container_input_item_label"><span>是否开启礼包</span></view>
            <view class="container_input_item_value">
              <switch :checked="addGoodsSecoundData.is_gift_bag == 1" color="#E93323" style="transform:scale(0.8)"
                @change="isGiftBag" />
            </view>
          </view> -->
				</view>
				<!-- <view class="tip input-goods-detils">
          <span class="iconfont">&#xe688;</span>
          <span>开启后此商品只能在分销礼包中展示并销售</span>
        </view> -->
				<view class="container_input marginTop_none input-goods-detils">
					<!-- <view class="container_input_item">
            <view class="container_input_item_label"><span>限购数量</span></view>
            <view class="container_input_item_value">
              <input v-model="addGoodsSecoundData.once_count" type="number" value="" placeholder="请输入限购数量"
                placeholder-class="inputPlaceHolder" />
            </view>
          </view> -->
					<view class="container_input_item">
						<view class="container_input_item_label"><span>商品排序</span></view>
						<view class="container_input_item_value">
							<input v-model="addGoodsSecoundData.sort" type="number" value="" placeholder="请输入商品排序"
								placeholder-class="inputPlaceHolder" />
						</view>
					</view>
				</view>
			</block>
			<view class="more_than" @click="moreThanFlag=!moreThanFlag">
				<view v-if="moreThanFlag">更多</view>
				<view v-else>收起</view>
			</view>
		</view>
		<view v-if="showVideo" class="video-count">
			<!--#ifndef APP-PLUS-->
			<video id="myVideo" class="videoLink" autoplay loop muted :src="addGoodsSecoundData.video_link"></video>
			<!--#endif-->
			<!--#ifdef APP-PLUS-->

			<video id="myVideo" class="videoLink" autoplay loop
				:src='addGoodsSecoundData.video_link && (addGoodsSecoundData.video_link.substring(0,4) == "http" || addGoodsSecoundData.video_link.substring(0,5) == "https") ?addGoodsSecoundData.video_link : "http:" + addGoodsSecoundData.video_link'></video>
			<!--#endif-->
		</view>
		<view class='mask' catchtouchmove="true" :hidden='showVideo==false' @tap="showVideo=false"></view>
	</view>
</template>
<script>
	import {
		TOKENNAME,
		HTTP_REQUEST_URL
	} from '@/config/app.js';
	import store from 'store';
	import {
		navigateTo,
		setStorage,
		getStorage,
		removeStorage,
		navigateBack,
		Toast,
		Loading,
		hideLoading,
		Modal
	} from '@/libs/uniApi.js';
	import {
		productCreate,
		productUpdate
	} from 'api/product.js';
	import inputGoodsDetils from './inputGoodsDetils.vue';
	export default {
		components: {
			inputGoodsDetils
		},
		props: {
			merId: {
				type: [String, Number],
				default: ''
			},
			product_id: {
				type: [String, Number],
				default: ''
			},
			showCommodity: {
				type: Boolean,
				default: false
			},
			resetKey: {
				type: Boolean,
				default: false
			},
			code: {
				type: [String, Number],
				default: 0
			}
		},
		data() {
			return {
				showVideo: false,
				disModel: false,
				upload_max: 10,
				uploadUrl: `${HTTP_REQUEST_URL}/api/upload/video`,
				addGoodsSecoundData: {
					is_good: 0, // 是否推荐
					is_gift_bag: 0,
					sort: '',
					once_count: '', // 限购数量
					video_link: ''
				},
				goodsDis: {
					imageList: [],
					store_name: ""
				},
				store_name: '',
				moreThanFlag: true,
			};
		},

		mounted() {},
		methods: {
			videoshow() {
				this.showVideo = true
				this.videoContext = uni.createVideoContext('myVideo', this);
				this.$nextTick(() => {
					this.videoContext.play();
				})
			},
			setDatas(data) {
				this.addGoodsSecoundData = data.addGoodsSecoundData;
				this.goodsDis = data.goodsDis;
			},
			// 是否推荐
			isGood(e) {
				this.addGoodsSecoundData.is_good = e.detail.value ? 1 : 0;
			},
			// 是否开启礼包
			isGiftBag(e) {
				this.addGoodsSecoundData.is_gift_bag = e.detail.value ? 1 : 0;
			},

			switchChange(value, item) {
				this.addGoodsSecoundData[item.model] = value ? 1 : 0;
			},
			// 跳转商品详情
			inputGoodsDetils() {
				navigateTo(1, '/pages/product/addGoods/addGoodDetils', {
					mer_id: this.merId
				});
			},
			// 上传视频
			uploadVideo() {
				uni.chooseVideo({
					sourceType: ['camera', 'album'],
					success: res => {
						console.log(res)

						if (Math.ceil(res.size / 1024) < this.upload_max * 1024) {
							uni.uploadFile({
								url: this.uploadUrl, //仅为示例，非真实的接口地址
								filePath: res.tempFilePath,
								name: 'file',
								//请求参数
								// formData: {
								//   user: 'test'
								// },
								header: {
									// #ifdef MP
									'Content-Type': 'multipart/form-data',
									// #endif
									[TOKENNAME]: 'Bearer ' + store.state.app.token
								},
								success: uploadFileRes => {
									let data = JSON.parse(uploadFileRes.data);
									this.addGoodsSecoundData.video_link = (data.data.src);
								},
								complete: a => {
									// console.log(a);
								}
							});
						} else {
							uni.showModal({
								title: '提示',
								content: `视频超出限制${this.upload_max}MB,已过滤`
							});
						}
					},
					fail: err => {
						// 取消上传也会出现弹框
						// uni.showModal({
						//   content: JSON.stringify(err)
						// });
						console.log(err)
					}
				});
			},
			deleteImage(index) {
				this.addGoodsSecoundData.video_link = '';
			},
			getProductContent(obj) {
				// console.log(obj);
				this.goodsDis = obj;
				this.a = obj.store_name
			},
		}
	};
</script>

<style lang="scss" scoped>
	@import '../scss/index.scss';

	.content_list {
		width: 710rpx;
		margin: auto;
		padding: 0 20rpx;
		box-sizing: border-box;
		background: #fff;
		margin-top: 31rpx;
		border-radius: 10rpx;

		.input-goods-detils {
			width: 100%;
			padding: 20rpx 10rpx !important;
		}

		.more_than {
			background: #FFFFFF;
			border-radius: 0 0 10rpx 10rpx;
			margin: auto;
			// margin-top: 30rpx;
			border-top: 1px solid #f5f5f5;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 84rpx;
			color: #333333;
			font-size: 30rpx;
		}

		.content_list_item {
			padding: 32rpx 10rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #eee;

			.content_list_item_han {
				color: #bbbbbb;
				display: flex;
				align-items: center;
			}
		}

		.content_list_video {
			min-height: 154rpx;
			padding: 23rpx 10rpx;
			display: flex;
			justify-content: space-between;

			.content_list_video_title {
				padding-top: 10rpx;
			}

			.video_list {
				flex: 1;
				display: flex;
				justify-content: flex-end;
				flex-wrap: wrap;
			}
		}
	}

	.videoHover {
		width: 180rpx;
		height: 180rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;

		view {
			width: 50rpx;
			height: 50rpx;
			background: #000000;
			border-radius: 50rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.iconfont {
				color: #ffffff;
				font-size: 21rpx;
			}
		}
	}

	.photo {
		border: 1px solid #dddddd;
		opacity: 1;
		border-radius: 8rpx;
		font-size: 28rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
		// padding: 27rpx 21rpx 24rpx 21rpx;
		width: 150rpx;
		height: 150rpx;
		box-sizing: border-box;
		color: #bbbbbb;
		margin-left: 16rpx;
		position: relative;
		margin-bottom: 12rpx;

		image {
			width: 62rpx;
			margin-bottom: 10rpx;
		}
	}

	.jiao {
		image {
			position: absolute;
			top: -14rpx;
			right: -14rpx;
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
			padding: 8rpx;
			background: #e93323;
			z-index: 2;
		}

		video {
			width: 150rpx;
			height: 150rpx;
		}
	}

	.preview_video {
		position: absolute;

	}

	.container_input {
		background: #fff;
		padding: 0 20rpx;
		width: 710rpx;

		margin: auto;
		margin-top: 31rpx;
		border-radius: 10rpx;

		&_item {
			display: flex;
			height: 106rpx;
			align-items: center;

			.select_and_input {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.greyColor {
					color: #bbbbbb;
				}
			}

			.radio {
				padding: 30rpx 0;
			}

			&_label {
				padding-left: 10rpx;
				color: #333333;
				font-size: 30rpx;
				display: flex;
				align-items: center;

				.select_check {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 40rpx;
					height: 40rpx;
					border: 1px solid #cccccc;
					border-radius: 50%;
					margin-right: 20rpx;

					.iconfont {
						font-size: 24rpx;
					}
				}

				.select {
					background: #e93323;
					border: none;

					.iconfont {
						color: #fff;
					}
				}
			}

			&_value {
				padding-right: 10rpx;
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: flex-end;

				>span:nth-child(1) {
					display: inline-block;
					margin-right: 15rpx;
				}

				.text {
					color: #000;
					display: inline-block;
					max-width: 400rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				input {
					text-align: right;
				}

				.select_group {
					display: flex;
				}

				&_select {
					display: flex;
					margin-right: 110rpx;
				}
			}

			.flex_start {
				padding: 0 10rpx;
				margin-top: 40rpx;
				justify-content: flex-start;
			}
		}

		>view:not(:last-child) {
			border-bottom: 1px solid #eeeeee;
		}
	}

	.inputPlaceHolder {
		color: #bbbbbb;
	}

	.paddingTop_none {
		padding-top: 0 !important;
	}

	.marginTop_none {
		margin-top: 0;
	}

	.video-count {
		position: fixed;
		width: 600rpx;
		height: 500rpx;
		top: 50%;
		left: 50%;
		margin-left: -300rpx;
		margin-top: -250rpx;
		z-index: 100;
		display: flex;
		align-items: center;
		justify-content: center;

		.videoLink {
			width: 600rpx;
			height: 500rpx;
		}
	}

	// .writeBg {
	// 	background: #fff;
	// }

	.tip {
		padding: 0 !important;
		margin: 0 !important;
	}
</style>