新增商品详情页小程序快速跳转，以及修改楼层装修样式
lemon橪
parent
3cc2f1e019
commit
1e53287927
|
|
@ -0,0 +1,343 @@
|
|||
<template>
|
||||
<view class="shadow" :class="!show?'':'shadow-show'" :style="{backgroundColor:show?maskBg:'rgba(0,0,0,0)'}" @tap="tapMask">
|
||||
<view class="popups" :class="[theme]" :style="{top: popupsTop ,left: popupsLeft,flexDirection:direction}">
|
||||
<text :class="dynPlace" :style="{width:'0px',height:'0px'}" v-if="triangle"></text>
|
||||
<view v-for="(item,index) in popData" :key="index" @tap.stop="tapItem(item)" class="itemChild view" :class="[direction=='row'?'solid-right':'solid-bottom',item.disabled?'disabledColor':'']">
|
||||
<u-icon size="35" :name="item.icon" v-if="item.icon"></u-icon><span class="title">{{item.title}}</span>
|
||||
</view>
|
||||
<slot></slot>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
maskBg: {
|
||||
type: String,
|
||||
default: "rgba(0,0,0,0)",
|
||||
},
|
||||
placement: {
|
||||
type: String,
|
||||
default: "default", //default top-start top-end bottom-start bottom-end
|
||||
},
|
||||
direction: {
|
||||
type: String,
|
||||
default: "column", //column row
|
||||
},
|
||||
x: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
y: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
value: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
popData: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
theme: {
|
||||
type: String,
|
||||
default: "light", //light dark
|
||||
},
|
||||
dynamic: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
gap: {
|
||||
type: Number,
|
||||
default: 20,
|
||||
},
|
||||
triangle: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
popupsTop: "0rpx",
|
||||
popupsLeft: "0rpx",
|
||||
show: false,
|
||||
dynPlace: "",
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.popupsPosition();
|
||||
},
|
||||
methods: {
|
||||
tapMask() {
|
||||
this.$emit("input", !this.value);
|
||||
},
|
||||
tapItem(item) {
|
||||
if (item.disabled) return;
|
||||
this.$emit("tapPopup", item);
|
||||
this.$emit("input", !this.value);
|
||||
},
|
||||
getStatusBar() {
|
||||
let promise = new Promise((resolve, reject) => {
|
||||
uni.getSystemInfo({
|
||||
success: function (e) {
|
||||
let customBar;
|
||||
// #ifdef H5
|
||||
|
||||
customBar = e.statusBarHeight + e.windowTop;
|
||||
|
||||
// #endif
|
||||
resolve(customBar);
|
||||
},
|
||||
});
|
||||
});
|
||||
return promise;
|
||||
},
|
||||
async popupsPosition() {
|
||||
let statusBar = await this.getStatusBar();
|
||||
let promise = new Promise((resolve, reject) => {
|
||||
let popupsDom = uni.createSelectorQuery().in(this).select(".popups");
|
||||
popupsDom
|
||||
.fields(
|
||||
{
|
||||
size: true,
|
||||
},
|
||||
(data) => {
|
||||
let width = data.width;
|
||||
let height = data.height;
|
||||
|
||||
|
||||
|
||||
let y = this.dynamic
|
||||
? this.dynamicGetY(this.y, this.gap)
|
||||
: this.transformRpx(this.y);
|
||||
|
||||
let x = this.dynamic
|
||||
? this.dynamicGetX(this.x, this.gap)
|
||||
: this.transformRpx(this.x);
|
||||
|
||||
// #ifdef H5
|
||||
y = this.dynamic
|
||||
? this.y + statusBar
|
||||
: this.transformRpx(this.y + statusBar);
|
||||
// #endif
|
||||
|
||||
this.dynPlace =
|
||||
this.placement == "default"
|
||||
? this.getPlacement(x, y)
|
||||
: this.placement;
|
||||
|
||||
switch (this.dynPlace) {
|
||||
case "top-start":
|
||||
this.popupsTop = `${y + 9}rpx`;
|
||||
this.popupsLeft = `${x - 15}rpx`;
|
||||
break;
|
||||
case "top-end":
|
||||
this.popupsTop = `${y + 9}rpx`;
|
||||
this.popupsLeft = `${x + 15 - width}rpx`;
|
||||
break;
|
||||
case "bottom-start":
|
||||
this.popupsTop = `${y - 18 - height}rpx`;
|
||||
this.popupsLeft = `${x - 15}rpx`;
|
||||
break;
|
||||
case "bottom-end":
|
||||
this.popupsTop = `${y - 9 - height}rpx`;
|
||||
this.popupsLeft = `${x + 15 - width}rpx`;
|
||||
break;
|
||||
}
|
||||
resolve();
|
||||
}
|
||||
)
|
||||
.exec();
|
||||
});
|
||||
return promise;
|
||||
},
|
||||
getPlacement(x, y) {
|
||||
let width = uni.getSystemInfoSync().windowWidth;
|
||||
let height = uni.getSystemInfoSync().windowHeight;
|
||||
if (x > width / 2 && y > height / 2) {
|
||||
return "bottom-end";
|
||||
} else if (x < width / 2 && y < height / 2) {
|
||||
return "top-start";
|
||||
} else if (x > width / 2 && y < height / 2) {
|
||||
return "top-end";
|
||||
} else if (x < width / 2 && y > height / 2) {
|
||||
return "bottom-start";
|
||||
} else if (x > width / 2) {
|
||||
return "top-end";
|
||||
} else {
|
||||
return "top-start";
|
||||
}
|
||||
},
|
||||
dynamicGetY(y, gap) {
|
||||
let height = uni.getSystemInfoSync().windowHeight;
|
||||
y = y < gap ? gap : y;
|
||||
y = height - y < gap ? height - gap : y;
|
||||
|
||||
return y;
|
||||
},
|
||||
dynamicGetX(x, gap) {
|
||||
let width = uni.getSystemInfoSync().windowWidth;
|
||||
x = x < gap ? gap : x;
|
||||
x = width - x < gap ? width - gap : x;
|
||||
return x;
|
||||
},
|
||||
transformRpx(params) {
|
||||
return (params * uni.getSystemInfoSync().screenWidth) / 375;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
immediate: true,
|
||||
handler: async function (newVal, oldVal) {
|
||||
if (newVal) await this.popupsPosition();
|
||||
this.show = newVal;
|
||||
},
|
||||
},
|
||||
placement: {
|
||||
immediate: true,
|
||||
handler(newVal, oldVal) {
|
||||
this.dynPlace = newVal;
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.title {
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
.shadow {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
z-index: 9999;
|
||||
transition: background 0.3s ease-in-out;
|
||||
visibility: hidden;
|
||||
|
||||
&.shadow-show {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.popups {
|
||||
position: absolute;
|
||||
padding: 20rpx;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
.view {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 15rpx 10rpx;
|
||||
font-size: 25rpx;
|
||||
}
|
||||
.image {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
.dark {
|
||||
background-color: #4c4c4c;
|
||||
color: #fff;
|
||||
.top-start:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -18rpx;
|
||||
left: 10rpx;
|
||||
border-width: 0 20rpx 20rpx;
|
||||
border-style: solid;
|
||||
border-color: transparent transparent #4c4c4c;
|
||||
}
|
||||
.top-end:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -18rpx;
|
||||
right: 10rpx;
|
||||
border-width: 0 20rpx 20rpx;
|
||||
border-style: solid;
|
||||
border-color: transparent transparent #4c4c4c;
|
||||
}
|
||||
.bottom-start:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -18rpx;
|
||||
left: 10rpx;
|
||||
border-width: 20rpx 20rpx 0;
|
||||
border-style: solid;
|
||||
border-color: #4c4c4c transparent transparent;
|
||||
}
|
||||
.bottom-end:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -18rpx;
|
||||
right: 10rpx;
|
||||
border-width: 20rpx 20rpx 0;
|
||||
border-style: solid;
|
||||
border-color: #4c4c4c transparent transparent;
|
||||
}
|
||||
.disabledColor {
|
||||
color: #c5c8ce;
|
||||
}
|
||||
}
|
||||
.light {
|
||||
color: #515a6e;
|
||||
box-shadow: 0upx 0upx 30upx rgba(0, 0, 0, 0.2);
|
||||
background: #fff;
|
||||
.top-start:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -18rpx;
|
||||
left: 10rpx;
|
||||
border-width: 0 20rpx 20rpx;
|
||||
border-style: solid;
|
||||
border-color: transparent transparent #fff;
|
||||
}
|
||||
.top-end:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -18rpx;
|
||||
right: 10rpx;
|
||||
border-width: 0 20rpx 20rpx;
|
||||
border-style: solid;
|
||||
border-color: transparent transparent #fff;
|
||||
}
|
||||
.bottom-start:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -18rpx;
|
||||
left: 10rpx;
|
||||
border-width: 20rpx 20rpx 0;
|
||||
border-style: solid;
|
||||
border-color: #fff transparent transparent;
|
||||
}
|
||||
.bottom-end:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -18rpx;
|
||||
right: 10rpx;
|
||||
border-width: 20rpx 20rpx 0;
|
||||
border-style: solid;
|
||||
border-color: #fff transparent transparent;
|
||||
}
|
||||
.disabledColor {
|
||||
color: #c5c8ce;
|
||||
}
|
||||
}
|
||||
.solid-bottom {
|
||||
border-bottom: 1px solid #f3f5f7;
|
||||
}
|
||||
.solid-right {
|
||||
border-right: 1px solid #ccc;
|
||||
}
|
||||
.popups .itemChild:last-child {
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -9,42 +9,40 @@
|
|||
<!-- 分享 -->
|
||||
<shares v-if="shareFlage && goodsDetail.id" :skuId="this.routerVal.id" :goodsId="this.routerVal.goodsId" :link="'/pages/product/goods?id='+this.routerVal.id+'&goodsId='+this.routerVal.goodsId"
|
||||
:thumbnail="goodsDetail.thumbnail" :goodsName="goodsDetail.goodsName" type="goods" @close="shareFlage = false" />
|
||||
<popups v-model="popupsSwitch" @tapPopup="handleNavbarList" :popData="navbarListData" :x="navbarListX" :y="navbarListY" placement="top-start" />
|
||||
<view class="index">
|
||||
<u-navbar :background="navbar" :is-back="false" :class="headerFlag ? 'header' : 'header bg-none scoll-hide'">
|
||||
|
||||
<!-- topBar -->
|
||||
<u-navbar :background="navbar" :is-back="false" :class="headerFlag ? 'header' : 'header bg-none scroll-hide'">
|
||||
<div class="headerRow">
|
||||
<div class="backs" @click="back()">
|
||||
<u-icon name="arrow-left" color="#8e8e8e"></u-icon>
|
||||
<div class="backs">
|
||||
<u-icon @click="back()" name="arrow-left" class="icon-back"></u-icon>
|
||||
|
||||
<u-icon name="list" @click="popupsSwitch = !popupsSwitch" class="icon-list"></u-icon>
|
||||
</div>
|
||||
<div class="headerList" :class="headerFlag ? 'tab-bar' : 'tab-bar scoll-hide'">
|
||||
<div class="headerList" :class="headerFlag ? 'tab-bar' : 'tab-bar scroll-hide'">
|
||||
<div class="headerRow">
|
||||
<div style="text-align: center" :span="3" v-for="header in headerList" :key="header.id" :class="{ cur: scrollId === header.id }" @click="headerTab(header.id)">
|
||||
<div class="nav-item" v-for="header in headerList" :key="header.id" :class="{ cur: scrollId === header.id }" @click="headerTab(header.id)">
|
||||
{{ header.text }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="share" @click="shareChange()">
|
||||
<image class="shareImg" src="/static/share.png" alt=""></image>
|
||||
</div>
|
||||
</div>
|
||||
</u-navbar>
|
||||
|
||||
<view class="showBack" v-show="!headerFlag">
|
||||
<u-row>
|
||||
<u-col :span="2" @click="back()">
|
||||
<div class="iconBag" style="text-align: center">
|
||||
<image class="headerImg" src="/static/bagBack.png" alt=""></image>
|
||||
</div>
|
||||
</u-col>
|
||||
<u-col :span="8"></u-col>
|
||||
<u-navbar :border-bottom="false" v-show="!headerFlag" class="header-only-back" :background="navbarOnlyBack" :is-back="false">
|
||||
<div>
|
||||
<div class="bg-back">
|
||||
<u-icon size="40" @click="back()" name="arrow-left" class="icon-back"></u-icon>
|
||||
<u-icon size="40" @click="popupsSwitch = !popupsSwitch" name="list" class="icon-list"></u-icon>
|
||||
|
||||
<u-col :span="2" class="share" style="text-align: center" @click="shareChange()">
|
||||
<image class="headerImg" src="/static/bagShare.png" alt=""></image>
|
||||
</u-col>
|
||||
</u-row>
|
||||
</view>
|
||||
</div>
|
||||
</div>
|
||||
</u-navbar>
|
||||
</view>
|
||||
|
||||
<view class="product-container" :style="{ height: productRefHeight }" ref="productRef" id="productRef">
|
||||
<scroll-view scroll-anchoring enableBackToTop="true" scroll-with-animation scroll-y class="scoll-page" :scroll-top="tabScrollTop" @scroll="pageScroll">
|
||||
<scroll-view scroll-anchoring enableBackToTop="true" scroll-with-animation scroll-y class="scroll-page" :scroll-top="tabScrollTop" @scroll="pageScroll">
|
||||
<view>
|
||||
<!-- 轮播图 -->
|
||||
<GoodsSwiper id="main1" :res="imgList" />
|
||||
|
|
@ -54,9 +52,9 @@
|
|||
|
||||
<view class="card-box top-radius-0" id="main2">
|
||||
<!-- 活动不显示价钱 -->
|
||||
<view v-if="!is_promotion" class="desc-blod -goods-msg">
|
||||
<view v-if="!isPromotion" class="desc-bold -goods-msg">
|
||||
<view class="-goods-flex">
|
||||
<view class="desc-blod">
|
||||
<view class="desc-bold">
|
||||
{{ goodsDetail.goodsName || "" }}
|
||||
</view>
|
||||
<view class="favorite" @click="clickFavorite(goodsDetail.id)">
|
||||
|
|
@ -84,12 +82,17 @@
|
|||
}} </span>
|
||||
</view>
|
||||
<view class="-goods-price" v-else> ¥<span class="price">0 </span>.00 </view>
|
||||
<view class="favorite" @click="clickFavorite(goodsDetail.id)">
|
||||
|
||||
<view class="icons share" @click="shareChange()">
|
||||
<u-icon size="30" name="share-fill"></u-icon>
|
||||
<view>分享</view>
|
||||
</view>
|
||||
<view class="icons" @click="clickFavorite(goodsDetail.id)">
|
||||
<u-icon size="30" :color="favorite ? '#f2270c' : '#262626'" :name="favorite ? 'heart-fill' : 'heart'"></u-icon>
|
||||
<view :style="{ color: favorite ? '#f2270c' : '#262626' }">{{ favorite ? "已收藏" : "收藏" }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="-goods-name desc-blod">
|
||||
<view class="-goods-name desc-bold">
|
||||
{{ goodsDetail.goodsName || "" }}
|
||||
</view>
|
||||
<view class="-goods-desc">
|
||||
|
|
@ -143,7 +146,7 @@
|
|||
</view>
|
||||
|
||||
<!-- 评价 -->
|
||||
<Evaluation id="main5" :goodsDetail="goodsDetail" />
|
||||
<Evaluation id="main5" :goodsDetail="goodsDetail" />
|
||||
|
||||
<!-- 店铺推荐 -->
|
||||
<storeLayout id="main7" :storeDetail="storeDetail" :goodsDetail="goodsDetail" :res="recommendList" />
|
||||
|
|
@ -232,7 +235,7 @@ import {
|
|||
import * as API_trade from "@/api/trade.js";
|
||||
import * as API_Members from "@/api/members.js";
|
||||
import * as API_store from "@/api/store.js";
|
||||
|
||||
import { modelNavigateTo } from "@/pages/tabbar/home/template/tpl.js";
|
||||
/************请求存储***************/
|
||||
import storage from "@/utils/storage.js";
|
||||
|
||||
|
|
@ -250,8 +253,10 @@ import GoodsSwiper from "./product/goods/-goods-swiper"; //轮播图组件
|
|||
import popupGoods from "./product/popup/goods"; //购物车商品的模块
|
||||
import popupAddress from "./product/popup/address"; //地址选择模块
|
||||
import shares from "@/components/m-share/index"; //分享
|
||||
import popups from "@/components/popups/popups"; //气泡框
|
||||
export default {
|
||||
components: {
|
||||
popups,
|
||||
shares,
|
||||
PromotionLayout,
|
||||
PromotionDetailsLayout,
|
||||
|
|
@ -268,13 +273,51 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
// #ifdef H5
|
||||
navbarListX: 110, //导航栏列表栏x轴
|
||||
navbarListY: 80, //导航栏列表栏y轴
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
navbarListX: 100, //导航栏列表栏x轴
|
||||
navbarListY: 140, //导航栏列表栏y轴
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
navbarListX: 120, //导航栏列表栏x轴
|
||||
navbarListY: 170, //导航栏列表栏y轴
|
||||
// #endif
|
||||
navbarListData: [
|
||||
//导航栏列表栏数据
|
||||
{
|
||||
title: "首页",
|
||||
icon: "home-fill",
|
||||
___type: "other",
|
||||
},
|
||||
{
|
||||
title: "购物车",
|
||||
icon: "bag-fill",
|
||||
___type: "other",
|
||||
},
|
||||
{
|
||||
title: "搜索",
|
||||
icon: "search",
|
||||
___type: "category",
|
||||
},
|
||||
{
|
||||
title: "个人中心",
|
||||
icon: "account-fill",
|
||||
___type: "other",
|
||||
},
|
||||
],
|
||||
popupsSwitch: false, //导航栏列表栏开关
|
||||
shareFlage: false,
|
||||
selectedGoods: "", //选择的商品规格昵称
|
||||
is_promotion: true, //判断显示拼团活动文字
|
||||
isPromotion: true, //判断显示拼团活动文字
|
||||
isGroup: false, // 是否是拼团活动
|
||||
pointDetail: "", // 是否是积分商品
|
||||
assemble: "", //拼团的sku
|
||||
scroll_mask_height: 0, //促销活动的高度
|
||||
navbarOnlyBack: {
|
||||
background: "transparent",
|
||||
},
|
||||
navbar: {
|
||||
background: "#fff",
|
||||
},
|
||||
|
|
@ -286,7 +329,7 @@ export default {
|
|||
},
|
||||
headerFlag: false, //顶部导航显示与否
|
||||
headerList: [
|
||||
//顶部导航文字
|
||||
//顶部导航文字按照规则来 详情全局搜索
|
||||
{
|
||||
text: "商品",
|
||||
id: "1",
|
||||
|
|
@ -359,15 +402,14 @@ export default {
|
|||
clearInterval(timer);
|
||||
}, 100);
|
||||
|
||||
this.is_promotion = false;
|
||||
this.isPromotion = false;
|
||||
} else {
|
||||
this.is_promotion = true;
|
||||
this.isPromotion = true;
|
||||
this.$refs.popupGoods.buyType = "";
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
|
||||
const { windowHeight } = uni.getSystemInfoSync();
|
||||
let bottomHeight = 0;
|
||||
let topHeight = 0;
|
||||
|
|
@ -420,7 +462,16 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
// 循环出当前促销是否为空
|
||||
/**
|
||||
* 导航栏列表栏
|
||||
*/
|
||||
handleNavbarList(val) {
|
||||
modelNavigateTo({ url: val });
|
||||
},
|
||||
|
||||
/**
|
||||
* 循环出当前促销是否为空
|
||||
*/
|
||||
emptyPromotion() {
|
||||
if (
|
||||
this.PromotionList == "" ||
|
||||
|
|
@ -430,7 +481,10 @@ export default {
|
|||
return true;
|
||||
}
|
||||
},
|
||||
/**初始化信息 */
|
||||
|
||||
/**
|
||||
* 初始化信息
|
||||
*/
|
||||
async init(id, goodsId, distributionId) {
|
||||
this.isGroup = false; //初始化拼团
|
||||
this.productId = id; // skuId
|
||||
|
|
@ -487,11 +541,11 @@ export default {
|
|||
this.getGoodsCollectionFun(this.goodsDetail.id);
|
||||
}
|
||||
},
|
||||
linkMsgDetail () {
|
||||
uni.navigateTo({
|
||||
url: '/pages/product/customerservice/index'
|
||||
})
|
||||
},
|
||||
linkMsgDetail() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/product/customerservice/index",
|
||||
});
|
||||
},
|
||||
// 格式化金钱 1999 --> [1999,00]
|
||||
formatPrice(val) {
|
||||
if (typeof val == "undefined") {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.red {
|
||||
color: $jd-color;
|
||||
}
|
||||
page{
|
||||
page {
|
||||
background: #fff;
|
||||
}
|
||||
.num-icon {
|
||||
|
|
@ -48,7 +48,7 @@ page{
|
|||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
.desc-blod {
|
||||
.desc-bold {
|
||||
flex: 8;
|
||||
font-weight: 700;
|
||||
color: #262626;
|
||||
|
|
@ -72,7 +72,7 @@ page{
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.favorite {
|
||||
.icons,.favorite {
|
||||
flex: 1;
|
||||
font-size: 22rpx;
|
||||
color: #262626;
|
||||
|
|
@ -127,45 +127,68 @@ page{
|
|||
}
|
||||
|
||||
.headerRow {
|
||||
height: 44px; //默认uni navbar就是44px
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
background: #fff !important;
|
||||
> div {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
> .headerList {
|
||||
flex: 8;
|
||||
}
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.scoll-hide {
|
||||
.scroll-hide {
|
||||
opacity: 0;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.cur {
|
||||
color: #333;
|
||||
|
||||
border-bottom: 6rpx solid $main-color;
|
||||
color: $main-color;
|
||||
}
|
||||
.header {
|
||||
.cur::after {
|
||||
content: "";
|
||||
height: 6rpx;
|
||||
|
||||
background: $main-color;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.header-only-back {
|
||||
background: transparent;
|
||||
}
|
||||
.header,
|
||||
.header-only-back {
|
||||
padding-left: 10rpx;
|
||||
position: fixed;
|
||||
top: var(--status-bar-height);
|
||||
width: 100%;
|
||||
|
||||
z-index: 8;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
font-size: 30rpx;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
/deep/ .u-navbar {
|
||||
padding-left: 10rpx;
|
||||
}
|
||||
.nav-item {
|
||||
flex: 2;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.header {
|
||||
color: #666666;
|
||||
background-color: #fff;
|
||||
|
||||
.tab-bar {
|
||||
width: 100%;
|
||||
color: #666;
|
||||
font-weight: 400;
|
||||
|
||||
view {
|
||||
padding: 0 3px;
|
||||
}
|
||||
|
|
@ -214,14 +237,32 @@ page{
|
|||
}
|
||||
|
||||
.main-page {
|
||||
height: calc(100% - var(--status-bar-height)) ;
|
||||
height: calc(100% - var(--status-bar-height));
|
||||
overflow: hidden;
|
||||
}
|
||||
.icon-back {
|
||||
padding-right: 10rpx;
|
||||
}
|
||||
.icon-list {
|
||||
border-left: 2rpx solid rgb(194, 194, 194);
|
||||
padding-left: 10rpx;
|
||||
}
|
||||
.backs,
|
||||
.bg-back {
|
||||
width: 150rpx;
|
||||
border: 2rpx solid #e8e8e8;
|
||||
border-radius: 100px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 8rpx 0;
|
||||
}
|
||||
.bg-back {
|
||||
background: rgba($color: #fff, $alpha: 0.8);
|
||||
}
|
||||
.backs {
|
||||
// width: 150rpx;
|
||||
text-align: center;
|
||||
font-size: 42rpx;
|
||||
line-height: 90rpx;
|
||||
}
|
||||
|
||||
.headerImg {
|
||||
|
|
@ -253,8 +294,6 @@ page {
|
|||
}
|
||||
|
||||
.product-container {
|
||||
// background: #f0f0f0;
|
||||
|
||||
.header-line {
|
||||
height: 1px;
|
||||
background: #f2f2f2;
|
||||
|
|
@ -265,12 +304,12 @@ page {
|
|||
z-index: 999;
|
||||
transition: all 0.5s;
|
||||
|
||||
&.scoll-hide {
|
||||
&.scroll-hide {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
.scoll-page {
|
||||
.scroll-page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -328,7 +367,7 @@ page {
|
|||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
position: fixed;
|
||||
margin-top: calc( 10px);
|
||||
margin-top: calc(10px);
|
||||
z-index: 8;
|
||||
width: 100%;
|
||||
|
||||
|
|
@ -337,12 +376,6 @@ page {
|
|||
}
|
||||
}
|
||||
|
||||
.u-mode-light-error {
|
||||
background: #ffebec !important;
|
||||
padding: 8rpx 16rpx;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.showBox {
|
||||
width: 100%;
|
||||
height: 90rpx;
|
||||
|
|
@ -363,7 +396,7 @@ page {
|
|||
}
|
||||
}
|
||||
|
||||
.status_bar{
|
||||
.status_bar {
|
||||
background: #fff;
|
||||
height: var(--status-bar-height);
|
||||
}
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
/** 配置楼层模块的跳转 */
|
||||
export function modelNavigateTo(item) {
|
||||
|
||||
let val = item.url;
|
||||
switch (val.___type) {
|
||||
case "goods":
|
||||
|
|
@ -9,9 +8,15 @@ export function modelNavigateTo(item) {
|
|||
});
|
||||
break;
|
||||
case "category":
|
||||
uni.navigateTo({
|
||||
url: `/pages/navigation/search/searchPage?category=${val.id}`,
|
||||
});
|
||||
if (val.id) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/navigation/search/searchPage?category=${val.id}`,
|
||||
});
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: `/pages/navigation/search/searchPage`,
|
||||
});
|
||||
}
|
||||
break;
|
||||
case "stores":
|
||||
uni.navigateTo({
|
||||
|
|
@ -33,7 +38,7 @@ export function modelNavigateTo(item) {
|
|||
switch (val.title) {
|
||||
case "首页":
|
||||
uni.switchTab({
|
||||
url: `/`,
|
||||
url: `/pages/tabbar/home/index`,
|
||||
});
|
||||
break;
|
||||
case "购物车":
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
padding: 2rpx;
|
||||
|
||||
}
|
||||
.layout {
|
||||
padding: 16rpx;
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ export default {
|
|||
<style lang="scss" scoped>
|
||||
@import "./tpl.scss";
|
||||
.layout {
|
||||
height: 167px;
|
||||
height: 300rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
|
|||
Loading…
Reference in New Issue