ad-pos

src/components/Coordinate/index.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="coordinate">
-    <div class="coor-wrap">
+    <div
+      class="coor-wrap"
+      :style="`width: ${perW * 0.6 * 16}px;height: ${perH * 0.6 * 16}px;`"
+    >
       <div
         class="row"
         v-for="(y, yIdx) in cells"
@@ -25,6 +28,7 @@
 <script>
 export default {
   name: 'Coordinate',
+  props: ['perW', 'perH'],
   data() {
     function generateCells(length) {
       const result = []
@@ -56,8 +60,8 @@ export default {
 .coor-wrap {
   display: flex;
   flex-direction: column;
-  width: 300px;
-  height: 534px;
+  // width: 300px;
+  // height: 534px;
   margin: 0 auto;
   transform-origin: 0% 0%;
   .row {

src/views/games/details/adPos.vue

@@ -96,7 +96,7 @@
                   </el-select>
                 </el-form-item>
                 <el-form-item
-                  label="坐标X"
+                  label="坐标：X"
                   prop="coorX"
                 >
                   <el-input
@@ -106,7 +106,7 @@
                   <span class="ipt-tip">广告位中心点坐标x （取值：0~15）</span>
                 </el-form-item>
                 <el-form-item
-                  label="坐标Y"
+                  label="坐标：Y"
                   prop="coorY"
                 >
                   <el-input
@@ -115,6 +115,27 @@
                   ></el-input>
                   <span class="ipt-tip">广告位中心点坐标y （取值：0~15）</span>
                 </el-form-item>
+                <el-form-item
+                  label="偏移量：X"
+                  prop="offsetX"
+                >
+                  <el-input
+                    v-model.number="item.offsetX"
+                    style="width: 70%"
+                  ></el-input>
+                </el-form-item>
+                <el-form-item
+                  label="偏移量：Y"
+                  prop="offsetY"
+                >
+                  <el-input
+                    v-model.number="item.offsetY"
+                    style="width: 70%"
+                  ></el-input>
+                </el-form-item>
+                <el-form-item label="实际坐标">
+                  <span>x: {{perW * item.coorX + item.offsetX}},y: {{perH * item.coorY + item.offsetY}}</span>
+                </el-form-item>
                 <el-form-item v-if="platform_id">
                   <el-button
                     type="primary"
@@ -150,7 +171,11 @@
 
       </el-col>
       <el-col :span="12">
-        <coordinate class="al-c" />
+        <coordinate
+          class="al-c"
+          :perW="perW"
+          :perH="perH"
+        />
       </el-col>
     </el-row>
 
@@ -206,6 +231,8 @@ export default {
           value: 2
         }
       ],
+      perW: 0,
+      perH: 0,
       // form
       adPos: {},
       adPosRules: {
@@ -235,6 +262,21 @@ export default {
             message: '坐标取值 0~15',
             trigger: 'blur'
           }
+        ],
+        offsetX: [
+          {
+            type: 'number',
+
+            message: '偏移量必须是数值',
+            trigger: 'blur'
+          }
+        ],
+        offsetY: [
+          {
+            type: 'number',
+            message: '偏移量必须是数值',
+            trigger: 'blur'
+          }
         ]
       },
       activeNames: [],
@@ -243,7 +285,9 @@ export default {
         type: '',
         mode: '',
         coorX: 0,
-        coorY: 0
+        coorY: 0,
+        offsetX: 0,
+        offsetY: 0
       },
       allPos: [],
       posNumList: []
@@ -286,6 +330,9 @@ export default {
                 ? this.platformsArr[0].platform.platform_id
                 : ''
             }
+            const game_size = this.gameInfo.game_size.split('*')
+            this.perW = game_size[0] / 16
+            this.perH = game_size[1] / 16
             if (cb && cb instanceof Function) cb()
           }
         })
@@ -301,6 +348,7 @@ export default {
       })
         .then(res => {
           const data = res.data
+          console.log(data)
           if (data.errcode === 0) {
             this.allPos = data.message.map(item => {
               const posArr = item.area.split(',')
@@ -312,13 +360,14 @@ export default {
                 mode: item.mode,
                 type: item.type,
                 coorX: parseInt(posArr[1]),
-                coorY: parseInt(posArr[2])
+                coorY: parseInt(posArr[2]),
+                offsetX: parseInt(posArr[3]) || 0,
+                offsetY: parseInt(posArr[4]) || 0
               }
             })
             this.posNumList = this.allPos.map(item => {
               return `${item.area}${item.type}${item.mode}${item.coorX}${item.coorY}`
             })
-
           }
         })
         .catch(err => {
@@ -379,9 +428,11 @@ export default {
       if (valid) {
         const posInfo = JSON.parse(JSON.stringify(this.allPos[index]))
         const adNum = `${posInfo.area}${posInfo.type}${posInfo.mode}${posInfo.coorX}${posInfo.coorY}`
-        posInfo.area = `${posInfo.area},${posInfo.coorX},${posInfo.coorY}`
+        posInfo.area = `${posInfo.area},${posInfo.coorX},${posInfo.coorY},${posInfo.offsetX},${posInfo.offsetY}`
         delete posInfo.coorX
         delete posInfo.coorY
+        delete posInfo.offsetX
+        delete posInfo.offsetY
 
         if (this.allPos[index].id) {
           // 更新
@@ -401,7 +452,7 @@ export default {
               if (data.errcode === 0) {
                 this.$message.success('广告位修改成功！')
                 this.$refs[`adPos${index}`][0].clearValidate()
-                this.getAdPosList()
+                // this.getAdPosList()
               }
             })
             .catch(err => {
@@ -429,7 +480,7 @@ export default {
               if (data.errcode === 0) {
                 this.$message.success('广告位新增成功！')
                 this.$refs[`adPos${index}`][0].clearValidate()
-                this.getAdPosList()
+                // this.getAdPosList()
               }
             })
             .catch(err => {

src/views/games/details/info.vue

@@ -96,6 +96,15 @@
                   />
                 </el-select>
               </el-form-item>
+              <el-form-item
+                label="设计尺寸"
+                prop="game_size"
+              >
+                <el-input
+                  v-model="baseForm.game_size"
+                  placeholder="512*1024"
+                />
+              </el-form-item>
               <el-form-item v-if="permEdit">
                 <el-button
                   v-if="uid && uid !== 'new'"
@@ -352,7 +361,8 @@ export default {
         game_name_en: '',
         game_id: '',
         gameType: '',
-        game_icon: ''
+        game_icon: '',
+        game_size: ''
       },
       baseFormRules: {
         game_name: [
@@ -366,6 +376,13 @@ export default {
         ],
         game_type: [
           { required: true, message: '请选择游戏类型', trigger: 'blur' }
+        ],
+        game_size: [
+          {
+            pattern: /(\d+)\*(\d+)/g,
+            message: '尺寸格式为 512*1024',
+            trigger: 'blur'
+          }
         ]
       },
       gameTypes: {
@@ -461,6 +478,7 @@ export default {
               game_id: this.gameInfo.game_id,
               game_type: this.gameInfo.game_type,
               game_icon: this.gameInfo.game_icon,
+              game_size: this.gameInfo.game_size,
               _id: this.gameInfo._id
             }
             this.platformForm = this.gameInfo.platforms