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/23/head
落日晚风 2023-12-05 14:27:36 +08:00
parent bfa440e98c
commit 4030e40ebc
12 changed files with 1889 additions and 1900 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
App.vue
View File

@ -1,41 +1,46 @@
<script setup> <script setup>
import { onLaunch, onShow, onError } from '@dcloudio/uni-app'; import {
import { ShoproInit } from './sheep'; onLaunch,
onShow,
onError
} from '@dcloudio/uni-app';
import {
ShoproInit
} from './sheep';
onLaunch(() => { onLaunch(() => {
// 隐藏原生导航栏 使用自定义底部导航 // 隐藏原生导航栏 使用自定义底部导航
uni.hideTabBar(); uni.hideTabBar();
// 加载Shopro底层依赖 // 加载Shopro底层依赖
ShoproInit(); ShoproInit();
}); });
onError((err) => { onError((err) => {
console.log('AppOnError:', err); console.log('AppOnError:', err);
}); });
onShow((options) => { onShow((options) => {
// #ifdef APP-PLUS // #ifdef APP-PLUS
// 获取urlSchemes参数 // 获取urlSchemes参数
const args = plus.runtime.arguments; const args = plus.runtime.arguments;
if (args) { if (args) {}
}
// 获取剪贴板 // 获取剪贴板
uni.getClipboardData({ uni.getClipboardData({
success: (res) => { }, success: (res) => {},
}); });
// #endif // #endif
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
// 确认收货回调结果 // 确认收货回调结果
console.log(options,'options'); console.log(options, 'options');
// #endif // #endif
}); });
</script> </script>
<style lang="scss"> <style lang="scss">
@import '@/sheep/scss/index.scss'; @import '@/sheep/scss/index.scss';
</style> </style>

739
pages/goods/index.vue
View File

@ -1,417 +1,400 @@
<template> <template>
<view> <view>
<s-layout :onShareAppMessage="shareInfo" navbar="goods"> <s-layout :onShareAppMessage="shareInfo" navbar="goods">
<!-- 标题栏 --> <!-- 标题栏 -->
<detailNavbar /> <detailNavbar />
<!-- 骨架屏 --> <!-- 骨架屏 -->
<detailSkeleton v-if="state.skeletonLoading" /> <detailSkeleton v-if="state.skeletonLoading" />
<!-- 下架/售罄提醒 --> <!-- 下架/售罄提醒 -->
<s-empty <s-empty v-else-if="state.goodsInfo === null" text="商品不存在或已下架" icon="/static/soldout-empty.png" showAction
v-else-if="state.goodsInfo === null" actionText="再逛逛" actionUrl="/pages/goods/list" />
text="商品不存在或已下架" <block v-else>
icon="/static/soldout-empty.png" <view class="detail-swiper-selector">
showAction <!-- 商品轮播图 -->
actionText="再逛逛" <su-swiper class="ss-m-b-14" isPreview :list="state.goodsSwiper" dotStyle="tag" imageMode="widthFix"
actionUrl="/pages/goods/list" dotCur="bg-mask-40" :seizeHeight="750" />
/>
<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"
/>
<!-- 价格+标题 --> <!-- 价格+标题 -->
<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">
<view class="price-box ss-flex ss-col-bottom"> <view class="price-box ss-flex ss-col-bottom">
<view class="price-text ss-m-r-16"> <view class="price-text ss-m-r-16">
{{ state.selectedSkuPrice.price || formatPrice(state.goodsInfo.price) }} {{ state.selectedSkuPrice.price || formatPrice(state.goodsInfo.price) }}
</view> </view>
<view class="origin-price-text" v-if="state.goodsInfo.original_price > 0"> <view class="origin-price-text" v-if="state.goodsInfo.original_price > 0">
{{ state.selectedSkuPrice.original_price || state.goodsInfo.original_price }} {{ state.selectedSkuPrice.original_price || state.goodsInfo.original_price }}
</view> </view>
</view> </view>
<view class="sales-text"> <view class="sales-text">
{{ formatSales(state.goodsInfo.sales_show_type, state.goodsInfo.sales) }} {{ formatSales(state.goodsInfo.sales_show_type, state.goodsInfo.sales) }}
</view> </view>
</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">
<div class="tag-content"> <div class="tag-content">
<view class="tag-box ss-flex"> <view class="tag-box ss-flex">
<view <view class="tag ss-m-r-10" v-for="promos in state.goodsInfo.promos"
class="tag ss-m-r-10" :key="promos.id" @tap="onActivity">
v-for="promos in state.goodsInfo.promos" {{ promos.title }}
:key="promos.id" </view>
@tap="onActivity" </view>
> </div>
{{ promos.title }}
</view>
</view>
</div>
<view <view class="get-coupon-box ss-flex ss-col-center ss-m-l-20" @tap="state.showModel = true"
class="get-coupon-box ss-flex ss-col-center ss-m-l-20" v-if="state.couponInfo.length">
@tap="state.showModel = true" <view class="discounts-title ss-m-r-8">领券</view>
v-if="state.couponInfo.length" <text class="cicon-forward"></text>
> </view>
<view class="discounts-title ss-m-r-8">领券</view> </view>
<text class="cicon-forward"></text> <view class="title-text ss-line-2 ss-m-b-6">{{ state.goodsInfo.title }}</view>
</view> <view class="subtitle-text ss-line-1">{{ state.goodsInfo.subtitle }}</view>
</view> </view>
<view class="title-text ss-line-2 ss-m-b-6">{{ state.goodsInfo.title }}</view>
<view class="subtitle-text ss-line-1">{{ state.goodsInfo.subtitle }}</view>
</view>
<!-- 功能卡片 --> <!-- 功能卡片 -->
<view class="detail-cell-card detail-card ss-flex-col"> <view class="detail-cell-card detail-card ss-flex-col">
<detail-cell-sku <detail-cell-sku v-model="state.selectedSkuPrice.goods_sku_text" :skus="state.goodsInfo.skus"
v-model="state.selectedSkuPrice.goods_sku_text" @tap="state.showSelectSku = true" />
:skus="state.goodsInfo.skus" <detail-cell-service v-if="state.goodsInfo.service" v-model="state.goodsInfo.service" />
@tap="state.showSelectSku = true" <detail-cell-params v-if="state.goodsInfo.params" v-model="state.goodsInfo.params" />
/> </view>
<detail-cell-service v-if="state.goodsInfo.service" v-model="state.goodsInfo.service" />
<detail-cell-params v-if="state.goodsInfo.params" v-model="state.goodsInfo.params" />
</view>
<!-- 规格与数量弹框 --> <!-- 规格与数量弹框 -->
<s-select-sku <s-select-sku :goodsInfo="state.goodsInfo" :show="state.showSelectSku" @addCart="onAddCart"
:goodsInfo="state.goodsInfo" @buy="onBuy" @change="onSkuChange" @close="state.showSelectSku = false" />
:show="state.showSelectSku" </view>
@addCart="onAddCart"
@buy="onBuy"
@change="onSkuChange"
@close="state.showSelectSku = false"
/>
</view>
<!-- 评价 --> <!-- 评价 -->
<detail-comment-card class="detail-comment-selector" :goodsId="state.goodsId" /> <detail-comment-card class="detail-comment-selector" :goodsId="state.goodsId" />
<!-- 详情 --> <!-- 详情 -->
<detail-content-card class="detail-content-selector" :content="state.goodsInfo.description" /> <detail-content-card class="detail-content-selector" :content="state.goodsInfo.description" />
<!-- 活动跳转 --> <!-- 活动跳转 -->
<detail-activity-tip <detail-activity-tip v-if="state.goodsInfo.activities" :data="state.goodsInfo"></detail-activity-tip>
v-if="state.goodsInfo.activities"
:data="state.goodsInfo"
></detail-activity-tip>
<!-- 详情tabbar --> <!-- 详情tabbar -->
<detail-tabbar v-model="state.goodsInfo"> <detail-tabbar v-model="state.goodsInfo">
<!-- TODO: 缺货中 已售罄 判断 设计--> <!-- TODO: 缺货中 已售罄 判断 设计-->
<view class="buy-box ss-flex ss-col-center ss-p-r-20" v-if="state.goodsInfo.stock > 0"> <view class="buy-box ss-flex ss-col-center ss-p-r-20" v-if="state.goodsInfo.stock > 0">
<button <button class="ss-reset-button add-btn ui-Shadow-Main" @tap="state.showSelectSku = true">
class="ss-reset-button add-btn ui-Shadow-Main" 加入购物车
@tap="state.showSelectSku = true" </button>
> <button class="ss-reset-button buy-btn ui-Shadow-Main" @tap="state.showSelectSku = true">
加入购物车 立即购买
</button> </button>
<button </view>
class="ss-reset-button buy-btn ui-Shadow-Main" <view class="buy-box ss-flex ss-col-center ss-p-r-20" v-else>
@tap="state.showSelectSku = true" <button class="ss-reset-button disabled-btn" disabled> 已售罄 </button>
> </view>
立即购买 </detail-tabbar>
</button> <s-coupon-get v-model="state.couponInfo" :show="state.showModel" @close="state.showModel = false"
</view> @get="onGet" />
<view class="buy-box ss-flex ss-col-center ss-p-r-20" v-else> <s-activity-pop v-model="state.activityInfo" :show="state.showActivityModel"
<button class="ss-reset-button disabled-btn" disabled> 已售罄 </button> @close="state.showActivityModel = false" />
</view> </block>
</detail-tabbar> </s-layout>
<s-coupon-get </view>
v-model="state.couponInfo"
:show="state.showModel"
@close="state.showModel = false"
@get="onGet"
/>
<s-activity-pop
v-model="state.activityInfo"
:show="state.showActivityModel"
@close="state.showActivityModel = false"
/>
</block>
</s-layout>
</view>
</template> </template>
<script setup> <script setup>
import { reactive, computed } from 'vue'; import {
import { onLoad, onPageScroll } from '@dcloudio/uni-app'; reactive,
import sheep from '@/sheep'; computed
import { formatSales, formatGoodsSwiper, formatPrice } from '@/sheep/hooks/useGoods'; } from 'vue';
import detailNavbar from './components/detail/detail-navbar.vue'; import {
import detailCellSku from './components/detail/detail-cell-sku.vue'; onLoad,
import detailCellService from './components/detail/detail-cell-service.vue'; onPageScroll
import detailCellParams from './components/detail/detail-cell-params.vue'; } from '@dcloudio/uni-app';
import detailTabbar from './components/detail/detail-tabbar.vue'; import sheep from '@/sheep';
import detailSkeleton from './components/detail/detail-skeleton.vue'; import {
import detailCommentCard from './components/detail/detail-comment-card.vue'; formatSales,
import detailContentCard from './components/detail/detail-content-card.vue'; formatGoodsSwiper,
import detailActivityTip from './components/detail/detail-activity-tip.vue'; formatPrice
import { isEmpty } from 'lodash'; } from '@/sheep/hooks/useGoods';
import detailNavbar from './components/detail/detail-navbar.vue';
import detailCellSku from './components/detail/detail-cell-sku.vue';
import detailCellService from './components/detail/detail-cell-service.vue';
import detailCellParams from './components/detail/detail-cell-params.vue';
import detailTabbar from './components/detail/detail-tabbar.vue';
import detailSkeleton from './components/detail/detail-skeleton.vue';
import detailCommentCard from './components/detail/detail-comment-card.vue';
import detailContentCard from './components/detail/detail-content-card.vue';
import detailActivityTip from './components/detail/detail-activity-tip.vue';
import {
isEmpty
} from 'lodash';
// import detailActivityTip from './components/detail/detail-activity-tip.vue'; // import detailActivityTip from './components/detail/detail-activity-tip.vue';
// import detailTab from './components/detail/detail-tab.vue'; // import detailTab from './components/detail/detail-tab.vue';
// import detailCoupon from './components/detail/detail-coupon.vue'; // import detailCoupon from './components/detail/detail-coupon.vue';
onPageScroll(() => {}); onPageScroll(() => {});
const state = reactive({ const state = reactive({
goodsId: 0, goodsId: 0,
skeletonLoading: true, skeletonLoading: true,
goodsInfo: {}, goodsInfo: {},
showSelectSku: false, showSelectSku: false,
goodsSwiper: [], goodsSwiper: [],
selectedSkuPrice: {}, selectedSkuPrice: {},
showModel: false, showModel: false,
total: 0, total: 0,
couponInfo: [], couponInfo: [],
showActivityModel: false, showActivityModel: false,
activityInfo: [], activityInfo: [],
}); });
// 规格变更 // 规格变更
function onSkuChange(e) { function onSkuChange(e) {
state.selectedSkuPrice = e; state.selectedSkuPrice = e;
} }
// 添加购物车 // 添加购物车
function onAddCart(e) { function onAddCart(e) {
sheep.$store('cart').add(e); sheep.$store('cart').add(e);
} }
// 立即购买 // 立即购买
function onBuy(e) { function onBuy(e) {
sheep.$router.go('/pages/order/confirm', { sheep.$router.go('/pages/order/confirm', {
data: JSON.stringify({ data: JSON.stringify({
order_type: 'goods', order_type: 'goods',
goods_list: [ goods_list: [{
{ goods_id: e.goods_id,
goods_id: e.goods_id, goods_num: e.goods_num,
goods_num: e.goods_num, goods_sku_price_id: e.id,
goods_sku_price_id: e.id, }, ],
}, }),
], });
}), }
}); //营销活动
} function onActivity() {
//营销活动 state.activityInfo = state.goodsInfo.promos;
function onActivity() { state.showActivityModel = true;
state.activityInfo = state.goodsInfo.promos; }
state.showActivityModel = true;
}
//立即领取 //立即领取
async function onGet(id) { async function onGet(id) {
const { error, msg } = await sheep.$api.coupon.get(id); const {
if (error === 0) { error,
uni.showToast({ msg
title: msg, } = await sheep.$api.coupon.get(id);
}); if (error === 0) {
setTimeout(() => { uni.showToast({
getCoupon(); title: msg,
}, 1000); });
} setTimeout(() => {
} getCoupon();
}, 1000);
}
}
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({
{ title: state.goodsInfo.title,
title: state.goodsInfo.title, image: sheep.$url.cdn(state.goodsInfo.image),
image: sheep.$url.cdn(state.goodsInfo.image), desc: state.goodsInfo.subtitle,
desc: state.goodsInfo.subtitle, params: {
params: { page: '2',
page: '2', query: state.goodsInfo.id,
query: state.goodsInfo.id, },
}, }, {
}, type: 'goods', // 商品海报
{ title: state.goodsInfo.title, // 商品标题
type: 'goods', // 商品海报 image: sheep.$url.cdn(state.goodsInfo.image), // 商品主图
title: state.goodsInfo.title, // 商品标题 price: state.goodsInfo.price[0], // 商品价格
image: sheep.$url.cdn(state.goodsInfo.image), // 商品主图 original_price: state.goodsInfo.original_price, // 商品原价
price: state.goodsInfo.price[0], // 商品价格 }, );
original_price: state.goodsInfo.original_price, // 商品原价 });
},
);
});
onLoad(async (options) => { onLoad(async (options) => {
console.log('页面被访问') console.log('页面被访问')
// 非法参数 // 非法参数
if (!options.id) { if (!options.id) {
state.goodsInfo = null; state.goodsInfo = null;
return; return;
} }
state.goodsId = options.id; state.goodsId = options.id;
// 加载商品信息 // 加载商品信息
sheep.$api.goods.detail(state.goodsId).then((res) => { sheep.$api.goods.detail(state.goodsId).then((res) => {
console.log(res) // 处理数据适配
state.skeletonLoading = false; // let arr = [];
if (res.code === 0) { // res.skus = res.data.skus.map(item => {
// 在此处对数据做出转换 // arr = [...arr, ...item.properties];
res.data.sales=res.data.salesCount // item.children = item.properties;
res.data.original_price=res.data.marketPrice/100 // item.goods_id = res.data.id;
res.data.subtitle=res.data.introduction // item.name = item.children[0].propertyName;
res.data.title=res.data.name // return item;
res.data.price=[res.data.price/100] // })
state.goodsInfo = res.data; // console.log(arr, '合并');
state.goodsSwiper = formatGoodsSwiper(state.goodsInfo.sliderPicUrls); // console.log(res.data, '替换后订单数据');
} else { state.skeletonLoading = false;
// 未找到商品 if (res.code === 0) {
state.goodsInfo = null; // 在此处对数据做出转换
} res.data.sales = res.data.salesCount
}); res.data.original_price = res.data.marketPrice / 100
const { error, data } = await sheep.$api.coupon.listByGoods(state.goodsId); res.data.subtitle = res.data.introduction
if (error === 0) { res.data.title = res.data.name
state.couponInfo = data; res.data.price = [res.data.price / 100]
} state.goodsInfo = res.data;
}); state.goodsSwiper = formatGoodsSwiper(state.goodsInfo.sliderPicUrls);
} else {
// 未找到商品
state.goodsInfo = null;
}
});
const {
error,
data
} = await sheep.$api.coupon.listByGoods(state.goodsId);
if (error === 0) {
state.couponInfo = data;
}
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.detail-card { .detail-card {
background-color: #ffff; background-color: #ffff;
margin: 14rpx 20rpx; margin: 14rpx 20rpx;
border-radius: 10rpx; border-radius: 10rpx;
overflow: hidden; overflow: hidden;
} }
// 价格标题卡片 // 价格标题卡片
.title-card { .title-card {
.price-box { .price-box {
.price-text { .price-text {
font-size: 42rpx; font-size: 42rpx;
font-weight: 500; font-weight: 500;
color: #ff3000; color: #ff3000;
line-height: 30rpx; line-height: 30rpx;
font-family: OPPOSANS; font-family: OPPOSANS;
&::before { &::before {
content: '￥'; content: '￥';
font-size: 30rpx; font-size: 30rpx;
} }
} }
.origin-price-text { .origin-price-text {
font-size: 26rpx; font-size: 26rpx;
font-weight: 400; font-weight: 400;
text-decoration: line-through; text-decoration: line-through;
color: $gray-c; color: $gray-c;
font-family: OPPOSANS; font-family: OPPOSANS;
&::before { &::before {
content: '￥'; content: '￥';
} }
} }
} }
.sales-text { .sales-text {
font-size: 26rpx; font-size: 26rpx;
font-weight: 500; font-weight: 500;
color: $gray-c; color: $gray-c;
} }
.discounts-box { .discounts-box {
.tag-content { .tag-content {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
white-space: nowrap; white-space: nowrap;
} }
.tag-box {
overflow: hidden;
text-overflow: ellipsis;
}
.tag {
flex-shrink: 0;
padding: 4rpx 10rpx;
font-size: 24rpx;
font-weight: 500;
border-radius: 4rpx;
color: var(--ui-BG-Main);
background: var(--ui-BG-Main-tag);
}
.discounts-title { .tag-box {
font-size: 24rpx; overflow: hidden;
font-weight: 500; text-overflow: ellipsis;
color: var(--ui-BG-Main); }
line-height: normal;
}
.cicon-forward { .tag {
color: var(--ui-BG-Main); flex-shrink: 0;
font-size: 24rpx; padding: 4rpx 10rpx;
line-height: normal; font-size: 24rpx;
margin-top: 4rpx; font-weight: 500;
} border-radius: 4rpx;
} color: var(--ui-BG-Main);
background: var(--ui-BG-Main-tag);
}
.title-text { .discounts-title {
font-size: 30rpx; font-size: 24rpx;
font-weight: bold; font-weight: 500;
line-height: 42rpx; color: var(--ui-BG-Main);
} line-height: normal;
}
.subtitle-text { .cicon-forward {
font-size: 26rpx; color: var(--ui-BG-Main);
font-weight: 400; font-size: 24rpx;
color: $dark-9; line-height: normal;
line-height: 42rpx; margin-top: 4rpx;
} }
} }
// 购买 .title-text {
.buy-box { font-size: 30rpx;
.add-btn { font-weight: bold;
width: 214rpx; line-height: 42rpx;
height: 72rpx; }
font-weight: 500;
font-size: 28rpx;
border-radius: 40rpx 0 0 40rpx;
background-color: var(--ui-BG-Main-light);
color: var(--ui-BG-Main);
}
.buy-btn { .subtitle-text {
width: 214rpx; font-size: 26rpx;
height: 72rpx; font-weight: 400;
font-weight: 500; color: $dark-9;
font-size: 28rpx; line-height: 42rpx;
}
}
border-radius: 0 40rpx 40rpx 0; // 购买
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient)); .buy-box {
color: $white; .add-btn {
} width: 214rpx;
.disabled-btn { height: 72rpx;
width: 428rpx; font-weight: 500;
height: 72rpx; font-size: 28rpx;
border-radius: 40rpx; border-radius: 40rpx 0 0 40rpx;
background: #999999; background-color: var(--ui-BG-Main-light);
color: $white; color: var(--ui-BG-Main);
} }
}
.model-box { .buy-btn {
height: 60vh; width: 214rpx;
.model-content { height: 72rpx;
height: 56vh; font-weight: 500;
} font-size: 28rpx;
.title {
font-size: 36rpx;
font-weight: bold;
color: #333333;
}
.subtitle { border-radius: 0 40rpx 40rpx 0;
font-size: 26rpx; background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
font-weight: 500; color: $white;
color: #333333; }
}
} .disabled-btn {
width: 428rpx;
height: 72rpx;
border-radius: 40rpx;
background: #999999;
color: $white;
}
}
.model-box {
height: 60vh;
.model-content {
height: 56vh;
}
.title {
font-size: 36rpx;
font-weight: bold;
color: #333333;
}
.subtitle {
font-size: 26rpx;
font-weight: 500;
color: #333333;
}
}
</style> </style>

