From b02e37f41d5c74f4d72eaa434123bbadc00fa822 Mon Sep 17 00:00:00 2001 From: yvan.ni Date: Tue, 12 Dec 2023 15:16:31 +0800 Subject: [PATCH] 商品详情的顶部的风格的优化 --- app.wxss | 5 +++++ components/diy_top_nav/diy_top_nav.js | 143 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ components/diy_top_nav/diy_top_nav.json | 4 ++++ components/diy_top_nav/diy_top_nav.wxml | 69 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ components/diy_top_nav/diy_top_nav.wxss | 131 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ packageA/pages/goodsInfo/goodsInfo.js | 12 +++++++++--- packageA/pages/goodsInfo/goodsInfo.json | 2 +- packageA/pages/goodsInfo/goodsInfo.wxml | 14 +++++++++----- packageA/pages/goodsInfo/goodsInfo.wxss | 7 +++++++ packageA/pages/serviceCard_pd/goodsInfo/goodsInfo.js | 6 ++++++ packageA/pages/serviceCard_pd/goodsInfo/goodsInfo.json | 2 +- packageA/pages/serviceCard_pd/goodsInfo/goodsInfo.wxml | 12 +++++++++--- packageC/pages/luckyGo/luckyGo_goodsInfo/luckyGo_goodsInfo.js | 11 +++++++++-- packageC/pages/luckyGo/luckyGo_goodsInfo/luckyGo_goodsInfo.json | 2 +- packageC/pages/luckyGo/luckyGo_goodsInfo/luckyGo_goodsInfo.wxml | 17 +++++++++++------ packageC/pages/luckyGo/luckyGo_goodsInfo/luckyGo_goodsInfo.wxss | 6 ++++++ packageC/pages/presell/cardInfo/goodsInfo.js | 10 +++++++++- packageC/pages/presell/cardInfo/goodsInfo.json | 2 +- packageC/pages/presell/cardInfo/goodsInfo.wxml | 13 +++++++++---- packageC/pages/presell/cardInfo/goodsInfo.wxss | 9 ++++++++- packageC/pages/presell/goodsInfo/goodsInfo.js | 9 ++++++++- packageC/pages/presell/goodsInfo/goodsInfo.json | 2 +- packageC/pages/presell/goodsInfo/goodsInfo.wxml | 13 +++++++++++-- packageC/pages/presell/goodsInfo/goodsInfo.wxss | 7 +++++++ pages/goods/goodsInfo/goodsInfo.js | 42 ++++++++++++++++++++++++++++++++++++++++++ pages/goods/goodsInfo/goodsInfo.json | 2 +- pages/goods/goodsInfo/goodsInfo.wxml | 13 +++++++++++-- pages/goods/goodsInfo/goodsInfo.wxss | 7 +++++++ 28 files changed, 536 insertions(+), 36 deletions(-) create mode 100644 components/diy_top_nav/diy_top_nav.js create mode 100644 components/diy_top_nav/diy_top_nav.json create mode 100644 components/diy_top_nav/diy_top_nav.wxml create mode 100644 components/diy_top_nav/diy_top_nav.wxss diff --git a/app.wxss b/app.wxss index c3108db..0d54931 100644 --- a/app.wxss +++ b/app.wxss @@ -1211,6 +1211,11 @@ background: #ffe3e2; content: "\e618"; } +.icon-weixin:before { + content: "\e677"; +} + + /* 去掉零售价划线 */ .no_line_x{ text-decoration: none !important; diff --git a/components/diy_top_nav/diy_top_nav.js b/components/diy_top_nav/diy_top_nav.js new file mode 100644 index 0000000..8700664 --- /dev/null +++ b/components/diy_top_nav/diy_top_nav.js @@ -0,0 +1,143 @@ +// components/diy_top_nav/diy_top_nav.js +const app = getApp(); +var os = app.globalData.setting; +Component({ + /** + * 组件的属性列表 + */ + properties: { + nav_type:{ + type:Number, + value:0, + }, + istop:{ + type:Number, + value:0, + }, + nav_title:{ + type:String, + value:'首页', + }, + nav_frontColor:{ + type:String, + value:'#ffffff', + }, + nav_backgroundColor:{ + type:String, + value:'#ff7295', + }, + is_share:{ + type:Boolean, + value:true + } + }, + + /** + * 组件的初始数据 + */ + data: { + imghots: os.imghost, + nav_h:0, //导航胶囊上面状态栏的高度 + mentButt_h:0,//导航胶囊高度 + navleft_pb:0, //导航左边的自定义内容的左右内边距 + nav_left_w:281, // 导航左边自定义的内容宽度 + navleft_w:0, //左边胶囊宽度 + nav_pb:0, // 导航的下内边距 + show_menu:false,//详情页导航下拉菜单显示 + men_list:[ + { + name:'首页', + img:'miniapp/js_img/goods_info/home.png?v=3', + url:'/pages/index/index/index' + }, + { + name:'我的订单', + img:'miniapp/js_img/goods_info/order.png?v=3', + url:'/pages/user/order_list/order_list' + }, + { + name:'我的收藏', + img:'miniapp/js_img/goods_info/collect.png?v=3', + url:'/packageB/pages/user/collect_list/collect_list' + }, + // { + // name:'浏览足迹', + // img:'', + // url:'' + // }, + ] + }, + lifetimes:{ + attached:function(){ + //满屏顶部导航参数获取----------- + try { + let systemInfo = wx.getSystemInfoSync() + let mentButt = wx.getMenuButtonBoundingClientRect() + let nav_pb = mentButt.top - systemInfo.statusBarHeight + let navleft_pb = systemInfo.windowWidth - mentButt.right + + let user_no=''; + if(getApp().globalData.userInfo){ + user_no=getApp().globalData.userInfo.erpvipno + } + + this.setData({ + nav_h:mentButt.top, + mentButt_h:mentButt.height, + nav_left_w:mentButt.left, + navleft_pb, + nav_pb, + navleft_w:mentButt.width*0.9, + user_no + }) + } catch (e) { + console.error(e); + wx.showToast({ + title: '系统参数获取失败', + icon: 'none', + duration: 2000 + }) + // this.setData({ + // is_full_screen_navigation:false + // }) + // Do something when catch error + } + } + }, + /** + * 组件的方法列表 + */ + methods: { + nav_menu(e){ + let url=e.currentTarget.dataset.url + getApp().goto(url) + }, + show_menu_fn(){ + this.setData({ + show_menu:!this.data.show_menu + }) + }, + hide_menu_fn(){ + this.setData({ + show_menu:false + }) + }, + //分享 + fenx_fn(){ + this.triggerEvent('clickShare') + }, + call_back(){ + wx.navigateBack({ + delta:1, + fail:()=>{ + wx.reLaunch({ + url: '/pages/index/index/index', + }) + } + }) + }, + nav_search(){ + getApp().goto('/pages/goods/search/search') + } + } +}) diff --git a/components/diy_top_nav/diy_top_nav.json b/components/diy_top_nav/diy_top_nav.json new file mode 100644 index 0000000..e8cfaaf --- /dev/null +++ b/components/diy_top_nav/diy_top_nav.json @@ -0,0 +1,4 @@ +{ + "component": true, + "usingComponents": {} +} \ No newline at end of file diff --git a/components/diy_top_nav/diy_top_nav.wxml b/components/diy_top_nav/diy_top_nav.wxml new file mode 100644 index 0000000..05d9db0 --- /dev/null +++ b/components/diy_top_nav/diy_top_nav.wxml @@ -0,0 +1,69 @@ + + + + + + + + + + {{nav_title}} + + + + + + + + + {{nav_title}} + + + + + + + {{nav_title}} + + + + + + + ID:{{user_no}} + + + + + + + + + + + + + + + + + {{item.name}} + + + + + + + + 搜索更多商品 + + + + + + + + + 1212121 + + diff --git a/components/diy_top_nav/diy_top_nav.wxss b/components/diy_top_nav/diy_top_nav.wxss new file mode 100644 index 0000000..06adbca --- /dev/null +++ b/components/diy_top_nav/diy_top_nav.wxss @@ -0,0 +1,131 @@ +/* components/diy_top_nav/diy_top_nav.wxss */ +@import '../../app.wxss'; +.nav_left{ + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: space-between; +} +.nav_left_box{ + width: 48%; + align-items: center; + justify-content: center; + height: 100%; +} +.nav_right{ + flex: 1; +} +.navl_left{ + height: 100%; + background-color:rgba(255, 255, 255, .5); + border-radius:30rpx; + border: 1rpx solid rgba(227, 227, 227); + display: flex; + align-items: center; + justify-content: space-around; + padding: 0 4%; + box-sizing: border-box; +} + +.navl_minddle{ + height: 100%; + flex: 1; + background-color: bisque; + display: flex; + align-items: center; + vertical-align: middle; + /* justify-content: center; */ + border-radius: 30rpx; + background-color: rgb(242, 243, 245); + /* background-color: #898989; */ + font-size: 28rpx; + color: #898989; +} +.nav_search{ + display: flex; + align-items: center; + margin: 0 10rpx 0 20rpx; +} +.navl_right{ + background-color: #fff; + border-radius: 100%; + display: flex; + align-items: center; + justify-content: center; + border: 1rpx solid rgba(227, 227, 227); +} +.navl_left_b{ + width: 1rpx; + height: 65%; + background-color:rgb(227,227,227) ; +} +.we_chat{ + width: 45rpx; + height: 45rpx; +} +.nav_fh { + width: 18rpx; + height: 18rpx; + border-top: 2rpx solid #000; + border-right: 2rpx solid #000; + transform: rotateZ(-135deg); + display: inline-block; + margin-bottom: 3rpx; +} +.list_menu{ + position: absolute; + /* bottom: -10rpx; */ + /* top: -13rpx; */ + left: -35rpx; + /* width: 180rpx; */ + /* width: auto; */ + padding: 10rpx 26rpx; + /* height: 400rpx; */ + margin-top: 18rpx; + background-color: #fff; + /* background-color: rebeccapurple; */ + border-radius: 15rpx; + z-index: 9999999; +} +.list_menu_top{ + position: absolute; + top: -10rpx; + left: 50rpx; + width: 26rpx; + height: 26rpx; + /* background-color: rebeccapurple; */ + background-color: #fff; + transform: rotateZ(45deg); + display: inline-block; +} +.menu_item{ + display: flex; + align-items: center; + font-size: 26rpx; + white-space: nowrap; + /* padding: 20rpx; */ +} +.menu_item image{ + width: 36rpx; + height: 36rpx; + margin-right: 20rpx; +} +.call_back_box{ + width: 100rpx; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + position: absolute; + /* background-color: blueviolet; */ + left: 0; + bottom: 0; +} +.call_back_box .nav_fh{ + width: 20rpx; + height: 20rpx; +} + +.tb_con{ + position: absolute; bottom: 0; right: 24rpx; font-size: 18rpx;color: #333; +} \ No newline at end of file diff --git a/packageA/pages/goodsInfo/goodsInfo.js b/packageA/pages/goodsInfo/goodsInfo.js index 42c4b4b..bd7f826 100644 --- a/packageA/pages/goodsInfo/goodsInfo.js +++ b/packageA/pages/goodsInfo/goodsInfo.js @@ -212,9 +212,15 @@ Page({ hiddenCS: true, //控制客服操作菜单显示和控制 - openSpecModal_flash_normal: 0, - keyword:'', //门店搜索 - sec_i:-1,//选中分类门店 下标 + openSpecModal_flash_normal: 0, + keyword:'', //门店搜索 + sec_i:-1,//选中分类门店 下标 + + nav_frontColor: "#ffffff", + nav_backgroundColor: "#ffffff", + nav_type: 2, //导航类型 + istop: 0, //是否置顶风格为1 + searchbox_transparent: 1, }, //------初始化加载---------- diff --git a/packageA/pages/goodsInfo/goodsInfo.json b/packageA/pages/goodsInfo/goodsInfo.json index 95b96a3..5b20c87 100644 --- a/packageA/pages/goodsInfo/goodsInfo.json +++ b/packageA/pages/goodsInfo/goodsInfo.json @@ -6,7 +6,7 @@ "warn": "/components/long_warn/long_warn", "serviceCard_recommend": "/components/serviceCard_list/serviceCard_list", "privacy_pop": "/components/privacy_pop/privacy_pop", - "com_top_nav": "/components/com_top_nav/com_top_nav" + "top_nav": "/components/diy_top_nav/diy_top_nav" }, "navigationStyle": "custom" } \ No newline at end of file diff --git a/packageA/pages/goodsInfo/goodsInfo.wxml b/packageA/pages/goodsInfo/goodsInfo.wxml index c732b93..23f13df 100644 --- a/packageA/pages/goodsInfo/goodsInfo.wxml +++ b/packageA/pages/goodsInfo/goodsInfo.wxml @@ -2,16 +2,20 @@ - - - - + + - + + + + + + {{item.name}} diff --git a/packageA/pages/goodsInfo/goodsInfo.wxss b/packageA/pages/goodsInfo/goodsInfo.wxss index f844b12..2327e0d 100644 --- a/packageA/pages/goodsInfo/goodsInfo.wxss +++ b/packageA/pages/goodsInfo/goodsInfo.wxss @@ -2993,3 +2993,10 @@ button.custom-service::after{ padding-left: 30rpx; } +.type-navbar_box{ + position: fixed; + top: 0; + z-index: 999; + width: 100%; +} + diff --git a/packageA/pages/serviceCard_pd/goodsInfo/goodsInfo.js b/packageA/pages/serviceCard_pd/goodsInfo/goodsInfo.js index 3b04c80..899fbdb 100644 --- a/packageA/pages/serviceCard_pd/goodsInfo/goodsInfo.js +++ b/packageA/pages/serviceCard_pd/goodsInfo/goodsInfo.js @@ -197,6 +197,12 @@ Page({ user_order_pt_state: 0, is_retail_price: 0, + + nav_frontColor: "#ffffff", + nav_backgroundColor: "#ffffff", + nav_type: 2, //导航类型 + istop: 0, //是否置顶风格为1 + searchbox_transparent: 1, }, //------初始化加载---------- diff --git a/packageA/pages/serviceCard_pd/goodsInfo/goodsInfo.json b/packageA/pages/serviceCard_pd/goodsInfo/goodsInfo.json index bfe3050..d3599be 100644 --- a/packageA/pages/serviceCard_pd/goodsInfo/goodsInfo.json +++ b/packageA/pages/serviceCard_pd/goodsInfo/goodsInfo.json @@ -7,7 +7,7 @@ "serviceCard_recommend": "/components/serviceCard_list/serviceCard_list", "share": "/components/share/share", "privacy_pop": "/components/privacy_pop/privacy_pop", - "com_top_nav": "/components/com_top_nav/com_top_nav" + "top_nav": "/components/diy_top_nav/diy_top_nav" }, "navigationStyle": "custom" } \ No newline at end of file diff --git a/packageA/pages/serviceCard_pd/goodsInfo/goodsInfo.wxml b/packageA/pages/serviceCard_pd/goodsInfo/goodsInfo.wxml index 3f36a21..0478b0a 100644 --- a/packageA/pages/serviceCard_pd/goodsInfo/goodsInfo.wxml +++ b/packageA/pages/serviceCard_pd/goodsInfo/goodsInfo.wxml @@ -3,15 +3,21 @@ - - + + - + + + + + + {{item.name}} diff --git a/packageC/pages/luckyGo/luckyGo_goodsInfo/luckyGo_goodsInfo.js b/packageC/pages/luckyGo/luckyGo_goodsInfo/luckyGo_goodsInfo.js index 19e40d5..55558dc 100644 --- a/packageC/pages/luckyGo/luckyGo_goodsInfo/luckyGo_goodsInfo.js +++ b/packageC/pages/luckyGo/luckyGo_goodsInfo/luckyGo_goodsInfo.js @@ -286,12 +286,19 @@ Page({ canBuy: false, btnHidden: false, - hiddenCS: true, + hiddenCS: true, is_get_guide:0, keyword:'', //门店搜索 sec_i:-1,//选中分类门店 下标 goodInfo_ad:"",//商品详情广告 - adding:0 //避免重复点击 + adding:0, //避免重复点击 + + nav_frontColor: "#ffffff", + nav_backgroundColor: "#ffffff", + nav_type: 2, //导航类型 + istop: 0, //是否置顶风格为1 + searchbox_transparent: 1 + }, //------初始化加载---------- diff --git a/packageC/pages/luckyGo/luckyGo_goodsInfo/luckyGo_goodsInfo.json b/packageC/pages/luckyGo/luckyGo_goodsInfo/luckyGo_goodsInfo.json index fe3d7a7..8116953 100644 --- a/packageC/pages/luckyGo/luckyGo_goodsInfo/luckyGo_goodsInfo.json +++ b/packageC/pages/luckyGo/luckyGo_goodsInfo/luckyGo_goodsInfo.json @@ -7,7 +7,7 @@ "goods_recommend": "/components/goods_list/goods_list", "share": "/components/share/share", "privacy_pop": "/components/privacy_pop/privacy_pop", - "com_top_nav": "/components/com_top_nav/com_top_nav" + "top_nav": "/components/diy_top_nav/diy_top_nav" }, "navigationStyle": "custom" } \ No newline at end of file diff --git a/packageC/pages/luckyGo/luckyGo_goodsInfo/luckyGo_goodsInfo.wxml b/packageC/pages/luckyGo/luckyGo_goodsInfo/luckyGo_goodsInfo.wxml index 926618c..af99e3e 100644 --- a/packageC/pages/luckyGo/luckyGo_goodsInfo/luckyGo_goodsInfo.wxml +++ b/packageC/pages/luckyGo/luckyGo_goodsInfo/luckyGo_goodsInfo.wxml @@ -2,19 +2,25 @@ - - - + + + 规则 - - + + + + + + + {{item.name}} @@ -22,7 +28,6 @@ -