admingit/WechatOwnerService
1
0
Fork 0
mirror of https://gitee.com/java110/WechatOwnerService.git synced 2026-02-24 05:46:04 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity
4a6e489ef0
WechatOwnerService/pages/goodDetail/goodDetail.vue
java110 4a6e489ef0 优化代码
2020-11-04 19:23:11 +08:00

742 lines
16 KiB
Vue
Raw Blame History

<template>
<view class="box">
<view class="detail_box shopro-selector">
<view class="detail-content">
<view class="goodes_detail_swiper-box">
<!-- 详情轮播 -->
<swiper class="carousel" circular @change="swiperChange" :autoplay="true">
<swiper-item @tap="tools.previewImage(goodsInfo.carouselFigurePhotos, swiperCurrent)" v-for="(img, index) in goodsInfo.carouselFigurePhotos"
:key="index" class="carousel-item">
<image class="swiper-image shopro-selector-rect" :src="baseUrl+img" mode="aspectFill" lazy-load></image>
</swiper-item>
</swiper>
<view v-if="goodsInfo.carouselFigurePhotos" class="swiper-dots">{{ swiperCurrent + 1 }} / {{ goodsInfo.carouselFigurePhotos.length }}</view>
</view>
<!-- 价格卡片组 -->
<vc-price v-if="goodsInfo" :detail="goodsInfo" :type="detailType" @change="getActivityRules"></vc-price>
<view class="goods-title more-t">{{ goodsInfo.actProdName }}</view>
<view class="sub-title more-t">{{ goodsInfo.actProdDesc }}</view>
<!-- 规格选择 -->
<view class="sku-box shopro-selector-rect" @tap="showSku = true">
<view class="flex justify-between">
<view class="flex justify-between">
<text class="title">规格</text>
<text class="tip">{{ goodsInfo.defaultSpecValue.name || '请选择规格' }}</text>
</view>
<text class="cuIcon-right"></text>
</view>
</view>
<vc-sku v-model="showSku" :goodsInfo="goodsInfo"
:buyType="buyType"
:skuList="goodsInfo.productSpecValues"
:grouponBuyType="grouponBuyType"
:goodsType="goodsInfo.actType"
@changeBalance="changeBalance"
@changeType="changeType"
@getSkuText="getSkuText"
@chooseSku="_chooseSku"></vc-sku>
<!-- 服务 -->
<vc-serve v-if="goodsInfo.service.length" v-model="showServe" :serveList="goodsInfo.service"></vc-serve>
<!-- 选项卡 -->
<view class="sticky-box">
<view class="tab-box flex justify-between ">
<view class="tab-item flex flex-direction align-center <justify-center></justify-center> x-c" @tap="onTab(tab.id)" v-for="tab in tabList" :key="tab.id">
<view class="tab-title">
{{ tab.title }}
<text v-if="tab.id == 'tab2'" class="comment-num">({{ commentNum }})</text>
</view>
<text class="tab-line" :class="{ 'line-active': tabCurrent === tab.id }"></text>
</view>
</view>
<view class="tab-detail pb20">
<view class="rich-box" v-show="tabCurrent === 'tab0'">
<jyf-parser :html="goodsInfo.content" ref="article"></jyf-parser>
</view>
<view class="goods-size" v-if="tabCurrent === 'tab1'">
<view class="table-box" v-if="goodsInfo.params && goodsInfo.params.length">
<view class="t-tr x-f" v-for="t in goodsInfo.params" :key="t.title">
<view class="t-head x-f">{{ t.title }}</view>
<view class="t-detail">{{ t.content }}</view>
</view>
</view>
</view>
<view class="goods-comment" v-if="tabCurrent === 'tab2'">
<block v-for="comment in commentList" :key="comment.id">
<sh-comment :comment="comment"></sh-comment>
</block>
<view class="empty-box x-c" v-if="!commentList.length">
<vc-empty :isFixed="false" :emptyData="emptyData"></vc-empty>
</view>
<view class="more-box x-c" v-if="commentList.length">
<button class="cu-btn more-btn x-f" @tap="jump('/pages/goods/comment-list', { goodsId: goodsInfo.id })">
查看全部
<text class="cuIcon-right"></text>
</button>
</view>
</view>
</view>
</view>
</view>
<!-- 其他商品foot -->
<view class="detail-foot_box flex align-center" >
<view class="detail-right ">
<view class="detail-btn-box flex justify-end" v-if="!goodsInfo.activity">
<button class="cu-btn tool-btn add-btn" @tap="addCart">加入购物车</button>
<button class="cu-btn tool-btn pay-btn" v-if="!balance" @tap="goPay">立即购买</button>
<button class="cu-btn tool-btn pay-btn" v-else @tap="goBalance">结算</button>
</view>
<!-- 拼团foot -->
<view class="detail-btn-box flex justify-end" v-if="goodsInfo.activity && goodsInfo.activity.type === 'groupon'">
<button class="cu-btn seckilled-btn" v-if="activityRules.status == 'waiting'">暂未开始</button>
<button class="cu-btn seckilled-btn" v-if="activityRules.status == 'end'">已结束</button>
<view class="x-f" v-if="activityRules.status == 'ing'">
<button class="cu-btn tool-btn add-btn y-f" @tap="payGroupon" v-if="goodsInfo.activity.rules.is_alone === '1'">
<text class="price">￥{{ goodsInfo.price }}</text>
<text class="price-title">单独购买</text>
</button>
<button class="cu-btn tool-btn groupon-btn y-f" :style="goodsInfo.activity.rules.is_alone === '0' ? 'width:400rpx' : ''"
@tap="payGroupon('groupon')">
<text class="price">￥{{ goodsInfo.groupon_price }}</text>
<text class="price-title">我要开团</text>
</button>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import vcPrice from '@/components/vc-price/vc-price.vue';
import vcServe from '@/components/vc-serve/vc-serve.vue';
import vcComment from '@/components/vc-comment/vc-comment.vue';
import vcSku from '@/components/vc-sku/vc-sku.vue';
import vcEmpty from '@/components/vc-empty/vc-empty.vue';
import jyfParser from "@/components/jyf-parser/jyf-parser";
import {
getProduct
} from '../../api/goods/goodsApi.js';
import conf from '../../conf/config.js';
import {
mapMutations,
mapActions,
mapState
} from 'vuex';
export default {
components: {
vcServe,
vcPrice,
vcSku,
vcComment,
vcEmpty,
jyfParser
},
data() {
return {
productId: '',
baseUrl:conf.baseUrl,
currentSkuText: '', //选中规格
detailType: '',
showShare: false,
buyType: 'sku',
grouponBuyType: 'alone', //拼团购买方式。
showSku: false,
showServe: false,
tools: this.$tools,
goodsInfo: {},
commentList: [], //商品评价列表
commentNum: 0, //商品评价总数
favorite: false,
activityRules: {},
currentSkuList: [],
confirmGoodsInfo: {},
swiperCurrent: 0, //轮播下标
tabCurrent: 'tab0',
emptyData: {
img: '/static/imgs/empty/comment_empty.png',
tip: '暂无评价~'
},
tabList: [{
id: 'tab0',
title: '商品详情'
},
{
id: 'tab1',
title: '规格参数'
},
{
id: 'tab2',
title: '用户评价'
}
],
balance:false
};
},
computed: {
},
onLoad(options) {
this.productId = options.productId;
this.getGoodsDetail();
},
onReady() {},
methods: {
getActivityRules:function(e) {
if (e) {
this.activityRules = JSON.parse(e);
}
},
// 检测
checkActivity:function(data, type) {
if (data) {
return !data.includes(type);
}
return true;
},
// 路由跳转
jump:function(path, parmas) {
this.showShare = false;
},
// 轮播图切换
swiperChange:function(e) {
const index = e.detail.current;
this.swiperCurrent = index;
},
// 选项卡
onTab:function(id) {
this.tabCurrent = id;
},
// 商品详情
getGoodsDetail:function() {
let that = this;
let _data = {
page: 1,
row: 1,
productId: this.productId
}
getProduct(_data)
.then(_product => {
that.goodsInfo = _product[0];
that.goodsInfo.productSpecValues.forEach(item=>{
let _productSpecDetails = item.productSpecDetails;
let _name = "";
_productSpecDetails.forEach(detail =>{
_name += (detail.detailValue +"/");
})
item.name = _name;
})
});
that.getCommentList();
},
// 商品评论
getCommentList:function() {
let that = this;
},
// 组件返回的type;
changeType:function(e) {
this.buyType = e;
},
// 组件返回的规格;
getSkuText:function(e) {
this.currentSkuText = e;
},
_chooseSku:function(sc){
this.goodsInfo.productSpecValues.forEach(item=>{
item.isDefault = 'F';
if(item.valueId == sc.valueId){
item.isDefault = 'T';
this.goodsInfo.defaultSpecValue = item;
}
});
},
// 分享
onShare:function() {
this.showShare = true;
},
// 加入购物车
addCart:function() {
if (this.vc.hasLogin()) {
this.buyType = 'cart';
this.showSku = true;
} else {
this.vc.navigateTo({
url:'/pages/showlogin/showlogin'
})
}
},
// 立即购买
goPay:function() {
if (this.vc.hasLogin()) {
this.buyType = 'buy';
this.showSku = true;
} else {
this.vc.navigateTo({
url:'/pages/showlogin/showlogin'
})
}
},
goBalance:function(){
this.vc.navigateTo({
url: '/pages/goodsConfirm/goodsConfirm'
})
},
// 拼团购买
payGroupon:function(type) {
if (Boolean(uni.getStorageSync('token'))) {
if (type === 'groupon') {
this.grouponBuyType = 'groupon';
} else {
this.grouponBuyType = 'alone';
}
this.buyType = 'buy';
this.showSku = true;
} else {
this.$store.commit('LOGIN_TIP', true);
}
},
// 立即秒杀。
goSeckill:function() {
if (Boolean(uni.getStorageSync('token'))) {
if (this.activityRules.status !== 'waiting') {
this.buyType = 'buy';
this.showSku = true;
console.log(this.buyType);
} else {
this.$tools.toast('秒杀暂未开始');
}
} else {
this.$store.commit('LOGIN_TIP', true);
}
},
changeBalance:function(e){
this.balance = e;
}
}
};
</script>
<style lang="scss">
.box {
padding-bottom: 100rpx;
}
// 拼团玩法
.groupon-play {
height: 94rpx;
background: #fff;
.title {
font-size: 28rpx;
color: #999;
}
.description {
font-size: 28rpx;
margin-left: 30rpx;
}
.cuIcon-right {
margin-left: 20rpx;
}
}
.load-box {
/deep/.skeletons_box {
z-index: 11;
}
}
.detail-content {
&::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
}
.sticky-box {
.tab-box {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 99;
}
}
// 商品图片轮播
.goodes_detail_swiper-box {
width: 100%;
height: 500rpx;
position: relative;
.carousel {
width: 100%;
height: 100%;
}
.carousel-item {
width: 750rpx;
height: 100%;
}
.swiper-image {
width: 750rpx;
height: 100%;
background: #ccc;
}
.swiper-dots {
display: flex;
position: absolute;
right: 20rpx;
bottom: 20rpx;
line-height: 44rpx;
border-radius: 22rpx;
padding: 0 15rpx;
background: rgba(#333, 0.3);
font-size: 28rpx;
color: rgba(#fff, 0.9);
}
}
// 规格卡片
.sku-box {
line-height: 82rpx;
background: #fff;
padding: 0 20rpx;
margin: 20rpx 0;
font-size: 28rpx;
.title {
color: #999;
margin-right: 20rpx;
}
.cuIcon-right {
color: #bfbfbf;
font-size: 36rpx;
}
}
.goods-title {
font-size: 36rpx;
font-weight: 600;
line-height: 42rpx;
background-color: #fff;
padding-bottom: 10rpx;
padding: 20rpx 20rpx;
}
.sub-title {
padding: 0 20rpx;
color: #a8700d;
font-size: 24rpx;
font-weight: 500;
line-height: 42rpx;
background-color: #fff;
padding-bottom: 10rpx;
}
// 选项卡
.tab-box {
height: 102rpx;
background: #fff;
border-bottom: 1rpx solid rgba(#dfdfdf, 0.8);
margin-top: 20rpx;
.tab-item {
flex: 1;
height: 100%;
position: relative;
font-size: 30rpx;
font-weight: bold;
.tab-line {
width: 123rpx;
height: 4rpx;
left: 50%;
bottom: 20rpx;
transform: translateX(-50%);
background: transparent;
position: absolute;
z-index: 2;
}
.line-active {
background: rgba(168, 112, 13, 1);
}
}
}
.tab-detail {
min-height: 300rpx;
background: #fff;
background: #fff;
.rich-box {
/deep/ img {
display: block;
}
}
.goods-size {
padding-top: 30rpx;
.table-box {
width: 710rpx;
margin: auto;
background: rgba(255, 255, 255, 1);
border: 1rpx solid rgba(223, 223, 223, 1);
.t-tr {
border-bottom: 1rpx solid rgba(223, 223, 223, 1);
&:last-child {
border-bottom: none;
}
.t-head {
font-size: 26rpx;
color: #999;
flex: 1;
padding: 15rpx 20rpx;
height: 100%;
border-right: 1rpx solid rgba(223, 223, 223, 1);
}
.t-detail {
font-size: 26rpx;
flex: 4;
padding: 15rpx 20rpx;
height: 100%;
}
}
}
}
.goods-comment {
padding-top: 30rpx;
min-height: 300rpx;
.more-box {
height: 100rpx;
background: #fff;
.more-btn {
width: 200rpx;
height: 60rpx;
border: 1rpx solid rgba(213, 166, 90, 1);
border-radius: 30rpx;
font-size: 26rpx;
font-weight: 400;
color: rgba(168, 112, 13, 1);
padding: 0;
background: #fff;
.cuIcon-right {
font-size: 30rpx;
margin-left: 10rpx;
}
}
}
}
}
// 推荐商品
.guess-box {
.guess-title {
height: 90rpx;
font-size: 30rpx;
font-family: PingFang SC;
font-weight: bold;
color: rgba(51, 51, 51, 1);
background: #fff;
padding: 0 20rpx;
}
.goods-wrap {
display: flex;
flex-wrap: wrap;
padding: 20rpx;
.goods-item {
margin-right: 20rpx;
margin-bottom: 20rpx;
&:nth-child(2n) {
margin-right: 0;
}
}
}
}
// 积分底部栏
.score-foot-box {
height: 110rpx;
background: rgba(255, 255, 255, 1);
border-top: 1rpx solid rgba(238, 238, 238, 1);
width: 100%;
position: fixed;
bottom: 0;
z-index: 999;
.left,
.right {
flex: 1;
}
.tools-item {
flex: 1;
height: 100%;
.tool-img {
width: 46rpx;
height: 46rpx;
}
.tool-title {
font-size: 22rpx;
line-height: 22rpx;
padding-top: 8rpx;
}
}
.btn-box {
flex: 1;
.seckill-btn {
width: 600rpx;
height: 80rpx;
background: linear-gradient(90deg, rgba(49, 133, 243, 1), rgba(80, 205, 242, 1));
box-shadow: 0px 7px 6px 0px rgba(80, 205, 242, 0.2);
border-radius: 40rpx;
font-size: 30rpx;
font-family: PingFang SC;
font-weight: 500;
color: rgba(255, 255, 255, 1);
margin-right: 20rpx;
}
}
}
// 底部工具栏
.detail-foot_box {
height: 100rpx;
background: rgba(255, 255, 255, 1);
border-top: 1rpx solid rgba(238, 238, 238, 1);
width: 100%;
position: fixed;
bottom: 0;
//z-index: 999;
.left,
.detail-right {
flex: 1;
}
.tools-item {
flex: 1;
height: 100%;
.tool-img {
width: 46rpx;
height: 46rpx;
}
.tool-title {
font-size: 22rpx;
line-height: 22rpx;
padding-top: 8rpx;
}
}
.detail-btn-box {
flex: 1;
.tool-btn {
font-size: 28rpx;
font-weight: 500;
color: rgba(#fff, 0.9);
width: 210rpx;
height: 70rpx;
border-radius: 35rpx;
padding: 0;
margin-right: 20rpx;
.price {
font-size: 24rpx;
font-weight: bold;
color: rgba(#fff, 0.9);
}
.price-title {
font-size: 20rpx;
font-weight: 500;
color: rgba(#fff, 0.9);
padding-top: 8rpx;
}
}
.add-btn {
box-shadow: 0px 2rpx 5rpx 0px rgba(102, 103, 104, 0.46);
background: linear-gradient(90deg, rgba(103, 104, 105, 1), rgba(82, 82, 82, 1));
}
.pay-btn {
box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
}
.seckill-btn {
width: 432rpx;
height: 70rpx;
background: linear-gradient(93deg, rgba(208, 19, 37, 1), rgba(237, 60, 48, 1));
box-shadow: 0px 7rpx 6rpx 0px rgba(#ed3c30, 0.22);
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: rgba(255, 255, 255, 1);
border-radius: 35rpx;
padding: 0;
margin-right: 20rpx;
}
.seckilled-btn {
width: 432rpx;
height: 70rpx;
background: rgba(221, 221, 221, 1);
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #999999;
border-radius: 35rpx;
padding: 0;
margin-right: 20rpx;
}
.groupon-btn {
width: 210rpx;
height: 70rpx;
background: linear-gradient(90deg, rgba(254, 131, 42, 1), rgba(255, 102, 0, 1));
box-shadow: 0px 7rpx 6rpx 0px rgba(255, 104, 4, 0.22);
border-radius: 35rpx;
}
}
}
</style>
Reference in New Issue View Git Blame Copy Permalink