From 8de0f0e1f18cfd40042efab7c1cd7430a1853635 Mon Sep 17 00:00:00 2001
From: yulixing <yulixing@kingsome.cn>
Date: Tue, 25 Jun 2019 20:35:03 +0800
Subject: [PATCH] =?UTF-8?q?=E6=88=90=E5=B0=B1=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/mp_share.js                           |   9 +
 src/router/modules/games.js                   |   6 +
 src/styles/fonts.scss                         |   2 +-
 src/views/games/details/achievement/index.vue | 305 +++++++++
 src/views/games/details/index.vue             |   1 +
 src/views/games/details/mp/edit.vue           | 591 ++++++++++++------
 6 files changed, 723 insertions(+), 191 deletions(-)
 create mode 100644 src/api/mp_share.js
 create mode 100644 src/views/games/details/achievement/index.vue

diff --git a/src/api/mp_share.js b/src/api/mp_share.js
new file mode 100644
index 0000000..0f48f3e
--- /dev/null
+++ b/src/api/mp_share.js
@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function getPic(data) {
+  return request({
+    url: '/games/mp_share/get_pic',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/router/modules/games.js b/src/router/modules/games.js
index 3a71ff8..328f940 100644
--- a/src/router/modules/games.js
+++ b/src/router/modules/games.js
@@ -68,6 +68,12 @@ const gamesRouter = {
           name: 'GameDetailsShare',
           meta: { title: '分享图' }
         },
+        {
+          path: 'achievement',
+          component: () => import('@/views/games/details/achievement/index'),
+          name: 'GameDetailsAchievement',
+          meta: { title: '成就' }
+        },
         {
           path: 'share/edit',
           component: () => import('@/views/games/details/share/edit'),
diff --git a/src/styles/fonts.scss b/src/styles/fonts.scss
index 5b0612e..523b517 100644
--- a/src/styles/fonts.scss
+++ b/src/styles/fonts.scss
@@ -1,6 +1,6 @@
 @font-face {
   font-family: 'muyao';
-  src: url('~@/assets/fonts/muyao.ttf') format('truetype');
+  src: url('http://ptfwuko7v.bkt.clouddn.com/muyao.ttf') format('truetype');
 }
 
 @font-face {
diff --git a/src/views/games/details/achievement/index.vue b/src/views/games/details/achievement/index.vue
new file mode 100644
index 0000000..ba74000
--- /dev/null
+++ b/src/views/games/details/achievement/index.vue
@@ -0,0 +1,305 @@
+<template>
+  <div class="main-content">
+    <el-select
+      v-model="platform_id"
+      style="width: 70%"
+      @change="changePlatform"
+    >
+      <el-option
+        v-for="item in platformsArr"
+        :key="item.platform.platform_id"
+        :label="item.platform.name"
+        :value="item.platform.platform_id"
+      />
+    </el-select>
+    <el-collapse
+      v-model="activeNames"
+      @change="handleChange"
+      style="width: 60%"
+    >
+      <el-collapse-item
+        :title="ahievementForm.title || '未命名'"
+        name="1"
+      >
+        <el-form
+          ref="ahievementForm"
+          :model="ahievementForm"
+          :rules="ahievementFormRules"
+          style="width: 100%"
+          label-width="100px"
+          class="mgt-20 mgb-20"
+        >
+
+          <el-form-item
+            label="标题"
+            prop="title"
+          >
+            <el-input
+              v-model="ahievementForm.title"
+              style="width: 70%"
+            />
+          </el-form-item>
+          <el-form-item
+            label="id"
+            prop="id"
+          >
+            <el-input
+              v-model="ahievementForm.id"
+              style="width: 70%"
+            />
+          </el-form-item>
+          <el-form-item
+            label="提示文字"
+            prop="tip"
+          >
+            <el-input
+              v-model="ahievementForm.tip"
+              style="width: 70%"
+            />
+          </el-form-item>
+          <el-form-item
+            label="奖励类型"
+            prop="reward_type"
+          >
+            <el-radio
+              v-model="ahievementForm.reward_type"
+              :label="1"
+            >称号</el-radio>
+            <el-radio
+              v-model="ahievementForm.reward_type"
+              :label="2"
+            >代币</el-radio>
+            <el-radio
+              v-model="ahievementForm.reward_type"
+              :label="0"
+            >其他</el-radio>
+          </el-form-item>
+          <el-form-item
+            label="奖励数量"
+            prop="reward_count"
+          >
+            <el-input
+              v-model="ahievementForm.reward_count"
+              style="width: 70%"
+            />
+          </el-form-item>
+          <el-form-item
+            label="达成条件"
+            prop="need_type"
+          >
+            <el-select
+              v-model="ahievementForm.need_type"
+              placeholder="达成条件"
+              style="width: 70%"
+            >
+              <el-option
+                label="完成关卡"
+                value="shanghai"
+              />
+              <el-option
+                label="完成题目"
+                value="beijing"
+              />
+              <el-option
+                label="失败题目"
+                value="beijing"
+              />
+              <el-option
+                label="邀请好友"
+                value="beijing"
+              />
+              <el-option
+                label="观看视频"
+                value="beijing"
+              />
+              <el-option
+                label="其他"
+                value="beijing"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            label="达成数量"
+            prop="need_count"
+          >
+            <el-input
+              v-model.number="ahievementForm.need_count"
+              style="width: 70%"
+            />
+          </el-form-item>
+          <el-form-item
+            label="默认获得"
+            prop="geted"
+          >
+            <el-radio
+              v-model="ahievementForm.geted"
+              :label="1"
+            >是</el-radio>
+            <el-radio
+              v-model="ahievementForm.geted"
+              :label="0"
+            >否</el-radio>
+          </el-form-item>
+          <el-form-item>
+            <el-button
+              type="primary"
+              size="small"
+            >保存</el-button>
+            <el-button
+              type="danger"
+              size="small"
+            >删除</el-button>
+          </el-form-item>
+        </el-form>
+      </el-collapse-item>
+
+    </el-collapse>
+
+    <div class="tip mgt-20 mgb-20">
+      暂无成就，请添加成就配置
+    </div>
+
+    <el-button
+      style="width: 60%"
+      class="mgt-20"
+    >新增成就</el-button>
+
+  </div>
+</template>
+
+
+<script>
+import { mapGetters } from 'vuex'
+import { getGame } from '@/api/games'
+import getPageTitle from '@/utils/get-page-title'
+import {
+  resetSettings,
+  getGameSettings,
+  saveGameSettings,
+  getSettingItems,
+  publishGameSettings,
+  saveSettingItem
+} from '@/api/settings'
+
+export default {
+  name: 'GameDetailsShare',
+  data() {
+    return {
+      // common
+      uid: '',
+      platform_id: '',
+      platformsArr: [],
+      gameInfo: {},
+      permEdit: false,
+      permPublish: false,
+
+      // form
+      ahievementForm: {},
+      ahievementFormRules: {
+        title: [
+          { required: true, message: '请选择活动区域', trigger: 'change' }
+        ],
+        id: [{ required: true, message: '请选择活动区域', trigger: 'change' }],
+        reward_type: [
+          { required: true, message: '请选择活动区域', trigger: 'change' }
+        ],
+        reward_count: [
+          { required: true, message: '请选择活动区域', trigger: 'change' }
+        ],
+        need_type: [
+          { required: true, message: '请选择活动区域', trigger: 'change' }
+        ],
+        need_count: [
+          { required: true, message: '请选择活动区域', trigger: 'change' }
+        ],
+        geted: [
+          { required: true, message: '请选择活动区域', trigger: 'change' }
+        ]
+      },
+      activeNames: '1',
+      defaultSetting: {
+        title: '',
+        id: '',
+        tip: '',
+        reward_type: 1,
+        reward_count: 1,
+        need_type: 1,
+        need_count: 1,
+        geted: 0
+      },
+      allAC: []
+    }
+  },
+    computed: {
+    ...mapGetters(['userInfo'])
+  },
+  mounted() {
+    this.uid = this.$route.params.uid
+    this.permEdit =
+      this.userInfo.permissions.includes(`${this.uid}-edit`) ||
+      this.userInfo.permissions.includes(`${this.uid}-publish`) ||
+      this.userInfo.permissions.includes(`games-writeable`)
+    this.permPublish =
+      this.userInfo.permissions.includes(`${this.uid}-publish`) ||
+      this.userInfo.permissions.includes(`games-writeable`)
+    this.getGameInfo(this.getGameSettings)
+  },
+  methods: {
+    handleChange() {},
+    getGameInfo(cb) {
+      getGame({ uid: this.uid })
+        .then(res => {
+          const { data } = res
+          if (data.errcode === 0) {
+            this.gameInfo = data.gameInfo
+            this.platformsArr = data.gameInfo.platforms
+            this.$route.meta.title = this.gameInfo.game_name
+            document.title = getPageTitle(this.gameInfo.game_name)
+            if (this.$route.query.platform_id) {
+              this.platform_id = this.$route.query.platform_id
+            } else {
+              this.platform_id = this.platformsArr[0]
+                ? this.platformsArr[0].platform.platform_id
+                : ''
+            }
+            if (cb && cb instanceof Function) cb()
+          }
+        })
+        .catch(err => {
+          console.log(err)
+        })
+    },
+    getGameSettings() {
+      getGameSettings({
+        uid: this.uid,
+        type: this.type === 'normal' ? 0 : 1,
+        id: this.gameInfo.game_id,
+        pid: this.platform_id
+      }).then(res => {
+        const { data } = res
+        if (data.errcode !== 0) {
+          this.$notify.error({
+            title: '错误',
+            message: data.errmsg
+          })
+          return
+        }
+        this.settingsForm.settings = data.records
+        this.selectedSettings = data.records
+        this.settingKeys = data.records.map(item => {
+          return item.key
+        })
+        if (data.published === false) {
+          this.tip = '配置已保存，待发布'
+        } else if (data.published === true) {
+          this.tip = '配置已发布'
+        }
+        if (this.settingsForm.settings.length === 0) this.tip = ''
+        this.changeState(false)
+      })
+    },
+    changePlatform() {}
+  }
+}
+</script>
+
diff --git a/src/views/games/details/index.vue b/src/views/games/details/index.vue
index 91b134d..7f6e296 100644
--- a/src/views/games/details/index.vue
+++ b/src/views/games/details/index.vue
@@ -6,6 +6,7 @@
       <el-menu-item :index="`/games/details/${uid}/info`">详情</el-menu-item>
       <el-menu-item v-if="uid !== 'new'" :index="`/games/details/${uid}/settings`">配置</el-menu-item>
       <el-menu-item v-if="uid !== 'new'" :index="`/games/details/${uid}/share`">分享</el-menu-item>
+      <el-menu-item v-if="uid !== 'new'" :index="`/games/details/${uid}/achievement`">成就</el-menu-item>
       <!-- <el-menu-item :index="`/games/details/${uid}/recommendation`">推荐</el-menu-item>
       <el-menu-item :index="`/games/details/${uid}/reward`">奖励</el-menu-item>
       <el-submenu :index="`/games/details/${uid}/gm/servers`">
diff --git a/src/views/games/details/mp/edit.vue b/src/views/games/details/mp/edit.vue
index c6190f7..a3283a0 100644
--- a/src/views/games/details/mp/edit.vue
+++ b/src/views/games/details/mp/edit.vue
@@ -35,11 +35,15 @@
               placeholder="例：500px"
             />
           </el-form-item>
-          <el-form-item label="画布背景" prop="base_style.background">
-            <el-input
+          <el-form-item
+            label="画布背景"
+            prop="base_style.background"
+            class="form-item-color-picker"
+          >
+            <el-color-picker
               v-model="tplForm.base_style.background"
-              placeholder="例：#fff"
-            />
+              show-alpha
+            ></el-color-picker>
           </el-form-item>
           <el-form-item label="画布圆角" prop="base_style['border-radius']">
             <el-input
@@ -48,7 +52,13 @@
             />
           </el-form-item>
           <el-form-item label="绘制组" prop="views">
-            <el-table :data="tplForm.views" style="width: 100%" size="mini">
+            <el-table
+              :data="tplForm.views"
+              style="width: 100%"
+              size="mini"
+              @row-click="rowClick"
+              :row-class-name="tableRowClassName"
+            >
               <el-table-column type="index" width="30" />
               <el-table-column label="内容" show-overflow-tooltip>
                 <template slot-scope="scope">
@@ -76,16 +86,16 @@
               </el-table-column>
               <el-table-column label="操作">
                 <template slot-scope="scope">
-                  <span @click="editView(scope.$index, scope.row)"
+                  <span @click.stop="editView(scope.$index, scope.row)"
                     ><svg-icon icon-class="edit"
                   /></span>
-                  <span @click="delView(scope.$index, scope.row)"
+                  <span @click.stop="delView(scope.$index, scope.row)"
                     ><svg-icon icon-class="close"
                   /></span>
-                  <span @click="upView(scope.$index)"
+                  <span @click.stop="upView(scope.$index)"
                     ><svg-icon icon-class="up"
                   /></span>
-                  <span @click="downView(scope.$index)"
+                  <span @click.stop="downView(scope.$index)"
                     ><svg-icon icon-class="down"
                   /></span>
                 </template>
@@ -94,17 +104,6 @@
             <span class="ipt-tip">图片绘制顺序为表格中条目顺序决定。</span>
             <el-button size="mini" @click="addView">添加</el-button>
           </el-form-item>
-          <!-- <el-form-item label="水印" prop="comment">
-            <el-switch v-model="tplForm.resource" />
-          </el-form-item>
-          <div>
-            <el-form-item label="二维码" prop="comment">
-              <el-input v-model="tplForm.comment" type="text" />
-            </el-form-item>
-            <el-form-item label="文本" prop="comment">
-              <el-input v-model="tplForm.comment" type="text" />
-            </el-form-item>
-          </div> -->
           <el-form-item label="预览图" v-if="tplForm.prev_url">
             <el-image
               :src="tplForm.prev_url"
@@ -115,8 +114,8 @@
             <el-input v-model="tplForm.comment" type="textarea" />
           </el-form-item>
           <el-form-item>
-            <el-button type="primary">保存</el-button>
             <el-button type="success" @click="getPrevImg">生成预览图</el-button>
+            <el-button type="primary">保存</el-button>
           </el-form-item>
         </el-form>
       </el-col>
@@ -136,8 +135,8 @@
                 ></el-image>
               </template>
               <template v-else-if="item.type === 'text'">
-                <p class="view" :key="index" :style="item.style">
-                  {{ item.text }}
+                <p class="view text" :style="item.style" :key="index">
+                  <span>{{ item.text }}</span>
                 </p>
               </template>
               <template v-else>
@@ -153,7 +152,7 @@
     <el-dialog
       title="编辑绘制项目"
       :visible.sync="modalVisible"
-      width="35%"
+      width="700px"
       top="5vh"
       :before-close="closeModal"
     >
@@ -184,6 +183,39 @@
         >
           <el-switch v-model="modalForm.replaceable"></el-switch>
         </el-form-item>
+        <el-form-item label="是否可清除" prop="erasable">
+          <el-switch v-model="modalForm.erasable"></el-switch>
+          <span class="ipt-tip">用于水印元素</span>
+        </el-form-item>
+        <el-form-item
+          label="图片"
+          class="uploader-box"
+          v-if="modalForm.type === 'image'"
+        >
+          <el-upload
+            class="uploader"
+            action="/api/common/upload"
+            :show-file-list="false"
+            :on-success="uploadSuccess"
+            :on-error="uploadErr"
+            :headers="{
+              authorization: 'Bearer ' + token
+            }"
+            name="image-file"
+            :data="{
+              sub_path: '/mp-share/',
+              file_type: 'mp_share'
+            }"
+          >
+            <img
+              v-if="modalForm.type === 'image' ? modalForm.form[0].value : ''"
+              :src="modalForm.type === 'image' ? modalForm.form[0].value : ''"
+              class="uploader-img"
+            />
+            <i v-else class="el-icon-plus uploader-icon" />
+          </el-upload>
+        </el-form-item>
+
         <template v-for="(item, index) in modalForm.form">
           <template v-if="item.iptType === 'select'">
             <el-form-item
@@ -191,6 +223,7 @@
               :prop="`form[${index}].value`"
               :key="index"
               :rules="item.rules"
+              v-if="item.show"
             >
               <el-select v-model="item.value" style="width: 100%">
                 <el-option
@@ -203,12 +236,63 @@
             </el-form-item>
           </template>
 
+          <template v-else-if="item.iptType === 'textarea'">
+            <el-form-item
+              :label="item.label"
+              :prop="`form[${index}].value`"
+              :key="index"
+              :rules="item.rules"
+              v-if="item.show"
+            >
+              <el-input
+                type="textarea"
+                v-model="item.value"
+                :placeholder="item.placeholder ? item.placeholder : ''"
+              />
+            </el-form-item>
+          </template>
+
+          <template v-else-if="item.iptType === 'radio'">
+            <el-form-item
+              :label="item.label"
+              :prop="`form[${index}].value`"
+              :key="index"
+              :rules="item.rules"
+              v-if="item.show"
+            >
+              <el-radio
+                v-for="(al, idx) in item.data"
+                :key="idx"
+                v-model="item.value"
+                :label="al.value"
+                >{{ al.label }}</el-radio
+              >
+            </el-form-item>
+          </template>
+
+          <template v-else-if="item.iptType === 'color-picker'">
+            <el-form-item
+              :label="item.label"
+              :prop="`form[${index}].value`"
+              :key="index"
+              :rules="item.rules"
+              class="form-item-color-picker"
+              v-if="item.show"
+            >
+              <el-color-picker
+                v-model="item.value"
+                show-alpha
+              ></el-color-picker>
+            </el-form-item>
+          </template>
+
           <template v-else>
             <el-form-item
               :label="item.label"
               :prop="`form[${index}].value`"
               :key="index"
               :rules="item.rules"
+              v-if="item.show"
             >
               <el-input
                 v-model="item.value"
@@ -229,6 +313,8 @@
 
 <script>
 import vueJsonEditor from 'vue-json-editor'
+import { getPic } from '@/api/mp_share'
+import { getToken } from '@/utils/auth'
 
 export default {
   name: 'GameDetailsMpEdit',
@@ -242,36 +328,85 @@ export default {
       },
       immediate: true,
       deep: true
+    },
+    modalForm: {
+      handler: function(nVal, oVal) {
+        // 整理文本输入限制
+        if (nVal.type === 'text') {
+          // 横排还原
+          if (nVal.form[4].value === 'horizontal-tb') {
+            // 起始：x
+            nVal.form[1].show = true
+            // nVal.form[1].value = ''
+            // 文本块宽度
+            nVal.form[5].show = true
+            // nVal.form[5].value = ''
+            // 对齐方式
+            nVal.form[9].show = true
+
+            // 结束：x
+            nVal.form[2].show = false
+            nVal.form[2].value = ''
+            // 文本块高度
+            nVal.form[6].show = false
+            nVal.form[6].value = ''
+          } else if (nVal.form[4].value === 'vertical-rl') {
+            // 竖排限制
+            // 起始：x
+            nVal.form[1].show = false
+            nVal.form[1].value = ''
+            // 文本块宽度
+            nVal.form[5].show = false
+            nVal.form[5].value = ''
+            // 对齐方式
+            nVal.form[9].show = false
+            nVal.form[9].value = 'left'
+            // 结束：x
+            nVal.form[2].show = true
+            // nVal.form[2].value = ''
+            // 文本块高度
+            nVal.form[6].show = true
+            // nVal.form[6].value = ''
+          }
+        }
+      },
+      immediate: true,
+      deep: true
     }
   },
   computed: {},
   data() {
     return {
       // 数据
+      token: '',
       fonts: [
         {
           label: '沐瑶',
           value: 'muyao',
           name: 'muyao',
-          path: 'fonts/muyao.ttf'
+          path: 'fonts/muyao.ttf',
+          loc_path: '/fonts/muyao.ttf',
         },
         {
           label: '手书体',
           value: 'shoushuti',
           name: 'shoushuti',
-          path: 'fonts/shoushuti.ttf'
+          path: 'fonts/shoushuti.ttf',
+          loc_path: '/fonts/shoushuti.ttf',
         },
         {
           label: '思源',
           value: 'siyuan',
           name: 'siyuan',
-          path: 'fonts/siyuan.otf'
+          path: 'fonts/siyuan.otf',
+          loc_path: '/fonts/siyuan.otf',
         },
         {
           label: '杨任东',
           value: 'yangrendong',
           name: 'yangrendong',
-          path: 'fonts/muyao.ttf'
+          path: 'fonts/yangrendong.ttf',
+          loc_path: '/fonts/yangrendong.ttf',
         }
       ],
 
@@ -279,12 +414,11 @@ export default {
       tplForm: {
         tpl_name: '',
         tpl_id: '',
-        prev_url:
-          'https://client-1256832210.cos.ap-beijing.myqcloud.com/mp-share/5d09e26a62bb32868763dba3.jpeg',
+        prev_url: '',
         base_style: {
-          width: '',
-          height: '',
-          background: '',
+          width: '400px',
+          height: '300px',
+          background: '#fff',
           'border-radius': ''
         },
         views: [],
@@ -306,7 +440,7 @@ export default {
           {
             type: 'array',
             required: true,
-            len: 1,
+            min: 1,
             message: '请至少添加一个绘制组'
           }
         ]
@@ -318,6 +452,7 @@ export default {
       modalForm: {
         type: '',
         replaceable: false,
+        erasable: false,
         form: []
       },
       modalFormRules: {
@@ -344,105 +479,118 @@ export default {
           value: '',
           rules: [
             { required: true, message: '请输入图片 url', trigger: 'blur' }
-          ]
+          ],
+          show: true
         },
         {
           label: '坐标：x',
           name: 'left',
-          value: '',
+          value: '0px',
           placeholder: '例：10px',
           rules: [
             { required: true, message: '请输入图片坐标：x', trigger: 'blur' }
-          ]
+          ],
+          show: true
         },
         {
           label: '坐标：y',
           name: 'top',
-          value: '',
+          value: '0px',
           placeholder: '例：10px',
           rules: [
             { required: true, message: '请输入图片坐标：y', trigger: 'blur' }
-          ]
+          ],
+          show: true
         },
         {
           label: '宽度',
           name: 'width',
-          value: '',
+          value: '100px',
           placeholder: '例：100px',
           rules: [
             { required: true, message: '请输入图片宽度', trigger: 'blur' }
-          ]
+          ],
+          show: true
         },
         {
           label: '高度',
           name: 'height',
-          value: '',
+          value: '100px',
           placeholder: '例：50px',
           rules: [
             { required: true, message: '请输入图片高度', trigger: 'blur' }
-          ]
+          ],
+          show: true
         },
         {
           label: '圆角',
           name: 'border-radius',
           value: '',
           placeholder: '例：10px',
-          rules: []
+          rules: [],
+          show: true
         },
         {
           label: '边框',
           name: 'border',
           value: '',
           placeholder: '例：1px solid #333，仅支持 solid 类型',
-          rules: []
+          rules: [],
+          show: true
         },
         {
           label: '阴影',
           name: 'box-shadow',
           value: '',
           placeholder: '例：0px 0px 10px #333',
-          rules: []
+          rules: [],
+          show: true
         },
         {
           label: '旋转角度',
           name: 'rotate',
           value: '',
           placeholder: '例：90',
-          rules: []
+          rules: [],
+          show: true
         }
       ],
       textForm: [
         {
+          iptType: 'textarea',
           label: '文本',
           name: 'text',
           value: '',
-          rules: [{ required: true, message: '请输入文本', trigger: 'blur' }]
+          rules: [{ required: true, message: '请输入文本', trigger: 'blur' }],
+          show: true
         },
         {
-          label: '坐标：x',
+          label: '起始：x',
           name: 'left',
           value: '',
-          placeholder: '例：10px,文字横排时使用',
+          placeholder: '例：10px，文本块起始横坐标',
           rules: [
             {
               required: true,
-              message: '请输入文字坐标：x',
+              message: '请输入文本块起始坐标：x',
               trigger: 'blur'
             }
-          ]
+          ],
+          show: true
         },
         {
-          label: '坐标：x',
+          label: '结束：x',
           name: 'right',
           value: '',
-          placeholder: '例：10px, 文字竖排时使用',
+          placeholder: '例：10px，文本块结束横坐标',
           rules: [
             {
               required: true,
-              message: '请输入文字坐标：x',
+              message: '请输入文本块结束坐标：x',
               trigger: 'blur'
             }
-          ]
+          ],
+          show: true
         },
         {
           label: '坐标：y',
@@ -451,46 +599,69 @@ export default {
           placeholder: '例：10px',
           rules: [
             { required: true, message: '请输入文字坐标：y', trigger: 'blur' }
-          ]
+          ],
+          show: true
         },
         {
-          label: '最大宽度',
-          name: 'max-width',
+          iptType: 'radio',
+          data: [
+            { label: '横排', value: 'horizontal-tb' },
+            { label: '竖排', value: 'vertical-rl' }
+          ],
+          label: '书写顺序',
+          name: 'writing-mode',
+          value: 'horizontal-tb',
+          rules: [],
+          show: true
+        },
+        {
+          label: '文本块宽度',
+          name: 'width',
           value: '',
-          placeholder: '文字横排时使用，竖排默认 0',
+          placeholder: '例：100px',
           rules: [
             { required: true, message: '请输入文本最大宽度', trigger: 'blur' }
-          ]
+          ],
+          show: true
         },
         {
-          label: '最大高度',
-          name: 'max-height',
+          label: '文本块高度',
+          name: 'height',
           value: '',
-          placeholder: '文字竖排时使用，横排默认 0',
+          placeholder: '例：100px',
           rules: [
-            { required: true, message: '请输入文本最大高度', trigger: 'blur' }
-          ]
+            { required: true, message: '请输入文本高度', trigger: 'blur' }
+          ],
+          show: true
         },
         {
           label: '字体大小',
           name: 'font-size',
-          value: '',
+          value: '16px',
           placeholder: '例：14px',
-          rules: [{ required: true, message: '请输入文本', trigger: 'blur' }]
+          rules: [{ required: true, message: '请输入文本', trigger: 'blur' }],
+          show: true
         },
         {
           label: '字体行高',
-          name: 'font-size',
-          value: '',
+          name: 'line-height',
+          value: '32px',
           placeholder: '例：14px，默认与字体大小相等',
-          rules: []
+          rules: [{ required: true, message: '请输入行高', trigger: 'blur' }],
+          show: true
         },
         {
+          iptType: 'radio',
+          data: [
+            { label: '左对齐', value: 'left' },
+            { label: '居中对齐', value: 'center' },
+            { label: '右对齐', value: 'right' }
+          ],
           label: '对齐方式',
           name: 'text-align',
-          value: '',
-          placeholder: '例：center，默认left，可选：left/center/right',
-          rules: []
+          value: 'left',
+          rules: [],
+          show: true
         },
         {
           iptType: 'select',
@@ -498,49 +669,54 @@ export default {
           label: '字体类型',
           name: 'font-family',
           value: '',
-          rules: []
+          rules: [],
+          show: true
         },
         {
+          iptType: 'color-picker',
           label: '颜色',
           name: 'color',
-          value: '',
-          placeholder: '例：#fff，默认为#000',
-          rules: []
-        },
-        {
-          label: '书写顺序',
-          name: 'writing-mode',
-          placeholder: '默认横排，横排：horizontal-tb，竖排：vertical-rl',
-          value: '',
-          rules: []
+          value: '#333',
+          placeholder: '例：#fff，默认为#333',
+          rules: [],
+          show: true
         },
         {
+          iptType: 'radio',
+          data: [
+            { label: '正常', value: '500' },
+            { label: '加粗', value: '700' }
+          ],
           label: '字体粗细',
           name: 'font-weight',
           placeholder: '默认：500，加粗：700',
-          value: '',
-          rules: []
+          value: '500',
+          rules: [],
+          show: true
         },
         {
           label: '阴影',
           name: 'text-shadow',
           placeholder: '例：2px 2px 2px #ccc',
           value: '',
-          rules: []
+          rules: [],
+          show: true
         },
         {
           label: '描边',
           name: '-webkit-text-stroke',
           value: '',
           placeholder: '例：1px #fff',
-          rules: []
+          rules: [],
+          show: true
         },
         {
           label: '旋转角度',
           name: 'rotate',
           value: '',
           placeholder: '例：90',
-          rules: []
+          rules: [],
+          show: true
         }
       ],
       rectForm: [
@@ -551,7 +727,8 @@ export default {
           placeholder: '例：10px',
           rules: [
             { required: true, message: '请输入矩形坐标：x', trigger: 'blur' }
-          ]
+          ],
+          show: true
         },
         {
           label: '坐标：y',
@@ -560,97 +737,67 @@ export default {
           placeholder: '例：10px',
           rules: [
             { required: true, message: '请输入矩形坐标：y', trigger: 'blur' }
-          ]
+          ],
+          show: true
         },
         {
           label: '宽度',
           name: 'width',
           placeholder: '例：100px',
           value: '',
-          rules: [{ required: true, message: '请输矩形宽度', trigger: 'blur' }]
+          rules: [{ required: true, message: '请输矩形宽度', trigger: 'blur' }],
+          show: true
         },
         {
           label: '高度',
           name: 'height',
           value: '',
           placeholder: '例：100px',
-          rules: [{ required: true, message: '请输矩形高度', trigger: 'blur' }]
+          rules: [{ required: true, message: '请输矩形高度', trigger: 'blur' }],
+          show: true
         },
         {
+          iptType: 'color-picker',
           label: '颜色',
           name: 'background',
-          value: '',
+          value: '#fff',
           placeholder: '例：#fff',
-          rules: []
+          rules: [],
+          show: true
         },
         {
           label: '边框',
           name: 'border',
           value: '',
           placeholder: '例：1px solid #333，仅支持 solid 类型',
-          rules: []
+          rules: [],
+          show: true
         },
         {
           label: '圆角',
           name: 'border-radius',
           value: '',
           placeholder: '例：10px',
-          rules: []
+          rules: [],
+          show: true
         },
         {
           label: '阴影',
           name: 'box-shadow',
           value: '',
           placeholder: '例：0px 0px 10px #333',
-          rules: []
+          rules: [],
+          show: true
         },
         {
           label: '旋转角度',
           name: 'rotate',
           value: '',
           placeholder: '例：90',
-          rules: []
+          rules: [],
+          show: true
         }
       ],
