fhrons-mobile-next 2.0.0 → 2.0.2

package/packages/dialog/index.vue

@@ -0,0 +1,379 @@
+<template>
+	<div id="CommonCustomDialog">
+		<van-overlay :show="showDialog" class="flex-center" :z-index="100" @click="closeOverlay">
+			<div class="ps-r w-80 line-height30 bgc-ffffff br12">
+				<van-image v-if="content.pic === '1'" :src="content.picUrl" class="br-top-12 over-hidden" :class="content.picClass" />
+				<div class="pd20" @click.stop>
+					<!-- 弹窗标题 -->
+					<h3 v-if="content.dialogTitle" class="ta-c ft18 line-height27 c-23242e fw-500 mb12">{{ content.dialogTitle }}<img v-show="content.logo" class="note" :src="content.logo" alt="" @click="toNote" /></h3>
+					<div v-if="content.options" class="radio" :style="{ 'padding-left': content.textareaCfg.placeholder ? '' : '17%' }">
+						<van-radio-group v-if="content.textareaCfg.placeholder" v-model="suggestChecked" class="p_radio">
+							<van-radio v-for="(item, index) in content.options" :key="index" :name="item.value" icon-size="16px" @click="suggestChanged(item, index)"
+								>{{ item.text }}
+								<template #icon="props">
+									<i class="iconfont ft16 c-c8c9cc" :class="props.checked ? 'icon-dianxuangouxuan theme-color' : 'icon-dianxuan'" />
+								</template>
+							</van-radio>
+						</van-radio-group>
+						<van-radio-group v-else v-model="content.checked" direction="horizontal" :checked-color="getThemeColor" @change="changeTypeClick(content.checked)">
+							<van-radio v-for="(item, index) in content.options" :key="index" :name="item.value" icon-size="16px"
+								>{{ item.text }}
+								<template #icon="props">
+									<i class="iconfont ft16 c-c8c9cc" :class="props.checked ? 'icon-dianxuangouxuan theme-color' : 'icon-dianxuan'" />
+								</template>
+							</van-radio>
+						</van-radio-group>
+					</div>
+					<!-- 弹窗文本 -->
+					<p v-if="content.dialogContent" class="line-height21 ft14 c-23242e pre-line" :class="content.dialogContent && content.dialogContent.length <= 18 && !content.dialogContent.includes('\n') ? 'ta-c' : ''" v-html="content.dialogContent" />
+					<!-- 上传 -->
+					<div v-if="content.uploadText" ref="uploadArea">
+						<!-- 上传区域 -->
+						<div class="theme-color ps-r content-width theme-bg ft14 line-height21 plr12 ptb3 br25 mb12">
+							<UploadFile :delete-flag="false" upload-file-id="dialog" class="full-content" :upload-obj="content.uploadObj" @photoChanged="fileChanged">
+								<span>{{ content.uploadText }}</span>
+								<i class="iconfont icon-youjiantouxian" />
+							</UploadFile>
+						</div>
+						<!-- 文件列表回显区域 -->
+						<div v-for="(item, index) in uploadFileList" :key="index" class="ft14 c-23242e line-height21">{{ lengthFilter(item.filename) }}</div>
+					</div>
+					<!-- 副属文本 -->
+					<p v-if="content.dialogSubContent" class="mt12 c-7f808a ft14 line-height21">{{ content.dialogSubContent }}</p>
+					<!-- 文本域输入框 -->
+					<div v-if="content.textareaCfg && content.textareaCfg.placeholder" class="ps-r mt11" :class="[content.textareaCfg.needWordCount ? 'bgc-f5f pb4 border-box br4' : '']">
+						<textarea v-model="content.opinionText" :rows="content.textareaCfg.minRows" class="opinion-input ft12 line-height18 c-c8c9cc" :placeholder="content.textareaCfg.placeholder" :maxlength="content.textareaCfg.maxWordCount ? content.textareaCfg.maxWordCount : ''" />
+						<div v-if="content.textareaCfg.needWordCount" class="text-count">
+							<span class="c-23242e">{{ (content.opinionText && content.opinionText.length) || 0 }}</span
+							>/{{ content.textareaCfg.maxWordCount }}
+						</div>
+					</div>
+					<!-- 弹窗按钮组 -->
+					<div v-if="content.btnNum" class="btn-box line-height24 mt20 ft16 ps-r" :class="(content.btn1Text && content.btn1Text.length > 6) || (content.btn2Text && content.btn2Text.length > 6) ? 'flex-column-center' : content.btnNum === '1' ? 'flex-center' : 'flex-center-between'">
+						<span v-if="content.btn1Text" :class="btn1Class" class="br22 over-hidden ptb10 ta-c common-btn product-theme-dark-bg mr12" @click="btn1Jump">{{ content.btn1Text }}</span>
+						<span v-if="content.btn2Text" :class="btn2Class" class="br22 over-hidden ptb10 ta-c common-btn" @click="btn2Jump">{{ content.btn2Text }}</span>
+					</div>
+					<!-- 提示语弹窗，模拟toast -->
+					<div v-if="isShowToast" class="toast-wrap">
+						<div class="toast-box">
+							<span class="ft14 c-ffffff line-height20 ta-c prewrap">{{ i18n.t("commoncustomdialog.commoncustomdialog.e8x84h") }}</span>
+						</div>
+					</div>
+				</div>
+				<img v-if="+content.closeBtn === 1" src="https://dop-pro-1251973116.file.myqcloud.com/upload/img/funzg/icon-gaunbi.svg" class="ps-a close-icon" alt="" @click="forkJump" />
+			</div>
+		</van-overlay>
+	</div>
+</template>
+
+<script>
+import { getStorage } from "../../assets/js/storage";
+import { getStringPixelLength } from "../../assets/js/func";
+import UploadFile from "../uploadFile/index.vue";
+import i18n from "../../assets/vantLang";
+export default {
+	// 组件名称
+	name: "CommonCustomDialog",
+	// 局部注册的组件
+	components: { UploadFile },
+	// 组件参数 接收来自父组件的数据
+	props: {},
+	// 组件状态值
+	data() {
+		return {
+			i18n,
+			showDialog: true,
+			content: {
+				dialogTitle: "",
+				dialogContent: "", // 弹窗的具体内容
+				btn1Text: "", // 按钮1的文案
+				btn2Text: "", // 按钮2的文案
+				btn1JumpMenu: "", // 按钮1的跳转链接
+				btn2JumpMenu: "", // 按钮2的跳转链接
+				pic: 0, // 0(无配图) 1(有配图)
+				picUrl: "", // 配图地址
+				picClass: "", // 配图样式
+				closeBtn: 0, // 关闭弹窗按钮 1显示  0隐藏
+				url: "", // logo的跳转地址
+				logo: "", // title旁边logonurl
+				options: [], // 选框
+				brightBgColor: "",
+				opinionText: "",
+				textareaCfg: {
+					placeholder: "",
+					needWordCount: true,
+					maxWordCount: 0,
+					minRows: 1,
+				},
+			},
+			getThemeColor: getStorage({ name: "themeColor" }),
+			suggestChecked: 0,
+			reasonText: "",
+			uploadFileList: [],
+			isShowToast: false,
+		};
+	},
+	computed: {
+		btnStyle() {
+			if ((this.content.btn1Text && this.content.btn1Text.length > 6) || (this.content.btn2Text && this.content.btn2Text.length > 6)) {
+				return "col";
+			}
+			return "row";
+		},
+		btn1Class() {
+			const obj = {
+				"plr12 mb16 full-width": this.btnStyle === "col" && this.content.btnNum === "2",
+				"w-50 mr10": this.btnStyle === "row" && this.content.btnNum === "2",
+				"c-ffffff fw-500": this.content.btn1Bright === "1",
+				"theme-dark-bg": this.content.btn1Bright === "1" && !this.content.brightBgColor,
+				brightBgColor: this.content.btn1Bright === "1" && this.brightBgColor,
+				"bgc-ffffff c-555661 border-thin bdc-c8c9cc": this.content.btn1Bright === "0" || !this.content.btn1Bright,
+				"full-width": this.content.btnNum === "1",
+			};
+			this.$set(obj, this.content.brightBgColor, this.content.btn1Bright === "1" && this.content.brightBgColor);
+			return obj;
+		},
+		btn2Class() {
+			const obj = {
+				"plr12 full-width": this.btnStyle === "col",
+				"w-50": this.btnStyle === "row" && this.content.btnNum === "2",
+				"c-ffffff fw-500": this.content.btn2Bright === "1",
+				"theme-dark-bg": this.content.btn2Bright === "1" && !this.content.brightBgColor,
+				"bgc-ffffff c-555661 border-thin bdc-c8c9cc": this.content.btn2Bright === "0" || !this.content.btn2Bright,
+				"full-width": this.content.btnNum === "1",
+				"gradient-bg c-ffffff fw-500 m0a": this.content.btn2Bright === "2",
+			};
+			this.$set(obj, this.content.brightBgColor, this.content.btn2Bright === "1" && this.content.brightBgColor);
+			return obj;
+		},
+	},
+	created() {
+		console.log("this.content", this.content);
+	},
+	methods: {
+		btn1Jump() {
+			this.jump("btn1", this.content.btn1JumpMenu);
+		},
+		btn2Jump() {
+			this.jump("btn2", this.content.btn2JumpMenu);
+		},
+		toNote() {
+			this.jump("", this.content.url);
+		},
+		changeTypeClick(type) {
+			this.changeTypeClick(type);
+		},
+		suggestChanged(item, index) {
+			this.reasonText = item.text;
+		},
+		forkJump() {
+			this.jump("fork");
+		},
+		jump(str, url) {
+			if (url) {
+				if (url === "cancel") {
+					this.showDialog = false;
+					return;
+				}
+				if (url.includes("http")) {
+					window.location.href = url;
+				} else {
+					this.$router.push(url);
+				}
+			} else {
+				// 抛出一个方法
+				if (str === "btn1") {
+					if (typeof this.content.btn1Click === "function") {
+						this.btn1Click(); // 点击按钮1的回调函数
+					} else {
+						this.showDialog = false;
+						return;
+					}
+				} else if (str === "btn2") {
+					if (typeof this.content.btn2Click === "function") {
+						// 点击按钮2的回调函数
+						if (this.content.textareaCfg && this.content.textareaCfg.placeholder) {
+							if (this.content.options && this.content.options.length) {
+								if (this.reasonText) {
+									this.btn2Click(this.reasonText, this.content.opinionText);
+									this.showDialog = false;
+									this.isShowToast = false;
+								} else {
+									this.isShowToast = true;
+									setTimeout(() => {
+										this.isShowToast = false;
+									}, 1000);
+									return;
+								}
+							} else {
+								this.$loading("加载中。。。");
+								this.btn2Click(this.content.opinionText)
+									.then((res) => {
+										if (res === "success") {
+											setTimeout((_) => {
+												this.showDialog = false;
+											}, 2000);
+										}
+									})
+									.catch((err) => {
+										console.log(err);
+									})
+									.finally((_) => {
+										this.$loading(false);
+									});
+							}
+						} else if (this.content?.uploadObj) {
+							// 如果点击的是上传弹窗的确定
+							if (this.uploadFileList && this.uploadFileList.length) {
+								this.btn2Click(this.uploadFileList).then((res) => {
+									if (res === "success") {
+										setTimeout((_) => {
+											this.showDialog = false;
+										}, 2000);
+									}
+								});
+							} else {
+								this.$toast(i18n.t("workorder.creatorderwork.0tm556"));
+							}
+						} else if (this.content.asyncClose) {
+							this.btn2Click().then((res) => {
+								if (res === "success") this.showDialog = false;
+							});
+						} else {
+							this.btn2Click();
+							this.showDialog = false;
+						}
+					} else {
+						this.showDialog = false;
+						return;
+					}
+				} else if (str === "fork") {
+					if (typeof this.content.forkBtnClick === "function") {
+						this.forkBtnClick(() => {
+							this.showDialog = false;
+						}); // 点击按钮2的回调函数
+					} else {
+						this.showDialog = false;
+						return;
+					}
+				}
+			}
+		},
+		closeOverlay() {
+			if (this.content.closeBtn !== "1") {
+				this.showDialog = false;
+			}
+		},
+		// 上传文件事件
+		fileChanged(url, base64, filename) {
+			this.$set(this, "uploadFileList", [
+				{
+					imageUrl: url,
+					filename: filename,
+				},
+			]);
+		},
+		lengthFilter(val) {
+			let result = val;
+			const containerWidth = this.$refs.uploadArea.clientWidth;
+			const contentWidth = getStringPixelLength(val, `${14 / 37.5}rem Arial`);
+			if (contentWidth > containerWidth) {
+				const strList = val.split(".");
+				const name = strList[0];
+				result = `${name.replace(name.substring(4, name.length - 4), "......")}.${strList[1]}`;
+			}
+			return result;
+		},
+	},
+};
+</script>
+
+<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
+<style scoped lang="less">
+#CommonCustomDialog {
+	.close-icon {
+		width: 24px;
+		height: 24px;
+		left: 50%;
+		transform: translateX(-50%);
+		bottom: -40px;
+	}
+	.br-top-12 {
+		border-radius: 12px 12px 0 0;
+	}
+	.pre-line {
+		white-space: pre-line;
+	}
+	.note {
+		width: 16px;
+		height: 16px;
+		margin-left: 6px;
+	}
+	.common-btn {
+		width: 240px;
+	}
+	.radio {
+		/deep/.van-radio__label {
+			margin-left: 2.5px;
+		}
+	}
+	.opinion-input {
+		width: 100%;
+		color: #23242e;
+		font-size: 14px;
+		line-height: 21px;
+		border-radius: 4px;
+		// padding: 12px;
+		padding: 12px 12px 0 12px;
+		background-color: #f5f5f9;
+		resize: none;
+		&::placeholder {
+			color: #c8c9cc;
+			font-size: 14px;
+		}
+	}
+	.gradient-bg {
+		background: linear-gradient(90deg, #158cff 0%, #3da0ff 60%, #0ccaff 100%);
+	}
+	.p_radio /deep/ .van-radio {
+		margin-bottom: 12px;
+		&:last-child {
+			margin-bottom: 16px;
+		}
+	}
+	.p_radio /deep/ .van-radio__label {
+		font-size: 14px;
+		line-height: 21px;
+		color: #23242e;
+		margin-left: 12px;
+	}
+	.text-count {
+		font-size: 14px;
+		line-height: 21px;
+		color: #c8c9cc;
+		display: flex;
+		justify-content: flex-end;
+		padding-right: 12px;
+		box-sizing: border-box;
+	}
+	.toast-wrap {
+		width: 86%;
+		position: absolute;
+		top: 50%;
+		display: flex;
+		justify-content: center;
+	}
+	.toast-box {
+		width: fit-content;
+		min-width: 96px;
+		min-height: 0;
+		padding: 8px 12px;
+		display: flex;
+		align-content: center;
+		justify-content: center;
+		box-sizing: content-box;
+		background-color: rgba(0, 0, 0, 0.7);
+		border-radius: 8px;
+	}
+}
+</style>

