shop4.3.57/components/page-component/index/app-diy-page.vue

<template>
    <view class="app-diy-page" :style="shareFixed?'padding-top:124rpx':''" v-bind:class="mp_link_top ? 'mp_link_top' : ''">
        <view class="nav-bar dir-left-nowrap" v-bind:class="mp_link_top ? 'mp_link_top' : ''" v-if="newData.show_navs == 1">
            <block v-for="(nav, index) in newData.navs" :key="index">
                <view class="nav-bar-one cross-center box-grow-0"
                      v-bind:class="nav_active === index ? 'active ' + theme + '-m-text ' + theme : ''"
                      v-on:click='changeNav(index)'
                >
                    {{nav.name}}
                </view>
            </block>
        </view>
        <view class="diy-template">
            <block v-for="(item, index) in newData.navs" :key="index">
                <template v-if="nav_active === index">
                    <block v-for="(temp, temp_index) in item.template.data" :key="temp_index">
                        <template v-if="temp.id === 'background'">
                            <view
                                class="app-diy-bg"
                                :style="[
                            {'background-color':`${temp.data.backgroundColor}`,
                            'background-image': temp.data.backgroundPicUrl ? `url(${temp.data.backgroundPicUrl})` : `none`,
                            'background-size':`${temp.data.backgroundWidth + '% ' + temp.data.backgroundHeight + '%'}`,
                            'background-position':`${transLabelBackgroundPosition(temp.data.position)}`,
                            'background-repeat':`${transLabelBackgroundRepeat(temp.data.mode)}`}
                        ]"
                            ></view>
                        </template>

                        <!--搜索-->
                        <template v-else-if="temp.id === 'search'">
                            <app-search-for v-bind:value="temp.data"></app-search-for>
                        </template>

                        <!--轮播图-->
                        <template v-else-if="temp.id === 'banner'">
                            <template v-if="temp.data.banners.length > 0">
                                <view :style="{height: temp.data.height + 'rpx'}" v-if="temp.data.effect == 1 || !temp.data.effect">
                                    <app-swiper
                                        :list="temp.data.banners"
                                        :autoplay="temp.data.autoplay === 0 ? true : false"
                                        name="pic_url"
                                        :effect3d="temp.data.style === 2 ? true : false"
                                        :height="temp.data.height"
                                        :effect3dPreviousMargin="50"
                                        :imgMode="temp.data.fill === 0 ? 'aspectFit' : 'scaleToFill'"
                                        :interval="temp.data.interval ? temp.data.interval : 3000"
                                        :duration="temp.data.duration ? temp.data.duration : 500"
                                        :mode="temp.data.mode"
                                    ></app-swiper>
                                </view>
                                <view :style="{height: temp.data.height + 'rpx'}" v-if="temp.data.effect == 2">
                                    <u-swiper
                                        :list="temp.data.banners"
                                        name="pic_url"
                                        :height="temp.data.height"
                                        :interval="temp.data.interval ? temp.data.interval : 3000"
                                        :duration="temp.data.duration ? temp.data.duration : 500"
                                        :mode="temp.data.mode"
                                        :imgMode="temp.data.fill === 0 ? 'aspectFit' : 'scaleToFill'"
                                        :autoplay="temp.data.autoplay === 0 ? true : false"
                                    >
                                    </u-swiper>
                                </view>
                            </template>
                        </template>

                        <!-- 普通商品列表 -->
                        <template v-else-if="temp.id === 'goods'">
                            <view
                                :style="[
                            {'background-color':`${temp.data.backgroundColor}`,
                            'background-image': temp.data.backgroundPicUrl ? `url(${temp.data.backgroundPicUrl})` : `none`,
                            'background-size':`${temp.data.backgroundWidth + '% ' + temp.data.backgroundHeight + '%'}`,
                            'background-position':`${transLabelBackgroundPosition(temp.data.position)}`,
                            'background-repeat':`${transLabelBackgroundRepeat(temp.data.mode)}`}
                        ]">
                                <!--排序-->
                                <view class="goods-rank">
                                    <view class="item" :class="rr.is_choose?'active':''" v-for="(rr,rrindex) in goods_rank"
                                          :key="rrindex" @click="changeRank(rr,temp.data.list)">
                                        <text>{{rr.name}}</text>
                                        <image :src="rr[rr.rank_type+'_img']"
                                               v-if="rr.is_rank"></image>
                                    </view>
                                </view>
                                <template v-if="temp.data.catPosition === 'top'">
                                    <u-ordinary-list
                                        v-bind:theme="theme"
                                        v-bind:show-cat="temp.data.showCat"
                                        v-bind:cat-list="temp.data.catList"
                                        v-bind:cat-style="temp.data.catStyle"
                                        v-bind:list="temp.data.list"
                                        v-bind:list-style="temp.data.listStyle"
                                        v-bind:goods-style="temp.data.goodsStyle"
                                        v-bind:goods-tag-pic-url="temp.data.goodsTagPicUrl"
                                        v-bind:goods-cover-proportion="temp.data.goodsCoverProportion"
                                        v-bind:show-goods-tag="temp.data.showGoodsTag"
                                        v-bind:show-goods-name="temp.data.showGoodsName"
                                        v-bind:show-goods-price="temp.data.showGoodsPrice"
                                        v-bind:show-buy-btn="temp.data.showBuyBtn"
                                        v-bind:buy-btn="temp.data.buyBtn"
                                        v-bind:buy-btn-style="temp.data.buyBtnStyle"
                                        v-bind:buy-btn-text="temp.data.buyBtnText"
                                        v-bind:button-color="temp.data.buttonColor"
                                        v-bind:text-style="temp.data.textStyle"
                                        v-bind:is-under-line-price="temp.data.isUnderLinePrice"
                                        v-bind:fill="temp.data.fill"
                                        v-bind:isDIY="true"
                                        v-on:buyProduct="buyProduct"
                                        :theme-object="themeObject"
                                    >
                                    </u-ordinary-list>
                                </template>

                                <template v-else>
                                    <app-recommended-product-list
                                        v-bind:show-cat="temp.data.showCat"
                                        v-bind:show-buy-btn="temp.data.showBuyBtn"
                                        v-bind:cat-style="temp.data.catStyle"
                                        v-bind:cat-list="temp.data.catList"
                                        v-bind:list="temp.data.list" :list-style="temp.data.listStyle"
                                        v-bind:goods-cover-proportion="temp.data.goodsCoverProportion"
                                        v-bind:fill="temp.data.fill" :goods-style="temp.data.goodsStyle"
                                        v-bind:show-goods-name="temp.data.showGoodsName"
                                        v-bind:show-goods-price="temp.data.showGoodsPrice"
                                        v-bind:buy-btn="temp.data.buyBtn" :sign="temp.id"
                                        v-bind:buy-btn-style="temp.data.buyBtnStyle"
                                        v-bind:buy-btn-text="temp.data.buyBtnText"
                                        v-bind:show-goods-tag="temp.data.showGoodsTag"
                                        v-bind:customize-goods-tag="temp.data.customizeGoodsTag"
                                        v-bind:goods-tag-pic-url="temp.data.goodsTagPicUrl"
                                        v-bind:button-color="temp.data.buttonColor"
                                        v-bind:is-under-line-price="temp.data.isUnderLinePrice"
                                        v-bind:theme="theme"
                                        v-bind:cat-position="temp.data.catPosition"
                                    ></app-recommended-product-list>
                                </template>
                            </view>
                        </template>

                        <!-- 插件商品列表 -->
                        <template v-else-if="temp.id === 'pintuan'
                            || temp.id === 'miaosha'
                            || temp.id === 'advance'
                            || temp.id === 'booking'
                            || temp.id === 'bargain'
                            || temp.id === 'pick'
                            || temp.id === 'lottery'
                            || temp.id === 'integral-mall'
                            || temp.id === 'gift'
                            || temp.id === 'exchange'
                            || temp.id === 'composition'
                            || temp.id === 'flash-sale'
                            || temp.id === 'wholesale'">

                            <view :style="[
                            {'background-color':`${temp.data.backgroundColor}`,
                            'background-image': temp.data.backgroundPicUrl ? `url(${temp.data.backgroundPicUrl})` : `none`,
                            'background-size':`${temp.data.backgroundWidth + '% ' + temp.data.backgroundHeight + '%'}`,
                            'background-position':`${transLabelBackgroundPosition(temp.data.position)}`,
                            'background-repeat':`${transLabelBackgroundRepeat(temp.data.mode)}`}]"
                            >
                                <template v-if="temp.id === 'integral-mall' && temp.data.showCoupon">
                                    <app-exclusive-coupon
                                        v-bind:none-color="true"
                                        v-bind:list="temp.data.coupon_list"
                                        v-bind:sign="temp.id"
                                        v-bind:text-color="temp.data.couponColor"
                                        v-bind:show-top="false"
                                        v-bind:coupon_req="coupon_req"
                                        v-bind:unclaimed-bg="temp.data.couponPicUrl"
                                    ></app-exclusive-coupon>
                                </template>
                                <app-diy-goods-list
                                    v-bind:show-buy-btn="temp.data.showBuyBtn"
                                    v-bind:list="temp.data.list"
                                    v-bind:list-style="temp.data.listStyle"
                                    v-bind:goods-cover-proportion="temp.data.goodsCoverProportion"
                                    v-bind:fill="temp.data.fill"
                                    v-bind:goods-style="temp.data.goodsStyle"
                                    v-bind:show-goods-name="temp.data.showGoodsName"
                                    v-bind:text-style="temp.data.textStyle"
                                    v-bind:sign="temp.id"
                                    v-bind:button-color="temp.data.buttonColor"
                                    v-bind:buy-btn-style="temp.data.buyBtnStyle"
                                    v-bind:buy-btn-text="temp.data.buyBtnText"
                                    v-bind:show-goods-tag="temp.data.showGoodsTag"
                                    v-bind:page-hide="pageHide"
                                    v-bind:show-progress-bar="temp.data.showProgressBar"
                                    v-bind:customize-goods-tag="temp.data.customizeGoodsTag"
                                    v-bind:is-under-line-price="temp.data.isUnderLinePrice"
                                    v-bind:goods-tag-pic-url="temp.data.goodsTagPicUrl"
                                    v-bind:theme="theme"
                                ></app-diy-goods-list>
                            </view>

                        </template>

                        <template v-else-if="temp.id === 'rubik'">
                            <view style="position: relative">
                                <app-image-ad
                                    v-bind:image-style="temp.data.style"
                                    v-bind:list="temp.data.list"
                                    v-bind:height="temp.data.height"
                                ></app-image-ad>
                                <block v-for="(hotspot, hotspot_index) in temp.data.hotspot" v-bind:key="hotspot_index">
                                    <app-hotspot v-bind:hotspot="rubikHotspot(hotspot)"></app-hotspot>
                                </block>
                            </view>
                        </template>

                        <template v-else-if="temp.id === 'notice'">
                            <u-announcement
                                v-bind:bgColor="temp.data.background"
                                v-bind:btn-color="temp.data.btnColor"
                                v-bind:btn-height="temp.data.btnHeight"
                                v-bind:btn-radius="`${temp.data.btnRadius}rpx`"
                                v-bind:btn-text="temp.data.btnText"
                                v-bind:btn-text-color="temp.data.btnTextColor"
                                v-bind:btn-width="temp.data.btnWidth"
                                v-bind:content="temp.data.content"
                                v-bind:header-url="temp.data.headerUrl"
                                v-bind:icon="temp.data.icon"
                                v-bind:name="temp.data.name"
                                v-bind:textColor="temp.data.textColor"
                            ></u-announcement>
                        </template>

                        <template v-else-if="temp.id === 'nav'">
                            <!-- 新数据 -->
                            <template v-if="temp.data.modeType">
                                <app-navigation-two-icon
                                    v-bind:mode-type="temp.data.modeType"
                                    v-bind:background="temp.data.backgroundColor"
                                    v-bind:color="temp.data.color"
                                    v-bind:navs="temp.data.navs"
                                    v-bind:columns="temp.data.columns"
                                    v-bind:temp-index="temp_index"
                                    v-bind:nav-type="temp.data.navType"
                                    v-bind:alone-num="temp.data.aloneNum"
                                    v-bind:line-num="temp.data.lineNum"
                                    v-bind:swiper-type="temp.data.swiperType"
                                    v-bind:swiper-color="temp.data.swiperColor"
                                    v-bind:swiper-no-color="temp.data.swiperNoColor"
                                ></app-navigation-two-icon>
                            </template>

                            <!-- 老数据 -->
                            <template v-else>
                                <view
                                    :style="[
                                        {'background-color':`${temp.data.backgroundColor}`,
                                        'background-image': temp.data.backgroundPicUrl ? `url(${temp.data.backgroundPicUrl})` : `none`,
                                        'background-size':`${temp.data.backgroundWidth + '% ' + temp.data.backgroundHeight + '%'}`,
                                        'background-position':`${transLabelBackgroundPosition(temp.data.position)}`,
                                        'background-repeat':`${transLabelBackgroundRepeat(temp.data.mode)}`}]"
                                >
                                    <app-navigation-icon
                                        v-bind:background="''"
                                        v-bind:color="temp.data.color"
                                        v-bind:rows="temp.data.rows"
                                        v-bind:columns="temp.data.columns"
                                        v-bind:scroll="temp.data.scroll"
                                        v-bind:navs="temp.data.navs"
                                    ></app-navigation-icon>
                                </view>
                            </template>
                        </template>

                        <template v-else-if="temp.id === 'video'">
                            <app-video :pic-url="temp.data.pic_url" :url="temp.data.url"></app-video>
                        </template>

                        <template v-else-if="temp.id === 'link'">
                            <app-associated-link
                                v-bind:arrows-switch="temp.data.arrowsSwitch"
                                v-bind:background="temp.data.background"
                                v-bind:color="temp.data.color"
                                v-bind:position="temp.data.position"
                                v-bind:style-color="temp.data.styleColor"
                                v-bind:link="Object.assign({}, temp.data.link)"
                                v-bind:styleNum="temp.data.style"
                                v-bind:pic-switch="temp.data.picSwitch"
                                v-bind:pic-url="temp.data.picUrl"
                                v-bind:font-size="temp.data.fontSize"
                                v-bind:title="temp.data.title"
                            ></app-associated-link>
                        </template>

                        <template v-else-if="temp.id === 'topic'">
                            <template v-if="temp.data.style === 'normal'">
                                <app-special-topic
                                    v-bind:count="temp.data.count"
                                    v-bind:icon="temp.data.icon"
                                    v-bind:logo_1="temp.data.logo_1"
                                    v-bind:logo_2="temp.data.logo_2"
                                    v-bind:topic_list="temp.data.topic_list"
                                ></app-special-topic>
                            </template>

                            <template v-else-if="temp.data.style === 'list'">
                                <app-special-topic-list
                                    v-bind:cat-show="temp.data.cat_show"
                                    v-bind:list="temp.data.list"
                                    v-bind:theme="theme"
                                    v-bind:topic-list="temp.data.topic_list"
                                ></app-special-topic-list>
                            </template>
                        </template>

                        <template v-else-if="temp.id === 'store'">
                            <app-shop
                                v-bind:list="temp.data.list"
                                v-bind:nav-pic-url="temp.data.navPicUrl"
                                v-bind:score-pic-url="temp.data.scorePicUrl"
                                v-bind:show-name="temp.data.showName"
                                v-bind:show-score="temp.data.showScore"
                                v-bind:show-tel="temp.data.showTel"
                                v-bind:scrollTop="scrollTop"
                            ></app-shop>
                        </template>

                        <template v-else-if="temp.id === 'copyright'">
                            <app-copyright
                                v-bind:background-color="temp.data.backgroundColor"
                                v-bind:text="temp.data.text"
                                v-bind:pic-url="temp.data.picUrl"
                                v-bind:link="temp.data.link"
                            ></app-copyright>
                        </template>

                        <template v-else-if="temp.id === 'user-info'">
                            <app-user-center
                                v-bind:top-pic-url="temp.data.backgroundPicUrl"
                                v-bind:member-pic-url="userCenter.member_pic_url"
                                v-bind:top-style="temp.data.style"
                            ></app-user-center>
                        </template>

                        <template v-else-if="temp.id === 'user-order'">
                            <app-my-order
                                v-bind:order_bar="temp.data.navs"
                                v-bind:background-color="temp.data.backgroundColor"
                                v-bind:theme="theme"
                            ></app-my-order>
                        </template>

                        <!-- 优惠券 -->
                        <template v-else-if="temp.id === 'coupon'">
                            <app-exclusive-coupon-two
                                background="#FFFFFF"
                                v-bind:list="temp.data.coupon_list"
                                v-bind:receive-bg="temp.data.receiveBg"
                                v-bind:text-color="temp.data.textColor"
                                v-bind:unclaimed-bg="temp.data.unclaimedBg"
                                v-bind:coupon_req="coupon_req"
                                v-bind:coupon-bg="temp.data.couponBg ? temp.data.couponBg : `#D9BC8B`"
                                v-bind:coupon-bg-type="temp.data.couponBgType"
                                v-bind:add-type="temp.data.addType"
                                v-bind:page_id="page_id"
                                v-bind:template_id="item.template_id"
                                v-bind:d-index="[nav_active,temp_index]"
                                v-bind:m-index="dIndex"
                                v-bind:d-type="dType"
                            ></app-exclusive-coupon-two>
                        </template>

                        <template v-else-if="temp.id === 'timer'">
                            <app-diy-timer
                                v-bind:pic-url="temp.data.picUrl"
                                v-bind:start-date-time="temp.data.startDateTime"
                                v-bind:end-date-time="temp.data.endDateTime"
                                v-bind:page-hide="pageHide"
                                v-bind:bg-pic-url="temp.data.bgPicUrl"
                                v-bind:link="temp.data.link"
                            ></app-diy-timer>
                        </template>

                        <template v-else-if="temp.id === 'mch'">
                            <view :style="[
                                {'background-color':`${temp.data.backgroundColor}`,
                                'background-image': temp.data.backgroundPicUrl ? `url(${temp.data.backgroundPicUrl})` : `none`,
                                'background-size':`${temp.data.backgroundWidth + '% ' + temp.data.backgroundHeight + '%'}`,
                                'background-position':`${transLabelBackgroundPosition(temp.data.position)}`,
                                'background-repeat':`${transLabelBackgroundRepeat(temp.data.mode)}`}]"
                            >
                                <app-goods-shop
                                    v-bind:card-style="temp.data.cardStyle"
                                    v-bind:background-color="temp.data.backgroundColor"
                                    type="diy"
                                    v-bind:theme="theme"
                                    v-bind:mch_list="temp.data.list"
                                    v-bind:coupon_req="coupon_req"
                                    v-bind:is_required="is_required"
                                    v-bind:show-goods="temp.data.showGoods"
                                ></app-goods-shop>
                            </view>
                        </template>

                        <template v-else-if="temp.id === 'empty'">
                            <app-empty
                                v-bind:height="temp.data.height"
                                v-bind:background-color="temp.data.background"
                            ></app-empty>
                        </template>

                        <template v-else-if="temp.id === 'ad'">
                            <app-ad
                                v-bind:unit-id="temp.data.id"
                                v-bind:type="temp.data.type"
                                v-bind:coupon-url="coupon_url"
                                v-bind:video-url="temp.data.video_url"
                                v-bind:pic-url="temp.data.pic_url"
                                v-bind:coupon-params="item | getObje"
                            ></app-ad>
                        </template>

                        <template v-else-if="temp.id === 'modal'">
                            <app-popup-ad
                                v-bind:opened="temp.data.opened"
                                v-bind:times="temp.data.times"
                                v-bind:list="temp.data.list"
                                v-bind:multiple="true"
                                v-bind:is_storage="is_storage"
                                v-bind:mark="homePages.id + '-' + homePages.navs[nav_active].id + '-' + temp_index"
                            ></app-popup-ad>
                        </template>

                        <template v-else-if="temp.id === 'quick-nav' && temp.data.navSwitch == 1">
                            <app-quick-navigation
                                v-bind:value="temp.data"
                                v-bind:use-mall-config="temp.data.useMallConfig"
                            ></app-quick-navigation>
                        </template>

                        <!-- #ifdef MP-WEIXIN -->
                        <template v-else-if="temp.id === 'mp-link'">
                            <view v-bind:class="temp.data.position === 'top' ? `mp-link-top` : ``">
                                <official-account
                                    v-on:load="mpLink(temp.data.position)"
                                    v-on:error="mpLinkError"
                                ></official-account>
                            </view>
                        </template>
                        <!-- #endif -->

                        <!-- #ifndef MP-TOUTIAO -->
                        <template v-else-if="temp.id === 'map'">
                            <app-map
                                v-bind:background-pic-url="temp.data.backgroundPicUrl"
                                v-bind:height="temp.data.height"
                                v-bind:latitude="temp.data.latitude"
                                v-bind:longitude="temp.data.longitude"
                                v-bind:margin-top="temp.data.marginTop"
                                v-bind:margin-top-color="temp.data.marginTopColor"
                                v-bind:padding-x="temp.data.paddingX"
                                v-bind:padding-y="temp.data.paddingY"
                            ></app-map>
                        </template>
                        <!-- #endif -->

                        <template v-else-if="temp.id === 'check-in'">
                            <app-check-in
                                v-bind:background-pic-url="temp.data.backgroundPicUrl"
                                v-bind:hotspot="temp.data.hotspot"
                                v-bind:show-text="temp.data.showText"
                                v-bind:text-color="temp.data.textColor"
                                v-bind:text-position="temp.data.textPosition"
                            ></app-check-in>
                        </template>

                        <template v-else-if="temp.id === 'image-text'">
                            <view style="padding: 0 24rpx;">
                                <app-rich v-bind:content='temp.data.content'></app-rich>
                            </view>
                        </template>

                        <template v-else-if="temp.id === 'form'">
                            <app-diy-form
                                v-bind:title="temp.name"
                                v-bind:list="temp.data.formDialog"
                                v-bind:item-padding-x="temp.data.inputPadding"
                                v-bind:item-margin-y="temp.data.marginBottom"
                                v-bind:item-height="temp.data.height"
                                v-bind:show-item-border="false"
                                v-bind:label-position="transLabelPosition(temp.data.style)"
                                v-bind:label-color="temp.data.inputLabel"
                                label-text-align="left"
                                v-bind:show-input-border="true"
                                v-bind:input-background="temp.data.inputBackground"
                                v-bind:input-border-color="temp.data.inputBorder"
                                v-bind:input-text-color="temp.data.inputText"
                                v-bind:input-placeholder-color="temp.data.inputTip"
                                v-bind:input-radius="temp.data.radius"
                                v-bind:show-submit="true"
                                v-bind:submit-url="diyFormSubmitUrl"
                                v-bind:submit-btn-text="temp.data.borderContent"
                                v-bind:submit-btn-height="temp.data.buttonHeight"
                                v-bind:submit-btn-padding="temp.data.buttonPadding"
                                v-bind:submit-btn-margin="temp.data.buttonMargin"
                                v-bind:submit-btn-radius="temp.data.buttonRadius"
                                v-bind:submit-btn-background="temp.data.borderBackground"
                                v-bind:submit-btn-border-color="temp.data.borderBorder"
                                v-bind:submit-btn-text-color="temp.data.borderText"
                                v-bind:background-color="temp.data.backgroundColor"
                                v-bind:background-image="temp.data.backgroundPicUrl"
                                v-bind:background-width="temp.data.backgroundWidth"
                                v-bind:background-height="temp.data.backgroundHeight"
                                v-bind:background-position="transLabelBackgroundPosition(temp.data.position)"
                                v-bind:background-repeat="transLabelBackgroundRepeat(temp.data.mode)"
                                v-bind:margin-top="temp.data.marginTop"
                                v-bind:margin-color="temp.data.marginColor"
                                v-bind:padding-top="temp.data.padding"
                                v-bind:padding-bottom="temp.data.padding"
                                v-bind:select-box-color="temp.data.selectBoxColor"
                            ></app-diy-form>
                        </template>

                        <!--超级会员卡组件-->
                        <template v-else-if="temp.id === 'vip-card'">
                            <app-vip-card
                                v-bind:value="temp.data" top="0"
                                v-bind:background="temp.data.background"
                            ></app-vip-card>
                        </template>

                        <!--直播组件-->
                        <!--  #ifdef MP-WEIXIN -->
                        <template v-else-if="temp.id === 'live'">
                            <app-live v-bind:value="temp.data"></app-live>
                        </template>
                        <!-- #endif -->

                        <template v-else-if="temp.id === 'module' && is_module">
                            <app-module
                                v-bind:tab-type="temp.data.tabType"
                                v-bind:tab-color="temp.data.tabColor"
                                v-bind:text-color="temp.data.textColor"
                                v-bind:tab-background="temp.data.tabBackground"
                                v-bind:list="temp.data.list"
                                v-bind:d-index="[index, temp_index]"
                                v-bind:theme="theme"
                                v-bind:page-hide="pageHide"
                                v-bind:home-pages="homePages"
                                v-bind:is_storage="is_storage"
                                v-bind:page_id="page_id"
                                v-bind:is_required="is_required"
                                v-bind:coupon_req="coupon_req"
                                @buyProduct="buyProduct"
                            ></app-module>
                        </template>
                    </block>
                </template>
            </block>
        </view>
    </view>
</template>

<script>
    import {mapState} from 'vuex';
    import appSearchFor from '../../page-component/app-search-for/app-search-for.vue';
    import appSwiper from '../../page-component/app-swiper/app-swiper.vue';
    import uSwiper from '../../page-component/app-swiper/swiper.vue';
    import uAnnouncement from '../../page-component/u-announcement/u-announcement.vue';
    import appNavigationIcon from '../../page-component/app-navigation-icon/app-navigation-icon.vue';
    import appNavigationTwoIcon from '../../page-component/app-navigation-icon/app-navigation-two-icon.vue';
    import appVideo from '../../page-component/app-video/app-video.vue';
    import appAssociatedLink from '../../page-component/app-associated-link/app-associated-link.vue';
    import appSpecialTopic from '../../page-component/app-special-topic/app-special-topic-normal.vue';
    import appSpecialTopicList from '../../page-component/app-special-topic/app-special-topic-list.vue';
    import appImageAd from '../../page-component/app-image-ad/app-image-ad.vue';
    import appHotspot from '../../basic-component/app-hotspot/app-hotspot.vue';
    import appShop from '../../page-component/app-shop/app-shop.vue';
    import appCopyright from '../../page-component/app-copyright/app-copyright.vue';
    import appUserCenter from '../../page-component/app-user-center-top/app-user-center-top.vue';
    import appMyOrder from '../../page-component/app-my-order/app-my-order.vue';
    import appRecommendedProductList from '../../page-component/app-recommended-product/app-recommended-product-list.vue';
    import appExclusiveCoupon from '../../page-component/app-exclusive-coupon/app-exclusive-coupon.vue';
    import appExclusiveCouponTwo from '../../page-component/app-exclusive-coupon/app-exclusive-coupon-two.vue';
    import appDiyTimer from '../../page-component/app-diy-timer/app-diy-timer.vue';
    import appGoodsShop from '../../page-component/app-good-shop-recommendation/app-good-shop-recommendation.vue';
    import appEmpty from '../../basic-component/app-empty/app-empty.vue';
    import appPopupAd from '../../page-component/app-popup-ad/app-popup-ad.vue';
    import appQuickNavigation from '../../page-component/app-quick-navigation/app-quick-navigation.vue';
    import appCheckIn from '../../page-component/app-check-in/app-check-in.vue';
    import appRich from '../../basic-component/app-rich/parse.vue';
    import appReservation from "../../page-component/app-reservation/app-reservation.vue";
    import appSpike from "../../page-component/app-spike/app-spike.vue";
    import appDiyGoodsList from "../../page-component/app-diy-goods-list/app-diy-goods-list.vue";
    import appDiyForm from "../../page-component/app-diy-form/app-diy-form.vue";
    import appVipCard from "../../page-component/app-vip-card/app-vip-card.vue";
    import appAd from "../../page-component/app-ad/app-ad.vue";
    import appModule from "../../page-component/index/app-module.vue";
    import uOrdinaryList from '../u-goods-list/u-ordinary-list.vue';
    // #ifdef MP-WEIXIN
    import appLive from "../../page-component/app-live/app-live.vue";
    // #endif
    // #ifndef MP-TOUTIAO
    import appMap from "../../page-component/app-map/app-map.vue";
    // #endif

    export default {
        name: "app-diy-page",
        components: {
            'app-search-for': appSearchFor,
            'app-swiper': appSwiper,
            uAnnouncement,
            'app-navigation-icon': appNavigationIcon,
            'app-navigation-two-icon': appNavigationTwoIcon,
            'app-video': appVideo,
            'app-associated-link': appAssociatedLink,
            'app-special-topic': appSpecialTopic,
            'app-special-topic-list': appSpecialTopicList,
            'app-image-ad': appImageAd,
            'app-hotspot': appHotspot,
            'app-shop': appShop,
            'app-copyright': appCopyright,
            'app-user-center': appUserCenter,
            'app-my-order': appMyOrder,
            'app-recommended-product-list': appRecommendedProductList,
            'app-exclusive-coupon': appExclusiveCoupon,
            appExclusiveCouponTwo,
            'app-diy-timer': appDiyTimer,
            'app-goods-shop': appGoodsShop,
            'app-empty': appEmpty,
            'app-popup-ad': appPopupAd,
            'app-quick-navigation': appQuickNavigation,
            'app-check-in': appCheckIn,
            'app-rich': appRich,
            'app-reservation': appReservation,
            'app-spike': appSpike,
            'app-diy-goods-list': appDiyGoodsList,
            'app-diy-form': appDiyForm,
            'app-vip-card': appVipCard,
            // 普通商品列表
            uOrdinaryList,
            // #ifndef MP-TOUTIAO
            appMap,
            // #endif
            appAd,
            appModule,
            // #ifdef MP-WEIXIN
            appLive,
            // #endif
            uSwiper
        },
        props: {
            dIndex: {
                type: Array,
                default() {
                    return [0, 0];
                }
            },
            dType: String, //module 模块
            homePages: {
                type: Object,
                default() {
                    return {
                        navs: []
                    };
                }
            },
            scrollTop: {
                type: Number,
                default() {
                    return 0;
                }
            },
            is_storage: Boolean,
            shareFixed: Boolean,
            pageHide: Boolean,
            theme: String,
            coupon_req: Boolean,
            is_required: Boolean,
            page_id: Number,
            is_module: {
                type: Boolean,
                default() {
                    return true;
                }
            }
        },
        computed: {
            newData() {
                if (this.homePages) {
                    if (this.homePages.title) {
                        uni.setNavigationBarTitle({
                            title: this.homePages.title,
                        });
                    }
                    return this.homePages;
                } else {
                    return {
                        navs: [],
                    }
                }
            },
            ...mapState({
                userCenter: state => state.mallConfig.user_center,
            }),
            diyFormSubmitUrl() {
                return this.$api.diy.page_store;
            },
            themeObject:function() {
                return {
                    back: this.theme + '-m-back ' + this.theme,
                    backP: this.theme + '-m-back-p ' + this.theme,
                    backO: this.theme + '-m-back-o ' + this.theme,
                    theme: this.theme,
                    color: this.theme + '-m-text ' + this.theme,
                    sBack: this.theme + '-s-back ' + this.theme,
                    border: this.theme + '-m-border ' + this.theme,
                }
            },
        },
        data() {
            return {
                nav_active: 0,
                mp_link_top: false,
                coupon_url: this.$api.diy.receive,
                coupon_params: {},
                goods_rank:[{
                    name:'综合',
                    is_rank:false,
                    is_choose: true,
                },{
                    name:'销量',
                    is_rank:true,
                    is_choose: false,
                    rank_type:'default',
                    key:'sale',
                    default_img:'../../../static/image/icon/price-sort-default.png',
                    top_img:'../../../static/image/icon/price-sort-to-high.png',
                    low_img:'../../../static/image/icon/price-sort-to-low.png',
                },{
                    name:'价格',
                    is_rank:true,
                    is_choose: false,
                    rank_type:'default',
                    key:'price',
                    default_img:'../../../static/image/icon/price-sort-default.png',
                    top_img:'../../../static/image/icon/price-sort-to-high.png',
                    low_img:'../../../static/image/icon/price-sort-to-low.png',
                },/*{
                    name:'最新上架',
                    is_rank:true,
                    is_choose: false,
                    rank_type:'default',
                    key:'time',
                    default_img:'../../../static/image/icon/price-sort-default.png',
                    top_img:'../../../static/image/icon/price-sort-to-high.png',
                    low_img:'../../../static/image/icon/price-sort-to-low.png',
                }*/]
            };
        },

        filters: {
            getObje(data) {
                if (!data) return;
                return {
                    template_id: data.template_id
                }
            }
        },
        methods: {
            changeNav(index) {
                this.nav_active = index;
                this.mp_link_top = false;
            },
            rubikHotspot(hotspot) {
                if (hotspot && hotspot.link) {
                    hotspot.link.url = hotspot.link.value;
                    hotspot.link.openType = hotspot.link.open_type;
                }
                return hotspot;
            },
            mpLink(position) {
                if (position === 'top') {
                    this.mp_link_top = true;
                }
            },
            transLabelPosition(val) {
                val = Number(val);
                switch (val) {
                    case 3:
                        return 'top';
                    case 2:
                        return 'inset';
                    default:
                        return 'left';
                }
            },
            transLabelBackgroundPosition(val) {
                val = Number(val);
                switch (val) {
                    case 1:
                        return 'left top';
                    case 2:
                        return 'center top';
                    case 3:
                        return 'right top';
                    case 4:
                        return 'left center';
                    case 5:
                        return 'center center';
                    case 6:
                        return 'right center';
                    case 7:
                        return 'left bottom';
                    case 8:
                        return 'center bottom';
                    case 9:
                        return 'right bottom';
                    default:
                        return 'center';
                }
            },
            transLabelBackgroundRepeat(val) {
                val = Number(val);
                switch (val) {
                    case 1:
                        return 'no-repeat';
                    case 2:
                        return 'repeat-x';
                    case 3:
                        return 'repeat-y';
                    case 4:
                        return 'repeat';
                    default:
                        return 'no-repeat';
                }
            },
            mpLinkError() {
                this.mp_link_top = false;
            },

            buyProduct(data) {
                this.$emit('buyProduct', data);
            },
            changeRank(item,goods_list){
                let _this = this;
                _this.goods_rank.forEach(val => {
                    if(item.key == val.key){
                        val.is_choose = true;
                        switch ( val.rank_type) {
                            case 'default':
                            case 'top':
                                val.rank_type = 'low';
                                break;
                            case 'low':
                                val.rank_type = 'top';
                                break;
                        }
                    }else{
                        val.is_choose = false;
                        val.rank_type = 'default';
                    }
                });
                if(!goods_list.old){
                    goods_list.old = JSON.stringify(goods_list)

                }
                switch (item.key) {
                    case 'sale':
                        goods_list.sort(_this.compare('sales',item.rank_type))
                        break;
                    case 'price':
                        goods_list.sort(_this.compare('price',item.rank_type))
                        break;
                    case 'time':
                        goods_list.sort(_this.compare('age',item.rank_type))
                        break;
                    default:
                        goods_list.sort(_this.compare('id',item.rank_type))
                }
            },
            compare (property,type){
                let regex = /\d+/;
                return function (obj1, obj2) {
                    let value1 = regex.exec(obj1[property]);
                    let value2 = regex.exec(obj2[property]);
                    value1 = value1[0];
                    value2 = value2[0];
                    if(type == 'top'){
                        return value1 - value2;     // 升序
                    }
                    return value2 - value1;     // 降序

                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .app-diy-bg {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
    }

    //#ifdef MP-ALIPAY
    .app-diy-page /deep/ .app-diy-page {
        position: static !important;
        z-index: auto !important;
    }
    //#endif

    .app-diy-page {
        width: 100%;
        height: 100%;

        .nav-bar {
            position: fixed;
            left: 0;
            top: 0;
            z-index: 1500;
            background-color: #ffffff;
            width: 100%;
            height: #{44px};
            padding: 0 #{30rpx};
            overflow-x: auto;
            border-bottom: #{1rpx} solid #e2e2e2;

            .nav-bar-one {
                width: auto;
                margin-right: #{30rpx};
                padding: 0 #{15rpx};

                &.active {
                    border-bottom: #{4rpx} solid;
                }
            }

            &.mp_link_top {
                top: #{84px};
            }

            &.mp_link_top ~ .diy-template {
                margin-top: #{44px + 84px};
            }

            & ~ .diy-template {
                margin-top: #{44px};
            }
        }

        .mp-link-top {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1500;
            width: 100%;
        }

        &.mp_link_top {
            margin-top: #{168rpx};
        }
    }
    .goods-rank{
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20rpx 30rpx;
        margin-bottom: -20rpx;
        .item{
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: start;
            &.active{
                font-weight: 600;
                font-size: 32rpx;
            }
            text{
                font-size: 28rpx;
                margin-right: 10rpx;
            }
            image{
                width: 20rpx;
                height: 30rpx;
            }
        }
    }
</style>