|
@@ -1,436 +1,498 @@
|
|
|
<template>
|
|
|
- <view class="container commodity-list-wrapper" :style="{'overflow':(showSkeleton? 'hidden' : 'auto'),'height': (showSkeleton? windowHeight + 'px' : 'auto')}">
|
|
|
- <list-skeleton v-if="showSkeleton" :listType='0'></list-skeleton>
|
|
|
+ <view
|
|
|
+ class="container commodity-list-wrapper"
|
|
|
+ :style="{
|
|
|
+ overflow: showSkeleton ? 'hidden' : 'auto',
|
|
|
+ height: showSkeleton ? windowHeight + 'px' : 'auto'
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <list-skeleton v-if="showSkeleton" :listType="0"></list-skeleton>
|
|
|
<!-- 搜索框 -->
|
|
|
- <fuzzy-search placeholder="搜索商品名称" @fuzzyClick="fuzzyClickHandle" :fixed="true" @input="fuzzyInputHandle"></fuzzy-search>
|
|
|
+ <fuzzy-search
|
|
|
+ placeholder="搜索商品名称"
|
|
|
+ :fixed="true"
|
|
|
+ @search="searchValHandle"
|
|
|
+ @input="searchValChange"
|
|
|
+ @clear="searchValClear"
|
|
|
+ ></fuzzy-search>
|
|
|
<!-- 内容区域 -->
|
|
|
- <view class="product-container" v-if="!isShowEmpty">
|
|
|
- <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.id" class="all-type-list-content commodity-list goods-item" @click.stop="navToDetailPage(item.productID)">
|
|
|
- <image mode='widthFix' :src="item.mainImage" class="list-img" alt="list-img"></image>
|
|
|
- <view class="list-details-info">
|
|
|
- <text class="list-details-title">{{item.name}}</text>
|
|
|
- <!-- 商品标签 -->
|
|
|
- <!-- <view class="list-details-tags">
|
|
|
+ <scroll-view
|
|
|
+ class="product-container"
|
|
|
+ @scrolltolower="scrolltolower"
|
|
|
+ scroll-y
|
|
|
+ v-if="!isShowEmpty || productList.length > 0"
|
|
|
+ >
|
|
|
+ <view
|
|
|
+ v-for="(item, index) in productList"
|
|
|
+ :key="index"
|
|
|
+ :id="item.id"
|
|
|
+ class="all-type-list-content commodity-list goods-item"
|
|
|
+ @click.stop="navToDetailPage(item.productID)"
|
|
|
+ >
|
|
|
+ <image
|
|
|
+ mode="widthFix"
|
|
|
+ :src="item.mainImage"
|
|
|
+ class="list-img"
|
|
|
+ alt="list-img"
|
|
|
+ ></image>
|
|
|
+ <view class="list-details-info">
|
|
|
+ <text class="list-details-title">{{ item.name }}</text>
|
|
|
+ <!-- 商品标签 -->
|
|
|
+ <!-- <view class="list-details-tags">
|
|
|
<tui-tag type="red" class="tag" padding="6rpx" size="20rpx" plain>商品标签</tui-tag>
|
|
|
<tui-tag type="red" class="tag" padding="6rpx" size="20rpx" plain>商品标签</tui-tag>
|
|
|
</view> -->
|
|
|
- <text class="list-details-specs">规格:{{item.unit !=null ? item.unit : ''}}</text>
|
|
|
- <text class="list-details-specs">商品编码:{{item.productCode !=null ? item.productCode : ''}}</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.repurchasePriceState">
|
|
|
- <text class="price-none">¥{{item.discountPrice}}</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.price1 : item.retailPrice) | NumFormat }}
|
|
|
- </text>
|
|
|
- </view>
|
|
|
+ <text class="list-details-specs"
|
|
|
+ >规格:{{ item.unit != null ? item.unit : '' }}</text
|
|
|
+ >
|
|
|
+ <text class="list-details-specs"
|
|
|
+ >商品编码:{{ item.productCode != null ? item.productCode : '' }}</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.repurchasePriceState">
|
|
|
+ <text class="price-none">¥{{ item.discountPrice }}</text>
|
|
|
+ <text
|
|
|
+ class="iconfont icon-wenhao"
|
|
|
+ @click.stop="repurchModel"
|
|
|
+ ></text>
|
|
|
</view>
|
|
|
- <button class="add-cart-btn" @click.stop="operationHanld(item)">购买</button>
|
|
|
- </view>
|
|
|
- <!-- 活动标签 -->
|
|
|
- <view class="list-details-price" v-if="item.actStatus==1">
|
|
|
- <view class="floor-item-act">
|
|
|
- <view class="floor-tags" v-if="PromotionsFormat(item.promotions)">
|
|
|
- {{item.promotions.name}}<text v-if="item.price1TextFlag != 1">:¥{{ item.retailPrice | NumFormat }}</text>
|
|
|
- </view>
|
|
|
- <view class="floor-tags" v-else>{{item.promotions.name}}</view>
|
|
|
+ <view class="list-price" v-else>
|
|
|
+ <text
|
|
|
+ class="price-larger"
|
|
|
+ :class="PromotionsFormat(item.promotions) ? 'none' : ''"
|
|
|
+ >
|
|
|
+ ¥{{
|
|
|
+ (PromotionsFormat(item.promotions)
|
|
|
+ ? item.price1
|
|
|
+ : item.retailPrice) | NumFormat
|
|
|
+ }}
|
|
|
+ </text>
|
|
|
</view>
|
|
|
- <view class="floor-item-act" v-if="item.actStatus ==0 && item.ladderPriceFlag==1">
|
|
|
- <view class="floor-tags">阶梯价格</view>
|
|
|
+ </view>
|
|
|
+ <button class="add-cart-btn" @click.stop="operationHanld(item)">
|
|
|
+ 购买
|
|
|
+ </button>
|
|
|
+ </view>
|
|
|
+ <!-- 活动标签 -->
|
|
|
+ <view class="list-details-price" v-if="item.actStatus == 1">
|
|
|
+ <view class="floor-item-act">
|
|
|
+ <view class="floor-tags" v-if="PromotionsFormat(item.promotions)">
|
|
|
+ {{ item.promotions.name
|
|
|
+ }}<text v-if="item.price1TextFlag != 1"
|
|
|
+ >:¥{{ item.retailPrice | NumFormat }}</text
|
|
|
+ >
|
|
|
</view>
|
|
|
- </view>
|
|
|
+ <view class="floor-tags" v-else>{{ item.promotions.name }}</view>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ class="floor-item-act"
|
|
|
+ v-if="item.actStatus == 0 && item.ladderPriceFlag == 1"
|
|
|
+ >
|
|
|
+ <view class="floor-tags">阶梯价格</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <button class="show-more-btn" v-if="showRegularBtn" @click="getListFromServer(true)">查看更多</button>
|
|
|
- <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>
|
|
|
- </scroll-view>
|
|
|
- </view>
|
|
|
+ </view>
|
|
|
+ <!--加载loadding-->
|
|
|
+ <tui-loadmore :visible="loadingNow" :index="3" text="加载中..."></tui-loadmore>
|
|
|
+ <tui-nomore :visible="!loadingNow" text="没有更多了"></tui-nomore>
|
|
|
+ <!--加载loadding END-->
|
|
|
+ </scroll-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 v-if="!isShowEmpty"
|
|
|
- :cartNum="cartQuantity"
|
|
|
- :isDock="true"
|
|
|
- :existTabBar="true"
|
|
|
- @btnClick="btnClick"
|
|
|
- @btnTouchstart="btnTouchstart"
|
|
|
- @btnTouchend="btnTouchend">
|
|
|
- </cm-drag>
|
|
|
+ <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 fuzzySearch from '@/components/cm-module/search/fuzzySearch.vue'
|
|
|
- // 引入测试数据
|
|
|
- import {productList} from '@/common/json/data.json.js'
|
|
|
- import { mapState,mapMutations } from 'vuex';
|
|
|
- export default{
|
|
|
- name:'productList',
|
|
|
- components:{
|
|
|
- listSkeleton,
|
|
|
- modalLayer,
|
|
|
- uniStars,
|
|
|
- cmDrag,
|
|
|
- fuzzySearch
|
|
|
+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 fuzzySearch from '@/components/cm-module/search/fuzzySearch.vue'
|
|
|
+import { mapState, mapMutations } from 'vuex'
|
|
|
+export default {
|
|
|
+ name: 'productList',
|
|
|
+ components: {
|
|
|
+ listSkeleton,
|
|
|
+ modalLayer,
|
|
|
+ uniStars,
|
|
|
+ cmDrag,
|
|
|
+ fuzzySearch
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ emptyText: {
|
|
|
+ type: String
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isModallayer: false,
|
|
|
+ windowHeight: '',
|
|
|
+ // 是否显示骨架
|
|
|
+ showSkeleton: false,
|
|
|
+ isShowEmpty: false,
|
|
|
+ userID: '',
|
|
|
+ scrollHeight: '',
|
|
|
+ productList: [],
|
|
|
+ loadingNow: false,
|
|
|
+ pageSize: 10,
|
|
|
+ pageNum: 1,
|
|
|
+ hasNextPage: false,
|
|
|
+ pullFlag: true,
|
|
|
+ cartQuantity: 0,
|
|
|
+ showRegularBtn: true,
|
|
|
+ isPrecedence: false,
|
|
|
+ searchVal: '' //搜索框
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // 从缓存中获取机构id
|
|
|
+ this.$api.getComStorage('clubInfo').then(e => {
|
|
|
+ this.userID = e.userId
|
|
|
+ this.getGoodsList()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+ NumFormat: function(text) {
|
|
|
+ //处理金额
|
|
|
+ return Number(text).toFixed(2)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['hasLogin', 'userInfo', 'identity'])
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 模糊框单击事件
|
|
|
+ fuzzyClickHandle(e) {
|
|
|
+ console.log(e)
|
|
|
},
|
|
|
- props: {
|
|
|
- emptyText: {
|
|
|
- type: String
|
|
|
- },
|
|
|
+ // 绑定数据
|
|
|
+ searchValChange(val){
|
|
|
+ this.searchVal = val
|
|
|
},
|
|
|
- data(){
|
|
|
- return{
|
|
|
- isModallayer:false,
|
|
|
- windowHeight: '',
|
|
|
- // 是否显示骨架
|
|
|
- showSkeleton: false,
|
|
|
- isShowEmpty: false,
|
|
|
- userID: '',
|
|
|
- scrollHeight: '',
|
|
|
- productList: [],
|
|
|
- showLoading: false,
|
|
|
- loadingNow: true,
|
|
|
- loadingText: '上拉加载更多',
|
|
|
- pageSize: 10,
|
|
|
- pageNum: 1,
|
|
|
- hasNextPage: false,
|
|
|
- pullFlag: true,
|
|
|
- fromRegularPurchasePage: false,
|
|
|
- cartQuantity: 0,
|
|
|
- showRegularBtn: true,
|
|
|
- isPrecedence:false
|
|
|
+ // 搜索按钮点击事件
|
|
|
+ searchValHandle(val){
|
|
|
+ // 如果输入框内容为空
|
|
|
+ if(val.trim().length<=0){
|
|
|
+ this.searchVal = ''
|
|
|
+ return
|
|
|
}
|
|
|
+ console.log(this.searchVal)
|
|
|
+ this.searchVal = val
|
|
|
+ // 查询数据 => 刷新列表
|
|
|
+ this.getGoodsList(true)
|
|
|
},
|
|
|
- created() {
|
|
|
- // 设置测试数据
|
|
|
- this.productList = productList
|
|
|
- this.setScrollHeight();
|
|
|
- this.$api.getStorage().then((resolve) =>{
|
|
|
- this.userID = resolve.userID
|
|
|
- // 获取产品数据
|
|
|
- // this.getProductAgainInfo()
|
|
|
- })
|
|
|
+ searchValClear(){
|
|
|
+ this.searchVal = ''
|
|
|
},
|
|
|
- filters: {
|
|
|
- NumFormat:function(text) {//处理金额
|
|
|
- return Number(text).toFixed(2);
|
|
|
- },
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapState(['hasLogin','userInfo','identity'])
|
|
|
+ // 上拉加载更多
|
|
|
+ scrolltolower() {
|
|
|
+ if (this.hasNextPage && this.pullFlag) {
|
|
|
+ this.pageNum += 1
|
|
|
+ this.pullFlag = false
|
|
|
+ this.loadingNow = true
|
|
|
+ this.getGoodsList(true)
|
|
|
+ // 下拉刷新间隔为2s
|
|
|
+ setTimeout(() => {
|
|
|
+ this.pullFlag = true
|
|
|
+ }, 2000)
|
|
|
+ }
|
|
|
},
|
|
|
- methods:{
|
|
|
- // 模糊框单击事件
|
|
|
- fuzzyClickHandle(e){
|
|
|
- console.log(e);
|
|
|
- },
|
|
|
- // 模糊搜索框输入时
|
|
|
- fuzzyInputHandle(e){
|
|
|
- console.log(e);
|
|
|
- },
|
|
|
- scrolltolower() {
|
|
|
- if(this.hasNextPage && this.pullFlag) {
|
|
|
- this.getProductAgainInfo(true);
|
|
|
+ // 获取商品列表
|
|
|
+ async getGoodsList(flag = false) {
|
|
|
+ // 如果是刷新列表或按名称查找,页码定位到第一页
|
|
|
+ if (!flag) {
|
|
|
+ this.pageNum = 1
|
|
|
+ }
|
|
|
+ // 参数
|
|
|
+ const params = {
|
|
|
+ organizeId: this.userID,
|
|
|
+ pageNum: this.pageNum,
|
|
|
+ pageSize: this.pageSize,
|
|
|
+ productName: this.searchVal
|
|
|
+ }
|
|
|
+ // 获取商品数据
|
|
|
+ const { code, data: result } = await this.SellerService.GoodList(params).catch(
|
|
|
+ error => {
|
|
|
+ console.log(error)
|
|
|
}
|
|
|
- },
|
|
|
- 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 = {userId:this.userID,identity:this.identity,pageNum:this.pageNum,pageSize:this.pageSize}
|
|
|
- this.ProductService.GetRepeatBuyAgainProductList(params).then(response =>{
|
|
|
- this.isShowWrapper = true
|
|
|
- this.cartQuantity = response.data.cartQuantity
|
|
|
- const responseData = response.data.pageDate;
|
|
|
- if(responseData.results && responseData.results.length > 0){
|
|
|
- this.hasNextPage = responseData.hasNextPage;
|
|
|
- this.isShowEmpty = false;
|
|
|
- if(loadMore) {
|
|
|
- this.productList = [...this.productList,...responseData.results];
|
|
|
- } else {
|
|
|
- this.productList = [...responseData.results];
|
|
|
- this.showSkeleton = false;
|
|
|
- }
|
|
|
- //价格显示处理
|
|
|
- let isActFlg,newProductList=[];
|
|
|
- this.productList.map((item, index)=> {
|
|
|
- if(item.actStatus == 1){
|
|
|
- isActFlg = true
|
|
|
- }else if(item.actStatus == 1 && item.ladderPriceFlag == '1'){
|
|
|
- isActFlg = true
|
|
|
- }else{
|
|
|
- isActFlg = false
|
|
|
- }
|
|
|
- newProductList.push(Object.assign({},item,{isShowActFlg:isActFlg}))
|
|
|
- })
|
|
|
- this.productList = newProductList
|
|
|
- // 防上拉暴滑
|
|
|
- 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;
|
|
|
- }
|
|
|
- }
|
|
|
- }).catch(response =>{
|
|
|
- this.$util.msg(response.msg,2000);
|
|
|
- })
|
|
|
- },
|
|
|
- operationHanld(prop){
|
|
|
- this.$emit('operationConfim',prop)
|
|
|
- },
|
|
|
- navToDetailPage(id) {
|
|
|
- this.isModallayer = true;
|
|
|
- this.$api.navigateTo(`/pages/goods/product?id=${id}`);
|
|
|
- this.isModallayer = false;
|
|
|
- },
|
|
|
- toIndexPage() {
|
|
|
- uni.switchTab({
|
|
|
- url: '/pages/tabBar/home/index'
|
|
|
+ )
|
|
|
+ // 如果获取失败 返回上一页
|
|
|
+ if (code !== 0) {
|
|
|
+ uni.navigateBack({
|
|
|
+ delta: 1
|
|
|
})
|
|
|
- },
|
|
|
- repurchModel(){
|
|
|
- this.$util.modal('','此商品的价格有变化,原来的购买价已不适用','知道了','',false,() =>{})
|
|
|
- },
|
|
|
- PromotionsFormat(promo){//促销活动类型数据处理
|
|
|
- if(promo!=null){
|
|
|
- if(promo.type == 1 && promo.mode == 1){
|
|
|
- return true
|
|
|
- }else{
|
|
|
- return false
|
|
|
- }
|
|
|
+ return
|
|
|
+ }
|
|
|
+ // 如果商品列表为空
|
|
|
+ if (result.total <= 0) {
|
|
|
+ this.isShowEmpty = true
|
|
|
+ }
|
|
|
+ // 是否加载更多 true 加载更多 false 刷新列表
|
|
|
+ if (flag) {
|
|
|
+ this.productList = [...this.productList, ...result.list]
|
|
|
+ } else {
|
|
|
+ this.productList = result.list
|
|
|
+ }
|
|
|
+ this.pageNum = result.pageNum
|
|
|
+ this.pageSize = result.pageSize
|
|
|
+ this.hasNextPage = result.hasNextPage
|
|
|
+ // 改变加载状态
|
|
|
+ this.loadingNow = false
|
|
|
+ },
|
|
|
+ operationHanld(prop) {
|
|
|
+ this.$emit('operationConfim', prop)
|
|
|
+ },
|
|
|
+ navToDetailPage(id) {
|
|
|
+ this.isModallayer = true
|
|
|
+ this.$api.navigateTo(`/pages/goods/product?id=${id}`)
|
|
|
+ this.isModallayer = false
|
|
|
+ },
|
|
|
+ toIndexPage() {
|
|
|
+ uni.switchTab({
|
|
|
+ url: '/pages/tabBar/home/index'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ repurchModel() {
|
|
|
+ this.$util.modal(
|
|
|
+ '',
|
|
|
+ '此商品的价格有变化,原来的购买价已不适用',
|
|
|
+ '知道了',
|
|
|
+ '',
|
|
|
+ false,
|
|
|
+ () => {}
|
|
|
+ )
|
|
|
+ },
|
|
|
+ PromotionsFormat(promo) {
|
|
|
+ //促销活动类型数据处理
|
|
|
+ if (promo != null) {
|
|
|
+ if (promo.type == 1 && promo.mode == 1) {
|
|
|
+ return true
|
|
|
+ } else {
|
|
|
+ return false
|
|
|
}
|
|
|
- return false
|
|
|
- },
|
|
|
- btnClick() {
|
|
|
- this.$api.navigateTo('/pages/goods/cart')
|
|
|
- },
|
|
|
- btnTouchstart() {
|
|
|
- // console.log('btnTouchstart');
|
|
|
- },
|
|
|
- btnTouchend() {
|
|
|
- // console.log('btnTouchend');
|
|
|
}
|
|
|
+ return false
|
|
|
+ },
|
|
|
+ btnClick() {
|
|
|
+ this.$api.navigateTo('/pages/goods/cart')
|
|
|
+ },
|
|
|
+ btnTouchstart() {
|
|
|
+ // console.log('btnTouchstart');
|
|
|
+ },
|
|
|
+ btnTouchend() {
|
|
|
+ // console.log('btnTouchend');
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
- .commodity-list-wrapper {
|
|
|
- scroll-view {
|
|
|
- height: 100%;
|
|
|
- border-top: 2rpx solid rgba(0,0,0,0.07);
|
|
|
- }
|
|
|
- .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%;
|
|
|
+ border-top: 2rpx solid rgba(0, 0, 0, 0.07);
|
|
|
}
|
|
|
- .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: 14rpx;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
- .list-details-miniQuantity {
|
|
|
- width: 100%;
|
|
|
- display: inline-block;
|
|
|
- margin-top: 7rpx;
|
|
|
- }
|
|
|
+ margin: 26rpx 0;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -138rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+.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-price {
|
|
|
+ .list-details-specs {
|
|
|
width: 100%;
|
|
|
- line-height: 54rpx;
|
|
|
+ display: inline-block;
|
|
|
+ margin-top: 14rpx;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ .list-details-miniQuantity {
|
|
|
+ width: 100%;
|
|
|
+ display: inline-block;
|
|
|
+ margin-top: 7rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+.list-details-price {
|
|
|
+ width: 100%;
|
|
|
+ line-height: 54rpx;
|
|
|
+ float: left;
|
|
|
+ .floor-item-act {
|
|
|
+ height: 54rpx;
|
|
|
+ text-align: center;
|
|
|
+ box-sizing: border-box;
|
|
|
float: left;
|
|
|
- .floor-item-act{
|
|
|
- height: 54rpx;
|
|
|
+ .floor-tags {
|
|
|
+ height: 28rpx;
|
|
|
+ border-radius: 6rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+ line-height: 28rpx;
|
|
|
+ color: $color-system;
|
|
|
text-align: center;
|
|
|
- box-sizing: border-box;
|
|
|
- float: left;
|
|
|
- .floor-tags{
|
|
|
- height: 28rpx;
|
|
|
- border-radius: 6rpx;
|
|
|
- background-color: #FFFFFF;
|
|
|
- line-height: 28rpx;
|
|
|
- color: $color-system;
|
|
|
- text-align: center;
|
|
|
- display: inline-block;
|
|
|
- padding:0 16rpx;
|
|
|
- font-size: $font-size-20;
|
|
|
- margin-left: 15rpx;
|
|
|
- border: 1px solid #E15616;
|
|
|
- }
|
|
|
+ display: inline-block;
|
|
|
+ padding: 0 16rpx;
|
|
|
+ font-size: $font-size-20;
|
|
|
+ margin-left: 15rpx;
|
|
|
+ border: 1px solid #e15616;
|
|
|
}
|
|
|
- .price-icon {
|
|
|
- width: 22rpx;
|
|
|
- height: 28rpx;
|
|
|
- vertical-align: middle;
|
|
|
+ }
|
|
|
+ .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;
|
|
|
}
|
|
|
- .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: 30rpx;
|
|
|
- .price-small{
|
|
|
- font-size:$font-size-24;
|
|
|
- line-height: 40rpx;
|
|
|
- color: #FF2A2A;
|
|
|
- }
|
|
|
+ }
|
|
|
+ .login-now {
|
|
|
+ padding: 10rpx 10rpx 10rpx 0;
|
|
|
+ }
|
|
|
+ .list-none {
|
|
|
+ margin-top: 30rpx;
|
|
|
+ .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;
|
|
|
- font-weight: bold;
|
|
|
- &.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;
|
|
|
+ font-weight: bold;
|
|
|
+ &.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;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- .list-details-tags {
|
|
|
- display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
- margin: 14rpx 0;
|
|
|
- height: 34rpx;
|
|
|
- .tag{
|
|
|
- margin-right: 5rpx;
|
|
|
- }
|
|
|
+ .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;
|
|
|
}
|
|
|
- .product-container .goods-item:first-child{
|
|
|
- margin-top: 100rpx;
|
|
|
+}
|
|
|
+.list-details-tags {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ margin: 14rpx 0;
|
|
|
+ height: 34rpx;
|
|
|
+ .tag {
|
|
|
+ margin-right: 5rpx;
|
|
|
}
|
|
|
+}
|
|
|
+.product-container {
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
+ padding-top: 100rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
</style>
|