package/packages/index.js

@@ -1,3 +1,7 @@
-
-// export default FHCommon
-// export {FHImage,FHPresetImage}
+import Introduce from './introduce'
+import AreaMobile from './areaMobile'
+import AutoGraph from './autoGraph'
+import Verify from './verify'
+import { uploadFile, VanUploadFile } from './uploadFile'
+import SharePanel from './sharePanel'
+export { AutoGraph, Introduce, AreaMobile, Verify, uploadFile, VanUploadFile, SharePanel }

package/packages/introduce/index.js

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

package/packages/introduce/index.vue

@@ -0,0 +1,31 @@
+<template>
+    <div id="Introduce">
+        欢迎来到移动端组件库，这里是组件试用区域！
+        <van-button type="primary" @click="handleClick">测试</van-button>
+    </div>
+</template>
+
+<script>
+
+// Vue.use(vant)
+// const { Button } = vant
+export default {
+    name: 'Introduce',
+    // components: { vanButton: Button },
+    created () {
+        // this.use(vant)
+    },
+    mounted () {
+        console.log(vant)
+        vant.Toast('提示')
+    },
+    methods: {
+        handleClick () {
+            console.log(vant)
+            vant.Toast('提示')
+        }
+    }
+}
+</script>
+
+<style></style>