-      tplInfo: {
-        baseInfo: {
-          style: {
-            width: '250px',
-            height: '750px'
-          },
-          fonts: [
-            {
-              name: 'yangrendong',
-              path: 'fonts/yangrendong.ttf'
-            }
-          ]
-        },
-        imgs: [
-          {
-            url:
-              'https://hbimg.huabanimg.com/8256f8640cceb4b4c6fc51a2f07503d69b53e1b236416-ZzsSSs_fw658',
-            replaceable: true,
-            style: {
-              width: '250px',
-              height: '250px',
-              top: '0',
-              left: '0'
-            }
-          }
-        ],
-        texts: [
-          {
-            text:
-              'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Itaquecumque, quis atque dignissimos consequuntur reiciendis iste. Consequatur sed dolores illo illum cumque labore esse fugiatsunt, autem quas, porro ut!',
-            style: {
-              color: '#333',
-              'writing-mode': 'vertical-rl',
-              'max-height': '200px',
-              'line-height': '36px'
-            }
-          }
-        ]
-      },
       // 预览
       previewInfo: {}
     }
@@ -661,6 +808,8 @@ export default {
         this.textForm[i].data = this.fonts
       }
     }
+    // 获取 token
+    this.token = getToken()
   },
   methods: {
     save() {},
@@ -670,6 +819,7 @@ export default {
       this.modalForm = {
         type: '',
         replaceable: false,
+        erasable: false,
         form: []
       }
       this.isNewView = true
@@ -716,6 +866,13 @@ export default {
       this.tplForm.views.splice(index, 1)
       this.tplForm.views.splice(index + 1, 0, temp)
     },
+    tableRowClassName({ row, rowIndex }) {
+      row.index = rowIndex
+    },
+    rowClick(row, column, event) {
+      this.editView(row.index, row)
+    },
+
     // modal
     changeViewType(val) {
       this.modalForm.type = val
@@ -756,12 +913,21 @@ export default {
         }
       })
     },
