【vue3.0】24.0 某東到家（廿四）——訂單列表開(kāi)發(fā)

DOM完善

修改src\views\orderList\OrderList.vue

<template>
  <!-- 主體內(nèi)容容器 -->
  <div class="wrapper">
    <!-- 主體商鋪展示內(nèi)容 -->
    <div class="title">我的訂單</div>
    <div class="orders">
      <div class="order">
        <div class="order__title">
          某什么碼1
          <span class="order__status">已取消</span>
        </div>
        <div class="order__content">
          某什么碼1
          <span class="order__content__imgs">
            <img class="order__content__img" src="" alt="" />
            <img class="order__content__img" src="" alt="" />
            <img class="order__content__img" src="" alt="" />
            <img class="order__content__img" src="" alt="" />
          </span>
        </div>
        <div class="order__info">
          <div class="order__info__price">&yen;588</div>
          <div class="order__info__count">共3件</div>
        </div>
      </div>
    </div>
  </div>
  <!-- 底部主菜單容器 -->
  <Docker :current-index="2" />
  <router-view />
</template>

<script>
  import Docker from '@/components/Docker/Docker'
  export default {
    name: 'OrderList',
    components: { Docker }
  }
</script>

<style lang="scss" scoped>
  .wrapper {
    overflow-y: auto;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0.5rem;
    right: 0;
    background-color: #eee;
  }
  .title {
    line-height: 0.44rem;
    background: #fff;
    font-size: 0.16rem;
    color: #333;
    text-align: center;
  }
</style>

image.png

進(jìn)一步完善

<style lang="scss" scoped>
......
  .orders {
  }

  .order {
    padding: 0.16rem;
    background: #fff;
    margin: 0.16rem 0.18rem;
  }
</style>

image.png

繼續(xù)優(yōu)化

<template>
  <!-- 主體內(nèi)容容器 -->
  <div class="wrapper">
    <!-- 主體商鋪展示內(nèi)容 -->
    <div class="title">我的訂單</div>
    <div class="orders">
      <div class="order">
        <div class="order__title">
          某什么碼1
          <span class="order__status">已取消</span>
        </div>
        <div class="order__content">
          <span class="order__content__imgs">
            <img class="order__content__img" src="/i18n/9_16/img/crab.png" alt="" />
            <img class="order__content__img" src="/i18n/9_16/img/crab.png" alt="" />
            <img class="order__content__img" src="/i18n/9_16/img/crab.png" alt="" />
            <img class="order__content__img" src="/i18n/9_16/img/crab.png" alt="" />
          </span>
          <div class="order__content__info">
            <div class="order__content__info__price">&yen;588</div>
            <div class="order__content__info__count">共3件</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 底部主菜單容器 -->
  <Docker :current-index="2" />
  <router-view />
</template>

<script>
  import Docker from '@/components/Docker/Docker'
  export default {
    name: 'OrderList',
    components: { Docker }
  }
</script>

<style lang="scss" scoped>
  .wrapper {
    overflow-y: auto;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0.5rem;
    right: 0;
    background-color: #f8f8f8;
  }
  .title {
    line-height: 0.44rem;
    background: #fff;
    font-size: 0.16rem;
    color: #333;
    text-align: center;
  }

  .orders {
  }

  .order {
    padding: 0.16rem;
    background: #fff;
    margin: 0.16rem 0.18rem;
    line-height: 0.22rem;

    &__title {
      margin-bottom: 0.16rem;
      font-size: 0.16rem;
      color: #333;
    }
    &__status {
      float: right;
      font-size: 0.14rem;
      color: #999;
    }
    &__content {
      display: flex;
      &__imgs {
        flex: 1;
      }
      &__img {
        width: 0.4rem;
        height: 0.4rem;
        margin-right: 0.12rem;
      }
      &__info {
        width: 0.7rem;
      }
    }
  }
</style>

image.png

繼續(xù)優(yōu)化

