sf

jiangping

2025-04-30 dcdb0231034810232f2542f3865666ebf72daf11

sf

 company_admin/src/views/business/pageConfiguration.vue

@@ -7,13 +7,13 @@
          <el-tab-pane label="主界面" name="0"></el-tab-pane>
          <el-tab-pane label="PK效果" name="1"></el-tab-pane>
          <el-tab-pane label="搜索效果" name="2"></el-tab-pane>
          <el-tab-pane label="商品列表" name="3"></el-tab-pane>
        </el-tabs>
      </div>

      <div class="prediv-content">
        <div class="content" :style="contentStyle">
          <img :src="form.topImg.type ? form.topImg.imgurl : defaultBanner" alt="">
          <template v-if="type != 1">
          <template v-if="type != 1 && type !=3">
            <div>
              <div class="commodityFrom_head" :style="tableHeaderStyle">
                <!-- @mouseenter="mouseenter" @mouseleave="mouseleave" -->
@@ -94,7 +94,7 @@
              </div>
            </div>
          </template>
          <div class="productPage" v-if="type == 1">
          <div class="productPage" v-if="type == 1 || type ==3">
            <div class="productPage_head" :style="tableHeaderStyle">
              <div class="productPage_head_item" @mouseenter="mouseenterHead" @mouseleave="mouseleaveHead">
                <span>属性1</span>
@@ -142,6 +142,7 @@
                </div> -->
              </div>
            </div>
            <template v-if="type ==1">
            <div class="productPage_pk">
              <div class="productPage_pk_shop">

@@ -203,8 +204,21 @@
                            </div>
                        </div>
                    </div>
            </template>
            <template v-if="type==3">
              <div class="productPage_shop" >
                <div class="productPage_shop_item" v-for="(item, index) in productList"  :style="{...selectList}" :key="index" >
                  <div class="productPage_shop_item_img">
                    <img :src="item.img" mode="widthFix"/>
          </div>

                  <span :style="{...selProNameStyle}">{{item.name}}</span>
                </div>
                <div class="productPage_shop_zw"></div>
                <div class="productPage_shop_zw"></div>
                <div class="productPage_shop_zw"></div>
              </div>
            </template>
          </div>
        </div>
      </div>
      <div class="search" v-if="type == 2">
@@ -429,16 +443,38 @@
            </template>
          </div>
        </el-form-item>
        <el-form-item label="列表字体颜色">
        <el-form-item label="品类列表字体">
          <div class="color-select-item">
            <el-radio-group v-model="form.listname.selType" @change="selectListName">
            颜色  <el-radio-group v-model="form.listname.selType" @change="selectListName" style="margin-left: 15px">
              <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> %
              不透明度 <el-input v-model="form.listname.selAlpha" type="number" style="width: 100px;"></el-input> %
            </template>
          </div>
          <div >
            <div class="color-select-item" style="margin-top: 10px">
              大小<el-input v-model="form.listname.fontSize" type="number" style="width: 80px;margin-left: 15px"></el-input> px (默认16px)
            </div>
          </div>
        </el-form-item>
        <el-form-item label="商品列表字体">
          <div class="color-select-item">
            颜色  <el-radio-group v-model="form.listproname.selType" @change="selectproName" style="margin-left: 15px">
            <el-radio :label="0">默认</el-radio>
            <el-radio :label="1">自定义</el-radio>
          </el-radio-group>
            <template v-if="form.listproname.selType == 1">
              <el-color-picker v-model="form.listproname.selColor" size="mini"  style="margin-right: 10px; margin-left: 10px;"></el-color-picker>
              不透明度 <el-input v-model="form.listproname.selAlpha" type="number" style="width: 100px;"></el-input> %
            </template>
          </div>
          <div >
            <div class="color-select-item" style="margin-top: 10px">
              大小<el-input v-model="form.listproname.fontSize" type="number" style="width: 80px;margin-left: 15px"></el-input> px (默认16px)
            </div>
          </div>
        </el-form-item>
      </el-form>
