修改

src/components/StoreDesign/liveManage.vue

@@ -72,7 +72,11 @@
                 <el-tooltip class="item" effect="dark" content="图片上传" placement="top">
                     <img @click="imgupload(scope.row)"  class="app-order-icon"
                       src="../../assets/img/userman/imgsc.png" alt="">
-                  </el-tooltip>
+                </el-tooltip>
+                <el-tooltip class="item" effect="dark" content="直播配置" placement="top">
+                    <img @click="goLiveConfig(scope.row.ID)"  class="app-order-icon"
+                      src="../../assets/img/userman/edit.png" alt="">
+                </el-tooltip>
             </template>
          </el-table-column>
         
@@ -162,7 +166,7 @@ import ChooseImg from "@/components/global/ChooseImg.vue";
            this.imgMsg.ExtensionImg = img;
            this.addOrUpdateHouseImg()
         },
-         addOrUpdateHouseImg(){
+        addOrUpdateHouseImg(){
           this.btnload=true;
           this.apipost("/api/Publish/AddOrUpdateHouseImg",  this.imgMsg, res => {
             this.btnload=false;
@@ -174,6 +178,16 @@ import ChooseImg from "@/components/global/ChooseImg.vue";
 
           })
         },
+        //跳转至直播配置
+        goLiveConfig(ID){
+          let routeData = this.$router.resolve({
+            name: 'liveSet',
+                query: {
+                  Id: ID
+                }
+            });
+            window.open(routeData.href, "_blank");
+        }
       }
     }
 </script>

src/components/StoreDesign/liveSet.vue

