sf

jiangping

2025-04-30 36d1f24952e857c971aed06042f6c7ebba6b147e

sf

 company_admin/src/views/business/pageConfiguration.vue

@@ -82,9 +82,9 @@
            <div class="productCategory">
              <div class="productCategory_list" :style="categoryStyle">
                <div class="productCategory_list_item" v-for="(item, index) in category" :key="index"
                  @click="clickItem(index, item.id, item.name)">
                  @click1="clickItem(index, item.id, item.name)">
                  <img :src="item.img" mode="widthFix" />
                  <span>{{ item.name }}</span>
                  <span  :style="{...selListNameStyle}">{{ item.name }}</span>
                </div>
                <div class="productCategory_list_zw"></div>
                <div class="productCategory_list_zw"></div>
@@ -429,26 +429,204 @@
            </template>
          </div>
        </el-form-item>
        <el-form-item label="列表字体颜色">
          <div class="color-select-item">
            <el-radio-group v-model="form.listname.selType" @change="selectListName">
              <el-radio :label="0">默认</el-radio>
              <el-radio :label="1">自定义</el-radio>
            </el-radio-group>
           <template v-if="form.listname.selType == 1">
              <el-color-picker v-model="form.listname.selColor" size="mini"  style="margin-right: 10px; margin-left: 10px;"></el-color-picker>
              不透明度：<el-input v-model="form.listname.selAlpha" type="number" style="width: 100px;"></el-input> %
            </template>
          </div>
        </el-form-item>
      </el-form>
      <div class="pz_footer">
        <el-button type="primary" @click="submit">保存</el-button>
      </div>

      

    </div>


      



  </div>
</template>
    

