优化从购物车下单

pull/23/head
落日晚风 2023-12-05 14:27:36 +08:00
parent bfa440e98c
commit 4030e40ebc
12 changed files with 1889 additions and 1900 deletions

63
App.vue
View File

@ -1,41 +1,46 @@
<script setup>
import { onLaunch, onShow, onError } from '@dcloudio/uni-app';
import { ShoproInit } from './sheep';
import {
onLaunch,
onShow,
onError
} from '@dcloudio/uni-app';
import {
ShoproInit
} from './sheep';
onLaunch(() => {
// 使
uni.hideTabBar();
onLaunch(() => {
// 使
uni.hideTabBar();
// Shopro
ShoproInit();
});
// Shopro
ShoproInit();
});
onError((err) => {
console.log('AppOnError:', err);
});
onError((err) => {
console.log('AppOnError:', err);
});
onShow((options) => {
// #ifdef APP-PLUS
// urlSchemes
const args = plus.runtime.arguments;
if (args) {
}
onShow((options) => {
// #ifdef APP-PLUS
// urlSchemes
const args = plus.runtime.arguments;
if (args) {}
//
uni.getClipboardData({
success: (res) => { },
});
// #endif
//
uni.getClipboardData({
success: (res) => {},
});
// #endif
// #ifdef MP-WEIXIN
//
console.log(options,'options');
// #endif
// #ifdef MP-WEIXIN
//
console.log(options, 'options');
// #endif
});
});
</script>
<style lang="scss">
@import '@/sheep/scss/index.scss';
</style>
@import '@/sheep/scss/index.scss';
</style>

View File

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

View File

@ -1,207 +1,200 @@
<template>
<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-layout title="购物车" tabbar="/pages/index/cart" :bgStyle="{ color: '#fff' }">
<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-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">
<text class="goods-number ui-TC-Main ss-flex">{{ state.list.length }}</text>
件商品
</view>
<view class="header-right">
<button v-if="state.editMode" class="ss-reset-button" @tap="state.editMode = false">
取消
</button>
<button v-else class="ss-reset-button ui-TC-Main" @tap="state.editMode = true">
编辑
</button>
</view>
</view>
<!-- 内容 -->
<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="ss-flex ss-col-center">
<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)"
style="transform: scale(0.8)"
@tap.stop="onSelectSingle(item.id)"
/>
</label>
<s-goods-item
:title="item.spu.name"
:img="item.spu.picUrl || item.goods.image"
: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"
priceColor="#FF3000"
:titleWidth="400"
>
<template v-if="!state.editMode" v-slot:tool>
<su-number-box
:min="0"
:max="item.sku.stock"
:step="1"
v-model="item.count"
@change="onNumberChange($event, item)"
></su-number-box>
</template>
</s-goods-item>
</view>
</view>
</view>
<!-- 底部 -->
<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="footer-left ss-flex ss-col-center">
<label class="check-box ss-flex ss-col-center ss-p-r-30" @tap="onSelectAll">
<radio
:checked="state.isAllSelected"
color="var(--ui-BG-Main)"
style="transform: scale(0.8)"
@tap.stop="onSelectAll"
/>
<view class="ss-m-l-8"> 全选 </view>
</label>
<text>合计</text>
<view class="text-price price-text">
{{ state.totalPriceSelected }}
</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>
<!-- 头部 -->
<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="header-left ss-flex ss-col-center ss-font-26">
<text class="goods-number ui-TC-Main ss-flex">{{ state.list.length }}</text>
件商品
</view>
<view class="header-right">
<button v-if="state.editMode" class="ss-reset-button" @tap="state.editMode = false">
取消
</button>
<button v-else class="ss-reset-button ui-TC-Main" @tap="state.editMode = true">
编辑
</button>
</view>
</view>
<!-- 内容 -->
<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="ss-flex ss-col-center">
<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)"
style="transform: scale(0.8)" @tap.stop="onSelectSingle(item.id)" />
</label>
<s-goods-item :title="item.spu.name" :img="item.spu.picUrl || item.goods.image"
: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"
priceColor="#FF3000" :titleWidth="400">
<template v-if="!state.editMode" v-slot:tool>
<su-number-box :min="0" :max="item.sku.stock" :step="1" v-model="item.count"
@change="onNumberChange($event, item)"></su-number-box>
</template>
</s-goods-item>
</view>
</view>
</view>
<!-- 底部 -->
<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="footer-left ss-flex ss-col-center">
<label class="check-box ss-flex ss-col-center ss-p-r-30" @tap="onSelectAll">
<radio :checked="state.isAllSelected" color="var(--ui-BG-Main)"
style="transform: scale(0.8)" @tap.stop="onSelectAll" />
<view class="ss-m-l-8"> 全选 </view>
</label>
<text>合计</text>
<view class="text-price price-text">
{{ state.totalPriceSelected }}
</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>
<script setup>
import sheep from '@/sheep';
import { computed, reactive, unref } from 'vue';
import sheep from '@/sheep';
import {
computed,
reactive,
unref
} from 'vue';
const sys_navBar = sheep.$platform.navbar;
const cart = sheep.$store('cart');
const sys_navBar = sheep.$platform.navbar;
const cart = sheep.$store('cart');
const state = reactive({
editMode: false,
list: computed(() => cart.list),
selectedList: [],
selectedIds: computed(() => cart.selectedIds),
isAllSelected: computed(() => cart.isAllSelected),
totalPriceSelected: computed(() => cart.totalPriceSelected),
});
//
function onSelectSingle(id) {
console.log('单选')
cart.selectSingle(id);
}
//
function onSelectAll() {
cart.selectAll(!state.isAllSelected);
}
const state = reactive({
editMode: false,
list: computed(() => cart.list),
selectedList: [],
selectedIds: computed(() => cart.selectedIds),
isAllSelected: computed(() => cart.isAllSelected),
totalPriceSelected: computed(() => cart.totalPriceSelected),
});
//
function onSelectSingle(id) {
console.log('单选')
cart.selectSingle(id);
}
//
function onSelectAll() {
cart.selectAll(!state.isAllSelected);
}
//
function onConfirm() {
let goods_list = [];
state.selectedList = state.list.filter((item) => state.selectedIds.includes(item.id));
state.selectedList.map((item) => {
goods_list.push({
goods_id: item.goods_id,
goods_num: item.goods_num,
goods_sku_price_id: item.goods_sku_price_id,
});
});
if (goods_list.length === 0) {
sheep.$helper.toast('请选择商品');
return;
}
sheep.$router.go('/pages/order/confirm', {
data: JSON.stringify({
order_type: 'goods',
goods_list,
from: 'cart',
}),
});
}
//
function onConfirm() {
let items = []
let goods_list = [];
state.selectedList = state.list.filter((item) => state.selectedIds.includes(item.id));
state.selectedList.map((item) => {
console.log(item, '便利');
//
items.push({
skuId: item.sku.id,
count: item.count,
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,
});
});
// 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) {
if (e === 0) {
cart.delete(cartItem.id);
return;
}
if(cartItem.goods_num === e) return;
cartItem.goods_num = e;
cart.update({
goods_id: cartItem.id,
goods_num: e,
goods_sku_price_id: cartItem.goods_sku_price_id,
});
}
async function onDelete() {
cart.delete(state.selectedIds);
}
function onNumberChange(e, cartItem) {
if (e === 0) {
cart.delete(cartItem.id);
return;
}
if (cartItem.goods_num === e) return;
cartItem.goods_num = e;
cart.update({
goods_id: cartItem.id,
goods_num: e,
goods_sku_price_id: cartItem.goods_sku_price_id,
});
}
async function onDelete() {
cart.delete(state.selectedIds);
}
</script>
<style lang="scss" scoped>
:deep(.ui-fixed) {
height: 72rpx;
}
:deep(.ui-fixed) {
height: 72rpx;
}
.cart-box {
width: 100%;
.cart-box {
width: 100%;
.cart-header {
height: 70rpx;
background-color: #f6f6f6;
width: 100%;
position: fixed;
left: 0;
top: v-bind('sys_navBar') rpx;
z-index: 1000;
box-sizing: border-box;
}
.cart-header {
height: 70rpx;
background-color: #f6f6f6;
width: 100%;
position: fixed;
left: 0;
top: v-bind('sys_navBar') rpx;
z-index: 1000;
box-sizing: border-box;
}
.cart-footer {
height: 100rpx;
background-color: #fff;
.cart-footer {
height: 100rpx;
background-color: #fff;
.pay-btn {
width: 180rpx;
height: 70rpx;
font-size: 28rpx;
line-height: 28rpx;
font-weight: 500;
border-radius: 40rpx;
}
}
.pay-btn {
width: 180rpx;
height: 70rpx;
font-size: 28rpx;
line-height: 28rpx;
font-weight: 500;
border-radius: 40rpx;
}
}
.cart-content {
margin-top: 70rpx;
.goods-box {
background-color: #fff;
}
}
}
</style>
.cart-content {
margin-top: 70rpx;
.goods-box {
background-color: #fff;
}
}
}
</style>

