zhuce
/
lilishop-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

商品页面添加快捷导航

master
mabo 2021-06-04 17:32:39 +08:00
parent 8fa58c7010
commit de639c808c
4 changed files with 845 additions and 780 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
config/api.js
View File

@ -6,9 +6,13 @@
const dev = {
common: "https://common-api.pickmall.cn",
buyer: "https://buyer-api.pickmall.cn",
// common: 'http://192.168.0.109:8890',
// buyer: 'http://192.168.0.109:8888',
};
// 生产环境
const prod = {
// common: 'http://192.168.0.109:8890',
// buyer: 'http://192.168.0.109:8888',
common: "https://common-api.pickmall.cn",
buyer: "https://buyer-api.pickmall.cn",

96
pages/product/goods.vue
View File

@ -7,44 +7,50 @@
<!-- 仅h5有效 打开App -->
<!-- 分享 -->
<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" />
<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" />
<view class="index">
<u-navbar :background="navbar" :is-back="false" :class="headerFlag ? 'header' : 'header bg-none scoll-hide'">
<u-navbar :background="navbar" :is-back="false"
:class="headerFlag ? 'header' : 'header bg-none scoll-hide'">
<div class="headerRow">
<div class="backs" @click="back()">
<u-icon name="arrow-left" color="#8e8e8e"></u-icon>
</div>
<div class="headerList" :class="headerFlag ? 'tab-bar' : 'tab-bar scoll-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="headerFlag ? 'tab-bar' : 'tab-bar scoll-hide'">
<div class="headerList">
<div style="text-align: center" :span="3" 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>
<u-icon class="fast-icon fast-icon-dark" name="zhuanfa"></u-icon>
<u-icon class="fast-icon fast-icon-dark" name="list"></u-icon>
</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 class="headerRow">
<div @click="back()">
<u-icon name="arrow-left" class="fast-icon"></u-icon>
</div>
<div></div>
<div>
<u-icon @click="shareChange()" class="fast-icon" name="zhuanfa"></u-icon>
<!-- #ifndef MP-WEIXIN -->
<u-icon name="list" class="fast-icon ml-20"></u-icon>
<!-- #endif -->
</div>
</div>
</u-col>
<u-col :span="8"></u-col>
<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>
</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="scoll-page"
:scroll-top="tabScrollTop" @scroll="pageScroll">
<view>
<!-- 轮播图 -->
<GoodsSwiper id="main1" :res="imgList" />
@ -60,8 +66,10 @@
{{ goodsDetail.goodsName || "" }}
</view>
<view class="favorite" @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>
<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>
<!-- 商品描述 -->
@ -75,18 +83,22 @@
<view class="-goods-flex">
<!-- 如果有积分显示积分 -->
<view class="-goods-price" v-if="goodsDetail.price != undefined">
<span v-if="pointDetail.points"> <span class="price">{{pointDetail.points}}</span>
<span v-if="pointDetail.points"> <span
class="price">{{pointDetail.points}}</span>
<span>积分</span>
</span>
<span v-else> <span>¥</span><span class="price">{{ formatPrice(goodsDetail.price)[0] }}</span>.{{
<span v-else> <span>¥</span><span
class="price">{{ formatPrice(goodsDetail.price)[0] }}</span>.{{
formatPrice(goodsDetail.price)[1]
}} </span>
</view>
<view class="-goods-price" v-else> ¥<span class="price">0 </span>.00 </view>
<view class="favorite" @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>
<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">
@ -113,7 +125,8 @@
</view>
<!-- 拼团用户列表 -->
<PromotionAssembleListLayout v-if="isGroup" @to-assemble-buy-now="toAssembleBuyNow" :res="PromotionList" />
<PromotionAssembleListLayout v-if="isGroup" @to-assemble-buy-now="toAssembleBuyNow"
:res="PromotionList" />
<view class="card-box">
<view class="card-flex" @click="shutMask(4)">
@ -146,7 +159,8 @@
<Evaluation id="main5" :goodsDetail="goodsDetail" v-if="goodsDetail.id" />
<!-- 店铺推荐 -->
<storeLayout id="main7" :storeDetail="storeDetail" :goodsDetail="goodsDetail" :res="recommendList" />
<storeLayout id="main7" :storeDetail="storeDetail" :goodsDetail="goodsDetail"
:res="recommendList" />
<!-- 宝贝详情 -->
<GoodsIntro id="main9" :res="goodsDetail" :goodsId="goodsDetail.goodsId" v-if="goodsDetail.id" />
@ -211,10 +225,12 @@
</view>
<!-- 配送地址弹窗 -->
<popupAddress @closeAddress="closePopupAddress" @deliveryData="deliveryFun" v-if="goodsDetail.id" :goodsId="goodsDetail.id" :addressFlag="addressFlag" />
<popupAddress @closeAddress="closePopupAddress" @deliveryData="deliveryFun" v-if="goodsDetail.id"
:goodsId="goodsDetail.id" :addressFlag="addressFlag" />
<!-- 商品规格 商品详情，以及默认参与活动的id-->
<popupGoods :addr="delivery" ref="popupGoods" @changed="changedGoods" @closeBuy="closePopupBuy" @queryCart="cartCount()" :goodsDetail="goodsDetail" :goodsSpec="goodsSpec" :id="productId"
<popupGoods :addr="delivery" ref="popupGoods" @changed="changedGoods" @closeBuy="closePopupBuy"
@queryCart="cartCount()" :goodsDetail="goodsDetail" :goodsSpec="goodsSpec" :id="productId"
v-if="goodsDetail.id " :pointDetail="pointDetail" @handleClickSku="init" :buyMask="buyMask" />
</view>
</view>
@ -367,7 +383,9 @@ export default {
},
},
mounted() {
const { windowHeight } = uni.getSystemInfoSync();
const {
windowHeight
} = uni.getSystemInfoSync();
let bottomHeight = 0;
let topHeight = 0;
uni.getSystemInfo({
@ -497,17 +515,22 @@ export default {
// originalPrice: this.goodsDetail.original || this.goodsDetail.price,
uuid: storage.getUuid(),
token: storage.getAccessToken(),
sign: this.storeDetail.yzfSign || '37ef9b97807d03c6741298ed4eb5b536d2d238e08a3c00fb01fe48f03a569974c99ad767e72c04b3165ef29aca2c488b505fe4ca',
mpSign: this.storeDetail.yzfMpSign || '32b8ff6f8d1c240be8d7fe51bdd6d44a6776ea86930afbe5c3c342825e942c914fc6126b6be1f003ab04aee1af9f442d2c33e1427529300671588866edaa4b12'
sign: this.storeDetail.yzfSign ||
'37ef9b97807d03c6741298ed4eb5b536d2d238e08a3c00fb01fe48f03a569974c99ad767e72c04b3165ef29aca2c488b505fe4ca',
mpSign: this.storeDetail.yzfMpSign ||
'32b8ff6f8d1c240be8d7fe51bdd6d44a6776ea86930afbe5c3c342825e942c914fc6126b6be1f003ab04aee1af9f442d2c33e1427529300671588866edaa4b12'
}
uni.navigateTo({
url: '/pages/product/customerservice/index?params=' + encodeURIComponent(JSON.stringify(params))
url: '/pages/product/customerservice/index?params=' + encodeURIComponent(JSON.stringify(
params))
})
// #endif
// #ifndef MP-WEIXIN
const sign = this.storeDetail.yzfSign || '37ef9b97807d03c6741298ed4eb5b536d2d238e08a3c00fb01fe48f03a569974c99ad767e72c04b3165ef29aca2c488b505fe4ca'
const sign = this.storeDetail.yzfSign ||
'37ef9b97807d03c6741298ed4eb5b536d2d238e08a3c00fb01fe48f03a569974c99ad767e72c04b3165ef29aca2c488b505fe4ca'
uni.navigateTo({
url: '/pages/tabbar/home/web-view?src=https://yzf.qq.com/xv/web/static/chat/index.html?sign=' + sign
url: '/pages/tabbar/home/web-view?src=https://yzf.qq.com/xv/web/static/chat/index.html?sign=' +
sign
})
// #endif
},
@ -789,8 +812,7 @@ export default {
arr.forEach((item) => {
let view = uni.createSelectorQuery().select("#" + item);
view
.fields(
{
.fields({
size: true,
},
(data) => {

15
pages/product/product/shop/-shop.vue
View File

@ -7,12 +7,16 @@
</view>
<view class="name-star star-con">
<text class="name">{{ storeDetail.storeName }}</text>
<view>
<!-- <view>
<text :class="{ star: storeDetail.store_service_credit > 0 }"></text>
<text :class="{ star: storeDetail.store_service_credit > 1 }"></text>
<text :class="{ star: storeDetail.store_service_credit > 2 }"></text>
<text :class="{ star: storeDetail.store_service_credit > 3 }"></text>
<text :class="{ star: storeDetail.store_service_credit > 4 }"></text>
</view> -->
<view class="desc">
<text>{{storeDetail.goodsNum || 0}}商品</text>
<text>{{storeDetail.collectionNum || 0}}关注</text>
</view>
</view>
<view class="to-store-btn" @click="tostorePage(goodsDetail)">
@ -139,6 +143,15 @@ export default {
font-weight: 700;
font-size: 28rpx;
line-height: 24px;
margin-left: 10px;
}
.desc {
font-size: 12px;
color: #999;
margin-left: 10px;
text{
margin-right: 10px;
}
}
}

32
pages/product/product/style.scss
View File

@ -130,12 +130,22 @@ page{
display: flex;
width: 100%;
background: #fff !important;
> div {
> div:nth-child(1) {
width: 50rpx;
}
> div:nth-child(2) {
flex: 1;
.headerList{
display: flex;
div{
flex: 1;
}
> .headerList {
flex: 8;
}
}
> div:nth-child(3) {
width: 100rpx;
}
justify-content: space-between;
}
@ -367,3 +377,19 @@ page {
background: #fff;
height: var(--status-bar-height);
}
// 快捷导航
.fast-icon{
background-color: #999;
border-radius: 50rpx;
font-size: 40rpx;
padding: 4rpx;
color: #FFFFFF;
}
.ml-20{
margin-left: 20rpx;
}
.fast-icon-dark {
color: #999;
background-color: #fff;
}