✨ 商品收藏:商品详情的底部接入
parent
3b5c84f970
commit
9049182843
|
@ -1,3 +1,4 @@
|
|||
<!-- 商品详情的底部导航 -->
|
||||
<template>
|
||||
<su-fixed bottom placeholder bg="bg-white">
|
||||
<view class="ui-tabbar-box">
|
||||
|
@ -12,7 +13,7 @@
|
|||
class="item-icon"
|
||||
:src="sheep.$url.static('/static/img/shop/goods/collect_1.gif')"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
/>
|
||||
<view class="item-title">已收藏</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
|
@ -20,7 +21,7 @@
|
|||
class="item-icon"
|
||||
:src="sheep.$url.static('/static/img/shop/goods/collect_0.png')"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
/>
|
||||
<view class="item-title">收藏</view>
|
||||
</block>
|
||||
</view>
|
||||
|
@ -33,7 +34,7 @@
|
|||
class="item-icon"
|
||||
:src="sheep.$url.static('/static/img/shop/goods/message.png')"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
/>
|
||||
<view class="item-title">客服</view>
|
||||
</view>
|
||||
<view
|
||||
|
@ -45,7 +46,7 @@
|
|||
class="item-icon"
|
||||
:src="sheep.$url.static('/static/img/shop/goods/share.png')"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
/>
|
||||
<view class="item-title">分享</view>
|
||||
</view>
|
||||
<slot></slot>
|
||||
|
@ -63,13 +64,11 @@
|
|||
* @property {String} ui - 自定义样式Class
|
||||
* @property {Boolean} noFixed - 是否定位
|
||||
* @property {Boolean} topRadius - 上圆角
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
import { computed, reactive } from 'vue';
|
||||
import { reactive } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
import { showShareModal } from '@/sheep/hooks/useModal';
|
||||
import FavoriteApi from '@/sheep/api/product/favorite';
|
||||
|
||||
// 数据
|
||||
const state = reactive({});
|
||||
|
@ -114,25 +113,24 @@
|
|||
default: true,
|
||||
},
|
||||
});
|
||||
const elStyles = computed(() => {
|
||||
return {
|
||||
'border-top-left-radius': props.topRadius + 'rpx',
|
||||
'border-top-right-radius': props.topRadius + 'rpx',
|
||||
overflow: 'hidden',
|
||||
};
|
||||
});
|
||||
|
||||
const tabbarheight = (e) => {
|
||||
uni.setStorageSync('tabbar', e);
|
||||
};
|
||||
async function onFavorite() {
|
||||
const { error } = await sheep.$api.user.favorite.do(props.modelValue.id);
|
||||
if (error === 0) {
|
||||
if (props.modelValue.favorite) {
|
||||
props.modelValue.favorite = 0;
|
||||
} else {
|
||||
props.modelValue.favorite = 1;
|
||||
// 情况一:取消收藏
|
||||
if (props.modelValue.favorite) {
|
||||
const { code } = await FavoriteApi.deleteFavorite(props.modelValue.id);
|
||||
if (code !== 0) {
|
||||
return
|
||||
}
|
||||
sheep.$helper.toast('取消收藏');
|
||||
props.modelValue.favorite = false;
|
||||
// 情况二:添加收藏
|
||||
} else {
|
||||
const { code } = await FavoriteApi.createFavorite(props.modelValue.id);
|
||||
if (code !== 0) {
|
||||
return
|
||||
}
|
||||
sheep.$helper.toast('收藏成功');
|
||||
props.modelValue.favorite = true;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -91,11 +91,11 @@
|
|||
|
||||
<!-- 优惠劵弹窗 -->
|
||||
<s-coupon-get v-model="state.couponInfo" :show="state.showModel" @close="state.showModel = false"
|
||||
@get="onGet" />
|
||||
@get="onGet" />
|
||||
|
||||
<!-- 满减送/限时折扣活动弹窗 -->
|
||||
<s-activity-pop v-model="state.activityInfo" :show="state.showActivityModel"
|
||||
@close="state.showActivityModel = false" />
|
||||
@close="state.showActivityModel = false" />
|
||||
</block>
|
||||
</s-layout>
|
||||
</view>
|
||||
|
@ -113,7 +113,8 @@
|
|||
import sheep from '@/sheep';
|
||||
import CouponApi from '@/sheep/api/promotion/coupon';
|
||||
import ActivityApi from '@/sheep/api/promotion/activity';
|
||||
import {
|
||||
import FavoriteApi from '@/sheep/api/product/favorite';
|
||||
import {
|
||||
formatSales,
|
||||
formatGoodsSwiper,
|
||||
fen2yuan,
|
||||
|
@ -127,9 +128,7 @@
|
|||
import detailCommentCard from './components/detail/detail-comment-card.vue';
|
||||
import detailContentCard from './components/detail/detail-content-card.vue';
|
||||
import detailActivityTip from './components/detail/detail-activity-tip.vue';
|
||||
import {
|
||||
isEmpty
|
||||
} from 'lodash';
|
||||
import { isEmpty } from 'lodash';
|
||||
|
||||
onPageScroll(() => {});
|
||||
|
||||
|
@ -153,21 +152,30 @@
|
|||
|
||||
// 添加购物车 TODO 芋艿:待测试
|
||||
function onAddCart(e) {
|
||||
if (!e.id) {
|
||||
sheep.$helper.toast('请选择商品规格');
|
||||
return;
|
||||
}
|
||||
sheep.$store('cart').add(e);
|
||||
}
|
||||
|
||||
// 立即购买 TODO 芋艿:待测试
|
||||
// 立即购买
|
||||
function onBuy(e) {
|
||||
sheep.$router.go('/pages/order/confirm', {
|
||||
data: JSON.stringify({
|
||||
order_type: 'goods',
|
||||
goods_list: [{
|
||||
goods_id: e.goods_id,
|
||||
goods_num: e.goods_num,
|
||||
goods_sku_price_id: e.id,
|
||||
}, ],
|
||||
}),
|
||||
});
|
||||
if (!state.selectedSku.id) {
|
||||
sheep.$helper.toast('请选择商品规格');
|
||||
return;
|
||||
}
|
||||
sheep.$router.go('/pages/order/confirm', {
|
||||
data: JSON.stringify({
|
||||
items: [{
|
||||
skuId: state.selectedSku.id,
|
||||
count: 1
|
||||
}],
|
||||
// TODO 芋艿:后续清理掉这 2 参数
|
||||
deliveryType: 1,
|
||||
pointStatus: false,
|
||||
}),
|
||||
});
|
||||
}
|
||||
|
||||
// 营销活动 TODO 芋艿:待测试
|
||||
|
@ -230,6 +238,14 @@
|
|||
// 加载到商品
|
||||
state.skeletonLoading = false;
|
||||
state.goodsInfo = res.data;
|
||||
|
||||
// 加载是否收藏
|
||||
FavoriteApi.isFavoriteExists(state.goodsId, 'goods').then((res) => {
|
||||
if (res.code !== 0) {
|
||||
return;
|
||||
}
|
||||
state.goodsInfo.favorite = res.data;
|
||||
});
|
||||
});
|
||||
|
||||
// 2. 加载优惠劵信息
|
||||
|
|
|
@ -9,6 +9,26 @@ const FavoriteApi = {
|
|||
params: data
|
||||
});
|
||||
},
|
||||
// 检查是否收藏过商品
|
||||
isFavoriteExists: (spuId) => {
|
||||
return request({
|
||||
url: '/app-api/product/favorite/exits',
|
||||
method: 'GET',
|
||||
params: {
|
||||
spuId
|
||||
}
|
||||
});
|
||||
},
|
||||
// 添加商品收藏
|
||||
createFavorite: (spuId) => {
|
||||
return request({
|
||||
url: '/app-api/product/favorite/create',
|
||||
method: 'POST',
|
||||
data: {
|
||||
spuId
|
||||
}
|
||||
});
|
||||
},
|
||||
// 取消商品收藏
|
||||
deleteFavorite: (spuId) => {
|
||||
return request({
|
||||
|
|
Loading…
Reference in New Issue