1. 项目文件目录明细

data/Smarty/templates/default/editor

  • seat_table_edit_page_sp.tpl
  • seat_table_edit_page_pc.tpl
  • menu_list_edit_page_sp.tpl
  • menu_list_edit_page_pc.tpl
  • invitation_edit_page_sp.tpl
  • invitation_edit_page_pc.tpl
  • escort_cards_edit_page_sp.tpl

  • escort_cards_edit_page_pc.tpl

    html/editor

    components

  • popup.js

  • patternInput.js
  • option.js
  • editorPC.js
  • editorMove.js
  • editor.js

  • designChange.js

    css

  • editor_style_custom.css

    js

  • stringProcessing.js

  • store.js
  • spGuestDrag.js
  • profile.js
  • photoTransform.js
  • menu.js
  • init.js
  • formatter.js

  • dataInteraction.js

    vendor

  • vuex.min.js

  • vue.min.js
  • vue-autosizer
  • snap.svg-min.js
  • screenfull.min.js
  • mobile-drag-drop
  • nouislider.js
  • lodash.min.js
  • hogan.min.js
  • FileSaver.min.js
  • dayjs
  • axios.min.js
  • autosize.js
  • algebra.min.js

2. 视图层主文件整理

seat_table_edit_page_sp.tpl 、seat_table_edit_page_pc.tpl 席次表sp、pc

a. 基本情报

  • 修改新郎、新婦的姓名、罗马字，修改姓氏的时候会影响到タイトルと追記文的ご両家名内容

  • 修改挙式日

    b. 席次表デザイン

  • カラー，席次表的カラー选择，如果product_options_select 1接口返回空数组则表示此席次表没有カラー，此区域不显示

  • 形，席次表的形选择，如果product_options_select 9接口返回空数组则表示此席次表没有形，此区域不显示

  • リボン，席次表的リボン选择，如果product_options_select 2接口返回空数组则表示此席次表没有リボン，此区域不显示

    c. 写真の登録

  • 新郎新婦写真，有区域掲載选项，点击未上传照片的区域会调起系统上传照片模块，已上传照片区域会出现对应的削除按钮

  • ふたり写真，有区域掲載选项，点击未上传照片的区域会调起系统上传照片模块，已上传照片区域会出现对应的削除按钮

  • プロフィール写真，有区域掲載选项，点击未上传照片的区域会调起系统上传照片模块，已上传照片区域会出现对应的削除按钮

    d. プロフィール＆インタビュー

  • プロフィール，有区域掲載选项，初始显示5条，最多可追加至10条，質問有单独的掲載选项，可以通过点击上下按钮来调整質問的顺序

  • インタビュー，有区域掲載选项，初始显示5条，最多可追加至8条，質問有单独的掲載选项，可以通过点击上下按钮来调整質問的顺序

    e. ご挨拶文＆新居案内

  • ご挨拶文，有区域掲載选项，文例通过初始化的时候get_season接口请求回来

  • 新居案内，有区域掲載选项，有4行的建议行数限制

    f. お料理メニュー

  • お料理メニュー，金额根据option 8请求回的数据决定，有区域掲載选项，初始料理有5条，最多可追加至11条，每条有单独的掲載选项

  • ドリンクメニュー，文本域最多建议输入5行，超出5行可入力但会出现超行警告，可整体非掲載

    g. テーブルレイアウト

  • テーブルレイアウトを選択，根据table_data接口返回的数据进行横長レイアウト与縦長レイアウト的分组，再通过判断丸机、長机、混合，点击对应的桌子将需要渲染的桌子规格，如果已经存在桌子会弹出确定覆盖之前桌子的提示框

    h. レイアウト調整

  • テ一ブルの位置を調整，调整桌子位置，使svg区域变成网格编辑状态，隐藏席位

  • テ一ブルを追加，追加桌子，根据table_data接口请求的数据进行可选渲染
  • テ一ブルの幅·高さ·サイズを調整，调整桌子的大小及间距
  • 配置揃え(天地揃え·中央揃え)，调整对齐方式

  • テ一ブル名の編集とテ一ブルの削除，编辑桌子名和删除桌子，只有选中某桌子的时候编辑和删除机能才可以执行

    i. ゲストの登録と配席

  • ゲストの登録と配席，通过guestList数据进行配席

    j. タイトルと追記文

  • タイトルと式場名，ご両家名、タイトル、式場名的修改

  • 追記文，单行文本域

