Skip to content

B
buildingAgricultureSharing-miniapp
Commit 476c550e authored by 张娇（东信）'s avatar 张娇（东信）
Browse files
Options

购物车跳转

parent ef4d870d
Show whitespace changes
Inline Side-by-side
Showing with 350 additions and 0 deletions
src/pages.json
View file @ 476c550e
......@@ -24,6 +24,18 @@
"style": {
"navigationBarTitleText": "预售"
}
},
{
"path": "pages/detail/detail",
"style": {
"navigationBarTitleText": "详情页"
}
},
{
"path": "pages/cart/cart",
"style": {
"navigationBarTitleText": "购物车"
}
}
],
"globalStyle": {
......
src/pages/cart/cart.vue 0 → 100644
View file @ 476c550e
<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
View file @ 476c550e
......@@ -138,6 +138,7 @@ page {
.top {
width: 750rpx;
height: 128rpx;
margin-top: 40rpx;
background: #ffffff;
}
.nav {
......
src/pages/index/presale.vue
View file @ 476c550e
......@@ -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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment