母婴健康老人护理医护上门陪诊产后恢复预约上门小程序源码

news2024/11/16 6:01:24

母婴健康老人护理医护上门陪诊产后恢复预约上门小程序

在线预约

上门打针

产后恢复

会员卡

余额充值

优惠券

分销商

unipp+thinkphp

 

<template>
    <view class="container" :style="{background:pagebase.base.bc}">
        <Pengpai-FadeInOut v-if="config.is_broadcast==1" :top="118" :loop="true" :info="item"
            v-for="(item, index) in list" :key="index">
        </Pengpai-FadeInOut>
        <block v-for="(diyitem,itemindex) in modulelist" :key="itemindex">
            <!--header-->
            <block v-if="diyitem.type === 'search'">
                <view class="tui-header" :style="{opacity:opacity, background:diyitem.base.bc}">
                    <view class="tui-rolling-search">
                        <block v-if="diyitem.base.is_location=='1'">
                            <tui-icon @tap="selectCity" name="position-fill" color="#333" :size="30" unit="rpx">
                            </tui-icon>
                            <view @tap="selectCity" class="tui-city-name">{{cityName}}</view>
                            <tui-icon @tap="selectCity" name="turningdown" :size="32" unit="rpx"></tui-icon>
                            <view class="tui-city-line">|</view>
                        </block>
                        <tui-icon name="search-2" :size="32" unit="rpx"></tui-icon>
                        <swiper @tap="search" vertical autoplay circular interval="8000" class="tui-swiper">
                            <swiper-item v-for="(item, index) in diyitem.params.hotkey" :key="index"
                                class="tui-swiper-item">
                                <view class="tui-hot-item">{{ item }}</view>
                            </swiper-item>
                        </swiper>
                    </view>
                </view>
                <view class="hot-keywords" :style="{background:diyitem.base.bc}">
                    <view v-if="diyitem.base.is_hotkey=='1'" class="tui-hot-search"
                        :style="{color:diyitem.base.hotkeytxtColor}">
                        <view>热搜</view>
                        <block v-for="(item, index) in diyitem.params.hotkey" :key="index">
                            <view class="tui-hot-tag" :data-key="item" @tap="more">{{item}}</view>
                        </block>
                    </view>
                </view>
            </block>
            <!--header-->
            <!-- banner -->
            <block v-if="diyitem.type === 'banner'">
                <view :style="{paddingTop:diyitem.base.paddingTop+'px', paddingLeft:0}">
                    <view class="tui-header-banner" :style="{background:diyitem.base.bc}">
                        <view class="tui-banner-bg" :style="{height: swiperHeight + 'px'}">
                            <!--banner-->
                            <view class="tui-banner-box">
                                <swiper :style="{ height: swiperHeight + 'px' }" :indicator-dots="true" :autoplay="true"
                                    :interval="5000" :duration="150" class="tui-banner-swiper" :circular="true"
                                    indicator-color="rgba(255, 255, 255, 0.8)" indicator-active-color="#fff">
                                    <swiper-item v-for="(banner, index) in diyitem.list" :key="index">
                                        <image @tap="navigateTo" :data-url="banner.link" :src="banner.img"
                                            class="tui-slide-image" mode="widthFix" @load="setswiperHeight" />
                                    </swiper-item>
                                </swiper>
                            </view>
                        </view>
                        <view class="tui-header-bannerbottom"></view>
                    </view>
                </view>

            </block>
            <!-- 导航组 -->
            <block v-if="diyitem.type === 'navBar'">
                <view class="diy-navBar" :style="{background:diyitem.base.bc}">
                    <view :class="['data-list', 'avg-sm-'+diyitem.base.column]">
                        <view class="item-nav" v-for="(dataItem,index) in diyitem.list" :key="index">
                            <view class="nav-to" @tap="navigateTo" :data-url="dataItem.link">
                                <view class="item-image">
                                    <image mode="widthFix" :src="dataItem.icon.custompic"></image>
                                </view>
                                <view class="item-text f-24 onelist-hidden" :style="{color: dataItem.text.color}">
                                    {{ dataItem.text.txt }}
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </block>

            <!-- 单图组 -->
            <block v-if="diyitem.type === 'imageSingle'">
                <view class="diy-imageSingle" :style="diyitem.base.bgstyle">
                    <view
                        :style="{'paddingBottom':diyitem.base.paddingTop+'px' ,'paddingRight':diyitem.base.paddingLeft+'px'}">
                        <view class="item-image"
                            :style="{'paddingTop':diyitem.base.paddingTop+'px' ,'paddingLeft':diyitem.base.paddingLeft+'px'}">
                            <view class="nav-to" @tap="navigateTo" :data-url="diyitem.link">
                                <image :src="diyitem.img" mode="widthFix"></image>
                            </view>
                        </view>
                    </view>
                </view>
            </block>
            <!-- 多图组 -->
            <block v-if="diyitem.type === 'duo'">
                <view v-if="diyitem.list.length>0" class="tui-product-list">
                    <view class="diy-duo">
                        <view :class="'duo-list display__' + diyitem.base.display + ' column__' + diyitem.base.column">
                            <scroll-view :scroll-x="diyitem.base.display === 'slide' ? true : false">
                                <block v-for="(dataItem, index) in diyitem.list" :key="index">
                                    <view class="duo-item" @tap="navigateTo" :data-url="dataItem.link">
                                        <view class="duo-image">
                                            <image mode="widthFix"
                                                :style="'border-radius:'+diyitem.base.borderradius+'%'"
                                                :src="dataItem.img">
                                            </image>
                                        </view>
                                        <view class="duo-name twolist-hidden f-28"
                                            :style="{color: dataItem.text.color}">
                                            {{ dataItem.text.txt }}
                                        </view>
                                    </view>
                                </block>

                            </scroll-view>
                        </view>
                    </view>
                </view>
            </block>
            <!-- 图片橱窗 -->
            <block v-if="diyitem.type === 'window'">
                <view class="diy-window"
                    :style="{'background':diyitem.base.bc, 'paddingTop':diyitem.base.paddingTop+'px' ,'paddingLeft':diyitem.base.paddingLeft+'px'}">
                    <!-- display -->
                    <view class="display">
                        <!-- 1 -->
                        <view class="display-left"
                            :style="{'paddingTop ':diyitem.base.paddingTop+'px','paddingLeft':diyitem.base.paddingLeft+'px'}">
                            <image @tap="navigateTo" :data-url="diyitem.list[0].link" :src="diyitem.list[0].img">
                            </image>
                        </view>
                        <!-- 2 -->
                        <view v-if="diyitem.list.length === 2" class="display-right"
                            :style="{padding:diyitem.base.paddingTop+'px',paddingLeft:diyitem.base.paddingLeft+'px'}">
                            <image @tap="navigateTo" :data-url="diyitem.list[1].link" :src="diyitem.list[1].img">
                            </image>
                        </view>
                        <!-- 3 -->
                        <view v-if="diyitem.list.length === 3" class="display-right">
                            <view class="display-right1"
                                :style="{padding:diyitem.base.paddingTop+'px',paddingLeft:diyitem.base.paddingLeft+'px'}">
                                <image @tap="navigateTo" :data-url="diyitem.list[1].link" :src="diyitem.list[1].img">
                                </image>
                            </view>
                            <view class="display-right2"
                                :style="{padding:diyitem.base.paddingTop+'px',paddingLeft:diyitem.base.paddingLeft+'px'}">
                                <image @tap="navigateTo" :data-url="diyitem.list[2].link" :src="diyitem.list[2].img">
                                </image>
                            </view>
                        </view>
                        <!-- 4 -->
                        <view v-if="diyitem.list.length === 4" class="display-right">
                            <view class="display-right1"
                                :style="{padding:diyitem.base.paddingTop+'px',paddingLeft:diyitem.base.paddingLeft+'px'}">
                                <image @tap="navigateTo" :data-url="diyitem.list[1].link" :src="diyitem.list[1].img">
                                </image>
                            </view>
                            <view class="display-right2">
                                <view class="left"
                                    :style="{padding:diyitem.base.paddingTop+'px',paddingLeft:diyitem.base.paddingLeft+'px'}">
                                    <image @tap="navigateTo" :data-url="diyitem.list[2].link"
                                        :src="diyitem.list[2].img"></image>
                                </view>
                                <view class="right"
                                    :style="{padding:diyitem.base.paddingTop+'px',paddingLeft:diyitem.base.paddingLeft+'px'}">
                                    <image @tap="navigateTo" :data-url="diyitem.list[3].link"
                                        :src="diyitem.list[3].img"></image>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </block>

            <!-- 视频组 -->
            <block v-if="diyitem.type === 'video'">
                <view class="diy-video" :style="{paddingTop:diyitem.base.paddingTop+'px', paddingLeft:0}">
                    <video :style="{height: diyitem.base.height +'px'}" :src="diyitem.videoUrl" :poster="diyitem.img"
                        controls></video>
                </view>
            </block>

            <!-- 公告组 -->
            <block v-if="diyitem.type === 'notice'">
                <view class="diy-notice">
                    <uni-notice-bar :showIcon="true" :scrollable="true" :single="true"
                        :background-color="diyitem.base.bc" :paddingTop="diyitem.base.paddingTop"
                        :text="diyitem.text.txt">
                    </uni-notice-bar>
                </view>
            </block>
            <!-- 空白组 -->
            <block v-if="diyitem.type === 'blank'">
                <view class="diy-blank" :style="{height:diyitem.base.height+'px', background:diyitem.base.bc}">
                </view>
            </block>
            <!-- 辅助线 -->
            <block v-if="diyitem.type === 'guide'">
                <view class="diy-guide"
                    :style="{paddingTop:diyitem.base.paddingTop+'px', paddingLeft:0, background: diyitem.base.bc}">
                    <view class="line"
                        :style="['border-top:'+diyitem.base.lineHeight+'px', diyitem.base.lineStyle,diyitem.base.lineColor]">
                    </view>
                </view>
            </block>
            <!-- 富文本 -->
            <block v-if="diyitem.type === 'richText'">
                <view class="diy-richText"
                    :style="{paddingTop:diyitem.base.paddingTop+'px', paddingLeft:diyitem.base.paddingLeft+'px', background:diyitem.base.bc}">
                    <view class="">
                        <rich-text :nodes="diyitem.params.content"></rich-text>
                    </view>
                </view>
            </block>
            <!--秒杀-->
            <block v-if="diyitem.type === 'miaosha'">
                <view class="tui-product-box" :style="{background:diyitem.base.bc}">
                    <view class="tui-block__box ">
                        <view v-if="diyitem.title.title.show" class="group-name-box">
                            <view class="tui-group-name">
                                <view class="tui-seckill__box">
                                    <image src="/static/images/mall/img_home_seckill_3x.png" class="tui-seckill__img"
                                        mode="widthFix"></image><text>{{diyitem.title.title.txt}}</text>
                                    <view class="tui-countdown__box">
                                        <view class="tui-countdown__title">距结束</view>
                                        <view class="tui-flex__center">
                                            <tui-countdown :time="3800" backgroundColor="transparent"
                                                borderColor="transparent" color="#EB0909" colonColor="#EB0909">
                                            </tui-countdown>
                                        </view>
                                    </view>
                                </view>
                                <view v-if="diyitem.title.more.show" class="tui-more__box" @tap="seckill">
                                    <text>{{diyitem.title.more.txt}}</text>
                                    <tui-icon name="arrowright" :size="36" unit="rpx" color="#999"></tui-icon>
                                </view>
                            </view>
                        </view>
                        <view v-if="diyitem.list.length>0" class="tui-group-list">
                            <view class="diy-goods" >
                                <view
                                    :class="'goods-list display__' + diyitem.base.display + ' column__' + diyitem.base.column">
                                    <scroll-view :scroll-x="diyitem.base.display === 'slide' ? true : false">
                                        <block v-for="(dataItem, index) in diyitem.list" :key="index">
                                            <view v-if="dataItem.goods_id" class="goods-item">
                                                <navigator hover-class="none"
                                                    :url="dataItem.goods_id > 0 ? '/pages/goodsDetail/goodsDetail?msid='+dataItem.id+'&id=' + dataItem.goods_id : ''">
                                                    <view class="goods-image">
                                                        <image
                                                            :style="diyitem.base.widthheight?diyitem.base.widthheight:''"
                                                            :src="dataItem.image"></image>
                                                    </view>
                                                    <view class="detail">
                                                        <view v-if="diyitem.base.text.show > 0"
                                                            class="goods-name twolist-hidden f-28">
                                                            {{ dataItem.title }}
                                                        </view>
                                                        <view v-if="diyitem.base.sjg" class="goods-price f-30 col-m">
                                                            <text
                                                                v-if="dataItem.is_points_goods==1">积分:{{ dataItem.pay_points }}</text>
                                                            <text
                                                                v-if="dataItem.is_points_goods!=1">¥{{ dataItem.price }}</text>
                                                            <text v-if="dataItem.minimum > 1"
                                                                style="color:#999;font-size:24rpx;">起售量
                                                                {{dataItem.minimum}}</text>
                                                        </view>
                                                    </view>
                                                </navigator>
                                            </view>
                                        </block>

                                    </scroll-view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </block>
            <!--超值拼团-->
            <block v-if="diyitem.type === 'tuan'">
                <view class="tui-product-box" :style="{background:diyitem.base.bc}">
                    <view class="tui-block__box">
                        <view v-if="diyitem.title.title.show" class="group-name-box">
                            <view class="tui-group-name">
                                <view>
                                    <text>{{diyitem.title.title.txt}}</text>
                                    <text class="tui-sub__desc tui-color__red">拼着买更便宜</text>
                                </view>
                                <view v-if="diyitem.title.more.show" class="tui-more__box" @tap="group">
                                    <text>{{diyitem.title.more.txt}}</text>
                                    <tui-icon name="arrowright" :size="36" unit="rpx" color="#999"></tui-icon>
                                </view>
                            </view>
                        </view>
                        <view v-if="diyitem.list.length>0" class="tui-group-list">
                            <view class="diy-goods">
                                <view
                                    :class="'goods-list display__' + diyitem.base.display + ' column__' + diyitem.base.column">
                                    <scroll-view :scroll-x="diyitem.base.display === 'slide' ? true : false">
                                        <block v-for="(dataItem, index) in diyitem.list" :key="index">
                                            <view v-if="dataItem.goods_id" class="goods-item">
                                                <navigator hover-class="none"
                                                    :url="dataItem.id > 0 ? '/pages/goodsDetail/goodsDetail?tuanid='+dataItem.id+'&id=' + dataItem.goods_id  : ''">
                                                    <view class="goods-image">
                                                        <image
                                                            :style="diyitem.base.widthheight?diyitem.base.widthheight:''"
                                                            :src="dataItem.image"></image>
                                                    </view>
                                                    <view class="groupdetail">
                                                        <view v-if="diyitem.base.text.show > 0"
                                                            class="goods-name twolist-hidden f-28">
                                                            {{ dataItem.title }}
                                                        </view>
                                                        <view v-if="diyitem.base.sjg" class="goods-price f-30 col-m">
                                                            <text
                                                                v-if="dataItem.is_points_goods!=1">¥{{ dataItem.price }}</text>
                                                        </view>
                                                        <view class="tui-group-btn">
                                                            <view class="tui-flex-btn tui-color-red">
                                                                {{ dataItem.people_num }}人团
                                                            </view>
                                                            <view class="tui-flex-btn">去拼团</view>
                                                        </view>
                                                    </view>
                                                </navigator>
                                            </view>
                                        </block>

                                    </scroll-view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>

            </block>
            <!--排行榜-->
            <block v-if="diyitem.type === 'ranking'">
                <view class="tui-product-box" :style="{background:diyitem.base.bc}">
                    <view class="tui-block__box">
                        <view class="tui-group-name" @tap="more">
                            <view>
                                <text>排行榜</text>
                                <text class="tui-sub__desc">大家都在买</text>
                            </view>
                            <view class="tui-more__box">
                                <text>更多</text>
                                <tui-icon name="arrowright" :size="36" unit="rpx" color="#999"></tui-icon>
                            </view>
                        </view>
                        <view class="tui-new-box">
                            <view class="tui-new-item" :class="[index != 0 && index != 1 ? 'tui-new-mtop' : '']"
                                v-for="(item, index) in newProduct" :key="index" @tap="detail">
                                <image
                                    :src="'/static/images/mall/new/' + (item.type == 1 ? 'new' : 'discount') + '.png'"
                                    class="tui-new-label" v-if="item.isLabel"></image>
                                <view class="tui-title-box">
                                    <view class="tui-new-title">{{ item.name }}</view>
                                    <view class="tui-new-price">
                                        <text class="tui-new-present">¥{{ item.present }}</text>
                                        <text class="tui-new-original">¥{{ item.original }}</text>
                                    </view>
                                </view>
                                <image :src="'/static/images/mall/new/' + item.pic" class="tui-new-img"></image>
                            </view>
                        </view>
                    </view>
                </view>
            </block>
            <!-- 商品组 -->
            <block v-if="diyitem.type === 'goods'">
                <view class="tui-product-box" :style="{background:diyitem.base.bc}">
                    <view class="tui-block__box">
                        <view v-if="diyitem.title.title.show" class="group-name-box">
                            <view class="tui-group-name">
                                <view>
                                    <text>{{diyitem.title.title.txt}}</text>
                                </view>
                                <view v-if="diyitem.title.more.show" class="tui-more__box" @tap="navigateTo"
                                    :data-url="diyitem.title.link">
                                    <text>{{diyitem.title.more.txt}}</text>
                                    <tui-icon name="arrowright" :size="36" unit="rpx" color="#999"></tui-icon>
                                </view>
                            </view>
                        </view>

                        <view v-if="diyitem.list.length>0" class="tui-product-list">
                            <view class="diy-goods">
                                
                                <view
                                    :class="'goods-list display__' + diyitem.base.display + ' column__' + diyitem.base.column">
                                    <scroll-view :scroll-x="diyitem.base.display === 'slide' ? true : false">
                                        <block v-for="(dataItem, index) in diyitem.list" :key="index">
                                            <view v-if="dataItem.goods_id" class="goods-item">
                                                <navigator 
                                                hover-class="none"
                                                    :url="dataItem.goods_id > 0 ? '/pages/goodsDetail/goodsDetail?id=' + dataItem.goods_id : ''"
                                                    >
                                                    <view class="goods-item-content">                                                        
                                                        <view class="goods-image">
                                                            <image
                                                                :style="diyitem.base.widthheight?diyitem.base.widthheight:''"
                                                                :src="dataItem.image"></image>
                                                        </view>
                                                        <view class="detail">
                                                            <view v-if="diyitem.base.text.show > 0" class="goods-name twolist-hidden f-28">
                                                                {{ dataItem.goods_name }}
                                                            </view>
                                                            
                                                            <view v-if="diyitem.base.sjg" class="goods-price f-30 col-m">
                                                                <text v-if="dataItem.is_points_goods==1">积分:{{ dataItem.pay_points }}</text>
                                                                <view v-if="dataItem.is_points_goods!=1" class="goods-price-content">
                                                                    <text class="price">¥{{ dataItem.price }}</text>
                                                                    <text v-if="diyitem.base.column == 1" class="oldprice">¥{{ dataItem.original_price }}</text>
                                                                    <view class="btn" :style="{background:pagebase.base.titleBackgroundColor}">{{dataItem.ptype == 2 ? '立即预约' : '立即下单'}}</view>
                                                                </view>
                                                                <text v-if="dataItem.minimum > 1"    style="color:#999;font-size:24rpx;">起售量    {{dataItem.minimum}}</text>
                                                            </view>                                                            
                                                        </view>        
                                                                                                    
                                                    </view>
                                                </navigator>
                                            </view>
                                        </block>
                                    </scroll-view>
                                </view>
                                
                            </view>
                        </view>


                    </view>
                </view>
            </block>
            <!-- 师傅组 -->
            <block v-if="diyitem.type === 'technical'">
                <view v-if="diyitem.list.length>0" class="tui-product-list" :style="{background:diyitem.base.bc}">
                    <view class="diy-goods">
                        <view
                            :class="'goods-list display__' + diyitem.base.display + ' column__' + diyitem.base.column">
                            <scroll-view :scroll-x="diyitem.base.display === 'slide' ? true : false">
                                <block v-for="(dataItem, index) in diyitem.list" :key="index">
                                    <view v-if="dataItem.id" class="goods-item">
                                        <navigator hover-class="none"
                                            :url="dataItem.id > 0 ? '/pages/technical/details?id=' + dataItem.id : ''">
                                            <view class="goods-image">
                                                <image :style="diyitem.base.widthheight?diyitem.base.widthheight:''"
                                                    :src="dataItem.touxiang  || '/static/images/my/mine_def_touxiang_3x.png'">
                                                </image>
                                            </view>
                                            <view class="technicaldetail">
                                                <view class="goods-name twolist-hidden f-28">
                                                    {{ dataItem.title }}
                                                </view>
                                            </view>
                                        </navigator>
                                    </view>
                                </block>
                            </scroll-view>
                        </view>
                    </view>
                </view>
            </block>
            <!-- 优惠券组 -->
            <block v-if="diyitem.type === 'coupon'">
                <view class="diy-coupon"
                    :style="{'background':diyitem.base.bc, 'paddingTop':diyitem.base.paddingTop+'px'}">
                    <scroll-view scroll-x>
                        <view class="coupon-wrapper" v-for="(dataItem,index) in diyitem.list" :key="index">
                            <view :class="['coupon-item', 'color__'+ dataItem.color]">
                                <i class="before" :style="{'background':diyitem.base.bc}"></i>
                                <view class="left-content dis-flex flex-dir-column flex-x-center flex-y-center">
                                    <view class="content-top">
                                        <block v-if="dataItem.coupon_type == 10">
                                            <text class="f-30">¥</text>
                                            <text class="price">{{ dataItem.reduce_price }}</text>
                                        </block>
                                        <text class="price"
                                            v-if="dataItem.coupon_type == 20">{{ dataItem.discount }}折</text>
                                    </view>
                                    <view class="content-bottom">
                                        <text class="f-22">满{{ dataItem.min_price }}元可用</text>
                                    </view>
                                </view>
                                <view class="right-receive dis-flex flex-x-center flex-y-center">
                                    <view v-if="dataItem.state.value" :data-itemindex="itemindex"
                                        :data-index="dataItem.coupon_id" :data-state="dataItem.state.value"
                                        :data-coupon-id="dataItem.coupon_id" @tap="receiveTap"
                                        class="dis-flex flex-dir-column">
                                        <text>立即</text>
                                        <text>领取</text>
                                    </view>
                                    <view v-else class="state">
                                        <text>{{ dataItem.state.text }}</text>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </scroll-view>
                </view>
            </block>
        </block>
        <!--加载loadding-->
        <tui-loadmore v-if="loadding" :index="3" type="red"></tui-loadmore>
        <!-- <tui-nomore v-if="!pullUpOn"></tui-nomore> -->
        <!--加载loadding-->
        <view @tap="tokefuTel">
            <view class="img-tel-style zindex100 yc"></view>
            <image class="img-tel-style" src="/static/images/kefutel.png"></image>
        </view>
        <view>
            <button open-type="contact" class="img-plus-style zindex100 yc"></button>
            <image src="/static/images/kefulink.png" class="img-plus-style"></image>
        </view>
        <tui-modal custom :show="modalShow" backgroundColor="transparent" padding="0" @cancel="hideModal">
            <view class="tui-poster__box" :style="{marginTop:height+'px'}">
                <image src="/static/images/mall/icon_popup_closed.png" class="tui-close__img" @tap.stop="hideModal">
                </image>
                <image :show-menu-by-longpress="true" :src="config.kefuqrcode" class="tui-poster__img"></image>
            </view>
        </tui-modal>
        <view class="tui-safearea-bottom"></view>
        <tui-tabbar :current="current">
        </tui-tabbar>
    </view>
