Skip to content

M
mayi-mp-shop
Commit 88d83bcc by 李嘉林
Options

魔方导航

parent dfe6e753
Showing with 162 additions and 40 deletions
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
/* static/nativeComponents/CubeNav/index.wxss */
.clearfix:after {
display: block;
clear: both;
content: "";
visibility: hidden;
height: 0;
display: block;
clear: both;
content: "";
visibility: hidden;
height: 0;
}
.clearfix {
zoom: 1;
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;
......@@ -64,30 +67,96 @@
white-space: nowrap;
}
.cube2::-webkit-scrollbar {
display: none;
display: none;
}
.nav-wrap {
width: 100%;
position: absolute;
text-align: center;
bottom: 8rpx;
}
.nav {
width: 120rpx;
height: 8rpx;
border-radius: 4rpx;
position: relative;
overflow: hidden;
margin: 0 auto;
background-color: #ccc;
}
.inner-nav {
width: 60rpx;
height: 8rpx;
border-radius: 4px;
position: absolute;
background-color: var(--main-color);
top: 0;
}
width: 100%;
position: absolute;
text-align: center;
bottom: 8rpx;
}
.nav {
width: 120rpx;
height: 8rpx;
border-radius: 4rpx;
position: relative;
overflow: hidden;
margin: 0 auto;
background-color: #ccc;
}
.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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment