【vue3.0】25.0 某東到家( 廿五)——真機調(diào)試

真機聯(lián)調(diào)方式

一種方式是手機和電腦連同一個局域網(wǎng),也就是同一個WiFi
運行項目會在終端顯示ip連接的地址:


image.png

因為目前我的是手機熱點,需下面的方式:
如果是手機開熱點給電腦用,可以win+R鍵輸入ipconfig查詢本機ip,然后在手機瀏覽器上直接打開ip:8080即可

image.png

比如我的就是需要訪問192.168.24.113::8080
image.png

image.png

image.png

image.png

image.png

image.png

這里可以看到購物車的加減號有點問題本砰。
首先需要準備2個圖標:
image.png

調(diào)整src\views\shop\Content.vue

<template>
  <div class="content">
    <div class="category">
      <div
        :class="{
          category__item: true,
          'category__item--active': currentTab === item.tab
        }"
        v-for="item in categories"
        :key="item.tab"
        @click="handleTabClick(item.tab)"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="product">
      <div class="product__item" v-for="item in list" :key="item._id">
        <img class="product__item__img" :src="item.imgUrl" />
        <div class="product__item__detail">
          <h4 class="product__item__title">{{ item.name }}</h4>
          <p class="product__item__sales">月售{{ item.sales }}件</p>
          <p class="product__item__price">
            <span class="product__item__yen"> &yen;{{ item.price }} </span>
            <span class="product__item__origin"> &yen;{{ item.oldPrice }} </span>
          </p>
        </div>
        <div class="product__number">
          <span
            class="product__number__minus"
            @click="
              () => {
                changeCartItem(shopId, item._id, item, -1, shopName)
              }
            "
            ><i class="custom-icon custom-icon-reduce"></i
          ></span>
          {{ getProductCartCount(shopId, item._id) }}
          <span
            class="product__number__plus"
            @click="
              () => {
                changeCartItem(shopId, item._id, item, 1, shopName)
              }
            "
            ><i class="custom-icon custom-icon-add"></i
          ></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
......
</script>

<style lang="scss" scoped>
  @import '@/style/viriables.scss';
  @import '@/style/mixins.scss';
  .content {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    top: 1.6rem;
    bottom: 0.5rem;
  }
  .category {
    overflow-y: scroll;
    width: 0.76rem;
    background: $search-bg-color;
    height: 100%;
    &__item {
      line-height: 0.4rem;
      text-align: center;
      font-size: 0.14rem;
      color: $content-font-color;
      &--active {
        background: $bg-color;
      }
    }
  }
  .product {
    overflow-y: scroll;
    flex: 1;
    &__item {
      position: relative;
      display: flex;
      padding: 0.12rem 0.16rem;
      margin: 0 0.16rem;
      border-bottom: 0.01rem solid $content-bg-color;
      // 配合解決超出長度以省略號顯示而不會出現(xiàn)換行
      &__detail {
        overflow: hidden;
      }
      &__img {
        width: 0.68rem;
        height: 0.68rem;
        margin-right: 0.16rem;
      }
      &__title {
        margin: 0;
        line-height: 0.2rem;
        font-size: 0.14rem;
        color: $content-font-color;
        // 超出長度以省略號顯示而不會出現(xiàn)換行
        @include ellipsis;
      }
      &__sales {
        margin: 0.06rem 0;
        line-height: 0.16rem;
        font-size: 0.12rem;
        color: $content-font-color;
      }
      &__price {
        margin: 0;
        line-height: 0.2rem;
        font-size: 0.14rem;
        color: $height-light-font-color;
      }
      &__yen {
        font-size: 0.12rem;
      }
      &__origin {
        margin-left: 0.06rem;
        line-height: 0.2rem;
        font-size: 0.12rem;
        color: $light-font-color;
        text-decoration: line-through; //中劃線
      }
      // 購物車選購數(shù)量和加減號
      .product__number {
        position: absolute;
        right: 0rem;
        bottom: 0.12rem;
        line-height: 0.18rem;
        // 邊框白色
        &__minus {
          position: relative;
          top: 0.01rem;
          color: $medium-font-color;
          margin-right: 0.05rem;
        }
        //無邊框,背景藍色
        &__plus {
          position: relative;
          top: 0.01rem;
          color: $btn-bg-color;
          margin-left: 0.05rem;
        }
      }
    }
  }
</style>

調(diào)整src\views\shop\Cart.vue

