From d8ee89ff09aed2ad93a2596db8b8259cc4afde3b Mon Sep 17 00:00:00 2001
From: weipengfei <2187978347@qq.com>
Date: Mon, 27 May 2024 18:07:07 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8Dbug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/cart/cart.vue | 780 ++++++++++++++++++++++----------------------
 1 file changed, 391 insertions(+), 389 deletions(-)

diff --git a/pages/cart/cart.vue b/pages/cart/cart.vue
index 1fba6e9..edc1a3b 100644
--- a/pages/cart/cart.vue
+++ b/pages/cart/cart.vue
@@ -1,438 +1,440 @@
 <template>
-	<view class="wrap">
-		<up-navbar placeholder :autoBack="true">
-			<template #center>
-				<view
-					style="display: flex;align-items: center;width: 100%;justify-content: flex-start;margin-left: 100rpx;">
-					<view class="tabs" :class="{'tabs-active': tabsActive==index}" v-for="(item, index) in list"
-						:key="index" @click="changeTab(index)">
-						{{item}}
-					</view>
-				</view>
-			</template>
-		</up-navbar>
+  <view class="wrap">
+    <up-navbar placeholder :autoBack="true">
+      <template #center>
+        <view style="display: flex;align-items: center;width: 100%;justify-content: flex-start;margin-left: 100rpx;">
+          <view class="tabs" :class="{'tabs-active': tabsActive==index}" v-for="(item, index) in list" :key="index"
+            @click="changeTab(index)">
+            {{item}}
+          </view>
+        </view>
+      </template>
+    </up-navbar>
 
