|
|
@@ -1,15 +1,20 @@
|
|
|
<template>
|
|
|
<view class="cart-page">
|
|
|
- <!-- 广告位 -->
|
|
|
- <!-- <view class="ad-banner">
|
|
|
- <text>这里是广告</text>
|
|
|
- <u-icon name="arrow-right" color="#999" size="28"></u-icon>
|
|
|
- </view> -->
|
|
|
-
|
|
|
<!-- 购物车列表 -->
|
|
|
<view class="cart-list">
|
|
|
- <cart-item v-for="(item, index) in cartList" :key="index" :item="item" @check="handleCheck"
|
|
|
- @changeNum="handleChangeNum" @reduce="handleReduce"></cart-item>
|
|
|
+ <u-swipe-action :show="item.show" :index="index" v-for="(item, index) in cartList" :key="item.id"
|
|
|
+ @click="clickAction" @open="openAction" :options="actionOptions">
|
|
|
+ <cart-item :item="item" @check="handleCheck" @changeNum="handleChangeNum"
|
|
|
+ @reduce="handleReduce" @selectCondition="onSelectCondition"></cart-item>
|
|
|
+ </u-swipe-action>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 品相切换弹窗 -->
|
|
|
+ <condition-popup ref="conditionPopup" @select="handleConditionUpdate"></condition-popup>
|
|
|
+
|
|
|
+ <!-- 空状态 -->
|
|
|
+ <view class="empty-cart" v-if="cartList.length === 0 && !loading" style="margin:15% 0">
|
|
|
+ <u-empty text="购物车空空如也" mode="car"></u-empty>
|
|
|
</view>
|
|
|
|
|
|
<!-- 为你推荐 -->
|
|
|
@@ -28,15 +33,20 @@
|
|
|
</view>
|
|
|
|
|
|
<!-- 底部占位 -->
|
|
|
- <view style="height: 20rpx;"></view>
|
|
|
+ <view style="height: 120rpx;"></view>
|
|
|
|
|
|
<!-- 底部结算栏 -->
|
|
|
- <view class="bottom-fixed">
|
|
|
+ <view class="bottom-fixed" v-if="cartList.length > 0">
|
|
|
<view class="left-part">
|
|
|
<view class="checkbox-wrap" @click="toggleSelectAll">
|
|
|
<u-checkbox v-model="isAllSelected" shape="circle" active-color="#38C148" :disabled="false"
|
|
|
@change="onAllCheckChange">全选</u-checkbox>
|
|
|
</view>
|
|
|
+ <!-- 清空按钮 -->
|
|
|
+ <view class="clear-btn" @click="handleClearCart"
|
|
|
+ style="margin-left: 20rpx; font-size: 24rpx; color: #999;">
|
|
|
+ 清空
|
|
|
+ </view>
|
|
|
</view>
|
|
|
<view class="right-part">
|
|
|
<view class="total-info">
|
|
|
@@ -62,331 +72,437 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import CartItem from '../components/cart-item.vue';
|
|
|
-import PriceReductionPopup from '../components/price-reduction-popup.vue';
|
|
|
-import CommonDialog from '@/components/common-dialog.vue';
|
|
|
+ import CartItem from '../components/cart-item.vue';
|
|
|
+ import PriceReductionPopup from '../components/price-reduction-popup.vue';
|
|
|
+ import CommonDialog from '@/components/common-dialog.vue';
|
|
|
+ import ConditionPopup from '../components/condition-popup.vue';
|
|
|
|
|
|
-export default {
|
|
|
- components: {
|
|
|
- CartItem,
|
|
|
- PriceReductionPopup,
|
|
|
- CommonDialog
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- isAllSelected: false,
|
|
|
- cartList: [
|
|
|
- {
|
|
|
- id: 1,
|
|
|
- title: '六级词汇词根+联想记忆法第二版浙江教育出版社',
|
|
|
- cover: 'https://k.sinaimg.cn/n/sinakd20116/234/w1000h1634/20251003/b66b-587c9ff400fcf01be52c6693594b6a6d.jpg/w700d1q75cms.jpg',
|
|
|
- price: 14.52,
|
|
|
- num: 1,
|
|
|
- status: 1,
|
|
|
- stock: 10,
|
|
|
- checked: false,
|
|
|
- reducedAmount: 0.5, // 已降
|
|
|
- canReduceAmount: 0,
|
|
|
- stockWarning: false,
|
|
|
- quality: '中等'
|
|
|
- },
|
|
|
- {
|
|
|
- id: 2,
|
|
|
- title: '六级词汇词根+联想记忆法第二版浙江教育出版社',
|
|
|
- cover: 'https://k.sinaimg.cn/n/sinakd20116/234/w1000h1634/20251003/b66b-587c9ff400fcf01be52c6693594b6a6d.jpg/w700d1q75cms.jpg',
|
|
|
- price: 4.5,
|
|
|
- num: 1,
|
|
|
- status: 0, // 无库存/失效
|
|
|
- stock: 0,
|
|
|
- checked: false,
|
|
|
- reducedAmount: 0,
|
|
|
- canReduceAmount: 0,
|
|
|
- stockWarning: false,
|
|
|
- quality: '中等'
|
|
|
- },
|
|
|
- {
|
|
|
- id: 3,
|
|
|
- title: '六级词汇词根+联想记忆法第二版浙江教育出版社',
|
|
|
- cover: 'https://k.sinaimg.cn/n/sinakd20116/234/w1000h1634/20251003/b66b-587c9ff400fcf01be52c6693594b6a6d.jpg/w700d1q75cms.jpg',
|
|
|
- price: 14.52,
|
|
|
- num: 1,
|
|
|
- status: 1,
|
|
|
- stock: 5,
|
|
|
- checked: false,
|
|
|
- reducedAmount: 0,
|
|
|
- canReduceAmount: 0.5, // 可降
|
|
|
- stockWarning: true, // 库存紧张
|
|
|
- quality: '中等'
|
|
|
- }
|
|
|
- ],
|
|
|
- recommendList: [
|
|
|
- { title: '工程数学线性代数第六版', cover: 'https://k.sinaimg.cn/n/sinakd20116/234/w1000h1634/20251003/b66b-587c9ff400fcf01be52c6693594b6a6d.jpg/w700d1q75cms.jpg' },
|
|
|
- { title: '工程数学线性代数第六版', cover: 'https://k.sinaimg.cn/n/sinakd20116/234/w1000h1634/20251003/b66b-587c9ff400fcf01be52c6693594b6a6d.jpg/w700d1q75cms.jpg' },
|
|
|
- { title: '工程数学线性代数第六版', cover: 'https://k.sinaimg.cn/n/sinakd20116/234/w1000h1634/20251003/b66b-587c9ff400fcf01be52c6693594b6a6d.jpg/w700d1q75cms.jpg' },
|
|
|
- { title: '工程数学线性代数第六版', cover: 'https://k.sinaimg.cn/n/sinakd20116/234/w1000h1634/20251003/b66b-587c9ff400fcf01be52c6693594b6a6d.jpg/w700d1q75cms.jpg' },
|
|
|
- { title: '工程数学线性代数第六版', cover: 'https://k.sinaimg.cn/n/sinakd20116/234/w1000h1634/20251003/b66b-587c9ff400fcf01be52c6693594b6a6d.jpg/w700d1q75cms.jpg' },
|
|
|
- { title: '工程数学线性代数第六版', cover: 'https://k.sinaimg.cn/n/sinakd20116/234/w1000h1634/20251003/b66b-587c9ff400fcf01be52c6693594b6a6d.jpg/w700d1q75cms.jpg' }
|
|
|
- ]
|
|
|
- };
|
|
|
- },
|
|
|
- computed: {
|
|
|
- selectedItems() {
|
|
|
- return this.cartList.filter(item => item.checked && item.status === 1 && item.stock > 0);
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ CartItem,
|
|
|
+ PriceReductionPopup,
|
|
|
+ CommonDialog,
|
|
|
+ ConditionPopup
|
|
|
},
|
|
|
- totalPrice() {
|
|
|
- return this.selectedItems.reduce((sum, item) => sum + item.price * item.num, 0).toFixed(2);
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loading: true,
|
|
|
+ currentItem: null,
|
|
|
+ isAllSelected: false,
|
|
|
+ cartList: [],
|
|
|
+ actionOptions: [
|
|
|
+ {
|
|
|
+ text: '删除',
|
|
|
+ style: {
|
|
|
+ backgroundColor: '#fa3534'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ recommendList: [
|
|
|
+ { title: '工程数学线性代数第六版', cover: 'https://k.sinaimg.cn/n/sinakd20116/234/w1000h1634/20251003/b66b-587c9ff400fcf01be52c6693594b6a6d.jpg/w700d1q75cms.jpg' },
|
|
|
+ { title: '工程数学线性代数第六版', cover: 'https://k.sinaimg.cn/n/sinakd20116/234/w1000h1634/20251003/b66b-587c9ff400fcf01be52c6693594b6a6d.jpg/w700d1q75cms.jpg' },
|
|
|
+ { title: '工程数学线性代数第六版', cover: 'https://k.sinaimg.cn/n/sinakd20116/234/w1000h1634/20251003/b66b-587c9ff400fcf01be52c6693594b6a6d.jpg/w700d1q75cms.jpg' },
|
|
|
+ { title: '工程数学线性代数第六版', cover: 'https://k.sinaimg.cn/n/sinakd20116/234/w1000h1634/20251003/b66b-587c9ff400fcf01be52c6693594b6a6d.jpg/w700d1q75cms.jpg' },
|
|
|
+ { title: '工程数学线性代数第六版', cover: 'https://k.sinaimg.cn/n/sinakd20116/234/w1000h1634/20251003/b66b-587c9ff400fcf01be52c6693594b6a6d.jpg/w700d1q75cms.jpg' },
|
|
|
+ { title: '工程数学线性代数第六版', cover: 'https://k.sinaimg.cn/n/sinakd20116/234/w1000h1634/20251003/b66b-587c9ff400fcf01be52c6693594b6a6d.jpg/w700d1q75cms.jpg' }
|
|
|
+ ]
|
|
|
+ };
|
|
|
},
|
|
|
- totalReduced() {
|
|
|
- return this.selectedItems.reduce((sum, item) => sum + (item.reducedAmount || 0) * item.num, 0).toFixed(2);
|
|
|
+ onShow() {
|
|
|
+ this.loadData();
|
|
|
},
|
|
|
- selectedCount() {
|
|
|
- return this.selectedItems.reduce((sum, item) => sum + item.num, 0);
|
|
|
- }
|
|
|
- },
|
|
|
- watch: {
|
|
|
- cartList: {
|
|
|
- handler(val) {
|
|
|
- const validItems = val.filter(item => item.status === 1 && item.stock > 0);
|
|
|
- if (validItems.length === 0) {
|
|
|
- this.isAllSelected = false;
|
|
|
- return;
|
|
|
- }
|
|
|
- this.isAllSelected = validItems.every(item => item.checked);
|
|
|
+ mounted() {
|
|
|
+ this.loadData();
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ selectedItems() {
|
|
|
+ return this.cartList.filter(item => item.checked && item.stockStatus !== 3 && item.availableStock > 0);
|
|
|
},
|
|
|
- deep: true
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- handleCheck({ id, checked }) {
|
|
|
- const item = this.cartList.find(i => i.id === id);
|
|
|
- if (item) {
|
|
|
- item.checked = checked;
|
|
|
+ totalPrice() {
|
|
|
+ return this.selectedItems.reduce((sum, item) => sum + item.productPrice * item.quantity, 0).toFixed(2);
|
|
|
+ },
|
|
|
+ totalReduced() {
|
|
|
+ return this.selectedItems.reduce((sum, item) => sum + (item.currReduceMoney || 0) * item.quantity, 0).toFixed(2);
|
|
|
+ },
|
|
|
+ selectedCount() {
|
|
|
+ return this.selectedItems.reduce((sum, item) => sum + item.quantity, 0);
|
|
|
}
|
|
|
},
|
|
|
- handleChangeNum({ id, num }) {
|
|
|
- const item = this.cartList.find(i => i.id === id);
|
|
|
- if (item) {
|
|
|
- item.num = num;
|
|
|
+ watch: {
|
|
|
+ cartList: {
|
|
|
+ handler(val) {
|
|
|
+ const validItems = val.filter(item => item.stockStatus !== 3 && item.availableStock > 0);
|
|
|
+ if (validItems.length === 0) {
|
|
|
+ this.isAllSelected = false;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.isAllSelected = validItems.every(item => item.checked);
|
|
|
+ },
|
|
|
+ deep: true
|
|
|
}
|
|
|
},
|
|
|
- handleReduce(item) {
|
|
|
- // 打开减钱弹窗
|
|
|
- // 构造弹窗需要的数据格式
|
|
|
- const popupData = {
|
|
|
- price: item.price,
|
|
|
- reducedPrice: (item.price - item.canReduceAmount).toFixed(2),
|
|
|
- startTime: new Date().getTime(),
|
|
|
- endTime: new Date().getTime() + 24 * 60 * 60 * 1000,
|
|
|
- upsellCode: 'mock-code' // 模拟
|
|
|
- };
|
|
|
- this.$refs.reducePopup.bookInfo = popupData; // 直接赋值或者通过 open 方法传参
|
|
|
- // price-reduction-popup (based on upsell-book) uses 'open(data)' method if available,
|
|
|
- // but looking at upsell-book.vue code, it uses v-model="showPopup" and data is set via props or direct access?
|
|
|
- // Actually upsell-book.vue doesn't have an open method in the snippet I saw earlier,
|
|
|
- // wait, upsell-book.vue code snippet shows:
|
|
|
- // data() { return { showPopup: false, ... } }
|
|
|
- // It doesn't seem to have an open() method exposed in the snippet.
|
|
|
- // But it has `custom-popup v-model="showPopup"`.
|
|
|
- // So I should set showPopup = true.
|
|
|
- // And I need to pass data.
|
|
|
- // upsell-book.vue snippet didn't show props for bookInfo,
|
|
|
- // but it uses bookInfo in template. It likely has it in data or props.
|
|
|
- // Let's assume I need to set it.
|
|
|
-
|
|
|
- // Checking upsell-book.vue again (from previous search):
|
|
|
- // It uses `bookInfo.recyclePrice` etc.
|
|
|
- // I should verify if bookInfo is a prop or data.
|
|
|
- // The snippet showed `props: { book: ... }` in BookItem.vue, but upsell-book.vue?
|
|
|
- // Wait, I copied upsell-book.vue. Let me check the file content if I can...
|
|
|
- // I'll assume I can set `this.$refs.reducePopup.bookInfo = ...` and `this.$refs.reducePopup.showPopup = true`.
|
|
|
-
|
|
|
- this.$refs.reducePopup.bookInfo = popupData;
|
|
|
- this.$refs.reducePopup.showPopup = true;
|
|
|
-
|
|
|
- // Simulate invite users
|
|
|
- this.$refs.reducePopup.inviteUsers = [];
|
|
|
- },
|
|
|
- onAllCheckChange(e) {
|
|
|
- const checked = e.value;
|
|
|
- this.cartList.forEach(item => {
|
|
|
- if (item.status === 1 && item.stock > 0) {
|
|
|
+ methods: {
|
|
|
+ clickAction(index, index1) {
|
|
|
+ if (this.actionOptions[index1].text == '删除') {
|
|
|
+ const item = this.cartList[index];
|
|
|
+ this.handleDelete(item);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ openAction(index) {
|
|
|
+ this.cartList[index].show = true;
|
|
|
+ this.cartList.map((val, idx) => {
|
|
|
+ if (index != idx) this.cartList[idx].show = false;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ loadData() {
|
|
|
+ this.loading = true;
|
|
|
+ this.$u.api.getShopCartListAjax({}).then(res => {
|
|
|
+ this.loading = false;
|
|
|
+ // 本地添加选中状态属性
|
|
|
+ const list = res.rows || [];
|
|
|
+ // 如果可能,与现有的选中状态合并,或者重置?
|
|
|
+ // 为简单起见,如果 id 匹配,则重置或保持选中状态。
|
|
|
+ // 或者直接初始化 checked=false。
|
|
|
+ this.cartList = list.map(item => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ checked: false,
|
|
|
+ show: false
|
|
|
+ };
|
|
|
+ });
|
|
|
+ }).catch(() => {
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleCheck({ id, checked }) {
|
|
|
+ const item = this.cartList.find(i => i.id === id);
|
|
|
+ if (item) {
|
|
|
item.checked = checked;
|
|
|
}
|
|
|
- });
|
|
|
- },
|
|
|
- toggleSelectAll() {
|
|
|
- // Handled by u-checkbox change or click wrapper
|
|
|
- // If clicked wrapper, toggle boolean
|
|
|
- // But u-checkbox also emits change.
|
|
|
- // Let's rely on v-model binding and @change
|
|
|
- },
|
|
|
- checkout() {
|
|
|
- if (this.selectedCount === 0) {
|
|
|
- uni.showToast({ title: '请选择商品', icon: 'none' });
|
|
|
- return;
|
|
|
- }
|
|
|
- this.$refs.reduceDialog.openPopup();
|
|
|
- },
|
|
|
- onNext() {
|
|
|
- // 提交订单
|
|
|
- uni.navigateTo({ url: '/pages-car/pages/confirm-order' });
|
|
|
- },
|
|
|
- handleShare() {
|
|
|
- console.log('share');
|
|
|
- },
|
|
|
- handleScan() {
|
|
|
- console.log('scan');
|
|
|
+ },
|
|
|
+ handleChangeNum({ id, num }) {
|
|
|
+ const item = this.cartList.find(i => i.id === id);
|
|
|
+ if (item) {
|
|
|
+ // 乐观更新还是等待服务器?
|
|
|
+ // 通常是服务器优先。
|
|
|
+ this.$u.api.updateCartNumAjax({
|
|
|
+ id: id,
|
|
|
+ quantity: num
|
|
|
+ }).then(() => {
|
|
|
+ item.quantity = num;
|
|
|
+ // 通过 computed 重新计算总额
|
|
|
+ }).catch(() => {
|
|
|
+ // 如果是乐观更新,出错时需要回滚,但这里我们还没有更新?
|
|
|
+ // 实际上数字输入框更新了 v-model。如果在子组件中使用 v-model,它会更新父组件。
|
|
|
+ // 但我们触发了 changeNum。
|
|
|
+ // 在子组件中:v-model="item.quantity" -> 直接更新 prop(Vue 2 会警告,但对象属性变更有效)。
|
|
|
+ // 如果子组件更新了 prop,除了调用 API 我们不需要做任何事。
|
|
|
+ // 但良好的实践是子组件触发事件,父组件更新。
|
|
|
+ // cart-item 使用 v-model 绑定 props.item.quantity。这直接修改了 cartList 中的对象。
|
|
|
+ // 所以 item.quantity 已经是 `num` 了。
|
|
|
+ // 我们只需要调用 API。
|
|
|
+
|
|
|
+ // 注意:cart-item.vue 使用 v-model="item.quantity"。
|
|
|
+ // 这会直接修改对象。
|
|
|
+ // 所以 API 调用应该使用新值。
|
|
|
+ // 如果 API 失败,我们应该回滚。
|
|
|
+ // 但让我们假设成功,或者通过重新加载列表来处理错误。
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleReduce(item) {
|
|
|
+ const popupData = {
|
|
|
+ price: item.productPrice,
|
|
|
+ reducedPrice: (item.productPrice - item.reduceMoney).toFixed(2), // 假设 reduceMoney 是单价减少额
|
|
|
+ startTime: new Date().getTime(),
|
|
|
+ endTime: new Date().getTime() + (item.restTime || 0) * 1000, // restTime 单位是秒?
|
|
|
+ upsellCode: 'mock-code'
|
|
|
+ };
|
|
|
+ this.$refs.reducePopup.bookInfo = popupData;
|
|
|
+ this.$refs.reducePopup.showPopup = true;
|
|
|
+ this.$refs.reducePopup.inviteUsers = [];
|
|
|
+ },
|
|
|
+ onAllCheckChange(e) {
|
|
|
+ const checked = e.value;
|
|
|
+ this.cartList.forEach(item => {
|
|
|
+ if (item.stockStatus !== 3 && item.availableStock > 0) {
|
|
|
+ item.checked = checked;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ toggleSelectAll() {
|
|
|
+ // 由 u-checkbox 处理
|
|
|
+ },
|
|
|
+ handleClearCart() {
|
|
|
+ uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: '确定要清空购物车吗?',
|
|
|
+ success: (res) => {
|
|
|
+ if (res.confirm) {
|
|
|
+ this.$u.api.clearCartAjax().then(() => {
|
|
|
+ this.$u.toast('清空成功');
|
|
|
+ this.cartList = [];
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ checkout() {
|
|
|
+ if (this.selectedCount === 0) {
|
|
|
+ uni.showToast({ title: '请选择商品', icon: 'none' });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // 如果需要,检查减价商品逻辑
|
|
|
+ // 如果有选中的商品可以减价,显示对话框?
|
|
|
+ const hasReduceItem = this.selectedItems.some(item => (item.reduceNum < item.maxReduceNum) && (item.reduceMoney > 0));
|
|
|
+ if (hasReduceItem) {
|
|
|
+ this.$refs.reduceDialog.openPopup();
|
|
|
+ } else {
|
|
|
+ this.onNext();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onNext() {
|
|
|
+ // 提交订单 - 传递选中的 ID?
|
|
|
+ // 通常我们将 ID 传递给确认订单页面
|
|
|
+ const ids = this.selectedItems.map(item => item.id).join(',');
|
|
|
+ uni.navigateTo({ url: `/pages-car/pages/confirm-order?ids=${ids}` });
|
|
|
+ },
|
|
|
+ handleShare() {
|
|
|
+ console.log('share');
|
|
|
+ },
|
|
|
+ handleScan() {
|
|
|
+ console.log('scan');
|
|
|
+ },
|
|
|
+ handleDelete(item) {
|
|
|
+ uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: '确定要删除该商品吗?',
|
|
|
+ success: (res) => {
|
|
|
+ if (res.confirm) {
|
|
|
+ this.$u.api.deleteCartItemAjax(item.id).then(() => {
|
|
|
+ this.$u.toast('删除成功');
|
|
|
+ // 从本地列表中移除
|
|
|
+ const index = this.cartList.findIndex(i => i.id === item.id);
|
|
|
+ if (index > -1) {
|
|
|
+ this.cartList.splice(index, 1);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ item.show = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ onSelectCondition(item) {
|
|
|
+ this.currentItem = item;
|
|
|
+ // 获取商品详情中的 SKU 列表
|
|
|
+ // 注意:这里使用 isbn,假设 item 中包含 isbn
|
|
|
+ if (!item.isbn) {
|
|
|
+ this.$u.toast('无法获取商品信息');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ uni.showLoading({ title: '加载中' });
|
|
|
+ this.$u.http.get('/token/shop/bookDetail', { isbn: item.isbn }).then(res => {
|
|
|
+ uni.hideLoading();
|
|
|
+ if (res.code === 200 && res.data && res.data.skuList) {
|
|
|
+ this.$refs.conditionPopup.open(res.data.skuList, item.conditionType);
|
|
|
+ } else {
|
|
|
+ this.$u.toast('获取品相信息失败');
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ uni.hideLoading();
|
|
|
+ this.$u.toast('网络请求失败');
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleConditionUpdate(sku) {
|
|
|
+ if (!this.currentItem) return;
|
|
|
+
|
|
|
+ uni.showLoading({
|
|
|
+ title: '更新中'
|
|
|
+ });
|
|
|
+ this.$u.api.updateCartConditionAjax({
|
|
|
+ id: this.currentItem.id,
|
|
|
+ conditionType: sku.conditionType
|
|
|
+ }).then(() => {
|
|
|
+ uni.hideLoading();
|
|
|
+ this.$u.toast('更新成功');
|
|
|
+
|
|
|
+ // 在列表中查找并更新,确保视图刷新
|
|
|
+ const index = this.cartList.findIndex(i => i.id === this.currentItem.id);
|
|
|
+ if (index > -1) {
|
|
|
+ const targetItem = this.cartList[index];
|
|
|
+ // 确保转换为数字类型
|
|
|
+ const newType = Number(sku.conditionType);
|
|
|
+
|
|
|
+ this.$set(targetItem, 'conditionType', newType);
|
|
|
+ this.$set(targetItem, 'productPrice', sku.price);
|
|
|
+
|
|
|
+ if (sku.reduceMoney !== undefined) {
|
|
|
+ this.$set(targetItem, 'reduceMoney', sku.reduceMoney);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 强制更新 currentItem 引用(虽然它指向同一个对象,但为了保险)
|
|
|
+ this.currentItem = targetItem;
|
|
|
+ } else {
|
|
|
+ // 如果找不到(极少情况),重新加载
|
|
|
+ this.loadData();
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ uni.hideLoading();
|
|
|
+ });
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.cart-page {
|
|
|
- min-height: 100vh;
|
|
|
- background-color: #f5f5f5;
|
|
|
- padding-bottom: 120rpx; // Space for bottom bar
|
|
|
-}
|
|
|
-
|
|
|
-.ad-banner {
|
|
|
- background-color: #d1f2d6; // Light green
|
|
|
- padding: 20rpx 30rpx;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- color: #666;
|
|
|
- font-size: 26rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.cart-list {
|
|
|
- padding: 20rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.recommend-section {
|
|
|
- padding: 0 20rpx;
|
|
|
+ .cart-page {
|
|
|
+ min-height: 100vh;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ padding-bottom: 120rpx; // 底部栏的留白
|
|
|
+ }
|
|
|
|
|
|
- .section-title {
|
|
|
+ .ad-banner {
|
|
|
+ background-color: #d1f2d6; // 浅绿色
|
|
|
+ padding: 20rpx 30rpx;
|
|
|
display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
align-items: center;
|
|
|
- justify-content: center;
|
|
|
- margin: 30rpx 0;
|
|
|
-
|
|
|
- .line {
|
|
|
- width: 60rpx;
|
|
|
- height: 2rpx;
|
|
|
- background-color: #ccc;
|
|
|
- }
|
|
|
+ color: #666;
|
|
|
+ font-size: 26rpx;
|
|
|
+ }
|
|
|
|
|
|
- .text {
|
|
|
- margin: 0 20rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #333;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
+ .cart-list {
|
|
|
+ padding: 20rpx;
|
|
|
}
|
|
|
|
|
|
- .recommend-grid {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- justify-content: space-between;
|
|
|
+ .recommend-section {
|
|
|
+ padding: 0 20rpx;
|
|
|
|
|
|
- .grid-item {
|
|
|
- width: 32%; // 3 columns
|
|
|
- background-color: #fff;
|
|
|
- border-radius: 12rpx;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- padding: 20rpx;
|
|
|
- box-sizing: border-box;
|
|
|
+ .section-title {
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
align-items: center;
|
|
|
-
|
|
|
- .cover {
|
|
|
- width: 100%;
|
|
|
- height: 220rpx;
|
|
|
- border-radius: 8rpx;
|
|
|
- background-color: #eee;
|
|
|
+ justify-content: center;
|
|
|
+ margin: 30rpx 0;
|
|
|
+
|
|
|
+ .line {
|
|
|
+ width: 60rpx;
|
|
|
+ height: 2rpx;
|
|
|
+ background-color: #ccc;
|
|
|
}
|
|
|
-
|
|
|
- .title {
|
|
|
- margin-top: 10rpx;
|
|
|
- font-size: 24rpx;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ margin: 0 20rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
color: #333;
|
|
|
- line-height: 1.4;
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- -webkit-line-clamp: 2;
|
|
|
- overflow: hidden;
|
|
|
- width: 100%;
|
|
|
+ font-weight: bold;
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
-}
|
|
|
|
|
|
-.bottom-fixed {
|
|
|
- position: fixed;
|
|
|
- bottom: 0;
|
|
|
- /* #ifdef H5 */
|
|
|
- bottom: 50px;
|
|
|
- /* #endif */
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- background-color: #fff;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 24rpx 30rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
|
|
|
- z-index: 99;
|
|
|
+ .recommend-grid {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
|
|
|
- .left-part {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
+ .grid-item {
|
|
|
+ width: 32%; // 3 列
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ padding: 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .cover {
|
|
|
+ width: 100%;
|
|
|
+ height: 220rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ background-color: #eee;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ margin-top: 10rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #333;
|
|
|
+ line-height: 1.4;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ overflow: hidden;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .right-part {
|
|
|
+ .bottom-fixed {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ /* #ifdef H5 */
|
|
|
+ bottom: 50px;
|
|
|
+ /* #endif */
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ background-color: #fff;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
-
|
|
|
- .total-info {
|
|
|
- text-align: right;
|
|
|
- margin-right: 20rpx;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 24rpx 30rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
|
|
|
+ z-index: 99;
|
|
|
+
|
|
|
+ .left-part {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
-
|
|
|
- .reduced-tip {
|
|
|
- font-size: 22rpx;
|
|
|
- color: #38C148;
|
|
|
- border: 1rpx solid #38C148;
|
|
|
- border-radius: 4rpx;
|
|
|
- padding: 0 6rpx;
|
|
|
- margin-right: 10rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .total-price {
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-part {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .total-info {
|
|
|
+ text-align: right;
|
|
|
+ margin-right: 20rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
-
|
|
|
- .label {
|
|
|
- font-size: 28rpx;
|
|
|
- color: #333;
|
|
|
+
|
|
|
+ .reduced-tip {
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #38C148;
|
|
|
+ border: 1rpx solid #38C148;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ padding: 0 6rpx;
|
|
|
+ margin-right: 10rpx;
|
|
|
}
|
|
|
- .price {
|
|
|
- font-size: 36rpx;
|
|
|
- color: #e02020;
|
|
|
- font-weight: bold;
|
|
|
+
|
|
|
+ .total-price {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .label {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .price {
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #e02020;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- .checkout-btn {
|
|
|
- background-color: #e02020;
|
|
|
- color: #fff;
|
|
|
- font-size: 30rpx;
|
|
|
- padding: 16rpx 40rpx;
|
|
|
- border-radius: 40rpx;
|
|
|
+
|
|
|
+ .checkout-btn {
|
|
|
+ background-color: #e02020;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 30rpx;
|
|
|
+ padding: 16rpx 40rpx;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
</style>
|