menu_list_edit_page_sp.tpl 、menu_list_edit_page_pc.tpl メニューsp、pc

a. 基本情报

  • 修改新郎、新婦的姓名、罗马字

  • 修改挙式日

    b. メニュー表デザイン

  • カラー，メニュー的カラー选择，如果product_options_select 1接口返回空数组则表示此メニュー没有カラー，此区域不显示

  • 形，メニュー的形选择，如果product_options_select 9接口返回空数组则表示此メニュー没有形，此区域不显示

  • リボン，メニュー的リボン选择，如果product_options_select 2接口返回空数组则表示此メニュー没有リボン，此区域不显示

    c. お料理メニュー

  • お料理メニュー，初始显示5条，最多可追加至11条，其中英语可输入英语及特殊字符，每条有单独非掲載

  • ドリンクメニュー，文本域最多建议输入5行，超出5行可入力但会出现超行警告，可整体非掲載

    invitation_edit_page_sp.tpl 、invitation_edit_page_pc.tpl 招待状sp、pc

    a. 基本情报

  • 修改新郎、新婦的姓名、罗马字、続柄、旧姓

  • 修改挙式日，挙式日变化的同时会影响到投函月的值(投函月选择的月份 === 挙式日的月份 - 2)

  • 修改新郎、新婦 親的姓名

    b. 本状文章

  • 修改投函月，投函月变化的同时会影响到時候の挨拶的值

  • 修改時候の挨拶，時候の挨拶是通过editor组件使用get_season接口请求回来，并通过将数据传输到主画面，根据send_month的值将对应的greeting生成月份对应的時候の挨拶数组，時候の挨拶变化的同时会影响到本状文章模板的值
  • 本状文章模板选择，根据get_season接口请求回的数据将文例进行分组，通过select选择组使其显示对应的文例，文例内容中的变量会在请求成功时通过data里对应的数据进行变量替换，使其显示正确的文言，选择文例时会影响本状文章編集的内容
  • 修改本状文章編集，初期値决定本状文章編集的行数限制，回车的数量会影响是否超出最大行数，文章内容会进行敏感字检查，点击初期値に戻す通过invitationTextRefresh方法使其恢复为初始模板
  • 选择旧姓表示，影响svg的旧姓表示，旧姓是通过计算每个选项是否被选择使用computed得出，旧姓表示修改的同时会影响封筒和返信はがき的旧姓表示选择
  • 時間，時間的内容受午前或午後影响，午前：8~12， 午後： 0~10
  • 会場，会場名、会場住所＆TEL、会費
  • 追記文，默认出现3个追记文（至少显示前3个，会显示到最后一个掲載的追记文），最多可增加至5个追记文
  • 写真を登録，根据模板JSON文件判断是否有写真，没有则不显示
  • カラー，招待状本状的カラー选择，如果product_options_select 1接口返回空数组则表示此招待状没有カラー，此区域不显示

  • リボン，招待状本状的リボン选择，如果product_options_select 2接口返回空数组则表示此招待状没有リボン，此区域不显示

    c. 封筒

  • 差出人名，选择封筒显示的是新郎新婦名还是親名，会影响返信はがき的选择，同时形象地址输入区域显示的内容

  • 記載方法，选择封筒显示的是ーつの住所で連名还是新郎新婦別々に記載，会影响返信はがき的选择，同时形象地址输入区域显示的内容
  • 住所，根据差出人名和記載方法的选择显示对应住所的输入框，输入7位邮编会触发getAddress方法自动请求并更新地址，输入内容会影响返信はがき的住所使う
  • 选择旧姓表示，影响svg的旧姓表示，旧姓表示修改的同时会影响返信はがき的旧姓表示选择
  • 封筒カラー，不影响svg封筒的颜色

  • 宛名印刷，通过handleGetGuestList请求回初始的guestList

    d. 返信はがき

  • 返送先宛名，选择返信はがき显示的是新郎新婦名还是親名

  • 返送先，选择返信はがき显示的是ーつの住所で連名还是新郎新婦別々に記載，会影响svg的区域显示的个数
  • 住所，住所使う的选择会将封筒内对应的信息同步过来
  • 旧姓表示，影响svg的旧姓表示

  • はがき裏面，触发handleChangeItemInvitationBusSelect方法，选择svg显示的是哪个はがき裏面

    e. 付箋

  • 付箋内容，6个固定的内容，初始显示前4个，最大枚数999，最小枚数1，通过amountAdjust进行枚数限制，本文内容长度受初始模板影响；超出价格为API返回，前台固定显示；

  • オリジナル付箋，初期显示1个非选择状态的文章，最大可追加数由JSON内容决定

    f. 招待状数据及页面逻辑

  • 页面初期化: 更新data => 获取挙式日 => 获取出荷日 => 获取忌语 => 获取本状文章例文 => 获取登录信息 => 如果取到登录信息且远端有数据则获取远端数据 => 请求option商品

  • svg的文字块是否显示是通过主画面notPosted方法计算出所有不显示的块传输给editor，在editor中遍历得出

    escort_cards_edit_page_sp.tpl 、escort_cards_edit_page_pc.tpl 席札sp、pc

    a. 基本情报

  • 修改新郎、新婦的姓名、罗马字

  • 修改挙式日

    b. 席札デザイン

  • 形，席札的形选择，如果product_options_select 9接口返回空数组则表示此席札没有形，此区域不显示

  • リボン，席札的リボン选择，如果product_options_select 2接口返回空数组则表示此席札没有リボン，此区域不显示

    c. 印刷内容

  • 新郎・新婦様分の席札の印刷について，会影响下载和预览是否有新郎新婦的席札

  • 敬称(様・くん・ちゃん等)の設定，席札下载和预览时是否显示敬称
  • 両親の肩書について，根据请求回的数据判断是否有两亲，有的话决定是否显示其肩书
  • ゲスト一覧，显示所有请求回的来宾

  • 予備の席札，价格是根据第一部予备席札决定，缩略图显示的效果是根据请求回的席札，追加svg克隆元素_svg长子rect元素，将product_options_select 1接口返回color_value通过fill插入到rect上，使对应的svg可以显示对应的颜色，色块是color_value的颜色，name是color的name，个数限制为：0~999

    d. 席札数据及页面逻辑

  • 页面初期化: 更新data=> 获取挙式日 => 获取出荷日 => 获取忌语 => 获取登录信息 => 如果取到登录信息且远端有数据则获取远端数据 => 请求option商品，如果product_options_select 1接口返回非空则请求option 7予备席札，通过将option 7与option 1进行组合得到完整的予备席札

    页面共通方法及数据逻辑梳理

    a. 数据流

    数据的来源及初始化: 需要保存的初始数据，会定义到store.js中，在created周期中判断local中是否已经存在数据，如果存在则通过init方法调用local中的数据，否则通过init方法调用store.js中的初始数据，将数据同步到vue的data上与各页面文件的pageData组合共同构成页面的数据。
    数据的前台持久化: 通过vue watch深度监听data的变化，将数据实时存储到local中。
    svg随数据变化: 通过vue watch深度监听data的变化，findDiffKey方法去找到变化的具体键值对，将修改后的键值对一起push到changeWord数组中，并通过使用lodash对该数组进行节流防抖优化，变化停止后1秒将最终数据传输到对应的editor文件中，使其svg变化。
    svg传输到主画面: getJson方法将myId、是否存在图片信息传输到主画面。getLocation将svg中的元素块位置信息传输到主画面。

    b. 全屏、sp折叠svg区域

    通过viewableAreaZoom方法将editor中触发的指令传送到主画面进行高度或全屏的变更

    c. 页面检查

    页面会实时进行检查，判断出错误项的个数并在每本最后一个tab里最下方显示，点击此处则进入全局检查状态，所有错误输入项的背景颜色会变成黄色，在右侧会出现！点击可直接唤起检查popup，同时，点击popup中的错误项，会触发getFocusPoint方法聚焦
    分别检查empty、init、other三类，每类对应的Tab会通过vue computed计算出当前此类此Tab未通过检查的个数，通过判断未通过检查个数是否均为0，得到整个Tab是否通过检查和整个商品是否通过检查

    d. Tab切换

    由于页面显示的是根据currentSlide的值决定显示的是哪个界面，页面下方会有戻る和次へ，会改变currentSlide的值，同时调用handleTapNavSwiper方法进行swiper切换，同时在第一页和最后一页会由于无法再继续点击会把对应按钮置成disabled
    直接点击对应的tab导航栏，可直接切换至对应tab
    通过地址栏获取的t o 的值触发getURLFocusDom函数
    通过svgSwtich方法将主画面的currentSlide的值转义成svg区域对应显示的svg，使其显示正确的svg

    e. 出荷日、电话

    通过接口delivery_select请求回对应的出荷日，与固定的通常、特急、超特急、超超特急组合成出荷日
    ご利用ガイド，点击跳转
    電話サポートに電話をかける，点击即可拨打电话

    f. vue页面逻辑

    id=”editor”的div为整个页面的最高级容器，通过editor、option、popup等组件构成完整页面，页面通过Swiper实现切换Tab
    store的数据在store.js中，只取不存，可以用作初始化及页面初期値恢复
    data由store中的数据和各页面的pageData构成。pageData不保存到local中，各页面的数据不互通。local中的数据互通
    components引入封装的公共组件
    methods页面自有函数
    created用作数据初期化，保证页面的data里数据都存在，请求例文、忌语、挙式日等信息
    mounted实现页面操作，页面布局设定、sp的高度设定、Swiper的初期化
    computed实现页面数据计算，各检查项有多少未满足条件的入力项，各选择按钮根据对应的选项
    watch监听页面数据变化，根据数据变化做出联动处理，根据数据变化请求邮政地址等

    3. 组件文件整理

    popup.js 弹窗组件

    a. 登录

    未登录的用户在点击保存、注文、获取guestList、跳转到关联席札时会弹出
    输入账号密码后将账号密码product_id发送login接口，将接口返回的登录信息保存，登录状态更新，既有dom节点进行更新

    b. 保存确认框

    用户登录成功，远端有数据的时候会提示上書き保存或者新規保存，通过save接口给服务器发送选择

    c. loading框

    初始化时svgNeedLoading和页面中途需要loading进行等待editorNeedLoading共同控制loading是否出现

    d. 错误信息框

    根据接口返回的错误信息，将错误信息提示确认

    e. 保存成功信息提示

    save接口保存成功后，弹出3秒自动关闭的提示信息

    patternInput.js

    a. alpha

    input输入框封装，通过监听input内容变化进行实时筛选，只能包含英语字符，可限制最大入力长度

    b. alpha-title

    input输入框封装，通过监听input内容变化进行实时筛选，只能包含英语字符和空格，可限制最大入力长度

    c. zip

    input输入框封装，通过监听input内容变化进行实时筛选，只能包含数字，可限制最大入力长度

    option.js

    根据product_id、option对应的flg、type_code向product_options_select接口发送请求，将返回值遍历并生成对应的option单选控件

    editorPC.js PC端svg渲染区域主入口

    a. 通过vue的extend方法插入组件

    其中包含「席の入れ替えや移動は」提示框、下载、全屏、缩放handleZoomInOut、svg渲染、图片编辑层机能，通过switchSvg的值变化确定当前需要显示的svg

    b. 变量

    handleChangeExpression: 主画面数据变化，需要svg进行对应修改的数组
    switchSvg: 当前应当显示的svg
    switchText: 主画面选择的数据，如はがき裏面
    notPosted: svg区域需要隐藏的元素
    needUpdate: memo画面用户发生选择，需要重新获取最新数据
    menu: 菜单信息
    inputData: 主画面field内容
    itemInvitationColorSelect: 招待状svg需要渲染的颜色
    favoriteCategory: 判断主画面当前信息
    table: 桌子信息
    seat: 席位信息
    tableLayoutChange: 桌子的位置调整、居中方式、编辑状态
    guest: 席次表来宾
    isFullScreen: 是否全屏
    svgBgColor: svg背景色
    pdfNotEmpty: pdf是否为空
    isShowGuestTip: 来宾提示

    c. 组件逻辑

    初期化:

  • 请求load_template_data获取到该商品的JSON数据，通过判断favoriteCategory的值确定主画面信息，请求对应的svg文件

  • 将field里的数据通过JSON里提供的格式信息进行格式转换，通过bulk接口请求回对应的数据数组
  • 将数组中的元素遍历，生成对应的path，同时，生成rect标签，将颜色、不透明度、宽高、是否超行、是否为空、错误信息插入到rect节点上，将rect和path插入到对应的位置
  • 通过寻找class: svg-clickable，确定元素是否存在点击事件
  • 在初始请求都结束时，loading+1，初始化拖拽机能initSvgDrag;initSvgDraggableItems、将首屏svg平铺及做相对适口的自适应处理initSvgSizeAndPosition;initSvgPCLocation、鼠标移上事件的追加bindHoverEffect

