football/pages/goods/goods.vue

<template>
    <app-layout>
        <view>
            <app-quick-navigation></app-quick-navigation>
        </view>
        <view>
            <app-goods-banner :pic-list="goods.pic_url"
                  :share="goods.share"
                  :video-url="goods.video_url"
							  :goods_id="goods.id"
            ></app-goods-banner>
        </view>
        <view class="goods-name t-omit-two">{{goods.name}}</view>
        <view class="price" v-if="goods">
            <app-goods-price @quickShare="quickShare" :discount='discount' :is_vip_card_user="is_vip_card_user" :goods="goods"
                 :select-attr="selectAttr"
            ></app-goods-price>
        </view>
        <view class="vip-card" v-if="is_vip">
            <app-vip-card background="#fff" top="0"></app-vip-card>
        </view>
        <view class="merchant-guarantee" v-if="goods.services.length>0">
            <app-goods-service :list="goods.services"></app-goods-service>
        </view>
        <view class="attr" v-if="goods.is_negotiable == 0">
            <app-attr :goods="goods"
	              :attrGroupList="goods.attr_groups"
	              :show="attrShow"
	              @attrtap="onAttr"
            >
                <view slot="button">
                    <app-goods-attr :attr-groups="goods.attr_groups" :selectAttr="selectAttr" :attr="goods.attr"></app-goods-attr>
                </view>
            </app-attr>
        </view>
        <view class="marketing" v-if="goods">
            <app-goods-marketing :limit="goods.goods_marketing.limit"
                 :express="goods.express"
                 :shipping="goods.goods_marketing.shipping"
                 :pickup="goods.goods_marketing.pickup"
                 :card="goods.goods_marketing_award.card"
                 :integral="goods.goods_marketing_award.integral"
            ></app-goods-marketing>
        </view>
        <view @click="toComposition" class="goods-composition" v-if="goods.plugin_extra && goods.plugin_extra.composition.list.length > 0">
            <view class="goods-composition-title">套餐组合</view>
            <uni-swiper-dot :current="current" :info="goods.plugin_extra.composition.list" mode="customize">
                <swiper @change="change" class="goods-composition-swiper" :current="current" :autoplay="true">
                    <swiper-item v-for="item in goods.plugin_extra.composition.list" :key="item.id">
                        <app-composition @click="toComposition(item)" @look="toComposition(item)" :item="item"></app-composition>
                    </swiper-item>
                </swiper>
            </uni-swiper-dot>
            <view class="goods-composition-more main-between cross-center">
                <view>更多套餐组合</view>
                <image src="/static/image/icon/arrow-right.png"></image>
            </view>
        </view>
        <view v-if="goods">
            <app-goods-detail :goods="goods"></app-goods-detail>
        </view>
        <view class="recommend">
            <app-goods-recommend :goods-list="recommend_list"></app-goods-recommend>
        </view>
        <view class="bottom"></view>
        <view>
            <app-jump-button>
            </app-jump-button>
        </view>
	    <view>
		    <app-empty-bottom :height="Number(110)"></app-empty-bottom>
	    </view>
	    <view>
		    <app-iphone-x>
			    <view class="app-bottom dir-left-nowrap" slot="empty-area">
				    <view class="dir-top-nowrap main-center cross-center little box-grow-0" @click="back">
					    <image src="../../static/image/icon/index.png"></image>
					    <view>首页</view>
				    </view>
			<!-- 	    <view class="dir-top-nowrap main-center cross-center little box-grow-0" @click="favorite">
					    <image :src="goods.favorite ? '../../static/image/icon/icon-favorite-active.png' : '../../static/image/icon/icon-favorite.png'"></image>
					    <view>收藏</view>
				    </view> -->
				    <view class="box-grow-1 dir-left-nowrap btn" v-if="goods.is_negotiable === 1">
					    <block v-for="(item, index) in mall.setting.good_negotiable" :key="index">
						    <template v-if="item === 'contact_tel'">
							    <view class="box-grow-1 cross-center main-center contact-tel"
							          :class="theme + '-background'"
							    >
								    <app-jump-button
										    :number="mall.setting.contact_tel"
										    open_type="tel"
								    >
									    <view>联系电话</view>
								    </app-jump-button>
							    </view>
						    </template>
							<!-- #ifndef MP-TOUTIAO -->
						    <template v-else-if="item === 'contact'">
							    <view class="box-grow-1 cross-center main-center contact">
								    <app-jump-button open_type="contact">
									    <view>客服</view>
								    </app-jump-button>
							    </view>
						    </template>
							<!-- #endif -->
						    <template v-else-if="item === 'contact_web'">
							    <view class="box-grow-1 cross-center main-center service">
								    <app-jump-button
										    :url="'/pages/web/web?url=' + mall.setting.web_service_url"
										    open_type="web"
								    >
									    <view>客服</view>
								    </app-jump-button>
							    </view>
						    </template>
					    </block>
				    </view>
				    <template v-else>
                        <view class="box-grow-1 dir-left-nowrap" style="height: 100%;" v-if="goods.goods_num == 0">
                            <view style="width: 100%;background-color: #CDCDCD;color: #fff;" class="main-center cross-center button">已售罄</view>
                        </view>
                        <view class="box-grow-1 dir-left-nowrap" style="height: 100%;" v-else>
    			<!-- 		    <view class="main-center cross-center button"
    					          :class="theme + '-secondary-background'"
    					          @click="clickAttr">
    						    加入购物车
    					    </view> -->
    					    <view class="main-center cross-center button buttonAttr"
    					          :class="theme + '-background'"
    					          @click="clickAttr"
    					    >立即购买
    					    </view>
                        </view>
				    </template>
			    </view>
		    </app-iphone-x>
	    </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 appService from "../../components/page-component/goods/app-goods-service.vue";
    import appGoodsAttr from "../../components/page-component/goods/app-goods-attr.vue";
    import appAttr from "../../components/page-component/app-attr/app-attr.vue";
    import appGoodsMarketing from "../../components/page-component/goods/app-goods-marketing.vue";
    import appJumpButton from "../../components/basic-component/app-jump-button/app-jump-button.vue";
    import appGoodsList from "../../components/page-component/app-goods-list/app-goods-list.vue";
    import appGoodsDetail from "../../components/page-component/goods/app-goods-detail.vue";
    import appGoodsRecommend from "../../components/page-component/app-goods-recommend/app-goods-recommend.vue";
    import appQuickNavigation from "../../components/page-component/app-quick-navigation/app-quick-navigation.vue";
    import appIphoneX from '../../components/basic-component/app-iphone-x/app-iphone-x.vue';
    import appEmptyBottom from'../../components/basic-component/app-empty-bottom/app-empty-bottom.vue';
    import appComposition from'../../components/basic-component/app-composition/app-composition.vue';
    import AppVipCard from '../../components/page-component/app-vip-card/app-vip-card';
    import uniSwiperDot from '../../components/basic-component/uni-swiper-dot/uni-swiper-dot';
    export default {
        name: "goods",
        components: {
            appGoodsBanner,
            appGoodsPrice,
            appGoodsAttr,
            appAttr,
            appGoodsMarketing,
            appJumpButton,
            'app-goods-list': appGoodsList,
            'app-goods-service': appService,
            'app-goods-detail': appGoodsDetail,
            'app-goods-recommend': appGoodsRecommend,
            'app-quick-navigation': appQuickNavigation,
            'app-composition': appComposition,
            appIphoneX,
            appEmptyBottom,
            uniSwiperDot,
            AppVipCard
        },
        data() {
            return {
                goods: null,
                selectAttr: null,
                recommend_list: null,
                is_vip: false,
                is_vip_card_user: 0,
                current: 0,
                discount: null,
                attrShow: 0,
                shareData: null,
            };
        },
        computed: {
            ...mapState({
                theme: state => state.mallConfig.theme,
                mall: state => state.mallConfig.mall,
                gConfig: state => state.gConfig,
            }),
        },
        onLoad(options) {
            if (this.isLogin) {
                this.$store.dispatch('user/info');
            } else {
            }
            this.loadData(options.id);
        },
        onShareAppMessage(object) {
            console.log(this.shareData);
            if (object.from === 'button' && this.shareData) {
                return this.$shareAppMessage(this.shareData);
            }
            return this.$shareAppMessage({
                title: this.goods.app_share_title ? this.goods.app_share_title : this.goods.name,
                imageUrl: this.goods.app_share_pic ? this.goods.app_share_pic : '',
                path: '/pages/goods/goods',
                params: {
                    id: this.goods.id
                }
            });
        },
        methods: {
            change(e) {
                this.current = e.detail.current;
            },
            quickShare(info) {
                console.log(info);
                this.shareData = info;
            },
            toComposition(item) {
                console.log(item)
                let id = item.id > 0 ? item.id : this.goods.plugin_extra.composition.list[0].id
                uni.navigateTo({
                    url: this.goods.plugin_extra.composition.url + '?goods_id=' + this.goods.id + '&composition_id=' + id
                })
            },
            loadData(id) {
                let that = this;
                that.$showLoading();
                that.$request({
                    url: that.$api.goods.detail,
                    data: {
                        id: id
                    }
                }).then(response => {
                    that.$hideLoading();
                    if (response.code === 0) {
                        that.goods = response.data.goods;
                        uni.setNavigationBarTitle({
                            title: that.goods.name
                        });
                        if(that.goods.vip_card_appoint.discount > 0) {
                            that.is_vip = true;
                            that.discount = that.goods.vip_card_appoint.discount
                        }
                        that.is_vip_card_user = that.goods.vip_card_appoint.is_vip_card_user;
                        that.loadRecommend();
                    } else {
                        uni.showModal({
                            title: '提示',
                            content: response.msg,
                            showCancel: false
                        });
                    }
                }).catch(e => {
                    that.$hideLoading();
                });
            },
            onAttr(data) {
                this.selectAttr = data;
            },
            loadRecommend() {
                let that = this;
                this.$request({
                    url: this.$api.goods.new_recommend,
                    data: {
                        goods_id: this.goods.id,
                        type: 'goods'
                    }
                }).then(response => {
                    if (response.code === 0) {
                        this.recommend_list = response.data.list;
                    }
                });
            },
            back() {
                uni.reLaunch({
                    url: '/pages/index/index'
                });
            },
            favorite() {
                let url = this.$api.user.favorite_add;
                let favorite = true;
                if (this.goods.favorite) {
                    url = this.$api.user.favorite_remove;
                    favorite = false;
                }
                this.goods.favorite = favorite;
                this.$request({
                    url: url,
                    data: {
                        goods_id: this.goods.id,
                    }
                }).then(response => {
                    if (response.code === 0) {
                    } else {
                        uni.showModal({
                            title: '提示',
                            content: response.msg,
                            showCancel: false,
                        });
                    }
                }).catch(e => {
                });
            },
            clickAttr() {
                this.attrShow = Math.random();
            },
        }
    }
