【vue3.0】25.0 某东到家（ 廿五）——真机调试

真机联调方式

一种方式是手机和电脑连同一个局域网，也就是同一个WiFi
运行项目会在终端显示ip连接的地址：

image.png

因为目前我的是手机热点，需下面的方式：
如果是手机开热点给电脑用，可以win+R键输入ipconfig查询本机ip，然后在手机浏览器上直接打开ip:8080即可

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

<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"><spanclass="product__number__minus"@click="() => {changeCartItem(shopId, item._id, item, -1, shopName)}"><i class="custom-icon custom-icon-reduce"></i></span>{{ getProductCartCount(shopId, item._id) }}<spanclass="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;// 配合解决超出长度以省略号显示而不会出现换行&__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;// 超出长度以省略号显示而不会出现换行@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; //中划线}// 购物车选购数量和加减号.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>

调整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"><spanclass="product__number__minus"@click="() => {0changeCartItemInfo(shopId, item._id, item, -1)}"><i class="custom-icon custom-icon-reduce"></i></span>{{ getProductCartCount(shopId, item._id) }}<spanclass="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}` }"> 去结算 </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;}}// 配合解决超出长度以省略号显示而不会出现换行&__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;// 超出长度以省略号显示而不会出现换行@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; //中划线}// 购物车选购数量和加减号.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; //往内塞入borderline-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)结束 */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 {//旋转180度transform: rotate(180deg);position: absolute;right: 0.16rem;top: 0.53rem;font-size: 0.16rem;color: $medium-font-color;}}}
</style>