@@ -555,6 +591,12 @@
        this.form.listname.selAlpha = '100'
      }
    },
    selectproName(v) {
      if (v == 0) {
        this.form.listproname.selColor = '#ffffff'
        this.form.listproname.selAlpha = '100'
      }
    },
    selectCategroy(v) {
      if (v == 0) {
        this.form.category.bgColor = '#899FC5'
@@ -604,11 +646,12 @@
            if (res.newParam) {
              var param= JSON.parse(res.newParam)
              for (const key in this.form) {
                this.form[key] =param[key]||{}
                if(param[key]){
                  this.form[key] = param[key]
                }
              }
              // this.form = JSON.parse(res.newParam)
            }
            console.log(this.form)
          })
    },

@@ -655,6 +698,38 @@
        { img: require('@/assets/images/category/ic_xiwanji@2x.png'), name: '洗碗机' },
        { img: require('@/assets/images/category/ic_jinshui@2x.png'), name: '净水器' },
        { img: require('@/assets/images/category/ic_qita@2x.png'), name: '其他' },
      ],
      productList: [
        { img: require('@/assets/images/product/1a.png'), name: '卡萨帝' },
        { img: require('@/assets/images/product/2a.png'), name: '大海豹' },
        { img: require('@/assets/images/product/3a.png'), name: '小白桃' },
        { img: require('@/assets/images/product/4a.png'), name: '白珍珠' },
        { img: require('@/assets/images/product/5a.png'), name: '东芝58' },
        { img: require('@/assets/images/product/6a.png'), name: '东芝59' },
        { img: require('@/assets/images/product/7a.png'), name: '松下50' },
        { img: require('@/assets/images/product/8a.png'), name: '美的55' },
        { img: require('@/assets/images/product/9a.png'), name: '海尔57' },
        { img: require('@/assets/images/product/10a.png'), name: '美的46' },
        { img: require('@/assets/images/product/1a.png'), name: '卡萨帝' },
        { img: require('@/assets/images/product/2a.png'), name: '大海豹' },
        { img: require('@/assets/images/product/3a.png'), name: '小白桃' },
        { img: require('@/assets/images/product/4a.png'), name: '白珍珠' },
        { img: require('@/assets/images/product/5a.png'), name: '东芝58' },
        { img: require('@/assets/images/product/6a.png'), name: '东芝59' },
        { img: require('@/assets/images/product/7a.png'), name: '松下50' },
        { img: require('@/assets/images/product/8a.png'), name: '美的55' },
        { img: require('@/assets/images/product/9a.png'), name: '海尔57' },
        { img: require('@/assets/images/product/10a.png'), name: '美的46' },
        { img: require('@/assets/images/product/1a.png'), name: '卡萨帝' },
        { img: require('@/assets/images/product/2a.png'), name: '大海豹' },
        { img: require('@/assets/images/product/3a.png'), name: '小白桃' },
        { img: require('@/assets/images/product/4a.png'), name: '白珍珠' },
        { img: require('@/assets/images/product/5a.png'), name: '东芝58' },
        { img: require('@/assets/images/product/6a.png'), name: '东芝59' },
        { img: require('@/assets/images/product/7a.png'), name: '松下50' },
        { img: require('@/assets/images/product/8a.png'), name: '美的55' },
        { img: require('@/assets/images/product/9a.png'), name: '海尔57' },
        { img: require('@/assets/images/product/10a.png'), name: '美的46' },
      ],
      action: process.env.VUE_APP_API_PREFIX + '/public/upload',
      defaultBanner: require('@/assets/images/banner_defult.png'),
