通过微信开发者工具 商城模板 创建新小程序
This commit is contained in:
@@ -0,0 +1,95 @@
|
||||
import Dialog from 'tdesign-miniprogram/dialog/index';
|
||||
import Toast from 'tdesign-miniprogram/toast/index';
|
||||
|
||||
import { cancelRights } from '../../after-service-detail/api';
|
||||
import { ServiceButtonTypes } from '../../config';
|
||||
|
||||
Component({
|
||||
properties: {
|
||||
service: {
|
||||
type: Object,
|
||||
observer(service) {
|
||||
const buttonsRight = service.buttons || service.buttonVOs || [];
|
||||
this.setData({
|
||||
buttons: {
|
||||
left: [],
|
||||
right: buttonsRight,
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
data: {
|
||||
service: {},
|
||||
buttons: {
|
||||
left: [],
|
||||
right: [],
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 点击【订单操作】按钮，根据按钮类型分发
|
||||
onServiceBtnTap(e) {
|
||||
const { type } = e.currentTarget.dataset;
|
||||
switch (type) {
|
||||
case ServiceButtonTypes.REVOKE:
|
||||
this.onConfirm(this.data.service);
|
||||
break;
|
||||
case ServiceButtonTypes.FILL_TRACKING_NO:
|
||||
this.onFillTrackingNo(this.data.service);
|
||||
break;
|
||||
case ServiceButtonTypes.CHANGE_TRACKING_NO:
|
||||
this.onChangeTrackingNo(this.data.service);
|
||||
break;
|
||||
case ServiceButtonTypes.VIEW_DELIVERY:
|
||||
this.viewDelivery(this.data.service);
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
onFillTrackingNo(service) {
|
||||
wx.navigateTo({
|
||||
url: `/pages/order/fill-tracking-no/index?rightsNo=${service.id}`,
|
||||
});
|
||||
},
|
||||
|
||||
viewDelivery(service) {
|
||||
wx.navigateTo({
|
||||
url: `/pages/order/delivery-detail/index?data=${JSON.stringify(
|
||||
service.logistics || service.logisticsVO,
|
||||
)}&source=2`,
|
||||
});
|
||||
},
|
||||
|
||||
onChangeTrackingNo(service) {
|
||||
wx.navigateTo({
|
||||
url: `/pages/order/fill-tracking-no/index?rightsNo=${
|
||||
service.id
|
||||
}&logisticsNo=${service.logisticsNo}&logisticsCompanyName=${
|
||||
service.logisticsCompanyName
|
||||
}&logisticsCompanyCode=${service.logisticsCompanyCode}&remark=${
|
||||
service.remark || ''
|
||||
}`,
|
||||
});
|
||||
},
|
||||
|
||||
onConfirm() {
|
||||
Dialog.confirm({
|
||||
title: '是否撤销退货申请？',
|
||||
content: '',
|
||||
confirmBtn: '撤销申请',
|
||||
cancelBtn: '不撤销',
|
||||
}).then(() => {
|
||||
const params = { rightsNo: this.data.service.id };
|
||||
return cancelRights(params).then(() => {
|
||||
Toast({
|
||||
context: this,
|
||||
selector: '#t-toast',
|
||||
message: '你确认撤销申请',
|
||||
});
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"t-button": "tdesign-miniprogram/button/button"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
<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="order-btn delete-btn"
|
||||
catchtap="onServiceBtnTap"
|
||||
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="order-btn {{rightBtn.primary ? 'primary' : 'normal'}}"
|
||||
catchtap="onServiceBtnTap"
|
||||
data-type="{{rightBtn.type}}"
|
||||
open-type="{{ rightBtn.openType }}"
|
||||
data-share="{{ rightBtn.dataShare }}"
|
||||
>
|
||||
{{rightBtn.name}}
|
||||
</t-button>
|
||||
</view>
|
||||
</view>
|
||||
@@ -0,0 +1,43 @@
|
||||
:host {
|
||||
width: 100%;
|
||||
}
|
||||
.btn-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
line-height: 1;
|
||||
}
|
||||
.btn-bar .order-btn {
|
||||
background-color: inherit;
|
||||
font-size: 26rpx;
|
||||
padding: 16rpx 28rpx;
|
||||
line-height: 1;
|
||||
border-radius: unset;
|
||||
min-width: 160rpx;
|
||||
border-radius: 32rpx;
|
||||
height: 60rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.btn-bar .left .order-btn:not(:first-child),
|
||||
.btn-bar .right .order-btn:not(:first-child) {
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
Component({
|
||||
externalClasses: ['wr-class'],
|
||||
|
||||
properties: {
|
||||
phoneNumber: String,
|
||||
desc: String,
|
||||
},
|
||||
|
||||
data: {
|
||||
show: false,
|
||||
},
|
||||
|
||||
methods: {
|
||||
onBtnTap() {
|
||||
this.setData({
|
||||
show: true,
|
||||
});
|
||||
},
|
||||
|
||||
onDialogClose() {
|
||||
this.setData({
|
||||
show: false,
|
||||
});
|
||||
},
|
||||
|
||||
onCall() {
|
||||
const { phoneNumber } = this.properties;
|
||||
wx.makePhoneCall({
|
||||
phoneNumber,
|
||||
});
|
||||
},
|
||||
onCallOnlineService() {
|
||||
wx.showToast({
|
||||
title: '你点击了在线客服',
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"t-popup": "tdesign-miniprogram/popup/popup"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
<!-- 联系客服按钮 -->
|
||||
<view class="wr-class customer-service text-btn" hover-class="text-btn--active" bindtap="onBtnTap">联系客服</view>
|
||||
<!-- 联系客服弹框 -->
|
||||
<t-popup visible="{{show}}" placement="bottom" bind:visible-change="onDialogClose">
|
||||
<view class="dialog--customer-service">
|
||||
<view class="content" wx:if="{{desc}}">
|
||||
<view class="title">服务时间:</view>
|
||||
<text class="subtitle">{{desc}}</text>
|
||||
</view>
|
||||
<view class="options">
|
||||
<view
|
||||
class="option main"
|
||||
hover-class="text-btn--active"
|
||||
wx:if="{{phoneNumber}}"
|
||||
bindtap="onCall"
|
||||
>呼叫 {{phoneNumber}}
|
||||
</view>
|
||||
<view class="option main online" hover-class="text-btn--active" bindtap="onCallOnlineService">在线客服</view>
|
||||
<view class="option" hover-class="text-btn--active" bindtap="onDialogClose">取消</view>
|
||||
</view>
|
||||
</view>
|
||||
</t-popup>
|
||||
|
||||
@@ -0,0 +1,48 @@
|
||||
.text-btn {
|
||||
display: inline;
|
||||
color: #333;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.text-btn--active {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.dialog--customer-service {
|
||||
background-color: #f3f4f5;
|
||||
overflow: hidden;
|
||||
}
|
||||
.dialog--customer-service .content {
|
||||
font-size: 26rpx;
|
||||
margin: 32rpx 30rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.dialog--customer-service .content .title {
|
||||
display: inline;
|
||||
color: #999999;
|
||||
font-weight: bold;
|
||||
}
|
||||
.dialog--customer-service .content .subtitle {
|
||||
display: inline;
|
||||
color: #999999;
|
||||
}
|
||||
.dialog--customer-service .options .option {
|
||||
color: #333333;
|
||||
font-size: 30rpx;
|
||||
text-align: center;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
background-color: white;
|
||||
}
|
||||
.dialog--customer-service .options .option:not(:last-child) {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.dialog--customer-service .options .option--active {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.dialog--customer-service .options .option.main {
|
||||
color: #333;
|
||||
}
|
||||
.dialog--customer-service .options .option.online {
|
||||
position: relative;
|
||||
top: -17rpx;
|
||||
margin-bottom: 2rpx;
|
||||
}
|
||||
264
mini-program/pages/order/components/goods-card/index.js
Normal file
264
mini-program/pages/order/components/goods-card/index.js
Normal file
@@ -0,0 +1,264 @@
|
||||
Component({
|
||||
options: {
|
||||
multipleSlots: true, // 在组件定义时的选项中启用多slot支持
|
||||
addGlobalClass: true,
|
||||
},
|
||||
intersectionObserverContext: null,
|
||||
|
||||
externalClasses: [
|
||||
'card-class',
|
||||
'title-class',
|
||||
'desc-class',
|
||||
'num-class',
|
||||
'thumb-class',
|
||||
'specs-class',
|
||||
'price-class',
|
||||
'origin-price-class',
|
||||
'price-prefix-class',
|
||||
],
|
||||
|
||||
relations: {
|
||||
'../order-card/index': {
|
||||
type: 'ancestor',
|
||||
linked(target) {
|
||||
this.parent = target;
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
properties: {
|
||||
hidden: {
|
||||
// 设置为null代表不做类型转换
|
||||
type: null,
|
||||
value: false,
|
||||
observer(hidden) {
|
||||
// null就是代表没有设置，没有设置的话不setData，防止祖先组件触发的setHidden操作被覆盖
|
||||
if (hidden !== null) {
|
||||
this.setHidden(!!hidden);
|
||||
}
|
||||
},
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
// `goods-card-88888888`
|
||||
// 不能在这里写生成逻辑，如果在这里写，那么假设有多个goods-list时，他们将共享这个值
|
||||
value: '',
|
||||
observer: (id) => {
|
||||
this.genIndependentID(id);
|
||||
if (this.properties.thresholds?.length) {
|
||||
this.createIntersectionObserverHandle();
|
||||
}
|
||||
},
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
observer(goods) {
|
||||
// 有ID的商品才渲染
|
||||
if (!goods) {
|
||||
return;
|
||||
}
|
||||
|
||||
/** 划线价是否有效 */
|
||||
let isValidityLinePrice = true;
|
||||
// 判断一次划线价格是否合理
|
||||
if (
|
||||
goods.originPrice &&
|
||||
goods.price &&
|
||||
goods.originPrice < goods.price
|
||||
) {
|
||||
isValidityLinePrice = false;
|
||||
}
|
||||
|
||||
// 敲定换行数量默认值
|
||||
if (goods.lineClamp === undefined || goods.lineClamp <= 0) {
|
||||
// tag数组长度 大于0 且 可见
|
||||
// 指定换行为1行
|
||||
if ((goods.tags?.length || 0) > 0 && !goods.hideKey?.tags) {
|
||||
goods.lineClamp = 1;
|
||||
} else {
|
||||
goods.lineClamp = 2;
|
||||
}
|
||||
}
|
||||
|
||||
this.setData({ goods, isValidityLinePrice });
|
||||
},
|
||||
},
|
||||
layout: {
|
||||
type: String,
|
||||
value: 'horizontal',
|
||||
},
|
||||
thumbMode: {
|
||||
type: String,
|
||||
value: 'aspectFill',
|
||||
},
|
||||
thumbWidth: Number,
|
||||
thumbHeight: Number,
|
||||
priceFill: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
},
|
||||
currency: {
|
||||
type: String,
|
||||
value: '¥',
|
||||
},
|
||||
lazyLoad: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
centered: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
showCart: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
pricePrefix: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
cartSize: {
|
||||
type: Number,
|
||||
value: 48,
|
||||
},
|
||||
cartColor: {
|
||||
type: String,
|
||||
value: '#FA550F',
|
||||
},
|
||||
/** 元素可见监控阈值, 数组长度大于0就创建 */
|
||||
thresholds: {
|
||||
type: Array,
|
||||
value: [],
|
||||
observer(current) {
|
||||
if (current && current.length) {
|
||||
this.createIntersectionObserverHandle();
|
||||
} else {
|
||||
this.clearIntersectionObserverHandle();
|
||||
}
|
||||
},
|
||||
},
|
||||
specsIconClassPrefix: {
|
||||
type: String,
|
||||
value: 'wr',
|
||||
},
|
||||
specsIcon: {
|
||||
type: String,
|
||||
value: 'expand_more',
|
||||
},
|
||||
addCartIconClassPrefix: {
|
||||
type: String,
|
||||
value: 'wr',
|
||||
},
|
||||
addCartIcon: {
|
||||
type: String,
|
||||
value: 'cart',
|
||||
},
|
||||
},
|
||||
|
||||
data: {
|
||||
hiddenInData: false,
|
||||
independentID: '',
|
||||
goods: { id: '' },
|
||||
/** 保证划线价格不小于原价，否则不渲染划线价 */
|
||||
isValidityLinePrice: false,
|
||||
},
|
||||
|
||||
lifetimes: {
|
||||
ready() {
|
||||
this.init();
|
||||
},
|
||||
detached() {
|
||||
this.clear();
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
clickHandle() {
|
||||
this.triggerEvent('click', { goods: this.data.goods });
|
||||
},
|
||||
clickThumbHandle() {
|
||||
this.triggerEvent('thumb', { goods: this.data.goods });
|
||||
},
|
||||
clickTagHandle(evt) {
|
||||
const { index } = evt.currentTarget.dataset;
|
||||
this.triggerEvent('tag', { goods: this.data.goods, index });
|
||||
},
|
||||
// 加入购物车
|
||||
addCartHandle(e) {
|
||||
const { id } = e.currentTarget;
|
||||
const { id: cardID } = e.currentTarget.dataset;
|
||||
this.triggerEvent('add-cart', {
|
||||
...e.detail,
|
||||
id,
|
||||
cardID,
|
||||
goods: this.data.goods,
|
||||
});
|
||||
},
|
||||
genIndependentID(id, cb) {
|
||||
let independentID;
|
||||
if (id) {
|
||||
independentID = id;
|
||||
} else {
|
||||
// `goods-card-88888888`
|
||||
independentID = `goods-card-${~~(Math.random() * 10 ** 8)}`;
|
||||
}
|
||||
this.setData({ independentID }, cb);
|
||||
},
|
||||
|
||||
init() {
|
||||
const { thresholds, id, hidden } = this.properties;
|
||||
if (hidden !== null) {
|
||||
this.setHidden(!!hidden);
|
||||
}
|
||||
|
||||
this.genIndependentID(id || '', () => {
|
||||
if (thresholds && thresholds.length) {
|
||||
this.createIntersectionObserverHandle();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
clear() {
|
||||
this.clearIntersectionObserverHandle();
|
||||
},
|
||||
|
||||
setHidden(hidden) {
|
||||
this.setData({ hiddenInData: !!hidden });
|
||||
},
|
||||
|
||||
createIntersectionObserverHandle() {
|
||||
if (this.intersectionObserverContext || !this.data.independentID) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.intersectionObserverContext = wx
|
||||
.createIntersectionObserver(this, {
|
||||
thresholds: this.properties.thresholds,
|
||||
})
|
||||
.relativeToViewport();
|
||||
|
||||
this.intersectionObserverContext.observe(
|
||||
`#${this.data.independentID}`,
|
||||
(res) => {
|
||||
this.intersectionObserverCB(res);
|
||||
},
|
||||
);
|
||||
},
|
||||
intersectionObserverCB(ob) {
|
||||
this.triggerEvent('ob', {
|
||||
goods: this.data.goods,
|
||||
context: this.intersectionObserverContext,
|
||||
ob,
|
||||
});
|
||||
},
|
||||
clearIntersectionObserverHandle() {
|
||||
if (this.intersectionObserverContext) {
|
||||
try {
|
||||
this.intersectionObserverContext.disconnect();
|
||||
} catch (e) {}
|
||||
|
||||
this.intersectionObserverContext = null;
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"price": "/components/price/index",
|
||||
"t-image": "/components/webp-image/index",
|
||||
"t-icon": "tdesign-miniprogram/icon/icon"
|
||||
}
|
||||
}
|
||||
77
mini-program/pages/order/components/goods-card/index.wxml
Normal file
77
mini-program/pages/order/components/goods-card/index.wxml
Normal file
@@ -0,0 +1,77 @@
|
||||
<view
|
||||
id="{{independentID}}"
|
||||
class="wr-goods-card card-class {{ layout }} {{ centered ? 'center' : ''}}"
|
||||
bind:tap="clickHandle"
|
||||
data-goods="{{ goods }}"
|
||||
hidden="{{hiddenInData}}"
|
||||
>
|
||||
<view class="wr-goods-card__main">
|
||||
<view class="wr-goods-card__thumb thumb-class" bind:tap="clickThumbHandle">
|
||||
<!-- data-src 是方便加购动画读取图片用的 -->
|
||||
<t-image
|
||||
t-class="wr-goods-card__thumb-com"
|
||||
wx:if="{{ !!goods.thumb && !goods.hideKey.thumb }}"
|
||||
src="{{ goods.thumb }}"
|
||||
mode="{{ thumbMode }}"
|
||||
lazy-load="{{ lazyLoad }}"
|
||||
/>
|
||||
<slot name="thumb-cover" />
|
||||
</view>
|
||||
|
||||
<view class="wr-goods-card__body">
|
||||
<view class="wr-goods-card__long_content">
|
||||
<view wx:if="{{ goods.title && !goods.hideKey.title }}" class="wr-goods-card__title title-class" style="-webkit-line-clamp: {{ goods.lineClamp }};">
|
||||
<slot name="before-title" />
|
||||
{{ goods.title }}
|
||||
</view>
|
||||
<slot name="after-title" />
|
||||
<view wx:if="{{ goods.desc && !goods.hideKey.desc }}" class="wr-goods-card__desc desc-class">{{ goods.desc }}</view>
|
||||
<slot name="after-desc" />
|
||||
<view wx:if="{{ goods.specs && goods.specs.length > 0 && !goods.hideKey.specs }}" class="wr-goods-card__specs__desc specs-class" bind:tap="clickSpecsHandle">
|
||||
<view class="wr-goods-card__specs__desc-text">{{ goods.specs }}</view>
|
||||
</view>
|
||||
<view class="goods_tips" wx:if="{{goods.stockQuantity !== 0 && goods.quantity >= goods.stockQuantity}}">库存不足</view>
|
||||
</view>
|
||||
|
||||
<view class="wr-goods-card__short_content">
|
||||
<block wx:if="{{goods.stockQuantity !== 0}}">
|
||||
<view wx:if="{{ pricePrefix }}" class="wr-goods-card__price__prefix price-prefix-class">{{ pricePrefix }}</view>
|
||||
<slot name="price-prefix" />
|
||||
<view wx:if="{{ goods.price && !goods.hideKey.price }}" class="wr-goods-card__price">
|
||||
<price
|
||||
wr-class="price-class"
|
||||
symbol="{{currency}}"
|
||||
price="{{goods.price}}"
|
||||
fill="{{priceFill}}"
|
||||
decimalSmaller
|
||||
/>
|
||||
</view>
|
||||
<view wx:if="{{ goods.originPrice && !goods.hideKey.originPrice && isValidityLinePrice }}" class="wr-goods-card__origin-price">
|
||||
<price
|
||||
wr-class="origin-price-class"
|
||||
symbol="{{currency}}"
|
||||
price="{{goods.originPrice}}"
|
||||
fill="{{priceFill}}"
|
||||
/>
|
||||
</view>
|
||||
<slot name="origin-price" />
|
||||
<view wx:if="{{goods.num && !goods.hideKey.num}}" class="wr-goods-card__num num-class">
|
||||
<text class="wr-goods-card__num__prefix">x </text>
|
||||
{{ goods.num }}
|
||||
</view>
|
||||
</block>
|
||||
<block wx:else>
|
||||
<view class="no_storage">
|
||||
<view>请重新选择商品规格</view>
|
||||
<view class="no_storage__right">重选</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
</view>
|
||||
<slot name="append-body" />
|
||||
</view>
|
||||
<slot name="footer" />
|
||||
</view>
|
||||
<slot name="append-card" />
|
||||
</view>
|
||||
|
||||
254
mini-program/pages/order/components/goods-card/index.wxss
Normal file
254
mini-program/pages/order/components/goods-card/index.wxss
Normal file
@@ -0,0 +1,254 @@
|
||||
.wr-goods-card {
|
||||
box-sizing: border-box;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.wr-goods-card__main {
|
||||
position: relative;
|
||||
display: flex;
|
||||
line-height: 1;
|
||||
flex-direction: row;
|
||||
background: transparent;
|
||||
padding: 16rpx 0rpx;
|
||||
}
|
||||
.wr-goods-card.center .wr-goods-card__main {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.wr-goods-card__thumb {
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
width: 176rpx;
|
||||
height: 176rpx;
|
||||
}
|
||||
.wr-goods-card__thumb-com {
|
||||
width: 176rpx;
|
||||
height: 176rpx;
|
||||
border-radius: 8rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
.wr-goods-card__thumb:empty {
|
||||
display: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wr-goods-card__body {
|
||||
display: flex;
|
||||
margin: 0 0 0 16rpx;
|
||||
flex-direction: row;
|
||||
flex: 1 1 auto;
|
||||
min-height: 176rpx;
|
||||
}
|
||||
.wr-goods-card__long_content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.wr-goods-card__long_content .goods_tips {
|
||||
width: 100%;
|
||||
margin-top: 16rpx;
|
||||
text-align: right;
|
||||
color: #fa4126;
|
||||
font-size: 24rpx;
|
||||
line-height: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.wr-goods-card__title {
|
||||
flex-shrink: 0;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
line-height: 40rpx;
|
||||
font-weight: 400;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
word-break: break-word;
|
||||
}
|
||||
.wr-goods-card__title__prefix-tags {
|
||||
display: inline-flex;
|
||||
}
|
||||
.wr-goods-card__title__prefix-tags .prefix-tag {
|
||||
margin: 0 8rpx 0 0;
|
||||
}
|
||||
.wr-goods-card__desc {
|
||||
font-size: 24rpx;
|
||||
color: #f5f5f5;
|
||||
line-height: 40rpx;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
.wr-goods-card__specs__desc,
|
||||
.wr-goods-card__specs__text {
|
||||
font-size: 24rpx;
|
||||
height: 32rpx;
|
||||
line-height: 32rpx;
|
||||
color: #999999;
|
||||
margin: 8rpx 0;
|
||||
}
|
||||
.wr-goods-card__specs__desc {
|
||||
display: flex;
|
||||
align-self: flex-start;
|
||||
flex-direction: row;
|
||||
}
|
||||
.wr-goods-card__specs__desc-text {
|
||||
height: 100%;
|
||||
max-width: 380rpx;
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
}
|
||||
.wr-goods-card__specs__desc-icon {
|
||||
line-height: inherit;
|
||||
margin-left: 8rpx;
|
||||
font-size: 24rpx;
|
||||
color: #bbb;
|
||||
}
|
||||
.wr-goods-card__specs__text {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
}
|
||||
.wr-goods-card__tags {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
margin: 16rpx 0 0 0;
|
||||
}
|
||||
.wr-goods-card__tag {
|
||||
color: #fa550f;
|
||||
background: transparent;
|
||||
font-size: 20rpx;
|
||||
border: 1rpx solid #fa550f;
|
||||
padding: 0 8rpx;
|
||||
height: 30rpx;
|
||||
line-height: 30rpx;
|
||||
margin: 0 8rpx 8rpx 0;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
word-break: keep-all;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.wr-goods-card__short_content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-end;
|
||||
margin: 0 0 0 46rpx;
|
||||
}
|
||||
.wr-goods-card__price__prefix {
|
||||
order: 0;
|
||||
color: #666;
|
||||
margin: 0;
|
||||
}
|
||||
.wr-goods-card__price {
|
||||
white-space: nowrap;
|
||||
font-weight: bold;
|
||||
order: 1;
|
||||
color: #fa4126;
|
||||
font-size: 36rpx;
|
||||
margin: 0;
|
||||
line-height: 48rpx;
|
||||
}
|
||||
.wr-goods-card__origin-price {
|
||||
white-space: nowrap;
|
||||
font-weight: normal;
|
||||
order: 2;
|
||||
color: #aaaaaa;
|
||||
font-size: 24rpx;
|
||||
margin: 0;
|
||||
}
|
||||
.wr-goods-card__num {
|
||||
white-space: nowrap;
|
||||
order: 4;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin: 20rpx 0 0 auto;
|
||||
}
|
||||
.wr-goods-card__num__prefix {
|
||||
color: inherit;
|
||||
}
|
||||
.wr-goods-card__add-cart {
|
||||
order: 3;
|
||||
margin: auto 0 0 auto;
|
||||
}
|
||||
.wr-goods-card.horizontal-wrap .wr-goods-card__thumb {
|
||||
width: 192rpx;
|
||||
height: 192rpx;
|
||||
border-radius: 8rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
.wr-goods-card.horizontal-wrap .wr-goods-card__body {
|
||||
flex-direction: column;
|
||||
}
|
||||
.wr-goods-card.horizontal-wrap .wr-goods-card__short_content {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin: 16rpx 0 0 0;
|
||||
}
|
||||
|
||||
.wr-goods-card.horizontal-wrap .wr-goods-card__num {
|
||||
margin: 0 0 0 auto;
|
||||
}
|
||||
.wr-goods-card.vertical .wr-goods-card__main {
|
||||
padding: 0 0 22rpx 0;
|
||||
flex-direction: column;
|
||||
}
|
||||
.wr-goods-card.vertical .wr-goods-card__thumb {
|
||||
width: 340rpx;
|
||||
height: 340rpx;
|
||||
}
|
||||
.wr-goods-card.vertical .wr-goods-card__body {
|
||||
margin: 20rpx 20rpx 0 20rpx;
|
||||
flex-direction: column;
|
||||
}
|
||||
.wr-goods-card.vertical .wr-goods-card__long_content {
|
||||
overflow: hidden;
|
||||
}
|
||||
.wr-goods-card.vertical .wr-goods-card__title {
|
||||
line-height: 36rpx;
|
||||
}
|
||||
.wr-goods-card.vertical .wr-goods-card__short_content {
|
||||
margin: 20rpx 0 0 0;
|
||||
}
|
||||
.wr-goods-card.vertical .wr-goods-card__price {
|
||||
order: 2;
|
||||
color: #fa4126;
|
||||
margin: 20rpx 0 0 0;
|
||||
}
|
||||
.wr-goods-card.vertical .wr-goods-card__origin-price {
|
||||
order: 1;
|
||||
}
|
||||
.wr-goods-card.vertical .wr-goods-card__add-cart {
|
||||
position: absolute;
|
||||
bottom: 20rpx;
|
||||
right: 20rpx;
|
||||
}
|
||||
|
||||
.wr-goods-card__short_content .no_storage {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 40rpx;
|
||||
color: #333;
|
||||
font-size: 24rpx;
|
||||
line-height: 32rpx;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.no_storage .no_storage__right {
|
||||
width: 80rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 20rpx;
|
||||
border: 2rpx solid #fa4126;
|
||||
line-height: 40rpx;
|
||||
text-align: center;
|
||||
color: #fa4126;
|
||||
}
|
||||
17
mini-program/pages/order/components/noGoods/noGood.wxs
Normal file
17
mini-program/pages/order/components/noGoods/noGood.wxs
Normal file
@@ -0,0 +1,17 @@
|
||||
var isOnlyBack = function (data) {
|
||||
return data.limitGoodsList || (data.inValidGoodsList && !data.storeGoodsList);
|
||||
};
|
||||
|
||||
var isShowChangeAddress = function (data) {
|
||||
return data.abnormalDeliveryGoodsList;
|
||||
};
|
||||
|
||||
var isShowKeepPay = function (data) {
|
||||
return data.outOfStockGoodsList || (data.storeGoodsList && data.inValidGoodsList);
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
isOnlyBack: isOnlyBack,
|
||||
isShowChangeAddress: isShowChangeAddress,
|
||||
isShowKeepPay: isShowKeepPay,
|
||||
};
|
||||
57
mini-program/pages/order/components/noGoods/noGoods.js
Normal file
57
mini-program/pages/order/components/noGoods/noGoods.js
Normal file
@@ -0,0 +1,57 @@
|
||||
Component({
|
||||
properties: {
|
||||
settleDetailData: {
|
||||
type: Object,
|
||||
value: {},
|
||||
observer(settleDetailData) {
|
||||
const {
|
||||
outOfStockGoodsList,
|
||||
abnormalDeliveryGoodsList,
|
||||
inValidGoodsList,
|
||||
limitGoodsList,
|
||||
} = settleDetailData;
|
||||
// 弹窗逻辑 限购 超出配送范围 失效 库存不足;
|
||||
const tempList =
|
||||
limitGoodsList ||
|
||||
abnormalDeliveryGoodsList ||
|
||||
inValidGoodsList ||
|
||||
outOfStockGoodsList ||
|
||||
[];
|
||||
|
||||
tempList.forEach((goods, index) => {
|
||||
goods.id = index;
|
||||
goods.unSettlementGoods &&
|
||||
goods.unSettlementGoods.forEach((ele) => {
|
||||
ele.name = ele.goodsName;
|
||||
ele.price = ele.payPrice;
|
||||
ele.imgUrl = ele.image;
|
||||
});
|
||||
});
|
||||
this.setData({
|
||||
// settleDetailData,
|
||||
goodsList: tempList,
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
data: {
|
||||
goodList: [],
|
||||
},
|
||||
methods: {
|
||||
onCard(e) {
|
||||
const { item } = e.currentTarget.dataset;
|
||||
if (item === 'cart') {
|
||||
// 购物车
|
||||
Navigator.gotoPage('/cart');
|
||||
} else if (item === 'orderSure') {
|
||||
// 结算页
|
||||
this.triggerEvent('change', undefined);
|
||||
}
|
||||
},
|
||||
onDelive() {
|
||||
// 修改配送地址
|
||||
Navigator.gotoPage('/address', { type: 'orderSure' });
|
||||
},
|
||||
},
|
||||
});
|
||||
8
mini-program/pages/order/components/noGoods/noGoods.json
Normal file
8
mini-program/pages/order/components/noGoods/noGoods.json
Normal file
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"wr-order-card": "/pages/order/components/order-card/index",
|
||||
"wr-goods-card": "/components/goods-card/index",
|
||||
"wr-order-goods-card": "/pages/order/components/order-goods-card/index"
|
||||
}
|
||||
}
|
||||
53
mini-program/pages/order/components/noGoods/noGoods.wxml
Normal file
53
mini-program/pages/order/components/noGoods/noGoods.wxml
Normal file
@@ -0,0 +1,53 @@
|
||||
<wxs src="./noGood.wxs" module="order" />
|
||||
|
||||
<view class="goods-fail">
|
||||
<block wx:if="{{settleDetailData.limitGoodsList && settleDetailData.limitGoodsList.length >0}}">
|
||||
<view class="title">限购商品信息</view>
|
||||
<view class="info">以下商品限购数量，建议您修改商品数量</view>
|
||||
</block>
|
||||
<block
|
||||
wx:elif="{{settleDetailData.abnormalDeliveryGoodsList && settleDetailData.abnormalDeliveryGoodsList.length >0}}"
|
||||
>
|
||||
<view class="title">不支持配送</view>
|
||||
<view class="info">以下店铺的商品不支持配送，请更改地址或去掉对应店铺商品再进行结算</view>
|
||||
</block>
|
||||
<block wx:elif="{{order.isShowKeepPay(settleDetailData)}}">
|
||||
<view class="title">部分商品库存不足或失效</view>
|
||||
<view class="info">请返回购物车重新选择商品，如果继续结算将自动忽略库存不足或失效的商品。</view>
|
||||
</block>
|
||||
<block wx:elif="{{settleDetailData.inValidGoodsList && settleDetailData.inValidGoodsList.length > 0}}">
|
||||
<view class="title">全部商品库存不足或失效</view>
|
||||
<view class="info">请返回购物车重新选择商品</view>
|
||||
</block>
|
||||
<scroll-view
|
||||
scroll-y="true"
|
||||
style="max-height: 500rpx"
|
||||
bindscrolltoupper="upper"
|
||||
bindscrolltolower="lower"
|
||||
bindscroll="scroll"
|
||||
>
|
||||
<view class="goods-list" wx:for="{{goodsList}}" wx:for-item="goods" wx:key="index">
|
||||
<wr-order-card wx:if="{{goods}}" order="{{goods}}">
|
||||
<wr-order-goods-card
|
||||
wx:for="{{goods.unSettlementGoods}}"
|
||||
wx:key="id"
|
||||
wx:for-item="goods"
|
||||
wx:for-index="gIndex"
|
||||
goods="{{goods}}"
|
||||
no-top-line="{{gIndex === 0}}"
|
||||
/>
|
||||
</wr-order-card>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="goods-fail-btn">
|
||||
<view bindtap="onCard" data-item="cart" class="btn {{order.isOnlyBack(settleDetailData) ? 'limit' : ''}}">
|
||||
返回购物车
|
||||
</view>
|
||||
<view wx:if="{{order.isShowChangeAddress(settleDetailData)}}" bindtap="onDelive" class="btn origin">
|
||||
修改配送地址
|
||||
</view>
|
||||
<view wx:elif="{{order.isShowKeepPay(settleDetailData)}}" bindtap="onCard" data-item="orderSure" class="btn origin">
|
||||
继续结算
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
68
mini-program/pages/order/components/noGoods/noGoods.wxss
Normal file
68
mini-program/pages/order/components/noGoods/noGoods.wxss
Normal file
@@ -0,0 +1,68 @@
|
||||
/* 层级定义
|
||||
@z-index-0: 1;
|
||||
@z-index-1: 100;
|
||||
@z-index-2: 200;
|
||||
@z-index-5: 500;
|
||||
@z-index-component: 1000; // 通用组件级别
|
||||
@z-index-dropdown: @z-index-component;
|
||||
@z-index-sticky: @z-index-component + 20;
|
||||
@z-index-fixed: @z-index-component + 30;
|
||||
@z-index-modal-backdrop:@z-index-component + 40;
|
||||
@z-index-modal:@z-index-component + 50;
|
||||
@z-index-popover:@z-index-component + 60;
|
||||
@z-index-tooltip:@z-index-component + 70;
|
||||
*/
|
||||
/* var() css变量适配*/
|
||||
.goods-fail {
|
||||
display: block;
|
||||
background: #fff;
|
||||
font-size: 30rpx;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
}
|
||||
.goods-fail .title {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-top: 30rpx;
|
||||
line-height: 42rpx;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
.goods-fail .info {
|
||||
display: block;
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
line-height: 36rpx;
|
||||
margin: 20rpx auto 10rpx;
|
||||
text-align: center;
|
||||
width: 560rpx;
|
||||
color: #999;
|
||||
}
|
||||
.goods-fail .goods-fail-btn {
|
||||
display: flex;
|
||||
padding: 30rpx;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
.goods-fail .goods-fail-btn .btn {
|
||||
width: 330rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
border-radius: 8rpx;
|
||||
text-align: center;
|
||||
border: 1rpx solid #999;
|
||||
background: #fff;
|
||||
font-size: 32rpx;
|
||||
color: #666;
|
||||
}
|
||||
.goods-fail .goods-fail-btn .btn.origin,
|
||||
.goods-fail .goods-fail-btn .btn.limit {
|
||||
color: #fa550f;
|
||||
color: var(--color-primary, #fa550f);
|
||||
border: 1rpx solid #fa550f;
|
||||
border: 1rpx solid var(--color-primary, #fa550f);
|
||||
}
|
||||
.goods-fail .goods-fail-btn .btn.limit {
|
||||
flex-grow: 1;
|
||||
}
|
||||
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;
|
||||
}
|
||||
90
mini-program/pages/order/components/order-card/index.js
Normal file
90
mini-program/pages/order/components/order-card/index.js
Normal file
@@ -0,0 +1,90 @@
|
||||
Component({
|
||||
externalClasses: ['wr-class', 'header-class', 'title-class'],
|
||||
|
||||
options: {
|
||||
multipleSlots: true,
|
||||
},
|
||||
|
||||
relations: {
|
||||
'../order-goods-card/index': {
|
||||
type: 'descendant',
|
||||
linked(target) {
|
||||
this.children.push(target);
|
||||
this.setHidden();
|
||||
},
|
||||
unlinked(target) {
|
||||
this.children = this.children.filter((item) => item !== target);
|
||||
},
|
||||
},
|
||||
'../goods-card/index': {
|
||||
type: 'descendant',
|
||||
linked(target) {
|
||||
this.children.push(target);
|
||||
this.setHidden();
|
||||
},
|
||||
unlinked(target) {
|
||||
this.children = this.children.filter((item) => item !== target);
|
||||
},
|
||||
},
|
||||
'../specs-goods-card/index': {
|
||||
type: 'descendant',
|
||||
linked(target) {
|
||||
this.children.push(target);
|
||||
this.setHidden();
|
||||
},
|
||||
unlinked(target) {
|
||||
this.children = this.children.filter((item) => item !== target);
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
this.children = [];
|
||||
},
|
||||
|
||||
properties: {
|
||||
order: {
|
||||
type: Object,
|
||||
observer(order) {
|
||||
if (!order?.goodsList) return;
|
||||
const goodsCount = order.goodsList.length;
|
||||
this.setData({
|
||||
goodsCount,
|
||||
});
|
||||
},
|
||||
},
|
||||
useTopRightSlot: Boolean,
|
||||
// 初始显示的商品数量，超出部分会隐藏。
|
||||
defaultShowNum: {
|
||||
type: null,
|
||||
value: 10,
|
||||
},
|
||||
useLogoSlot: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
},
|
||||
|
||||
data: {
|
||||
showAll: true, // 是否展示所有商品，设置为false，可以使用展开更多功能
|
||||
goodsCount: 0,
|
||||
},
|
||||
|
||||
methods: {
|
||||
setHidden() {
|
||||
const isHidden = !this.data.showAll;
|
||||
this.children.forEach(
|
||||
(c, i) => i >= this.properties.defaultShowNum && c.setHidden(isHidden),
|
||||
);
|
||||
},
|
||||
|
||||
onOrderCardTap() {
|
||||
this.triggerEvent('cardtap');
|
||||
},
|
||||
|
||||
onShowMoreTap() {
|
||||
this.setData({ showAll: true }, () => this.setHidden());
|
||||
this.triggerEvent('showall');
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"t-image": "/components/webp-image/index",
|
||||
"t-icon": "tdesign-miniprogram/icon/icon"
|
||||
}
|
||||
}
|
||||
30
mini-program/pages/order/components/order-card/index.wxml
Normal file
30
mini-program/pages/order/components/order-card/index.wxml
Normal file
@@ -0,0 +1,30 @@
|
||||
<view class="order-card wr-class" bind:tap="onOrderCardTap">
|
||||
<view class="header header-class">
|
||||
<view class="store-name title-class">
|
||||
<block wx:if="{{!useLogoSlot}}">
|
||||
<t-image wx:if="{{order.storeLogo}}" t-class="store-name__logo" src="{{order.storeLogo}}" />
|
||||
<t-icon
|
||||
wx:else
|
||||
prefix="wr"
|
||||
class="store-name__logo"
|
||||
name="store"
|
||||
size="inherit"
|
||||
color="inherit"
|
||||
/>
|
||||
<view class="store-name__label">{{order.storeName}}</view>
|
||||
</block>
|
||||
<slot wx:else name="top-left" />
|
||||
</view>
|
||||
<view wx:if="{{!useTopRightSlot}}" class="order-status">{{order.statusDesc}}</view>
|
||||
<slot wx:else name="top-right" />
|
||||
</view>
|
||||
<view class="slot-wrapper">
|
||||
<slot/>
|
||||
</view>
|
||||
<view wx:if="{{goodsCount > defaultShowNum && !showAll}}" class="more-mask" catchtap="onShowMoreTap">
|
||||
展开商品信息（共 {{goodsCount}} 个）
|
||||
<t-icon name="chevron-down" size="32rpx" />
|
||||
</view>
|
||||
<slot name="more" />
|
||||
</view>
|
||||
|
||||
45
mini-program/pages/order/components/order-card/index.wxss
Normal file
45
mini-program/pages/order/components/order-card/index.wxss
Normal file
@@ -0,0 +1,45 @@
|
||||
.order-card {
|
||||
margin: 24rpx 0;
|
||||
padding: 24rpx 32rpx 24rpx;
|
||||
background-color: white;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
.order-card .header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
.order-card .header .store-name {
|
||||
font-size: 28rpx;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
.order-card .header .store-name__logo {
|
||||
margin-right: 16rpx;
|
||||
font-size: 40rpx;
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
.order-card .header .store-name__label {
|
||||
max-width: 500rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.order-card .header .order-status {
|
||||
font-size: 26rpx;
|
||||
line-height: 40rpx;
|
||||
color: #fa4126;
|
||||
}
|
||||
.order-card .more-mask {
|
||||
padding: 20rpx 0;
|
||||
text-align: center;
|
||||
background-color: white;
|
||||
color: #fa4126;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
Component({
|
||||
options: {
|
||||
addGlobalClass: true,
|
||||
multipleSlots: true, // 在组件定义时的选项中启用多slot支持
|
||||
},
|
||||
|
||||
relations: {
|
||||
'../order-card/index': {
|
||||
type: 'ancestor',
|
||||
linked(target) {
|
||||
this.parent = target;
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
properties: {
|
||||
goods: Object,
|
||||
thumbWidth: Number,
|
||||
thumbHeight: Number,
|
||||
thumbWidthInPopup: Number,
|
||||
thumbHeightInPopup: Number,
|
||||
noTopLine: Boolean,
|
||||
step: Boolean,
|
||||
stepDisabled: Boolean,
|
||||
},
|
||||
|
||||
data: {
|
||||
goods: {},
|
||||
hidden: false,
|
||||
},
|
||||
|
||||
methods: {
|
||||
setHidden(hidden) {
|
||||
if (this.data.hidden === hidden) return;
|
||||
this.setData({ hidden });
|
||||
},
|
||||
|
||||
onNumChange(e) {
|
||||
const { value } = e.detail;
|
||||
this.triggerEvent('num-change', { value });
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"t-stepper": "tdesign-miniprogram/stepper/stepper",
|
||||
"goods-card": "../specs-goods-card/index"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
<goods-card
|
||||
class="order-goods-card {{ step ? 'order-goods-card--step' : '' }}"
|
||||
wx:if="{{!hidden}}"
|
||||
data="{{goods}}"
|
||||
thumb-width="{{thumbWidth}}"
|
||||
thumb-height="{{thumbHeight}}"
|
||||
thumb-width-in-popup="{{thumbWidthInPopup}}"
|
||||
thumb-height-in-popup="{{thumbHeightInPopup}}"
|
||||
>
|
||||
<t-stepper
|
||||
wx:if="{{ step }}"
|
||||
slot="append-body"
|
||||
disabled="{{ step ? stepDisabled : ''}}"
|
||||
value="{{goods.quantity}}"
|
||||
min="{{ 1 }}"
|
||||
theme="filled"
|
||||
bindminus="onNumChange"
|
||||
bindplus="onNumChange"
|
||||
bindblur="onNumChange"
|
||||
/>
|
||||
<!-- 透传good-card组件的slot -->
|
||||
<slot name="thumb-cover" slot="thumb-cover" />
|
||||
<slot name="after-title" slot="after-title" />
|
||||
<slot name="after-desc" slot="after-desc" />
|
||||
<slot name="price-prefix" slot="price-prefix" />
|
||||
<slot name="append-body" slot="append-body" />
|
||||
<slot name="footer" slot="footer" />
|
||||
<slot name="append-card" slot="append-card" />
|
||||
</goods-card>
|
||||
114
mini-program/pages/order/components/reason-sheet/index.js
Normal file
114
mini-program/pages/order/components/reason-sheet/index.js
Normal file
@@ -0,0 +1,114 @@
|
||||
Component({
|
||||
properties: {
|
||||
show: Boolean,
|
||||
title: String,
|
||||
options: {
|
||||
type: Object,
|
||||
observer() {
|
||||
this.init();
|
||||
},
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
observer() {
|
||||
this.init();
|
||||
},
|
||||
},
|
||||
showConfirmButton: Boolean,
|
||||
showCloseButton: Boolean,
|
||||
confirmButtonText: {
|
||||
type: String,
|
||||
value: '确定',
|
||||
},
|
||||
cancelButtonText: {
|
||||
type: String,
|
||||
value: '取消',
|
||||
},
|
||||
emptyTip: {
|
||||
type: String,
|
||||
value: '请选择',
|
||||
},
|
||||
},
|
||||
|
||||
data: {
|
||||
_options: [],
|
||||
checkedIndexes: [],
|
||||
},
|
||||
|
||||
methods: {
|
||||
attached() {
|
||||
this.toast = this.selectComponent('#t-toast');
|
||||
},
|
||||
|
||||
init() {
|
||||
const checkedIndexes = [];
|
||||
const _options = this.properties.options.map((opt, i) => {
|
||||
const checked = !!opt.checked;
|
||||
if (checked) {
|
||||
if (this.properties.multiple) checkedIndexes[0] = i;
|
||||
else checkedIndexes.push(i);
|
||||
}
|
||||
return {
|
||||
title: opt.title,
|
||||
checked,
|
||||
};
|
||||
});
|
||||
this.setData({ checkedIndexes, _options });
|
||||
},
|
||||
|
||||
onOptionTap(e) {
|
||||
const { index } = e.currentTarget.dataset;
|
||||
const { checkedIndexes } = this.data;
|
||||
let data = {};
|
||||
if (this.properties.multiple) {
|
||||
if (checkedIndexes.includes(index)) {
|
||||
checkedIndexes.splice(index, 1);
|
||||
data = { checkedIndexes, [`_options[${index}].checked`]: false };
|
||||
} else {
|
||||
checkedIndexes.push(index);
|
||||
data = { checkedIndexes, [`_options[${index}].checked`]: true };
|
||||
}
|
||||
} else {
|
||||
if (checkedIndexes[0] === index) {
|
||||
// 单选不可取消选择
|
||||
return;
|
||||
}
|
||||
data = {
|
||||
[`_options[${index}].checked`]: true,
|
||||
checkedIndexes: [index],
|
||||
};
|
||||
if (checkedIndexes[0] !== undefined) {
|
||||
data[`_options[${checkedIndexes[0]}].checked`] = false;
|
||||
}
|
||||
}
|
||||
this.setData(data);
|
||||
this.triggerEvent('select', { index });
|
||||
this._onOptionTap && this._onOptionTap(index);
|
||||
if (!this.properties.showConfirmButton && !this.properties.multiple) {
|
||||
// 没有确认按钮且是单选的情况下，选择选项则自动确定
|
||||
this._onConfirm && this._onConfirm([index]);
|
||||
this.setData({ show: false });
|
||||
}
|
||||
},
|
||||
|
||||
onCancel() {
|
||||
this.triggerEvent('cancel');
|
||||
this._onCancel && this._onCancel();
|
||||
this.setData({ show: false });
|
||||
},
|
||||
|
||||
onConfirm() {
|
||||
if (this.data.checkedIndexes.length === 0) {
|
||||
this.toast.show({
|
||||
icon: '',
|
||||
text: this.properties.emptyTip,
|
||||
});
|
||||
return;
|
||||
}
|
||||
const indexed = this.data.checkedIndexes;
|
||||
this.triggerEvent('confirm', { indexed });
|
||||
this._onConfirm && this._onConfirm(indexed);
|
||||
this.setData({ show: false });
|
||||
},
|
||||
},
|
||||
});
|
||||
10
mini-program/pages/order/components/reason-sheet/index.json
Normal file
10
mini-program/pages/order/components/reason-sheet/index.json
Normal file
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"t-icon": "tdesign-miniprogram/icon/icon",
|
||||
"t-popup": "tdesign-miniprogram/popup/popup",
|
||||
"t-cell": "tdesign-miniprogram/cell/cell",
|
||||
"t-toast": "tdesign-miniprogram/toast/toast",
|
||||
"t-button": "tdesign-miniprogram/button/button"
|
||||
}
|
||||
}
|
||||
50
mini-program/pages/order/components/reason-sheet/index.wxml
Normal file
50
mini-program/pages/order/components/reason-sheet/index.wxml
Normal file
@@ -0,0 +1,50 @@
|
||||
<t-popup
|
||||
visible="{{show}}"
|
||||
placement="bottom"
|
||||
bind:visible-change="onCancel"
|
||||
close-btn="{{showCloseButton}}"
|
||||
>
|
||||
<view class="popup-content">
|
||||
<view class="header">
|
||||
{{title}}
|
||||
</view>
|
||||
<view class="options">
|
||||
<t-cell
|
||||
wx:for="{{_options}}"
|
||||
wx:key="title"
|
||||
t-class="cell"
|
||||
title="{{item.title}}"
|
||||
bindclick="onOptionTap"
|
||||
data-index="{{index}}"
|
||||
border="{{false}}"
|
||||
>
|
||||
<view slot="right-icon">
|
||||
<t-icon
|
||||
name="check-circle-filled"
|
||||
size="36rpx"
|
||||
color="#fa4126"
|
||||
wx:if="{{item.checked}}"
|
||||
/>
|
||||
<t-icon
|
||||
name="circle"
|
||||
size="36rpx"
|
||||
color="#C7C7C7"
|
||||
wx:else
|
||||
/>
|
||||
</view>
|
||||
</t-cell>
|
||||
</view>
|
||||
<view class="button-bar" wx:if="{{showConfirmButton}}">
|
||||
<t-button
|
||||
class="btnWrapper"
|
||||
wx:if="{{showConfirmButton}}"
|
||||
t-class="btn"
|
||||
bindtap="onConfirm"
|
||||
>
|
||||
{{confirmButtonText}}
|
||||
</t-button>
|
||||
</view>
|
||||
</view>
|
||||
</t-popup>
|
||||
<t-toast id="t-toast" />
|
||||
|
||||
47
mini-program/pages/order/components/reason-sheet/index.wxss
Normal file
47
mini-program/pages/order/components/reason-sheet/index.wxss
Normal file
@@ -0,0 +1,47 @@
|
||||
page view {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.popup-content {
|
||||
background-color: white;
|
||||
color: #222427;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.popup-content .header {
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
}
|
||||
.popup-content .options {
|
||||
max-height: 60vh;
|
||||
overflow-y: scroll;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.popup-content .options .cell {
|
||||
height: 100rpx;
|
||||
align-items: center;
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
}
|
||||
.popup-content .button-bar {
|
||||
width: 100%;
|
||||
padding: 20rpx 30rpx;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
.popup-content .button-bar .btn {
|
||||
width: 100%;
|
||||
background: #fa4126;
|
||||
color: #fff;
|
||||
border-radius: 48rpx;
|
||||
}
|
||||
.button-bar .btnWrapper {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
function getInstance(context, selector = '#wr-reason-sheet') {
|
||||
if (!context) {
|
||||
const pages = getCurrentPages();
|
||||
const page = pages[pages.length - 1];
|
||||
context = page;
|
||||
}
|
||||
const instance = context && context.selectComponent(selector);
|
||||
if (!instance) {
|
||||
console.warn(`未找到reason-sheet组件,请检查selector是否正确`);
|
||||
return null;
|
||||
}
|
||||
return instance;
|
||||
}
|
||||
|
||||
export default function (options) {
|
||||
const { context, selector, ..._options } = options;
|
||||
return new Promise((resolve, reject) => {
|
||||
const instance = getInstance(context, selector);
|
||||
if (instance) {
|
||||
instance.setData(Object.assign({}, _options));
|
||||
instance._onCancel = () => reject();
|
||||
instance._onConfirm = (indexes) => resolve(indexes);
|
||||
}
|
||||
});
|
||||
}
|
||||
22
mini-program/pages/order/components/selectCoupons/mock.js
Normal file
22
mini-program/pages/order/components/selectCoupons/mock.js
Normal file
@@ -0,0 +1,22 @@
|
||||
export const couponsData = {
|
||||
couponResultList: [
|
||||
{
|
||||
couponVO: {
|
||||
condition: '满200元可用',
|
||||
couponId: 11,
|
||||
endTime: 1584530282686,
|
||||
name: '折扣券',
|
||||
profit: '5.5折',
|
||||
promotionCode: 90,
|
||||
promotionSubCode: 1,
|
||||
scopeText: '部分商品可用',
|
||||
startTime: 1584530282686,
|
||||
storeId: 90,
|
||||
value: 550,
|
||||
type: 2,
|
||||
},
|
||||
status: 0, // 0:未勾选。1:勾选。-1:置灰
|
||||
},
|
||||
],
|
||||
reduce: 1000,
|
||||
};
|
||||
@@ -0,0 +1,16 @@
|
||||
function formatDays(value) {
|
||||
if (value < 10) {
|
||||
return '0' + value;
|
||||
}
|
||||
return value;
|
||||
}
|
||||
var dateFormat = function (d) {
|
||||
var date = getDate(+d);
|
||||
return (
|
||||
date.getFullYear() +
|
||||
'-' +
|
||||
formatDays(date.getMonth() + 1) +
|
||||
formatDays(date.getDate())
|
||||
);
|
||||
};
|
||||
module.exports.dateFormat = dateFormat;
|
||||
@@ -0,0 +1,160 @@
|
||||
import dayjs from 'dayjs';
|
||||
import { couponsData } from './mock';
|
||||
|
||||
const emptyCouponImg = `https://cdn-we-retail.ym.tencent.com/miniapp/coupon/ordersure-coupon-newempty.png`;
|
||||
|
||||
Component({
|
||||
properties: {
|
||||
storeId: String,
|
||||
promotionGoodsList: {
|
||||
type: Array,
|
||||
value: [],
|
||||
},
|
||||
orderSureCouponList: {
|
||||
type: Array,
|
||||
value: [],
|
||||
},
|
||||
couponsShow: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
observer(couponsShow) {
|
||||
if (couponsShow) {
|
||||
const { promotionGoodsList, orderSureCouponList, storeId } =
|
||||
this.data;
|
||||
const products =
|
||||
promotionGoodsList &&
|
||||
promotionGoodsList.map((goods) => {
|
||||
this.storeId = goods.storeId;
|
||||
return {
|
||||
skuId: goods.skuId,
|
||||
spuId: goods.spuId,
|
||||
storeId: goods.storeId,
|
||||
selected: true,
|
||||
quantity: goods.num,
|
||||
prices: {
|
||||
sale: goods.settlePrice,
|
||||
},
|
||||
};
|
||||
});
|
||||
const selectedCoupons =
|
||||
orderSureCouponList &&
|
||||
orderSureCouponList.map((ele) => {
|
||||
return {
|
||||
promotionId: ele.promotionId,
|
||||
storeId: ele.storeId,
|
||||
couponId: ele.couponId,
|
||||
};
|
||||
});
|
||||
this.setData({
|
||||
products,
|
||||
});
|
||||
this.coupons({
|
||||
products,
|
||||
selectedCoupons,
|
||||
storeId,
|
||||
}).then((res) => {
|
||||
this.initData(res);
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
data: {
|
||||
emptyCouponImg,
|
||||
goodsList: [],
|
||||
selectedList: [],
|
||||
couponsList: [],
|
||||
orderSureCouponList: [],
|
||||
promotionGoodsList: [],
|
||||
},
|
||||
methods: {
|
||||
initData(data = {}) {
|
||||
const { couponResultList = [], reduce = 0 } = data;
|
||||
const selectedList = [];
|
||||
let selectedNum = 0;
|
||||
const couponsList =
|
||||
couponResultList &&
|
||||
couponResultList.map((coupon) => {
|
||||
const { status, couponVO } = coupon;
|
||||
const {
|
||||
couponId,
|
||||
condition = '',
|
||||
endTime = 0,
|
||||
name = '',
|
||||
startTime = 0,
|
||||
value,
|
||||
type,
|
||||
} = couponVO;
|
||||
if (status === 1) {
|
||||
selectedNum++;
|
||||
selectedList.push({
|
||||
couponId,
|
||||
promotionId: ruleId,
|
||||
storeId: this.storeId,
|
||||
});
|
||||
}
|
||||
const val = type === 2 ? value / 100 : value / 10;
|
||||
return {
|
||||
key: couponId,
|
||||
title: name,
|
||||
isSelected: false,
|
||||
timeLimit: `${dayjs(+startTime).format('YYYY-MM-DD')}-${dayjs(
|
||||
+endTime,
|
||||
).format('YYYY-MM-DD')}`,
|
||||
value: val,
|
||||
status: status === -1 ? 'useless' : 'default',
|
||||
desc: condition,
|
||||
type,
|
||||
tag: '',
|
||||
};
|
||||
});
|
||||
this.setData({
|
||||
selectedList,
|
||||
couponsList,
|
||||
reduce,
|
||||
selectedNum,
|
||||
});
|
||||
},
|
||||
selectCoupon(e) {
|
||||
const { key } = e.currentTarget.dataset;
|
||||
const { couponsList, selectedList } = this.data;
|
||||
couponsList.forEach((coupon) => {
|
||||
if (coupon.key === key) {
|
||||
coupon.isSelected = !coupon.isSelected;
|
||||
}
|
||||
});
|
||||
|
||||
const couponSelected = couponsList.filter(
|
||||
(coupon) => coupon.isSelected === true,
|
||||
);
|
||||
|
||||
this.setData({
|
||||
selectedList: [...selectedList, ...couponSelected],
|
||||
couponsList: [...couponsList],
|
||||
});
|
||||
|
||||
this.triggerEvent('sure', {
|
||||
selectedList: [...selectedList, ...couponSelected],
|
||||
});
|
||||
},
|
||||
hide() {
|
||||
this.setData({
|
||||
couponsShow: false,
|
||||
});
|
||||
},
|
||||
coupons(coupon = {}) {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (coupon?.selectedCoupons) {
|
||||
resolve({
|
||||
couponResultList: couponsData.couponResultList,
|
||||
reduce: couponsData.reduce,
|
||||
});
|
||||
}
|
||||
return reject({
|
||||
couponResultList: [],
|
||||
reduce: undefined,
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"t-popup": "tdesign-miniprogram/popup/popup",
|
||||
"t-icon": "tdesign-miniprogram/icon/icon",
|
||||
"t-image": "/components/webp-image/index",
|
||||
"wr-price": "/components/price/index",
|
||||
"coupon-card": "/pages/coupon/components/ui-coupon-card/index"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
<wxs src="./selectCoupon.wxs" module="m1" />
|
||||
|
||||
|
||||
<t-popup visible="{{couponsShow}}" placement="bottom" bind:visible-change="hide">
|
||||
<view class="select-coupons">
|
||||
<view class="title">选择优惠券</view>
|
||||
<block wx:if="{{couponsList && couponsList.length > 0}}">
|
||||
<view class="info">
|
||||
<block wx:if="{{!selectedNum}}">你有{{couponsList.length}}张可用优惠券</block>
|
||||
<block wx:else>
|
||||
已选中{{selectedNum}}张推荐优惠券, 共抵扣
|
||||
<wr-price fill="{{false}}" price="{{reduce || 0}}" />
|
||||
</block>
|
||||
</view>
|
||||
<scroll-view class="coupons-list" scroll-y="true">
|
||||
<view class="coupons-wrap">
|
||||
<block wx:for="{{couponsList}}" wx:key="index" wx:for-item="coupon">
|
||||
<coupon-card
|
||||
title="{{coupon.title}}"
|
||||
type="{{coupon.type}}"
|
||||
status="{{coupon.status}}"
|
||||
desc="{{coupon.desc}}"
|
||||
value="{{coupon.value}}"
|
||||
tag="{{coupon.tag}}"
|
||||
timeLimit="{{coupon.timeLimit}}"
|
||||
>
|
||||
<view class="slot-radio" slot="operator">
|
||||
<t-icon bindtap="selectCoupon" data-key="{{coupon.key}}" name="{{coupon.isSelected ? 'check-circle-filled' : 'circle'}}" color="#fa4126" size="40rpx"/>
|
||||
</view>
|
||||
</coupon-card>
|
||||
<view class="disable" wx:if="{{coupon.status == 'useless'}}">此优惠券不能和已勾选的优惠券叠加使用</view>
|
||||
</block>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</block>
|
||||
<view wx:else class="couponp-empty-wrap">
|
||||
<t-image t-class="couponp-empty-img" src="{{emptyCouponImg}}" />
|
||||
<view class="couponp-empty-title">暂无优惠券</view>
|
||||
</view>
|
||||
<view class="coupons-cover" />
|
||||
</view>
|
||||
</t-popup>
|
||||
|
||||
@@ -0,0 +1,104 @@
|
||||
.select-coupons {
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
padding-top: 28rpx;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
.select-coupons .title {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
.select-coupons .info {
|
||||
width: 100%;
|
||||
height: 34rpx;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
line-height: 34rpx;
|
||||
margin: 20rpx 0;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
.select-coupons .info .price {
|
||||
color: #fa4126;
|
||||
}
|
||||
.select-coupons .coupons-list {
|
||||
max-height: 500rpx;
|
||||
}
|
||||
.select-coupons .coupons-list .coupons-wrap {
|
||||
padding: 0rpx 20rpx;
|
||||
}
|
||||
.select-coupons .coupons-list .disable {
|
||||
font-size: 24rpx;
|
||||
color: #ff2525;
|
||||
padding-top: 20rpx;
|
||||
}
|
||||
.select-coupons .coupons-list .slot-radio {
|
||||
position: absolute;
|
||||
right: 22rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
display: inline-block;
|
||||
}
|
||||
.select-coupons .coupons-list .slot-radio .wr-check-filled {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
.select-coupons .coupons-list .slot-radio .check {
|
||||
width: 36rpx;
|
||||
}
|
||||
.select-coupons .coupons-list .slot-radio .text-primary {
|
||||
color: #fa4126;
|
||||
}
|
||||
.select-coupons .coupons-list .slot-radio .wr-check {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
.select-coupons .coupons-list .slot-radio .wr-uncheck {
|
||||
font-size: 36rpx;
|
||||
color: #999;
|
||||
}
|
||||
.select-coupons .couponp-empty-wrap {
|
||||
padding: 40rpx;
|
||||
}
|
||||
.select-coupons .couponp-empty-wrap .couponp-empty-img {
|
||||
display: block;
|
||||
width: 240rpx;
|
||||
height: 240rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.select-coupons .couponp-empty-wrap .couponp-empty-title {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
text-align: center;
|
||||
line-height: 40rpx;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
.select-coupons .coupons-cover {
|
||||
height: 112rpx;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin-top: 30rpx;
|
||||
padding: 12rpx 32rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.select-coupons .coupons-cover .btn {
|
||||
width: 332rpx;
|
||||
height: 88rpx;
|
||||
text-align: center;
|
||||
line-height: 88rpx;
|
||||
font-size: 32rpx;
|
||||
border-radius: 44rpx;
|
||||
box-sizing: border-box;
|
||||
border: 2rpx solid #dddddd;
|
||||
color: #333333;
|
||||
}
|
||||
.select-coupons .coupons-cover .red {
|
||||
border-color: #fa4126;
|
||||
background-color: #fa4126;
|
||||
color: #ffffff;
|
||||
}
|
||||
132
mini-program/pages/order/components/specs-goods-card/index.js
Normal file
132
mini-program/pages/order/components/specs-goods-card/index.js
Normal file
@@ -0,0 +1,132 @@
|
||||
Component({
|
||||
options: {
|
||||
addGlobalClass: true,
|
||||
multipleSlots: true, // 在组件定义时的选项中启用多slot支持
|
||||
},
|
||||
|
||||
externalClasses: [
|
||||
'title-class',
|
||||
'desc-class',
|
||||
'num-class',
|
||||
'thumb-class',
|
||||
'specs-class',
|
||||
'price-class',
|
||||
'origin-price-class',
|
||||
'price-prefix-class',
|
||||
],
|
||||
|
||||
relations: {
|
||||
'../order-card/index': {
|
||||
type: 'ancestor',
|
||||
linked(target) {
|
||||
this.parent = target;
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
properties: {
|
||||
id: String,
|
||||
hidden: {
|
||||
// 设置为null代表不做类型转换
|
||||
type: null,
|
||||
observer(hidden) {
|
||||
// null就是代表没有设置，没有设置的话不setData，防止祖先组件触发的setHidden操作被覆盖
|
||||
if (hidden !== null) {
|
||||
this.setHidden(!!hidden);
|
||||
}
|
||||
},
|
||||
},
|
||||
data: Object,
|
||||
layout: {
|
||||
type: String,
|
||||
value: 'horizontal',
|
||||
},
|
||||
thumbMode: {
|
||||
type: String,
|
||||
value: 'aspectFill',
|
||||
},
|
||||
thumbWidth: Number,
|
||||
thumbHeight: Number,
|
||||
thumbWidthInPopup: Number,
|
||||
thumbHeightInPopup: Number,
|
||||
priceFill: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
},
|
||||
currency: {
|
||||
type: String,
|
||||
value: '¥',
|
||||
},
|
||||
lazyLoad: Boolean,
|
||||
centered: Boolean,
|
||||
showCart: Boolean,
|
||||
pricePrefix: String,
|
||||
cartSize: {
|
||||
type: Number,
|
||||
value: 48,
|
||||
},
|
||||
cartColor: {
|
||||
type: String,
|
||||
value: '#FA550F',
|
||||
},
|
||||
disablePopup: Boolean,
|
||||
},
|
||||
|
||||
data: {
|
||||
hiddenInData: false,
|
||||
specsPopup: {
|
||||
insert: false,
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
|
||||
currentInTapSpecs: false,
|
||||
|
||||
lifetimes: {
|
||||
ready() {
|
||||
const { hidden } = this.properties;
|
||||
if (hidden !== null) {
|
||||
this.setHidden(!!hidden);
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
closeSpecsPopup() {
|
||||
this.setData({
|
||||
'specsPopup.show': false,
|
||||
});
|
||||
this.triggerEvent('specsclose', { good: this.properties.data });
|
||||
},
|
||||
|
||||
removeSpecsPopup() {
|
||||
this.setData({
|
||||
'specsPopup.insert': false,
|
||||
});
|
||||
},
|
||||
|
||||
onClick(e) {
|
||||
if (this.currentInTapSpecs) {
|
||||
this.currentInTapSpecs = false;
|
||||
return;
|
||||
}
|
||||
this.triggerEvent('click', e.detail);
|
||||
},
|
||||
|
||||
onClickThumb(e) {
|
||||
this.triggerEvent('thumb', e.detail);
|
||||
},
|
||||
|
||||
onClickTag(e) {
|
||||
this.triggerEvent('tag', e.detail);
|
||||
},
|
||||
|
||||
onClickCart(e) {
|
||||
this.triggerEvent('add-cart', e.detail);
|
||||
},
|
||||
|
||||
setHidden(hidden) {
|
||||
this.setData({ hiddenInData: !!hidden });
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"goods-card": "../goods-card/index"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
<goods-card
|
||||
class="wr-specs-goods-card"
|
||||
id="{{id}}"
|
||||
layout="{{layout}}"
|
||||
data="{{data}}"
|
||||
currency="{{currency}}"
|
||||
price-fill="{{priceFill}}"
|
||||
lazy-load="{{lazyLoad}}"
|
||||
centered="{{centered}}"
|
||||
thumb-mode="{{thumbMode}}"
|
||||
thumb-width="{{thumbWidth}}"
|
||||
thumb-height="{{thumbHeight}}"
|
||||
show-cart="{{showCart}}"
|
||||
cart-size="{{cartSize}}"
|
||||
cart-color="{{cartColor}}"
|
||||
card-class="{{index === goodsList.length - 1 ? 'wr-goods-card__no-border' : 'wr-goods-card'}}"
|
||||
title-class="title-class"
|
||||
desc-class="desc-class"
|
||||
num-class="num-class"
|
||||
thumb-class="thumb-class"
|
||||
specs-class="specs-class"
|
||||
price-class="price-class"
|
||||
origin-price-class="origin-price-class"
|
||||
price-prefix-class="price-prefix-class"
|
||||
bind:thumb="onClickThumb"
|
||||
bind:tag="onClickTag"
|
||||
bind:add-cart="onClickCart"
|
||||
bind:click="onClick"
|
||||
hidden="{{hiddenInData}}"
|
||||
>
|
||||
<!-- 透传good-card组件的slot -->
|
||||
<slot name="thumb-cover" slot="thumb-cover" />
|
||||
<slot name="after-title" slot="after-title" />
|
||||
<slot name="after-desc" slot="after-desc" />
|
||||
<slot name="price-prefix" slot="price-prefix" />
|
||||
<slot name="append-body" slot="append-body" />
|
||||
<slot name="footer" slot="footer" />
|
||||
<slot name="append-card" slot="append-card" />
|
||||
</goods-card>
|
||||
|
||||
Reference in New Issue
Block a user