2-23新增

pages.json

@@ -21,7 +21,8 @@
 			"path": "pages/shopping-cart/shopping-cart",
 			"style": {
 				"navigationBarTitleText": "",
-				"enablePullDownRefresh": false
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom"
 			}
 
 		}, {
@@ -549,6 +550,25 @@
             }
             
         }
+        ,{
+            "path" : "pages/index/promotional-picks/promotional-picks",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false,
+				"navigationStyle": "custom"
+            }
+            
+        }
+        ,{
+            "path" : "pages/index/search/search",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        }
     ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",

pages/index/promotional-picks/promotional-picks.css

@@ -0,0 +1,494 @@
+.header-btn-box {
+	display: flex;
+	justify-content: flex-end;
+	padding: 0 20rpx;
+	box-sizing: border-box;
+	position: relative;
+}
+
+.gua-btn {
+	display: flex;
+	align-items: center;
+}
+
+.gua-btn image {
+	width: 68rpx;
+	height: 68rpx;
+	vertical-align: middle;
+}
+
+.wrap {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+.swiper-box {
+	width: 100%;
+	margin-bottom: 30rpx;
+}
+
+.swiper {
+	width: 100%;
+	height: 580rpx;
+}
+
+.banner-img {
+	width: 100%;
+	height: 580rpx;
+}
+
+.module {
+	width: calc(100% - 48rpx);
+	margin: -158rpx auto 0;
+	border-radius: 32rpx 32rpx 0 0;
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+	z-index: 99;
+}
+
+.tabList {
+	width: 100%;
+	white-space: nowrap;
+	background-color: #fff;
+	padding: 0 24rpx;
+	box-sizing: border-box;
+	border-bottom: 1px solid #DCDCDC;
+	box-sizing: border-box;
+}
+
+.type {
+	width: fit-content;
+	height: 98rpx;
+	line-height: 98rpx;
+	box-sizing: border-box;
+	color: #202020;
+	background-color: #fff;
+	font-size: 32rpx;
+	display: inline-block;
+	margin-right: 100rpx;
+}
+
+.type:last-child {
+	margin-right: 0;
+}
+
+.active {
+	color: #F2501A;
+	border-bottom: 2px solid #F2501A;
+}
+
+.nav-list {
+	width: 100%;
+	height: 110rpx;
+	display: flex;
+	background-color: #fff;
+}
+
+.child {
+	flex: 1;
+	height: 110rpx;
+	line-height: 110rpx;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	color: #A7A7A7;
+	font-size: 30rpx;
+	position: relative;
+}
+
+.child.selected {
+	color: #FFFFFF;
+	background-color: #F2501A;
+}
+
+.child.selected::after {
+	content: "";
+	position: absolute;
+	bottom: -12px;
+	left: 50%;
+	transform: translate(-50%, 0);
+	width: 0px;
+	height: 0px;
+	border-width: 6px;
+	border-style: solid;
+	border-color: #F2501A transparent transparent transparent;
+	box-sizing: border-box;
+	z-index: 9999;
+}
+
+.bottom {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.bottom-label {
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	color: #202020;
+	font-size: 36rpx;
+	background-color: #FFFFFF;
+	padding: 16rpx 0 26rpx;
+}
+
+.spike-img {
+	width: 232rpx;
+	height: 232rpx;
+	border-radius: 12rpx;
+	margin-right: 22rpx;
+}
+
+.spike-list {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	background-color: #FFFFFF;
+	margin-bottom: 40rpx;
+	border-radius: 0 0 32rpx 32rpx;
+}
+
+.spike-item {
+	width: 100%;
+	display: flex;
+	align-items: center;
+	border-bottom: 1px solid #DCDCDC;
+	padding: 22rpx 24rpx;
+	box-sizing: border-box;
+}
+
+.spike-item:last-child {
+	border-bottom: none;
+}
+
+.spike-sidebar {
+	flex: 1;
+	height: 220rpx;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+}
+
+.spike-product-name {
+	width: 100%;
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	-webkit-box-orient: vertical;
+	color: #202020;
+	font-size: 28rpx;
+}
+
+.spike-tag-row {
+	width: 100%;
+	display: flex;
+	align-items: center;
+}
+
+.spike-tag {
+	min-width: 160rpx;
+	height: 44rpx;
+	line-height: 44rpx;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	border: 1px solid #E63D23;
+	border-radius: 100rpx;
+	color: #F2501A;
+	font-size: 24rpx;
+}
+
+.snap-up-num {
+	color: #A7A7A7;
+	font-size: 28rpx;
+	margin-left: 40rpx;
+}
+
+.spike-bottom {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.btn-1 {
+	width: calc(100% - 150rpx);
+	height: 50rpx;
+	position: relative;
+}
+
+.btn-1bg {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	left: 0;
+	top: 0;
+	z-index: 10;
+}
+
+.btn-1container {
+	width: 100%;
+	height: 100%;
+	line-height: 50rpx;
+	position: absolute;
+	left: 0;
+	top: 0;
+	z-index: 100;
+	color: #FFFFFF;
+	font-size: 24rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.btn-1container text {
+	font-size: 32rpx;
+	font-weight: 500;
+}
+
+.btn-2 {
+	width: 150rpx;
+	height: 50rpx;
+	position: relative;
+}
+
+.btn-2bg {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	left: 0;
+	top: 0;
+	z-index: 10;
+}
+
+.btn-2container {
+	width: 100%;
+	height: 100%;
+	line-height: 50rpx;
+	position: absolute;
+	left: 0;
+	top: 0;
+	z-index: 100;
+	color: #FFFFFF;
+	font-size: 24rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.module-label {
+	width: 100%;
+	position: relative;
+	padding-left: 26rpx;
+	box-sizing: border-box;
+	margin-bottom: 16rpx;
+}
+
+.module-label::after {
+	content: "";
+	position: absolute;
+	left: 0;
+	top: 50%;
+	transform: translate(0, -50%);
+	width: 6rpx;
+	height: 34rpx;
+	background-color: #F2501A;
+	border-radius: 4rpx;
+	color: #000000;
+	font-size: 32rpx;
+	font-weight: bold;
+}
+
+.sale-list {
+	width: 100%;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	margin-bottom: 20rpx;
+}
+
+.sale-item {
+	width: calc(50% - 12rpx);
+	display: flex;
+	flex-direction: column;
+	border-radius: 12rpx;
+	overflow: hidden;
+	background-color: #FFFFFF;
+	margin-bottom: 24rpx;
+}
+
+.img-box {
+	width: 100%;
+	height: 262rpx;
+	position: relative;
+}
+
+.sale-img {
+	width: 100%;
+	height: 100%;
+}
+
+.tag-box {
+	width: 100%;
+	height: 68rpx;
+	line-height: 68rpx;
+	background-color: rgb(242, 80, 26, 0.8);
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	text-align: center;
+	color: #FFFFFF;
+	font-size: 22rpx;
+}
+
+.big {
+	font-size: 30rpx;
+}
+
+.small {
+	margin-left: 28rpx;
+}
+
+.sale-bottom {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	padding: 12rpx 12rpx 30rpx;
+	box-sizing: border-box;
+}
+
+.sale-product-name {
+	width: 100%;
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	-webkit-box-orient: vertical;
+	color: #202020;
+	font-size: 26rpx;
+	font-weight: 500;
+	margin-bottom: 10rpx;
+}
+
+.sale-price-row {
+	width: 100%;
+}
+
+.sale-price {
+	color: #F2501A;
+	font-size: 22rpx;
+}
+
+.sale-price text {
+	font-size: 30rpx;
+}
+
+.del-price {
+	color: #919191;
+	font-size: 22rpx;
+	margin-left: 25rpx;
+}
+
+.group-list {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	background-color: #FFFFFF;
+	border-radius: 16rpx;
+}
+
+.group-item {
+	width: 100%;
+	padding: 24rpx;
+	display: flex;
+	align-items: center;
+	border-bottom: 1px solid #DCDCDC;
+	box-sizing: border-box;
+}
+
+.group-item:last-child {
+	border-bottom: none;
+}
+
+.group-img {
+	width: 232rpx;
+	height: 232rpx;
+	border-radius: 12rpx;
+	margin-right: 22rpx;
+}
+
+.group-sidebar {
+	flex: 1;
+	height: 220rpx;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+}
+
+.group-product-name {
+	width: 100%;
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	-webkit-box-orient: vertical;
+	color: #202020;
+	font-size: 28rpx;
+	font-weight: 500;
+}
+
+.group-row {
+	width: 100%;
+}
+
+.group-num {
+	width: 100%;
+	color: #A7A7A7;
+	font-size: 28rpx;
+}
+
+.group-num text {
+	color: #F2501A;
+}
+
+.form-group-num {
+	margin-left: 50rpx;
+	color: #A7A7A7;
+	font-size: 28rpx;
+}
+
+.group-bottom {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-top: 20rpx;
+}
+
+.group-price {
+	color: #F2501A;
+	font-size: 24rpx;
+}
+
+.group-price text {
+	font-size: 32rpx;
+	margin-left: 2rpx;
+}
+
+.group-btn {
+	width: 160rpx;
+	height: 50rpx;
+	line-height: 50rpx;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	border-radius: 100rpx;
+	background-color: #F2501A;
+	color: #FFFFFF;
+	font-size: 20rpx;
+}

pages/index/promotional-picks/promotional-picks.vue

@@ -0,0 +1,320 @@
+<!-- 促销精选 -->
+<template>
+	<view class="wrap">
+		<HeaderViewBar ref='HeaderViewBar' title='促销精选' :opacity="scrollTop / 20" backgroundColor='#6A4FDB'
+			style="position: fixed; top: 0; z-index: 999999999;">
+
+			<view class="header-btn-box" :style="{width: headerContainerWidth + 'px'}">
+				<button class="gua-btn">
+					<image src="../../../static/share-icon.png" mode=""></image>
+				</button>
+			</view>
+		</HeaderViewBar>
+
+		<view class="swiper-box">
+			<swiper class="swiper" :circular="true" autoplay="true" interval="4000" duration="500">
+				<swiper-item v-for="(item,index) in swiperList" :key="index">
+					<view class="swiper-item">
+						<image :src="item" class="banner-img" mode="aspectFill" />
+					</view>
+				</swiper-item>
+			</swiper>
+		</view>
+
+		<view class="module">
+			<view class="nav-list">
+				<view :class="{ 'selected' : isActive === index }" class="child" v-for="(item,index) in navList"
+					:key="index" @click="checked(index)">
+					{{item.title}}
+				</view>
+			</view>
+
+			<scroll-view scroll-x="true" class="tabList">
+				<view v-for="(item, index) in rechargeList" :key="index"
+					:class="'type ' + [id == index ? 'active' : '']" @click="selectItem(index)">
+					{{item.title}}
+				</view>
+			</scroll-view>
+			
+			<view class="bottom">
+				<view class="bottom-label">
+					距开抢
+				</view>
+				<view class="spike-list">
+					<view class="spike-item">
+						<image src="../../../static/img-4.png" class="spike-img" mode="aspectFill"></image>
+						<view class="spike-sidebar">
+							<view class="spike-product-name">李子柒推荐藕粉桂花坚果早餐懒人冲饮</view>
+							<view class="spike-tag-row">
+								<view class="spike-tag">
+									直降33元
+								</view>
+								<text class="snap-up-num">120人抢购</text>
+							</view>
+							<view class="spike-bottom">
+								<button type="default" class="btn-1">
+									<image src="../../../static/bg-13.png" class="btn-1bg" mode=""></image>
+									<view class="btn-1container">
+										秒杀价￥<text>28.00</text>
+									</view>
+								</button>
+								<button type="default" class="btn-2">
+									<image src="../../../static/bg-14.png" class="btn-2bg" mode=""></image>
+									<view class="btn-2container">
+										立即购买
+									</view>
+								</button>
+							</view>
+						</view>
+					</view>
+					<view class="spike-item">
+						<image src="../../../static/img-4.png" class="spike-img" mode="aspectFill"></image>
+						<view class="spike-sidebar">
+							<view class="spike-product-name">李子柒推荐藕粉桂花坚果早餐懒人冲饮</view>
+							<view class="spike-tag-row">
+								<view class="spike-tag">
+									直降33元
+								</view>
+								<text class="snap-up-num">120人抢购</text>
+							</view>
+							<view class="spike-bottom">
+								<button type="default" class="btn-1">
+									<image src="../../../static/bg-13.png" class="btn-1bg" mode=""></image>
+									<view class="btn-1container">
+										秒杀价￥<text>28.00</text>
+									</view>
+								</button>
+								<button type="default" class="btn-2">
+									<image src="../../../static/bg-14.png" class="btn-2bg" mode=""></image>
+									<view class="btn-2container">
+										立即购买
+									</view>
+								</button>
+							</view>
+						</view>
+					</view>
+				</view>
+				<view class="module-label">
+					特卖
+				</view>
+				<view class="sale-list">
+					<view class="sale-item">
+						<view class="img-box">
+							<image src="../../../static/img-1.png" class="sale-img" mode="aspectFill"></image>
+							<view class="tag-box">
+								特卖￥<text class="big">394.00</text>
+								<text class="small">4.8折</text>
+							</view>
+						</view>
+						<view class="sale-bottom">
+							<view class="sale-product-name">
+								精品小童茸，云南香格里拉松茸，肉质紧实细腻…
+							</view>
+							<view class="sale-price-row">
+								<text class="sale-price">
+									￥<text>394.00</text>
+								</text>
+								<text class="del-price">￥34.00</text>
+							</view>
+						</view>
+					</view>
+					<view class="sale-item">
+						<view class="img-box">
+							<image src="../../../static/img-2.png" class="sale-img" mode="aspectFill"></image>
+							<view class="tag-box">
+								特卖￥<text class="big">394.00</text>
+								<text class="small">4.8折</text>
+							</view>
+						</view>
+						<view class="sale-bottom">
+							<view class="sale-product-name">
+								精品小童茸，云南香格里拉松茸，肉质紧实细腻…
+							</view>
+							<view class="sale-price-row">
+								<text class="sale-price">
+									￥<text>394.00</text>
+								</text>
+								<text class="del-price">￥34.00</text>
+							</view>
+						</view>
+					</view>
+					<view class="sale-item">
+						<view class="img-box">
+							<image src="../../../static/img-1.png" class="sale-img" mode="aspectFill"></image>
+							<view class="tag-box">
+								特卖￥<text class="big">394.00</text>
+								<text class="small">4.8折</text>
+							</view>
+						</view>
+						<view class="sale-bottom">
+							<view class="sale-product-name">
+								精品小童茸，云南香格里拉松茸，肉质紧实细腻…
+							</view>
+							<view class="sale-price-row">
+								<text class="sale-price">
+									￥<text>394.00</text>
+								</text>
+								<text class="del-price">￥34.00</text>
+							</view>
+						</view>
+					</view>
+					<view class="sale-item">
+						<view class="img-box">
+							<image src="../../../static/img-1.png" class="sale-img" mode="aspectFill"></image>
+							<view class="tag-box">
+								特卖￥<text class="big">394.00</text>
+								<text class="small">4.8折</text>
+							</view>
+						</view>
+						<view class="sale-bottom">
+							<view class="sale-product-name">
+								精品小童茸，云南香格里拉松茸，肉质紧实细腻…
+							</view>
+							<view class="sale-price-row">
+								<text class="sale-price">
+									￥<text>394.00</text>
+								</text>
+								<text class="del-price">￥34.00</text>
+							</view>
+						</view>
+					</view>
+				</view>
+				<view class="module-label">
+					拼团
+				</view>
+				<view class="group-list">
+					<view class="group-item">
+						<image src="../../../static/bg-10.png" class="group-img" mode="aspectFill"></image>
+						<view class="group-sidebar">
+							<view class="group-product-name">李子柒推荐藕粉桂花坚果早餐懒人冲饮</view>
+							<view class="group-row">
+								<text class="group-num">
+									拼团数<text>20</text>
+								</text>
+								<text class="form-group-num">已有10人成团</text>
+							</view>
+							<view class="group-bottom">
+								<view class="group-price">
+									￥<text>28.00</text>
+								</view>
+								<button type="default" class="group-btn">去拼团</button>
+							</view>
+						</view>
+					</view>
+					<view class="group-item">
+						<image src="../../../static/bg-10.png" class="group-img" mode="aspectFill"></image>
+						<view class="group-sidebar">
+							<view class="group-product-name">李子柒推荐藕粉桂花坚果早餐懒人冲饮</view>
+							<view class="group-row">
+								<text class="group-num">
+									拼团数<text>20</text>
+								</text>
+								<text class="form-group-num">已有10人成团</text>
+							</view>
+							<view class="group-bottom">
+								<view class="group-price">
+									￥<text>28.00</text>
+								</view>
+								<button type="default" class="group-btn">去拼团</button>
+							</view>
+						</view>
+					</view>
+					<view class="group-item">
+						<image src="../../../static/bg-10.png" class="group-img" mode="aspectFill"></image>
+						<view class="group-sidebar">
+							<view class="group-product-name">李子柒推荐藕粉桂花坚果早餐懒人冲饮</view>
+							<view class="group-row">
+								<text class="group-num">
+									拼团数<text>20</text>
+								</text>
+								<text class="form-group-num">已有10人成团</text>
+							</view>
+							<view class="group-bottom">
+								<view class="group-price">
+									￥<text>28.00</text>
+								</view>
+								<button type="default" class="group-btn">去拼团</button>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+			
+		</view>
+
+	</view>
+</template>
+
+<script>
+	import HeaderViewBar from '../../../components/header-view-bar/header-view-bar.vue';
+	export default {
+		components: {
+			HeaderViewBar,
+		},
+		data() {
+			return {
+				headerHeight: 0,
+				headerContainerWidth: '100%',
+				scrollTop: 0,
+
+				//轮播
+				swiperList: [
+					'../../../static/bg-15.png',
+					'../../../static/bg-15.png',
+					'../../../static/bg-15.png'
+				],
+
+				//选项卡
+				isActive: 0,
+				navList: [{
+					title: '限时秒杀',
+				}, {
+					title: "特卖",
+				}, {
+					title: "拼团砍价",
+				}],
+
+
+				//选项卡2
+				rechargeList: [{
+						title: '09:00开抢中'
+					},
+					{
+						title: '10:00开抢'
+					},
+					{
+						title: '11:00开抢'
+					}
+				],
+				id: 0, //单选 初始化第一个高亮
+			}
+		},
+		onShow() {
+			setTimeout(() => {
+				const {
+					headerHeight,
+					headerContainerWidth
+				} = this.$refs['HeaderViewBar'].getHeaderStyle();
+				this.headerHeight = headerHeight;
+				this.headerContainerWidth = headerContainerWidth;
+			}, 20);
+		},
+		methods: {
+			//选项卡
+			checked(index) {
+				this.isActive = index
+			},
+			//单选-选项卡
+			selectItem(index) {
+				this.id = index;
+			},
+		},
+		onPageScroll(e) {
+			this.scrollTop = e.scrollTop;
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	@import "./promotional-picks.css";
+</style>

pages/index/search/search.css

@@ -0,0 +1,27 @@
+page{
+	background-color: #FFFFFF;
+}
+.wrap{
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	padding: 20rpx 24rpx;
+	box-sizing: border-box;
+}
+.history-search-box{
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	color: #202020;
+	font-size: 28rpx;
+}
+.del-btn{
+	display: flex;
+	align-items: center;
+	background-color: initial;
+	border-radius: initial;
+}
+.del-btn image{
+	width: 29rpx;
+}

pages/index/search/search.vue

@@ -0,0 +1,28 @@
+<!-- 搜索 -->
+<template>
+	<view class="wrap">
+		<view class="history-search-box">
+			<text>历史搜索</text>
+			<button type="default" class="del-btn">
+				<image src="../../../static/del-img2.png" mode="widthFix"></image>
+			</button>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	@import "./search.css";
+</style>

pages/shopping-cart/shopping-cart.css

@@ -0,0 +1,466 @@
+.wrap {
+	padding-bottom: 172rpx;
+}
+
+.header-btn-box {
+	display: flex;
+	justify-content: flex-end;
+	padding: 0 20rpx;
+	box-sizing: border-box;
+	position: relative;
+}
+
+.gua-btn {
+	color: #202020;
+	font-size: 26rpx;
+	display: flex;
+	align-items: center;
+}
+
+.listCount {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	padding: 30rpx 24rpx;
+	box-sizing: border-box;
+}
+
+
+.listItem {
+	width: 100%;
+	border-radius: 20rpx;
+	background: #fff;
+	position: relative;
+	margin-bottom: 30rpx;
+}
+
+.content-top {
+	width: 100%;
+	height: 86rpx;
+	line-height: 86rpx;
+	display: flex;
+	align-items: center;
+	padding: 0 24rpx;
+	box-sizing: border-box;
+	border-bottom: 1px solid #F9F6F6;
+}
+
+.content-top-name {
+	color: #111111;
+	font-size: 30rpx;
+	font-weight: bold;
+}
+
+.content {
+	width: 100%;
+	display: flex;
+	align-items: center;
+	padding: 24rpx;
+	box-sizing: border-box;
+}
+
+.remove {
+	width: 160rpx;
+	height: 100%;
+	background-color: red;
+	color: white;
+	position: absolute;
+	top: 0;
+	right: -160rpx;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	font-size: 26rpx;
+}
+
+.checkBox {
+	padding-right: 20rpx;
+}
+
+.checkBox image {
+	width: 30rpx;
+	height: 30rpx;
+}
+
+.itemShow {
+	flex: 1;
+	display: flex;
+	align-items: center;
+}
+
+.productImg {
+	width: 160rpx;
+	height: 160rpx;
+	border-radius: 12rpx;
+}
+
+.itemCont {
+	flex: 1;
+	height: 160rpx;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	margin-left: 20rpx;
+}
+
+.itemName {
+	width: 100%;
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	-webkit-box-orient: vertical;
+	color: #202020;
+	font-size: 26rpx;
+}
+
+.item-bottom {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.price {
+	color: #F2501A;
+	font-size: 24rpx;
+}
+
+.price text {
+	font-weight: bold;
+	font-size: 32rpx;
+}
+
+.calc_box {
+	display: flex;
+	align-items: center;
+}
+
+.calc_btn {
+	height: 44rpx !important;
+	line-height: 44rpx !important;
+	border-radius: initial;
+	display: flex;
+	align-items: center;
+}
+
+.calc_btn:hover {
+	cursor: pointer;
+}
+
+.calc_btn image {
+	width: 44rpx;
+}
+
+.calc_number {
+	width: 80rpx !important;
+	height: 44rpx !important;
+	line-height: 44rpx !important;
+	text-align: center;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	margin: 0 8rpx;
+	color: #111111;
+	font-size: 26rpx;
+	font-weight: bold;
+	background-color: #EEEEEE;
+	border-radius: 50rpx;
+
+}
+
+.footer {
+	width: calc(100% - 48rpx);
+	height: 144rpx;
+	background-color: #F8F9FC;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	position: fixed;
+	bottom: 172rpx;
+	left: 24rpx;
+	z-index: 999;
+	padding: 0 20rpx 0 24rpx;
+	box-sizing: border-box;
+	border-radius: 100rpx;
+}
+
+.check-row {
+	display: flex;
+	align-items: center;
+}
+
+.check-row image {
+	width: 30rpx;
+	height: 30rpx;
+}
+
+.check-row text {
+	margin-left: 20rpx;
+	color: #111111;
+	font-weight: bold;
+	font-size: 30rpx;
+}
+
+.footer-sidebar {
+	flex: 1;
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+}
+
+.footer-sidebar-column {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-end;
+	margin-right: 22rpx;
+}
+
+.total-money {
+	color: #202020;
+	font-size: 26rpx;
+	line-height: 26rpx;
+}
+
+.maxPrice {
+	color: #FD6820;
+	font-size: 24rpx;
+	line-height: 24rpx;
+	margin-left: 2rpx;
+}
+
+.maxPrice text {
+	font-weight: bold;
+	font-size: 32rpx;
+	line-height: 32rpx;
+}
+
+.submit-btn {
+	width: 140rpx;
+	height: 60rpx;
+	line-height: 60rpx;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background: #F2501A;
+	border-radius: 100rpx;
+	color: #F8F8F8;
+	font-size: 24rpx;
+	font-weight: 500;
+}
+
+.normal-box {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	font-size: 28rpx;
+	color: #999999;
+	font-weight: 500;
+	padding: 280rpx 0;
+}
+
+.normal-box image {
+	width: 522rpx;
+	margin-bottom: 20rpx;
+}
+
+.del {
+	display: flex;
+	align-items: center;
+	position: absolute;
+	right: 28rpx;
+	top: 30rpx;
+}
+
+.del image {
+	width: 30rpx;
+}
+
+
+.tag {
+	width: 124rpx;
+	height: 36rpx;
+	line-height: 36rpx;
+	color: #fff;
+	font-size: 24rpx;
+	text-align: center;
+	border-radius: 10rpx;
+	vertical-align: middle;
+	margin-right: 5rpx;
+	margin-top: -7rpx;
+	display: inline-block;
+	background: linear-gradient(90deg, #FF5A4D, #FF8900);
+}
+
+.details-row {
+	display: flex;
+	align-items: center;
+	color: #F2501A;
+	font-size: 22rpx;
+	margin-top: 4rpx;
+}
+
+.details-row image {
+	width: 20rpx;
+	margin: 0 0 0 8rpx;
+}
+
+.border-btn {
+	height: 60rpx;
+	height: 60rpx;
+	min-width: 140rpx;
+	padding: 0 24rpx;
+	border-radius: 100rpx;
+	color: #F28A1A;
+	border: 1px solid #F28A1A;
+	font-size: 24rpx;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	margin-right: 20rpx;
+}
+
+.border-btn:last-child {
+	margin-right: 0;
+}
+
+.border-btn.red {
+	color: #F2501A !important;
+	border: 1px solid #F2501A !important;
+}
+
+.mask {
+	position: fixed;
+	left: 0;
+	right: 0;
+	top: 0;
+	height: 100vh;
+	background-color: rgba(0, 0, 0, 0.38);
+	z-index: 9;
+}
+
+.window {
+	position: fixed;
+	width: 100%;
+	left: 0;
+	bottom: 172rpx;
+	border-radius: 40rpx 40rpx 0 0;
+	overflow: hidden;
+	background-color: #fff;
+	z-index: 9999;
+	display: flex;
+	flex-direction: column;
+	padding: 36rpx 28rpx 32rpx;
+	box-sizing: border-box;
+}
+
+.window-title {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	margin-bottom: 65rpx;
+}
+
+.window-title text:first-child {
+	color: #202020;
+	font-size: 32rpx;
+}
+
+.window-title text:last-child {
+	color: #A7A7A7;
+	font-size: 24rpx;
+	margin-top: 7rpx;
+}
+
+.window-close-btn {
+	background-color: initial;
+	display: flex;
+	align-items: center;
+	border-radius: initial;
+	position: absolute;
+	right: 24rpx;
+	top: 24rpx;
+}
+
+.window-close-btn image {
+	width: 25rpx;
+}
+
+.window-row-between {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 25rpx;
+}
+
+.window-row-between:last-child {
+	margin-bottom: 0;
+}
+
+.window-row-label {
+	color: #202020;
+	font-size: 26rpx;
+}
+
+.window-total-price {
+	color: #202020;
+	font-size: 26rpx;
+	font-weight: bold;
+}
+
+.right-row {
+	display: flex;
+	align-items: center;
+	color: #F2501A;
+	font-size: 26rpx;
+}
+
+.right-row image {
+	width: 20rpx;
+	margin-left: 6rpx;
+}
+
+.window-bottom {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+.window-bottom-between {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 4rpx;
+}
+
+.window-bottom-between:last-child {
+	margin-bottom: 0;
+}
+
+.black-font {
+	color: #202020 !important;
+}
+
+.margin {
+	margin-left: 16rpx;
+}
+
+.shopping-btn {
+	height: 64rpx;
+	line-height: 64rpx;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	font-size: 28rpx;
+	color: #F2501A;
+	border: 1px solid #F2501A;
+	border-radius: 100rpx;
+	padding: 0 34rpx;
+	width: fit-content;
+	margin-top: 10rpx;
+}

pages/shopping-cart/shopping-cart.vue

@@ -1,690 +1,286 @@
 <!-- 购物车 -->
 <template>
-	<view class="container">
-		<view class="discount-box" v-if="discountstate == true">
-			<view class="discount">
-				<view class="discount-off" @click="discountclose">×</view>
-				<view class="discount-title">金额明细</view>
-				<view class="discount-tips">实际优惠金额以下单页为准</view>
-				<view class="discount-list">
-					<text>商品总价</text>
-					<text>￥1200</text>
-				</view>
-				<view class="discount-list2">
-					<text>满减</text>
-					<text>-￥200</text>
-				</view>
-				<view class="discount-list2">
-					<text>优惠券</text>
-					<text>-￥200</text>
-				</view>
-				<view class="discount-list2">
-					<text>共减</text>
-					<text>-￥200</text>
-				</view>
-				<view class="discount-list">
-					<text>合计(合计金额不含运费、进口税)</text>
-					<text>￥1200</text>
-				</view>
+	<view class="wrap" :style="{paddingTop: headerHeight + 'px'}">
+
+		<HeaderViewBar :hideBack="true" ref='HeaderViewBar' title='购物车' titleColor="#3333333" backgroundColor='#ffffff'
+			style="position: fixed; top: 0; z-index: 999999999;">
+			<view class="header-btn-box" :style="{width: headerContainerWidth + 'px'}">
+				<button class="gua-btn">
+					管理
+				</button>
 			</view>
-		</view>
-		<view class="status_bar">
-			<!-- 这里是状态栏 -->
-		</view>
+		</HeaderViewBar>
 
-		<view class="page-header">
-			<view class="text-center">购物车</view>
-			<block v-if="cartList.length > 0">
-				<view class="edit" v-if="btnType === 'edit'" @click="$u.throttle(btnTool('edit'), 2000)">管理</view>
-				<view class="edit" v-if="btnType === 'done'" @click="$u.throttle(btnTool('done'), 2000)">完成</view>
-			</block>
-		</view>
-		<view class="tips-box">
-			<view>限时30元购物券免费领，一人一次限领一张</view>
-			<view class="tips-del">×</view>
-		</view>
-		<!-- <u-checkbox-group> -->
-		<view class="cart-box" v-if="cartList.length > 0">
-			<u-swipe-action :show="item.show" :disabled="swipeAction" btn-width="160" :index="index"
-				v-for="(item, index) in cartList" :key="item._id"
-				@click="$u.throttle(actionClick($event, item._id), 2000)" @open="actionOpen" :options="options"
-				class="card-warp">
-				<view class="item u-border-bottom">
-					<u-checkbox-group @change="checkboxChange" width="36rpx">
-						<u-checkbox v-model="item.check" size="36" shape="circle" active-color="#F2501A"
-							class="checkbox"></u-checkbox>
-						<view class="shop-title">店铺名称</view>
-					</u-checkbox-group>
+		<!-- 	<view class="">
+			<text>限时30元购物券免费领，一人一次限领一张~</text>
+		</view> -->
+
+		<u-alert :title="title" type="warning" :closable="closable" :description="description"></u-alert>
 
+		<view class="listCount">
+			<label class="listItem" v-for="(item, index) in list" :key="index" :data-index="index"
+				:style="'right:'+item.right+'rpx'">
+				<view class="content-top">
+					<view class="checkBox" @click="cutTabClick(item)">
+						<image :src="item.select ? '../../static/circle-active.png' : '../../static/circle.png'" />
+					</view>
+					<text class="content-top-name">限源预售</text>
 				</view>
-				<view class="item u-border-bottom">
-					<u-checkbox-group @change="checkboxChange" width="36rpx">
-						<u-checkbox v-model="item.check" size="36" shape="circle" active-color="#F2501A"
-							class="checkbox"></u-checkbox>
-					</u-checkbox-group>
-					<view class="cart-img">
-						<image mode="widthFix" :src="item.product.image"
-							@click.stop="$u.throttle(gotoDetail(item.product._id), 2000)"></image>
+				<view class="content">
+					<view class="checkBox" @click="cutTabClick(item)">
+						<image :src="item.select ? '../../static/circle-active.png' : '../../static/circle.png'" />
 					</view>
-					<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
-					<view class="title-wrap" @click.stop="$u.throttle(gotoDetail(item.product._id), 2000)">
-						<view class="title u-line-1 ">{{ item.product.title }}</view>
-
-						<view class="sku">{{ item.product.cate_name }}</view>
-						<view class="price">
-							¥{{ priceInt(item.product.price) }}.{{ priceDecimal(item.product.price) }}
-							<del>10.0</del>
+					<view class="itemShow">
+						<image :src="item.goods_pic" mode="aspectFill" class="productImg"></image>
+						<view class="itemCont">
+							<view class="itemName">
+								{{item.goods_title}}
+							</view>
+							<view class="item-bottom">
+								<view class="price">
+									￥<text>{{item.goods_price}}</text>
+								</view>
+								<view class="calc_box">
+									<view class="calc_btn" @tap="addNumber(-1, index, item)">
+										<image src="../../static/less.png" mode="widthFix" />
+									</view>
+									<input type="text" disabled @input="numberInput" @blur="numberInput"
+										:value="item.number" class="calc_number" />
+									<view class="calc_btn" @click="addNumber(1, index, item)">
+										<image src="../../static/add.png" mode="widthFix" />
+									</view>
+								</view>
+							</view>
+							<view class="del" @tap="delData(index, item)">
+								<image src="../../static/close-2.png" class="" mode="widthFix"></image>
+							</view>
 						</view>
-
 					</view>
-					<u-number-box v-model="item.product.number" :min="1" :max="item.product.stock" input-width="100"
-						input-height="50" @change="valChange($event, item.product._id)"></u-number-box>
 				</view>
-			</u-swipe-action>
+			</label>
+			<view class="normal-box" v-show="list.length === 0">
+				<image src="../../static/normal-9.png" mode="widthFix" />
+				暂无购物车
+				<button type="default" class="shopping-btn">去逛逛</button>
+			</view>
 		</view>
-		<view class="page-box" v-else>
-			<view>
-				<view class="emputy">
-					<image src="../../static/normal-1.png"></image>
-					<view class="explain">
-						<view class="tips">暂无购物车</view>
+
+		<!-- <view class="footer">
+			<label class="check-row" @tap="allSelectFn">
+				<image :src="allSelect ? '../../static/circle-active.png' : '../../static/circle.png'" />
+				<text>
+					全选
+				</text>
+			</label>
+			<view class="footer-sidebar">
+				<view class="footer-sidebar-column">
+					<view class="total-money">
+						总计(不含运费):<text class="maxPrice">￥<text>{{payMoney}}</text></text>
+					</view>
+					<view class="details-row">
+						共优惠20元 查看明细
+						<image src="../../static/open-2.png" mode="widthFix"></image>
 					</view>
-					<view class="btn" @click="$u.throttle(gotoHome, 2000)">去逛逛</view>
 				</view>
+				<button type="default" class="submit-btn">结算(1)</button>
+			</view>
+		</view> -->
+
+		<view class="footer">
+			<label class="check-row" @tap="allSelectFn">
+				<image :src="allSelect ? '../../static/circle-active.png' : '../../static/circle.png'" />
+				<text>
+					全选
+				</text>
+			</label>
+			<view class="footer-sidebar">
+				<button type="default" class="border-btn">移入收藏夹</button>
+				<button type="default" class="border-btn red">删除</button>
 			</view>
 		</view>
-		<view class="bottom" v-if="cartList.length > 0">
-			<u-checkbox @change="checkedAll" v-model="checked" size="40" shape="circle" active-color="#F2501A"
-				class="checkall"><span>全选</span></u-checkbox>
-			<text class="price fill" v-if="btnType === 'edit'">
-				<view>
-					<text class="sml">总计(不含运费):</text>
-					￥{{ totalPrice }}
+
+		<!-- 金额明细-弹窗 -->
+		<view v-show="isShowDetails">
+			<view class="mask" @tap="closeDetails"></view>
+			<view class="window">
+				<view class="window-title">
+					<text>金额明细</text>
+					<text>实际优惠金额清以下单页为准</text>
 				</view>
-				<view class="discount-but" v-if="totalPrice != 0" @click="discount">
-					<text>共优惠20.00元 查看明细</text>
-					<image src="../../static/normal-1.png"></image>
+				<view class="window-row-between">
+					<text class="window-row-label">商品总价</text>
+					<text class="window-total-price">￥1223.99</text>
 				</view>
-			</text>
-			<u-button throttle-time="2000" v-if="btnType === 'edit'" @click="$u.throttle(btnClick('order'), 2000)"
-				size="medium" :ripple="true" ripple-bg-color="#F2501A" shape="circle" :customStyle="customStyle">
-				<text>
-					<text v-if="this.discountstate == false">结算</text>
-					<text v-else @click="discountclose">领卷结算</text>
-				</text>
-				<text v-if="totalCount > 0">{{ '(' + totalCount + ')' }}</text>
-			</u-button>
-			<u-button throttle-time="2000" v-if="btnType === 'done'" size="medium" :ripple="true" ripple-bg-color="#ccc"
-				shape="circle" :customStyle="customStyle3" @click="$u.throttle(btnClick('del'), 2000)">
-				移入收藏夹
-			</u-button>
-			<u-button throttle-time="2000" v-if="btnType === 'done'" size="medium" :ripple="true" ripple-bg-color="#ccc"
-				shape="circle" :customStyle="customStyle2" @click="$u.throttle(btnClick('del'), 2000)">
-				删除
-			</u-button>
+				<view class="window-row-between">
+					<text class="window-row-label">满减</text>
+					<view class="right-row">
+						-￥0.00
+						<image src="../../static/open-3.png" mode="widthFix"></image>
+					</view>
+				</view>
+				<view class="window-row-between">
+					<text class="window-row-label">优惠券</text>
+					<view class="right-row">
+						-￥13.35
+					</view>
+				</view>
+				<view class="window-bottom">
+					<view class="window-bottom-between">
+						<text class="window-row-label">共减</text>
+						<view class="right-row">
+							-￥93.53
+						</view>
+					</view>
+					<view class="window-bottom-between">
+						<text class="window-row-label">
+							合计<text class="margin">(合计金额不含运费、进口税)</text>
+						</text>
+						<view class="right-row black-font">
+							￥1129.3
+						</view>
+					</view>
+				</view>
+				<button type="default" class="window-close-btn">
+					<image src="../../static/close-2.png" mode="widthFix"></image>
+				</button>
+			</view>
 		</view>
-		<u-modal v-model="showModal" :title="title" :content="content" :title-style="titleStyle"
-			:content-style="contentStyle" :confirm-style="confirmStyle" :show-cancel-button="true" @confirm="confirm">
-		</u-modal>
-		<u-toast ref="uToast" />
+		<!-- 金额明细-弹窗  -->
+
 	</view>
 </template>
 
 <script>
-	import sortdata from '../../static/data/cartData.js';
-	 import uswipeaction from "@/uview-ui/components/u-swipe-action/u-swipe-action.vue";
+	import HeaderViewBar from '../../components/header-view-bar/header-view-bar.vue';
 	export default {
+		components: {
+			HeaderViewBar,
+		},
 		data() {
 			return {
-				loadStatus: 'loadmore',
-				cartList: [], //购物车列表
-				showModal: false, //modal弹窗
-				title: '提示', //弹窗标题
-				content: '确认将1个宝贝删除?', //弹窗内容
-				delId: '', //删除id,
-				options: [{
-					text: '移入收藏夹',
-					style: {
-						backgroundColor: '#F28A1A'
-					}
+				headerHeight: 0,
+				headerContainerWidth: '100%',
+				allSelect: false,
+				carArr: [],
+				//数量
+				goodsNumber: 0,
+				list: [{
+					goods_pic: '../../static/bg-10.png',
+					goods_title: '恒大兴安清香橄榄油健=恒大兴安清香220g',
+					goods_price: '123',
+					number: 6,
 				}, {
-					text: '删除',
-					style: {
-						backgroundColor: '#F2501A'
-					}
-				}], //u-swipe-action样式 
-				btnType: 'edit', //按钮类型
-				checked: false, //是否全选
-				swipeAction: false, //是否禁止滑动
-				// u-button样式
-				customStyle: {
-					color: '#fff',
-					backgroundColor: '#F2501A',
-					margin: '0',
-					padding: '0 20rpx',
-					width: '200rpx',
-					fontSize: '32rpx'
-				},
-				customStyle2: {
-					color: '#F2501A',
-					backgroundColor: '#fff',
-					margin: '0',
-					padding: '0 20rpx',
-					border: 'none',
-					width: '200rpx',
-					fontSize: '32rpx'
-				},
-				customStyle3: {
-					color: '#F28A1A',
-					backgroundColor: '#fff',
-					margin: '10rpx',
-					padding: '0 10rpx',
-					border: 'none',
-					width: '200rpx',
-					fontSize: '30rpx'
-				},
-				// 模态窗样式
-				titleStyle: {
-					fontSize: '36rpx'
-				},
-				contentStyle: {
-					fontSize: '36rpx'
-				},
-				confirmStyle: {
-					color: '#fff',
-					backgroundColor: '#F2501A'
-				},
-				discountstate: false //优惠页面状态true打开 false关闭
-			};
+					goods_pic: '../../static/bg-10.png',
+					goods_title: '恒大兴安清香橄榄油健=恒大兴安清香220g',
+					goods_price: '123',
+					number: 6,
+				}, {
+					goods_pic: '../../static/bg-10.png',
+					goods_title: '恒大兴安清香橄榄油健=恒大兴安清香220g',
+					goods_price: '123',
+					number: 6,
+				}, ],
+				payMoney: 0,
+
+				title: '限时30元购物券免费领，一人一次限领一张~',
+				closable: true,
+
+				//金额明细-弹窗
+				isShowDetails: true
+			}
 		},
 		onShow() {
-			this.checked = false;
-			this.getCart();
-			console.log(this.cartList);
-		},
-		computed: {
-			// 价格合计
-			totalPrice() {
-				let sumPrice = 0,
-					items = this.cartList;
-				items.forEach(val => {
-					let priceVal = parseFloat(val.product.price),
-						salesVal = parseFloat(val.product.number);
-					if (val.check) {
-						sumPrice += priceVal * salesVal;
-					}
-				});
-				// sumPrice = sumPrice == 0 ? 0 : sumPrice.toFixed(2);
-				let tofixNum = sumPrice.toFixed(2);
-				return parseFloat(tofixNum);
-			},
-			// 数量统计
-			totalCount() {
-				let totalNumber = 0,
-					items = this.cartList;
-				items.forEach(val => {
-					if (val.check) {
-						totalNumber += val.number;
-					}
-				});
-				return totalNumber;
-			},
-			// 价格整数
-			priceInt() {
-				return val => {
-					let priceStr = val.toString();
-					if (priceStr != parseInt(priceStr)) {
-						return priceStr.split('.')[0];
-					} else {
-						return priceStr;
-					}
-				};
-			},
-			// 价格小数
-			priceDecimal() {
-				return val => {
-					let priceStr = val.toString();
-					if (priceStr != parseInt(priceStr)) {
-						return priceStr.split('.')[1];
-					} else {
-						return '00';
-					}
-				};
-			}
+			setTimeout(() => {
+				const {
+					headerHeight,
+					headerContainerWidth
+				} = this.$refs['HeaderViewBar'].getHeaderStyle();
+				this.headerHeight = headerHeight;
+				this.headerContainerWidth = headerContainerWidth;
+			}, 20);
 		},
 		methods: {
-			//打开优惠页面
-			discount() {
-				this.discountstate = true
-			},
-			//关闭优惠页面
-			discountclose() {
-				this.discountstate = false
-			},
-			// 购物车列表
-			getCart() {
-				const resData = sortdata.cartData;
-				resData.forEach(val => {
-					val.show = false;
-					val.check = false;
-				});
-				this.cartList = resData;
-			},
-			gotoHome() {
-				uni.switchTab({
-					url: '/pages/tabbar/home/home'
-				});
-			},
-			// 管理按钮
-			btnTool(type) {
-				switch (type) {
-					case 'edit':
-						this.btnType = 'done';
-						this.swipeAction = true;
-						let items = this.cartList;
-						items.forEach(val => {
-							val.show = false;
-						});
-						break;
-					case 'done':
-						this.btnType = 'edit';
-						this.swipeAction = false;
+			//多选
+			cutTabClick(item) {
+				this.active = item;
+				//然后通过这个属性判断是否选中点亮和取消
+				item.select = !item.select;
+
+				let allSelect = true;
+				for (let i = 0; i < this.list.length; i++) {
+					if (!this.list[i].select) {
+						allSelect = false;
 						break;
+					}
 				}
+				this.allSelect = allSelect;
+				this.calculate();
 			},
-			// 删除
-			actionClick(index, del) {
-				this.showModal = true;
-				this.delId = del;
-			},
-			// 删除确认
-			confirm() {
-				let _self = this;
-				let delArr = [],
-					type = _self.btnType,
-					items = _self.cartList;
-				if (type === 'edit') {
-					delArr.push(_self.delId);
-				} else {
-					items.forEach(val => {
-						if (val.check) {
-							delArr.push(val._id);
-						}
-					});
-					_self.btnType = 'edit';
-				}
 
-				// 为了模拟清空购物车
-				if (delArr.length == items.length) {
-					_self.cartList = [];
-				}
 
-				_self.$refs.uToast.show({
-					title: '删除了id为' + delArr + '的商品',
-					icon: false
-				});
+			// 全选或者反选 
+			allSelectFn(e) {
+				const newAllSelect = !this.allSelect;
+				this.allSelect = newAllSelect;
+				this.list = this.list.map(car => ({
+					...car,
+					select: newAllSelect
+				}));
+				this.calculate();
 			},
-			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
-			actionOpen(index) {
-				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
-				// 原本为'false'，再次设置为'false'会无效
-				let items = this.cartList;
-				items[index].show = true;
-				items.forEach((val, idx) => {
-					if (index != idx) {
-						items[idx].show = false;
-					}
-				});
-			},
-			// 跳转详情
-			gotoDetail(id) {
-				console.log(id);
-				// uni.navigateTo({
-				//     url: '/pages/good/detail?good_id=' + id
-				// })
-			},
-			// 选中商品
-			checkboxChange(e) {
-				let items = this.cartList;
-				let checkedArr = [];
-				items.forEach(val => {
-					if (val.check) {
-						checkedArr.push(val);
-					}
-				});
-				let len = checkedArr.length;
-				// 如果选择的数组中有值，并且长度等于列表长度，就是全选
-				if (len > 0 && len == items.length) {
-					this.checked = true;
+
+			//增减数量
+			addNumber(val, idx, item) {
+				let goodsNumber = parseInt(item.number || 0);
+				goodsNumber += parseInt(val);
+				if (goodsNumber > 0) {
+
+					item.number = goodsNumber;
+					this.calculate();
+
 				} else {
-					this.checked = false;
+					uni.showToast({
+						icon: 'none',
+						title: '至少保留一件商品',
+					});
 				}
 			},
-			// 数量增减
-			valChange(e, id) {
-				// console.log(e, id);
-			},
-			// 全选
-			checkedAll() {
-				this.checked = !this.checked;
-				let flag = this.checked,
-					items = this.cartList;
-				items.forEach(val => {
-					if (flag) {
-						val.check = true;
-					} else {
-						val.check = false;
+			// 删除
+			delData(index, item) {
+				uni.showModal({
+					title: '提示',
+					confirmColor: '#F2501A',
+					content: '确定从购物车删除该商品？',
+					success: (res) => {
+						if (res.confirm) {
+							this.list.splice(index, 1);
+							this.calculate();
+						} else if (res.cancel) {
+							// console.log('用户点击取消');
+						}
 					}
 				});
 			},
-			// 结算
-			btnClick(type) {
-				let _self = this;
-				switch (type) {
-					case 'order':
-						let items = _self.cartList;
-						let checkedArr = [];
-						items.forEach(val => {
-							if (val.check) {
-								checkedArr.push(val._id);
-							}
-						});
-						let shopIds = checkedArr.toString();
-						if (!shopIds) {
-							_self.$refs.uToast.show({
-								title: '请选择要结算的商品!',
-								icon: false
-							});
-							return;
-						}
-						console.log(shopIds);
-						// uni.navigateTo({
-						//     url: '/pages/order/createOrder?cartId=' + shopIds
-						// });
-						break;
-					case 'del':
-						if (!_self.totalCount) {
-							_self.$refs.uToast.show({
-								title: '请选择要删除的商品!',
-								icon: false
-							});
-							return;
-						}
-						_self.showModal = true;
-						break;
-				}
-			}
-		}
-	};
-</script>
-
-<style lang="scss" scoped>
-	page {
-		background-color: #F2F2F2;
-	}
-
-	// 状态栏占位
-	.status_bar {
-		background-color: #F2501A;
-	}
-
-	.page-header {
-		padding: 26rpx 30rpx;
-		display: flex;
-		position: relative;
-		color: #000;
-		font-size: 36rpx;
-		background-color: #fff;
-
-		.text-center {
-			width: 100%;
-			text-align: center;
-		}
-
-		.edit {
-			position: absolute;
-			top: 50%;
-			transform: translateY(-50%);
-			right: 30rpx;
-			font-size: 32rpx;
-		}
-	}
-
-	.item {
-		display: flex;
-		justify-content: space-between;
-		padding: 20rpx;
-		align-items: center;
-
-		.cart-img {
-			width: 200rpx;
-			border-radius: 12rpx;
-			overflow: hidden;
-
-			image {
-				width: 100%;
-			}
-		}
-
-		.title-wrap {
-			width: 440rpx;
-
-			.sku {
-				margin: 20rpx 0;
-				font-size: 28rpx;
-				color: #666;
-			}
-
-			.price {
-				font-size: 32rpx;
-				color: #F2501A;
-
-				.large {
-					margin-left: 6rpx;
-					font-size: 40rpx;
-					font-weight: bold;
-				}
-
-				del {
-					margin-left: 10rpx;
-					color: #919191;
-					font-size: 24rpx;
-
-				}
-			}
-
-			.clamp {
-				overflow: hidden;
-				text-overflow: ellipsis;
-				white-space: nowrap;
-				display: block;
-			}
-
-			.title {
-				text-align: left;
-				font-size: 30rpx;
-				color: #333;
-				// margin-top: 20rpx;
-				line-height: 46rpx;
-			}
-		}
-
-		.u-numberbox {
-			position: absolute;
-			bottom: 20rpx;
-			right: 20rpx;
-		}
-	}
-
-	// emputy
-	.emputy {
-		text-align: center;
-		margin: 200rpx auto;
-		font-size: 32rpx;
-
-		image {
-			width: 582rpx;
-			height: 370rpx;
-			margin-bottom: 20rpx;
-		}
-
-		.tips {
-			font-size: 24rpx;
-			color: #999999;
-			margin-top: 20rpx;
-		}
-
-		.btn {
-			margin: 80rpx auto;
-			width: 200rpx;
-			border-radius: 32rpx;
-			line-height: 64rpx;
-			color: #F2501A;
-			font-size: 26rpx;
-			border: 1px solid #F2501A;
-		}
-	}
-
-	.bottom {
-		border-radius: 100rpx;
-		background-color: #F8F9FC;
-		padding: 0 20rpx;
-		width: 100%;
-		position: fixed;
-		left: 0;
-		bottom: var(--window-bottom);
-		display: flex;
-		align-items: center;
-		justify-content: flex-end;
-		z-index: 99;
-		height: 110rpx;
-		box-sizing: border-box;
-		padding-bottom: constant(safe-area-inset-bottom);
-		padding-bottom: env(safe-area-inset-bottom);
-
-		.checkall {
-			position: absolute;
-			left: 20rpx;
-			top: 50%;
-			transform: translateY(-50%);
-
-			span {
-				color: #000;
-				font-weight: bold;
-				font-size: 32rpx;
-			}
-		}
-
-		.price {
-			margin-right: 20rpx;
-			color: #F2501A;
-			font-size: 26rpx;
-
-			.sml {
-				margin-right: 10rpx;
-				color: #202020;
-				font-size: 30rpx;
-			}
-
-		}
-	}
-
-	.tips-box {
-		width: 100%;
-		height: 80rpx;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 0px 20rpx;
-		background-color: #FFF0C7;
-		color: #F2501A;
-		margin-bottom: 40rpx;
-	}
-
-	.tips-del {
-		font-size: 50rpx;
-	}
-
-	.card-warp {
-		margin-top: 20rpx;
-	}
-
-	.shop-title {
-		margin: 5rpx 0rpx 0 10rpx;
-		font-weight: bold;
-	}
-
-	.discount-but {
-		display: flex;
-		align-items: center;
+			// 计算选中价格
+			calculate() {
+				const list = this.list;
+				this.payMoney = list.reduce((payMoney, item) => payMoney += (item.select ? parseFloat(item.goods_price ||
+					0) * item.number : 0), 0);
+			},
 
-		image {
-			width: 40rpx;
-			height: 40rpx;
-		}
-	}
 
-	// 金额明细
-	.discount-box {
-		width: 100%;
-		min-height: 87vh;
-		background-color: rgba(0, 0, 0, 0.2);
-		position: fixed;
-		top: 0;
-		z-index: 999;
-		display: flex;
-		align-items: flex-end;
+			//金额明细-弹窗
+			showDetails() {
+				this.isShowDetails = true;
+			},
+			closeDetails() {
+				this.isShowDetails = false;
+			},
+		},
 	}
+</script>
 
-	.discount {
-		width: 100%;
-		height: 450rpx;
-		background-color: #fff;
-		border-top-left-radius: 20rpx;
-		border-top-right-radius: 20rpx;
-		background-color: #fff;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-
-		.discount-off {
-			width: 100%;
-			color: #777777;
-			font-size: 60rpx;
-			height: 30rpx;
-			display: flex;
-			justify-content: flex-end;
-			margin-right: 10rpx;
-		}
-
-		.discount-title {
-			color: #202020;
-			font-size: 32rpx;
-		}
-
-		.discount-tips {
-			color: #A7A7A7;
-			margin-top: 10rpx;
-		}
-
-		.discount-list,
-		.discount-list2 {
-			width: 100%;
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-			padding: 15rpx;
-
-			text:last-child {
-				font-weight: bold;
-			}
-		}
-
-		.discount-list2 {
-			text:last-child {
-				color: #F2501A;
-			}
 
-		}
-	}
+<style scoped lang="scss">
+	@import "./shopping-cart.css";
 </style>

pages/shopping-cart/shopping-cart1.vue

@@ -0,0 +1,690 @@
+<!-- 购物车 -->
+<template>
+	<view class="container">
+		<view class="discount-box" v-if="discountstate == true">
+			<view class="discount">
+				<view class="discount-off" @click="discountclose">×</view>
+				<view class="discount-title">金额明细</view>
+				<view class="discount-tips">实际优惠金额以下单页为准</view>
+				<view class="discount-list">
+					<text>商品总价</text>
+					<text>￥1200</text>
+				</view>
+				<view class="discount-list2">
+					<text>满减</text>
+					<text>-￥200</text>
+				</view>
+				<view class="discount-list2">
+					<text>优惠券</text>
+					<text>-￥200</text>
+				</view>
+				<view class="discount-list2">
+					<text>共减</text>
+					<text>-￥200</text>
+				</view>
+				<view class="discount-list">
+					<text>合计(合计金额不含运费、进口税)</text>
+					<text>￥1200</text>
+				</view>
+			</view>
+		</view>
+		<view class="status_bar">
+			<!-- 这里是状态栏 -->
+		</view>
+
+		<view class="page-header">
+			<view class="text-center">购物车</view>
+			<block v-if="cartList.length > 0">
+				<view class="edit" v-if="btnType === 'edit'" @click="$u.throttle(btnTool('edit'), 2000)">管理</view>
+				<view class="edit" v-if="btnType === 'done'" @click="$u.throttle(btnTool('done'), 2000)">完成</view>
+			</block>
+		</view>
+		<view class="tips-box">
+			<view>限时30元购物券免费领，一人一次限领一张</view>
+			<view class="tips-del">×</view>
+		</view>
+		<!-- <u-checkbox-group> -->
+		<view class="cart-box" v-if="cartList.length > 0">
+			<u-swipe-action :show="item.show" :disabled="swipeAction" btn-width="160" :index="index"
+				v-for="(item, index) in cartList" :key="item._id"
+				@click="$u.throttle(actionClick($event, item._id), 2000)" @open="actionOpen" :options="options"
+				class="card-warp">
+				<view class="item u-border-bottom">
+					<u-checkbox-group @change="checkboxChange" width="36rpx">
+						<u-checkbox v-model="item.check" size="36" shape="circle" active-color="#F2501A"
+							class="checkbox"></u-checkbox>
+						<view class="shop-title">店铺名称</view>
+					</u-checkbox-group>
+
+				</view>
+				<view class="item u-border-bottom">
+					<u-checkbox-group @change="checkboxChange" width="36rpx">
+						<u-checkbox v-model="item.check" size="36" shape="circle" active-color="#F2501A"
+							class="checkbox"></u-checkbox>
+					</u-checkbox-group>
+					<view class="cart-img">
+						<image mode="widthFix" :src="item.product.image"
+							@click.stop="$u.throttle(gotoDetail(item.product._id), 2000)"></image>
+					</view>
+					<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
+					<view class="title-wrap" @click.stop="$u.throttle(gotoDetail(item.product._id), 2000)">
+						<view class="title u-line-1 ">{{ item.product.title }}</view>
+
+						<view class="sku">{{ item.product.cate_name }}</view>
+						<view class="price">
+							¥{{ priceInt(item.product.price) }}.{{ priceDecimal(item.product.price) }}
+							<del>10.0</del>
+						</view>
+
+					</view>
+					<u-number-box v-model="item.product.number" :min="1" :max="item.product.stock" input-width="100"
+						input-height="50" @change="valChange($event, item.product._id)"></u-number-box>
+				</view>
+			</u-swipe-action>
+		</view>
+		<view class="page-box" v-else>
+			<view>
+				<view class="emputy">
+					<image src="../../static/normal-1.png"></image>
+					<view class="explain">
+						<view class="tips">暂无购物车</view>
+					</view>
+					<view class="btn" @click="$u.throttle(gotoHome, 2000)">去逛逛</view>
+				</view>
+			</view>
+		</view>
+		<view class="bottom" v-if="cartList.length > 0">
+			<u-checkbox @change="checkedAll" v-model="checked" size="40" shape="circle" active-color="#F2501A"
+				class="checkall"><span>全选</span></u-checkbox>
+			<text class="price fill" v-if="btnType === 'edit'">
+				<view>
+					<text class="sml">总计(不含运费):</text>
+					￥{{ totalPrice }}
+				</view>
+				<view class="discount-but" v-if="totalPrice != 0" @click="discount">
+					<text>共优惠20.00元 查看明细</text>
+					<image src="../../static/normal-1.png"></image>
+				</view>
+			</text>
+			<u-button throttle-time="2000" v-if="btnType === 'edit'" @click="$u.throttle(btnClick('order'), 2000)"
+				size="medium" :ripple="true" ripple-bg-color="#F2501A" shape="circle" :customStyle="customStyle">
+				<text>
+					<text v-if="this.discountstate == false">结算</text>
+					<text v-else @click="discountclose">领卷结算</text>
+				</text>
+				<text v-if="totalCount > 0">{{ '(' + totalCount + ')' }}</text>
+			</u-button>
+			<u-button throttle-time="2000" v-if="btnType === 'done'" size="medium" :ripple="true" ripple-bg-color="#ccc"
+				shape="circle" :customStyle="customStyle3" @click="$u.throttle(btnClick('del'), 2000)">
+				移入收藏夹
+			</u-button>
+			<u-button throttle-time="2000" v-if="btnType === 'done'" size="medium" :ripple="true" ripple-bg-color="#ccc"
+				shape="circle" :customStyle="customStyle2" @click="$u.throttle(btnClick('del'), 2000)">
+				删除
+			</u-button>
+		</view>
+		<u-modal v-model="showModal" :title="title" :content="content" :title-style="titleStyle"
+			:content-style="contentStyle" :confirm-style="confirmStyle" :show-cancel-button="true" @confirm="confirm">
+		</u-modal>
+		<u-toast ref="uToast" />
+	</view>
+</template>
+
+<script>
+	import sortdata from '../../static/data/cartData.js';
+	 import uswipeaction from "@/uview-ui/components/u-swipe-action/u-swipe-action.vue";
+	export default {
+		data() {
+			return {
+				loadStatus: 'loadmore',
+				cartList: [], //购物车列表
+				showModal: false, //modal弹窗
+				title: '提示', //弹窗标题
+				content: '确认将1个宝贝删除?', //弹窗内容
+				delId: '', //删除id,
+				options: [{
+					text: '移入收藏夹',
+					style: {
+						backgroundColor: '#F28A1A'
+					}
+				}, {
+					text: '删除',
+					style: {
+						backgroundColor: '#F2501A'
+					}
+				}], //u-swipe-action样式 
+				btnType: 'edit', //按钮类型
+				checked: false, //是否全选
+				swipeAction: false, //是否禁止滑动
+				// u-button样式
+				customStyle: {
+					color: '#fff',
+					backgroundColor: '#F2501A',
+					margin: '0',
+					padding: '0 20rpx',
+					width: '200rpx',
+					fontSize: '32rpx'
+				},
+				customStyle2: {
+					color: '#F2501A',
+					backgroundColor: '#fff',
+					margin: '0',
+					padding: '0 20rpx',
+					border: 'none',
+					width: '200rpx',
+					fontSize: '32rpx'
+				},
+				customStyle3: {
+					color: '#F28A1A',
+					backgroundColor: '#fff',
+					margin: '10rpx',
+					padding: '0 10rpx',
+					border: 'none',
+					width: '200rpx',
+					fontSize: '30rpx'
+				},
+				// 模态窗样式
+				titleStyle: {
+					fontSize: '36rpx'
+				},
+				contentStyle: {
+					fontSize: '36rpx'
+				},
+				confirmStyle: {
+					color: '#fff',
+					backgroundColor: '#F2501A'
+				},
+				discountstate: false //优惠页面状态true打开 false关闭
+			};
+		},
+		onShow() {
+			this.checked = false;
+			this.getCart();
+			console.log(this.cartList);
+		},
+		computed: {
+			// 价格合计
+			totalPrice() {
+				let sumPrice = 0,
+					items = this.cartList;
+				items.forEach(val => {
+					let priceVal = parseFloat(val.product.price),
+						salesVal = parseFloat(val.product.number);
+					if (val.check) {
+						sumPrice += priceVal * salesVal;
+					}
+				});
+				// sumPrice = sumPrice == 0 ? 0 : sumPrice.toFixed(2);
+				let tofixNum = sumPrice.toFixed(2);
+				return parseFloat(tofixNum);
+			},
+			// 数量统计
+			totalCount() {
+				let totalNumber = 0,
+					items = this.cartList;
+				items.forEach(val => {
+					if (val.check) {
+						totalNumber += val.number;
+					}
+				});
+				return totalNumber;
+			},
+			// 价格整数
+			priceInt() {
+				return val => {
+					let priceStr = val.toString();
+					if (priceStr != parseInt(priceStr)) {
+						return priceStr.split('.')[0];
+					} else {
+						return priceStr;
+					}
+				};
+			},
+			// 价格小数
+			priceDecimal() {
+				return val => {
+					let priceStr = val.toString();
+					if (priceStr != parseInt(priceStr)) {
+						return priceStr.split('.')[1];
+					} else {
+						return '00';
+					}
+				};
+			}
+		},
+		methods: {
+			//打开优惠页面
+			discount() {
+				this.discountstate = true
+			},
+			//关闭优惠页面
+			discountclose() {
+				this.discountstate = false
+			},
+			// 购物车列表
+			getCart() {
+				const resData = sortdata.cartData;
+				resData.forEach(val => {
+					val.show = false;
+					val.check = false;
+				});
+				this.cartList = resData;
+			},
+			gotoHome() {
+				uni.switchTab({
+					url: '/pages/tabbar/home/home'
+				});
+			},
+			// 管理按钮
+			btnTool(type) {
+				switch (type) {
+					case 'edit':
+						this.btnType = 'done';
+						this.swipeAction = true;
+						let items = this.cartList;
+						items.forEach(val => {
+							val.show = false;
+						});
+						break;
+					case 'done':
+						this.btnType = 'edit';
+						this.swipeAction = false;
+						break;
+				}
+			},
+			// 删除
+			actionClick(index, del) {
+				this.showModal = true;
+				this.delId = del;
+			},
+			// 删除确认
+			confirm() {
+				let _self = this;
+				let delArr = [],
+					type = _self.btnType,
+					items = _self.cartList;
+				if (type === 'edit') {
+					delArr.push(_self.delId);
+				} else {
+					items.forEach(val => {
+						if (val.check) {
+							delArr.push(val._id);
+						}
+					});
+					_self.btnType = 'edit';
+				}
+
+				// 为了模拟清空购物车
+				if (delArr.length == items.length) {
+					_self.cartList = [];
+				}
+
+				_self.$refs.uToast.show({
+					title: '删除了id为' + delArr + '的商品',
+					icon: false
+				});
+			},
+			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
+			actionOpen(index) {
+				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
+				// 原本为'false'，再次设置为'false'会无效
+				let items = this.cartList;
+				items[index].show = true;
+				items.forEach((val, idx) => {
+					if (index != idx) {
+						items[idx].show = false;
+					}
+				});
+			},
+			// 跳转详情
+			gotoDetail(id) {
+				console.log(id);
+				// uni.navigateTo({
+				//     url: '/pages/good/detail?good_id=' + id
+				// })
+			},
+			// 选中商品
+			checkboxChange(e) {
+				let items = this.cartList;
+				let checkedArr = [];
+				items.forEach(val => {
+					if (val.check) {
+						checkedArr.push(val);
+					}
+				});
+				let len = checkedArr.length;
+				// 如果选择的数组中有值，并且长度等于列表长度，就是全选
+				if (len > 0 && len == items.length) {
+					this.checked = true;
+				} else {
+					this.checked = false;
+				}
+			},
+			// 数量增减
+			valChange(e, id) {
+				// console.log(e, id);
+			},
+			// 全选
+			checkedAll() {
+				this.checked = !this.checked;
+				let flag = this.checked,
+					items = this.cartList;
+				items.forEach(val => {
+					if (flag) {
+						val.check = true;
+					} else {
+						val.check = false;
+					}
+				});
+			},
+			// 结算
+			btnClick(type) {
+				let _self = this;
+				switch (type) {
+					case 'order':
+						let items = _self.cartList;
+						let checkedArr = [];
+						items.forEach(val => {
+							if (val.check) {
+								checkedArr.push(val._id);
+							}
+						});
+						let shopIds = checkedArr.toString();
+						if (!shopIds) {
+							_self.$refs.uToast.show({
+								title: '请选择要结算的商品!',
+								icon: false
+							});
+							return;
+						}
+						console.log(shopIds);
+						// uni.navigateTo({
+						//     url: '/pages/order/createOrder?cartId=' + shopIds
+						// });
+						break;
+					case 'del':
+						if (!_self.totalCount) {
+							_self.$refs.uToast.show({
+								title: '请选择要删除的商品!',
+								icon: false
+							});
+							return;
+						}
+						_self.showModal = true;
+						break;
+				}
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	page {
+		background-color: #F2F2F2;
+	}
+
+	// 状态栏占位
+	.status_bar {
+		background-color: #F2501A;
+	}
+
+	.page-header {
+		padding: 26rpx 30rpx;
+		display: flex;
+		position: relative;
+		color: #000;
+		font-size: 36rpx;
+		background-color: #fff;
+
+		.text-center {
+			width: 100%;
+			text-align: center;
+		}
+
+		.edit {
+			position: absolute;
+			top: 50%;
+			transform: translateY(-50%);
+			right: 30rpx;
+			font-size: 32rpx;
+		}
+	}
+
+	.item {
+		display: flex;
+		justify-content: space-between;
+		padding: 20rpx;
+		align-items: center;
+
+		.cart-img {
+			width: 200rpx;
+			border-radius: 12rpx;
+			overflow: hidden;
+
+			image {
+				width: 100%;
+			}
+		}
+
+		.title-wrap {
+			width: 440rpx;
+
+			.sku {
+				margin: 20rpx 0;
+				font-size: 28rpx;
+				color: #666;
+			}
+
+			.price {
+				font-size: 32rpx;
+				color: #F2501A;
+
+				.large {
+					margin-left: 6rpx;
+					font-size: 40rpx;
+					font-weight: bold;
+				}
+
+				del {
+					margin-left: 10rpx;
+					color: #919191;
+					font-size: 24rpx;
+
+				}
+			}
+
+			.clamp {
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+				display: block;
+			}
+
+			.title {
+				text-align: left;
+				font-size: 30rpx;
+				color: #333;
+				// margin-top: 20rpx;
+				line-height: 46rpx;
+			}
+		}
+
+		.u-numberbox {
+			position: absolute;
+			bottom: 20rpx;
+			right: 20rpx;
+		}
+	}
+
+	// emputy
+	.emputy {
+		text-align: center;
+		margin: 200rpx auto;
+		font-size: 32rpx;
+
+		image {
+			width: 582rpx;
+			height: 370rpx;
+			margin-bottom: 20rpx;
+		}
+
+		.tips {
+			font-size: 24rpx;
+			color: #999999;
+			margin-top: 20rpx;
+		}
+
+		.btn {
+			margin: 80rpx auto;
+			width: 200rpx;
+			border-radius: 32rpx;
+			line-height: 64rpx;
+			color: #F2501A;
+			font-size: 26rpx;
+			border: 1px solid #F2501A;
+		}
+	}
+
+	.bottom {
+		border-radius: 100rpx;
+		background-color: #F8F9FC;
+		padding: 0 20rpx;
+		width: 100%;
+		position: fixed;
+		left: 0;
+		bottom: var(--window-bottom);
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		z-index: 99;
+		height: 110rpx;
+		box-sizing: border-box;
+		padding-bottom: constant(safe-area-inset-bottom);
+		padding-bottom: env(safe-area-inset-bottom);
+
+		.checkall {
+			position: absolute;
+			left: 20rpx;
+			top: 50%;
+			transform: translateY(-50%);
+
+			span {
+				color: #000;
+				font-weight: bold;
+				font-size: 32rpx;
+			}
+		}
+
+		.price {
+			margin-right: 20rpx;
+			color: #F2501A;
+			font-size: 26rpx;
+
+			.sml {
+				margin-right: 10rpx;
+				color: #202020;
+				font-size: 30rpx;
+			}
+
+		}
+	}
+
+	.tips-box {
+		width: 100%;
+		height: 80rpx;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0px 20rpx;
+		background-color: #FFF0C7;
+		color: #F2501A;
+		margin-bottom: 40rpx;
+	}
+
+	.tips-del {
+		font-size: 50rpx;
+	}
+
+	.card-warp {
+		margin-top: 20rpx;
+	}
+
+	.shop-title {
+		margin: 5rpx 0rpx 0 10rpx;
+		font-weight: bold;
+	}
+
+	.discount-but {
+		display: flex;
+		align-items: center;
+
+		image {
+			width: 40rpx;
+			height: 40rpx;
+		}
+	}
+
+	// 金额明细
+	.discount-box {
+		width: 100%;
+		min-height: 87vh;
+		background-color: rgba(0, 0, 0, 0.2);
+		position: fixed;
+		top: 0;
+		z-index: 999;
+		display: flex;
+		align-items: flex-end;
+	}
+
+	.discount {
+		width: 100%;
+		height: 450rpx;
+		background-color: #fff;
+		border-top-left-radius: 20rpx;
+		border-top-right-radius: 20rpx;
+		background-color: #fff;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+
+		.discount-off {
+			width: 100%;
+			color: #777777;
+			font-size: 60rpx;
+			height: 30rpx;
+			display: flex;
+			justify-content: flex-end;
+			margin-right: 10rpx;
+		}
+
+		.discount-title {
+			color: #202020;
+			font-size: 32rpx;
+		}
+
+		.discount-tips {
+			color: #A7A7A7;
+			margin-top: 10rpx;
+		}
+
+		.discount-list,
+		.discount-list2 {
+			width: 100%;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding: 15rpx;
+
+			text:last-child {
+				font-weight: bold;
+			}
+		}
+
+		.discount-list2 {
+			text:last-child {
+				color: #F2501A;
+			}
+
+		}
+	}
+</style>

static/data/cartData.js

@@ -1,359 +0,0 @@
-let cartData = [{
-        "_id": "001",
-        "add_time": 1609911170014,
-        "number": 1,
-        "checked": true,
-        "sku": {
-            "_id": "1503f3385f1bcc7d009a50fa75ed068a",
-            "image": "https://7478-tx-cloud-mix-mall-d6944c-1302673523.tcb.qcloud.la/1595657323459999375.jpg",
-            "market_price": null,
-            "name": "【三重护唇】柠檬2支装",
-            "price": 34.9,
-            "product_id": "3d23c0a05f1bcc7d00880a3b0489774c",
-            "stock": 498
-        },
-        "uid": "d81cd5415f8d02b4016f3896373ac949",
-        "product_id": "3d23c0a05f1bcc7d00880a3b0489774c",
-        "sku_id": "1503f3385f1bcc7d009a50fa75ed068a",
-        "product": {
-            "_id": "3d23c0a05f1bcc7d00880a3b0489774c",
-            "look_num": 2165,
-            "rating_ratio": "75.0",
-            "collection_num": 0,
-            "image": "https://7478-tx-cloud-mix-mall-d6944c-1302673523.tcb.qcloud.la/1595657054187475813.jpg",
-            "is_del": 0,
-            "number": 1,
-            "market_price": null,
-            "price": 16.95,
-            "title": "曼秀雷敦什果冰润唇膏滋润嘴唇保湿女男士学生补水防冻防干裂无色",
-            "add_time": 1595657341004,
-            "cate_id": "1503f3385f1ae74d008df2376ada0de2",
-            "cate_name": "口红",
-            "first_cate_name": "个护彩妆",
-            "is_hot": 1,
-            "is_sales": 1,
-            "sales": 0,
-            "stock": 7022,
-            "content": "",
-            "first_cate_id": "f47f682c5f1ae67f007ad8226bb01b44",
-            "skuData": {
-                "attrList": [{
-                        "parent": "款式",
-                        "name": "【三重护唇】柠檬"
-                    },
-                    {
-                        "name": "【卸妆护唇】草莓",
-                        "parent": "款式"
-                    },
-                    {
-                        "name": "【抵御阳光】苹果",
-                        "parent": "款式"
-                    },
-                    {
-                        "name": "【果汁清香】青提+葡萄",
-                        "parent": "款式"
-                    },
-                    {
-                        "name": "【唇妆显色】香橙+蜜柑",
-                        "parent": "款式"
-                    },
-                    {
-                        "parent": "款式",
-                        "name": "【三重护唇】柠檬2支装"
-                    },
-                    {
-                        "parent": "款式",
-                        "name": "【卸妆护唇】草莓2支装"
-                    },
-                    {
-                        "name": "【抵御阳光】苹果2支装",
-                        "parent": "款式"
-                    },
-                    {
-                        "name": "【果汁清香】青提+葡萄 2支装",
-                        "parent": "款式"
-                    },
-                    {
-                        "name": "【唇妆显色】香橙+蜜柑2支装",
-                        "parent": "款式"
-                    }
-                ],
-                "skuList": [{
-                        "stock": 500,
-                        "image": "https://7478-tx-cloud-mix-mall-d6944c-1302673523.tcb.qcloud.la/1595657309180697883.jpg",
-                        "market_price": null,
-                        "name": "【三重护唇】柠檬",
-                        "price": 16.9
-                    },
-                    {
-                        "image": "https://7478-tx-cloud-mix-mall-d6944c-1302673523.tcb.qcloud.la/1595657311909727052.jpg",
-                        "market_price": null,
-                        "name": "【卸妆护唇】草莓",
-                        "price": 16.9,
-                        "stock": 600
-                    },
-                    {
-                        "market_price": null,
-                        "name": "【抵御阳光】苹果",
-                        "price": 16.9,
-                        "stock": 500,
-                        "image": "https://7478-tx-cloud-mix-mall-d6944c-1302673523.tcb.qcloud.la/1595657314697951048.jpg"
-                    },
-                    {
-                        "price": 16.9,
-                        "stock": 600,
-                        "image": "https://7478-tx-cloud-mix-mall-d6944c-1302673523.tcb.qcloud.la/1595657317349907606.jpg",
-                        "market_price": null,
-                        "name": "【果汁清香】青提+葡萄"
-                    },
-                    {
-                        "market_price": null,
-                        "name": "【唇妆显色】香橙+蜜柑",
-                        "price": 16.9,
-                        "stock": 888,
-                        "image": "https://7478-tx-cloud-mix-mall-d6944c-1302673523.tcb.qcloud.la/1595657320538296159.jpg"
-                    },
-                    {
-                        "price": 34.9,
-                        "stock": 500,
-                        "image": "https://7478-tx-cloud-mix-mall-d6944c-1302673523.tcb.qcloud.la/1595657323459999375.jpg",
-                        "market_price": null,
-                        "name": "【三重护唇】柠檬2支装"
-                    },
-                    {
-                        "price": 34.9,
-                        "stock": 600,
-                        "image": "https://7478-tx-cloud-mix-mall-d6944c-1302673523.tcb.qcloud.la/1595657326265180617.jpg",
-                        "market_price": null,
-                        "name": "【卸妆护唇】草莓2支装"
-                    },
-                    {
-                        "name": "【抵御阳光】苹果2支装",
-                        "price": 34.9,
-                        "stock": 888,
-                        "image": "https://7478-tx-cloud-mix-mall-d6944c-1302673523.tcb.qcloud.la/1595657329511313690.jpg",
-                        "market_price": null
-                    },
-                    {
-                        "name": "【果汁清香】青提+葡萄 2支装",
-                        "price": 34.9,
-                        "stock": 999,
-                        "image": "https://7478-tx-cloud-mix-mall-d6944c-1302673523.tcb.qcloud.la/1595657336928488221.jpg",
-                        "market_price": null
-                    },
-                    {
-                        "image": "https://7478-tx-cloud-mix-mall-d6944c-1302673523.tcb.qcloud.la/1595657340512684847.jpg",
-                        "market_price": null,
-                        "name": "【唇妆显色】香橙+蜜柑2支装",
-                        "price": 34.9,
-                        "stock": 999
-                    }
-                ],
-                "specList": [{
-                    "name": "款式",
-                    "newAttr": ""
-                }]
-            },
-            "status": 1,
-            "thumb": "https://7478-tx-cloud-mix-mall-d6944c-1302673523.tcb.qcloud.la/1595657049599668876.jpg"
-        },
-        "title": "曼秀雷敦什果冰润唇膏滋润嘴唇保湿女男士学生补水防冻防干裂无色",
-        "image": "https://7478-tx-cloud-mix-mall-d6944c-1302673523.tcb.qcloud.la/1595657049599668876.jpg",
-        "price": 34.9,
-        "stock": 498,
-        "invalid": false
-    },
-    {
-        "_id": "002",
-        "add_time": 1609911161853,
-        "number": 1,
-        "checked": true,
-        "sku": {
-            "_id": "1b64dd7b5f899c370199c1245a6994a6",
-            "image": "",
-            "market_price": 0,
-            "name": "【美白提亮】全新升级小白管35g",
-            "price": 0.8,
-            "product_id": "15d399db5f1bd1420084d37a17d2c336",
-            "stock": 233
-        },
-        "uid": "d81cd5415f8d02b4016f3896373ac949",
-        "product_id": "15d399db5f1bd1420084d37a17d2c336",
-        "sku_id": "1b64dd7b5f899c370199c1245a6994a6",
-        "product": {
-            "_id": "15d399db5f1bd1420084d37a17d2c336",
-            "add_time": 1595658562878,
-            "cate_id": "9bf625a55f1aeaf20061c51741ef092c",
-            "cate_name": "隔离霜",
-            "collection_num": 0,
-            "content": "",
-            "first_cate_id": "f47f682c5f1ae67f007ad8226bb01b44",
-            "first_cate_name": "个护彩妆",
-            "image": "https://7478-tx-cloud-mix-mall-d6944c-1302673523.tcb.qcloud.la/1595658506576937405.jpg",
-            "is_del": 0,
-            "number": 3,
-            "is_hot": 1,
-            "is_sales": 1,
-            "look_num": 6242,
-            "market_price": 0,
-            "price": 0.7,
-            "sales": 2,
-            "sku": [{
-                    "_id": "d81cd5415f899b9e015bb4cc25841a86",
-                    "image": "",
-                    "market_price": 0,
-                    "name": "【修饰暗沉】紫隔离35g",
-                    "price": 0.07,
-                    "product_id": "15d399db5f1bd1420084d37a17d2c336",
-                    "stock": 595
-                },
-                {
-                    "_id": "d81cd5415f899b9e015bb4cd7f46a36f",
-                    "image": "",
-                    "market_price": 0,
-                    "name": "【美白提亮】全新升级小白管35g",
-                    "price": 0.8,
-                    "product_id": "15d399db5f1bd1420084d37a17d2c336",
-                    "stock": 309
-                },
-                {
-                    "_id": "d81cd5415f899b9e015bb4ce4dfe6a4a",
-                    "image": "",
-                    "market_price": 0,
-                    "name": "【修饰敏感泛红】绿隔离35g",
-                    "price": 0.9,
-                    "product_id": "15d399db5f1bd1420084d37a17d2c336",
-                    "stock": 876
-                }
-            ],
-            "skuData": {
-                "attrList": [{
-                        "name": "【美白提亮】全新升级小白管35g",
-                        "parent": "颜色"
-                    },
-                    {
-                        "name": "【修饰敏感泛红】绿隔离35g",
-                        "parent": "颜色"
-                    },
-                    {
-                        "name": "【修饰暗沉】紫隔离35g",
-                        "parent": "颜色"
-                    }
-                ],
-                "skuList": [{
-                        "image": "",
-                        "market_price": 0,
-                        "name": "【修饰暗沉】紫隔离35g",
-                        "price": 0.07,
-                        "product_id": "15d399db5f1bd1420084d37a17d2c336",
-                        "stock": 595
-                    },
-                    {
-                        "image": "",
-                        "market_price": 0,
-                        "name": "【美白提亮】全新升级小白管35g",
-                        "price": 0.8,
-                        "product_id": "15d399db5f1bd1420084d37a17d2c336",
-                        "stock": 309
-                    },
-                    {
-                        "image": "",
-                        "market_price": 0,
-                        "name": "【修饰敏感泛红】绿隔离35g",
-                        "price": 0.9,
-                        "product_id": "15d399db5f1bd1420084d37a17d2c336",
-                        "stock": 876
-                    }
-                ],
-                "specList": [{
-                    "name": "颜色",
-                    "newAttr": ""
-                }]
-            },
-            "status": 1,
-            "stock": 1686,
-            "thumb": "https://7478-tx-cloud-mix-mall-d6944c-1302673523.tcb.qcloud.la/1595658502634202887.jpg",
-            "title": "资生堂 Za白色新焕真皙美白隔离霜",
-            "update_time": 1602853943340
-        },
-        "title": "资生堂 Za白色新焕真皙美白隔离霜",
-        "image": "https://7478-tx-cloud-mix-mall-d6944c-1302673523.tcb.qcloud.la/1595658502634202887.jpg",
-        "price": 0.8,
-        "stock": 233,
-        "invalid": false
-    },
-    {
-        "_id": "003",
-        "add_time": 1609911148297,
-        "number": 1,
-        "checked": true,
-        "sku": {
-            "_id": "15d399db5f202a0000afdca07713f42c",
-            "image": "",
-            "name": "",
-            "price": 0.01,
-            "product_id": "94f505805f1bd20b00766b1308fbc437",
-            "stock": 86
-        },
-        "uid": "d81cd5415f8d02b4016f3896373ac949",
-        "product_id": "94f505805f1bd20b00766b1308fbc437",
-        "sku_id": "15d399db5f202a0000afdca07713f42c",
-        "product": {
-            "_id": "94f505805f1bd20b00766b1308fbc437",
-            "first_cate_id": "f47f682c5f1ae67f007ad8226bb01b44",
-            "is_del": 0,
-            "number": 2,
-            "look_num": 13290,
-            "sales": 10,
-            "update_time": 1595943424979,
-            "add_time": 1595658763127,
-            "collection_num": 0,
-            "first_cate_name": "个护彩妆",
-            "image": "https://7478-tx-cloud-mix-mall-d6944c-1302673523.tcb.qcloud.la/1595658723799535148.jpg",
-            "is_hot": 1,
-            "cate_name": "隔离霜",
-            "content": "",
-            "market_price": 68,
-            "price": 30.05,
-            "status": 1,
-            "stock": 86,
-            "title": "MR.WISH 心愿先生 多效修颜隔离霜",
-            "cate_id": "9bf625a55f1aeaf20061c51741ef092c",
-            "is_sales": 1,
-            "rating_ratio": "100.0",
-            "sku": [{
-                "_id": "15d399db5f1d0072008ceed202f2e6d8",
-                "image": "",
-                "name": "",
-                "price": 49,
-                "product_id": "94f505805f1bd20b00766b1308fbc437",
-                "stock": 986
-            }],
-            "skuData": {
-                "attrList": [
-
-                ],
-                "skuList": [{
-                    "product_id": "94f505805f1bd20b00766b1308fbc437",
-                    "stock": 986,
-                    "image": "",
-                    "name": "",
-                    "price": 0.01
-                }],
-                "specList": [
-
-                ]
-            },
-            "thumb": "https://7478-tx-cloud-mix-mall-d6944c-1302673523.tcb.qcloud.la/1595658721258946187.jpg"
-        },
-        "title": "MR.WISH 心愿先生 多效修颜隔离霜",
-        "image": "https://7478-tx-cloud-mix-mall-d6944c-1302673523.tcb.qcloud.la/1595658721258946187.jpg",
-        "price": 0.01,
-        "stock": 86,
-        "invalid": false
-    }
-]
-
-module.exports = {
-    cartData: cartData
-}