fhrons-mobile-next 2.0.0 → 2.0.2

package/index.js

@@ -1,33 +1,68 @@
-// import FHCommon from './dist/fhcommon.min.js'
-// if (typeof window !== 'undefined' && window.Vue) {
-//     window.Vue.use(FHCommon)
-//     window.FHUpload = FHCommon
-// }
-
-// // expose FHCommon as default export
-// export default FHCommon;
-
-// 由于minio不支持esm模块导入，也就不支持treeshaking来去掉未用到的minio代码，所以只能准备两套代码
-import { upload, compressFile, loopCompressFile } from './upload'
-import { getDomImage } from './packages/html2canvas'
-
-import FHImage from "./packages/fhImage";
-import FHPresetImage from "./packages/fhPresetImage";
-const FHCommon = {
-    upload: upload,
-    compressFile: compressFile,
-    loopCompressFile: loopCompressFile,
-    getDomImage,
-    install (Vue) {
-        window.FHCommon = FHCommon
-        Vue.component('FHImage',FHImage)
-        Vue.component('FHPresetImage',FHPresetImage)
-    }
-}
-if (typeof window !== 'undefined' && window.Vue) {
-    window.Vue.use(FHCommon)
-    window.FHUpload = FHCommon
-}
-
-// expose FHCommon as default export
-export default FHCommon;
+/* Automatically generated by './build/bin/build-entry.js' */
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import isBetween from 'dayjs/plugin/isBetween';
+dayjs.extend(duration);
+dayjs.extend(relativeTime);
+dayjs.extend(isBetween);
+
+import loadGlobalData from './assets/js/globalData'
+// import FHCommon from './fhcommon';
+// console.log(FHCommon,'===========')
+import './fhcommon/dist/fhcommon.min.js'
+export const Introduce = require('./packages/introduce').default;
+export const AreaMobile = require('./packages/areaMobile').default;
+export const AutoGraph = require('./packages/autoGraph').default;
+export const Verify = require('./packages/verify').default;
+export const UploadFile = require('./packages/uploadFile').default;
+export const VanUploadFile = require('./packages/uploadFile/vanUpload').default;
+export const updateTheme = require('./packages/theme').default;
+export const SharePanel = require('./packages/sharePanel').default;
+export const VideoPage = require('./packages/videoPage').default;
+export const CommonForm = require('./packages/commonForm').default;
+export const CommonDialog = require('./packages/dialog').default;
+export const PDFViewer = require('./packages/pdfViewer').default;
+export const { CommonAsyncAreaPicker,
+    CommonDatePicker,
+    CommonFullTimePicker,
+    CommonSinglePicker,
+    CommonYearMonthPicker } = require('./packages/commonForm')
+const totalComponents = {
+    Introduce,
+    AreaMobile,
+    AutoGraph,
+    Verify,
+    UploadFile,
+    VanUploadFile,
+    SharePanel,
+    CommonForm,
+    VideoPage,
+    CommonAsyncAreaPicker,
+    CommonDatePicker,
+    CommonFullTimePicker,
+    CommonSinglePicker,
+    CommonYearMonthPicker,
+    PDFViewer,
+    CommonDialog
+};
+
+import './assets/css/static.less'
+import './assets/css/extra.css'
+import './assets/css/global.css'
+import './packages/theme/theme.css'
+export default {
+    install: (Vue) => {
+        loadGlobalData(Vue)
+        // Vue.use(FHCommon)
+        Vue.prototype.$dayjs = dayjs;
+        Vue.directive('preventReClick', {
+            inserted: function (el, binding) {
+                preventReClick(el, binding);
+            }
+        });
+        for (const i in totalComponents) {
+            totalComponents[i].install(Vue);
+        }
+    },
+};

package/inject-env-plugin.js

@@ -0,0 +1,29 @@
+const fs = require('fs');
+
+class InjectEnvPlugin {
+    apply(compiler) {
+        compiler.hooks.emit.tapAsync('InjectEnvPlugin', (compilation, callback) => {
+            const temp = {};
+            Object.keys(process.env).forEach(key => {
+                if (key.startsWith('VUE_APP'))temp[key] = process.env[key];
+            });
+            const envVars = JSON.stringify(temp);
+
+            const script = `<script>
+                window.process = { env: ${envVars} };
+            </script>`;
+
+            const indexHtml = compilation.assets['index.html'].source();
+            const newIndexHtml = indexHtml.replace('</head>', `${script}</head>`);
+
+            compilation.assets['index.html'] = {
+                source: () => newIndexHtml,
+                size: () => newIndexHtml.length
+            };
+
+            callback();
+        });
+    }
+}
+
+module.exports = InjectEnvPlugin;

package/package.json