补充:

  • 招待状的追记文JSON数据只有一条，其他追记文是根据JSON提供的追记文信息进行克隆
  • 根据getSeason请求回的本状文章文例信息，将其动态指向对应的field数据inputValidate
  • 需要显示与隐藏的节点，在请求回对应的path和rect后通过display进行控制
  • menu会根据JSON的数据判断出单页或者双页，进而请求对应的svg
  • 席札会追加固定内容的「名字 太郎 様」模块

watch:

  • handleChangeExpression变化触发对应的editor方法，遍历handleChangeExpression，通过glyph方法请求回新的path，将原有path替换。并根据接口返回的错误信息，修改ract上的错误信息，及是否显示
  • menuObj，菜单显示与隐藏，菜品修改
  • switchSvg，svg变化
  • doubleInvitation，招待状是否是双面的
  • loading，判断初始请求是否已经结束
  • switchText，招待状各页的选项变更，触发svg的显示与隐藏

  • memoTagList，memo显示与隐藏，内容修改

    editor.js

    a. 通过vue的extend方法插入组件

    其中包含移动控制块、席の入れ替えや移動は」提示框、表侧里侧选项卡、memo选项卡、返信选项卡、下载、全屏、调整缩放比例及svg区域折叠handleZoomInOut、svg渲染、图片编辑层机能，通过switchSvg的值变化确定当前需要显示的svg

    b. 变量

    handleChangeExpression: 主画面数据变化，需要svg进行对应修改的数组
    switchSvg: 当前应当显示的svg
    switchText: 主画面选择的数据，如はがき裏面
    notPosted: svg区域需要隐藏的元素
    needUpdate: memo画面用户发生选择，需要重新获取最新数据
    memoFocus: 当前选择的memo
    menu: 菜单信息
    controlLift: 控制svg区域是否折叠
    inputData: 主画面field内容
    itemInvitationColorSelect: 招待状svg需要渲染的颜色
    favoriteCategory: 判断主画面当前信息
    table: 桌子信息
    seat: 席位信息
    tableLayoutChange: 桌子的位置调整、居中方式、编辑状态
    guest: 席次表来宾
    isFullScreen: 是否全屏
    svgBgColor: svg背景色
    pdfNotEmpty: pdf是否为空
    isShowGuestTip: 来宾提示

    c. 组件逻辑

    初期化:

  • 请求load_template_data获取到该商品的JSON数据，通过判断favoriteCategory的值确定主画面信息，请求对应的svg文件

  • 将field里的数据通过JSON里提供的格式信息进行格式转换，通过bulk接口请求回对应的数据数组
  • 将数组中的元素遍历，生成对应的path，同时，生成rect标签，将颜色、不透明度、宽高、是否超行、是否为空、错误信息插入到rect节点上，将rect和path插入到对应的位置
  • 控制svg显示与隐藏，并更新选项卡对应的数据
  • 通过寻找class: svg-clickable，确定元素是否存在点击事件
  • 在初始请求都结束时，loading+1，初始化拖拽机能initSvgDrag;initSvgDraggableItems、将首屏svg平铺及做相对适口的自适应处理initSvgSizeAndPosition

