You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
305 lines
8.6 KiB
305 lines
8.6 KiB
<template>
|
|
<view @click="isMore = false">
|
|
<view class="goods-head" :style="'background:rgba(255,255,255,' + PageScrollTop / 100 + ')'">
|
|
<!-- 返回 -->
|
|
<view class="back" @click="onBack">
|
|
<view class="back-one" :class="{ action: PageScrollTop > 120 }">
|
|
<text></text>
|
|
</view>
|
|
</view>
|
|
<!-- tab切换 -->
|
|
<view class="head-tab" v-if="PageScrollTop > 120">
|
|
<view class="tab" :class="{'action':TabShow===0}" @click="onTab(0)">
|
|
<text>商品</text>
|
|
<text class="line"></text>
|
|
</view>
|
|
<view class="tab" :class="{'action':TabShow===1}" @click="onTab(1)">
|
|
<text>评价</text>
|
|
<text class="line"></text>
|
|
</view>
|
|
<view class="tab" :class="{'action':TabShow===2}" @click="onTab(2)">
|
|
<text>详情</text>
|
|
<text class="line"></text>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<!-- banner，标题 -->
|
|
<view class="banner-title">
|
|
<!-- banner -->
|
|
<view class="banner">
|
|
<swiper class="screen-swiper round-dot" indicator-dots="true" circular="true" autoplay="true" interval="5000"
|
|
duration="500">
|
|
<swiper-item v-for="(item, index) in swiperList" :key="index">
|
|
<image :src="item.url" mode="aspectFill"></image>
|
|
<!-- <video src="{{item.url}}" autoplay loop muted show-play-btn="{{false}}" controls="{{false
|
|
}}" objectFit="cover" wx:if="{{item.type == 'video'}}"></video> -->
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
<!-- 价格 -->
|
|
<view class="price-info" v-show="type==0">
|
|
<view class="price">
|
|
<text class="min">￥</text>
|
|
<text class="max">99</text>
|
|
<text class="min">.00</text>
|
|
</view>
|
|
<view class="info">
|
|
<!-- <view class="list" @click="onDepreciate">
|
|
<text class="iconfont icon-jiangjia"></text>
|
|
<text>降价通知</text>
|
|
</view> -->
|
|
<view class="list" @click="onAttention">
|
|
<text class="iconfont" :class="AttentionShow===0?'icon-guanzhu-off':'icon-guanzhu-on action'"></text>
|
|
<text>{{ AttentionShow === 0 ? '关注' : '已关注' }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 限时抢购 -->
|
|
<view class="flash-price" v-show="type==1">
|
|
<view class="price-item">
|
|
<view class="icon-item">
|
|
<text class="iconfont icon-flash-sale"></text>
|
|
</view>
|
|
<view class="price">
|
|
<view class="current-price">
|
|
<text class="min">￥</text>
|
|
<text class="max">99</text>
|
|
<text class="min">.00</text>
|
|
</view>
|
|
<view class="original-price">
|
|
<text>￥149.00</text>
|
|
</view>
|
|
</view>
|
|
<view class="tag">
|
|
<text class="iconfont icon-flash-naozhong"></text>
|
|
</view>
|
|
</view>
|
|
<view class="time-item">
|
|
<view class="title">
|
|
<text>距结束还剩：</text>
|
|
</view>
|
|
<view class="time">
|
|
<text class="num">02</text>
|
|
<text class="dot">:</text>
|
|
<text class="num">46</text>
|
|
<text class="dot">:</text>
|
|
<text class="num">52</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 标题 -->
|
|
<view class="goods-title">
|
|
<text>珠宝玉石</text>
|
|
</view>
|
|
<!-- 开通会员 -->
|
|
|
|
</view>
|
|
|
|
<!-- 评价 -->
|
|
<view class="evaluate-data" ref="evaluate">
|
|
<view class="title-more" @click="onEvaluate">
|
|
<view class="title">
|
|
<text>评价</text>
|
|
<text class="num">1</text>
|
|
</view>
|
|
<view class="more">
|
|
<text class="iconfont icon-more"></text>
|
|
</view>
|
|
</view>
|
|
<view class="evaluate-list">
|
|
<view class="user-info">
|
|
<view class="thumb">
|
|
<image src="/static/img/user_pic.jpg" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="nickname-grade">
|
|
<view class="nickname">
|
|
<text>爱笑的汤姆</text>
|
|
</view>
|
|
<view class="grade">
|
|
<text class="cuIcon-favorfill lg text-gray"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="content">
|
|
<view class="character">
|
|
<text class="two-omit">非常好</text>
|
|
</view>
|
|
|
|
<view class="thumb-list">
|
|
<view class="list">
|
|
<image :src="swiperList[0].url" mode="aspectFill"></image>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
<view class="look-all" @click="onEvaluate">
|
|
<text>查看全部评价</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 商品介绍 -->
|
|
<view class="products-introduction" ref="products" style="text-align: center;" >
|
|
<view class="title">
|
|
<text>图文详情</text>
|
|
</view>
|
|
<view style="background: #ffffff;padding-top:10px;">
|
|
<image :src="swiperList[0].url" mode="heightFix"></image>
|
|
</view>
|
|
</view>
|
|
<!-- 底部 -->
|
|
<view class="page-footer">
|
|
<view class="footer-fn">
|
|
<!-- <view class="list">
|
|
<text class="iconfont icon-kefu"></text>
|
|
<text>联系客服</text>
|
|
</view> -->
|
|
<view class="list" @click="onToCart">
|
|
<text class="iconfont icon-cart"></text>
|
|
<text>购物车</text>
|
|
</view>
|
|
</view>
|
|
<view class="footer-buy">
|
|
<view class="cart-add" @click="$refs['GoodsAttr'].show(2)">
|
|
<text>加入购物车</text>
|
|
</view>
|
|
<view class="buy-at" @click="$refs['GoodsAttr'].show(3)">
|
|
<text>立即购买</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 服务弹窗 -->
|
|
<goods-serve ref="GoodsServe"></goods-serve>
|
|
<!-- 优惠券 -->
|
|
<goods-coupon ref="GoodsCoupon"></goods-coupon>
|
|
<!-- 属性规格 -->
|
|
<goods-attr ref="GoodsAttr"></goods-attr>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import GoodsServe from '../../components/GoodsServe/GoodsServe.vue';
|
|
import GoodsCoupon from '../../components/GoodsCoupon/GoodsCoupon.vue';
|
|
import GoodsAttr from '../../components/GoodsAttr/GoodsAttr.vue';
|
|
|
|
export default {
|
|
components: {
|
|
GoodsServe,
|
|
GoodsCoupon,
|
|
GoodsAttr,
|
|
},
|
|
data() {
|
|
return {
|
|
TabShow: 0,
|
|
isMore: false,
|
|
AttentionShow: 0,
|
|
swiperList: [
|
|
|
|
],
|
|
web_content:
|
|
'<div class="m-img"><img src="https://zhedplus.oss-cn-hangzhou.aliyuncs.com/content_img/20191118/1fb5ff162f25fd4c7383bd998ff2fde9.jpg"><div class="tools" hidden><i class="fa fa-arrow-up move-up"></i><i class="fa fa-arrow-down move-down"></i><em class="move-remove" hidden ><i class="fa fa-times" aria-hidden="true"></i> 移除</em><div class="cover"></div></div></div>',
|
|
PageScrollTop: 0,
|
|
type: 0,
|
|
};
|
|
},
|
|
onLoad(params) {
|
|
console.log(params)
|
|
this.type = params.type||0;
|
|
this.swiperList.push({
|
|
id: 0,
|
|
type: 'image',
|
|
url: params.item
|
|
})
|
|
},
|
|
onPageScroll(e) {
|
|
this.PageScrollTop = e.scrollTop;
|
|
},
|
|
methods: {
|
|
/**
|
|
* 返回
|
|
*/
|
|
onBack() {
|
|
uni.navigateBack();
|
|
},
|
|
/**
|
|
* tab
|
|
*/
|
|
onTab(type) {
|
|
this.TabShow = type;
|
|
switch (type) {
|
|
case 0:
|
|
uni.pageScrollTo({
|
|
scrollTop: 0,
|
|
duration: 300
|
|
});
|
|
break;
|
|
case 1:
|
|
uni.createSelectorQuery().select(".evaluate-data").boundingClientRect((data) => { //data - 各种参数
|
|
uni.pageScrollTo({
|
|
scrollTop: this.PageScrollTop + data.top -50,
|
|
duration: 300
|
|
});
|
|
}).exec()
|
|
break;
|
|
case 2:
|
|
uni.createSelectorQuery().select(".products-introduction").boundingClientRect((data) => { //data - 各种参数
|
|
uni.pageScrollTo({
|
|
scrollTop: this.PageScrollTop + data.top - 50,
|
|
duration: 300
|
|
});
|
|
}).exec()
|
|
break;
|
|
}
|
|
},
|
|
/**
|
|
* 去购物车
|
|
*/
|
|
onToCart() {
|
|
uni.switchTab({
|
|
url: '/pages/cart/cart'
|
|
})
|
|
},
|
|
/**
|
|
* 降价通知点击
|
|
*/
|
|
onDepreciate() {
|
|
uni.showToast({
|
|
title: '降价通知提醒成功',
|
|
icon: 'success'
|
|
})
|
|
},
|
|
/**
|
|
* 关注点击
|
|
*/
|
|
onAttention() {
|
|
if (this.AttentionShow === 0) {
|
|
this.AttentionShow = 1;
|
|
uni.showToast({
|
|
title: '关注成功',
|
|
icon: 'none'
|
|
})
|
|
} else {
|
|
this.AttentionShow = 0;
|
|
uni.showToast({
|
|
title: '取消成功',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
|
|
},
|
|
/**
|
|
* 评价点击
|
|
*/
|
|
onEvaluate(){
|
|
uni.navigateTo({
|
|
url: '/pages/GoodsEvaluateList/GoodsEvaluateList'
|
|
})
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import 'GoodsDetails.scss';
|
|
</style>
|
|
|