活动弹窗有部分问题
岳琳红
parent
a6543dc7ca
commit
7a69d10a75
|
|
@ -15,16 +15,16 @@
|
|||
<su-swiper class="ss-m-b-14" isPreview :list="formatGoodsSwiper(state.goodsInfo.sliderPicUrls)"
|
||||
otStyle="tag" imageMode="widthFix" dotCur="bg-mask-40" :seizeHeight="750" />
|
||||
<!-- 限时折扣 -->
|
||||
<view class="discount">
|
||||
<view class="discount" v-if="setShow">
|
||||
<image class="disImg" src="../../static/images/dis.png"></image>
|
||||
<view class="discountCont">
|
||||
<view class="disContT">
|
||||
<view class="disContT1">
|
||||
<view class="disContT1P">
|
||||
￥0.7
|
||||
￥{{fen2yuan(settleData.price)}}
|
||||
</view>
|
||||
<view class="disContT1End">
|
||||
限时到手￥0.4
|
||||
直降￥{{fen2yuan( state.goodsInfo.price - settleData.price)}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="disContT2">
|
||||
|
|
@ -33,12 +33,12 @@
|
|||
</view>
|
||||
<view class="disContB">
|
||||
<view class="disContB1">
|
||||
价格：￥1 丨 剩余：100
|
||||
价格：￥{{fen2yuan(state.goodsInfo.price)}} 丨 剩余：{{settleData.stock}}
|
||||
</view>
|
||||
<view class="disContB2">
|
||||
距结束仅剩
|
||||
<countDown :tipText="' '" :bgColor="bgColor" :dayText="':'" :hourText="':'"
|
||||
:minuteText="':'" :secondText="' '" :datatime="1725033600000 / 1000"
|
||||
:minuteText="':'" :secondText="' '" :datatime="settleData.endTime / 1000"
|
||||
:isDay="false" />
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
<!-- 限时折扣 -->
|
||||
<!-- 价格+标题 -->
|
||||
<view class="title-card detail-card ss-p-y-40 ss-p-x-20">
|
||||
<view class="ss-flex ss-row-between ss-col-center ss-m-b-26">
|
||||
<view class="ss-flex ss-row-between ss-col-center ss-m-b-26" v-if="!setShow">
|
||||
<view class="price-box ss-flex ss-col-bottom">
|
||||
<view class="price-text ss-m-r-16">
|
||||
{{ fen2yuan(state.selectedSku.price || state.goodsInfo.price) }}
|
||||
|
|
@ -121,8 +121,8 @@
|
|||
@get="onGet" /> -->
|
||||
|
||||
<!-- 满减送/限时折扣活动弹窗 -->
|
||||
<s-activity-pop v-model="state.activityInfo" :show="state.showActivityModel"
|
||||
@close="state.showActivityModel = false" />
|
||||
<s-activity-pop v-model="state" :show="state.showActivityModel"
|
||||
@close="state.showActivityModel = false" @get="onGet" />
|
||||
</block>
|
||||
</s-layout>
|
||||
</view>
|
||||
|
|
@ -261,15 +261,38 @@
|
|||
} = await CouponApi.getCouponTemplateList(state.goodsId, 2, 10);
|
||||
if (code === 0) {
|
||||
state.couponInfo = data;
|
||||
console.log('优惠券',state)
|
||||
}
|
||||
}
|
||||
//获取结算信息
|
||||
const setShow = ref(false)
|
||||
const settleData = ref()
|
||||
async function getSettlementByIds(ids) {
|
||||
const { data } = await SpuApi.getSettlementProduct(ids);
|
||||
settleData.value = data
|
||||
settleData.value = handle(data)
|
||||
console.log('结算信息',data)
|
||||
return data;
|
||||
console.log('处理后数据',settleData.value)
|
||||
}
|
||||
//判断是否有限时折扣信息
|
||||
function handle(array){
|
||||
let setList = {}
|
||||
array.forEach(item => {
|
||||
item.skus.forEach(items => {
|
||||
if(items.type == 4){
|
||||
setShow.value = true
|
||||
setList = items
|
||||
return;
|
||||
}
|
||||
})
|
||||
})
|
||||
// 将库存信息加入
|
||||
state.goodsInfo.skus.forEach(item =>{
|
||||
if(item.id == setList.skuId){
|
||||
setList.stock = item.stock
|
||||
}
|
||||
})
|
||||
|
||||
return setList
|
||||
}
|
||||
onLoad((options) => {
|
||||
// 非法参数
|
||||
|
|
|
|||
|
|
@ -1,133 +1,242 @@
|
|||
<!-- 商品信息：满减送等营销活动的弹窗 -->
|
||||
<template>
|
||||
<su-popup :show="show" type="bottom" round="20" @close="emits('close')" showClose>
|
||||
<view class="model-box">
|
||||
<view class="title ss-m-t-16 ss-m-l-20 ss-flex">优惠</view>
|
||||
<scroll-view
|
||||
class="model-content ss-m-t-50"
|
||||
scroll-y
|
||||
:scroll-with-animation="false"
|
||||
:enable-back-to-top="true"
|
||||
>
|
||||
<view class="actBox" v-for="item in state.activityInfo" :key="item.id">
|
||||
<view class="boxCont ss-flex ss-col-top ss-m-b-40" @tap="onGoodsList(item)">
|
||||
<view class="model-content-tag ss-flex ss-row-center">活动</view>
|
||||
<view class="ss-m-l-20 model-content-title ss-flex-1">
|
||||
<view class="contBu ss-m-b-24" v-for="rule in state.activityMap[item.id]?.rules" :key="rule">
|
||||
{{ formatRewardActivityRule(state.activityMap[item.id], rule) }}
|
||||
</view>
|
||||
<view class="contBu ss-m-b-24">
|
||||
2024.08.05-2025.10.10
|
||||
</view>
|
||||
</view>
|
||||
<text class="cicon-forward" />
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</su-popup>
|
||||
<su-popup :show="show" type="bottom" round="20" @close="emits('close')" showClose>
|
||||
<view class="model-box">
|
||||
<view class="title ss-m-t-16 ss-m-l-20 ss-flex">优惠</view>
|
||||
<view class="titleLi">促销</view>
|
||||
<scroll-view class="model-content" scroll-y :scroll-with-animation="false"
|
||||
:enable-back-to-top="true">
|
||||
<view class="actBox" v-for="item in state.activityInfo" :key="item.id">
|
||||
<view class="boxCont ss-flex ss-col-top ss-m-b-40" @tap="onGoodsList(item)">
|
||||
<view class="model-content-tag ss-flex ss-row-center">{{item.name}}</view>
|
||||
<view class="model-content-title">
|
||||
<view class="contBu" v-for="rule in state.activityMap[item.id]?.rules" :key="rule">
|
||||
{{ formatRewardActivityRule(state.activityMap[item.id], rule) }}
|
||||
</view>
|
||||
<view class="ss-m-b-24 cotBu-txt">
|
||||
2024.08.05-2025.10.10
|
||||
</view>
|
||||
</view>
|
||||
<text class="cicon-forward" />
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="titleLi">可领优惠券</view>
|
||||
<scroll-view class="model-content" scroll-y :scroll-with-animation="false"
|
||||
:enable-back-to-top="true">
|
||||
<view class="actBox" v-for="item in state.couponInfo" :key="item.id">
|
||||
<view class="boxCont ss-flex ss-col-top ss-m-b-40">
|
||||
<view class="model-content-tag2">
|
||||
<view class="usePrice">
|
||||
￥{{fen2yuan(item.discountPrice)}}
|
||||
</view>
|
||||
<view class="impose">
|
||||
满￥{{fen2yuan(item.usePrice)}}可用
|
||||
</view>
|
||||
</view>
|
||||
<view class="model-content-title2">
|
||||
<view class="contBu">
|
||||
{{item.name}}
|
||||
</view>
|
||||
<view class="ss-m-b-24 cotBu-txt">
|
||||
2024.08.05-2025.10.10
|
||||
</view>
|
||||
</view>
|
||||
<view class="coupon" @click.stop="getBuy(item.id)" v-if="item.canTake">
|
||||
立即领取
|
||||
</view>
|
||||
<view class="coupon2" v-else>
|
||||
已领取
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</su-popup>
|
||||
</template>
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { computed, reactive, watch } from 'vue';
|
||||
import RewardActivityApi from '@/sheep/api/promotion/rewardActivity';
|
||||
import { formatRewardActivityRule } from '@/sheep/hooks/useGoods';
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default() {},
|
||||
},
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
const emits = defineEmits(['close']);
|
||||
const state = reactive({
|
||||
activityInfo: computed(() => props.modelValue),
|
||||
activityMap: {}
|
||||
});
|
||||
console.log('shuju',state)
|
||||
watch(
|
||||
() => props.show,
|
||||
() => {
|
||||
// 展示的情况下，加载每个活动的详细信息
|
||||
if (props.show) {
|
||||
state.activityInfo?.forEach(activity => {
|
||||
RewardActivityApi.getRewardActivity(activity.id).then(res => {
|
||||
if (res.code !== 0) {
|
||||
return;
|
||||
}
|
||||
state.activityMap[activity.id] = res.data;
|
||||
})
|
||||
});
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
function onGoodsList(e) {
|
||||
sheep.$router.go('/pages/activity/index', {
|
||||
activityId: e.id,
|
||||
});
|
||||
}
|
||||
import sheep from '@/sheep';
|
||||
import {
|
||||
computed,
|
||||
reactive,
|
||||
watch
|
||||
} from 'vue';
|
||||
import RewardActivityApi from '@/sheep/api/promotion/rewardActivity';
|
||||
import {
|
||||
formatRewardActivityRule,fen2yuan
|
||||
} from '@/sheep/hooks/useGoods';
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default () {},
|
||||
},
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
const emits = defineEmits(['close']);
|
||||
const state = reactive({
|
||||
activityInfo: computed(() => props.modelValue.activityInfo),
|
||||
activityMap: {},
|
||||
couponInfo:computed(() => props.modelValue.couponInfo)
|
||||
});
|
||||
console.log('shuju', state)
|
||||
watch(
|
||||
() => props.show,
|
||||
() => {
|
||||
// 展示的情况下，加载每个活动的详细信息
|
||||
if (props.show) {
|
||||
state.activityInfo?.forEach(activity => {
|
||||
RewardActivityApi.getRewardActivity(activity.id).then(res => {
|
||||
if (res.code !== 0) {
|
||||
return;
|
||||
}
|
||||
state.activityMap[activity.id] = res.data;
|
||||
})
|
||||
});
|
||||
}
|
||||
},
|
||||
);
|
||||
// 领取优惠劵
|
||||
const getBuy = (id) => {
|
||||
emits('get', id);
|
||||
};
|
||||
function onGoodsList(e) {
|
||||
sheep.$router.go('/pages/activity/index', {
|
||||
activityId: e.id,
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.model-box {
|
||||
height: 60vh;
|
||||
.title {
|
||||
justify-content: center;
|
||||
font-size: 36rpx;
|
||||
height: 80rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
.model-content {
|
||||
height: 300rpx;
|
||||
padding: 0 20rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: red;
|
||||
.model-content-tag {
|
||||
// background: rgba(#ff6911, 0.1);
|
||||
font-size: 35rpx;
|
||||
font-weight: 500;
|
||||
color: #ff6911;
|
||||
line-height: 150rpx;
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
text-align: center;
|
||||
// border-radius: 5rpx;
|
||||
}
|
||||
.model-content-title {
|
||||
height: 150rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
background-color: gold;
|
||||
overflow: hidden;
|
||||
}
|
||||
.cicon-forward {
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
.model-box {
|
||||
height: 60vh;
|
||||
|
||||
// 新增的
|
||||
.actBox{
|
||||
width: 700rpx;
|
||||
height: 150rpx;
|
||||
background-color: #fff2f2;
|
||||
margin: 10rpx auto;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
.boxCont{
|
||||
width: 700rpx;
|
||||
height: 150rpx;
|
||||
align-items: center;
|
||||
}
|
||||
.contBu{
|
||||
height: 75rpx;
|
||||
line-height: 75rpx;
|
||||
}
|
||||
.title {
|
||||
justify-content: center;
|
||||
font-size: 36rpx;
|
||||
height: 80rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.model-content {
|
||||
height:fit-content;
|
||||
max-height: 350rpx;
|
||||
padding: 0 20rpx;
|
||||
box-sizing: border-box;
|
||||
margin-top: 20rpx;
|
||||
|
||||
.model-content-tag {
|
||||
// background: rgba(#ff6911, 0.1);
|
||||
font-size: 35rpx;
|
||||
font-weight: 500;
|
||||
color: #ff6911;
|
||||
line-height: 150rpx;
|
||||
width: 200rpx;
|
||||
height: 150rpx;
|
||||
text-align: center;
|
||||
|
||||
// border-radius: 5rpx;
|
||||
}
|
||||
.model-content-title {
|
||||
width: 470rpx;
|
||||
height: 150rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cicon-forward {
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
// 新增的
|
||||
.titleLi{
|
||||
margin:10rpx 0 10rpx 20rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
.actBox {
|
||||
width: 700rpx;
|
||||
height: 150rpx;
|
||||
background-color: #fff2f2;
|
||||
margin: 10rpx auto;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.boxCont {
|
||||
width: 700rpx;
|
||||
height: 150rpx;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.contBu {
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
overflow: hidden;
|
||||
font-size: 30rpx;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
-o-text-overflow: ellipsis;
|
||||
}
|
||||
.cotBu-txt{
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
font-size: 25rpx;
|
||||
color: #999999;
|
||||
}
|
||||
.model-content-tag2 {
|
||||
font-size: 35rpx;
|
||||
font-weight: 500;
|
||||
color: #ff6911;
|
||||
width: 200rpx;
|
||||
height: 150rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.usePrice{
|
||||
width: 200rpx;
|
||||
height: 90rpx;
|
||||
line-height: 100rpx;
|
||||
// background-color: red;
|
||||
}
|
||||
.impose{
|
||||
width: 200rpx;
|
||||
height: 50rpx;
|
||||
// line-height: 75rpx;
|
||||
font-size: 23rpx;
|
||||
// background-color: gold;
|
||||
}
|
||||
.model-content-title2 {
|
||||
width: 330rpx;
|
||||
height: 150rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
overflow: hidden;
|
||||
}
|
||||
.coupon{
|
||||
width: 150rpx;
|
||||
height: 50rpx;
|
||||
line-height: 50rpx;
|
||||
background-color: rgb(255, 68, 68);
|
||||
color: white;
|
||||
border-radius: 30rpx;
|
||||
text-align: center;
|
||||
font-size: 25rpx;
|
||||
}
|
||||
.coupon2{
|
||||
width: 150rpx;
|
||||
height: 50rpx;
|
||||
line-height: 50rpx;
|
||||
background-color: rgb(203, 192, 191);
|
||||
color: white;
|
||||
border-radius: 30rpx;
|
||||
text-align: center;
|
||||
font-size: 25rpx;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue