quzhou/pages/cart/cart.vue

<template>
	<view class="page">
		<view class="head">
			<!-- #ifdef APP-PLUS -->
			<view class="title">购物车</view>
			<!-- #endif -->
			<view class="edit" @click="isEdit = !isEdit">
				<text>{{isEdit?'完成':'编辑'}}</text>
			</view>
		</view>
		<!-- 购物车列表 -->
		<!-- <mescroll-body ref="mescrollRef"
		   @down="downCallback"
		   @up="upCallback"
		   :down="downOption"
		   :up="upOption"
		   :top="0"> -->
			<!-- <view class="cart-list">
				<view class="list">
					<view class="check">
						<text class="iconfont icon-checked"></text>
					</view>
					<view class="goods">
						<view class="thumb">
							<image src="/static//image/x.png" mode=""></image>
						</view>
						<view class="item">
							<view class="title">
								<text class="two-omit">玉石</text>
							</view>
							
							<view class="price-num">
								<view class="price">
									<text class="min">￥</text>
									<text class="max">99.00</text>
								</view>
								<view class="num">
									<view class="add">
										<text class="iconfont icon-jian"></text>
									</view>
									<view class="number">
										<text>1</text>
									</view>
									<view class="add">
										<text class="iconfont icon-jia"></text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				
			</view> -->
			<view class="empty">
				<image src="../../static/image/empty.png" mode="widthFix"></image>
				<view class="btnGroup">
					<view class="btn" @click="onSkip('home')">
						去逛逛
					</view>
					<view class="btn" @click="onSkip('collect')">
						看看收藏
					</view>
				</view>
			</view>
    
			<!-- 结算 -->
			<view class="close-account">
				<view class="check-total">
					<view class="check">
						<text class="iconfont icon-check"></text>
						<text class="all">全选</text>
					</view>
					<view class="total">
						<text>合计：</text>
						<text class="price">￥0.00</text>
					</view>
				</view>
				<view class="account">
					<view class="btn-calculate" v-if="!isEdit">
						<text>去结算(0)</text>
					</view>
					<view class="btn-del" v-else>
						<!-- <text class="attention">移入关注</text> -->
						<text class="del">删除</text>
					</view>
				</view>
			</view>
		<!-- </mescroll-body> -->
		<!-- tabbar -->
		<TabBar :tabBarShow="2"></TabBar>
	</view>
</template>

<script>
	import TabBar from '../../components/TabBar/TabBar.vue';
  // 引入mescroll-mixins.js
  import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
    mixins: [MescrollMixin], // 使用mixin
		components:{
			TabBar,
		},
		data() {
			return {
        mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
        // 下拉刷新的配置(可选, 绝大部分情况无需配置)
        downOption: {},
        // 上拉加载的配置(可选, 绝大部分情况无需配置)
        upOption: {
          use: false,
          toTop: {
            src: '',
          }
        },
				isEdit: false,
       
			};
		},
		onReady() {
			uni.hideTabBar()
		},
		methods:{
		  /*下拉刷新的回调, 有三种处理方式:*/
		  downCallback(){
			this.mescroll.endSuccess();
		  },
		  /*上拉加载的回调*/
		  upCallback(page) {
			setTimeout(() =>{
			  this.mescroll.endByPage(10, 20);
			},2000)
		  },
		  /**
		   * 跳转点击
		   * @param {String} type 跳转类型
		   */
		  onSkip(type){
			switch (type){
			  case 'classify':
				uni.navigateTo({
				  url: '/pages/SearchGoodsList/SearchGoodsList',
				})
				break;
			  case 'goods':
				uni.navigateTo({
				  url: '/pages/GoodsDetails/GoodsDetails',
				  animationType: 'zoom-fade-out',
				  animationDuration: 200
				})
				break;
			  case 'home':
				uni.switchTab({
				  url: '/pages/home/home',
				})
				break;
			  case 'collect':
				uni.navigateTo({
				  url: '/pages/SearchGoodsList/SearchGoodsList',
				})
				break;
			}
		  }
		}
	}
</script>

<style scoped lang="scss">
	@import 'cart.scss';
</style>