<template>
  <!-- 蒙層 -->
  <div class="mask" v-if="showCart && calculations.total > 0" @click="handleCartShowChange"></div>
  <div class="cart">
    <div class="product" v-show="showCart && calculations.total > 0">
      <div class="product__header">
        <div class="product__header__all" @click="setCartItemsChecked(shopId)">
          <i
            :class="[
              'product__header__all__icon',
              'custom-icon',
              calculations.isAllChecked
                ? 'custom-icon-radio-checked'
                : 'custom-icon-radio-unchecked'
            ]"
          ></i>
          <span class="product__header__all__text">全選</span>
        </div>
        <div class="product__header__clear">
          <span class="product__header__clear__btn" @click="cleanCartProducts(shopId)"
            >清空購物車</span
          >
        </div>
      </div>
      <div class="product__item" v-for="item in productList" :key="item._id">
        <div class="product__item__checked" @click="changeCartItemChecked(shopId, item._id)">
          <i
            :class="[
              'custom-icon',
              item.checked == true ? 'custom-icon-radio-checked' : 'custom-icon-radio-unchecked'
            ]"
          ></i>
        </div>
        <img class="product__item__img" :src="item.imgUrl" />
        <div class="product__item__detail">
          <h4 class="product__item__title">{{ item.name }}</h4>
          <p class="product__item__price">
            <span class="product__item__yen"> &yen;{{ item.price }} </span>
            <span class="product__item__origin"> &yen;{{ item.oldPrice }} </span>
          </p>
        </div>
        <div class="product__number">
          <span
            class="product__number__minus"
            @click="
              () => {
                0
                changeCartItemInfo(shopId, item._id, item, -1)
              }
            "
            ><i class="custom-icon custom-icon-reduce"></i
          ></span>
          {{ getProductCartCount(shopId, item._id) }}
          <span
            class="product__number__plus"
            @click="
              () => {
                changeCartItemInfo(shopId, item._id, item, 1)
              }
            "
            ><i class="custom-icon custom-icon-add"></i
          ></span>
        </div>
      </div>
    </div>
    <div class="check">
      <div class="check__icon" @click="handleCartShowChange">
        <img src="/i18n/9_16/img/basket.png" alt="" class="check__icon__img" />
        <div class="check__icon__tag">
          {{ calculations.total }}
        </div>
      </div>
      <div class="check__info">
        總計:<span class="check__info__price">&yen; {{ calculations.totalPrice }}</span>
      </div>
      <div class="check__btn" v-show="calculations.totalPrice > 0">
        <router-link :to="{ path: `/orderConfirmation/${shopId}` }"> 去結(jié)算 </router-link>
      </div>
    </div>
  </div>
</template>

