【vue3.0】21.0 某东到家（廿一）——订单商品列表布局

继续完善订单页面。
这里需要将一些方法进行抽离。
src\effects\cartEffects.js

import { computed } from 'vue'
import { useStore } from 'vuex'
// 添加、减少到购物车功能
export const useCommonCartEffect = shopId => {
  const store = useStore()
  const cartList = store.state.cartList // 加入购物车的商品
  /**
   * 加入或减少购物车数量
   * @param {String} shopId 店铺id
   * @param {String} productId 商品id
   * @param {Object} productInfo 商品信息集
   * @param {Number} num 加入购物车的数量
   */
  const changeCartItemInfo = (shopId, productId, productInfo, num) => {
    console.log(
      'changeCartItemInfo:',
      'shopId:' + shopId,
      'productId:' + productId,
      'productInfo:' + JSON.stringify(productInfo),
      'num:' + num
    )
    // 更新vuex中的值
    store.commit('changeItemToCart', { shopId, productId, productInfo, num })
  }
  // 获得加入购物车商品的信息集
  const productList = computed(() => {
    const productInfoList = cartList[shopId]?.productList || [] // 不存在默认空数组
    return productInfoList
  })

  // 获得商铺名称
  const shopName = computed(() => {
    const shopName = cartList[shopId]?.shopName || '' // 不存在默认空数组
    return shopName
  })

  // 计算shopId下所有cartList的商品数量total、价钱之和totalPrice
  const calculations = computed(() => {
    const productList = cartList[shopId]?.productList
    const resultData = {
      // 总商品数量
      total: 0,
      // 总金额
      totalPrice: 0,
      // 全选
      isAllChecked: true
    }
    if (productList) {
      for (const i in productList) {
        const product = productList[i]
        // 总商品数量
        resultData.total += product.count
        // 总金额
        if (product.checked === true) {
          resultData.totalPrice += product.count * product.price
        }
        // 全选
        if (product.count > 0 && !product.checked) {
          resultData.isAllChecked = false
        }
      }
      resultData.totalPrice = resultData.totalPrice.toFixed(2) // 保留2位小数
    }

    return resultData
  })
  // const total = computed(() => {
  //   const productList = cartList[shopId]?.productList
  //   let count = 0
  //   if (productList) {
  //     for (const i in productList) {
  //       const product = productList[i]
  //       count += product.count
  //     }
  //   }
  //   return count
  // })
  // const totalPrice = computed(() => {
  //   const productList = cartList[shopId]?.productList
  //   let count = 0
  //   if (productList) {
  //     for (const i in productList) {
  //       const product = productList[i]
  //       if (product.checked === true) {
  //         count += product.count * product.price
  //       }
  //     }
  //   }
  //   return count.toFixed(2) // 保留2位小数
  // })

  // 全选的计算属性
  // const allChecked = computed(() => {
  //   const productList = cartList[shopId]?.productList
  //   let result = true
  //   if (productList) {
  //     for (const i in productList) {
  //       const product = productList[i]
  //       if (product.count > 0 && !product.checked) {
  //         result = false
  //         break
  //       }
  //     }
  //   }
  //   return result
  // })

  return { cartList, shopName, calculations, productList, changeCartItemInfo }
}

这样，src\views\shop\Cart.vue做了减法：

......
<script>
import { ref } from 'vue'
import { useRoute } from 'vue-router' // 路由跳转方法
import { useStore } from 'vuex' // 路由跳转方法
import { useCommonCartEffect } from '@/effects/cartEffects'

const useCartEffect = shopId => {
  const store = useStore()
  const { cartList, productList, changeCartItemInfo, calculations } = useCommonCartEffect(
    shopId
  )
  const getProductCartCount = (shopId, productId) => {
    return cartList?.[shopId]?.productList?.[productId]?.count || 0
  }
  // 单个勾选或者不勾选
  const changeCartItemChecked = (shopId, productId) => {
    store.commit('changeItemChecked', { shopId, productId })
  }
  // 清除购物车按钮
  const cleanCartProducts = shopId => {
    store.commit('changeCleanCartProducts', { shopId })
  }
  // 购物车全选或者取消全选
  const setCartItemsChecked = shopId => {
    store.commit('setCartItemsChecked', { shopId })
  }

  return {
    cartList,
    calculations,
    productList,
    changeCartItemChecked,
    changeCartItemInfo,
    cleanCartProducts,
    getProductCartCount,
    setCartItemsChecked
  }
}

// 展示隐藏购物车
const toggleCartEffect = () => {
  const showCart = ref(false)
  // 显示隐藏购物车具体内容
  const handleCartShowChange = () => {
    showCart.value = !showCart.value
  }
  return { showCart, handleCartShowChange }
}
export default {
  name: 'Cart',
  setup() {
    const route = useRoute()
    const shopId = route.params.id // 店铺id
    // 展示隐藏购物车
    const { showCart, handleCartShowChange } = toggleCartEffect()
    // 计算总价和加入购物车的总数量
    const {
      cartList,
      calculations,
      productList,
      changeCartItemChecked,
      changeCartItemInfo,
      cleanCartProducts,
      getProductCartCount,
      setCartItemsChecked
    } = useCartEffect(shopId)
    return {
      cartList,
      calculations,
      productList,
      shopId,
      showCart,
      handleCartShowChange,
      changeCartItemChecked,
      changeCartItemInfo,
      cleanCartProducts,
      getProductCartCount,
      setCartItemsChecked
    }
  }
}
</script>
......

