通过微信开发者工具 商城模板 创建新小程序
This commit is contained in:
441
mini-program/pages/order/apply-service/index.js
Normal file
441
mini-program/pages/order/apply-service/index.js
Normal file
@@ -0,0 +1,441 @@
|
||||
import Dialog from 'tdesign-miniprogram/dialog/index';
|
||||
import Toast from 'tdesign-miniprogram/toast/index';
|
||||
import { priceFormat } from '../../../utils/util';
|
||||
import { OrderStatus, ServiceType, ServiceReceiptStatus } from '../config';
|
||||
import reasonSheet from '../components/reason-sheet/reasonSheet';
|
||||
import {
|
||||
fetchRightsPreview,
|
||||
dispatchConfirmReceived,
|
||||
fetchApplyReasonList,
|
||||
dispatchApplyService,
|
||||
} from '../../../services/order/applyService';
|
||||
|
||||
Page({
|
||||
query: {},
|
||||
data: {
|
||||
uploading: false, // 凭证上传状态
|
||||
canApplyReturn: true, // 是否可退货
|
||||
goodsInfo: {},
|
||||
receiptStatusList: [
|
||||
{ desc: '未收到货', status: ServiceReceiptStatus.NOT_RECEIPTED },
|
||||
{ desc: '已收到货', status: ServiceReceiptStatus.RECEIPTED },
|
||||
],
|
||||
applyReasons: [],
|
||||
serviceType: null, // 20-仅退款，10-退货退款
|
||||
serviceFrom: {
|
||||
returnNum: 1,
|
||||
receiptStatus: { desc: '请选择', status: null },
|
||||
applyReason: { desc: '请选择', type: null },
|
||||
// max-填写上限(单位分)，current-当前值(单位分)，temp输入框中的值(单位元)
|
||||
amount: { max: 0, current: 0, temp: 0, focus: false },
|
||||
remark: '',
|
||||
rightsImageUrls: [],
|
||||
},
|
||||
maxApplyNum: 2, // 最大可申请售后的商品数
|
||||
amountTip: '',
|
||||
showReceiptStatusDialog: false,
|
||||
validateRes: {
|
||||
valid: false,
|
||||
msg: '',
|
||||
},
|
||||
submitting: false,
|
||||
inputDialogVisible: false,
|
||||
uploadGridConfig: {
|
||||
column: 3,
|
||||
width: 212,
|
||||
height: 212,
|
||||
},
|
||||
serviceRequireType: '',
|
||||
},
|
||||
|
||||
setWatcher(key, callback) {
|
||||
let lastData = this.data;
|
||||
const keys = key.split('.');
|
||||
keys.slice(0, -1).forEach((k) => {
|
||||
lastData = lastData[k];
|
||||
});
|
||||
const lastKey = keys[keys.length - 1];
|
||||
this.observe(lastData, lastKey, callback);
|
||||
},
|
||||
|
||||
observe(data, k, callback) {
|
||||
let val = data[k];
|
||||
Object.defineProperty(data, k, {
|
||||
configurable: true,
|
||||
enumerable: true,
|
||||
set: (value) => {
|
||||
val = value;
|
||||
callback();
|
||||
},
|
||||
get: () => {
|
||||
return val;
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
validate() {
|
||||
let valid = true;
|
||||
let msg = '';
|
||||
// 检查必填项
|
||||
if (!this.data.serviceFrom.applyReason.type) {
|
||||
valid = false;
|
||||
msg = '请填写退款原因';
|
||||
} else if (!this.data.serviceFrom.amount.current) {
|
||||
valid = false;
|
||||
msg = '请填写退款金额';
|
||||
}
|
||||
if (this.data.serviceFrom.amount.current <= 0) {
|
||||
valid = false;
|
||||
msg = '退款金额必须大于0';
|
||||
}
|
||||
this.setData({ validateRes: { valid, msg } });
|
||||
},
|
||||
|
||||
onLoad(query) {
|
||||
this.query = query;
|
||||
if (!this.checkQuery()) return;
|
||||
this.setData({
|
||||
canApplyReturn: query.canApplyReturn === 'true',
|
||||
});
|
||||
this.init();
|
||||
this.inputDialog = this.selectComponent('#input-dialog');
|
||||
this.setWatcher('serviceFrom.returnNum', this.validate.bind(this));
|
||||
this.setWatcher('serviceFrom.applyReason', this.validate.bind(this));
|
||||
this.setWatcher('serviceFrom.amount', this.validate.bind(this));
|
||||
this.setWatcher('serviceFrom.rightsImageUrls', this.validate.bind(this));
|
||||
},
|
||||
|
||||
async init() {
|
||||
try {
|
||||
await this.refresh();
|
||||
} catch (e) {}
|
||||
},
|
||||
|
||||
checkQuery() {
|
||||
const { orderNo, skuId } = this.query;
|
||||
if (!orderNo) {
|
||||
Dialog.alert({
|
||||
content: '请先选择订单',
|
||||
}).then(() => {
|
||||
wx.redirectTo({ url: 'pages/order/order-list/index' });
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (!skuId) {
|
||||
Dialog.alert({
|
||||
content: '请先选择商品',
|
||||
}).then(() => {
|
||||
wx.redirectTo(`pages/order/order-detail/index?orderNo=${orderNo}`);
|
||||
});
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
|
||||
async refresh() {
|
||||
wx.showLoading({ title: 'loading' });
|
||||
try {
|
||||
const res = await this.getRightsPreview();
|
||||
wx.hideLoading();
|
||||
const goodsInfo = {
|
||||
id: res.data.skuId,
|
||||
thumb: res.data.goodsInfo && res.data.goodsInfo.skuImage,
|
||||
title: res.data.goodsInfo && res.data.goodsInfo.goodsName,
|
||||
spuId: res.data.spuId,
|
||||
skuId: res.data.skuId,
|
||||
specs: ((res.data.goodsInfo && res.data.goodsInfo.specInfo) || []).map((s) => s.specValue),
|
||||
paidAmountEach: res.data.paidAmountEach,
|
||||
boughtQuantity: res.data.boughtQuantity,
|
||||
};
|
||||
this.setData({
|
||||
goodsInfo,
|
||||
'serviceFrom.amount': {
|
||||
max: res.data.refundableAmount,
|
||||
current: res.data.refundableAmount,
|
||||
},
|
||||
'serviceFrom.returnNum': res.data.numOfSku,
|
||||
amountTip: `最多可申请退款¥ ${priceFormat(res.data.refundableAmount, 2)}，含发货运费¥ ${priceFormat(
|
||||
res.data.shippingFeeIncluded,
|
||||
2,
|
||||
)}`,
|
||||
maxApplyNum: res.data.numOfSkuAvailable,
|
||||
});
|
||||
} catch (err) {
|
||||
wx.hideLoading();
|
||||
throw err;
|
||||
}
|
||||
},
|
||||
|
||||
async getRightsPreview() {
|
||||
const { orderNo, skuId, spuId } = this.query;
|
||||
const params = {
|
||||
orderNo,
|
||||
skuId,
|
||||
spuId,
|
||||
numOfSku: this.data.serviceFrom.returnNum,
|
||||
};
|
||||
const res = await fetchRightsPreview(params);
|
||||
return res;
|
||||
},
|
||||
|
||||
onApplyOnlyRefund() {
|
||||
wx.setNavigationBarTitle({ title: '申请退款' });
|
||||
this.setData({ serviceRequireType: 'REFUND_MONEY' });
|
||||
this.switchReceiptStatus(0);
|
||||
},
|
||||
|
||||
onApplyReturnGoods() {
|
||||
wx.setNavigationBarTitle({ title: '申请退货退款' });
|
||||
this.setData({ serviceRequireType: 'REFUND_GOODS' });
|
||||
const orderStatus = parseInt(this.query.orderStatus);
|
||||
Promise.resolve()
|
||||
.then(() => {
|
||||
if (orderStatus === OrderStatus.PENDING_RECEIPT) {
|
||||
return Dialog.confirm({
|
||||
title: '订单商品是否已经收到货',
|
||||
content: '',
|
||||
confirmBtn: '确认收货，并申请退货',
|
||||
cancelBtn: '未收到货',
|
||||
}).then(() => {
|
||||
return dispatchConfirmReceived({
|
||||
parameter: {
|
||||
logisticsNo: this.query.logisticsNo,
|
||||
orderNo: this.query.orderNo,
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
return;
|
||||
})
|
||||
.then(() => {
|
||||
this.setData({ serviceType: ServiceType.RETURN_GOODS });
|
||||
this.switchReceiptStatus(1);
|
||||
});
|
||||
},
|
||||
|
||||
onApplyReturnGoodsStatus() {
|
||||
reasonSheet({
|
||||
show: true,
|
||||
title: '选择退款原因',
|
||||
options: this.data.applyReasons.map((r) => ({
|
||||
title: r.desc,
|
||||
})),
|
||||
showConfirmButton: true,
|
||||
showCancelButton: true,
|
||||
emptyTip: '请选择退款原因',
|
||||
}).then((indexes) => {
|
||||
this.setData({
|
||||
'serviceFrom.applyReason': this.data.applyReasons[indexes[0]],
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
onChangeReturnNum(e) {
|
||||
const { value } = e.detail;
|
||||
this.setData({
|
||||
'serviceFrom.returnNum': value,
|
||||
});
|
||||
},
|
||||
|
||||
onApplyGoodsStatus() {
|
||||
reasonSheet({
|
||||
show: true,
|
||||
title: '请选择收货状态',
|
||||
options: this.data.receiptStatusList.map((r) => ({
|
||||
title: r.desc,
|
||||
})),
|
||||
showConfirmButton: true,
|
||||
emptyTip: '请选择收货状态',
|
||||
}).then((indexes) => {
|
||||
this.setData({
|
||||
'serviceFrom.receiptStatus': this.data.receiptStatusList[indexes[0]],
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
switchReceiptStatus(index) {
|
||||
const statusItem = this.data.receiptStatusList[index];
|
||||
// 没有找到对应的状态，则清空/初始化
|
||||
if (!statusItem) {
|
||||
this.setData({
|
||||
showReceiptStatusDialog: false,
|
||||
'serviceFrom.receiptStatus': { desc: '请选择', status: null },
|
||||
'serviceFrom.applyReason': { desc: '请选择', type: null }, // 收货状态改变时，初始化申请原因
|
||||
applyReasons: [],
|
||||
});
|
||||
return;
|
||||
}
|
||||
// 仅选中项与当前项不一致时，才切换申请原因列表applyReasons
|
||||
if (!statusItem || statusItem.status === this.data.serviceFrom.receiptStatus.status) {
|
||||
this.setData({ showReceiptStatusDialog: false });
|
||||
return;
|
||||
}
|
||||
this.getApplyReasons(statusItem.status).then((reasons) => {
|
||||
this.setData({
|
||||
showReceiptStatusDialog: false,
|
||||
'serviceFrom.receiptStatus': statusItem,
|
||||
'serviceFrom.applyReason': { desc: '请选择', type: null }, // 收货状态改变时，重置申请原因
|
||||
applyReasons: reasons,
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
getApplyReasons(receiptStatus) {
|
||||
const params = { rightsReasonType: receiptStatus };
|
||||
return fetchApplyReasonList(params)
|
||||
.then((res) => {
|
||||
return res.data.rightsReasonList.map((reason) => ({
|
||||
type: reason.id,
|
||||
desc: reason.desc,
|
||||
}));
|
||||
})
|
||||
.catch(() => {
|
||||
return [];
|
||||
});
|
||||
},
|
||||
|
||||
onReceiptStatusDialogConfirm(e) {
|
||||
const { index } = e.currentTarget.dataset;
|
||||
this.switchReceiptStatus(index);
|
||||
},
|
||||
|
||||
onAmountTap() {
|
||||
this.setData({
|
||||
'serviceFrom.amount.temp': priceFormat(this.data.serviceFrom.amount.current),
|
||||
'serviceFrom.amount.focus': true,
|
||||
inputDialogVisible: true,
|
||||
});
|
||||
this.inputDialog.setData({
|
||||
cancelBtn: '取消',
|
||||
confirmBtn: '确定',
|
||||
});
|
||||
this.inputDialog._onConfirm = () => {
|
||||
this.setData({
|
||||
'serviceFrom.amount.current': this.data.serviceFrom.amount.temp * 100,
|
||||
});
|
||||
};
|
||||
this.inputDialog._onCancel = () => {};
|
||||
},
|
||||
|
||||
// 对输入的值进行过滤
|
||||
onAmountInput(e) {
|
||||
let { value } = e.detail;
|
||||
const regRes = value.match(/\d+(\.?\d*)?/); // 输入中，允许末尾为小数点
|
||||
value = regRes ? regRes[0] : '';
|
||||
this.setData({ 'serviceFrom.amount.temp': value });
|
||||
},
|
||||
|
||||
// 失去焦点时，更严格的过滤并转化为float
|
||||
onAmountBlur(e) {
|
||||
let { value } = e.detail;
|
||||
const regRes = value.match(/\d+(\.?\d+)?/); // 失去焦点时，不允许末尾为小数点
|
||||
value = regRes ? regRes[0] : '0';
|
||||
value = parseFloat(value) * 100;
|
||||
if (value > this.data.serviceFrom.amount.max) {
|
||||
value = this.data.serviceFrom.amount.max;
|
||||
}
|
||||
this.setData({
|
||||
'serviceFrom.amount.temp': priceFormat(value),
|
||||
'serviceFrom.amount.focus': false,
|
||||
});
|
||||
},
|
||||
|
||||
onAmountFocus() {
|
||||
this.setData({ 'serviceFrom.amount.focus': true });
|
||||
},
|
||||
|
||||
onRemarkChange(e) {
|
||||
const { value } = e.detail;
|
||||
this.setData({
|
||||
'serviceFrom.remark': value,
|
||||
});
|
||||
},
|
||||
|
||||
// 发起申请售后请求
|
||||
onSubmit() {
|
||||
this.submitCheck().then(() => {
|
||||
const params = {
|
||||
rights: {
|
||||
orderNo: this.query.orderNo,
|
||||
refundRequestAmount: this.data.serviceFrom.amount.current,
|
||||
rightsImageUrls: this.data.serviceFrom.rightsImageUrls,
|
||||
rightsReasonDesc: this.data.serviceFrom.applyReason.desc,
|
||||
rightsReasonType: this.data.serviceFrom.receiptStatus.status,
|
||||
rightsType: this.data.serviceType,
|
||||
},
|
||||
rightsItem: [
|
||||
{
|
||||
itemTotalAmount: this.data.goodsInfo.price * this.data.serviceFrom.returnNum,
|
||||
rightsQuantity: this.data.serviceFrom.returnNum,
|
||||
skuId: this.query.skuId,
|
||||
spuId: this.query.spuId,
|
||||
},
|
||||
],
|
||||
refundMemo: this.data.serviceFrom.remark.current,
|
||||
};
|
||||
this.setData({ submitting: true });
|
||||
// 发起申请售后请求
|
||||
dispatchApplyService(params)
|
||||
.then((res) => {
|
||||
Toast({
|
||||
context: this,
|
||||
selector: '#t-toast',
|
||||
message: '申请成功',
|
||||
icon: '',
|
||||
});
|
||||
|
||||
wx.redirectTo({
|
||||
url: `/pages/order/after-service-detail/index?rightsNo=${res.data.rightsNo}`,
|
||||
});
|
||||
})
|
||||
.then(() => this.setData({ submitting: false }))
|
||||
.catch(() => this.setData({ submitting: false }));
|
||||
});
|
||||
},
|
||||
|
||||
submitCheck() {
|
||||
return new Promise((resolve) => {
|
||||
const { msg, valid } = this.data.validateRes;
|
||||
if (!valid) {
|
||||
Toast({
|
||||
context: this,
|
||||
selector: '#t-toast',
|
||||
message: msg,
|
||||
icon: '',
|
||||
});
|
||||
return;
|
||||
}
|
||||
resolve();
|
||||
});
|
||||
},
|
||||
|
||||
handleSuccess(e) {
|
||||
const { files } = e.detail;
|
||||
this.setData({
|
||||
'sessionFrom.rightsImageUrls': files,
|
||||
});
|
||||
},
|
||||
|
||||
handleRemove(e) {
|
||||
const { index } = e.detail;
|
||||
const {
|
||||
sessionFrom: { rightsImageUrls },
|
||||
} = this.data;
|
||||
rightsImageUrls.splice(index, 1);
|
||||
this.setData({
|
||||
'sessionFrom.rightsImageUrls': rightsImageUrls,
|
||||
});
|
||||
},
|
||||
|
||||
handleComplete() {
|
||||
this.setData({
|
||||
uploading: false,
|
||||
});
|
||||
},
|
||||
|
||||
handleSelectChange() {
|
||||
this.setData({
|
||||
uploading: true,
|
||||
});
|
||||
},
|
||||
});
|
||||
19
mini-program/pages/order/apply-service/index.json
Normal file
19
mini-program/pages/order/apply-service/index.json
Normal file
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"navigationBarTitleText": "选择售后类型",
|
||||
"usingComponents": {
|
||||
"wr-price": "/components/price/index",
|
||||
"wr-order-goods-card": "../components/order-goods-card/index",
|
||||
"wr-reason-sheet": "../components/reason-sheet/index",
|
||||
"t-cell": "tdesign-miniprogram/cell/cell",
|
||||
"t-icon": "tdesign-miniprogram/icon/icon",
|
||||
"t-toast": "tdesign-miniprogram/toast/toast",
|
||||
"t-dialog": "tdesign-miniprogram/dialog/dialog",
|
||||
"t-button": "tdesign-miniprogram/button/button",
|
||||
"t-cell-group": "tdesign-miniprogram/cell-group/cell-group",
|
||||
"t-stepper": "tdesign-miniprogram/stepper/stepper",
|
||||
"t-popup": "tdesign-miniprogram/popup/popup",
|
||||
"t-textarea": "tdesign-miniprogram/textarea/textarea",
|
||||
"t-input": "tdesign-miniprogram/input/input",
|
||||
"t-upload": "tdesign-miniprogram/upload/upload"
|
||||
}
|
||||
}
|
||||
198
mini-program/pages/order/apply-service/index.wxml
Normal file
198
mini-program/pages/order/apply-service/index.wxml
Normal file
@@ -0,0 +1,198 @@
|
||||
<view class="select-service">
|
||||
<view class="order-goods-card">
|
||||
<wr-order-goods-card goods="{{goodsInfo}}" no-top-line thumb-class="order-goods-card-title-class">
|
||||
<view slot="footer" class="order-goods-card-footer">
|
||||
<wr-price
|
||||
price="{{goodsInfo.paidAmountEach}}"
|
||||
fill
|
||||
wr-class="order-goods-card-footer-price-class"
|
||||
symbol-class="order-goods-card-footer-price-symbol"
|
||||
decimal-class="order-goods-card-footer-price-decimal"
|
||||
/>
|
||||
<view class="order-goods-card-footer-num">x {{goodsInfo.boughtQuantity}}</view>
|
||||
</view>
|
||||
</wr-order-goods-card>
|
||||
</view>
|
||||
<view wx:if="{{!serviceRequireType}}" class="service-choice">
|
||||
<t-cell-group>
|
||||
<t-cell
|
||||
title="申请退款（无需退货）"
|
||||
arrow
|
||||
description="没收到货，或与商家协商同意不用退货只退款"
|
||||
bindtap="onApplyOnlyRefund"
|
||||
>
|
||||
<t-icon
|
||||
slot="left-icon"
|
||||
prefix="wr"
|
||||
class="t-cell__left__icon"
|
||||
name="goods_refund"
|
||||
size="48rpx"
|
||||
color="#fa4126"
|
||||
/>
|
||||
</t-cell>
|
||||
<t-cell
|
||||
wx:if="{{canApplyReturn}}"
|
||||
title="退货退款"
|
||||
description="已收到货，需要退还收到的商品"
|
||||
arrow
|
||||
bindtap="onApplyReturnGoods"
|
||||
>
|
||||
<t-icon
|
||||
slot="left-icon"
|
||||
prefix="wr"
|
||||
class="t-cell__left__icon"
|
||||
name="goods_return"
|
||||
size="48rpx"
|
||||
color="#fa4126"
|
||||
/>
|
||||
</t-cell>
|
||||
<t-cell wx:else class="non-returnable" title="退货退款" description="该商品不支持退货">
|
||||
<t-icon
|
||||
slot="left-icon"
|
||||
prefix="wr"
|
||||
class="t-cell__left__icon"
|
||||
name="goods_return"
|
||||
size="48rpx"
|
||||
color="#fa4126"
|
||||
/>
|
||||
</t-cell>
|
||||
</t-cell-group>
|
||||
</view>
|
||||
<!-- 售后表单 -->
|
||||
<view wx:else class="service-form">
|
||||
<view class="service-from-group">
|
||||
<t-cell-group>
|
||||
<t-cell title="商品收货状态" arrow note="{{serviceFrom.receiptStatus.desc}}" bind:tap="onApplyGoodsStatus" />
|
||||
<t-cell
|
||||
bordered="{{false}}"
|
||||
title="退款原因"
|
||||
wx:if="{{canApplyReturn}}"
|
||||
note="{{serviceFrom.applyReason.desc}}"
|
||||
arrow
|
||||
bindtap="onApplyReturnGoodsStatus"
|
||||
/>
|
||||
</t-cell-group>
|
||||
</view>
|
||||
<view class="service-from-group">
|
||||
<t-cell-group>
|
||||
<t-cell title="退款商品数量">
|
||||
<t-stepper
|
||||
slot="note"
|
||||
theme="filled"
|
||||
min="1"
|
||||
max="{{maxApplyNum}}"
|
||||
value="{{serviceFrom.returnNum}}"
|
||||
bindchange="onChangeReturnNum"
|
||||
/>
|
||||
</t-cell>
|
||||
<t-cell
|
||||
title="退款金额"
|
||||
t-class-description="refund-money__description"
|
||||
description="{{amountTip}}"
|
||||
bind:tap="onAmountTap"
|
||||
>
|
||||
<view class="service-from-group__wrapper" slot="note">
|
||||
<wr-price
|
||||
price="{{serviceFrom.amount.current}}"
|
||||
fill
|
||||
wr-class="refund-money-price-class"
|
||||
symbol-class="refund-money-price-symbol"
|
||||
decimal-class="refund-money-price-decimal"
|
||||
/>
|
||||
<view class="service-from-group__price">
|
||||
修改
|
||||
<t-icon color="#bbb" name="chevron-right" size="30rpx" slot="left-icon" />
|
||||
</view>
|
||||
</view>
|
||||
</t-cell>
|
||||
</t-cell-group>
|
||||
</view>
|
||||
<view class="service-from-group__textarea">
|
||||
<text class="textarea--label">退款说明</text>
|
||||
<t-textarea
|
||||
style="height: 220rpx"
|
||||
value="{{serviceFrom.remark}}"
|
||||
t-class="textarea--content"
|
||||
maxlength="200"
|
||||
indicator
|
||||
placeholder="退款说明（选填）"
|
||||
bind:change="onRemarkChange"
|
||||
/>
|
||||
</view>
|
||||
<view class="service-from-group__grid">
|
||||
<t-upload
|
||||
media-type="{{['image','video']}}"
|
||||
files="{{sessionFrom.rightsImageUrls}}"
|
||||
bind:remove="handleRemove"
|
||||
bind:success="handleSuccess"
|
||||
bind:complete="handleComplete"
|
||||
bind:select-change="handleSelectChange"
|
||||
gridConfig="{{uploadGridConfig}}"
|
||||
max="3"
|
||||
>
|
||||
<view slot="add-content" class="upload-addcontent-slot">
|
||||
<t-icon name="add" size="60rpx" />
|
||||
<view class="upload-desc">
|
||||
<text>上传凭证</text>
|
||||
<text>（最多3张）</text>
|
||||
</view>
|
||||
</view>
|
||||
</t-upload>
|
||||
</view>
|
||||
<view class="bottom-bar">
|
||||
<t-button
|
||||
t-class="bottom-bar__btn {{validateRes.valid && !uploading ? '' : 'disabled'}}"
|
||||
bindtap="onSubmit"
|
||||
loading="{{submitting}}"
|
||||
>
|
||||
提交
|
||||
</t-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 收货状态选择 -->
|
||||
<t-popup visible="{{showReceiptStatusDialog}}" placement="bottom" bindclose="onReceiptStatusDialogConfirm">
|
||||
<view class="dialog--service-status" slot="content">
|
||||
<view class="options">
|
||||
<view
|
||||
wx:for="{{receiptStatusList}}"
|
||||
wx:key="status"
|
||||
class="option"
|
||||
hover-class="option--active"
|
||||
bindtap="onReceiptStatusDialogConfirm"
|
||||
data-index="{{index}}"
|
||||
>
|
||||
{{item.desc}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="cancel" hover-class="cancel--active" bindtap="onReceiptStatusDialogConfirm">取消</view>
|
||||
</view>
|
||||
</t-popup>
|
||||
<!-- 理由选择 -->
|
||||
<wr-reason-sheet id="wr-reason-sheet" />
|
||||
<!-- 金额填写 -->
|
||||
<t-dialog
|
||||
id="input-dialog"
|
||||
visible="{{inputDialogVisible}}"
|
||||
class="{{serviceFrom.amount.focus ? 'amount-dialog--focus' : ''}}"
|
||||
>
|
||||
<view class="input-dialog__title" slot="title">退款金额</view>
|
||||
<view class="input-dialog__content" slot="content">
|
||||
<t-input
|
||||
t-class="input"
|
||||
t-class-input="input-dialog__input"
|
||||
t-class-label="input-dialog__label"
|
||||
placeholder=""
|
||||
value="{{serviceFrom.amount.temp}}"
|
||||
type="digit"
|
||||
focus="{{serviceFrom.amount.focus}}"
|
||||
bindinput="onAmountInput"
|
||||
bindfocus="onAmountFocus"
|
||||
bindblur="onAmountBlur"
|
||||
label="¥"
|
||||
></t-input>
|
||||
<view class="tips">{{amountTip}}</view>
|
||||
</view>
|
||||
</t-dialog>
|
||||
<t-dialog id="t-dialog" />
|
||||
<t-toast id="t-toast" />
|
||||
308
mini-program/pages/order/apply-service/index.wxss
Normal file
308
mini-program/pages/order/apply-service/index.wxss
Normal file
@@ -0,0 +1,308 @@
|
||||
:host {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.select-service .service-form .service-from-group {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.select-service .service-form {
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) + 80rpx);
|
||||
}
|
||||
|
||||
.order-goods-card-footer {
|
||||
display: flex;
|
||||
width: calc(100% - 190rpx);
|
||||
justify-content: space-between;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 190rpx;
|
||||
}
|
||||
|
||||
.order-goods-card-footer-num {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.select-service .order-goods-card-footer .order-goods-card-footer-price-class {
|
||||
font-size: 36rpx;
|
||||
color: #333;
|
||||
font-family: DIN Alternate;
|
||||
}
|
||||
.select-service .order-goods-card-footer .order-goods-card-footer-price-decimal {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-family: DIN Alternate;
|
||||
}
|
||||
.select-service .order-goods-card-footer .order-goods-card-footer-price-symbol {
|
||||
color: #333;
|
||||
font-size: 24rpx;
|
||||
font-family: DIN Alternate;
|
||||
}
|
||||
|
||||
.select-service .remark {
|
||||
min-height: 110rpx;
|
||||
border-radius: 10rpx;
|
||||
margin-top: 20rpx;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.select-service .remark::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.select-service .special-cell .special-cell-note {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.select-service .special-cell .wr-cell__title {
|
||||
margin-right: 100rpx;
|
||||
}
|
||||
|
||||
.select-service .special-cell .special-cell-note-price-class {
|
||||
font-size: 36rpx;
|
||||
color: #fa4126;
|
||||
font-family: DIN Alternate;
|
||||
}
|
||||
.select-service .special-cell .special-cell-note-price-decimal {
|
||||
font-size: 28rpx;
|
||||
color: #fa4126;
|
||||
font-family: DIN Alternate;
|
||||
}
|
||||
.select-service .special-cell .special-cell-note-price-symbol {
|
||||
color: #fa4126;
|
||||
font-size: 24rpx;
|
||||
font-family: DIN Alternate;
|
||||
}
|
||||
|
||||
.select-service .bottom-bar__btn {
|
||||
width: 686rpx;
|
||||
background-color: #fa4126;
|
||||
color: white;
|
||||
font-size: 32rpx;
|
||||
border-radius: 48rpx;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 20rpx;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.select-service .bottom-bar__btn::after {
|
||||
border: none;
|
||||
}
|
||||
.select-service .bottom-bar__btn.disabled {
|
||||
background-color: #c6c6c6;
|
||||
--td-button-default-active-bg-color: #c6c6c6;
|
||||
--td-button-default-border-bg-color: #c6c6c6;
|
||||
}
|
||||
.select-service .bottom-bar__btn.disabled::after {
|
||||
border: none;
|
||||
}
|
||||
.select-service .order-goods-card .wr-goods-card {
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
.order-goods-card-footer {
|
||||
display: flex;
|
||||
width: calc(100% - 190rpx);
|
||||
justify-content: space-between;
|
||||
position: absolute;
|
||||
bottom: 20rpx;
|
||||
left: 190rpx;
|
||||
}
|
||||
|
||||
.order-goods-card-footer-num {
|
||||
color: #999;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.order-goods-card-title-class {
|
||||
width: 10rpx !important;
|
||||
}
|
||||
|
||||
.input-dialog__content .input-dialog__input {
|
||||
font-size: 72rpx !important;
|
||||
height: 64rpx;
|
||||
}
|
||||
|
||||
.t-input__label {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
.input-dialog__label {
|
||||
font-size: 48rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.input-dialog__content .input-dialog__input,
|
||||
.input-dialog__label {
|
||||
height: 64rpx;
|
||||
line-height: 64rpx !important;
|
||||
}
|
||||
|
||||
.input-dialog__content .input {
|
||||
font-size: 48rpx;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
--td-input-border-left-space: 0;
|
||||
}
|
||||
|
||||
.input-dialog__content .tips {
|
||||
margin-top: 24rpx;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.t-input__name {
|
||||
width: 10rpx !important;
|
||||
}
|
||||
|
||||
.input-dialog__title {
|
||||
color: #333;
|
||||
font-size: 32rpx;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.dialog--service-status {
|
||||
background-color: #f3f4f5;
|
||||
overflow: hidden;
|
||||
}
|
||||
.dialog--service-status .options .option {
|
||||
color: #333333;
|
||||
font-size: 30rpx;
|
||||
text-align: center;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
background-color: white;
|
||||
}
|
||||
.dialog--service-status .options .option:not(:last-child) {
|
||||
border-bottom: 1rpx solid #e6e6e6;
|
||||
}
|
||||
.dialog--service-status .options .option--active {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.dialog--service-status .options .option.main {
|
||||
color: #fa4126;
|
||||
}
|
||||
.dialog--service-status .cancel {
|
||||
color: #333333;
|
||||
font-size: 30rpx;
|
||||
text-align: center;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
background-color: white;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.dialog--service-status .cancel--active {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.amount-dialog--focus .popup__content--center,
|
||||
.remark-dialog--focus .popup__content--center {
|
||||
top: 100rpx;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
.dialog .dialog__button-confirm {
|
||||
color: #fa4126;
|
||||
color: var(--color-primary, #fa4126);
|
||||
}
|
||||
.select-service .bottom-bar {
|
||||
background-color: #fff;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 158rpx;
|
||||
z-index: 3;
|
||||
}
|
||||
.order-goods-card {
|
||||
background: #fff;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.service-from-group__wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: DIN Alternate;
|
||||
font-weight: bold;
|
||||
font-size: 36rpx;
|
||||
text-align: right;
|
||||
color: #fa4126;
|
||||
}
|
||||
.service-from-group__price {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #bbb;
|
||||
font-size: 24rpx;
|
||||
position: relative;
|
||||
left: 30rpx;
|
||||
}
|
||||
.textarea--label {
|
||||
}
|
||||
.service-from-group__textarea {
|
||||
margin-top: 20rpx;
|
||||
background-color: #fff;
|
||||
padding: 32rpx 32rpx 24rpx;
|
||||
}
|
||||
|
||||
.textarea--content {
|
||||
margin-top: 32rpx;
|
||||
background: #f5f5f5 !important;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
.service-from-group__textarea .t-textarea__wrapper .t-textarea__wrapper-textarea {
|
||||
height: 136rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.service-from-group__grid {
|
||||
padding: 0 32rpx 48rpx;
|
||||
background: #fff;
|
||||
margin-bottom: 148rpx;
|
||||
}
|
||||
|
||||
.upload-addcontent-slot {
|
||||
background-color: #f5f5f5;
|
||||
height: inherit;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.refund-money__description {
|
||||
font-size: 24rpx !important;
|
||||
}
|
||||
|
||||
.upload-desc {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.t-cell__left__icon {
|
||||
position: relative;
|
||||
top: -24rpx;
|
||||
margin-right: 18rpx;
|
||||
}
|
||||
|
||||
.service-choice .t-cell__title-text {
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.service-form .service-from-group .service-from-group__wrapper .refund-money-price-class {
|
||||
font-size: 36rpx;
|
||||
font-family: DIN Alternate;
|
||||
}
|
||||
|
||||
.service-form .service-from-group .service-from-group__wrapper .refund-money-price-decimal {
|
||||
font-size: 28rpx;
|
||||
font-family: DIN Alternate;
|
||||
}
|
||||
|
||||
.service-form .service-from-group .service-from-group__wrapper .refund-money-price-symbol {
|
||||
font-size: 24rpx;
|
||||
font-family: DIN Alternate;
|
||||
}
|
||||
|
||||
.t-button {
|
||||
--td-button-default-color: #000;
|
||||
--td-button-primary-text-color: #fa4126;
|
||||
}
|
||||
Reference in New Issue
Block a user