<template>
  <!-- 主體內(nèi)容容器 -->
  <div class="wrapper">
    <!-- 主體商鋪展示內(nèi)容 -->
    <div class="title">我的訂單</div>
    <div class="orders">
      <div class="order">
        <div class="order__title">
          某什么碼1
          <span class="order__status">已取消</span>
        </div>
        <div class="order__content">
          <span class="order__content__imgs">
            <img class="order__content__img" src="/i18n/9_16/img/crab.png" alt="" />
            <img class="order__content__img" src="/i18n/9_16/img/crab.png" alt="" />
            <img class="order__content__img" src="/i18n/9_16/img/crab.png" alt="" />
            <img class="order__content__img" src="/i18n/9_16/img/crab.png" alt="" />
          </span>
          <div class="order__content__info">
            <div class="order__content__info__price">&yen;588</div>
            <div class="order__content__info__count">共3件</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 底部主菜單容器 -->
  <Docker :current-index="2" />
  <router-view />
</template>

<script>
  import Docker from '@/components/Docker/Docker'
  export default {
    name: 'OrderList',
    components: { Docker }
  }
</script>

<style lang="scss" scoped>
  @import '@/style/viriables.scss';
  .wrapper {
    overflow-y: auto;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0.5rem;
    right: 0;
    background-color: #f8f8f8;
  }
  .title {
    line-height: 0.44rem;
    background: $bg-color;
    font-size: 0.16rem;
    color: $content-font-color;
    text-align: center;
  }

  .orders {
  }

  .order {
    padding: 0.16rem;
    background: $bg-color;
    margin: 0.16rem 0.18rem;
    line-height: 0.22rem;

    &__title {
      margin-bottom: 0.16rem;
      font-size: 0.16rem;
      color: $content-font-color;
    }
    &__status {
      float: right;
      font-size: 0.14rem;
      color: $light-font-color;
    }
    &__content {
      display: flex;
      &__imgs {
        flex: 1;
      }
      &__img {
        width: 0.4rem;
        height: 0.4rem;
        margin-right: 0.12rem;
      }
      &__info {
        width: 0.7rem;
        &__price {
          line-height: 0.2rem;
          margin-bottom: 0.4rem;
          font-size: 0.14rem;
          color: $height-light-font-color;
          text-align: right;
        }
        &__count {
          line-height: 0.14rem;
          font-size: 0.12rem;
          color: $content-font-color;
          text-align: right;
        }
      }
    }
  }
</style>

image.png

新建get接口/api/order
數(shù)據(jù)如下：

{
  "code": 200,
  "data": [
    {
      "address": {
        "city": "北京",
        "department": "xx小區(qū)",
        "houseNumber": "門牌號(hào)",
        "name": "張三",
        "phone": "18012341234"
      },
      "shopId": "1",
      "shopName": "某什么碼1",
      "isCanceled": false,
      "products": [
        {
          "orderSales": 5,
          "product": {
            "name": "番茄250g/份",
            "imgUrl": "/i18n/9_16/img/tomato.png",
            "sales": 10,
            "price": 33.6
          }
        },
        {
          "orderSales": 10,
          "product": {
            "name": "櫻桃250g/份",
            "imgUrl": "/i18n/9_16/img/cherry.png",
            "sales": 10,
            "price": 79.6
          }
        },
        {
          "orderSales": 8,
          "product": {
            "name": "帝王蟹250g/份",
            "imgUrl": "/i18n/9_16/img/crab.png",
            "sales": 10,
            "price": 159.6
          }
        },
        {
          "orderSales": 4,
          "product": {
            "name": "橙子250g/份",
            "imgUrl": "/i18n/9_16/img/orange.png",
            "sales": 10,
            "price": 92.6
          }
        }
      ]
    }
  ],
  "desc": "成功"
}

頁(yè)面完善：