补充:

  • 招待状的追记文JSON数据只有一条，其他追记文是根据JSON提供的追记文信息进行克隆
  • 根据getSeason请求回的本状文章文例信息，将其动态指向对应的field数据inputValidate
  • 需要显示与隐藏的节点，在请求回对应的path和rect后通过display进行控制
  • menu会根据JSON的数据判断出单页或者双页，进而请求对应的svg
  • 席札会追加固定内容的「名字 太郎 様」模块

watch:

  • handleChangeExpression变化触发对应的editor方法，遍历handleChangeExpression，通过glyph方法请求回新的path，将原有path替换。并根据接口返回的错误信息，修改ract上的错误信息，及是否显示
  • menuObj，菜单显示与隐藏，菜品修改
  • switchSvg，svg变化
  • doubleInvitation，招待状是否是双面的
  • loading，判断初始请求是否已经结束
  • switchText，招待状各页的选项变更，触发svg的显示与隐藏
  • memoTagList，memo显示与隐藏，内容修改

    designChange.js デザイン変更页

    a. 選択中のデザイン

    当前选择的商品，通过load_select_product接口返回

    b. デザイン変更

    可选商品列表，根据load_product请求回，将接口返回的价格作为主键生成对应的选择菜单，点击デザインを変更する时弹出确认弹窗，确认后跳转到对应的商品页面

    4. js函数封装

    stringProcessing.js

    对String原型链进行封装，实现首字母大写，获取对应位置的字符等功能

    store.js

    vuex的store，不同商品互通的数据、保存到服务器端的所有字段

    spGuestDrag.js

    手机端来宾席位拖拽事件、来宾交换事件

    profile.js

    initProfileSvg： 初始化表紙、プロフィール Tab的svg
    loadProfileLocalJson：获取local中的变量信息
    getLayoutParams：计算席位宽高、中线点高度、姓名块距离顶部底部距离及自身高度
    initProfile：初始化表紙
    initInterview：初始化表紙的qa位置、qa显示与隐藏
    profileEdit：表紙编辑文字内容
    tableEdit：席次表编辑文字内容
    initTableSvg： 初始化席次 Tab的svg
    drawOutline：绘制网格
    currentLayoutTable： 切换桌子模板（如：4-4-4）
    tableView: 绘制桌子元素
    guestView：绘制席位
    initTableGuestSort： 一个桌子里面席位的排序
    initGuestPath： 获取席位path
    handlePositionAdjust：判断是否进入桌子编辑模式
    handleQuitGuestEdit：退出席位编辑模式
    initTableNamePath： 获取桌子名称path
    handleChangeTableList：桌子增删改
    handleChangeSeatList：席位增删
    handleChangeGuest：配席
    handleTableLayoutChange：tpl通知editor进入编辑模式
    uniqueId：生成席位ID
    getRandom: 获取随机数
    checkEnglish：英语输入检查
    checkEnglishPoint：英语、符号输入限制
    addEmptySeat：追加空席
    handleGetGuestList：获取guestList列表
    removeTable：删除桌子
    handleCancelChange：取消调整
    handleSureChange：确认调整
    handleTplPositionAdjustSp：手机端桌子位置调整
    handleTplPositionAdjustPc：Pc端桌子位置调整
    addGuest：追加来宾
    handleTableLayoutType：tpl中切换桌子模板并通知editor
    createSvg：绘制桌子模板的圆点
    addQa：追加qa区域问题
    addProfile：追加profile区域问题
    handleSelectMessage：profile选择文例
    handleSort：qa排序
    handleEditType：切换表紙和席次
    handleTapNavSwiper： 切换swiper

    photoTransform.js

    写真的旋转、平移、缩放、定位

    menu.js

    initMenuEdit：初始化菜单，通过JSON提供的区域高度；category、japanese、english的信息生成完整菜单信息
    menuDrinkSort：菜单菜品排序
    addMenu：追加菜单
    menuEdit：菜单编辑
    menuEditGlyph：菜单内容修改

    init.js

    init：初始化vue data
    getUrlKey：获取地址栏信息
    callphone：拨打电话
    initialDataRequest：tpl初始化数据
    typeCode：根据set商品名称生成对应的typeCode
    setDeliveryDate: 出荷日格式转换
    findDiffKey：找到两个对象中有不同value的两个key
    handleNavigate：控制swiper翻页
    submitDownload：pdf下载
    leave：离开画面弹出警告

    formatter.js

    expressRegular：将JSON中表达式的不含数字字段及规则需求拆分
    expressAllNumRegular：将JSON中表达式的字段及规则需求拆分
    postZipRegular： 邮编位置拆分
    seireki_to_wareki：和历
    switchEnglishDate： 英语日期 1st
    dateFormat：日期格式转换
    updateObj：将表达式跟local数据转化为满足规则的数据
    nameFormatRegular：特定日期及名称规则转化

    dataInteraction.js

    alertSave：保存前判断是否登录
    alertOrder：注文前判断是否登录
    overwriteSave：选择新规保存或者上书保存
    save：将local数据保存到远端
    order: 将local数据发送到，并注文
    getData：获取远端数据
    login：登录
    uploadFile：上传写真
    imageTransform：写真位置信息调整
    updateImgData：更新写真位置数据
    getURLFocusDom：通过地址栏传参，使页面定位到指定位置

    ediorMove.js

    getTouches： 获取当前屏幕上所有触摸点的列表
    getTouchsDistance：获取双指距离
    Zoom.init 初始化svg实例拖拽
    Zoom.drage: svg实例拖拽
    Zoom.zoom: 两根手指进行缩放
    Zoom.touchmoveHandler: 手指移动事件
    Zoom.mousemoveHandler：鼠标移动事件
    Zoom.touchEndHandler: 手指拖拽结束事件
    Zoom.mouseupHandler: 鼠标拖拽结束事件
    Zoom.setTransform: 拖拽结束计算偏移量
    Zoom.destroy： 销毁拖拽实例
    Zoom.setScale：手机版svg缩放
    Zoom.preSetScale：通过缩放比例及手指位置计算出svg拖拽后的位置
    drag：svg小块拖拽
    tableDrag： 桌子拖拽事件
    checkTableIsCoincide：判断桌子是否重合
    getPointer：兼容手机和pc，位置点坐标
    removeTableDrag：清除桌子拖拽事件
    addTable：添加桌子并追加桌子的拖拽事件、桌子的初始位置信息
    guestDrag：席位拖拽
    guestOverDelete：席位鼠标移上信息删除
    dataRegionOver：判断席位当前在哪个区域，桌子左，桌子右，席位
    tpl drag guest：pc将来宾拖拽到svg区域并配席

    5. 第三方插件整理

    vuex.min.js // 基于vuex的store进行初始数据管理

    vue.min.js // 基于vue进行数据与视图层逻辑处理

    snap.svg-min.js // 基于snap.svg实现svg拖拽、定位功能

    screenfull.min.js // 基于screenfull实现

    mobile-drag-drop // 实现手机席位拖拽

    nouislider.js // 实现桌子间距调整滑块

    lodash.min.js // 基于lodash实现数据节流防抖处理

    hogan.min.js // 基于hogan实现文例的指定节点渲染

    FileSaver.min.js // 基于FileSaver实现下载pdf保存

    dayjs // 基于dayjs实现时间数据格式处理

    axios.min.js // 基于axios实现请求数据，解析API

    autosize.js // 使textarea输入时可以随文本内容进行高度自适应

    algebra.min.js // 基于algebra实现多元方程求解