魔方导航

src/pages/toMini/index.vue

@@ -37,6 +37,13 @@
                     },
                     complete(res){
                         console.log(res,'------------------38')
+                        if (res.errMsg == 'navigateToMiniProgram:fail cancel') {
+                            // 点击了取消
+                            _this.loadFlag ++;
+                        } else if (res.errMsg == 'navigateToMiniProgram:ok') {
+                            // 点击了跳转
+                            wx.navigateBack();
+                        }
                     }
                 })
             }

src/pages/userInfo/index.vue

@@ -60,6 +60,7 @@
 
       <!-- 性别 -->
       <van-cell
+        v-if="!notSHOWROOMFlag"
         title="性别"
         @click="sex_show = true"
         :value="sex_list[userMsg.gender]"
@@ -68,7 +69,7 @@
       />
       <!-- <div class="covername sex">{{userMsg.gender}}</div> -->
       <!-- 设置生日 -->
-      <div @click="birthShow = true">
+      <div @click="birthShow = true" v-if="!notSHOWROOMFlag">
         <van-cell
           v-if="userMsg.birth"
           title="生日"
@@ -166,7 +167,10 @@ export default {
     },
     xhyxshopFlag() {
       return this.$store.state.mixid == "xhyxshop"
-    }
+    },
+    notSHOWROOMFlag() {
+      return this.$store.state.mixid == "notSHOWROOM"
+    },
   },
   onLoad() {
     console.log("onLoad-----------------");

static/nativeComponents/CubeNav/index.js

@@ -25,6 +25,8 @@ Component({
     navLeft: 0,
     cube2W: 0,
     cube3H: 0,
+    navListStyle: [],
+    isLoading: false,
   },
   ready() {
     this.init()
@@ -47,8 +49,11 @@ Component({
       this.setData({
         imgList: this.data.datas.componentData.imgList.filter(item => item.visible == undefined || item.visible == 1),
         getColumnWidth: columnWidthArr[this.data.datas.componentData.columnNum - 1],
-        getImgSize: (100 - this.data.datas.componentData.imgSize) / 2
+        getImgSize: (100 - this.data.datas.componentData.imgSize) / 2,
+        navListStyle: [this.navListStyleFun(0), this.navListStyleFun(1), this.navListStyleFun(2)],
+        isLoading: true,
       })
+      console.log(this.data.navListStyle,'----navListStyle')
 
       let arr = []
       let count = this.data.datas.componentData.columnNum * this.data.datas.componentData.rowNum;
@@ -147,6 +152,10 @@ Component({
         }
       }).exec()
     },
+    navListStyleFun(index) {
+      let item = this.data.datas.componentData.navList[index];
+      return `--t-font-size:${item.tFontSize*2}rpx;--t-color:${item.tColor};--t-weight:${item.tWeight?500:''};--sub-t-font-size:${item.subTFontSize*2}rpx;--sub-t-color:${item.subTColor};--sub-t-weight:${item.subTWeight?500:''};--figure-size:${item.figureSize}%;--figure-border-radius:${item.figureBorderRadius*2}rpx;background-image:url(${item.bgImg});--box-bg-color:${item.boxBgColor};`;
+    },
     touchmove(e) {
       let _this = this
       this.debounce(function() {

static/nativeComponents/CubeNav/index.wxml

 <!--static/nativeComponents/CubeNav/index.wxml-->
 <view style="overflow: hidden;">
-  <view class="cube-nav" style="margin-top:{{datas.componentData.verticalMargin * 2}}rpx;margin-bottom:{{datas.componentData.verticalMargin * 2}}rpx;margin-left:{{datas.componentData.levelMargin * 2}}rpx;margin-right:{{datas.componentData.levelMargin * 2}}rpx;border-radius:{{datas.componentData.moduleRadius * 2}}rpx">
+  <view wx:if="{{datas.componentData.styleType == 0}}" class="cube-nav" style="margin-top:{{datas.componentData.verticalMargin * 2}}rpx;margin-bottom:{{datas.componentData.verticalMargin * 2}}rpx;margin-left:{{datas.componentData.levelMargin * 2}}rpx;margin-right:{{datas.componentData.levelMargin * 2}}rpx;border-radius:{{datas.componentData.moduleRadius * 2}}rpx">
     <view class="cube1 clearfix" wx:if="{{datas.componentData.layoutType == 0}}" style="margin-left:{{-datas.componentData.singleVerticalMargin*2}}rpx;background-color:{{datas.componentData.backgroundColor || ''}};">
       <view class="cube-bg" wx:for="{{imgList}}" data-item="{{item}}" bindtap="onclickHandle" style="padding-left:{{datas.componentData.singleVerticalMargin*2}}rpx;width:{{getColumnWidth}};">
         <view class="cube-item" style="padding-top:{{datas.componentData.singleLevelMargin * 2}}rpx;padding-bottom:{{datas.componentData.singleLevelMargin * 2}}rpx;position:relative;background:{{datas.componentData.singleBackground}};border-radius:{{datas.componentData.singleRadius*2}}rpx;margin-top:{{datas.componentData.lineHeight*2}}rpx">
@@ -52,4 +52,35 @@
       </swiper>
     </view>
   </view>
+  <view wx:elif="{{datas.componentData.styleType == 1 && isLoading}}" class="navList" style="--box-border-radius: {{datas.componentData.boxBorderRadius * 2}}rpx;--box-margin-x: {{datas.componentData.boxMarginX*2}}rpx;--box-margin-y: {{datas.componentData.boxMarginY*2}}rpx;--box-bg-color: {{datas.componentData.boxBgColor}};--item-margin-y: {{datas.componentData.itemMarginY*2}}rpx;--item-margin: {{datas.componentData.itemMargin*2}}rpx;--item-padding: {{datas.componentData.itempaddingY*2}}rpx;--item-border-radius: {{datas.componentData.itemBorderRadius*2}}rpx;">
+    <view class="navList-left">
+      <view class="navList-item" style="{{navListStyle[0]}}" data-item="{{datas.componentData.navList[0]}}" bindtap="onclickHandle">
+        <view class="title">{{ datas.componentData.navList[0].title }}</view>
+          <view class="subTitle">{{ datas.componentData.navList[0].subTitle }}</view>
+          <view class="figure" wx:if="{{datas.componentData.navList[0].figure}}">
+            <image mode="widthFix" src="{{datas.componentData.navList[0].figure}}"/>
+          </view>
+      </view>
+    </view>
+    <view class="navList-right">
+      <view class="navList-right-top navList-item" style="{{navListStyle[1]}}" data-item="{{datas.componentData.navList[1]}}" bindtap="onclickHandle">
+        <view class="navList-right-top-left">
+          <view class="title">{{ datas.componentData.navList[1].title }}</view>
+          <view class="subTitle">{{ datas.componentData.navList[1].subTitle }}</view>
+        </view>
+        <view class="figure" wx:if="{{datas.componentData.navList[1].figure}}">
+          <image mode="widthFix" src="{{datas.componentData.navList[1].figure}}"/>
+        </view>
+      </view>
+      <view class="navList-right-bottom navList-item" style="{{navListStyle[2]}}" data-item="{{datas.componentData.navList[2]}}" bindtap="onclickHandle">
+        <view class="navList-right-top-left">
+          <view class="title">{{ datas.componentData.navList[2].title }}</view>
+          <view class="subTitle">{{ datas.componentData.navList[2].subTitle }}</view>
+        </view>
+        <view class="figure" wx:if="{{datas.componentData.navList[2].figure}}">
+          <image mode="widthFix" src="{{datas.componentData.navList[2].figure}}"/>
+        </view>
+      </view>
+    </view>
+  </view>
 </view>
\ No newline at end of file

static/nativeComponents/CubeNav/index.wxss

@@ -10,16 +10,18 @@
 .clearfix {
   zoom: 1;
 }
-.cube-nav{
+.cube-nav {
   box-sizing: border-box;
   font-size: 16rpx;
   overflow: hidden;
 }
-.cube-bg{
+.cube-bg {
   float: left;
   box-sizing: border-box;
 }
-.cube1,.cube2,.cube3{
+.cube1,
+.cube2,
+.cube3 {
   height: 100%;
   box-sizing: border-box;
   overflow: hidden;
@@ -29,18 +31,19 @@
   width: 100%;
   box-sizing: border-box;
 }
-.cube2 .cube-item,.cube3 .cube-item{
+.cube2 .cube-item,
+.cube3 .cube-item {
   width: 100%;
   float: left;
 }
-.cube-item .item-img{
+.cube-item .item-img {
   position: relative;
   overflow: hidden;
   width: 100%;
   height: 0;
   padding-bottom: 100%;
 }
-.cube-item .item-img image{
+.cube-item .item-img image {
   width: 100%;
   height: 100%;
   position: absolute;
@@ -73,7 +76,7 @@
   text-align: center;
   bottom: 8rpx;
 }
- .nav {
+.nav {
   width: 120rpx;
   height: 8rpx;
   border-radius: 4rpx;
@@ -81,13 +84,79 @@
   overflow: hidden;
   margin: 0 auto;
   background-color: #ccc;
-      
-    }
-    .inner-nav {
+}
+.inner-nav {
   width: 60rpx;
   height: 8rpx;
   border-radius: 4px;
   position: absolute;
   background-color: var(--main-color);
   top: 0;
-      }
+}
+.navList {
+  display: flex;
+  align-items: center;
+  border-radius: var(--box-border-radius);
+  overflow: hidden;
+  margin: var(--box-margin-y) var(--box-margin-x);
+  background: var(--box-bg-color);
+}
+.navList>view{
+  flex: 1;
+  box-sizing: border-box;
+  align-self: stretch;
+}
+.navList-item{
+  background-color: var(--box-bg-color);
+  background-size: cover;
+  background-position: center;
+  margin: var(--item-margin);
+  padding: var(--item-padding);
+  border-radius: var(--item-border-radius);
+  overflow: hidden;
+}
+.navList-item .title{
+  font-size: var(--t-font-size);
+  color: var(--t-color);
+  font-weight: var(--t-weight);
+}
+.navList-item .subTitle{
+  margin-top: 6px;
+  font-size: var(--sub-t-font-size);
+  color: var(--sub-t-color);
+  font-weight: var(--sub-t-weight);
+}
+.figure{
+  margin: 20px auto 0;
+  width: var(--figure-size);
+  overflow: hidden;
+}
+.figure image{
+  border-radius: var(--figure-border-radius);
+  width: 100%;
+}
+.navList-left{
+  margin-right: var(--item-margin-y);
+}
+.navList-left .navList-item{
+  margin-right: 0;
+}
+.navList-right{
+  display: flex;
+  flex-direction: column;
+}
+.navList-right .navList-right-bottom {
+  margin-top: 0;
+}
+.navList-right>view{
+  flex: 1;
+  display: flex;
+}
+.navList-right-top{
+}
+.navList-right-top-left{
+  flex-shrink: 0;
+  margin-right: 10px;
+}
+.navList-right-bottom{
+}
\ No newline at end of file