进一步完善src\views\orderConfirmation\OrderConfirmation.vue

<template>
  <div class="wrapper">
    <div class="top">
      <div class="top__bgcolor" />
      <div class="top__header">
        <div class="top__header__back" @click="handleBackClick">
          <i class="custom-icon custom-icon-back"></i>
        </div>
        <span>确认订单</span>
      </div>
      <div class="top__receiver">
        <div class="top__receiver__title">收货地址</div>
        <div class="top__receiver__address">
          西安一二三大学四五六科技园2号楼
        </div>
        <div class="top__receiver__info">
          <span class="top__receiver__info__name">张三（先生）</span>
          <span class="top__receiver__info__phone">18012341234</span>
        </div>
        <div class="top__receiver__icon">
          <i class="custom-icon custom-icon-back"></i>
        </div>
      </div>
    </div>
    <div class="products">
      <div class="products__title">{{shopName}}</div>
      <div>
        <div class="products__item" v-for="item in productList" :key="item._id">
          <img class="products__item__img" :src="item.imgUrl" />
          <div class="products__item__detail">
            <h4 class="products__item__title">{{ item.name }}</h4>
            <p class="products__item__price">
              <span>
                <span class="products__item__yen"> &yen; </span>
                {{ item.price }}×{{item.count}}
              </span>
              <span class="products__item__total">
                <span class="products__item__yen"> &yen; </span>
                {{( item.price*item.count ).toFixed(2)}}
              </span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="order">
      <div class="order__price">
        实付金额 &yen;<b>{{calculations.totalPrice}}</b>
      </div>
      <div class="order__btn">
        <!-- <router-link :to="{ path: `/orderConfirmation/${shopId}` }"> -->
        提交订单
        <!-- </router-link> -->
      </div>
    </div>
  </div>
</template>

