Skip to content

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

Merge remote-tracking branch 'origin/master'

parents 927851d8 fc2409a4
Hide whitespace changes
Inline Side-by-side
Showing with 601 additions and 304 deletions
src/pages/cart/cart(old).vue 0 → 100644
View file @ 5bb130c2
<template>
<view class="shopping">
<view class="order-form">
<view class="order-form-view">
<view class="trade-information">
<view class="trade-checkbox"></view>
<view class="store">店铺</view>
<view class="trade-name">杨家黄焖鸡</view>
</view>
<view class="commodity-information">
<view class="commodity-checkbox"></view>
<img class="commodity-picture" src="/src/static/assets/fruit.png" alt="" />
<view class="commodity-name">招牌黄焖鸡+米饭（土豆+生菜）</view>
<view class="label">约1000克</view>
<view class="price-information">
<text class="price-symbol">￥</text>
<text class="price-integer">28</text>
<text class="price-decimals">.8</text>
</view>
<view class="quantity-commodity">
<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="trade-information">
<view class="trade-checkbox"></view>
<view class="store">店铺</view>
<view class="trade-name">杨家黄焖鸡</view>
</view>
<view class="commodity-information">
<view class="commodity-checkbox"></view>
<img class="commodity-picture" src="/src/static/assets/fruit.png" alt="" />
<view class="commodity-name">招牌黄焖鸡+米饭（土豆+生菜）</view>
<view class="label">约1000克</view>
<view class="price-information">
<text class="price-symbol">￥</text>
<text class="price-integer">28</text>
<text class="price-decimals">.8</text>
</view>
<view class="quantity-commodity">
<view class="anniu-jian">-</view>
<view class="anniu-shuliang">1</view>
<view class="anniu-jia">+</view>
</view>
</view>
</view>
<view class="commodity-information">
<view class="commodity-checkbox"></view>
<img class="commodity-picture" src="/src/static/assets/fruit.png" alt="" />
<view class="commodity-name">招牌黄焖鸡+米饭（土豆+生菜）</view>
<view class="label">约1000克</view>
<view class="price-information">
<text class="price-symbol">￥</text>
<text class="price-integer">28</text>
<text class="price-decimals">.8</text>
</view>
<view class="quantity-commodity">
<view class="anniu-jian">-</view>
<view class="anniu-shuliang">1</view>
<view class="anniu-jia">+</view>
</view>
</view>
</view>
</view>
<wd-icon name="check-circle-filled" size="22px" style="color: red"></wd-icon>
<view class="final-statement">
<view class="final-statement-checkbox"></view>
<text class="check-all">全选</text>
<view class="total">
合计：
<text class="total-price-symbol">￥</text>
<text class="total-price-integer">28</text>
<text class="total-price-decimals">.8</text>
</view>
<view class="final-price-button">去结算(28.8)</view>
</view>
</template>
<script setup>
const list = [
{
shopName: '杨家黄焖鸡',
type: '店铺',
isChecked: false,
children: [
{
name: '黄焖鸡',
price: '28.8',
count: 1,
tag: '约1000克',
isChecked: false,
},
],
},
];
</script>
<style lang="scss" scoped>
page {
background: #f3f3f3;
height: 100%;
}
.shopping {
width: 710rpx;
height: auto;
// overflow: hidden;
}
.order-form {
width: 750rpx;
height: auto;
border-radius: 16rpx;
padding: 20rpx;
}
.order-form-view {
width: 710rpx;
height: auto;
overflow: hidden;
border-radius: 16rpx;
margin-top: 20rpx;
background: #ffffff;
}
.trade-information {
margin-left: 20rpx;
display: flex;
}
.trade-checkbox {
width: 32rpx;
height: 32rpx;
margin-top: 30rpx;
border-radius: 50%;
}
.store {
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;
}
.trade-name {
width: 280rpx;
height: 28rpx;
font-size: 28rpx;
line-height: 28rpx;
margin-top: 32rpx;
margin-left: 11rpx;
color: #333333;
}
.xunhuan-view {
width: 710rpx;
border-radius: 16rpx;
margin-top: 20rpx;
margin-left: 20rpx;
background: #ffffff;
}
.commodity-information {
width: 670rpx;
height: auto;
overflow: hidden;
display: flex;
border-radius: 16rpx;
padding: 20rpx;
margin-top: -23rpx;
background: #ffffff;
}
.commodity-checkbox {
width: 32rpx;
height: 32rpx;
margin-top: 84rpx;
border-radius: 50%;
background-color: #eb1818;
}
.commodity-picture {
width: 170rpx;
height: 170rpx;
border-radius: 12rpx;
margin-left: 22rpx;
margin-top: 19rpx;
}
.commodity-name {
width: 397rpx;
height: 28rpx;
font-size: 26rpx;
line-height: 28rpx;
color: #333333;
margin-left: 23rpx;
margin-top: 31rpx;
}
.label {
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;
}
.price-information {
width: 88rpx;
height: 36rpx;
font-size: 32rpx;
line-height: 32rpx;
color: #f12a2a;
margin-left: -130rpx;
margin-top: 156rpx;
}
.price-symbol {
font-weight: 400;
font-size: 24rpx;
}
.price-integer {
font-weight: 400;
font-size: 36rpx;
}
.price-decimals {
font-weight: 400;
font-size: 24rpx;
}
.quantity-commodity {
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;
}
.final-statement {
width: 750rpx;
height: 92rpx;
margin-top: 100rpx;
display: flex;
background: #fbfbfb;
}
.final-statement-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;
}
.check-all {
width: 48rpx;
height: 24rpx;
font-size: 24rpx;
line-height: 24rpx;
color: #333333;
margin-top: 34rpx;
margin-left: 21rpx;
}
.total {
width: 184rpx;
height: 36rpx;
font-weight: 400;
font-size: 28rpx;
margin-left: 20rpx;
margin-top: 25rpx;
color: #333333;
display: flex;
}
.total-price-symbol {
font-weight: 400;
font-size: 28rpx;
margin-left: -20rpx;
color: #f12a2a;
}
.total-price-integer {
font-weight: 400;
font-size: 36rpx;
margin-top: -6rpx;
color: #f12a2a;
}
.total-price-decimals {
font-weight: 400;
font-size: 24rpx;
margin-top: 6rpx;
color: #f12a2a;
}
.final-price-button {
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/cart/cart.vue
View file @ 5bb130c2
<template> <template>
<view class="shopping"> <div class="cart-wrap">
<view class="order-form"> <div class="shop" v-for="(shop, i) in list" :key="i">
<view class="order-form-view"> <div class="flex-align-center shop-info">
<view class="trade-information"> <div
<view class="trade-checkbox"></view> class="check"
<view class="store">店铺</view> :class="{ 'is-checked': shop.isChecked }"
<view class="trade-name">杨家黄焖鸡</view> @click="changeShopChecked(shop)"
</view> >
<wd-icon v-if="shop.isChecked" name="check1"></wd-icon>
</div>
<div class="type">{{ shop.type }}</div>
<div class="shop-name">{{ shop.shopName }}</div>
</div>
<div class="commodity-list">
<div class="commodity-item flex-align-center" v-for="(item, j) in shop.children" :key="j">
<div
class="check"
:class="{ 'is-checked': item.isChecked }"
@click="changeCommodityChecked(item, shop)"
>
<wd-icon v-if="item.isChecked" name="check1"></wd-icon>
</div>
<img :src="item.img" alt="" />
<div class="commodity-info">
<div class="name">{{ item.name }}</div>
<div class="tag">{{ item.tag }}</div>
<div class="flex-between">
<div class="price">
<span>￥</span>
{{ item.price }}
</div>
<wd-input-number v-model="item.count" />
</div>
</div>
</div>
</div>
</div>
<view class="commodity-information"> <div class="total flex-between">
<view class="commodity-checkbox"></view> <div class="left flex-align-center">
<img class="commodity-picture" src="/src/static/assets/fruit.png" alt="" /> <div class="flex-align-center check-box">
<view class="commodity-name">招牌黄焖鸡+米饭（土豆+生菜）</view> <div class="check" :class="{ 'is-checked': checkedAll }" @click="changeCheckedAll()">
<view class="label">约1000克</view> <wd-icon v-if="checkedAll" name="check1"></wd-icon>
<view class="price-information"> </div>
<text class="price-symbol">￥</text> 全选
<text class="price-integer">28</text> </div>
<text class="price-decimals">.8</text> <div class="price">
</view> 合计:
<view class="quantity-commodity"> <span>￥{{ totalPrice }}</span>
<view class="anniu-jian">-</view> </div>
<view class="anniu-shuliang">1</view> </div>
<view class="anniu-jia">+</view> <div class="submit">去结算({{ totalPrice }})</div>
</view> </div>
</view> </div>
</view>
<view class="order-form-view">
<view class="trade-information">
<view class="trade-checkbox"></view>
<view class="store">店铺</view>
<view class="trade-name">杨家黄焖鸡</view>
</view>
<view class="commodity-information">
<view class="commodity-checkbox"></view>
<img class="commodity-picture" src="/src/static/assets/fruit.png" alt="" />
<view class="commodity-name">招牌黄焖鸡+米饭（土豆+生菜）</view>
<view class="label">约1000克</view>
<view class="price-information">
<text class="price-symbol">￥</text>
<text class="price-integer">28</text>
<text class="price-decimals">.8</text>
</view>
<view class="quantity-commodity">
<view class="anniu-jian">-</view>
<view class="anniu-shuliang">1</view>
<view class="anniu-jia">+</view>
</view>
</view>
</view>
<view class="commodity-information">
<view class="commodity-checkbox"></view>
<img class="commodity-picture" src="/src/static/assets/fruit.png" alt="" />
<view class="commodity-name">招牌黄焖鸡+米饭（土豆+生菜）</view>
<view class="label">约1000克</view>
<view class="price-information">
<text class="price-symbol">￥</text>
<text class="price-integer">28</text>
<text class="price-decimals">.8</text>
</view>
<view class="quantity-commodity">
<view class="anniu-jian">-</view>
<view class="anniu-shuliang">1</view>
<view class="anniu-jia">+</view>
</view>
</view>
</view>
</view>
<view class="final-statement">
<view class="final-statement-checkbox"></view>
<text class="check-all">全选</text>
<view class="total">
合计：
<text class="total-price-symbol">￥</text>
<text class="total-price-integer">28</text>
<text class="total-price-decimals">.8</text>
</view>
<view class="final-price-button">去结算(28.8)</view>
</view>
</template> </template>
<script setup> <script setup>
const value = ref < boolean > true; import { ref, computed } from 'vue';
// 计算是否全选
const checkedAll = computed(() => {
return list.value.every((item) => item.isChecked);
});
const totalPrice = computed(() => {
let total = 0;
list.value.forEach((item) => {
item.children.forEach((c) => {
if (c.isChecked) {
total += c.price;
}
});
});
return total || 0;
});
const list = ref([
{
shopName: '杨家黄焖鸡',
type: '店铺',
isChecked: true,
children: [
{
img: '/src/static/assets/fruit.png',
name: '招牌黄焖鸡+米饭（土豆+生菜）',
price: 28.8,
count: 1,
tag: '约1000克',
isChecked: false,
},
],
},
{
shopName: '杨家黄焖鸡',
type: '店铺',
isChecked: false,
children: [
{
img: '/src/static/assets/fruit.png',
name: '招牌黄焖鸡+米饭（土豆+生菜）',
price: 28.8,
count: 1,
tag: '约1000克',
isChecked: false,
},
{
img: '/src/static/assets/fruit.png',
name: '招牌黄焖鸡+米饭（土豆+生菜）',
price: 28.8,
count: 1,
tag: '约1000克',
isChecked: false,
},
{
img: '/src/static/assets/fruit.png',
name: '招牌黄焖鸡+米饭（土豆+生菜）',
price: 28.8,
count: 1,
tag: '约1000克',
isChecked: false,
},
],
},
]);
// 店铺
const changeShopChecked = (s) => {
s.isChecked = !s.isChecked;
s.children.forEach((v) => {
v.isChecked = s.isChecked;
});
};
// 商品 店铺
const changeCommodityChecked = (c, s) => {
c.isChecked = !c.isChecked;
s.isChecked = s.children.every((v) => v.isChecked);
};
// 全选
const changeCheckedAll = () => {
const temp = checkedAll.value;
list.value.forEach((v) => {
v.isChecked = temp;
changeShopChecked(v);
});
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
page { .flex-between {
background: #f3f3f3;
height: 100%;
}
.shopping {
width: 710rpx;
height: auto;
// overflow: hidden;
}
.order-form {
width: 750rpx;
height: auto;
border-radius: 16rpx;
padding: 20rpx;
}
.order-form-view {
width: 710rpx;
height: auto;
overflow: hidden;
border-radius: 16rpx;
margin-top: 20rpx;
background: #ffffff;
}
.trade-information {
margin-left: 20rpx;
display: flex; display: flex;
justify-content: space-between;
align-items: center;
} }
.trade-checkbox { .flex-align-center {
width: 32rpx;
height: 32rpx;
margin-top: 30rpx;
border-radius: 50%;
}
.store {
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;
}
.trade-name {
width: 280rpx;
height: 28rpx;
font-size: 28rpx;
line-height: 28rpx;
margin-top: 32rpx;
margin-left: 11rpx;
color: #333333;
}
.xunhuan-view {
width: 710rpx;
border-radius: 16rpx;
margin-top: 20rpx;
margin-left: 20rpx;
background: #ffffff;
}
.commodity-information {
width: 670rpx;
height: auto;
overflow: hidden;
display: flex; display: flex;
border-radius: 16rpx; align-items: center;
padding: 20rpx;
margin-top: -23rpx;
background: #ffffff;
}
.commodity-checkbox {
width: 32rpx;
height: 32rpx;
margin-top: 84rpx;
border-radius: 50%;
background-color: #eb1818;
}
.commodity-picture {
width: 170rpx;
height: 170rpx;
border-radius: 12rpx;
margin-left: 22rpx;
margin-top: 19rpx;
}
.commodity-name {
width: 397rpx;
height: 28rpx;
font-size: 26rpx;
line-height: 28rpx;
color: #333333;
margin-left: 23rpx;
margin-top: 31rpx;
}
.label {
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;
}
.price-information {
width: 88rpx;
height: 36rpx;
font-size: 32rpx;
line-height: 32rpx;
color: #f12a2a;
margin-left: -130rpx;
margin-top: 156rpx;
}
.price-symbol {
font-weight: 400;
font-size: 24rpx;
} }
.price-integer { uni-page-body {
font-weight: 400; height: 100%;
font-size: 36rpx;
}
.price-decimals {
font-weight: 400;
font-size: 24rpx;
} }
.quantity-commodity { .cart-wrap {
display: flex; height: 100%;
width: 134rpx; background-color: #f6f6f6;
height: 45rpx; position: relative;
border-radius: 23rpx; padding: 20rpx;
background: #ffffff; padding-bottom: 0;
box-sizing: border-box; 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;
}
.final-statement {
width: 750rpx;
height: 92rpx;
margin-top: 100rpx;
display: flex; display: flex;
background: #fbfbfb; flex-direction: column;
} .check {
.final-statement-checkbox { width: 32rpx;
width: 32rpx; height: 32rpx;
height: 32rpx; border-radius: 50%;
margin-top: 28rpx; box-sizing: border-box;
margin-left: 23rpx; border: 1px solid #707070;
border-radius: 50%; display: flex;
background-color: #eb1818; align-items: center;
} justify-content: center;
.wd-checkbox__shape { &.is-checked {
width: var(--wot-checkbox-size, 44rpx) !important; border-color: #f12a2a;
height: var(--wot-checkbox-size, 44rpx) !important; background: #f12a2a;
} color: #fff;
.check-all { }
width: 48rpx; .wd-icon {
height: 24rpx; font-size: 25rpx;
font-size: 24rpx; }
line-height: 24rpx; }
color: #333333; .shop {
margin-top: 34rpx; background-color: #fff;
margin-left: 21rpx; padding: 32rpx 20rpx;
} margin-bottom: 20rpx;
.total {
width: 184rpx; .shop-info {
height: 36rpx; .type {
font-weight: 400; padding: 3rpx 6rpx;
font-size: 28rpx; font-size: 20rpx;
margin-left: 20rpx; background-color: #f12a2a;
margin-top: 25rpx; color: #fff;
color: #333333; border-radius: 4rpx;
display: flex; margin: 0 6rpx 0 18rpx;
} }
.total-price-symbol { .shop-name {
font-weight: 400; color: #333333;
font-size: 28rpx; font-size: 28rpx;
margin-left: -20rpx; }
color: #f12a2a; }
} .commodity-list {
.total-price-integer { margin-top: 28rpx;
font-weight: 400; display: flex;
font-size: 36rpx; flex-direction: column;
margin-top: -6rpx; gap: 40rpx;
color: #f12a2a; .commodity-item {
} color: #333333;
.total-price-decimals { img {
font-weight: 400; width: 170rpx;
font-size: 24rpx; height: 170rpx;
margin-top: 6rpx; border-radius: 12rpx;
color: #f12a2a; margin: 0 23rpx 0 18rpx;
} }
.final-price-button { .commodity-info {
width: 192rpx; .name {
height: 74rpx; font-size: 28rpx;
border-radius: 37rpx; font-weight: normal;
line-height: 74rpx; line-height: 28rpx;
text-align: center; margin-top: 12rpx;
margin-top: 9rpx; }
margin-left: 210rpx; .tag {
background: linear-gradient(90deg, #f74040 0%, #eb1818 100%); margin-top: 22rpx;
font-size: 28rpx; padding: 8rpx 10rpx;
color: #ffffff; font-size: 24rpx;
font-weight: normal;
line-height: 24rpx;
}
.price {
color: #f12a2a;
font-size: 36rpx;
span {
font-size: 24rpx;
}
}
}
}
}
}
.total {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 92rpx;
background-color: #fff;
padding: 0 15rpx 0 23rpx;
box-sizing: border-box;
.left {
.check-box {
font-size: 24rpx;
font-weight: normal;
line-height: 24rpx;
color: #333333;
.check {
margin-right: 17rpx;
}
}
.price {
font-size: 28rpx;
margin-left: 20rpx;
color: #333333;
span {
color: #f12a2a;
}
}
}
.submit {
padding: 23rpx 30rpx;
background: linear-gradient(90deg, #f74040 0%, #eb1818 100%);
font-size: 28rpx;
font-weight: normal;
line-height: 28rpx;
letter-spacing: 0em;
border-radius: 37rpx;
color: #ffffff;
}
}
} }
</style> </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