-		<swiper class="swiper-box" :current="swiperCurrent" @animationfinish="animationfinish">
-			<swiper-item class="swiper-item">
-				<scroll-view scroll-y style="height: 100%;width: 100%;">
-					<view class="page-box1" style="padding-top: 60rpx;">
-						<view class="total">
-							<view>共计<text style="color: #20B128;">{{cartList.length}}</text>件</view>
-							<view v-if="!isAdmin" @click="isAdmin=true;">管理</view>
-							<view v-else @click="isAdmin=false;">完成</view>
-						</view>
-						<view v-if="cartList.length>0" class="list">
-							<view class="shop-item" v-for="(item, index) in cartList" :key="index"
-								@click="openGoodPopup(item)">
-								<view class="shop-check" @click.stop="checkItem(item, !item.check)">
-									<image v-if="!item.check" src="@/static/icon/n-check.png"></image>
-									<image v-else src="@/static/icon/check.png"></image>
-								</view>
-								<image class="shop-img" :src="item.imgs"></image>
-								<view class="shop-content">
-									<view class="title">
-										<view class="name u-line-2">{{item.goods_name}}</view>
-										<view class="tip u-line-1">{{item.unit_name}}</view>
-									</view>
-									<view class="price-btn">
-										<view class="price">￥{{item.sell}}</view>
-										<view class="btn">
-											<view class="num">{{item.cart_num}}</view>
-											<u--icon name="plus-circle-fill" size="20" color="#20b128"></u--icon>
-										</view>
-									</view>
-								</view>
-							</view>
-						</view>
-						<view v-else style="margin-top: 100rpx;">
-							<up-empty text="购物车空空如也"
-								icon="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/29955202404260944367594.png">
-							</up-empty>
-						</view>
-						<view style="width: 100%;height: 200rpx;"></view>
-					</view>
-				</scroll-view>
-			</swiper-item>
-			<swiper-item class="swiper-item">
-				<scroll-view scroll-y style="height: 100%;width: 100%;">
-					<view class="page-box1">
-						<view v-if="frequentlyList.length>0" class="list">
-							<view class="shop-item" v-for="(item, index) in frequentlyList" :key="index"
-								@click="openGoodPopup(item)">
-								<image class="shop-img" :src="item.imgs"></image>
-								<view class="shop-content" style="width: 490rpx;">
-									<view class="title">
-										<view class="name u-line-2">{{item.name}}</view>
-										<!-- <view class="tip u-line-1">{{item.spec}}</view> -->
-										<view class="tip u-line-1">{{item.unit_name}}</view>
-									</view>
-									<view class="price-btn">
-										<view class="price">￥{{item.sell}}</view>
-										<view class="btn">
-											<up-button size="small" plain color="#20b128"
-												shape="circle">加入购物车</up-button>
-										</view>
-									</view>
-								</view>
-							</view>
-						</view>
-						<view v-else style="margin-top: 100rpx;">
-							<up-empty text="没有常买的商品"
-								icon="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/29955202404260944367594.png">
-							</up-empty>
-						</view>
-						<view style="width: 100%;height: 200rpx;"></view>
-					</view>
-				</scroll-view>
-			</swiper-item>
-		</swiper>
+    <swiper class="swiper-box" :current="swiperCurrent" @animationfinish="animationfinish">
+      <swiper-item class="swiper-item">
+        <scroll-view scroll-y style="height: 100%;width: 100%;">
+          <view class="page-box1" style="padding-top: 60rpx;">
+            <view class="total">
+              <view>共计<text style="color: #20B128;">{{cartList.length}}</text>件</view>
+              <view v-if="!isAdmin" @click="isAdmin=true;">管理</view>
+              <view v-else @click="isAdmin=false;">完成</view>
+            </view>
+            <view v-if="cartList.length>0" class="list">
+              <view class="shop-item" v-for="(item, index) in cartList" :key="index" @click="openGoodPopup(item)">
+                <view class="shop-check" @click.stop="checkItem(item, !item.check)">
+                  <image v-if="!item.check" src="@/static/icon/n-check.png"></image>
+                  <image v-else src="@/static/icon/check.png"></image>
+                </view>
+                <image class="shop-img" :src="item.imgs"></image>
+                <view class="shop-content">
+                  <view class="title">
+                    <view class="name u-line-2">{{item.goods_name}}</view>
+                    <view class="tip u-line-1">{{item.unit_name}}</view>
+                  </view>
+                  <view class="price-btn">
+                    <view class="price">￥{{item.sell}}</view>
+                    <view class="btn">
+                      <view class="num">{{item.cart_num}}</view>
+                      <u--icon name="plus-circle-fill" size="20" color="#20b128"></u--icon>
+                    </view>
+                  </view>
+                </view>
+              </view>
+            </view>
+            <view v-else style="margin-top: 100rpx;">
+              <up-empty text="购物车空空如也"
+                icon="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/29955202404260944367594.png">
+              </up-empty>
+            </view>
+            <view style="width: 100%;height: 200rpx;"></view>
+          </view>
+        </scroll-view>
+      </swiper-item>
+      <swiper-item class="swiper-item">
+        <scroll-view scroll-y style="height: 100%;width: 100%;">
+          <view class="page-box1">
+            <view v-if="frequentlyList.length>0" class="list">
+              <view class="shop-item" v-for="(item, index) in frequentlyList" :key="index" @click="openGoodPopup(item)">
+                <image class="shop-img" :src="item.imgs"></image>
+                <view class="shop-content" style="width: 490rpx;">
+                  <view class="title">
+                    <view class="name u-line-2">{{item.name}}</view>
+                    <!-- <view class="tip u-line-1">{{item.spec}}</view> -->
+                    <view class="tip u-line-1">{{item.unit_name}}</view>
+                  </view>
+                  <view class="price-btn">
+                    <view class="price">￥{{item.sell}}</view>
+                    <view class="btn">
+                      <up-button size="small" plain color="#20b128" shape="circle">加入购物车</up-button>
+                    </view>
+                  </view>
+                </view>
+              </view>
+            </view>
+            <view v-else style="margin-top: 100rpx;">
+              <up-empty text="没有常买的商品"
+                icon="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/29955202404260944367594.png">
+              </up-empty>
+            </view>
+            <view style="width: 100%;height: 200rpx;"></view>
+          </view>
+        </scroll-view>
+      </swiper-item>
+    </swiper>
 
 
-	</view>
-	<up-transition :show="tabsActive==0">
-		<view class="fiexd-btn-box cart-btn">
-			<view class="cart-check" @click="changeAll(checkAll===cartInfo.count)">
-				<image v-if="checkAll!=cartInfo.count" src="@/static/icon/n-check.png"></image>
-				<image v-else src="@/static/icon/check.png"></image>
-				<text style="font-size: 24rpx;">全选</text>
-				<text style="font-size: 24rpx;" v-if="checkAll">({{checkAll}})</text>
-			</view>
-			<view v-if="!isAdmin" class="btn-boxs">
-				<view class="all-price">
-					<view style="width: 80rpx;">合计:</view>
-					<view class="price">
-						<text style="font-size: 24rpx;">¥</text>
-						<text style="font-size: 34rpx;">{{c_price0}}</text>
-						<text style="font-size: 24rpx;">.{{c_price1}}</text>
-					</view>
-				</view>
-				<view style="width: 200rpx;">
-					<up-button color="#20b128" shape="circle" :disabled="!checkAll" @click="settleAccounts">去结算<text
-							v-if="checkAll">({{checkAll}})</text></up-button>
-				</view>
-			</view>
-			<view v-else class="btn-boxs">
-				<!-- <view style="width: 100px;margin-right: 20rpx;"><up-button size="small" plain color="#989898" shape="circle">移入收藏夹</up-button></view> -->
-				<view style="width: 100px;"><up-button @click="deleteCartList()" size="small" plain color="#989898"
-						shape="circle">删除</up-button></view>
-			</view>
-		</view>
-	</up-transition>
-	<goodPopup ref="goodRef" :show="showGoodPopup" @close="showGoodPopup=false" @change="changeGood" />
+  </view>
+  <up-transition :show="tabsActive==0">
+    <view class="fiexd-btn-box cart-btn">
+      <view class="cart-check" @click="changeAll(checkAll===cartInfo.count)">
+        <image v-if="checkAll!=cartInfo.count" src="@/static/icon/n-check.png"></image>
+        <image v-else src="@/static/icon/check.png"></image>
+        <text style="font-size: 24rpx;">全选</text>
+        <text style="font-size: 24rpx;" v-if="checkAll">({{checkAll}})</text>
+      </view>
+      <view v-if="!isAdmin" class="btn-boxs">
+        <view class="all-price">
+          <view style="width: 80rpx;">合计:</view>
+          <view class="price">
+            <text style="font-size: 24rpx;">¥</text>
+            <text style="font-size: 34rpx;">{{c_price0}}</text>
+            <text style="font-size: 24rpx;">.{{c_price1}}</text>
+          </view>
+        </view>
+        <view style="width: 200rpx;">
+          <up-button color="#20b128" shape="circle" :disabled="!checkAll" @click="settleAccounts">去结算<text
+              v-if="checkAll">({{checkAll}})</text></up-button>
+        </view>
+      </view>
+      <view v-else class="btn-boxs">
+        <!-- <view style="width: 100px;margin-right: 20rpx;"><up-button size="small" plain color="#989898" shape="circle">移入收藏夹</up-button></view> -->
+        <view style="width: 100px;"><up-button @click="deleteCartList()" size="small" plain color="#989898"
+            shape="circle">删除</up-button></view>
+      </view>
+    </view>
+  </up-transition>
+  <goodPopup ref="goodRef" :show="showGoodPopup" @close="showGoodPopup=false" @change="changeGood" />
 </template>
 
 <script setup>
