mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git
synced 2026-08-06 10:57:25 +08:00
feat: 更新项目配置与组件使用
- 在入口文件中引入uview-plus的配置,优化字体加载逻辑 - 移除manifest.json中不必要的权限描述 - 更新package.json和package-lock.json,添加开发依赖 - 调整多个组件的样式和结构,提升用户体验 - 修复部分组件的逻辑和样式问题,确保兼容性
This commit is contained in:
@@ -1,10 +1,17 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<u-navbar :auto-back="false" title="购物车">
|
||||
<template #right>
|
||||
<div class="light-color edit" @click="isEdit = !isEdit">{{ !isEdit ? '编辑' : '完成'}}</div>
|
||||
</template>
|
||||
</u-navbar>
|
||||
<u-navbar
|
||||
class="cart-navbar"
|
||||
:style="cartNavbarStyle"
|
||||
:auto-back="false"
|
||||
:fixed="true"
|
||||
:placeholder="true"
|
||||
:border="false"
|
||||
left-icon=""
|
||||
title="购物车"
|
||||
:right-text="isEdit ? '完成' : '编辑'"
|
||||
@rightClick="toggleEdit"
|
||||
></u-navbar>
|
||||
<!-- 空白页-->
|
||||
<view v-if="!loading && (cartDetail.cartList == '' || cartDetail.cartList == [] || !cartDetail)" class="empty">
|
||||
<image src="/static/emptyCart.png" mode="aspectFit"></image>
|
||||
@@ -19,21 +26,13 @@
|
||||
:key="index">
|
||||
<view class="tab">
|
||||
<view class="store-line">
|
||||
<u-checkbox-group class="store-line-check">
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<u-checkbox shape="circle" :active-color="lightColor" v-model="item.checked"
|
||||
@change="checkboxChangeDP(item)"></u-checkbox>
|
||||
<!-- #endif -->
|
||||
<!-- 微信小程序这里 v-model出现问题,改用:value -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<u-checkbox shape="circle" :active-color="lightColor" :value="item.checked"
|
||||
@change="checkboxChangeDP(item)"></u-checkbox>
|
||||
<!-- #endif -->
|
||||
</u-checkbox-group>
|
||||
<span class="store-name wes store-line-desc" @click.stop="navigateToStore(item)">{{
|
||||
<view class="store-line-check">
|
||||
<u-checkbox usedAlone shape="circle" :active-color="lightColor" v-model:checked="item.checked"
|
||||
:label-size="14" @change="(checked) => onStoreCheckChange(item, checked)"></u-checkbox>
|
||||
</view>
|
||||
<text class="store-name wes" @click.stop="navigateToStore(item)">{{
|
||||
item.storeName
|
||||
}}</span>
|
||||
<u-icon @click="navigateToStore(item)" size="24" style="margin-left:10rpx;" name="arrow-right"></u-icon>
|
||||
}}</text>
|
||||
</view>
|
||||
<view class="right-col" v-if="item.canReceiveCoupon" @click="navigateToCoupon(item)">
|
||||
<div class="right-line"></div>
|
||||
@@ -56,21 +55,13 @@
|
||||
<view class="goods-row" :class="{ invalid: isInvalid(skuItem) }">
|
||||
<view class="goods-config">
|
||||
<view>
|
||||
<u-checkbox-group v-if="skuItem.invalid == 0 && !skuItem.errorMessage">
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<u-checkbox shape="circle" :active-color="lightColor" class="c-left" v-model="skuItem.checked"
|
||||
@change="checkboxChange(skuItem)"></u-checkbox>
|
||||
<!-- #endif -->
|
||||
<!-- 微信小程序这里 v-model出现问题,改用:value -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<u-checkbox shape="circle" :active-color="lightColor" class="c-left" :value="skuItem.checked"
|
||||
@change="checkboxChange(skuItem)"></u-checkbox>
|
||||
<!-- #endif -->
|
||||
</u-checkbox-group>
|
||||
<u-checkbox v-if="skuItem.invalid == 0 && !skuItem.errorMessage" usedAlone shape="circle"
|
||||
:active-color="lightColor" class="c-left" v-model:checked="skuItem.checked"
|
||||
@change="(checked) => onSkuCheckChange(skuItem, checked)"></u-checkbox>
|
||||
<span class="invalid" v-else style="font-size: 24rpx">失效</span>
|
||||
</view>
|
||||
<u-image border-radius="10" :fade="true" @click="navigateToGoods(skuItem)" width="160rpx" height="160rpx"
|
||||
:src="skuItem.goodsSku.thumbnail" />
|
||||
mode="aspectFill" :src="getSkuThumbnail(skuItem.goodsSku.thumbnail)" />
|
||||
</view>
|
||||
<view class="goods-content">
|
||||
<!-- 商品名称 -->
|
||||
@@ -125,9 +116,10 @@
|
||||
<!-- 结账 -->
|
||||
<div class="box box6">
|
||||
<view class="navL">
|
||||
<u-checkbox shape="circle" :active-color="lightColor" v-model="checkout" @change="checkOut()" label-size="24">全选
|
||||
<u-checkbox class="checkout-all" usedAlone shape="circle" :active-color="lightColor" v-model:checked="checkout"
|
||||
:label-size="12" label="全选" @change="checkOut">
|
||||
</u-checkbox>
|
||||
<span class="price">
|
||||
<span class="price checkout-total">
|
||||
<div class="prices">
|
||||
<div class="fullPrice">
|
||||
<span class="number" v-if="cartDetail && cartDetail.priceDetailDTO">
|
||||
@@ -183,6 +175,7 @@
|
||||
import * as API_Trade from "@/api/trade";
|
||||
import { debounce } from "@/utils/tools.js";
|
||||
import uniNumberBox from '@/components/uni-number-box'
|
||||
import config from "@/config/config";
|
||||
export default {
|
||||
components:{uniNumberBox}, // 数量加减组件
|
||||
data() {
|
||||
@@ -214,10 +207,24 @@ export default {
|
||||
isEdit: false, // 是否是编辑
|
||||
checkout: false, //全选按钮
|
||||
WEIXIN_num: "", //购物车兼容微信步进器
|
||||
defaultGoodsImage: config.logo,
|
||||
capsuleInsetRight: 0,
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
cartNavbarStyle() {
|
||||
if (!this.capsuleInsetRight) {
|
||||
return {};
|
||||
}
|
||||
return {
|
||||
"--cart-capsule-inset": `${this.capsuleInsetRight}px`,
|
||||
};
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.setCapsuleInset();
|
||||
// #ifdef MP-WEIXIN
|
||||
// 小程序默认分享
|
||||
uni.showShareMenu({ withShareTicket: true });
|
||||
@@ -242,6 +249,29 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setCapsuleInset() {
|
||||
// #ifdef MP-WEIXIN
|
||||
try {
|
||||
const menuButton = uni.getMenuButtonBoundingClientRect();
|
||||
const { windowWidth } = uni.getWindowInfo();
|
||||
this.capsuleInsetRight = windowWidth - menuButton.left + uni.upx2px(8);
|
||||
} catch (e) {
|
||||
this.capsuleInsetRight = 90;
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
|
||||
toggleEdit() {
|
||||
this.isEdit = !this.isEdit;
|
||||
},
|
||||
|
||||
getSkuThumbnail(url) {
|
||||
if (url && /^(https?:)?\/\//.test(String(url))) {
|
||||
return url;
|
||||
}
|
||||
return this.defaultGoodsImage;
|
||||
},
|
||||
|
||||
/**
|
||||
* 倒数计时
|
||||
*/
|
||||
@@ -420,11 +450,11 @@ export default {
|
||||
/**
|
||||
* 全选
|
||||
*/
|
||||
checkOut() {
|
||||
API_Trade.checkAll(this.checkout).then((result) => {
|
||||
checkOut(checked) {
|
||||
const selected = typeof checked === "boolean" ? checked : this.checkout;
|
||||
API_Trade.checkAll(selected).then((result) => {
|
||||
if (result.data.success) {
|
||||
this.getCardData();
|
||||
return true;
|
||||
}
|
||||
});
|
||||
},
|
||||
@@ -440,14 +470,12 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 店铺点击
|
||||
*/
|
||||
checkboxChangeDP(e) {
|
||||
// #ifdef MP-WEIXIN
|
||||
e.checked = !e.checked;
|
||||
// #endif
|
||||
this.checkStoreFun(e.storeId, e.checked);
|
||||
onStoreCheckChange(storeItem, checked) {
|
||||
this.checkStoreFun(storeItem.storeId, checked);
|
||||
},
|
||||
|
||||
onSkuCheckChange(skuItem, checked) {
|
||||
this.updateSkuCheckedFun(skuItem.goodsSku.id, checked);
|
||||
},
|
||||
|
||||
/**
|
||||
@@ -501,15 +529,16 @@ export default {
|
||||
let checkOuted = true;
|
||||
for (let i = 0; i < this.cartDetail.cartList.length; i++) {
|
||||
let item = this.cartDetail.cartList[i];
|
||||
console.log(item);
|
||||
item.checked = item.checked == 1;
|
||||
// 循环出当前商品是否全选
|
||||
if (item.checked == 0) {
|
||||
if (!item.checked) {
|
||||
checkOuted = false;
|
||||
}
|
||||
// 如果有拼团活动顺便删除
|
||||
item.skuList &&
|
||||
item.skuList.forEach((sku) => {
|
||||
if (sku.checked == 0) {
|
||||
sku.checked = sku.checked == 1;
|
||||
if (!sku.checked) {
|
||||
checkOuted = false;
|
||||
}
|
||||
if(Object.keys(sku.promotionMap).length != 0)
|
||||
@@ -535,15 +564,6 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 选中某个复选框时,由checkbox时触发
|
||||
*/
|
||||
checkboxChange(e) {
|
||||
// #ifdef MP-WEIXIN
|
||||
e.checked = !e.checked;
|
||||
// #endif
|
||||
this.updateSkuCheckedFun(e.goodsSku.id, e.checked);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -560,9 +580,16 @@ page {
|
||||
.u-image {
|
||||
box-shadow: 0 4rpx 12rpx 0 rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.edit{
|
||||
padding-right: 32rpx;
|
||||
font-size: 28rpx;
|
||||
|
||||
.cart-navbar {
|
||||
::v-deep .u-navbar__content__right {
|
||||
padding-right: var(--cart-capsule-inset, 13px);
|
||||
}
|
||||
|
||||
::v-deep .u-navbar__content__right__text {
|
||||
color: $light-color;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
.promotion-notice {
|
||||
margin-top: 10px;
|
||||
@@ -593,16 +620,26 @@ page {
|
||||
}
|
||||
|
||||
.store-name {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
|
||||
.store-arrow {
|
||||
flex-shrink: 0;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
.invalid {
|
||||
filter: grayscale(1);
|
||||
}
|
||||
|
||||
.cart-item {
|
||||
width: 100%;
|
||||
border-radius: 0.4em;
|
||||
transition: 0.35s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 空白页 */
|
||||
@@ -698,11 +735,16 @@ page {
|
||||
}
|
||||
|
||||
.goods-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-left: 20rpx;
|
||||
overflow: hidden;
|
||||
> p {
|
||||
padding-left: 20rpx;
|
||||
|
||||
> p,
|
||||
.sp-name,
|
||||
.sp-type,
|
||||
.sp-number {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -718,25 +760,27 @@ page {
|
||||
border-right: 1px solid $light-color;
|
||||
}
|
||||
|
||||
.store-line-check,
|
||||
.store-line-img,
|
||||
.store-line-desc {
|
||||
// #ifdef MP-WEIXIN
|
||||
float: left;
|
||||
// #endif
|
||||
.store-line-check {
|
||||
flex-shrink: 0;
|
||||
|
||||
::v-deep .u-checkbox {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.store-line {
|
||||
// #ifndef MP-WEIXIN
|
||||
display: flex;
|
||||
// #endif
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
flex:10;
|
||||
}
|
||||
|
||||
.goods-config {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
|
||||
::v-deep .invalid {
|
||||
display: block;
|
||||
width: 80rpx !important;
|
||||
@@ -746,15 +790,17 @@ page {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 30rpx 0 0 0;
|
||||
padding: 24rpx 0 8rpx;
|
||||
}
|
||||
|
||||
.right-col {
|
||||
flex:2;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
width: 100rpx;
|
||||
color: $light-color;
|
||||
font-size: 26rpx;
|
||||
margin-left: 16rpx;
|
||||
|
||||
> span {
|
||||
margin-left: 20rpx;
|
||||
@@ -762,14 +808,10 @@ page {
|
||||
}
|
||||
|
||||
.right-line {
|
||||
width: 3px;
|
||||
float: left;
|
||||
width: 2rpx;
|
||||
height: 40rpx;
|
||||
border-left: 1px solid #eeeeee;
|
||||
|
||||
::v-deep span {
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.box6 {
|
||||
@@ -795,6 +837,21 @@ page {
|
||||
padding: 0 32rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
gap: 24rpx;
|
||||
|
||||
.checkout-all {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
::v-deep .u-checkbox {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.checkout-total {
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user