package/packages/loading/Loading.vue

@@ -0,0 +1,70 @@
+<!-- 功能：loading; 作者：LZJ; 时间：2021年09月29日 10:40:09-->
+<template>
+    <div id="Loading" class="flex-column-center z-index100 ps-a" :class="[theme==='dark'?'dark':'']">
+        <div class="ps-r loading-container">
+            <div class="loading-content ps-a ta-c">
+                <van-loading type="spinner" color="#fff" />
+                <p class="ft14 mt12 c-ffffff">
+                    {{ message }}
+                </p>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    // 组件名称
+    name: 'Loading',
+    // 组件参数 接收来自父组件的数据
+    props: {
+        show: {
+            type: Boolean,
+            default: () => false
+        },
+        message: {
+            type: String,
+            default: () => ''
+        },
+        theme: {
+            type: String,
+            default: () => 'light'
+        }
+    },
+    methods: {
+        close () {
+            this.$emit('close');
+        }
+    }
+};
+</script>
+
+<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
+<style scoped lang='less'>
+#Loading {
+    width: 100%;
+    // left: calc(50% - 5rem);
+    height: 100vh;
+    top: 0;
+
+    .loading-container {
+        width: 140px;
+        min-height: 140px;
+        border-radius: 16px;
+        backdrop-filter: blur(2px);
+        transition: all .3s ease;
+        background: rgba(0, 0, 0, 70%);
+        // box-sizing: border-box;
+
+        .loading-content {
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            // padding: 20px 0;
+        }
+    }
+}
+.dark{
+    background-color: rgba(0, 0, 0, 70%);
+}
+</style>