-	import {
-		onShow
-	} from "@dcloudio/uni-app"
-	import {
-		computed,
-		ref,
-		watch
-	} from 'vue';
-	import {
-		cartListApi,
-		cartChangeApi,
-		cartCreateApi,
-		cartDeleteApi,
-		frequentlyPurchaseApi
-	} from "@/api/cart.js"
-	import goodPopup from "@/components/goodPopup.vue"
-	import useCartStore from "@/store/cart.js"
+  import {
+    onShow
+  } from "@dcloudio/uni-app"
+  import {
+    computed,
+    ref,
+    watch
+  } from 'vue';
+  import {
+    cartListApi,
+    cartChangeApi,
+    cartCreateApi,
+    cartDeleteApi,
+    frequentlyPurchaseApi
+  } from "@/api/cart.js"
+  import goodPopup from "@/components/goodPopup.vue"
+  import useCartStore from "@/store/cart.js"
 
-	const cartStore = useCartStore();
+  const cartStore = useCartStore();
 
-	// 创建响应式数据  
-	const list = ref(['购物车', '常买']);
-	const tabsActive = ref(0)
-	// 定义方法  
-	const changeTab = (e) => {
-		tabsActive.value = e;
-		swiperCurrent.value = e;
-	}
+  // 创建响应式数据  
+  const list = ref(['购物车', '常买']);
+  const tabsActive = ref(0)
+  // 定义方法  
+  const changeTab = (e) => {
+    tabsActive.value = e;
+    swiperCurrent.value = e;
+  }
 