371
pages/index/cart.vue
View File

@ -1,207 +1,200 @@
<template> <template>
<s-layout title="购物车" tabbar="/pages/index/cart" :bgStyle="{ color: '#fff' }"> <s-layout title="购物车" tabbar="/pages/index/cart" :bgStyle="{ color: '#fff' }">
<s-empty <s-empty v-if="state.list.length === 0" text="购物车空空如也,快去逛逛吧~" icon="/static/cart-empty.png" />
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">
<view class="cart-header ss-flex ss-col-center ss-row-between ss-p-x-30"> <view class="cart-header ss-flex ss-col-center ss-row-between ss-p-x-30">
<view class="header-left ss-flex ss-col-center ss-font-26"> <view class="header-left ss-flex ss-col-center ss-font-26">
共 共
<text class="goods-number ui-TC-Main ss-flex">{{ state.list.length }}</text> <text class="goods-number ui-TC-Main ss-flex">{{ state.list.length }}</text>
件商品 件商品
</view> </view>
<view class="header-right"> <view class="header-right">
<button v-if="state.editMode" class="ss-reset-button" @tap="state.editMode = false"> <button v-if="state.editMode" class="ss-reset-button" @tap="state.editMode = false">
取消 取消
</button> </button>
<button v-else class="ss-reset-button ui-TC-Main" @tap="state.editMode = true"> <button v-else class="ss-reset-button ui-TC-Main" @tap="state.editMode = true">
编辑 编辑
</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 <radio :checked="state.selectedIds.includes(item.id)" color="var(--ui-BG-Main)"
:checked="state.selectedIds.includes(item.id)" style="transform: scale(0.8)" @tap.stop="onSelectSingle(item.id)" />
color="var(--ui-BG-Main)" </label>
style="transform: scale(0.8)" <s-goods-item :title="item.spu.name" :img="item.spu.picUrl || item.goods.image"
@tap.stop="onSelectSingle(item.id)" :price="item.sku.price/100"
/> :skuText="item.sku.properties.length>1? item.sku.properties.reduce((items2,items)=>items2.valueName+' '+items.valueName):item.sku.properties[0].valueName"
</label> priceColor="#FF3000" :titleWidth="400">
<s-goods-item <template v-if="!state.editMode" v-slot:tool>
:title="item.spu.name" <su-number-box :min="0" :max="item.sku.stock" :step="1" v-model="item.count"
:img="item.spu.picUrl || item.goods.image" @change="onNumberChange($event, item)"></su-number-box>
:price="item.sku.price/100" </template>
:skuText="item.sku.properties.length>1? item.sku.properties.reduce((items2,items)=>items2.valueName+' '+items.valueName):item.sku.properties[0].valueName" </s-goods-item>
priceColor="#FF3000" </view>
:titleWidth="400" </view>
> </view>
<template v-if="!state.editMode" v-slot:tool> <!-- 底部 -->
<su-number-box <su-fixed bottom :val="48" placeholder v-if="state.list.length > 0" :isInset="false">
:min="0" <view class="cart-footer ss-flex ss-col-center ss-row-between ss-p-x-30 border-bottom">
:max="item.sku.stock" <view class="footer-left ss-flex ss-col-center">
:step="1" <label class="check-box ss-flex ss-col-center ss-p-r-30" @tap="onSelectAll">
v-model="item.count" <radio :checked="state.isAllSelected" color="var(--ui-BG-Main)"
@change="onNumberChange($event, item)" style="transform: scale(0.8)" @tap.stop="onSelectAll" />
></su-number-box> <view class="ss-m-l-8"> 全选 </view>
</template> </label>
</s-goods-item> <text>合计：</text>
</view> <view class="text-price price-text">
</view> {{ state.totalPriceSelected }}
</view> </view>
<!-- 底部 --> </view>
<su-fixed bottom :val="48" placeholder v-if="state.list.length > 0" :isInset="false"> <view class="footer-right">
<view class="cart-footer ss-flex ss-col-center ss-row-between ss-p-x-30 border-bottom"> <button v-if="state.editMode" class="ss-reset-button ui-BG-Main-Gradient pay-btn ui-Shadow-Main"
<view class="footer-left ss-flex ss-col-center"> @tap="onDelete">
<label class="check-box ss-flex ss-col-center ss-p-r-30" @tap="onSelectAll"> 删除
<radio </button>
:checked="state.isAllSelected" <button v-else class="ss-reset-button ui-BG-Main-Gradient pay-btn ui-Shadow-Main"
color="var(--ui-BG-Main)" @tap="onConfirm">
style="transform: scale(0.8)" 去结算
@tap.stop="onSelectAll" {{ state.selectedIds?.length ? `(${state.selectedIds.length})` : '' }}
/> </button>
<view class="ss-m-l-8"> 全选 </view> </view>
</label> </view>
<text>合计：</text> </su-fixed>
<view class="text-price price-text"> </view>
{{ state.totalPriceSelected }} </s-layout>
</view>
</view>
<view class="footer-right">
<button
v-if="state.editMode"
class="ss-reset-button ui-BG-Main-Gradient pay-btn ui-Shadow-Main"
@tap="onDelete"
>
删除
</button>
<button
v-else
class="ss-reset-button ui-BG-Main-Gradient pay-btn ui-Shadow-Main"
@tap="onConfirm"
>
去结算
{{ state.selectedIds?.length ? `(${state.selectedIds.length})` : '' }}
</button>
</view>
</view>
</su-fixed>
</view>
</s-layout>
</template> </template>
<script setup> <script setup>
import sheep from '@/sheep'; import sheep from '@/sheep';
import { computed, reactive, unref } from 'vue'; import {
computed,
reactive,
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: [], 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('单选') console.log('单选')
cart.selectSingle(id); cart.selectSingle(id);
} }
// 全选 // 全选
function onSelectAll() { function onSelectAll() {
cart.selectAll(!state.isAllSelected); cart.selectAll(!state.isAllSelected);
} }
// 结算 // 结算
function onConfirm() { function onConfirm() {
let goods_list = []; let items = []
state.selectedList = state.list.filter((item) => state.selectedIds.includes(item.id)); let goods_list = [];
state.selectedList.map((item) => { state.selectedList = state.list.filter((item) => state.selectedIds.includes(item.id));
goods_list.push({ state.selectedList.map((item) => {
goods_id: item.goods_id, console.log(item, '便利');
goods_num: item.goods_num, // 此处前端做出修改
goods_sku_price_id: item.goods_sku_price_id, items.push({
}); skuId: item.sku.id,
}); count: item.count,
if (goods_list.length === 0) { cartId: item.id,
sheep.$helper.toast('请选择商品'); })
return; goods_list.push({
} // goods_id: item.goods_id,
sheep.$router.go('/pages/order/confirm', { goods_id: item.spu.id,
data: JSON.stringify({ // goods_num: item.goods_num,
order_type: 'goods', goods_num: item.count,
goods_list, // 商品价格id真没有
from: 'cart', // goods_sku_price_id: item.goods_sku_price_id,
}), });
}); });
} // return;
if (goods_list.length === 0) {
sheep.$helper.toast('请选择商品');
return;
}
sheep.$router.go('/pages/order/confirm', {
data: JSON.stringify({
// order_type: 'goods',
// goods_list,
items,
// from: 'cart',
deliveryType: 1,
pointStatus: false,
}),
});
}
function onNumberChange(e, cartItem) { function onNumberChange(e, cartItem) {
if (e === 0) { if (e === 0) {
cart.delete(cartItem.id); cart.delete(cartItem.id);
return; return;
} }
if(cartItem.goods_num === e) return; if (cartItem.goods_num === e) return;
cartItem.goods_num = e; cartItem.goods_num = e;
cart.update({ cart.update({
goods_id: cartItem.id, goods_id: cartItem.id,
goods_num: e, goods_num: e,
goods_sku_price_id: cartItem.goods_sku_price_id, goods_sku_price_id: cartItem.goods_sku_price_id,
}); });
} }
async function onDelete() { async function onDelete() {
cart.delete(state.selectedIds); cart.delete(state.selectedIds);
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
:deep(.ui-fixed) { :deep(.ui-fixed) {
height: 72rpx; height: 72rpx;
} }
.cart-box { .cart-box {
width: 100%; width: 100%;
.cart-header { .cart-header {
height: 70rpx; height: 70rpx;
background-color: #f6f6f6; background-color: #f6f6f6;
width: 100%; width: 100%;
position: fixed; position: fixed;
left: 0; left: 0;
top: v-bind('sys_navBar') rpx; top: v-bind('sys_navBar') rpx;
z-index: 1000; z-index: 1000;
box-sizing: border-box; box-sizing: border-box;
} }
.cart-footer { .cart-footer {
height: 100rpx; height: 100rpx;
background-color: #fff; background-color: #fff;
.pay-btn { .pay-btn {
width: 180rpx; width: 180rpx;
height: 70rpx; height: 70rpx;
font-size: 28rpx; font-size: 28rpx;
line-height: 28rpx; line-height: 28rpx;
font-weight: 500; font-weight: 500;
border-radius: 40rpx; border-radius: 40rpx;
} }
} }
.cart-content { .cart-content {
margin-top: 70rpx; margin-top: 70rpx;
.goods-box {
background-color: #fff; .goods-box {
} background-color: #fff;
} }
} }
}
</style> </style>

5
pages/index/index.vue
View File

@ -22,17 +22,18 @@
} from '@dcloudio/uni-app'; } from '@dcloudio/uni-app';
import sheep from '@/sheep'; import sheep from '@/sheep';
import $share from '@/sheep/platform/share'; import $share from '@/sheep/platform/share';
import index2Api from '@/sheep/api/index2'
// 隐藏原生tabBar // 隐藏原生tabBar
uni.hideTabBar(); uni.hideTabBar();
const template = computed(() => sheep.$store('app').template?.home); const template = computed(() => sheep.$store('app').template?.home);
// 在此处拦截改变一下首页轮播图 此处先写死后期复活 放到启动函数里 // 在此处拦截改变一下首页轮播图 此处先写死后期复活 放到启动函数里
(async function() { (async function() {
console.log('原代码首页定制化数据',template) console.log('原代码首页定制化数据', template)
let { let {
data data
} = await index2Api.decorate(); } = await index2Api.decorate();
console.log('首页导航配置化过高无法兼容',JSON.parse(data[1].value)) console.log('首页导航配置化过高无法兼容', JSON.parse(data[1].value))
// 改变首页底部数据 但是没有通过数组id获取商品数据接口 // 改变首页底部数据 但是没有通过数组id获取商品数据接口
// let { // let {
// data: datas // data: datas

755
pages/order/confirm.vue
View File

@ -1,419 +1,414 @@
<template> <template>
<s-layout title="确认订单"> <s-layout title="确认订单">
<view <!-- v-if="state.orderInfo.need_address === 1" -->
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">
v-if="state.orderInfo.need_address === 1" <s-address-item :item="state.addressInfo" :hasBorderBottom="false">
> <view class="ss-rest-button"><text class="_icon-forward"></text></view>
<s-address-item :item="state.addressInfo" :hasBorderBottom="false"> </s-address-item>
<view class="ss-rest-button"><text class="_icon-forward"></text></view> </view>
</s-address-item> <view class="order-card-box ss-m-b-14">
</view> <s-goods-item v-for="item in state.orderInfo.goods_list" :key="item.goods_id"
<view class="order-card-box ss-m-b-14"> :img="item.current_sku_price.image || item.goods.image" :title="item.goods.title"
<s-goods-item :skuText="item.current_sku_price?.goods_sku_text" :price="item.current_sku_price.price"
v-for="item in state.orderInfo.goods_list" :num="item.goods_num" marginBottom="10">
:key="item.goods_id" <template #top>
:img="item.current_sku_price.image || item.goods.image" <view class="order-item ss-flex ss-col-center ss-row-between ss-p-x-20 bg-white">
:title="item.goods.title" <view class="item-title">配送方式</view>
:skuText="item.current_sku_price?.goods_sku_text" <view class="ss-flex ss-col-center">
:price="item.current_sku_price.price" <text class="item-value">{{ item.dispatch_type_text }}</text>
:num="item.goods_num" </view>
marginBottom="10" </view>
> </template>
<template #top> </s-goods-item>
<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-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 <uni-easyinput maxlength="20" placeholder="建议留言前先与商家沟通" v-model="state.orderPayload.remark"
maxlength="20" :inputBorder="false" :clearable="false"></uni-easyinput>
placeholder="建议留言前先与商家沟通" </view>
v-model="state.orderPayload.remark" </view>
:inputBorder="false" </view>
:clearable="false" <!-- 合计 -->
></uni-easyinput> <view class="bg-white total-card-box ss-p-20 ss-m-b-14 ss-r-10">
</view> <view class="total-box-content border-bottom">
</view> <view class="order-item ss-flex ss-col-center ss-row-between">
</view> <view class="item-title">商品金额</view>
<!-- 合计 --> <view class="ss-flex ss-col-center">
<view class="bg-white total-card-box ss-p-20 ss-m-b-14 ss-r-10"> <text class="item-value ss-m-r-24">￥{{ state.orderInfo.goods_amount }}</text>
<view class="total-box-content border-bottom"> </view>
<view class="order-item ss-flex ss-col-center ss-row-between"> </view>
<view class="item-title">商品金额</view> <view class="order-item ss-flex ss-col-center ss-row-between"
<view class="ss-flex ss-col-center"> v-if="state.orderPayload.order_type === 'score'">
<text class="item-value ss-m-r-24">￥{{ state.orderInfo.goods_amount }}</text> <view class="item-title">扣除积分</view>
</view> <view class="ss-flex ss-col-center">
</view> <image :src="sheep.$url.static('/static/img/shop/goods/score1.svg')" class="score-img"></image>
<view <text class="item-value ss-m-r-24">{{ state.orderInfo.score_amount }}</text>
class="order-item ss-flex ss-col-center ss-row-between" </view>
v-if="state.orderPayload.order_type === 'score'" </view>
> <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">
<image <text class="item-value ss-m-r-24">+￥{{ state.orderInfo.dispatch_amount }}</text>
:src="sheep.$url.static('/static/img/shop/goods/score1.svg')" </view>
class="score-img" </view>
></image> <view class="order-item ss-flex ss-col-center ss-row-between"
<text class="item-value ss-m-r-24">{{ state.orderInfo.score_amount }}</text> 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"> -->
</view> <view class="item-title">优惠券</view>
<view class="order-item ss-flex ss-col-center ss-row-between"> <view class="ss-flex ss-col-center" @tap="state.showCoupon = true">
<view class="item-title">运费</view> <text class="item-value text-red"
<view class="ss-flex ss-col-center"> v-if="state.orderPayload.coupon_id">-￥{{ state.orderInfo.coupon_discount_fee }}</text>
<text class="item-value ss-m-r-24">+￥{{ state.orderInfo.dispatch_amount }}</text> <text class="item-value"
</view> :class="state.couponInfo.can_use?.length > 0 ? 'text-red' : 'text-disabled'" v-else>{{
</view>
<view
class="order-item ss-flex ss-col-center ss-row-between"
v-if="state.orderPayload.order_type != 'score'"
>
<!-- <view v-if="state.orderInfo.coupon_discount_fee > 0" class="order-item ss-flex ss-col-center ss-row-between"> -->
<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.coupon_id"
>-￥{{ state.orderInfo.coupon_discount_fee }}</text
>
<text
class="item-value"
:class="state.couponInfo.can_use?.length > 0 ? 'text-red' : 'text-disabled'"
v-else
>{{
state.couponInfo.can_use?.length > 0 state.couponInfo.can_use?.length > 0
? state.couponInfo.can_use?.length + '张可用' ? state.couponInfo.can_use?.length + '张可用'
: '暂无可用优惠券' : '暂无可用优惠券'
}}</text }}</text>
>
<text class="_icon-forward item-icon"></text> <text class="_icon-forward item-icon"></text>
</view> </view>
</view> </view>
<view <view 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.promo_infos?.length">
v-if="state.orderInfo.promo_infos?.length" <!-- <view v-if="state.orderInfo.promo_discount_fee > 0" class="order-item ss-flex ss-col-center ss-row-between"> -->
> <view class="item-title">活动优惠</view>
<!-- <view v-if="state.orderInfo.promo_discount_fee > 0" class="order-item ss-flex ss-col-center ss-row-between"> --> <view class="ss-flex ss-col-center" @tap="state.showDiscount = true">
<view class="item-title">活动优惠</view> <text class="item-value text-red"> -￥{{ state.orderInfo.promo_discount_fee }} </text>
<view class="ss-flex ss-col-center" @tap="state.showDiscount = true"> <text class="_icon-forward item-icon"></text>
<text class="item-value text-red"> -￥{{ state.orderInfo.promo_discount_fee }} </text> </view>
<text class="_icon-forward item-icon"></text> </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> <view class="total-num ss-m-r-20">共{{ state.totalNumber }}件</view>
<view class="total-box-footer ss-font-28 ss-flex ss-row-right ss-col-center ss-m-r-28"> <view>合计：</view>
<view class="total-num ss-m-r-20">共{{ state.totalNumber }}件</view> <view class="total-num text-red"> ￥{{ state.orderInfo.pay_fee }} </view>
<view>合计：</view> <view class="ss-flex" v-if="state.orderPayload.order_type === 'score'">
<view class="total-num text-red"> ￥{{ state.orderInfo.pay_fee }} </view> <view class="total-num ss-font-30 text-red ss-m-l-4"> + </view>
<view class="ss-flex" v-if="state.orderPayload.order_type === 'score'"> <image :src="sheep.$url.static('/static/img/shop/goods/score1.svg')" class="score-img"></image>
<view class="total-num ss-font-30 text-red ss-m-l-4"> + </view> <view class="total-num ss-font-30 text-red">{{ state.orderInfo.score_amount }}</view>
<image </view>
:src="sheep.$url.static('/static/img/shop/goods/score1.svg')" </view>
class="score-img" </view>
></image> <!-- 发票 -->
<view class="total-num ss-font-30 text-red">{{ state.orderInfo.score_amount }}</view> <view class="bg-white ss-p-20 ss-r-20">
</view> <view class="order-item ss-flex ss-col-center ss-row-between">
</view> <view class="item-title">发票申请</view>
</view> <view class="ss-flex ss-col-center" @tap="onSelectInvoice">
<!-- 发票 --> <text class="item-value">{{ state.invoiceInfo.name || '无需开具发票' }}</text>
<view class="bg-white ss-p-20 ss-r-20"> <text class="_icon-forward item-icon"></text>
<view class="order-item ss-flex ss-col-center ss-row-between"> </view>
<view class="item-title">发票申请</view> </view>
<view class="ss-flex ss-col-center" @tap="onSelectInvoice"> </view>
<text class="item-value">{{ state.invoiceInfo.name || '无需开具发票' }}</text> <!-- 选择优惠券弹框 -->
<text class="_icon-forward item-icon"></text> <s-coupon-select v-model="state.couponInfo" :show="state.showCoupon" @confirm="onSelectCoupon"
</view> @close="state.showCoupon = false" />
</view> <!-- 满额折扣弹框 -->
</view> <s-discount-list v-model="state.orderInfo" :show="state.showDiscount" @close="state.showDiscount = false" />
<!-- 选择优惠券弹框 --> <!-- 底部 -->
<s-coupon-select <su-fixed bottom :opacity="false" bg="bg-white" placeholder :noFixed="false" :index="200">
v-model="state.couponInfo" <view class="footer-box border-top ss-flex ss-row-between ss-p-x-20 ss-col-center">
:show="state.showCoupon" <view class="total-box-footer ss-flex ss-col-center">
@confirm="onSelectCoupon" <view class="total-num ss-font-30 text-red"> ￥{{ state.orderInfo.pay_fee }} </view>
@close="state.showCoupon = false" <view v-if="state.orderPayload.order_type === 'score'" class="ss-flex">
/> <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>
<s-discount-list <view class="total-num ss-font-30 text-red">{{ state.orderInfo.score_amount }}</view>
v-model="state.orderInfo" </view>
:show="state.showDiscount" </view>
@close="state.showDiscount = false"
/>
<!-- 底部 -->
<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="total-box-footer ss-flex ss-col-center">
<view class="total-num ss-font-30 text-red"> ￥{{ state.orderInfo.pay_fee }} </view>
<view v-if="state.orderPayload.order_type === 'score'" class="ss-flex">
<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>
<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>
> </view>
{{ exchangeNow ? '立即兑换' : '提交订单' }} </su-fixed>
</button> </s-layout>
</view>
</su-fixed>
</s-layout>
</template> </template>
<script setup> <script setup>
import { reactive, computed } from 'vue'; import {
import { onLoad, onPageScroll, onShow } from '@dcloudio/uni-app'; reactive,
import sheep from '@/sheep'; computed
import { isEmpty } from 'lodash'; } from 'vue';
import {
onLoad,
onPageScroll,
onShow
} from '@dcloudio/uni-app';
import sheep from '@/sheep';
import {
isEmpty
} from 'lodash';
const state = reactive({ const state = reactive({
orderPayload: {}, orderPayload: {},
orderInfo: {}, orderInfo: {},
addressInfo: {}, addressInfo: {},
invoiceInfo: {}, invoiceInfo: {},
totalNumber: 0, totalNumber: 0,
showCoupon: false, showCoupon: false,
couponInfo: [], couponInfo: [],
showDiscount: false, showDiscount: false,
}); });
// 立即兑换(立即兑换无需跳转收银台) // 立即兑换(立即兑换无需跳转收银台)
const exchangeNow = computed( const exchangeNow = computed(
() => state.orderPayload.order_type === 'score' && state.orderInfo.pay_fee == 0, () => state.orderPayload.order_type === 'score' && state.orderInfo.pay_fee == 0,
); );
// 选择地址 // 选择地址
function onSelectAddress() { function onSelectAddress() {
uni.$once('SELECT_ADDRESS', (e) => { uni.$once('SELECT_ADDRESS', (e) => {
changeConsignee(e.addressInfo); changeConsignee(e.addressInfo);
}); });
sheep.$router.go('/pages/user/address/list'); sheep.$router.go('/pages/user/address/list');
} }
// 更改收货人地址&计算订单信息 // 更改收货人地址&计算订单信息
async function changeConsignee(addressInfo = {}) { async function changeConsignee(addressInfo = {}) {
if (isEmpty(addressInfo)) { if (isEmpty(addressInfo)) {
const { error, data } = await sheep.$api.user.address.default(); const {
if (error === 0 && !isEmpty(data)) { code,
addressInfo = data; data
} } = await sheep.$api.user.address.default();
} console.log(data, '默认收货地址');
if (!isEmpty(addressInfo)) { if (code === 0 && !isEmpty(data)) {
state.addressInfo = addressInfo; console.log('执行赋值')
state.orderPayload.address_id = state.addressInfo.id; addressInfo = data;
} }
getOrderInfo(); }
} if (!isEmpty(addressInfo)) {
state.addressInfo = addressInfo;
state.orderPayload.address_id = state.addressInfo.id;
}
getOrderInfo();
}
// 选择优惠券 // 选择优惠券
async function onSelectCoupon(e) { async function onSelectCoupon(e) {
state.orderPayload.coupon_id = e || 0; state.orderPayload.coupon_id = e || 0;
getOrderInfo(); getOrderInfo();
state.showCoupon = false; state.showCoupon = false;
} }
// 选择发票信息 // 选择发票信息
function onSelectInvoice() { function onSelectInvoice() {
uni.$once('SELECT_INVOICE', (e) => { uni.$once('SELECT_INVOICE', (e) => {
state.invoiceInfo = e.invoiceInfo; state.invoiceInfo = e.invoiceInfo;
state.orderPayload.invoice_id = e.invoiceInfo.id || 0; state.orderPayload.invoice_id = e.invoiceInfo.id || 0;
}); });
sheep.$router.go('/pages/user/invoice/list'); sheep.$router.go('/pages/user/invoice/list');
} }
// 提交订单/立即兑换 // 提交订单/立即兑换
function onConfirm() { function onConfirm() {
if (!state.orderPayload.address_id && state.orderInfo.need_address === 1) { if (!state.orderPayload.address_id && state.orderInfo.need_address === 1) {
sheep.$helper.toast('请选择收货地址'); sheep.$helper.toast('请选择收货地址');
return; return;
} }
if (exchangeNow.value) { if (exchangeNow.value) {
uni.showModal({ uni.showModal({
title: '提示', title: '提示',
content: '确定使用积分立即兑换?', content: '确定使用积分立即兑换?',
cancelText: '再想想', cancelText: '再想想',
success: async function (res) { success: async function(res) {
if (res.confirm) { if (res.confirm) {
submitOrder(); submitOrder();
} }
}, },
}); });
} else { } else {
submitOrder(); submitOrder();
} }
} }
// 创建订单&跳转 // 创建订单&跳转
async function submitOrder() { async function submitOrder() {
const { error, data } = await sheep.$api.order.create(state.orderPayload); const {
if (error === 0) { error,
// 更新购物车列表 data
if (state.orderPayload.from === 'cart') { } = await sheep.$api.order.create(state.orderPayload);
sheep.$store('cart').getList(); if (error === 0) {
} // 更新购物车列表
if (exchangeNow.value) { if (state.orderPayload.from === 'cart') {
sheep.$router.redirect('/pages/pay/result', { sheep.$store('cart').getList();
orderSN: data.order_sn, }
}); if (exchangeNow.value) {
} else { sheep.$router.redirect('/pages/pay/result', {
sheep.$router.redirect('/pages/pay/index', { orderSN: data.order_sn,
orderSN: data.order_sn, });
}); } else {
} sheep.$router.redirect('/pages/pay/index', {
} orderSN: data.order_sn,
} });
}
}
}
// 检查库存&计算订单价格 // 检查库存&计算订单价格
async function getOrderInfo() { async function getOrderInfo() {
let { error, data } = await sheep.$api.order.calc(state.orderPayload); console.log(state.orderPayload, '计算价格传参')
if (error === 0) { // let {code, data} = await sheep.$api.order.calc(state.orderPayload);
state.totalNumber = 0; // let data = await sheep.$api.order.calc(state.orderPayload);
state.orderInfo = data; console.log(state.orderPayload.items)
state.orderInfo.goods_list.forEach((item) => { let data = await sheep.$api.order.calc({
state.totalNumber += item.goods_num; deliveryType: 1,
}); pointStatus: false,
} items: state.orderPayload.items
} });
console.log(data, '修改后的获取订单详细数据')
return;
if (error === 0) {
state.totalNumber = 0;
state.orderInfo = data;
state.orderInfo.goods_list.forEach((item) => {
state.totalNumber += item.goods_num;
});
}
}
// 获取可用优惠券 // 获取可用优惠券
async function getCoupons() { async function getCoupons() {
const { error, data } = await sheep.$api.order.coupons(state.orderPayload); const {
if (error === 0) { error,
state.couponInfo = data; data
} } = await sheep.$api.order.coupons(state.orderPayload);
} if (error === 0) {
state.couponInfo = data;
}
}
onLoad(async (options) => { onLoad(async (options) => {
if (options.data) { console.log(options)
state.orderPayload = JSON.parse(options.data); if (options.data) {
changeConsignee(); state.orderPayload = JSON.parse(options.data);
if (state.orderPayload.order_type !== 'score') { changeConsignee();
getCoupons(); if (state.orderPayload.order_type !== 'score') {
} getCoupons();
} }
}); }
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
:deep() { :deep() {
.uni-input-wrapper { .uni-input-wrapper {
width: 320rpx; width: 320rpx;
} }
.uni-easyinput__content-input { .uni-easyinput__content-input {
font-size: 28rpx; font-size: 28rpx;
height: 72rpx; height: 72rpx;
text-align: right !important; text-align: right !important;
padding-right: 0 !important; padding-right: 0 !important;
.uni-input-input { .uni-input-input {
font-weight: 500; font-weight: 500;
color: #333333; color: #333333;
font-size: 26rpx; font-size: 26rpx;
height: 32rpx; height: 32rpx;
margin-top: 4rpx; margin-top: 4rpx;
} }
} }
.uni-easyinput__content {
display: flex !important;
align-items: center !important;
justify-content: right !important;
}
}
.score-img {
width: 36rpx;
height: 36rpx;
margin: 0 4rpx;
}
.order-item {
height: 80rpx;
.item-title { .uni-easyinput__content {
font-size: 28rpx; display: flex !important;
font-weight: 400; align-items: center !important;
} justify-content: right !important;
}
}
.item-value { .score-img {
font-size: 28rpx; width: 36rpx;
font-weight: 500; height: 36rpx;
font-family: OPPOSANS; margin: 0 4rpx;
} }
.text-disabled {
color: #bbbbbb;
}
.item-icon { .order-item {
color: $dark-9; height: 80rpx;
}
.remark-input { .item-title {
text-align: right; font-size: 28rpx;
} font-weight: 400;
}
.item-placeholder { .item-value {
color: $dark-9; font-size: 28rpx;
font-size: 26rpx; font-weight: 500;
text-align: right; font-family: OPPOSANS;
} }
}
.total-box-footer { .text-disabled {
height: 90rpx; color: #bbbbbb;
}
.total-num { .item-icon {
color: #333333; color: $dark-9;
font-family: OPPOSANS; }
}
}
.footer-box { .remark-input {
height: 100rpx; text-align: right;
}
.submit-btn { .item-placeholder {
width: 240rpx; color: $dark-9;
height: 70rpx; font-size: 26rpx;
font-size: 28rpx; text-align: right;
font-weight: 500; }
}
.goto-pay-text { .total-box-footer {
line-height: 28rpx; height: 90rpx;
}
}
.cancel-btn { .total-num {
width: 240rpx; color: #333333;
height: 80rpx; font-family: OPPOSANS;
font-size: 26rpx; }
background-color: #e5e5e5; }
color: $dark-9;
} .footer-box {
} height: 100rpx;
.title {
font-size: 36rpx; .submit-btn {
font-weight: bold; width: 240rpx;
color: #333333; height: 70rpx;
} font-size: 28rpx;
.subtitle { font-weight: 500;
font-size: 28rpx;
color: #999999; .goto-pay-text {
} line-height: 28rpx;
.cicon-checkbox { }
font-size: 36rpx; }
color: var(--ui-BG-Main);
} .cancel-btn {
.cicon-box { width: 240rpx;
font-size: 36rpx; height: 80rpx;
color: #999999; font-size: 26rpx;
} background-color: #e5e5e5;
color: $dark-9;
}
}
.title {
font-size: 36rpx;
font-weight: bold;
color: #333333;
}
.subtitle {
font-size: 28rpx;
color: #999999;
}
.cicon-checkbox {
font-size: 36rpx;
color: var(--ui-BG-Main);
}
.cicon-box {
font-size: 36rpx;
color: #999999;
}
</style> </style>

270
pages/user/address/list.vue
View File

@ -1,153 +1,147 @@
<template> <template>
<s-layout title="收货地址" :bgStyle="{ color: '#FFF' }"> <s-layout title="收货地址" :bgStyle="{ color: '#FFF' }">
<view v-if="state.list.length"> <view v-if="state.list.length">
<s-address-item <s-address-item hasBorderBottom v-for="item in state.list" :key="item.id" :item="item"
hasBorderBottom @tap="onSelect(item)">
v-for="item in state.list" </s-address-item>
:key="item.id" </view>
:item="item"
@tap="onSelect(item)"
>
</s-address-item>
</view>
<su-fixed bottom placeholder> <su-fixed bottom placeholder>
<view class="footer-box ss-flex ss-row-between ss-p-20"> <view class="footer-box ss-flex ss-row-between ss-p-20">
<!-- 微信小程序和微信H5 --> <!-- 微信小程序和微信H5 -->
<button <button v-if="['WechatMiniProgram', 'WechatOfficialAccount'].includes(sheep.$platform.name)"
v-if="['WechatMiniProgram', 'WechatOfficialAccount'].includes(sheep.$platform.name)" @tap="importWechatAddress"
@tap="importWechatAddress" class="border ss-reset-button sync-wxaddress ss-m-20 ss-flex ss-row-center ss-col-center">
class="border ss-reset-button sync-wxaddress ss-m-20 ss-flex ss-row-center ss-col-center" <text class="cicon-weixin ss-p-r-10" style="color: #09bb07; font-size: 40rpx"></text>
> 导入微信地址
<text class="cicon-weixin ss-p-r-10" style="color: #09bb07; font-size: 40rpx"></text> </button>
导入微信地址 <button class="add-btn ss-reset-button ui-Shadow-Main"
</button> @tap="sheep.$router.go('/pages/user/address/edit')">
<button 新增收货地址
class="add-btn ss-reset-button ui-Shadow-Main" </button>
@tap="sheep.$router.go('/pages/user/address/edit')" </view>
> </su-fixed>
新增收货地址 <s-empty v-if="state.list.length === 0 && !state.loading" text="暂无收货地址" icon="/static/data-empty.png" />
</button> </s-layout>
</view>
</su-fixed>
<s-empty
v-if="state.list.length === 0 && !state.loading"
text="暂无收货地址"
icon="/static/data-empty.png"
/>
</s-layout>
</template> </template>
<script setup> <script setup>
import { reactive, onBeforeMount } from 'vue'; import {
import { onShow } from '@dcloudio/uni-app'; reactive,
import sheep from '@/sheep'; onBeforeMount
import { isEmpty } from 'lodash'; } from 'vue';
import {
onShow
} from '@dcloudio/uni-app';
import sheep from '@/sheep';
import {
isEmpty
} from 'lodash';
const state = reactive({ const state = reactive({
list: [], list: [],
loading: true, loading: true,
}); });
// 选择收货地址 // 选择收货地址
const onSelect = (addressInfo) => { const onSelect = (addressInfo) => {
uni.$emit('SELECT_ADDRESS', { uni.$emit('SELECT_ADDRESS', {
addressInfo, addressInfo,
}); });
sheep.$router.back(); sheep.$router.back();
}; };
// 导入微信地址 // 导入微信地址
function importWechatAddress() { function importWechatAddress() {
let wechatAddress = {}; let wechatAddress = {};
// #ifdef MP // #ifdef MP
uni.chooseAddress({ uni.chooseAddress({
success: (res) => { success: (res) => {
wechatAddress = { wechatAddress = {
consignee: res.userName, consignee: res.userName,
mobile: res.telNumber, mobile: res.telNumber,
province_name: res.provinceName, province_name: res.provinceName,
city_name: res.cityName, city_name: res.cityName,
district_name: res.countyName, district_name: res.countyName,
address: res.detailInfo, address: res.detailInfo,
region: '', region: '',
is_default: false, is_default: false,
}; };
if (!isEmpty(wechatAddress)) { if (!isEmpty(wechatAddress)) {
sheep.$router.go('/pages/user/address/edit', { sheep.$router.go('/pages/user/address/edit', {
data: JSON.stringify(wechatAddress), data: JSON.stringify(wechatAddress),
}); });
} }
}, },
fail: (err) => { fail: (err) => {
console.log('%cuni.chooseAddress,调用失败', 'color:green;background:yellow'); console.log('%cuni.chooseAddress,调用失败', 'color:green;background:yellow');
}, },
}); });
// #endif // #endif
// #ifdef H5 // #ifdef H5
sheep.$platform.useProvider('wechat').jssdk.openAddress({ sheep.$platform.useProvider('wechat').jssdk.openAddress({
success: (res) => { success: (res) => {
wechatAddress = { wechatAddress = {
consignee: res.userName, consignee: res.userName,
mobile: res.telNumber, mobile: res.telNumber,
province_name: res.provinceName, province_name: res.provinceName,
city_name: res.cityName, city_name: res.cityName,
district_name: res.countryName, district_name: res.countryName,
address: res.detailInfo, address: res.detailInfo,
region: '', region: '',
is_default: false, is_default: false,
}; };
if (!isEmpty(wechatAddress)) { if (!isEmpty(wechatAddress)) {
sheep.$router.go('/pages/user/address/edit', { sheep.$router.go('/pages/user/address/edit', {
data: JSON.stringify(wechatAddress), data: JSON.stringify(wechatAddress),
}); });
} }
}, },
}); });
// #endif // #endif
} }
onShow(async () => { onShow(async () => {
state.list = (await sheep.$api.user.address.list()).data; state.list = (await sheep.$api.user.address.list()).data;
state.loading = false; state.loading = false;
}); });
onBeforeMount(() => { onBeforeMount(() => {
if (!!uni.getStorageSync('areaData')) { if (!!uni.getStorageSync('areaData')) {
return; return;
} }
// 提前加载省市区数据 // 提前加载省市区数据
sheep.$api.data.area().then((res) => { sheep.$api.data.area().then((res) => {
if (res.error === 0) { if (res.error === 0) {
uni.setStorageSync('areaData', res.data); uni.setStorageSync('areaData', res.data);
} }
}); });
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.footer-box { .footer-box {
.add-btn { .add-btn {
flex: 1; flex: 1;
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient)); background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
border-radius: 80rpx; border-radius: 80rpx;
font-size: 30rpx; font-size: 30rpx;
font-weight: 500; font-weight: 500;
line-height: 80rpx; line-height: 80rpx;
color: $white; color: $white;
position: relative; position: relative;
z-index: 1; z-index: 1;
} }
.sync-wxaddress { .sync-wxaddress {
flex: 1; flex: 1;
line-height: 80rpx; line-height: 80rpx;
background: $white; background: $white;
border-radius: 80rpx; border-radius: 80rpx;
font-size: 30rpx; font-size: 30rpx;
font-weight: 500; font-weight: 500;
color: $dark-6; color: $dark-6;
margin-right: 18rpx; margin-right: 18rpx;
} }
} }
</style> </style>

74
sheep/api/cart.js
View File

@ -2,41 +2,41 @@ import request from '@/sheep/request';
import request2 from '@/sheep/request2'; import request2 from '@/sheep/request2';
export default { export default {
list: (data) => list: (data) =>
request2({ request2({
url: 'trade/cart/list', url: 'trade/cart/list',
method: 'GET', method: 'GET',
custom: { custom: {
showLoading: false, showLoading: false,
auth: true, auth: true,
}, },
}), }),
append: (data) => append: (data) =>
request({ request({
url: 'cart', url: 'cart',
method: 'POST', method: 'POST',
custom: { custom: {
showSuccess: true, showSuccess: true,
successMsg: '已添加到购物车~', successMsg: '已添加到购物车~',
}, },
data: { data: {
...data, ...data,
type: 'inc', type: 'inc',
}, },
}), }),
// 删除购物车 // 删除购物车
delete: (ids) => delete: (ids) =>
request2({ request2({
url: 'trade/cart/delete?ids=' + ids, url: 'trade/cart/delete?ids=' + ids,
method: 'DELETE', method: 'DELETE',
}), }),
update: (data) => update: (data) =>
request2({ request2({
url: 'trade/cart/update-count', url: 'trade/cart/update-count',
method: 'PUT', method: 'PUT',
data: { data: {
...data, ...data,
type: 'cover', type: 'cover',
}, },
}), }),
}; };

310
sheep/api/order.js
View File

@ -2,148 +2,170 @@ import request from '@/sheep/request';
import request2 from '@/sheep/request2'; import request2 from '@/sheep/request2';
export default { export default {
// 订单详情 // 订单详情
detail: (id,params) => detail: (id, params) =>
request({ request({
url: 'order/order/' + id, url: 'order/order/' + id,
method: 'GET', method: 'GET',
params, params,
}), }),
// 发票详情 // 发票详情
invoice: (id) => invoice: (id) =>
request({ request({
url: 'order/invoice/' + id, url: 'order/invoice/' + id,
method: 'GET', method: 'GET',
}), }),
// 获取支付结果 // 获取支付结果
payResult: (id) => payResult: (id) =>
request({ request({
url: 'order/order/' + id, url: 'order/order/' + id,
method: 'GET', method: 'GET',
custom: { custom: {
showLoading: false, showLoading: false,
}, },
}), }),
itemDetail: (id,itemId) => itemDetail: (id, itemId) =>
request({ request({
url: 'order/order/itemDetail/'+ id + '/' + itemId, url: 'order/order/itemDetail/' + id + '/' + itemId,
method: 'GET', method: 'GET',
custom: { custom: {
showLoading: false, showLoading: false,
}, },
}), }),
// 订单列表 // 订单列表
list: (params) => list: (params) =>
request2({ request2({
url: 'trade/order/page', url: 'trade/order/page',
method: 'GET', method: 'GET',
params, params,
custom: { custom: {
showLoading: false, showLoading: false,
}, },
}), }),
// list: (params) => // list: (params) =>
// request({ // request({
// url: 'order/order', // url: 'order/order',
// method: 'GET', // method: 'GET',
// params, // params,
// custom: { // custom: {
// showLoading: false, // showLoading: false,
// }, // },
// }), // }),
// 计算订单信息 // 计算订单信息
calc: (data) => calc: (data) => {
request({ const data2 = {
url: 'order/order/calc', ...data,
method: 'POST', }
data, // 解决 SpringMVC 接受 List<Item> 参数的问题
}), delete data2.items
// 创建订单 for (let i = 0; i < data.items.length; i++) {
create: (data) => data2['items[' + i + '' + '].skuId'] = data.items[i].skuId + '';
request({ data2['items[' + i + '' + '].count'] = data.items[i].count + '';
url: 'order/order/create', data2['items[' + i + '' + '].cartId'] = data.items[i].cartId + '';
method: 'POST', // data2['items' + `%5B${i}%5D` + '.skuId'] = data.items[i].skuId + '';
data, // data2['items' + `%5B${i}%5D` + '.count'] = data.items[i].count + '';
}), // data2['items' + `%5B${i}%5D` + '.cartId'] = data.items[i].cartId + '';
//订单可用优惠券 }
coupons: (data) => console.log(data2, '对比数据')
request({ return request2({
url: 'order/order/coupons', url: 'trade/order/settlement',
method: 'POST', method: 'GET',
data, // data,
}), params: data2
// 确认收货 })
confirm: (id) => },
request({ // calc: (data) =>
url: 'order/order/confirm/' + id, // request({
method: 'PUT', // url: 'order/order/calc',
}), // method: 'POST',
// 评价订单 // data,
comment: (id, data) => // }),
request({ // 创建订单
url: 'order/order/comment/' + id, create: (data) =>
method: 'POST', request({
data, url: 'order/order/create',
}), method: 'POST',
// 申请退款 data,
applyRefund: (id) => }),
request({ //订单可用优惠券
url: 'order/order/applyRefund/' + id, coupons: (data) =>
method: 'PUT', request({
}), url: 'order/order/coupons',
// 取消订单 method: 'POST',
cancel: (id) => data,
request({ }),
url: 'order/order/cancel/' + id, // 确认收货
method: 'PUT', confirm: (id) =>
}), request({
// 删除订单 url: 'order/order/confirm/' + id,
delete: (id) => method: 'PUT',
request({ }),
url: 'order/order/' + id, // 评价订单
method: 'DELETE', comment: (id, data) =>
}), request({
// 售后 url: 'order/order/comment/' + id,
aftersale: { method: 'POST',
// 申请售后 data,
apply: (data) => }),
request({ // 申请退款
url: 'order/aftersale', applyRefund: (id) =>
method: 'POST', request({
data, url: 'order/order/applyRefund/' + id,
}), method: 'PUT',
list: (params) => }),
request({ // 取消订单
url: 'order/aftersale', cancel: (id) =>
method: 'GET', request({
params, url: 'order/order/cancel/' + id,
custom: { method: 'PUT',
showLoading: false, }),
}, // 删除订单
}), delete: (id) =>
//取消售后 request({
cancel: (id) => url: 'order/order/' + id,
request({ method: 'DELETE',
url: 'order/aftersale/cancel/' + id, }),
method: 'PUT', // 售后
}), aftersale: {
//删除售后单 // 申请售后
delete: (id) => apply: (data) =>
request({ request({
url: 'order/aftersale/' + id, url: 'order/aftersale',
method: 'DELETE', method: 'POST',
}), data,
// 售后详情 }),
detail: (id) => list: (params) =>
request({ request({
url: 'order/aftersale/' + id, url: 'order/aftersale',
method: 'GET', method: 'GET',
}), params,
}, custom: {
//订单包裹 showLoading: false,
express: (id, orderId) => },
request({ }),
url: 'order/express/' + id + `${orderId ? '/' + orderId : ''}`, //取消售后
method: 'GET', cancel: (id) =>
}), request({
url: 'order/aftersale/cancel/' + id,
method: 'PUT',
}),
//删除售后单
delete: (id) =>
request({
url: 'order/aftersale/' + id,
method: 'DELETE',
}),
// 售后详情
detail: (id) =>
request({
url: 'order/aftersale/' + id,
method: 'GET',
}),
},
//订单包裹
express: (id, orderId) =>
request({
url: 'order/express/' + id + `${orderId ? '/' + orderId : ''}`,
method: 'GET',
}),
}; };

30
sheep/api/user.js
View File

@ -187,9 +187,17 @@ export default {
}), }),
address: { address: {
// default: () =>
// request({
// url: 'user/address/default',
// method: 'GET',
// custom: {
// showError: false,
// },
// }),
default: () => default: () =>
request({ request2({
url: 'user/address/default', url: 'member/address/get-default',
method: 'GET', method: 'GET',
custom: { custom: {
showError: false, showError: false,
@ -225,7 +233,7 @@ export default {
// showSuccess: true, // showSuccess: true,
// }, // },
// }), // }),
update: ( data) => update: (data) =>
request2({ request2({
url: 'member/address/update', url: 'member/address/update',
method: 'PUT', method: 'PUT',
@ -325,7 +333,7 @@ export default {
url: 'product/favorite/delete-list', url: 'product/favorite/delete-list',
method: 'DELETE', method: 'DELETE',
data: { data: {
spuIds: id.split(',').map(item=>item*1), spuIds: id.split(',').map(item => item * 1),
// spuIds: id.split(',').join(','), // spuIds: id.split(',').join(','),
}, },
custom: { custom: {
@ -372,13 +380,13 @@ export default {
params, params,
custom: {}, custom: {},
}), }),
// log: (params) => // log: (params) =>
// request({ // request({
// url: '/user/api/walletLog', // url: '/user/api/walletLog',
// method: 'GET', // method: 'GET',
// params, // params,
// custom: {}, // custom: {},
// }), // }),
}, },
account: { account: {
info: (params) => info: (params) =>

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

@ -1,476 +1,458 @@
<template> <template>
<!-- 规格弹窗 --> <!-- 规格弹窗 -->
<su-popup :show="show" round="10" @close="emits('close')"> <su-popup :show="show" round="10" @close="emits('close')">
<view class="ss-modal-box bg-white ss-flex-col"> <view class="ss-modal-box bg-white ss-flex-col">
<view class="modal-header ss-flex ss-col-center"> <view class="modal-header ss-flex ss-col-center">
<view class="header-left ss-m-r-30"> <view class="header-left ss-m-r-30">
<image <image class="sku-image" :src="sheep.$url.cdn(state.selectedSkuPrice.image || goodsInfo.image)"
class="sku-image" mode="aspectFill"></image>
:src="sheep.$url.cdn(state.selectedSkuPrice.image || goodsInfo.image)" </view>
mode="aspectFill" <view class="header-right ss-flex-col ss-row-between ss-flex-1">
></image> <view class="goods-title ss-line-2">{{ goodsInfo.title }}</view>
</view> <view class="header-right-bottom ss-flex ss-col-center ss-row-between">
<view class="header-right ss-flex-col ss-row-between ss-flex-1"> <view class="ss-flex">
<view class="goods-title ss-line-2">{{ goodsInfo.title }}</view> <view v-if="goodsPrice.price > 0" class="price-text">
<view class="header-right-bottom ss-flex ss-col-center ss-row-between"> {{ goodsPrice.price }}
<view class="ss-flex"> </view>
<view v-if="goodsPrice.price > 0" class="price-text"> <view class="ss-flex">
{{ goodsPrice.price }} <view v-if="goodsPrice.price > 0 && goodsPrice.score > 0" class="score-text ss-m-l-4">+
</view> </view>
<view class="ss-flex"> <image v-if="goodsPrice.score > 0"
<view :src="sheep.$url.static('/static/img/shop/goods/score1.svg')" class="score-img">
v-if="goodsPrice.price > 0 && goodsPrice.score > 0" </image>
class="score-text ss-m-l-4" <view v-if="goodsPrice.score > 0" class="score-text">
>+ {{ goodsPrice.score }}
</view> </view>
<image </view>
v-if="goodsPrice.score > 0" </view>
:src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
class="score-img"
>
</image>
<view v-if="goodsPrice.score > 0" class="score-text">
{{ goodsPrice.score }}
</view>
</view>
</view>
<view class="stock-text ss-m-l-20"> <view class="stock-text ss-m-l-20">
{{ {{
state.selectedSkuPrice.stock state.selectedSkuPrice.stock
? formatStock(goodsInfo.stock_show_type, state.selectedSkuPrice.stock) ? formatStock(goodsInfo.stock_show_type, state.selectedSkuPrice.stock)
: formatStock(goodsInfo.stock_show_type, goodsInfo.stock) : formatStock(goodsInfo.stock_show_type, goodsInfo.stock)
}} }}
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<view class="modal-content ss-flex-1"> <view class="modal-content ss-flex-1">
<scroll-view scroll-y="true" class="modal-content-scroll" @touchmove.stop> <scroll-view scroll-y="true" class="modal-content-scroll" @touchmove.stop>
<view class="sku-item ss-m-b-20" v-for="sku1 in goodsInfo.skus" :key="sku1.id"> <view class="sku-item ss-m-b-20" v-for="sku1 in goodsInfo.skus" :key="sku1.id">
<view class="label-text ss-m-b-20">{{ sku1.name }}</view> <view class="label-text ss-m-b-20">{{ sku1.name }}</view>
<view class="ss-flex ss-col-center ss-flex-wrap"> <view class="ss-flex ss-col-center ss-flex-wrap">
<button <button class="ss-reset-button spec-btn" v-for="sku2 in sku1.children" :class="[
class="ss-reset-button spec-btn"
v-for="sku2 in sku1.children"
:class="[
{ {
'ui-BG-Main-Gradient': state.currentSkuArray[sku2.parent_id] == sku2.id, 'ui-BG-Main-Gradient': state.currentSkuArray[sku2.parent_id] == sku2.id,
}, },
{ {
'disabled-btn': sku2.disabled == true, 'disabled-btn': sku2.disabled == true,
}, },
]" ]" :key="sku2.id" :disabled="sku2.disabled == true" @tap="onSelectSku(sku2.parent_id, sku2.id)">
:key="sku2.id" {{ sku2.name }}
:disabled="sku2.disabled == true" </button>
@tap="onSelectSku(sku2.parent_id, sku2.id)" </view>
> </view>
{{ sku2.name }} <view class="buy-num-box ss-flex ss-col-center ss-row-between ss-m-b-40">
</button> <view class="label-text">购买数量</view>
</view> <su-number-box :min="1" :max="state.selectedSkuPrice.stock" :step="1"
</view> v-model="state.selectedSkuPrice.goods_num" @change="onNumberChange($event)"></su-number-box>
<view class="buy-num-box ss-flex ss-col-center ss-row-between ss-m-b-40"> </view>
<view class="label-text">购买数量</view> </scroll-view>
<su-number-box </view>
:min="1" <view class="modal-footer border-top">
:max="state.selectedSkuPrice.stock" <view class="buy-box ss-flex ss-col-center ss-flex ss-col-center ss-row-center" v-if="isScore">
:step="1" <button class="ss-reset-button score-btn ui-Shadow-Main" @tap="onBuy">立即兑换</button>
v-model="state.selectedSkuPrice.goods_num" </view>
@change="onNumberChange($event)" <view class="buy-box ss-flex ss-col-center ss-flex ss-col-center ss-row-center" v-else>
></su-number-box> <button class="ss-reset-button add-btn ui-Shadow-Main" @tap="onAddCart">加入购物车</button>
</view> <button class="ss-reset-button buy-btn ui-Shadow-Main" @tap="onBuy">立即购买</button>
</scroll-view> </view>
</view> </view>
<view class="modal-footer border-top"> </view>
<view </su-popup>
class="buy-box ss-flex ss-col-center ss-flex ss-col-center ss-row-center"
v-if="isScore"
>
<button class="ss-reset-button score-btn ui-Shadow-Main" @tap="onBuy">立即兑换</button>
</view>
<view class="buy-box ss-flex ss-col-center ss-flex ss-col-center ss-row-center" v-else>
<button class="ss-reset-button add-btn ui-Shadow-Main" @tap="onAddCart"
>加入购物车</button
>
<button class="ss-reset-button buy-btn ui-Shadow-Main" @tap="onBuy">立即购买</button>
</view>
</view>
</view>
</su-popup>
</template> </template>
<script setup> <script setup>
import { computed, reactive, watch } from 'vue'; import {
import sheep from '@/sheep'; computed,
import { formatStock, formatPrice } from '@/sheep/hooks/useGoods'; reactive,
import { isEmpty } from 'lodash'; watch
} from 'vue';
import sheep from '@/sheep';
import {
formatStock,
formatPrice
} from '@/sheep/hooks/useGoods';
import {
isEmpty
} from 'lodash';
const emits = defineEmits(['change', 'addCart', 'buy', 'close']); const emits = defineEmits(['change', 'addCart', 'buy', 'close']);
const props = defineProps({ const props = defineProps({
goodsInfo: { goodsInfo: {
type: Object, type: Object,
default() {}, default () {},
}, },
show: { show: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
isScore: { isScore: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
}); });
const state = reactive({ const state = reactive({
selectedSkuPrice: {}, selectedSkuPrice: {},
currentSkuArray: [], currentSkuArray: [],
}); });
//输入框改变数量 //输入框改变数量
function onNumberChange(e) { function onNumberChange(e) {
if (e === 0) return; if (e === 0) return;
if (state.selectedSkuPrice.goods_num === e) return; if (state.selectedSkuPrice.goods_num === e) return;
state.selectedSkuPrice.goods_num = e; state.selectedSkuPrice.goods_num = e;
} }
// 默认单规格 // 默认单规格
if (!props.goodsInfo.is_sku) { if (!props.goodsInfo.is_sku) {
state.selectedSkuPrice = props.goodsInfo.sku_prices[0]; state.selectedSkuPrice = props.goodsInfo.sku_prices[0];
} }
const skuList = props.goodsInfo.skus; const skuList = props.goodsInfo.skus;
// 可选规格 // 可选规格
const skuPrices = computed(() => { const skuPrices = computed(() => {
let skuPrices = props.goodsInfo.sku_prices; let skuPrices = props.goodsInfo.sku_prices;
if (props.goodsInfo.is_sku) { if (props.goodsInfo.is_sku) {
skuPrices.forEach((item) => { skuPrices.forEach((item) => {
item.goods_sku_id_arr = item.goods_sku_ids.split(','); item.goods_sku_id_arr = item.goods_sku_ids.split(',');
}); });
} }
return skuPrices; return skuPrices;
}); });
watch( watch(
() => state.selectedSkuPrice, () => state.selectedSkuPrice,
(newVal) => { (newVal) => {
emits('change', newVal); emits('change', newVal);
}, }, {
{ immediate: true, // 立即执行
immediate: true, // 立即执行 deep: true, // 深度监听
deep: true, // 深度监听 },
}, );
);
const goodsPrice = computed(() => { const goodsPrice = computed(() => {
let price, score; let price, score;
if (isEmpty(state.selectedSkuPrice)) { if (isEmpty(state.selectedSkuPrice)) {
price = props.goodsInfo.price[0]; price = props.goodsInfo.price[0];
score = props.goodsInfo.score || 0; score = props.goodsInfo.score || 0;
} else { } else {
price = state.selectedSkuPrice.price; price = state.selectedSkuPrice.price;
score = state.selectedSkuPrice.score || 0; score = state.selectedSkuPrice.score || 0;
} }
return { return {
price, price,
score, score,
}; };
}); });
function onAddCart() { function onAddCart() {
if (state.selectedSkuPrice.goods_id) { if (state.selectedSkuPrice.goods_id) {
if (state.selectedSkuPrice.stock <= 0) { if (state.selectedSkuPrice.stock <= 0) {
sheep.$helper.toast('库存不足'); sheep.$helper.toast('库存不足');
} else { } else {
emits('addCart', state.selectedSkuPrice); emits('addCart', state.selectedSkuPrice);
} }
} else { } else {
sheep.$helper.toast('请选择规格'); sheep.$helper.toast('请选择规格');
} }
} }
function onBuy() { function onBuy() {
if (state.selectedSkuPrice.goods_id) { if (state.selectedSkuPrice.goods_id) {
if (state.selectedSkuPrice.stock <= 0) { if (state.selectedSkuPrice.stock <= 0) {
sheep.$helper.toast('库存不足'); sheep.$helper.toast('库存不足');
} else { } else {
emits('buy', state.selectedSkuPrice); emits('buy', state.selectedSkuPrice);
} }
} else { } else {
sheep.$helper.toast('请选择规格'); sheep.$helper.toast('请选择规格');
} }
} }
// 改变禁用状态 // 改变禁用状态
function changeDisabled(isChecked = false, pid = 0, skuId = 0) { function changeDisabled(isChecked = false, pid = 0, skuId = 0) {
let newPrice = []; // 所有可以选择的 skuPrice let newPrice = []; // 所有可以选择的 skuPrice
if (isChecked) { if (isChecked) {
// 选中规格 // 选中规格
// 当前点击选中规格下的 所有可用 skuPrice // 当前点击选中规格下的 所有可用 skuPrice
for (let price of skuPrices.value) { for (let price of skuPrices.value) {
if (price.stock <= 0) { if (price.stock <= 0) {
// this.goodsNum 不判断是否大于当前选择数量，在 uni-number-box 判断，并且 取 stock 和 goods_num 的小值 // this.goodsNum 不判断是否大于当前选择数量，在 uni-number-box 判断，并且 取 stock 和 goods_num 的小值
continue; continue;
} }
if (price.goods_sku_id_arr.indexOf(skuId.toString()) >= 0) { if (price.goods_sku_id_arr.indexOf(skuId.toString()) >= 0) {
newPrice.push(price); newPrice.push(price);
} }
} }
} else { } else {
// 取消选中 // 取消选中
// 当前所选规格下，所有可以选择的 skuPrice // 当前所选规格下，所有可以选择的 skuPrice
newPrice = getCanUseSkuPrice(); newPrice = getCanUseSkuPrice();
} }
// 所有存在并且有库存未选择的规格项 的 子项 id // 所有存在并且有库存未选择的规格项 的 子项 id
let noChooseSkuIds = []; let noChooseSkuIds = [];
for (let price of newPrice) { for (let price of newPrice) {
noChooseSkuIds = noChooseSkuIds.concat(price.goods_sku_id_arr); noChooseSkuIds = noChooseSkuIds.concat(price.goods_sku_id_arr);
} }
// 去重 // 去重
noChooseSkuIds = Array.from(new Set(noChooseSkuIds)); noChooseSkuIds = Array.from(new Set(noChooseSkuIds));
if (isChecked) { if (isChecked) {
// 去除当前选中的规格项 // 去除当前选中的规格项
let index = noChooseSkuIds.indexOf(skuId.toString()); let index = noChooseSkuIds.indexOf(skuId.toString());
noChooseSkuIds.splice(index, 1); noChooseSkuIds.splice(index, 1);
} else { } else {
// 循环去除当前已选择的规格项 // 循环去除当前已选择的规格项
state.currentSkuArray.forEach((sku) => { state.currentSkuArray.forEach((sku) => {
if (sku.toString() != '') { if (sku.toString() != '') {
// sku 为空是反选 填充的 // sku 为空是反选 填充的
let index = noChooseSkuIds.indexOf(sku.toString()); let index = noChooseSkuIds.indexOf(sku.toString());
if (index >= 0) { if (index >= 0) {
// sku 存在于 noChooseSkuIds // sku 存在于 noChooseSkuIds
noChooseSkuIds.splice(index, 1); noChooseSkuIds.splice(index, 1);
} }
} }
}); });
} }
// 当前已选择的规格大类 // 当前已选择的规格大类
let chooseSkuKey = []; let chooseSkuKey = [];
if (!isChecked) { if (!isChecked) {
// 当前已选择的规格大类 // 当前已选择的规格大类
state.currentSkuArray.forEach((sku, key) => { state.currentSkuArray.forEach((sku, key) => {
if (sku != '') { if (sku != '') {
// sku 为空是反选 填充的 // sku 为空是反选 填充的
chooseSkuKey.push(key); chooseSkuKey.push(key);
} }
}); });
} else { } else {
// 当前点击选择的规格大类 // 当前点击选择的规格大类
chooseSkuKey = [pid]; chooseSkuKey = [pid];
} }
for (let i in skuList) { for (let i in skuList) {
// 当前点击的规格，或者取消选择时候 已选中的规格 不进行处理 // 当前点击的规格，或者取消选择时候 已选中的规格 不进行处理
if (chooseSkuKey.indexOf(skuList[i]['id']) >= 0) { if (chooseSkuKey.indexOf(skuList[i]['id']) >= 0) {
continue; continue;
} }
for (let j in skuList[i]['children']) { for (let j in skuList[i]['children']) {
// 如果当前规格项 id 不存在于有库存的规格项中，则禁用 // 如果当前规格项 id 不存在于有库存的规格项中，则禁用
if (noChooseSkuIds.indexOf(skuList[i]['children'][j]['id'].toString()) >= 0) { if (noChooseSkuIds.indexOf(skuList[i]['children'][j]['id'].toString()) >= 0) {
skuList[i]['children'][j]['disabled'] = false; skuList[i]['children'][j]['disabled'] = false;
} else { } else {
skuList[i]['children'][j]['disabled'] = true; skuList[i]['children'][j]['disabled'] = true;
} }
} }
} }
} }
// 当前所选规格下，获取所有有库存的 skuPrice // 当前所选规格下，获取所有有库存的 skuPrice
function getCanUseSkuPrice() { function getCanUseSkuPrice() {
let newPrice = []; let newPrice = [];
for (let price of skuPrices.value) { for (let price of skuPrices.value) {
if (price.stock <= 0) { if (price.stock <= 0) {
// || price.stock < this.goodsNum 不判断是否大于当前选择数量，在 uni-number-box 判断，并且 取 stock 和 goods_num 的小值 // || price.stock < this.goodsNum 不判断是否大于当前选择数量，在 uni-number-box 判断，并且 取 stock 和 goods_num 的小值
continue; continue;
} }
var isOk = true; var isOk = true;
state.currentSkuArray.forEach((sku) => { state.currentSkuArray.forEach((sku) => {
// sku 不为空，并且，这个 条 skuPrice 没有被选中,则排除 // sku 不为空，并且，这个 条 skuPrice 没有被选中,则排除
if (sku.toString() != '' && price.goods_sku_id_arr.indexOf(sku.toString()) < 0) { if (sku.toString() != '' && price.goods_sku_id_arr.indexOf(sku.toString()) < 0) {
isOk = false; isOk = false;
} }
}); });
if (isOk) { if (isOk) {
newPrice.push(price); newPrice.push(price);
} }
} }
return newPrice; return newPrice;
} }
// 选择规格 // 选择规格
function onSelectSku(pid, skuId) { function onSelectSku(pid, skuId) {
// 清空已选择 // 清空已选择
let isChecked = true; // 选中 or 取消选中 let isChecked = true; // 选中 or 取消选中
if (state.currentSkuArray[pid] != undefined && state.currentSkuArray[pid] == skuId) { if (state.currentSkuArray[pid] != undefined && state.currentSkuArray[pid] == skuId) {
// 点击已被选中的，删除并填充 '' // 点击已被选中的，删除并填充 ''
isChecked = false; isChecked = false;
state.currentSkuArray.splice(pid, 1, ''); state.currentSkuArray.splice(pid, 1, '');
} else { } else {
// 选中 // 选中
state.currentSkuArray[pid] = skuId; state.currentSkuArray[pid] = skuId;
} }
let chooseSkuId = []; // 选中的规格大类 let chooseSkuId = []; // 选中的规格大类
state.currentSkuArray.forEach((sku) => { state.currentSkuArray.forEach((sku) => {
if (sku != '') { if (sku != '') {
// sku 为空是反选 填充的 // sku 为空是反选 填充的
chooseSkuId.push(sku); chooseSkuId.push(sku);
} }
}); });
// 当前所选规格下，所有可以选择的 skuPric // 当前所选规格下，所有可以选择的 skuPric
let newPrice = getCanUseSkuPrice(); let newPrice = getCanUseSkuPrice();
// 判断所有规格大类是否选择完成 // 判断所有规格大类是否选择完成
if (chooseSkuId.length == skuList.length && newPrice.length) { if (chooseSkuId.length == skuList.length && newPrice.length) {
newPrice[0].goods_num = state.selectedSkuPrice.goods_num || 1; newPrice[0].goods_num = state.selectedSkuPrice.goods_num || 1;
state.selectedSkuPrice = newPrice[0]; state.selectedSkuPrice = newPrice[0];
} else { } else {
state.selectedSkuPrice = {}; state.selectedSkuPrice = {};
} }
// 改变规格项禁用状态 // 改变规格项禁用状态
changeDisabled(isChecked, pid, skuId); changeDisabled(isChecked, pid, skuId);
} }
changeDisabled(false); changeDisabled(false);
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
// 购买 // 购买
.buy-box { .buy-box {
padding: 10rpx 0; padding: 10rpx 0;
.add-btn { .add-btn {
width: 356rpx; width: 356rpx;
height: 80rpx; height: 80rpx;
border-radius: 40rpx 0 0 40rpx; border-radius: 40rpx 0 0 40rpx;
background-color: var(--ui-BG-Main-light); background-color: var(--ui-BG-Main-light);
color: var(--ui-BG-Main); color: var(--ui-BG-Main);
} }
.buy-btn { .buy-btn {
width: 356rpx; width: 356rpx;
height: 80rpx; height: 80rpx;
border-radius: 0 40rpx 40rpx 0; border-radius: 0 40rpx 40rpx 0;
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient)); background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
color: #fff; color: #fff;
} }
.score-btn { .score-btn {
width: 100%; width: 100%;
margin: 0 20rpx; margin: 0 20rpx;
height: 80rpx; height: 80rpx;
border-radius: 40rpx; border-radius: 40rpx;
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient)); background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
color: #fff; color: #fff;
} }
} }
.ss-modal-box { .ss-modal-box {
border-radius: 30rpx 30rpx 0 0; border-radius: 30rpx 30rpx 0 0;
max-height: 1000rpx; max-height: 1000rpx;
.modal-header { .modal-header {
position: relative; position: relative;
padding: 80rpx 20rpx 40rpx; padding: 80rpx 20rpx 40rpx;
.sku-image { .sku-image {
width: 160rpx; width: 160rpx;
height: 160rpx; height: 160rpx;
border-radius: 10rpx; border-radius: 10rpx;
} }
.header-right { .header-right {
height: 160rpx; height: 160rpx;
} }
.close-icon { .close-icon {
position: absolute; position: absolute;
top: 10rpx; top: 10rpx;
right: 20rpx; right: 20rpx;
font-size: 46rpx; font-size: 46rpx;
opacity: 0.2; opacity: 0.2;
} }
.goods-title { .goods-title {
font-size: 28rpx; font-size: 28rpx;
font-weight: 500; font-weight: 500;
line-height: 42rpx; line-height: 42rpx;
} }
.score-img { .score-img {
width: 36rpx; width: 36rpx;
height: 36rpx; height: 36rpx;
margin: 0 4rpx; margin: 0 4rpx;
} }
.score-text { .score-text {
font-size: 30rpx; font-size: 30rpx;
font-weight: 500; font-weight: 500;
color: $red; color: $red;
font-family: OPPOSANS; font-family: OPPOSANS;
} }
.price-text { .price-text {
font-size: 30rpx; font-size: 30rpx;
font-weight: 500; font-weight: 500;
color: $red; color: $red;
font-family: OPPOSANS; font-family: OPPOSANS;
&::before { &::before {
content: '￥'; content: '￥';
font-size: 30rpx; font-size: 30rpx;
font-weight: 500; font-weight: 500;
color: $red; color: $red;
} }
} }
.stock-text { .stock-text {
font-size: 26rpx; font-size: 26rpx;
color: #999999; color: #999999;
} }
} }
.modal-content { .modal-content {
padding: 0 20rpx; padding: 0 20rpx;
.modal-content-scroll { .modal-content-scroll {
max-height: 600rpx; max-height: 600rpx;
.label-text { .label-text {
font-size: 26rpx; font-size: 26rpx;
font-weight: 500; font-weight: 500;
} }
.buy-num-box { .buy-num-box {
height: 100rpx; height: 100rpx;
} }
.spec-btn { .spec-btn {
height: 60rpx; height: 60rpx;
min-width: 100rpx; min-width: 100rpx;
padding: 0 30rpx; padding: 0 30rpx;
background: #f4f4f4; background: #f4f4f4;
border-radius: 30rpx; border-radius: 30rpx;
color: #434343; color: #434343;
font-size: 26rpx; font-size: 26rpx;
margin-right: 10rpx; margin-right: 10rpx;
margin-bottom: 10rpx; margin-bottom: 10rpx;
} }
.disabled-btn { .disabled-btn {
font-weight: 400; font-weight: 400;
color: #c6c6c6; color: #c6c6c6;
background: #f8f8f8; background: #f8f8f8;
} }
} }
} }
} }
</style> </style>

343
sheep/request/index.js
View File

@ -4,213 +4,218 @@
*/ */
import Request from 'luch-request'; import Request from 'luch-request';
import { baseUrl, apiPath } from '@/sheep/config'; import {
baseUrl,
apiPath
} from '@/sheep/config';
import $store from '@/sheep/store'; import $store from '@/sheep/store';
import $platform from '@/sheep/platform'; import $platform from '@/sheep/platform';
import { showAuthModal } from '@/sheep/hooks/useModal'; import {
showAuthModal
} from '@/sheep/hooks/useModal';
const options = { const options = {
// 显示操作成功消息 默认不显示 // 显示操作成功消息 默认不显示
showSuccess: false, showSuccess: false,
// 成功提醒 默认使用后端返回值 // 成功提醒 默认使用后端返回值
successMsg: '', successMsg: '',
// 显示失败消息 默认显示 // 显示失败消息 默认显示
showError: true, showError: true,
// 失败提醒 默认使用后端返回信息 // 失败提醒 默认使用后端返回信息
errorMsg: '', errorMsg: '',
// 显示请求时loading模态框 默认显示 // 显示请求时loading模态框 默认显示
showLoading: true, showLoading: true,
// loading提醒文字 // loading提醒文字
loadingMsg: '加载中', loadingMsg: '加载中',
// 需要授权才能请求 默认放开 // 需要授权才能请求 默认放开
auth: false, auth: false,
// ... // ...
}; };
// Loading全局实例 // Loading全局实例
let LoadingInstance = { let LoadingInstance = {
target: null, target: null,
count: 0, count: 0,
}; };
/** /**
* 关闭loading * 关闭loading
*/ */
function closeLoading() { function closeLoading() {
if (LoadingInstance.count > 0) LoadingInstance.count--; if (LoadingInstance.count > 0) LoadingInstance.count--;
if (LoadingInstance.count === 0) uni.hideLoading(); if (LoadingInstance.count === 0) uni.hideLoading();
} }
/** /**
* @description 请求基础配置 可直接使用访问自定义请求 * @description 请求基础配置 可直接使用访问自定义请求
*/ */
const http = new Request({ const http = new Request({
baseURL: baseUrl, baseURL: baseUrl,
timeout: 8000, timeout: 8000,
method: 'GET', method: 'GET',
header: { header: {
Accept: 'text/json', Accept: 'text/json',
'Content-Type': 'application/json;charset=UTF-8', 'Content-Type': 'application/json;charset=UTF-8',
platform: $platform.name, platform: $platform.name,
}, },
// #ifdef APP-PLUS // #ifdef APP-PLUS
sslVerify: false, sslVerify: false,
// #endif // #endif
// #ifdef H5 // #ifdef H5
// 跨域请求时是否携带凭证（cookies）仅H5支持（HBuilderX 2.6.15+） // 跨域请求时是否携带凭证（cookies）仅H5支持（HBuilderX 2.6.15+）
withCredentials: false, withCredentials: false,
// #endif // #endif
custom: options, custom: options,
}); });
/** /**
* @description 请求拦截器 * @description 请求拦截器
*/ */
http.interceptors.request.use( http.interceptors.request.use(
(config) => { (config) => {
if (config.custom.auth && !$store('user').isLogin) { if (config.custom.auth && !$store('user').isLogin) {
showAuthModal(); showAuthModal();
return Promise.reject(); return Promise.reject();
} }
if (config.custom.showLoading) { if (config.custom.showLoading) {
LoadingInstance.count++; LoadingInstance.count++;
LoadingInstance.count === 1 && LoadingInstance.count === 1 &&
uni.showLoading({ uni.showLoading({
title: config.custom.loadingMsg, title: config.custom.loadingMsg,
mask: true, mask: true,
fail: () => { fail: () => {
uni.hideLoading(); uni.hideLoading();
}, },
}); });
} }
const token = uni.getStorageSync('token'); const token = uni.getStorageSync('token');
if (token) config.header['Authorization'] = token; if (token) config.header['Authorization'] = token;
// TODO 芋艿：特殊处理 // TODO 芋艿：特殊处理
if (config.url.indexOf('/app-api/') !== -1) { if (config.url.indexOf('/app-api/') !== -1) {
config.header['Accept'] = '*/*' config.header['Accept'] = '*/*'
config.header['tenant-id'] = '1'; config.header['tenant-id'] = '1';
config.header['Authorization'] = 'Bearer test247'; config.header['Authorization'] = 'Bearer test247';
} }
return config; return config;
}, },
(error) => { (error) => {
return Promise.reject(error); return Promise.reject(error);
}, },
); );
/** /**
* @description 响应拦截器 * @description 响应拦截器
*/ */
http.interceptors.response.use( http.interceptors.response.use(
(response) => { (response) => {
// 自动设置登陆令牌 // 自动设置登陆令牌
if (response.header.authorization || response.header.Authorization) { if (response.header.authorization || response.header.Authorization) {
$store('user').setToken(response.header.authorization || response.header.Authorization); $store('user').setToken(response.header.authorization || response.header.Authorization);
} }
response.config.custom.showLoading && closeLoading(); response.config.custom.showLoading && closeLoading();
if (response.data.error !== 0) { if (response.data.error !== 0) {
if (response.config.custom.showError) if (response.config.custom.showError)
uni.showToast({ uni.showToast({
title: response.data.msg || '服务器开小差啦,请稍后再试~', title: response.data.msg || '服务器开小差啦,请稍后再试~',
icon: 'none', icon: 'none',
mask: true, mask: true,
}); });
return Promise.resolve(response.data); return Promise.resolve(response.data);
} }
if ( if (
response.data.error === 0 && response.data.error === 0 &&
response.data.msg !== '' && response.data.msg !== '' &&
response.config.custom.showSuccess response.config.custom.showSuccess
) { ) {
uni.showToast({ uni.showToast({
title: response.config.custom.successMsg || response.data.msg, title: response.config.custom.successMsg || response.data.msg,
icon: 'none', icon: 'none',
}); });
} }
return Promise.resolve(response.data); return Promise.resolve(response.data);
}, },
(error) => { (error) => {
const userStore = $store('user'); const userStore = $store('user');
const isLogin = userStore.isLogin; const isLogin = userStore.isLogin;
let errorMessage = '网络请求出错'; let errorMessage = '网络请求出错';
if (error !== undefined) { if (error !== undefined) {
switch (error.statusCode) { switch (error.statusCode) {
case 400: case 400:
errorMessage = '请求错误'; errorMessage = '请求错误';
break; break;
case 401: case 401:
if (isLogin) { if (isLogin) {
errorMessage = '您的登陆已过期'; errorMessage = '您的登陆已过期';
} else { } else {
errorMessage = '请先登录'; errorMessage = '请先登录';
} }
userStore.logout(true); userStore.logout(true);
showAuthModal(); showAuthModal();
break; break;
case 403: case 403:
errorMessage = '拒绝访问'; errorMessage = '拒绝访问';
break; break;
case 404: case 404:
errorMessage = '请求出错'; errorMessage = '请求出错';
break; break;
case 408: case 408:
errorMessage = '请求超时'; errorMessage = '请求超时';
break; break;
case 429: case 429:
errorMessage = '请求频繁, 请稍后再访问'; errorMessage = '请求频繁, 请稍后再访问';
break; break;
case 500: case 500:
errorMessage = '服务器开小差啦,请稍后再试~'; errorMessage = '服务器开小差啦,请稍后再试~';
break; break;
case 501: case 501:
errorMessage = '服务未实现'; errorMessage = '服务未实现';
break; break;
case 502: case 502:
errorMessage = '网络错误'; errorMessage = '网络错误';
break; break;
case 503: case 503:
errorMessage = '服务不可用'; errorMessage = '服务不可用';
break; break;
case 504: case 504:
errorMessage = '网络超时'; errorMessage = '网络超时';
break; break;
case 505: case 505:
errorMessage = 'HTTP版本不受支持'; errorMessage = 'HTTP版本不受支持';
break; break;
} }
if (error.errMsg.includes('timeout')) errorMessage = '请求超时'; if (error.errMsg.includes('timeout')) errorMessage = '请求超时';
// #ifdef H5 // #ifdef H5
if (error.errMsg.includes('Network')) if (error.errMsg.includes('Network'))
errorMessage = window.navigator.onLine ? '服务器异常' : '请检查您的网络连接'; errorMessage = window.navigator.onLine ? '服务器异常' : '请检查您的网络连接';
// #endif // #endif
} }
if (error && error.config) { if (error && error.config) {
if (error.config.custom.showError === false) { if (error.config.custom.showError === false) {
uni.showToast({ uni.showToast({
title: error.data?.msg || errorMessage, title: error.data?.msg || errorMessage,
icon: 'none', icon: 'none',
mask: true, mask: true,
}); });
} }
error.config.custom.showLoading && closeLoading(); error.config.custom.showLoading && closeLoading();
} }
return false; return false;
}, },
); );
const request = (config) => { const request = (config) => {
if (config.url[0] !== '/') { if (config.url[0] !== '/') {
config.url = apiPath + config.url; config.url = apiPath + config.url;
} }
// TODO 芋艿：额外拼接 // TODO 芋艿：额外拼接
if (config.url.indexOf('/app-api/') >= 0) { if (config.url.indexOf('/app-api/') >= 0) {
config.url = 'http://api-dashboard.yudao.iocoder.cn' + config.url; // 调用【云端】 config.url = 'http://api-dashboard.yudao.iocoder.cn' + config.url; // 调用【云端】
// config.url = 'http://127.0.0.1:48080' + config.url; // 调用【本地】 // config.url = 'http://127.0.0.1:48080' + config.url; // 调用【本地】
} }
return http.middleware(config); return http.middleware(config);
}; };
export default request; export default request;

3
sheep/request2/index.js
View File

@ -55,7 +55,8 @@ const http = new Request({
method: 'GET', method: 'GET',
header: { header: {
Accept: 'text/json', Accept: 'text/json',
'Content-Type': 'application/json;charset=UTF-8', 'Content-Type': 'application/json',
// ;charset=UTF-8
platform: $platform.name, platform: $platform.name,
}, },
// #ifdef APP-PLUS // #ifdef APP-PLUS