</script>

<style scoped lang="scss">
    .goods-composition {
        padding: 24rpx;
        background-color: #fff;
        margin-bottom: 20rpx;
        .goods-composition-title {
            font-size: 28rpx;
            color: #353535;
            margin-bottom: 20rpx;
        }
        .goods-composition-swiper {
            height: 194rpx;
        }
        .goods-composition-more {
            margin: 0 auto;
            width: 226rpx;
            padding: 0 24rpx;
            height: 56rpx;
            line-height: 54rpx;
            border-radius: 28rpx;
            border: 2rpx solid #bbbbbb;
            font-size: 24rpx;
            color: #999999;
            margin-bottom: 4rpx;
            image {
                width: #{12rpx};
                height: #{22rpx};
                display: block;
            }
        }
    }
    .goods-name {
        padding: #{24rpx 24rpx 0 24rpx};
        background-color: #ffffff;
        color: $uni-important-color-black;
		font-size:36rpx;
		font-family:Source Han Sans CN;
		font-weight:500;
		color:rgba(62,62,62,1);
    }

	.price {
		padding-top: #{24rpx};
		background-color: #ffffff;
	}

    .vip-card {
        padding-bottom: #{20rpx};
        background-color: #fff;
    }

    .merchant-guarantee {
        margin-top: #{20rpx};
    }

    .attr {
        padding: #{24rpx} 0;
        background-color: #f7f7f7;
    }

    .bottom {
        width: 100%;
        height: #{110rpx};
    }

    .app-bottom {
        width: 100%;
        height: #{110rpx};
        font-size: $uni-font-size-general-one;
        background-color: #ffffff;

        .little {
            // width: #{110rpx};
            // width: #{30%};
            width: #{220rpx};
            height: 100%;
            background-color: #ffffff;
            font-size: #{20rpx};
            color: $uni-general-color-two;

            &:first-child {
                border-right: #{1rpx} solid #e2e2e2;
            }

            image {
                width: #{40rpx};
                height: #{40rpx};
                display: block;
                margin-bottom: #{10rpx};
            }
        }

		.btn {
			height: 100%;
		}

        .button {
            width: 50%;
            height: 100%;
        }
		.buttonAttr{
			width: 100%;
			height: 100%;
		}

        .service {
            background-color: #446dfd;
            color: #ffffff;
        }

        .contact-tel {
            background-color: #f39800;
            color: #ffffff;
        }

        .contact {
            background-color: #4cbf2a;
            color: #ffffff;
        }
    }
</style>