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 = { const dev = {
common: "https://common-api.pickmall.cn", common: "https://common-api.pickmall.cn",
buyer: "https://buyer-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 = { const prod = {
// common: 'http://192.168.0.109:8890',
// buyer: 'http://192.168.0.109:8888',
common: "https://common-api.pickmall.cn", common: "https://common-api.pickmall.cn",
buyer: "https://buyer-api.pickmall.cn", buyer: "https://buyer-api.pickmall.cn",

162
pages/product/goods.vue
View File

@ -7,44 +7,50 @@
<!-- 仅h5有效 打开App --> <!-- 仅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" <shares v-if="shareFlage && goodsDetail.id" :skuId="this.routerVal.id" :goodsId="this.routerVal.goodsId"
:thumbnail="goodsDetail.thumbnail" :goodsName="goodsDetail.goodsName" type="goods" @close="shareFlage = false" /> :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"> <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="headerRow">
<div class="backs" @click="back()"> <div class="backs" @click="back()">
<u-icon name="arrow-left" color="#8e8e8e"></u-icon> <u-icon name="arrow-left" color="#8e8e8e"></u-icon>
</div> </div>
<div class="headerList" :class="headerFlag ? 'tab-bar' : 'tab-bar scoll-hide'"> <div :class="headerFlag ? 'tab-bar' : 'tab-bar scoll-hide'">
<div class="headerRow"> <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)"> <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 }} {{ header.text }}
</div> </div>
</div> </div>
</div> </div>
<div class="share" @click="shareChange()"> <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>
</div> </div>
</u-navbar> </u-navbar>
<view class="showBack" v-show="!headerFlag"> <view class="showBack" v-show="!headerFlag">
<u-row> <div class="headerRow">
<u-col :span="2" @click="back()"> <div @click="back()">
<div class="iconBag" style="text-align: center"> <u-icon name="arrow-left" class="fast-icon"></u-icon>
<image class="headerImg" src="/static/bagBack.png" alt=""></image> </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> </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> </view>
<view class="product-container" :style="{ height: productRefHeight }" ref="productRef" id="productRef"> <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> <view>
<!-- 轮播图 --> <!-- 轮播图 -->
<GoodsSwiper id="main1" :res="imgList" /> <GoodsSwiper id="main1" :res="imgList" />
@ -60,8 +66,10 @@
{{ goodsDetail.goodsName || "" }} {{ goodsDetail.goodsName || "" }}
</view> </view>
<view class="favorite" @click="clickFavorite(goodsDetail.id)"> <view class="favorite" @click="clickFavorite(goodsDetail.id)">
<u-icon size="30" :color="favorite ? '#f2270c' : '#262626'" :name="favorite ? 'heart-fill' : 'heart'"></u-icon> <u-icon size="30" :color="favorite ? '#f2270c' : '#262626'"
<view :style="{ color: favorite ? '#f2270c' : '#262626' }">{{ favorite ? "已收藏" : "收藏" }}</view> :name="favorite ? 'heart-fill' : 'heart'"></u-icon>
<view :style="{ color: favorite ? '#f2270c' : '#262626' }">
{{ favorite ? "已收藏" : "收藏" }}</view>
</view> </view>
</view> </view>
<!-- 商品描述 --> <!-- 商品描述 -->
@ -75,18 +83,22 @@
<view class="-goods-flex"> <view class="-goods-flex">
<!-- 如果有积分显示积分 --> <!-- 如果有积分显示积分 -->
<view class="-goods-price" v-if="goodsDetail.price != undefined"> <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>
</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] formatPrice(goodsDetail.price)[1]
}} </span> }} </span>
</view> </view>
<view class="-goods-price" v-else> ¥<span class="price">0 </span>.00 </view> <view class="-goods-price" v-else> ¥<span class="price">0 </span>.00 </view>
<view class="favorite" @click="clickFavorite(goodsDetail.id)"> <view class="favorite" @click="clickFavorite(goodsDetail.id)">
<u-icon size="30" :color="favorite ? '#f2270c' : '#262626'" :name="favorite ? 'heart-fill' : 'heart'"></u-icon> <u-icon size="30" :color="favorite ? '#f2270c' : '#262626'"
<view :style="{ color: favorite ? '#f2270c' : '#262626' }">{{ favorite ? "已收藏" : "收藏" }}</view> :name="favorite ? 'heart-fill' : 'heart'"></u-icon>
<view :style="{ color: favorite ? '#f2270c' : '#262626' }">
{{ favorite ? "已收藏" : "收藏" }}</view>
</view> </view>
</view> </view>
<view class="-goods-name desc-blod"> <view class="-goods-name desc-blod">
@ -113,7 +125,8 @@
</view> </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-box">
<view class="card-flex" @click="shutMask(4)"> <view class="card-flex" @click="shutMask(4)">
@ -146,7 +159,8 @@
<Evaluation id="main5" :goodsDetail="goodsDetail" v-if="goodsDetail.id" /> <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" /> <GoodsIntro id="main9" :res="goodsDetail" :goodsId="goodsDetail.goodsId" v-if="goodsDetail.id" />
@ -211,10 +225,12 @@
</view> </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--> <!-- 商品规格 商品详情，以及默认参与活动的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" /> v-if="goodsDetail.id " :pointDetail="pointDetail" @handleClickSku="init" :buyMask="buyMask" />
</view> </view>
</view> </view>
@ -222,35 +238,35 @@
</template> </template>
<script> <script>
/************接口API***************/ /************接口API***************/
import { import {
getGoods, getGoods,
getGoodsList, getGoodsList,
getMpScene, getMpScene,
getGoodsDistribution, getGoodsDistribution,
} from "@/api/goods.js"; } from "@/api/goods.js";
import * as API_trade from "@/api/trade.js"; import * as API_trade from "@/api/trade.js";
import * as API_Members from "@/api/members.js"; import * as API_Members from "@/api/members.js";
import * as API_store from "@/api/store.js"; import * as API_store from "@/api/store.js";
/************请求存储***************/ /************请求存储***************/
import storage from "@/utils/storage.js"; import storage from "@/utils/storage.js";
/************组件***************/ /************组件***************/
import PromotionLayout from "./product/promotion/-promotion"; //促销组件 import PromotionLayout from "./product/promotion/-promotion"; //促销组件
import PromotionDetailsLayout from "./product/promotion/-promotion-details"; //促销活动详情 import PromotionDetailsLayout from "./product/promotion/-promotion-details"; //促销活动详情
import PromotionAssembleLayout from "./product/promotion/-promotion-assemble-promotions"; //促销活动条 import PromotionAssembleLayout from "./product/promotion/-promotion-assemble-promotions"; //促销活动条
import PromotionAssembleListLayout from "./product/promotion/-promotion-assemble-list"; //拼团用户列表 import PromotionAssembleListLayout from "./product/promotion/-promotion-assemble-list"; //拼团用户列表
import PromotionCoupon from "./product/promotion/-promotion-coupon"; //优惠券组件 import PromotionCoupon from "./product/promotion/-promotion-coupon"; //优惠券组件
import GoodsIntro from "./product/goods/-goods-intro"; //商品介绍组件 import GoodsIntro from "./product/goods/-goods-intro"; //商品介绍组件
import GoodsRecommend from "./product/goods/-goods-recommend"; //宝贝推荐 import GoodsRecommend from "./product/goods/-goods-recommend"; //宝贝推荐
import storeLayout from "./product/shop/-shop"; //店铺组件 import storeLayout from "./product/shop/-shop"; //店铺组件
import Evaluation from "./product/evaluation/-evaluation"; //评价组件 import Evaluation from "./product/evaluation/-evaluation"; //评价组件
import GoodsSwiper from "./product/goods/-goods-swiper"; //轮播图组件 import GoodsSwiper from "./product/goods/-goods-swiper"; //轮播图组件
import popupGoods from "./product/popup/goods"; //购物车商品的模块 import popupGoods from "./product/popup/goods"; //购物车商品的模块
import popupAddress from "./product/popup/address"; //地址选择模块 import popupAddress from "./product/popup/address"; //地址选择模块
import shares from "@/components/m-share/index"; //分享 import shares from "@/components/m-share/index"; //分享
export default { export default {
components: { components: {
shares, shares,
PromotionLayout, PromotionLayout,
@ -367,15 +383,17 @@ export default {
}, },
}, },
mounted() { mounted() {
const { windowHeight } = uni.getSystemInfoSync(); const {
windowHeight
} = uni.getSystemInfoSync();
let bottomHeight = 0; let bottomHeight = 0;
let topHeight = 0; let topHeight = 0;
uni.getSystemInfo({ uni.getSystemInfo({
success: function (res) { success: function(res) {
// res - 各种参数 // res - 各种参数
let bottom = uni.createSelectorQuery().select(".page-bottom"); let bottom = uni.createSelectorQuery().select(".page-bottom");
bottom bottom
.boundingClientRect(function (data) { .boundingClientRect(function(data) {
if (data && data.height) { if (data && data.height) {
//data - 各种参数 //data - 各种参数
bottomHeight = data.height; // 获取元素宽度 bottomHeight = data.height; // 获取元素宽度
@ -384,7 +402,7 @@ export default {
.exec(); .exec();
let top = uni.createSelectorQuery().select(".header"); let top = uni.createSelectorQuery().select(".header");
top top
.boundingClientRect(function (data) { .boundingClientRect(function(data) {
if (data && data.height) { if (data && data.height) {
//data - 各种参数 //data - 各种参数
topHeight = data.height; // 获取元素宽度 topHeight = data.height; // 获取元素宽度
@ -486,7 +504,7 @@ export default {
this.getGoodsCollectionFun(this.goodsDetail.id); this.getGoodsCollectionFun(this.goodsDetail.id);
} }
}, },
linkMsgDetail () { // 客服 linkMsgDetail() { // 客服
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
const params = { const params = {
storeName: this.storeDetail.storeName, storeName: this.storeDetail.storeName,
@ -497,17 +515,22 @@ export default {
// originalPrice: this.goodsDetail.original || this.goodsDetail.price, // originalPrice: this.goodsDetail.original || this.goodsDetail.price,
uuid: storage.getUuid(), uuid: storage.getUuid(),
token: storage.getAccessToken(), token: storage.getAccessToken(),
sign: this.storeDetail.yzfSign || '37ef9b97807d03c6741298ed4eb5b536d2d238e08a3c00fb01fe48f03a569974c99ad767e72c04b3165ef29aca2c488b505fe4ca', sign: this.storeDetail.yzfSign ||
mpSign: this.storeDetail.yzfMpSign || '32b8ff6f8d1c240be8d7fe51bdd6d44a6776ea86930afbe5c3c342825e942c914fc6126b6be1f003ab04aee1af9f442d2c33e1427529300671588866edaa4b12' '37ef9b97807d03c6741298ed4eb5b536d2d238e08a3c00fb01fe48f03a569974c99ad767e72c04b3165ef29aca2c488b505fe4ca',
mpSign: this.storeDetail.yzfMpSign ||
'32b8ff6f8d1c240be8d7fe51bdd6d44a6776ea86930afbe5c3c342825e942c914fc6126b6be1f003ab04aee1af9f442d2c33e1427529300671588866edaa4b12'
} }
uni.navigateTo({ uni.navigateTo({
url: '/pages/product/customerservice/index?params=' + encodeURIComponent(JSON.stringify(params)) url: '/pages/product/customerservice/index?params=' + encodeURIComponent(JSON.stringify(
params))
}) })
// #endif // #endif
// #ifndef MP-WEIXIN // #ifndef MP-WEIXIN
const sign = this.storeDetail.yzfSign || '37ef9b97807d03c6741298ed4eb5b536d2d238e08a3c00fb01fe48f03a569974c99ad767e72c04b3165ef29aca2c488b505fe4ca' const sign = this.storeDetail.yzfSign ||
'37ef9b97807d03c6741298ed4eb5b536d2d238e08a3c00fb01fe48f03a569974c99ad767e72c04b3165ef29aca2c488b505fe4ca'
uni.navigateTo({ 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 // #endif
}, },
@ -789,8 +812,7 @@ export default {
arr.forEach((item) => { arr.forEach((item) => {
let view = uni.createSelectorQuery().select("#" + item); let view = uni.createSelectorQuery().select("#" + item);
view view
.fields( .fields({
{
size: true, size: true,
}, },
(data) => { (data) => {
@ -833,14 +855,14 @@ export default {
this.shareFlage = true; this.shareFlage = true;
}, },
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
@import "./product/mp-goods.scss"; @import "./product/mp-goods.scss";
// #endif // #endif
@import "./product/style.scss"; @import "./product/style.scss";
@import "./product/product.scss"; @import "./product/product.scss";
</style> </style>

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

@ -7,12 +7,16 @@
</view> </view>
<view class="name-star star-con"> <view class="name-star star-con">
<text class="name">{{ storeDetail.storeName }}</text> <text class="name">{{ storeDetail.storeName }}</text>
<view> <!-- <view>
<text :class="{ star: storeDetail.store_service_credit > 0 }"></text> <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 > 1 }"></text>
<text :class="{ star: storeDetail.store_service_credit > 2 }"></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 > 3 }"></text>
<text :class="{ star: storeDetail.store_service_credit > 4 }"></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> </view>
<view class="to-store-btn" @click="tostorePage(goodsDetail)"> <view class="to-store-btn" @click="tostorePage(goodsDetail)">
@ -139,6 +143,15 @@ export default {
font-weight: 700; font-weight: 700;
font-size: 28rpx; font-size: 28rpx;
line-height: 24px; 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; display: flex;
width: 100%; width: 100%;
background: #fff !important; background: #fff !important;
> div { > div:nth-child(1) {
width: 50rpx;
}
> div:nth-child(2) {
flex: 1;
.headerList{
display: flex;
div{
flex: 1; flex: 1;
} }
> .headerList {
flex: 8;
} }
}
> div:nth-child(3) {
width: 100rpx;
}
justify-content: space-between; justify-content: space-between;
} }
@ -367,3 +377,19 @@ page {
background: #fff; background: #fff;
height: var(--status-bar-height); 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;
}