pcwl_yancheng/uni-fans-score
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix:修复bug

Browse Source
This commit is contained in:
ISFP_T
2026-02-03 17:47:55 +08:00
parent 9f66ee9658
commit 5a13803743
12 changed files with 1181 additions and 854 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config/api/device.js
-31
View File
@@ -60,34 +60,3 @@ export const rentPowerBank = (deviceNo, phone) => {
}
})
}
// 确认支付并弹出风扇
export const confirmPaymentAndRent = (orderId) => {
console.log(`确认支付并弹出风扇, orderId: ${orderId}`)
return request({
url: `/app/device/confirmPaymentAndRent?orderId=${orderId}`,
method: 'GET'
})
}
// 强制打开空格子
export const forcefOpenEmptyGrid = (deviceNo) => {
console.log(`强制打开空格子, deviceNo: ${deviceNo}`)
return request({
url: `/app/device/forcef/${deviceNo}`,
method: 'post'
})
}
// 发送租借指令
export const sendRentCommand = (data) => {
return request({
url: '/app/device/sendRentCommand',
method: 'post',
data,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
}
config/api/order.js
+28 -23
View File
@@ -51,7 +51,6 @@ export const createOrder = (data) => {
// 查询订单
export const queryById = (id) => {
console.log(`查询订单详情, orderId: ${id}`)
return request({
url: `/app/order/${id}`,
method: 'get',
@@ -61,7 +60,6 @@ export const queryById = (id) => {
// 用户查询商品订单详情
export const getProductOrderDetail = (id) => {
console.log(`查询商品订单详情, orderId: ${id}`)
return request({
url: `/app/product/order/${id}`,
method: 'get',
@@ -80,7 +78,6 @@ export const cancelOrder = (data) => {
// 结束订单
export const overOrderById = (orderId) => {
console.log(`调用结束订单API, orderId: ${orderId}`)
return request({
url: `/app/order/close/${orderId}`,
method: 'get',
@@ -98,7 +95,6 @@ export const getOrderByOrderNo = (orderNo) => {
// 充电宝未弹出反馈（快捷反馈）
export const reportDeviceNoEject = (data) => {
console.log('充电宝未弹出反馈：', data)
return request({
url: '/app/order/report-no-eject',
method: 'post',
@@ -108,7 +104,6 @@ export const reportDeviceNoEject = (data) => {
// 充电宝转为自用
export const convertToOwned = (orderId) => {
console.log('充电宝转为自用，订单ID：', orderId)
return request({
url: `/app/order/convert-to-owned/${orderId}`,
method: 'post'
@@ -117,7 +112,6 @@ export const convertToOwned = (orderId) => {
// 不想还了转为自用（按最高费用）
export const closeWithMaxFee = (orderNo) => {
console.log('不想还了转为自用，订单号：', orderNo)
return request({
url: `/app/order/closeWithMaxFee/${orderNo}`,
method: 'post'
@@ -156,9 +150,36 @@ export const getWxPaymentStatus = (orderNo) => {
})
}
// ==================== Antom 支付相关接口 ====================
// 创建 Antom H5 支付订单
export const createAntomPayment = (orderNo, paymentType, osType) => {
return request({
url: `/app/antom-payment/create/${orderNo}?paymentType=${paymentType}&osType=${osType}`,
method: 'get'
})
}
// 获取 Antom 可用支付方式列表
export const getAntomPaymentMethods = (orderNo, osType) => {
return request({
url: `/app/antom-payment/consult/${orderNo}?osType=${osType}`,
method: 'get',
hideLoading: true
})
}
// Antom 支付结果查询
export const getAntomPaymentStatus = (orderNo, osType) => {
return request({
url: `/app/antom-payment/inquiry/${orderNo}?osType=${osType}`,
method: 'get',
hideLoading: true
})
}
// 通过订单号获取支付分订单信息
export const getOrderByOrderNoScore = (orderNo) => {
console.log('通过订单号获取支付分订单信息', orderNo);
return request({
url: `/app/wx-payment/score/create/${orderNo}`,
method: 'get',
@@ -168,7 +189,6 @@ export const getOrderByOrderNoScore = (orderNo) => {
// 通过订单号获取支付分订单状态
export const getOrderByOrderNoScorePayStatus = (orderNo) => {
console.log('通过订单号获取支付分订单状态', orderNo);
return request({
url: `/app/wx-payment/score/status/${orderNo}`,
method: 'get',
@@ -178,7 +198,6 @@ export const getOrderByOrderNoScorePayStatus = (orderNo) => {
// 更新订单套餐信息
export const updateOrderPackage = (data) => {
console.log('更新订单套餐信息：', data)
return request({
url: '/app/device/updateOrderPackage',
method: 'post',
@@ -188,7 +207,6 @@ export const updateOrderPackage = (data) => {
// 用户端删除商品订单（逻辑删除）
export const deleteProductOrder = (id) => {
console.log('删除商品订单，订单ID：', id)
return request({
url: `/app/product/order/${id}`,
method: 'delete'
@@ -197,22 +215,9 @@ export const deleteProductOrder = (id) => {
// 用户端取消商品订单支付
export const cancelProductOrder = (OutOrderNo) => {
console.log('取消商品订单支付，订单ID：', OutOrderNo)
return request({
url: `/app/product/order/${OutOrderNo}/cancel`,
method: 'put'
})
}
/*
* 弃用
*/
export const getPotionsDetail = (data) => {
console.log(data);
return request({
url: '/device/position/positionDetails',
method: 'get',
data
})
}
config/console.js
+1 -1
View File
@@ -6,7 +6,7 @@
// 配置项：true 表示打印日志，false 表示不打印日志
export const CONSOLE_CONFIG = {
// 是否启用 console.log
enableLog: true,
enableLog: false,
// 是否启用 console.warn
enableWarn: true,
// 是否启用 console.error
locale/en-US.js
+3 -1
View File
@@ -157,6 +157,7 @@ export default {
order: {
myOrders: 'My Orders',
myDeviceOrders:'Customize Orders',
noOrderRecord: 'No order records',
getOrderListFailed: 'Failed to get order list',
confirmCancelContent: 'Are you sure to cancel this order?',
@@ -799,10 +800,11 @@ export default {
goods: {
title: 'Product Details',
goodsTitle:'Customize Details',
productName: 'FengDianZhe Shared Fan + Power Bank + Hand Warmer Series - Cherry Blossom Pink',
perUnit: '/pc',
buyNow: 'Buy Now',
productDetail: 'Product Details',
productDetail: 'Customize Details',
features: {
battery: '8000Ahm',
batteryDesc: 'Large Capacity Battery',
locale/zh-CN.js
+3 -1
View File
@@ -157,6 +157,7 @@ export default {
order: {
myOrders: '我的订单',
myDeviceOrders:'我的定制',
noOrderRecord: '暂无订单记录',
getOrderListFailed: '获取订单列表失败',
confirmCancelContent: '确定要取消此订单吗？',
@@ -799,10 +800,11 @@ export default {
goods: {
title: '商品详情',
goodsTitle:'定制详情',
productName: '风电者共享风扇 + 充电宝 + 暖手宝系列-樱花粉',
perUnit: '/个',
buyNow: '立即购买',
productDetail: '商品详情',
productDetail: '定制详情',
features: {
battery: '8000Ahm',
batteryDesc: '大容量电池',
pages.json
+3 -2
View File
@@ -126,7 +126,7 @@
{
"path": "pages/device/orderDetail",
"style": {
"navigationBarTitleText": "订单详情",
"navigationBarTitleText": "定制详情",
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black"
}
@@ -276,7 +276,8 @@
"style": {
"navigationBarTitleText": "",
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black"
"navigationBarTextStyle": "black",
"navigationStyle": "custom"
}
},
{
pages/device/goods.vue
+1 -1
View File
@@ -364,7 +364,7 @@
onMounted(() => {
uni.setNavigationBarTitle({
title: t('goods.title')
title: t('goods.goodsTitle')
})
// 初始化地区数据
initRegionData()
pages/device/orderDetail.vue
+83 -10
View File
@@ -114,7 +114,7 @@
<view class="action-btn secondary" @click="onDeleteOrder">
删除订单
</view>
<view class="action-btn primary" @click="onReorder">
<view class="action-btn primary" @click="onReorder(orderDetail.productId)">
再次定制
</view>
</template>
@@ -124,7 +124,7 @@
<view class="action-btn secondary" @click="onContactService">
联系客服
</view>
<view class="action-btn primary" @click="onReorder">
<view class="action-btn primary" @click="onReorder(orderDetail.productId)">
再次定制
</view>
</template>
@@ -133,7 +133,7 @@
</template>
<script setup>
import { ref, computed, onMounted } from 'vue';
import { ref, computed, onMounted, onUnmounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import {
queryById,
@@ -149,6 +149,8 @@
const orderDetail = ref({});
const orderId = ref('');
const countdownText = ref('');
let countdownTimer = null;
// 订单状态文本
const statusText = computed(() => {
@@ -234,6 +236,10 @@
if (status === 0 || status === '0') {
title = '待付款';
// 如果有倒计时文本，添加到标题中
if (countdownText.value) {
title = `${title} ${countdownText.value}`;
}
} else if (status === 1 || status === '1') {
title = '待发货';
} else if (status === 2 || status === '2') {
@@ -251,6 +257,66 @@
});
};
// 启动倒计时
const startCountdown = () => {
// 清除之前的定时器
if (countdownTimer) {
clearInterval(countdownTimer);
countdownTimer = null;
}
const status = orderDetail.value.status;
const expireTime = orderDetail.value.expireTime;
// 只有待付款状态且有过期时间才显示倒计时
if ((status === 0 || status === '0') && expireTime) {
// 计算倒计时
const updateCountdown = () => {
const now = new Date().getTime();
const expireTimestamp = new Date(expireTime).getTime();
const diff = expireTimestamp - now;
if (diff > 0) {
// 计算总分钟数和秒数
const totalMinutes = Math.floor(diff / (1000 * 60));
const seconds = Math.floor((diff % (1000 * 60)) / 1000);
// 格式化为 MM:SS
const minutesStr = String(totalMinutes).padStart(2, '0');
const secondsStr = String(seconds).padStart(2, '0');
countdownText.value = `${minutesStr}:${secondsStr}`;
updatePageTitle();
} else {
// 倒计时结束
countdownText.value = '';
if (countdownTimer) {
clearInterval(countdownTimer);
countdownTimer = null;
}
// 重新加载订单详情（订单可能已自动取消）
loadOrderDetail();
}
};
// 立即执行一次
updateCountdown();
// 每秒更新一次
countdownTimer = setInterval(updateCountdown, 1000);
} else {
countdownText.value = '';
updatePageTitle();
}
};
// 组件卸载时清除定时器
onUnmounted(() => {
if (countdownTimer) {
clearInterval(countdownTimer);
countdownTimer = null;
}
});
// 加载订单详情
const loadOrderDetail = async () => {
try {
@@ -269,6 +335,7 @@
outTradeNo: data.outTradeNo,
userId: data.userId,
// 状态信息
status: data.status,
payStatus: data.payStatus,
@@ -282,6 +349,7 @@
createTime: data.createTime,
updateTime: data.updateTime,
payTime: data.payTime,
expireTime: data.expireTime, // 订单自动取消时间
// 收货信息
receiverName: data.receiverName,
@@ -300,6 +368,7 @@
pictureUrl: data.pictureUrl,
color: data.color,
quantity: data.quantity,
productId:data.productId,
// 兼容旧字段
orderId: data.id,
@@ -315,8 +384,8 @@
productImage: data.pictureUrl || data.productImage || ''
};
// 根据订单状态更新页面标题
updatePageTitle();
// 启动倒计时
startCountdown();
}
uni.hideLoading();
@@ -528,9 +597,13 @@
// 再次定制
const onReorder = (order) => {
uni.navigateTo({
url: `/pages/device/goods?productId=${order.productId}`
});
if(order){
uni.navigateTo({
url: `/pages/device/goods?productId=${order}`
});
}
// console.log(order);
};
</script>
@@ -622,8 +695,8 @@
display: flex;
justify-content: space-between;
margin-bottom: 20rpx;
font-size: 26rpx;
height: 40rpx;
font-size: 28rpx;
height: 50rpx;
&:last-child {
margin-bottom: 0;
pages/device/orderList.vue
+1 -4
View File
@@ -54,9 +54,6 @@
import{
createProductOrder
}from "@/config/api/product.js"
import {
confirmPaymentAndRent
} from '../../config/api/device.js';
import {
updateUserBalance
} from '../../config/api/user.js';
@@ -288,7 +285,7 @@
// 设置页面标题并监听订单完成事件
onMounted(() => {
uni.setNavigationBarTitle({
title: t('order.myOrders')
title: t('order.myDeviceOrders')
})
// 监听订单完成事件
pages/order/index.vue
-3
View File
@@ -49,9 +49,6 @@
cancelOrder,
createWxPayment
} from '../../config/api/order.js';
import {
confirmPaymentAndRent
} from '../../config/api/device.js';
import {
updateUserBalance
} from '../../config/api/user.js';
pages/order/payment.vue
+673 -396
View File
File diff suppressed because it is too large Load Diff
pages/order/success.vue
+306 -302
View File
@@ -1,346 +1,350 @@
<template>
<view class="success-container">
<!-- 支付成功状态 -->
<view class="status-card">
<view class="status-icon success"></view>
<view class="status-text">{{ $t('success.paymentSuccess') }}</view>
<view class="status-desc">{{ $t('success.paymentSuccessDesc') }}</view>
</view>
<view class="success-container">
<!-- 支付成功状态 -->
<view class="status-card">
<view class="status-icon success"></view>
<view class="status-text">{{ $t('success.paymentSuccess') }}</view>
<view class="status-desc">{{ $t('success.paymentSuccessDesc') }}</view>
</view>
<!-- 订单信息 -->
<view class="order-card">
<view class="card-title">{{ $t('success.orderInfo') }}</view>
<view class="info-item">
<text class="label">{{ $t('order.orderNo') }}</text>
<text class="value">{{ orderInfo.orderNo || '-' }}</text>
</view>
<view class="info-item">
<text class="label">{{ $t('order.deviceNo') }}</text>
<text class="value">{{ orderInfo.deviceNo || '-' }}</text>
</view>
<view class="info-item">
<text class="label">{{ $t('success.paymentAmount') }}</text>
<text class="value">￥{{ orderInfo.amount || '0.00' }}</text>
</view>
<view class="info-item">
<text class="label">{{ $t('success.paymentTime') }}</text>
<text class="value">{{ orderInfo.payTime || '-' }}</text>
</view>
</view>
<!-- 订单信息 -->
<view class="order-card">
<view class="card-title">{{ $t('success.orderInfo') }}</view>
<view class="info-item">
<text class="label">{{ $t('order.orderNo') }}</text>
<text class="value">{{ orderInfo.orderNo || '-' }}</text>
</view>
<view class="info-item">
<text class="label">{{ $t('order.deviceNo') }}</text>
<text class="value">{{ orderInfo.deviceNo || '-' }}</text>
</view>
<view class="info-item">
<text class="label">{{ $t('success.paymentAmount') }}</text>
<text class="value">￥{{ orderInfo.amount || '0.00' }}</text>
</view>
<view class="info-item">
<text class="label">{{ $t('success.paymentTime') }}</text>
<text class="value">{{ orderInfo.payTime || '-' }}</text>
</view>
</view>
<!-- 设备状态 -->
<view class="device-status">
<view class="status-message">{{ deviceMessage }}</view>
<view class="loading-animation" v-if="isLoading">
<view class="loading-circle"></view>
</view>
</view>
<!-- 设备状态 -->
<view class="device-status">
<view class="status-message">{{ deviceMessage }}</view>
<view class="loading-animation" v-if="isLoading">
<view class="loading-circle"></view>
</view>
</view>
<!-- 操作按钮 -->
<view class="button-group">
<button class="primary-btn" @click="goToHome">{{ $t('success.backToHome') }}</button>
<button class="secondary-btn" @click="goToOrderList">{{ $t('success.viewOrder') }}</button>
</view>
</view>
<!-- 操作按钮 -->
<view class="button-group">
<button class="primary-btn" @click="goToHome">{{ $t('success.backToHome') }}</button>
<button class="secondary-btn" @click="goToOrderList">{{ $t('success.viewOrder') }}</button>
</view>
</view>
</template>
<script>
import { queryById } from '@/config/api/order.js'
import { confirmPaymentAndRent } from '@/config/api/device.js'
<script setup>
import {
ref,
getCurrentInstance
} from 'vue'
import {
onLoad
} from '@dcloudio/uni-app'
import {
queryById,
getOrderByOrderNo
} from '@/config/api/order.js'
export default {
data() {
return {
orderId: '',
orderInfo: {},
isLoading: true,
deviceMessage: '',
hasTriggeredDevice: false
}
},
onLoad(options) {
// 设置页面标题
uni.setNavigationBarTitle({
title: this.$t('success.paymentSuccess')
})
// 获取当前实例以访问 $t 方法
const {
proxy
} = getCurrentInstance()
this.deviceMessage = this.$t('success.preparingDevice')
// 响应式数据
const orderId = ref('')
const orderInfo = ref({})
const isLoading = ref(true)
const deviceMessage = ref('')
const hasTriggeredDevice = ref(false)
if (options && options.orderId) {
this.orderId = options.orderId
this.loadOrderInfo()
// 页面加载
onLoad((options) => {
// 设置页面标题
uni.setNavigationBarTitle({
title: proxy.$t('success.paymentSuccess')
})
// 添加页面显示监听，防止页面切换后重复触发弹出
uni.$once('orderSuccess:' + this.orderId, () => {
console.log('已经触发过弹出逻辑，不再重复触发')
this.hasTriggeredDevice = true
})
} else {
uni.showToast({
title: this.$t('order.orderNotExist'),
icon: 'none'
})
setTimeout(() => {
this.goToHome()
}, 1500)
}
},
methods: {
async loadOrderInfo() {
try {
uni.showLoading({
title: this.$t('common.loading')
})
deviceMessage.value = proxy.$t('success.preparingDevice')
const res = await 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.payAmount || orderData.amount,
payTime: orderData.payTime || this.formatTime(new Date())
}
// #ifdef H5
if (uni.getStorageSync('pendingPaymentNo')) {
orderId.value = options.orderId
loadOrderInfo()
// 检查订单状态
if (orderData.orderStatus === 'IN_USED') {
// 如果已经是使用中状态，可能说明开锁已经完成
this.deviceMessage = '设备已弹出，请取走您的风扇'
this.isLoading = false
// 添加页面显示监听，防止页面切换后重复触发弹出
uni.$once('orderSuccess:' + orderId.value, () => {
console.log('已经触发过弹出逻辑，不再重复触发')
hasTriggeredDevice.value = true
})
} else {
uni.showToast({
title: proxy.$t('order.orderNotExist'),
icon: 'none'
})
setTimeout(() => {
goToHome()
}, 1500)
}
// #endif
// #ifndef H5
if (options && options.orderId) {
orderId.value = options.orderId
loadOrderInfo()
// 如果是第一次加载页面且设备已弹出，记录状态，避免重复弹出
if (!this.hasTriggeredDevice) {
uni.$emit('orderSuccess:' + this.orderId)
this.hasTriggeredDevice = true
}
} else {
// 正常触发弹出逻辑
this.triggerDeviceEject()
}
} else {
throw new Error('获取订单信息失败')
}
// 添加页面显示监听，防止页面切换后重复触发弹出
uni.$once('orderSuccess:' + orderId.value, () => {
console.log('已经触发过弹出逻辑，不再重复触发')
hasTriggeredDevice.value = true
})
} else {
uni.showToast({
title: proxy.$t('order.orderNotExist'),
icon: 'none'
})
setTimeout(() => {
goToHome()
}, 1500)
}
// #endif
})
uni.hideLoading()
} catch (error) {
uni.hideLoading()
uni.showToast({
title: error.message || this.$t('order.getOrderFailed'),
icon: 'none'
})
}
},
// 加载订单信息
const loadOrderInfo = async () => {
try {
uni.showLoading({
title: proxy.$t('common.loading')
})
// 触发弹出风扇
async triggerDeviceEject() {
if (this.hasTriggeredDevice) {
console.log('已经触发过弹出风扇，不重复触发')
return
}
const res = await queryById(orderId.value)
if (res.code === 200 && res.data) {
const orderData = res.data
orderInfo.value = {
orderNo: orderData.orderNo || orderData.orderId,
deviceNo: orderData.deviceNo,
amount: orderData.payAmount || orderData.amount,
payTime: orderData.payTime || formatTime(new Date())
}
this.hasTriggeredDevice = true
uni.$emit('orderSuccess:' + this.orderId)
this.isLoading = true
this.deviceMessage = this.$t('success.preparingDevice')
// 检查订单状态
if (orderData.orderStatus === 'IN_USED') {
// 如果已经是使用中状态，可能说明开锁已经完成
deviceMessage.value = '设备已弹出，请取走您的风扇'
isLoading.value = false
try {
console.log(`准备触发弹出风扇，orderId: ${this.orderId}`)
// 如果是第一次加载页面且设备已弹出，记录状态，避免重复弹出
if (!hasTriggeredDevice.value) {
uni.$emit('orderSuccess:' + orderId.value)
hasTriggeredDevice.value = true
}
} else {
// 在此页面不再触发设备弹出操作，仅更新展示文案和加载状态
deviceMessage.value = proxy.$t('success.paymentSuccessDesc')
isLoading.value = false
}
} else {
throw new Error('获取订单信息失败')
}
// 调用确认支付并弹出的方法
const result = await confirmPaymentAndRent(this.orderId)
console.log('确认支付并弹出风扇结果:', JSON.stringify(result))
uni.hideLoading()
} catch (error) {
uni.hideLoading()
uni.showToast({
title: error.message || proxy.$t('order.getOrderFailed'),
icon: 'none'
})
}
}
if (result && result.code === 200) {
this.deviceMessage = this.$t('success.deviceReady')
uni.showToast({
title: this.$t('success.deviceReady'),
icon: 'success'
})
} else {
throw new Error((result && result.msg) || this.$t('success.deviceFailed'))
}
} catch (error) {
console.error('弹出风扇错误:', error)
this.deviceMessage = this.$t('success.deviceFailed')
uni.showToast({
title: error.message || this.$t('success.deviceFailed'),
icon: 'none'
})
} finally {
this.isLoading = false
}
},
// 格式化时间
const 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}`
}
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() {
uni.switchTab({
url: '/pages/index/index'
})
},
goToOrderList() {
uni.redirectTo({
url: '/pages/order/index'
})
}
}
}
// 返回首页
const goToHome = () => {
uni.reLaunch({
url: '/pages/index/index'
})
}
// 查看订单列表
const goToOrderList = () => {
uni.redirectTo({
url: '/pages/order/index'
})
}
</script>
<style lang="scss" scoped>
.success-container {
padding: 20px;
background-color: #f5f5f5;
min-height: 100vh;
}
.success-container {
padding: 20px;
background-color: #f5f5f5;
min-height: 100vh;
}
.status-card {
background-color: #fff;
border-radius: 12px;
padding: 30px;
text-align: center;
margin-bottom: 20px;
.status-card {
background-color: #fff;
border-radius: 12px;
padding: 30px;
text-align: center;
margin-bottom: 20px;
.status-icon {
width: 60px;
height: 60px;
margin: 0 auto 16px;
background-color: #07c160;
border-radius: 50%;
position: relative;
.status-icon {
width: 60px;
height: 60px;
margin: 0 auto 16px;
background-color: #07c160;
border-radius: 50%;
position: relative;
&::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);
}
}
&::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-text {
font-size: 24px;
font-weight: bold;
color: #07c160;
margin-bottom: 8px;
}
.status-text {
font-size: 24px;
font-weight: bold;
color: #07c160;
margin-bottom: 8px;
}
.status-desc {
font-size: 14px;
color: #666;
}
}
.status-desc {
font-size: 14px;
color: #666;
}
}
.order-card {
background-color: #fff;
border-radius: 12px;
padding: 20px;
margin-bottom: 20px;
.order-card {
background-color: #fff;
border-radius: 12px;
padding: 20px;
margin-bottom: 20px;
.card-title {
font-size: 16px;
font-weight: bold;
margin-bottom: 16px;
color: #333;
}
.card-title {
font-size: 16px;
font-weight: bold;
margin-bottom: 16px;
color: #333;
}
.info-item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
.info-item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
.label {
color: #666;
font-size: 14px;
}
.label {
color: #666;
font-size: 14px;
}
.value {
color: #333;
font-size: 14px;
}
}
}
.value {
color: #333;
font-size: 14px;
}
}
}
.device-status {
background-color: #fff;
border-radius: 12px;
padding: 20px;
margin-bottom: 20px;
text-align: center;
.device-status {
background-color: #fff;
border-radius: 12px;
padding: 20px;
margin-bottom: 20px;
text-align: center;
.status-message {
font-size: 16px;
color: #333;
margin-bottom: 12px;
}
.status-message {
font-size: 16px;
color: #333;
margin-bottom: 12px;
}
.loading-animation {
display: flex;
justify-content: center;
align-items: center;
height: 40px;
.loading-animation {
display: flex;
justify-content: center;
align-items: center;
height: 40px;
.loading-circle {
width: 30px;
height: 30px;
border-radius: 50%;
border: 3px solid #f0f0f0;
border-top-color: #07c160;
animation: spin 1s linear infinite;
}
.loading-circle {
width: 30px;
height: 30px;
border-radius: 50%;
border: 3px solid #f0f0f0;
border-top-color: #07c160;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
.button-group {
margin-top: 30px;
display: flex;
// flex-direction: column;
gap: 16px;
100% {
transform: rotate(360deg);
}
}
}
}
.primary-btn {
background-color: #07c160;
color: #fff;
border: none;
border-radius: 24px;
padding: 12px;
font-size: 16px;
.button-group {
margin-top: 30px;
display: flex;
// flex-direction: column;
gap: 16px;
&:active {
opacity: 0.8;
}
}
.primary-btn {
background-color: #07c160;
color: #fff;
border: none;
border-radius: 24px;
padding: 12px;
font-size: 16px;
.secondary-btn {
background-color: #fff;
color: #07c160;
border: 1px solid #07c160;
border-radius: 24px;
padding: 12px;
font-size: 16px;
&:active {
opacity: 0.8;
}
}
&:active {
background-color: #f5f5f5;
}
}
}
.secondary-btn {
background-color: #fff;
color: #07c160;
border: 1px solid #07c160;
border-radius: 24px;
padding: 12px;
font-size: 16px;
&:active {
background-color: #f5f5f5;
}
}
}
</style>