|
|
|
|
@ -1,33 +1,39 @@
|
|
|
|
|
<template>
|
|
|
|
|
<view class="container">
|
|
|
|
|
|
|
|
|
|
<view class="carousel">
|
|
|
|
|
<swiper indicator-dots circular=true duration="400">
|
|
|
|
|
<swiper-item class="swiper-item" v-for="(item,index) in imgList" :key="index">
|
|
|
|
|
<view class="image-wrapper">
|
|
|
|
|
<image :src="item.src" class="loaded" mode="aspectFill"></image>
|
|
|
|
|
</view>
|
|
|
|
|
</swiper-item>
|
|
|
|
|
</swiper>
|
|
|
|
|
<u-swiper :list="imgList" :autoplay="false" indicatorStyle="right: 20px" duration="400" mode="number"
|
|
|
|
|
height="750" indicator-pos="bottomRight" class="swiper">
|
|
|
|
|
</u-swiper>
|
|
|
|
|
<view class="btn-box">
|
|
|
|
|
<view class="goback" @click="goBack">
|
|
|
|
|
<image src="@/static/icons/icon_back.png" mode=""></image>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="share" @click="share">
|
|
|
|
|
<image src="@/static/icons/icon_share.png" mode=""></image>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view class="introduce-section">
|
|
|
|
|
<text class="title">{{product.name}}</text><br>
|
|
|
|
|
<text class="title2">{{product.subTitle}}</text>
|
|
|
|
|
<view class="price-box">
|
|
|
|
|
<text class="price-tip">¥</text>
|
|
|
|
|
<text class="price">{{product.price}}</text>
|
|
|
|
|
<text class="m-price">¥{{product.originalPrice}}</text>
|
|
|
|
|
<!-- <text class="coupon-tip">7折</text> -->
|
|
|
|
|
</view>
|
|
|
|
|
<view class="bot-row">
|
|
|
|
|
<text class="title">{{product.name}}</text><br>
|
|
|
|
|
<text class="title2">{{product.subTitle}}</text>
|
|
|
|
|
|
|
|
|
|
<!-- <view class="bot-row">
|
|
|
|
|
<text>销量: {{product.sale}}</text>
|
|
|
|
|
<text>库存: {{product.stock}}</text>
|
|
|
|
|
<text>浏览量: 768</text>
|
|
|
|
|
</view>
|
|
|
|
|
</view> -->
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<!-- 分享 -->
|
|
|
|
|
<view class="share-section" @click="share">
|
|
|
|
|
<!-- <view class="share-section" @click="share">
|
|
|
|
|
<view class="share-icon">
|
|
|
|
|
<text class="yticon icon-xingxing"></text>
|
|
|
|
|
返
|
|
|
|
|
@ -39,7 +45,7 @@
|
|
|
|
|
<text class="yticon icon-you"></text>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
</view>
|
|
|
|
|
</view> -->
|
|
|
|
|
|
|
|
|
|
<view class="c-list">
|
|
|
|
|
<view class="c-row b-b" @click="toggleSpec">
|
|
|
|
|
@ -78,7 +84,7 @@
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<!-- 评价 -->
|
|
|
|
|
<view class="eva-section">
|
|
|
|
|
<!-- <view class="eva-section">
|
|
|
|
|
<view class="e-header">
|
|
|
|
|
<text class="tit">评价</text>
|
|
|
|
|
<text>(86)</text>
|
|
|
|
|
@ -86,7 +92,8 @@
|
|
|
|
|
<text class="yticon icon-you"></text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="eva-box">
|
|
|
|
|
<image class="portrait" src="http://img3.imgtn.bdimg.com/it/u=1150341365,1327279810&fm=26&gp=0.jpg" mode="aspectFill"></image>
|
|
|
|
|
<image class="portrait" src="http://img3.imgtn.bdimg.com/it/u=1150341365,1327279810&fm=26&gp=0.jpg"
|
|
|
|
|
mode="aspectFill"></image>
|
|
|
|
|
<view class="right">
|
|
|
|
|
<text class="name">Leo yo</text>
|
|
|
|
|
<text class="con">商品收到了，79元两件，质量不错，试了一下有点瘦，但是加个外罩很漂亮，我很喜欢</text>
|
|
|
|
|
@ -96,7 +103,7 @@
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view> -->
|
|
|
|
|
|
|
|
|
|
<!-- 品牌信息 -->
|
|
|
|
|
<view class="brand-info">
|
|
|
|
|
@ -123,22 +130,29 @@
|
|
|
|
|
|
|
|
|
|
<!-- 底部操作菜单 -->
|
|
|
|
|
<view class="page-bottom">
|
|
|
|
|
<navigator url="/pages/index/index" open-type="switchTab" class="p-b-btn">
|
|
|
|
|
<text class="yticon icon-xiatubiao--copy"></text>
|
|
|
|
|
<text>首页</text>
|
|
|
|
|
</navigator>
|
|
|
|
|
<navigator url="/pages/cart/cart" open-type="switchTab" class="p-b-btn">
|
|
|
|
|
<text class="yticon icon-gouwuche"></text>
|
|
|
|
|
<text>购物车</text>
|
|
|
|
|
<!-- <text class="yticon icon-gouwuche"></text> -->
|
|
|
|
|
<!-- <text>购物车</text> -->
|
|
|
|
|
<image class="pdicon" src="@/static/index/cart.svg"></image>
|
|
|
|
|
<u-badge type="error" class="cart-badge" :overflow-count="9" :count="cartNum"></u-badge>
|
|
|
|
|
|
|
|
|
|
</navigator>
|
|
|
|
|
<navigator url="/pages/index/index" open-type="switchTab" class="p-b-btn">
|
|
|
|
|
<!-- <text class="yticon icon-xiatubiao--copy"></text> -->
|
|
|
|
|
<!-- <text>首页</text> -->
|
|
|
|
|
<image class="pdicon" src="@/static/index/serverCenter.svg"></image>
|
|
|
|
|
</navigator>
|
|
|
|
|
<view class="p-b-btn" :class="{active: favorite}" @click="toFavorite">
|
|
|
|
|
<text class="yticon icon-shoucang"></text>
|
|
|
|
|
<text>收藏</text>
|
|
|
|
|
<!-- <text class="yticon icon-shoucang"></text> -->
|
|
|
|
|
<!-- <text>收藏</text> -->
|
|
|
|
|
<image v-if="favorite" class="pdicon" src="@/static/index/collections-active.svg"></image>
|
|
|
|
|
<image v-else class="pdicon" src="@/static/index/collections.svg"></image>
|
|
|
|
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view class="action-btn-group">
|
|
|
|
|
<button type="primary" class=" action-btn no-border buy-now-btn" @click="buy">立即购买</button>
|
|
|
|
|
<button type="primary" class=" action-btn no-border add-cart-btn" @click="addToCart">加入购物车</button>
|
|
|
|
|
<button type="primary" class=" action-btn no-border buy-now-btn" @click="buy">立即购买</button>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
@ -164,8 +178,9 @@
|
|
|
|
|
<view v-for="(item,index) in specList" :key="index" class="attr-list">
|
|
|
|
|
<text>{{item.name}}</text>
|
|
|
|
|
<view class="item-list">
|
|
|
|
|
<text v-for="(childItem, childIndex) in specChildList" v-if="childItem.pid === item.id" :key="childIndex" class="tit"
|
|
|
|
|
:class="{selected: childItem.selected}" @click="selectSpec(childIndex, childItem.pid)">
|
|
|
|
|
<text v-for="(childItem, childIndex) in specChildList" v-if="childItem.pid === item.id"
|
|
|
|
|
:key="childIndex" class="tit" :class="{selected: childItem.selected}"
|
|
|
|
|
@click="selectSpec(childIndex, childItem.pid)">
|
|
|
|
|
{{childItem.name}}
|
|
|
|
|
</text>
|
|
|
|
|
</view>
|
|
|
|
|
@ -218,7 +233,8 @@
|
|
|
|
|
<script>
|
|
|
|
|
import share from '@/components/share.vue';
|
|
|
|
|
import {
|
|
|
|
|
fetchProductDetail
|
|
|
|
|
fetchProductDetail,
|
|
|
|
|
fetchProductLuooDetail
|
|
|
|
|
} from '@/api/product.js';
|
|
|
|
|
import {
|
|
|
|
|
addCartItem
|
|
|
|
|
@ -235,6 +251,9 @@
|
|
|
|
|
deleteProductCollection,
|
|
|
|
|
productCollectionDetail
|
|
|
|
|
} from '@/api/memberProductCollection.js';
|
|
|
|
|
import {
|
|
|
|
|
fetchCartList
|
|
|
|
|
} from '@/api/cart.js';
|
|
|
|
|
import {
|
|
|
|
|
mapState
|
|
|
|
|
} from 'vuex';
|
|
|
|
|
@ -294,7 +313,8 @@
|
|
|
|
|
attrList: [],
|
|
|
|
|
promotionTipList: [],
|
|
|
|
|
couponState: 0,
|
|
|
|
|
couponList: []
|
|
|
|
|
couponList: [],
|
|
|
|
|
cartNum: 0,
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
async onLoad(options) {
|
|
|
|
|
@ -326,7 +346,11 @@
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
async loadData(id) {
|
|
|
|
|
fetchProductDetail(id).then(response => {
|
|
|
|
|
// fetchProductLuooDetail(id).then(response => {
|
|
|
|
|
// console.log(response)
|
|
|
|
|
// this.product = response;
|
|
|
|
|
// });
|
|
|
|
|
await fetchProductDetail(id).then(async response => {
|
|
|
|
|
this.product = response.data.product;
|
|
|
|
|
this.skuStockList = response.data.skuStockList;
|
|
|
|
|
this.brand = response.data.brand;
|
|
|
|
|
@ -336,9 +360,10 @@
|
|
|
|
|
this.initAttrList(response.data);
|
|
|
|
|
this.initPromotionTipList(response.data);
|
|
|
|
|
this.initProductDesc();
|
|
|
|
|
this.handleReadHistory();
|
|
|
|
|
await this.handleReadHistory();
|
|
|
|
|
this.initProductCollection();
|
|
|
|
|
});
|
|
|
|
|
this.getCartNum()
|
|
|
|
|
},
|
|
|
|
|
//规格弹窗开关
|
|
|
|
|
toggleSpec() {
|
|
|
|
|
@ -366,10 +391,10 @@
|
|
|
|
|
toggleCoupon(type) {
|
|
|
|
|
fetchProductCouponList(this.product.id).then(response => {
|
|
|
|
|
this.couponList = response.data;
|
|
|
|
|
if(this.couponList==null||this.couponList.length==0){
|
|
|
|
|
if (this.couponList == null || this.couponList.length == 0) {
|
|
|
|
|
uni.showToast({
|
|
|
|
|
title:"暂无可领优惠券",
|
|
|
|
|
icon:"none"
|
|
|
|
|
title: "暂无可领优惠券",
|
|
|
|
|
icon: "none"
|
|
|
|
|
})
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
@ -468,7 +493,9 @@
|
|
|
|
|
for (let item of tempPics) {
|
|
|
|
|
if (item != null && item != '') {
|
|
|
|
|
this.imgList.push({
|
|
|
|
|
src: item
|
|
|
|
|
"src": item,
|
|
|
|
|
"image": item,
|
|
|
|
|
"type": 'image'
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@ -578,6 +605,7 @@
|
|
|
|
|
//初始化商品详情信息
|
|
|
|
|
initProductDesc() {
|
|
|
|
|
let rawhtml = this.product.detailMobileHtml;
|
|
|
|
|
if(!rawhtml){ return}
|
|
|
|
|
let tempNode = document.createElement('div');
|
|
|
|
|
tempNode.innerHTML = rawhtml;
|
|
|
|
|
let imgs = tempNode.getElementsByTagName('img');
|
|
|
|
|
@ -590,6 +618,7 @@
|
|
|
|
|
},
|
|
|
|
|
//处理创建浏览记录
|
|
|
|
|
handleReadHistory() {
|
|
|
|
|
console.log('handleReadHistory')
|
|
|
|
|
if (this.hasLogin) {
|
|
|
|
|
let data = {
|
|
|
|
|
productId: this.product.id,
|
|
|
|
|
@ -661,6 +690,7 @@
|
|
|
|
|
title: response.message,
|
|
|
|
|
duration: 1500
|
|
|
|
|
})
|
|
|
|
|
this.getCartNum()
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
//检查登录状态并弹出登录框
|
|
|
|
|
@ -688,6 +718,7 @@
|
|
|
|
|
},
|
|
|
|
|
//初始化收藏状态
|
|
|
|
|
initProductCollection() {
|
|
|
|
|
console.log('this.hasLogin', this.hasLogin)
|
|
|
|
|
if (this.hasLogin) {
|
|
|
|
|
productCollectionDetail({
|
|
|
|
|
productId: this.product.id
|
|
|
|
|
@ -697,12 +728,22 @@
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
//跳转到品牌详情页
|
|
|
|
|
navToBrandDetail(){
|
|
|
|
|
navToBrandDetail() {
|
|
|
|
|
let id = this.brand.id;
|
|
|
|
|
uni.navigateTo({
|
|
|
|
|
url: `/pages/brand/brandDetail?id=${id}`
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
// 返回
|
|
|
|
|
goBack() {
|
|
|
|
|
uni.navigateBack()
|
|
|
|
|
},
|
|
|
|
|
// 购物车数量
|
|
|
|
|
getCartNum() {
|
|
|
|
|
fetchCartList().then(response => {
|
|
|
|
|
this.cartNum = response.data.reduce((sum, item) => sum + item.quantity, 0);
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
@ -712,6 +753,7 @@
|
|
|
|
|
page {
|
|
|
|
|
background: $page-color-base;
|
|
|
|
|
padding-bottom: 160upx;
|
|
|
|
|
padding-top: var(--status-bar-height);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.icon-you {
|
|
|
|
|
@ -722,9 +764,26 @@
|
|
|
|
|
.carousel {
|
|
|
|
|
height: 722upx;
|
|
|
|
|
position: relative;
|
|
|
|
|
.btn-box {
|
|
|
|
|
width: 100vw;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: calc(var(--status-bar-height) + 38upx);
|
|
|
|
|
left: 0upx;
|
|
|
|
|
padding: 38upx;
|
|
|
|
|
@include flex(x, center, center);
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
/* align-self: ; */
|
|
|
|
|
view image {
|
|
|
|
|
width: 60upx;
|
|
|
|
|
height: 60upx;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
swiper {
|
|
|
|
|
.swiper {
|
|
|
|
|
height: 100%;
|
|
|
|
|
.u-swiper-indicator {
|
|
|
|
|
bottom: 36upx!important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image-wrapper {
|
|
|
|
|
@ -750,7 +809,7 @@
|
|
|
|
|
/* 标题简介 */
|
|
|
|
|
.introduce-section {
|
|
|
|
|
background: #fff;
|
|
|
|
|
padding: 20upx 30upx;
|
|
|
|
|
padding: 36upx;
|
|
|
|
|
|
|
|
|
|
.title {
|
|
|
|
|
font-size: 32upx;
|
|
|
|
|
@ -996,6 +1055,9 @@
|
|
|
|
|
.detail-desc {
|
|
|
|
|
background: #fff;
|
|
|
|
|
margin-top: 16upx;
|
|
|
|
|
/* margin-bottom: 60upx; */
|
|
|
|
|
margin-bottom: constant(safe-area-inset-bottom);
|
|
|
|
|
margin-bottom: env(safe-area-inset-bottom);
|
|
|
|
|
|
|
|
|
|
.d-header {
|
|
|
|
|
display: flex;
|
|
|
|
|
@ -1215,17 +1277,18 @@
|
|
|
|
|
/* 底部操作菜单 */
|
|
|
|
|
.page-bottom {
|
|
|
|
|
position: fixed;
|
|
|
|
|
left: 30upx;
|
|
|
|
|
bottom: 30upx;
|
|
|
|
|
left: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
z-index: 95;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
width: 690upx;
|
|
|
|
|
height: 100upx;
|
|
|
|
|
background: rgba(255, 255, 255, .9);
|
|
|
|
|
box-shadow: 0 0 20upx 0 rgba(0, 0, 0, .5);
|
|
|
|
|
border-radius: 16upx;
|
|
|
|
|
width: 100vw;
|
|
|
|
|
height: 144upx;
|
|
|
|
|
background: #ffffff;
|
|
|
|
|
box-sizing: content-box;
|
|
|
|
|
padding-bottom: constant(safe-area-inset-bottom);
|
|
|
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
|
|
|
|
|
|
|
|
.p-b-btn {
|
|
|
|
|
display: flex;
|
|
|
|
|
@ -1236,6 +1299,11 @@
|
|
|
|
|
color: $font-color-base;
|
|
|
|
|
width: 96upx;
|
|
|
|
|
height: 80upx;
|
|
|
|
|
position: relative;
|
|
|
|
|
.cart-badge>view {
|
|
|
|
|
top: 0upx !important;
|
|
|
|
|
right: 0upx !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.yticon {
|
|
|
|
|
font-size: 40upx;
|
|
|
|
|
@ -1243,6 +1311,11 @@
|
|
|
|
|
color: $font-color-light;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.pdicon {
|
|
|
|
|
width: 48upx;
|
|
|
|
|
height: 48upx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.active,
|
|
|
|
|
&.active .yticon {
|
|
|
|
|
color: $uni-color-primary;
|
|
|
|
|
@ -1261,25 +1334,10 @@
|
|
|
|
|
.action-btn-group {
|
|
|
|
|
display: flex;
|
|
|
|
|
height: 76upx;
|
|
|
|
|
border-radius: 100px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
box-shadow: 0 20upx 40upx -16upx #fa436a;
|
|
|
|
|
box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
|
|
|
|
|
background: linear-gradient(to right, #ffac30, #fa436a, #F56C6C);
|
|
|
|
|
margin-left: 20upx;
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
&:after {
|
|
|
|
|
content: '';
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 50%;
|
|
|
|
|
right: 50%;
|
|
|
|
|
transform: translateY(-50%);
|
|
|
|
|
height: 28upx;
|
|
|
|
|
width: 0;
|
|
|
|
|
border-right: 1px solid rgba(255, 255, 255, .5);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.action-btn {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
@ -1288,9 +1346,19 @@
|
|
|
|
|
height: 100%;
|
|
|
|
|
font-size: $font-base;
|
|
|
|
|
padding: 0;
|
|
|
|
|
border-radius: 0;
|
|
|
|
|
background: transparent;
|
|
|
|
|
border-radius: 60upx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.action-btn.add-cart-btn {
|
|
|
|
|
background-color: rgba(0, 0, 0, 0.05);
|
|
|
|
|
color: rgba(0, 0, 0, 0.95);
|
|
|
|
|
margin-right: 10upx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.action-btn.buy-now-btn {
|
|
|
|
|
background-color: #CC342D;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
