Просмотр исходного кода

编辑器-基础-自定义LOGO功能与样式;优化url配置

任一存 3 лет назад
Родитель
Сommit
4b770417b6

+ 2 - 1
.env

@@ -2,5 +2,6 @@ VUE_APP_MAIN_COLOR=''
 VUE_APP_STATIC_DIR=static
 VUE_APP_INNERNET=https://fcb.intranet.4dkankan.com
 VUE_APP_CDN=https://oss-xiaoan.oss-cn-shenzhen.aliyuncs.com
+VUE_APP_PROXY_URL_ROOT='https://test.4dkankan.com'
 VUE_APP_PROXY_URL='https://test.4dkankan.com/qjkankan/'
-VUE_APP_URL_FILL=/qjkankan
+VUE_APP_URL_FILL=

+ 6 - 0
src/api/index.js

@@ -22,6 +22,12 @@ let ossUrl = config.CDN
 
 // https://ossxiaoan.4dage.com/720yun_fd_manage
 
+/**
+ * 获取用户账号信息
+ */
+export function getUserInfo(ok, no) {
+  return http.postJson(`/api/user/getUserInfo`, {}, ok, no)
+}
 
 /**
  * 获取全景作品基本信息

BIN
src/assets/images/select_pic_btn.png


+ 1 - 1
src/config/index.js

@@ -7,7 +7,7 @@ const config = {
      * 静态资源路径
      */
     staticURL: process.env.VUE_APP_STATIC_DIR,
-    urlFill:  process.env.NODE_ENV === "production" ? process.env.VUE_APP_URL_FILL : "", 
+    urlFill:  process.env.VUE_APP_URL_FILL, 
     thumb:require('@/assets/images/default/img_cover_default.jpg'),
     noresult:require('@/assets/images/icons/img_noresults@2x.png'),
     empty: require('@/assets/images/icons/img_empty@2x.png'),

+ 3 - 0
src/views/base/Toolbar.vue

@@ -68,6 +68,7 @@
         <OpeningTipSettings v-show="activeTab === '开场提示'"></OpeningTipSettings>
         <PasswordSettings v-show="activeTab === '访问密码'"></PasswordSettings>
         <AutoCruiseSettings v-show="activeTab === '自动巡游'"></AutoCruiseSettings>
+        <CustomLogoSettings v-show="activeTab === '自定义LOGO'"></CustomLogoSettings>
       </div>
     </div>
     <eidt-panel
@@ -117,6 +118,7 @@ import EidtPanel from "./EditPanel";
 import OpeningTipSettings from '@/views/base/openingTipSettings.vue'
 import PasswordSettings from "@/views/base/passwordSettings.vue";
 import AutoCruiseSettings from '@/views/base/autoCruiseSettings.vue'
+import CustomLogoSettings from "@/views/base/customLogoSettings.vue";
 import Table from "@/components/tableSelect";
 import Table2 from "@/components/tableSelect2";
 import Select from "@/components/select";
