football/plugins/book/goods/goods.vue

<template>
	<app-layout>
		<view class="app-details" v-if="loading">
			
			<view>
				<app-quick-navigation></app-quick-navigation>
			</view>
			
			<view class="app-banner">
				<app-goods-banner
						:picList="item.pic_url"
	                    :isCart="isCart"
						:share="item.share"
						:goods_id="item.id"
						:video-url="item.video_url"
						sign="booking"
				></app-goods-banner>
			</view>

			 <!-- 详情标题 -->
			<view class="goods-name">
				<app-name :name="item.name"></app-name>
			</view>


			<view class="app-price">
				<app-goods-price
				 		:is_vip_card_user="is_vip_card_user"
				 		:discount='discount'
						:goods="item"
						:shareUrl="url"
				></app-goods-price>
			</view>
			
	        <view class="vip-card">
	            <app-vip-card background="#fff" top="0" v-if="is_vip"></app-vip-card>
	        </view>
			
			<view class="merchant-guarantee" v-if="item.services.length > 0">
				<app-goods-service :list="item.services" :border="false"></app-goods-service>
			</view>
			
			<view class="app-attr">
				<app-attr :goods="item"
				          :attrGroupList="item.attr_group"
				          @attrtap="attrtap"
				          :cartShow="cartShow"
				          ref="attr"
				          :selectAttr="selectAttr"
				          buyText="立即预约"
				          :previewUrl="previewUrl"
				          :submitUrl="submitUrl"
						  plugin="booking"
				          :show="show"
				>
					<app-goods-attr
							slot="button"
							:attr-groups="item.attr_group"
					        :selectAttr="selectAttr"
							:attr="item.attr"
					></app-goods-attr>
				</app-attr>
			</view>
			
			<view v-if="item.store.length > 0">
				<app-store :store_id="item.store[0].id"
				           :address="item.store[0].address"
				           :name="item.store[0].name"
				           :business_hours="item.store[0].business_hours"
				           :storeNum="item.store.length"
						   :goods_id="item.id"
				></app-store>
			</view>
			
			<view class="goods-detail">
				<app-goods-detail :goods="item"></app-goods-detail>
			</view>
			
			<view class="app-recommend">
				<app-related-suggestion-product sign="booking" :list="list" ></app-related-suggestion-product>
			</view>
			
			<view>
				<app-empty-bottom backgroundColor="#f7f7f7" :height="Number(110)"></app-empty-bottom>
			</view>
			
			<view class="app-buttons">
				<app-iphone-x>
					<view slot="empty-area">
						<view class="app-reservation-button dir-left-nowrap" >
							
							<view class="app-back-home">
								<app-jump-button form arrangement="column" open_type="redirect" url="/pages/index/index">
									<image class="app-image" src="../../../static/image/icon/index.png"></image>
									<text class="app-home">首页</text>
								</app-jump-button>
							</view>
							<view class="app-jump" v-if="item.goods_num == 0" style="background-color: #CDCDCD;color: #fff;">已售罄</view>
							<view class="app-jump" v-else>
								<app-form-id @click="reservationNow">
									立即预约
								</app-form-id>
							</view>
						</view>
					</view>
				</app-iphone-x>
			</view>
		</view>
	</app-layout>
</template>

