shop4.3.57/plugins/advance/detail/detail.vue

<template>
	<app-layout>
		<uni-nav-bar fixed="true" :background-color="titleBg" left-icon="back" @click-left="back"></uni-nav-bar>
		<view v-if="!detail" class="u-goods-detail"></view>
		<template class="detail" v-if="detail">
			<!--商品轮播图-->
			<app-goods-banner v-bind:picList="detail.pic_url" v-bind:share="detail.share" v-bind:isCart="false" v-bind:videoUrl="detail.video_url"
			 v-bind:goods_id="detail.id" sign="advance"></app-goods-banner>
			<!--商品公告-->
			<detail-ad v-if="detail.advanceGoods.end_prepayment_at" v-bind:sales="detail.sales" v-bind:d="d" v-bind:h="h"
			 v-bind:m="m" v-bind:s="s" v-bind:theme="getTheme" v-bind:detail="detail"></detail-ad>
			<!--商品价格-->
			<detail-price-share :theme-object="themeObject" v-if="detail.attr.length > 0" v-bind:url="url" v-bind:original_price="detail.original_price"
			 v-bind:attr="detail.attr" v-bind:price_min="detail.price_min" v-bind:price_max="detail.price_max"
			 v-bind:group_max_member_price="detail.group_max_member_price" v-bind:group_min_member_price="detail.group_min_member_price"
			 v-bind:end_prepayment_at="detail.advanceGoods.end_prepayment_at" v-bind:pay_limit="detail.advanceGoods.pay_limit"
			 v-bind:level_show="detail.level_show" v-bind:cats="detail.goodsWarehouse.cats" v-bind:id="detail.id"
			 v-bind:is_vip_card_user="detail.vip_card_appoint.is_vip_card_user" v-bind:discount="detail.vip_card_appoint.discount"
			 v-bind:theme="getTheme" v-bind:has-poster-nav="true" v-bind:poster-config="poster_config + `&goods_id=` + detail.id"
			 v-bind:poster-generate="poster_generate + `&goods_id=` + detail.id" v-bind:detail="detail"></detail-price-share>
			<!-- 详情标题 -->
			<!--<app-name v-bind:name="detail.name"></app-name>-->
			<!-- <view v-if="detail.subtitle" class="goods-subtitle">
                <view class="t-omit-three">{{detail.subtitle}}</view>
            </view> -->
			<!--商品会员-->
			<view class="join-member" v-if="detail.level_show === 2">
				<view class="bd-vip" @click="goToMember">
					<image style="height: 72rpx; width: 100%;" src="/static/image/addvip.png" alt="">
				</view>
				<!--<app-join-member
                    v-bind:member-min-price="`${detail.group_min_member_price}`"
                    v-bind:member-max-price="`${detail.group_min_member_price}`"
                    v-bind:price="`${detail.original_price}`"
				></app-join-member>-->
			</view>
			<!--超级会员卡-->
			<view class="detail-vip" v-if="detail.vip_card_appoint.discount > 0">
				<app-vip-card top="0" background="#fff"></app-vip-card>
			</view>
			<template v-if="detail.advanceGoods.ladder_rules.length>0">
				<detail-discount v-bind:url="url" v-bind:ladder_rules="detail.advanceGoods.ladder_rules" v-bind:sales="detail.sales"></detail-discount>
			</template>
			<bd-coupon @change="setCoupon" :theme="themeObject" :coupons="detail.goods_coupon_center"></bd-coupon>
			<bd-xbc :coAttr="is_open" :attr-list="select_attr_group" :type="detail.type" :guarantee-title="detail.guarantee_title"
			 :guarantee-pic="detail.guarantee_pic" :param_content="detail.param_content" :param_name="detail.param_name"
			 :services="detail.services" :attr-groups="detail.attr_groups" :goods-stock="detail.goods_stock" @openAttr="active = false"></bd-xbc>
			<detail-attr v-if="!active && detail.attr.length>0" v-bind:theme="getTheme" v-bind:height="110" v-bind:cover_pic="detail.cover_pic"
			 v-bind:attr="detail.attr" v-bind:attr_groups="detail.attr_groups" v-bind:goods_stock="detail.goods_stock"
			 v-bind:attr_deposit="attr_deposit" v-bind:attr_swell_deposit="attr_swell_deposit" v-bind:attr_stock="attr_stock"
			 v-bind:attr_price="attr_price" v-bind:attr_price_member="attr_price_member" v-bind:level_show="detail.level_show"
			 v-bind:attr_pic_url="attr_pic_url" @select_attr="select_attr" @close_attr="close_attr" v-bind:num="num"
			 v-bind:detail="detail" @change_num="change_num" @change_num_data="change_num_data"></detail-attr>
			<bd-hc :integral="detail.goods_marketing_award.integral" :coupon="detail.goods_marketing_award.coupon" :card="detail.goods_marketing_award.card"
			 :balance="detail.goods_marketing_award.balance" :theme="themeObject"></bd-hc>
			<bd-kb :limit="detail.goods_marketing.limit" :express="detail.express" :shipping="detail.goods_marketing.shipping"
			 :pickup="detail.goods_marketing.pickup"></bd-kb>
			<bd-comments :goods-id="detail.id"></bd-comments>
			<bd-detail :detail="detail.detail"></bd-detail>
			<!-- 相关推荐 -->
			<app-related-suggestion-product text="您或许会喜欢" sign="advance" v-bind:theme="getTheme" v-bind:list="list"></app-related-suggestion-product>
			<!-- 空白格 -->
			<view class="safe-area-inset-bottom">
				<view :class="full_reduce ? 'u-bottom-height-1' : 'u-bottom-height-0'"></view>
			</view>
			<view v-if="is_open == 1" class="safe-area-inset-bottom u-bottom-fixed">
				<view v-if="full_reduce && active">
					<app-goods-full-reduce :theme="getTheme" :full_reduce="full_reduce">
					</app-goods-full-reduce>
				</view>
				<detail-bottom-button v-bind:theme="getTheme" @close_attr="close_attr" v-bind:favorite="detail.favorite"
				 v-bind:active="active" v-bind:goods_id="detail.id" @favorite="favorite" v-bind:detail="detail" v-bind:num="num"
				 v-bind:buttonDisabled="buttonDisabled" v-bind:end_prepayment_at="detail.advanceGoods.end_prepayment_at" @request="request_detail"></detail-bottom-button>
			</view>
			<app-close v-if="showClose" :modal="false" @update="getMall"></app-close>
			<!-- 快捷导航 -->
			<app-quick-navigation></app-quick-navigation>
		</template>
	</app-layout>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex';
	import appGoodsBanner from '../../../components/page-component/goods/app-goods-banner.vue';
	import detailAd from '../components/detail-ad.vue';
	import detailPriceShare from '../components/detail-price-share.vue';
	import detailBottomButton from '../components/detail-bottom-button.vue';
	import detailAttr from '../components/detail-attr.vue';
	import appJoinMember from '../../../components/page-component/app-join-member/app-join-member.vue';
	import appGoodsService from '../../../components/page-component/goods/app-goods-service.vue'
	import appRelatedSuggestionProduct from '../../../components/page-component/app-related-suggestion-product/app-related-suggestion-product.vue';
	import detailDiscount from '../components/detail-discount.vue';
	import detailVip from '../components/detail-vip.vue';
	import appVipCard from '../../../components/page-component/app-vip-card/app-vip-card.vue';
	import appName from '../../../components/page-component/app-goods-detail/app-name.vue';
	import appQuickNavigation from '../../../components/page-component/app-quick-navigation/app-quick-navigation.vue';
	import appGoodsFullReduce from '../../../components/page-component/goods/app-goods-full-reduce.vue';
	import appClose from '@/components/basic-component/app-close/app-close.vue';
	import bdDetail from '@/components/page-component/goods/bd-detail.vue';
	import bdComments from '@/components/page-component/goods/bd-comments.vue';
	import bdKb from '@/components/page-component/goods/bd-kb.vue';
	import bdHc from '@/components/page-component/goods/bd-hc.vue';
	import bdCoupon from '@/components/page-component/goods/bd-coupon.vue';
	import bdXbc from '@/components/page-component/goods/bd-xbc.vue';
	import uniNavBar from '@/components/page-component/uni-plugins/uni-nav-bar.vue';
	import routeJump from '../../../core/routeJump.js';

	export default {
		name: "detail",
		data() {
			return {
				showClose: false,
				is_open: 0,
				detail: null,
				full_reduce: null,
				active: true,
				attr_deposit: '0',
				attr_swell_deposit: '0',
				attr_stock: 0,
				attr_price: '0',
				attr_price_member: 0,
				url: '',
				level_show: 0,
				loading: false,
				select_attr_group: [],
				zhe: false,
				list: [],
				num: 1,
				shareShow: false,
				attr_pic_url: '',
				goods_id: -1,
				d: 0,
				h: 0,
				m: 0,
				s: 0,
				end_time: -1,
				buttonDisabled: false,
				poster_config: this.$api.advance.poster_config,
				poster_generate: this.$api.advance.poster_generate,
				titleBg: 'rgba(255,255,255,0)',
				root: this.$siteInfo.root,
			}
		},
		onPageScroll: function(e) {
			this.titleBg = 'rgba(255,255,255,' + e.scrollTop / 300 + ')';
		},
		onLoad(data) {
			this.goods_id = data.id;
			// #ifdef MP-WEIXIN
			wx.showShareMenu({
				menus: ['shareAppMessage', 'shareTimeline']
			})
			// #endif
		},
		onShow() {
			this.showClose = false;
			setTimeout(() => {
				this.showClose = true;
			})
			this.$nextTick(() => {
				this.request_detail({
					id: this.goods_id
				});
				this.$request({
					url: this.$api.advance.goods_list,
					data: {
						goods_id: this.goods_id,
					}
				}).then(response => {
					if (response.code === 0) {
						this.list = response.data.list;
					} else if (response.code === 1) {
						uni.showModal({
							title: '提示',
							content: response.msg,
						});
					}
				});
			})
		},
		onHide() {
			clearInterval(this.end_time);
		},
		onUnload() {
			clearInterval(this.end_time);
		},
		methods: {
			back(){
			    routeJump({
			        open_type: 'back',
			    })
			},
			goToMember() {
				uni.navigateTo({
					url: '/pages/member/index/index'
				})
			},
			getMall(e) {
				this.is_open = e.is_open;
			},
			request_detail(data) {
				this.$request({
					url: this.$api.advance.detail,
					data: {
						id: data.id
					},
					method: 'get'
				}).then(res => {
					if (res.code === 0) {
						this.detail = res.data.detail;
						if (this.detail.goods_activity) {
							this.full_reduce = this.detail.goods_activity.full_reduce;
						}
						this.detail.num = 1;
						this.loading = true;
						this.url = `${this.$api.advance.poster}&goods_id=${this.detail.id}`;
						this.getTime(this.detail.advanceGoods.end_prepayment_at);
						this.set_attr_active();
					} else if (res.code === 1) {
						uni.hideLoading();
						uni.showModal({
							content: res.msg,
							showCancel: false,
							success() {
								uni.navigateBack();
							}
						});
					}
				});
			},
			open_share() {
				this.shareShow = true;
			},
			change_num(data) {
				this.num += data;
			},
			change_num_data(data) {
				this.num = data;
			},
			favorite(data) {
				this.detail.favorite = data;
			},
			select_attr(data, item) {
				let attr_groups = this.detail.attr_groups;
				let str = ':';
				let sd = 0;
				for (let i = 0; i < attr_groups.length; i++) {
					let attr_list = this.detail.attr_groups[i].attr_list;
					for (let j = 0; j < attr_list.length; j++) {
						if (attr_groups[i].attr_group_id === data && attr_list[j].attr_id === item) {
							this.$set(this.detail.attr_groups[i].attr_list[j], 'active', true);
						} else if (attr_groups[i].attr_group_id === data && attr_list[j].attr_id !== item) {
							this.$set(this.detail.attr_groups[i].attr_list[j], 'active', false);
						}
						if (this.detail.attr_groups[i].attr_list[j].active) {
							sd = this.detail.attr_groups[i].attr_list[j].attr_id;
							str += `:${sd}`;
						}
					}
				}
				let result = str.substr(2);
				this.get_price_stock(result);
			},
			set_attr_active() {
				let item = 0;
				let str = ':';
				for (let i = 0; i < this.detail.attr_groups.length; i++) {
					for (let j = 0; j < this.detail.attr_groups[i].attr_list.length; j++) {
						if (j !== 0) {
							this.$set(this.detail.attr_groups[i].attr_list[j], 'active', false);
						} else if (j === 0) {
							item = this.detail.attr_groups[i].attr_list[j].attr_id;
							str += `:${item}`;
							this.$set(this.detail.attr_groups[i].attr_list[j], 'active', true);
						}
					}
				}
				this.get_price_stock(str.substr(2));
			},
			get_price_stock(data) {
				let attr = this.detail.attr;
				for (let i = 0; i < attr.length; i++) {
					if (attr[i].sign_id === data) {
						this.select_attr_group = attr[i].attr_list;
						let {
							deposit,
							swell_deposit,
							stock,
							price,
							price_member,
							pic_url
						} = attr[i];
						this.attr_deposit = deposit;
						this.attr_swell_deposit = swell_deposit;
						this.attr_stock = stock;
						this.attr_price = price;
						this.attr_price_member = price_member;
						this.attr_pic_url = pic_url;
					}
				}
				this.attr_stock == 0 ? this.buttonDisabled = true : this.buttonDisabled = false;
			},
			close_attr(data) {
				this.active = data;
			},
			getTime(end_prepayment_at) {
				let time = new Date(end_prepayment_at.replace(/-/g, '/')).getTime() - (new Date()).getTime();
				this.d = parseInt((time / 1000 / 60 / 60 / 24));
				this.h = parseInt((time / 1000 / 60 / 60) % 24);
				this.m = parseInt((time / 1000 / 60) % 60);
				this.s = parseInt((time / 1000) % 60);
				this.end_time = setInterval(() => {
					let now = new Date().getTime();
					let timelog = new Date(end_prepayment_at.replace(/-/g, '/')).getTime();
					let time = timelog - now;
					if (time > 0) {
						let day = parseInt((time / 1000 / 60 / 60 / 24));
						let hou = parseInt((time / 1000 / 60 / 60) % 24);
						let min = parseInt((time / 1000 / 60) % 60);
						let sec = parseInt((time / 1000) % 60);
						this.d = day;
						this.h = hou;
						this.m = min;
						this.s = sec;
					} else {
						clearInterval(this.end_time);
					}
				}, 1000);
			},
			setCoupon(index) {
				this.$set(this.detail.goods_coupon_center[index], 'is_receive', 1);
			}
		},
		components: {
			'app-goods-banner': appGoodsBanner,
			'detail-ad': detailAd,
			'detail-price-share': detailPriceShare,
			'detail-bottom-button': detailBottomButton,
			'detail-attr': detailAttr,
			'app-join-member': appJoinMember,
			'app-goods-service': appGoodsService,
			'app-related-suggestion-product': appRelatedSuggestionProduct,
			'detail-discount': detailDiscount,
			'detail-vip': detailVip,
			'app-name': appName,
			'app-vip-card': appVipCard,
			'app-quick-navigation': appQuickNavigation,
			appGoodsFullReduce,
			appClose,
			bdDetail,
			bdComments,
			bdKb,
			bdHc,
			bdCoupon,
			bdXbc,
			uniNavBar
		},
		computed: {
			...mapGetters('mallConfig', {
				vip: 'getVip',
				getTheme: 'getTheme'
			}),
			...mapGetters('user', {
				is_vip: 'is_vip'
			}),
			...mapState({
				mall: state => state.mallConfig.mall
			}),
			themeObject: function() {
				return {
					back: this.getTheme + '-m-back ' + this.getTheme,
					backP: this.getTheme + '-m-back-p ' + this.getTheme,
					backO: this.getTheme + '-m-back-o ' + this.getTheme,
					theme: this.getTheme,
					color: this.getTheme + '-m-text ' + this.getTheme,
					sBack: this.getTheme + '-s-back ' + this.getTheme,
					border: this.getTheme + '-m-border ' + this.getTheme,
				}
			},
		},
		onShareAppMessage() {
			let {
				app_share_title,
				name,
				id,
				app_share_pic
			} = this.detail;
			return this.$shareAppMessage({
				path: '/plugins/advance/detail/detail',
				title: app_share_title ? app_share_title : name,
				imageUrl: app_share_pic ? app_share_pic : '',
				params: {
					id
				}
			});
		},
		// #ifdef MP-WEIXIN
		onShareTimeline() {
			let {
				app_share_title,
				name,
				id
			} = this.detail;
			return this.$shareTimeline({
				title: app_share_title ? app_share_title : name,
				query: {
					id
				}
			});
		}
		// #endif
	}