-	const swiperCurrent = ref(0);
-	const animationfinish = ({
-		detail: {
-			current
-		}
-	}) => {
-		swiperCurrent.value = current;
-		tabsActive.value = current;
-		if (swiperCurrent.value == 1) getFrequentlyPurchase();
-	}
+  const swiperCurrent = ref(0);
+  const animationfinish = ({
+    detail: {
+      current
+    }
+  }) => {
+    swiperCurrent.value = current;
+    tabsActive.value = current;
+    if (swiperCurrent.value == 1) getFrequentlyPurchase();
+  }
 
-	// 结算
-	const settleAccounts = () => {
-		let list = [];
-		cartList.value.forEach(item => {
-			if (item.check) list.push(item.cart_id);
-		})
-		cartStore.setCartList(list);
-		uni.navigateTo({
-			url: '/pagesOrder/settle/settle'
-		})
-	}
-	// 删除
-	const deleteCartList = () => {
-		let list = [];
-		cartList.value.forEach(item => {
-			if (item.check) list.push(item.cart_id);
-		})
-		cartDeleteApi({
-			cart_id: list
-		}).then(() => {
-			getcartList(false);
-		})
-	}
+  // 结算
+  const settleAccounts = () => {
+    let list = [];
+    cartList.value.forEach(item => {
+      if (item.check) list.push(item.cart_id);
+    })
+    cartStore.setCartList(list);
+    uni.navigateTo({
+      url: '/pagesOrder/settle/settle'
+    })
+  }
+  // 删除
+  const deleteCartList = () => {
+    let list = [];
+    cartList.value.forEach(item => {
+      if (item.check) list.push(item.cart_id);
+    })
+    cartDeleteApi({
+      cart_id: list
+    }).then(() => {
+      getcartList(false);
+    })
+  }
 
-	// 购物车相关
-	const addCart = (id, cart_num) => { //加入购物车
-		cartCreateApi({
-			cart_num: +cart_num,
-			goods_id: id
-		}).then(res => {
-			getcartList();
-		})
-	}
-	const isAdmin = ref(false); //是否管理
+  // 购物车相关
+  const addCart = (id, cart_num) => { //加入购物车
+    cartCreateApi({
+      cart_num: +cart_num,
+      goods_id: id
+    }).then(res => {
+      getcartList();
+    })
+  }
+  const isAdmin = ref(false); //是否管理
 
 
-	// 选择商品相关
-	const showGoodPopup = ref(false);
-	const goodRef = ref(null);
-	const goodData = ref({});
-	const openGoodPopup = (item) => { // 打开数量/重量弹窗
-		goodData.value = JSON.parse(JSON.stringify(item));
-		goodRef.value.setData(goodData.value);
-		showGoodPopup.value = true;
-	};
-	const changeGood = (data) => { // 确定选择商品重量
-		showGoodPopup.value = false;
-		addCart(data.goods_id || data.id, data.cart_num);
-	}
+  // 选择商品相关
+  const showGoodPopup = ref(false);
+  const goodRef = ref(null);
+  const goodData = ref({});
+  const openGoodPopup = (item) => { // 打开数量/重量弹窗
+    goodData.value = JSON.parse(JSON.stringify(item));
+    goodRef.value.setData(goodData.value);
+    showGoodPopup.value = true;
+  };
+  const changeGood = (data) => { // 确定选择商品重量
+    showGoodPopup.value = false;
+    addCart(data.goods_id || data.id, data.cart_num);
+  }
 
-	const cartList = ref([]);
-	const cartInfo = ref({});
-	const getcartList = (check = true) => {
-		cartListApi().then(res => {
-			if (check) {
-				res.data.lists = res.data.lists.map(item => {
-					item.check = true;
-					return item;
-				})
-				checkAll.value = res.data?.count || 0
-			} else {
-				checkAll.value = 0
-			}
-			cartList.value = res.data.lists;
-			cartInfo.value = {
-				total_price: res.data?.extend.total_price || '0.00',
-				count: res.data?.count || 0
-			}
-		})
-	}
+  const cartList = ref([]);
+  const cartInfo = ref({});
+  const getcartList = (check = true) => {
+    cartListApi().then(res => {
+      if (check) {
+        res.data.lists = res.data.lists.map(item => {
+          item.check = true;
+          return item;
+        })
+        checkAll.value = res.data?.count || 0
+      } else {
+        checkAll.value = 0
+      }
+      cartList.value = res.data.lists;
+      cartInfo.value = {
+        total_price: res.data?.extend.total_price || '0.00',
+        count: res.data?.count || 0
+      }
+    })
+  }
 