package/packages/loading/index.js

@@ -0,0 +1,43 @@
+// 取到创建的静态组件
+import Loading from './Loading.vue';
+// 返回一个 扩展实例构造器
+const PageLoadingConstructor = Vue.extend(Loading);
+
+// 定义弹出loading 的函数
+function showLoading (options = '',theme) {
+    const type = typeof options === 'string' ? 1 : typeof options === 'boolean' ? 2 : 0;
+    const reLoading = document.getElementById('Loading');
+    return new Promise((resolve, reject) => {
+        const loadingDom = new PageLoadingConstructor({
+            el: document.createElement('div')
+        });
+        const message = type === 1 ? options : type === 0 ? options.message : loadingDom.message;
+        // 如果传进的是字符串
+        loadingDom.message = message;
+        loadingDom.theme = theme || loadingDom.theme;
+        loadingDom.show = true;
+        // 需要展示loading框
+        if (type === 1 || type === 0) {
+            if (reLoading) {
+                reLoading.childNodes[0].childNodes[0].childNodes[1].innerText = message;
+                reLoading.style.display = 'flex';
+            } else {
+                document.body.appendChild(loadingDom.$el);
+            }
+        } else if (type === 2 && !options) { // 如果是布尔值
+            loadingDom.show = false;
+            if (reLoading) reLoading.style.display = 'none';
+        }
+    });
+}
+
+// 注册为全局函数
+// function registryLoading() {
+//     Vue.prototype.$loading = showLoading;
+// }
+
+Loading.install = (Vue) => {
+    Vue.prototype.$loading = showLoading;
+}
+
+export default Loading;

package/packages/mindMap/index.js

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