|
@@ -1,23 +1,47 @@
|
|
|
<template>
|
|
|
- <view class="container commodity-list-wrapper" :style="{'overflow':(showSkeleton? 'hidden' : 'auto'),'height': (showSkeleton? windowHeight + 'px' : 'auto')}">
|
|
|
+ <view
|
|
|
+ class="container commodity-list-wrapper"
|
|
|
+ :style="{ overflow: showSkeleton ? 'hidden' : 'auto', height: showSkeleton ? windowHeight + 'px' : 'auto' }"
|
|
|
+ >
|
|
|
<list-skeleton v-if="showSkeleton"></list-skeleton>
|
|
|
- <view class="product-container" v-if="!isShowEmpty" :style="{paddingTop:searchStatus?'112rpx':''}">
|
|
|
- <scroll-view :style="{'height':scrollHeight+'px'}" @scrolltolower="scrolltolower" scroll-y v-if="productList.length > 0">
|
|
|
- <view v-for="(item,index) in productList" :key="index" :id="item.productId" class="all-type-list-content commodity-list" @click.stop="navToDetailPage(item.productId)">
|
|
|
- <image mode='widthFix' :src="item.image" class="list-img" alt="list-img"></image>
|
|
|
+ <view class="product-container" v-if="!isShowEmpty" :style="{ paddingTop: searchStatus ? '112rpx' : '' }">
|
|
|
+ <scroll-view
|
|
|
+ :style="{ height: scrollHeight + 'px' }"
|
|
|
+ @scrolltolower="scrolltolower"
|
|
|
+ scroll-y
|
|
|
+ v-if="productList.length > 0"
|
|
|
+ >
|
|
|
+ <view
|
|
|
+ v-for="(item, index) in productList"
|
|
|
+ :key="index"
|
|
|
+ :id="item.productId"
|
|
|
+ class="all-type-list-content commodity-list"
|
|
|
+ @click.stop="navToDetailPage(item.productId)"
|
|
|
+ >
|
|
|
+ <image mode="widthFix" :src="item.image" class="list-img" alt="list-img"></image>
|
|
|
<view class="list-details-info">
|
|
|
- <text class="list-details-title">{{item.name}}</text>
|
|
|
- <text class="list-details-specs">规格:{{item.unit !=null ? item.unit : ''}}</text>
|
|
|
- <text class="list-details-miniQuantity">起订量:{{item.ladderPriceFlag == 1 ? item.maxBuyNumber : item.minBuyNumber}}</text>
|
|
|
+ <text class="list-details-title">{{ item.name }}</text>
|
|
|
+ <text class="list-details-specs">规格:{{ item.unit != null ? item.unit : '' }}</text>
|
|
|
+ <text class="list-details-miniQuantity"
|
|
|
+ >起订量:{{ item.ladderPriceFlag == 1 ? item.maxBuyNumber : item.minBuyNumber }}</text
|
|
|
+ >
|
|
|
<view class="list-details-price">
|
|
|
<view class="list-shop">
|
|
|
<view class="list-price-none" v-if="item.repurchaseFlag == 1">
|
|
|
- <text class="price-none">¥{{item.originalPrice}}</text>
|
|
|
+ <text class="price-none">¥{{ item.originalPrice }}</text>
|
|
|
<text class="iconfont icon-wenhao" @click.stop="repurchModel"></text>
|
|
|
</view>
|
|
|
<view class="list-price" v-else>
|
|
|
- <text class="price-larger" :class="PromotionsFormat(item.promotions) ? 'none' : ''">
|
|
|
- ¥{{ (PromotionsFormat(item.promotions) ? item.originalPrice : item.price) | NumFormat }}
|
|
|
+ <text
|
|
|
+ class="price-larger"
|
|
|
+ :class="
|
|
|
+ PromotionsFormat(item.promotions) || item.svipProductFlag == 1 ? 'none' : ''
|
|
|
+ "
|
|
|
+ >
|
|
|
+ ¥{{
|
|
|
+ (PromotionsFormat(item.promotions) ? item.originalPrice : item.price)
|
|
|
+ | NumFormat
|
|
|
+ }}
|
|
|
</text>
|
|
|
</view>
|
|
|
</view>
|
|
@@ -26,396 +50,411 @@
|
|
|
<view class="list-details-price">
|
|
|
<view class="floor-item-act">
|
|
|
<view class="coupon-tags" v-if="item.couponsLogo">优惠券</view>
|
|
|
- <template v-if="item.actStatus==1">
|
|
|
+ <template v-if="item.actStatus == 1">
|
|
|
<view class="floor-tags" v-if="PromotionsFormat(item.promotions)">
|
|
|
- {{item.promotions.name}}<text>:¥{{ item.price | NumFormat }}</text>
|
|
|
+ {{ item.promotions.name }}<text>:¥{{ item.price | NumFormat }}</text>
|
|
|
</view>
|
|
|
- <view class="floor-tags" v-else>{{item.promotions.name}}</view>
|
|
|
+ <view class="floor-tags" v-else>{{ item.promotions.name }}</view>
|
|
|
</template>
|
|
|
<template v-if="item.svipProductFlag == 1">
|
|
|
<view class="svip-tags">
|
|
|
- <view class="tags">SVIP</view>
|
|
|
- <!-- <view class="price">{{ item.svipPriceTag }}</view> -->
|
|
|
+ <view class="tags">SVIP</view>
|
|
|
+ <view class="price">{{ item.svipPriceTag }}</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
</view>
|
|
|
- </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view v-if="showLoading && productList.length > 4 && !showRegularBtn">
|
|
|
- <view class="loading-wrapper loading-wrapper-now" v-if="loadingNow">{{loadingText}}<text v-if="loadingText === '已至底部'">‧ ‧ ‧</text></view>
|
|
|
- <view class="loading-wrapper loading-wrapper-btm" v-else>———<text class="btm-text">已至底部</text>———</view>
|
|
|
+ <view class="loading-wrapper loading-wrapper-now" v-if="loadingNow"
|
|
|
+ >{{ loadingText }}<text v-if="loadingText === '已至底部'">‧ ‧ ‧</text></view
|
|
|
+ >
|
|
|
+ <view class="loading-wrapper loading-wrapper-btm" v-else
|
|
|
+ >———<text class="btm-text">已至底部</text>———</view
|
|
|
+ >
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
</view>
|
|
|
<view class="empty-container" v-else>
|
|
|
- <image class="empty-container-image" src="https://img.caimei365.com/group1/M00/03/71/Cmis2F3wna6AWdWzAAGlgAP0das422.png" mode="aspectFit"></image>
|
|
|
+ <image
|
|
|
+ class="empty-container-image"
|
|
|
+ src="https://img.caimei365.com/group1/M00/03/71/Cmis2F3wna6AWdWzAAGlgAP0das422.png"
|
|
|
+ mode="aspectFit"
|
|
|
+ ></image>
|
|
|
<text class="error-text">您还没有购买过任何商品哟~</text>
|
|
|
</view>
|
|
|
<!-- 可拖动悬浮按钮 -->
|
|
|
- <cm-drag :cartNum="cartQuantity"
|
|
|
- :isDock="true"
|
|
|
- :existTabBar="true"
|
|
|
- @btnClick="btnClick"
|
|
|
- @btnTouchstart="btnTouchstart"
|
|
|
- @btnTouchend="btnTouchend">
|
|
|
+ <cm-drag
|
|
|
+ :cartNum="cartQuantity"
|
|
|
+ :isDock="true"
|
|
|
+ :existTabBar="true"
|
|
|
+ @btnClick="btnClick"
|
|
|
+ @btnTouchstart="btnTouchstart"
|
|
|
+ @btnTouchend="btnTouchend"
|
|
|
+ >
|
|
|
</cm-drag>
|
|
|
<!-- 透明模态层 -->
|
|
|
- <modal-layer v-if='isModallayer'></modal-layer>
|
|
|
+ <modal-layer v-if="isModallayer"></modal-layer>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import listSkeleton from '@/components/cm-module/listTemplate/listSkeleton'
|
|
|
- import modalLayer from '@/components/modal-layer'
|
|
|
- import uniStars from '@/components/uni-stars/uni-stars.vue'
|
|
|
- import cmDrag from '@/components/cm-custom/cm-drag.vue'
|
|
|
- import { mapState,mapMutations } from 'vuex'
|
|
|
- export default{
|
|
|
- name:'productList',
|
|
|
- components:{
|
|
|
- listSkeleton,
|
|
|
- modalLayer,
|
|
|
- uniStars,
|
|
|
- cmDrag
|
|
|
- },
|
|
|
- data(){
|
|
|
- return{
|
|
|
- isShowClose:false,
|
|
|
- searchInputVal:'',
|
|
|
- isModallayer:false,
|
|
|
- windowHeight: '',
|
|
|
- showSkeleton: true,
|
|
|
- isShowEmpty: false,
|
|
|
- userId: '',
|
|
|
- scrollHeight: '',
|
|
|
- productList: [],
|
|
|
- showLoading: false,
|
|
|
- loadingNow: true,
|
|
|
- loadingText: '上拉加载更多',
|
|
|
- pageSize: 10,
|
|
|
- pageNum: 1,
|
|
|
- hasNextPage: false,
|
|
|
- pullFlag: true,
|
|
|
- fromRegularPurchasePage: false,
|
|
|
- cartQuantity: 0,
|
|
|
- showRegularBtn: false,
|
|
|
- isPrecedence:false,
|
|
|
- windowWidth:'',
|
|
|
- windowHeight:'',
|
|
|
+import listSkeleton from '@/components/cm-module/listTemplate/listSkeleton'
|
|
|
+import modalLayer from '@/components/modal-layer'
|
|
|
+import uniStars from '@/components/uni-stars/uni-stars.vue'
|
|
|
+import cmDrag from '@/components/cm-custom/cm-drag.vue'
|
|
|
+import { mapState, mapMutations } from 'vuex'
|
|
|
+export default {
|
|
|
+ name: 'productList',
|
|
|
+ components: {
|
|
|
+ listSkeleton,
|
|
|
+ modalLayer,
|
|
|
+ uniStars,
|
|
|
+ cmDrag
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isShowClose: false,
|
|
|
+ searchInputVal: '',
|
|
|
+ isModallayer: false,
|
|
|
+ windowHeight: '',
|
|
|
+ showSkeleton: true,
|
|
|
+ isShowEmpty: false,
|
|
|
+ userId: '',
|
|
|
+ scrollHeight: '',
|
|
|
+ productList: [],
|
|
|
+ showLoading: false,
|
|
|
+ loadingNow: true,
|
|
|
+ loadingText: '上拉加载更多',
|
|
|
+ pageSize: 10,
|
|
|
+ pageNum: 1,
|
|
|
+ hasNextPage: false,
|
|
|
+ pullFlag: true,
|
|
|
+ fromRegularPurchasePage: false,
|
|
|
+ cartQuantity: 0,
|
|
|
+ showRegularBtn: false,
|
|
|
+ isPrecedence: false,
|
|
|
+ windowWidth: '',
|
|
|
+ windowHeight: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.setScrollHeight()
|
|
|
+ this.$parent.getClubProductNum()
|
|
|
+ this.$api.getComStorage('orderUserInfo').then(resolve => {
|
|
|
+ this.userId = resolve.userID
|
|
|
+ this.getProductAgainInfo(false)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+ NumFormat: function(text) {
|
|
|
+ //处理金额
|
|
|
+ return Number(text).toFixed(2)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['hasLogin', 'userInfo'])
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ scrolltolower() {
|
|
|
+ if (this.hasNextPage && this.pullFlag) {
|
|
|
+ this.getProductAgainInfo(true)
|
|
|
}
|
|
|
},
|
|
|
- created() {
|
|
|
- this.setScrollHeight()
|
|
|
- this.$parent.getClubProductNum()
|
|
|
- this.$api.getComStorage('orderUserInfo').then((resolve) =>{
|
|
|
- this.userId = resolve.userID
|
|
|
- this.getProductAgainInfo(false)
|
|
|
- })
|
|
|
+ setScrollHeight() {
|
|
|
+ const { windowHeight, pixelRatio } = wx.getSystemInfoSync()
|
|
|
+ this.windowHeight = windowHeight - 1
|
|
|
+ this.scrollHeight = windowHeight - 1
|
|
|
},
|
|
|
- filters: {
|
|
|
- NumFormat:function(text) {//处理金额
|
|
|
- return Number(text).toFixed(2)
|
|
|
- },
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapState(['hasLogin','userInfo'])
|
|
|
- },
|
|
|
- methods:{
|
|
|
- scrolltolower() {
|
|
|
- if(this.hasNextPage && this.pullFlag) {
|
|
|
- this.getProductAgainInfo(true)
|
|
|
- }
|
|
|
- },
|
|
|
- setScrollHeight() {
|
|
|
- const {windowHeight, pixelRatio} = wx.getSystemInfoSync()
|
|
|
- this.windowHeight = windowHeight - 1
|
|
|
- this.scrollHeight = windowHeight - 1
|
|
|
- },
|
|
|
- getProductAgainInfo(loadMore) {
|
|
|
- this.showLoading = true
|
|
|
- this.loadingNow = true
|
|
|
- this.loadingText = '加载中'
|
|
|
- this.isShowEmpty = false
|
|
|
- if(loadMore) {this.pageNum += 1}
|
|
|
- this.ProductService.GetRepeatBuyAgainProductList(
|
|
|
- {
|
|
|
- userId:this.userId,
|
|
|
- pageNum:this.pageNum,
|
|
|
- pageSize:this.pageSize,
|
|
|
- }
|
|
|
- )
|
|
|
- .then(response =>{
|
|
|
+ getProductAgainInfo(loadMore) {
|
|
|
+ this.showLoading = true
|
|
|
+ this.loadingNow = true
|
|
|
+ this.loadingText = '加载中'
|
|
|
+ this.isShowEmpty = false
|
|
|
+ if (loadMore) {
|
|
|
+ this.pageNum += 1
|
|
|
+ }
|
|
|
+ this.ProductService.GetRepeatBuyAgainProductList({
|
|
|
+ userId: this.userId,
|
|
|
+ pageNum: this.pageNum,
|
|
|
+ pageSize: this.pageSize
|
|
|
+ })
|
|
|
+ .then(response => {
|
|
|
this.isShowWrapper = true
|
|
|
this.showSkeleton = false
|
|
|
const listData = response.data.results
|
|
|
- if(listData && listData.length > 0){
|
|
|
+ if (listData && listData.length > 0) {
|
|
|
this.hasNextPage = response.data.hasNextPage
|
|
|
this.isShowEmpty = false
|
|
|
- if(loadMore) {
|
|
|
- this.productList = [...this.productList,...listData]
|
|
|
+ if (loadMore) {
|
|
|
+ this.productList = [...this.productList, ...listData]
|
|
|
} else {
|
|
|
this.productList = listData
|
|
|
console.log(this.productList)
|
|
|
}
|
|
|
//价格显示处理
|
|
|
- let isActFlg,newProductList=[]
|
|
|
- this.productList.map((item, index)=> {
|
|
|
+ let isActFlg,
|
|
|
+ newProductList = []
|
|
|
+ this.productList.map((item, index) => {
|
|
|
console.log(item)
|
|
|
- if(item.actStatus == 1){
|
|
|
+ if (item.actStatus == 1) {
|
|
|
isActFlg = true
|
|
|
- }else if(item.actStatus == 1 && item.ladderPriceFlag == 1){
|
|
|
+ } else if (item.actStatus == 1 && item.ladderPriceFlag == 1) {
|
|
|
isActFlg = true
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
isActFlg = false
|
|
|
}
|
|
|
- newProductList.push(Object.assign({},item,{isShowActFlg:isActFlg}))
|
|
|
+ newProductList.push(Object.assign({}, item, { isShowActFlg: isActFlg }))
|
|
|
})
|
|
|
this.productList = newProductList
|
|
|
console.log(this.productList)
|
|
|
// 防上拉暴滑
|
|
|
this.pullFlag = false
|
|
|
- setTimeout(()=>{
|
|
|
+ setTimeout(() => {
|
|
|
this.pullFlag = true
|
|
|
- },500)
|
|
|
+ }, 500)
|
|
|
// 底部提示文案
|
|
|
- if(this.hasNextPage) {
|
|
|
+ if (this.hasNextPage) {
|
|
|
this.loadingText = '上拉加载更多'
|
|
|
} else {
|
|
|
this.showLoading = true
|
|
|
this.loadingNow = false
|
|
|
}
|
|
|
} else {
|
|
|
- if(!loadMore) {
|
|
|
+ if (!loadMore) {
|
|
|
this.isShowEmpty = true
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
- .catch(error =>{
|
|
|
- this.$util.msg(error.msg,2000)
|
|
|
+ .catch(error => {
|
|
|
+ this.$util.msg(error.msg, 2000)
|
|
|
})
|
|
|
- },
|
|
|
- operationHanld(prop){
|
|
|
- this.$emit('operationConfim',prop)
|
|
|
- },
|
|
|
- navToDetailPage(id) {
|
|
|
- this.isModallayer = true
|
|
|
- this.$api.navigateTo(`/pages/goods/product?id=${id}`)
|
|
|
- this.isModallayer = false
|
|
|
- },
|
|
|
- repurchModel(){
|
|
|
- this.$util.modal('','此商品的价格有变化,原来的购买价已不适用','知道了','',false,() =>{})
|
|
|
- },
|
|
|
- PromotionsFormat(promo){//促销活动类型数据处理
|
|
|
- if(promo!=null){
|
|
|
- if(promo.type == 1 && promo.mode == 1){
|
|
|
- return true
|
|
|
- }else{
|
|
|
- return false
|
|
|
- }
|
|
|
- }
|
|
|
- return false
|
|
|
- },
|
|
|
- onShowClose () {//输入框失去焦点时触发
|
|
|
- if(this.searchInputVal != ''){
|
|
|
- this.isShowClose = true
|
|
|
- }else{
|
|
|
- this.isShowClose = false
|
|
|
+ },
|
|
|
+ operationHanld(prop) {
|
|
|
+ this.$emit('operationConfim', prop)
|
|
|
+ },
|
|
|
+ navToDetailPage(id) {
|
|
|
+ this.isModallayer = true
|
|
|
+ this.$api.navigateTo(`/pages/goods/product?id=${id}`)
|
|
|
+ this.isModallayer = false
|
|
|
+ },
|
|
|
+ repurchModel() {
|
|
|
+ this.$util.modal('', '此商品的价格有变化,原来的购买价已不适用', '知道了', '', false, () => {})
|
|
|
+ },
|
|
|
+ PromotionsFormat(promo) {
|
|
|
+ //促销活动类型数据处理
|
|
|
+ if (promo != null) {
|
|
|
+ if (promo.type == 1 && promo.mode == 1) {
|
|
|
+ return true
|
|
|
+ } else {
|
|
|
+ return false
|
|
|
}
|
|
|
- },
|
|
|
- delInputText(){//清除输入框内容
|
|
|
- this.searchInputVal = ''
|
|
|
+ }
|
|
|
+ return false
|
|
|
+ },
|
|
|
+ onShowClose() {
|
|
|
+ //输入框失去焦点时触发
|
|
|
+ if (this.searchInputVal != '') {
|
|
|
+ this.isShowClose = true
|
|
|
+ } else {
|
|
|
this.isShowClose = false
|
|
|
- },
|
|
|
- btnClick() {
|
|
|
- this.$emit('goCartPage')
|
|
|
- },
|
|
|
- btnTouchstart() {
|
|
|
- // console.log('btnTouchstart');
|
|
|
- },
|
|
|
- btnTouchend() {
|
|
|
- // console.log('btnTouchend');
|
|
|
}
|
|
|
+ },
|
|
|
+ delInputText() {
|
|
|
+ //清除输入框内容
|
|
|
+ this.searchInputVal = ''
|
|
|
+ this.isShowClose = false
|
|
|
+ },
|
|
|
+ btnClick() {
|
|
|
+ this.$emit('goCartPage')
|
|
|
+ },
|
|
|
+ btnTouchstart() {
|
|
|
+ // console.log('btnTouchstart');
|
|
|
+ },
|
|
|
+ btnTouchend() {
|
|
|
+ // console.log('btnTouchend');
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
- .commodity-list-wrapper {
|
|
|
- scroll-view {
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- .empty-container-image {
|
|
|
- margin-top: -300rpx;
|
|
|
- }
|
|
|
- .toIndexPage {
|
|
|
- bottom: 390rpx;
|
|
|
- }
|
|
|
- .show-more-btn {
|
|
|
- width: 276rpx;
|
|
|
- height: 52rpx;
|
|
|
- line-height: 52rpx;
|
|
|
- border: 2rpx solid #D8D8D8;
|
|
|
- background: #F7F7F7;
|
|
|
- font-size: 26rpx;
|
|
|
- margin: 26rpx 0;
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- margin-left: -138rpx;
|
|
|
- }
|
|
|
+.commodity-list-wrapper {
|
|
|
+ scroll-view {
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
- .all-type-list-content {
|
|
|
- height: auto;
|
|
|
- padding: 24rpx;
|
|
|
- background: #fff;
|
|
|
- margin-bottom: 2rpx;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- box-sizing: content-box;
|
|
|
- .list-img {
|
|
|
- width: 240rpx;
|
|
|
- height: 240rpx !important;
|
|
|
- margin-right: 26rpx;
|
|
|
- border-radius: 10rpx;
|
|
|
- border: 2rpx solid #f3f3f3;
|
|
|
- }
|
|
|
+ .empty-container-image {
|
|
|
+ margin-top: -300rpx;
|
|
|
}
|
|
|
- .list-details-info {
|
|
|
- width: 442rpx;
|
|
|
- flex-direction: column;
|
|
|
+ .toIndexPage {
|
|
|
+ bottom: 390rpx;
|
|
|
+ }
|
|
|
+ .show-more-btn {
|
|
|
+ width: 276rpx;
|
|
|
+ height: 52rpx;
|
|
|
+ line-height: 52rpx;
|
|
|
+ border: 2rpx solid #d8d8d8;
|
|
|
+ background: #f7f7f7;
|
|
|
font-size: 26rpx;
|
|
|
- position: relative;
|
|
|
- .list-details-title {
|
|
|
- line-height: 38rpx;
|
|
|
- text-overflow: ellipsis;
|
|
|
- overflow: hidden;
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-line-clamp: 2;
|
|
|
- line-clamp: 2;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- }
|
|
|
- .list-details-specs {
|
|
|
- width: 100%;
|
|
|
- display: inline-block;
|
|
|
- margin-top: 8rpx;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
- .list-details-miniQuantity {
|
|
|
- width: 100%;
|
|
|
- display: inline-block;
|
|
|
- margin-top: 7rpx;
|
|
|
- }
|
|
|
+ margin: 26rpx 0;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -138rpx;
|
|
|
}
|
|
|
- .list-details-price {
|
|
|
+}
|
|
|
+.all-type-list-content {
|
|
|
+ height: auto;
|
|
|
+ padding: 24rpx;
|
|
|
+ background: #fff;
|
|
|
+ margin-bottom: 2rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ box-sizing: content-box;
|
|
|
+ .list-img {
|
|
|
+ width: 240rpx;
|
|
|
+ height: 240rpx !important;
|
|
|
+ margin-right: 26rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ border: 2rpx solid #f3f3f3;
|
|
|
+ }
|
|
|
+}
|
|
|
+.list-details-info {
|
|
|
+ width: 442rpx;
|
|
|
+ flex-direction: column;
|
|
|
+ font-size: 26rpx;
|
|
|
+ position: relative;
|
|
|
+ .list-details-title {
|
|
|
+ line-height: 38rpx;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ line-clamp: 2;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ }
|
|
|
+ .list-details-specs {
|
|
|
width: 100%;
|
|
|
+ display: inline-block;
|
|
|
+ margin-top: 8rpx;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ .list-details-miniQuantity {
|
|
|
+ width: 100%;
|
|
|
+ display: inline-block;
|
|
|
+ margin-top: 7rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+.list-details-price {
|
|
|
+ width: 100%;
|
|
|
+ float: left;
|
|
|
+ line-height: 54rpx;
|
|
|
+ .floor-item-act {
|
|
|
+ height: 54rpx;
|
|
|
+ text-align: center;
|
|
|
+ box-sizing: border-box;
|
|
|
float: left;
|
|
|
- line-height: 54rpx;
|
|
|
- .floor-item-act{
|
|
|
- height: 54rpx;
|
|
|
- text-align: center;
|
|
|
- box-sizing: border-box;
|
|
|
+ padding: 11rpx 0;
|
|
|
+ }
|
|
|
+ .price-icon {
|
|
|
+ width: 22rpx;
|
|
|
+ height: 28rpx;
|
|
|
+ vertical-align: middle;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ }
|
|
|
+ .price-icon + text {
|
|
|
+ font-size: 25rpx;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ .list-login-now {
|
|
|
+ width: 375rpx;
|
|
|
+ color: #f8c499;
|
|
|
+ .p-no {
|
|
|
float: left;
|
|
|
- padding: 11rpx 0;
|
|
|
- }
|
|
|
- .price-icon {
|
|
|
- width: 22rpx;
|
|
|
- height: 28rpx;
|
|
|
- vertical-align: middle;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: $color-system;
|
|
|
margin-right: 10rpx;
|
|
|
}
|
|
|
- .price-icon + text {
|
|
|
- font-size: 25rpx;
|
|
|
- vertical-align: middle;
|
|
|
- }
|
|
|
- .list-login-now {
|
|
|
- width: 375rpx;
|
|
|
- color: #F8C499;
|
|
|
- .p-no{
|
|
|
- float: left;
|
|
|
- font-size: $font-size-24;
|
|
|
- color: $color-system;
|
|
|
- margin-right: 10rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .login-now {
|
|
|
- padding: 10rpx 10rpx 10rpx 0;
|
|
|
- }
|
|
|
- .list-none{
|
|
|
- margin-top: 15rpx;
|
|
|
- .price-small{
|
|
|
- font-size:$font-size-24;
|
|
|
- line-height: 40rpx;
|
|
|
- color: #FF2A2A;
|
|
|
- }
|
|
|
+ }
|
|
|
+ .login-now {
|
|
|
+ padding: 10rpx 10rpx 10rpx 0;
|
|
|
+ }
|
|
|
+ .list-none {
|
|
|
+ margin-top: 15rpx;
|
|
|
+ .price-small {
|
|
|
+ font-size: $font-size-24;
|
|
|
+ line-height: 40rpx;
|
|
|
+ color: #ff2a2a;
|
|
|
}
|
|
|
- .list-shop{
|
|
|
- height: auto;
|
|
|
+ }
|
|
|
+ .list-shop {
|
|
|
+ height: auto;
|
|
|
+ float: left;
|
|
|
+ .list-price {
|
|
|
+ width: 100%;
|
|
|
+ color: #ff2a2a;
|
|
|
float: left;
|
|
|
- .list-price {
|
|
|
- width: 100%;
|
|
|
- color: #FF2A2A;
|
|
|
- float: left;
|
|
|
- line-height:54rpx ;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- .price-larger {
|
|
|
- font-size: $font-size-30;
|
|
|
- display: inline-block;
|
|
|
- &.none{
|
|
|
- text-decoration: line-through;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .list-price-none{
|
|
|
- width: 100%;
|
|
|
- .price-none{
|
|
|
+ line-height: 54rpx;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ .price-larger {
|
|
|
+ font-size: $font-size-30;
|
|
|
+ display: inline-block;
|
|
|
+ &.none {
|
|
|
text-decoration: line-through;
|
|
|
color: #999999;
|
|
|
- display: inline-block;
|
|
|
- }
|
|
|
- .icon-wenhao{
|
|
|
- font-size: $font-size-32;
|
|
|
- color: #0091FF;
|
|
|
- margin-left: 6rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .add-cart-btn {
|
|
|
- float: right;
|
|
|
- width: 140rpx;
|
|
|
- height: 54rpx;
|
|
|
- line-height: 54rpx;
|
|
|
- border-radius: 27rpx;
|
|
|
- color: #fff;
|
|
|
- font-size: 24rpx;
|
|
|
- margin-right: 0;
|
|
|
- background:#FFFFFF;
|
|
|
- border: 1px solid #C9C9C9;
|
|
|
- color: $text-color;
|
|
|
+ .list-price-none {
|
|
|
+ width: 100%;
|
|
|
+ .price-none {
|
|
|
+ text-decoration: line-through;
|
|
|
+ color: #999999;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ .icon-wenhao {
|
|
|
+ font-size: $font-size-32;
|
|
|
+ color: #0091ff;
|
|
|
+ margin-left: 6rpx;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- .cart-icon {
|
|
|
- width: 92rpx;
|
|
|
- height: 92rpx;
|
|
|
- border-radius: 50%;
|
|
|
- background: rgba(255, 147, 0, 0.5);
|
|
|
- position: fixed;
|
|
|
- right: 24rpx;
|
|
|
- bottom: 28%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- cursor: pointer;
|
|
|
- image {
|
|
|
- width: 58rpx;
|
|
|
- height: 58rpx;
|
|
|
- }
|
|
|
- text {
|
|
|
- font-size: 28rpx;
|
|
|
- position: absolute;
|
|
|
- top: -10rpx;
|
|
|
- right: 0;
|
|
|
- }
|
|
|
+ .add-cart-btn {
|
|
|
+ float: right;
|
|
|
+ width: 140rpx;
|
|
|
+ height: 54rpx;
|
|
|
+ line-height: 54rpx;
|
|
|
+ border-radius: 27rpx;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 24rpx;
|
|
|
+ margin-right: 0;
|
|
|
+ background: #ffffff;
|
|
|
+ border: 1px solid #c9c9c9;
|
|
|
+ color: $text-color;
|
|
|
+ }
|
|
|
+}
|
|
|
+.cart-icon {
|
|
|
+ width: 92rpx;
|
|
|
+ height: 92rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: rgba(255, 147, 0, 0.5);
|
|
|
+ position: fixed;
|
|
|
+ right: 24rpx;
|
|
|
+ bottom: 28%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ cursor: pointer;
|
|
|
+ image {
|
|
|
+ width: 58rpx;
|
|
|
+ height: 58rpx;
|
|
|
+ }
|
|
|
+ text {
|
|
|
+ font-size: 28rpx;
|
|
|
+ position: absolute;
|
|
|
+ top: -10rpx;
|
|
|
+ right: 0;
|
|
|
}
|
|
|
+}
|
|
|
</style>
|