aaa

doum

2026-06-04 08e9a67dd679f311e79a27b04cd0c53a30b4bccf

 company_admin/src/views/business/pageConfiguration.vue

@@ -242,7 +242,32 @@

    </div>
    <div class="setting">
      <div class="pz_head">信息</div>
      <div class="pz_head pz_head--with-switch">
        <span>主播端页面配置 <span class="version-tag">V2</span></span>
        <span
          class="version-switch version-switch--v2"
          :class="{ 'version-switch--active': useThisVersion }"
        >
          <span class="version-switch__icon"><i class="el-icon-mobile-phone" /></span>
          <span class="version-switch__body">
            <span class="version-switch__label">立即使用该版本</span>
            <span class="version-switch__status">{{ useThisVersion ? '已启用 · 主播端当前版本' : '点击按钮后主播端将切换至本版本' }}</span>
          </span>
          <span v-if="useThisVersion" class="version-switch__badge">
            <i class="el-icon-success" /> 当前版本
          </span>
          <el-button
            v-else
            type="primary"
            size="medium"
            :loading="versionSwitchLoading"
            class="version-switch__btn version-switch__btn--v2"
            @click="onUseThisVersion"
          >
            立即生效
          </el-button>
        </span>
      </div>
      <el-form ref="form" :model="form" label-width="130px" label-suffix="：">
        <el-form-item label="内容范围尺寸" props="rangeSize">
          <el-input v-model="form.rangeSize" type="number" style="width: 200px;" placeholder="支持750px-1200px"></el-input>
@@ -493,7 +518,7 @@
</template>

<script>
import { getByLoginNew, renewUpdate } from '@/api/business/page.js'
import { getByLoginNew, renewUpdate, updateAnchorPageVersion } from '@/api/business/page.js'
import UploadAvatarImage from '@/components/common/UploadAvatarImage.vue'
import { upload } from '@/api/system/common'
export default {
@@ -643,16 +668,34 @@
    getDesc() {
      getByLoginNew()
          .then(res => {
            if (res.newParam) {
            if (res && res.newParam) {
              var param= JSON.parse(res.newParam)
              for (const key in this.form) {
                if(param[key]){
                  this.form[key] = param[key]
                }
              }
              // this.form = JSON.parse(res.newParam)
            }
            this.anchorPageVersion = (res && res.anchorPageVersion) || 'v2'
            this.useThisVersion = this.anchorPageVersion === 'v2'
          })
    },

    onUseThisVersion () {
      if (this.useThisVersion || this.versionSwitchLoading) return
      this.versionSwitchLoading = true
      updateAnchorPageVersion({ anchorPageVersion: 'v2' })
        .then(() => {
          this.anchorPageVersion = 'v2'
          this.useThisVersion = true
          this.$message.success('已启用 V2 配置')
        })
        .catch(e => {
          this.$tip.apiFailed(e)
        })
        .finally(() => {
          this.versionSwitchLoading = false
        })
    },

    submit() {
@@ -664,7 +707,10 @@
        this.$message.warning({ message: '尺寸必须小于1200' })
        return
      }
      renewUpdate({ newParam: JSON.stringify(this.form) })
      renewUpdate({
        newParam: JSON.stringify(this.form),
        anchorPageVersion: this.anchorPageVersion
      })
          .then(res => {
            this.$message.success({ message: '保存成功' })
          })
@@ -674,6 +720,9 @@
  data() {
    return {
      isUploading: false,
      useThisVersion: false,
      versionSwitchLoading: false,
      anchorPageVersion: 'v2',
      type: '0', // 0、主界面 1、PK效果 2、搜索效果
      shopList: [
        { categoryImgurl: '', categoryName: '洗衣机', brandName: '海尔', ppShow: false, ppData: ['CLOMO', '海尔', '格兰仕', '三星'], name: 'EG100MATE35S', xhShow: false, xhData: ['EG100MATE35S', 'DG100MATE35S', 'FG100MATE35S'], zdPrice: '1899', price: '1899' },
@@ -1485,6 +1534,129 @@

  }

  .pz_head--with-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
  }

  .version-tag {
    display: inline-block;
    margin-left: 8px;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    color: #409eff;
    background: #ecf5ff;
    border: 1px solid #b3d8ff;
    vertical-align: middle;
  }

  .version-switch {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    border-radius: 10px;
    border: 2px solid #409eff;
    background: linear-gradient(135deg, #ecf5ff 0%, #f5faff 100%);
    box-shadow: 0 4px 14px rgba(64, 158, 255, 0.22);
    transition: all 0.25s ease;
    cursor: default;

    &--active {
      border-color: #409eff;
      background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
      box-shadow: 0 6px 20px rgba(64, 158, 255, 0.4);

      .version-switch__icon {
        background: rgba(255, 255, 255, 0.25);
        color: #fff;
      }

      .version-switch__label {
        color: #fff;
      }

      .version-switch__status {
        color: rgba(255, 255, 255, 0.88);
      }
    }

    &__icon {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(64, 158, 255, 0.15);
      color: #409eff;
      font-size: 20px;
    }

    &__body {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }

    &__label {
      font-size: 15px;
      font-weight: 700;
      color: #409eff;
      white-space: nowrap;
      line-height: 1.3;
    }

    &__status {
      font-size: 12px;
      color: #909399;
      white-space: nowrap;
      line-height: 1.3;
    }

    &__badge {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 16px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 600;
      color: #fff;
      background: rgba(255, 255, 255, 0.25);
      white-space: nowrap;
    }

    &__btn {
      flex-shrink: 0;
      padding: 10px 22px;
      font-size: 14px;
      font-weight: 700;
      border-radius: 20px;
      border: none;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

      &--v2 {
        background: #fff;
        color: #409eff;

        &:hover,
        &:focus {
          background: #f5faff;
          color: #409eff;
        }
      }
    }
  }

  .pz_item {
    // width: 750px;
    display: flex;