-	const c_price0 = computed(() => {
-		let price = cartInfo.value.total_price + '';
-		return price.split('.')[0] || '0';
-	})
-	const c_price1 = computed(() => {
-		let price = cartInfo.value.total_price + '';
-		return price.split('.')[1] || '00';
-	})
+  const c_price0 = computed(() => {
+    let price = cartInfo.value.total_price + '';
+    return price.split('.')[0] || '0';
+  })
+  const c_price1 = computed(() => {
+    let price = cartInfo.value.total_price + '';
+    return price.split('.')[1] || '00';
+  })
 
-	// 选中
-	let checkAll = ref(0)
-	const checkItem = (item, type) => {
-		item.check = type;
-		let price = Number(cartInfo.value.total_price);
-		if (type) {
-			price += item.sell * item.cart_num;
-			checkAll.value++;
-		} else {
-			price -= item.sell * item.cart_num;
-			checkAll.value--;
-		}
-		cartInfo.value.total_price = price.toFixed(2);
-	}
-	const changeAll = (flag = false) => {
-		cartList.value.forEach(item => {
-			item.check = !flag;
-		})
-		if (!flag) checkAll.value = cartInfo.value.count;
-		else checkAll.value = 0;
-	}
+  // 选中
+  let checkAll = ref(0)
+  const checkItem = (item, type) => {
+    item.check = type;
+    let price = Number(cartInfo.value.total_price);
+    if (type) {
+      price += item.sell * item.cart_num;
+      checkAll.value++;
+    } else {
+      price -= item.sell * item.cart_num;
+      checkAll.value--;
+    }
+    cartInfo.value.total_price = price.toFixed(2);
+  }
+  const changeAll = (flag = false) => {
+    let count = 0;
+    cartList.value.forEach(item => {
+      item.check = !flag;
+      if (!flag) count += item.sell * item.cart_num;
+    })
+    if (!flag) {
+      checkAll.value = cartInfo.value.count;
+    } else {
+      checkAll.value = 0;
+    }
+    cartInfo.value.total_price = count.toFixed(2);
+  }
 
-	// 常买记录
-	const frequentlyList = ref([]);
-	const where = ref({
-		page_no: 1,
-		page_size: 25
-	})
-	const getFrequentlyPurchase = () => {
-		frequentlyPurchaseApi({
-			...where.value
-		}).then(res => {
-			frequentlyList.value = res.data;
-		})
-	}
+  // 常买记录
+  const frequentlyList = ref([]);
+  const where = ref({
+    page_no: 1,
+    page_size: 25
+  })
+  const getFrequentlyPurchase = () => {
+    frequentlyPurchaseApi({
+      ...where.value
+    }).then(res => {
+      frequentlyList.value = res.data;
+    })
+  }
 
 
-	onShow(() => {
-		getcartList();
-	})
+  onShow(() => {
+    getcartList();
+  })
 </script>
 
 <style lang="scss">
-	.tabs {
-		color: #444444;
-		font-size: 32rpx;
-		margin-right: 30rpx;
-	}
+  .tabs {
+    color: #444444;
+    font-size: 32rpx;
+    margin-right: 30rpx;
+  }
 
-	.tabs-active {
-		color: #20B128;
-		// font-size: 34rpx;
-		transition: 300ms;
-	}
+  .tabs-active {
+    color: #20B128;
+    // font-size: 34rpx;
+    transition: 300ms;
+  }
 
-	.wrap {
-		display: flex;
-		flex-direction: column;
-		height: calc(100vh - var(--window-top));
-		width: 100%;
-	}
+  .wrap {
+    display: flex;
+    flex-direction: column;
+    height: calc(100vh - var(--window-top));
+    width: 100%;
+  }
 
-	.swiper-box {
-		flex: 1;
-	}
+  .swiper-box {
+    flex: 1;
+  }
 
-	.swiper-item {
-		height: 100%;
-	}
+  .swiper-item {
+    height: 100%;
+  }
 