<script>
// import { ref } from 'vue'
import { useCommonCartEffect } from '@/effects/cartEffects'
import { useRoute, useRouter } from 'vue-router' // 路由跳转方法
export default {
  name: 'OrderConfirmation',
  setup() {
    const route = useRoute()
    const router = useRouter()
    const shopId = route.params.shopId // 店铺id
    const { shopName, productList, calculations } = useCommonCartEffect(shopId)

    const handleBackClick = () => {
      router.back()
    }

    return {
      shopName,
      productList,
      calculations,
      handleBackClick
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/style/viriables.scss';
@import '@/style/mixins.scss';
.wrapper {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #eee;
  overflow-y: scroll; //防止超出屏幕
}
.top {
  position: relative;
  height: 1.96rem;
  background-size: 100% 1.59rem;
  /* 渐变轴为0度,相当于从下到上，
   高度4%位置从rgba(0, 145, 255, 0) 开始渐变
   到高度50%位置的蓝色（#0091ff）结束 */
  background-image: linear-gradient(0deg, rgba(0, 145, 255, 0) 4%, #0091ff 50%);
  background-repeat: no-repeat;

  &__header {
    position: relative;
    padding-top: 0.26rem;
    line-height: 0.24rem;
    color: #fff;
    text-align: center;
    font-size: 0.16rem;
    &__back {
      position: absolute;
      font-size: 0.22rem;
      left: 0.18rem;
    }
  }
  &__receiver {
    position: absolute;
    left: 0.18rem;
    right: 0.18rem;
    bottom: 0rem;
    height: 1.11rem;
    background: #fff;
    border-radius: 0.04rem;
    &__title {
      line-height: 0.22rem;
      padding: 0.16rem 0 0.14rem 0.16rem;
      font-size: 0.16rem;
      color: #333;
    }
    &__address {
      line-height: 0.2rem;
      padding: 0 0.4rem 0 0.16rem;
      font-size: 0.16rem;
      color: #333;
    }
    &__info {
      padding: 0.06rem 0 0 0.16rem;
      &__name &__phone {
        margin-right: 0.1rem;
        line-height: 0.18rem;
        font-size: 0.12rem;
        color: #666;
      }
    }
    &__icon {
      //旋转180度
      transform: rotate(180deg);
      position: absolute;
      right: 0.16rem;
      top: 0.53rem;
      font-size: 0.16rem;
      color: #666;
    }
  }
}
.products {
  margin: 0.16rem 0.18rem 0.2rem 0.18rem;
  background: #fff;
  &__title {
    padding: 0.16rem 0.16rem 0 0.16rem;
    font-size: 0.16rem;
    color: #333;
  }
  &__item {
    position: relative;
    display: flex;
    padding: 0.16rem;
    &__img {
      width: 0.46rem;
      height: 0.46rem;
      margin-right: 0.16rem;
    }
    // 配合解决超出长度以省略号显示而不会出现换行
    &__detail {
      overflow: hidden;
      flex: 1;
    }

    &__title {
      margin: 0;
      line-height: 0.2rem;
      font-size: 0.14rem;
      color: $content-font-color;
      // 超出长度以省略号显示而不会出现换行
      @include ellipsis;
    }
    &__price {
      display: flex;
      margin: 0.06rem 0 0 0;
      line-height: 0.2rem;
      font-size: 0.14rem;
      color: $height-light-font-color;
    }
    &__total {
      text-align: right;
      color: #000;
      flex: 1;
    }
    &__yen {
      font-size: 0.12rem;
    }
  }
}

.order {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  box-sizing: border-box; //往内塞入border
  line-height: 0.49rem;
  height: 0.49rem;
  border-top: 0.01rem solid $content-bg-color;
  background: $bg-color;
  &__price {
    flex: 1;
    text-indent: 0.24rem;
    font-size: 0.14rem;
    color: #333;
  }
  &__btn {
    width: 0.98rem;
    background-color: #4fb0f9;
    text-align: center;
    color: $bg-color;
    font-size: 0.14rem;
    // 去掉a标签的下划线
    a {
      color: $bg-color;
      text-decoration: none; //去掉文本修饰
    }
  }
}
</style>

效果如下：

image.png

此时在浏览器进行如下的操作：

image.png

发现当商品很多时，还是会被撑开。
进一步完善：

......
    <div class="products">
      <div class="products__title">{{shopName}}</div>
      <div class="products__list">
......
      </div>
    </div>
......
<style lang="scss" scoped>
......
.products {
......
  &__title {
......
  }
  &__list {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.6rem;
    top: 2.06rem;
  }
......
}
......
</style>

image.png

继续完善css

  &__list {
    overflow-y: scroll;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.6rem;
    top: 2.05rem;
  }

image.png

发现滚动效果出来了。继续尝试调试：

 &__list {
   overflow-y: scroll;
   position: absolute;
   padding: 0 0.16rem;
   left: 0;
   right: 0;
   bottom: 0.6rem;
   top: 2.46rem;
   background: #fff;
 }

image.png

效果很接近。继续调试：

  &__list {
    overflow-y: scroll;
    position: absolute;
    margin: 0 0.18rem;
    left: 0;
    right: 0;
    bottom: 0.6rem;
    top: 2.46rem;
    background: #fff;
  }

image.png

到这里我们想要的效果基本都出来了。
继续微调优化:

.products {
......
  &__title {
 ......
  }
  &__list {
 ......
  }
  &__item {
    position: relative;
    display: flex;
    padding: 0.16rem 0.16rem 0 0.16rem;
......
  }
}

image.png

当元素很多的时候，这样效果已经很好了，但当元素较少时，就会如下样式：

image.png

解决办法:创建一个wrapper容器包裹list，然后通过list的背景色自动撑开容器。

......
    <div class="products">
      <div class="products__title">{{shopName}}</div>
      <div class="products__wrapper">
        <div class="products__list">
......
        </div>
     </div>
    </div>
......
<style lang="scss" scoped>
......
.products {
  margin: 0.16rem 0.18rem 0.2rem 0.18rem;
  background: #fff;
  &__title {
    padding: 0.16rem;
    font-size: 0.16rem;
    color: #333;
  }
  // list外层的wrapper容器
  &__wrapper {
    overflow-y: scroll;
    position: absolute;
    margin: 0 0.18rem;
    left: 0;
    right: 0;
    bottom: 0.6rem;
    top: 2.6rem;
  }
  &__list {
    background: #fff;
  }
  &__item {
......
    padding: 0 0.16rem 0.16rem 0.16rem;
......
  }
}
......
</style>

image.png

这样效果就出来了。
完善逻辑：

    <div class="products">
      <div class="products__title">{{shopName}}</div>
      <div class="products__wrapper">
        <div class="products__list">
          <template v-for="item in productList" :key="item._id">
            <div class="products__item" v-if="item.count>0">
......
            </div>
          </template>
        </div>
      </div>
    </div>

顺便修复一下之前的一个bug：
src\store\index.js

   /**
     * 加入或减少购物车数量
     * @param {*} state
     * @param {String} shopId 店铺id
     * @param {String} productId 商品id
     * @param {Object} productInfo 商品信息集
     * @param {Number} num 加入购物车的数量
     * @param {*} payload
     */
    changeItemToCart(state, payload) {
......
      product.count <= 0 && (shopInfo.productList[productId].count = 0)
......
    },

最后编辑于：2021.12.01 23:07:42

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 206,968评论 6赞 482
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 88,601评论 2赞 382
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 153,220评论 0赞 344
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 55,416评论 1赞 279
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 64,425评论 5赞 374
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,144评论 1赞 285
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,432评论 3赞 401
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,088评论 0赞 261
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 43,586评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,028评论 2赞 325
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,137评论 1赞 334
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,783评论 4赞 324
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,343评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,333评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,559评论 1赞 262
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,595评论 2赞 355
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,901评论 2赞 345

【vue3.0】21.0 某东到家（ 廿一）——订单商品列表布局

推荐阅读更多精彩内容

【vue3.0】21.0 某东到家（廿一）——订单商品列表布局