@@ -133,6 +135,7 @@ export default {
     OpeningTipSettings,
     PasswordSettings,
     AutoCruiseSettings,
+    CustomLogoSettings,
   },
   data() {
     return {

+ 175 - 0
src/views/base/customLogoSettings.vue

@@ -0,0 +1,175 @@
+<template>
+  <div class="custom-logo-settings">
+    <span class="title">自定义LOGO</span>
+    <br>
+    <div class="switch-wrapper">
+      <span class="label">显示LOGO</span>
+      <Switcher :value="info.isLogo" @change="onSwitcherChange"></Switcher>
+    </div>
+    <div class="bottom" :class="{disabled: !info.isLogo}">
+      <div class="img-wrapper">
+        <img class="logo-img" :src="info.logo || require('@/assets/images/default/img_logo_default.png')" alt="" />
+        <div v-if="info.logoChange" class="cancel-btn-background" @click="onClickCancelCustomLogo">
+          <i class="iconfont icon-pop-ups_shut-down"></i>
+        </div>
+      </div>
+      <div class="bottom-right">
+        <img 
+          class="select-pic-btn"
+          :src="require('@/assets/images/select_pic_btn.png')" alt=""
+          @click="onClickSelectingPicBtn"
+        >
+        <!-- <button
+          class="ui-button submit"
+          @click="onClickSelectingPicBtn"
+        >
+          选择图片
+        </button> -->
+        <div class="remark">
+          300*300px,600kb以内,支持<br>
+          jpg/png格式
+        </div>
+      </div>
+    </div>
+
+    <div class="dialog" style="z-index: 2000" v-if="isShowSelectionWindow">
+      <Table2
+        title="选择素材"
+        @cancle="isShowSelectionWindow = false"
+        @submit="handleSubmitFromTableSelect2"
+        :selectableType="['image']"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import Switcher from "@/components/shared/Switcher";
+import Table2 from "@/components/tableSelect2.vue";
+import { getUserInfo } from "@/api";
+
+export default {
+  components: {
+    Switcher,
+    Table2,
+  },
+  data() {
+    return {
+      password:'',
+      canSee: false,
+      isShowSelectionWindow: false,
+    }
+  },
+  computed: {
+    ...mapGetters({
+      info:'info'
+    })
+  },
+  methods: {
+    onSwitcherChange(data) {
+      this.info.isLogo = data
+    },
+    onClickSelectingPicBtn() {
+      getUserInfo((res) => {
+        console.log(res);
+        try {
+          if (res.data.incrementNum > 0) {
+            this.isShowSelectionWindow = true
+          } else {
+            // 非会员,点击跳转四维看看会员权益页。
+            window.open('/#/mall/member')
+          }
+        } catch(e) {
+          console.error('解析会员身份失败:', e)
+        }
+      })
+    },
+    handleSubmitFromTableSelect2(selected) {
+      this.info.logo = selected[0].icon
+      this.info.logoChange = true
+      this.isShowSelectionWindow = false
+    },
+    onClickCancelCustomLogo() {
+      this.info.logo = ''
+      this.info.logoChange = false
+    }
+  },
+  mounted() {
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.custom-logo-settings {
+  padding: 24px 30px;
+  background: #252526;
+  height: 546px;
+  .title {
+    font-size: 18px;
+    color: #FFFFFF;
+  }
+  .switch-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 18px;
+    .label {
+      color: rgba(255, 255, 255, 0.6);
+      font-size: 14px;
+    }
+  }
+  .bottom {
+    margin-top: 19px;
+    display: flex;
+    align-items: flex-start;
+    &.disabled {
+      opacity: 0.5;
+    }
+    .img-wrapper {
+      position: relative;
+      width: 136px;
+      height: 136px;
+      border-radius: 4px;
+      background: #1a1b1d;
+      overflow: hidden;
+      .logo-img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+      .cancel-btn-background {
+        width: 52px;
+        height: 52px;
+        position: absolute;
+        top: -28px;
+        right: -28px;
+        background: rgba(0, 0, 0, 0.5);
+        border-radius: 50%;
+        cursor: pointer;
+        i {
+          font-size: 12px;
+          transform: scale(0.8);
+          position: absolute;
+          left: 9px;
+          bottom: 9px;
+        }
+      }
+    }
+    .bottom-right {
+      margin-left: 16px;
+      padding-top: 3px;
+      .select-pic-btn {
+        cursor: pointer;
+      }
+      .remark {
+        margin-top: 20px;
+        font-size: 14px;
+        font-family: MicrosoftYaHei;
+        color: rgba(255, 255, 255, 0.3);
+        line-height: 19px;
+      }
+    }
+  }
+}
+</style>

+ 10 - 7
vue.config.js

@@ -1,4 +1,3 @@
-// const proxy_url = process.env.VUE_APP_PROXY_URL || 'http://8.135.98.231:8084'
 const proxy_url = process.env.VUE_APP_PROXY_URL || 'https://fcb.test.4dkankan.com'
 // https://vr-web01-uat.fcb.com.cn/
 let pages = {
@@ -30,14 +29,18 @@ module.exports = {
     hot: true,
     liveReload: false,
     proxy: {
-        '/manage': {
-            target: proxy_url,
-            changeOrigin: true,
-        },
-        '/web': {
+      '/manage': {
           target: proxy_url,
           changeOrigin: true,
-        }
+      },
+      '/web': {
+        target: proxy_url,
+        changeOrigin: true,
+      },
+      '/api': {
+        target: process.env.VUE_APP_PROXY_URL_ROOT,
+        changeOrigin: true,
+      }
     },
   }
 };