<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>