-	.page-box1 {
-		position: relative;
+  .page-box1 {
+    position: relative;
 
-		.total {
-			padding: 0 20rpx;
-			display: flex;
-			justify-content: space-between;
-			position: fixed;
-			top: var(--window-top);
-			left: 0;
-			right: 0;
-			background-color: #f6f6f6;
-			z-index: 100;
-			height: 60rpx;
-			line-height: 60rpx;
-			font-size: 26rpx;
-			color: #444;
-		}
+    .total {
+      padding: 0 20rpx;
+      display: flex;
+      justify-content: space-between;
+      position: fixed;
+      top: var(--window-top);
+      left: 0;
+      right: 0;
+      background-color: #f6f6f6;
+      z-index: 100;
+      height: 60rpx;
+      line-height: 60rpx;
+      font-size: 26rpx;
+      color: #444;
+    }
 
-		.list {
-			margin: 20rpx;
-			border-radius: 20rpx;
-			overflow: hidden;
+    .list {
+      margin: 20rpx;
+      border-radius: 20rpx;
+      overflow: hidden;
 
-			.shop-item {
-				padding: 20rpx;
-				border-bottom: 1rpx solid #f6f6f6;
-				background-color: #fff;
-				display: flex;
+      .shop-item {
+        padding: 20rpx;
+        border-bottom: 1rpx solid #f6f6f6;
+        background-color: #fff;
+        display: flex;
 
-				.shop-check {
-					width: 60rpx;
-					height: 120rpx;
-					display: flex;
-					align-items: center;
+        .shop-check {
+          width: 60rpx;
+          height: 120rpx;
+          display: flex;
+          align-items: center;
 
-					image {
-						width: 40rpx;
-						height: 40rpx;
-					}
-				}
+          image {
+            width: 40rpx;
+            height: 40rpx;
+          }
+        }
 
-				.shop-img {
-					height: 120rpx;
-					width: 120rpx;
-					margin-right: 20rpx;
-					border-radius: 14rpx;
-				}
+        .shop-img {
+          height: 120rpx;
+          width: 120rpx;
+          margin-right: 20rpx;
+          border-radius: 14rpx;
+        }
 
-				.shop-content {
-					width: 430rpx;
-					display: flex;
-					flex-direction: column;
-					justify-content: space-between;
+        .shop-content {
+          width: 430rpx;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
 
-					.title {
-						.name {
-							font-size: 28rpx;
-						}
+          .title {
+            .name {
+              font-size: 28rpx;
+            }
 
-						.tip {
-							color: #999;
-							font-size: 24rpx;
-							margin: 12rpx 0;
-						}
-					}
+            .tip {
+              color: #999;
+              font-size: 24rpx;
+              margin: 12rpx 0;
+            }
+          }
 
-					.price {
-						font-size: 30rpx;
-						font-weight: bold;
-						color: #F55726;
-					}
+          .price {
+            font-size: 30rpx;
+            font-weight: bold;
+            color: #F55726;
+          }
 
-					.price-btn {
-						display: flex;
-						justify-content: space-between;
+          .price-btn {
+            display: flex;
+            justify-content: space-between;
 
-						.btn {
-							display: flex;
-							align-items: center;
+            .btn {
+              display: flex;
+              align-items: center;
 
-							.num {
-								margin: 0 20rpx;
-								text-align: center;
-							}
-						}
-					}
-				}
-			}
-		}
-	}
+              .num {
+                margin: 0 20rpx;
+                text-align: center;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
 
-	.cart-btn {
+  .cart-btn {
 
-		.cart-check {
-			display: flex;
-			align-items: center;
+    .cart-check {
+      display: flex;
+      align-items: center;
 
-			image {
-				width: 40rpx;
-				height: 40rpx;
-				margin: 0 10rpx;
-			}
-		}
+      image {
+        width: 40rpx;
+        height: 40rpx;
+        margin: 0 10rpx;
+      }
+    }
 
-		.btn-boxs {
-			display: flex;
+    .btn-boxs {
+      display: flex;
 
-			.all-price {
-				display: flex;
-				align-items: center;
-				margin-right: 20rpx;
+      .all-price {
+        display: flex;
+        align-items: center;
+        margin-right: 20rpx;
 
-				.price {
-					color: #20B128;
-					display: table-cell;
-					vertical-align: bottom;
-					font-weight: bold;
-				}
-			}
+        .price {
+          color: #20B128;
+          display: table-cell;
+          vertical-align: bottom;
+          font-weight: bold;
+        }
+      }
 
-		}
-	}
+    }
+  }
 </style>
\ No newline at end of file