<script>
    import { mapState } from 'vuex';
    import appGoodsBanner from '../../../components/page-component/goods/app-goods-banner.vue';
	import appGoodsPrice from '../../../components/page-component/goods/app-goods-price.vue';
	import appGoodsAttr from '../../../components/page-component/goods/app-goods-attr.vue';
	import appAttr from '../../../components/page-component/app-attr/app-attr.vue';
	import appStore from '../components/app-store.vue';
	import appRelatedSuggestionProduct from '../../../components/page-component/app-related-suggestion-product/app-related-suggestion-product.vue';
	import appGoodsDetail from '../../../components/page-component/goods/app-goods-detail.vue';
    import appQuickNavigation from "../../../components/page-component/app-quick-navigation/app-quick-navigation.vue";
    import appIphonexBottom from '../../../components/page-component/app-iphonex-bottom/app-iphonex-bottom.vue';
    import appIphoneX from '../../../components/basic-component/app-iphone-x/app-iphone-x.vue';
    import appGoodsService from '../../../components/page-component/goods/app-goods-service.vue';
    import AppVipCard from '../../../components/page-component/app-vip-card/app-vip-card';
	import appName from '../../../components/page-component/app-goods-detail/app-name.vue';
    import appEmptyBottom from '../../../components/basic-component/app-empty-bottom/app-empty-bottom.vue';

    export default {
        name: 'details',
	    components: {
            'app-goods-banner': appGoodsBanner,
		    'app-goods-price': appGoodsPrice,
		    'app-goods-attr': appGoodsAttr,
		    'app-attr': appAttr,
		    'app-store': appStore,
		    'app-related-suggestion-product': appRelatedSuggestionProduct,
		    'app-goods-detail': appGoodsDetail,
            'app-quick-navigation': appQuickNavigation,
            'app-iphone-bottom': appIphonexBottom,
		    'app-iphone-x': appIphoneX,
            'app-goods-service': appGoodsService,
			'app-name': appName,
            'app-vip-card': AppVipCard,
            'app-empty-bottom': appEmptyBottom,
        },
	    data() {
            return {
                item: null,
                selectAttr: {},
                activeIndex: 0,
                list: [],
                submitUrl: this.$api.book.order_submit,
                previewUrl: this.$api.book.order_preview,
                url: '',
                cartShow: false,
                isCart: false,
                is_vip: false,
                is_vip_card_user: 0,
                discount: null,
                show: 0,
                loading: false,
            }
	    },
	    onShareAppMessage() {
	        return this.$shareAppMessage({
	            path: '/plugins/book/goods/goods',
	            title: this.item.app_share_title ? this.item.app_share_title : this.item.name,
                imageUrl: this.item.app_share_pic ? this.item.app_share_pic : '',
                params: {
                    goods_id: this.item.id,
                }
	        });
	    },
        onLoad(options) {
            let _this = this;

			uni.getLocation({
                type:'wgs84',
                success:function(res){
                    let goods_id = options.goods_id;
                    _this.$request({
                        url: _this.$api.book.detail,
                        data: {
                            goods_id: goods_id,
                            latitude: res.latitude,
                            longitude: res.longitude,
                        },
                    }).then(response => {
                        if (response.code === 0) {
                            _this.loading = true;
                            _this.item = response.data.list;
                            _this.item.id = _this.item.goods_id;
                            _this.url = `${_this.$api.book.poster}&goods_id=${_this.item.goods_id}`;
                           _this.requestFun(goods_id);
	                        if(_this.item.vip_card_appoint.discount > 0) {
	                            _this.is_vip = true;
	                            _this.discount = _this.item.vip_card_appoint.discount
	                        }
	                        _this.is_vip_card_user = _this.item.vip_card_appoint.is_vip_card_user
                        }
                    })
                },
                fail:function(e){
                	console.log(e);
                    uni.showModal({
	                    title: '提示',
	                    content: '请开启位置权限',
                        success: function() {
	                        uni.navigateBack();
                        }
                    });
                },
                complete:function(res){
                }
            });
        },
	    methods: {
            attrtap(data)  {
                if (data !== null) {
                    this.selectAttr = data;
                } else {
                    this.selectAttr = {};
                }
            },
		    requestFun(goods_id) {
               this.$request({
                    url: this.$api.goods.new_recommend,
                    data: {
                        goods_id: goods_id,
                        page: this.page,
                    }
                }).then(response => {
                    if (response.code === 0) {
                        if (response.data.list.length > 0) {
                            this.list = [...this.list, ...response.data.list];
                        } else {
                            this.over = true;
                        }
                    }
                })
		    },
            reservationNow() {
                this.show = Math.random();
            }
	    },
	    computed: {
            ...mapState({
                mall: state => state.mallConfig.mall,
            }),
            ...mapState('gConfig',{
                iphone: (data) => {
                    return data.iphone;
                },
                iphoneHeight: (state) =>{
                    return  state.iphoneHeight;
                },
            })
	    }
    }
</script>

<style scoped lang="scss">

    .vip-card {
        padding: 0 #{20rpx};
        background-color: #fff;
    }
	.merchant-guarantee {
        margin-top: #{20rpx};
	}
	.app-details {
		background-color: #f7f7f7;
		width: #{750rpx};
		padding-bottom: #{100rpx};
		.app-banner {
			width: 100%;
		}
		
		.app-attr {
			width: 100%;
			margin-bottom: #{20rpx};
			margin-top: #{20rpx};
		}
		.app-rich-evaluation {
			background-color: white;
			width: #{750rpx};
			.app-nav {
				width: #{750rpx};
				height: #{100rpx};
				border-bottom: #{1rpx} solid #e2e2e2;
				>view {
					text-align: center;
				}
				text {
					text-align: center;
					height: #{100rpx};
					line-height: #{100rpx};
					border-bottom-width: #{1rpx};
					border-bottom-style: solid;
					border-bottom-color: transparent;
					display: inline-block;
				}
				.app-active-color {
					border-bottom-color: #ff4544;
					color: #ff4544;
				}
			}
		}
		.app-reservation-button {
			width: #{750rpx};
			height: #{100rpx};
			background-color:white;
			border-top: #{1rpx} solid #e9e9e9;
			.app-back-home {
				width: #{110rpx};
				height: #{100rpx};
				.app-image {
					width: #{40rpx};
					height: #{40rpx};
				}
				.app-home {
					font-size: #{18rpx};
					color: #888888;
				}
			}
			.app-jump {
				width: #{640rpx};
				height: #{110rpx};
				line-height: #{100rpx};
				background-color: #ff4544;
				color: #ffffff;
				font-size: #{32rpx};
				text-align: center;
			}
		}
	}
</style>