523 lines
13 KiB
Vue
523 lines
13 KiB
Vue
<template>
|
||
<view class="main" style="padding-bottom: 160rpx;">
|
||
<!-- 头部 -->
|
||
<status-nav :ifReturn="false" :ifTitle="false" :backgroudColor="backgroudColor"></status-nav>
|
||
<!-- 顶部按钮 -->
|
||
<view class="top-btns" :style="{top:statusHeight+'px'}">
|
||
<view class="left">
|
||
<view class="btn" @tap="backEv">
|
||
<image src="/static/icon/icon-arrow-top.png" mode="heightFix"
|
||
style="height: 28rpx;margin-right:4rpx"></image>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
<!-- 内容区 -->
|
||
<view :style="{marginTop: -statusHeight-50+'px'}">
|
||
<!-- 轮播 -->
|
||
<view class="goods-banner">
|
||
<swiper-pu newRadius="0rpx" :bannerList="goodsInfo.images" :newHeight="goodsBannerHeight+'px'"
|
||
:newBottom="'18rpx'" :isplay="isplay" :isDot="false" :isNum="true"></swiper-pu>
|
||
</view>
|
||
<!-- 简介 -->
|
||
<view class="section-other goods-info" v-if="isLoading">
|
||
<view class="detail-price">
|
||
<view class="price" v-if="goodsInfo.price != 0">
|
||
<text>￥</text>
|
||
<text>{{goodsInfo.price.substr(0,goodsInfo.price.indexOf('.'))}}</text>
|
||
<text>{{goodsInfo.price.substr(goodsInfo.price.indexOf('.'),goodsInfo.price.length)}}</text>
|
||
</view>
|
||
<text class="amount">销量：{{goodsInfo.total_amount}}</text>
|
||
</view>
|
||
<view class="title">{{goodsInfo.name}}</view>
|
||
<view class="subtitle">{{goodsInfo.subtitle}}</view>
|
||
</view>
|
||
<!-- 选择 -->
|
||
<view class="section-other goods-chose" v-if="isLoading">
|
||
<view class="chose-item" @click="popupShow = true">
|
||
<view class="tit">
|
||
<text>选择</text>
|
||
</view>
|
||
<view class="btn">
|
||
<u-icon color="#999" size="18" name="arrow-right"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 标题 -->
|
||
<view class="pull-title">商品详情</view>
|
||
<!-- 详情 -->
|
||
<view class="section-other goods-details" v-if="isLoading">
|
||
<view class="rich">
|
||
<rich-text :nodes="goodsInfo.content"></rich-text>
|
||
</view>
|
||
</view>
|
||
<!-- 标题 -->
|
||
<!-- <view class="pull-title">相关推荐</view>
|
||
<view class="relevant-goods">
|
||
<view class="content">
|
||
<waterfallsFlow :list="goodsList" ref="waterfallsFlow">
|
||
<view v-for="(item, index) of goodsList" :key="index" slot="slot{{index}}"></view>
|
||
</waterfallsFlow>
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
|
||
|
||
|
||
<!-- 返回顶部 -->
|
||
<view class="back-top" :style="{zIndex:zIndex,opacity:zIndex==-1?0:1}" @tap="goTop">
|
||
<image src="/static/icon/icon-back-top.jpg" mode="widthFix"></image>
|
||
</view>
|
||
<!-- 尾部 -->
|
||
<view class="detail-foot">
|
||
<view class="collection-btn" @tap="goHome">
|
||
<u-icon name="home" color="#999" size="24"></u-icon>
|
||
<text>首页</text>
|
||
</view>
|
||
<!-- <view class="collection-btn" @tap="recordEv" v-if="goodsInfo.collected==0">
|
||
<u-icon name="star" color="#999" size="24"></u-icon>
|
||
<text>收藏</text>
|
||
</view>
|
||
<view class="collection-btn" @tap="unRecordEv" v-if="goodsInfo.collected==1">
|
||
<u-icon name="star-fill" color="#bd1121" size="24"></u-icon>
|
||
<text style="color: #bd1121;">已收藏</text>
|
||
</view> -->
|
||
|
||
<view class="collection-btn pr">
|
||
<button open-type="contact" bindcontact="handleContact" session-from="sessionFrom"
|
||
class="service-btns"></button>
|
||
<u-icon name="kefu-ermai" color="#999" size="24"></u-icon>
|
||
<text>客服</text>
|
||
</view>
|
||
<view class="cart-btn">
|
||
<!-- <view class="btn" @tap="addCart">加入购物车</view> -->
|
||
<view class="btn" @tap="popupShow = true">立即购买</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
|
||
|
||
<!--底部选择层-->
|
||
<u-popup :show="popupShow" tui-popup-class="tui-popup" @close="close">
|
||
<view class="tui-popup-box">
|
||
<view class="tui-product-box tui-padding mb20">
|
||
<image :src="baseHttps + goodsInfo.cover" class="tui-popup-img"></image>
|
||
<view class="tui-popup-price goods-info">
|
||
<view class="title line-2">
|
||
{{goodsInfo.name}}
|
||
</view>
|
||
<view class="detail-price m-t-10">
|
||
<view class="price">
|
||
<text>￥</text>
|
||
<text>{{specData.price}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="selectSpec" v-if="specData.title">
|
||
已选：{{specData.title}}
|
||
</view>
|
||
<scroll-view scroll-y class="tui-popup-scroll tui-padding" style="max-height: 600rpx;">
|
||
<view v-for="(item,index) in goodsInfo.spec.spec">
|
||
<view class="tui-scrollview-box">
|
||
<view class="tui-attr-title">{{item.title}}</view>
|
||
<view :class="itemed.show ? 'tui-attr-active':'tui-attr-item'" v-for="(itemed,indexed) in item.children"
|
||
:key="indexed" @click.stop="speClick(index,itemed.id)">
|
||
{{itemed.title}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="tui-number-box tui-bold tui-attr-title">
|
||
<view class="tui-attr-title">数量</view>
|
||
<u-number-box :max="99" integer :min="1" v-model="sku_list.num"></u-number-box>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="detail-foot">
|
||
<view class="cart-btn" style="width: 90%;margin: 0 auto;">
|
||
<view class="btn" @tap="byNow">立即购买</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import { getGoodsDetail, postCreate, getSpuList } from "@/api/index";
|
||
import swiperPu from '@/components/swipers/swiper-pu';
|
||
import waterfallsFlow from "@/components/maramlee-waterfalls-flow/maramlee-waterfalls-flow.vue";
|
||
export default {
|
||
components: {
|
||
swiperPu,
|
||
waterfallsFlow
|
||
},
|
||
data() {
|
||
return {
|
||
statusHeight: uni.getSystemInfoSync().statusBarHeight, //状态栏高度
|
||
baseHttps: `${getApp().globalData.hostapi}`, //接口链接
|
||
backgroudColor: 'none', //状态栏背景颜色
|
||
isplay: false, //是否自动轮播
|
||
playTimer: null, //间隔时间
|
||
goodsBannerHeight: 0, //轮播高度
|
||
zIndex: -1, //层级
|
||
goodsInfo: {}, //商品详情
|
||
id: 0, //商品id
|
||
isLoading: false,
|
||
address: '', //地址
|
||
|
||
goodsList: [], //相关商品
|
||
cartCount: 0, //购物车数量
|
||
userInfo: {}, //用户信息
|
||
|
||
|
||
popupShow: false,
|
||
|
||
sku_list:{
|
||
sku_id:'',
|
||
num:1
|
||
}, //选择的规格参数
|
||
|
||
allSpecsList:[], //所有的规格列表
|
||
specData:{}, //最后选择的规格信息
|
||
};
|
||
},
|
||
onLoad(op) {
|
||
|
||
// 获取商品id
|
||
if (op.id) this.id = op.id;
|
||
// 判断是否有定位
|
||
if (uni.getStorageSync('baseAddress')) {
|
||
this.address = uni.getStorageSync('baseAddress');
|
||
}
|
||
// 获取商品信息
|
||
this.getGoodsInfo();
|
||
// 获取购物车数量
|
||
// this.getCartCount();
|
||
const query = wx.createSelectorQuery().in(this);
|
||
query.select('.goods-banner').boundingClientRect((rect) => {
|
||
this.goodsBannerHeight = rect.height;
|
||
}).exec()
|
||
},
|
||
onPageScroll(object) {
|
||
if (object.scrollTop >= 5) {
|
||
this.backgroudColor = '#f7f7f7';
|
||
}
|
||
if (object.scrollTop <= 0) {
|
||
this.backgroudColor = 'none';
|
||
}
|
||
if (object.scrollTop > uni.getSystemInfoSync().windowHeight) {
|
||
this.zIndex = 999;
|
||
} else {
|
||
this.zIndex = -1;
|
||
}
|
||
},
|
||
onShareAppMessage(res) {
|
||
return {
|
||
title: this.goodsInfo.name,
|
||
path: `${uni.getStorageSync('page-path-options')}?account_id=${uni.getStorageSync('accountId')}`,
|
||
}
|
||
},
|
||
onHide() {
|
||
clearTimeout(this.playTimer);
|
||
this.isplay = false;
|
||
},
|
||
methods: {
|
||
//解析二维码
|
||
analysis(val) {
|
||
// #ifdef MP-WEIXIN
|
||
let str = unescape(val);
|
||
str = str.split('account_id=')[1];
|
||
uni.setStorageSync('account_id', str);
|
||
// #endif
|
||
},
|
||
|
||
// 获取商品详情
|
||
getGoodsInfo() {
|
||
let pargams = {
|
||
id :this.id
|
||
}
|
||
getGoodsDetail(pargams).then(res => {
|
||
if (res.code == 0) {
|
||
let bannerArr = [];
|
||
res.data.images.forEach(item => {
|
||
let obj = {
|
||
imgSrc: this.baseHttps + item,
|
||
}
|
||
bannerArr.push(obj);
|
||
})
|
||
res.data.images = bannerArr;
|
||
|
||
// 给每个规格添加show 标签
|
||
if(res.data.spec.is_multi == 1) {
|
||
this.sku_list.sku_id = res.data.spec.sku.id; //多规格默认的id
|
||
res.data.spec.spec.map(item => {
|
||
item.children.map(itemed => {
|
||
itemed.show = false;
|
||
})
|
||
item.children[0].show = true
|
||
})
|
||
}else {
|
||
this.sku_list.sku_id = res.data.spec.sku.id //单规格默认的id
|
||
this.specData = res.data.spec.sku;
|
||
}
|
||
|
||
this.goodsInfo = res.data;
|
||
this.goodsInfo.content = this.$toolAll.tools.escape2Html(res.data.content);
|
||
console.log(this.goodsInfo,'商品详情');
|
||
|
||
this.allSpecsList = this.goodsInfo.spec.sku_list;
|
||
if(this.goodsInfo.spec.is_multi == 1) {
|
||
this.getPrice(); //初始获取价格
|
||
}
|
||
this.isLoading = true;
|
||
// 获取商品列表
|
||
// this.getGoodsList();
|
||
} else {
|
||
this.$toolAll.tools.showToast(res.msg)
|
||
}
|
||
})
|
||
},
|
||
|
||
|
||
//返回事件
|
||
backEv() {
|
||
uni.navigateBack({
|
||
delta: 1,
|
||
fail: () => {
|
||
uni.reLaunch({
|
||
url: '/pages/home/home'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
// 页面跳转
|
||
goPage(url) {
|
||
uni.navigateTo({
|
||
url: url
|
||
})
|
||
},
|
||
|
||
// 返回顶部
|
||
goTop() {
|
||
uni.pageScrollTo({
|
||
scrollTop: 0,
|
||
duration: 300
|
||
});
|
||
},
|
||
goHome() {
|
||
uni.reLaunch({
|
||
url: '/pages/home/home'
|
||
})
|
||
},
|
||
|
||
// 关闭弹框
|
||
close() {
|
||
this.popupShow = false;
|
||
},
|
||
|
||
|
||
// 选择规格 index 为第几个规格列表，id 为当前规格列表的某个id
|
||
speClick(index,id) {
|
||
console.log(index,'当前id为: ' + id)
|
||
this.goodsInfo.spec.spec[index].children.forEach((item)=> {
|
||
if(item.id == id) {
|
||
item.show = true
|
||
}else {
|
||
item.show = false
|
||
}
|
||
})
|
||
this.getSkuId();
|
||
},
|
||
|
||
// 获取多规格最终提交的id
|
||
getSkuId() {
|
||
let skuArr = [];
|
||
this.goodsInfo.spec.spec.forEach((item,index) => {
|
||
const filteredItems = item.children.filter(item => item.show);
|
||
const ids = filteredItems.map(item => item.id);
|
||
skuArr.push(...ids)
|
||
})
|
||
let sku_id = skuArr.join('-');
|
||
const foundPerson = this.goodsInfo.spec.sku_list.find(person => person.indexes === sku_id);
|
||
this.sku_list.sku_id = foundPerson.id;
|
||
this.getPrice();
|
||
},
|
||
|
||
// 多规格最终的id 的价格
|
||
getPrice() {
|
||
const filteredArray = this.goodsInfo.spec.sku_list.filter(item => {
|
||
return item.id == this.sku_list.sku_id;
|
||
})
|
||
this.specData = filteredArray[0];
|
||
},
|
||
|
||
// 立即购买
|
||
byNow() {
|
||
if (this.$toolAll.tools.judgeAuth()) {
|
||
let newData = {
|
||
sku_list: this.sku_list,
|
||
type: this.goodsInfo.type
|
||
}
|
||
let queryString = `?data=${encodeURIComponent(JSON.stringify(newData))}`;
|
||
uni.navigateTo({
|
||
url: `/pages/cart/orderConfirm${queryString}`
|
||
})
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped>
|
||
.tui-popup {
|
||
border-top-left-radius: 24rpx;
|
||
border-top-right-radius: 24rpx;
|
||
padding-bottom: 40rpx;
|
||
}
|
||
|
||
.tui-popup-box {
|
||
position: relative;
|
||
padding: 34rpx 0 140rpx 0;
|
||
}
|
||
|
||
.tui-popup-btn {
|
||
width: 100%;
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
}
|
||
|
||
.tui-icon-close {
|
||
position: absolute;
|
||
top: 30rpx;
|
||
right: 30rpx;
|
||
}
|
||
|
||
.tui-product-box {
|
||
display: flex;
|
||
font-size: 24rpx;
|
||
padding-bottom: 30rpx;
|
||
}
|
||
|
||
.tui-popup-img {
|
||
height: 160rpx;
|
||
width: 160rpx;
|
||
border-radius: 14rpx;
|
||
display: block;
|
||
}
|
||
|
||
.tui-popup-price {
|
||
padding-left: 20rpx;
|
||
padding-bottom: 8rpx;
|
||
margin-top: 0;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
flex-direction: column;
|
||
width: calc(100% - 186rpx);
|
||
}
|
||
.tui-popup-price .title {
|
||
margin: 0;
|
||
font-weight: normal;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.tui-amount {
|
||
color: #ff201f;
|
||
font-size: 36rpx;
|
||
}
|
||
|
||
.tui-number {
|
||
font-size: 24rpx;
|
||
line-height: 24rpx;
|
||
padding-top: 12rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.tui-popup-scroll {
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.tui-scrollview-box {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.tui-attr-title {
|
||
padding: 20rpx 0;
|
||
color: #333;
|
||
font-weight: bold;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.tui-attr-box {
|
||
font-size: 0;
|
||
padding: 20rpx 0;
|
||
}
|
||
|
||
.tui-attr-item {
|
||
max-width: 100%;
|
||
min-width: 200rpx;
|
||
height: 62rpx;
|
||
display: -webkit-inline-flex;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #f7f7f7;
|
||
padding: 0 26rpx;
|
||
box-sizing: border-box;
|
||
border-radius: 32rpx;
|
||
margin-right: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
font-size: 26rpx;
|
||
border: 1rpx solid #f7f7f7;
|
||
}
|
||
|
||
.tui-attr-active {
|
||
background: #fcedea !important;
|
||
color: #e41f19;
|
||
position: relative;
|
||
max-width: 100%;
|
||
min-width: 200rpx;
|
||
height: 62rpx;
|
||
display: -webkit-inline-flex;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0 26rpx;
|
||
box-sizing: border-box;
|
||
border-radius: 32rpx;
|
||
margin-right: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
font-size: 26rpx;
|
||
border: 1rpx solid #e41f19;
|
||
}
|
||
|
||
.tui-number-box {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 20rpx 0 30rpx 0;
|
||
box-sizing: border-box;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.tui-padding {
|
||
padding: 0 30rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.rich img {
|
||
width: 100%;
|
||
display: block;
|
||
}
|
||
|
||
.selectSpec {
|
||
margin:0 0 10rpx 30rpx;
|
||
background-color: #eee;
|
||
border-radius: 20rpx;
|
||
line-height: 54rpx;
|
||
padding: 0 30rpx;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
font-size: 26rpx;
|
||
}
|
||
</style> |