@@ -1,40 +1,54 @@
 {
     "name": "fhrons-mobile-next",
-    "version": "2.0.0",
-    "description": "泛华榕树前端上传方法（fhrons-mobile 继任维护版本）",
-    "main": "dist/fhcommon.min.js",
-    "module": "dist/fhcommon.min.js",
-    "devDependencies": {
-        "@babel/core": "^7.25.8",
-        "@babel/preset-env": "^7.25.8",
-        "babel-loader": "^9.1.3",
-        "crypto-browserify": "^3.12.0",
-        "css-loader": "^6.7.4",
-        "eslint": "^9.0.0",
-        "https-browserify": "^1.0.0",
-        "less-loader": "^11.1.4",
-        "path-browserify": "^1.0.1",
-        "stream-browserify": "^3.0.0",
-        "stream-http": "^3.2.0",
-        "style-loader": "^3.3.3",
-        "terser-webpack-plugin": "^5.3.10",
-        "timers-browserify": "^2.0.12",
-        "uglify-js": "^3.17.4",
-        "vm-browserify": "^1.1.2",
-        "vue-loader": "^15.9.8",
-        "vue-template-compiler": "^2.7.16",
-        "webpack": "^5.91.0",
-        "webpack-cli": "^5.0.0",
-        "webpack-dev-server": "^5.0.4"
-    },
+    "version": "2.0.2",
+    "description": "泛华榕树组件库",
+    "main": "index.js",
     "scripts": {
-        "test": "echo \"Error: no test specified\" && exit 1",
-        "build": "npx webpack --config webpack.config.js"
+        "serve": "vue-cli-service serve --mode dev",
+        "serve.poc": "vue-cli-service serve --mode poc",
+        "serve.doc": "vuepress dev docs --temp .temp",
+        "build": "vue-cli-service build --mode dev",
+        "build.doc": "vuepress build docs",
+        "test": "echo \"Error: no test specified\" && exit 1"
     },
-    "author": "gongml",
+    "author": "",
     "license": "ISC",
+    "peerDependencies": {},
     "dependencies": {
-        "core-js": "^3.38.1",
-        "minio": "^7.0.18"
+        "@antv/f6": "0.0.19",
+        "dayjs": "^1.10.4",
+        "less": "^3.0.4",
+        "less-loader": "^5.0.0",
+        "moment": "^2.30.1",
+        "vue-i18n": "8.28.2"
+    },
+    "devDependencies": {
+        "@babel/cli": "^7.24.1",
+        "@babel/core": "^7.24.3",
+        "@babel/plugin-proposal-class-properties": "^7.18.6",
+        "@babel/plugin-proposal-optional-chaining": "^7.21.0",
+        "@babel/preset-env": "^7.24.3",
+        "@vue/cli": "^4.5.15",
+        "@vue/cli-plugin-babel": "^4.5.19",
+        "@vue/cli-service": "^4.5.15",
+        "@vuepress/plugin-active-header-links": "^1.9.10",
+        "@vuepress/plugin-back-to-top": "^1.9.10",
+        "@vuepress/plugin-nprogress": "^1.9.10",
+        "@vuepress/plugin-register-components": "^1.9.10",
+        "babel-loader": "^8.3.0",
+        "babel-plugin-import": "^1.13.8",
+        "css-loader": "^3.6.0",
+        "directory-tree": "^2.2.7",
+        "dotenv": "^16.4.5",
+        "stylus": "^0.54.8",
+        "vue-loader": "^15.11.1",
+        "vuepress": "^1.9.10",
+        "vuepress-plugin-code-copy": "^1.0.6",
+        "vuepress-plugin-container": "^2.1.4",
+        "vuepress-plugin-nprogress": "^1.1.8",
+        "vuepress-plugin-smooth-scroll": "^0.0.10",
+        "vuepress-plugin-table-of-contents": "^1.1.7",
+        "copy-to-clipboard": "^3.3.3",
+        "webpack": "^4.47.0"
     }
 }

package/packages/areaMobile/index.js

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

package/packages/areaMobile/index.vue

