通过微信开发者工具 商城模板 创建新小程序
This commit is contained in:
210
mini-program/pages/order/components/order-button-bar/index.js
Normal file
210
mini-program/pages/order/components/order-button-bar/index.js
Normal file
@@ -0,0 +1,210 @@
|
||||
import Toast from 'tdesign-miniprogram/toast/index';
|
||||
import Dialog from 'tdesign-miniprogram/dialog/index';
|
||||
import { OrderButtonTypes } from '../../config';
|
||||
|
||||
Component({
|
||||
options: {
|
||||
addGlobalClass: true,
|
||||
},
|
||||
properties: {
|
||||
order: {
|
||||
type: Object,
|
||||
observer(order) {
|
||||
// 判定有传goodsIndex ，则认为是商品button bar, 仅显示申请售后按钮
|
||||
if (this.properties?.goodsIndex !== null) {
|
||||
const goods = order.goodsList[Number(this.properties.goodsIndex)];
|
||||
this.setData({
|
||||
buttons: {
|
||||
left: [],
|
||||
right: (goods.buttons || []).filter((b) => b.type == OrderButtonTypes.APPLY_REFUND),
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
// 订单的button bar 不显示申请售后按钮
|
||||
const buttonsRight = (order.buttons || [])
|
||||
// .filter((b) => b.type !== OrderButtonTypes.APPLY_REFUND)
|
||||
.map((button) => {
|
||||
//邀请好友拼团按钮
|
||||
if (button.type === OrderButtonTypes.INVITE_GROUPON && order.groupInfoVo) {
|
||||
const {
|
||||
groupInfoVo: { groupId, promotionId, remainMember, groupPrice },
|
||||
goodsList,
|
||||
} = order;
|
||||
const goodsImg = goodsList[0] && goodsList[0].imgUrl;
|
||||
const goodsName = goodsList[0] && goodsList[0].name;
|
||||
return {
|
||||
...button,
|
||||
openType: 'share',
|
||||
dataShare: {
|
||||
goodsImg,
|
||||
goodsName,
|
||||
groupId,
|
||||
promotionId,
|
||||
remainMember,
|
||||
groupPrice,
|
||||
storeId: order.storeId,
|
||||
},
|
||||
};
|
||||
}
|
||||
return button;
|
||||
});
|
||||
// 删除订单按钮单独挪到左侧
|
||||
const deleteBtnIndex = buttonsRight.findIndex((b) => b.type === OrderButtonTypes.DELETE);
|
||||
let buttonsLeft = [];
|
||||
if (deleteBtnIndex > -1) {
|
||||
buttonsLeft = buttonsRight.splice(deleteBtnIndex, 1);
|
||||
}
|
||||
this.setData({
|
||||
buttons: {
|
||||
left: buttonsLeft,
|
||||
right: buttonsRight,
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
goodsIndex: {
|
||||
type: Number,
|
||||
value: null,
|
||||
},
|
||||
isBtnMax: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
},
|
||||
|
||||
data: {
|
||||
order: {},
|
||||
buttons: {
|
||||
left: [],
|
||||
right: [],
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 点击【订单操作】按钮，根据按钮类型分发
|
||||
onOrderBtnTap(e) {
|
||||
const { type } = e.currentTarget.dataset;
|
||||
switch (type) {
|
||||
case OrderButtonTypes.DELETE:
|
||||
this.onDelete(this.data.order);
|
||||
break;
|
||||
case OrderButtonTypes.CANCEL:
|
||||
this.onCancel(this.data.order);
|
||||
break;
|
||||
case OrderButtonTypes.CONFIRM:
|
||||
this.onConfirm(this.data.order);
|
||||
break;
|
||||
case OrderButtonTypes.PAY:
|
||||
this.onPay(this.data.order);
|
||||
break;
|
||||
case OrderButtonTypes.APPLY_REFUND:
|
||||
this.onApplyRefund(this.data.order);
|
||||
break;
|
||||
case OrderButtonTypes.VIEW_REFUND:
|
||||
this.onViewRefund(this.data.order);
|
||||
break;
|
||||
case OrderButtonTypes.COMMENT:
|
||||
this.onAddComment(this.data.order);
|
||||
break;
|
||||
case OrderButtonTypes.INVITE_GROUPON:
|
||||
//分享邀请好友拼团
|
||||
break;
|
||||
case OrderButtonTypes.REBUY:
|
||||
this.onBuyAgain(this.data.order);
|
||||
}
|
||||
},
|
||||
|
||||
onCancel() {
|
||||
Toast({
|
||||
context: this,
|
||||
selector: '#t-toast',
|
||||
message: '你点击了取消订单',
|
||||
icon: 'check-circle',
|
||||
});
|
||||
},
|
||||
|
||||
onConfirm() {
|
||||
Dialog.confirm({
|
||||
title: '确认是否已经收到货？',
|
||||
content: '',
|
||||
confirmBtn: '确认收货',
|
||||
cancelBtn: '取消',
|
||||
})
|
||||
.then(() => {
|
||||
Toast({
|
||||
context: this,
|
||||
selector: '#t-toast',
|
||||
message: '你确认了确认收货',
|
||||
icon: 'check-circle',
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
Toast({
|
||||
context: this,
|
||||
selector: '#t-toast',
|
||||
message: '你取消了确认收货',
|
||||
icon: 'check-circle',
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
onPay() {
|
||||
Toast({
|
||||
context: this,
|
||||
selector: '#t-toast',
|
||||
message: '你点击了去支付',
|
||||
icon: 'check-circle',
|
||||
});
|
||||
},
|
||||
|
||||
onBuyAgain() {
|
||||
Toast({
|
||||
context: this,
|
||||
selector: '#t-toast',
|
||||
message: '你点击了再次购买',
|
||||
icon: 'check-circle',
|
||||
});
|
||||
},
|
||||
|
||||
onApplyRefund(order) {
|
||||
const goods = order.goodsList[this.properties.goodsIndex];
|
||||
const params = {
|
||||
orderNo: order.orderNo,
|
||||
skuId: goods?.skuId ?? '19384938948343',
|
||||
spuId: goods?.spuId ?? '28373847384343',
|
||||
orderStatus: order.status,
|
||||
logisticsNo: order.logisticsNo,
|
||||
price: goods?.price ?? 89,
|
||||
num: goods?.num ?? 89,
|
||||
createTime: order.createTime,
|
||||
orderAmt: order.totalAmount,
|
||||
payAmt: order.amount,
|
||||
canApplyReturn: true,
|
||||
};
|
||||
const paramsStr = Object.keys(params)
|
||||
.map((k) => `${k}=${params[k]}`)
|
||||
.join('&');
|
||||
wx.navigateTo({ url: `/pages/order/apply-service/index?${paramsStr}` });
|
||||
},
|
||||
|
||||
onViewRefund() {
|
||||
Toast({
|
||||
context: this,
|
||||
selector: '#t-toast',
|
||||
message: '你点击了查看退款',
|
||||
icon: '',
|
||||
});
|
||||
},
|
||||
|
||||
/** 添加订单评论 */
|
||||
onAddComment(order) {
|
||||
const imgUrl = order?.goodsList?.[0]?.thumb;
|
||||
const title = order?.goodsList?.[0]?.title;
|
||||
const specs = order?.goodsList?.[0]?.specs;
|
||||
wx.navigateTo({
|
||||
url: `/pages/goods/comments/create/index?specs=${specs}&title=${title}&orderNo=${order?.orderNo}&imgUrl=${imgUrl}`,
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"t-button": "tdesign-miniprogram/button/button",
|
||||
"t-toast": "tdesign-miniprogram/toast/toast",
|
||||
"t-dialog": "tdesign-miniprogram/dialog/dialog"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
<view class="btn-bar">
|
||||
<view class="left">
|
||||
<t-button
|
||||
wx:for="{{buttons.left}}"
|
||||
wx:key="type"
|
||||
wx:for-item="leftBtn"
|
||||
size="extra-small"
|
||||
shape="round"
|
||||
t-class="{{isBtnMax ? 't-button--max':'t-button'}} order-btn delete-btn"
|
||||
hover-class="order-btn--active"
|
||||
catchtap="onOrderBtnTap"
|
||||
data-type="{{leftBtn.type}}"
|
||||
>
|
||||
{{leftBtn.name}}
|
||||
</t-button>
|
||||
</view>
|
||||
<view class="right">
|
||||
<t-button
|
||||
wx:for="{{buttons.right}}"
|
||||
wx:key="type"
|
||||
wx:for-item="rightBtn"
|
||||
size="extra-small"
|
||||
variant="{{ rightBtn.primary ? 'base' : 'outline'}}"
|
||||
shape="round"
|
||||
t-class="{{isBtnMax ? 't-button--max':'t-button'}} order-btn {{rightBtn.primary ? 'primary' : 'normal'}}"
|
||||
hover-class="order-btn--active"
|
||||
catchtap="onOrderBtnTap"
|
||||
data-type="{{rightBtn.type}}"
|
||||
open-type="{{ rightBtn.openType }}"
|
||||
data-share="{{ rightBtn.dataShare }}"
|
||||
>
|
||||
{{rightBtn.name}}
|
||||
</t-button>
|
||||
</view>
|
||||
</view>
|
||||
<t-toast id="t-toast" />
|
||||
<t-dialog id="t-dialog" />
|
||||
@@ -0,0 +1,54 @@
|
||||
:host {
|
||||
width: 100%;
|
||||
}
|
||||
.btn-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
line-height: 1;
|
||||
}
|
||||
.btn-bar .order-btn {
|
||||
line-height: 1;
|
||||
/* border-radius: unset; */
|
||||
/* min-width: 160rpx; */
|
||||
}
|
||||
|
||||
.btn-bar .right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.btn-bar .t-button {
|
||||
width: 160rpx;
|
||||
font-weight: 400;
|
||||
margin-left: 24rpx;
|
||||
}
|
||||
.btn-bar .t-button--max {
|
||||
width: 176rpx;
|
||||
margin-left: 24rpx;
|
||||
|
||||
--td-button-extra-small-height: 72rpx;
|
||||
}
|
||||
|
||||
.btn-bar .left .delete-btn {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.btn-bar .left .delete-btn::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.btn-bar .right .normal {
|
||||
--td-button-default-color: #333333;
|
||||
--td-button-default-border-color: #dddddd;
|
||||
}
|
||||
|
||||
.btn-bar .right .primary {
|
||||
--td-button-default-color: #fff;
|
||||
--td-button-default-bg-color: #fa4126;
|
||||
--td-button-default-border-color: #fa4126;
|
||||
--td-button-default-active-bg-color: #fa42269c;
|
||||
}
|
||||
|
||||
.t-button {
|
||||
--td-button-default-color: #000;
|
||||
--td-button-primary-text-color: #fa4126;
|
||||
}
|
||||
Reference in New Issue
Block a user