fhrons-mobile-next 2.0.0 → 2.0.2

package/packages/sharePanel/SheetPanel.vue

@@ -0,0 +1,316 @@
+<template>
+	<van-popup id="SheetPanel" v-model="isShowShare" class="popup-wrapper" round position="bottom" :safe-area-inset-bottom="true" @close="handleCancel" :get-container="targetDom" :duration="duration">
+		<div v-show="showPost">
+			<slot name="post"></slot>
+		</div>
+		<div @click="handleCancel">
+			<slot name="close">
+				<div class="sheet__chanel" />
+			</slot>
+		</div>
+		<div class="sheet_box">
+			<div v-if="showTitle" class="sheet_title">{{ title }}</div>
+			<div v-if="shareText" class="sheet_share__text">
+				<div class="sheet_text_title">{{ $t("componentsfile.sharemediapanel.9mt921") }}</div>
+				<div class="sheet_text_content" @click="copyText(shareText, true)">
+					<div class="text">{{ shareText }}</div>
+				</div>
+			</div>
+			<div class="share-imgbox flex-wrap flex-between-start" :class="[options.length >= 6 ? 'flex-wrap flex-start' : 'flex-nowrap', options.length == 4 ? 'plr20' : '', options.length == 3 ? 'plr10' : '', options.length == 2 ? 'plr60' : '']">
+				<div v-for="(item, index) in options" :key="`img_${index}`" class="flex-column-center flex-basis25 mb20 relative">
+					<img :src="item.icon" alt="" @click="handleSelect(item)" />
+					<span class="ft12 c-23242e mt8 line-height18 ta-c min-width60">{{ item.name }}</span>
+					<UploadFile v-if="item.tagEvent === 'upload'" class="b-cont-btn1-1 block" :uploadFileId="item.uploadID" />
+				</div>
+			</div>
+			<slot />
+		</div>
+	</van-popup>
+</template>
+<script>
+import UploadFile from "../uploadFile";
+
+export default {
+	components: { UploadFile },
+	props: {
+		isShow: {
+			type: Boolean,
+			default: false,
+		},
+		title: {
+			type: String,
+			default: "",
+		},
+		shareText: {
+			type: String,
+			default: "",
+		},
+		options: {
+			type: Array,
+			default: () => [],
+		},
+		targetDom: {
+			type: String,
+			default: "",
+		},
+		duration: {
+			type: Number,
+			default: 0.3,
+		},
+		showTitle: {
+			type: Boolean,
+			default: true,
+		},
+	},
+	data() {
+		return {
+			isShowShare: false,
+			showPost: false,
+			// uploadObj1: {
+			// 	maxCount: "9",
+			// 	fileType: "image",
+			// 	uploadType: "0",
+			// 	isIconUpload: true,
+			// 	fileSize: "10",
+			// 	type: "image/*,video/*",
+			// 	// cropper: false,
+			// 	needOCR: false,
+			// 	multiple: true,
+			// },
+		};
+	},
+	watch: {
+		isShow: {
+			handler() {
+				this.isShowShare = this.isShow;
+				if (this.isShow && this.shareText) {
+					setTimeout(() => this.copyText(this.shareText), 200);
+				}
+			},
+			immediate: true,
+		},
+		isShowShare: {
+			handler(newVal) {
+				if (newVal) {
+					setTimeout((_) => {
+						this.showPost = newVal;
+					}, this.duration * 2000);
+				} else {
+					this.showPost = newVal;
+				}
+			},
+		},
+	},
+	methods: {
+		// 复制文案
+		copyText(str, isClick) {
+			this.$copyText(str)
+				.then(() => {
+					isClick && this.$toast(this.$t("components.poster.mnipsj"));
+				})
+				.catch(() => this.$toast(this.$t("componentsfile.sharepanel.2mzpka")));
+		},
+		handleCancel() {
+			this.isShowShare = false;
+			this.$emit("close");
+		},
+		handleSelect(item) {
+			this.$emit("select", item);
+		},
+	},
+};
+</script>
+<style lang="less" scoped>
+.sheet_title {
+	font-size: 16px;
+	font-weight: 500;
+	color: #23242e;
+	line-height: 24px;
+	text-align: center;
+	margin-bottom: 16px;
+}
+
+.sheet_share__text {
+	margin-bottom: 28px;
+
+	.sheet_text_title {
+		position: relative;
+		font-size: 14px;
+		color: #23242e;
+		line-height: 21px;
+		padding-left: 20px;
+
+		&:before {
+			content: "";
+			position: absolute;
+			background: url("https://dop-pro-1251973116.file.myqcloud.com/upload/img/scrmdop/icon_danxuan.png") no-repeat;
+			background-size: 100%;
+			width: 16px;
+			height: 16px;
+			left: 0;
+			top: 50%;
+			margin-top: -8px;
+		}
+	}
+
+	.sheet_text_content {
+		font-size: 14px;
+		color: #7f808a;
+		line-height: 21px;
+		background: #f5f5f9;
+		border-radius: 4px;
+		padding: 12px;
+		margin-top: 8px;
+
+		.text {
+			max-height: 42px;
+			overflow-y: auto;
+		}
+	}
+}
+
+.sheet__chanel {
+	position: absolute;
+	left: 50%;
+	transform: translateX(-50%);
+	padding: 12px;
+	top: 0;
+	width: 32px;
+	height: 8px;
+	box-sizing: content-box;
+	background: url("https://dop-pro-1251973116.file.myqcloud.com/upload/img/scrmdop/icon_zhankailine.png") no-repeat;
+	background-size: 32px 8px;
+	background-position: 12px 12px;
+	overflow: hidden;
+	cursor: pointer;
+}
+
+.sheet__chanel:before {
+	background-color: transparent;
+}
+
+.sheet_box {
+	padding: 32px 12px 16px;
+}
+
+.sheet__options {
+	position: relative;
+	margin: 0 10px;
+	display: -webkit-box;
+	display: -webkit-flex;
+	display: flex;
+	overflow-x: auto;
+	overflow-y: visible;
+	-webkit-overflow-scrolling: touch;
+}
+
+.sheet__option {
+	display: -webkit-box;
+	display: -webkit-flex;
+	display: flex;
+	-webkit-box-orient: vertical;
+	-webkit-box-direction: normal;
+	-webkit-flex-direction: column;
+	flex-direction: column;
+	-webkit-box-align: center;
+	-webkit-align-items: center;
+	align-items: center;
+	cursor: pointer;
+	-webkit-user-select: none;
+	user-select: none;
+	flex-basis: 25%;
+	flex-shrink: 0;
+
+	img {
+		width: 44px;
+		height: 44px;
+		margin: 0;
+	}
+
+	span {
+		margin-top: 8px;
+		padding: 0 4px;
+		font-size: 12px;
+		color: #666666;
+		line-height: 19px;
+	}
+}
+
+#SheetPanel {
+	.arrow {
+		width: 44px;
+	}
+
+	.flex-column-center {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	.share-imgbox {
+		margin-bottom: 18px;
+	}
+
+	.flex-between {
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.share-imgbox {
+		margin-bottom: 18px;
+	}
+
+	.share-imgbox img {
+		width: 44px;
+		height: 44px;
+	}
+
+	.flex-between {
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.flex-wrap {
+		display: flex;
+		flex-wrap: wrap;
+	}
+
+	.flex-nowrap {
+		display: flex;
+		flex-wrap: nowrap;
+	}
+
+	.flex-start {
+		display: flex;
+		justify-content: flex-start;
+	}
+
+	.flex-basis25 {
+		flex-basis: 25%;
+	}
+
+	.min-width60 {
+		min-width: 60px;
+	}
+
+	.relative {
+		position: relative;
+	}
+
+	.b-cont-btn1-1 {
+		position: absolute;
+		left: 0;
+		top: 0;
+		right: 0;
+		bottom: 0;
+
+		/deep/ input {
+			position: absolute;
+			left: 0;
+			top: 0;
+			right: 0;
+			bottom: 0;
+		}
+	}
+}
+</style>

package/packages/sharePanel/index.js

@@ -0,0 +1,5 @@
+import SharePanel from './index.vue';
+SharePanel.install = (Vue) => {
+    Vue.component(SharePanel.name, SharePanel);
+};
+export default SharePanel;