<template>
  <!-- 主體內(nèi)容容器 -->
  <div class="wrapper">
    <!-- 主體商鋪展示內(nèi)容 -->
    <div class="title">我的訂單</div>
    <div class="orders">
      <div class="order" v-for="(item, index) in list" :key="index">
        <div class="order__title">
          {{ item.shopName }}
          <span class="order__status">{{ item.isCanceled ? '已取消' : '已下單' }}</span>
        </div>
        <div class="order__content">
          <span class="order__content__imgs">
            <template v-for="(itemImg, indexImg) in item.products" :key="indexImg">
              <img
                class="order__content__img"
                :src="itemImg.product.imgUrl"
                alt="圖片"
                v-if="indexImg <= 3"
              />
            </template>
          </span>
          <div class="order__content__info">
            <div class="order__content__info__price">&yen;{{ item.totalPrice }}</div>
            <div class="order__content__info__count">共{{ item.totalNumber }}件</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 底部主菜單容器 -->
  <Docker :current-index="2" />
  <Toast v-if="show" :message="message" />
  <router-view />
</template>

<script>
  import { reactive, toRefs } from 'vue'
  import { get } from '@/utils/request.js'
  import Toast, { useToastEffect } from '@/components/Toast/Toast'

  const useOrderListEffect = toastMsg => {
    const data = reactive({ list: [] })
    const getNearbyList = async () => {
      // 可以寫(xiě)成： const resultData = await get(`/api/shop/${route.params.id}`)
      const resultData = await get('/api/order/')
      if (resultData?.code === 200 && resultData?.data?.length) {
        console.log('data :' + JSON.stringify(data))
        const tempData = resultData.data || []
        tempData.forEach(item => {
          const products = item.products
          let totalPrice = 0 //商品總價(jià)
          let totalNumber = 0
          products.forEach(item2 => {
            totalNumber += Number(item2?.orderSale || 0)
            totalPrice += Number(item2?.product.price || 0) * Number(item2?.orderSales || 0)
          })
          item.totalPrice = totalPrice.toFixed(2)
          item.totalNumber = totalNumber
        })
        data.list = tempData
      } else {
        toastMsg('沒(méi)有數(shù)據(jù)！')
      }
    }
    getNearbyList()
    const { list } = toRefs(data)
    return { getNearbyList, list }
  }

  import Docker from '@/components/Docker/Docker'
  export default {
    name: 'OrderList',
    components: { Docker, Toast },
    setup() {
      const { show, message, toastMsg } = useToastEffect()
      const { list } = useOrderListEffect(toastMsg)

      return { show, message, list }
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/style/viriables.scss';
  .wrapper {
    overflow-y: auto;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0.5rem;
    right: 0;
    background-color: #f8f8f8;
  }
  .title {
    line-height: 0.44rem;
    background: $bg-color;
    font-size: 0.16rem;
    color: $content-font-color;
    text-align: center;
  }

  .orders {
  }

  .order {
    padding: 0.16rem;
    background: $bg-color;
    margin: 0.16rem 0.18rem;
    line-height: 0.22rem;

    &__title {
      margin-bottom: 0.16rem;
      font-size: 0.16rem;
      color: $content-font-color;
    }
    &__status {
      float: right;
      font-size: 0.14rem;
      color: $light-font-color;
    }
    &__content {
      display: flex;
      &__imgs {
        flex: 1;
      }
      &__img {
        width: 0.4rem;
        height: 0.4rem;
        margin-right: 0.12rem;
      }
      &__info {
        width: 0.7rem;
        &__price {
          line-height: 0.2rem;
          margin-bottom: 0.04rem;
          font-size: 0.14rem;
          color: $height-light-font-color;
          text-align: right;
        }
        &__count {
          line-height: 0.14rem;
          font-size: 0.12rem;
          color: $content-font-color;
          text-align: right;
        }
      }
    }
  }
</style>

image.png

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市乎折，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌帝美，老刑警劉巖，帶你破解...
沈念sama閱讀 207,113評(píng)論 6贊 481
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件晤硕，死亡現(xiàn)場(chǎng)離奇詭異悼潭，居然都是意外死亡庇忌，警方通過(guò)查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 88,644評(píng)論 2贊 381
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門舰褪，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)皆疹，“玉大人，你說(shuō)我怎么就攤上這事占拍÷跃停” “怎么了？”我有些...
開(kāi)封第一講書(shū)人閱讀 153,340評(píng)論 0贊 344
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵晃酒，是天一觀的道長(zhǎng)表牢。經(jīng)常有香客問(wèn)我，道長(zhǎng)贝次，這世上最難降的妖魔是什么初茶？我笑而不...
開(kāi)封第一講書(shū)人閱讀 55,449評(píng)論 1贊 279
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮浊闪，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘螺戳。我一直安慰自己搁宾，他們只是感情好，可當(dāng)我...
茶點(diǎn)故事閱讀 64,445評(píng)論 5贊 374
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開(kāi)白布倔幼。她就那樣靜靜地躺著盖腿，像睡著了一般。火紅的嫁衣襯著肌膚如雪损同。梳的紋絲不亂的頭發(fā)上翩腐，一...
開(kāi)封第一講書(shū)人閱讀 49,166評(píng)論 1贊 284
城市分裂傳說(shuō)
那天，我揣著相機(jī)與錄音膏燃，去河邊找鬼茂卦。笑死，一個(gè)胖子當(dāng)著我的面吹牛组哩，可吹牛的內(nèi)容都是我干的等龙。我是一名探鬼主播，決...
沈念sama閱讀 38,442評(píng)論 3贊 401
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開(kāi)眼伶贰，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼蛛砰！你這毒婦竟也來(lái)了？” 一聲冷哼從身側(cè)響起黍衙，我...
開(kāi)封第一講書(shū)人閱讀 37,105評(píng)論 0贊 261
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤泥畅，失蹤者是張志新（化名）和其女友劉穎，沒(méi)想到半個(gè)月后琅翻，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體位仁，經(jīng)...
沈念sama閱讀 43,601評(píng)論 1贊 300
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡柑贞，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 36,066評(píng)論 2贊 325
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了障癌。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片凌外。...
茶點(diǎn)故事閱讀 38,161評(píng)論 1贊 334
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖涛浙，靈堂內(nèi)的尸體忽然破棺而出康辑，到底是詐尸還是另有隱情，我是刑警寧澤轿亮，帶...
沈念sama閱讀 33,792評(píng)論 4贊 323
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布疮薇，位于F島的核電站，受9級(jí)特大地震影響我注，放射性物質(zhì)發(fā)生泄漏按咒。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 39,351評(píng)論 3贊 307
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一但骨、第九天我趴在偏房一處隱蔽的房頂上張望励七。院中可真熱鬧，春花似錦奔缠、人聲如沸掠抬。這莊子的主人今日做“春日...
開(kāi)封第一講書(shū)人閱讀 30,352評(píng)論 0贊 19
一樁弒父案校哎，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)两波。三九已至，卻和暖如春闷哆，著一層夾襖步出監(jiān)牢的瞬間腰奋，已是汗流浹背。一陣腳步聲響...
開(kāi)封第一講書(shū)人閱讀 31,584評(píng)論 1贊 261
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工抱怔，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留劣坊，地道東北人。一個(gè)月前我還...
沈念sama閱讀 45,618評(píng)論 2贊 355
代替公主和親
正文我出身青樓屈留，卻偏偏與公主長(zhǎng)得像讼稚，于是被迫代替她去往敵國(guó)和親。傳聞我的和親對(duì)象是個(gè)殘疾皇子绕沈，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 42,916評(píng)論 2贊 344

【vue3.0】24.0 某東到家（ 廿四）——訂單列表開(kāi)發(fā)

DOM完善

推薦閱讀更多精彩內(nèi)容

【vue3.0】24.0 某東到家（廿四）——訂單列表開(kāi)發(fā)