|
|
@@ -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>
|