View File

@ -22,17 +22,18 @@
} from '@dcloudio/uni-app';
import sheep from '@/sheep';
import $share from '@/sheep/platform/share';
import index2Api from '@/sheep/api/index2'
// tabBar
uni.hideTabBar();
const template = computed(() => sheep.$store('app').template?.home);
//
(async function() {
console.log('原代码首页定制化数据',template)
console.log('原代码首页定制化数据', template)
let {
data
} = await index2Api.decorate();
console.log('首页导航配置化过高无法兼容',JSON.parse(data[1].value))
console.log('首页导航配置化过高无法兼容', JSON.parse(data[1].value))
// id
// let {
// data: datas
@ -88,4 +89,4 @@
onPageScroll(() => {});
</script>
<style></style>
<style></style>

View File

@ -1,419 +1,414 @@
<template>
<s-layout title="确认订单">
<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>
</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>
<s-layout title="确认订单">
<!-- v-if="state.orderInfo.need_address === 1" -->
<!-- 这个判断先删除 -->
<view class="bg-white address-box ss-m-b-14 ss-r-b-10" @tap="onSelectAddress">
<s-address-item :item="state.addressInfo" :hasBorderBottom="false">
<view class="ss-rest-button"><text class="_icon-forward"></text></view>
</s-address-item>
</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-item ss-flex ss-col-center ss-row-between ss-p-x-20 bg-white ss-r-10">
<view class="item-title">订单备注</view>
<view class="ss-flex ss-col-center">
<uni-easyinput
maxlength="20"
placeholder="建议留言前先与商家沟通"
v-model="state.orderPayload.remark"
:inputBorder="false"
:clearable="false"
></uni-easyinput>
</view>
</view>
</view>
<!-- 合计 -->
<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="order-item ss-flex ss-col-center ss-row-between">
<view class="item-title">商品金额</view>
<view class="ss-flex ss-col-center">
<text class="item-value ss-m-r-24">{{ state.orderInfo.goods_amount }}</text>
</view>
</view>
<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="ss-flex ss-col-center">
<image
:src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
class="score-img"
></image>
<text class="item-value ss-m-r-24">{{ state.orderInfo.score_amount }}</text>
</view>
</view>
<view class="order-item ss-flex ss-col-center ss-row-between">
<view class="item-title">运费</view>
<view class="ss-flex ss-col-center">
<text class="item-value ss-m-r-24">+{{ state.orderInfo.dispatch_amount }}</text>
</view>
</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
>{{
<view class="order-item ss-flex ss-col-center ss-row-between ss-p-x-20 bg-white ss-r-10">
<view class="item-title">订单备注</view>
<view class="ss-flex ss-col-center">
<uni-easyinput maxlength="20" placeholder="建议留言前先与商家沟通" v-model="state.orderPayload.remark"
:inputBorder="false" :clearable="false"></uni-easyinput>
</view>
</view>
</view>
<!-- 合计 -->
<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="order-item ss-flex ss-col-center ss-row-between">
<view class="item-title">商品金额</view>
<view class="ss-flex ss-col-center">
<text class="item-value ss-m-r-24">{{ state.orderInfo.goods_amount }}</text>
</view>
</view>
<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="ss-flex ss-col-center">
<image :src="sheep.$url.static('/static/img/shop/goods/score1.svg')" class="score-img"></image>
<text class="item-value ss-m-r-24">{{ state.orderInfo.score_amount }}</text>
</view>
</view>
<view class="order-item ss-flex ss-col-center ss-row-between">
<view class="item-title">运费</view>
<view class="ss-flex ss-col-center">
<text class="item-value ss-m-r-24">+{{ state.orderInfo.dispatch_amount }}</text>
</view>
</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 + '张可用'
: '暂无可用优惠券'
}}</text
>
}}</text>
<text class="_icon-forward item-icon"></text>
</view>
</view>
<view
class="order-item ss-flex ss-col-center ss-row-between"
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 class="ss-flex ss-col-center" @tap="state.showDiscount = true">
<text class="item-value text-red"> -{{ state.orderInfo.promo_discount_fee }} </text>
<text class="_icon-forward item-icon"></text>
</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-num ss-m-r-20">{{ state.totalNumber }}</view>
<view>合计</view>
<view class="total-num text-red"> {{ state.orderInfo.pay_fee }} </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>
<!-- 选择优惠券弹框 -->
<s-coupon-select
v-model="state.couponInfo"
:show="state.showCoupon"
@confirm="onSelectCoupon"
@close="state.showCoupon = false"
/>
<!-- 满额折扣弹框 -->
<s-discount-list
v-model="state.orderInfo"
:show="state.showDiscount"
@close="state.showDiscount = false"
/>
<!-- 底部 -->
<su-fixed bottom :opacity="false" bg="bg-white" placeholder :noFixed="false" :index="200">
<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>
<text class="_icon-forward item-icon"></text>
</view>
</view>
<view class="order-item ss-flex ss-col-center ss-row-between"
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 class="ss-flex ss-col-center" @tap="state.showDiscount = true">
<text class="item-value text-red"> -{{ state.orderInfo.promo_discount_fee }} </text>
<text class="_icon-forward item-icon"></text>
</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-num ss-m-r-20">{{ state.totalNumber }}</view>
<view>合计</view>
<view class="total-num text-red"> {{ state.orderInfo.pay_fee }} </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>
<!-- 选择优惠券弹框 -->
<s-coupon-select v-model="state.couponInfo" :show="state.showCoupon" @confirm="onSelectCoupon"
@close="state.showCoupon = false" />
<!-- 满额折扣弹框 -->
<s-discount-list v-model="state.orderInfo" :show="state.showDiscount" @close="state.showDiscount = false" />
<!-- 底部 -->
<su-fixed bottom :opacity="false" bg="bg-white" placeholder :noFixed="false" :index="200">
<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
class="ss-reset-button ui-BG-Main-Gradient ss-r-40 submit-btn ui-Shadow-Main"
@tap="onConfirm"
>
{{ exchangeNow ? '立即兑换' : '提交订单' }}
</button>
</view>
</su-fixed>
</s-layout>
<button class="ss-reset-button ui-BG-Main-Gradient ss-r-40 submit-btn ui-Shadow-Main" @tap="onConfirm">
{{ exchangeNow ? '立即兑换' : '提交订单' }}
</button>
</view>
</su-fixed>
</s-layout>
</template>
<script setup>
import { reactive, computed } from 'vue';
import { onLoad, onPageScroll, onShow } from '@dcloudio/uni-app';
import sheep from '@/sheep';
import { isEmpty } from 'lodash';
import {
reactive,
computed
} from 'vue';
import {
onLoad,
onPageScroll,
onShow
} from '@dcloudio/uni-app';
import sheep from '@/sheep';
import {
isEmpty
} from 'lodash';
const state = reactive({
orderPayload: {},
orderInfo: {},
addressInfo: {},
invoiceInfo: {},
totalNumber: 0,
showCoupon: false,
couponInfo: [],
showDiscount: false,
});
const state = reactive({
orderPayload: {},
orderInfo: {},
addressInfo: {},
invoiceInfo: {},
totalNumber: 0,
showCoupon: false,
couponInfo: [],
showDiscount: false,
});
// ()
const exchangeNow = computed(
() => state.orderPayload.order_type === 'score' && state.orderInfo.pay_fee == 0,
);
// ()
const exchangeNow = computed(
() => state.orderPayload.order_type === 'score' && state.orderInfo.pay_fee == 0,
);
//
function onSelectAddress() {
uni.$once('SELECT_ADDRESS', (e) => {
changeConsignee(e.addressInfo);
});
sheep.$router.go('/pages/user/address/list');
}
//
function onSelectAddress() {
uni.$once('SELECT_ADDRESS', (e) => {
changeConsignee(e.addressInfo);
});
sheep.$router.go('/pages/user/address/list');
}
// &
async function changeConsignee(addressInfo = {}) {
if (isEmpty(addressInfo)) {
const { error, data } = await sheep.$api.user.address.default();
if (error === 0 && !isEmpty(data)) {
addressInfo = data;
}
}
if (!isEmpty(addressInfo)) {
state.addressInfo = addressInfo;
state.orderPayload.address_id = state.addressInfo.id;
}
getOrderInfo();
}
// &
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)) {
state.addressInfo = addressInfo;
state.orderPayload.address_id = state.addressInfo.id;
}
getOrderInfo();
}
//
async function onSelectCoupon(e) {
state.orderPayload.coupon_id = e || 0;
getOrderInfo();
state.showCoupon = false;
}
//
async function onSelectCoupon(e) {
state.orderPayload.coupon_id = e || 0;
getOrderInfo();
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 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() {
if (!state.orderPayload.address_id && state.orderInfo.need_address === 1) {
sheep.$helper.toast('请选择收货地址');
return;
}
// /
function onConfirm() {
if (!state.orderPayload.address_id && state.orderInfo.need_address === 1) {
sheep.$helper.toast('请选择收货地址');
return;
}
if (exchangeNow.value) {
uni.showModal({
title: '提示',
content: '确定使用积分立即兑换?',
cancelText: '再想想',
success: async function (res) {
if (res.confirm) {
submitOrder();
}
},
});
} else {
submitOrder();
}
}
if (exchangeNow.value) {
uni.showModal({
title: '提示',
content: '确定使用积分立即兑换?',
cancelText: '再想想',
success: async function(res) {
if (res.confirm) {
submitOrder();
}
},
});
} else {
submitOrder();
}
}
// &
async function submitOrder() {
const { error, data } = await sheep.$api.order.create(state.orderPayload);
if (error === 0) {
//
if (state.orderPayload.from === 'cart') {
sheep.$store('cart').getList();
}
if (exchangeNow.value) {
sheep.$router.redirect('/pages/pay/result', {
orderSN: data.order_sn,
});
} else {
sheep.$router.redirect('/pages/pay/index', {
orderSN: data.order_sn,
});
}
}
}
// &
async function submitOrder() {
const {
error,
data
} = await sheep.$api.order.create(state.orderPayload);
if (error === 0) {
//
if (state.orderPayload.from === 'cart') {
sheep.$store('cart').getList();
}
if (exchangeNow.value) {
sheep.$router.redirect('/pages/pay/result', {
orderSN: data.order_sn,
});
} else {
sheep.$router.redirect('/pages/pay/index', {
orderSN: data.order_sn,
});
}
}
}
// &
async function getOrderInfo() {
let { error, data } = await sheep.$api.order.calc(state.orderPayload);
if (error === 0) {
state.totalNumber = 0;
state.orderInfo = data;
state.orderInfo.goods_list.forEach((item) => {
state.totalNumber += item.goods_num;
});
}
}
// &
async function getOrderInfo() {
console.log(state.orderPayload, '计算价格传参')
// let {code, data} = await sheep.$api.order.calc(state.orderPayload);
// let data = await sheep.$api.order.calc(state.orderPayload);
console.log(state.orderPayload.items)
let data = await sheep.$api.order.calc({
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() {
const { error, data } = await sheep.$api.order.coupons(state.orderPayload);
if (error === 0) {
state.couponInfo = data;
}
}
//
async function getCoupons() {
const {
error,
data
} = await sheep.$api.order.coupons(state.orderPayload);
if (error === 0) {
state.couponInfo = data;
}
}
onLoad(async (options) => {
if (options.data) {
state.orderPayload = JSON.parse(options.data);
changeConsignee();
if (state.orderPayload.order_type !== 'score') {
getCoupons();
}
}
});
onLoad(async (options) => {
console.log(options)
if (options.data) {
state.orderPayload = JSON.parse(options.data);
changeConsignee();
if (state.orderPayload.order_type !== 'score') {
getCoupons();
}
}
});
</script>
<style lang="scss" scoped>
:deep() {
.uni-input-wrapper {
width: 320rpx;
}
:deep() {
.uni-input-wrapper {
width: 320rpx;
}
.uni-easyinput__content-input {
font-size: 28rpx;
height: 72rpx;
text-align: right !important;
padding-right: 0 !important;
.uni-easyinput__content-input {
font-size: 28rpx;
height: 72rpx;
text-align: right !important;
padding-right: 0 !important;
.uni-input-input {
font-weight: 500;
color: #333333;
font-size: 26rpx;
height: 32rpx;
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;
.uni-input-input {
font-weight: 500;
color: #333333;
font-size: 26rpx;
height: 32rpx;
margin-top: 4rpx;
}
}
.item-title {
font-size: 28rpx;
font-weight: 400;
}
.uni-easyinput__content {
display: flex !important;
align-items: center !important;
justify-content: right !important;
}
}
.item-value {
font-size: 28rpx;
font-weight: 500;
font-family: OPPOSANS;
}
.text-disabled {
color: #bbbbbb;
}
.score-img {
width: 36rpx;
height: 36rpx;
margin: 0 4rpx;
}
.item-icon {
color: $dark-9;
}
.order-item {
height: 80rpx;
.remark-input {
text-align: right;
}
.item-title {
font-size: 28rpx;
font-weight: 400;
}
.item-placeholder {
color: $dark-9;
font-size: 26rpx;
text-align: right;
}
}
.item-value {
font-size: 28rpx;
font-weight: 500;
font-family: OPPOSANS;
}
.total-box-footer {
height: 90rpx;
.text-disabled {
color: #bbbbbb;
}
.total-num {
color: #333333;
font-family: OPPOSANS;
}
}
.item-icon {
color: $dark-9;
}
.footer-box {
height: 100rpx;
.remark-input {
text-align: right;
}
.submit-btn {
width: 240rpx;
height: 70rpx;
font-size: 28rpx;
font-weight: 500;
.item-placeholder {
color: $dark-9;
font-size: 26rpx;
text-align: right;
}
}
.goto-pay-text {
line-height: 28rpx;
}
}
.total-box-footer {
height: 90rpx;
.cancel-btn {
width: 240rpx;
height: 80rpx;
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>
.total-num {
color: #333333;
font-family: OPPOSANS;
}
}
.footer-box {
height: 100rpx;
.submit-btn {
width: 240rpx;
height: 70rpx;
font-size: 28rpx;
font-weight: 500;
.goto-pay-text {
line-height: 28rpx;
}
}
.cancel-btn {
width: 240rpx;
height: 80rpx;
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>

View File

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

View File

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

View File

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

View File

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

View File

@ -1,476 +1,458 @@
<template>
<!-- 规格弹窗 -->
<su-popup :show="show" round="10" @close="emits('close')">
<view class="ss-modal-box bg-white ss-flex-col">
<view class="modal-header ss-flex ss-col-center">
<view class="header-left ss-m-r-30">
<image
class="sku-image"
:src="sheep.$url.cdn(state.selectedSkuPrice.image || goodsInfo.image)"
mode="aspectFill"
></image>
</view>
<view class="header-right ss-flex-col ss-row-between ss-flex-1">
<view class="goods-title ss-line-2">{{ goodsInfo.title }}</view>
<view class="header-right-bottom ss-flex ss-col-center ss-row-between">
<view class="ss-flex">
<view v-if="goodsPrice.price > 0" class="price-text">
{{ goodsPrice.price }}
</view>
<view class="ss-flex">
<view
v-if="goodsPrice.price > 0 && goodsPrice.score > 0"
class="score-text ss-m-l-4"
>+
</view>
<image
v-if="goodsPrice.score > 0"
: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>
<!-- 规格弹窗 -->
<su-popup :show="show" round="10" @close="emits('close')">
<view class="ss-modal-box bg-white ss-flex-col">
<view class="modal-header ss-flex ss-col-center">
<view class="header-left ss-m-r-30">
<image class="sku-image" :src="sheep.$url.cdn(state.selectedSkuPrice.image || goodsInfo.image)"
mode="aspectFill"></image>
</view>
<view class="header-right ss-flex-col ss-row-between ss-flex-1">
<view class="goods-title ss-line-2">{{ goodsInfo.title }}</view>
<view class="header-right-bottom ss-flex ss-col-center ss-row-between">
<view class="ss-flex">
<view v-if="goodsPrice.price > 0" class="price-text">
{{ goodsPrice.price }}
</view>
<view class="ss-flex">
<view v-if="goodsPrice.price > 0 && goodsPrice.score > 0" class="score-text ss-m-l-4">+
</view>
<image v-if="goodsPrice.score > 0"
: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
? formatStock(goodsInfo.stock_show_type, state.selectedSkuPrice.stock)
: formatStock(goodsInfo.stock_show_type, goodsInfo.stock)
}}
</view>
</view>
</view>
</view>
<view class="modal-content ss-flex-1">
<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="label-text ss-m-b-20">{{ sku1.name }}</view>
<view class="ss-flex ss-col-center ss-flex-wrap">
<button
class="ss-reset-button spec-btn"
v-for="sku2 in sku1.children"
:class="[
</view>
</view>
</view>
</view>
<view class="modal-content ss-flex-1">
<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="label-text ss-m-b-20">{{ sku1.name }}</view>
<view class="ss-flex ss-col-center ss-flex-wrap">
<button class="ss-reset-button spec-btn" v-for="sku2 in sku1.children" :class="[
{
'ui-BG-Main-Gradient': state.currentSkuArray[sku2.parent_id] == sku2.id,
},
{
'disabled-btn': sku2.disabled == true,
},
]"
:key="sku2.id"
:disabled="sku2.disabled == true"
@tap="onSelectSku(sku2.parent_id, sku2.id)"
>
{{ sku2.name }}
</button>
</view>
</view>
<view class="buy-num-box ss-flex ss-col-center ss-row-between ss-m-b-40">
<view class="label-text">购买数量</view>
<su-number-box
:min="1"
:max="state.selectedSkuPrice.stock"
:step="1"
v-model="state.selectedSkuPrice.goods_num"
@change="onNumberChange($event)"
></su-number-box>
</view>
</scroll-view>
</view>
<view class="modal-footer border-top">
<view
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>
]" :key="sku2.id" :disabled="sku2.disabled == true" @tap="onSelectSku(sku2.parent_id, sku2.id)">
{{ sku2.name }}
</button>
</view>
</view>
<view class="buy-num-box ss-flex ss-col-center ss-row-between ss-m-b-40">
<view class="label-text">购买数量</view>
<su-number-box :min="1" :max="state.selectedSkuPrice.stock" :step="1"
v-model="state.selectedSkuPrice.goods_num" @change="onNumberChange($event)"></su-number-box>
</view>
</scroll-view>
</view>
<view class="modal-footer border-top">
<view 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>
<script setup>
import { computed, reactive, watch } from 'vue';
import sheep from '@/sheep';
import { formatStock, formatPrice } from '@/sheep/hooks/useGoods';
import { isEmpty } from 'lodash';
import {
computed,
reactive,
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 props = defineProps({
goodsInfo: {
type: Object,
default() {},
},
show: {
type: Boolean,
default: false,
},
isScore: {
type: Boolean,
default: false,
},
});
const emits = defineEmits(['change', 'addCart', 'buy', 'close']);
const props = defineProps({
goodsInfo: {
type: Object,
default () {},
},
show: {
type: Boolean,
default: false,
},
isScore: {
type: Boolean,
default: false,
},
});
const state = reactive({
selectedSkuPrice: {},
currentSkuArray: [],
});
//
function onNumberChange(e) {
if (e === 0) return;
if (state.selectedSkuPrice.goods_num === e) return;
state.selectedSkuPrice.goods_num = e;
}
//
if (!props.goodsInfo.is_sku) {
state.selectedSkuPrice = props.goodsInfo.sku_prices[0];
}
const state = reactive({
selectedSkuPrice: {},
currentSkuArray: [],
});
//
function onNumberChange(e) {
if (e === 0) return;
if (state.selectedSkuPrice.goods_num === e) return;
state.selectedSkuPrice.goods_num = e;
}
//
if (!props.goodsInfo.is_sku) {
state.selectedSkuPrice = props.goodsInfo.sku_prices[0];
}
const skuList = props.goodsInfo.skus;
const skuList = props.goodsInfo.skus;
//
const skuPrices = computed(() => {
let skuPrices = props.goodsInfo.sku_prices;
if (props.goodsInfo.is_sku) {
skuPrices.forEach((item) => {
item.goods_sku_id_arr = item.goods_sku_ids.split(',');
});
}
return skuPrices;
});
//
const skuPrices = computed(() => {
let skuPrices = props.goodsInfo.sku_prices;
if (props.goodsInfo.is_sku) {
skuPrices.forEach((item) => {
item.goods_sku_id_arr = item.goods_sku_ids.split(',');
});
}
return skuPrices;
});
watch(
() => state.selectedSkuPrice,
(newVal) => {
emits('change', newVal);
},
{
immediate: true, //
deep: true, //
},
);
watch(
() => state.selectedSkuPrice,
(newVal) => {
emits('change', newVal);
}, {
immediate: true, //
deep: true, //
},
);
const goodsPrice = computed(() => {
let price, score;
if (isEmpty(state.selectedSkuPrice)) {
price = props.goodsInfo.price[0];
score = props.goodsInfo.score || 0;
} else {
price = state.selectedSkuPrice.price;
score = state.selectedSkuPrice.score || 0;
}
return {
price,
score,
};
});
const goodsPrice = computed(() => {
let price, score;
if (isEmpty(state.selectedSkuPrice)) {
price = props.goodsInfo.price[0];
score = props.goodsInfo.score || 0;
} else {
price = state.selectedSkuPrice.price;
score = state.selectedSkuPrice.score || 0;
}
return {
price,
score,
};
});
function onAddCart() {
if (state.selectedSkuPrice.goods_id) {
if (state.selectedSkuPrice.stock <= 0) {
sheep.$helper.toast('库存不足');
} else {
emits('addCart', state.selectedSkuPrice);
}
} else {
sheep.$helper.toast('请选择规格');
}
}
function onAddCart() {
if (state.selectedSkuPrice.goods_id) {
if (state.selectedSkuPrice.stock <= 0) {
sheep.$helper.toast('库存不足');
} else {
emits('addCart', state.selectedSkuPrice);
}
} else {
sheep.$helper.toast('请选择规格');
}
}
function onBuy() {
if (state.selectedSkuPrice.goods_id) {
if (state.selectedSkuPrice.stock <= 0) {
sheep.$helper.toast('库存不足');
} else {
emits('buy', state.selectedSkuPrice);
}
} else {
sheep.$helper.toast('请选择规格');
}
}
//
function changeDisabled(isChecked = false, pid = 0, skuId = 0) {
let newPrice = []; // skuPrice
function onBuy() {
if (state.selectedSkuPrice.goods_id) {
if (state.selectedSkuPrice.stock <= 0) {
sheep.$helper.toast('库存不足');
} else {
emits('buy', state.selectedSkuPrice);
}
} else {
sheep.$helper.toast('请选择规格');
}
}
//
function changeDisabled(isChecked = false, pid = 0, skuId = 0) {
let newPrice = []; // skuPrice
if (isChecked) {
//
// skuPrice
for (let price of skuPrices.value) {
if (price.stock <= 0) {
// this.goodsNum uni-number-box stock goods_num
continue;
}
if (price.goods_sku_id_arr.indexOf(skuId.toString()) >= 0) {
newPrice.push(price);
}
}
} else {
//
// skuPrice
newPrice = getCanUseSkuPrice();
}
if (isChecked) {
//
// skuPrice
for (let price of skuPrices.value) {
if (price.stock <= 0) {
// this.goodsNum uni-number-box stock goods_num
continue;
}
if (price.goods_sku_id_arr.indexOf(skuId.toString()) >= 0) {
newPrice.push(price);
}
}
} else {
//
// skuPrice
newPrice = getCanUseSkuPrice();
}
// id
let noChooseSkuIds = [];
for (let price of newPrice) {
noChooseSkuIds = noChooseSkuIds.concat(price.goods_sku_id_arr);
}
// id
let noChooseSkuIds = [];
for (let price of newPrice) {
noChooseSkuIds = noChooseSkuIds.concat(price.goods_sku_id_arr);
}
//
noChooseSkuIds = Array.from(new Set(noChooseSkuIds));
//
noChooseSkuIds = Array.from(new Set(noChooseSkuIds));
if (isChecked) {
//
let index = noChooseSkuIds.indexOf(skuId.toString());
noChooseSkuIds.splice(index, 1);
} else {
//
state.currentSkuArray.forEach((sku) => {
if (sku.toString() != '') {
// sku
let index = noChooseSkuIds.indexOf(sku.toString());
if (index >= 0) {
// sku noChooseSkuIds
noChooseSkuIds.splice(index, 1);
}
}
});
}
if (isChecked) {
//
let index = noChooseSkuIds.indexOf(skuId.toString());
noChooseSkuIds.splice(index, 1);
} else {
//
state.currentSkuArray.forEach((sku) => {
if (sku.toString() != '') {
// sku
let index = noChooseSkuIds.indexOf(sku.toString());
if (index >= 0) {
// sku noChooseSkuIds
noChooseSkuIds.splice(index, 1);
}
}
});
}
//
let chooseSkuKey = [];
if (!isChecked) {
//
state.currentSkuArray.forEach((sku, key) => {
if (sku != '') {
// sku
chooseSkuKey.push(key);
}
});
} else {
//
chooseSkuKey = [pid];
}
//
let chooseSkuKey = [];
if (!isChecked) {
//
state.currentSkuArray.forEach((sku, key) => {
if (sku != '') {
// sku
chooseSkuKey.push(key);
}
});
} else {
//
chooseSkuKey = [pid];
}
for (let i in skuList) {
//
if (chooseSkuKey.indexOf(skuList[i]['id']) >= 0) {
continue;
}
for (let i in skuList) {
//
if (chooseSkuKey.indexOf(skuList[i]['id']) >= 0) {
continue;
}
for (let j in skuList[i]['children']) {
// id
if (noChooseSkuIds.indexOf(skuList[i]['children'][j]['id'].toString()) >= 0) {
skuList[i]['children'][j]['disabled'] = false;
} else {
skuList[i]['children'][j]['disabled'] = true;
}
}
}
}
// skuPrice
function getCanUseSkuPrice() {
let newPrice = [];
for (let j in skuList[i]['children']) {
// id
if (noChooseSkuIds.indexOf(skuList[i]['children'][j]['id'].toString()) >= 0) {
skuList[i]['children'][j]['disabled'] = false;
} else {
skuList[i]['children'][j]['disabled'] = true;
}
}
}
}
// skuPrice
function getCanUseSkuPrice() {
let newPrice = [];
for (let price of skuPrices.value) {
if (price.stock <= 0) {
// || price.stock < this.goodsNum uni-number-box stock goods_num
continue;
}
var isOk = true;
for (let price of skuPrices.value) {
if (price.stock <= 0) {
// || price.stock < this.goodsNum uni-number-box stock goods_num
continue;
}
var isOk = true;
state.currentSkuArray.forEach((sku) => {
// sku skuPrice ,
if (sku.toString() != '' && price.goods_sku_id_arr.indexOf(sku.toString()) < 0) {
isOk = false;
}
});
state.currentSkuArray.forEach((sku) => {
// sku skuPrice ,
if (sku.toString() != '' && price.goods_sku_id_arr.indexOf(sku.toString()) < 0) {
isOk = false;
}
});
if (isOk) {
newPrice.push(price);
}
}
if (isOk) {
newPrice.push(price);
}
}
return newPrice;
}
//
function onSelectSku(pid, skuId) {
//
let isChecked = true; // or
if (state.currentSkuArray[pid] != undefined && state.currentSkuArray[pid] == skuId) {
// ''
isChecked = false;
state.currentSkuArray.splice(pid, 1, '');
} else {
//
state.currentSkuArray[pid] = skuId;
}
return newPrice;
}
//
function onSelectSku(pid, skuId) {
//
let isChecked = true; // or
if (state.currentSkuArray[pid] != undefined && state.currentSkuArray[pid] == skuId) {
// ''
isChecked = false;
state.currentSkuArray.splice(pid, 1, '');
} else {
//
state.currentSkuArray[pid] = skuId;
}
let chooseSkuId = []; //
state.currentSkuArray.forEach((sku) => {
if (sku != '') {
// sku
chooseSkuId.push(sku);
}
});
let chooseSkuId = []; //
state.currentSkuArray.forEach((sku) => {
if (sku != '') {
// sku
chooseSkuId.push(sku);
}
});
// skuPric
let newPrice = getCanUseSkuPrice();
// skuPric
let newPrice = getCanUseSkuPrice();
//
if (chooseSkuId.length == skuList.length && newPrice.length) {
newPrice[0].goods_num = state.selectedSkuPrice.goods_num || 1;
state.selectedSkuPrice = newPrice[0];
} else {
state.selectedSkuPrice = {};
}
//
if (chooseSkuId.length == skuList.length && newPrice.length) {
newPrice[0].goods_num = state.selectedSkuPrice.goods_num || 1;
state.selectedSkuPrice = newPrice[0];
} else {
state.selectedSkuPrice = {};
}
//
changeDisabled(isChecked, pid, skuId);
}
//
changeDisabled(isChecked, pid, skuId);
}
changeDisabled(false);
changeDisabled(false);
</script>
<style lang="scss" scoped>
//
.buy-box {
padding: 10rpx 0;
//
.buy-box {
padding: 10rpx 0;
.add-btn {
width: 356rpx;
height: 80rpx;
border-radius: 40rpx 0 0 40rpx;
background-color: var(--ui-BG-Main-light);
color: var(--ui-BG-Main);
}
.add-btn {
width: 356rpx;
height: 80rpx;
border-radius: 40rpx 0 0 40rpx;
background-color: var(--ui-BG-Main-light);
color: var(--ui-BG-Main);
}
.buy-btn {
width: 356rpx;
height: 80rpx;
border-radius: 0 40rpx 40rpx 0;
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
color: #fff;
}
.buy-btn {
width: 356rpx;
height: 80rpx;
border-radius: 0 40rpx 40rpx 0;
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
color: #fff;
}
.score-btn {
width: 100%;
margin: 0 20rpx;
height: 80rpx;
border-radius: 40rpx;
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
color: #fff;
}
}
.score-btn {
width: 100%;
margin: 0 20rpx;
height: 80rpx;
border-radius: 40rpx;
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
color: #fff;
}
}
.ss-modal-box {
border-radius: 30rpx 30rpx 0 0;
max-height: 1000rpx;
.ss-modal-box {
border-radius: 30rpx 30rpx 0 0;
max-height: 1000rpx;
.modal-header {
position: relative;
padding: 80rpx 20rpx 40rpx;
.modal-header {
position: relative;
padding: 80rpx 20rpx 40rpx;
.sku-image {
width: 160rpx;
height: 160rpx;
border-radius: 10rpx;
}
.sku-image {
width: 160rpx;
height: 160rpx;
border-radius: 10rpx;
}
.header-right {
height: 160rpx;
}
.header-right {
height: 160rpx;
}
.close-icon {
position: absolute;
top: 10rpx;
right: 20rpx;
font-size: 46rpx;
opacity: 0.2;
}
.close-icon {
position: absolute;
top: 10rpx;
right: 20rpx;
font-size: 46rpx;
opacity: 0.2;
}
.goods-title {
font-size: 28rpx;
font-weight: 500;
line-height: 42rpx;
}
.goods-title {
font-size: 28rpx;
font-weight: 500;
line-height: 42rpx;
}
.score-img {
width: 36rpx;
height: 36rpx;
margin: 0 4rpx;
}
.score-img {
width: 36rpx;
height: 36rpx;
margin: 0 4rpx;
}
.score-text {
font-size: 30rpx;
font-weight: 500;
color: $red;
font-family: OPPOSANS;
}
.score-text {
font-size: 30rpx;
font-weight: 500;
color: $red;
font-family: OPPOSANS;
}
.price-text {
font-size: 30rpx;
font-weight: 500;
color: $red;
font-family: OPPOSANS;
.price-text {
font-size: 30rpx;
font-weight: 500;
color: $red;
font-family: OPPOSANS;
&::before {
content: '¥';
font-size: 30rpx;
font-weight: 500;
color: $red;
}
}
&::before {
content: '¥';
font-size: 30rpx;
font-weight: 500;
color: $red;
}
}
.stock-text {
font-size: 26rpx;
color: #999999;
}
}
.stock-text {
font-size: 26rpx;
color: #999999;
}
}
.modal-content {
padding: 0 20rpx;
.modal-content {
padding: 0 20rpx;
.modal-content-scroll {
max-height: 600rpx;
.modal-content-scroll {
max-height: 600rpx;
.label-text {
font-size: 26rpx;
font-weight: 500;
}
.label-text {
font-size: 26rpx;
font-weight: 500;
}
.buy-num-box {
height: 100rpx;
}
.buy-num-box {
height: 100rpx;
}
.spec-btn {
height: 60rpx;
min-width: 100rpx;
padding: 0 30rpx;
background: #f4f4f4;
border-radius: 30rpx;
color: #434343;
font-size: 26rpx;
margin-right: 10rpx;
margin-bottom: 10rpx;
}
.spec-btn {
height: 60rpx;
min-width: 100rpx;
padding: 0 30rpx;
background: #f4f4f4;
border-radius: 30rpx;
color: #434343;
font-size: 26rpx;
margin-right: 10rpx;
margin-bottom: 10rpx;
}
.disabled-btn {
font-weight: 400;
color: #c6c6c6;
background: #f8f8f8;
}
}
}
}
</style>
.disabled-btn {
font-weight: 400;
color: #c6c6c6;
background: #f8f8f8;
}
}
}
}
</style>

View File

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

View File

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