|
@@ -1,983 +1,1001 @@
|
|
|
-<template>
|
|
|
- <view class="container floor clearfix">
|
|
|
- <tui-skeleton
|
|
|
- v-if="skeletonShow"
|
|
|
- backgroundColor="#fafafa"
|
|
|
- borderRadius="10rpx"
|
|
|
- :isLoading="true"
|
|
|
- :loadingType="5"
|
|
|
- ></tui-skeleton>
|
|
|
- <view v-else>
|
|
|
- <view class="container-topcontent">
|
|
|
- <view class="topcontent-image" :style="{ paddingTop: StatusBar + 'px' }">
|
|
|
- <view
|
|
|
- class="topcontent-title"
|
|
|
- :class="fixedClass"
|
|
|
- :style="{ paddingTop: fixedClass == 'fixed' ? StatusBar + 'px' : '0'}"
|
|
|
- >
|
|
|
- 采美新品橱窗
|
|
|
- <view class="topcontent-title-icon" @click="haveBack" :style="{ top: fixedClass == 'fixed' ? (StatusBar+7) + 'px' : '14rpx'}">
|
|
|
- <text class="iconfont icon-fanhui"></text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="topcontent-swiper" :style="{ top: StatusBar + 44 + 'px' }">
|
|
|
- <view class="swiper-goods">
|
|
|
- <view class="swiper-banner-box">
|
|
|
- <swiper
|
|
|
- class="tui-banner-swiper tui-banner tui-skeleton-fillet"
|
|
|
- :autoplay="true"
|
|
|
- :interval="5000"
|
|
|
- :duration="500"
|
|
|
- @change="swiperChange"
|
|
|
- :circular="true"
|
|
|
- >
|
|
|
- <swiper-item
|
|
|
- v-for="(item, index) in topGoodList"
|
|
|
- :key="index"
|
|
|
- @click.stop="navToDetailPage(item.productId)"
|
|
|
- >
|
|
|
- <view class="swiper-goods-image">
|
|
|
- <image :src="item.mainImage" mode="scaleToFill" />
|
|
|
- </view>
|
|
|
- <view class="swiper-goods-info">
|
|
|
- <view class="swiper-goods-name"> {{ item.name }} </view>
|
|
|
- <view class="swiper-goods-btn"> <view class="btn"> 立即购买 </view> </view>
|
|
|
- </view>
|
|
|
- </swiper-item>
|
|
|
- </swiper>
|
|
|
- <view class="swiper__dots-box" v-if="topGoodList.length > 1">
|
|
|
- <view
|
|
|
- v-for="(item, idx) in topGoodList"
|
|
|
- :key="idx"
|
|
|
- :class="[idx === current ? 'swiper__dots-long' : 'none']"
|
|
|
- :data-index="current"
|
|
|
- class="swiper__dots-item"
|
|
|
- >
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="container-screen">
|
|
|
- <view class="container-screen-box" @click="showDropShow">
|
|
|
- <view class="screen-box-em">品牌</view>
|
|
|
- <view class="screen-box-mi" v-if="!dropShow">
|
|
|
- <view class="screen-list" :class="isAllcheckedBrand ? 'active' : ''">全部</view>
|
|
|
- <view class="screen-list" v-for="(brand, index) in brandList" :key="index" v-if="index < 2">
|
|
|
- {{ brand.name }}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="screen-box-sp">
|
|
|
- <text
|
|
|
- class="iconfont"
|
|
|
- :class="dropShow ? 'icon-xiangshangjiantou' : 'icon-xiangxiajiantou'"
|
|
|
- ></text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="container-screen-popup" v-if="dropShow">
|
|
|
- <!-- <uni-transition mode-class="slide-top" :show=""> -->
|
|
|
- <view class="container-screen-popupbox">
|
|
|
- <!--header 顶部下拉选择框-->
|
|
|
- <scroll-view class="tui-scroll-box" scroll-y scroll-with-animation :scroll-top="scrollTop">
|
|
|
- <view class="screen-list" :class="isAllcheckedBrand ? 'active' : ''" @click="choiceBrandAll"
|
|
|
- >全部</view
|
|
|
- >
|
|
|
- <view
|
|
|
- class="screen-list"
|
|
|
- v-for="(brand, index) in brandList"
|
|
|
- :key="index"
|
|
|
- @click="choiceBrand(brand, index)"
|
|
|
- :class="brand.isChecked ? 'active' : ''"
|
|
|
- >
|
|
|
- {{ brand.name }}
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- <view class="container-screen-btnbox">
|
|
|
- <view class="btns" @tap="btnCloseDrop">确定</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- </uni-transition> -->
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 楼层 -->
|
|
|
- <view class="container-section tui-skeleton">
|
|
|
- <view class="floor-item-banner ad_01" v-if="appletsBanner">
|
|
|
- <image class="item-img-gg" :src="appletsBanner"></image>
|
|
|
- </view>
|
|
|
- <view class="section_page_main clearfix">
|
|
|
- <view
|
|
|
- class="floor-item clearfix"
|
|
|
- v-for="(pros, idx) in productList"
|
|
|
- :key="idx"
|
|
|
- @click.stop="navToDetailPage(pros.productId)"
|
|
|
- >
|
|
|
- <image class="item-img tui-skeleton-fillet" :src="pros.image" mode="aspectFill"></image>
|
|
|
- <view class="floor-item-type" v-if="pros.productType == 2">医疗器械</view>
|
|
|
- <view class="floor-item-content">
|
|
|
- <view class="title tui-skeleton-rect">
|
|
|
- <text class="mclap-tag" v-if="pros.beautyActFlag == '1'">美博会</text>
|
|
|
- <text class="mclap" :class="pros.beautyActFlag == '1' ? 'indent' : ''"
|
|
|
- >{{ pros.name }}
|
|
|
- </text>
|
|
|
- </view>
|
|
|
- <view class="floor-item-price">
|
|
|
- <view class="floor-item-act">
|
|
|
- <view class="coupon-tags" v-if="pros.couponsLogo">优惠券</view>
|
|
|
- <template v-if="pros.actStatus === 1">
|
|
|
- <view class="floor-tags" v-if="PromotionsFormat(pros.promotions)">
|
|
|
- {{ pros.promotions.name }}
|
|
|
- <text v-if="pros.priceFlag != 1">:¥{{ pros.price | NumFormat }}</text>
|
|
|
- </view>
|
|
|
- <view class="floor-tags" v-else>{{ pros.promotions.name }}</view>
|
|
|
- </template>
|
|
|
- <template v-if="pros.svipProductFlag == 1">
|
|
|
- <view class="svip-tags">
|
|
|
- <view class="tags" :class="{ none: vipFlag != 1 }">SVIP</view>
|
|
|
- <view class="price" v-if="isShowVipFlag(pros)">{{
|
|
|
- pros.svipPriceTag
|
|
|
- }}</view>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- </view>
|
|
|
- <view v-if="hasLogin" class="list-price">
|
|
|
- <template v-if="userIdentity == 1">
|
|
|
- <text
|
|
|
- class="price-larger"
|
|
|
- :class="
|
|
|
- PromotionsFormat(pros.promotions) || pros.svipProductFlag == 1
|
|
|
- ? 'none'
|
|
|
- : ''
|
|
|
- "
|
|
|
- >
|
|
|
- ¥{{
|
|
|
- (PromotionsFormat(pros.promotions) || pros.svipProductFlag == 1
|
|
|
- ? pros.originalPrice
|
|
|
- : pros.price) | NumFormat
|
|
|
- }}
|
|
|
- </text>
|
|
|
- </template>
|
|
|
- <template v-if="userIdentity == 4 && vipFlag != 1">
|
|
|
- <view class="price-larger" v-if="pros.priceFlag == 1">
|
|
|
- <text class="txt">¥未公开价格</text>
|
|
|
- </view>
|
|
|
- <view class="price-larger" v-if="pros.priceFlag == 2">
|
|
|
- <text class="txt">¥价格仅会员可见</text>
|
|
|
- </view>
|
|
|
- <view class="price-larger" v-else-if="pros.priceFlag == 3">
|
|
|
- <text class="txt">¥仅医美机构可见</text>
|
|
|
- </view>
|
|
|
- <text
|
|
|
- v-else
|
|
|
- class="price-larger"
|
|
|
- :class="
|
|
|
- PromotionsFormat(pros.promotions) || pros.svipProductFlag == 1
|
|
|
- ? 'none'
|
|
|
- : ''
|
|
|
- "
|
|
|
- >
|
|
|
- ¥{{
|
|
|
- (PromotionsFormat(pros.promotions) || pros.svipProductFlag == 1
|
|
|
- ? pros.originalPrice
|
|
|
- : pros.price) | NumFormat
|
|
|
- }}
|
|
|
- </text>
|
|
|
- </template>
|
|
|
- <template v-if="userIdentity == 3">
|
|
|
- <template v-if="pros.shopId === shopId">
|
|
|
- <view class="price-larger" v-if="pros.priceFlag == 1">
|
|
|
- <text class="txt">¥未公开价格</text>
|
|
|
- </view>
|
|
|
- <text
|
|
|
- v-else
|
|
|
- class="price-larger"
|
|
|
- :class="
|
|
|
- PromotionsFormat(pros.promotions) || pros.svipProductFlag == 1
|
|
|
- ? 'none'
|
|
|
- : ''
|
|
|
- "
|
|
|
- >
|
|
|
- ¥{{
|
|
|
- (PromotionsFormat(pros.promotions) || pros.svipProductFlag == 1
|
|
|
- ? pros.originalPrice
|
|
|
- : pros.price) | NumFormat
|
|
|
- }}
|
|
|
- </text>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <view class="list-login-now">
|
|
|
- <text class="p-no">¥</text>
|
|
|
- <uni-grader :grade="Number(pros.priceGrade)"></uni-grader>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- <template v-if="userIdentity == 2 || (userIdentity == 4 && vipFlag == 1)">
|
|
|
- <view class="price-larger" v-if="pros.priceFlag == 1">
|
|
|
- <text class="txt">¥未公开价格</text>
|
|
|
- </view>
|
|
|
- <view class="price-larger" v-if="pros.priceFlag == 3 && firstClubType != 1">
|
|
|
- <text class="txt">¥仅医美机构可见</text>
|
|
|
- </view>
|
|
|
- <text
|
|
|
- v-else
|
|
|
- class="price-larger"
|
|
|
- :class="
|
|
|
- PromotionsFormat(pros.promotions) || pros.svipProductFlag == 1
|
|
|
- ? 'none'
|
|
|
- : ''
|
|
|
- "
|
|
|
- >
|
|
|
- ¥{{
|
|
|
- (PromotionsFormat(pros.promotions) || pros.svipProductFlag == 1
|
|
|
- ? pros.originalPrice
|
|
|
- : pros.price) | NumFormat
|
|
|
- }}
|
|
|
- </text>
|
|
|
- </template>
|
|
|
- </view>
|
|
|
- <view v-else class="list-login-now">
|
|
|
- <text class="p-no">¥</text>
|
|
|
- <uni-grader :grade="Number(pros.priceGrade)"></uni-grader>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!--加载loadding-->
|
|
|
- <tui-loadmore :visible="loadding" :index="3" type="black" />
|
|
|
- <tui-nomore :visible="!pullUpOn" :backgroundColor="'#F7F7F7'" :text="nomoreText" />
|
|
|
- <!--加载loadding-->
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import { mapState, mapMutations } from 'vuex'
|
|
|
-import uniGrader from '@/components/uni-grade/uni-grade.vue'
|
|
|
-import cmsMixins from '@/mixins/cmsMixins.js'
|
|
|
-export default{
|
|
|
- mixins: [cmsMixins],
|
|
|
- components: {
|
|
|
- uniGrader
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- fixedClass: 'float',
|
|
|
- StatusBar: this.StatusBar,
|
|
|
- skeletonShow: true,
|
|
|
- dropShow: false,
|
|
|
- vipFlag: 0,
|
|
|
- userIdentity: 0,
|
|
|
- productList: [],
|
|
|
- brandList: [],
|
|
|
- checkedBrandList: [],
|
|
|
- isAllcheckedBrand: true,
|
|
|
- topGoodList: [],
|
|
|
- current: 0,
|
|
|
- appletsBanner: '',
|
|
|
- listQuery: {
|
|
|
- userId: 0,
|
|
|
- brandID: '',
|
|
|
- pageSize: 10,
|
|
|
- pageNum: 1,
|
|
|
- source: 2
|
|
|
- },
|
|
|
- NavigationBarTitle: '',
|
|
|
- nomoreText: '上拉显示更多',
|
|
|
- hasNextPage: false,
|
|
|
- loadding: false,
|
|
|
- pullUpOn: true,
|
|
|
- pullFlag: true
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad(option) {
|
|
|
- this.initGetStotage()
|
|
|
- },
|
|
|
- filters: {
|
|
|
- NumFormat: function(text) {
|
|
|
- //处理金额
|
|
|
- return Number(text).toFixed(2)
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapState(['hasLogin', 'userInfo', 'identity'])
|
|
|
- },
|
|
|
- methods: {
|
|
|
- async initGetStotage() {
|
|
|
- // 初始化
|
|
|
- const userInfo = await this.$api.getStorage()
|
|
|
- this.listQuery.userId = userInfo.userId ? userInfo.userId : 0
|
|
|
- this.vipFlag = userInfo.vipFlag ? userInfo.vipFlag : 0
|
|
|
- this.userIdentity = userInfo.userIdentity ? userInfo.userIdentity : 0
|
|
|
- this.GetHomeRecommend()
|
|
|
- this.GetHomeNewBrandNames()
|
|
|
- this.GetHomeNewFloorList()
|
|
|
- },
|
|
|
- GetHomeNewBrandNames() {
|
|
|
- //新品商品品牌列表
|
|
|
- this.CommonService.GetHomeNewBrandNames()
|
|
|
- .then(response => {
|
|
|
- this.brandList = response.data
|
|
|
- })
|
|
|
- .catch(error => {
|
|
|
- console.log('获取新品橱窗推荐模块信息异常')
|
|
|
- })
|
|
|
- },
|
|
|
- GetHomeRecommend() {
|
|
|
- //新品橱窗顶部推荐
|
|
|
- this.CommonService.GetHomeRecommend()
|
|
|
- .then(response => {
|
|
|
- this.topGoodList = response.data
|
|
|
- })
|
|
|
- .catch(error => {
|
|
|
- console.log('获取新品橱窗推荐模块信息异常')
|
|
|
- })
|
|
|
- },
|
|
|
- GetHomeNewFloorList() {
|
|
|
- //楼层查看更多
|
|
|
- this.CommonService.GetHomeNewFloorList(this.listQuery)
|
|
|
- .then(response => {
|
|
|
- let data = response.data
|
|
|
- this.productList = data.results
|
|
|
- this.hasNextPage = data.hasNextPage
|
|
|
- this.skeletonShow = false
|
|
|
- if (this.hasNextPage) {
|
|
|
- this.pullUpOn = false
|
|
|
- this.nomoreText = '上拉显示更多'
|
|
|
- } else {
|
|
|
- if (this.productList.length < 6) {
|
|
|
- this.pullUpOn = true
|
|
|
- } else {
|
|
|
- this.pullUpOn = false
|
|
|
- this.loadding = false
|
|
|
- this.nomoreText = '已至底部'
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- .catch(error => {
|
|
|
- this.$util.msg(error.msg, 2000)
|
|
|
- })
|
|
|
- },
|
|
|
- OnReachBottomData() {
|
|
|
- // 上滑加载
|
|
|
- this.listQuery.pageNum += 1
|
|
|
- this.CommonService.GetHomeNewFloorList(this.listQuery)
|
|
|
- .then(response => {
|
|
|
- let data = response.data
|
|
|
- this.hasNextPage = data.hasNextPage
|
|
|
- this.productList = this.productList.concat(data.results)
|
|
|
- this.skeletonShow = false
|
|
|
- if (this.hasNextPage) {
|
|
|
- this.pullUpOn = false
|
|
|
- this.nomoreText = '上拉显示更多'
|
|
|
- } else {
|
|
|
- this.pullUpOn = false
|
|
|
- this.loadding = false
|
|
|
- this.nomoreText = '已至底部'
|
|
|
- }
|
|
|
- })
|
|
|
- .catch(error => {
|
|
|
- this.$util.msg(error.msg, 2000)
|
|
|
- })
|
|
|
- },
|
|
|
- PromotionsFormat(promo) {
|
|
|
- //促销活动类型数据处理
|
|
|
- if (promo != null) {
|
|
|
- if (promo.type == 1 && promo.mode == 1) {
|
|
|
- return true
|
|
|
- } else {
|
|
|
- return false
|
|
|
- }
|
|
|
- }
|
|
|
- return false
|
|
|
- },
|
|
|
- navToDetailPage(productId) {
|
|
|
- //跳转商品详情页
|
|
|
- this.cmsSysStatistics(5)
|
|
|
- this.$api.navigateTo(`/pages/goods/product?id=${productId}&typeId=5`)
|
|
|
- },
|
|
|
- isShowVipFlag(pros) {
|
|
|
- // 超级会员价格显示控制
|
|
|
- if (this.hasLogin && pros.priceFlag != 1) {
|
|
|
- if (this.userIdentity == 4 && this.vipFlag == 1) {
|
|
|
- return true
|
|
|
- } else if (this.userIdentity == 2) {
|
|
|
- return true
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- swiperChange(e) {
|
|
|
- //轮播图切换
|
|
|
- const index = e.detail.current
|
|
|
- this.current = index
|
|
|
- },
|
|
|
- choiceBrand(brand, index) {
|
|
|
- // 选择品牌
|
|
|
- brand.isChecked = !brand.isChecked
|
|
|
- if (brand.isChecked) {
|
|
|
- if (!this.contains(this.checkedBrandList, brand.id)) {
|
|
|
- this.checkedBrandList.push(brand.id)
|
|
|
- }
|
|
|
- } else {
|
|
|
- this.checkedBrandList.splice(this.checkedBrandList.indexOf(brand.id), 1)
|
|
|
- }
|
|
|
- this.isAllcheckedBrand = false
|
|
|
- this.checkedBrandLength = this.checkedBrandList.length
|
|
|
- this.listQuery.brandID = this.checkedBrandList.join(',')
|
|
|
- console.log('this.listQuery.brandID', this.listQuery.brandID)
|
|
|
- },
|
|
|
- choiceBrandAll() {
|
|
|
- // 点击选择全部品牌
|
|
|
- this.isAllcheckedBrand = true
|
|
|
- this.listQuery.brandID = ''
|
|
|
- this.brandList.forEach(el => {
|
|
|
- el.isChecked = false
|
|
|
- })
|
|
|
- },
|
|
|
- contains(arr, val) {
|
|
|
- // 校验
|
|
|
- return arr.some(item => item === val)
|
|
|
- },
|
|
|
- showDropShow() {
|
|
|
- this.dropShow = !this.dropShow
|
|
|
- },
|
|
|
- btnCloseDrop() {
|
|
|
- this.dropShow = false
|
|
|
- this.productList = []
|
|
|
- this.listQuery.pageNum = 1
|
|
|
- this.GetHomeNewFloorList()
|
|
|
- },
|
|
|
- haveBack() {
|
|
|
- uni.navigateBack({
|
|
|
- delta: 1
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- onPageScroll(e) {
|
|
|
- //实时获取到滚动的值
|
|
|
- if (e.scrollTop > 50) {
|
|
|
- this.fixedClass = 'fixed'
|
|
|
- } else {
|
|
|
- this.fixedClass = 'float'
|
|
|
- }
|
|
|
- },
|
|
|
- onPullDownRefresh() {
|
|
|
- setTimeout(() => {
|
|
|
- this.productList = []
|
|
|
- this.listQuery.pageNum = 1
|
|
|
- this.GetHomeNewFloorList()
|
|
|
- uni.stopPullDownRefresh()
|
|
|
- }, 200)
|
|
|
- },
|
|
|
- onReachBottom() {
|
|
|
- if (this.hasNextPage) {
|
|
|
- this.loadding = true
|
|
|
- this.pullUpOn = true
|
|
|
- this.OnReachBottomData()
|
|
|
- }
|
|
|
- },
|
|
|
- onShow() {
|
|
|
-
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss">
|
|
|
-page {
|
|
|
- background-color: #f7f7f7;
|
|
|
-}
|
|
|
-.container-home {
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
-}
|
|
|
-.container-topcontent {
|
|
|
- width: 100%;
|
|
|
- height: 620rpx;
|
|
|
- background: #ffffff;
|
|
|
- box-sizing: border-box;
|
|
|
- position: relative;
|
|
|
- .topcontent-image {
|
|
|
- width: 100%;
|
|
|
- height: 480rpx;
|
|
|
- background: url(https://static.caimei365.com/app/img/hot/hot-bg@2x.png);
|
|
|
- background-size: cover;
|
|
|
- box-sizing: border-box;
|
|
|
- .topcontent-title {
|
|
|
- width: 100%;
|
|
|
- height: 80rpx;
|
|
|
- line-height: 80rpx;
|
|
|
- font-size: 38rpx;
|
|
|
- color: #ffffff;
|
|
|
- font-weight: bold;
|
|
|
- text-align: center;
|
|
|
- position: relative;
|
|
|
- &.fixed {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- height: 80rpx;
|
|
|
- background: linear-gradient(90deg, #FF5B00 0%, #f28f31 100%);
|
|
|
- z-index: 9999;
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
- .topcontent-title-icon {
|
|
|
- width: 50rpx;
|
|
|
- height: 50rpx;
|
|
|
- line-height: 50rpx;
|
|
|
- position: absolute;
|
|
|
- left: 24rpx;
|
|
|
- top: 14rpx;
|
|
|
- border-radius: 50%;
|
|
|
- text-align: center;
|
|
|
- background: rgba(255, 255, 255, 0.6);
|
|
|
- border: 0.5px solid rgba(0, 0, 0, 0.1);
|
|
|
- box-sizing: border-box;
|
|
|
- z-index: 9999;
|
|
|
- .iconfont {
|
|
|
- height: 100%;
|
|
|
- width: 100%;
|
|
|
- font-size: 32rpx;
|
|
|
- display: inline-block;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .topcontent-swiper {
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- }
|
|
|
- .swiper-goods {
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- position: relative;
|
|
|
- background-size: cover;
|
|
|
- }
|
|
|
- .swiper-banner-box {
|
|
|
- width: 100%;
|
|
|
- height: 360rpx;
|
|
|
- position: relative;
|
|
|
- background-size: cover;
|
|
|
- }
|
|
|
- .tui-banner-swiper {
|
|
|
- width: 680rpx;
|
|
|
- margin: 0 auto;
|
|
|
- height: 340rpx;
|
|
|
- background: url(https://static.caimei365.com/app/img/hot/hot-bg@3x.png);
|
|
|
- background-size: cover;
|
|
|
- border-radius: 24rpx;
|
|
|
- overflow: hidden;
|
|
|
- transform: translateY(0);
|
|
|
- box-shadow: 0px 3px 6px rgba(225, 86, 22, 0.08);
|
|
|
- margin-top: 16rpx;
|
|
|
- padding: 12rpx;
|
|
|
- .swiper-goods-image {
|
|
|
- width: 336rpx;
|
|
|
- height: 336rpx;
|
|
|
- float: left;
|
|
|
- image {
|
|
|
- width: 336rpx;
|
|
|
- height: 336rpx;
|
|
|
- display: block;
|
|
|
- border-radius: 8rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .swiper-goods-info {
|
|
|
- width: 326rpx;
|
|
|
- height: 336rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 32rpx 24rpx;
|
|
|
- float: right;
|
|
|
- position: relative;
|
|
|
- .swiper-goods-name {
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- line-height: 44rpx;
|
|
|
- text-overflow: ellipsis;
|
|
|
- display: -webkit-box;
|
|
|
- word-break: break-all;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- -webkit-line-clamp: 4;
|
|
|
- overflow: hidden;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #333333;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- .swiper-goods-btn {
|
|
|
- width: 100%;
|
|
|
- height: 64rpx;
|
|
|
- position: absolute;
|
|
|
- bottom: 60rpx;
|
|
|
- left: 0;
|
|
|
- .btn {
|
|
|
- width: 200rpx;
|
|
|
- height: 64rpx;
|
|
|
- margin: 0 auto;
|
|
|
- text-align: center;
|
|
|
- line-height: 64rpx;
|
|
|
- background-color: #f94b4b;
|
|
|
- font-size: 26rpx;
|
|
|
- color: #ffffff;
|
|
|
- border-radius: 32rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .swiper__dots-box {
|
|
|
- position: absolute;
|
|
|
- bottom: -45rpx;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- /* #ifndef APP-NVUE */
|
|
|
- display: flex;
|
|
|
- /* #endif */
|
|
|
- flex: 1;
|
|
|
- flex-direction: row;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- .swiper__dots-item {
|
|
|
- width: 14rpx;
|
|
|
- height: 8rpx;
|
|
|
- border-radius: 4rpx;
|
|
|
- margin-left: 6px;
|
|
|
- background-color: rgba(225, 86, 22, 0.39);
|
|
|
- }
|
|
|
- .swiper__dots-long {
|
|
|
- width: 40rpx;
|
|
|
- height: 8rpx;
|
|
|
- border-radius: 4rpx;
|
|
|
- background-color: #FF5B00;
|
|
|
- transition: all 0.4s;
|
|
|
- }
|
|
|
- }
|
|
|
- .swiper-banner-msg {
|
|
|
- width: 100%;
|
|
|
- height: 54rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 0 24rpx;
|
|
|
- margin-top: 24rpx;
|
|
|
- .content {
|
|
|
- width: 100%;
|
|
|
- height: 54rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 0 34rpx;
|
|
|
- background-color: #fff0e9;
|
|
|
- border-radius: 16rpx;
|
|
|
- .item {
|
|
|
- width: 33.33%;
|
|
|
- height: 54rpx;
|
|
|
- line-height: 54rpx;
|
|
|
- font-size: $font-size-24;
|
|
|
- color: $color-system;
|
|
|
- float: left;
|
|
|
- &.le {
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
- &.ce {
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- &.ri {
|
|
|
- text-align: right;
|
|
|
- }
|
|
|
- .iconfont {
|
|
|
- color: $color-system;
|
|
|
- font-size: $font-size-32;
|
|
|
- .sm {
|
|
|
- font-size: $font-size-26;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.container-screen {
|
|
|
- width: 100%;
|
|
|
- height: 138rpx;
|
|
|
- padding: 24rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- background-color: #f7f7f7;
|
|
|
- position: relative;
|
|
|
- .container-screen-box {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background-color: #ffffff;
|
|
|
- border-radius: 16rpx;
|
|
|
- .screen-box-em {
|
|
|
- float: left;
|
|
|
- width: 134rpx;
|
|
|
- line-height: 90rpx;
|
|
|
- text-align: center;
|
|
|
- color: #333333;
|
|
|
- font-size: 30rpx;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- .screen-box-mi {
|
|
|
- float: left;
|
|
|
- width: 468rpx;
|
|
|
- height: 100%;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 21rpx 0;
|
|
|
- .screen-list {
|
|
|
- width: 140rpx;
|
|
|
- height: 48rpx;
|
|
|
- padding: 0 12rpx;
|
|
|
- float: left;
|
|
|
- text-align: center;
|
|
|
- box-sizing: border-box;
|
|
|
- line-height: 48rpx;
|
|
|
- font-size: 30rpx;
|
|
|
- color: #666666;
|
|
|
- border-radius: 24rpx;
|
|
|
- margin-right: 20rpx;
|
|
|
- text-overflow: ellipsis;
|
|
|
- overflow: hidden;
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-line-clamp: 1;
|
|
|
- line-clamp: 1;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- word-break: break-all;
|
|
|
- &:last-child {
|
|
|
- margin-right: 0;
|
|
|
- }
|
|
|
- &.active {
|
|
|
- background-color: #ffe6dc;
|
|
|
- color: #FF5B00;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .screen-box-sp {
|
|
|
- float: right;
|
|
|
- width: 100rpx;
|
|
|
- line-height: 90rpx;
|
|
|
- text-align: center;
|
|
|
- .iconfont {
|
|
|
- color: #999999;
|
|
|
- font-size: 40rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .container-screen-popup {
|
|
|
- width: 100%;
|
|
|
- height: 480rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 24rpx;
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 86rpx;
|
|
|
- z-index: 999;
|
|
|
- .container-screen-popupbox {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 0 24rpx;
|
|
|
- background-color: #ffffff;
|
|
|
- border-radius: 0 0 16rpx 16rpx;
|
|
|
- box-shadow: 0 10rpx 14rpx 0 rgba(86, 119, 252, 0.2);
|
|
|
- }
|
|
|
- .tui-scroll-box {
|
|
|
- width: 100%;
|
|
|
- height: 300rpx;
|
|
|
- overflow: hidden;
|
|
|
- .screen-list {
|
|
|
- width: 140rpx;
|
|
|
- height: 48rpx;
|
|
|
- padding: 0 12rpx;
|
|
|
- float: left;
|
|
|
- text-align: center;
|
|
|
- box-sizing: border-box;
|
|
|
- line-height: 48rpx;
|
|
|
- font-size: 30rpx;
|
|
|
- color: #666666;
|
|
|
- border-radius: 24rpx;
|
|
|
- margin-right: 30rpx;
|
|
|
- margin-bottom: 30rpx;
|
|
|
- text-overflow: ellipsis;
|
|
|
- overflow: hidden;
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-line-clamp: 1;
|
|
|
- line-clamp: 1;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- word-break: break-all;
|
|
|
- &:nth-child(4n) {
|
|
|
- margin-right: 0;
|
|
|
- }
|
|
|
- &.active {
|
|
|
- background-color: #ffe6dc;
|
|
|
- color: #FF5B00;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .container-screen-btnbox {
|
|
|
- width: 100%;
|
|
|
- height: 84rpx;
|
|
|
- margin-top: 15rpx;
|
|
|
- .btns {
|
|
|
- width: 314rpx;
|
|
|
- height: 84rpx;
|
|
|
- line-height: 84rpx;
|
|
|
- border-radius: 42rpx;
|
|
|
- text-align: center;
|
|
|
- font-size: 30rpx;
|
|
|
- color: #ffffff;
|
|
|
- background: $btn-confirm;
|
|
|
- margin: 0 auto;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.container-section {
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- background-color: #f7f7f7;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 0 24rpx 24rpx 24rpx;
|
|
|
-}
|
|
|
-.floor-item-banner {
|
|
|
- width: 100%;
|
|
|
- height: 240rpx;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- .item-img-gg {
|
|
|
- width: 100%;
|
|
|
- height: 240rpx;
|
|
|
- display: block;
|
|
|
- border-radius: 16rpx;
|
|
|
- }
|
|
|
-}
|
|
|
-.section_page_main {
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- box-sizing: border-box;
|
|
|
- .floor-item {
|
|
|
- width: 339rpx;
|
|
|
- height: 516rpx;
|
|
|
- margin-right: 20rpx;
|
|
|
- font-size: $font-size-24;
|
|
|
- color: $text-color;
|
|
|
- background: #ffffff;
|
|
|
- line-height: 36rpx;
|
|
|
- border-radius: 16rpx;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- float: left;
|
|
|
- box-sizing: border-box;
|
|
|
- position: relative;
|
|
|
- &:nth-child(2n) {
|
|
|
- margin-right: 0;
|
|
|
- }
|
|
|
- .item-img {
|
|
|
- width: 339rpx;
|
|
|
- height: 339rpx;
|
|
|
- border-radius: 16rpx 16rpx 0 0;
|
|
|
- display: block;
|
|
|
- margin-bottom: 8rpx;
|
|
|
- }
|
|
|
- .floor-item-type {
|
|
|
- width: 64rpx;
|
|
|
- height: 64rpx;
|
|
|
- text-align: justify;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 10rpx;
|
|
|
- border-radius: 0 0 8rpx 8rpx;
|
|
|
- background-color: #33ccbf;
|
|
|
- font-size: $font-size-22;
|
|
|
- color: #ffffff;
|
|
|
- line-height: 25rpx;
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- right: 16rpx;
|
|
|
- }
|
|
|
- .floor-item-content {
|
|
|
- width: 100%;
|
|
|
- padding: 0 20rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
- .floor-item-act {
|
|
|
- display: block;
|
|
|
- width: 100%;
|
|
|
- height: 32rpx;
|
|
|
- text-align: center;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
- .title-none {
|
|
|
- font-size: $font-size-26;
|
|
|
- color: #ff2a2a;
|
|
|
- line-height: 54rpx;
|
|
|
- }
|
|
|
- .title {
|
|
|
- width: 100%;
|
|
|
- height: 70rpx;
|
|
|
- display: flex;
|
|
|
- line-height: 35rpx;
|
|
|
- flex-direction: column;
|
|
|
- margin: 8rpx 0;
|
|
|
- padding: 0;
|
|
|
- position: relative;
|
|
|
- .mclap {
|
|
|
- width: 100%;
|
|
|
- line-height: 35rpx;
|
|
|
- text-overflow: ellipsis;
|
|
|
- display: -webkit-box;
|
|
|
- word-break: break-all;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- -webkit-line-clamp: 2;
|
|
|
- overflow: hidden;
|
|
|
- font-size: 26rpx;
|
|
|
- &.indent {
|
|
|
- text-indent: 95rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .mclap-tag {
|
|
|
- display: block;
|
|
|
- width: 84rpx;
|
|
|
- height: 32rpx;
|
|
|
- background-image: linear-gradient(270deg, #f9c023 0%, #f83600 100%);
|
|
|
- border-radius: 4rpx 48rpx 4px 4px;
|
|
|
- line-height: 32rpx;
|
|
|
- font-size: $font-size-22;
|
|
|
- color: #ffffff;
|
|
|
- text-align: center;
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- .floor-item-price {
|
|
|
- .list-login-now {
|
|
|
- line-height: 44rpx;
|
|
|
- .p-no {
|
|
|
- height: 44rpx;
|
|
|
- line-height: 44rpx;
|
|
|
- display: inline-block;
|
|
|
- float: left;
|
|
|
- }
|
|
|
- }
|
|
|
- .list-price {
|
|
|
- color: #ff2a2a;
|
|
|
- height: 44rpx;
|
|
|
- float: left;
|
|
|
- .price-larger {
|
|
|
- width: 100%;
|
|
|
- height: 44rpx;
|
|
|
- font-size: 32rpx;
|
|
|
- &.none {
|
|
|
- text-decoration: line-through;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
- &.small {
|
|
|
- font-size: $font-size-24;
|
|
|
- }
|
|
|
- .txt {
|
|
|
- font-size: $font-size-24;
|
|
|
- display: inline-block;
|
|
|
- line-height: 44rpx;
|
|
|
- text-align: left;
|
|
|
- float: left;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
|
|
+<template>
|
|
|
+ <view class="container floor clearfix">
|
|
|
+ <tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading="true"
|
|
|
+ :loadingType="5" />
|
|
|
+ <view v-else>
|
|
|
+ <view class="container-topcontent">
|
|
|
+ <view class="topcontent-image" :style="{ paddingTop: StatusBar + 'px' }">
|
|
|
+ <view class="topcontent-title" :class="fixedClass"
|
|
|
+ :style="{ paddingTop: fixedClass == 'fixed' ? StatusBar + 'px' : '0'}">
|
|
|
+ 采美新品橱窗
|
|
|
+ <view class="topcontent-title-icon" @click="haveBack"
|
|
|
+ :style="{ top: fixedClass == 'fixed' ? (StatusBar+7) + 'px' : '14rpx'}">
|
|
|
+ <text class="iconfont icon-fanhui"></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="topcontent-swiper" :style="{ top: StatusBar + 44 + 'px' }">
|
|
|
+ <view class="swiper-goods">
|
|
|
+ <view class="swiper-banner-box">
|
|
|
+ <swiper class="tui-banner-swiper tui-banner tui-skeleton-fillet" :autoplay="true"
|
|
|
+ :interval="5000" :duration="500" @change="swiperChange" :circular="true">
|
|
|
+ <swiper-item v-for="(item, index) in topGoodList" :key="index"
|
|
|
+ @click.stop="navToDetailPage(item.productId)">
|
|
|
+ <view class="swiper-goods-image">
|
|
|
+ <image :src="item.mainImage" mode="scaleToFill" />
|
|
|
+ </view>
|
|
|
+ <view class="swiper-goods-info">
|
|
|
+ <view class="swiper-goods-name"> {{ item.name }} </view>
|
|
|
+ <view class="swiper-goods-btn">
|
|
|
+ <view class="btn"> 立即购买 </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ <view class="swiper__dots-box" v-if="topGoodList.length > 1">
|
|
|
+ <view v-for="(item, idx) in topGoodList" :key="idx"
|
|
|
+ :class="[idx === current ? 'swiper__dots-long' : 'none']" :data-index="current"
|
|
|
+ class="swiper__dots-item">
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="container-screen">
|
|
|
+ <view class="container-screen-box" @click="showDropShow">
|
|
|
+ <view class="screen-box-em">品牌</view>
|
|
|
+ <view class="screen-box-mi" v-if="!dropShow">
|
|
|
+ <view class="screen-list" :class="isAllcheckedBrand ? 'active' : ''">全部</view>
|
|
|
+ <view class="screen-list" v-for="(brand, index) in brandList" :key="index" v-if="index < 2">
|
|
|
+ {{ brand.name }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="screen-box-sp">
|
|
|
+ <text class="iconfont"
|
|
|
+ :class="dropShow ? 'icon-xiangshangjiantou' : 'icon-xiangxiajiantou'"></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="container-screen-popup" v-if="dropShow">
|
|
|
+ <!-- <uni-transition mode-class="slide-top" :show=""> -->
|
|
|
+ <view class="container-screen-popupbox">
|
|
|
+ <!--header 顶部下拉选择框-->
|
|
|
+ <scroll-view class="tui-scroll-box" scroll-y scroll-with-animation :scroll-top="scrollTop">
|
|
|
+ <view class="screen-list" :class="isAllcheckedBrand ? 'active' : ''"
|
|
|
+ @click="choiceBrandAll">全部</view>
|
|
|
+ <view class="screen-list" v-for="(brand, index) in brandList" :key="index"
|
|
|
+ @click="choiceBrand(brand, index)" :class="brand.isChecked ? 'active' : ''">
|
|
|
+ {{ brand.name }}
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ <view class="container-screen-btnbox">
|
|
|
+ <view class="btns" @tap="btnCloseDrop">确定</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- </uni-transition> -->
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 楼层 -->
|
|
|
+ <view class="container-section tui-skeleton">
|
|
|
+ <view class="floor-item-banner ad_01" v-if="appletsBanner">
|
|
|
+ <image class="item-img-gg" :src="appletsBanner"></image>
|
|
|
+ </view>
|
|
|
+ <view class="section_page_main clearfix">
|
|
|
+ <view class="floor-item clearfix" v-for="(pros, idx) in productList" :key="idx"
|
|
|
+ @click.stop="navToDetailPage(pros.productId)">
|
|
|
+ <image class="item-img tui-skeleton-fillet" :src="pros.image" mode="aspectFill"></image>
|
|
|
+ <view class="floor-item-type" v-if="pros.productType == 2">医疗器械</view>
|
|
|
+ <view class="floor-item-content">
|
|
|
+ <view class="title tui-skeleton-rect">
|
|
|
+ <text class="mclap-tag" v-if="pros.beautyActFlag == '1'">美博会</text>
|
|
|
+ <text class="mclap" :class="pros.beautyActFlag == '1' ? 'indent' : ''">{{ pros.name }}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view class="floor-item-price">
|
|
|
+ <view class="floor-item-act">
|
|
|
+ <view class="coupon-tags" v-if="pros.couponsLogo">优惠券</view>
|
|
|
+ <template v-if="pros.actStatus === 1">
|
|
|
+ <view class="floor-tags" v-if="PromotionsFormat(pros.promotions)">
|
|
|
+ {{ pros.promotions.name }}
|
|
|
+ <text v-if="pros.priceFlag != 1">:¥{{ pros.price | NumFormat }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="floor-tags" v-else>{{ pros.promotions.name }}</view>
|
|
|
+ </template>
|
|
|
+ <template v-if="pros.svipProductFlag == 1">
|
|
|
+ <view class="svip-tags">
|
|
|
+ <view class="tags" :class="{ none: vipFlag != 1 }">SVIP</view>
|
|
|
+ <view class="price" v-if="isShowVipFlag(pros)">{{
|
|
|
+ pros.svipPriceTag
|
|
|
+ }}</view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+ <view v-if="hasLogin" class="list-price">
|
|
|
+ <template v-if="userIdentity == 1">
|
|
|
+ <text class="price-larger" :class="
|
|
|
+ PromotionsFormat(pros.promotions) || pros.svipProductFlag == 1
|
|
|
+ ? 'none'
|
|
|
+ : ''
|
|
|
+ ">
|
|
|
+ ¥{{
|
|
|
+ (PromotionsFormat(pros.promotions) || pros.svipProductFlag == 1
|
|
|
+ ? pros.originalPrice
|
|
|
+ : pros.price) | NumFormat
|
|
|
+ }}
|
|
|
+ </text>
|
|
|
+ </template>
|
|
|
+ <template v-if="userIdentity == 4 && vipFlag != 1">
|
|
|
+ <view class="price-larger" v-if="pros.priceFlag == 1">
|
|
|
+ <text class="txt">¥未公开价格</text>
|
|
|
+ </view>
|
|
|
+ <view class="price-larger" v-if="pros.priceFlag == 2">
|
|
|
+ <text class="txt">¥价格仅会员可见</text>
|
|
|
+ </view>
|
|
|
+ <view class="price-larger" v-else-if="pros.priceFlag == 3">
|
|
|
+ <text class="txt">¥仅医美机构可见</text>
|
|
|
+ </view>
|
|
|
+ <text v-else class="price-larger" :class="
|
|
|
+ PromotionsFormat(pros.promotions) || pros.svipProductFlag == 1
|
|
|
+ ? 'none'
|
|
|
+ : ''
|
|
|
+ ">
|
|
|
+ ¥{{
|
|
|
+ (PromotionsFormat(pros.promotions) || pros.svipProductFlag == 1
|
|
|
+ ? pros.originalPrice
|
|
|
+ : pros.price) | NumFormat
|
|
|
+ }}
|
|
|
+ </text>
|
|
|
+ </template>
|
|
|
+ <template v-if="userIdentity == 3">
|
|
|
+ <template v-if="pros.shopId === shopId">
|
|
|
+ <view class="price-larger" v-if="pros.priceFlag == 1">
|
|
|
+ <text class="txt">¥未公开价格</text>
|
|
|
+ </view>
|
|
|
+ <text v-else class="price-larger" :class="
|
|
|
+ PromotionsFormat(pros.promotions) || pros.svipProductFlag == 1
|
|
|
+ ? 'none'
|
|
|
+ : ''
|
|
|
+ ">
|
|
|
+ ¥{{
|
|
|
+ (PromotionsFormat(pros.promotions) || pros.svipProductFlag == 1
|
|
|
+ ? pros.originalPrice
|
|
|
+ : pros.price) | NumFormat
|
|
|
+ }}
|
|
|
+ </text>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <view class="list-login-now">
|
|
|
+ <text class="p-no">¥</text>
|
|
|
+ <uni-grader :grade="Number(pros.priceGrade)"></uni-grader>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ <template v-if="userIdentity == 2 || (userIdentity == 4 && vipFlag == 1)">
|
|
|
+ <view class="price-larger" v-if="pros.priceFlag == 1">
|
|
|
+ <text class="txt">¥未公开价格</text>
|
|
|
+ </view>
|
|
|
+ <view class="price-larger" v-if="pros.priceFlag == 3 && firstClubType != 1">
|
|
|
+ <text class="txt">¥仅医美机构可见</text>
|
|
|
+ </view>
|
|
|
+ <text v-else class="price-larger" :class="
|
|
|
+ PromotionsFormat(pros.promotions) || pros.svipProductFlag == 1
|
|
|
+ ? 'none'
|
|
|
+ : ''
|
|
|
+ ">
|
|
|
+ ¥{{
|
|
|
+ (PromotionsFormat(pros.promotions) || pros.svipProductFlag == 1
|
|
|
+ ? pros.originalPrice
|
|
|
+ : pros.price) | NumFormat
|
|
|
+ }}
|
|
|
+ </text>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+ <view v-else class="list-login-now">
|
|
|
+ <text class="p-no">¥</text>
|
|
|
+ <uni-grader :grade="Number(pros.priceGrade)"></uni-grader>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!--加载loadding-->
|
|
|
+ <tui-loadmore :visible="loadding" :index="3" type="black" />
|
|
|
+ <tui-nomore :visible="!pullUpOn" :backgroundColor="'#F7F7F7'" :text="nomoreText" />
|
|
|
+ <!--加载loadding-->
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import { mapState, mapMutations } from 'vuex'
|
|
|
+ import uniGrader from '@/components/uni-grade/uni-grade.vue'
|
|
|
+ import cmsMixins from '@/mixins/cmsMixins.js'
|
|
|
+ export default {
|
|
|
+ mixins: [cmsMixins],
|
|
|
+ components: {
|
|
|
+ uniGrader
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ fixedClass: 'float',
|
|
|
+ StatusBar: this.StatusBar,
|
|
|
+ skeletonShow: true,
|
|
|
+ dropShow: false,
|
|
|
+ vipFlag: 0,
|
|
|
+ userIdentity: 0,
|
|
|
+ productList: [],
|
|
|
+ brandList: [],
|
|
|
+ checkedBrandList: [],
|
|
|
+ isAllcheckedBrand: true,
|
|
|
+ topGoodList: [],
|
|
|
+ current: 0,
|
|
|
+ appletsBanner: '',
|
|
|
+ listQuery: {
|
|
|
+ userId: 0,
|
|
|
+ brandID: '',
|
|
|
+ pageSize: 10,
|
|
|
+ pageNum: 1,
|
|
|
+ source: 2
|
|
|
+ },
|
|
|
+ NavigationBarTitle: '',
|
|
|
+ nomoreText: '上拉显示更多',
|
|
|
+ hasNextPage: false,
|
|
|
+ loadding: false,
|
|
|
+ pullUpOn: true,
|
|
|
+ pullFlag: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ this.initGetStotage()
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+ NumFormat: function(text) {
|
|
|
+ //处理金额
|
|
|
+ return Number(text).toFixed(2)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['hasLogin', 'userInfo', 'identity'])
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async initGetStotage() {
|
|
|
+ // 初始化
|
|
|
+ const userInfo = await this.$api.getStorage()
|
|
|
+ this.listQuery.userId = userInfo.userId ? userInfo.userId : 0
|
|
|
+ this.vipFlag = userInfo.vipFlag ? userInfo.vipFlag : 0
|
|
|
+ this.userIdentity = userInfo.userIdentity ? userInfo.userIdentity : 0
|
|
|
+ this.getRecommend()
|
|
|
+ this.getNewBrandNames()
|
|
|
+ this.getNewFloorList()
|
|
|
+ },
|
|
|
+ async getNewBrandNames() {
|
|
|
+ //新品商品品牌列表
|
|
|
+ try{
|
|
|
+ const res = await this.CommonService.GetHomeNewBrandNames()
|
|
|
+ this.brandList = res.data
|
|
|
+ }catch(e){
|
|
|
+ console.log('获取新品橱窗推荐模块信息异常')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async getRecommend() {
|
|
|
+ //新品橱窗顶部推荐
|
|
|
+ try{
|
|
|
+ const res = await this.CommonService.GetHomeRecommend()
|
|
|
+ this.topGoodList = res.data
|
|
|
+ }catch(e){
|
|
|
+ console.log('获取新品橱窗推荐模块信息异常')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async getNewFloorList() {
|
|
|
+ //楼层查看更多
|
|
|
+ try {
|
|
|
+ const res = await this.CommonService.GetHomeNewFloorList(this.listQuery)
|
|
|
+ const data = res.data
|
|
|
+ this.productList = data.results
|
|
|
+ this.hasNextPage = data.hasNextPage
|
|
|
+ this.skeletonShow = false
|
|
|
+ if (this.hasNextPage) {
|
|
|
+ this.pullUpOn = false
|
|
|
+ this.nomoreText = '上拉显示更多'
|
|
|
+ } else {
|
|
|
+ if (this.productList.length < 6) {
|
|
|
+ this.pullUpOn = true
|
|
|
+ } else {
|
|
|
+ this.pullUpOn = false
|
|
|
+ this.loadding = false
|
|
|
+ this.nomoreText = '已至底部'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.log('error', error.msg)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async OnReachBottomData() {
|
|
|
+ // 上滑加载
|
|
|
+ try {
|
|
|
+ this.listQuery.pageNum += 1
|
|
|
+ const res = await this.CommonService.GetHomeNewFloorList(this.listQuery)
|
|
|
+ const data = res.data
|
|
|
+ this.hasNextPage = data.hasNextPage
|
|
|
+ this.productList = this.productList.concat(data.results)
|
|
|
+ if (this.hasNextPage) {
|
|
|
+ this.pullUpOn = false
|
|
|
+ this.nomoreText = '上拉显示更多'
|
|
|
+ } else {
|
|
|
+ this.pullUpOn = false
|
|
|
+ this.loadding = false
|
|
|
+ this.nomoreText = '已至底部'
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.log('error', error.msg)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ PromotionsFormat(promo) {
|
|
|
+ //促销活动类型数据处理
|
|
|
+ if (promo != null) {
|
|
|
+ if (promo.type == 1 && promo.mode == 1) {
|
|
|
+ return true
|
|
|
+ } else {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return false
|
|
|
+ },
|
|
|
+ navToDetailPage(productId) {
|
|
|
+ //跳转商品详情页
|
|
|
+ this.cmsSysStatistics(5)
|
|
|
+ this.$api.navigateTo(`/pages/goods/product?id=${productId}&typeId=5`)
|
|
|
+ },
|
|
|
+ isShowVipFlag(pros) {
|
|
|
+ // 超级会员价格显示控制
|
|
|
+ if (this.hasLogin && pros.priceFlag != 1) {
|
|
|
+ if (this.userIdentity == 4 && this.vipFlag == 1) {
|
|
|
+ return true
|
|
|
+ } else if (this.userIdentity == 2) {
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ swiperChange(e) {
|
|
|
+ //轮播图切换
|
|
|
+ const index = e.detail.current
|
|
|
+ this.current = index
|
|
|
+ },
|
|
|
+ choiceBrand(brand, index) {
|
|
|
+ // 选择品牌
|
|
|
+ brand.isChecked = !brand.isChecked
|
|
|
+ if (brand.isChecked) {
|
|
|
+ if (!this.contains(this.checkedBrandList, brand.id)) {
|
|
|
+ this.checkedBrandList.push(brand.id)
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.checkedBrandList.splice(this.checkedBrandList.indexOf(brand.id), 1)
|
|
|
+ }
|
|
|
+ this.isAllcheckedBrand = false
|
|
|
+ this.checkedBrandLength = this.checkedBrandList.length
|
|
|
+ this.listQuery.brandID = this.checkedBrandList.join(',')
|
|
|
+ console.log('this.listQuery.brandID', this.listQuery.brandID)
|
|
|
+ },
|
|
|
+ choiceBrandAll() {
|
|
|
+ // 点击选择全部品牌
|
|
|
+ this.isAllcheckedBrand = true
|
|
|
+ this.listQuery.brandID = ''
|
|
|
+ this.brandList.forEach(el => {
|
|
|
+ el.isChecked = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ contains(arr, val) {
|
|
|
+ // 校验
|
|
|
+ return arr.some(item => item === val)
|
|
|
+ },
|
|
|
+ showDropShow() {
|
|
|
+ this.dropShow = !this.dropShow
|
|
|
+ },
|
|
|
+ btnCloseDrop() {
|
|
|
+ this.pullUpOn = true
|
|
|
+ this.loadding = false
|
|
|
+ this.dropShow = false
|
|
|
+ this.productList = []
|
|
|
+ this.listQuery.pageNum = 1
|
|
|
+ this.getNewFloorList()
|
|
|
+ },
|
|
|
+ haveBack() {
|
|
|
+ uni.navigateBack({
|
|
|
+ delta: 1
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onPageScroll(e) {
|
|
|
+ //实时获取到滚动的值
|
|
|
+ if (e.scrollTop > 50) {
|
|
|
+ this.fixedClass = 'fixed'
|
|
|
+ } else {
|
|
|
+ this.fixedClass = 'float'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onPullDownRefresh() {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.productList = []
|
|
|
+ this.listQuery.pageNum = 1
|
|
|
+ this.getNewFloorList()
|
|
|
+ uni.stopPullDownRefresh()
|
|
|
+ }, 200)
|
|
|
+ },
|
|
|
+ onReachBottom() {
|
|
|
+ if (this.hasNextPage) {
|
|
|
+ this.loadding = true
|
|
|
+ this.pullUpOn = true
|
|
|
+ this.OnReachBottomData()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ page {
|
|
|
+ background-color: #f7f7f7;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container-home {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container-topcontent {
|
|
|
+ width: 100%;
|
|
|
+ height: 620rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .topcontent-image {
|
|
|
+ width: 100%;
|
|
|
+ height: 480rpx;
|
|
|
+ background: url(https://static.caimei365.com/app/img/hot/hot-bg@2x.png);
|
|
|
+ background-size: cover;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .topcontent-title {
|
|
|
+ width: 100%;
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ font-size: 38rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ font-weight: bold;
|
|
|
+ text-align: center;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &.fixed {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ height: 80rpx;
|
|
|
+ background: linear-gradient(90deg, #FF5B00 0%, #f28f31 100%);
|
|
|
+ z-index: 9999;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .topcontent-title-icon {
|
|
|
+ width: 50rpx;
|
|
|
+ height: 50rpx;
|
|
|
+ line-height: 50rpx;
|
|
|
+ position: absolute;
|
|
|
+ left: 24rpx;
|
|
|
+ top: 14rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ text-align: center;
|
|
|
+ background: rgba(255, 255, 255, 0.6);
|
|
|
+ border: 0.5px solid rgba(0, 0, 0, 0.1);
|
|
|
+ box-sizing: border-box;
|
|
|
+ z-index: 9999;
|
|
|
+
|
|
|
+ .iconfont {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ font-size: 32rpx;
|
|
|
+ display: inline-block;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .topcontent-swiper {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper-goods {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ position: relative;
|
|
|
+ background-size: cover;
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper-banner-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 360rpx;
|
|
|
+ position: relative;
|
|
|
+ background-size: cover;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tui-banner-swiper {
|
|
|
+ width: 680rpx;
|
|
|
+ margin: 0 auto;
|
|
|
+ height: 340rpx;
|
|
|
+ background: url(https://static.caimei365.com/app/img/hot/hot-bg@3x.png);
|
|
|
+ background-size: cover;
|
|
|
+ border-radius: 24rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ transform: translateY(0);
|
|
|
+ box-shadow: 0px 3px 6px rgba(225, 86, 22, 0.08);
|
|
|
+ margin-top: 16rpx;
|
|
|
+ padding: 12rpx;
|
|
|
+
|
|
|
+ .swiper-goods-image {
|
|
|
+ width: 336rpx;
|
|
|
+ height: 336rpx;
|
|
|
+ float: left;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 336rpx;
|
|
|
+ height: 336rpx;
|
|
|
+ display: block;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper-goods-info {
|
|
|
+ width: 326rpx;
|
|
|
+ height: 336rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 32rpx 24rpx;
|
|
|
+ float: right;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .swiper-goods-name {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ line-height: 44rpx;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ word-break: break-all;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 4;
|
|
|
+ overflow: hidden;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333333;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper-goods-btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 64rpx;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 60rpx;
|
|
|
+ left: 0;
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ width: 200rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ margin: 0 auto;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 64rpx;
|
|
|
+ background-color: #f94b4b;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ border-radius: 32rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper__dots-box {
|
|
|
+ position: absolute;
|
|
|
+ bottom: -45rpx;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ /* #ifndef APP-NVUE */
|
|
|
+ display: flex;
|
|
|
+ /* #endif */
|
|
|
+ flex: 1;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .swiper__dots-item {
|
|
|
+ width: 14rpx;
|
|
|
+ height: 8rpx;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ margin-left: 6px;
|
|
|
+ background-color: rgba(225, 86, 22, 0.39);
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper__dots-long {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 8rpx;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ background-color: #FF5B00;
|
|
|
+ transition: all 0.4s;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper-banner-msg {
|
|
|
+ width: 100%;
|
|
|
+ height: 54rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ margin-top: 24rpx;
|
|
|
+
|
|
|
+ .content {
|
|
|
+ width: 100%;
|
|
|
+ height: 54rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 34rpx;
|
|
|
+ background-color: #fff0e9;
|
|
|
+ border-radius: 16rpx;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ width: 33.33%;
|
|
|
+ height: 54rpx;
|
|
|
+ line-height: 54rpx;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: $color-system;
|
|
|
+ float: left;
|
|
|
+
|
|
|
+ &.le {
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.ce {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.ri {
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ .iconfont {
|
|
|
+ color: $color-system;
|
|
|
+ font-size: $font-size-32;
|
|
|
+
|
|
|
+ .sm {
|
|
|
+ font-size: $font-size-26;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .container-screen {
|
|
|
+ width: 100%;
|
|
|
+ height: 138rpx;
|
|
|
+ padding: 24rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-color: #f7f7f7;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .container-screen-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+
|
|
|
+ .screen-box-em {
|
|
|
+ float: left;
|
|
|
+ width: 134rpx;
|
|
|
+ line-height: 90rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #333333;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .screen-box-mi {
|
|
|
+ float: left;
|
|
|
+ width: 468rpx;
|
|
|
+ height: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 21rpx 0;
|
|
|
+
|
|
|
+ .screen-list {
|
|
|
+ width: 140rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ padding: 0 12rpx;
|
|
|
+ float: left;
|
|
|
+ text-align: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ line-height: 48rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #666666;
|
|
|
+ border-radius: 24rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 1;
|
|
|
+ line-clamp: 1;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ word-break: break-all;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ background-color: #ffe6dc;
|
|
|
+ color: #FF5B00;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .screen-box-sp {
|
|
|
+ float: right;
|
|
|
+ width: 100rpx;
|
|
|
+ line-height: 90rpx;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .iconfont {
|
|
|
+ color: #999999;
|
|
|
+ font-size: 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .container-screen-popup {
|
|
|
+ width: 100%;
|
|
|
+ height: 480rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 24rpx;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 86rpx;
|
|
|
+ z-index: 999;
|
|
|
+
|
|
|
+ .container-screen-popupbox {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 0 0 16rpx 16rpx;
|
|
|
+ box-shadow: 0 10rpx 14rpx 0 rgba(86, 119, 252, 0.2);
|
|
|
+ }
|
|
|
+
|
|
|
+ .tui-scroll-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 300rpx;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .screen-list {
|
|
|
+ width: 140rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ padding: 0 12rpx;
|
|
|
+ float: left;
|
|
|
+ text-align: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ line-height: 48rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #666666;
|
|
|
+ border-radius: 24rpx;
|
|
|
+ margin-right: 30rpx;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 1;
|
|
|
+ line-clamp: 1;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ word-break: break-all;
|
|
|
+
|
|
|
+ &:nth-child(4n) {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ background-color: #ffe6dc;
|
|
|
+ color: #FF5B00;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .container-screen-btnbox {
|
|
|
+ width: 100%;
|
|
|
+ height: 84rpx;
|
|
|
+ margin-top: 15rpx;
|
|
|
+
|
|
|
+ .btns {
|
|
|
+ width: 314rpx;
|
|
|
+ height: 84rpx;
|
|
|
+ line-height: 84rpx;
|
|
|
+ border-radius: 42rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ background: $btn-confirm;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .container-section {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ background-color: #f7f7f7;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 24rpx 24rpx 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .floor-item-banner {
|
|
|
+ width: 100%;
|
|
|
+ height: 240rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+
|
|
|
+ .item-img-gg {
|
|
|
+ width: 100%;
|
|
|
+ height: 240rpx;
|
|
|
+ display: block;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .section_page_main {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .floor-item {
|
|
|
+ width: 339rpx;
|
|
|
+ height: 516rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: $text-color;
|
|
|
+ background: #ffffff;
|
|
|
+ line-height: 36rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ float: left;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &:nth-child(2n) {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-img {
|
|
|
+ width: 339rpx;
|
|
|
+ height: 339rpx;
|
|
|
+ border-radius: 16rpx 16rpx 0 0;
|
|
|
+ display: block;
|
|
|
+ margin-bottom: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .floor-item-type {
|
|
|
+ width: 64rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ text-align: justify;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 10rpx;
|
|
|
+ border-radius: 0 0 8rpx 8rpx;
|
|
|
+ background-color: #33ccbf;
|
|
|
+ font-size: $font-size-22;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 25rpx;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 16rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .floor-item-content {
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .floor-item-act {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ height: 32rpx;
|
|
|
+ text-align: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title-none {
|
|
|
+ font-size: $font-size-26;
|
|
|
+ color: #ff2a2a;
|
|
|
+ line-height: 54rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ width: 100%;
|
|
|
+ height: 70rpx;
|
|
|
+ display: flex;
|
|
|
+ line-height: 35rpx;
|
|
|
+ flex-direction: column;
|
|
|
+ margin: 8rpx 0;
|
|
|
+ padding: 0;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .mclap {
|
|
|
+ width: 100%;
|
|
|
+ line-height: 35rpx;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ word-break: break-all;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ overflow: hidden;
|
|
|
+ font-size: 26rpx;
|
|
|
+
|
|
|
+ &.indent {
|
|
|
+ text-indent: 95rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .mclap-tag {
|
|
|
+ display: block;
|
|
|
+ width: 84rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ background-image: linear-gradient(270deg, #f9c023 0%, #f83600 100%);
|
|
|
+ border-radius: 4rpx 48rpx 4px 4px;
|
|
|
+ line-height: 32rpx;
|
|
|
+ font-size: $font-size-22;
|
|
|
+ color: #ffffff;
|
|
|
+ text-align: center;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .floor-item-price {
|
|
|
+ .list-login-now {
|
|
|
+ line-height: 44rpx;
|
|
|
+
|
|
|
+ .p-no {
|
|
|
+ height: 44rpx;
|
|
|
+ line-height: 44rpx;
|
|
|
+ display: inline-block;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .list-price {
|
|
|
+ color: #ff2a2a;
|
|
|
+ height: 44rpx;
|
|
|
+ float: left;
|
|
|
+
|
|
|
+ .price-larger {
|
|
|
+ width: 100%;
|
|
|
+ height: 44rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+
|
|
|
+ &.none {
|
|
|
+ text-decoration: line-through;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.small {
|
|
|
+ font-size: $font-size-24;
|
|
|
+ }
|
|
|
+
|
|
|
+ .txt {
|
|
|
+ font-size: $font-size-24;
|
|
|
+ display: inline-block;
|
|
|
+ line-height: 44rpx;
|
|
|
+ text-align: left;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|