真機聯調方式
一種方式是手機和電腦連同一個局域網，也就是同一個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
調整
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"> ¥{{ item.price }} </span>
<span class="product__item__origin"> ¥{{ 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;
// 配合解決超出長度以省略號顯示而不會出現換行
&__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"> ¥{{ item.price }} </span>
<span class="product__item__origin"> ¥{{ 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">¥ {{ 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; //往內塞入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）結束 */
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>