+    uploadSuccess(res, file) {
+      if (this.modalForm.type === 'image')
+        this.modalForm.form[0].value = res.url
+      this.$message.success('图片上传成功！')
+    },
+    uploadErr() {
+      this.$message.error('图片上传失败！')
+    },
     formPrev(tpl) {
       this.previewInfo.base_style = tpl.base_style
       this.previewInfo.views = tpl.views.map(view => {
         const result = {}
         result.type = view.type
         result.replaceable = view.replaceable
+        result.erasable = view.erasable
         result.style = {}
         view.form.map(ipt => {
           if (ipt.name === 'url') {
@@ -780,58 +946,81 @@ export default {
       })
     },
     getPrevImg() {
-      // 整理painter数据
-      const opt = {}
-      const fonts = []
-      // 画布信息
-      opt.baseInfo = {}
-      opt.baseInfo.width = this.previewInfo.base_style.width
-      opt.baseInfo.height = this.previewInfo.base_style.height
-      opt.baseInfo['back-ground'] = this.previewInfo.base_style['back-ground']
-      opt.baseInfo['border-radius'] = this.previewInfo.base_style[
-        'border-radius'
-      ]
-      // 绘制组
-      opt.views = []
-      this.previewInfo.views.map(view => {
-        const obj = JSON.parse(JSON.stringify(view))
-        const style = obj.style
-        if (obj.type === 'text') {
-          if (
-            style['writing-mode'] === 'horizontal-tb' ||
-            !style['writing-mode']
-          ) {
-            if (style['text-align'] === 'center') {
-              const maxWidth = parseInt(style['max-width'])
-              const left = parseInt(style.left)
-              style.left = left + maxWidth / 2
-            } else if (style['text-align'] === 'right') {
-              const maxWidth = parseInt(style['max-width'])
-              const left = parseInt(style.left)
-              style.left = left + maxWidth
-            }
-          } else if (style['writing-mode'] === 'vertical-rl') {
-            const right = parseInt(style.right)
-            const lineHeight =
-              parseInt(style['line-height']) || parseInt(style['font-size'])
-            style.left = parseInt(opt.baseInfo.width) - right - lineHeight
-            console.log(right, lineHeight, style.left)
-          }
+      this.$refs['tplForm'].validate(valid => {
+        if (valid) {
+          // 整理painter数据
+          const opt = {}
+          const fonts = []
+          // 画布信息
+          opt.baseInfo = {}
+          console.log(this.previewInfo.base_style)
+          opt.baseInfo.width = this.previewInfo.base_style.width
+          opt.baseInfo.height = this.previewInfo.base_style.height
+          opt.baseInfo['background'] = this.previewInfo.base_style['background']
+          opt.baseInfo['border-radius'] = this.previewInfo.base_style[
+            'border-radius'
+          ]
+          // 绘制组
+          opt.views = []
+          this.previewInfo.views.map(view => {
+            const obj = JSON.parse(JSON.stringify(view))
+            const style = obj.style
+            if (obj.type === 'text') {
+              if (
+                style['writing-mode'] === 'horizontal-tb' ||
+                !style['writing-mode']
+              ) {
+                if (style['text-align'] === 'center') {
+                  const width = parseInt(style.width)
+                  const left = parseInt(style.left)
+                  style.left = left + width / 2
+                } else if (style['text-align'] === 'right') {
+                  const width = parseInt(style.width)
+                  const left = parseInt(style.left)
+                  style.left = left + width
+                }
+              } else if (style['writing-mode'] === 'vertical-rl') {
+                const right = parseInt(style.right)
+                const lineHeight =
+                  parseInt(style['line-height']) || parseInt(style['font-size'])
+                style.left = parseInt(opt.baseInfo.width) - right - lineHeight
+                console.log(right, lineHeight, style.left)
+              }
 
-          if (style['font-family']) {
-            fonts.push(style['font-family'])
-          }
-        }
-        opt.views.push(obj)
-      })
-      // fonts
-      opt.fonts = []
-      this.fonts.map(font => {
-        if (fonts.indexOf(font.name) !== -1) {
-          opt.fonts.push(font)
+              if (style['font-family']) {
+                fonts.push(style['font-family'])
+              }
+            }
+            opt.views.push(obj)
+          })
+          // fonts
+          opt.baseInfo
+          opt.baseInfo.fonts = []
+          this.fonts.map(font => {
+            if (fonts.indexOf(font.name) !== -1) {
+              opt.baseInfo.fonts.push(font)
+            }
+          })
+          console.log('模板🤩', this.tplForm)
+          console.log('预览😘', this.previewInfo)
+          console.log('生成😡', opt)
+
+          // 获取图片地址
+          getPic({ opt })
+            .then(res => {
+              const data = res.data
+              console.log(res)
+              if (data.errcode === 0) {
+                this.tplForm.prev_url = data.url
+              }
+            })
+            .catch(err => {
+              console.log(err)
+            })
+        } else {
+          this.$message.error('请按要求填写表单')
         }
       })
-      console.log('😡', opt)
     }
   }
 }
@@ -842,17 +1031,27 @@ export default {
 
 .preview {
   width: 100%;
-  min-height: 1334px;
+  padding: 20px 0;
+  min-height: 500px;
   border: 1px solid #f0f0f0;
 
   .main-box {
     position: relative;
-    margin: 20px auto;
+    margin: 0 auto;
+    border: 1px solid #f0f0f0;
     overflow: hidden;
 
     .view {
       position: absolute;
     }
+
+    .view.text {
+      margin: 0;
+      white-space: pre-wrap;
+      span {
+        display: inline-block;
+      }
+    }
   }
 }
 </style>
@@ -863,6 +1062,18 @@ export default {
 .p-mp-edit >>> .jsoneditor-vue {
   height: 500px;
 }
+
+.p-mp-edit .form-item-color-picker >>> .el-form-item__content {
+  line-height: 0;
+}
+
+.p-mp-edit .form-item-color-picker >>> .el-color-picker {
+  width: 100%;
+}
+
+.p-mp-edit .form-item-color-picker >>> .el-color-picker__trigger {
+  width: 100%;
+}
 </style>