Skip to content

U
user
Commit c38bcaf5 by zhangcheng
Options

调整首页

parent 0af5f384
Showing with 1134 additions and 1148 deletions
components/tabBar/tabBar.vue 0 → 100644
<template>
<!-- Tab -->
<u-tabbar v-model="selectedTabbar" :border="false" inactive-color="#000000" active-color="#006ECF" :fixed="true" :safeAreaInsetBottom="true" @change="beforeSwitch">
<u-tabbar-item v-for="(item,index) in list" :key="item.text" :text="item.text" :icon="selectedTabbar==index?item.activeIcon:item.icon"></u-tabbar-item>
</u-tabbar>
</template>
<script>
export default {
data() {
return{
}
},
props:['selectedTabbar'],
computed:{
list(){
// tabbar List
return this.$store.state.list;
}
},
methods:{
//点击tab
beforeSwitch(index) {
uni.switchTab({url:this.list[index].pagePath});
return true;
}
}
}
</script>
<style>
</style>
\ No newline at end of file
manifest.json
......@@ -50,7 +50,12 @@
"quickapp" : {},
/* 小程序特有相关 */
"mp-weixin" : {
"appid" : "wxdb0df0ee46a184be",
"appid" : "wx71aa3662dfd3227d",
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
},
"setting" : {
"urlCheck" : false,
"es6" : false,
......
pages/menu/menu.json 0 → 100644
{
"images": {
"left": [
"http://baidu.com",
"http://baidu.com"
],
"right": [
{
"code": 1,
"url": "http://baidu.com"
},
{
"code": 1,
"url": "http://baidu.com"
},
{
"code": 1,
"url": "http://baidu.com"
},
{
"code": 1,
"url": "http://baidu.com"
}
]
},
"tips": "http://baidu.com",
"countOfOrder": 9,
"categorys": [
{
"id": 1,
"name": "今日特惠",
"goods": [
{
"goodId": 100,
"name": "冰茶咖啡",
"price": 29.9,
"discount": 19.9,
"pics": {
"thumbnail": "http://baidu.com",
"introImages": [
"http://baidu.com",
"http://baidu.com",
"http://baidu.com"
],
"detailImages": [
"http://baidu.com",
"http://baidu.com",
"http://baidu.com"
]
},
"desc": "比利时进口巧克力也挺丝滑",
"remark": "",
"tags": [
"YYDS",
"杨幂同款"
],
"specs": [
{
"specId": 1,
"specName": "温度",
"rules": [
{
"ruleId": 1,
"ruleName": "常温",
"price": 0
},
{
"ruleId": 2,
"ruleName": "加冰",
"price": 2
},
{
"ruleId": 3,
"ruleName": "加热",
"price": 3
}
]
},
{
"specId": 2,
"specName": "糖度",
"rules": [
{
"ruleId": 4,
"ruleName": "无糖",
"price": 0
},
{
"ruleId": 5,
"ruleName": "少糖",
"price": 1
},
{
"ruleId": 6,
"ruleName": "多糖",
"price": 2
}
]
}
],
"skus": [
{
"skuId": 1,
"state": 1,
"rules": [
{
"specId": 1,
"specName": "温度",
"ruleId": 1,
"ruleName": "常温",
"price": 0.00
},
{
"specId": 2,
"specName": "糖度",
"ruleId": 3,
"ruleName": "无糖",
"price": 0.00
}
]
},
{
"skuId": 1,
"state": 1,
"rules": [
{
"specId": 1,
"specName": "温度",
"ruleId": 2,
"ruleName": "冰",
"price": 2.00
},
{
"specId": 2,
"specName": "糖度",
"ruleId": 3,
"ruleName": "无糖",
"price": 0.00
}
]
},
{
"skuId": 1,
"state": 1,
"rules": [
{
"specId": 1,
"specName": "温度",
"ruleId": 1,
"ruleName": "常温",
"price": 0.00
},
{
"specId": 2,
"specName": "糖度",
"ruleId": 3,
"ruleName": "加糖",
"price": 2.00
}
]
},
{
"skuId": 1,
"state": 1,
"rules": [
{
"specId": 1,
"specName": "温度",
"ruleId": 1,
"ruleName": "冰",
"price": 2.00
},
{
"specId": 2,
"specName": "糖度",
"ruleId": 3,
"ruleName": "加糖",
"price": 4.00
}
]
}
]
}
]
},
{
"id": 2,
"name": "今日特惠2",
"goods": [
{
"goodId": 100,
"name": "冰茶咖啡2",
"price": 29.9,
"discount": 19.9,
"pics": {
"thumbnail": "http://baidu.com",
"introImages": [
"http://baidu.com",
"http://baidu.com",
"http://baidu.com"
],
"detailImages": [
"http://baidu.com",
"http://baidu.com",
"http://baidu.com"
]
},
"desc": "比利时进口巧克力也挺丝滑",
"remark": "",
"tags": [
"YYDS",
"杨幂同款"
],
"specs": [
{
"specId": 1,
"specName": "温度",
"rules": [
{
"ruleId": 1,
"ruleName": "常温",
"price": 0
},
{
"ruleId": 2,
"ruleName": "加冰",
"price": 2
},
{
"ruleId": 3,
"ruleName": "加热",
"price": 3
}
]
},
{
"specId": 2,
"specName": "糖度",
"rules": [
{
"ruleId": 4,
"ruleName": "无糖",
"price": 0
},
{
"ruleId": 5,
"ruleName": "少糖",
"price": 1
},
{
"ruleId": 6,
"ruleName": "多糖",
"price": 2
}
]
}
],
"skus": [
{
"skuId": 1,
"state": 1,
"rules": [
{
"specId": 1,
"specName": "温度",
"ruleId": 1,
"ruleName": "常温",
"price": 0.00
},
{
"specId": 2,
"specName": "糖度",
"ruleId": 3,
"ruleName": "无糖",
"price": 0.00
}
]
},
{
"skuId": 1,
"state": 1,
"rules": [
{
"specId": 1,
"specName": "温度",
"ruleId": 2,
"ruleName": "冰",
"price": 2.00
},
{
"specId": 2,
"specName": "糖度",
"ruleId": 3,
"ruleName": "无糖",
"price": 0.00
}
]
},
{
"skuId": 1,
"state": 1,
"rules": [
{
"specId": 1,
"specName": "温度",
"ruleId": 1,
"ruleName": "常温",
"price": 0.00
},
{
"specId": 2,
"specName": "糖度",
"ruleId": 3,
"ruleName": "加糖",
"price": 2.00
}
]
},
{
"skuId": 1,
"state": 1,
"rules": [
{
"specId": 1,
"specName": "温度",
"ruleId": 1,
"ruleName": "冰",
"price": 2.00
},
{
"specId": 2,
"specName": "糖度",
"ruleId": 3,
"ruleName": "加糖",
"price": 4.00
}
]
}
]
}
]
},
{
"id": 3,
"name": "今日特惠3",
"goods": [
{
"goodId": 100,
"name": "冰茶咖啡3",
"price": 29.9,
"discount": 19.9,
"pics": {
"thumbnail": "http://baidu.com",
"introImages": [
"http://baidu.com",
"http://baidu.com",
"http://baidu.com"
],
"detailImages": [
"http://baidu.com",
"http://baidu.com",
"http://baidu.com"
]
},
"desc": "比利时进口巧克力也挺丝滑",
"remark": "",
"tags": [
"YYDS",
"杨幂同款"
],
"specs": [
{
"specId": 1,
"specName": "温度",
"rules": [
{
"ruleId": 1,
"ruleName": "常温",
"price": 0
},
{
"ruleId": 2,
"ruleName": "加冰",
"price": 2
},
{
"ruleId": 3,
"ruleName": "加热",
"price": 3
}
]
},
{
"specId": 2,
"specName": "糖度",
"rules": [
{
"ruleId": 4,
"ruleName": "无糖",
"price": 0
},
{
"ruleId": 5,
"ruleName": "少糖",
"price": 1
},
{
"ruleId": 6,
"ruleName": "多糖",
"price": 2
}
]
}
],
"skus": [
{
"skuId": 1,
"state": 1,
"rules": [
{
"specId": 1,
"specName": "温度",
"ruleId": 1,
"ruleName": "常温",
"price": 0.00
},
{
"specId": 2,
"specName": "糖度",
"ruleId": 3,
"ruleName": "无糖",
"price": 0.00
}
]
},
{
"skuId": 1,
"state": 1,
"rules": [
{
"specId": 1,
"specName": "温度",
"ruleId": 2,
"ruleName": "冰",
"price": 2.00
},
{
"specId": 2,
"specName": "糖度",
"ruleId": 3,
"ruleName": "无糖",
"price": 0.00
}
]
},
{
"skuId": 1,
"state": 1,
"rules": [
{
"specId": 1,
"specName": "温度",
"ruleId": 1,
"ruleName": "常温",
"price": 0.00
},
{
"specId": 2,
"specName": "糖度",
"ruleId": 3,
"ruleName": "加糖",
"price": 2.00
}
]
},
{
"skuId": 1,
"state": 1,
"rules": [
{
"specId": 1,
"specName": "温度",
"ruleId": 1,
"ruleName": "冰",
"price": 2.00
},
{
"specId": 2,
"specName": "糖度",
"ruleId": 3,
"ruleName": "加糖",
"price": 4.00
}
]
}
]
}
]
},
{
"id": 4,
"name": "今日特惠4",
"goods": [
{
"goodId": 100,
"name": "冰茶咖啡4",
"price": 29.9,
"discount": 19.9,
"pics": {
"thumbnail": "http://baidu.com",
"introImages": [
"http://baidu.com",
"http://baidu.com",
"http://baidu.com"
],
"detailImages": [
"http://baidu.com",
"http://baidu.com",
"http://baidu.com"
]
},
"desc": "比利时进口巧克力也挺丝滑",
"remark": "",
"tags": [
"YYDS",
"杨幂同款"
],
"specs": [
{
"specId": 1,
"specName": "温度",
"rules": [
{
"ruleId": 1,
"ruleName": "常温",
"price": 0
},
{
"ruleId": 2,
"ruleName": "加冰",
"price": 2
},
{
"ruleId": 3,
"ruleName": "加热",
"price": 3
}
]
},
{
"specId": 2,
"specName": "糖度",
"rules": [
{
"ruleId": 4,
"ruleName": "无糖",
"price": 0
},
{
"ruleId": 5,
"ruleName": "少糖",
"price": 1
},
{
"ruleId": 6,
"ruleName": "多糖",
"price": 2
}
]
}
],
"skus": [
{
"skuId": 1,
"state": 1,
"rules": [
{
"specId": 1,
"specName": "温度",
"ruleId": 1,
"ruleName": "常温",
"price": 0.00
},
{
"specId": 2,
"specName": "糖度",
"ruleId": 3,
"ruleName": "无糖",
"price": 0.00
}
]
},
{
"skuId": 1,
"state": 1,
"rules": [
{
"specId": 1,
"specName": "温度",
"ruleId": 2,
"ruleName": "冰",
"price": 2.00
},
{
"specId": 2,
"specName": "糖度",
"ruleId": 3,
"ruleName": "无糖",
"price": 0.00
}
]
},
{
"skuId": 1,
"state": 1,
"rules": [
{
"specId": 1,
"specName": "温度",
"ruleId": 1,
"ruleName": "常温",
"price": 0.00
},
{
"specId": 2,
"specName": "糖度",
"ruleId": 3,
"ruleName": "加糖",
"price": 2.00
}
]
},
{
"skuId": 1,
"state": 1,
"rules": [
{
"specId": 1,
"specName": "温度",
"ruleId": 1,
"ruleName": "冰",
"price": 2.00
},
{
"specId": 2,
"specName": "糖度",
"ruleId": 3,
"ruleName": "加糖",
"price": 4.00
}
]
}
]
}
]
}
],
"recommends": [
{
"goodsName": "推荐名称",
"pic": "http://baidu.com",
"desc": "推荐描述",
"goods": [
{
"goodId": 100,
"name": "冰茶咖啡",
"price": 29.9,
"discount": 19.9,
"pics": {
"thumbnail": "http://baidu.com",
"introImages": [
"http://baidu.com",
"http://baidu.com",
"http://baidu.com"
],
"detailImages": [
"http://baidu.com",
"http://baidu.com",
"http://baidu.com"
]
},
"desc": "比利时进口巧克力也挺丝滑",
"remark": "",
"tags": [
"YYDS",
"杨幂同款"
],
"specs": [
{
"specId": 1,
"specName": "温度",
"rules": [
{
"ruleId": 1,
"ruleName": "常温",
"price": 0
},
{
"ruleId": 2,
"ruleName": "加冰",
"price": 2
},
{
"ruleId": 3,
"ruleName": "加热",
"price": 3
}
]
}
],
"skus": [
{
"skuId": 1,
"state": 1,
"rules": [
{
"specId": 1,
"specName": "温度",
"ruleId": 1,
"ruleName": "常温",
"price": 0.00
},
{
"specId": 2,
"specName": "糖度",
"ruleId": 3,
"ruleName": "无糖",
"price": 0.00
}
]
}
]
}
]
}
]
}
\ No newline at end of file
pages/menu/menu.vue
<template>
<view class="menu-box">
<!-- height:`${height}px`, -->
<view class="menu-banner"><image src="../../static/imgs/banner.png"></image></view>
<view class="page-body" :style="{height:`${height-bannerh}px`}">
<view class="menu-box" :style="{height:`${height}px`}">
<view class="menu-banner">
<image src="../../static/imgs/banner.png"></image>
<view class="login-area">
<view class="avatar"><image :src="'../../static/logo.png'"></image></view>
<view class="user-info">
<view class="user-name">HI！小黑山羊</view>
<view class="dialog">
<view class="content">希望你今天，明天，天天都开心~</view>
<view class="arrow">></view>
</view>
</view>
<view></view>
</view>
</view>
<view class="order-banner" v-if="buied">
<view class="info">
<view class="first">取单码：Mon999</view>
<view class="second">请您耐心等候，剩余等候时间<text class="time">3</text>分钟</view>
</view>
<view class="line"></view>
<view class="barCode-box">
<view class="barCode"><image :src="'../../static/logo.png'"></image></view>
<view class="barCode-dis">点击二维码取单</view>
</view>
</view>
<view class="page-body" >
<!-- <u-button @click="uniGetUserInfo">按钮授权</u-button> -->
<scroll-view class="nav-left" scroll-y :style="{height:`${height-bannerh}px`}" :scroll-top="scrollLeftTop" scroll-with-animation>
<view class="nav-left-item" @click="categoryClickMain(index)" :key="index" :class="index == categoryActive ? 'active' : ''" v-for="(item, index) in classifyData">
{{ item.name }}
<view :class="index == categoryActive ? 'active-line' : ''"></view>
</view>
</scroll-view>
<scroll-view
class="nav-right"
......@@ -17,1121 +42,56 @@
:style="{height:`${height-bannerh}px`}"
scroll-with-animation
>
<view v-for="(foods, index) in classifyData" :key="index" class="box">
<view>{{foods.name}}</view>
<view :id="i == 0 ? 'first' : ''" class="nav-right-item" v-for="(item, i) in foods.foods" :key="i" @click="cart(item.name)">
<!-- <image src="../../static/logo.png" /> -->
<view>{{ item.name }}</view>
<view v-for="(category, index) in classifyData" :key="index" class="box">
<view class="right-title">{{category.name}}</view>
<view class="nav-right-item" v-for="(item, i) in category.goods" :key="item.goodId" @click="cart(item.name)">
<image class="thumbnail" :src="'../../static/logo.png'" />
<view class="info">
<view class="goods-name">{{ item.name }}</view>
<view class="tags">
<view class="tag-item" v-for="tag in item.tags" :key="tag">{{tag}}</view>
</view>
<view class="dis-box">
<view class="dis">{{item.desc}}</view>
<view class="add-btn">+</view>
</view>
<view class="mon">
<view class="discount">￥{{item.discount}}</view>
<view class="price">￥<text class="num">{{item.price}}</text></view>
</view>
</view>
</view>
</view>
</scroll-view>
<!-- Tab -->
<u-tabbar v-model="selectedTabbar" :border="false" inactive-color="#000000" active-color="#006ECF" :fixed="true" :safeAreaInsetBottom="true" @change="beforeSwitch">
<u-tabbar-item v-for="(item,index) in list" :key="item.text" :text="item.text" :icon="selectedTabbar==index?item.activeIcon:item.icon"></u-tabbar-item>
</u-tabbar>
<tabBar :selectedTabbar="selectedTabbar"></tabBar>
</view>
</view>
</template>
<script>
import menuInfo from './menu.json'
export default {
data() {
return {
bannerh:0,
buied:true,//是否已经下单产生取单码
orderBannerh:0,//取单码区域的高度
bannerh:0,//头部banner区域的高度
name: 'wkiwi',
height: 0,
categoryActive: 0,
scrollTop: 0,
scrollLeftTop: 0,
// scrollHeight: 0,
classifyData: [{
"name": "女装",
"foods": [{
"name": "A字裙",
"key": "A字裙",
"icon": "http://img.kiwifruits.cn/classify/1/1.jpg",
"cat": 10
},
{
"name": "T恤",
"key": "T恤",
"icon": "http://img.kiwifruits.cn/classify/1/2.jpg",
"cat": 10
},
{
"name": "半身裙",
"key": "半身裙",
"icon": "http://img.kiwifruits.cn/classify/1/3.jpg",
"cat": 10
},
{
"name": "衬衫",
"key": "衬衫",
"icon": "http://img.kiwifruits.cn/classify/1/4.jpg",
"cat": 10
},
{
"name": "短裙",
"key": "短裙",
"icon": "http://img.kiwifruits.cn/classify/1/5.jpg",
"cat": 10
},
{
"name": "阔腿裤",
"key": "阔腿裤",
"icon": "http://img.kiwifruits.cn/classify/1/6.jpg",
"cat": 10
},
{
"name": "连衣裙",
"key": "连衣裙",
"icon": "http://img.kiwifruits.cn/classify/1/7.jpg",
"cat": 10
},
{
"name": "妈妈装",
"key": "妈妈装",
"icon": "http://img.kiwifruits.cn/classify/1/8.jpg",
"cat": 10
},
{
"name": "牛仔裤",
"key": "牛仔裤",
"icon": "http://img.kiwifruits.cn/classify/1/9.jpg",
"cat": 10
},
{
"name": "情侣装",
"key": "情侣装",
"icon": "http://img.kiwifruits.cn/classify/1/10.jpg",
"cat": 10
},
{
"name": "休闲裤",
"key": "休闲裤",
"icon": "http://img.kiwifruits.cn/classify/1/11.jpg",
"cat": 10
},
{
"name": "雪纺衫",
"key": "雪纺衫",
"icon": "http://img.kiwifruits.cn/classify/1/12.jpg",
"cat": 10
},
{
"name": "防晒衣",
"key": "防晒衣",
"icon": "http://img.kiwifruits.cn/classify/1/13.jpg",
"cat": 10
},
{
"name": "礼服/婚纱",
"key": "礼服婚纱",
"icon": "http://img.kiwifruits.cn/classify/1/14.jpg",
"cat": 10
}
]
},
{
"name": "美食",
"foods": [{
"name": "火锅",
"key": "火锅",
"icon": "http://img.kiwifruits.cn/classify/2/1.jpg",
"cat": 6
},
{
"name": "糕点饼干",
"key": "糕点饼干",
"icon": "http://img.kiwifruits.cn/classify/2/2.jpg",
"cat": 6
},
{
"name": "坚果果干",
"key": "坚果果干",
"icon": "http://img.kiwifruits.cn/classify/2/3.jpg",
"cat": 6
},
{
"name": "酒类",
"key": "酒类",
"icon": "http://img.kiwifruits.cn/classify/2/4.jpg",
"cat": 6
},
{
"name": "辣条",
"key": "辣条",
"icon": "http://img.kiwifruits.cn/classify/2/5.jpg",
"cat": 6
},
{
"name": "大礼包",
"key": "大礼包",
"icon": "http://img.kiwifruits.cn/classify/2/6.jpg",
"cat": 6
},
{
"name": "精品茗茶",
"key": "茶",
"icon": "http://img.kiwifruits.cn/classify/2/7.jpg",
"cat": 6
},
{
"name": "休闲食品",
"key": "休闲食品",
"icon": "http://img.kiwifruits.cn/classify/2/8.jpg",
"cat": 6
},
{
"name": "糖果巧克力",
"key": "糖果巧克力",
"icon": "http://img.kiwifruits.cn/classify/2/9.jpg",
"cat": 6
},
{
"name": "方便速食",
"key": "方便速食",
"icon": "http://img.kiwifruits.cn/classify/2/10.jpg",
"cat": 6
},
{
"name": "营养代餐",
"key": "营养代餐",
"icon": "http://img.kiwifruits.cn/classify/2/11.jpg",
"cat": 6
},
{
"name": "粮油副食",
"key": "粮油",
"icon": "http://img.kiwifruits.cn/classify/2/12.jpg",
"cat": 6
},
{
"name": "生鲜水果",
"key": "水果",
"icon": "http://img.kiwifruits.cn/classify/2/13.jpg",
"cat": 6
},
{
"name": "饮品",
"key": "饮品",
"icon": "http://img.kiwifruits.cn/classify/2/14.jpg",
"cat": 6
}
]
},
{
"name": "美妆",
"foods": [{
"name": "化妆刷",
"key": "化妆刷",
"icon": "http://img.kiwifruits.cn/classify/3/1.jpg",
"cat": 3
},
{
"name": "粉底",
"key": "粉底",
"icon": "http://img.kiwifruits.cn/classify/3/2.jpg",
"cat": 3
},
{
"name": "洗发护发",
"key": "洗发护发",
"icon": "http://img.kiwifruits.cn/classify/3/3.jpg",
"cat": 3
},
{
"name": "美容工具",
"key": "美容工具",
"icon": "http://img.kiwifruits.cn/classify/3/4.jpg",
"cat": 3
},
{
"name": "眼部护理",
"key": "眼部护理",
"icon": "http://img.kiwifruits.cn/classify/3/5.jpg",
"cat": 3
},
{
"name": "眉妆",
"key": "眉妆",
"icon": "http://img.kiwifruits.cn/classify/3/6.jpg",
"cat": 3
},
{
"name": "卸妆品",
"key": "卸妆品",
"icon": "http://img.kiwifruits.cn/classify/3/7.jpg",
"cat": 3
},
{
"name": "基础护肤",
"key": "基础护肤",
"icon": "http://img.kiwifruits.cn/classify/3/8.jpg",
"cat": 3
},
{
"name": "眼妆",
"key": "眼妆",
"icon": "http://img.kiwifruits.cn/classify/3/9.jpg",
"cat": 3
},
{
"name": "唇妆",
"key": "唇妆",
"icon": "http://img.kiwifruits.cn/classify/3/10.jpg",
"cat": 3
},
{
"name": "面膜",
"key": "面膜",
"icon": "http://img.kiwifruits.cn/classify/3/11.jpg",
"cat": 3
},
{
"name": "沐浴用品",
"key": "沐浴用品",
"icon": "http://img.kiwifruits.cn/classify/3/12.jpg",
"cat": 3
},
{
"name": "护肤套装",
"key": "护肤套装",
"icon": "http://img.kiwifruits.cn/classify/3/13.jpg",
"cat": 3
},
{
"name": "防晒品",
"key": "防晒品",
"icon": "http://img.kiwifruits.cn/classify/3/14.jpg",
"cat": 3
},
{
"name": "美甲",
"key": "美甲",
"icon": "http://img.kiwifruits.cn/classify/3/15.jpg",
"cat": 3
}
]
},
{
"name": "居家日用",
"foods": [{
"name": "垃圾袋",
"key": "垃圾袋",
"icon": "http://img.kiwifruits.cn/classify/4/1.jpg",
"cat": 4
},
{
"name": "纸巾",
"key": "纸巾",
"icon": "http://img.kiwifruits.cn/classify/4/2.jpg",
"cat": 4
},
{
"name": "驱蚊用品",
"key": "驱蚊用品",
"icon": "http://img.kiwifruits.cn/classify/4/3.jpg",
"cat": 4
},
{
"name": "收纳神器",
"key": "收纳神器",
"icon": "http://img.kiwifruits.cn/classify/4/4.jpg",
"cat": 4
},
{
"name": "厨房用品",
"key": "厨房用品",
"icon": "http://img.kiwifruits.cn/classify/4/5.jpg",
"cat": 4
},
{
"name": "厨房烹饪",
"key": "烹饪",
"icon": "http://img.kiwifruits.cn/classify/4/6.jpg",
"cat": 4
},
{
"name": "衣物晾晒",
"key": "衣物晾晒",
"icon": "http://img.kiwifruits.cn/classify/4/7.jpg",
"cat": 4
},
{
"name": "衣物护理",
"key": "衣物护理",
"icon": "http://img.kiwifruits.cn/classify/4/8.jpg",
"cat": 4
},
{
"name": "宠物用品",
"key": "宠物用品",
"icon": "http://img.kiwifruits.cn/classify/4/9.jpg",
"cat": 4
},
{
"name": "医药保健",
"key": "医药",
"icon": "http://img.kiwifruits.cn/classify/4/10.jpg",
"cat": 4
},
{
"name": "日用百货",
"key": "百货",
"icon": "http://img.kiwifruits.cn/classify/4/11.jpg",
"cat": 4
},
{
"name": "清洁用品",
"key": "清洁",
"icon": "http://img.kiwifruits.cn/classify/4/12.jpg",
"cat": 4
},
{
"name": "绿植园艺",
"key": "绿植",
"icon": "http://img.kiwifruits.cn/classify/4/13.jpg",
"cat": 4
}
]
},
{
"name": "男装",
"foods": [{
"name": "爸爸装",
"key": "爸爸装",
"icon": "http://img.kiwifruits.cn/classify/5/1.jpg",
"cat": 12
},
{
"name": "牛仔裤",
"key": "牛仔裤",
"icon": "http://img.kiwifruits.cn/classify/5/2.jpg",
"cat": 12
},
{
"name": "衬衫",
"key": "衬衫",
"icon": "http://img.kiwifruits.cn/classify/5/3.jpg",
"cat": 12
},
{
"name": "休闲裤",
"key": "休闲裤",
"icon": "http://img.kiwifruits.cn/classify/5/4.jpg",
"cat": 12
},
{
"name": "外套",
"key": "外套",
"icon": "http://img.kiwifruits.cn/classify/5/5.jpg",
"cat": 12
},
{
"name": "T恤",
"key": "T恤",
"icon": "http://img.kiwifruits.cn/classify/5/6.jpg",
"cat": 12
},
{
"name": "套装",
"key": "套装",
"icon": "http://img.kiwifruits.cn/classify/5/7.jpg",
"cat": 12
},
{
"name": "运动裤",
"key": "运动裤",
"icon": "http://img.kiwifruits.cn/classify/5/8.jpg",
"cat": 12
},
{
"name": "马甲/背心",
"key": "马甲背心",
"icon": "http://img.kiwifruits.cn/classify/5/9.jpg",
"cat": 12
},
{
"name": "POLO衫",
"key": "POLO衫",
"icon": "http://img.kiwifruits.cn/classify/5/10.jpg",
"cat": 12
},
{
"name": "商务装",
"key": "商务装",
"icon": "http://img.kiwifruits.cn/classify/5/11.jpg",
"cat": 12
}
]
},
{
"name": "鞋品",
"foods": [{
"name": "单鞋",
"key": "单鞋",
"icon": "http://img.kiwifruits.cn/classify/6/1.jpg",
"cat": 5
},
{
"name": "皮鞋",
"key": "皮鞋",
"icon": "http://img.kiwifruits.cn/classify/6/2.jpg",
"cat": 5
},
{
"name": "帆布鞋",
"key": "帆布鞋",
"icon": "http://img.kiwifruits.cn/classify/6/3.jpg",
"cat": 5
},
{
"name": "北京老布鞋",
"key": "北京老布鞋",
"icon": "http://img.kiwifruits.cn/classify/6/4.jpg",
"cat": 5
},
{
"name": "运动鞋",
"key": "运动鞋",
"icon": "http://img.kiwifruits.cn/classify/6/5.jpg",
"cat": 5
},
{
"name": "拖鞋",
"key": "拖鞋",
"icon": "http://img.kiwifruits.cn/classify/6/6.jpg",
"cat": 5
},
{
"name": "凉鞋",
"key": "凉鞋",
"icon": "http://img.kiwifruits.cn/classify/6/7.jpg",
"cat": 5
},
{
"name": "休闲鞋",
"key": "休闲鞋",
"icon": "http://img.kiwifruits.cn/classify/6/8.jpg",
"cat": 5
},
{
"name": "高跟鞋",
"key": "高跟鞋",
"icon": "http://img.kiwifruits.cn/classify/6/9.jpg",
"cat": 5
},
{
"name": "老人鞋",
"key": "老人鞋",
"icon": "http://img.kiwifruits.cn/classify/6/10.jpg",
"cat": 5
},
{
"name": "懒人鞋",
"key": "懒人鞋",
"icon": "http://img.kiwifruits.cn/classify/6/11.jpg",
"cat": 5
}
]
},
{
"name": "数码家电",
"foods": [{
"name": "数据线",
"key": "数据线",
"icon": "http://img.kiwifruits.cn/classify/7/1.jpg",
"cat": 8
},
{
"name": "耳机",
"key": "耳机",
"icon": "http://img.kiwifruits.cn/classify/7/2.jpg",
"cat": 8
},
{
"name": "生活家电",
"key": "家电",
"icon": "http://img.kiwifruits.cn/classify/7/3.jpg",
"cat": 8
},
{
"name": "电风扇",
"key": "电风扇",
"icon": "http://img.kiwifruits.cn/classify/7/4.jpg",
"cat": 8
},
{
"name": "电吹风",
"key": "电吹风",
"icon": "http://img.kiwifruits.cn/classify/7/5.jpg",
"cat": 8
},
{
"name": "手机壳",
"key": "手机壳",
"icon": "http://img.kiwifruits.cn/classify/7/6.jpg",
"cat": 8
},
{
"name": "榨汁机",
"key": "榨汁机",
"icon": "http://img.kiwifruits.cn/classify/7/7.jpg",
"cat": 8
},
{
"name": "小家电",
"key": "小家电",
"icon": "http://img.kiwifruits.cn/classify/7/8.jpg",
"cat": 8
},
{
"name": "数码电子",
"key": "数码",
"icon": "http://img.kiwifruits.cn/classify/7/9.jpg",
"cat": 8
},
{
"name": "电饭锅",
"key": "电饭锅",
"icon": "http://img.kiwifruits.cn/classify/7/10.jpg",
"cat": 8
},
{
"name": "手机支架",
"key": "手机支架",
"icon": "http://img.kiwifruits.cn/classify/7/11.jpg",
"cat": 8
},
{
"name": "剃须刀",
"key": "剃须刀",
"icon": "http://img.kiwifruits.cn/classify/7/12.jpg",
"cat": 8
},
{
"name": "充电宝",
"key": "充电宝",
"icon": "http://img.kiwifruits.cn/classify/7/13.jpg",
"cat": 8
},
{
"name": "手机配件",
"key": "手机配件",
"icon": "http://img.kiwifruits.cn/classify/7/14.jpg",
"cat": 8
}
]
},
{
"name": "母婴",
"foods": [{
"name": "婴童服饰",
"key": "衣服",
"icon": "http://img.kiwifruits.cn/classify/8/1.jpg",
"cat": 2
},
{
"name": "玩具乐器",
"key": "玩具乐器",
"icon": "http://img.kiwifruits.cn/classify/8/2.jpg",
"cat": 2
},
{
"name": "尿不湿",
"key": "尿不湿",
"icon": "http://img.kiwifruits.cn/classify/8/3.jpg",
"cat": 2
},
{
"name": "安抚牙胶",
"key": "安抚牙胶",
"icon": "http://img.kiwifruits.cn/classify/8/4.jpg",
"cat": 2
},
{
"name": "奶瓶奶嘴",
"key": "奶瓶奶嘴",
"icon": "http://img.kiwifruits.cn/classify/8/5.jpg",
"cat": 2
},
{
"name": "孕妈用品",
"key": "孕妈用品",
"icon": "http://img.kiwifruits.cn/classify/8/6.jpg",
"cat": 2
},
{
"name": "宝宝用品",
"key": "宝宝用品",
"icon": "http://img.kiwifruits.cn/classify/8/7.jpg",
"cat": 2
},
{
"name": "婴童湿巾",
"key": "湿巾",
"icon": "http://img.kiwifruits.cn/classify/8/8.jpg",
"cat": 2
},
{
"name": "喂养洗护",
"key": "洗护",
"icon": "http://img.kiwifruits.cn/classify/8/9.jpg",
"cat": 2
},
{
"name": "婴童鞋靴",
"key": "童鞋",
"icon": "http://img.kiwifruits.cn/classify/8/10.jpg",
"cat": 2
},
{
"name": "口水巾",
"key": "口水巾",
"icon": "http://img.kiwifruits.cn/classify/8/11.jpg",
"cat": 2
},
{
"name": "营养辅食",
"key": "营养",
"icon": "http://img.kiwifruits.cn/classify/8/12.jpg",
"cat": 2
},
{
"name": "婴幼书籍",
"key": "书籍",
"icon": "http://img.kiwifruits.cn/classify/8/13.jpg",
"cat": 2
},
{
"name": "婴儿车",
"key": "婴儿车",
"icon": "http://img.kiwifruits.cn/classify/8/14.jpg",
"cat": 2
}
]
},
{
"name": "箱包",
"foods": [{
"name": "单肩包",
"key": "单肩包",
"icon": "http://img.kiwifruits.cn/classify/9/1.jpg",
"cat": 0
},
{
"name": "斜挎包",
"key": "斜挎包",
"icon": "http://img.kiwifruits.cn/classify/9/2.jpg",
"cat": 0
},
{
"name": "女包",
"key": "女包",
"icon": "http://img.kiwifruits.cn/classify/9/3.jpg",
"cat": 0
},
{
"name": "男包",
"key": "男包",
"icon": "http://img.kiwifruits.cn/classify/9/4.jpg",
"cat": 0
},
{
"name": "双肩包",
"key": "双肩包",
"icon": "http://img.kiwifruits.cn/classify/9/5.jpg",
"cat": 0
},
{
"name": "小方包",
"key": "小方包",
"icon": "http://img.kiwifruits.cn/classify/9/6.jpg",
"cat": 0
},
{
"name": "钱包",
"key": "钱包",
"icon": "http://img.kiwifruits.cn/classify/9/7.jpg",
"cat": 0
},
{
"name": "旅行箱包",
"key": "旅行箱包",
"icon": "http://img.kiwifruits.cn/classify/9/8.jpg",
"cat": 0
},
{
"name": "零钱包",
"key": "零钱包",
"icon": "http://img.kiwifruits.cn/classify/9/9.jpg",
"cat": 0
},
{
"name": "手提包",
"key": "手提包",
"icon": "http://img.kiwifruits.cn/classify/9/10.jpg",
"cat": 0
},
{
"name": "胸包",
"key": "胸包",
"icon": "http://img.kiwifruits.cn/classify/9/11.jpg",
"cat": 0
}
]
},
{
"name": "内衣",
"foods": [{
"name": "袜子",
"key": "袜子",
"icon": "http://img.kiwifruits.cn/classify/10/1.jpg",
"cat": 11
},
{
"name": "吊带背心",
"key": "吊带背心",
"icon": "http://img.kiwifruits.cn/classify/10/2.jpg",
"cat": 11
},
{
"name": "抹胸",
"key": "抹胸",
"icon": "http://img.kiwifruits.cn/classify/10/3.jpg",
"cat": 11
},
{
"name": "内裤",
"key": "内裤",
"icon": "http://img.kiwifruits.cn/classify/10/4.jpg",
"cat": 11
},
{
"name": "文胸",
"key": "文胸",
"icon": "http://img.kiwifruits.cn/classify/10/5.jpg",
"cat": 11
},
{
"name": "文胸套装",
"key": "文胸套装",
"icon": "http://img.kiwifruits.cn/classify/10/6.jpg",
"cat": 11
},
{
"name": "打底塑身",
"key": "打底塑身",
"icon": "http://img.kiwifruits.cn/classify/10/7.jpg",
"cat": 11
},
{
"name": "家居服",
"key": "家居服",
"icon": "http://img.kiwifruits.cn/classify/10/8.jpg",
"cat": 11
},
{
"name": "船袜",
"key": "船袜",
"icon": "http://img.kiwifruits.cn/classify/10/9.jpg",
"cat": 11
},
{
"name": "情侣睡衣",
"key": "情侣睡衣",
"icon": "http://img.kiwifruits.cn/classify/10/10.jpg",
"cat": 11
},
{
"name": "丝袜",
"key": "丝袜",
"icon": "http://img.kiwifruits.cn/classify/10/11.jpg",
"cat": 11
}
]
},
{
"name": "文娱车品",
"foods": [{
"name": "车市车品",
"key": "车市车品",
"icon": "http://img.kiwifruits.cn/classify/11/1.jpg",
"cat": 7
},
{
"name": "办公文具",
"key": "办公文具",
"icon": "http://img.kiwifruits.cn/classify/11/2.jpg",
"cat": 7
},
{
"name": "考试必备",
"key": "考试必备",
"icon": "http://img.kiwifruits.cn/classify/11/3.jpg",
"cat": 7
},
{
"name": "笔记本",
"key": "笔记本",
"icon": "http://img.kiwifruits.cn/classify/11/4.jpg",
"cat": 7
},
{
"name": "艺术礼品",
"key": "礼品",
"icon": "http://img.kiwifruits.cn/classify/11/5.jpg",
"cat": 7
},
{
"name": "书写工具",
"key": "书写工具",
"icon": "http://img.kiwifruits.cn/classify/11/6.jpg",
"cat": 7
},
{
"name": "车载电器",
"key": "车载电器",
"icon": "http://img.kiwifruits.cn/classify/11/7.jpg",
"cat": 7
},
{
"name": "图书音像",
"key": "图书音像",
"icon": "http://img.kiwifruits.cn/classify/11/8.jpg",
"cat": 7
},
{
"name": "画具画材",
"key": "画具画材",
"icon": "http://img.kiwifruits.cn/classify/11/9.jpg",
"cat": 7
}
]
},
{
"name": "配饰",
"foods": [{
"name": "太阳镜",
"key": "太阳镜",
"icon": "http://img.kiwifruits.cn/classify/12/1.jpg",
"cat": 0
},
{
"name": "皮带",
"key": "皮带",
"icon": "http://img.kiwifruits.cn/classify/12/2.jpg",
"cat": 0
},
{
"name": "棒球帽",
"key": "棒球帽",
"icon": "http://img.kiwifruits.cn/classify/12/3.jpg",
"cat": 0
},
{
"name": "手表",
"key": "手表",
"icon": "http://img.kiwifruits.cn/classify/12/4.jpg",
"cat": 0
},
{
"name": "发饰",
"key": "发饰",
"icon": "http://img.kiwifruits.cn/classify/12/5.jpg",
"cat": 0
},
{
"name": "项链",
"key": "项链",
"icon": "http://img.kiwifruits.cn/classify/12/6.jpg",
"cat": 0
},
{
"name": "手饰",
"key": "手饰",
"icon": "http://img.kiwifruits.cn/classify/12/7.jpg",
"cat": 0
},
{
"name": "耳环",
"key": "耳环",
"icon": "http://img.kiwifruits.cn/classify/12/8.jpg",
"cat": 0
},
{
"name": "帽子丝巾",
"key": "帽子丝巾",
"icon": "http://img.kiwifruits.cn/classify/12/9.jpg",
"cat": 0
},
{
"name": "眼镜墨镜",
"key": "眼镜墨镜",
"icon": "http://img.kiwifruits.cn/classify/12/10.jpg",
"cat": 0
},
{
"name": "发带发箍",
"key": "发带发箍",
"icon": "http://img.kiwifruits.cn/classify/12/11.jpg",
"cat": 0
}
]
},
{
"name": "家装家纺",
"foods": [{
"name": "家居饰品",
"key": "家居饰品",
"icon": "http://img.kiwifruits.cn/classify/13/1.jpg",
"cat": 0
},
{
"name": "凉席",
"key": "凉席",
"icon": "http://img.kiwifruits.cn/classify/13/2.jpg",
"cat": 0
},
{
"name": "背枕靠枕",
"key": "靠枕",
"icon": "http://img.kiwifruits.cn/classify/13/3.jpg",
"cat": 0
},
{
"name": "床上用品",
"key": "床上用品",
"icon": "http://img.kiwifruits.cn/classify/13/4.jpg",
"cat": 0
},
{
"name": "摆件",
"key": "摆件",
"icon": "http://img.kiwifruits.cn/classify/13/5.jpg",
"cat": 0
},
{
"name": "四件套",
"key": "四件套",
"icon": "http://img.kiwifruits.cn/classify/13/6.jpg",
"cat": 0
},
{
"name": "装饰品",
"key": "装饰品",
"icon": "http://img.kiwifruits.cn/classify/13/7.jpg",
"cat": 0
},
{
"name": "卫浴用品",
"key": "卫浴",
"icon": "http://img.kiwifruits.cn/classify/13/8.jpg",
"cat": 0
},
{
"name": "家居家装",
"key": "家具",
"icon": "http://img.kiwifruits.cn/classify/13/9.jpg",
"cat": 0
},
{
"name": "蚊帐",
"key": "蚊帐",
"icon": "http://img.kiwifruits.cn/classify/13/10.jpg",
"cat": 0
},
{
"name": "墙纸贴纸",
"key": "墙纸",
"icon": "http://img.kiwifruits.cn/classify/13/11.jpg",
"cat": 0
},
{
"name": "空调被",
"key": "空调被",
"icon": "http://img.kiwifruits.cn/classify/13/12.jpg",
"cat": 0
}
]
},
{
"name": "户外运动",
"foods": [{
"name": "游泳装备",
"key": "游泳",
"icon": "http://img.kiwifruits.cn/classify/14/1.jpg",
"cat": 0
},
{
"name": "泳镜",
"key": "泳镜",
"icon": "http://img.kiwifruits.cn/classify/14/2.jpg",
"cat": 0
},
{
"name": "户外装备",
"key": "户外",
"icon": "http://img.kiwifruits.cn/classify/14/3.jpg",
"cat": 0
},
{
"name": "健身服饰",
"key": "健身",
"icon": "http://img.kiwifruits.cn/classify/14/4.jpg",
"cat": 0
},
{
"name": "泳衣",
"key": "泳衣",
"icon": "http://img.kiwifruits.cn/classify/14/5.jpg",
"cat": 0
},
{
"name": "瑜伽垫",
"key": "瑜伽垫",
"icon": "http://img.kiwifruits.cn/classify/14/6.jpg",
"cat": 0
},
{
"name": "瑜伽用品",
"key": "瑜伽",
"icon": "http://img.kiwifruits.cn/classify/14/7.jpg",
"cat": 0
},
{
"name": "健身装备",
"key": "健身",
"icon": "http://img.kiwifruits.cn/classify/14/8.jpg",
"cat": 0
},
{
"name": "球迷用品",
"key": "球迷",
"icon": "http://img.kiwifruits.cn/classify/14/9.jpg",
"cat": 0
}
]
}
],
classifyData: [],
arr: [0, 584, 1168, 1752, 2336, 2805, 3274, 3858, 4442, 4911, 5380, 5734, 6203, 6672, 7017], //初始值，后边计算会根据手机适配覆盖
leftItemHeight: 51, //49行会计算出新值进行覆盖
navLeftHeight: 0, //左边scroll-view 内层nav的总高度
diff: 0, //左边scroll-view 内层nav的总高度与视口之差
tabBarHeight: 0, //如果此页面为Tab页面，自己改变高度值,,一般tab高度为51
tabBarHeight: 50, //如果此页面为Tab页面，自己改变高度值,,一般tab高度为51
selectedTabbar:0,//选中的tab
}
},
computed:{
list(){
// tabbar List
return this.$store.state.list;
}
},
created() {
//如果你的分类数据为后台异步获取请 将下方代码放置你的数据回调中
// this.$nextTick(()=>{
......@@ -1139,33 +99,32 @@
// })
},
onLoad: function() {
this.classifyData = menuInfo.categorys;
let _this = this;
uni.createSelectorQuery()
.select('.menu-banner')
.boundingClientRect(data => {
_this.bannerh = data.height;
}).exec();
if(this.buied){
uni.createSelectorQuery()
.select('.u-tabbar__content')
.select('.order-banner')
.boundingClientRect(data => {
_this.tabBarHeight = data.height;
console.log(_this.tabBarHeight,5555522222)
_this.orderBannerh = data.height;
_this.height = uni.getSystemInfoSync().windowHeight - _this.tabBarHeight-_this.orderBannerh;
}).exec();
console.log(this.tabBarHeight,5544)
}else{
this.height = uni.getSystemInfoSync().windowHeight - this.tabBarHeight;
}
},
onReady() {
this.getHeightList();
},
methods: {
uniGetUserInfo() {
this.$utils.uniGetUserInfo()
},
//点击tab
beforeSwitch(index) {
uni.switchTab({url:this.list[index].pagePath});
return true;
},
getHeightList() {
let _this = this;
......@@ -1173,7 +132,7 @@
selectorQuery.selectAll('.nav-left-item').boundingClientRect(function(rects) {
_this.leftItemHeight = rects[0].height;
_this.navLeftHeight = _this.leftItemHeight * _this.classifyData.length;
_this.diff = _this.navLeftHeight - _this.height;
_this.diff = _this.navLeftHeight; //- _this.height
});
selectorQuery
.selectAll('.box')
......@@ -1212,13 +171,13 @@
let height2 = _this.arr[i + 1];
if (!height2 || (_this.scrollHeight >= height1 && _this.scrollHeight < height2)) {
_this.categoryActive = i;
_this.diff > 0 && (_this.scrollLeftTop = Math.round((_this.categoryActive * _this.diff) / (_this.classifyData.length - 1)));
_this.diff > 0 && (_this.scrollLeftTop = Math.round((_this.categoryActive * _this.diff) / (_this.classifyData.length)));
return false;
}
}
_this.categoryActive = 0;
_this.timeoutId = undefined;
}, 10);
}, 0);
},
categoryClickMain(index) {
this.categoryActive = index;
......@@ -1237,32 +196,177 @@
<style lang="scss">
.menu-box{}
.menu-banner{
height: 376rpx;
position:relative;
image{
width: 100%;
height: 376rpx;
}
.login-area{
display: flex;
width:624rpx;
height: 88rpx;
padding: 20rpx 22rpx;
background: rgba(255, 255, 255, 0.2);
box-shadow: 0rpx 4rpx 6rpx 0rpx rgba(0,0,0,0.1);
border-radius: 10rpx;
backdrop-filter: blur(10rpx);
position: absolute;
z-index: 1;
bottom: 0;
left: 64rpx;
box-sizing: border-box;
.avatar{
display: flex;
justify-items: center;
align-items: center;
background: red;
width: 50rpx;
height: 48rpx;
margin-right: 22rpx;
box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(50,50,50,0.25);
border-radius: 4rpx;
image{
width:100%;
height: 100%;
};
}
.user-info{
flex: 1;
.user-name{
height: 28rpx;
font-size: 20rpx;
font-family: ArialMT;
color: #FFFFFF;
line-height: 22rpx;
}
.dialog{
display: flex;
height: 22rpx;
font-size: 16rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
line-height: 22rpx;
.content{
flex: 1;
}
.arrow{
width:10rpx;
height: 12px;
display: flex;
font-size: 20rpx;
justify-content: center;
align-items: center;
}
}
}
}
}
.order-banner{
width: 686rpx;
height: 179rpx;
background: #FFFFFF;
box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(166,166,166,0.5);
border-radius: 10rpx;
box-sizing: border-box;
position: relative;
left:32rpx;
top:-8rpx;
z-index: 1;
display: flex;
.info{
padding-left: 32rpx;
flex: 1;
.first{
height: 44rpx;
font-size: 32rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #323232;
line-height: 44rpx;
margin-top:40rpx;
}
.second{
margin-top:20rpx;
height: 34rpx;
font-size: 24rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #323232;
line-height: 34rpx;
.time{
font-size: 28rpx;
font-family: Arial-BoldMT, Arial;
font-weight: normal;
color: #006ECF;
margin: 0 16rpx;
}
}
}
.line{
width:0;
height: 104rpx;
border-right: 4rpx solid #006ECF;
position: absolute;
right:188rpx;
top: 36rpx;
}
.barCode-box{
margin-top: 30rpx;
width:150rpx;
height: 122rpx;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
flex-direction: column;
.barCode{
width:86rpx;
height: 86rpx;
background:#006ECF;
image{
width:100%;
height: 100%;
}
}
.barCode-dis{
text-align: center;
margin-top: 14rpx;
font-size: 16rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #666666;
line-height: 22rpx;
}
}
}
.page-body {
display: flex;
background: #fff;
overflow: hidden;
}
.nav {
display: flex;
width: 100%;
}
.nav-left {
width: 25%;
background: #fafafa;
width: 152rpx;
background: #fff;
border-right:2rpx solid #D5D5D5;
}
.nav-left-item {
height: 100rpx;
border-right: solid 1px #f1f1f1;
border-bottom: solid 1px #f1f1f1;
font-size: 30rpx;
position: relative;
height: 170rpx;
line-height: 170rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
display: flex;
align-items: center;
justify-content: center;
......@@ -1271,12 +375,11 @@
border-bottom: none;
}
.nav-right {
width: 75%;
width: 596rpx;
}
.box {
display: block;
overflow: hidden;
border-bottom: 20rpx solid #f3f3f3;
/* min-height: 100vh; */
/*若您的子分类过少想使得每个子分类占满屏请放开上边注视 */
}
......@@ -1284,14 +387,101 @@
border: none;
// min-height: 100vh;
}
.right-title{
padding-left: 28rpx;
margin-bottom:40rpx;
height: 44rpx;
font-size: 32rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #000000;
line-height: 44rpx;
}
.nav-right-item {
width: 28%;
height: 220rpx;
float: left;
text-align: center;
padding: 11rpx;
font-size: 28rpx;
display: flex;
padding: 0rpx 36rpx 0rpx 42rpx;
margin-bottom:50rpx;
height: 162rpx;
background: #fff;
.thumbnail{//缩略图
display: flex;
align-items: center;
width:140rpx;
height: 140rpx;
margin-right:34rpx;
}
.info{
flex: 1;
.goods-name{
height: 40rpx;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #000000;
line-height: 40rpx;
}
.tags{
.tag-item{
height: 24rpx;
border-radius: 4rpx;
border: 2rpx solid #006ECF;
margin-right:10rpx;
padding: 4rpx 6rpx;
font-size: 16rpx;
font-family: ArialMT;
color: #006ECF;
line-height: 24rpx;
display: inline-block;
}
}
.dis-box{
display: flex;
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
line-height: 40rpx;
.dis{
flex: 1;
}
.add-btn {
width:40rpx;
height: 40rpx;
border-radius: 50%;
background: #006ECF;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 36rpx;
}
}
.mon{
.discount{
display: inline-block;
height: 32rpx;
font-size: 24rpx;
font-family: Arial-BoldMT, Arial;
font-weight: normal;
color: #EB5F17;
line-height: 32rpx;
margin-right: 6rpx;
}
.price{
display: inline-block;
height: 22rpx;
font-size: 20rpx;
font-family: ArialMT;
color: #666666;
line-height: 22rpx;
.num{
text-decoration:line-through;
}
}
}
}
}
.nav-right-item image {
......@@ -1300,9 +490,18 @@
}
.active {
color: #ff80ab;
font-weight: 600;
color: #000000;
background: #fff;
border-right: 0;
}
.active-line{
height: 170rpx;
width:2rpx;
position: absolute;
right:-2rpx;
top: 0;
z-index: 1;
border-right:4rpx solid #006ECF;;
}
::-webkit-scrollbar {
/*取消小程序的默认导航条样式*/
......
pages/mine/mine.vue
<template>
<view>
<!-- Tab -->
<u-tabbar v-model="selectedTabbar" :border="false" inactive-color="#000000" active-color="#006ECF" :fixed="true" :safeAreaInsetBottom="true" @change="beforeSwitch">
<u-tabbar-item v-for="(item,index) in list" :key="item.text" :text="item.text" :icon="selectedTabbar==index?item.activeIcon:item.icon"></u-tabbar-item>
</u-tabbar>
<tabBar :selectedTabbar="selectedTabbar"></tabBar>
</view>
</template>
......@@ -15,16 +12,9 @@
}
},
computed:{
list(){
// tabbar List
return this.$store.state.list;
}
},
methods: {
beforeSwitch(index) {
uni.switchTab({url:this.list[index].pagePath});
return true;
}
}
}
</script>
......
pages/order/order.vue
<template>
<view>
<!-- Tab -->
<u-tabbar v-model="selectedTabbar" :border="false" inactive-color="#000000" active-color="#006ECF" :fixed="true" :safeAreaInsetBottom="true" @change="beforeSwitch">
<u-tabbar-item v-for="(item,index) in list" :key="item.text" :text="item.text" :icon="selectedTabbar==index?item.activeIcon:item.icon"></u-tabbar-item>
</u-tabbar>
<tabBar :selectedTabbar="selectedTabbar"></tabBar>
</view>
</template>
......@@ -16,16 +13,10 @@
}
},
computed:{
list(){
// tabbar List
return this.$store.state.list;
}
},
methods: {
beforeSwitch(index) {
uni.switchTab({url:this.list[index].pagePath});
return true;
}
}
}
</script>
......
utils/utils.js
import Config from '../static/config/index.js';
import WXBizDataCrypt from "./WXBizDataCrypt.js";
uni.getLocation({
type: 'gcj02', //返回可以用于uni.openLocation的经纬度
success: function (res) {
console.log(res, 'res')
var params = {
lat: res.latitude,
lng: res.longitude
}
// getAddress(params).then(res => {
// console.log(res, 'aaa')
// })
}
})
export default{
uniLogin() {
uni.login({
......@@ -21,6 +34,21 @@ export default{
}
})
},
getLocation() {
uni.getLocation({
type: 'gcj02', //返回可以用于uni.openLocation的经纬度
success: function (res) {
console.log(res, 'res')
var params = {
lat: res.latitude,
lng: res.longitude
}
getAddress(params).then(res => {
console.log(res, 'aaa')
})
}
})
},
// 解密手机
async onGetPhoneNumber(appid,session_key,encryptedData,iv) {
let pc = await new WXBizDataCrypt(appid,session_key);
......
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