</template>
<script>
    import uniNoticeBar from "@/components/uni-notice-bar/uni-notice-bar.vue"
    import PengpaiFadeInOut from "@/components/Pengpai-FadeInOut/Pengpai-FadeInOut.vue"
    export default {
        components: {
            uniNoticeBar,
            PengpaiFadeInOut
        },
        data() {
            return {
                list: [],
                uid: '',
                config: {},
                is_submitaudit: 1,
                modalShow: false,
                windowWidth: 0,
                swiperHeight: 150,
                current: '',
                cityName: '',
                latitude: "",
                longitude: "",
                id: '',
                //diy数据
                modulelist: [],
                pagebase: [],
                newProduct: [{
                        name: '时尚舒适公主裙高街修身长裙',
                        present: 198,
                        original: 298,
                        pic: '1.jpg',
                        type: 1,
                        isLabel: true
                    },
                    {
                        name: '高街修身雪纺衫',
                        present: 398,
                        original: 598,
                        pic: '2.jpg',
                        type: 2,
                        isLabel: true
                    },
                    {
                        name: '轻奢商务上衣',
                        present: 99,
                        original: 199,
                        pic: '3.jpg',
                        type: 1,
                        isLabel: true
                    },
                    {
                        name: '品质牛皮婚鞋牛皮婚鞋品质就是好',
                        present: 99,
                        original: 199,
                        pic: '5.jpg',
                        type: 1,
                        isLabel: true
                    },
                    {
                        name: '轻奢时尚大包限时新品推荐',
                        present: 99,
                        original: 199,
                        pic: '6.jpg',
                        type: 1,
                        isLabel: false
                    },
                    {
                        name: '高街修身长裙',
                        present: 999,
                        original: 1299,
                        pic: '4.jpg',
                        type: 2,
                        isLabel: true
                    }
                ],
                pageIndex: 1,
                loadding: false,
                pullUpOn: true,
                opacity: 1,
                timer: null,
                num: 0,
                currentid: 0,
                cumulative: 0
            };
        },
        onLoad: function(e) {
            let _this = this
            this.current = "/" + this.__route__;
            uni.showLoading({
                title: '数据加载中'
            });

            if (e.jump) {
                uni.reLaunch({
                    url: e.jump
                });
            }

            //console.log(e);
            setTimeout(function() {
                uni.hideLoading();
            }, 2000);

            if (e.id) {
                _this.id = e.id;
            }
            if (!e.reid) {
                if (e && e.scene) {
                    e.reid = e.scene;
                }
            }

            if (e.reid) {
                uni.setStorageSync('reid', e.reid)
            }

            _this.sam.login().then(res => {
                //console.log(res.uid);
                //console.log(e);
                if (res.uid > 0) {
                    _this.uid = res.uid;
                    if (uni.getStorageSync('reid')) {
                        _this.$request.get('member.bindpid', {
                            samkey: (new Date()).valueOf(),
                            pid: uni.getStorageSync('reid')
                        }).then(res => {
                            if (res.errno == 0) {
                                console.log('pid绑定成功');
                            }
                        })
                    }
                }
                _this.getdiypage();
            });

            setTimeout(() => {
                uni.getSystemInfo({
                    success: res => {
                        //console.log(res);
                        this.hieghtS = res.windowHeight;
                        this.windowWidth = res.windowWidth;
                    }
                });
            }, 0);

            _this.getNewMessage();
            _this.timer = setInterval(() => {
                setTimeout(() => {
                    _this.getNewMessage()
                }, 0)
            }, 5000)
        },
        onShow() {
            let _this = this;
            _this.$request.post('Config.audit', {
                samkey: (new Date()).valueOf()
            }).then(res => {
                if (res.data.is_submitaudit != 1) {
                    if (_this.$siteInfo.multiid == 1) {
                        uni.reLaunch({
                            url: '/pagesA/my/admintechnical/index'
                        });
                    }
                }
            });

            _this.$request.post('Bottommenu.getindex', {
                samkey: (new Date()).valueOf()
            }).then(res => {
                if (res.data.url && res.data.url != '/pages/index/index') {
                    uni.reLaunch({
                        url: '/pages/index/index?jump=' + res.data.url
                    });
                } else {
                    _this.getdiypage();
                }
            });

            uni.setStorageSync('NewMessage', '1')

            //获取地置位置开始
console.log("=====",uni.getStorageSync('cityName'));        
            if (uni.getStorageSync('cityName')) {
                this.cityName = uni.getStorageSync('cityName');
            } else {
                wx.authorize({
                    scope: 'scope.userFuzzyLocation',
                    success: res => {
                        console.log(res)
                        wx.getFuzzyLocation({
                            type: 'wgs84',
                            success(res) {
                                console.log('weizhixn',  res)
                                uni.setStorageSync('latitude', res.latitude);
                                uni.setStorageSync('longitude', res.longitude);
                                //console.log(res);                                            
                                _this.$request.post('geocoder.reversegeocoding', {
                                    latitude: res.latitude,
                                    longitude: res.longitude
                                }).then(res => {
                                    _this.cityName = res.data.addressComponent.city;
                                    uni.setStorageSync('cityName', _this.cityName);
                                });
                            },
                            fail:err=>{
                                console.error('fail', err)
                            }
                        });
                    },
                    fail: res => {
                        //console.log('失败:', res);
                    }
                });
            };

            //获取地理位置结速

            this.sam.onShowlogin();
        },
        destroyed() {
            clearInterval(this.timer)
        },
        methods: {
            getNewMessage: function() {
                let _this = this;
                if (uni.getStorageSync('NewMessage') == '1') {
                    _this.$request.postnoLoading('broadcast.index', {
                        cumulative: _this.cumulative,
                        currentid: _this.currentid,
                    }).then(res => {
                        if (res.errno == 0) {
                            if (res.data) {
                                if (_this.num > 3) {
                                    _this.list = [];
                                    _this.num = 0;
                                }
                                _this.currentid = res.data.id;
                                //追加一条数据
                                _this.list = _this.list.concat(res.data);
                                _this.num++;
                                _this.cumulative++;
                            } else {
                                _this.currentid = 0;
                            }
                        }
                    })
                }

            },
            setswiperHeight(e) {
                //console.log(e);
                this.swiperHeight = e.detail.height * ((this.windowWidth - 20) / e.detail.width);
            },
            //获取后台数据
            getdiypage: function() {
                let _this = this;
                _this.$request.get('diypage.indexv2', {
                    id: _this.id 
                }).then(res => {
                    console.log("请求结果pagebase", res.data.pagebase.base)
                    if (res.errno == 0) {
                        _this.config = res.data.config;

                        if (_this.config.kefuqrcode && _this.is_submitaudit != 1) {
                            _this.modalShow = true;
                        }
                        if (res.data.modulelist) {
                            _this.modulelist = res.data.modulelist;
                            _this.pagebase = res.data.pagebase;
                    console.log("请求结果", res.data.modulelist)
                            uni.setNavigationBarTitle({
                                title: res.data.config.sys_title
                            });
                            uni.setNavigationBarColor({
                                frontColor: res.data.pagebase.base.titleTextColor,
                                backgroundColor: res.data.pagebase.base.titleBackgroundColor,
                                animation: { //动画效果
                                    duration: 400,
                                    timingFunc: 'easeIn'
                                }
                            });
                        }
                    }
                })
            },
            /**
             * 领取优惠券
             */
            receiveTap: function(e) {
                let _this = this,
                    dataset = e.currentTarget.dataset;
                if (!dataset.state) {
                    return false;
                }
                _this.$request.post('Couponreceive.fetch', {
                    id: dataset.couponId
                }).then(res => {
                    wx.showToast({
                        title: res.message,
                        icon: 'none'
                    })
                    _this.modulelist[dataset.itemindex].data[dataset.index].state = {
                        value: 0,
                        text: '已领取'
                    };
                })
            },
            navigateTo: function(e) {
                var link = e.currentTarget.dataset.url;
                if (link.ptype == 'custom' && link.zdyLinktype == 'wxapp') {
                    uni.navigateToMiniProgram({
                        appId: link.zdyappid,
                        path: link.path
                    })
                } else {
                    this.sam.navigateTo(link.path)
                }

            },
            detail: function() {
                uni.navigateTo({
                    url: '/pages/goodsDetail/goodsDetail'
                });
            },
            coupon() {
                uni.navigateTo({
                    url: '/pages/coupon/coupon'
                });
            },
            category: function() {
                uni.navigateTo({
                    url: '../category/category'
                });
            },
            more: function(e) {
                let key = e.currentTarget.dataset.key || '';
                uni.navigateTo({
                    url: '/pages/goodsList/goodsList?keyword=' + key
                });
            },
            selectCity: function() {
                uni.navigateTo({
                    url: '/pages/selectCity/selectCity'
                });
            },
            search: function() {
                uni.navigateTo({
                    url: '/pages/common/search/search'
                });
            },
            seckill() {
                let url = '/pages/seckillList/seckillList';
                this.tui.href(url);
            },
            group() {
                let url = '/pages/groupList/groupList';
                this.tui.href(url);
            },
            tokefuTel: function(e) {
                //客服电话
                const _this = this;

                var telstr = _this.config.TELEPHONE;
                uni.makePhoneCall({
                    phoneNumber: telstr
                });
            },
            hideModal() {
                this.modalShow = false;
            }
        },
        onPullDownRefresh: function() {
            this.getdiypage()
            uni.stopPullDownRefresh();
        },
        onReachBottom: function() {

        },
        onPageScroll(e) {
            // #ifdef APP-PLUS
            let scrollTop = e.scrollTop;
            if (scrollTop < 0) {
                if (this.opacity > 0)
                    this.opacity = 1 - Math.abs(scrollTop) / 30;
            } else {
                this.opacity = 1
            }
            // #endif
        },
        //发送给朋友
        onShareAppMessage: function() {
            let _this = this;
            //console.log(_this.uid);
            return {
                title: _this.pagebase.params.share_title || "",
                path: "/pages/index/index?reid=" + _this.uid,
            };
        },

        onShareTimeline(res) { //分享到朋友圈
            return {}
        },
    };