<script>
......
</script>
<style lang="scss" scoped>
  @import '@/style/viriables.scss';
  @import '@/style/mixins.scss';
  .mask {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
  }
  .cart {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background: $bg-color;
  }
  .product {
    overflow-y: scroll;
    flex: 1;
    background: $bg-color;
    &__header {
      display: flex;
      line-height: 0.52rem;
      border-bottom: 0.01rem solid $content-bg-color;
      font-size: 0.14rem;
      color: $content-font-color;
      &__all {
        width: 0.64rem;
        margin-left: 0.18rem;
        &__icon {
          display: inline-block;
          vertical-align: top;
          font-size: 0.2rem;
          margin-right: 0.05rem;
          color: $btn-bg-color;
        }
        &__text {
          display: inline-block;
          margin-left: 0.04rem;
          line-height: 0.52rem;
        }
      }
      &__clear {
        flex: 1;
        text-align: right;
        margin-right: 0.16rem;
        &__btn {
          display: inline-block;
        }
      }
    }
    &__item {
      position: relative;
      display: flex;
      padding: 0.12rem 0.16rem;
      margin: 0 0.16rem;
      border-bottom: 0.01rem solid $content-bg-color;
      &__checked {
        line-height: 0.5rem;
        margin-right: 0.2rem;
        color: $btn-bg-color;
        i {
          font-size: 0.25rem;
        }
      }
      // 配合解決超出長度以省略號顯示而不會出現(xiàn)換行
      &__detail {
        overflow: hidden;
      }
      &__img {
        width: 0.46rem;
        height: 0.46rem;
        margin-right: 0.16rem;
      }
      &__title {
        margin: 0;
        line-height: 0.2rem;
        font-size: 0.14rem;
        color: $content-font-color;
        // 超出長度以省略號顯示而不會出現(xiàn)換行
        @include ellipsis;
      }
      &__price {
        margin: 0.06rem 0 0 0;
        line-height: 0.2rem;
        font-size: 0.14rem;
        color: $height-light-font-color;
      }
      &__yen {
        font-size: 0.12rem;
      }
      &__origin {
        margin-left: 0.06rem;
        line-height: 0.2rem;
        font-size: 0.12rem;
        color: $light-font-color;
        text-decoration: line-through; //中劃線
      }
      // 購物車選購數(shù)量和加減號
      .product__number {
        position: absolute;
        right: 0rem;
        line-height: 0.18rem;
        bottom: 0.26rem;
        // 邊框白色
        &__minus {
          position: relative;
          top: 0.01rem;
          color: $medium-font-color;
          margin-right: 0.05rem;
        }
        //無邊框钢悲,背景藍色
        &__plus {
          position: relative;
          top: 0.01rem;
          color: $btn-bg-color;
          margin-left: 0.05rem;
        }
      }
    }
  }
  .check {
    display: flex;
    box-sizing: border-box; //往內(nèi)塞入border
    line-height: 0.49rem;
    height: 0.49rem;
    border-top: 0.01rem solid $content-bg-color;
    &__icon {
      width: 0.84rem;
      position: relative;
      &__img {
        margin: 0.12rem auto;
        display: block;
        width: 0.28rem;
        height: 0.28rem;
      }
      &__tag {
        // 乘以2然后等比例縮小
        position: absolute;
        left: 0.46rem;
        top: 0.04rem;
        padding: 0 0.04rem;
        min-width: 0.2rem;
        height: 0.2rem;
        line-height: 0.2rem;
        text-align: center;
        background-color: $height-light-font-color;
        border-radius: 0.1rem;
        font-size: 0.12rem;
        color: $bg-color;
        transform: scale(0.5);
        transform-origin: left center;
      }
    }
    &__info {
      flex: 1;
      color: $content-font-color;
      font-size: 0.12rem;
      &__price {
        line-height: 0.49rem;
        color: $height-light-font-color;
        font-size: 0.18rem;
      }
    }
    &__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>

修改src\views\orderConfirmation\TopArea.vue

......
<style lang="scss" scoped>
  @import '@/style/viriables.scss';

  .top {
    position: relative;
    height: 1.96rem;
    background-size: 100% 1.59rem;
    /* 漸變軸為0度,相當于從下到上点额,
   高度4%位置從rgba(0, 145, 255, 0) 開始漸變
   到高度50%位置的藍色(#0091ff)結(jié)束 */
    background-image: linear-gradient(0deg, rgba(0, 145, 255, 0) 4%, $btn-bg-color 50%);
    background-repeat: no-repeat;

    &__header {
      position: relative;
      padding-top: 0.26rem;
      line-height: 0.24rem;
      color: $bg-color;
      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: $bg-color;
      border-radius: 0.04rem;
      &__title {
        line-height: 0.22rem;
        padding: 0.16rem 0 0.14rem 0.16rem;
        font-size: 0.16rem;
        color: $content-font-color;
      }
      &__address {
        line-height: 0.2rem;
        padding: 0 0.4rem 0 0.16rem;
        font-size: 0.16rem;
        color: $content-font-color;
      }
      &__info {
        padding: 0.06rem 0 0 0.16rem;
        &__name &__phone {
          margin-right: 0.1rem;
          line-height: 0.18rem;
          font-size: 0.12rem;
          color: $content-font-color;
        }
      }
      &__icon {
        //旋轉(zhuǎn)180度
        transform: rotate(180deg);
        position: absolute;
        right: 0.16rem;
        top: 0.53rem;
        font-size: 0.16rem;
        color: $medium-font-color;
      }
    }
  }
</style>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市莺琳,隨后出現(xiàn)的幾起案子还棱,更是在濱河造成了極大的恐慌,老刑警劉巖惭等,帶你破解...
    沈念sama閱讀 217,406評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件珍手,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機琳要,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,732評論 3 393
  • 文/潘曉璐 我一進店門料扰,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人焙蹭,你說我怎么就攤上這事∩┥。” “怎么了孔厉?”我有些...
    開封第一講書人閱讀 163,711評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長帖努。 經(jīng)常有香客問我撰豺,道長,這世上最難降的妖魔是什么拼余? 我笑而不...
    開封第一講書人閱讀 58,380評論 1 293
  • 正文 為了忘掉前任污桦,我火速辦了婚禮,結(jié)果婚禮上匙监,老公的妹妹穿的比我還像新娘凡橱。我一直安慰自己,他們只是感情好亭姥,可當我...
    茶點故事閱讀 67,432評論 6 392
  • 文/花漫 我一把揭開白布稼钩。 她就那樣靜靜地躺著,像睡著了一般达罗。 火紅的嫁衣襯著肌膚如雪坝撑。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,301評論 1 301
  • 那天粮揉,我揣著相機與錄音巡李,去河邊找鬼。 笑死扶认,一個胖子當著我的面吹牛侨拦,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播蝠引,決...
    沈念sama閱讀 40,145評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼阳谍,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了螃概?” 一聲冷哼從身側(cè)響起矫夯,我...
    開封第一講書人閱讀 39,008評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎吊洼,沒想到半個月后训貌,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,443評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,649評論 3 334
  • 正文 我和宋清朗相戀三年递沪,在試婚紗的時候發(fā)現(xiàn)自己被綠了豺鼻。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,795評論 1 347
  • 序言:一個原本活蹦亂跳的男人離奇死亡款慨,死狀恐怖儒飒,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情檩奠,我是刑警寧澤桩了,帶...
    沈念sama閱讀 35,501評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站埠戳,受9級特大地震影響井誉,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜整胃,卻給世界環(huán)境...
    茶點故事閱讀 41,119評論 3 328
  • 文/蒙蒙 一颗圣、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧屁使,春花似錦在岂、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,731評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至共郭,卻和暖如春祠丝,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背除嘹。 一陣腳步聲響...
    開封第一講書人閱讀 32,865評論 1 269
  • 我被黑心中介騙來泰國打工写半, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人尉咕。 一個月前我還...
    沈念sama閱讀 47,899評論 2 370
  • 正文 我出身青樓叠蝇,卻偏偏與公主長得像,于是被迫代替她去往敵國和親年缎。 傳聞我的和親對象是個殘疾皇子悔捶,可洞房花燭夜當晚...
    茶點故事閱讀 44,724評論 2 354

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