<script>
import { getByLoginNew, renewUpdate } from '@/api/business/page.js'
import UploadAvatarImage from '@/components/common/UploadAvatarImage.vue'
import { upload } from '@/api/system/common'
export default {
  methods: {
    selectBackground(v) {
      if (v == 0) {
        this.form.main.bgColor = '#f7f7f7'
        this.form.main.alpha = '100'
      }

    },
    // 上传背景图片
    upbgImgUrl(file) {
      // console.log(file);
      const formdate = new FormData()
      this.isUploading = true
      formdate.append('file', file.target.files[0])
      formdate.append('folder', 'web_param')
      upload(formdate)
          .then(res => {
            this.form.bgImg.img = res.imgaddr
            this.form.bgImg.imgurl = res.url
          })
          .catch(e => {
            this.$message.error(e)
          })
          .finally(() => this.isUploading = false)
      this.$refs.upBackground.value = null
    },
    // 上传顶部图片
    upTopImgUrl(file) {
      const formdate = new FormData()
      this.isUploading = true
      formdate.append('file', file.target.files[0])
      formdate.append('folder', 'web_param')
      upload(formdate)
          .then(res => {
            this.form.topImg.img = res.imgaddr
            this.form.topImg.imgurl = res.url
          })
          .catch(e => {
            this.$message.error(e)
          })
          .finally(() => this.isUploading = false)
      this.$refs.upTop.value = null
    },

    // 上传pk太图片
    upPkImgUrl(file) {
      const formdate = new FormData()
      this.isUploading = true
      formdate.append('file', file.target.files[0])
      formdate.append('folder', 'web_param')
      upload(formdate)
          .then(res => {
            this.form.pkImg.img = res.imgaddr
            this.form.pkImg.imgurl = res.url
          })
          .catch(e => {
            this.$message.error(e)
          })
          .finally(() => this.isUploading = false)
      this.$refs.upPk.value = null
    },
    selectHeaderBg(v) {
      if (v == 0) {
        this.form.header.bgColor = '#0D1E41'
        this.form.header.bgAlpha = '100'
      } else if (v == 2) {
        this.form.header.bgColor2 = '#0D1E41'
        this.form.header.bgAlpha2 = '100'
      }
    },
    selectHeader(v) {
      if (v == 0) {
        this.form.header.color = '#ffffff'
        this.form.header.alpha = '100'
      }
    },
    selectSel(v) {
      if (v == 0) {
        this.form.pull.selColor = '#FFDC6C'
        this.form.pull.selAlpha = '100'
      }
    },
    selectPull(v) {
      if (v == 0) {
        this.form.pull.bgColor = '#6C82AA'
        this.form.pull.bgAlpha = '100'
      }
    },
    selectListName(v) {
      if (v == 0) {
        this.form.listname.selColor = '#ffffff'
        this.form.listname.selAlpha = '100'
      }
    },
    selectCategroy(v) {
      if (v == 0) {
        this.form.category.bgColor = '#899FC5'
        this.form.category.bgAlpha = '100'
      }
    },
    selectSearch(v) {
      if (v == 0) {
        this.form.search.bgColor = '#0D1E41'
        this.form.search.bgAlpha = '70'
      }
    },
    selectList(v) {
      if (v == 0) {
        this.form.list.bgColor = '#000000'
        this.form.list.bgAlpha = '0'
      }
    },

    mouseenterHead(v) {
      v.target.style.background = 'rgba(255,255,255,0.16)'
    },
    mouseleaveHead(v) {
      v.target.style.background = ''
    },

    mouseenter(v) {
      let alpha = +(this.form.header.selAlpha * 2.55).toFixed(0)
      v.target.style.ba = this.form.header.selColor + alpha.toString(16)
    },
    mouseleave(v) {
      v.target.style.color = ''
    },

    clickBrand(item, child) {
      item.brandName = child
      item.ppShow = false
    },
    clickXH(item, data) {
      item.name = data
      item.ppShow = false
    },

    getDesc() {
      getByLoginNew()
          .then(res => {
            if (res.newParam) {
              var param= JSON.parse(res.newParam)
              for (const key in this.form) {
                this.form[key] =param[key]||{}
              }
              // this.form = JSON.parse(res.newParam)
            }
            console.log(this.form)
          })
    },

    submit() {
      if (this.form.rangeSize < 750) {
        this.$message.warning({ message: '尺寸必须大于750' })
        return
      }
      if (this.form.rangeSize > 1200) {
        this.$message.warning({ message: '尺寸必须小于1200' })
        return
      }
      renewUpdate({ newParam: JSON.stringify(this.form) })
          .then(res => {
            this.$message.success({ message: '保存成功' })
          })
    },
  },
  components: { UploadAvatarImage },
  data() {
    return {
@@ -564,6 +742,15 @@
          selColor: '#FFDC6C',
          selAlpha: '100'
        },
        selType:0,
        listname: {
          bgType: 0,
          bgColor: '#6C82AA',
          bgAlpha: '100',
          selType: '0',
          selColor: '#ffffff',
          selAlpha: '100'
        },
        search: {
          bgType: 0,
          bgColor: '#0D1E41',
@@ -630,12 +817,18 @@
      selStyle.color = this.form.pull.selColor + (alpha==0?"00":alpha.toString(16))
      return selStyle
    },
    selListNameStyle() {
      let selListNameStyle = {}
      let alpha = +(this.form.listname.selAlpha * 2.55).toFixed(0)
      selListNameStyle.color = this.form.listname.selColor + (alpha==0?"00":alpha.toString(16))
      return selListNameStyle
    },
    searchStyle() {
      let alpha = +(this.form.search.bgAlpha * 2.55).toFixed(0)
      let background = this.form.search.bgColor + (alpha==0?"00":alpha.toString(16))
      return { background }
    },
    

    categoryStyle() {
      let alpha = +(this.form.category.bgAlpha * 2.55).toFixed(0)
      let background = this.form.category.bgColor + (alpha==0?"00":alpha.toString(16))
@@ -644,160 +837,8 @@
  },
  created() {
    this.getDesc()
  },
  methods: {
    selectBackground(v) {
      if (v == 0) {
        this.form.main.bgColor = '#f7f7f7'
        this.form.main.alpha = '100'
      }
    },
    // 上传背景图片
    upbgImgUrl(file) {
      // console.log(file);
      const formdate = new FormData()
      this.isUploading = true
      formdate.append('file', file.target.files[0])
      formdate.append('folder', 'web_param')
      upload(formdate)
        .then(res => {
          this.form.bgImg.img = res.imgaddr
          this.form.bgImg.imgurl = res.url
        })
        .catch(e => {
          this.$message.error(e)
        })
        .finally(() => this.isUploading = false)
      this.$refs.upBackground.value = null
    },
    // 上传顶部图片
    upTopImgUrl(file) {
      const formdate = new FormData()
      this.isUploading = true
      formdate.append('file', file.target.files[0])
      formdate.append('folder', 'web_param')
      upload(formdate)
        .then(res => {
          this.form.topImg.img = res.imgaddr
          this.form.topImg.imgurl = res.url
        })
        .catch(e => {
          this.$message.error(e)
        })
        .finally(() => this.isUploading = false)
      this.$refs.upTop.value = null
    },

    // 上传pk太图片
    upPkImgUrl(file) {
      const formdate = new FormData()
      this.isUploading = true
      formdate.append('file', file.target.files[0])
      formdate.append('folder', 'web_param')
      upload(formdate)
        .then(res => {
          this.form.pkImg.img = res.imgaddr
          this.form.pkImg.imgurl = res.url
        })
        .catch(e => {
          this.$message.error(e)
        })
        .finally(() => this.isUploading = false)
      this.$refs.upPk.value = null
    },
    selectHeaderBg(v) {
      if (v == 0) {
        this.form.header.bgColor = '#0D1E41'
        this.form.header.bgAlpha = '100'
      } else if (v == 2) {
        this.form.header.bgColor2 = '#0D1E41'
        this.form.header.bgAlpha2 = '100'
      }
    },
    selectHeader(v) {
      if (v == 0) {
        this.form.header.color = '#ffffff'
        this.form.header.alpha = '100'
      }
    },
    selectSel(v) {
      if (v == 0) {
        this.form.pull.selColor = '#FFDC6C'
        this.form.pull.selAlpha = '100'
      }
    },
    selectPull(v) {
      if (v == 0) {
        this.form.pull.bgColor = '#6C82AA'
        this.form.pull.bgAlpha = '100'
      }
    },
    selectCategroy(v) {
      if (v == 0) {
        this.form.category.bgColor = '#899FC5'
        this.form.category.bgAlpha = '100'
      }
    },
    selectSearch(v) {
      if (v == 0) {
        this.form.search.bgColor = '#0D1E41'
        this.form.search.bgAlpha = '70'
      }
    },
    selectList(v) {
      if (v == 0) {
        this.form.list.bgColor = '#000000'
        this.form.list.bgAlpha = '0'
      }
    },

    mouseenterHead(v) {
      v.target.style.background = 'rgba(255,255,255,0.16)'
    },
    mouseleaveHead(v) {
      v.target.style.background = ''
    },

    mouseenter(v) {
      let alpha = +(this.form.header.selAlpha * 2.55).toFixed(0)
      v.target.style.ba = this.form.header.selColor + alpha.toString(16)
    },
    mouseleave(v) {
      v.target.style.color = ''
    },

    clickBrand(item, child) {
      item.brandName = child
      item.ppShow = false
    },
    clickXH(item, data) {
      item.name = data
      item.ppShow = false
    },

    getDesc() {
      getByLoginNew()
        .then(res => {
          if (res.newParam) {
            this.form = JSON.parse(res.newParam)
          }
        })
    },

    submit() {
      if (this.form.rangeSize < 750) {
        this.$message.warning({ message: '尺寸必须大于750' })
        return
      }
      if (this.form.rangeSize > 1200) {
        this.$message.warning({ message: '尺寸必须小于1200' })
        return
      }
      renewUpdate({ newParam: JSON.stringify(this.form) })
        .then(res => {
          this.$message.success({ message: '保存成功' })
        })
    },
    console.log(this.form.listname)
    console.log(this.form.listname.selType)
  }
}
/**
@@ -1407,7 +1448,7 @@
  height: 45px;
  padding: 10px 8px;
  box-sizing: border-box;
  // 
  //
  // background: rgba(0, 224, 255, 0.24) linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(0, 0, 0, 0.21) 100%);
  display: flex;
  align-items: center;
@@ -1815,4 +1856,4 @@
    }
  }
}
</style>
</style>