购物车跳转

src/pages.json

@@ -24,6 +24,18 @@
 			"style": {
 				"navigationBarTitleText": "预售"
 			}
+		},
+		{
+			"path": "pages/detail/detail",
+			"style": {
+				"navigationBarTitleText": "详情页"
+			}
+		},
+		{
+			"path": "pages/cart/cart",
+			"style": {
+				"navigationBarTitleText": "购物车"
+			}
 		}
 	],
 	"globalStyle": {

src/pages/cart/cart.vue

+<template>
+  <view class="shopping">
+    <view class="order-form">
+      <view class="order-form-view">
+        <view class="dianming-view">
+          <view class="dianming-checkbox"></view>
+          <view class="leixing">店铺</view>
+          <view class="dianming">杨家黄焖鸡</view>
+        </view>
+
+        <view class="shangpin-view">
+          <view class="commodity-checkbox"></view>
+          <img class="shangpin-tu" src="/src/static/assets/fruit.png" alt="" />
+          <view class="shangpin-name">招牌黄焖鸡+米饭（土豆+生菜）</view>
+          <view class="biaoqian">约1000克</view>
+          <view class="jiage-view">
+            <text class="jiage-fuhao">￥</text>
+            <text class="shangpin-zhengshu">28</text>
+            <text class="shangpin-xiaoshu">.8</text>
+          </view>
+          <view class="anniu-view">
+            <view class="anniu-jian">-</view>
+            <view class="anniu-shuliang">1</view>
+            <view class="anniu-jia">+</view>
+          </view>
+        </view>
+      </view>
+      <view class="order-form-view">
+        <view class="dianming-view">
+          <view class="dianming-checkbox"></view>
+          <view class="leixing">店铺</view>
+          <view class="dianming">杨家黄焖鸡</view>
+        </view>
+
+        <view class="shangpin-view">
+          <view class="commodity-checkbox"></view>
+          <img class="shangpin-tu" src="/src/static/assets/fruit.png" alt="" />
+          <view class="shangpin-name">招牌黄焖鸡+米饭（土豆+生菜）</view>
+          <view class="biaoqian">约1000克</view>
+          <view class="jiage-view">
+            <text class="jiage-fuhao">￥</text>
+            <text class="shangpin-zhengshu">28</text>
+            <text class="shangpin-xiaoshu">.8</text>
+          </view>
+          <view class="anniu-view">
+            <view class="anniu-jian">-</view>
+            <view class="anniu-shuliang">1</view>
+            <view class="anniu-jia">+</view>
+          </view>
+        </view>
+      </view>
+      <view class="shangpin-view">
+        <view class="commodity-checkbox"></view>
+        <img class="shangpin-tu" src="/src/static/assets/fruit.png" alt="" />
+        <view class="shangpin-name">招牌黄焖鸡+米饭（土豆+生菜）</view>
+        <view class="biaoqian">约1000克</view>
+        <view class="jiage-view">
+          <text class="jiage-fuhao">￥</text>
+          <text class="shangpin-zhengshu">28</text>
+          <text class="shangpin-xiaoshu">.8</text>
+        </view>
+        <view class="anniu-view">
+          <view class="anniu-jian">-</view>
+          <view class="anniu-shuliang">1</view>
+          <view class="anniu-jia">+</view>
+        </view>
+      </view>
+    </view>
+  </view>
+
+  <view class="jieshuan">
+    <view class="jieshuan-checkbox"></view>
+    <text class="checkbox-miaosu">全选</text>
+    <view class="heji">
+      合计：
+      <text class="heji-jiage-fuhao">￥</text>
+      <text class="heji-shangpin-zhengshu">28</text>
+      <text class="heji-shangpin-xiaoshu">.8</text>
+    </view>
+    <view class="jieshuan-anniu">去结算(28.8)</view>
+  </view>
+</template>
+
+<script setup>
+const value = ref < boolean > true;
+</script>
+
+<style lang="scss" scoped>
+page {
+  background: #f3f3f3;
+  height: 100%;
+}
+.shopping {
+  width: 710rpx;
+  height: auto;
+  padding: 20rpx;
+}
+.order-form {
+  width: 750rpx;
+  height: auto;
+  border-radius: 16rpx;
+  padding: 20rpx;
+  background: #ffffff;
+}
+.order-form-view {
+  width: 710rpx;
+  height: auto;
+  border-radius: 16rpx;
+  background: #ffffff;
+}
+.dianming-view {
+  margin-left: 20rpx;
+  display: flex;
+}
+.dianming-checkbox {
+  width: 32rpx;
+  height: 32rpx;
+  margin-top: 30rpx;
+  border-radius: 50%;
+  background-color: #eb1818;
+}
+.leixing {
+  width: 91rpx;
+  height: 27rpx;
+  border-radius: 8rpx;
+  font-size: 20rpx;
+  background: #f12a2a;
+  text-align: center;
+  line-height: 27rpx;
+  margin-left: 22rpx;
+  margin-top: 33rpx;
+  color: #ffffff;
+}
+.dianming {
+  width: 280rpx;
+  height: 28rpx;
+  font-size: 28rpx;
+  line-height: 28rpx;
+  margin-top: 32rpx;
+  margin-left: 11rpx;
+  color: #333333;
+}
+.xunhuan-view {
+  width: 710rpx;
+  // padding-bottom: 40rpx;
+  border-radius: 16rpx;
+  margin-top: 20rpx;
+  margin-left: 20rpx;
+  background: #ffffff;
+}
+.shangpin-view {
+  width: 710rpx;
+  height: 200rpx;
+  display: flex;
+  border-radius: 16rpx;
+  padding: 20rpx;
+}
+.commodity-checkbox {
+  width: 32rpx;
+  height: 32rpx;
+  margin-top: 84rpx;
+  border-radius: 50%;
+  background-color: #eb1818;
+}
+
+.shangpin-tu {
+  width: 170rpx;
+  height: 170rpx;
+  border-radius: 12rpx;
+  margin-left: 22rpx;
+  margin-top: 19rpx;
+}
+.shangpin-name {
+  width: 397rpx;
+  height: 28rpx;
+  font-size: 26rpx;
+  line-height: 28rpx;
+  color: #333333;
+  margin-left: 23rpx;
+  margin-top: 31rpx;
+}
+.biaoqian {
+  width: 125rpx;
+  height: 40rpx;
+  border-radius: 8rpx;
+  background: #f2f2f2;
+  font-size: 24rpx;
+  line-height: 40rpx;
+  text-align: center;
+  color: #333333;
+  margin-left: -400rpx;
+  margin-top: 81rpx;
+}
+.jiage-view {
+  width: 88rpx;
+  height: 36rpx;
+  font-size: 32rpx;
+  line-height: 32rpx;
+  color: #f12a2a;
+  margin-left: -130rpx;
+  margin-top: 156rpx;
+}
+.jiage-fuhao {
+  font-weight: 400;
+  font-size: 24rpx;
+}
+.shangpin-zhengshu {
+  font-weight: 400;
+  font-size: 36rpx;
+}
+.shangpin-xiaoshu {
+  font-weight: 400;
+  font-size: 24rpx;
+}
+.anniu-view {
+  display: flex;
+  width: 134rpx;
+  height: 45rpx;
+  border-radius: 23rpx;
+  background: #ffffff;
+  box-sizing: border-box;
+  border: 1px solid #999999;
+  margin-top: 153rpx;
+  margin-left: 213rpx;
+}
+.anniu-jian {
+  width: 42rpx;
+  height: 45rpx;
+  line-height: 37rpx;
+  text-align: center;
+  font-size: 24rpx;
+  border-radius: 23rpx 0rpx 0rpx 23rpx;
+}
+.anniu-shuliang {
+  width: 50rpx;
+  height: 45rpx;
+  line-height: 45rpx;
+  text-align: center;
+  font-size: 24rpx;
+  border-left: 1px solid #999999;
+  border-right: 1px solid #999999;
+}
+.anniu-jia {
+  width: 42rpx;
+  height: 45rpx;
+  line-height: 37rpx;
+  text-align: center;
+  font-size: 24rpx;
+  border-radius: 0rpx 23rpx 23rpx 0rpx;
+}
+.jieshuan {
+  width: 750rpx;
+  height: 92rpx;
+  margin-top: 15%;
+  display: flex;
+  background: #fbfbfb;
+}
+.jieshuan-checkbox {
+  width: 32rpx;
+  height: 32rpx;
+  margin-top: 28rpx;
+  margin-left: 23rpx;
+  border-radius: 50%;
+  background-color: #eb1818;
+}
+.wd-checkbox__shape {
+  width: var(--wot-checkbox-size, 44rpx) !important;
+  height: var(--wot-checkbox-size, 44rpx) !important;
+}
+.checkbox-miaosu {
+  width: 48rpx;
+  height: 24rpx;
+  font-size: 24rpx;
+  line-height: 24rpx;
+  color: #333333;
+  margin-top: 34rpx;
+  margin-left: 21rpx;
+}
+.heji {
+  width: 184rpx;
+  height: 36rpx;
+  font-weight: 400;
+  font-size: 28rpx;
+  margin-left: 20rpx;
+  margin-top: 25rpx;
+  color: #333333;
+  display: flex;
+}
+.heji-jiage-fuhao {
+  font-weight: 400;
+  font-size: 28rpx;
+  margin-left: -20rpx;
+  color: #f12a2a;
+}
+.heji-shangpin-zhengshu {
+  font-weight: 400;
+  font-size: 36rpx;
+  margin-top: -6rpx;
+  color: #f12a2a;
+}
+.heji-shangpin-xiaoshu {
+  font-weight: 400;
+  font-size: 24rpx;
+  margin-top: 6rpx;
+  color: #f12a2a;
+}
+.jieshuan-anniu {
+  width: 192rpx;
+  height: 74rpx;
+  border-radius: 37rpx;
+  line-height: 74rpx;
+  text-align: center;
+  margin-top: 9rpx;
+  margin-left: 210rpx;
+  background: linear-gradient(90deg, #f74040 0%, #eb1818 100%);
+  font-size: 28rpx;
+  color: #ffffff;
+}
+</style>

src/pages/index/building.vue

@@ -138,6 +138,7 @@ page {
 .top {
   width: 750rpx;
   height: 128rpx;
+  margin-top: 40rpx;
   background: #ffffff;
 }
 .nav {

src/pages/index/presale.vue

@@ -126,6 +126,10 @@
       </view>
     </view>
   </view>
+  <!-- 购物车悬浮按钮 -->
+  <view class="cart-floating">
+    <img @tap="toCart" src="/static/presale/cart.png" style="width: 48rpx; height: 46rpx" />
+  </view>
 </template>
 
 <script setup>
@@ -243,6 +247,12 @@ function onChange(e) {
 const choice = (index) => {
   light.value = index;
 };
+function toCart() {
+  // TODO: 跳转到筑农严选
+  xma.navigateTo({
+    url: '/pages/cart/cart',
+  });
+}
 </script>
 
 <style lang="scss" scoped>
@@ -435,4 +445,12 @@ page {
   line-height: 14px;
   color: #ffffff;
 }
+.cart-floating {
+  position: fixed;
+  right: 20rpx;
+  bottom: 100rpx;
+  width: 80rpx;
+  height: 80rpx;
+  z-index: 99;
+}
 </style>