zhuce
/
lilishop-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化购物车在微信公众号中样式问题

master
lemon橪 2021-09-22 11:31:37 +08:00
parent 73560e8366
commit 0b2bf1faf1
1 changed files with 41 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
pages/tabbar/cart/cartList.vue
View File

@ -1,6 +1,7 @@
<template> <template>
<div class="wrapper"> <div class="wrapper">
<u-navbar :isBack="false" title="购物车"></u-navbar> <u-navbar :isBack="false" title="购物车"></u-navbar>
<!-- 空白页--> <!-- 空白页-->
<view v-if="cartDetail.cartList == '' || cartDetail.cartList == [] || !cartDetail" class="empty"> <view v-if="cartDetail.cartList == '' || cartDetail.cartList == [] || !cartDetail" class="empty">
<image src="/static/emptyCart.png" mode="aspectFit"></image> <image src="/static/emptyCart.png" mode="aspectFit"></image>
@ -12,16 +13,19 @@
<!-- 店铺商品信息 --> <!-- 店铺商品信息 -->
<div class="content"> <div class="content">
<div class="box box2" :class="{ invalid: isInvalid(item) }" v-for="(item, index) in cartDetail.cartList" :key="index"> <div class="box box2" :class="{ invalid: isInvalid(item) }" v-for="(item, index) in cartDetail.cartList"
:key="index">
<view class="tab"> <view class="tab">
<view class="store-line"> <view class="store-line">
<u-checkbox-group class="store-line-check"> <u-checkbox-group class="store-line-check">
<!-- #ifndef MP-WEIXIN --> <!-- #ifndef MP-WEIXIN -->
<u-checkbox shape="circle" :active-color="lightColor" v-model="item.checked" @change="checkboxChangeDP(item)"></u-checkbox> <u-checkbox shape="circle" :active-color="lightColor" v-model="item.checked"
@change="checkboxChangeDP(item)"></u-checkbox>
<!-- #endif --> <!-- #endif -->
<!-- 微信小程序这里 v-model出现问题，改用:value --> <!-- 微信小程序这里 v-model出现问题，改用:value -->
<!-- #ifdef MP-WEIXIN --> <!-- #ifdef MP-WEIXIN -->
<u-checkbox shape="circle" :active-color="lightColor" :value="item.checked" @change="checkboxChangeDP(item)"></u-checkbox> <u-checkbox shape="circle" :active-color="lightColor" :value="item.checked"
@change="checkboxChangeDP(item)"></u-checkbox>
<!-- #endif --> <!-- #endif -->
</u-checkbox-group> </u-checkbox-group>
<span class="storeName store-line-desc" @click.stop="navigateToStore(item)">{{ <span class="storeName store-line-desc" @click.stop="navigateToStore(item)">{{
@ -33,10 +37,12 @@
<span>领劵</span> <span>领劵</span>
</view> </view>
</view> </view>
<u-swipe-action :show="skuItem.selected" @open="openAction(skuItem)" :options="options" bg-color="#fff" ref="swiperAction" class="cartItem" v-for="(skuItem, i) in item.skuList" :index="i" <u-swipe-action :show="skuItem.selected" @open="openAction(skuItem)" :options="options" bg-color="#fff"
:key="skuItem.goodsSku.id" @click="changeActionTab(skuItem)" @longpress="changeActionTab(skuItem)"> ref="swiperAction" class="cartItem" v-for="(skuItem, i) in item.skuList" :index="i" :key="skuItem.goodsSku.id"
@click="changeActionTab(skuItem)" @longpress="changeActionTab(skuItem)">
<!-- 满减活动 --> <!-- 满减活动 -->
<div v-if="skuItem.promotions" v-for="(fullDiscount,fullDiscountIndex) in skuItem.promotions" :key="fullDiscountIndex"> <div v-if="skuItem.promotions" v-for="(fullDiscount,fullDiscountIndex) in skuItem.promotions"
:key="fullDiscountIndex">
<div v-if="fullDiscount.promotionType == 'FULL_DISCOUNT'"> <div v-if="fullDiscount.promotionType == 'FULL_DISCOUNT'">
<div class="promotion-notice" v-if="item.promotionNotice"> <div class="promotion-notice" v-if="item.promotionNotice">
<span class="tips">满减</span> <span class="tips">满减</span>
@ -49,16 +55,19 @@
<view> <view>
<u-checkbox-group v-if="skuItem.invalid == 0"> <u-checkbox-group v-if="skuItem.invalid == 0">
<!-- #ifndef MP-WEIXIN --> <!-- #ifndef MP-WEIXIN -->
<u-checkbox shape="circle" :active-color="lightColor" class="c-left" v-model="skuItem.checked" @change="checkboxChange(skuItem)"></u-checkbox> <u-checkbox shape="circle" :active-color="lightColor" class="c-left" v-model="skuItem.checked"
@change="checkboxChange(skuItem)"></u-checkbox>
<!-- #endif --> <!-- #endif -->
<!-- 微信小程序这里 v-model出现问题，改用:value --> <!-- 微信小程序这里 v-model出现问题，改用:value -->
<!-- #ifdef MP-WEIXIN --> <!-- #ifdef MP-WEIXIN -->
<u-checkbox shape="circle" :active-color="lightColor" class="c-left" :value="skuItem.checked" @change="checkboxChange(skuItem)"></u-checkbox> <u-checkbox shape="circle" :active-color="lightColor" class="c-left" :value="skuItem.checked"
@change="checkboxChange(skuItem)"></u-checkbox>
<!-- #endif --> <!-- #endif -->
</u-checkbox-group> </u-checkbox-group>
<span class="invalid" v-else style="font-size: 24rpx">失效</span> <span class="invalid" v-else style="font-size: 24rpx">失效</span>
</view> </view>
<u-image border-radius="20" :fade="true" @click.native="navigateToGoods(skuItem)" width="200rpx" height="200rpx" :src="skuItem.goodsSku.thumbnail" @click="navigateToGoods(skuItem)" /> <u-image border-radius="20" :fade="true" @click.native="navigateToGoods(skuItem)" width="200rpx"
height="200rpx" :src="skuItem.goodsSku.thumbnail" @click="navigateToGoods(skuItem)" />
</view> </view>
<view class="goods-content"> <view class="goods-content">
<!-- 商品名称 --> <!-- 商品名称 -->
@ -76,18 +85,22 @@
</view> </view>
<view> <view>
<!-- #ifndef MP-WEIXIN --> <!-- #ifndef MP-WEIXIN -->
<u-number-box class="uNumber" :min="1" input-width="70" input-height="40" size="20" v-model="skuItem.num" @change="numChange(skuItem)"></u-number-box> <u-number-box class="uNumber" :min="1" input-width="70" input-height="40" size="20"
v-model="skuItem.num" @change="numChange(skuItem)"></u-number-box>
<!-- #endif --> <!-- #endif -->
<!-- #ifdef MP-WEIXIN --> <!-- #ifdef MP-WEIXIN -->
<u-number-box class="uNumber" :min="1" input-width="70" input-height="40" size="20" :value="skuItem.num" @plus="numChange(skuItem, '1')" @change="numChange_WEIXIN" :skuItem="skuItem" <u-number-box class="uNumber" :min="1" input-width="70" input-height="40" size="20"
:value="skuItem.num" @plus="numChange(skuItem, '1')" @change="numChange_WEIXIN" :skuItem="skuItem"
@minus="numChange(skuItem, '0')"></u-number-box> @minus="numChange(skuItem, '0')"></u-number-box>
<!-- #endif --> <!-- #endif -->
</view> </view>
<!-- 如果当有促销并且促销是 限时抢购 --> <!-- 如果当有促销并且促销是 限时抢购 -->
<!-- promotions --> <!-- promotions -->
<div class="promotions-list" v-if="skuItem.promotions" v-for="(seckill,seckillIndex) in skuItem.promotions" :key="seckillIndex"> <div class="promotions-list" v-if="skuItem.promotions"
v-for="(seckill,seckillIndex) in skuItem.promotions" :key="seckillIndex">
<div class="promotions-item-seckill" v-if="seckill.promotionType == 'SECKILL'"> <div class="promotions-item-seckill" v-if="seckill.promotionType == 'SECKILL'">
距秒杀结束: <u-count-down show-border :hide-zero-day="true" :color="$mainColor" border-color="#ededed" font-size="24" :timestamp="getCountDownTime(seckill.endTime)"> 距秒杀结束: <u-count-down show-border :hide-zero-day="true" :color="$mainColor" border-color="#ededed"
font-size="24" :timestamp="getCountDownTime(seckill.endTime)">
</u-count-down> </u-count-down>
</div> </div>
@ -105,21 +118,27 @@
</u-swipe-action> </u-swipe-action>
</div> </div>
</div> </div>
<u-modal v-model="deleteShow" :confirm-style="{'color':lightColor}" @confirm="delectConfirm" show-cancel-button :content="deleteContent" :async-close="true"></u-modal> <u-modal v-model="deleteShow" :confirm-style="{'color':lightColor}" @confirm="delectConfirm" show-cancel-button
:content="deleteContent" :async-close="true"></u-modal>
<!-- 结账 --> <!-- 结账 -->
<div class="box box6"> <div class="box box6">
<view class="navL"> <view class="navL">
<u-checkbox shape="circle" :active-color="lightColor" v-model="checkout" @change="checkOut()" label-size="24">全选</u-checkbox> <u-checkbox shape="circle" :active-color="lightColor" v-model="checkout" @change="checkOut()" label-size="24">全选
</u-checkbox>
<span class="price"> <span class="price">
<div class="prices"> <div class="prices">
<div class="fullPrice"> <div class="fullPrice">
<span class="number" v-if="cartDetail && cartDetail.priceDetailDTO"> <span class="number" v-if="cartDetail && cartDetail.priceDetailDTO">
总计: <span>¥{{ formatPrice(cartDetail.priceDetailDTO.flowPrice)[0] }}</span>.<span>{{ formatPrice(cartDetail.priceDetailDTO.flowPrice)[1] }}</span> 总计:
<span>¥{{ formatPrice(cartDetail.priceDetailDTO.flowPrice)[0] }}</span>.<span>{{ formatPrice(cartDetail.priceDetailDTO.flowPrice)[1] }}</span>
</span> </span>
<span class="number" v-else>总计:0.00</span> <span class="number" v-else>总计:0.00</span>
</div> </div>
<div v-if="cartDetail.cartList && cartDetail.cartList.length!=0 && cartDetail.priceDetailDTO && cartDetail.priceDetailDTO.discountPrice!=0 " class="discountPrice"> <div
<span>优惠减:￥{{(cartDetail.priceDetailDTO.goodsPrice - cartDetail.priceDetailDTO.flowPrice) | unitPrice}} </span> v-if="cartDetail.cartList && cartDetail.cartList.length!=0 && cartDetail.priceDetailDTO && cartDetail.priceDetailDTO.discountPrice!=0 "
class="discountPrice">
<span>优惠减:￥{{(cartDetail.priceDetailDTO.goodsPrice - cartDetail.priceDetailDTO.flowPrice) | unitPrice}}
</span>
<span class="discountDetails" @click="discountDetails">优惠明细</span> <span class="discountDetails" @click="discountDetails">优惠明细</span>
</div> </div>
</div> </div>
@ -549,9 +568,6 @@ export default {
color: #fff; color: #fff;
} }
} }
.promotionNotice {
font-size: 24rpx;
}
.goods-row { .goods-row {
padding: 30rpx 0; padding: 30rpx 0;
@ -572,9 +588,7 @@ export default {
transition: 0.35s; transition: 0.35s;
} }
.index {
padding-top: var(--status-bar-height);
}
/* 空白页 */ /* 空白页 */
/deep/ .u-number-input { /deep/ .u-number-input {
@ -598,7 +612,7 @@ export default {
width: 100%; width: 100%;
height: 100vh; height: 100vh;
z-index: 99; z-index: 99;
padding-bottom: 100rpx; padding-bottom: var(--window-bottom);
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
@ -723,9 +737,6 @@ export default {
justify-content: space-between; justify-content: space-between;
padding: 30rpx 0; padding: 30rpx 0;
} }
.couponIcon {
margin-left: 20rpx;
}
.right_Col { .right_Col {
color: $light-color; color: $light-color;
@ -754,7 +765,7 @@ export default {
bottom: 0; bottom: 0;
// #endif // #endif
// #ifdef H5 // #ifdef H5
bottom: 100rpx; bottom: var(--window-bottom);
// #endif // #endif
left: 0; left: 0;
border-top: 1px solid #ededed; border-top: 1px solid #ededed;
@ -773,15 +784,6 @@ export default {
} }
} }
.sp-name {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
font-size: 26rpx;
color: #333;
font-weight: bold;
}
.sp-type { .sp-type {
color: $u-light-color; color: $u-light-color;
@ -796,11 +798,7 @@ export default {
.default-color { .default-color {
color: #333; color: #333;
} }.sp-number {
.theme-color {
color: $main-color;
}
.sp-number {
font-weight: bold; font-weight: bold;
display: flex; display: flex;