feat: 添加订单支付和成功页面,更新订单状态逻辑

新增了订单支付页面和支付成功页面,分别用于处理用户的支付流程和展示支付结果。同时,更新了订单状态的逻辑,确保在订单列表中正确显示各个状态。调整了设备租借逻辑,优化了扫码处理流程,提升用户体验。
This commit is contained in:
8vd8
2025-04-10 14:18:43 +08:00
parent aebd6c0459
commit 3fecd77739
53 changed files with 2049 additions and 702 deletions
+3 -1
View File
@@ -7,11 +7,13 @@ if (!Math) {
"./pages/my/index.js";
"./pages/deposit/index.js";
"./pages/order/index.js";
"./pages/order/payment.js";
"./pages/feedback/index.js";
"./pages/help/index.js";
"./pages/device/detail.js";
"./pages/serve/bagCheck/index.js";
"./pages/device/return.js";
"./pages/return/index.js";
"./pages/order/success.js";
}
const _sfc_main = {
onLaunch: function() {
+3 -1
View File
@@ -4,11 +4,13 @@
"pages/my/index",
"pages/deposit/index",
"pages/order/index",
"pages/order/payment",
"pages/feedback/index",
"pages/help/index",
"pages/device/detail",
"pages/serve/bagCheck/index",
"pages/device/return"
"pages/return/index",
"pages/order/success"
],
"window": {
"navigationBarTextStyle": "black",
+2 -2
View File
@@ -6874,9 +6874,9 @@ function initOnError() {
};
}
function initRuntimeSocketService() {
const hosts = "192.168.1.16,192.168.19.1,192.168.47.1,127.0.0.1";
const hosts = "10.8.0.5,192.168.1.15,127.0.0.1";
const port = "8090";
const id = "mp-weixin_TE3u0h";
const id = "mp-weixin_07I937";
const lazy = typeof swan !== "undefined";
let restoreError = lazy ? () => {
} : initOnError();
+2 -2
View File
@@ -22,9 +22,9 @@ const getOrderList = (data) => {
hideLoading: true
});
};
const queryHasOrder = (data) => {
const queryHasOrder = (deviceNo) => {
return config_http.request({
url: `/app/order/getActiveOrder/${data}`,
url: `/app/order/list?deviceNo=${deviceNo}&orderStatus=in_used`,
method: "get"
});
};
+52
View File
@@ -0,0 +1,52 @@
"use strict";
const OrderStatusMap = {
waiting_for_payment: {
text: "待支付",
class: "status-waiting"
},
payment_in_progress: {
text: "支付中",
class: "status-progress"
},
payment_successful: {
text: "支付成功",
class: "status-success"
},
in_used: {
text: "使用中",
class: "status-using"
},
payment_failed: {
text: "支付失败",
class: "status-failed"
},
order_cancelled: {
text: "已取消",
class: "status-cancelled"
},
used_done: {
text: "已完成",
class: "status-finished"
}
};
const OrderStatusTabs = [
{
text: "全部",
status: []
},
{
text: "待支付",
status: ["waiting_for_payment", "payment_in_progress"]
},
{
text: "使用中",
status: ["payment_successful", "in_used"]
},
{
text: "已完成",
status: ["used_done", "payment_failed", "order_cancelled"]
}
];
exports.OrderStatusMap = OrderStatusMap;
exports.OrderStatusTabs = OrderStatusTabs;
//# sourceMappingURL=../../.sourcemap/mp-weixin/constants/orderStatus.js.map
+3 -8
View File
@@ -119,21 +119,16 @@ const _sfc_main = {
common_vendor.index.showLoading({
title: "处理中"
});
const selectedPkg = this.packages[this.selectedPackage];
const rentResult = await config_user.rentPowerBank(this.deviceId, this.phoneNumber);
if (rentResult.code !== 200) {
throw new Error(rentResult.msg || "设备租借失败");
}
const order = rentResult.data;
common_vendor.index.hideLoading();
common_vendor.index.showToast({
title: "租借成功",
icon: "success"
common_vendor.index.redirectTo({
url: `/pages/order/payment?orderId=${order.orderId}&packageTime=${selectedPkg.time}&packagePrice=${selectedPkg.price}`
});
setTimeout(() => {
common_vendor.index.redirectTo({
url: `/pages/order/index?orderId=${order.orderId}`
});
}, 1500);
} catch (error) {
common_vendor.index.hideLoading();
common_vendor.index.showToast({
-1
View File
@@ -1 +0,0 @@
<view class="return-container data-v-df932504"><view class="order-card data-v-df932504"><view class="order-header data-v-df932504"><text class="title data-v-df932504">使用中</text><text class="order-no data-v-df932504">订单号:{{a}}</text></view><view class="device-info data-v-df932504"><text class="device-name data-v-df932504">共享风扇</text><text class="device-id data-v-df932504">设备号:{{b}}</text></view><view class="time-info data-v-df932504"><view class="time-item data-v-df932504"><text class="label data-v-df932504">开始时间</text><text class="value data-v-df932504">{{c}}</text></view><view class="time-item data-v-df932504"><text class="label data-v-df932504">已使用时长</text><text class="value highlight data-v-df932504">{{d}}</text></view><view class="time-item data-v-df932504"><text class="label data-v-df932504">当前费用</text><text class="value data-v-df932504">¥{{e}}</text></view></view></view><view class="notice-card data-v-df932504"><view class="notice-title data-v-df932504">归还说明</view><view class="notice-list data-v-df932504"><view class="notice-item data-v-df932504"><view class="dot data-v-df932504"></view><text class="data-v-df932504">请确保设备完好无损</text></view><view class="notice-item data-v-df932504"><view class="dot data-v-df932504"></view><text class="data-v-df932504">请在指定区域内归还设备</text></view><view class="notice-item data-v-df932504"><view class="dot data-v-df932504"></view><text class="data-v-df932504">归还后押金将自动退还</text></view></view></view><view class="bottom-bar data-v-df932504"><button class="unlock-btn data-v-df932504" bindtap="{{g}}" disabled="{{h}}">{{f}}</button></view></view>
+46 -12
View File
@@ -4,22 +4,56 @@ const util_index = require("../../util/index.js");
const common_assets = require("../../common/assets.js");
const _sfc_main = {
methods: {
handleScan() {
common_vendor.index.scanCode({
success: (res) => {
let deviceNo = util_index.getQueryString(res.path, "deviceNo");
common_vendor.index.__f__("log", "at pages/index/index.vue:58", res.path);
async handleScan() {
try {
const scanResult = await new Promise((resolve, reject) => {
common_vendor.index.scanCode({
success: resolve,
fail: reject
});
});
let deviceNo = util_index.getQueryString(scanResult.path, "deviceNo");
common_vendor.index.__f__("log", "at pages/index/index.vue:64", "扫码路径:", scanResult.path);
const inUseRes = await common_vendor.index.request({
url: `${common_vendor.index.getStorageSync("baseUrl") || "http://127.0.0.1:8080"}/app/order/inUse`,
method: "GET",
header: {
"Authorization": "Bearer " + common_vendor.index.getStorageSync("token"),
"Clientid": common_vendor.index.getStorageSync("client_id")
}
});
if (inUseRes.statusCode === 200 && inUseRes.data.code === 200 && inUseRes.data.data) {
const inUseOrder = inUseRes.data.data;
common_vendor.index.navigateTo({
url: `/pages/return/index?orderId=${inUseOrder.orderId}&deviceId=${deviceNo}`
});
return;
}
const orderRes = await common_vendor.index.request({
url: `${common_vendor.index.getStorageSync("baseUrl") || "http://127.0.0.1:8080"}/app/order/unpaid`,
method: "GET",
header: {
"Authorization": "Bearer " + common_vendor.index.getStorageSync("token"),
"Clientid": common_vendor.index.getStorageSync("client_id")
}
});
if (orderRes.statusCode === 200 && orderRes.data.code === 200 && orderRes.data.data) {
const unpaidOrder = orderRes.data.data;
common_vendor.index.navigateTo({
url: `/pages/order/payment?orderId=${unpaidOrder.orderId}`
});
} else {
common_vendor.index.navigateTo({
url: `/pages/serve/bagCheck/index?deviceNo=${deviceNo}`
});
},
fail: (err) => {
common_vendor.index.showToast({
title: "扫码失败",
icon: "none"
});
}
});
} catch (error) {
common_vendor.index.__f__("error", "at pages/index/index.vue:108", "扫码处理失败:", error);
common_vendor.index.showToast({
title: "扫码失败",
icon: "none"
});
}
}
}
};
+42 -57
View File
@@ -1,31 +1,14 @@
"use strict";
const common_vendor = require("../../common/vendor.js");
const config_user = require("../../config/user.js");
const constants_orderStatus = require("../../constants/orderStatus.js");
const _sfc_main = {
data() {
return {
currentTab: 0,
tabs: ["全部", "使用中", "已完成"],
orderList: [
{
orderNo: "ORDER202403200001",
status: "using",
statusText: "使用中",
deviceId: "FAN001",
startTime: "2024-03-20 15:30",
endTime: "",
amount: "2.00"
},
{
orderNo: "ORDER202403190001",
status: "finished",
statusText: "已完成",
deviceId: "FAN002",
startTime: "2024-03-19 13:00",
endTime: "2024-03-19 15:00",
amount: "4.00"
}
]
OrderStatusMap: constants_orderStatus.OrderStatusMap,
OrderStatusTabs: constants_orderStatus.OrderStatusTabs,
orderList: []
};
},
async onLoad(options) {
@@ -36,69 +19,71 @@ const _sfc_main = {
const orderData = res.data;
const formattedOrder = {
orderNo: orderData.orderId,
status: orderData.orderStatus === 2 ? "using" : "finished",
statusText: orderData.orderStatus === 2 ? "使用中" : "已完成",
status: orderData.orderStatus,
deviceId: orderData.deviceNo,
startTime: this.formatTime(new Date(orderData.createTime)),
endTime: orderData.endTime ? this.formatTime(new Date(orderData.endTime)) : "",
startTime: orderData.createTime,
endTime: orderData.endTime || "",
amount: orderData.amount || "0.00"
};
this.orderList = [formattedOrder, ...this.orderList];
if (orderData.orderStatus === 2) {
this.switchTab(1);
const tabIndex = this.OrderStatusTabs.findIndex(
(tab) => tab.status.includes(orderData.orderStatus)
);
if (tabIndex !== -1) {
this.switchTab(tabIndex);
}
}
} catch (error) {
common_vendor.index.__f__("error", "at pages/order/index.vue:111", "获取订单详情失败:", error);
common_vendor.index.__f__("error", "at pages/order/index.vue:97", "获取订单详情失败:", error);
}
}
try {
const res = await config_user.getOrderList();
common_vendor.index.__f__("log", "at pages/order/index.vue:118", res);
if (res.code === 200 && res.data && res.data.records) {
this.orderList = res.data.records.map((item) => ({
orderNo: item.orderId,
status: item.orderStatus === 2 ? "using" : "finished",
statusText: item.orderStatus === 2 ? "使用中" : "已完成",
deviceId: item.deviceNo,
startTime: item.startTime,
endTime: item.endTime ? this.formatTime(new Date(item.endTime)) : "",
amount: item.amount || "0.00"
}));
}
} catch (error) {
common_vendor.index.__f__("error", "at pages/order/index.vue:132", "获取订单列表失败:", error);
}
await this.getOrderList();
},
methods: {
formatTime(date) {
const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, "0");
const day = date.getDate().toString().padStart(2, "0");
const hour = date.getHours().toString().padStart(2, "0");
const minute = date.getMinutes().toString().padStart(2, "0");
return `${year}-${month}-${day} ${hour}:${minute}`;
async getOrderList(statusList = []) {
try {
const res = await config_user.getOrderList(statusList);
if (res.code === 200 && res.data && res.data.records) {
this.orderList = res.data.records.map((item) => ({
orderNo: item.orderId,
status: item.orderStatus,
deviceId: item.deviceNo,
startTime: item.createTime,
endTime: item.endTime || "",
amount: item.amount || "0.00"
}));
}
} catch (error) {
common_vendor.index.__f__("error", "at pages/order/index.vue:120", "获取订单列表失败:", error);
common_vendor.index.showToast({
title: "获取订单列表失败",
icon: "none"
});
}
},
switchTab(index) {
async switchTab(index) {
this.currentTab = index;
const statusList = this.OrderStatusTabs[index].status;
await this.getOrderList(statusList);
}
}
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return common_vendor.e({
a: common_vendor.f($data.tabs, (tab, index, i0) => {
a: common_vendor.f($data.OrderStatusTabs, (tab, index, i0) => {
return {
a: common_vendor.t(tab),
a: common_vendor.t(tab.text),
b: index,
c: $data.currentTab === index ? 1 : "",
d: common_vendor.o(($event) => $options.switchTab(index), index)
};
}),
b: common_vendor.f($data.orderList, (order, index, i0) => {
var _a, _b;
return {
a: common_vendor.t(order.orderNo),
b: common_vendor.t(order.statusText),
c: common_vendor.n(order.status),
b: common_vendor.t((_a = $data.OrderStatusMap[order.status]) == null ? void 0 : _a.text),
c: common_vendor.n((_b = $data.OrderStatusMap[order.status]) == null ? void 0 : _b.class),
d: common_vendor.t(order.deviceId),
e: common_vendor.t(order.startTime),
f: common_vendor.t(order.endTime || "-"),
+17 -2
View File
@@ -84,10 +84,25 @@
.order-container .order-list .order-item .order-header .order-status.data-v-17a44f9d {
font-size: 26rpx;
}
.order-container .order-list .order-item .order-header .order-status.using.data-v-17a44f9d {
.order-container .order-list .order-item .order-header .order-status.status-waiting.data-v-17a44f9d {
color: #FF9800;
}
.order-container .order-list .order-item .order-header .order-status.status-progress.data-v-17a44f9d {
color: #2196F3;
}
.order-container .order-list .order-item .order-header .order-status.status-success.data-v-17a44f9d {
color: #4CAF50;
}
.order-container .order-list .order-item .order-header .order-status.status-using.data-v-17a44f9d {
color: #1976D2;
}
.order-container .order-list .order-item .order-header .order-status.finished.data-v-17a44f9d {
.order-container .order-list .order-item .order-header .order-status.status-failed.data-v-17a44f9d {
color: #F44336;
}
.order-container .order-list .order-item .order-header .order-status.status-cancelled.data-v-17a44f9d {
color: #9E9E9E;
}
.order-container .order-list .order-item .order-header .order-status.status-finished.data-v-17a44f9d {
color: #4CAF50;
}
.order-container .order-list .order-item .order-content.data-v-17a44f9d {
+271
View File
@@ -0,0 +1,271 @@
"use strict";
const common_vendor = require("../../common/vendor.js");
const config_user = require("../../config/user.js");
const _sfc_main = {
data() {
return {
orderId: null,
orderInfo: {},
packageInfo: {
time: "",
price: "0.00"
},
orderStatus: {
text: "等待支付",
desc: "请在15分钟内完成支付",
class: "waiting"
},
paymentMethods: [
{
name: "微信支付",
icon: "wechat"
},
{
name: "支付宝",
icon: "alipay"
}
],
selectedMethod: 0
};
},
computed: {
totalAmount() {
const deposit = parseFloat(this.orderInfo.deposit || 99);
const amount = parseFloat(this.orderInfo.amount || this.packageInfo.price || 0);
return (deposit + amount).toFixed(2);
}
},
onLoad(options) {
if (options && options.orderId) {
this.orderId = options.orderId;
if (options.packageTime && options.packagePrice) {
this.packageInfo = {
time: options.packageTime,
price: options.packagePrice
};
}
this.loadOrderInfo();
} else {
common_vendor.index.showToast({
title: "订单信息不存在",
icon: "none"
});
setTimeout(() => {
common_vendor.index.redirectTo({
url: "/pages/index/index"
});
}, 1500);
}
},
methods: {
// 加载订单信息
async loadOrderInfo() {
try {
common_vendor.index.showLoading({
title: "加载中"
});
const res = await config_user.queryById(this.orderId);
if (res.code === 200 && res.data) {
const orderData = res.data;
this.orderInfo = {
orderNo: orderData.orderNo || orderData.orderId,
deviceNo: orderData.deviceNo,
createTime: orderData.createTime,
phone: orderData.phone,
deposit: "99.00",
// 假设押金固定为99元
amount: orderData.amount || this.packageInfo.price || "0.00"
};
if (!orderData.packageTime && this.packageInfo.time) {
this.orderInfo.packageTime = this.packageInfo.time;
this.orderInfo.packagePrice = this.packageInfo.price;
}
} else {
throw new Error("获取订单信息失败");
}
common_vendor.index.hideLoading();
} catch (error) {
common_vendor.index.hideLoading();
common_vendor.index.showToast({
title: error.message || "获取订单信息失败",
icon: "none"
});
}
},
// 选择支付方式
selectMethod(index) {
this.selectedMethod = index;
},
// 处理支付
async handlePayment() {
try {
common_vendor.index.showLoading({
title: "处理中"
});
const res = await common_vendor.index.request({
url: `${common_vendor.index.getStorageSync("baseUrl") || "http://127.0.0.1:8080"}/app/wx-payment/create/${this.orderInfo.orderNo}`,
method: "GET",
header: {
"Authorization": "Bearer " + common_vendor.index.getStorageSync("token"),
"Clientid": common_vendor.index.getStorageSync("client_id")
}
});
if (res.statusCode === 200 && res.data.code === 200) {
common_vendor.index.hideLoading();
common_vendor.index.redirectTo({
url: `/pages/order/success?orderId=${this.orderId}`
});
} else {
throw new Error(res.data.msg || "支付失败");
}
} catch (error) {
common_vendor.index.hideLoading();
common_vendor.index.showToast({
title: error.message || "支付失败",
icon: "none"
});
}
},
// 发送租借指令
async sendRentCommand() {
try {
common_vendor.index.showLoading({
title: "处理中"
});
const res = await this.sendRentRequest();
if (res.code === 200) {
common_vendor.index.hideLoading();
common_vendor.index.showToast({
title: "租借成功",
icon: "success"
});
setTimeout(() => {
common_vendor.index.redirectTo({
url: `/pages/order/index?orderId=${this.orderId}`
});
}, 1500);
} else {
throw new Error(res.msg || "租借失败");
}
} catch (error) {
common_vendor.index.hideLoading();
common_vendor.index.showToast({
title: error.message || "租借失败",
icon: "none"
});
}
},
// 发送租借请求
sendRentRequest() {
return new Promise((resolve, reject) => {
common_vendor.index.request({
url: `${common_vendor.index.getStorageSync("baseUrl") || "http://127.0.0.1:8080"}/app/device/sendRentCommand`,
method: "POST",
data: {
orderId: this.orderId
},
header: {
"Content-Type": "application/x-www-form-urlencoded",
"Authorization": "Bearer " + common_vendor.index.getStorageSync("token"),
"Clientid": common_vendor.index.getStorageSync("client_id")
},
success(res) {
if (res.statusCode === 200) {
resolve(res.data);
} else {
reject(new Error("请求失败"));
}
},
fail(err) {
reject(err);
}
});
});
},
// 格式化时间
formatTime(date) {
const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, "0");
const day = date.getDate().toString().padStart(2, "0");
const hour = date.getHours().toString().padStart(2, "0");
const minute = date.getMinutes().toString().padStart(2, "0");
return `${year}-${month}-${day} ${hour}:${minute}`;
},
// 轮询订单状态
async pollOrderStatus() {
let retryCount = 0;
const maxRetries = 10;
const interval = 1e3;
const checkStatus = async () => {
try {
const res = await common_vendor.index.request({
url: `${common_vendor.index.getStorageSync("baseUrl") || "http://127.0.0.1:8080"}/app/payment/status/${this.orderInfo.orderNo}`,
method: "GET",
header: {
"Authorization": "Bearer " + common_vendor.index.getStorageSync("token"),
"Clientid": common_vendor.index.getStorageSync("client_id")
}
});
if (res.statusCode === 200 && res.data.code === 200) {
const orderData = res.data.data;
if (orderData.orderStatus === "IN_USED") {
common_vendor.index.showToast({
title: "支付成功",
icon: "success"
});
setTimeout(() => {
common_vendor.index.redirectTo({
url: `/pages/order/success?orderId=${this.orderId}`
});
}, 1500);
return;
}
}
if (retryCount < maxRetries) {
retryCount++;
setTimeout(checkStatus, interval);
} else {
throw new Error("订单状态查询超时");
}
} catch (error) {
common_vendor.index.showToast({
title: error.message || "查询订单状态失败",
icon: "none"
});
}
};
checkStatus();
}
}
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return {
a: common_vendor.n($data.orderStatus.class),
b: common_vendor.t($data.orderStatus.text),
c: common_vendor.t($data.orderStatus.desc),
d: common_vendor.t($data.orderInfo.orderNo || "-"),
e: common_vendor.t($data.orderInfo.deviceNo || "-"),
f: common_vendor.t($data.orderInfo.createTime || "-"),
g: common_vendor.t($data.orderInfo.phone || "-"),
h: common_vendor.t($data.orderInfo.deposit || "99.00"),
i: common_vendor.t($data.packageInfo.time),
j: common_vendor.t($data.packageInfo.price),
k: common_vendor.t($data.orderInfo.amount || $data.packageInfo.price),
l: common_vendor.t($options.totalAmount),
m: common_vendor.f($data.paymentMethods, (method, index, i0) => {
return {
a: common_vendor.n(method.icon),
b: common_vendor.t(method.name),
c: index,
d: $data.selectedMethod === index ? 1 : "",
e: common_vendor.o(($event) => $options.selectMethod(index), index)
};
}),
n: common_vendor.t($options.totalAmount),
o: common_vendor.o((...args) => $options.handlePayment && $options.handlePayment(...args)),
p: common_vendor.o((...args) => _ctx.navigateBack && _ctx.navigateBack(...args))
};
}
const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-13c3fb22"]]);
wx.createPage(MiniProgramPage);
//# sourceMappingURL=../../../.sourcemap/mp-weixin/pages/order/payment.js.map
+6
View File
@@ -0,0 +1,6 @@
{
"navigationBarTitleText": "订单支付",
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"usingComponents": {}
}
+1
View File
@@ -0,0 +1 @@
<view class="payment-container data-v-13c3fb22"><view class="status-card data-v-13c3fb22"><view class="{{['status-icon', 'data-v-13c3fb22', a]}}"></view><view class="status-text data-v-13c3fb22">{{b}}</view><view class="status-desc data-v-13c3fb22">{{c}}</view></view><view class="order-card data-v-13c3fb22"><view class="card-title data-v-13c3fb22">订单信息</view><view class="info-item data-v-13c3fb22"><text class="label data-v-13c3fb22">订单号</text><text class="value data-v-13c3fb22">{{d}}</text></view><view class="info-item data-v-13c3fb22"><text class="label data-v-13c3fb22">设备号</text><text class="value data-v-13c3fb22">{{e}}</text></view><view class="info-item data-v-13c3fb22"><text class="label data-v-13c3fb22">创建时间</text><text class="value data-v-13c3fb22">{{f}}</text></view><view class="info-item data-v-13c3fb22"><text class="label data-v-13c3fb22">联系电话</text><text class="value data-v-13c3fb22">{{g}}</text></view></view><view class="price-card data-v-13c3fb22"><view class="card-title data-v-13c3fb22">费用信息</view><view class="price-item data-v-13c3fb22"><text class="label data-v-13c3fb22">押金</text><text class="value data-v-13c3fb22">¥{{h}}</text></view><view class="price-item data-v-13c3fb22"><text class="label data-v-13c3fb22">套餐</text><text class="value data-v-13c3fb22">{{i}} (¥{{j}})</text></view><view class="price-item data-v-13c3fb22"><text class="label data-v-13c3fb22">租借费用</text><text class="value data-v-13c3fb22">¥{{k}}</text></view><view class="price-item total data-v-13c3fb22"><text class="label data-v-13c3fb22">合计</text><text class="value data-v-13c3fb22">¥{{l}}</text></view></view><view class="payment-methods data-v-13c3fb22"><view class="card-title data-v-13c3fb22">支付方式</view><view wx:for="{{m}}" wx:for-item="method" wx:key="c" class="{{['method-item', 'data-v-13c3fb22', method.d && 'active']}}" bindtap="{{method.e}}"><view class="{{['method-icon', 'data-v-13c3fb22', method.a]}}"></view><view class="method-name data-v-13c3fb22">{{method.b}}</view><view class="method-check data-v-13c3fb22"></view></view></view><view class="bottom-bar data-v-13c3fb22"><view class="total-amount data-v-13c3fb22"><text class="data-v-13c3fb22">合计:</text><text class="amount data-v-13c3fb22">¥{{n}}</text></view><button class="pay-btn data-v-13c3fb22" bindtap="{{o}}">立即支付</button></view><view class="back-btn data-v-13c3fb22" bindtap="{{p}}"><text class="data-v-13c3fb22">返回设备详情</text></view> methods: { navigateBack() { uni.redirectTo({ url: `/pages/device/detail?deviceId=${this.deviceId}` }) } } </view>
+217
View File
@@ -0,0 +1,217 @@
/**
* 这里是uni-app内置的常用样式变量
*
* uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
* 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
*
*/
/**
* 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
*
* 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
*/
/* 颜色变量 */
/* 行为相关颜色 */
/* 文字基本颜色 */
/* 背景颜色 */
/* 边框颜色 */
/* 尺寸变量 */
/* 文字尺寸 */
/* 图片尺寸 */
/* Border Radius */
/* 水平间距 */
/* 垂直间距 */
/* 透明度 */
/* 文章场景相关 */
.payment-container.data-v-13c3fb22 {
min-height: 100vh;
background: #f8f8f8;
padding: 30rpx;
padding-bottom: 180rpx;
box-sizing: border-box;
}
.payment-container .status-card.data-v-13c3fb22 {
background: #fff;
border-radius: 24rpx;
padding: 40rpx 30rpx;
margin-bottom: 30rpx;
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
}
.payment-container .status-card .status-icon.data-v-13c3fb22 {
width: 120rpx;
height: 120rpx;
border-radius: 50%;
background: #f5f5f5;
margin-bottom: 20rpx;
}
.payment-container .status-card .status-icon.waiting.data-v-13c3fb22 {
background: #FFF9C4;
}
.payment-container .status-card .status-icon.success.data-v-13c3fb22 {
background: #E8F5E9;
}
.payment-container .status-card .status-icon.failed.data-v-13c3fb22 {
background: #FFEBEE;
}
.payment-container .status-card .status-text.data-v-13c3fb22 {
font-size: 36rpx;
font-weight: 600;
color: #333;
margin-bottom: 10rpx;
}
.payment-container .status-card .status-desc.data-v-13c3fb22 {
font-size: 28rpx;
color: #999;
}
.payment-container .order-card.data-v-13c3fb22, .payment-container .price-card.data-v-13c3fb22 {
background: #fff;
border-radius: 24rpx;
padding: 30rpx;
margin-bottom: 30rpx;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
}
.payment-container .order-card .card-title.data-v-13c3fb22, .payment-container .price-card .card-title.data-v-13c3fb22 {
font-size: 32rpx;
font-weight: 600;
color: #333;
margin-bottom: 20rpx;
position: relative;
padding-left: 20rpx;
}
.payment-container .order-card .card-title.data-v-13c3fb22::before, .payment-container .price-card .card-title.data-v-13c3fb22::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 8rpx;
height: 32rpx;
background: #1976D2;
border-radius: 4rpx;
}
.payment-container .order-card .info-item.data-v-13c3fb22, .payment-container .order-card .price-item.data-v-13c3fb22, .payment-container .price-card .info-item.data-v-13c3fb22, .payment-container .price-card .price-item.data-v-13c3fb22 {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx 0;
border-bottom: 1px solid #f5f5f5;
}
.payment-container .order-card .info-item.data-v-13c3fb22:last-child, .payment-container .order-card .price-item.data-v-13c3fb22:last-child, .payment-container .price-card .info-item.data-v-13c3fb22:last-child, .payment-container .price-card .price-item.data-v-13c3fb22:last-child {
border-bottom: none;
}
.payment-container .order-card .info-item .label.data-v-13c3fb22, .payment-container .order-card .price-item .label.data-v-13c3fb22, .payment-container .price-card .info-item .label.data-v-13c3fb22, .payment-container .price-card .price-item .label.data-v-13c3fb22 {
font-size: 28rpx;
color: #666;
}
.payment-container .order-card .info-item .value.data-v-13c3fb22, .payment-container .order-card .price-item .value.data-v-13c3fb22, .payment-container .price-card .info-item .value.data-v-13c3fb22, .payment-container .price-card .price-item .value.data-v-13c3fb22 {
font-size: 28rpx;
color: #333;
}
.payment-container .order-card .info-item.total.data-v-13c3fb22, .payment-container .order-card .price-item.total.data-v-13c3fb22, .payment-container .price-card .info-item.total.data-v-13c3fb22, .payment-container .price-card .price-item.total.data-v-13c3fb22 {
margin-top: 10rpx;
padding-top: 30rpx;
border-top: 1px solid #f5f5f5;
}
.payment-container .order-card .info-item.total .label.data-v-13c3fb22, .payment-container .order-card .info-item.total .value.data-v-13c3fb22, .payment-container .order-card .price-item.total .label.data-v-13c3fb22, .payment-container .order-card .price-item.total .value.data-v-13c3fb22, .payment-container .price-card .info-item.total .label.data-v-13c3fb22, .payment-container .price-card .info-item.total .value.data-v-13c3fb22, .payment-container .price-card .price-item.total .label.data-v-13c3fb22, .payment-container .price-card .price-item.total .value.data-v-13c3fb22 {
font-size: 32rpx;
font-weight: 600;
color: #333;
}
.payment-container .order-card .info-item.total .value.data-v-13c3fb22, .payment-container .order-card .price-item.total .value.data-v-13c3fb22, .payment-container .price-card .info-item.total .value.data-v-13c3fb22, .payment-container .price-card .price-item.total .value.data-v-13c3fb22 {
color: #FF5722;
}
.payment-container .payment-methods.data-v-13c3fb22 {
background: #fff;
border-radius: 24rpx;
padding: 30rpx;
margin-bottom: 30rpx;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
}
.payment-container .payment-methods .method-item.data-v-13c3fb22 {
display: flex;
align-items: center;
padding: 30rpx 20rpx;
border-bottom: 1px solid #f5f5f5;
position: relative;
}
.payment-container .payment-methods .method-item.data-v-13c3fb22:last-child {
border-bottom: none;
}
.payment-container .payment-methods .method-item.active.data-v-13c3fb22 {
background: #F5F5F5;
}
.payment-container .payment-methods .method-item.active .method-check.data-v-13c3fb22 {
background: #1976D2;
}
.payment-container .payment-methods .method-item.active .method-check.data-v-13c3fb22::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 12rpx;
height: 12rpx;
background: #fff;
border-radius: 50%;
}
.payment-container .payment-methods .method-item .method-icon.data-v-13c3fb22 {
width: 48rpx;
height: 48rpx;
margin-right: 20rpx;
}
.payment-container .payment-methods .method-item .method-icon.wechat.data-v-13c3fb22 {
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0iIzA3QzE2MCIgZD0iTTkuODI3MjcyNzMsMjQgQzkuODI3MjcyNzMsMjQgOS44MjcyNzI3MywyNCA5LjgyNzI3MjczLDI0IEw5LjgyNzI3MjczLDI0IEM3LjQxNzczMTYzLDI0IDQuOTUzMTgxODIsMjMuNTMxODE4MiA0Ljk1MzE4MTgyLDIzLjUzMTgxODIgQzQuOTUzMTgxODIsMjMuNTMxODE4MiAzLDIzLjExMzYzNjQgMS41LDIyLjIyNzI3MjcgQzEuNSwyMi4yMjcyNzI3IDAuOTU0NTQ1NDU1LDIyLjA4NjM2MzYgMS4wNDMxODE4MiwyMS41NDU0NTQ1IEMxLjEzMTgxODE4LDIxLjAwNDU0NTUgMS4zNjM2MzYzNiwyMC4yNSAxLjM2MzYzNjM2LDIwLjI1IEwyLjI1LDE3LjcyNzI3MjcgQzAuNDA5MDkwOTA5LDE2LjAyMjcyNzMgMCwxNC4wNDU0NTQ1IDAsMTIuODE4MTgxOCBDMCw4LjQ1NDU0NTQ1IDQuOTA5MDkwOTEsNC45MDkwOTA5MSA5LjgyNzI3MjczLDQuOTA5MDkwOTEgQzEzLjc0NTQ1NDUsNC45MDkwOTA5MSAxNy4xODE4MTgyLDcuMTA0NTQ1NDUgMTguNTQ1NDU0NSwxMC4yMjcyNzI3IEMxOS4wOTA5MDkxLDEwLjEzMTgxODIgMTkuNjM2MzYzNiwxMC4wOTA5MDkxIDIwLjE4MTgxODIsMTAuMDkwOTA5MSBDMjQuNTQ1NDU0NSwxMC4wOTA5MDkxIDI4LjA5MDkwOTEsMTMuMTgxODE4MiAyOC4wOTA5MDkxLDE2LjkwOTA5MDkgQzI4LjA5MDkwOTEsMTguODE4MTgxOCAyNi43MjcyNzI3LDIwLjU5MDkwOTEgMjQuNzI3MjcyNywyMS43MjcyNzI3IEwyNS4zNjM2MzY0LDIzLjU5MDkwOTEgQzI1LjM2MzYzNjQsMjMuNTkwOTA5MSAyNS41LDI0LjA0NTQ1NDUgMjUuNTkwOTA5MSwyNC40MDkwOTA5IEMyNS42ODE4MTgyLDI0Ljc3MjcyNzMgMjUuMzYzNjM2NCwyNC45NTQ1NDU1IDI1LjM2MzYzNjQsMjQuOTU0NTQ1NSBDMjQuMjcyNzI3MywyNS42MzYzNjM2IDIyLjcyNzI3MjcsMjYuMDQ1NDU0NSAyMi43MjcyNzI3LDI2LjA0NTQ1NDUgQzIyLjcyNzI3MjcsMjYuMDQ1NDU0NSAyMC43MjcyNzI3LDI2LjQ1NDU0NTUgMTguNzI3MjcyNywyNi40NTQ1NDU1IEMxNi43MjcyNzI3LDI2LjQ1NDU0NTUgMTQuNzI3MjcyNywyNi4wNDU0NTQ1IDE0LjcyNzI3MjcsMjYuMDQ1NDU0NSBDMTMuNjM2MzYzNiwyNS43NzI3MjczIDEyLjU0NTQ1NDUsMjUuNDA5MDkwOSAxMS41NDU0NTQ1LDI0Ljk1NDU0NTUgQzEwLjkwOTA5MDksMjQuNjgxODE4MiAxMC4zNjM2MzY0LDI0LjM2MzYzNjQgOS44MjcyNzI3MywyNCBaIE02LjEzNjM2MzY0LDExLjMxODE4MTggQzUuMDQ1NDU0NTUsMTEuMzE4MTgxOCA0LjE4MTgxODE4LDEyLjE4MTgxODIgNC4xODE4MTgxOCwxMy4yNzI3MjczIEM0LjE4MTgxODE4LDE0LjM2MzYzNjQgNS4wNDU0NTQ1NSwxNS4yMjcyNzI3IDYuMTM2MzYzNjQsMTUuMjI3MjcyNyBDNy4yMjcyNzI3MywxNS4yMjcyNzI3IDguMDkwOTA5MDksMTQuMzYzNjM2NCA4LjA5MDkwOTA5LDEzLjI3MjcyNzMgQzguMDkwOTA5MDksMTIuMTgxODE4MiA3LjIyNzI3MjczLDExLjMxODE4MTggNi4xMzYzNjM2NCwxMS4zMTgxODE4IFogTTEzLjUsMTEuMzE4MTgxOCBDMTIuNDA5MDkwOSwxMS4zMTgxODE4IDExLjU0NTQ1NDUsMTIuMTgxODE4MiAxMS41NDU0NTQ1LDEzLjI3MjcyNzMgQzExLjU0NTQ1NDUsMTQuMzYzNjM2NCAxMi40MDkwOTA5LDE1LjIyNzI3MjcgMTMuNSwxNS4yMjcyNzI3IEMxNC41OTA5MDkxLDE1LjIyNzI3MjcgMTUuNDU0NTQ1NSwxNC4zNjM2MzY0IDE1LjQ1NDU0NTUsMTMuMjcyNzI3MyBDMTUuNDU0NTQ1NSwxMi4xODE4MTgyIDE0LjU5MDkwOTEsMTEuMzE4MTgxOCAxMy41LDExLjMxODE4MTggWiBNMjAuMTgxODE4MiwxNi41IEMxOS4wOTA5MDkxLDE2LjUgMTguMjI3MjcyNywxNy4zNjM2MzY0IDE4LjIyNzI3MjcsMTguNDU0NTQ1NSBDMTguMjI3MjcyNywxOS41NDU0NTQ1IDE5LjA5MDkwOTEsMjAuNDA5MDkwOSAyMC4xODE4MTgyLDIwLjQwOTA5MDkgQzIxLjI3MjcyNzMsMjAuNDA5MDkwOSAyMi4xMzYzNjM2LDE5LjU0NTQ1NDUgMjIuMTM2MzYzNiwxOC40NTQ1NDU1IEMyMi4xMzYzNjM2LDE3LjM2MzYzNjQgMjEuMjcyNzI3MywxNi41IDIwLjE4MTgxODIsMTYuNSBaIE0yNS41LDE2LjUgQzI0LjQwOTA5MDksMTYuNSAyMy41NDU0NTQ1LDE3LjM2MzYzNjQgMjMuNTQ1NDU0NSwxOC40NTQ1NDU1IEMyMy41NDU0NTQ1LDE5LjU0NTQ1NDUgMjQuNDA5MDkwOSwyMC40MDkwOTA5IDI1LjUsMjAuNDA5MDkwOSBDMjYuNTkwOTA5MSwyMC40MDkwOTA5IDI3LjQ1NDU0NTUsMTkuNTQ1NDU0NSAyNy40NTQ1NDU1LDE4LjQ1NDU0NTUgQzI3LjQ1NDU0NTUsMTcuMzYzNjM2NCAyNi41OTA5MDkxLDE2LjUgMjUuNSwxNi41IFoiLz48L3N2Zz4=") no-repeat center/contain;
}
.payment-container .payment-methods .method-item .method-icon.alipay.data-v-13c3fb22 {
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0iIzE2NzdGRiIgZD0iTTIzLjg1MzU1MzQsMTUuMTQ2NDQ2NiBDMjQuMDQ4ODE1NSwxNS4zNDE3MDg4IDI0LjA0ODgxNTUsMTUuNjU4MjkxMiAyMy44NTM1NTM0LDE1Ljg1MzU1MzQgTDE1Ljg1MzU1MzQsMjMuODUzNTUzNCBDMTUuNjU4MjkxMiwyNC4wNDg4MTU1IDE1LjM0MTcwODgsMjQuMDQ4ODE1NSAxNS4xNDY0NDY2LDIzLjg1MzU1MzQgTDAuMTQ2NDQ2NjA5LDguODUzNTUzMzkgQy0wLjA0ODgxNTUzNjUsOC42NTgyOTEyNCAtMC4wNDg4MTU1MzY1LDguMzQxNzA4NzYgMC4xNDY0NDY2MDksOC4xNDY0NDY2MSBMOC4xNDY0NDY2MSwwLjE0NjQ0NjYwOSBDOC4zNDE3MDg3NiwtMC4wNDg4MTU1MzY1IDguNjU4MjkxMjQsLTAuMDQ4ODE1NTM2NSA4Ljg1MzU1MzM5LDAuMTQ2NDQ2NjA5IEwyMy44NTM1NTM0LDE1LjE0NjQ0NjYgWiBNMTcuMDM1NTMzOSwxNy4wMzU1MzM5IEwxOS4wMzU1MzM5LDE1LjAzNTUzMzkgTDE1LjAzNTUzMzksMTEuMDM1NTMzOSBMMTMuMDM1NTMzOSwxMy4wMzU1MzM5IEwxNy4wMzU1MzM5LDE3LjAzNTUzMzkgWiBNMTEuMDM1NTMzOSwxNS4wMzU1MzM5IEwxMy4wMzU1MzM5LDE3LjAzNTUzMzkgTDkuMDM1NTMzOTEsMjEuMDM1NTMzOSBMNy4wMzU1MzM5MSwxOS4wMzU1MzM5IEwxMS4wMzU1MzM5LDE1LjAzNTUzMzkgWiBNOS4wMzU1MzM5MSw5LjAzNTUzMzkxIEwxMS4wMzU1MzM5LDExLjAzNTUzMzkgTDcuMDM1NTMzOTEsMTUuMDM1NTMzOSBMNS4wMzU1MzM5MSwxMy4wMzU1MzM5IEw5LjAzNTUzMzkxLDkuMDM1NTMzOTEgWiBNMy4wMzU1MzM5MSwxMS4wMzU1MzM5IEw1LjAzNTUzMzkxLDEzLjAzNTUzMzkgTDMuMDM1NTMzOTEsMTUuMDM1NTMzOSBMMS4wMzU1MzM5MSwxMy4wMzU1MzM5IEwzLjAzNTUzMzkxLDExLjAzNTUzMzkgWiBNMTMuMDM1NTMzOSw3LjAzNTUzMzkxIEwxNS4wMzU1MzM5LDkuMDM1NTMzOTEgTDExLjAzNTUzMzksMTMuMDM1NTMzOSBMOS4wMzU1MzM5MSwxMS4wMzU1MzM5IEwxMy4wMzU1MzM5LDcuMDM1NTMzOTEgWiBNMTcuMDM1NTMzOSwzLjAzNTUzMzkxIEwxOS4wMzU1MzM5LDUuMDM1NTMzOTEgTDE1LjAzNTUzMzksOS4wMzU1MzM5MSBMMTMuMDM1NTMzOSw3LjAzNTUzMzkxIEwxNy4wMzU1MzM5LDMuMDM1NTMzOTEgWiBNMjEuMDM1NTMzOSw3LjAzNTUzMzkxIEwyMy4wMzU1MzM5LDkuMDM1NTMzOTEgTDE5LjAzNTUzMzksMTMuMDM1NTMzOSBMMTcuMDM1NTMzOSwxMS4wMzU1MzM5IEwyMS4wMzU1MzM5LDcuMDM1NTMzOTEgWiIvPjwvc3ZnPg==") no-repeat center/contain;
}
.payment-container .payment-methods .method-item .method-name.data-v-13c3fb22 {
flex: 1;
font-size: 28rpx;
color: #333;
}
.payment-container .payment-methods .method-item .method-check.data-v-13c3fb22 {
width: 32rpx;
height: 32rpx;
border-radius: 50%;
border: 2rpx solid #ddd;
position: relative;
}
.payment-container .bottom-bar.data-v-13c3fb22 {
position: fixed;
left: 0;
right: 0;
bottom: 0;
background: #fff;
padding: 20rpx 30rpx;
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.04);
}
.payment-container .bottom-bar .total-amount.data-v-13c3fb22 {
font-size: 28rpx;
color: #666;
}
.payment-container .bottom-bar .total-amount .amount.data-v-13c3fb22 {
font-size: 36rpx;
font-weight: 600;
color: #FF5722;
margin-left: 10rpx;
}
.payment-container .bottom-bar .pay-btn.data-v-13c3fb22 {
background: #1976D2;
color: #fff;
font-size: 32rpx;
font-weight: 600;
padding: 20rpx 60rpx;
border-radius: 100rpx;
border: none;
}
.payment-container .bottom-bar .pay-btn.data-v-13c3fb22:active {
opacity: 0.9;
}
+85
View File
@@ -0,0 +1,85 @@
"use strict";
const common_vendor = require("../../common/vendor.js");
const config_user = require("../../config/user.js");
const _sfc_main = {
data() {
return {
orderId: "",
orderInfo: {}
};
},
onLoad(options) {
if (options && options.orderId) {
this.orderId = options.orderId;
this.loadOrderInfo();
} else {
common_vendor.index.showToast({
title: "订单信息不存在",
icon: "none"
});
setTimeout(() => {
this.goToHome();
}, 1500);
}
},
methods: {
async loadOrderInfo() {
try {
common_vendor.index.showLoading({
title: "加载中"
});
const res = await config_user.queryById(this.orderId);
if (res.code === 200 && res.data) {
const orderData = res.data;
this.orderInfo = {
orderNo: orderData.orderNo || orderData.orderId,
deviceNo: orderData.deviceNo,
amount: orderData.amount,
payTime: this.formatTime(/* @__PURE__ */ new Date())
};
} else {
throw new Error("获取订单信息失败");
}
common_vendor.index.hideLoading();
} catch (error) {
common_vendor.index.hideLoading();
common_vendor.index.showToast({
title: error.message || "获取订单信息失败",
icon: "none"
});
}
},
formatTime(date) {
const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, "0");
const day = date.getDate().toString().padStart(2, "0");
const hour = date.getHours().toString().padStart(2, "0");
const minute = date.getMinutes().toString().padStart(2, "0");
const second = date.getSeconds().toString().padStart(2, "0");
return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
},
goToHome() {
common_vendor.index.switchTab({
url: "/pages/index/index"
});
},
goToOrderList() {
common_vendor.index.redirectTo({
url: "/pages/order/index"
});
}
}
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return {
a: common_vendor.t($data.orderInfo.orderNo || "-"),
b: common_vendor.t($data.orderInfo.deviceNo || "-"),
c: common_vendor.t($data.orderInfo.amount || "0.00"),
d: common_vendor.t($data.orderInfo.payTime || "-"),
e: common_vendor.o((...args) => $options.goToHome && $options.goToHome(...args)),
f: common_vendor.o((...args) => $options.goToOrderList && $options.goToOrderList(...args))
};
}
const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-2795c576"]]);
wx.createPage(MiniProgramPage);
//# sourceMappingURL=../../../.sourcemap/mp-weixin/pages/order/success.js.map
+6
View File
@@ -0,0 +1,6 @@
{
"navigationBarTitleText": "支付成功",
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"usingComponents": {}
}
+1
View File
@@ -0,0 +1 @@
<view class="success-container data-v-2795c576"><view class="status-card data-v-2795c576"><view class="status-icon success data-v-2795c576"></view><view class="status-text data-v-2795c576">支付成功</view><view class="status-desc data-v-2795c576">您的订单已支付成功</view></view><view class="order-card data-v-2795c576"><view class="card-title data-v-2795c576">订单信息</view><view class="info-item data-v-2795c576"><text class="label data-v-2795c576">订单号</text><text class="value data-v-2795c576">{{a}}</text></view><view class="info-item data-v-2795c576"><text class="label data-v-2795c576">设备号</text><text class="value data-v-2795c576">{{b}}</text></view><view class="info-item data-v-2795c576"><text class="label data-v-2795c576">支付金额</text><text class="value data-v-2795c576">¥{{c}}</text></view><view class="info-item data-v-2795c576"><text class="label data-v-2795c576">支付时间</text><text class="value data-v-2795c576">{{d}}</text></view></view><view class="button-group data-v-2795c576"><button class="primary-btn data-v-2795c576" bindtap="{{e}}">返回首页</button><button class="secondary-btn data-v-2795c576" bindtap="{{f}}">查看订单</button></view></view>
+123
View File
@@ -0,0 +1,123 @@
/**
* 这里是uni-app内置的常用样式变量
*
* uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
* 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
*
*/
/**
* 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
*
* 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
*/
/* 颜色变量 */
/* 行为相关颜色 */
/* 文字基本颜色 */
/* 背景颜色 */
/* 边框颜色 */
/* 尺寸变量 */
/* 文字尺寸 */
/* 图片尺寸 */
/* Border Radius */
/* 水平间距 */
/* 垂直间距 */
/* 透明度 */
/* 文章场景相关 */
.success-container.data-v-2795c576 {
padding: 20px;
background-color: #f5f5f5;
min-height: 100vh;
}
.status-card.data-v-2795c576 {
background-color: #fff;
border-radius: 12px;
padding: 30px;
text-align: center;
margin-bottom: 20px;
}
.status-card .status-icon.data-v-2795c576 {
width: 60px;
height: 60px;
margin: 0 auto 16px;
background-color: #07c160;
border-radius: 50%;
position: relative;
}
.status-card .status-icon.data-v-2795c576::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 30px;
height: 20px;
border: 3px solid #fff;
border-top: none;
border-right: none;
transform-origin: center;
transform: translate(-50%, -70%) rotate(-45deg);
}
.status-card .status-text.data-v-2795c576 {
font-size: 24px;
font-weight: bold;
color: #07c160;
margin-bottom: 8px;
}
.status-card .status-desc.data-v-2795c576 {
font-size: 14px;
color: #666;
}
.order-card.data-v-2795c576 {
background-color: #fff;
border-radius: 12px;
padding: 20px;
margin-bottom: 20px;
}
.order-card .card-title.data-v-2795c576 {
font-size: 16px;
font-weight: bold;
margin-bottom: 16px;
color: #333;
}
.order-card .info-item.data-v-2795c576 {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.order-card .info-item .label.data-v-2795c576 {
color: #666;
font-size: 14px;
}
.order-card .info-item .value.data-v-2795c576 {
color: #333;
font-size: 14px;
}
.button-group.data-v-2795c576 {
margin-top: 30px;
display: flex;
flex-direction: column;
gap: 16px;
}
.button-group .primary-btn.data-v-2795c576 {
background-color: #07c160;
color: #fff;
border: none;
border-radius: 24px;
padding: 12px;
font-size: 16px;
}
.button-group .primary-btn.data-v-2795c576:active {
opacity: 0.8;
}
.button-group .secondary-btn.data-v-2795c576 {
background-color: #fff;
color: #07c160;
border: 1px solid #07c160;
border-radius: 24px;
padding: 12px;
font-size: 16px;
}
.button-group .secondary-btn.data-v-2795c576:active {
background-color: #f5f5f5;
}
@@ -4,11 +4,11 @@ const config_user = require("../../config/user.js");
const _sfc_main = {
data() {
return {
deviceNo: "",
deviceId: "",
orderInfo: {
orderId: "",
startTime: "",
usedTime: "",
usedTime: "0分钟",
currentFee: "0.00"
},
unlocking: false,
@@ -16,55 +16,102 @@ const _sfc_main = {
};
},
onLoad(options) {
this.deviceNo = options.deviceNo;
this.getActiveOrder();
this.deviceId = options.deviceId || "";
this.orderInfo.orderId = options.orderId || "";
this.getOrderDetails();
this.startTimer();
},
onUnload() {
this.clearTimer();
},
methods: {
// 获取进行中的订单信息
async getActiveOrder() {
// 获取订单详情
async getOrderDetails() {
try {
common_vendor.index.showLoading({ title: "加载中" });
const result = await config_user.queryHasOrder(this.deviceNo);
if (result.code === 200 && result.data && result.data.length > 0) {
const orderData = result.data[0];
this.orderInfo = {
orderId: orderData.orderId,
startTime: this.formatTime(orderData.createTime),
usedTime: this.calculateUsedTime(orderData.createTime),
currentFee: orderData.amount || "0.00"
};
this.startTimer();
if (!this.orderInfo.orderId) {
throw new Error("订单ID不能为空");
}
const result = await config_user.queryById(this.orderInfo.orderId);
if (result.code === 200 && result.data) {
const orderData = result.data;
this.orderInfo.startTime = this.formatTime(new Date(orderData.createTime));
this.calculateUsedTime(orderData.createTime);
this.orderInfo.currentFee = orderData.amount || "0.00";
} else {
common_vendor.index.showToast({
title: "没有进行中的订单",
icon: "none"
});
setTimeout(() => {
common_vendor.index.reLaunch({
url: "/pages/index/index"
});
}, 1500);
throw new Error("获取订单详情失败");
}
} catch (error) {
common_vendor.index.__f__("error", "at pages/device/return.vue:112", "获取订单信息失败:", error);
common_vendor.index.showToast({
title: "获取订单信息失败",
title: error.message || "获取订单信息失败",
icon: "none"
});
setTimeout(() => {
common_vendor.index.reLaunch({
url: "/pages/index/index"
});
}, 1500);
} finally {
common_vendor.index.hideLoading();
}
},
// 处理归还请求
// 格式化时间
formatTime(date) {
const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, "0");
const day = date.getDate().toString().padStart(2, "0");
const hour = date.getHours().toString().padStart(2, "0");
const minute = date.getMinutes().toString().padStart(2, "0");
return `${year}-${month}-${day} ${hour}:${minute}`;
},
// 计算使用时长
calculateUsedTime(startTime) {
const start = new Date(startTime);
const now = /* @__PURE__ */ new Date();
const diffMs = now - start;
const minutes = Math.floor(diffMs / (1e3 * 60));
if (minutes < 60) {
this.orderInfo.usedTime = `${minutes}分钟`;
} else {
const hours = Math.floor(minutes / 60);
const remainMinutes = minutes % 60;
this.orderInfo.usedTime = `${hours}小时${remainMinutes}分钟`;
}
},
// 更新使用时长的定时器
startTimer() {
this.timer = setInterval(() => {
this.getOrderDetails();
}, 6e4);
},
// 清除定时器
clearTimer() {
if (this.timer) {
clearInterval(this.timer);
this.timer = null;
}
},
// 处理开锁归还
async handleUnlock() {
if (this.unlocking)
return;
try {
this.unlocking = true;
common_vendor.index.showLoading({ title: "归还中" });
common_vendor.index.showLoading({ title: "开锁中" });
const confirmResult = await new Promise((resolve) => {
common_vendor.index.showModal({
title: "确认归还",
content: "确定要归还设备吗?",
success: (res) => {
resolve(res.confirm);
}
});
});
if (!confirmResult) {
this.unlocking = false;
common_vendor.index.hideLoading();
return;
}
const result = await config_user.overOrderById(this.orderInfo.orderId);
if (result.code === 200) {
common_vendor.index.showToast({
@@ -72,8 +119,8 @@ const _sfc_main = {
icon: "success"
});
setTimeout(() => {
common_vendor.index.redirectTo({
url: "/pages/order/index"
common_vendor.index.reLaunch({
url: "/pages/index/index"
});
}, 1500);
} else {
@@ -88,74 +135,21 @@ const _sfc_main = {
this.unlocking = false;
common_vendor.index.hideLoading();
}
},
// 格式化时间
formatTime(date) {
if (typeof date === "string" && date.match(/\w{3}\s\w{3}\s\d{2}\s\d{2}:\d{2}:\d{2}\s\w{3}\s\d{4}/)) {
date = new Date(date);
} else if (!(date instanceof Date)) {
date = new Date(date);
}
if (isNaN(date.getTime())) {
common_vendor.index.__f__("error", "at pages/device/return.vue:171", "无效的日期格式:", date);
return "无效日期";
}
const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, "0");
const day = date.getDate().toString().padStart(2, "0");
const hour = date.getHours().toString().padStart(2, "0");
const minute = date.getMinutes().toString().padStart(2, "0");
return `${year}-${month}-${day} ${hour}:${minute}`;
},
// 计算使用时长
calculateUsedTime(startTime) {
let start;
if (typeof startTime === "string") {
start = new Date(startTime);
if (isNaN(start.getTime())) {
common_vendor.index.__f__("error", "at pages/device/return.vue:194", "无效的日期格式:", startTime);
return "0小时0分钟";
}
} else if (startTime instanceof Date) {
start = startTime;
} else {
common_vendor.index.__f__("error", "at pages/device/return.vue:200", "无效的日期类型:", startTime);
return "0小时0分钟";
}
const now = /* @__PURE__ */ new Date();
const diffMs = now - start;
const diffHours = Math.floor(diffMs / (1e3 * 60 * 60));
const diffMinutes = Math.floor(diffMs % (1e3 * 60 * 60) / (1e3 * 60));
return `${diffHours}小时${diffMinutes}分钟`;
},
// 更新使用时长
startTimer() {
this.timer = setInterval(() => {
if (this.orderInfo.orderId) {
this.orderInfo.usedTime = this.calculateUsedTime(this.orderInfo.startTime);
}
}, 6e4);
},
clearTimer() {
if (this.timer) {
clearInterval(this.timer);
this.timer = null;
}
}
}
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return {
a: common_vendor.t($data.orderInfo.orderId),
b: common_vendor.t($data.deviceNo),
c: common_vendor.t($data.orderInfo.createTime),
b: common_vendor.t($data.deviceId),
c: common_vendor.t($data.orderInfo.startTime),
d: common_vendor.t($data.orderInfo.usedTime),
e: common_vendor.t($data.orderInfo.currentFee),
f: common_vendor.t($data.unlocking ? "归还中..." : "归还设备"),
f: common_vendor.t($data.unlocking ? "开锁中..." : "开锁归还"),
g: common_vendor.o((...args) => $options.handleUnlock && $options.handleUnlock(...args)),
h: $data.unlocking
};
}
const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-df932504"]]);
const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-6d22bdf8"]]);
wx.createPage(MiniProgramPage);
//# sourceMappingURL=../../../.sourcemap/mp-weixin/pages/device/return.js.map
//# sourceMappingURL=../../../.sourcemap/mp-weixin/pages/return/index.js.map
+1
View File
@@ -0,0 +1 @@
<view class="return-container data-v-6d22bdf8"><view class="order-card data-v-6d22bdf8"><view class="order-header data-v-6d22bdf8"><text class="title data-v-6d22bdf8">使用中</text><text class="order-no data-v-6d22bdf8">订单号:{{a}}</text></view><view class="device-info data-v-6d22bdf8"><text class="device-name data-v-6d22bdf8">共享风扇</text><text class="device-id data-v-6d22bdf8">设备号:{{b}}</text></view><view class="time-info data-v-6d22bdf8"><view class="time-item data-v-6d22bdf8"><text class="label data-v-6d22bdf8">开始时间</text><text class="value data-v-6d22bdf8">{{c}}</text></view><view class="time-item data-v-6d22bdf8"><text class="label data-v-6d22bdf8">已使用时长</text><text class="value highlight data-v-6d22bdf8">{{d}}</text></view><view class="time-item data-v-6d22bdf8"><text class="label data-v-6d22bdf8">当前费用</text><text class="value data-v-6d22bdf8">¥{{e}}</text></view></view></view><view class="notice-card data-v-6d22bdf8"><view class="notice-title data-v-6d22bdf8">归还说明</view><view class="notice-list data-v-6d22bdf8"><view class="notice-item data-v-6d22bdf8"><view class="dot data-v-6d22bdf8"></view><text class="data-v-6d22bdf8">请确保设备完好无损</text></view><view class="notice-item data-v-6d22bdf8"><view class="dot data-v-6d22bdf8"></view><text class="data-v-6d22bdf8">请在指定区域内归还设备</text></view><view class="notice-item data-v-6d22bdf8"><view class="dot data-v-6d22bdf8"></view><text class="data-v-6d22bdf8">归还后押金将自动退还</text></view></view></view><view class="bottom-bar data-v-6d22bdf8"><button class="unlock-btn data-v-6d22bdf8" bindtap="{{g}}" disabled="{{h}}">{{f}}</button></view></view>
@@ -23,101 +23,102 @@
/* 垂直间距 */
/* 透明度 */
/* 文章场景相关 */
.return-container.data-v-df932504 {
.return-container.data-v-6d22bdf8 {
min-height: 100vh;
background: #f8f8f8;
padding: 30rpx;
padding-bottom: 180rpx;
box-sizing: border-box;
}
.return-container .order-card.data-v-df932504 {
.return-container .order-card.data-v-6d22bdf8 {
background: #fff;
border-radius: 24rpx;
padding: 30rpx;
margin-bottom: 30rpx;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
}
.return-container .order-card .order-header.data-v-df932504 {
.return-container .order-card .order-header.data-v-6d22bdf8 {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30rpx;
}
.return-container .order-card .order-header .title.data-v-df932504 {
.return-container .order-card .order-header .title.data-v-6d22bdf8 {
font-size: 36rpx;
font-weight: 600;
color: #1976D2;
}
.return-container .order-card .order-header .order-no.data-v-df932504 {
.return-container .order-card .order-header .order-no.data-v-6d22bdf8 {
font-size: 24rpx;
color: #999;
}
.return-container .order-card .device-info.data-v-df932504 {
margin-bottom: 30rpx;
.return-container .order-card .device-info.data-v-6d22bdf8 {
margin-bottom: 20rpx;
}
.return-container .order-card .device-info .device-name.data-v-df932504 {
.return-container .order-card .device-info .device-name.data-v-6d22bdf8 {
font-size: 32rpx;
font-weight: 500;
color: #333;
margin-right: 20rpx;
}
.return-container .order-card .device-info .device-id.data-v-df932504 {
.return-container .order-card .device-info .device-id.data-v-6d22bdf8 {
font-size: 24rpx;
color: #666;
}
.return-container .order-card .time-info .time-item.data-v-df932504 {
.return-container .order-card .time-info .time-item.data-v-6d22bdf8 {
display: flex;
justify-content: space-between;
margin-bottom: 20rpx;
margin-bottom: 16rpx;
}
.return-container .order-card .time-info .time-item.data-v-df932504:last-child {
.return-container .order-card .time-info .time-item.data-v-6d22bdf8:last-child {
margin-bottom: 0;
}
.return-container .order-card .time-info .time-item .label.data-v-df932504 {
.return-container .order-card .time-info .time-item .label.data-v-6d22bdf8 {
font-size: 28rpx;
color: #666;
}
.return-container .order-card .time-info .time-item .value.data-v-df932504 {
.return-container .order-card .time-info .time-item .value.data-v-6d22bdf8 {
font-size: 28rpx;
color: #333;
}
.return-container .order-card .time-info .time-item .value.highlight.data-v-df932504 {
.return-container .order-card .time-info .time-item .value.highlight.data-v-6d22bdf8 {
color: #1976D2;
font-weight: 500;
}
.return-container .notice-card.data-v-df932504 {
.return-container .notice-card.data-v-6d22bdf8 {
background: #fff;
border-radius: 24rpx;
padding: 30rpx;
margin-bottom: 30rpx;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
}
.return-container .notice-card .notice-title.data-v-df932504 {
.return-container .notice-card .notice-title.data-v-6d22bdf8 {
font-size: 32rpx;
font-weight: 600;
color: #333;
margin-bottom: 24rpx;
}
.return-container .notice-card .notice-list .notice-item.data-v-df932504 {
.return-container .notice-card .notice-list .notice-item.data-v-6d22bdf8 {
display: flex;
align-items: center;
margin-bottom: 16rpx;
}
.return-container .notice-card .notice-list .notice-item.data-v-df932504:last-child {
.return-container .notice-card .notice-list .notice-item.data-v-6d22bdf8:last-child {
margin-bottom: 0;
}
.return-container .notice-card .notice-list .notice-item .dot.data-v-df932504 {
.return-container .notice-card .notice-list .notice-item .dot.data-v-6d22bdf8 {
width: 12rpx;
height: 12rpx;
background: #1976D2;
border-radius: 50%;
margin-right: 16rpx;
}
.return-container .notice-card .notice-list .notice-item text.data-v-df932504 {
.return-container .notice-card .notice-list .notice-item text.data-v-6d22bdf8 {
font-size: 28rpx;
color: #666;
line-height: 1.5;
}
.return-container .bottom-bar.data-v-df932504 {
.return-container .bottom-bar.data-v-6d22bdf8 {
position: fixed;
left: 0;
right: 0;
@@ -126,14 +127,15 @@
padding: 20rpx 30rpx;
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.04);
}
.return-container .bottom-bar .unlock-btn.data-v-df932504 {
width: 80%;
.return-container .bottom-bar .unlock-btn.data-v-6d22bdf8 {
width: 100%;
height: 88rpx;
background: linear-gradient(135deg, #1976D2, #42A5F5);
border-radius: 44rpx;
background: linear-gradient(135deg, #FF9800, #FFB74D);
color: #fff;
font-size: 32rpx;
font-weight: 600;
@@ -142,10 +144,9 @@
justify-content: center;
border: none;
}
.return-container .bottom-bar .unlock-btn.data-v-df932504:active {
.return-container .bottom-bar .unlock-btn.data-v-6d22bdf8:active {
transform: scale(0.98);
}
.return-container .bottom-bar .unlock-btn[disabled].data-v-df932504 {
background: #ccc;
transform: none;
.return-container .bottom-bar .unlock-btn.data-v-6d22bdf8:disabled {
opacity: 0.7;
}
+5 -4
View File
@@ -14,16 +14,17 @@ const _sfc_main = {
if (!common_vendor.index.getStorageSync("token")) {
await util_index.wxLogin();
}
const result = await config_user.queryHasOrder(option.deviceNo);
common_vendor.index.hideLoading();
if (!option.deviceNo) {
common_vendor.index.hideLoading();
common_vendor.index.showToast({
title: "设备编号不能为空",
icon: "none"
});
return;
}
if (result.data.length != 0) {
const result = await config_user.queryHasOrder(option.deviceNo);
common_vendor.index.hideLoading();
if (result.data && result.data.data && result.data.data.length > 0) {
common_vendor.index.redirectTo({
url: `/pages/device/return?deviceNo=${option.deviceNo}`
});
@@ -38,7 +39,7 @@ const _sfc_main = {
title: "页面加载失败,请重试",
icon: "none"
});
common_vendor.index.__f__("error", "at pages/serve/bagCheck/index.vue:60", "bagCheck onLoad error:", error);
common_vendor.index.__f__("error", "at pages/serve/bagCheck/index.vue:62", "bagCheck onLoad error:", error);
}
},
methods: {}
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#1677FF" d="M23.8535534,15.1464466 C24.0488155,15.3417088 24.0488155,15.6582912 23.8535534,15.8535534 L15.8535534,23.8535534 C15.6582912,24.0488155 15.3417088,24.0488155 15.1464466,23.8535534 L0.146446609,8.85355339 C-0.0488155365,8.65829124 -0.0488155365,8.34170876 0.146446609,8.14644661 L8.14644661,0.146446609 C8.34170876,-0.0488155365 8.65829124,-0.0488155365 8.85355339,0.146446609 L23.8535534,15.1464466 Z M17.0355339,17.0355339 L19.0355339,15.0355339 L15.0355339,11.0355339 L13.0355339,13.0355339 L17.0355339,17.0355339 Z M11.0355339,15.0355339 L13.0355339,17.0355339 L9.03553391,21.0355339 L7.03553391,19.0355339 L11.0355339,15.0355339 Z M9.03553391,9.03553391 L11.0355339,11.0355339 L7.03553391,15.0355339 L5.03553391,13.0355339 L9.03553391,9.03553391 Z M3.03553391,11.0355339 L5.03553391,13.0355339 L3.03553391,15.0355339 L1.03553391,13.0355339 L3.03553391,11.0355339 Z M13.0355339,7.03553391 L15.0355339,9.03553391 L11.0355339,13.0355339 L9.03553391,11.0355339 L13.0355339,7.03553391 Z M17.0355339,3.03553391 L19.0355339,5.03553391 L15.0355339,9.03553391 L13.0355339,7.03553391 L17.0355339,3.03553391 Z M21.0355339,7.03553391 L23.0355339,9.03553391 L19.0355339,13.0355339 L17.0355339,11.0355339 L21.0355339,7.03553391 Z"/></svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#07C160" d="M9.82727273,24 C9.82727273,24 9.82727273,24 9.82727273,24 L9.82727273,24 C7.41773163,24 4.95318182,23.5318182 4.95318182,23.5318182 C4.95318182,23.5318182 3,23.1136364 1.5,22.2272727 C1.5,22.2272727 0.954545455,22.0863636 1.04318182,21.5454545 C1.13181818,21.0045455 1.36363636,20.25 1.36363636,20.25 L2.25,17.7272727 C0.409090909,16.0227273 0,14.0454545 0,12.8181818 C0,8.45454545 4.90909091,4.90909091 9.82727273,4.90909091 C13.7454545,4.90909091 17.1818182,7.10454545 18.5454545,10.2272727 C19.0909091,10.1318182 19.6363636,10.0909091 20.1818182,10.0909091 C24.5454545,10.0909091 28.0909091,13.1818182 28.0909091,16.9090909 C28.0909091,18.8181818 26.7272727,20.5909091 24.7272727,21.7272727 L25.3636364,23.5909091 C25.3636364,23.5909091 25.5,24.0454545 25.5909091,24.4090909 C25.6818182,24.7727273 25.3636364,24.9545455 25.3636364,24.9545455 C24.2727273,25.6363636 22.7272727,26.0454545 22.7272727,26.0454545 C22.7272727,26.0454545 20.7272727,26.4545455 18.7272727,26.4545455 C16.7272727,26.4545455 14.7272727,26.0454545 14.7272727,26.0454545 C13.6363636,25.7727273 12.5454545,25.4090909 11.5454545,24.9545455 C10.9090909,24.6818182 10.3636364,24.3636364 9.82727273,24 Z M6.13636364,11.3181818 C5.04545455,11.3181818 4.18181818,12.1818182 4.18181818,13.2727273 C4.18181818,14.3636364 5.04545455,15.2272727 6.13636364,15.2272727 C7.22727273,15.2272727 8.09090909,14.3636364 8.09090909,13.2727273 C8.09090909,12.1818182 7.22727273,11.3181818 6.13636364,11.3181818 Z M13.5,11.3181818 C12.4090909,11.3181818 11.5454545,12.1818182 11.5454545,13.2727273 C11.5454545,14.3636364 12.4090909,15.2272727 13.5,15.2272727 C14.5909091,15.2272727 15.4545455,14.3636364 15.4545455,13.2727273 C15.4545455,12.1818182 14.5909091,11.3181818 13.5,11.3181818 Z M20.1818182,16.5 C19.0909091,16.5 18.2272727,17.3636364 18.2272727,18.4545455 C18.2272727,19.5454545 19.0909091,20.4090909 20.1818182,20.4090909 C21.2727273,20.4090909 22.1363636,19.5454545 22.1363636,18.4545455 C22.1363636,17.3636364 21.2727273,16.5 20.1818182,16.5 Z M25.5,16.5 C24.4090909,16.5 23.5454545,17.3636364 23.5454545,18.4545455 C23.5454545,19.5454545 24.4090909,20.4090909 25.5,20.4090909 C26.5909091,20.4090909 27.4545455,19.5454545 27.4545455,18.4545455 C27.4545455,17.3636364 26.5909091,16.5 25.5,16.5 Z"/></svg>

After

Width:  |  Height:  |  Size: 2.3 KiB