From dcdb0231034810232f2542f3865666ebf72daf11 Mon Sep 17 00:00:00 2001 From: jiangping <jp@doumee.com> Date: 星期三, 30 四月 2025 16:45:34 +0800 Subject: [PATCH] sf --- h5/pages/index_2/index.vue | 31 +++- company_admin/src/views/business/pageConfiguration.vue | 294 ++++++++++++++++++++++++++++++++++++------------ h5/manifest.json | 4 3 files changed, 243 insertions(+), 86 deletions(-) diff --git a/company_admin/src/views/business/pageConfiguration.vue b/company_admin/src/views/business/pageConfiguration.vue index 3bdb438..73d2ffa 100644 --- a/company_admin/src/views/business/pageConfiguration.vue +++ b/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,72 +142,86 @@ </div> --> </div> </div> - <div class="productPage_pk"> - <div class="productPage_pk_shop"> + <template v-if="type ==1"> + <div class="productPage_pk" > + <div class="productPage_pk_shop"> - <div class="productPage_pk_shop_sp1" :style="tableHeaderStyle"> - <div class="productPage_pk_shop_sp1_img"> - <img src="@/assets/images/Samsung@2x.png" mode="widthFix"> + <div class="productPage_pk_shop_sp1" :style="tableHeaderStyle"> + <div class="productPage_pk_shop_sp1_img"> + <img src="@/assets/images/Samsung@2x.png" mode="widthFix"> + </div> + <span>涓夋槦323娲楃儤</span> </div> - <span>涓夋槦323娲楃儤</span> + <div class="productPage_pk_shop_t"> + <img v-if="form.pkImg.type==0" src="@/assets/images/pk_defult.png" alt=""> + <img v-else :src="form.pkImg.imgurl" alt=""> + </div> </div> - <div class="productPage_pk_shop_t"> - <img v-if="form.pkImg.type==0" src="@/assets/images/pk_defult.png" alt=""> - <img v-else :src="form.pkImg.imgurl" alt=""> + <div class="productPage_pk_z"> + <img src="@/assets/images/ic_pk@2x.png" mode="widthFix"> </div> - </div> - <div class="productPage_pk_z"> - <img src="@/assets/images/ic_pk@2x.png" mode="widthFix"> - </div> - <div class="productPage_pk_shop" > + <div class="productPage_pk_shop" > - <div class="productPage_pk_shop_sp1" :style="tableHeaderStyle"> - <div class="productPage_pk_shop_sp1_img"> - <img src="@/assets/images/Galanz@2x.png" mode="widthFix"> + <div class="productPage_pk_shop_sp1" :style="tableHeaderStyle"> + <div class="productPage_pk_shop_sp1_img"> + <img src="@/assets/images/Galanz@2x.png" mode="widthFix"> + </div> + <span>鏍煎叞浠�434娲楃儤</span> </div> - <span>鏍煎叞浠�434娲楃儤</span> - </div> - <div class="productPage_pk_shop_t"> - <img v-if="form.pkImg.type==0" src="@/assets/images/pk_defult.png" alt=""> - <img v-else :src="form.pkImg.imgurl" alt=""> + <div class="productPage_pk_shop_t"> + <img v-if="form.pkImg.type==0" src="@/assets/images/pk_defult.png" alt=""> + <img v-else :src="form.pkImg.imgurl" alt=""> + </div> </div> </div> - </div> - <div class="productPage_parameter"> - <div class="productPage_parameter_item" v-for="(item, index) in [leftShop, rightShop]" :key="index"> - <div class="productPage_parameter_item_head" :style="tableHeaderStyle"> - <span>{{item.name}}</span> - </div> - <div class="productPage_parameter_item_content" :style="tableBodyStyle"> - <div class="productPage_parameter_item_content_price"> - <div class="zdj"> - <span>鎸囧浠凤細</span> - <span>楼{{item.zdPrice}}</span> - </div> - <div class="rsj"> - <span>寤鸿鍏ユ墜浠凤細</span> - <span>楼{{item.price}}</span> - </div> - </div> - <div class="productPage_parameter_item_content_nr"> - <div class="item" v-if="item.param1" v-for="(child, i) in item.param1" :key="child.index"> - <div class="label">{{child.name}}锛�</div> - <div class="value">{{child.val}}</div> - </div> - <div v-if="item.param2.length>0" class="paramline"></div> - <div class="item" v-if="item.param2" v-for="(child, j) in item.param2" :key="child.index"> - <div class="label">{{child.name}}锛�</div> - <div class="value">{{child.val}}</div> - </div> - </div> - </div> - </div> - </div> + <div class="productPage_parameter"> + <div class="productPage_parameter_item" v-for="(item, index) in [leftShop, rightShop]" :key="index"> + <div class="productPage_parameter_item_head" :style="tableHeaderStyle"> + <span>{{item.name}}</span> + </div> + <div class="productPage_parameter_item_content" :style="tableBodyStyle"> + <div class="productPage_parameter_item_content_price"> + <div class="zdj"> + <span>鎸囧浠凤細</span> + <span>楼{{item.zdPrice}}</span> + </div> + <div class="rsj"> + <span>寤鸿鍏ユ墜浠凤細</span> + <span>楼{{item.price}}</span> + </div> + </div> + <div class="productPage_parameter_item_content_nr"> + <div class="item" v-if="item.param1" v-for="(child, i) in item.param1" :key="child.index"> + <div class="label">{{child.name}}锛�</div> + <div class="value">{{child.val}}</div> + </div> + <div v-if="item.param2.length>0" class="paramline"></div> + <div class="item" v-if="item.param2" v-for="(child, j) in item.param2" :key="child.index"> + <div class="label">{{child.name}}锛�</div> + <div class="value">{{child.val}}</div> + </div> + </div> + </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"> + <div class="search" v-if="type == 2 "> <div class="search_box"> <div class="search_box_item" :style="searchStyle"> <div class="icon"> @@ -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> diff --git a/h5/manifest.json b/h5/manifest.json index d2d407f..c48ca0b 100644 --- a/h5/manifest.json +++ b/h5/manifest.json @@ -1,6 +1,6 @@ { - "name" : "test", - "appid" : "__UNI__2839FFE", + "name" : "h5", + "appid" : "__UNI__E3BA820", "description" : "", "versionName" : "1.0.0", "versionCode" : "100", diff --git a/h5/pages/index_2/index.vue b/h5/pages/index_2/index.vue index cd71b0b..13ca13c 100644 --- a/h5/pages/index_2/index.vue +++ b/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 -- Gitblit v1.9.3