|
|
@@ -1,828 +0,0 @@
|
|
|
-<template>
|
|
|
- <view class="container commodity-list-wrapper" :style="{'overflow':(showSkeleton? 'hidden' : 'auto'),'height': (showSkeleton? windowHeight + 'px' : 'auto')}">
|
|
|
- <view class="good-search clearfix" v-if="searchStatus">
|
|
|
- <view class="good-search-top">
|
|
|
- <view class="search-from name">
|
|
|
- <text class="iconfont icon-iconfonticonfontsousuo1"></text>
|
|
|
- <input class="input"
|
|
|
- type="text"
|
|
|
- :focus="isFocus"
|
|
|
- confirm-type="search"
|
|
|
- v-model="searchKeyword"
|
|
|
- placeholder="请输入商品关键词"
|
|
|
- @input="onShowClose"
|
|
|
- @confirm="searchOpertor"
|
|
|
- maxlength="20"/>
|
|
|
- <text class="iconfont icon-shanchu1" v-if="isShowClose" @click="delInputText"></text>
|
|
|
- </view>
|
|
|
- <view class="search-btn">
|
|
|
- <button class="search-btn" type="default" @click.stop="searchOpertor">搜索</button>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="good-search-tabs">
|
|
|
- <view class="good-search-tabs-t">
|
|
|
- <view class="tabs-item"
|
|
|
- :class="{ active: tabIndex === 1 }"
|
|
|
- @click="changeTabsFirst(1)">{{tabIndexSelectText}}
|
|
|
- <text class="iconfont icon-xiangxia1" :class="isTabIndexSelect ? 'reto': '' "></text>
|
|
|
- </view>
|
|
|
- <view class="tabs-item" :class="{ active: tabIndex === 2 }" @click="changeTabs(2)">临期产品</view>
|
|
|
- <view class="tabs-item" :class="{ active: tabIndex === 3 }" @click="changeTabs(3)">其他</view>
|
|
|
- </view>
|
|
|
- <view class="tabs-item-first clearfix" v-if="isTabIndexSelect">
|
|
|
- <view class="tabs-item"
|
|
|
- v-for="(item,index) in screenTabs"
|
|
|
- :key="index"
|
|
|
- :class="{ active: screenTab === index }"
|
|
|
- @click="changeScreenTabs(item,index)"
|
|
|
- >
|
|
|
- {{item}}
|
|
|
- <text class="iconfont icon-gou" v-if="screenTab === index"></text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 顶部tab遮罩层 -->
|
|
|
- <view class="popup-tabs" v-if="isTabIndexSelect" @touchmove.stop.prevent="discard" @tap="hideTabIndexSelect">
|
|
|
- <view class="mask"></view>
|
|
|
- </view>
|
|
|
- <list-skeleton v-if="showSkeleton"></list-skeleton>
|
|
|
- <view class="empty-container" v-if="isShowEmpty" >
|
|
|
- <image class="empty-container-image" src="https://img.caimei365.com/group1/M00/03/71/Cmis2F3wna6AY2ZjAABpmnBICH4247.png"></image>
|
|
|
- <text class="error-text">{{isShowEmptyText}}</text>
|
|
|
- </view>
|
|
|
- <!-- 二手商品 -->
|
|
|
- <view class="product-container" v-else >
|
|
|
- <view :class="tabIndex" :style="{paddingTop:searchStatus?'160rpx':''}">
|
|
|
- <scroll-view :style="{'height':scrollHeight+'px'}" @scrolltolower="scrolltolower" scroll-y v-if="listData.length > 0">
|
|
|
- <view v-for="(item,index) in listData" :key="index" :id="item.id" :productid="item.productID" class="all-type-list-content commodity-list" @click.stop="navToDetailPage(item.productID)" >
|
|
|
- <image mode='widthFix' :src="item.mainImage" class="list-img" alt="list-img"></image>
|
|
|
- <view class="list-details-info">
|
|
|
- <view class="list-details-title">
|
|
|
- <view class="tabs" v-if="item.newAdded == 1">
|
|
|
- <image mode='widthFix' src="../../../static/temp/icon-new@2x.png" class="list-tags"></image>
|
|
|
- </view>
|
|
|
- <view class="name" :style="{paddingLeft:item.newAdded == 1 ? '38rpx' :'0rpx'}">{{isInterceptHtmlFn(item.name)}}</text></view>
|
|
|
- </view>
|
|
|
- <view class="list-details-price">
|
|
|
- <view class="list-shop">
|
|
|
- <view class="list-price">
|
|
|
- <text class="price-larger">￥{{toFixedFn(item.price1)}}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <button class="add-cart-btn" @click.stop="operationHanld(item)">数量</button>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view v-if="showLoading && listData.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>
|
|
|
- </scroll-view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 可拖动悬浮按钮,点击跳转购物车 ,暂时隐藏 ,后面需要的话放开即可 -->
|
|
|
-<!-- <cm-drag :cartNum="cartQuantity"
|
|
|
- :isDock="true"
|
|
|
- :existTabBar="true"
|
|
|
- @btnClick="btnClick"
|
|
|
- @btnTouchstart="btnTouchstart"
|
|
|
- @btnTouchend="btnTouchend">
|
|
|
- </cm-drag> -->
|
|
|
- <!-- 透明模态层 -->
|
|
|
- <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
|
|
|
- },
|
|
|
- props: {
|
|
|
- searchStatus:{
|
|
|
- type:Boolean,
|
|
|
- default:false
|
|
|
- }
|
|
|
- },
|
|
|
- data(){
|
|
|
- return{
|
|
|
- isShowClose:false,
|
|
|
- isModallayer:false,
|
|
|
- windowHeight: '',
|
|
|
- showSkeleton: false,
|
|
|
- isShowEmpty: false,
|
|
|
- isShowEmptyText: '搜索相关商品',
|
|
|
- clubUserId: '',
|
|
|
- searchKeyword:'',//搜索关键字
|
|
|
- secondHandType:1,//二手商品分类
|
|
|
- instrumentType:'',//二手仪器分类
|
|
|
- isFocus:false,
|
|
|
- scrollHeight: '',
|
|
|
- listData: [],
|
|
|
- showLoading: false,
|
|
|
- loadingNow: true,
|
|
|
- loadingText: '上拉加载更多',
|
|
|
- pageSize: 10,
|
|
|
- pageNum: 1,
|
|
|
- totalPage:1,
|
|
|
- hasNextPage: false,
|
|
|
- pullFlag: true,
|
|
|
- cartQuantity: 0,
|
|
|
- showRegularBtn: false,
|
|
|
- isPrecedence:false,
|
|
|
- ladderPriceList:[],//是否 阶梯,
|
|
|
- goodsList:[],
|
|
|
- isShow: false,
|
|
|
- screenTabs:['二手仪器','轻光电','重光电','耗材配件'],
|
|
|
- tabIndex:1,
|
|
|
- screenTab:0,
|
|
|
- isTabIndexSelect:false,
|
|
|
- tabIndexSelectText:'二手仪器'
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.setScrollHeight();
|
|
|
- this.$api.getComStorage('userInfo').then((resolve) =>{
|
|
|
- if(resolve.userIdentity == 1){
|
|
|
- this.identity = 1
|
|
|
- }
|
|
|
- }).catch(error =>{
|
|
|
- console.log(error)
|
|
|
- })
|
|
|
- this.$api.getComStorage('orderUserInfo').then((resolve) =>{
|
|
|
- this.clubUserId = resolve.userID
|
|
|
- })
|
|
|
- this.getProductAgainInfo()
|
|
|
- this.isFocus = true
|
|
|
- },
|
|
|
- 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;}
|
|
|
- let params = {
|
|
|
- secondHandType:this.secondHandType,
|
|
|
- instrumentType:this.instrumentType,
|
|
|
- searchKeyword:this.searchKeyword,
|
|
|
- pageNum:this.pageNum,
|
|
|
- pageSize:this.pageSize
|
|
|
- }
|
|
|
- this.SellerService.GetOrderSecondHandProductList(params).then(response =>{
|
|
|
- this.isShowWrapper = true
|
|
|
- const resData = response.data
|
|
|
- const results = resData.results
|
|
|
- if(results && results.length > 0){
|
|
|
- this.hasNextPage = resData.hasNextPage;
|
|
|
- this.showEmpty = false;
|
|
|
- if(loadMore) {
|
|
|
- this.listData = [...this.listData,...results];
|
|
|
- } else {
|
|
|
- this.listData = [...results];
|
|
|
- this.showSkeleton = false;
|
|
|
- }
|
|
|
- // 防上拉暴滑
|
|
|
- this.pullFlag = false;
|
|
|
- setTimeout(()=>{ this.pullFlag = true; },500)
|
|
|
- // 底部提示文案
|
|
|
- if(this.hasNextPage) {
|
|
|
- this.loadingText = '上拉加载更多';
|
|
|
- } else {
|
|
|
- this.showLoading = true;
|
|
|
- this.loadingNow = false;
|
|
|
- }
|
|
|
- } else {
|
|
|
- if(!loadMore) {
|
|
|
- this.isShowEmpty = true;
|
|
|
- this.isShowEmptyText ='暂无相关商品'
|
|
|
- }
|
|
|
- }
|
|
|
- }).catch(error =>{
|
|
|
- this.$util.msg(error.msg,2000);
|
|
|
- })
|
|
|
- },
|
|
|
- searchOpertor(){//搜索商品
|
|
|
- if(this.searchKeyword == ''){
|
|
|
- // this.$util.msg('请输入商品关键词',2000)
|
|
|
- this.secondHandType = 1
|
|
|
- this.instrumentType=''
|
|
|
- this.getProductAgainInfo();
|
|
|
- }else{
|
|
|
- this.pageNum = 1
|
|
|
- this.showSkeleton = true;
|
|
|
- this.getProductAgainInfo();
|
|
|
- this.isFocus = false
|
|
|
- }
|
|
|
- },
|
|
|
- operationHanld(prop){
|
|
|
- this.$emit('operationConfim',prop);
|
|
|
- },
|
|
|
- navToDetailPage(id) {
|
|
|
- this.isModallayer = true;
|
|
|
- this.$api.navigateTo(`/second/pages/product/product-details?id=${id}`);
|
|
|
- this.isModallayer = false;
|
|
|
- },
|
|
|
- onShowClose () {//输入框失去焦点时触发
|
|
|
- if(this.searchKeyword != ''){
|
|
|
- this.isShowClose = true
|
|
|
- }else{
|
|
|
- this.isShowClose = false
|
|
|
- }
|
|
|
- },
|
|
|
- delInputText(){//清除输入框内容
|
|
|
- this.searchKeyword = '';
|
|
|
- this.listData =[];
|
|
|
- this.isFocus = true
|
|
|
- this.isShowClose = false;
|
|
|
- this.loadingNow = false;
|
|
|
- this.isShowEmpty = true;
|
|
|
- this.isShowEmptyText ='暂无相关商品'
|
|
|
- this.secondHandType = 1;
|
|
|
- this.instrumentType='';
|
|
|
- this.getProductAgainInfo();
|
|
|
- },
|
|
|
- isInterceptHtmlFn(text){
|
|
|
- let name = this.$reg.interceptHtmlFn(text)
|
|
|
- return name
|
|
|
- },
|
|
|
- changeTabs(index){
|
|
|
- this.tabIndex = index
|
|
|
- this.secondHandType = index
|
|
|
- this.isTabIndexSelect = false
|
|
|
- if(this.tabIndex == 2 || this.tabIndex ==3){
|
|
|
- this.instrumentType = ''
|
|
|
- this.getProductAgainInfo()
|
|
|
- }
|
|
|
- },
|
|
|
- changeTabsFirst(index){
|
|
|
- this.tabIndex = index
|
|
|
- this.secondHandType = index
|
|
|
- this.isTabIndexSelect = !this.isTabIndexSelect
|
|
|
- },
|
|
|
- changeScreenTabs(item,index){
|
|
|
- this.screenTab = index
|
|
|
- this.isTabIndexSelect = false
|
|
|
- this.tabIndexSelectText = item
|
|
|
- this.instrumentType = index
|
|
|
- if(index==0){
|
|
|
- this.instrumentType=''
|
|
|
- }
|
|
|
- this.getProductAgainInfo();
|
|
|
- },
|
|
|
- toFixedFn(text){//处理小数点后两位数
|
|
|
- return Number(text).toFixed(2);
|
|
|
- },
|
|
|
- hideTabIndexSelect(){
|
|
|
- this.isTabIndexSelect = false
|
|
|
- },
|
|
|
- discard(){
|
|
|
- //丢弃
|
|
|
- },
|
|
|
- btnClick() {
|
|
|
- this.$emit('goCartPage')
|
|
|
- },
|
|
|
- btnTouchstart() {
|
|
|
- // console.log('btnTouchstart');
|
|
|
- },
|
|
|
- btnTouchend() {
|
|
|
- // console.log('btnTouchend');
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss">
|
|
|
-
|
|
|
- .all-zuhe-list{
|
|
|
- background: #FFFFFF;
|
|
|
- }
|
|
|
- .foot_conten{
|
|
|
- width: 655rpx;
|
|
|
- background: #fff;
|
|
|
- font-size: 28rpx;
|
|
|
- height: 80rpx;
|
|
|
- // line-height: 80rpx;
|
|
|
- display: inherit;
|
|
|
- padding: 10px;
|
|
|
- overflow: hidden;
|
|
|
- margin: 20rpx auto;
|
|
|
- }
|
|
|
- .zuhe_foot-box{
|
|
|
- float: left;
|
|
|
- overflow: hidden;
|
|
|
- white-space: nowrap;
|
|
|
- // text-overflow: ellipsis;
|
|
|
- width: 490rpx;
|
|
|
- }
|
|
|
- .zuhe_foot-box text{
|
|
|
- margin-right: 36rpx;
|
|
|
- }
|
|
|
- .foot_text{
|
|
|
- color: #FF2A2A;
|
|
|
- }
|
|
|
- .foot_conten .buycart{
|
|
|
- width: 162rpx;
|
|
|
- height: 64rpx;
|
|
|
- background: #EFAF00 !important;
|
|
|
- color: #fff;
|
|
|
- font-size: 28rpx;
|
|
|
- border-radius: 36rpx;
|
|
|
- text-align: center;
|
|
|
- line-height: 64rpx;
|
|
|
- float: right;
|
|
|
- }
|
|
|
- .price-none{
|
|
|
- font-size: 24rpx;
|
|
|
- color: #666666;
|
|
|
- }
|
|
|
- .zuhe_title{
|
|
|
- background:#FFFFFF;
|
|
|
- height: 76rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #1675E1;
|
|
|
- border-bottom: 4rpx solid #1675E1 ;
|
|
|
- line-height: 76rpx;
|
|
|
- padding-left: 30rpx;
|
|
|
- &.active{
|
|
|
- color: #E15616;
|
|
|
- border-bottom: 4rpx solid #E15616;
|
|
|
- }
|
|
|
- }
|
|
|
- .tabstyle{
|
|
|
- width: 128rpx;
|
|
|
- height: 76rpx;
|
|
|
- font-size: 26rpx;
|
|
|
- display: inline-block;
|
|
|
- border-radius: 10rpx;
|
|
|
- text-align: center;
|
|
|
- line-height: 76rpx;
|
|
|
- border: 2rpx solid #EEEEEE;
|
|
|
- position: relative;
|
|
|
- margin-right: 12rpx;
|
|
|
- &.addstyle{
|
|
|
- background: $btn-confirm;
|
|
|
- color: #FFFFFF;
|
|
|
- &::before{
|
|
|
- content: "";
|
|
|
- width: 0;
|
|
|
- height: 0;
|
|
|
- border-top: 20rpx solid transparent;
|
|
|
- border-right: 20rpx solid #FFFFFF;
|
|
|
- border-left: 20rpx solid transparent;
|
|
|
- border-bottom: 20rpx solid #FFFFFF;
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- .icon-gou{
|
|
|
- width: 36rpx;
|
|
|
- height: 36rpx;
|
|
|
- line-height: 36rpx;
|
|
|
- text-align: center;
|
|
|
- color: #E15616;
|
|
|
- position: absolute;
|
|
|
- bottom: -5rpx;
|
|
|
- right: -5rpx;
|
|
|
- font-weight: bold;
|
|
|
- font-size: $font-size-28;
|
|
|
- }
|
|
|
- }
|
|
|
- .commodity-list-wrapper {
|
|
|
- scroll-view {
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- .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;
|
|
|
- }
|
|
|
- }
|
|
|
- .good-search{
|
|
|
- height: auto;
|
|
|
- width: 702rpx;
|
|
|
- padding: 10rpx 24rpx;
|
|
|
- background: #FFFFFF;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- position: fixed;
|
|
|
- flex-direction: column;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- z-index: 999;
|
|
|
- .good-search-top{
|
|
|
- width: 702rpx;
|
|
|
- height: 70rpx;
|
|
|
- flex: 1;
|
|
|
- .search-from{
|
|
|
- width: 582rpx;
|
|
|
- height: 70rpx;
|
|
|
- background: #F7F7F7;
|
|
|
- border-radius: 40rpx;
|
|
|
- float: left;
|
|
|
- position: relative;
|
|
|
- .input{
|
|
|
- width: 340rpx;
|
|
|
- height: 70rpx;
|
|
|
- float: left;
|
|
|
- line-height: 70rpx;
|
|
|
- color: $text-color;
|
|
|
- font-size: $font-size-24;
|
|
|
- }
|
|
|
- .icon-iconfonticonfontsousuo1{
|
|
|
- width: 64rpx;
|
|
|
- height: 70rpx;
|
|
|
- line-height: 70rpx;
|
|
|
- text-align: center;
|
|
|
- display: block;
|
|
|
- font-size: $font-size-38;
|
|
|
- float: left;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
- .icon-shanchu1{
|
|
|
- font-size: $font-size-32;
|
|
|
- color: #999999;
|
|
|
- position: absolute;
|
|
|
- width: 120rpx;
|
|
|
- height: 70rpx;
|
|
|
- line-height: 70rpx;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- text-align: center;
|
|
|
- z-index: 10;
|
|
|
- }
|
|
|
- }
|
|
|
- .search-btn{
|
|
|
- // width: 120rpx;
|
|
|
- line-height: 70rpx;
|
|
|
- text-align: center;
|
|
|
- font-size: $font-size-28;
|
|
|
- color: $color-system;
|
|
|
- float: left;
|
|
|
- background: #FFFFFF;
|
|
|
- margin-left: 10rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .good-search-tabs{
|
|
|
- width: 702rpx;
|
|
|
- height: auto;
|
|
|
- flex: 1;
|
|
|
- position: relative;
|
|
|
- .good-search-tabs-t{
|
|
|
- height: 64rpx;
|
|
|
- width: 702rpx;
|
|
|
- padding: 10rpx 0;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- justify-items: center;
|
|
|
- .tabs-item{
|
|
|
- flex: 1;
|
|
|
- height: 64rpx;
|
|
|
- border-radius: 10rpx;
|
|
|
- background: #F7F7F7;
|
|
|
- margin-right: 22rpx;
|
|
|
- line-height: 64rpx;
|
|
|
- font-size: $font-size-28;
|
|
|
- color: #333333;
|
|
|
- text-align: center;
|
|
|
- position: relative;
|
|
|
- .icon-xiangxia1{
|
|
|
- width: 64rpx;
|
|
|
- height: 64rpx;
|
|
|
- line-height: 64rpx;
|
|
|
- text-align: center;
|
|
|
- color: #333333;
|
|
|
- font-size: $font-size-24;
|
|
|
- transform:rotate(0deg);
|
|
|
- &.reto{
|
|
|
- transform:rotate(180deg);
|
|
|
- }
|
|
|
- }
|
|
|
- &.active{
|
|
|
- color: $color-system;
|
|
|
- .icon-xiangxia1{
|
|
|
- color: $color-system;
|
|
|
- }
|
|
|
- }
|
|
|
- &:last-child{
|
|
|
- margin-right: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .tabs-item-first{
|
|
|
- position: absolute;
|
|
|
- bottom: -308rpx;
|
|
|
- left: -24rpx;
|
|
|
- height: auto;
|
|
|
- width: 702rpx;
|
|
|
- background-color: #FFF;
|
|
|
- z-index: 999;
|
|
|
- padding: 0 24rpx 10rpx 24rpx;
|
|
|
- border-top: 1px solid #F7F7F7;
|
|
|
- .tabs-item{
|
|
|
- width: 100%;
|
|
|
- height: 70rpx;
|
|
|
- line-height: 70rpx;
|
|
|
- font-size: $font-size-28;
|
|
|
- color: #333333;
|
|
|
- text-align: left;
|
|
|
- float: left;
|
|
|
- position: relative;
|
|
|
- border-bottom: 1px solid #F7F7F7;
|
|
|
- &:last-child{
|
|
|
- border-bottom: none;
|
|
|
- }
|
|
|
- .icon-gou{
|
|
|
- display: block;
|
|
|
- width: 70rpx;
|
|
|
- height: 70rpx;
|
|
|
- line-height: 70rpx;
|
|
|
- text-align: center;
|
|
|
- color: #333333;
|
|
|
- font-size: $font-size-40;
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- top: 0;
|
|
|
- }
|
|
|
- &.active{
|
|
|
- color: $color-system;
|
|
|
- .icon-gou{
|
|
|
- color: $color-system;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .all-type-list-content {
|
|
|
- // height: 240rpx;
|
|
|
- padding: 24rpx;
|
|
|
- background: #fff;
|
|
|
- margin-bottom: 2rpx;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- box-sizing: content-box;
|
|
|
- .list-img {
|
|
|
- width: 312rpx;
|
|
|
- height: 207rpx !important;
|
|
|
- margin-right: 26rpx;
|
|
|
- border-radius: 10rpx;
|
|
|
- border: 2rpx solid #f3f3f3;
|
|
|
- }
|
|
|
- }
|
|
|
- .list-details-info {
|
|
|
- width: 100%;
|
|
|
- flex-direction: column;
|
|
|
- font-size: 26rpx;
|
|
|
- position: relative;
|
|
|
- .list-details-title {
|
|
|
- position: relative;
|
|
|
- .tabs{
|
|
|
- width: 38rpx;
|
|
|
- height: 38rpx;
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- image{
|
|
|
- width: 38rpx;
|
|
|
- height: 38rpx;
|
|
|
- display: block;
|
|
|
- }
|
|
|
- }
|
|
|
- .name{
|
|
|
- width: 100%;
|
|
|
- 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: #666666;
|
|
|
- }
|
|
|
- .list-details-miniQuantity {
|
|
|
- width: 100%;
|
|
|
- display: inline-block;
|
|
|
- margin-top: 7rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .list-details-price {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- justify-content: space-between;
|
|
|
- margin-top: 80rpx;
|
|
|
- .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;
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- .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;
|
|
|
- }
|
|
|
- }
|
|
|
- .list-price-loding{
|
|
|
- flex: 6;
|
|
|
- font-size:$font-size-24;
|
|
|
- line-height: 64rpx;
|
|
|
- color: #FF2A2A;
|
|
|
- }
|
|
|
- .list-shop{
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- flex: 6;
|
|
|
- overflow: hidden;
|
|
|
- .list-price {
|
|
|
- // width: 100%;
|
|
|
- color: #FF2A2A;
|
|
|
- float: left;
|
|
|
- line-height:36rpx ;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- .price-larger {
|
|
|
- margin-top: 20rpx;
|
|
|
- font-size: $font-size-30;
|
|
|
- display: inline-block;
|
|
|
- margin-right: 20rpx;
|
|
|
- }
|
|
|
- .zuhe_price-larger{
|
|
|
- color: #666666;
|
|
|
- // float: left;
|
|
|
- // margin-right: 85rpx;
|
|
|
- }
|
|
|
- .price-two{
|
|
|
- color: #666666;
|
|
|
- float: left;
|
|
|
-
|
|
|
- }
|
|
|
- .zuhe_list_zj{
|
|
|
- color: #FF2A2A;
|
|
|
- }
|
|
|
- .price-view{
|
|
|
- display: inline-block;
|
|
|
- width: 40rpx;
|
|
|
- border-radius: 10rpx;
|
|
|
- font-size: $font-size-22;
|
|
|
- text-align: center;
|
|
|
- color: #FFFFFF;
|
|
|
- height: 36rpx;
|
|
|
- line-height: 36rpx;
|
|
|
- margin-right: 8rpx;
|
|
|
- &.ladder{
|
|
|
- background: linear-gradient(135deg,rgba(255,0,0,1) 0%,rgba(242,143,49,1) 100%);
|
|
|
- }
|
|
|
- &.activity{
|
|
|
- background: linear-gradient(135deg,rgba(128,0,255,1) 0%,rgba(242,49,153,1) 100%);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .zuhe_list_price .price-view{
|
|
|
- margin-left:20rpx;
|
|
|
- float: left;
|
|
|
- margin-top: 5rpx;
|
|
|
- }
|
|
|
- .zuhe_list_price{
|
|
|
- width: 400rpx;
|
|
|
- overflow: hidden;
|
|
|
- margin-top: 10rpx;
|
|
|
- }
|
|
|
- .count{
|
|
|
- margin-top: 50rpx;
|
|
|
- float: right;
|
|
|
- border: 1px solid #EEEEEE;
|
|
|
- border-radius: 10rpx;
|
|
|
- .number-box{
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- .iconfont{
|
|
|
- font-size: $font-size-24;
|
|
|
- padding:0 16rpx;
|
|
|
- color: $text-color;
|
|
|
- text-align: center;
|
|
|
- line-height: 48rpx;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- .btn-input{
|
|
|
- width: 100rpx;
|
|
|
- height: 48rpx;
|
|
|
- line-height: 48rpx;
|
|
|
- background: #F8F8F8;
|
|
|
- border-radius: 4rpx;
|
|
|
- text-align: center;
|
|
|
- font-size: $font-size-24;
|
|
|
- border-right: 1px solid #EEEEEE;
|
|
|
- border-left: 1px solid #EEEEEE;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .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;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .add-cart-btn {
|
|
|
- flex: 4;
|
|
|
- width: 156rpx;
|
|
|
- height: 64rpx;
|
|
|
- line-height: 64rpx;
|
|
|
- border-radius: 32rpx;
|
|
|
- color: #333333;
|
|
|
- font-size: 26rpx;
|
|
|
- margin-right: 0;
|
|
|
- // background:linear-gradient(135deg,rgba(242,143,49,1) 0%,rgba(225,86,22,1) 100%);
|
|
|
- background: #FFFFFF;
|
|
|
- border: 2rpx solid #C9C9C9;
|
|
|
- }
|
|
|
- .zuhe_btn{
|
|
|
- float: right;
|
|
|
- }
|
|
|
- }
|
|
|
- .popup-tabs{
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- z-index: 888;
|
|
|
- .mask{
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- z-index: 21;
|
|
|
- background-color: rgba(0, 0, 0, 0.6);
|
|
|
- }
|
|
|
- }
|
|
|
-</style>
|