@@ -0,0 +1,260 @@
+<!-- 功能：区号，手机号校验; 作者：ZXS; 时间：2024年03月19日 15:40:55-->
+<template>
+    <div>
+        <div id="AreaMobile" class="van-cell van-field" :class="[cellClass,errorMessage?'error-line':'']">
+            <div class="line-height30 flex-center full-width line-height24">
+                <slot name="label"/>
+                <div class="flex-center-start phone-num-widget" :class="showAreaSelect?'':'mr8'" @click="showPopup"><span> {{ areaItem.diallingCode }}</span><i v-if="showAreaSelect" class="iconfont ft10 ml5 c-9cc icon-xiajiantoumian" /></div>
+                <slot name="widget">
+                    <van-field v-model="mobile" :placeholder="placeholder" :maxlength="areaItem.maxlength" :type="type" :readonly="readonly" clearable class="area-mobile flex1" :class="inputClass" :input-align="inputAlign" @blur="changeValue" @clear="errorMessage = ''"/>
+                </slot>
+            </div>
+        </div>
+        <div v-if="errorMessage" class="ft12 c-ff5c5c mt8" :class="cellClass.includes('plr0')?'':'pl12'">{{ errorMessage }}</div>
+            <van-popup v-model="showPop" round position="bottom" :closeable="true" get-container="#app" class="over-hidden" :item-height="`${48 / 37.5}rem`" :close-icon="'https://dop-pro-1251973116.file.myqcloud.com/upload/img/funzg/icon_zhankailine.png'" :style="{ height: '50%' }">
+            <!-- 本期没有搜索功能，后续添加 -->
+            <div class="pb6">
+                <div class="pt32 pb2 ta-c line-height24 c-43e fw-500 ft16">{{ $t("componentsfile.areamobile.i5t5q5") }}</div>
+                <!-- <van-search v-model="searchKey" class="full-width" shape="round" :placeholder="$t('areamobile.index.c636e0')" @focus="handleFocus" @search="toSearch">
+                    <template #left-icon><i class="iconfont icon-sousuo ft16 c-9cc pl2" /></template>
+                </van-search> -->
+            </div>
+            <div class="bgc-f5f">
+                <van-index-bar :index-list="indexList">
+                    <van-index-anchor index="">{{ $t("customerdetail.baseinfo.78da4x") }}</van-index-anchor>
+                    <van-cell v-for="(item, index) in cityArr" :key="index" :title="item.name" :value="item.diallingCode" @click="getValue(item)" />
+                </van-index-bar>
+            </div>
+        </van-popup>
+    </div>
+</template>
+
+<script>
+import { getStorage } from "../../assets/js/storage";
+import { notEmpty } from "../../assets/js/func";
+import i18n from '../../assets/vantLang'
+export default {
+	name: "AreaMobile",
+	props: {
+		placeholder: {
+			type: String,
+			default: function () {
+				return i18n.t("areamobile.index.66rf2i");
+			},
+		},
+		value: {
+			type: String,
+			default: "",
+		},
+		type: {
+			type: String,
+			default: "tel",
+		},
+		readonly: {
+			type: Boolean,
+			default: false,
+		},
+		inputClass: {
+			type: String,
+			default: "",
+        },
+        inputAlign:{
+            type: String,
+			default: "left",
+        },
+        cellClass: {
+			type: String,
+			default: "",
+        },
+        diallingCode: {
+            type: String,
+            default: '+86'
+        },
+        showLabel: {
+            type: Boolean,
+            default: false
+        }
+	},
+	data() {
+		return {
+			industry: "", // 版本类型
+			mobile: "",
+			showPop: false,
+			simInfo: "", // 卡号信息
+			searchKey: "",
+			indexList: [],
+			showSelect: false,
+            errorMessage:'',
+			areaItem: {
+				diallingCode: "+86",
+				maxlength: 11,
+			},
+            cityArr:[
+				{ name: this.$t("componentsfile.areamobile.unt8c8"), diallingCode: "+86", maxlength: "11" },
+				{ name: this.$t("componentsfile.areamobile.7hs65i"), diallingCode: "+852", maxlength: "8" },
+			]
+		};
+    },
+    computed: {
+        showAreaSelect () {
+            return this.showSelect && this.showLabel
+        }
+    },
+    watch: {
+        value: {
+            handler(newVal, oldVal) {
+                this.mobile = newVal;
+            },
+            deep: true,
+            immediate: true
+        },
+        diallingCode: {
+            handler(newVal, oldVal) {
+                if (newVal && (newVal !== oldVal)) {
+                    this.getDefault();
+                    this.changeValue();
+                }
+            },
+            deep: true,
+            immediate: true
+        }
+    },
+    created () {
+        if (this.$globalData.isApp && window.webkit && this.$globalData.isIOS) {
+            window.AppToJSGetSimInfo = this.AppToJSGetSimInfo;
+        }
+        this.getSIM();
+        this.userInfo = getStorage({ name: 'userInfo' }) || {};
+        this.industry = getStorage({ commonKey: 'industry' }) || '';
+        // zh_CN_insurer 中国大陆保司 // zh_CN_agency 中国大陆中介 // agency,zh_T_agency  中国香港中介 // insurer,zh_T_insurer  中国香港保司
+
+        // 2024.5.13-----duz:【现在不支持+852的手机号发验证码，所以验证码登录的时候不能用香港的手机号】showSelect=false
+        // 2024.10.28-----xuehao:【测试国际短信，暂时放开】
+        this.showSelect = !this.industry.includes('zh_CN');// 是否支持选区号，非大陆版租户支持选区号
+        if (this.showSelect) {
+            this.getCityArr();
+        }
+        this.getDefault();
+    },
+    mounted() {
+        this.changeValue();
+    },
+    methods: {
+        getSIM () {
+            if (window.android && this.$globalData.isAndroid && typeof window.android.jsToAppForGetSimCountryIsoInfo === 'function') {
+                const result = window.android.jsToAppForGetSimCountryIsoInfo() || {};
+                this.simInfo = JSON.parse(result);
+            } else if (window.webkit && this.$globalData.isIOS) {
+                window.webkit.messageHandlers.JSToAppGetSimInfo.postMessage('js');
+            }
+        },
+        getCityArr () {
+            axios.get(`/funapi/config/sysIddCode/getIddListDefault/1`).then(res => {
+                const tempArr = [];
+                const list = res.sysIddCodeList || [];
+                list.forEach(item => {
+                    if (item.code === '86' || item.code === '852') {
+                        tempArr.push({
+                            name: item.name,
+                            diallingCode: '+' + item.code,
+                            maxlength: item.limitLen
+                        });
+                    }
+                });
+                if (tempArr && tempArr.length) {
+                    this.cityArr = tempArr;
+                }
+            }).catch(() => { });
+        },
+        AppToJSGetSimInfo (res) {
+            this.simInfo = res;
+        },
+        getDefault() {
+            if (this.diallingCode) { // 传入的
+                this.areaItem = this.cityArr.find(item => item.diallingCode === this.diallingCode);
+            } else if (this.$globalData.isApp && notEmpty(this.simInfo)) { // app且有运营商信息
+                const simCountryIso = this.simInfo?.simCountryIso || '';// 运营商区域
+                const simOperatorName = this.simInfo?.simOperatorName || ''; // 运营商名字
+                if (simCountryIso) {
+                    this.areaItem = simCountryIso === 'cn' ? this.cityArr.find(item => item.diallingCode === '+86') : this.cityArr.find(item => item.diallingCode === '+852');
+                } else if (simOperatorName) {
+                    // 这里的汉字不能翻译
+                    if (simOperatorName.includes('中国电信') || simOperatorName.includes('中国联通') || simOperatorName.includes('中国移动')) {
+                        this.areaItem = this.cityArr.find(item => item.diallingCode === '+86');
+                    } else {
+                        this.areaItem = this.cityArr.find(item => item.diallingCode === '+852');
+                    }
+                }
+            } else { // 网页、微信、公众号等按照版本信息
+                this.relyOnIndustry();
+            }
+        },
+        relyOnIndustry() {
+            if (this.showAreaSelect) {
+                this.areaItem = this.cityArr.find(item => item.diallingCode === '+852');
+            } else {
+                this.areaItem = this.cityArr.find(item => item.diallingCode === '+86');
+            }
+        },
+        showPopup () {
+            if (this.readonly) return;
+            if (this.showAreaSelect) {
+                this.showPop = true;
+            } else {
+                this.$toast(this.$t('componentsfile.areamobile.381p3e'));
+            }
+        },
+        getValue (item) {
+            if (this.areaItem !== item) {
+                this.areaItem = item;
+                this.mobile = '';
+            }
+            this.showPop = false;
+            this.$emit('getArea', item);
+        },
+        changeValue () {
+            const item = {
+                mobile: this.mobile,
+                diallingCode: this.areaItem.diallingCode
+            };
+            this.$emit('update:value', this.mobile);
+            this.$emit('getAreaMobile', item);
+            if(this.mobile){
+                if (this.isMobile(this.mobile,this.areaItem.diallingCode)) {
+                    this.errorMessage = ''
+                } else {
+                    this.errorMessage = '手机号格式不正确'
+                }
+            }else{
+                this.errorMessage = ''
+            }
+        },
+        handleFocus () { },
+        toSearch () { },
+        isMobile(s, code) {
+            if (code && code === '+852') { // +852香港手机号校验规则
+                return /^[0-9]\d{7}$/.test(s);
+            }
+            return /^(13|14|15|16|17|18|19)\d{9}$/.test(s);
+        }
+    }
+};
+</script>
+
+<style scoped lang="less">
+#AreaMobile {
+    .area-mobile {
+        padding: 0 !important;
+    }
+    /deep/.van-field::after{
+        display: none;
+    }
+}
+.line::after{
+    display: block !important;
+    background:#e8e8e8 !important;
+}
+.error-line::after{
+    background: #ff5c5c !important;
+}
+</style>