+<style>
+  .liveConfig .custom_Main {
+    display: flex;
+  }
+
+  .liveConfig .custom_mobile_box {
+    width: 400px;
+    height: 740px;
+    padding: 35px 11px;
+    background-color: #fff;
+    border-radius: 30px;
+    margin-right: 20px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .liveConfig .custom_bg_box {
+    position: relative;
+    border: 1px solid #e2e3e3;
+    width: 750px;
+    height: 1334px;
+    zoom: 0.5;
+  }
+
+  .liveConfig .custom_bg_pic {
+    width: 100%;
+    height: 100%;
+    background-size: 100% 100%;
+    background-position: center;
+  }
+
+  .liveConfig .custom_AppImage {
+    background: url('../../assets/img/default_qr_code.png') no-repeat;
+    background-size: cover;
+    background-position: center center;
+    position: absolute;
+  }
+
+  .liveConfig .custom_formBody {
+    padding: 20px 35% 20px 20px;
+    background-color: #fff;
+    margin-bottom: 20px;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    min-width: 640px;
+    display: flex;
+    flex-direction: column;
+  }
+  .liveConfig .custom_bottom {
+    border: 1px solid #EBEEF5;
+    background-color: #FFF;
+    color: #303133;
+    -webkit-transition: .3s;
+    transition: .3s;
+    border-radius: 4px;
+    margin-top: 35px;
+  }
+
+  .liveConfig .customShareBtn {
+    position: absolute !important;
+    bottom: -52px;
+    left: 0;
+  }
+
+  .customShareBtn .el-button--small {
+    padding: 9px 25px;
+  }
+</style>
+<template>
+  <div class="liveConfig">
+    <template>
+      <div class="custom_Main">
+        <div class="custom_mobile_box">
+          <div class="custom_bg_box">
+            <div class="custom_bg_pic" :style="{ backgroundImage:'url('+LiveBgImg+')'}">
+            </div>
+            <div class="custom_AppImage" :style="{left:ShareMsg.LiveQrCodePaddingLeft+'px',
+                            width:ShareMsg.LiveQrCodeSize+'px',height:ShareMsg.LiveQrCodeSize+'px',top:ShareMsg.LiveQrCodePaddingTop+'px',
+                            'borderRadius':ShareMsg.LiveQrCodeType==0?'50%':'0%'}"></div>
+          </div>
+        </div>
+        <div class="custom_formBody">
+          <div class="custom_bottom">
+            <template>
+              <div class="el-card__header">二维码设置</div>
+              <el-form label-width="20%" style="padding:20px;">
+                <el-form-item label="样式" size="small">
+                  <el-radio-group v-model="ShareMsg.LiveQrCodeType">
+                    <el-radio :label="0">圆形</el-radio>
+                    <el-radio :label="1">方形</el-radio>
+                  </el-radio-group>
+                </el-form-item>
+                <el-form-item label="大小" size="small">
+                  <el-slider v-model="ShareMsg.LiveQrCodeSize" @change="getCodeMax(ShareMsg.LiveQrCodeSize)" :max="300"
+                    show-input>
+                  </el-slider>
+                </el-form-item>
+                <el-form-item label="上边距" size="small">
+                  <el-slider v-model="ShareMsg.LiveQrCodePaddingTop" :max="maxTwocodeTop" show-input></el-slider>
+                </el-form-item>
+                <el-form-item label="左边距" size="small">
+                  <el-slider v-model="ShareMsg.LiveQrCodePaddingLeft" :max="maxTwocodeLeft" show-input></el-slider>
+                </el-form-item>
+              </el-form>
+            </template>
+          </div>
+          <div class="customShareBtn">
+            <el-button size="small" type="primary" @click="SetLiveConfig()">保存</el-button>
+          </div>
+        </div>
+      </div>
+    </template>
+  
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        //二维码最大上边距
+        maxTwocodeTop: 0,
+        //二维码最大左边距
+        maxTwocodeLeft: 0,
+        //分销默认背景图
+        sharePosterDefaultImg: this.domainManager().ImageUrl + '/Static/livedefault.jpg',
+        LiveBgImg: "", //海报背景图
+        //分销海报
+        ShareMsg: {
+          ID: 0,
+          LiveQrCodeSize: 0, //二维码大小
+          LiveQrCodePaddingTop: 0, //二维码上间距
+          LiveQrCodePaddingLeft: 0, //二维码左间距
+          LiveQrCodeType: 0, //二维码形状(0-圆形，1-方形)
+        },
+        msg:{
+            ID:0,
+            PageIndex:1,
+            PageSize:1       
+        }
+      };
+    },
+    created() {},
+    methods: {
+      //拉伸二维码尺寸动态设置最大值
+      getCodeMax(chicun) {
+        this.maxTwocodeTop = 1334 - chicun;
+        this.maxTwocodeLeft = 750 - chicun;
+      },
+      //获取分销海报
+      GetLiveConfig() {
+        this.apipost("/api/Publish/GetLiveHousePageList", this.msg, res => {
+          if (res.data.resultCode == 1) {
+            var jsonData = res.data.data.pageData[0];
+            if (jsonData) {
+              this.ShareMsg.ID = jsonData.ID;
+              this.LiveBgImg = jsonData.ExtensionImg;
+              this.ShareMsg.LiveQrCodePaddingTop = jsonData.LiveQrCodePaddingTop;
+              this.ShareMsg.LiveQrCodePaddingLeft = jsonData.LiveQrCodePaddingLeft;
+              this.ShareMsg.LiveQrCodeSize = jsonData.LiveQrCodeSize;
+              this.ShareMsg.LiveQrCodeType = jsonData.LiveQrCodeType;
+            } else {
+              this.LiveBgImg = this.sharePosterDefaultImg;
+              this.ShareMsg.LiveQrCodePaddingTop = 1182;
+              this.ShareMsg.LiveQrCodePaddingLeft = 585;
+              this.ShareMsg.LiveQrCodeSize = 140;
+              this.ShareMsg.LiveQrCodeType = 0;
+            }
+          } else {
+            this.Error(res.data.message);
+          }
+        })
+      },
+      //添加修改分销海报
+      SetLiveConfig() {
+        this.apipost("/api/Publish/SetLiveQrCode", this.ShareMsg, res => {
+          if (res.data.resultCode == 1) {
+            this.GetLiveConfig();
+            this.Success(res.data.message);
+          } else {
+            this.Error(res.data.message);
+          }
+        })
+      }
+    },
+    mounted() {
+      this.maxTwocodeTop = 1334 - this.ShareMsg.LiveQrCodeSize;
+      this.maxTwocodeLeft = 750 - this.ShareMsg.LiveQrCodeSize;
+      this.msg.ID = this.$route.query.Id;
+      this.GetLiveConfig();
+    }
+  };
+
+</script>

src/router/index.js

@@ -630,6 +630,12 @@ export default new Router({
           name: 'liveConfig',
           component: resolve => require(['@/components/StoreDesign/liveConfig'], resolve),
         },
+        //直播管理 内容管理 直播配置=复制
+        {
+          path: '/liveSet',
+          name: 'liveSet',
+          component: resolve => require(['@/components/StoreDesign/liveSet'], resolve),
+        },
         //店铺管理 员工管理 基础设置
         {
           path: '/Infrastructure',