xsl/meida_applet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

s-coupon-get.vue，detail-tabbar.vue，详情加入购物车，其他模块优化

Browse Source
This commit is contained in:
落日晚风
2023-12-11 17:42:50 +08:00
parent c5b1f3ac93
commit ef26268c8e
17 changed files with 1836 additions and 1767 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/goods/components/detail/detail-tabbar.vue
+149 -155
View File
@@ -1,171 +1,165 @@
<template>
<su-fixed bottom placeholder bg="bg-white">
<view class="ui-tabbar-box">
<view class="ui-tabbar ss-flex ss-col-center ss-row-between">
<view
v-if="collectIcon"
class="detail-tabbar-item ss-flex ss-flex-col ss-row-center ss-col-center"
@tap="onFavorite"
>
<block v-if="modelValue.favorite">
<image
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>
<image
class="item-icon"
:src="sheep.$url.static('/static/img/shop/goods/collect_0.png')"
mode="aspectFit"
></image>
<view class="item-title">收藏</view>
</block>
</view>
<view
v-if="serviceIcon"
class="detail-tabbar-item ss-flex ss-flex-col ss-row-center ss-col-center"
@tap="onChat"
>
<image
class="item-icon"
:src="sheep.$url.static('/static/img/shop/goods/message.png')"
mode="aspectFit"
></image>
<view class="item-title">客服</view>
</view>
<view
v-if="shareIcon"
class="detail-tabbar-item ss-flex ss-flex-col ss-row-center ss-col-center"
@tap="showShareModal"
>
<image
class="item-icon"
:src="sheep.$url.static('/static/img/shop/goods/share.png')"
mode="aspectFit"
></image>
<view class="item-title">分享</view>
</view>
<slot></slot>
</view>
</view>
</su-fixed>
<su-fixed bottom placeholder bg="bg-white">
<view class="ui-tabbar-box">
<view class="ui-tabbar ss-flex ss-col-center ss-row-between">
<view v-if="collectIcon" class="detail-tabbar-item ss-flex ss-flex-col ss-row-center ss-col-center"
@tap="onFavorite">
<block v-if="modelValue.favorite">
<image 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>
<image class="item-icon" :src="sheep.$url.static('/static/img/shop/goods/collect_0.png')"
mode="aspectFit"></image>
<view class="item-title">收藏</view>
</block>
</view>
<view v-if="serviceIcon" class="detail-tabbar-item ss-flex ss-flex-col ss-row-center ss-col-center"
@tap="onChat">
<image class="item-icon" :src="sheep.$url.static('/static/img/shop/goods/message.png')"
mode="aspectFit"></image>
<view class="item-title">客服</view>
</view>
<view v-if="shareIcon" class="detail-tabbar-item ss-flex ss-flex-col ss-row-center ss-col-center"
@tap="showShareModal">
<image class="item-icon" :src="sheep.$url.static('/static/img/shop/goods/share.png')"
mode="aspectFit"></image>
<view class="item-title">分享</view>
</view>
<slot></slot>
</view>
</view>
</su-fixed>
</template>
<script setup>
/**
*
* 底部导航
*
* @property {String} bg - 背景颜色Class
* @property {String} ui - 自定义样式Class
* @property {Boolean} noFixed - 是否定位
* @property {Boolean} topRadius - 上圆角
*
*
*/
/**
*
* 底部导航
*
* @property {String} bg - 背景颜色Class
* @property {String} ui - 自定义样式Class
* @property {Boolean} noFixed - 是否定位
* @property {Boolean} topRadius - 上圆角
*
*
*/
import { computed, reactive } from 'vue';
import sheep from '@/sheep';
import { showShareModal } from '@/sheep/hooks/useModal';
import {
computed,
reactive
} from 'vue';
import sheep from '@/sheep';
import {
showShareModal
} from '@/sheep/hooks/useModal';
// 数据
const state = reactive({});
// 数据
const state = reactive({});
// 接收参数
const props = defineProps({
modelValue: {
type: Object,
default() {},
},
bg: {
type: String,
default: 'bg-white',
},
bgStyles: {
type: Object,
default() {},
},
ui: {
type: String,
default: '',
},
// 接收参数
const props = defineProps({
modelValue: {
type: Object,
default () {},
},
bg: {
type: String,
default: 'bg-white',
},
bgStyles: {
type: Object,
default () {},
},
ui: {
type: String,
default: '',
},
noFixed: {
type: Boolean,
default: false,
},
topRadius: {
type: Number,
default: 0,
},
collectIcon: {
type: Boolean,
default: true,
},
serviceIcon: {
type: Boolean,
default: true,
},
shareIcon: {
type: Boolean,
default: true,
},
});
const elStyles = computed(() => {
return {
'border-top-left-radius': props.topRadius + 'rpx',
'border-top-right-radius': props.topRadius + 'rpx',
overflow: 'hidden',
};
});
noFixed: {
type: Boolean,
default: false,
},
topRadius: {
type: Number,
default: 0,
},
collectIcon: {
type: Boolean,
default: true,
},
serviceIcon: {
type: Boolean,
default: true,
},
shareIcon: {
type: Boolean,
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;
}
}
}
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;
// }
// }
let data;
if (props.modelValue.favorite) {
data = await sheep.$api.user.favorite.dos(props.modelValue.id);
} else {
data = await sheep.$api.user.favorite.do(props.modelValue.id);
}
if (data.data) {
props.modelValue.favorite = !props.modelValue.favorite;
}
}
const onChat = () => {
sheep.$router.go('/pages/chat/index', {
id: props.modelValue.id,
});
};
const onChat = () => {
sheep.$router.go('/pages/chat/index', {
id: props.modelValue.id,
});
};
</script>
<style lang="scss" scoped>
.ui-tabbar-box {
box-shadow: 0px -6px 10px 0px rgba(51, 51, 51, 0.2);
}
.ui-tabbar {
display: flex;
height: 50px;
background: #fff;
.ui-tabbar-box {
box-shadow: 0px -6px 10px 0px rgba(51, 51, 51, 0.2);
}
.detail-tabbar-item {
width: 100rpx;
.ui-tabbar {
display: flex;
height: 50px;
background: #fff;
.item-icon {
width: 40rpx;
height: 40rpx;
}
.detail-tabbar-item {
width: 100rpx;
.item-title {
font-size: 20rpx;
font-weight: 500;
line-height: 20rpx;
margin-top: 12rpx;
}
}
}
</style>
.item-icon {
width: 40rpx;
height: 40rpx;
}
.item-title {
font-size: 20rpx;
font-weight: 500;
line-height: 20rpx;
margin-top: 12rpx;
}
}
}
</style>
pages/goods/index.vue
+102 -45
View File
@@ -13,7 +13,7 @@
<view class="detail-swiper-selector">
<!-- 商品轮播图 -->
<su-swiper class="ss-m-b-14" isPreview :list="formatGoodsSwiper(state.goodsInfo.sliderPicUrls)"
dotStyle="tag" imageMode="widthFix" dotCur="bg-mask-40" :seizeHeight="750" />
dotStyle="tag" imageMode="widthFix" dotCur="bg-mask-40" :seizeHeight="750" />
<!-- 价格+标题 -->
<view class="title-card detail-card ss-p-y-40 ss-p-x-20">
@@ -31,16 +31,17 @@
</view>
</view>
<view class="discounts-box ss-flex ss-row-between ss-m-b-28">
<!-- 满减送/限时折扣活动的提示 TODO 芋艿：promos 未写 -->
<div class="tag-content">
<!-- 满减送/限时折扣活动的提示 TODO 芋艿：promos 未写 -->
<div class="tag-content">
<view class="tag-box ss-flex">
<view class="tag ss-m-r-10" v-for="promos in state.goodsInfo.promos" :key="promos.id" @tap="onActivity">
<view class="tag ss-m-r-10" v-for="promos in state.goodsInfo.promos"
:key="promos.id" @tap="onActivity">
{{ promos.title }}
</view>
</view>
</div>
<!-- 优惠劵 -->
<!-- 优惠劵 -->
<view class="get-coupon-box ss-flex ss-col-center ss-m-l-20" @tap="state.showModel = true"
v-if="state.couponInfo.length">
<view class="discounts-title ss-m-r-8">领券</view>
@@ -54,15 +55,15 @@
<!-- 功能卡片 -->
<view class="detail-cell-card detail-card ss-flex-col">
<detail-cell-sku v-model="state.selectedSku.goods_sku_text" :sku="state.selectedSku"
@tap="state.showSelectSku = true" />
<!-- TODO 芋艿：可能暂时不考虑使用 -->
@tap="state.showSelectSku = true" />
<!-- TODO 芋艿：可能暂时不考虑使用 -->
<detail-cell-service v-if="state.goodsInfo.service" v-model="state.goodsInfo.service" />
<detail-cell-params v-if="state.goodsInfo.params" v-model="state.goodsInfo.params" />
</view>
<!-- 规格与数量弹框 -->
<s-select-sku :goodsInfo="state.goodsInfo" :show="state.showSelectSku" @addCart="onAddCart"
@buy="onBuy" @change="onSkuChange" @close="state.showSelectSku = false" />
@buy="onBuy" @change="onSkuChange" @close="state.showSelectSku = false" />
</view>
<!-- 评价 -->
@@ -88,25 +89,35 @@
</view>
</detail-tabbar>
<!-- 优惠劵弹窗 -->
<!-- 优惠劵弹窗 -->
<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>
</template>
<script setup>
import { reactive, computed } from 'vue';
import { onLoad, onPageScroll } from '@dcloudio/uni-app';
import {
reactive,
computed
} from 'vue';
import {
onLoad,
onPageScroll
} from '@dcloudio/uni-app';
import sheep from '@/sheep';
import CouponApi from '@/sheep/api/promotion/coupon';
import ActivityApi from '@/sheep/api/promotion/activity';
import { formatSales, formatGoodsSwiper, fen2yuan, } from '@/sheep/hooks/useGoods';
import CouponApi from '@/sheep/api/promotion/coupon';
import ActivityApi from '@/sheep/api/promotion/activity';
import {
formatSales,
formatGoodsSwiper,
fen2yuan,
} from '@/sheep/hooks/useGoods';
import detailNavbar from './components/detail/detail-navbar.vue';
import detailCellSku from './components/detail/detail-cell-sku.vue';
import detailCellService from './components/detail/detail-cell-service.vue';
@@ -116,7 +127,9 @@
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(() => {});
@@ -130,7 +143,7 @@
couponInfo: [], // 可领取的 Coupon 优惠劵的列表
showActivityModel: false, // 【满减送/限时折扣】是否展示 Activity 营销活动的弹窗
activityInfo: [], // 【满减送/限时折扣】可参与的 Activity 营销活动的列表
activityList: [], // 【秒杀/拼团/砍价】可参与的 Activity 营销活动的列表
activityList: [], // 【秒杀/拼团/砍价】可参与的 Activity 营销活动的列表
});
// 规格变更
@@ -140,6 +153,7 @@
// 添加购物车 TODO 芋艿：待测试
function onAddCart(e) {
console.log(e, '加入购物车');
sheep.$store('cart').add(e);
}
@@ -166,10 +180,10 @@
// 立即领取 TODO 芋艿：待测试
async function onGet(id) {
const {
error,
code,
msg
} = await sheep.$api.coupon.get(id);
if (error === 0) {
if (code === 0) {
uni.showToast({
title: msg,
});
@@ -179,7 +193,7 @@
}
}
// TODO 芋艿：待测试
// TODO 芋艿：待测试
const shareInfo = computed(() => {
if (isEmpty(state.goodsInfo)) return {};
return sheep.$platform.share.getShareInfo({
@@ -207,32 +221,75 @@
}
state.goodsId = options.id;
// 1. 加载商品信息
sheep.$api.goods.detail(state.goodsId).then((res) => {
// 未找到商品
if (res.code !== 0 || !res.data) {
state.goodsInfo = null;
return;
}
sheep.$api.goods.detail(state.goodsId).then(async (res) => {
// 未找到商品
if (res.code !== 0 || !res.data) {
state.goodsInfo = null;
return;
}
// 加载到商品
state.skeletonLoading = false;
state.goodsInfo = res.data;
// 获取收藏信息
let dasa = await sheep.$api.goods.exits(options.id);
res.data.favorite = dasa.data;
state.goodsInfo = res.data;
console.log(state.goodsInfo, '商品信息');
// 此处调试默认弹出可以修改为点击弹出
// 2. 加载优惠劵信息
CouponApi.getCouponTemplateList({
price: state.goodsInfo.price,
spuIds: [state.goodsInfo.id],
skuIds: state.goodsInfo.skus.map(item => item.id),
// 先写死
categoryIds: [52]
}).then((res) => {
console.log(res, '优惠券信息进行对接')
if (res.code !== 0) {
return;
}
// 拦截修改数据
let obj2 = {
2: '折扣',
1: '满减'
}
let obj = {
1: '可用',
2: '已用',
3: '过期'
}
let obj3 = {
1: '已领取',
2: '已使用',
3: '已过期'
}
res.data = res.data.map(item => {
return {
...item,
enough: (item.usePrice / 100).toFixed(2),
amount: (item.discountPrice / 100).toFixed(2),
use_start_time: sheep.$helper.timeFormat(item
.validStartTime,
'yyyy-mm-dd hh:MM:ss'),
use_end_time: sheep.$helper.timeFormat(item.validEndTime,
'yyyy-mm-dd hh:MM:ss'),
status_text: obj[item.status],
type_text: obj2[item.discountType],
get_status_text: obj3[item.status],
type_text: obj2[item.discountType]
}
});
state.couponInfo = res.data;
});
});
// return;
// 3. 加载营销活动信息
ActivityApi.getActivityListBySpuId(state.goodsId).then((res) => {
if (res.code !== 0) {
return;
}
state.activityList = res.data;
});
// 2. 加载优惠劵信息
CouponApi.getCouponTemplateList(state.goodsId,2, 10).then((res) => {
if (res.code !== 0) {
return;
}
state.couponInfo = res.data;
});
// 3. 加载营销活动信息
ActivityApi.getActivityListBySpuId(state.goodsId).then((res) => {
if (res.code !== 0) {
return;
}
state.activityList = res.data;
});
});
</script>