</script>

<style scoped lang="scss">
	.goods-subtitle {
		padding: 0 #{20rpx};
		font-size: 24rpx;
		background-color: #ffffff;
		color: #999999;
		width: 702upx;
		margin: 0 24upx;
	}

	.join-member {
		background-color: #ffffff;
		padding: 0 #{30rpx};
	}

	.border-top {
		border-top: #{1rpx} solid #e2e2e2;
	}

	.zhe {
		height: #{80rpx};
		background-color: white;
		width: #{750rpx};
		padding: 0 #{24rpx};
		margin-top: #{20rpx};

		.symbol {
			width: #{116rpx};
			font-size: #{20rpx};
			color: #ff4544;
			border: #{1rpx} solid #ff4544;
			border-radius: #{4rpx};
			text-align: center;
		}

		.image {
			width: #{12rpx};
			height: #{22rpx};
		}

		.content {
			width: #{520rpx};
			font-size: #{21rpx};
			color: #666666;
			word-break: break-all;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
			margin-left: #{12rpx};
		}
	}

	.detail-vip {
		padding: 20upx;
		background-color: #ffffff;
		width: 702upx;
		margin: 0 24upx 0 24upx;
		border-radius: 0 0 15upx 15upx;
	}

	.u-bottom-fixed {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 1500;
		background-color: #ffffff;
	}

	.u-bottom-height-0 {
		height: 110upx;
	}

	.u-bottom-height-1 {
		height: 190upx;
	}

	.goods-margin {
		margin-top: 20upx;
	}

	.bd-vip {
		padding: 24rpx 0;
	}

	.bd-vip image {
		height: 130rpx;
		width: 100%;
	}
</style>