yudao
/
mall-uniapp
mirror of https://gitee.com/yudaocode/yudao-mall-uniapp.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

修复详情页

pull/100/head
岳琳红 2024-09-12 16:42:52 +08:00
parent e4da107e69
commit d1eea3280c
8 changed files with 1702 additions and 1716 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

146
pages/activity/seckill/list.vue
View File

@ -2,10 +2,7 @@
<template>
<s-layout navbar="inner" :bgStyle="{ color: 'rgb(245,28,19)' }">
<!--顶部背景图-->
<view
class="page-bg"
:style="[{ marginTop: '-' + Number(statusBarHeight + 88) + 'rpx' }]"
></view>
<view class="page-bg" :style="[{ marginTop: '-' + Number(statusBarHeight + 88) + 'rpx' }]"></view>
<!-- 时间段轮播图 -->
<view class="header" v-if="activeTimeConfig?.sliderPicUrls?.length > 0">
<swiper indicator-dots="true" autoplay="true" :circular="true" interval="3000" duration="1500"
@ -26,13 +23,12 @@
</view>
<scroll-view class="time-list" :scroll-into-view="activeTimeElId" scroll-x scroll-with-animation>
<view v-for="(config, index) in timeConfigList" :key="index"
:class="['item', { active: activeTimeIndex === index}]"
:id="`timeItem${index}`"
@tap="handleChangeTimeConfig(index)">
:class="['item', { active: activeTimeIndex === index}]" :id="`timeItem${index}`"
@tap="handleChangeTimeConfig(index,config.id)">
<!-- 活动起始时间 -->
<view class="time">{{ config.startTime }}</view>
<!-- 活动状态 -->
<view class="status">{{ config.status }}</view>
<view class="status">{{ config?.status }}</view>
</view>
</scroll-view>
</view>
@ -57,69 +53,89 @@
</view>
<!-- 活动列表 -->
<scroll-view
class="scroll-box"
:style="{ height: pageHeight + 'rpx' }"
scroll-y="true"
:scroll-with-animation="false"
:enable-back-to-top="true"
>
<scroll-view class="scroll-box" :style="{ height: pageHeight + 'rpx' }" scroll-y="true"
:scroll-with-animation="false" :enable-back-to-top="true">
<view class="goods-box ss-m-b-20" v-for="activity in activityList" :key="activity.id">
<s-goods-column
size="lg"
:data="{ ...activity, price: activity.seckillPrice }"
:goodsFields="goodsFields"
:seckillTag="true"
@click="sheep.$router.go('/pages/goods/seckill', { id: activity.id })"
>
<s-goods-column size="lg" :data="{ ...activity, price: activity.seckillPrice }"
:goodsFields="goodsFields" :seckillTag="true">
<!-- 抢购进度 -->
<template #activity>
<view class="limit">限量 <text class="ss-m-l-5">{{ activity.stock}} {{activity.unitName}}</text></view>
<view class="limit">限量 <text class="ss-m-l-5">{{ activity.stock}}
{{activity.unitName}}</text></view>
<su-progress :percentage="activity.percent" strokeWidth="10" textInside isAnimate />
</template>
<!-- 抢购按钮 -->
<template #cart>
<button :class="['ss-reset-button cart-btn', { disabled: activeTimeConfig.status === TimeStatusEnum.END }]">
<span v-if="activeTimeConfig?.status === TimeStatusEnum.WAIT_START">未开始</span>
<span v-else-if="activeTimeConfig?.status === TimeStatusEnum.STARTED">马上抢</span>
<span v-else>已结束</span>
<button
:class="['ss-reset-button cart-btn', { disabled: activeTimeConfig?.status === TimeStatusEnum.END}]"
v-if="activeTimeConfig?.status === TimeStatusEnum.WAIT_START">
<span>未开始</span>
</button>
<button
:class="['ss-reset-button cart-btn', { disabled: activeTimeConfig?.status === TimeStatusEnum.END}]"
@click="sheep.$router.go('/pages/goods/seckill', { id: activity.id })"
v-else-if='activeTimeConfig?.status === TimeStatusEnum.STARTED'>
<span>马上抢</span>
</button>
<button
:class="['ss-reset-button cart-btn', { disabled: activeTimeConfig?.status === TimeStatusEnum.END}]"
v-else>
<span>已结束</span>
</button>
</template>
</s-goods-column>
</view>
<uni-load-more
v-if="activityTotal > 0"
:status="loadStatus"
:content-text="{
<uni-load-more v-if="activityTotal > 0" :status="loadStatus" :content-text="{
contentdown: '上拉加载更多',
}"
@tap="loadMore"
/>
}" @tap="loadMore" />
</scroll-view>
</view>
</s-layout>
</template>
<script setup>
import {reactive, computed, ref, nextTick} from 'vue';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import {
reactive,
computed,
ref,
nextTick
} from 'vue';
import {
onLoad,
onReachBottom
} from '@dcloudio/uni-app';
import sheep from '@/sheep';
import { useDurationTime } from '@/sheep/hooks/useGoods';
import {
useDurationTime
} from '@/sheep/hooks/useGoods';
import SeckillApi from "@/sheep/api/promotion/seckill";
import dayjs from "dayjs";
import {TimeStatusEnum} from "@/sheep/util/const";
import {
TimeStatusEnum
} from "@/sheep/util/const";
// 计算页面高度
const { safeAreaInsets, safeArea } = sheep.$platform.device;
const {
safeAreaInsets,
safeArea
} = sheep.$platform.device;
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
const pageHeight = (safeArea.height + safeAreaInsets.bottom) * 2 + statusBarHeight - sheep.$platform.navbar - 350;
const headerBg = sheep.$url.css('/static/img/shop/goods/seckill-header.png');
// 商品控件显示的字段（不显示库存、销量。改为显示自定义的进度条）
const goodsFields = {
name: { show: true },
introduction: { show: true },
price: { show: true },
marketPrice: { show: true },
name: {
show: true
},
introduction: {
show: true
},
price: {
show: true
},
marketPrice: {
show: true
},
};
//#region 时间段
@ -127,25 +143,37 @@
const timeConfigList = ref([])
// 查询时间段
const getSeckillConfigList = async () => {
const { data } = await SeckillApi.getSeckillConfigList()
const {
data
} = await SeckillApi.getSeckillConfigList()
const now = dayjs();
const today = now.format('YYYY-MM-DD')
const select = ref([])
console.log('数据', data)
// 判断时间段的状态
data.forEach((config, index) => {
const startTime = dayjs(`${today} ${config.startTime}`)
const endTime = dayjs(`${today} ${config.endTime}`)
select.value[index] = config.id;
if (now.isBefore(startTime)) {
config.status = TimeStatusEnum.WAIT_START;
// select.value[index] = config.id;
console.log('未开始',select.value,activeTimeIndex.value)
} else if (now.isAfter(endTime)) {
config.status = TimeStatusEnum.END;
// select.value[index] = config.id;
console.log('已结束',select.value,activeTimeIndex.value)
} else {
config.status = TimeStatusEnum.STARTED;
activeTimeIndex.value = index;
// select.value[index] = config.id;
activeTimeIndex.value = index
console.log('进行中',select.value,activeTimeIndex.value)
}
})
timeConfigList.value = data
console.log('传递',select.value,activeTimeIndex.value)
// 默认选中进行中的活动
handleChangeTimeConfig(activeTimeIndex.value);
handleChangeTimeConfig(activeTimeIndex.value, select.value[activeTimeIndex.value]);
// 滚动到进行中的时间段
scrollToTimeConfig(activeTimeIndex.value)
}
@ -159,11 +187,13 @@
// 切换时间段
const activeTimeIndex = ref(0) // 当前选中的时间段的索引
const activeTimeConfig = computed(() => timeConfigList.value[activeTimeIndex.value]) // 当前选中的时间段
const handleChangeTimeConfig = (index) => {
const handleChangeTimeConfig = (index, id) => {
console.log('点击',index + '+' + id)
activeTimeIndex.value = index
// 查询活动列表
activityPageParams.pageNo = 1
activityPageParams.configId = id;
activityList.value = []
getActivityList();
}
@ -182,7 +212,7 @@
// 查询活动列表
const activityPageParams = reactive({
id: 0, // 时间段 ID
configId: 0, // 时间段 ID
pageNo: 1, // 页码
pageSize: 5, // 每页数量
})
@ -191,7 +221,9 @@
const loadStatus = ref('') // 页面加载状态
async function getActivityList() {
loadStatus.value = 'loading';
const { data } = await SeckillApi.getSeckillActivityPage(activityPageParams)
const {
data
} = await SeckillApi.getSeckillActivityPage(activityPageParams)
data.list.forEach(activity => {
// 计算抢购进度
activity.percent = parseInt(100 * (activity.totalStock - activity.stock) / activity.totalStock);
@ -235,6 +267,7 @@
margin: -276rpx auto 0 auto;
border-radius: 14rpx;
overflow: hidden;
swiper {
height: 330rpx !important;
border-radius: 14rpx;
@ -246,6 +279,7 @@
height: 100%;
border-radius: 14rpx;
overflow: hidden;
img {
border-radius: 14rpx;
}
@ -257,10 +291,12 @@
width: 75rpx;
height: 70rpx;
}
// 时间段列表
.time-list {
width: 596rpx;
white-space: nowrap;
// 时间段
.item {
display: inline-block;
@ -270,17 +306,20 @@
box-sizing: border-box;
margin-right: 30rpx;
width: 130rpx;
// 开始时间
.time {
font-size: 36rpx;
font-weight: 600;
color: #333;
}
// 选中的时间段
&.active {
.time {
color: var(--ui-BG-Main);
}
// 状态
.status {
height: 30rpx;
@ -301,6 +340,7 @@
margin: 0 20rpx 0 20rpx;
background: #fff;
border-radius: 20rpx 20rpx 0 0;
.content-header {
width: 100%;
border-radius: 20rpx 20rpx 0 0;
@ -312,6 +352,7 @@
height: 64rpx;
background: rgba($color: #fff, $alpha: 0.66);
border-radius: 32px;
// 场次倒计时内容
.countdown-title {
font-size: 28rpx;
@ -319,10 +360,12 @@
color: #333333;
line-height: 28rpx;
}
// 场次倒计时
.countdown-time {
font-size: 28rpx;
color: rgba(#ed3c30, 0.23);
// 场次倒计时：小时部分
.countdown-h {
font-size: 24rpx;
@ -334,6 +377,7 @@
background: rgba(#ed3c30, 0.23);
border-radius: 6rpx;
}
// 场次倒计时：分钟、秒
.countdown-num {
font-size: 24rpx;
@ -348,12 +392,15 @@
}
}
}
// 活动列表
.scroll-box {
height: 900rpx;
// 活动
.goods-box {
position: relative;
// 抢购按钮
.cart-btn {
position: absolute;
@ -373,6 +420,7 @@
color: #fff;
}
}
// 秒杀限量商品数
.limit {
font-size: 22rpx;

8
pages/goods/index.vue
View File

@ -207,7 +207,7 @@
// 立即购买
function onBuy(e) {
if (!state.selectedSku.id) {
if (!e.id) {
sheep.$helper.toast('请选择商品规格');
return;
}
@ -536,7 +536,7 @@
}
.disContT1 {
width: 300rpx;
width: 400rpx;
height: 50rpx;
// background-color: green;
display: flex;
@ -545,10 +545,10 @@
}
.disContT2 {
width: 300rpx;
width: 200rpx;
height: 50rpx;
line-height: 50rpx;
// background-color: green;
// background-color: gold;
font-size: 30rpx;
text-align: end;
color: white;

114
pages/goods/seckill.vue
View File

@ -6,26 +6,13 @@
<!-- 骨架屏 -->
<detailSkeleton v-if="state.skeletonLoading" />
<!-- 下架/售罄提醒 -->
<s-empty
v-else-if="state.goodsInfo === null || state.goodsInfo.activity_type !== 'seckill'"
text="活动不存在或已结束"
icon="/static/soldout-empty.png"
showAction
actionText="再逛逛"
actionUrl="/pages/goods/list"
/>
<s-empty v-else-if="state.goodsInfo === null || state.goodsInfo.activity_type !== 'seckill'" text="活动不存在或已结束"
icon="/static/soldout-empty.png" showAction actionText="再逛逛" actionUrl="/pages/goods/list" />
<block v-else>
<view class="detail-swiper-selector">
<!-- 商品图轮播 -->
<su-swiper
class="ss-m-b-14"
isPreview
:list="state.goodsSwiper"
dotStyle="tag"
imageMode="widthFix"
dotCur="bg-mask-40"
:seizeHeight="750"
/>
<su-swiper class="ss-m-b-14" isPreview :list="state.goodsSwiper" dotStyle="tag" imageMode="widthFix"
dotCur="bg-mask-40" :seizeHeight="750" />
<!-- 价格+标题 -->
<view class="title-card ss-m-y-14 ss-m-x-20 ss-p-x-20 ss-p-y-34">
@ -72,14 +59,9 @@
<detail-cell-sku :sku="state.selectedSku" @tap="state.showSelectSku = true" />
</view>
<!-- 规格与数量弹框 -->
<s-select-seckill-sku
v-model="state.goodsInfo"
:show="state.showSelectSku"
:single-limit-count="activity.singleLimitCount"
@buy="onBuy"
@change="onSkuChange"
@close="state.showSelectSku = false"
/>
<s-select-seckill-sku v-model="state.goodsInfo" :show="state.showSelectSku"
:single-limit-count="activity.singleLimitCount" @buy="onBuy" @change="onSkuChange"
@close="state.showSelectSku = false" />
</view>
<!-- 评价 -->
@ -91,36 +73,25 @@
<detail-tabbar v-model="state.goodsInfo">
<!-- TODO: 缺货中 已售罄 判断 设计-->
<view class="buy-box ss-flex ss-col-center ss-p-r-20">
<button
class="ss-reset-button origin-price-btn ss-flex-col"
v-if="state.goodsInfo.marketPrice"
@tap="sheep.$router.go('/pages/goods/index', { id: state.goodsInfo.id })"
>
<button class="ss-reset-button origin-price-btn ss-flex-col" v-if="state.goodsInfo.marketPrice"
@tap="sheep.$router.go('/pages/goods/index', { id: state.goodsInfo.id })">
<view>
<view class="btn-price">{{ fen2yuan(state.goodsInfo.marketPrice) }}</view>
<view>原价购买</view>
</view>
</button>
<button v-else class="ss-reset-button origin-price-btn ss-flex-col">
<view
class="no-original"
:class="
<view class="no-original" :class="
state.goodsInfo.stock === 0 || timeStatusEnum !== TimeStatusEnum.STARTED ? '' : ''
"
>
">
秒杀价
</view>
</button>
<button
class="ss-reset-button btn-box ss-flex-col"
@tap="state.showSelectSku = true"
:class="
<button class="ss-reset-button btn-box ss-flex-col" @tap="state.showSelectSku = true" :class="
timeStatusEnum === TimeStatusEnum.STARTED && state.goodsInfo.stock != 0
? 'check-btn-box'
: 'disabled-btn-box'
"
:disabled="state.goodsInfo.stock === 0 || timeStatusEnum !== TimeStatusEnum.STARTED"
>
" :disabled="state.goodsInfo.stock === 0 || timeStatusEnum !== TimeStatusEnum.STARTED">
<view class="btn-price">{{ fen2yuan(state.goodsInfo.price) }}</view>
<view v-if="timeStatusEnum === TimeStatusEnum.STARTED">
<view v-if="state.goodsInfo.stock === 0">已售罄</view>
@ -135,11 +106,26 @@
</template>
<script setup>
import { reactive, computed, ref, unref } from 'vue';
import { onLoad, onPageScroll } from '@dcloudio/uni-app';
import {
reactive,
computed,
ref,
unref
} from 'vue';
import {
onLoad,
onPageScroll
} from '@dcloudio/uni-app';
import sheep from '@/sheep';
import { isEmpty, min } from 'lodash-es';
import { useDurationTime, formatGoodsSwiper, fen2yuan } from '@/sheep/hooks/useGoods';
import {
isEmpty,
min
} from 'lodash-es';
import {
useDurationTime,
formatGoodsSwiper,
fen2yuan
} from '@/sheep/hooks/useGoods';
import detailNavbar from './components/detail/detail-navbar.vue';
import detailCellSku from './components/detail/detail-cell-sku.vue';
import detailTabbar from './components/detail/detail-tabbar.vue';
@ -149,7 +135,10 @@
import detailProgress from './components/detail/detail-progress.vue';
import SeckillApi from '@/sheep/api/promotion/seckill';
import SpuApi from '@/sheep/api/product/spu';
import { getTimeStatusEnum, TimeStatusEnum } from '@/sheep/util/const';
import {
getTimeStatusEnum,
TimeStatusEnum
} from '@/sheep/util/const';
const headerBg = sheep.$url.css('/static/img/shop/goods/seckill-bg.png');
const btnBg = sheep.$url.css('/static/img/shop/goods/seckill-btn.png');
@ -186,12 +175,10 @@
order_type: 'goods',
buy_type: 'seckill',
seckillActivityId: activity.value.id,
items: [
{
items: [{
skuId: sku.id,
count: sku.count,
},
],
}, ],
}),
});
}
@ -199,23 +186,20 @@
// 分享信息
const shareInfo = computed(() => {
if (isEmpty(unref(activity))) return {};
return sheep.$platform.share.getShareInfo(
{
return sheep.$platform.share.getShareInfo({
title: activity.value.name,
image: sheep.$url.cdn(state.goodsInfo.picUrl),
params: {
page: '4',
query: activity.value.id,
},
},
{
}, {
type: 'goods', // 商品海报
title: activity.value.name, // 商品标题
image: sheep.$url.cdn(state.goodsInfo.picUrl), // 商品主图
price: state.goodsInfo.price, // 商品价格
marketPrice: state.goodsInfo.marketPrice, // 商品原价
},
);
}, );
});
const activity = ref();
@ -223,9 +207,12 @@
// 查询活动
const getActivity = async (id) => {
const { data } = await SeckillApi.getSeckillActivity(id);
const {
data
} = await SeckillApi.getSeckillActivity(id);
activity.value = data;
timeStatusEnum.value = getTimeStatusEnum(activity.startTime, activity.endTime);
timeStatusEnum.value = getTimeStatusEnum(activity.value.startTime, activity.value.endTime);
console.log('处理后',timeStatusEnum.value)
state.percent = 100 - data.stock / data.totalStock * 100;
// 查询商品
await getSpu(data.spuId);
@ -233,7 +220,9 @@
// 查询商品
const getSpu = async (id) => {
const { data } = await SpuApi.getSpuDetail(id);
const {
data
} = await SpuApi.getSpuDetail(id);
data.activity_type = 'seckill';
state.goodsInfo = data;
// 处理轮播图
@ -285,6 +274,7 @@
.disabled-btn-box[disabled] {
background-color: transparent;
}
.detail-card {
background-color: $white;
margin: 14rpx 20rpx;
@ -375,6 +365,7 @@
font-size: 26rpx;
font-weight: 500;
color: #ffffff;
.countdown-h {
font-size: 24rpx;
font-family: OPPOSANS;
@ -385,6 +376,7 @@
background: rgba(#000000, 0.1);
border-radius: 6rpx;
}
.countdown-num {
font-size: 24rpx;
font-family: OPPOSANS;
@ -468,6 +460,7 @@
line-height: normal;
border-radius: 0px 40rpx 40rpx 0px;
}
.btn-price {
font-family: OPPOSANS;
@ -485,6 +478,7 @@
line-height: normal;
font-size: 24rpx;
font-weight: 500;
.no-original {
font-size: 28rpx;
}

127
pages/order/confirm.vue
View File

@ -5,26 +5,14 @@
<!-- 商品信息 -->
<view class="order-card-box ss-m-b-14">
<s-goods-item
v-for="item in state.orderInfo.items"
:key="item.skuId"
:img="item.picUrl"
:title="item.spuName"
:skuText="item.properties.map((property) => property.valueName).join(' ')"
:price="item.price"
:num="item.count"
marginBottom="10"
/>
<s-goods-item v-for="item in state.orderInfo.items" :key="item.skuId" :img="item.picUrl"
:title="item.spuName" :skuText="item.properties.map((property) => property.valueName).join(' ')"
:price="item.price" :num="item.count" marginBottom="10" />
<view class="order-item ss-flex ss-col-center ss-row-between ss-p-x-20 bg-white ss-r-10">
<view class="item-title">订单备注</view>
<view class="ss-flex ss-col-center">
<uni-easyinput
maxlength="20"
placeholder="建议留言前先与商家沟通"
v-model="state.orderPayload.remark"
:inputBorder="false"
:clearable="false"
/>
<uni-easyinput maxlength="20" placeholder="建议留言前先与商家沟通" v-model="state.orderPayload.remark"
:inputBorder="false" :clearable="false" />
</view>
</view>
</view>
@ -40,22 +28,17 @@
</text>
</view>
</view>
<view
class="order-item ss-flex ss-col-center ss-row-between"
v-if="state.orderInfo.type === 0"
>
<view class="order-item ss-flex ss-col-center ss-row-between" v-if="state.orderInfo.type === 0">
<view class="item-title">积分抵扣</view>
<view class="ss-flex ss-col-center">
{{ state.pointStatus ? '剩余积分' : '当前积分' }}
<image
:src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
class="score-img"
/>
<image :src="sheep.$url.static('/static/img/shop/goods/score1.svg')" class="score-img" />
<text class="item-value ss-m-r-24">
{{ state.pointStatus ? state.orderInfo.totalPoint - state.orderInfo.usePoint : (state.orderInfo.totalPoint || 0) }}
</text>
<checkbox-group @change="changeIntegral">
<checkbox :checked='state.pointStatus' :disabled="!state.orderInfo.totalPoint || state.orderInfo.totalPoint <= 0" />
<checkbox :checked='state.pointStatus'
:disabled="!state.orderInfo.totalPoint || state.orderInfo.totalPoint <= 0" />
</checkbox-group>
</view>
</view>
@ -73,42 +56,25 @@
<view class="order-item ss-flex ss-col-center ss-row-between" v-if='addressState.deliveryType === 2'>
<view class="item-title">联系人</view>
<view class="ss-flex ss-col-center">
<uni-easyinput
maxlength="20"
placeholder="请填写您的联系姓名"
v-model="addressState.receiverName"
:inputBorder="false"
:clearable="false"
/>
<uni-easyinput maxlength="20" placeholder="请填写您的联系姓名" v-model="addressState.receiverName"
:inputBorder="false" :clearable="false" />
</view>
</view>
<view class="order-item ss-flex ss-col-center ss-row-between" v-if='addressState.deliveryType === 2'>
<view class="item-title">联系电话</view>
<view class="ss-flex ss-col-center">
<uni-easyinput
maxlength="20"
placeholder="请填写您的联系电话"
v-model="addressState.receiverMobile"
:inputBorder="false"
:clearable="false"
/>
<uni-easyinput maxlength="20" placeholder="请填写您的联系电话" v-model="addressState.receiverMobile"
:inputBorder="false" :clearable="false" />
</view>
</view>
<!-- 优惠劵：只有 type = 0 普通订单（非拼团、秒杀、砍价），才可以使用优惠劵 -->
<view
class="order-item ss-flex ss-col-center ss-row-between"
v-if="state.orderInfo.type === 0"
>
<view class="order-item ss-flex ss-col-center ss-row-between" v-if="state.orderInfo.type === 0">
<view class="item-title">优惠券</view>
<view class="ss-flex ss-col-center" @tap="state.showCoupon = true">
<text class="item-value text-red" v-if="state.orderPayload.couponId > 0">
-￥{{ fen2yuan(state.orderInfo.price.couponPrice) }}
</text>
<text
class="item-value"
:class="couponNumber > 0 ? 'text-red' : 'text-disabled'"
v-else
>
<text class="item-value" :class="couponNumber > 0 ? 'text-red' : 'text-disabled'" v-else>
{{
couponNumber > 0 ? couponNumber + ' 张可用' : '暂无可用优惠券'
}}
@ -116,10 +82,8 @@
<text class="_icon-forward item-icon" />
</view>
</view>
<view
class="order-item ss-flex ss-col-center ss-row-between"
v-if="state.orderInfo.price.discountPrice > 0"
>
<view class="order-item ss-flex ss-col-center ss-row-between"
v-if="state.orderInfo.price.discountPrice > 0">
<view class="item-title">活动优惠</view>
<view class="ss-flex ss-col-center" @tap="state.showDiscount = true">
<text class="item-value text-red">
@ -128,10 +92,7 @@
<text class="_icon-forward item-icon" />
</view>
</view>
<view
class="order-item ss-flex ss-col-center ss-row-between"
v-if="state.orderInfo.price.vipPrice > 0"
>
<view class="order-item ss-flex ss-col-center ss-row-between" v-if="state.orderInfo.price.vipPrice > 0">
<view class="item-title">会员优惠</view>
<view class="ss-flex ss-col-center">
<text class="item-value text-red">
@ -150,19 +111,11 @@
</view>
<!-- 选择优惠券弹框 -->
<s-coupon-select
v-model="state.couponInfo"
:show="state.showCoupon"
@confirm="onSelectCoupon"
@close="state.showCoupon = false"
/>
<s-coupon-select v-model="state.couponInfo" :show="state.showCoupon" @confirm="onSelectCoupon"
@close="state.showCoupon = false" />
<!-- 满额折扣弹框 TODO 芋艿：后续要把优惠信息打进去 -->
<s-discount-list
v-model="state.orderInfo"
:show="state.showDiscount"
@close="state.showDiscount = false"
/>
<s-discount-list v-model="state.orderInfo" :show="state.showDiscount" @close="state.showDiscount = false" />
<!-- 底部 -->
<su-fixed bottom :opacity="false" bg="bg-white" placeholder :noFixed="false" :index="200">
@ -172,10 +125,7 @@
￥{{ fen2yuan(state.orderInfo.price.payPrice) }}
</view>
</view>
<button
class="ss-reset-button ui-BG-Main-Gradient ss-r-40 submit-btn ui-Shadow-Main"
@tap="onConfirm"
>
<button class="ss-reset-button ui-BG-Main-Gradient ss-r-40 submit-btn ui-Shadow-Main" @tap="onConfirm">
提交订单
</button>
</view>
@ -184,13 +134,20 @@
</template>
<script setup>
import { reactive, ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import {
reactive,
ref
} from 'vue';
import {
onLoad
} from '@dcloudio/uni-app';
import AddressSelection from '@/pages/order/addressSelection.vue';
import sheep from '@/sheep';
import OrderApi from '@/sheep/api/trade/order';
import CouponApi from '@/sheep/api/promotion/coupon';
import { fen2yuan } from '@/sheep/hooks/useGoods';
import {
fen2yuan
} from '@/sheep/hooks/useGoods';
const state = reactive({
orderPayload: {},
@ -259,7 +216,10 @@
// 创建订单&跳转
async function submitOrder() {
const { code, data } = await OrderApi.createOrder({
const {
code,
data
} = await OrderApi.createOrder({
items: state.orderPayload.items,
couponId: state.orderPayload.couponId,
remark: state.orderPayload.remark,
@ -290,7 +250,10 @@
// 检查库存 & 计算订单价格
async function getOrderInfo() {
// 计算价格
const { data, code } = await OrderApi.settlementOrder({
const {
data,
code
} = await OrderApi.settlementOrder({
items: state.orderPayload.items,
couponId: state.orderPayload.couponId,
deliveryType: addressState.value.deliveryType,
@ -304,6 +267,11 @@
seckillActivityId: state.orderPayload.seckillActivityId,
});
if (code !== 0) {
setTimeout(() => {
uni.navigateBack({
delta: 1
})
}, 1500)
return;
}
state.orderInfo = data;
@ -316,7 +284,10 @@
// 获取可用优惠券
let couponNumber = ref(0)
async function getCoupons() {
const { code, data } = await CouponApi.getMatchCouponList(
const {
code,
data
} = await CouponApi.getMatchCouponList(
state.orderInfo.price.payPrice,
state.orderInfo.items.map((item) => item.spuId),
state.orderPayload.items.map((item) => item.skuId),

141
pages/order/list.vue
View File

@ -2,21 +2,12 @@
<template>
<s-layout title="我的订单">
<su-sticky bgColor="#fff">
<su-tabs
:list="tabMaps"
:scrollable="false"
@change="onTabsChange"
:current="state.currentTab"
/>
<su-tabs :list="tabMaps" :scrollable="false" @change="onTabsChange" :current="state.currentTab" />
</su-sticky>
<s-empty v-if="state.pagination.total === 0" icon="/static/order-empty.png" text="暂无订单" />
<view v-if="state.pagination.total > 0">
<view
class="bg-white order-list-card-box ss-r-10 ss-m-t-14 ss-m-20"
v-for="order in state.pagination.list"
:key="order.id"
@tap="onOrderDetail(order.id)"
>
<view class="bg-white order-list-card-box ss-r-10 ss-m-t-14 ss-m-20" v-for="order in state.pagination.list"
:key="order.id" @tap="onOrderDetail(order.id)">
<view class="order-card-header ss-flex ss-col-center ss-row-between ss-p-x-20">
<view class="order-no">订单号：{{ order.no }}</view>
<view class="order-state ss-font-26" :class="formatOrderColor(order)">
@ -24,81 +15,49 @@
</view>
</view>
<view class="border-bottom" v-for="item in order.items" :key="item.id">
<s-goods-item
:img="item.picUrl"
:title="item.spuName"
:skuText="item.properties.map((property) => property.valueName).join(' ')"
:price="item.price"
:num="item.count"
/>
<s-goods-item :img="item.picUrl" :title="item.spuName"
:skuText="item.properties.map((property) => property.valueName).join(' ')" :price="item.price"
:num="item.count" />
</view>
<view class="pay-box ss-m-t-30 ss-flex ss-row-right ss-p-r-20">
<view class="ss-flex ss-col-center">
<view class="discounts-title pay-color"
>共 {{ order.productCount }} 件商品,总金额:</view
>
<view class="discounts-title pay-color">共 {{ order.productCount }} 件商品,总金额:</view>
<view class="discounts-money pay-color"> ￥{{ fen2yuan(order.payPrice) }} </view>
</view>
</view>
<view
class="order-card-footer ss-flex ss-col-center ss-p-x-20"
:class="order.buttons.length > 3 ? 'ss-row-between' : 'ss-row-right'"
>
<view class="order-card-footer ss-flex ss-col-center ss-p-x-20"
:class="order.buttons.length > 3 ? 'ss-row-between' : 'ss-row-right'">
<view class="ss-flex ss-col-center">
<button
v-if="order.buttons.includes('combination')"
class="tool-btn ss-reset-button"
@tap.stop="onOrderGroupon(order)"
>
<button v-if="order.buttons.includes('combination') && order.status !== 0 && order.status !== 40" class="tool-btn ss-reset-button"
@tap.stop="onOrderGroupon(order)">
拼团详情
</button>
<button
v-if="order.buttons.length === 0"
class="tool-btn ss-reset-button"
@tap.stop="onOrderDetail(order.id)"
>
<button v-if="order.buttons.length === 0" class="tool-btn ss-reset-button"
@tap.stop="onOrderDetail(order.id)">
查看详情
</button>
<button
v-if="order.buttons.includes('confirm')"
class="tool-btn ss-reset-button"
@tap.stop="onConfirm(order)"
>
<button v-if="order.buttons.includes('confirm')" class="tool-btn ss-reset-button"
@tap.stop="onConfirm(order)">
确认收货
</button>
<button
v-if="order.buttons.includes('express')"
class="tool-btn ss-reset-button"
@tap.stop="onExpress(order.id)"
>
<button v-if="order.buttons.includes('express')" class="tool-btn ss-reset-button"
@tap.stop="onExpress(order.id)">
查看物流
</button>
<button
v-if="order.buttons.includes('cancel')"
class="tool-btn ss-reset-button"
@tap.stop="onCancel(order.id)"
>
<button v-if="order.buttons.includes('cancel')" class="tool-btn ss-reset-button"
@tap.stop="onCancel(order.id)">
取消订单
</button>
<button
v-if="order.buttons.includes('comment')"
class="tool-btn ss-reset-button"
@tap.stop="onComment(order.id)"
>
<button v-if="order.buttons.includes('comment')" class="tool-btn ss-reset-button"
@tap.stop="onComment(order.id)">
评价
</button>
<button
v-if="order.buttons.includes('delete')"
class="delete-btn ss-reset-button"
@tap.stop="onDelete(order.id)"
>
<button v-if="order.buttons.includes('delete')" class="delete-btn ss-reset-button"
@tap.stop="onDelete(order.id)">
删除订单
</button>
<button
v-if="order.buttons.includes('pay')"
class="tool-btn ss-reset-button ui-BG-Main-Gradient"
@tap.stop="onPay(order.payOrderId)"
>
<button v-if="order.buttons.includes('pay')"
class="tool-btn ss-reset-button ui-BG-Main-Gradient" @tap.stop="onPay(order.payOrderId)">
继续支付
</button>
</view>
@ -107,20 +66,21 @@
</view>
<!-- 加载更多 -->
<uni-load-more
v-if="state.pagination.total > 0"
:status="state.loadStatus"
:content-text="{
<uni-load-more v-if="state.pagination.total > 0" :status="state.loadStatus" :content-text="{
contentdown: '上拉加载更多',
}"
@tap="loadMore"
/>
}" @tap="loadMore" />
</s-layout>
</template>
<script setup>
import { reactive } from 'vue';
import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
import {
reactive
} from 'vue';
import {
onLoad,
onReachBottom,
onPullDownRefresh
} from '@dcloudio/uni-app';
import {
fen2yuan,
formatOrderColor,
@ -129,9 +89,13 @@
} from '@/sheep/hooks/useGoods';
import sheep from '@/sheep';
import _ from 'lodash-es';
import { isEmpty } from 'lodash-es';
import {
isEmpty
} from 'lodash-es';
import OrderApi from '@/sheep/api/trade/order';
import { resetPagination } from '@/sheep/util';
import {
resetPagination
} from '@/sheep/util';
// 数据
const state = reactive({
@ -145,8 +109,7 @@
loadStatus: '',
});
const tabMaps = [
{
const tabMaps = [{
name: '全部',
},
{
@ -224,7 +187,9 @@
}
// 正常的确认收货流程
const { code } = await OrderApi.receiveOrder(order.id);
const {
code
} = await OrderApi.receiveOrder(order.id);
if (code === 0) {
resetPagination(state.pagination);
await getOrderList();
@ -279,7 +244,9 @@
if (!res.confirm) {
return;
}
const { code } = await OrderApi.cancelOrder(orderId);
const {
code
} = await OrderApi.cancelOrder(orderId);
if (code === 0) {
// 修改数据的状态
let index = state.pagination.list.findIndex((order) => order.id === orderId);
@ -298,7 +265,9 @@
content: '确定要删除订单吗?',
success: async function(res) {
if (res.confirm) {
const { code } = await OrderApi.deleteOrder(orderId);
const {
code
} = await OrderApi.deleteOrder(orderId);
if (code === 0) {
// 删除数据
let index = state.pagination.list.findIndex((order) => order.id === orderId);
@ -312,7 +281,10 @@
// 获取订单列表
async function getOrderList() {
state.loadStatus = 'loading';
let { code, data } = await OrderApi.getOrderPage({
let {
code,
data
} = await OrderApi.getOrderPage({
pageNo: state.pagination.pageNo,
pageSize: state.pagination.pageSize,
status: tabMaps[state.currentTab].value,
@ -421,8 +393,7 @@
font-weight: 500;
}
.order-state {
}
.order-state {}
}
.pay-box {

2
sheep/components/s-activity-pop/s-activity-pop.vue
View File

@ -3,7 +3,7 @@
<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 v-if="state.activityMap.length">
<view v-if="state.activityMap[state.activityInfo[0]?.id]?.reduc">
<view class="titleLi">促销</view>
<scroll-view class="model-content" scroll-y :scroll-with-animation="false" :enable-back-to-top="true">
<view class="actBox">

1
sheep/components/s-select-sku/s-select-sku.vue
View File

@ -124,6 +124,7 @@
// 加入购物车
function onAddCart() {
console.log('购物车',state.selectedSku)
if (state.selectedSku.id <= 0) {
sheep.$helper.toast('请选择规格');
return;

1
sheep/util/const.js
View File

@ -100,6 +100,7 @@ export const WxaSubscribeTemplate = {
export const getTimeStatusEnum = (startTime, endTime) => {
const now = dayjs();
console.log('处理的数据',now,startTime,endTime)
if (now.isBefore(startTime)) {
return TimeStatusEnum.WAIT_START;
} else if (now.isAfter(endTime)) {