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

修复冲突 

Signed-off-by: Bluemark <kongdy@bluemark.cn>
pull/26/head
Bluemark 2023-12-13 01:56:36 +00:00 committed by Gitee
parent cf2c782c0e 25a82c1812
commit 7c2ab0b7ad
24 changed files with 1231 additions and 1147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
pages/goods/index.vue
View File

@ -12,9 +12,7 @@
<block v-else> <block v-else>
<view class="detail-swiper-selector"> <view class="detail-swiper-selector">
<!-- 商品轮播图 --> <!-- 商品轮播图 -->
<su-swiper class="ss-m-b-14" isPreview :list="formatGoodsSwiper(state.goodsInfo.sliderPicUrls)" <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"> <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">
@ -32,15 +30,15 @@
</view> </view>
<view class="discounts-box ss-flex ss-row-between ss-m-b-28"> <view class="discounts-box ss-flex ss-row-between ss-m-b-28">
<!-- 满减送/限时折扣活动的提示 TODO 芋艿：promos 未写 --> <!-- 满减送/限时折扣活动的提示 TODO 芋艿：promos 未写 -->
<div class="tag-content">
<!-- 满减送/限时折扣活动的提示 TODO 芋艿：promos 未写 -->
<div class="tag-content"> <div class="tag-content">
<view class="tag-box ss-flex"> <view class="tag-box ss-flex">
<view class="tag ss-m-r-10" v-for="promos in state.goodsInfo.promos" <view class="tag ss-m-r-10" v-for="promos in state.goodsInfo.promos" :key="promos.id" @tap="onActivity">
:key="promos.id" @tap="onActivity">
{{ promos.title }} {{ promos.title }}
</view> </view>
</view> </view>
</div> </div>
<!-- 优惠劵 --> <!-- 优惠劵 -->
<view class="get-coupon-box ss-flex ss-col-center ss-m-l-20" @tap="state.showModel = true" <view class="get-coupon-box ss-flex ss-col-center ss-m-l-20" @tap="state.showModel = true"
v-if="state.couponInfo.length"> v-if="state.couponInfo.length">
@ -88,12 +86,13 @@
<button class="ss-reset-button disabled-btn" disabled> 已售罄 </button> <button class="ss-reset-button disabled-btn" disabled> 已售罄 </button>
</view> </view>
</detail-tabbar> </detail-tabbar>
<!-- 优惠劵弹窗 --> <!-- 优惠劵弹窗 -->
<s-coupon-get v-model="state.couponInfo" :show="state.showModel" @close="state.showModel = false" <s-coupon-get v-model="state.couponInfo" :show="state.showModel" @close="state.showModel = false" @get="onGet" />
@get="onGet" />
<!-- 满减送/限时折扣活动弹窗 --> <!-- 满减送/限时折扣活动弹窗 -->
<!-- 优惠劵弹窗 -->
<s-coupon-get v-model="state.couponInfo" :show="state.showModel" @close="state.showModel = false" @get="onGet" />
<!-- 满减送/限时折扣活动弹窗 -->
<s-activity-pop v-model="state.activityInfo" :show="state.showActivityModel" <s-activity-pop v-model="state.activityInfo" :show="state.showActivityModel"
@close="state.showActivityModel = false" /> @close="state.showActivityModel = false" />
</block> </block>
@ -102,14 +101,8 @@
</template> </template>
<script setup> <script setup>
import { import { reactive, computed } from 'vue';
reactive, import { onLoad, onPageScroll } from '@dcloudio/uni-app';
computed
} from 'vue';
import {
onLoad,
onPageScroll
} from '@dcloudio/uni-app';
import sheep from '@/sheep'; import sheep from '@/sheep';
import CouponApi from '@/sheep/api/promotion/coupon'; import CouponApi from '@/sheep/api/promotion/coupon';
import ActivityApi from '@/sheep/api/promotion/activity'; import ActivityApi from '@/sheep/api/promotion/activity';
@ -118,6 +111,9 @@
formatGoodsSwiper, formatGoodsSwiper,
fen2yuan, fen2yuan,
} from '@/sheep/hooks/useGoods'; } 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 detailNavbar from './components/detail/detail-navbar.vue';
import detailCellSku from './components/detail/detail-cell-sku.vue'; import detailCellSku from './components/detail/detail-cell-sku.vue';
import detailCellService from './components/detail/detail-cell-service.vue'; import detailCellService from './components/detail/detail-cell-service.vue';
@ -127,9 +123,7 @@
import detailCommentCard from './components/detail/detail-comment-card.vue'; import detailCommentCard from './components/detail/detail-comment-card.vue';
import detailContentCard from './components/detail/detail-content-card.vue'; import detailContentCard from './components/detail/detail-content-card.vue';
import detailActivityTip from './components/detail/detail-activity-tip.vue'; import detailActivityTip from './components/detail/detail-activity-tip.vue';
import { import { isEmpty } from 'lodash';
isEmpty
} from 'lodash';
onPageScroll(() => {}); onPageScroll(() => {});
@ -194,6 +188,7 @@
} }
// TODO 芋艿：待测试 // TODO 芋艿：待测试
const shareInfo = computed(() => { const shareInfo = computed(() => {
if (isEmpty(state.goodsInfo)) return {}; if (isEmpty(state.goodsInfo)) return {};
return sheep.$platform.share.getShareInfo({ return sheep.$platform.share.getShareInfo({
@ -283,6 +278,32 @@
}); });
}); });
// return; // return;
// 3. 加载营销活动信息
ActivityApi.getActivityListBySpuId(state.goodsId).then((res) => {
if (res.code !== 0) {
return;
}
state.activityList = res.data;
});
sheep.$api.goods.detail(state.goodsId).then((res) => {
// 未找到商品
if (res.code !== 0 || !res.data) {
state.goodsInfo = null;
return;
}
// 加载到商品
state.skeletonLoading = false;
state.goodsInfo = res.data;
});
// 2. 加载优惠劵信息
CouponApi.getCouponTemplateList(state.goodsId,2, 10).then((res) => {
if (res.code !== 0) {
return;
}
state.couponInfo = res.data;
});
// 3. 加载营销活动信息 // 3. 加载营销活动信息
ActivityApi.getActivityListBySpuId(state.goodsId).then((res) => { ActivityApi.getActivityListBySpuId(state.goodsId).then((res) => {
if (res.code !== 0) { if (res.code !== 0) {

122
pages/index/cart.vue
View File

@ -1,6 +1,11 @@
<!-- 购物车界面 -->
<template> <template>
<s-layout title="购物车" tabbar="/pages/index/cart" :bgStyle="{ color: '#fff' }"> <s-layout title="购物车" tabbar="/pages/index/cart" :bgStyle="{ color: '#fff' }">
<s-empty v-if="state.list.length === 0" text="购物车空空如也,快去逛逛吧~" icon="/static/cart-empty.png" /> <s-empty
v-if="state.list.length === 0"
text="购物车空空如也,快去逛逛吧~"
icon="/static/cart-empty.png"
/>
<!-- 头部 --> <!-- 头部 -->
<view class="cart-box ss-flex ss-flex-col ss-row-between" v-if="state.list.length"> <view class="cart-box ss-flex ss-flex-col ss-row-between" v-if="state.list.length">
@ -19,47 +24,72 @@
</button> </button>
</view> </view>
</view> </view>
<!-- 内容 --> <!-- 内容 -->
<view class="cart-content ss-flex-1 ss-p-x-30 ss-m-b-40"> <view class="cart-content ss-flex-1 ss-p-x-30 ss-m-b-40">
<view class="goods-box ss-r-10 ss-m-b-14" v-for="item in state.list" :key="item.id"> <view class="goods-box ss-r-10 ss-m-b-14" v-for="item in state.list" :key="item.id">
<view class="ss-flex ss-col-center"> <view class="ss-flex ss-col-center">
<label class="check-box ss-flex ss-col-center ss-p-l-10" @tap="onSelectSingle(item.id)"> <label class="check-box ss-flex ss-col-center ss-p-l-10" @tap="onSelectSingle(item.id)">
<radio :checked="state.selectedIds.includes(item.id)" color="var(--ui-BG-Main)" <radio
style="transform: scale(0.8)" @tap.stop="onSelectSingle(item.id)" /> :checked="state.selectedIds.includes(item.id)"
color="var(--ui-BG-Main)"
style="transform: scale(0.8)"
@tap.stop="onSelectSingle(item.id)"
/>
</label> </label>
<s-goods-item :title="item.spu.name" :img="item.spu.picUrl || item.goods.image" <s-goods-item
:price="item.sku.price/100" :title="item.spu.name"
:skuText="item.sku.properties.length>1? item.sku.properties.reduce((items2,items)=>items2.valueName+' '+items.valueName):item.sku.properties[0].valueName" :img="item.sku.picUrl || item.spu.picUrl"
priceColor="#FF3000" :titleWidth="400"> :price="fen2yuan(item.sku.price)"
:skuText="item.sku.properties.map((property) => property.valueName).join(' ')"
priceColor="#FF3000"
:titleWidth="400"
>
<template v-if="!state.editMode" v-slot:tool> <template v-if="!state.editMode" v-slot:tool>
<su-number-box :min="0" :max="item.sku.stock" :step="1" v-model="item.count" <su-number-box
@change="onNumberChange($event, item)"></su-number-box> :min="0"
:max="item.sku.stock"
:step="1"
v-model="item.count"
@change="onNumberChange($event, item)"
/>
</template> </template>
</s-goods-item> </s-goods-item>
</view> </view>
</view> </view>
</view> </view>
<!-- 底部 --> <!-- 底部 -->
<su-fixed bottom :val="48" placeholder v-if="state.list.length > 0" :isInset="false"> <su-fixed bottom :val="48" placeholder v-if="state.list.length > 0" :isInset="false">
<view class="cart-footer ss-flex ss-col-center ss-row-between ss-p-x-30 border-bottom"> <view class="cart-footer ss-flex ss-col-center ss-row-between ss-p-x-30 border-bottom">
<view class="footer-left ss-flex ss-col-center"> <view class="footer-left ss-flex ss-col-center">
<label class="check-box ss-flex ss-col-center ss-p-r-30" @tap="onSelectAll"> <label class="check-box ss-flex ss-col-center ss-p-r-30" @tap="onSelectAll">
<radio :checked="state.isAllSelected" color="var(--ui-BG-Main)" <radio
style="transform: scale(0.8)" @tap.stop="onSelectAll" /> :checked="state.isAllSelected"
color="var(--ui-BG-Main)"
style="transform: scale(0.8)"
@tap.stop="onSelectAll"
/>
<view class="ss-m-l-8"> 全选 </view> <view class="ss-m-l-8"> 全选 </view>
</label> </label>
<text>合计：</text> <text>合计：</text>
<view class="text-price price-text"> <view class="text-price price-text">
{{ state.totalPriceSelected }} {{ fen2yuan(state.totalPriceSelected) }}
</view> </view>
</view> </view>
<view class="footer-right"> <view class="footer-right">
<button v-if="state.editMode" class="ss-reset-button ui-BG-Main-Gradient pay-btn ui-Shadow-Main" <button
@tap="onDelete"> v-if="state.editMode"
class="ss-reset-button ui-BG-Main-Gradient pay-btn ui-Shadow-Main"
@tap="onDelete"
>
删除 删除
</button> </button>
<button v-else class="ss-reset-button ui-BG-Main-Gradient pay-btn ui-Shadow-Main" <button
@tap="onConfirm"> v-else
class="ss-reset-button ui-BG-Main-Gradient pay-btn ui-Shadow-Main"
@tap="onConfirm"
>
去结算 去结算
{{ state.selectedIds?.length ? `(${state.selectedIds.length})` : '' }} {{ state.selectedIds?.length ? `(${state.selectedIds.length})` : '' }}
</button> </button>
@ -72,28 +102,26 @@
<script setup> <script setup>
import sheep from '@/sheep'; import sheep from '@/sheep';
import { import { computed, reactive } from 'vue';
computed, import { fen2yuan } from '@/sheep/hooks/useGoods';
reactive, import { property } from 'lodash/util';
unref
} from 'vue';
const sys_navBar = sheep.$platform.navbar; const sys_navBar = sheep.$platform.navbar;
const cart = sheep.$store('cart'); const cart = sheep.$store('cart');
const state = reactive({ const state = reactive({
editMode: false, editMode: false,
list: computed(() => cart.list), list: computed(() => cart.list), // 购物车项的列表
selectedList: [],
selectedIds: computed(() => cart.selectedIds), selectedIds: computed(() => cart.selectedIds),
isAllSelected: computed(() => cart.isAllSelected), isAllSelected: computed(() => cart.isAllSelected),
totalPriceSelected: computed(() => cart.totalPriceSelected), totalPriceSelected: computed(() => cart.totalPriceSelected),
}); });
// 单选选中
// 单选
function onSelectSingle(id) { function onSelectSingle(id) {
console.log('单选')
cart.selectSingle(id); cart.selectSingle(id);
} }
// 全选 // 全选
function onSelectAll() { function onSelectAll() {
cart.selectAll(!state.isAllSelected); cart.selectAll(!state.isAllSelected);
@ -101,36 +129,24 @@
// 结算 // 结算
function onConfirm() { function onConfirm() {
let items = [] const items = state.list
let goods_list = []; .filter((item) => state.selectedIds.includes(item.id))
state.selectedList = state.list.filter((item) => state.selectedIds.includes(item.id)); .map((item) => {
state.selectedList.map((item) => { return {
console.log(item, '便利');
// 此处前端做出修改
items.push({
skuId: item.sku.id, skuId: item.sku.id,
count: item.count, count: item.count,
cartId: item.id, cartId: item.id,
}) };
goods_list.push({
// goods_id: item.goods_id,
goods_id: item.spu.id,
// goods_num: item.goods_num,
goods_num: item.count,
// 商品价格id真没有
// goods_sku_price_id: item.goods_sku_price_id,
}); });
}); if (items.length === 0) {
// return;
if (goods_list.length === 0) {
sheep.$helper.toast('请选择商品'); sheep.$helper.toast('请选择商品');
return; return;
} }
sheep.$router.go('/pages/order/confirm', { sheep.$router.go('/pages/order/confirm', {
data: JSON.stringify({ data: JSON.stringify({
items,
// order_type: 'goods', // order_type: 'goods',
// goods_list, // goods_list,
items,
// from: 'cart', // from: 'cart',
deliveryType: 1, deliveryType: 1,
pointStatus: false, pointStatus: false,
@ -138,19 +154,23 @@
}); });
} }
function onNumberChange(e, cartItem) { // 更新数量
if (e === 0) { function onNumberChange(number, cartItem) {
cart.delete(cartItem.id); if (number === 0) {
cart.delete([cartItem.id]);
return; return;
} }
if (cartItem.goods_num === e) return; if (cartItem.goods_num === number) {
cartItem.goods_num = e; return;
}
cartItem.goods_num = number;
cart.update({ cart.update({
goods_id: cartItem.id, goods_id: cartItem.id,
goods_num: e, goods_num: number,
goods_sku_price_id: cartItem.goods_sku_price_id,
}); });
} }
// 删除
async function onDelete() { async function onDelete() {
cart.delete(state.selectedIds); cart.delete(state.selectedIds);
} }

1
pages/index/user.vue
View File

@ -1,4 +1,5 @@
<template> <template>
<s-layout title="我的" tabbar="/pages/index/user" navbar="custom" :bgStyle="template.page" <s-layout title="我的" tabbar="/pages/index/user" navbar="custom" :bgStyle="template.page"
:navbarStyle="template.style?.navbar" onShareAppMessage> :navbarStyle="template.style?.navbar" onShareAppMessage>
<s-block v-for="(item, index) in template.components" :key="index" :styles="item.property.style"> <s-block v-for="(item, index) in template.components" :key="index" :styles="item.property.style">

332
pages/order/confirm.vue
View File

@ -1,125 +1,146 @@
<template> <template>
<s-layout title="确认订单"> <s-layout title="确认订单">
<!-- v-if="state.orderInfo.need_address === 1" --> <!-- TODO：这个判断先删除 v-if="state.orderInfo.need_address === 1" -->
<!-- 这个判断先删除 -->
<view class="bg-white address-box ss-m-b-14 ss-r-b-10" @tap="onSelectAddress"> <view class="bg-white address-box ss-m-b-14 ss-r-b-10" @tap="onSelectAddress">
<s-address-item :item="state.addressInfo" :hasBorderBottom="false"> <s-address-item :item="state.addressInfo" :hasBorderBottom="false">
<view class="ss-rest-button"><text class="_icon-forward"></text></view> <view class="ss-rest-button">
<text class="_icon-forward" />
</view>
</s-address-item> </s-address-item>
</view> </view>
<view class="order-card-box ss-m-b-14">
<s-goods-item v-for="item in state.orderInfo.goods_list" :key="item.goods_id"
:img="item.current_sku_price.image || item.goods.image" :title="item.goods.title"
:skuText="item.current_sku_price?.goods_sku_text" :price="item.current_sku_price.price"
:num="item.goods_num" marginBottom="10">
<template #top>
<view class="order-item ss-flex ss-col-center ss-row-between ss-p-x-20 bg-white">
<view class="item-title">配送方式</view>
<view class="ss-flex ss-col-center">
<text class="item-value">{{ item.dispatch_type_text }}</text>
</view>
</view>
</template>
</s-goods-item>
<!-- 商品信息 -->
<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"
/>
<view class="order-item ss-flex ss-col-center ss-row-between ss-p-x-20 bg-white ss-r-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="item-title">订单备注</view>
<view class="ss-flex ss-col-center"> <view class="ss-flex ss-col-center">
<uni-easyinput maxlength="20" placeholder="建议留言前先与商家沟通" v-model="state.orderPayload.remark" <uni-easyinput
:inputBorder="false" :clearable="false"></uni-easyinput> maxlength="20"
placeholder="建议留言前先与商家沟通"
v-model="state.orderPayload.remark"
:inputBorder="false"
:clearable="false"
/>
</view> </view>
</view> </view>
</view> </view>
<!-- 合计 -->
<!-- 价格信息 -->
<view class="bg-white total-card-box ss-p-20 ss-m-b-14 ss-r-10"> <view class="bg-white total-card-box ss-p-20 ss-m-b-14 ss-r-10">
<view class="total-box-content border-bottom"> <view class="total-box-content border-bottom">
<view class="order-item ss-flex ss-col-center ss-row-between"> <view class="order-item ss-flex ss-col-center ss-row-between">
<view class="item-title">商品金额</view> <view class="item-title">商品金额</view>
<view class="ss-flex ss-col-center"> <view class="ss-flex ss-col-center">
<text class="item-value ss-m-r-24">￥{{ state.orderInfo.goods_amount }}</text> <text class="item-value ss-m-r-24">
￥{{ fen2yuan(state.orderInfo.price.totalPrice) }}
</text>
</view> </view>
</view> </view>
<view class="order-item ss-flex ss-col-center ss-row-between" <!-- TODO 芋艿：接入积分 -->
v-if="state.orderPayload.order_type === 'score'"> <view
class="order-item ss-flex ss-col-center ss-row-between"
v-if="state.orderPayload.order_type === 'score'"
>
<view class="item-title">扣除积分</view> <view class="item-title">扣除积分</view>
<view class="ss-flex ss-col-center"> <view class="ss-flex ss-col-center">
<image :src="sheep.$url.static('/static/img/shop/goods/score1.svg')" class="score-img"></image> <image
:src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
class="score-img"
/>
<text class="item-value ss-m-r-24">{{ state.orderInfo.score_amount }}</text> <text class="item-value ss-m-r-24">{{ state.orderInfo.score_amount }}</text>
</view> </view>
</view> </view>
<view class="order-item ss-flex ss-col-center ss-row-between"> <view class="order-item ss-flex ss-col-center ss-row-between">
<view class="item-title">运费</view> <view class="item-title">运费</view>
<view class="ss-flex ss-col-center"> <view class="ss-flex ss-col-center">
<text class="item-value ss-m-r-24">+￥{{ state.orderInfo.dispatch_amount }}</text> <text class="item-value ss-m-r-24">
+￥{{ fen2yuan(state.orderInfo.price.deliveryPrice) }}
</text>
</view> </view>
</view> </view>
<view class="order-item ss-flex ss-col-center ss-row-between" <!-- 优惠劵：只有 type = 0 普通订单（非拼团、秒杀、砍价），才可以使用优惠劵 -->
v-if="state.orderPayload.order_type != 'score'"> <view
<!-- <view v-if="state.orderInfo.coupon_discount_fee > 0" class="order-item ss-flex ss-col-center ss-row-between"> --> class="order-item ss-flex ss-col-center ss-row-between"
v-if="state.orderInfo.type === 0"
>
<view class="item-title">优惠券</view> <view class="item-title">优惠券</view>
<view class="ss-flex ss-col-center" @tap="state.showCoupon = true"> <view class="ss-flex ss-col-center" @tap="state.showCoupon = true">
<text class="item-value text-red" <text class="item-value text-red" v-if="state.orderPayload.couponId > 0">
v-if="state.orderPayload.coupon_id">-￥{{ state.orderInfo.coupon_discount_fee }}</text> -￥{{ fen2yuan(state.orderInfo.price.couponPrice) }}
<text class="item-value" </text>
:class="state.couponInfo.can_use?.length > 0 ? 'text-red' : 'text-disabled'" v-else>{{ <text
state.couponInfo.can_use?.length > 0 class="item-value"
? state.couponInfo.can_use?.length + '张可用' :class="state.couponInfo.length > 0 ? 'text-red' : 'text-disabled'"
: '暂无可用优惠券' v-else
}}</text> >
{{
<text class="_icon-forward item-icon"></text> state.couponInfo.length > 0 ? state.couponInfo.length + ' 张可用' : '暂无可用优惠券'
}}
</text>
<text class="_icon-forward item-icon" />
</view> </view>
</view> </view>
<view class="order-item ss-flex ss-col-center ss-row-between" <view
v-if="state.orderInfo.promo_infos?.length"> class="order-item ss-flex ss-col-center ss-row-between"
<!-- <view v-if="state.orderInfo.promo_discount_fee > 0" 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="item-title">活动优惠</view>
<view class="ss-flex ss-col-center" @tap="state.showDiscount = true"> <view class="ss-flex ss-col-center">
<text class="item-value text-red"> -￥{{ state.orderInfo.promo_discount_fee }} </text> <!-- @tap="state.showDiscount = true" TODO 芋艿：后续要把优惠信息打进去 -->
<text class="_icon-forward item-icon"></text> <text class="item-value text-red">
-￥{{ fen2yuan(state.orderInfo.price.discountPrice) }}
</text>
<text class="_icon-forward item-icon" />
</view> </view>
</view> </view>
</view> </view>
<view class="total-box-footer ss-font-28 ss-flex ss-row-right ss-col-center ss-m-r-28"> <view class="total-box-footer ss-font-28 ss-flex ss-row-right ss-col-center ss-m-r-28">
<view class="total-num ss-m-r-20">共{{ state.totalNumber }}件</view> <view class="total-num ss-m-r-20">
共{{ state.orderInfo.items.reduce((acc, item) => acc + item.count, 0) }}件
</view>
<view>合计：</view> <view>合计：</view>
<view class="total-num text-red"> ￥{{ state.orderInfo.pay_fee }} </view> <view class="total-num text-red"> ￥{{ fen2yuan(state.orderInfo.price.payPrice) }} </view>
<view class="ss-flex" v-if="state.orderPayload.order_type === 'score'">
<view class="total-num ss-font-30 text-red ss-m-l-4"> + </view>
<image :src="sheep.$url.static('/static/img/shop/goods/score1.svg')" class="score-img"></image>
<view class="total-num ss-font-30 text-red">{{ state.orderInfo.score_amount }}</view>
</view>
</view>
</view>
<!-- 发票 -->
<view class="bg-white ss-p-20 ss-r-20">
<view class="order-item ss-flex ss-col-center ss-row-between">
<view class="item-title">发票申请</view>
<view class="ss-flex ss-col-center" @tap="onSelectInvoice">
<text class="item-value">{{ state.invoiceInfo.name || '无需开具发票' }}</text>
<text class="_icon-forward item-icon"></text>
</view>
</view> </view>
</view> </view>
<!-- 选择优惠券弹框 --> <!-- 选择优惠券弹框 -->
<s-coupon-select v-model="state.couponInfo" :show="state.showCoupon" @confirm="onSelectCoupon" <s-coupon-select
@close="state.showCoupon = false" /> v-model="state.couponInfo"
<!-- 满额折扣弹框 --> :show="state.showCoupon"
<s-discount-list v-model="state.orderInfo" :show="state.showDiscount" @close="state.showDiscount = false" /> @confirm="onSelectCoupon"
@close="state.showCoupon = false"
/>
<!-- 满额折扣弹框 TODO 芋艿：后续要把优惠信息打进去 -->
<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"> <su-fixed bottom :opacity="false" bg="bg-white" placeholder :noFixed="false" :index="200">
<view class="footer-box border-top ss-flex ss-row-between ss-p-x-20 ss-col-center"> <view class="footer-box border-top ss-flex ss-row-between ss-p-x-20 ss-col-center">
<view class="total-box-footer ss-flex ss-col-center"> <view class="total-box-footer ss-flex ss-col-center">
<view class="total-num ss-font-30 text-red"> ￥{{ state.orderInfo.pay_fee }} </view> <view class="total-num ss-font-30 text-red">
<view v-if="state.orderPayload.order_type === 'score'" class="ss-flex"> ￥{{ fen2yuan(state.orderInfo.price.payPrice) }}
<view class="total-num ss-font-30 text-red ss-m-l-4">+</view>
<image :src="sheep.$url.static('/static/img/shop/goods/score1.svg')" class="score-img"></image>
<view class="total-num ss-font-30 text-red">{{ state.orderInfo.score_amount }}</view>
</view> </view>
</view> </view>
<button
<button class="ss-reset-button ui-BG-Main-Gradient ss-r-40 submit-btn ui-Shadow-Main" @tap="onConfirm"> class="ss-reset-button ui-BG-Main-Gradient ss-r-40 submit-btn ui-Shadow-Main"
{{ exchangeNow ? '立即兑换' : '提交订单' }} @tap="onConfirm"
>
提交订单
</button> </button>
</view> </view>
</su-fixed> </su-fixed>
@ -127,36 +148,26 @@
</template> </template>
<script setup> <script setup>
import { import { reactive } from 'vue';
reactive, import { onLoad } from '@dcloudio/uni-app';
computed
} from 'vue';
import {
onLoad,
onPageScroll,
onShow
} from '@dcloudio/uni-app';
import sheep from '@/sheep'; import sheep from '@/sheep';
import { import { isEmpty } from 'lodash';
isEmpty import OrderApi from '@/sheep/api/trade/order';
} from 'lodash'; import CouponApi from '@/sheep/api/promotion/coupon';
import { fen2yuan } from '@/sheep/hooks/useGoods';
const state = reactive({ const state = reactive({
orderPayload: {}, orderPayload: {},
orderInfo: {}, orderInfo: {
addressInfo: {}, items: [], // 商品项列表
invoiceInfo: {}, price: {}, // 价格信息
totalNumber: 0, },
showCoupon: false, addressInfo: {}, // 选择的收货地址
couponInfo: [], showCoupon: false, // 是否展示优惠劵
showDiscount: false, couponInfo: [], // 优惠劵列表
showDiscount: false, // 是否展示营销活动
}); });
// 立即兑换(立即兑换无需跳转收银台)
const exchangeNow = computed(
() => state.orderPayload.order_type === 'score' && state.orderInfo.pay_fee == 0,
);
// 选择地址 // 选择地址
function onSelectAddress() { function onSelectAddress() {
uni.$once('SELECT_ADDRESS', (e) => { uni.$once('SELECT_ADDRESS', (e) => {
@ -167,128 +178,91 @@
// 更改收货人地址&计算订单信息 // 更改收货人地址&计算订单信息
async function changeConsignee(addressInfo = {}) { async function changeConsignee(addressInfo = {}) {
if (isEmpty(addressInfo)) {
const {
code,
data
} = await sheep.$api.user.address.default();
console.log(data, '默认收货地址');
if (code === 0 && !isEmpty(data)) {
console.log('执行赋值')
addressInfo = data;
}
}
if (!isEmpty(addressInfo)) { if (!isEmpty(addressInfo)) {
state.addressInfo = addressInfo; state.addressInfo = addressInfo;
state.orderPayload.address_id = state.addressInfo.id;
} }
getOrderInfo(); await getOrderInfo();
} }
// 选择优惠券 // 选择优惠券
async function onSelectCoupon(e) { async function onSelectCoupon(couponId) {
state.orderPayload.coupon_id = e || 0; state.orderPayload.couponId = couponId || 0;
getOrderInfo(); await getOrderInfo();
state.showCoupon = false; state.showCoupon = false;
} }
// 选择发票信息 // 提交订单
function onSelectInvoice() {
uni.$once('SELECT_INVOICE', (e) => {
state.invoiceInfo = e.invoiceInfo;
state.orderPayload.invoice_id = e.invoiceInfo.id || 0;
});
sheep.$router.go('/pages/user/invoice/list');
}
// 提交订单/立即兑换
function onConfirm() { function onConfirm() {
if (!state.orderPayload.address_id && state.orderInfo.need_address === 1) { if (!state.addressInfo.id) {
sheep.$helper.toast('请选择收货地址'); sheep.$helper.toast('请选择收货地址');
return; return;
} }
if (exchangeNow.value) {
uni.showModal({
title: '提示',
content: '确定使用积分立即兑换?',
cancelText: '再想想',
success: async function(res) {
if (res.confirm) {
submitOrder(); submitOrder();
} }
},
});
} else {
submitOrder();
}
}
// 创建订单&跳转 // 创建订单&跳转
async function submitOrder() { async function submitOrder() {
const { const { code, data } = await OrderApi.createOrder({
error, items: state.orderPayload.items,
data couponId: state.orderPayload.couponId,
} = await sheep.$api.order.create(state.orderPayload); addressId: state.addressInfo.id,
if (error === 0) { deliveryType: 1, // TODO 芋艿：需要支持【门店自提】
// 更新购物车列表 pointStatus: false, // TODO 芋艿：需要支持【积分选择】
if (state.orderPayload.from === 'cart') { });
if (code !== 0) {
return;
}
// 更新购物车列表，如果来自购物车
if (state.orderPayload.items[0].cartId > 0) {
sheep.$store('cart').getList(); sheep.$store('cart').getList();
} }
if (exchangeNow.value) { // 跳转到支付页面
sheep.$router.redirect('/pages/pay/result', {
orderSN: data.order_sn,
});
} else {
sheep.$router.redirect('/pages/pay/index', { sheep.$router.redirect('/pages/pay/index', {
orderSN: data.order_sn, orderSN: data.payOrderId,
}); });
} }
}
}
// 检查库存 & 计算订单价格 // 检查库存 & 计算订单价格
async function getOrderInfo() { async function getOrderInfo() {
console.log(state.orderPayload, '计算价格传参') // 计算价格
// let {code, data} = await sheep.$api.order.calc(state.orderPayload); const { data, code } = await OrderApi.settlementOrder({
// let data = await sheep.$api.order.calc(state.orderPayload); items: state.orderPayload.items,
console.log(state.orderPayload.items) couponId: state.orderPayload.couponId,
let data = await sheep.$api.order.calc({ addressId: state.addressInfo.id,
deliveryType: 1, deliveryType: 1, // TODO 芋艿：需要支持【门店自提】
pointStatus: false, pointStatus: false, // TODO 芋艿：需要支持【积分选择】
items: state.orderPayload.items
}); });
console.log(data, '修改后的获取订单详细数据') if (code !== 0) {
return; return;
if (error === 0) { }
state.totalNumber = 0;
state.orderInfo = data; state.orderInfo = data;
state.orderInfo.goods_list.forEach((item) => { // 设置收货地址
state.totalNumber += item.goods_num; if (state.orderInfo.address) {
}); state.addressInfo = state.orderInfo.address;
} }
} }
// 获取可用优惠券 // 获取可用优惠券
async function getCoupons() { async function getCoupons() {
const { const { code, data } = await CouponApi.getMatchCouponList(
error, state.orderInfo.price.payPrice,
data state.orderInfo.items.map((item) => item.spuId),
} = await sheep.$api.order.coupons(state.orderPayload); state.orderPayload.items.map((item) => item.skuId),
if (error === 0) { state.orderPayload.items.map((item) => item.categoryId),
);
if (code === 0) {
state.couponInfo = data; state.couponInfo = data;
} }
} }
onLoad(async (options) => { onLoad(async (options) => {
console.log(options, '确认订单启动参数') if (!options.data) {
if (options.data) { sheep.$helper.toast('参数不正确，请检查！');
return;
}
state.orderPayload = JSON.parse(options.data); state.orderPayload = JSON.parse(options.data);
changeConsignee(); await getOrderInfo();
if (state.orderPayload.order_type !== 'score') { await getCoupons();
getCoupons();
}
}
}); });
</script> </script>

214
pages/order/list.vue
View File

@ -1,153 +1,72 @@
<!-- 页面 --> <!-- 订单列表 -->
<template> <template>
<s-layout title="我的订单"> <s-layout title="我的订单">
<su-sticky bgColor="#fff"> <su-sticky bgColor="#fff">
<su-tabs :list="tabMaps" :scrollable="false" @change="onTabsChange" :current="state.currentTab"></su-tabs> <su-tabs :list="tabMaps" :scrollable="false" @change="onTabsChange" :current="state.currentTab" />
</su-sticky> </su-sticky>
<s-empty v-if="state.pagination.total === 0" icon="/static/order-empty.png" text="暂无订单"></s-empty> <s-empty v-if="state.pagination.total === 0" icon="/static/order-empty.png" text="暂无订单" />
<view v-if="state.pagination.total > 0"> <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.data" <view class="bg-white order-list-card-box ss-r-10 ss-m-t-14 ss-m-20" v-for="order in state.pagination.data"
:key="order.id" @tap="onOrderDetail(order.id)"> :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-card-header ss-flex ss-col-center ss-row-between ss-p-x-20">
<view class="order-no">订单号：{{ order.no }}</view> <view class="order-no">订单号：{{ order.no }}</view>
<view class="order-state ss-font-26" :class="formatOrderColor(order.status_code)">{{ <view class="order-state ss-font-26" :class="formatOrderColor(order)">
order.status {{ formatOrderStatus(order) }}
}}</view> </view>
</view> </view>
<view class="border-bottom" v-for="item in order.items" :key="item.id"> <view class="border-bottom" v-for="item in order.items" :key="item.id">
<s-goods-item :img="item.picUrl" :title="item.spuName" <s-goods-item
:skuText="item.properties.length>1? item.properties.reduce((items2,items)=>items2.valueName+' '+items.valueName):item.properties[0].valueName" :img="item.picUrl"
:price="item.price/100" :score="order.score_amount" :num="item.count"> :title="item.spuName"
<template #tool> :skuText="item.properties.map((property) => property.valueName).join(' ')"
<view class="ss-flex"> :price="item.price"
<!-- <button class="ss-reset-button apply-btn" v-if="item.btns.includes('aftersale')" :num="item.count"
@tap.stop=" />
sheep.$router.go('/pages/order/aftersale/apply', {
item: JSON.stringify(item),
})
">
申请售后
</button>
<button class="ss-reset-button apply-btn" v-if="item.btns.includes('re_aftersale')"
@tap.stop="
sheep.$router.go('/pages/order/aftersale/apply', {
item: JSON.stringify(item),
})
">
重新售后
</button>
<button class="ss-reset-button apply-btn" v-if="item.btns.includes('aftersale_info')"
@tap.stop="
sheep.$router.go('/pages/order/aftersale/detail', {
id: item.ext.aftersale_id,
})
">
售后详情
</button>
<button class="ss-reset-button apply-btn" v-if="item.btns.includes('buy_again')"
@tap.stop="
sheep.$router.go('/pages/goods/index', {
id: item.goods_id,
})
">
再次购买
</button> -->
</view>
</template>
</s-goods-item>
</view> </view>
<view class="pay-box ss-m-t-30 ss-flex ss-row-right ss-p-r-20"> <view class="pay-box ss-m-t-30 ss-flex ss-row-right ss-p-r-20">
<!-- <view v-if="order.total_discount_fee > 0" class="ss-flex ss-col-center ss-m-r-8">
<view class="discounts-title">优惠:￥</view>
<view class="discounts-money">{{ order.total_discount_fee }}</view>
</view> -->
<!-- <view class="ss-flex ss-col-center ss-m-r-8">
<view class="discounts-title">运费:￥</view>
<view class="discounts-money">{{ order.dispatch_amount }}</view>
</view> -->
<view class="ss-flex ss-col-center"> <view class="ss-flex ss-col-center">
<view class="discounts-title pay-color">共{{count}}件商品,总金额:</view> <view class="discounts-title pay-color">共 {{ order.productCount }} 件商品,总金额:</view>
<view class="discounts-money pay-color" v-if="Number(order.payPrice) > 0"> <view class="discounts-money pay-color">
￥{{ order.payPrice/100 }}</view> ￥{{ fen2yuan(order.payPrice) }}
<view v-if="order.score_amount && Number(order.payPrice) > 0">+</view>
<view class="discounts-money pay-color ss-flex ss-col-center" v-if="order.score_amount">
<image :src="sheep.$url.static('/static/img/shop/goods/score1.svg')" class="score-img">
</image>
<view>{{ order.score_amount }}</view>
</view> </view>
</view> </view>
</view> </view>
<!-- :class="order.btns.length > 3 ? 'ss-row-between' : 'ss-row-right'" --> <view class="order-card-footer ss-flex ss-col-center ss-p-x-20"
<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'">
<!-- <su-popover>
<button class="more-btn ss-reset-button" @click.stop>更多</button>
<template #content>
<view class="more-item-box">
<view class="more-item ss-flex ss-col-center ss-reset-button">
<view class="item-title">删除订单</view>
</view>
<view class="more-item ss-flex ss-col-center ss-reset-button">
<view class="item-title">查看发票</view>
</view>
<view class="more-item ss-flex ss-col-center ss-reset-button">
<view class="item-title">评价晒单</view>
</view>
</view>
</template>
</su-popover> -->
<view class="ss-flex ss-col-center"> <view class="ss-flex ss-col-center">
<!-- <button v-if="order.btns.includes('groupon')" class="tool-btn ss-reset-button" <!-- TODO 芋艿：再次购买 -->
<button v-if="order.buttons.includes('combination')" class="tool-btn ss-reset-button"
@tap.stop="onOrderGroupon(order)"> @tap.stop="onOrderGroupon(order)">
{{ order.status_code === 'groupon_ing' ? '邀请拼团' : '拼团详情' }} 拼团详情
</button> </button>
<button v-if="order.btns.includes('invoice')" class="tool-btn ss-reset-button" <button v-if="order.buttons.length === 0" class="tool-btn ss-reset-button"
@tap.stop="onOrderInvoice(order.invoice?.id)"> @tap.stop="onOrderDetail(order.id)">
查看发票
</button>
<button v-if="order.btns.length === 0" class="tool-btn ss-reset-button"
@tap.stop="onOrderDetail(order.order_sn)">
查看详情 查看详情
</button> </button>
<button v-if="order.buttons.includes('confirm')" class="tool-btn ss-reset-button"
<button v-if="order.btns.includes('confirm')" class="tool-btn ss-reset-button"
@tap.stop="onConfirm(order)"> @tap.stop="onConfirm(order)">
确认收货 确认收货
</button> </button>
<button v-if="order.buttons.includes('express')" class="tool-btn ss-reset-button"
<button v-if="order.btns.includes('express')" class="tool-btn ss-reset-button"
@tap.stop="onExpress(order.id)"> @tap.stop="onExpress(order.id)">
查看物流 查看物流
</button> </button>
<button v-if="order.buttons.includes('cancel')" class="tool-btn ss-reset-button"
<button v-if="order.btns.includes('apply_refund')" class="tool-btn ss-reset-button"
@tap.stop="onRefund(order.id)">
申请退款
</button>
<button v-if="order.btns.includes('re_apply_refund')" class="tool-btn ss-reset-button"
@tap.stop="onRefund(order.id)">
重新退款
</button>
<button v-if="order.btns.includes('cancel')" class="tool-btn ss-reset-button"
@tap.stop="onCancel(order.id)"> @tap.stop="onCancel(order.id)">
取消订单 取消订单
</button> </button>
<button v-if="order.buttons.includes('comment')" class="tool-btn ss-reset-button"
<button v-if="order.btns.includes('comment')" class="tool-btn ss-reset-button"
@tap.stop="onComment(order.order_sn)"> @tap.stop="onComment(order.order_sn)">
评价晒单 评价
</button> </button>
<button v-if="order.buttons.includes('delete')" class="delete-btn ss-reset-button"
<button v-if="order.btns.includes('delete')" class="delete-btn ss-reset-button"
@tap.stop="onDelete(order.id)"> @tap.stop="onDelete(order.id)">
删除订单 删除订单
</button> </button>
<button v-if="order.buttons.includes('pay')" class="tool-btn ss-reset-button ui-BG-Main-Gradient"
<button v-if="order.btns.includes('pay')" class="tool-btn ss-reset-button ui-BG-Main-Gradient"
@tap.stop="onPay(order.order_sn)"> @tap.stop="onPay(order.order_sn)">
继续支付 继续支付
</button> --> </button>
</view> </view>
</view> </view>
</view> </view>
@ -171,7 +90,8 @@
onPullDownRefresh onPullDownRefresh
} from '@dcloudio/uni-app'; } from '@dcloudio/uni-app';
import { import {
formatOrderColor fen2yuan,
formatOrderColor, formatOrderStatus, handleOrderButtons,
} from '@/sheep/hooks/useGoods'; } from '@/sheep/hooks/useGoods';
import sheep from '@/sheep'; import sheep from '@/sheep';
import _ from 'lodash'; import _ from 'lodash';
@ -182,17 +102,16 @@
const pagination = { const pagination = {
data: [], data: [],
current_page: 1, current_page: 1,
total: 1, total: 1
last_page: 1,
}; };
// 数据 // 数据
const state = reactive({ const state = reactive({
currentTab: 0, currentTab: 0, // 选中的 tabMaps 下标
pagination: { pagination: {
data: [], data: [],
current_page: 1, current_page: 1,
total: 1, total: 1
last_page: 1,
}, },
loadStatus: '', loadStatus: '',
deleteOrderId: 0, deleteOrderId: 0,
@ -200,8 +119,7 @@
}); });
const tabMaps = [{ const tabMaps = [{
name: '全部', name: '全部'
// value: 'all',
}, },
{ {
name: '待付款', name: '待付款',
@ -232,44 +150,37 @@
} }
// 订单详情 // 订单详情
function onOrderDetail(orderSN) { function onOrderDetail(id) {
sheep.$router.go('/pages/order/detail', { sheep.$router.go('/pages/order/detail', {
orderSN, id,
}); });
} }
// 分享拼团 // 分享拼团 TODO 芋艿：待测试
function onOrderGroupon(order) { function onOrderGroupon(order) {
sheep.$router.go('/pages/activity/groupon/detail', { sheep.$router.go('/pages/activity/groupon/detail', {
id: order.ext.groupon_id, id: order.ext.groupon_id,
}); });
} }
// 查看发票 // 继续支付 TODO 芋艿：待测试
function onOrderInvoice(invoiceId) {
sheep.$router.go('/pages/order/invoice', {
invoiceId,
});
}
// 继续支付
function onPay(orderSN) { function onPay(orderSN) {
sheep.$router.go('/pages/pay/index', { sheep.$router.go('/pages/pay/index', {
orderSN, orderSN,
}); });
} }
// 评价 // 评价 TODO 芋艿：待测试
function onComment(orderSN) { function onComment(orderSN) {
sheep.$router.go('/pages/goods/comment/add', { sheep.$router.go('/pages/goods/comment/add', {
orderSN, orderSN,
}); });
} }
// 确认收货 // 确认收货 TODO 芋艿：待测试
async function onConfirm(order, ignore = false) { async function onConfirm(order, ignore = false) {
// 需开启确认收货组件 // 需开启确认收货组件
// todo: // todo: 芋艿：需要后续接入微信收货组件
// 1.怎么检测是否开启了发货组件功能？如果没有开启的话就不能在这里return出去 // 1.怎么检测是否开启了发货组件功能？如果没有开启的话就不能在这里return出去
// 2.如果开启了走mpConfirm方法,需要在App.vue的show方法中拿到确认收货结果 // 2.如果开启了走mpConfirm方法,需要在App.vue的show方法中拿到确认收货结果
let isOpenBusinessView = true; let isOpenBusinessView = true;
@ -284,13 +195,12 @@
} }
// 正常的确认收货流程 // 正常的确认收货流程
const { const {
error error
} = await sheep.$api.order.confirm(order.id); } = await sheep.$api.order.confirm(order.id);
if (error === 0) { if (error === 0) {
state.pagination = pagination; state.pagination = pagination;
getOrderList(); await getOrderList();
} }
} }
@ -326,14 +236,14 @@
} }
// #endif // #endif
// 查看物流 // 查看物流 TODO 芋艿：待测试
async function onExpress(orderId) { async function onExpress(orderId) {
sheep.$router.go('/pages/order/express/list', { sheep.$router.go('/pages/order/express/list', {
orderId, orderId,
}); });
} }
// 取消订单 // 取消订单 TODO 芋艿：待测试
async function onCancel(orderId) { async function onCancel(orderId) {
uni.showModal({ uni.showModal({
title: '提示', title: '提示',
@ -353,7 +263,7 @@
}); });
} }
// 删除订单 // 删除订单 TODO 芋艿：待测试
function onDelete(orderId) { function onDelete(orderId) {
uni.showModal({ uni.showModal({
title: '提示', title: '提示',
@ -373,30 +283,7 @@
}); });
} }
// 申请退款 // 获取订单列表 TODO 芋艿：待测试
async function onRefund(orderId) {
uni.showModal({
title: '提示',
content: '确定要申请退款吗?',
success: async function(res) {
if (res.confirm) {
// #ifdef MP
sheep.$platform.useProvider('wechat').subscribeMessage('order_refund');
// #endif
const {
error,
data
} = await sheep.$api.order.applyRefund(orderId);
if (error === 0) {
let index = state.pagination.data.findIndex((order) => order.id === orderId);
state.pagination.data[index] = data;
}
}
},
});
}
// 获取订单列表
async function getOrderList(page = 1, list_rows = 5) { async function getOrderList(page = 1, list_rows = 5) {
state.loadStatus = 'loading'; state.loadStatus = 'loading';
let res = await sheep.$api.order.list({ let res = await sheep.$api.order.list({
@ -407,6 +294,7 @@
}); });
state.error = res.code; state.error = res.code;
if (res.code === 0) { if (res.code === 0) {
res.data.list.forEach(order => handleOrderButtons(order));
let orderList = _.concat(state.pagination.data, res.data.list); let orderList = _.concat(state.pagination.data, res.data.list);
state.pagination = { state.pagination = {
...res.data, ...res.data,

178
pages/pay/index.vue
View File

@ -2,14 +2,17 @@
<template> <template>
<s-layout title="收银台"> <s-layout title="收银台">
<view class="bg-white ss-modal-box ss-flex-col"> <view class="bg-white ss-modal-box ss-flex-col">
<!-- 订单信息 -->
<view class="modal-header ss-flex-col ss-col-center ss-row-center"> <view class="modal-header ss-flex-col ss-col-center ss-row-center">
<view class="money-box ss-m-b-20"> <view class="money-box ss-m-b-20">
<text class="money-text">{{ state.orderInfo.pay_fee }}</text> <text class="money-text">{{ fen2yuan(state.orderInfo.price) }}</text>
</view> </view>
<view class="time-text"> <view class="time-text">
<text>{{ payDescText }}</text> <text>{{ payDescText }}</text>
</view> </view>
</view> </view>
<!-- 支付方式 -->
<view class="modal-content ss-flex-1"> <view class="modal-content ss-flex-1">
<view class="pay-title ss-p-l-30 ss-m-y-30">选择支付方式</view> <view class="pay-title ss-p-l-30 ss-m-y-30">选择支付方式</view>
<radio-group @change="onTapPay"> <radio-group @change="onTapPay">
@ -17,7 +20,6 @@
<view <view
class="pay-item ss-flex ss-col-center ss-row-between ss-p-x-30 border-bottom" class="pay-item ss-flex ss-col-center ss-row-between ss-p-x-30 border-bottom"
:class="{ 'disabled-pay-item': item.disabled }" :class="{ 'disabled-pay-item': item.disabled }"
v-if="allowedPayment.includes(item.value)"
> >
<view class="ss-flex ss-col-center"> <view class="ss-flex ss-col-center">
<image <image
@ -25,25 +27,19 @@
v-if="item.disabled" v-if="item.disabled"
:src="sheep.$url.static('/static/img/shop/pay/cod_disabled.png')" :src="sheep.$url.static('/static/img/shop/pay/cod_disabled.png')"
mode="aspectFit" mode="aspectFit"
></image> />
<image <image
class="pay-icon" class="pay-icon"
v-else v-else
:src="sheep.$url.static(item.icon)" :src="sheep.$url.static(item.icon)"
mode="aspectFit" mode="aspectFit"
></image> />
<text class="pay-title">{{ item.title }}</text> <text class="pay-title">{{ item.title }}</text>
</view> </view>
<view class="check-box ss-flex ss-col-center ss-p-l-10"> <view class="check-box ss-flex ss-col-center ss-p-l-10">
<view class="userInfo-money ss-m-r-10" v-if="item.value == 'money'"> <view class="userInfo-money ss-m-r-10" v-if="item.value === 'wallet'">
余额: {{ userInfo.money }}元 余额: {{ userInfo.money }}元
</view> </view>
<view
class="userInfo-money ss-m-r-10"
v-if="item.value == 'offline' && item.disabled"
>
部分商品不支持
</view>
<radio <radio
:value="item.value" :value="item.value"
color="var(--ui-BG-Main)" color="var(--ui-BG-Main)"
@ -56,6 +52,7 @@
</label> </label>
</radio-group> </radio-group>
</view> </view>
<!-- 工具 --> <!-- 工具 -->
<view class="modal-footer ss-flex ss-row-center ss-col-center ss-m-t-80 ss-m-b-40"> <view class="modal-footer ss-flex ss-row-center ss-col-center ss-m-t-80 ss-m-b-40">
<button v-if="state.payStatus === 0" class="ss-reset-button past-due-btn"> <button v-if="state.payStatus === 0" class="ss-reset-button past-due-btn">
@ -81,95 +78,49 @@
import { computed, reactive } from 'vue'; import { computed, reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app'; import { onLoad } from '@dcloudio/uni-app';
import sheep from '@/sheep'; import sheep from '@/sheep';
import { useDurationTime } from '@/sheep/hooks/useGoods'; import { fen2yuan, useDurationTime } from '@/sheep/hooks/useGoods';
import PayOrderApi from '@/sheep/api/pay/order';
import PayChannelApi from '@/sheep/api/pay/channel';
import { getPayMethods } from '@/sheep/platform/pay';
const userInfo = computed(() => sheep.$store('user').userInfo); const userInfo = computed(() => sheep.$store('user').userInfo);
// 检测支付环境 // 检测支付环境
const state = reactive({ const state = reactive({
orderType: 'goods', orderType: 'goods', // 订单类型; goods - 商品订单, recharge - 充值订单
payment: '', orderInfo: {}, // 支付单信息
orderInfo: {},
payStatus: 0, // 0=检测支付环境, -2=未查询到支付单信息， -1=支付已过期， 1=待支付，2=订单已支付 payStatus: 0, // 0=检测支付环境, -2=未查询到支付单信息， -1=支付已过期， 1=待支付，2=订单已支付
payMethods: [], payMethods: [], // 可选的支付方式
payment: '', // 选中的支付方式
}); });
const allowedPayment = computed(() => {
if(state.orderType === 'recharge') {
return sheep.$store('app').platform.recharge_payment
}
return sheep.$store('app').platform.payment
});
const payMethods = [
{
icon: '/static/img/shop/pay/wechat.png',
title: '微信支付',
value: 'wechat',
disabled: false,
},
{
icon: '/static/img/shop/pay/alipay.png',
title: '支付宝支付',
value: 'alipay',
disabled: false,
},
{
icon: '/static/img/shop/pay/wallet.png',
title: '余额支付',
value: 'money',
disabled: false,
},
{
icon: '/static/img/shop/pay/apple.png',
title: 'Apple Pay',
value: 'apple',
disabled: false,
},
{
icon: '/static/img/shop/pay/cod.png',
title: '货到付款',
value: 'offline',
disabled: false,
},
];
const onPay = () => { const onPay = () => {
if (state.payment === '') { if (state.payment === '') {
sheep.$helper.toast('请选择支付方式'); sheep.$helper.toast('请选择支付方式');
return; return;
} }
if (state.payment === 'money') { if (state.payment === 'wallet') {
uni.showModal({ uni.showModal({
title: '提示', title: '提示',
content: '确定要支付吗?', content: '确定要支付吗?',
success: function (res) { success: function (res) {
if (res.confirm) { if (res.confirm) {
sheep.$platform.pay(state.payment, state.orderType, state.orderInfo.order_sn); sheep.$platform.pay(state.payment, state.orderType, state.orderInfo.id);
}
},
});
} else if (state.payment === 'offline') {
uni.showModal({
title: '提示',
content: '确定要下单吗?',
success: function (res) {
if (res.confirm) {
sheep.$platform.pay(state.payment, state.orderType, state.orderInfo.order_sn);
} }
}, },
}); });
} else { } else {
sheep.$platform.pay(state.payment, state.orderType, state.orderInfo.order_sn); sheep.$platform.pay(state.payment, state.orderType, state.orderInfo.id);
} }
}; };
// 支付文案提示
const payDescText = computed(() => { const payDescText = computed(() => {
if (state.payStatus === 2) { if (state.payStatus === 2) {
return '该订单已支付'; return '该订单已支付';
} }
if (state.payStatus === 1 && state.orderInfo.ext.expired_time !== 0) { if (state.payStatus === 1) {
const time = useDurationTime(state.orderInfo.ext.expired_time); const time = useDurationTime(state.orderInfo.expireTime);
if (time.ms <= 0) { if (time.ms <= 0) {
state.payStatus = -1; state.payStatus = -1;
return ''; return '';
@ -179,86 +130,65 @@
if (state.payStatus === -2) { if (state.payStatus === -2) {
return '未查询到支付单信息'; return '未查询到支付单信息';
} }
return ''; return '';
}); });
// 状态转换：payOrder.status => payStatus
function checkPayStatus() { function checkPayStatus() {
if (state.orderInfo.status === 'unpaid') { if (state.orderInfo.status === 10
state.payStatus = 1; || state.orderInfo.status === 20 ) { // 支付成功
state.payStatus = 2;
return; return;
} }
if (state.orderInfo.status === 'closed') { if (state.orderInfo.status === 30) { // 支付关闭
state.payStatus = -1; state.payStatus = -1;
return; return;
} }
state.payStatus = 2; state.payStatus = 1; // 待支付
} }
// 切换支付方式
function onTapPay(e) { function onTapPay(e) {
state.payment = e.detail.value; state.payment = e.detail.value;
} }
async function setRechargeOrder(id) { // 设置支付订单信息
const { data, error } = await sheep.$api.trade.order(id); async function setOrder(id) {
if (error === 0) { // 获得支付订单信息
state.orderInfo = data; const { data, code } = await PayOrderApi.getOrder(id);
state.payMethods = payMethods; if (code !== 0 || !data) {
checkPayStatus();
} else {
state.payStatus = -2; state.payStatus = -2;
return;
} }
state.orderInfo = data;
// 获得支付方式
await setPayMethods();
// 设置支付状态
checkPayStatus();
} }
async function setGoodsOrder(id) { // 获得支付方式
const { data, error } = await sheep.$api.order.detail(id); async function setPayMethods() {
if (error === 0) { const { data, code } = await PayChannelApi.getEnableChannelCodeList(state.orderInfo.appId)
state.orderInfo = data; if (code !== 0) {
if (state.orderInfo.ext.offline_status === 'none') { return
payMethods.forEach((item, index, array) => {
if (item.value === 'offline') {
array.splice(index, 1);
}
});
} else if (state.orderInfo.ext.offline_status === 'disabled') {
payMethods.forEach((item) => {
if (item.value === 'offline') {
item.disabled = true;
}
});
}
state.payMethods = payMethods;
checkPayStatus();
} else {
state.payStatus = -2;
} }
state.payMethods = getPayMethods(data)
} }
onLoad((options) => { onLoad((options) => {
if ( if (sheep.$platform.name === 'WechatOfficialAccount'
sheep.$platform.name === 'WechatOfficialAccount' && && sheep.$platform.os === 'ios'
sheep.$platform.os === 'ios' && && !sheep.$platform.landingPage.includes('pages/pay/index')) {
!sheep.$platform.landingPage.includes('pages/pay/index')
) {
location.reload(); location.reload();
return; return;
} }
let id = ''; // 获得支付订单信息
if (options.orderSN) { let id = options.id;
id = options.orderSN; if (options.orderType) {
} state.orderType = options.orderType;
if (options.id) {
id = options.id;
}
if (options.type === 'recharge') {
state.orderType = 'recharge';
// 充值订单
setRechargeOrder(id);
} else {
state.orderType = 'goods';
// 商品订单
setGoodsOrder(id);
} }
setOrder(id);
}); });
</script> </script>

120
pages/pay/result.vue
View File

@ -2,34 +2,27 @@
<template> <template>
<s-layout title="支付结果" :bgStyle="{ color: '#FFF' }"> <s-layout title="支付结果" :bgStyle="{ color: '#FFF' }">
<view class="pay-result-box ss-flex-col ss-row-center ss-col-center"> <view class="pay-result-box ss-flex-col ss-row-center ss-col-center">
<view class="pay-waiting ss-m-b-30" v-if="payResult === 'waiting'"> </view> <!-- 信息展示 -->
<view class="pay-waiting ss-m-b-30" v-if="payResult === 'waiting'" />
<image <image
class="pay-img ss-m-b-30" class="pay-img ss-m-b-30"
v-if="payResult === 'success'" v-if="payResult === 'success'"
:src="sheep.$url.static('/static/img/shop/order/order_pay_success.gif')" :src="sheep.$url.static('/static/img/shop/order/order_pay_success.gif')"
></image> />
<image <image
class="pay-img ss-m-b-30" class="pay-img ss-m-b-30"
v-if="['failed', 'closed'].includes(payResult)" v-if="['failed', 'closed'].includes(payResult)"
:src="sheep.$url.static('/static/img/shop/order/order_paty_fail.gif')" :src="sheep.$url.static('/static/img/shop/order/order_paty_fail.gif')"
></image> />
<view class="tip-text ss-m-b-30" v-if="payResult == 'success'">{{ <view class="tip-text ss-m-b-30" v-if="payResult === 'success'">支付成功</view>
state.orderInfo.pay_mode === 'offline' ? '下单成功' : '支付成功' <view class="tip-text ss-m-b-30" v-if="payResult === 'failed'">支付失败</view>
}}</view> <view class="tip-text ss-m-b-30" v-if="payResult === 'closed'">该订单已关闭</view>
<view class="tip-text ss-m-b-30" v-if="payResult == 'failed'">支付失败</view> <view class="tip-text ss-m-b-30" v-if="payResult === 'waiting'">检测支付结果...</view>
<view class="tip-text ss-m-b-30" v-if="payResult == 'closed'">该订单已关闭</view>
<view class="tip-text ss-m-b-30" v-if="payResult == 'waiting'">检测支付结果...</view>
<view class="pay-total-num ss-flex" v-if="payResult === 'success'"> <view class="pay-total-num ss-flex" v-if="payResult === 'success'">
<view v-if="Number(state.orderInfo.pay_fee) > 0">￥{{ state.orderInfo.pay_fee }}</view> <view>￥{{ fen2yuan(state.orderInfo.price) }}</view>
<view v-if="state.orderInfo.score_amount && Number(state.orderInfo.pay_fee) > 0">+</view>
<view class="price-text ss-flex ss-col-center" v-if="state.orderInfo.score_amount">
<image
:src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
class="score-img"
></image>
<view>{{ state.orderInfo.score_amount }}</view>
</view>
</view> </view>
<!-- 操作区 -->
<view class="btn-box ss-flex ss-row-center ss-m-t-50"> <view class="btn-box ss-flex ss-row-center ss-m-t-50">
<button class="back-btn ss-reset-button" @tap="sheep.$router.go('/pages/index/index')"> <button class="back-btn ss-reset-button" @tap="sheep.$router.go('/pages/index/index')">
返回首页 返回首页
@ -37,30 +30,29 @@
<button <button
class="check-btn ss-reset-button" class="check-btn ss-reset-button"
v-if="payResult === 'failed'" v-if="payResult === 'failed'"
@tap="sheep.$router.redirect('/pages/pay/index', { orderSN: state.orderId })" @tap="
sheep.$router.redirect('/pages/pay/index', { id: state.id, orderType: state.orderType })
"
> >
重新支付 重新支付
</button> </button>
<button class="check-btn ss-reset-button" v-if="payResult === 'success'" @tap="onOrder"> <button class="check-btn ss-reset-button" v-if="payResult === 'success'" @tap="onOrder">
查看订单 查看订单
</button> </button>
<!-- TODO 芋艿：拼团接入 -->
<button <button
class="check-btn ss-reset-button" class="check-btn ss-reset-button"
v-if=" v-if="payResult === 'success' && state.tradeOrder.type === 3"
payResult === 'success' &&
['groupon', 'groupon_ladder'].includes(state.orderInfo.activity_type)
"
@tap="sheep.$router.redirect('/pages/activity/groupon/order')" @tap="sheep.$router.redirect('/pages/activity/groupon/order')"
> >
我的拼团 我的拼团
</button> </button>
</view> </view>
<!-- TODO 芋艿：订阅 -->
<!-- #ifdef MP --> <!-- #ifdef MP -->
<view class="subscribe-box ss-flex ss-m-t-44"> <view class="subscribe-box ss-flex ss-m-t-44">
<image <image class="subscribe-img" :src="sheep.$url.static('/static/img/shop/order/cargo.png')" />
class="subscribe-img"
:src="sheep.$url.static('/static/img/shop/order/cargo.png')"
></image>
<view class="subscribe-title ss-m-r-48 ss-m-l-16">获取实时发货信息与订单状态</view> <view class="subscribe-title ss-m-r-48 ss-m-l-16">获取实时发货信息与订单状态</view>
<view class="subscribe-start" @tap="subscribeMessage">立即订阅</view> <view class="subscribe-start" @tap="subscribeMessage">立即订阅</view>
</view> </view>
@ -74,15 +66,20 @@
import { reactive, computed } from 'vue'; import { reactive, computed } from 'vue';
import { isEmpty } from 'lodash'; import { isEmpty } from 'lodash';
import sheep from '@/sheep'; import sheep from '@/sheep';
import PayOrderApi from '@/sheep/api/pay/order';
import { fen2yuan } from '../../sheep/hooks/useGoods';
import OrderApi from '@/sheep/api/trade/order';
const state = reactive({ const state = reactive({
orderId: 0, id: 0, // 支付单号
orderType: 'goods', orderType: 'goods', // 订单类型
result: 'unpaid', // 支付状态 result: 'unpaid', // 支付状态
orderInfo: {}, // 订单详情 orderInfo: {}, // 支付订单信息
tradeOrder: {}, // 商品订单信息，只有在 orderType 为 goods 才会请求。目的：【我的拼团】按钮的展示
counter: 0, // 获取结果次数 counter: 0, // 获取结果次数
}); });
// 支付结果 result => payResult
const payResult = computed(() => { const payResult = computed(() => {
if (state.result === 'unpaid') { if (state.result === 'unpaid') {
return 'waiting'; return 'waiting';
@ -93,57 +90,65 @@
if (state.result === 'failed') { if (state.result === 'failed') {
return 'failed'; return 'failed';
} }
if (state.result === 'closed') { if (state.result === 'closed') {
return 'closed'; return 'closed';
} }
}); });
async function getOrderInfo(orderId) {
let checkPayResult; // 获得订单信息
async function getOrderInfo(id) {
state.counter++; state.counter++;
if (state.orderType === 'recharge') { // 1. 加载订单信息
checkPayResult = sheep.$api.trade.order; const { data, code } = await PayOrderApi.getOrder(id);
} else { if (code === 0) {
checkPayResult = sheep.$api.order.detail;
}
const { data, error } = await checkPayResult(orderId);
if (error === 0) {
state.orderInfo = data; state.orderInfo = data;
if (state.orderInfo.status === 'closed') { if (!state.orderInfo || state.orderInfo.status === 30) {
// 支付关闭
state.result = 'closed'; state.result = 'closed';
return; return;
} }
if (state.orderInfo.status !== 'unpaid') { if (state.orderInfo.status !== 0) {
// 非待支付，可能是已支付，可能是已退款
state.result = 'paid'; state.result = 'paid';
// #ifdef MP // #ifdef MP
subscribeMessage(); subscribeMessage();
// #endif // #endif
// 特殊：获得商品订单信息
if (state.orderType === 'goods') {
const { data, code } = await OrderApi.getOrder(state.orderInfo.merchantOrderId);
if (code === 0) {
state.tradeOrder = data;
}
}
return; return;
} }
} }
// 2.1 情况三一：未支付，且轮询次数小于三次，则继续轮询
if (state.counter < 3 && state.result === 'unpaid') { if (state.counter < 3 && state.result === 'unpaid') {
setTimeout(() => { setTimeout(() => {
getOrderInfo(orderId); getOrderInfo(id);
}, 1500); }, 1500);
} }
// 超过三次检测才判断为支付失败 // 2.2 情况二：超过三次检测才判断为支付失败
if (state.counter >= 3) { if (state.counter >= 3) {
state.result = 'failed'; state.result = 'failed';
} }
} }
function onOrder() { function onOrder() {
if ((state.orderType === 'recharge')) { // TODO 芋艿：待测试
if (state.orderType === 'recharge') {
sheep.$router.redirect('/pages/pay/recharge-log'); sheep.$router.redirect('/pages/pay/recharge-log');
} else { } else {
sheep.$router.redirect('/pages/order/list'); sheep.$router.redirect('/pages/order/list');
} }
} }
// TODO 芋艿：待测试
// #ifdef MP // #ifdef MP
function subscribeMessage() { function subscribeMessage() {
let event = ['order_dispatched']; let event = ['order_dispatched'];
if (['groupon', 'groupon_ladder'].includes(state.orderInfo.activity_type)) { if (state.tradeOrder.type === 3) {
event.push('groupon_finish'); event.push('groupon_finish');
event.push('groupon_fail'); event.push('groupon_fail');
} }
@ -152,18 +157,13 @@
// #endif // #endif
onLoad(async (options) => { onLoad(async (options) => {
let id = '';
// 支付订单号 // 支付订单号
if (options.orderSN) {
id = options.orderSN;
}
if (options.id) { if (options.id) {
id = options.id; state.id = options.id;
} }
state.orderId = id; // 订单类型
if (options.orderType) {
if (options.orderType === 'recharge') { state.orderType = options.orderType;
state.orderType = 'recharge';
} }
// 支付结果传值过来是失败，则直接显示失败界面 // 支付结果传值过来是失败，则直接显示失败界面
@ -171,14 +171,16 @@
state.result = 'failed'; state.result = 'failed';
} else { } else {
// 轮询三次检测订单支付结果 // 轮询三次检测订单支付结果
getOrderInfo(state.orderId); await getOrderInfo(state.id);
} }
}); });
onShow(() => { onShow(() => {
if(isEmpty(state.orderInfo)) return; if (isEmpty(state.orderInfo)) {
getOrderInfo(state.orderId); return;
}) }
getOrderInfo(state.id);
});
onHide(() => { onHide(() => {
state.result = 'unpaid'; state.result = 'unpaid';

2
sheep/api/app.js
View File

@ -115,11 +115,13 @@ export default {
formData: { formData: {
group, group,
}, },
// TODO 芋艿：临时写死
header: { header: {
// Accept: 'text/json', // Accept: 'text/json',
// Authorization: token, // Authorization: token,
Accept : '*/*', Accept : '*/*',
'tenant-id' :'1', 'tenant-id' :'1',
'terminal': 20,
Authorization: 'Bearer test247', Authorization: 'Bearer test247',
}, },
success: (uploadFileRes) => { success: (uploadFileRes) => {

1
sheep/api/cart.js
View File

@ -14,6 +14,7 @@ export default {
request({ request({
url: '/app-api/trade/cart/add', url: '/app-api/trade/cart/add',
method: 'POST', method: 'POST',
// TODO 芋艿：这里没提示
custom: { custom: {
showSuccess: true, showSuccess: true,
successMsg: '已添加到购物车~', successMsg: '已添加到购物车~',

1
sheep/api/goods.js
View File

@ -36,7 +36,6 @@ export default {
showError: false, showError: false,
}, },
}), }),
// 商品评价列表 // 商品评价列表
comment: (id, params = {}) => comment: (id, params = {}) =>
request({ request({

6
sheep/api/order.js
View File

@ -85,12 +85,6 @@ export default {
params: data2 params: data2
}) })
}, },
// calc: (data) =>
// request({
// url: 'order/order/calc',
// method: 'POST',
// data,
// }),
// 创建订单 // 创建订单
create: (data) => create: (data) =>
request({ request({

14
sheep/api/pay/channel.js Normal file
View File

@ -0,0 +1,14 @@
import request from '@/sheep/request';
const PayChannelApi = {
// 获得指定应用的开启的支付渠道编码列表
getEnableChannelCodeList: (appId) => {
return request({
url: '/app-api/pay/channel/get-enable-code-list',
method: 'GET',
params: { appId }
});
},
};
export default PayChannelApi;

22
sheep/api/pay/order.js Normal file
View File

@ -0,0 +1,22 @@
import request from '@/sheep/request';
const PayOrderApi = {
// 获得支付订单
getOrder: (id) => {
return request({
url: '/app-api/pay/order/get',
method: 'GET',
params: { id }
});
},
// 提交支付订单
submitOrder: (data) => {
return request({
url: '/app-api/pay/order/submit',
method: 'POST',
data
});
}
};
export default PayOrderApi;

1
sheep/api/product/comment.js
View File

@ -1,6 +1,7 @@
import request from '@/sheep/request'; import request from '@/sheep/request';
const CommentApi = { const CommentApi = {
// 获得商品评价分页 // 获得商品评价分页
getCommentPage: (spuId, pageNo, pageSize, type) => { getCommentPage: (spuId, pageNo, pageSize, type) => {
return request({ return request({

30
sheep/api/promotion/coupon.js
View File

@ -6,24 +6,28 @@ export default {
return request({ return request({
url: '/app-api/promotion/coupon-template/list-by-ids', url: '/app-api/promotion/coupon-template/list-by-ids',
method: 'GET', method: 'GET',
params: { params: { ids },
ids
},
}); });
}, },
// 获得优惠劵模版列表 // 获得优惠劵模版列表
getCouponTemplateList: (params) => { getCouponTemplateList: (spuId, productScope, count) => {
return request({ return request({
url: `/app-api/promotion/coupon/match-list?price=${params.price}&spuIds=${params.spuIds}&skuIds=${params.skuIds}&categoryIds=${params.categoryIds}`, url: '/app-api/promotion/coupon-template/list',
method: 'GET', method: 'GET',
// params, params: { spuId, productScope, count },
}); });
}, },
// getCouponTemplateList: (spuId, productScope, count) => { // 获得匹配指定商品的优惠劵列表
// return request({ getMatchCouponList: (price, spuIds, skuIds, categoryIds) => {
// url: '/app-api/promotion/coupon-template/list', return request({
// method: 'GET', url: '/app-api/promotion/coupon/match-list',
// params: { spuId, productScope, count }, method: 'GET',
// }); params: {
// }, price,
spuIds: spuIds.join(','),
skuIds: skuIds.join(','),
categoryIds: categoryIds.join(','),
},
});
}
}; };

47
sheep/api/trade/cart.js Normal file
View File

@ -0,0 +1,47 @@
import request2 from '@/sheep/request2';
const CartApi = {
addCart: (data) => {
return request2({
url: '/app-api/trade/cart/add',
method: 'POST',
data: data,
// TODO 芋艿：这里没提示
custom: {
showSuccess: true,
successMsg: '已添加到购物车~',
}
});
},
updateCartCount: (data) => {
return request2({
url: '/app-api/trade/cart/update-count',
method: 'PUT',
data: data
});
},
updateCartSelected: (data) => {
return request2({
url: '/app-api/trade/cart/update-selected',
method: 'PUT',
data: data
});
},
deleteCart: (ids) => {
return request2({
url: '/app-api/trade/cart/delete',
method: 'DELETE',
params: {
ids
}
});
},
getCartList: () => {
return request2({
url: '/app-api/trade/cart/list',
method: 'GET',
});
},
};
export default CartApi;

53
sheep/api/trade/order.js Normal file
View File

@ -0,0 +1,53 @@
import request2 from '@/sheep/request2';
const OrderApi = {
// 计算订单信息
settlementOrder: (data) => {
const data2 = {
...data,
};
// 移除多余字段
if (!(data.couponId > 0)) {
delete data2.couponId;
}
if (!(data.addressId > 0)) {
delete data2.addressId;
}
// 解决 SpringMVC 接受 List<Item> 参数的问题
delete data2.items;
for (let i = 0; i < data.items.length; i++) {
data2[encodeURIComponent('items[' + i + '' + '].skuId')] = data.items[i].skuId + '';
data2[encodeURIComponent('items[' + i + '' + '].count')] = data.items[i].count + '';
if (data.items[i].cartId) {
data2[encodeURIComponent('items[' + i + '' + '].cartId')] = data.items[i].cartId + '';
}
}
const queryString = Object.keys(data2)
.map((key) => key + '=' + data2[key])
.join('&');
return request2({
url: `trade/order/settlement?${queryString}`,
method: 'GET',
});
},
// 创建订单
createOrder: (data) => {
return request2({
url: `trade/order/create`,
method: 'POST',
data,
});
},
// 获得订单
getOrder: (id) => {
return request2({
url: `trade/order/get-detail`,
method: 'GET',
params: {
id,
},
});
},
};
export default OrderApi;

24
sheep/components/s-coupon-select/s-coupon-select.vue
View File

@ -1,3 +1,4 @@
<!-- 订单确认的优惠劵选择弹窗 -->
<template> <template>
<su-popup <su-popup
:show="show" :show="show"
@ -16,20 +17,21 @@
:enable-back-to-top="true" :enable-back-to-top="true"
> >
<view class="subtitle ss-m-l-20">可使用优惠券</view> <view class="subtitle ss-m-l-20">可使用优惠券</view>
<view v-for="(item, index) in state.couponInfo.can_use" :key="index"> <view v-for="(item, index) in state.couponInfo" :key="index">
<s-coupon-list :data="item" type="user" :disabled="false"> <s-coupon-list :data="item" type="user" :disabled="false">
<template #default> <template #default>
<label class="ss-flex ss-col-center" @tap="radioChange(item.id)"> <label class="ss-flex ss-col-center" @tap="radioChange(item.id)">
<radio <radio
color="var(--ui-BG-Main)" color="var(--ui-BG-Main)"
style="transform: scale(0.8)" style="transform: scale(0.8)"
:checked="state.couponId == item.id" :checked="state.couponId === item.id"
@tap.stop="radioChange(item.id)" @tap.stop="radioChange(item.id)"
/> />
</label> </label>
</template> </template>
</s-coupon-list> </s-coupon-list>
</view> </view>
<!-- TODO 芋艿：未来接口需要支持下
<view class="subtitle ss-m-t-40 ss-m-l-20">不可使用优惠券</view> <view class="subtitle ss-m-t-40 ss-m-l-20">不可使用优惠券</view>
<view v-for="item in state.couponInfo.cannot_use" :key="item.id"> <view v-for="item in state.couponInfo.cannot_use" :key="item.id">
<s-coupon-list :data="item" type="user" :disabled="true"> <s-coupon-list :data="item" type="user" :disabled="true">
@ -41,6 +43,7 @@
</template> </template>
</s-coupon-list> </s-coupon-list>
</view> </view>
-->
</scroll-view> </scroll-view>
</view> </view>
<view class="modal-footer ss-flex"> <view class="modal-footer ss-flex">
@ -50,8 +53,9 @@
</template> </template>
<script setup> <script setup>
import { computed, reactive } from 'vue'; import { computed, reactive } from 'vue';
const props = defineProps({ const props = defineProps({
modelValue: { modelValue: { // 优惠劵列表
type: Object, type: Object,
default() {}, default() {},
}, },
@ -60,21 +64,27 @@
default: false, default: false,
}, },
}); });
const emits = defineEmits(['confirm', 'close']); const emits = defineEmits(['confirm', 'close']);
const state = reactive({ const state = reactive({
couponInfo: computed(() => props.modelValue), couponInfo: computed(() => props.modelValue), // 优惠劵列表
couponId: 0, couponId: 0, // 选中的优惠劵编号
}); });
// 选中优惠劵
function radioChange(couponId) { function radioChange(couponId) {
if (state.couponId == couponId) { if (state.couponId === couponId) {
state.couponId = 0; state.couponId = 0;
} else { } else {
state.couponId = couponId; state.couponId = couponId;
} }
} }
// 确认优惠劵
const onConfirm = () => { const onConfirm = () => {
emits('confirm', state.couponId); emits('confirm', state.couponId);
}; }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
:deep() { :deep() {

3
sheep/components/s-goods-item/s-goods-item.vue
View File

@ -26,7 +26,7 @@
:style="[{ color: priceColor }]" :style="[{ color: priceColor }]"
v-if="price && Number(price) > 0" v-if="price && Number(price) > 0"
> >
￥{{ price }} ￥{{ fen2yuan(price) }}
</view> </view>
<view v-if="score && Number(price) > 0">+</view> <view v-if="score && Number(price) > 0">+</view>
<view class="price-text ss-flex ss-col-center" v-if="score"> <view class="price-text ss-flex ss-col-center" v-if="score">
@ -54,6 +54,7 @@
<script setup> <script setup>
import sheep from '@/sheep'; import sheep from '@/sheep';
import { computed } from 'vue'; import { computed } from 'vue';
import { fen2yuan } from '../../hooks/useGoods';
/** /**
* 订单卡片 * 订单卡片
* *

85
sheep/hooks/useGoods.js
View File

@ -82,27 +82,78 @@ export function formatGoodsSwiper(urlList) {
/** /**
* 格式化订单状态的颜色 * 格式化订单状态的颜色
* @param type 订单类型 *
* @param order 订单
* @return {string} 颜色的 class 名称 * @return {string} 颜色的 class 名称
*/ */
export function formatOrderColor(type) { export function formatOrderColor(order) {
switch (type) { if (order.status === 0) {
case 'apply_refund':
case 'groupon_ing':
case 'nocomment':
case 'noget':
case 'nosend':
return 'warning-color';
case 'closed':
case 'groupon_invalid':
case 'cancel':
case 'refund_agree':
return 'danger-color';
case 'completed':
return 'success-color';
case 'unpaid':
return 'info-color'; return 'info-color';
} }
if (order.status === 10
|| order.status === 20
|| (order.status === 30 && !order.commentStatus)) {
return 'warning-color';
}
if (order.status === 30 && order.commentStatus) {
return 'success-color';
}
return 'danger-color';
}
/**
* 格式化订单状态
*
* @param order 订单
*/
export function formatOrderStatus(order) {
if (order.status === 0) {
return '待付款';
}
if (order.status === 10 && order.deliveryType === 1) {
return '待发货';
}
if (order.status === 10 && order.deliveryType === 2) {
return '待核销';
}
if (order.status === 20) {
return '待收货';
}
if (order.status === 30 && !order.commentStatus) {
return '待评价';
}
if (order.status === 30 && order.commentStatus) {
return '已完成';
}
return '已关闭';
}
/**
* 处理订单的 button 操作按钮数组
*
* @param order 订单
*/
export function handleOrderButtons(order) {
order.buttons = []
if (order.type === 3) { // 查看拼团
order.buttons.push('combination');
}
if (order.status === 20) { // 确认收货
order.buttons.push('confirm');
}
if (order.logisticsId > 0) { // 查看物流
order.buttons.push('express');
}
if (order.status === 0) { // 取消订单 / 发起支付
order.buttons.push('cancel');
order.buttons.push('pay');
}
if (order.status === 30 && !order.commentStatus) { // 发起评价
order.buttons.push('comment');
}
if (order.status === 40) { // 删除订单
order.buttons.push('delete');
}
} }
/** /**

132
sheep/platform/pay.js
View File

@ -3,19 +3,20 @@ import sheep from '@/sheep';
import $wxsdk from '@/sheep/libs/sdk-h5-weixin'; import $wxsdk from '@/sheep/libs/sdk-h5-weixin';
// #endif // #endif
import { getRootUrl } from '@/sheep/helper'; import { getRootUrl } from '@/sheep/helper';
import PayOrderApi from '@/sheep/api/pay/order';
/** /**
* 支付 * 支付
* *
* @param {String} payment = ['wechat','alipay','wallet','offline'] - 支付方式 * @param {String} payment = ['wechat','alipay','wallet','offline'] - 支付方式
* @param {String} orderType = ['goods','recharge','groupon'] - 订单类型 * @param {String} orderType = ['goods','recharge','groupon'] - 订单类型
* @param {String} orderSN - 订单号 * @param {String} id - 订单号
*/ */
export default class SheepPay { export default class SheepPay {
constructor(payment, orderType, orderSN) { constructor(payment, orderType, id) {
this.payment = payment; this.payment = payment;
this.orderSN = orderSN; this.id = id;
this.orderType = orderType; this.orderType = orderType;
this.payAction(); this.payAction();
} }
@ -29,8 +30,8 @@ export default class SheepPay {
alipay: () => { alipay: () => {
this.redirectPay(); // 现在公众号可以直接跳转支付宝页面 this.redirectPay(); // 现在公众号可以直接跳转支付宝页面
}, },
money: () => { wallet: () => {
this.moneyPay(); this.walletPay();
}, },
offline: () => { offline: () => {
this.offlinePay(); this.offlinePay();
@ -43,8 +44,8 @@ export default class SheepPay {
alipay: () => { alipay: () => {
this.copyPayLink(); this.copyPayLink();
}, },
money: () => { wallet: () => {
this.moneyPay(); this.walletPay();
}, },
offline: () => { offline: () => {
this.offlinePay(); this.offlinePay();
@ -57,8 +58,8 @@ export default class SheepPay {
alipay: () => { alipay: () => {
this.alipay(); this.alipay();
}, },
money: () => { wallet: () => {
this.moneyPay(); this.walletPay();
}, },
offline: () => { offline: () => {
this.offlinePay(); this.offlinePay();
@ -71,8 +72,8 @@ export default class SheepPay {
alipay: () => { alipay: () => {
this.redirectPay(); this.redirectPay();
}, },
money: () => { wallet: () => {
this.moneyPay(); this.walletPay();
}, },
offline: () => { offline: () => {
this.offlinePay(); this.offlinePay();
@ -83,18 +84,21 @@ export default class SheepPay {
} }
// 预支付 // 预支付
prepay() { prepay(channel) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let data = { let data = {
order_sn: this.orderSN, id: this.id,
payment: this.payment, channelCode: channel,
channelExtras: {}
}; };
if (uni.getStorageSync('openid')) { if (uni.getStorageSync('openid')) {
data.openid = uni.getStorageSync('openid'); data.openid = uni.getStorageSync('openid');
} }
sheep.$api.pay.prepay(data).then((res) => { PayOrderApi.submitOrder(data).then((res) => {
res.error === 0 && resolve(res); // 成功时
if (res.error === -1 && res.msg === 'miss_openid') { res.code === 0 && resolve(res);
// 失败时
if (res.code !== 0 && res.msg === 'miss_openid') {
uni.showModal({ uni.showModal({
title: '微信支付', title: '微信支付',
content: '请先绑定微信再使用微信支付', content: '请先绑定微信再使用微信支付',
@ -109,7 +113,7 @@ export default class SheepPay {
}); });
} }
// #ifdef H5 // #ifdef H5
// 微信公众号JSSDK支付 // 微信公众号JSSDK支付 TODO 芋艿：待接入
async wechatOfficialAccountPay() { async wechatOfficialAccountPay() {
let that = this; let that = this;
let { error, data, msg } = await this.prepay(); let { error, data, msg } = await this.prepay();
@ -130,21 +134,21 @@ export default class SheepPay {
}); });
} }
//浏览器微信H5支付 //浏览器微信H5支付 TODO 芋艿：待接入
async wechatWapPay() { async wechatWapPay() {
const { error, data } = await this.prepay(); const { error, data } = await this.prepay();
if (error === 0) { if (error === 0) {
const redirect_url = `${getRootUrl()}pages/pay/result?orderSN=${this.orderSN}&payment=${this.payment const redirect_url = `${getRootUrl()}pages/pay/result?id=${this.id}&payment=${this.payment
}&orderType=${this.orderType}`; }&orderType=${this.orderType}`;
location.href = `${data.pay_data.h5_url}&redirect_url=${encodeURIComponent(redirect_url)}`; location.href = `${data.pay_data.h5_url}&redirect_url=${encodeURIComponent(redirect_url)}`;
} }
} }
// 支付链接 // 支付链接 TODO 芋艿：待接入
async redirectPay() { async redirectPay() {
let { error, data } = await this.prepay(); let { error, data } = await this.prepay();
if (error === 0) { if (error === 0) {
const redirect_url = `${getRootUrl()}pages/pay/result?orderSN=${this.orderSN}&payment=${this.payment const redirect_url = `${getRootUrl()}pages/pay/result?id=${this.id}&payment=${this.payment
}&orderType=${this.orderType}`; }&orderType=${this.orderType}`;
location.href = data.pay_data + encodeURIComponent(redirect_url); location.href = data.pay_data + encodeURIComponent(redirect_url);
} }
@ -152,7 +156,7 @@ export default class SheepPay {
// #endif // #endif
// 微信小程序支付 // 微信小程序支付 TODO 芋艿：待接入
async wechatMiniProgramPay() { async wechatMiniProgramPay() {
let that = this; let that = this;
let result = await this.prepay(); let result = await this.prepay();
@ -173,18 +177,18 @@ export default class SheepPay {
} }
// 余额支付 // 余额支付
async moneyPay() { async walletPay() {
const { error } = await this.prepay(); const { code } = await this.prepay('wallet');
error === 0 && this.payResult('success'); code === 0 && this.payResult('success');
} }
// 货到付款 // 货到付款 TODO 芋艿：待接入
async offlinePay() { async offlinePay() {
const { error } = await this.prepay(); const { error } = await this.prepay();
error === 0 && this.payResult('success'); error === 0 && this.payResult('success');
} }
// 支付宝复制链接支付 // 支付宝复制链接支付 TODO 芋艿：待接入
async copyPayLink() { async copyPayLink() {
let that = this; let that = this;
let { error, data } = await this.prepay(); let { error, data } = await this.prepay();
@ -203,7 +207,7 @@ export default class SheepPay {
} }
} }
// 支付宝支付 // 支付宝支付 TODO 芋艿：待接入
async alipay() { async alipay() {
let that = this; let that = this;
const { error, data } = await this.prepay(); const { error, data } = await this.prepay();
@ -225,7 +229,7 @@ export default class SheepPay {
} }
} }
// 微信支付 // 微信支付 TODO 芋艿：待接入
async wechatAppPay() { async wechatAppPay() {
let that = this; let that = this;
let { error, data } = await this.prepay(); let { error, data } = await this.prepay();
@ -246,10 +250,72 @@ export default class SheepPay {
// 支付结果跳转,success:成功，fail:失败 // 支付结果跳转,success:成功，fail:失败
payResult(resultType) { payResult(resultType) {
sheep.$router.redirect('/pages/pay/result', { sheep.$router.redirect('/pages/pay/result', {
orderSN: this.orderSN, id: this.id,
payment: this.payment, //重新支付的时候使用
payState: resultType,
orderType: this.orderType, orderType: this.orderType,
payState: resultType
}); });
} }
} }
export function getPayMethods(channels) {
const payMethods = [
{
icon: '/static/img/shop/pay/wechat.png',
title: '微信支付',
value: 'wechat',
disabled: true,
},
{
icon: '/static/img/shop/pay/alipay.png',
title: '支付宝支付',
value: 'alipay',
disabled: true,
},
{
icon: '/static/img/shop/pay/wallet.png',
title: '余额支付',
value: 'wallet',
disabled: true,
},
{
icon: '/static/img/shop/pay/apple.png',
title: 'Apple Pay',
value: 'apple',
disabled: true,
},
{
icon: '/static/img/shop/pay/wallet.png',
title: '模拟支付',
value: 'mock',
disabled: true,
}
];
const platform = sheep.$platform.name
// 1. 处理【微信支付】
const wechatMethod = payMethods[0];
if ((platform === 'WechatOfficialAccount' && channels.includes('wx_pub'))
|| platform === 'WechatMiniProgram' && channels.includes('wx_lite')
|| platform === 'App' && channels.includes('wx_app')) {
wechatMethod.disabled = false;
}
// 2. 处理【支付宝支付】
const alipayMethod = payMethods[1];
if ((platform === 'WechatOfficialAccount' && channels.includes('alipay_wap'))
|| platform === 'WechatMiniProgram' && channels.includes('alipay_wap')
|| platform === 'App' && channels.includes('alipay_app')) {
alipayMethod.disabled = false;
}
// 3. 处理【余额支付】
const walletMethod = payMethods[2];
if (channels.includes('wallet')) {
walletMethod.disabled = false;
}
// 4. 处理【苹果支付】TODO 芋艿：未来接入
// 5. 处理【模拟支付】
const mockMethod = payMethods[4];
if (channels.includes('mock')) {
mockMethod.disabled = false;
}
return payMethods;
}

4
sheep/store/app.js
View File

@ -23,8 +23,8 @@ const app = defineStore({
copytime: '', // 版权信息 II copytime: '', // 版权信息 II
}, },
platform: { platform: {
payment: [], // 支持的支付方式 payment: [], // 支持的支付方式 TODO 芋艿：可删除
recharge_payment: [], // 支持的充值支付方式 recharge_payment: [], // 支持的充值支付方式 TODO 芋艿：可删除
share: { share: {
methods: [], // 支持的分享方式 methods: [], // 支持的分享方式
forwardInfo: {}, // 默认转发信息 forwardInfo: {}, // 默认转发信息

121
sheep/store/cart.js
View File

@ -1,7 +1,5 @@
import { import { defineStore } from 'pinia';
defineStore import CartApi from '@/sheep/api/trade/cart';
} from 'pinia';
import cartApi from '@/sheep/api/cart';
const cart = defineStore({ const cart = defineStore({
id: 'cart', id: 'cart',
@ -9,111 +7,96 @@ const cart = defineStore({
list: [], // 购物车列表 list: [], // 购物车列表
selectedIds: [], // 已选列表 selectedIds: [], // 已选列表
isAllSelected: false, // 是否全选 isAllSelected: false, // 是否全选
cartSelectedTotalPrice: '0.00', // 选中项总金额 totalPriceSelected: 0, // 选中项总金额
}), }),
getters: {
totalPriceSelected: (state) => {
let price = 0;
if (!state.selectedIds.length) return price.toFixed(2);
state.list.forEach((item) => {
price += state.selectedIds.includes(item.id) ?
Number(item.sku.price / 100) * item.count :
0;
});
return price.toFixed(2);
},
},
actions: { actions: {
// 获取购物车列表 // 获取购物车列表
async getList() { async getList() {
const { const { data, code } = await CartApi.getCartList();
data,
code
} = await cartApi.list();
if (code === 0) { if (code === 0) {
this.list = data.validList; this.list = data.validList;
// 计算各种关联属性
this.selectedIds = [];
this.isAllSelected = true;
this.totalPriceSelected = 0;
this.list.forEach((item) => {
if (item.selected) {
this.selectedIds.push(item.id);
this.totalPriceSelected += item.count * item.sku.price;
} else {
this.isAllSelected = false;
}
});
} }
}, },
// 添加购物车 // 添加购物车
async add(goodsInfo) { async add(goodsInfo) {
console.log() // 添加购物项
const { const { code } = await CartApi.addCart({
code
} = await cartApi.append({
// goods_id: goodsInfo.goods_id,
// goods_num: goodsInfo.goods_num,
// goods_sku_price_id: goodsInfo.id,
count: goodsInfo.goods_num,
skuId: goodsInfo.id, skuId: goodsInfo.id,
count: goodsInfo.goods_num,
}); });
// 刷新购物车列表
if (code === 0) { if (code === 0) {
this.getList(); await this.getList();
} }
}, },
// 更新购物车 // 更新购物车
async update(goodsInfo) { async update(goodsInfo) {
const { const { code } = await CartApi.updateCartCount({
error
} = await cartApi.update({
id: goodsInfo.goods_id, id: goodsInfo.goods_id,
count: goodsInfo.goods_num, count: goodsInfo.goods_num,
goods_sku_price_id: goodsInfo.goods_sku_price_id,
}); });
if (error === 0) { if (code === 0) {
// this.getList(); await this.getList();
} }
}, },
// 移除购物车 // 移除购物车
async delete(ids) { async delete(ids) {
if (typeof ids === 'array') { const { code } = await CartApi.deleteCart(ids.join(','));
ids = ids.join(',');
}
const {
code
} = await cartApi.delete(ids);
if (code === 0) { if (code === 0) {
this.selectAll(false); await this.getList();
this.getList();
} }
}, },
// 选择购物车商品 // 单选购物车商品
selectSingle(goodsId) { async selectSingle(goodsId) {
if (!this.selectedIds.includes(goodsId)) { const { code } = await CartApi.updateCartSelected({
this.selectedIds.push(goodsId); ids: [goodsId],
} else { selected: !this.selectedIds.includes(goodsId), // 取反
this.selectedIds.splice(this.selectedIds.indexOf(goodsId), 1);
}
this.isAllSelected = this.selectedIds.length === this.list.length;
},
// 全选
selectAll(flag) {
this.isAllSelected = flag;
if (!flag) {
this.selectedIds = [];
} else {
this.list.forEach((item) => {
this.selectedIds.push(item.id);
}); });
if (code === 0) {
await this.getList();
}
},
// 全选购物车商品
async selectAll(flag) {
const { code } = await CartApi.updateCartSelected({
ids: this.list.map((item) => item.id),
selected: flag
});
if (code === 0) {
await this.getList();
} }
}, },
// 清空购物车 // 清空购物车
emptyList() { async emptyList() {
this.list = []; await this.delete(this.list.map((item) => item.id));
this.selectedIds = [];
this.isAllSelected = false;
this.cartSelectedTotalPrice = '0.00';
}, },
}, },
persist: { persist: {
enabled: true, enabled: true,
strategies: [{ strategies: [
{
key: 'cart-store', key: 'cart-store',
}, ], },
],
}, },
}); });