</script>

<style lang="scss">
    page {
        background-color: #f7f7f7;
    }

    .container {
        padding-bottom: 228rpx;
        color: #333;
    }

    .orderplay {
        width: 100%;
        height: 100rpx;
        padding: 0 20rpx;
        box-sizing: border-box;
        position: fixed;
        left: 0;
        top: 180rpx;
        z-index: 999;
        transition: opacity .4s;
    }

    .order-item {

        color: #ffffff;
        background-color: #2e2e2e;
    }

    .tui-header {
        width: 100%;
        height: 100rpx;
        padding: 0 20rpx;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 999;
        transition: opacity .4s;
    }

    .tui-rolling-search {
        width: 100%;
        height: 60rpx;
        border-radius: 35rpx;
        padding: 0 40rpx 0 30rpx;
        box-sizing: border-box;
        background-color: #fff;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        color: #999;
    }

    .tui-category {
        font-size: 24rpx;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin: 0;
        margin-right: 22rpx;
        flex-shrink: 0;
    }

    .tui-category-scale {
        transform: scale(0.7);
        line-height: 24rpx;
    }

    .tui-icon-category {
        line-height: 20px !important;
        margin-bottom: 0 !important;
    }

    .tui-swiper {
        font-size: 26rpx;
        height: 60rpx;
        flex: 1;
        padding-left: 12rpx;
    }

    .tui-swiper-item {
        display: flex;
        align-items: center;
    }

    .tui-hot-item {
        line-height: 26rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .tui-city-name {
        padding-left: 6rpx;
        padding-right: 0rpx;
        color: #333;
        font-size: 24rpx;
        line-height: 24rpx;
    }

    .tui-city-line {
        color: #d3d3d3;
        padding-left: 16rpx;
        padding-right: 20rpx;
        font-size: 24rpx;
        line-height: 24rpx;
    }

    .hot-keywords {
        padding-top: 100rpx;
        z-index: 10;
    }

    .tui-hot-search {
        color: #fff;

        font-size: 24rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-left: 20rpx;
        padding-right: 20rpx;
        padding-bottom: 10rpx;
        box-sizing: border-box;
        position: relative;
        z-index: 2;
    }

    .tui-hot-tag {
        background-color: rgba(255, 255, 255, 0.15);
        padding: 10rpx 24rpx;
        border-radius: 30rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 24rpx;
    }

    .tui-header-banner {
        box-sizing: border-box;
    }

    .tui-header-bannerbottom {
        padding-top: 20rpx;
    }

    .tui-banner-bg {
        display: flex;
        position: relative;
    }

    .tui-banner-box {
        width: 100%;
        padding: 0 20rpx;
        box-sizing: border-box;
        position: absolute;
        /* overflow: hidden; */
        z-index: 99;
        left: 0;
    }

    .tui-banner-swiper {
        width: 100%;
        border-radius: 20rpx;
        overflow: hidden;
        transform: translateY(0);
        background-color: #f8f8f8;
    }

    .tui-slide-image {
        width: 100%;
        display: block;
    }

    /* #ifdef MP-WEIXIN */
    .tui-banner-swiper .wx-swiper-dot {
        width: 8rpx;
        height: 8rpx;
        display: inline-flex;
        background: none;
        justify-content: space-between;
    }

    .tui-banner-swiper .wx-swiper-dot::before {
        content: '';
        flex-grow: 1;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 16rpx;
        overflow: hidden;
    }

    .tui-banner-swiper .wx-swiper-dot-active::before {
        background-color: #fff;
    }

    .tui-banner-swiper .wx-swiper-dot.wx-swiper-dot-active {
        width: 16rpx;
    }

    /* #endif */

    /* #ifndef MP-WEIXIN */
    >>>.tui-banner-swiper .uni-swiper-dot {
        width: 8rpx;
        height: 8rpx;
        display: inline-flex;
        background-color: none;
        justify-content: space-between;
    }

    >>>.tui-banner-swiper .uni-swiper-dot::before {
        content: '';
        flex-grow: 1;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 16rpx;
        overflow: hidden;
    }

    >>>.tui-banner-swiper .uni-swiper-dot-active::before {
        background-color: #fff;
    }

    >>>.tui-banner-swiper .uni-swiper-dot.uni-swiper-dot-active {
        width: 16rpx;
    }

    /* #endif */

    .tui-product-category {
        padding: 80rpx 20rpx 30rpx 20rpx;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        font-size: 24rpx;
        color: #555;
        /* margin-bottom: 20rpx; */
    }

    .tui-category-item {
        width: 20%;
        height: 118rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: column;
        padding-top: 30rpx;
    }

    .tui-category-img {
        height: 88rpx;
        width: 88rpx;
        display: block;
    }

    .tui-category-name {
        line-height: 24rpx;
    }

    .tui-block__box {
        width: 100%;
        box-sizing: border-box;
        background-color: #ffffff;
        border-radius: 20rpx;
        overflow: hidden;
    }

    .tui-product-box {
        // margin-top: 20rpx;
        padding: 20rpx 25rpx 0;
        box-sizing: border-box;
    }

    .tui-img__coupon {
        width: 100%;
        height: 184rpx;
        display: block;
    }

    .tui-mtop__20 {
        margin-top: 20rpx;
    }

    .tui-bg-white {
        background-color: #fff;
    }

    .group-name-box {
        padding-left: 25rpx;
        padding-right: 25rpx;
    }

    .tui-group-name {
        width: 100%;
        font-size: 34rpx;
        line-height: 34rpx;
        font-weight: bold;
        text-align: center;
        padding: 30rpx 0 20rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #333;
    }

    .tui-group-list {
        padding-left: 10rpx;
        padding-right: 10rpx;
        justify-content: space-between;
        box-sizing: border-box;
        /* padding-top: 20rpx; */
    }

    .tui-sub__desc {
        color: #34c7a9;
        font-size: 28rpx;
        font-weight: 400;
        padding-left: 25rpx;
    }

    .tui-color__red {
        color: #EB0909;
    }

    .tui-seckill__box {
        display: flex;
        align-items: center;
    }

    .tui-seckill__img {
        width: 40rpx;
    }

    .tui-countdown__box {
        width: 228rpx;
        display: flex;
        align-items: center;

        color: #fff;
        background-color: #fff;
        font-weight: 400;
        border: 1rpx solid #eb0909;
        height: 40rpx;
        border-radius: 30px;
        overflow: hidden;
        margin-left: 25rpx;
    }

    .tui-countdown__title {
        width: 100rpx;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #eb0909;
        flex-shrink: 0;
        font-size: 24rpx;
        line-height: 24rpx;
    }

    .tui-flex__center {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /*秒杀商品*/
    .tui-goods__list {
        display: flex;
        align-items: center;
    }

    .tui-goods__item {
        background-color: #fff;
        width: 150rpx;
        height: 230rpx;
        border-radius: 6rpx;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        flex-shrink: 0;
        margin-right: 18rpx;
    }

    .tui-goods__imgbox {
        width: 150rpx;
        height: 150rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }

    .tui-goods__img {
        max-width: 150rpx;
        max-height: 150rpx;
        display: block;
    }

    .tui-pri__box {
        max-width: 150rpx;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .tui-sale-pri {
        display: flex;
        align-items: flex-end;
        padding: 10rpx 0 8rpx;
        box-sizing: border-box;
        font-size: 28rpx;
        line-height: 28rpx;
        color: #eb0909;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .tui-size-sm {
        font-size: 24rpx;
        line-height: 24rpx;
        transform: scale(0.8);
        transform-origin: 0 50%;
    }

    .tui-original__pri {
        font-size: 24rpx;
        line-height: 24rpx;
        color: #999999;
        transform-origin: center 10%;
        transform: scale(0.8);
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: line-through;
    }

    /*秒杀商品*/

    .tui-more__box {
        display: flex;
        align-items: center;
        font-weight: 400;
        color: #999;
    }

    .tui-more__box text {
        font-size: 24rpx;
        line-height: 24rpx;
    }

    .tui-new-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .tui-new-item {
        width: 49%;
        height: 180rpx;
        padding: 0 20rpx;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        background: #f5f2f9;
        position: relative;
        border-radius: 12rpx;
    }

    .tui-new-mtop {
        margin-top: 2%;
    }

    .tui-title-box {
        font-size: 24rpx;
    }

    .tui-new-title {
        line-height: 32rpx;
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .tui-new-price {
        padding-top: 18rpx;
    }

    .tui-new-present {
        color: #ff201f;
        font-weight: bold;
    }

    .tui-new-original {
        display: inline-block;
        color: #a0a0a0;
        text-decoration: line-through;
        padding-left: 12rpx;
        transform: scale(0.8);
        transform-origin: center center;
    }

    .tui-new-img {
        width: 148rpx;
        height: 148rpx;
        display: block;
        flex-shrink: 0;
    }

    .tui-new-label {
        width: 56rpx;
        height: 56rpx;
        border-top-left-radius: 12rpx;
        position: absolute;
        left: 0;
        top: 0;
    }

    .tui-title__img {
        width: 100%;
        padding: 30rpx 0;
        display: flex;
        justify-content: center;
    }

    .tui-title__img image {
        width: 352rpx;
        height: 32rpx;
    }

    .tui-product-list {
        padding-left: 10rpx;
        padding-right: 10rpx;
        justify-content: space-between;
        box-sizing: border-box;
        /* padding-top: 20rpx; */
    }

    .tui-product-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .tui-pro-item:last-child {
        margin-right: 0;
    }

    .tui-pro-item {
        margin-left: 1%;
        margin-right: 1%;
        width: 48%;
        margin-bottom: 2%;
        background: #fff;
        box-sizing: border-box;
        border-radius: 12rpx;
        overflow: hidden;
    }

    .tui-pro-img {
        width: 100%;
        display: block;
    }

    .tui-pro-content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 20rpx;
    }

    .tui-pro-tit {
        color: #2e2e2e;
        font-size: 26rpx;
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .tui-pro-price {
        padding-top: 18rpx;
    }

    .tui-sale-price {
        font-size: 34rpx;
        font-weight: 500;
        color: #e41f19;
    }

    .tui-factory-price {
        font-size: 24rpx;
        color: #a0a0a0;
        text-decoration: line-through;
        padding-left: 12rpx;
    }

    .tui-pro-pay {
        padding-top: 10rpx;
        font-size: 24rpx;
        color: #656565;
    }


    /* 导航组 */

    .diy-navBar {
        padding-bottom: 20rpx;
    }

    .diy-navBar .data-list::after {
        clear: both;
        content: " ";
        display: table;
    }

    .diy-navBar .item-nav {
        float: left;
        margin: 7px 0;
        height: 62px;
        text-align: center;
    }

    .diy-navBar .item-nav .item-image {
        margin-bottom: 4px;
        font-size: 0;
    }

    .diy-navBar .item-nav image {
        width: 88rpx;
        height: 88rpx;
    }

    /* 分列布局 */

    .diy-navBar .avg-sm-3>.item-nav {
        width: 33.33333333%;
    }

    .diy-navBar .avg-sm-4>.item-nav {
        width: 25%;
    }

    .diy-navBar .avg-sm-5>.item-nav {
        width: 20%;
    }

    /* 多图组 */

    .diy-duo .duo-list {
        padding: 4rpx;
        box-sizing: border-box;
    }

    .diy-duo .duo-list .duo-item {
        box-sizing: border-box;
        padding: 8rpx;
        margin-bottom: 3rpx;
        text-align: center;
    }

    .diy-duo .duo-list.display__slide {
        white-space: nowrap;
        font-size: 0;
    }

    .diy-duo .duo-list.display__slide .duo-item {
        display: inline-block;
    }

    .diy-duo .duo-list.display__list .duo-item {
        float: left;
    }

    .diy-duo .duo-list.column__1 .duo-item {
        width: 100%;
    }

    .diy-duo .duo-list.column__2 .duo-item {
        width: 50%;
    }

    .diy-duo .duo-list.column__2 .duo-image image {
        width: 359rpx;
    }

    .diy-duo .duo-list.column__3 .duo-item {
        width: 33.33333%;
    }

    .diy-duo .duo-list.column__3 .duo-image image {
        width: 235.3rpx;
    }

    .diy-duo .duo-list.column__4 .duo-item {
        width: 25%;
    }

    .diy-duo .duo-list.column__4 .duo-image image {
        width: 179.5rpx;
    }

    .diy-duo .duo-list .duo-item .duo-image image {
        display: block;
        border-radius: 12rpx 12rpx 0rpx 0rpx;
        width: 100%;
    }

    .diy-duo .duo-list .duo-item .duo-name {
        white-space: normal;
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    /* 单图组 */

    .diy-imageSingle .item-image image {
        display: block;
        width: 100%;
    }

    /* 图片橱窗 */

    .diy-window .data-list::after {
        clear: both;
        content: " ";
        display: table;
    }

    .diy-window .data-list .data-item {
        float: left;
        box-sizing: border-box;
    }

    .diy-window .data-list image {
        display: block;
        width: 100%;
    }

    /* 分列布局 */

    .diy-window .avg-sm-2>.data-item {
        width: 50%;
    }

    .diy-window .avg-sm-3>.data-item {
        width: 33.33333333%;
    }

    .diy-window .avg-sm-4>.data-item {
        width: 25%;
    }

    .diy-window .avg-sm-5>.data-item {
        width: 20%;
    }

    /* 橱窗样式 */

    .diy-window .display {
        height: 0;
        width: 100%;
        margin: 0;
        padding-bottom: 50%;
        position: relative;
        box-sizing: border-box;
    }

    .diy-window .display view {
        box-sizing: border-box;
    }

    .diy-window .display image {
        width: 100%;
        height: 100%;
    }

    .diy-window .display .display-left {
        width: 50%;
        height: 100%;
        overflow-y: hidden;
        position: absolute;
        top: 0;
        left: 0;
    }

    .diy-window .display .display-right {
        width: 50%;
        height: 100%;
        overflow-y: hidden;
        position: absolute;
        top: 0;
        left: 50%;
    }

    .diy-window .display .display-right1 {
        width: 100%;
        height: 50%;
        overflow-y: hidden;
        position: absolute;
        top: 0;
        left: 0;
    }

    .diy-window .display .display-right2 {
        width: 100%;
        height: 50%;
        overflow-y: hidden;
        position: absolute;
        top: 50%;
        left: 0;
    }

    .diy-window .display .display-right2 .left {
        width: 50%;
        height: 100%;
        overflow-y: hidden;
        position: absolute;
        top: 0;
        left: 0;
    }

    .diy-window .display .display-right2 .right {
        width: 50%;
        height: 100%;
        overflow-y: hidden;
        position: absolute;
        top: 0;
        left: 50%;
    }

    /* 视频 */
    .diy-video video {
        width: 100%;
        display: block;
    }

    /* 公告组 */

    .notice__icon {
        font-size: 0;
    }

    .notice__icon img {
        width: 28rpx;
        height: 28rpx;
    }

    .notice__text {
        width: 298rpx;
        height: 30rpx;
        padding-left: 5rpx;
    }

    /* 辅助线 */

    .diy-guide .line {
        width: 100%;
    }

    /* 优惠券 */
    .diy-coupon {
        white-space: nowrap;
        font-size: 0;
    }

    .diy-coupon .coupon-item {
        width: 350rpx;
        height: 130rpx;
        position: relative;
        color: #fff;
        overflow: hidden;
        box-sizing: border-box;
    }

    .diy-coupon .coupon-item i.before {
        content: "";
        position: absolute;
        z-index: 1;
        width: 40rpx;
        height: 40rpx;
        top: 50%;
        left: -.8rem;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        -webkit-border-radius: 80%;
        border-radius: 80%;
        background-color: #fff;
    }

    .diy-coupon .coupon-wrapper {
        display: inline-block;
        padding: 0 12rpx;
    }

    .diy-coupon .coupon-item .left-content {
        position: relative;
        width: 70%;
        height: 100%;
        background-color: #e5004f;
        float: left;
    }

    .diy-coupon .coupon-item .left-content .content-top .price {
        font-size: 44rpx;
    }

    .diy-coupon .coupon-item.color__blue .left-content {
        background: linear-gradient(-125deg, #57bdbf, #2f9de2);
    }

    .diy-coupon .coupon-item.color__red .left-content {
        background: linear-gradient(-128deg, #ff6d6d, #ff3636);
    }

    .diy-coupon .coupon-item.color__violet .left-content {
        background: linear-gradient(-113deg, #ef86ff, #b66ff5);
    }

    .diy-coupon .coupon-item.color__yellow .left-content {
        background: linear-gradient(-141deg, #f7d059, #fdb054);
    }

    .diy-coupon .coupon-item.color__gray .left-content {
        background: linear-gradient(-113deg, #bdbdbd, #a2a1a2);
    }

    .diy-coupon .coupon-item.color__gray .right-receive {
        background-color: #949494;
    }

    .diy-coupon .coupon-item .right-receive {
        width: 30%;
        height: 100%;
        background-color: #4e4e4e;
        text-align: center;
        float: right;
    }

    .diy-coupon .coupon-item .right-receive text {
        font-size: 26rpx;
    }

    /* 商品组 */

    .diy-goods .goods-list {
        padding: 4rpx;
        box-sizing: border-box;
    }

    .diy-goods .goods-list .goods-item {
        box-sizing: border-box;
        padding: 8rpx;
        margin-bottom: 3rpx;
    }

    .diy-goods .goods-list.display__slide {
        white-space: nowrap;
        font-size: 0;
    }

    .diy-goods .goods-list.display__slide .goods-item {
        display: inline-block;
    }

    .diy-goods .goods-list.display__list .goods-item {
        float: left;
    }

    .diy-goods .goods-list.column__1 .goods-item {
        width: 100%;
        /* 2023/05/25 */
        .goods-item-content {
            display: flex;
            .goods-image {
                width: 200rpx;
                height: 140rpx;
                image {
                    width: 100%;
                    height: 100%;
                    border-radius: 0;
                }
            }
            .detail {
                flex:1;
                border-radius:0;
                height: 140rpx;
                box-sizing: border-box;
                margin-left: 20rpx;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .goods-name {
                    font-size: 28rpx;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    word-break: break-all;
                }
                .goods-price {
                    width: 100%;                    
                    .goods-price-content {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                    }
                    .price {
                        font-size:28rpx;
                        color:#f00;
                    }
                    .oldprice {
                        flex:1;
                        color: #999;
                        font-size: 24rpx;
                        margin: 0 6rpx;
                        text-decoration: line-through;
                    }
                    .btn {
                        line-height: 50rpx;
                        padding: 0 10rpx;
                        flex-shrink: 0;
                        color: #fff;
                        font-size: 24rpx;
                        background-color: rgb(71,172,197);
                    }
                }
            }
        }
    }

    .diy-goods .goods-list.column__2 .goods-item {
        width: 50%;
    }

    .diy-goods .goods-list.column__2 .goods-image image {
        width: 359rpx;
        height: 359rpx;
    }

    .diy-goods .goods-list.column__3 .goods-item {
        width: 33.33333%;
    }

    .diy-goods .goods-list.column__3 .goods-image image {
        width: 235.3rpx;
        height: 235.3rpx;
    }

    .diy-goods .goods-list .goods-item .goods-image image {
        display: block;
        border-radius: 12rpx 12rpx 0rpx 0rpx;
        width: 100%;
    }

    .diy-goods .goods-list .goods-item .detail {
        padding: 8rpx;
        height: 128rpx;
        background: #fff;
        border-radius: 0rpx 0rpx 12rpx 12rpx;
        overflow: hidden;
    }

    .diy-goods .goods-list .goods-item .goods-price {
        color: #e41f19;
        font-size: 34rpx;
        .btn {
            text-align: center;
            line-height: 50rpx;
            padding: 0 10rpx;
            flex-shrink: 0;
            color: #fff;
            font-size: 24rpx;            
            border-radius: 10rpx;            
            background-color: rgb(71,172,197);
        }
    }

    .diy-goods .goods-list .goods-item .detail .goods-name {
        white-space: normal;
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .diy-goods .goods-list .goods-item .technicaldetail {
        padding: 8rpx;
        height: 68rpx;
        background: #fff;
        border-radius: 0rpx 0rpx 12rpx 12rpx;
        overflow: hidden;
    }

    .diy-goods .goods-list .goods-item .technicaldetail .goods-name {
        white-space: normal;
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .diy-goods .goods-list .goods-item .groupdetail {
        padding: 8rpx;
        height: 196rpx;
        background: #fff;
        border-radius: 0rpx 0rpx 12rpx 12rpx;
        overflow: hidden;
    }

    .diy-goods .goods-list .goods-item .groupdetail .goods-name {
        white-space: normal;
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .tui-group-btn {
        max-width: 312rpx;
        height: 48rpx;
        border-radius: 6rpx;
        background: #EB0909;
        display: flex;
        align-items: center;
        padding: 4rpx;
        margin-top: 10rpx;
        box-sizing: border-box;
    }

    .tui-flex-btn {
        height: 100%;
        flex: 1;
        text-align: center;
        font-size: 26rpx;
        line-height: 26rpx;
        font-weight: 400;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .tui-flex-btn:first-child {
        background: #fff;
    }

    .tui-color-red {
        color: #EB0909;
    }

    /**客服**/
    .img-tel-style {
        height: 80rpx;
        width: 80rpx;
        position: fixed;
        bottom: 330rpx;
        right: 16rpx;
        text-align: center;
        border-radius: 50%;
        background-color: #fff;
        border: 1rpx solid #ddd;
        opacity: 0.9
    }

    .img-plus-style {
        height: 80rpx;
        width: 80rpx;
        position: fixed;
        bottom: 230rpx;
        right: 16rpx;
        text-align: center;
        border-radius: 50%;
        background-color: #fff;
        border: 1rpx solid #ddd;
        opacity: 0.9
    }

    .zindex100 {
        z-index: 100
    }

    .yc {
        opacity: 0
    }

    /**客服end**/
    /*客服二维modal弹层*/
    .tui-poster__canvas {
        background-color: #fff;
        position: absolute;
        left: -9999px;
    }

    .tui-poster__box {
        width: 100%;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .tui-close__img {
        width: 48rpx;
        height: 48rpx;
        position: absolute;
        right: 0;
        top: -60rpx;
    }

    .tui-poster__img {
        width: 560rpx;
        height: 890rpx;
        border-radius: 20rpx;
        margin-bottom: 40rpx;
    }

    /*客服二维modal弹层end*/
</style>
 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/594023.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Django+Vue实现文件上传下载功能

目录 前言 上传功能 后端代码 前端代码 下载功能 后端代码 前端代码 前言 首先我要实现的页面效果是这样的 当点击上传文件按钮&#xff0c;弹出上传文件的弹出框&#xff0c;可以上传多个文件&#xff0c;点击确定后才正式开始上传 点击右侧下载按钮&#xff0c;可以直…

springboot中将logback切换为log4j2

前言 springboot默认使用logback作为日志记录框架&#xff0c;常见的日志记录框架有log4j、logback、log4j2。这篇文章我们来学习怎样将logbak替换为log4j2。 一、为什么使用log4j2&#xff1f; 我们在项目中经常使用一个叫SLF4J的依赖&#xff0c;它是做什么的呢&#xff1f; …

Java 实现在顺序表末尾插入一个元素

一、思路 1.因为我们是用数组实现的顺序表&#xff0c;因此首先要保证数组有足够的空间来进行插入元素. 2.如果数组满了就需要将数组扩容&#xff0c;没满就开始插入. 3.当前数组中的元素个数就是每一次要插入的末尾位置的下标. 4.定义一个 usedSize 来表示当前的元素个数. 5.插…

Pandas+ChatGPT强强结合诞生PandasAI,数据分析师行业要变天了?

大家好&#xff0c;我是千与千寻&#xff0c;可以叫我千寻&#xff0c;我自己主要的编程语言是Python和Java。 说到Python编程语言&#xff0c;使用Python语言主要使用的是数据科学领域的从业者。 Python编程语言之所以在数据科学领域十分火热&#xff0c;源于Python语言的三…

9.Ansible Conditions介绍

Ansible条件语句 1)上面的例子在不同的机器上安装nginx&#xff0c;不同的操作系统风格使用不同的软件包管理器&#xff61;debian使用APT, Red Hat使用Yum, 但这是两个独立的Playbook,您必须为各自的服务器使用正确的剧本&#xff61; 可以使用条件语句&#xff0c;将这两个P…

Mongodb在Linux下载安装及部署

前言 一、下载安装包 Mongodb官网&#xff1a;Download MongoDB Community Server | MongoDB 二、安装及配置 博主下载的安装包是&#xff1a;mongodb-linux-x86_64-rhel70-6.0.6.tgz 新建目录 # 进入 usr 文件夹 cd /usr# 新建 mongodb 文件夹 mkdir mongodb# 进入 mongodb …

如何自学成为黑客

学习路线 不BB&#xff0c;直接上干货。 学完下面的内容&#xff0c;绝对可以进入黑客圈。 文末有福利噢&#xff01; 第一步&#xff1a;计算机基础 了解计算机基本常识&#xff0c;常用软件使用。需要学会基本使用的软件或技术有&#xff1a;Word、VMware、VPN、Visual St…

快速实现工程化部署,亚马逊云科技为AIGC产品化提供可靠基础

本文将以Stable Diffusion Quick Kit在亚马逊云科技Amazon SageMaker上的部署来介绍Stable Diffusion模型基础知识&#xff0c;HuggingFace Diffusers接口&#xff0c;以及如何使用Quick Kit在SageMaker Endpoint上快速部署推理服务。 Stable Diffusion模型 2022年由Stability…

自己拍摄的视频剪辑时如何消音?

由于录制环境的影响&#xff0c;有时制作出来的视频原始声音可能无法达到令人满意的效果&#xff0c;可能有噪声存在。这个时候&#xff0c;就应该先消除视频原始声音&#xff0c;然后后期再去给视频添加配音。有哪些适合给自己拍摄的视频调为静音的方法&#xff0c;来看看有哪…

详解 Windows 10 安装 CUDA 和 CUDNN

目录 查看本机 Window 10 系统已经安装 NIVIDIA 的驱动版本说在前面查看驱动版本 CUDA下载直接下载最新的 CUDA下载历史版本的 CUDA 安装测试 CUDNN下载 下载最新版本的 cuDNN下载历史版本的 cuDNN, 如: cuDNN 12.0安装 关于添加系统环境变量的问题 ⭐️⭐️说在前面!!! 建议 先…

平均年薪20W,自动化测试工程师这么吃香?

自动化测试工程师&#xff0c;平均年薪20w绝对不是空穴来凤&#xff0c;甚至我还说少了&#xff0c;加上年终奖和奖金等等年薪可能还不止20w这个水平&#xff0c;让我们看看下方截图&#xff0c;【来自于职友集】 本篇文章将由以下4个部分来展开&#xff1a; 1. 什么是自动化测…

PaddleClas初体验

PaddleClas初体验 该包是由百度PaddlePaddle组织下开源的项目&#xff0c;主要用于图像分类&#xff0c;图像搜索等相关任务。 项目地址&#xff1a; https://github.com/PaddlePaddle/PaddleClashttps://pypi.org/project/paddleclas 主要构件&#xff1a; PP-ShiTu&…

企业的数据信息值钱吗?如何提升数据信息的价值?

越来越多的企业也将数据视为转型发展、重塑竞争优势和提升组织治理能力的重要战略资产&#xff0c;并对这一重要资产进行系统性、体系化的管理&#xff0c;以便充分挖掘数据的战略、战术价值。鉴于此&#xff0c;对数据资产进行体全面盘点、构建企业级的数据资产目录成为了数据…

aigc分享

AIGC技术分享 AIGC概述 AIGC的概念、应用场景和发展历程 机器学习基础 机器学习的基本概念、分类和常用算法&#xff0c;如线性回归、决策树、支持向量机、神经网络等。 深度学习基础 深度学习的基本概念、分类和常用算法&#xff0c;如卷积神经网络、循环神经网络、自编…

面试专题:java多线程(2)-- 线程池

1.为什么要用线程池&#xff1f; 线程池提供了一种限制和管理资源&#xff08;包括执行一个任务&#xff09;。 每个线程池还维护一些基本统计信息&#xff0c;例如已完成任务的数量。 这里借用《Java并发编程的艺术》提到的来说一下使用线程池的好处&#xff1a; 降低资源消…

【嵌入式烧录/刷写文件】-1.6-剪切/保留Motorola S-record(S19/SREC/mot/SX)文件中指定地址范围内的数据

案例背景&#xff1a; 有如下一段S19文件&#xff0c;保留地址范围0x9140-0x91BF内的数据&#xff0c;删除地址范围0x9140-0x91BF外的数据。 S0110000486578766965772056312E30352EA6 S123910058595A5B5C5D5E5F606162636465666768696A6B6C6D6E6F70717273747576775B S12391207…

如何判断一个点是否在凸多边形内 - golang

判断一个点是否在凸多边形内的方法很多&#xff0c;此处仅给出使用向量叉积法判断点是否在凸多边形内的方法。 以下图为例说明问题&#xff1a; 原理&#xff1a; 1. 将多边形的第 i 条边的第一个顶点指向点 P 得到向量 v1&#xff0c;然后将从第一个顶点指向第二个顶点得到向…

Java 多线程实现1到1千万的求和操作

一、使用多线程的背景 提高程序速度和响应性&#xff1a;许多应用程序需要同时执行多个任务&#xff0c;例如网络服务器&#xff0c;图形图像处理&#xff0c;模拟程序等。使用多线程可以让程序同时执行多个部分&#xff0c;从而显著提高程序的执行速度、响应速度。 充分利用 …

CompletableFuture 线程编排

一、前言 Java8 新特性之一&#xff0c;其实现了Future<T>, CompletionStage<T>两接口&#xff0c;后者是对前者的一个扩展&#xff0c;增加了异步回调、流式处理、多个Future组合处理的能力&#xff0c;使 Java 在处理多任务的协同工作时更加顺畅便利。 二、Compl…