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

feat:商品卡片添加配送方式，支付添加货到付款

pull/8/head
kele 2023-03-07 14:28:24 +08:00
parent d18e998923
commit fa77333ce5
8 changed files with 148 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
pages/commission/goods.vue
View File

@ -12,7 +12,7 @@
priceColor="#333"
@tap="sheep.$router.go('/pages/goods/index', { id: item.id })"
>
<template #bottom>
<template #rightBottom>
<view class="ss-flex ss-row-between">
<view class="commission-num">预计佣金：￥{{ item.commission }}</view>
<button

2
pages/commission/order.vue
View File

@ -111,7 +111,7 @@
:price="item.order_item.goods_price"
:num="item.order_item.goods_num"
>
<template #bottom>
<template #rightBottom>
<view class="ss-flex commission-box ss-row-between ss-m-t-10">
<view class="ss-flex">
<text class="name">佣金：</text>

32
pages/order/confirm.vue
View File

@ -1,11 +1,15 @@
<template>
<s-layout title="确认订单">
<view class="bg-white address-box ss-m-b-14 ss-r-b-20" @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>
</view>
<view class="bg-white order-card-box ss-m-b-14">
<view class="order-card-box ss-m-b-14">
<s-goods-item
v-for="item in state.orderInfo.goods_list"
:key="item.goods_id"
@ -14,15 +18,19 @@
:skuText="item.current_sku_price?.goods_sku_text"
:price="item.current_sku_price.price"
:num="item.goods_num"
></s-goods-item>
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">
<view class="item-title">配送方式</view>
<view class="ss-flex ss-col-center">
<text class="item-value">物流快递</text>
</view>
</view>
<view class="order-item ss-flex ss-col-center ss-row-between ss-p-x-20">
<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
@ -36,7 +44,7 @@
</view>
</view>
<!-- 合计 -->
<view class="bg-white total-card-box ss-p-20 ss-m-b-14">
<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>
@ -225,7 +233,7 @@
// 提交订单/立即兑换
function onConfirm() {
if (!state.orderPayload.address_id) {
if (!state.orderPayload.address_id && state.orderInfo.need_address === 1) {
sheep.$helper.toast('请选择收货地址');
return;
}

34
pages/order/detail.vue
View File

@ -49,17 +49,17 @@
</view>
<!-- 收货地址 -->
<view class="order-address-box">
<view class="order-address-box" v-if="state.orderInfo.address">
<view class="ss-flex ss-col-center">
<text class="address-username">
{{ state.orderInfo.address?.consignee }}
{{ state.orderInfo.address.consignee }}
</text>
<text class="address-phone">{{ state.orderInfo.address?.mobile }}</text>
<text class="address-phone">{{ state.orderInfo.address.mobile }}</text>
</view>
<view class="address-detail">{{ addressText }}</view>
</view>
<view class="detail-goods">
<view class="detail-goods" :style="[{ marginTop: state.orderInfo.address ? '0' : '-40rpx' }]">
<!-- 订单信息 -->
<view class="order-list" v-for="item in state.orderInfo.items" :key="item.goods_id">
<view class="order-card">
@ -72,6 +72,14 @@
:score="state.orderInfo.score_amount"
:num="item.goods_num"
>
<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>
<template #priceSuffix>
<button class="ss-reset-button tag-btn" v-if="item.status_text">
{{ item.status_text }}
@ -95,7 +103,7 @@
<text class="title">下单时间：</text>
<text class="detail">{{ state.orderInfo.create_time }}</text>
</view>
<view class="notice-item">
<view class="notice-item" v-if="state.orderInfo.paid_time">
<text class="title">支付时间：</text>
<text class="detail">{{ state.orderInfo.paid_time || '-' }}</text>
</view>
@ -140,17 +148,27 @@
</view>
<view class="notice-item all-rpice-item ss-flex ss-m-t-20">
<text class="title">{{
['unpaid', 'cancel', 'closed'].includes(state.orderInfo.status) ? '需付款' : '已付款'
['unpaid', 'cancel', 'closed','pending'].includes(state.orderInfo.status) ? '需付款' : '已付款'
}}</text>
<text class="detail all-price" v-if="Number(state.orderInfo.pay_fee) > 0"
>￥{{ state.orderInfo.pay_fee }}</text
>
<view
v-if="state.orderInfo.score_amount && Number(state.orderInfo.pay_fee) > 0 && !['unpaid', 'cancel', 'closed'].includes(state.orderInfo.status)"
v-if="
state.orderInfo.score_amount &&
Number(state.orderInfo.pay_fee) > 0 &&
!['unpaid', 'cancel', 'closed'].includes(state.orderInfo.status)
"
class="detail all-price"
>+</view
>
<view class="price-text ss-flex ss-col-center" v-if="state.orderInfo.score_amount && !['unpaid', 'cancel', 'closed'].includes(state.orderInfo.status)">
<view
class="price-text ss-flex ss-col-center"
v-if="
state.orderInfo.score_amount &&
!['unpaid', 'cancel', 'closed'].includes(state.orderInfo.status)
"
>
<image
:src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
class="score-img"

67
pages/pay/index.vue
View File

@ -13,17 +13,33 @@
</view>
<view class="modal-content ss-flex-1">
<view class="pay-title ss-p-l-30 ss-m-y-30">选择支付方式</view>
<view class="pay-type-item border-bottom" v-for="item in payMethods" :key="item.title">
<view
class="pay-type-item border-bottom"
v-for="item in state.payMethods"
:key="item.title"
>
<view
class="pay-item ss-flex ss-col-center ss-row-between ss-p-x-30"
:class="{ 'disabled-pay-item': item.disabled }"
v-if="
allowedPayment.includes(item.value) &&
!(state.orderType === 'recharge' && item.value === 'money')
"
@tap="state.payment = item.value"
@tap="onTapPay(item.disabled, item.value)"
>
<view class="ss-flex ss-col-center">
<image class="pay-icon" :src="sheep.$url.static(item.icon)" mode="aspectFit"></image>
<image
class="pay-icon"
v-if="item.disabled"
:src="sheep.$url.static('/assets/addons/shopro/frontend_img/pay/cod_disabled.png')"
mode="aspectFit"
></image>
<image
class="pay-icon"
v-else
:src="sheep.$url.static(item.icon)"
mode="aspectFit"
></image>
<text class="pay-title">{{ item.title }}</text>
</view>
<view class="check-box ss-flex ss-col-center ss-p-l-10">
@ -75,6 +91,7 @@
payment: '',
orderInfo: {},
payStatus: 0, // 0=检测支付环境, -2=未查询到支付单信息， -1=支付已过期， 1=待支付，2=订单已支付
payMethods: [],
});
const allowedPayment = computed(() => sheep.$store('app').platform.payment);
const payMethods = [
@ -82,21 +99,31 @@
icon: '/static/img/shop/wechat_pay.png',
title: '微信支付',
value: 'wechat',
disabled: false,
},
{
icon: '/static/img/shop/ali_pay.png',
title: '支付宝支付',
value: 'alipay',
disabled: false,
},
{
icon: '/static/img/shop/wallet_pay.png',
title: '余额支付',
value: 'money',
disabled: false,
},
{
icon: '/static/img/shop/apple_pay.png',
title: 'Apple Pay',
value: 'apple',
disabled: false,
},
{
icon: '/assets/addons/shopro/frontend_img/pay/cod.png',
title: '线下支付',
value: 'offline',
disabled: false,
},
];
@ -151,19 +178,48 @@
state.payStatus = 2;
}
function onTapPay(disabled, value) {
if (disabled) {
state.payment = '';
} else {
state.payment = value;
}
}
async function setRechargeOrder(id) {
const { data, error } = await sheep.$api.trade.order(id);
if (error === 0) {
state.orderInfo = data;
payMethods.forEach((item, index, array) => {
if (item.value === 'offline') {
array.splice(index, 1);
}
});
state.payMethods = payMethods;
checkPayStatus();
} else {
state.payStatus = -2;
}
}
async function setGoodsOrder(id) {
const { data, error } = await sheep.$api.order.detail(id);
if (error === 0) {
state.orderInfo = data;
if (state.orderInfo.ext.offline_status === 'none') {
payMethods.forEach((item, index, array) => {
if (item.value === 'offline') {
array.splice(index, 1);
}
});
} else if (state.orderInfo.ext.offline_status === 'disabled') {
payMethods.forEach((item) => {
if (item.value === 'offline') {
item.disabled = true;
}
});
}
state.payMethods = payMethods;
checkPayStatus();
} else {
state.payStatus = -2;
@ -259,6 +315,11 @@
.pay-item {
height: 86rpx;
}
.disabled-pay-item {
.pay-title {
color: #999999;
}
}
.userInfo-money {
font-size: 26rpx;

4
pages/pay/result.vue
View File

@ -13,7 +13,9 @@
v-if="['failed', 'closed'].includes(payResult)"
:src="sheep.$url.static('/static/img/shop/order/order_paty_fail.gif')"
></image>
<view class="tip-text ss-m-b-30" v-if="payResult == 'success'">支付成功</view>
<view class="tip-text ss-m-b-30" v-if="payResult == 'success'">{{
state.orderInfo.pay_mode === 'offline' ? '下单成功' : '支付成功'
}}</view>
<view class="tip-text ss-m-b-30" v-if="payResult == 'failed'">支付失败</view>
<view class="tip-text ss-m-b-30" v-if="payResult == 'closed'">该订单已关闭</view>
<view class="tip-text ss-m-b-30" v-if="payResult == 'waiting'">检测支付结果...</view>

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

@ -1,7 +1,10 @@
<template>
<view>
<slot name="top"></slot>
</view>
<view
class="ss-order-card-warp ss-flex ss-col-stretch ss-row-between bg-white"
:style="[{ borderRadius: radius + 'rpx' }]"
:style="[{ borderRadius: radius + 'rpx', marginBottom: marginBottom + 'rpx' }]"
>
<view class="img-box ss-m-r-24">
<image class="order-img" :src="sheep.$url.cdn(img)" mode="aspectFill"></image>
@ -39,8 +42,8 @@
<view class="tool-box">
<slot name="tool"></slot>
</view>
<view class="bottom-box">
<slot name="bottom"></slot>
<view>
<slot name="rightBottom"></slot>
</view>
</view>
</view>
@ -98,6 +101,10 @@
type: [String],
default: '',
},
marginBottom: {
type: [String],
default: '',
},
});
const skuString = computed(() => {
if (!props.skuText) {

30
sheep/platform/pay.js
View File

@ -7,7 +7,7 @@ import { getRootUrl } from '@/sheep/helper';
/**
* 支付
*
* @param {String} payment = ['wechat','alipay','wallet'] - 支付方式
* @param {String} payment = ['wechat','alipay','wallet','offline'] - 支付方式
* @param {String} orderType = ['goods','recharge','groupon'] - 订单类型
* @param {String} orderSN - 订单号
*/
@ -32,6 +32,9 @@ export default class SheepPay {
money: () => {
this.moneyPay();
},
offline: () => {
this.offlinePay();
}
},
WechatMiniProgram: {
wechat: () => {
@ -43,6 +46,9 @@ export default class SheepPay {
money: () => {
this.moneyPay();
},
offline: () => {
this.offlinePay();
}
},
App: {
wechat: () => {
@ -54,6 +60,9 @@ export default class SheepPay {
money: () => {
this.moneyPay();
},
offline: () => {
this.offlinePay();
}
},
H5: {
wechat: () => {
@ -65,6 +74,9 @@ export default class SheepPay {
money: () => {
this.moneyPay();
},
offline: () => {
this.offlinePay();
}
},
};
return payAction[sheep.$platform.name][this.payment]();
@ -122,9 +134,8 @@ export default class SheepPay {
async wechatWapPay() {
const { error, data } = await this.prepay();
if (error === 0) {
const redirect_url = `${getRootUrl()}pages/pay/result?orderSN=${this.orderSN}&payment=${
this.payment
}`;
const redirect_url = `${getRootUrl()}pages/pay/result?orderSN=${this.orderSN}&payment=${this.payment
}`;
location.href = `${data.pay_data.h5_url}&redirect_url=${encodeURIComponent(redirect_url)}`;
}
}
@ -133,9 +144,8 @@ export default class SheepPay {
async redirectPay() {
let { error, data } = await this.prepay();
if (error === 0) {
const redirect_url = `${getRootUrl()}pages/pay/result?orderSN=${this.orderSN}&payment=${
this.payment
}`;
const redirect_url = `${getRootUrl()}pages/pay/result?orderSN=${this.orderSN}&payment=${this.payment
}`;
location.href = data.pay_data + encodeURIComponent(redirect_url);
}
}
@ -168,6 +178,12 @@ export default class SheepPay {
error === 0 && this.payResult('success');
}
// 货到付款
async offlinePay() {
const { code } = await this.prepay();
code === 1 && this.payResult('success');
}
// 支付宝复制链接支付
async copyPayLink() {
let that = this;