@@ -744,10 +819,16 @@
        },
        selType:0,
        listname: {
          bgType: 0,
          bgColor: '#6C82AA',
          bgAlpha: '100',
          fontType: 0,
          fontSize: '16',
          selType: '0',
          selColor: '#ffffff',
          selAlpha: '100'
        },
        listproname: {
          fontType: 0,
          fontSize: '16',
          selType: 0,
          selColor: '#ffffff',
          selAlpha: '100'
        },
@@ -818,10 +899,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))
      let color = this.form.listname.selColor + (alpha==0?"00":alpha.toString(16))
      let selListNameStyle = {color: color,'font-size':(this.form.listname.fontSize || '16')+'px'}
      return selListNameStyle
    },
    selProNameStyle() {
      let alpha = +(this.form.listproname.selAlpha * 2.55).toFixed(0)
      let color = this.form.listproname.selColor + (alpha==0?"00":alpha.toString(16))
      let selProNameStyle = {color: color,'font-size':(this.form.listproname.fontSize || '16')+'px'}
      return selProNameStyle
    },
    searchStyle() {
      let alpha = +(this.form.search.bgAlpha * 2.55).toFixed(0)
@@ -837,8 +924,6 @@
  },
  created() {
    this.getDesc()
    console.log(this.form.listname)
    console.log(this.form.listname.selType)
  }
}
/**
@@ -1132,12 +1217,12 @@
            flex-wrap: wrap;

            .productPage_shop_zw {
              width: 168px;
              width: 15%;
              height: 0;
            }

            .productPage_shop_item {
              width: 168px;
              width: 15%;
              // height: 204px;
              margin-bottom: 12px;
              cursor: pointer;
@@ -1163,8 +1248,8 @@
              }

              .productPage_shop_item_img {
                width: 136px;
                height: 136px;
                width: 50px;
                height: 50px;
                display: flex;
                align-items: center;
                justify-content: center;
@@ -1856,4 +1941,65 @@
    }
  }
}

.productPage_shop {
  width: 100%;
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  .productPage_shop_zw {
    width: 15%;
    height: 0;
  }
  .productPage_shop_item {
    width: 15%;
    margin-bottom: 12px;
    cursor: pointer;
    background: rgba(0,224,255,0.18);
    border-radius: 8px;
    display: flex;
    transition: .5s;
    padding: 15px;
    box-sizing: border-box;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    white-space: pre-wrap;
    word-break: break-all;
    text-align: center;
    &:hover {
      background: linear-gradient(180deg, rgba(0,224,255,0.3) 0%, rgba(255,255,255,0.41) 100%);
      border-radius: 8px;
      border: 2px solid #FFFFFF;
      box-sizing: border-box;
    }
    .productPage_shop_item_img {
      width: 136px;
      height: 136px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      image {
        width: 100%;
        height: 100%;
      }
    }
    text {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      font-size: 16px;
      font-family: SourceHanSansSC-Normal, SourceHanSansSC;
      font-weight: 400;
      color: #FFFFFF;
      margin-top: 12px;
    }
  }
}
</style>

 h5/manifest.json

@@ -1,6 +1,6 @@
{
    "name" : "test",
    "appid" : "__UNI__2839FFE",
    "name" : "h5",
    "appid" : "__UNI__E3BA820",
    "description" : "",
    "versionName" : "1.0.0",
    "versionCode" : "100",

 h5/pages/index_2/index.vue

@@ -92,6 +92,7 @@
                                    <image src="@/static/ic_img@2x.png" mode="widthFix" @click="openImg(index)"></image>
                                    <image src="@/static/ic_copy@2x.png" mode="widthFix" @click="copyItem(item)"></image>
                                    <image src="@/static/ic_delete@2x.png" mode="widthFix" @click="deleItem(index)"></image>
                                    <image src="@/static/ic_pk2@2x.png" mode="widthFix" @click="clickItem(-1, item.categoryId, item.categoryName,2,item)"></image>
                                </view>
                            </view>
                        </view>
@@ -112,9 +113,9 @@
                    class="productCategory_list_item"
                    v-for="(item, index) in category"
                    :key="index"
                    @click="clickItem(index, item.id, item.name)">
                    @click="clickItem(index, item.id, item.name,1)">
                        <image :src="item.imgurl ? item.prefixUrl + item.imgurl : ''" mode="widthFix"></image>
                        <text>{{item.name}}</text>
                        <text :style="{'font-size': !configuration&&!configuration.listname ?'16px':((configuration.listname.fontSize||16)   +'px'),color: !configuration &&!configuration.listname? '#ffffff' : configuration.listname.selType === 1 ? percentage(configuration.listname.selColor, configuration.listname.selAlpha) : '#ffffff'}">{{item.name}}</text>
                    </view>
                    <view class="productCategory_list_zw"></view>
                    <view class="productCategory_list_zw"></view>
@@ -215,7 +216,7 @@
                            <view class="productPage_shop_item_img">
                                <image :src="item.imgurl ? item.prefixUrl + item.imgurl : ''" mode="widthFix"></image>
                            </view>
                            <text>{{item.name}}</text>
                            <text :style="{'font-size': !configuration &&!configuration.listproname?'16px':((configuration.listproname.fontSize||16)   +'px'),color: !configuration&&!configuration.listproname ? '#ffffff' : configuration.listproname.selType === 1 ? percentage(configuration.listproname.selColor, configuration.listproname.selAlpha) : '#ffffff',color: !configuration ? '#ffffff' : configuration.listproname.selType === 1 ? percentage(configuration.listproname.selColor, configuration.listproname.selAlpha) : '#ffffff'}">{{item.name}}</text>
                        </view>
                        <view class="productPage_shop_zw"></view>
                        <view class="productPage_shop_zw"></view>
@@ -292,7 +293,7 @@
        data() {
            return {
                status: 0,    // 0首页 1商品列表 2pk页
				
                backPageNum:1,//返回页数
                img: '',
                
                opacity: 1,
@@ -513,6 +514,9 @@
            }
        },
        methods: {
            jumpPKNew(){
                this.status = 1
            },
            aaa(index) {
                this.fontColorIndex = index
            },
@@ -677,7 +681,7 @@
                if (this.status === 0) return
                this.$refs.search.close()
                this.$refs.searchShopListRef.close()
                this.status = this.status - 1
                this.status = this.status -(this.backPageNum>0?this.backPageNum:1)
                if (this.status === 0) {
                    this.leftShop = {}
                    this.rightShop = {}
@@ -755,11 +759,12 @@
            },
            // 点击加入pk商品
            openSearch(type) {
                if (type === 'left') {
                this.$refs.search.open(type)
                /* if (type === 'left') {
                    this.$refs.search.open('left')
                } else if (type === 'right') {
                    this.$refs.search.open('right')
                }
                } */
            },
            // 点击商品列表页面查询
            clickShopPageCheck(item, type) {
@@ -983,7 +988,7 @@
                this.$forceUpdate()
            },
            // 点击类别
            clickItem(index, id, name) {
            clickItem(index, id, name,status,proItem) {
                this.categoryId = id
                this.categoryName = name
                this.isSOU = false
@@ -997,7 +1002,7 @@
                    })
                
                this.category.forEach((item, num) => {
                    if (index === num) {
                    if (item.id === id) {
                        item.active = true
                        
                        this.attrSecondList = []
@@ -1055,6 +1060,12 @@
                this.shopPageData = this.shopData.filter(item => {
                    return item.categoryId === id
                })
                if(status ==2){
                    this.leftShop=proItem
                    this.backPageNum =2
                }else{
                    this.backPageNum=1
                }
                console.log(this.shopPageData)
                // this.shopData.forEach(item => {
                //     if (item.categoryId === id) {
@@ -1078,7 +1089,7 @@
                    id: '',
                    name: ''
                },
                this.status = 1
                this.status = status || 1
            },
            mousemove(e) {
                if (e === this.index) return