|
|
@@ -1,110 +1,135 @@
|
|
|
-<template>
|
|
|
- <view class='nav acea-row acea-row' :style="'background:'+bgColor[0].item+';margin:' +mbConfig+'rpx '+prConfig+'rpx 0;border-radius:'+bgStyle+'rpx;'" v-if="menus.length">
|
|
|
- <block v-if="rowStyle == 0">
|
|
|
- <scroll-view scroll-x="true" style="white-space: nowrap; display: flex" show-scrollbar="false">
|
|
|
- <view v-for="(item,index) in menus" :key="index" class='item' :style="'color:'+titleColor" @click="menusTap(item.info[1].value)">
|
|
|
- <view class='pictrue skeleton-rect'>
|
|
|
- <image :src='item.img' :style="'border-radius:'+menuStyle"></image>
|
|
|
- </view>
|
|
|
- <view class="menu-txt" :style="'color:'+titleColor">{{item.info[0].value}}</view>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- </block>
|
|
|
- <block v-else v-for="(item,index) in menus" :key="index">
|
|
|
- <view class='item' :style="'color:'+titleColor+';width:'+number" @click="menusTap(item.info[1].value)">
|
|
|
- <view class='pictrue skeleton-rect'>
|
|
|
- <image :src='item.img' :style="'border-radius:'+menuStyle"></image>
|
|
|
- </view>
|
|
|
- <view class="menu-txt" :style="'color:'+titleColor">{{item.info[0].value}}</view>
|
|
|
- </view>
|
|
|
- </block>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- import {merPath} from "@/utils/index"
|
|
|
-
|
|
|
- export default {
|
|
|
- name: 'menus',
|
|
|
- props: {
|
|
|
- dataConfig: {
|
|
|
- type: Object,
|
|
|
- default: () => {}
|
|
|
- },
|
|
|
- merId:{}
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- menus: this.dataConfig.menuConfig.list,
|
|
|
- bgColor: this.dataConfig.bgColor.color,
|
|
|
- menuStyle: this.dataConfig.menuStyle.type ? '50%' : 0,
|
|
|
- rowStyle: this.dataConfig.tabConfig.tabVal, //0单行1多行
|
|
|
- bgStyle: this.dataConfig.bgStyle.type ? '16' : '0',
|
|
|
- titleColor: this.dataConfig.titleColor.color[0].item,
|
|
|
- mbConfig: this.dataConfig.mbConfig.val*2,
|
|
|
- prConfig: this.dataConfig.prConfig.val*2,
|
|
|
- rowNum: this.dataConfig.rowsNum.type,//0两行,1三行,2四行
|
|
|
- number: this.dataConfig.number.type == 0 ? '33.33%' : this.dataConfig.number.type == 1 ? '25%' : '20%', //三个四个五个
|
|
|
- };
|
|
|
- },
|
|
|
- created() {},
|
|
|
- mounted() {},
|
|
|
- methods: {
|
|
|
- menusTap(url) {
|
|
|
- let data = this.$util.stringIntercept(url, 1, '\?');
|
|
|
- data = this.$util.stringIntercept(data, 1, '\=');
|
|
|
- uni.setStorageSync('storeIndex', data);
|
|
|
- url = merPath(url, this.merId)
|
|
|
-
|
|
|
- if(url.indexOf("http") != -1){
|
|
|
- // #ifdef H5
|
|
|
- location.href = url
|
|
|
- // #endif
|
|
|
- }else{
|
|
|
- if(['/pages/goods_cate/goods_cate','/pages/order_addcart/order_addcart','/pages/user/index'].indexOf(url) == -1){
|
|
|
- uni.navigateTo({
|
|
|
- url:url
|
|
|
- })
|
|
|
- }else{
|
|
|
- uni.switchTab({
|
|
|
- url:url
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss">
|
|
|
- .nav {
|
|
|
- padding: 30rpx 0;
|
|
|
- .item {
|
|
|
- width: 20%;
|
|
|
- text-align: center;
|
|
|
- font-size: 24rpx;
|
|
|
- display: inline-block;
|
|
|
- .pictrue {
|
|
|
- width: 82rpx;
|
|
|
- height: 82rpx;
|
|
|
- margin: 0 auto;
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
- .menu-txt {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #454545;
|
|
|
- margin-top: 15rpx;
|
|
|
- }
|
|
|
- &.four {
|
|
|
- width: 25%;
|
|
|
- .pictrue {
|
|
|
- width: 90rpx;
|
|
|
- height: 90rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+<template>
|
|
|
+ <view class='nav acea-row acea-row'
|
|
|
+ :style="'background:'+bgColor[0].item+';margin:' +mbConfig+'rpx '+prConfig+'rpx 0;border-radius:'+bgStyle+'rpx;'"
|
|
|
+ v-if="menus.length">
|
|
|
+ <block v-if="rowStyle == 0">
|
|
|
+ <scroll-view scroll-x="true" style="white-space: nowrap; display: flex" show-scrollbar="false">
|
|
|
+ <view v-for="(item,index) in menus" :key="index" class='item' :style="'color:'+titleColor"
|
|
|
+ @click="menusTap(item.info[1].value)">
|
|
|
+ <view class='pictrue skeleton-rect'>
|
|
|
+ <image :src='item.img' :style="'border-radius:'+menuStyle"></image>
|
|
|
+ </view>
|
|
|
+ <view class="menu-txt" :style="'color:'+titleColor">{{item.info[0].value}}</view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </block>
|
|
|
+ <block v-else v-for="(item,index) in menus" :key="index">
|
|
|
+ <view class='item' :style="'color:'+titleColor+';width:'+number" @click="menusTap(item.info[1].value)">
|
|
|
+ <view class='pictrue skeleton-rect'>
|
|
|
+ <image :src='item.img' :style="'border-radius:'+menuStyle"></image>
|
|
|
+ </view>
|
|
|
+ <view class="menu-txt" :style="'color:'+titleColor">{{item.info[0].value}}</view>
|
|
|
+ </view>
|
|
|
+ </block>
|
|
|
+ <!-- <web-view :src="weburl" v-if="weburl"></web-view> -->
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ merPath
|
|
|
+ } from "@/utils/index"
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: 'menus',
|
|
|
+ props: {
|
|
|
+ dataConfig: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {}
|
|
|
+ },
|
|
|
+ merId: {}
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ weburl: '',
|
|
|
+ menus: this.dataConfig.menuConfig.list,
|
|
|
+ bgColor: this.dataConfig.bgColor.color,
|
|
|
+ menuStyle: this.dataConfig.menuStyle.type ? '50%' : 0,
|
|
|
+ rowStyle: this.dataConfig.tabConfig.tabVal, //0单行1多行
|
|
|
+ bgStyle: this.dataConfig.bgStyle.type ? '16' : '0',
|
|
|
+ titleColor: this.dataConfig.titleColor.color[0].item,
|
|
|
+ mbConfig: this.dataConfig.mbConfig.val * 2,
|
|
|
+ prConfig: this.dataConfig.prConfig.val * 2,
|
|
|
+ rowNum: this.dataConfig.rowsNum.type, //0两行,1三行,2四行
|
|
|
+ number: this.dataConfig.number.type == 0 ? '33.33%' : this.dataConfig.number.type == 1 ? '25%' :
|
|
|
+ '20%', //三个四个五个
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {},
|
|
|
+ mounted() {},
|
|
|
+ methods: {
|
|
|
+ menusTap(url) {
|
|
|
+ let data = this.$util.stringIntercept(url, 1, '\?');
|
|
|
+ data = this.$util.stringIntercept(data, 1, '\=');
|
|
|
+ uni.setStorageSync('storeIndex', data);
|
|
|
+ url = merPath(url, this.merId)
|
|
|
+
|
|
|
+ if (url.indexOf("http") != -1) {
|
|
|
+ // #ifdef H5
|
|
|
+ location.href = url
|
|
|
+ // #endif
|
|
|
+ // #ifdef APP-PLUS
|
|
|
+ // this.weburl = url
|
|
|
+ plus.runtime.openURL(
|
|
|
+ url,
|
|
|
+ // 打开url失败,执行,如打开的是tabao://但是手机没安装,就会执行报错
|
|
|
+ function(err) {
|
|
|
+ console.log(err);
|
|
|
+ }
|
|
|
+ );
|
|
|
+ // #endif
|
|
|
+ } else {
|
|
|
+ if (['/pages/goods_cate/goods_cate', '/pages/order_addcart/order_addcart', '/pages/user/index']
|
|
|
+ .indexOf(url) == -1) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: url
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ uni.switchTab({
|
|
|
+ url: url
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .nav {
|
|
|
+ padding: 30rpx 0;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ width: 20%;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 24rpx;
|
|
|
+ display: inline-block;
|
|
|
+
|
|
|
+ .pictrue {
|
|
|
+ width: 82rpx;
|
|
|
+ height: 82rpx;
|
|
|
+ margin: 0 auto;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu-txt {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #454545;
|
|
|
+ margin-top: 15rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.four {
|
|
|
+ width: 25%;
|
|
|
+
|
|
|
+ .pictrue {
|
|
|
+ width: 90rpx;
|
|
|
+ height: 90rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|