[plugin:vite:import-analysis] Failed to resolve import "@dcloudio/uni-ui/lib/uni-loading/uni-loading.vue" from "E:/SmCity/pages/Subway/Subway.vue". Does the file exist?
19:57:32.237 at pages/Subway/Subway.vue:131:9
19:57:32.240 1 | import __easycom_0 from '@dcloudio/uni-ui/lib/uni-search-bar/uni-search-bar.vue';import { resolveDynamicComponent as __resolveDynamicComponent } from 'vue';import { resolveEasycom } from '@dcloudio/uni-app';import '@dcloudio/uni-components/style/text.
css';import { Text as __syscom_1 } from '@dcloudio/uni-h5';import __easycom_2 from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue';import '@dcloudio/uni-components/style/view.
css';import { View as __syscom_3 } from '@dcloudio/uni-h5';import '@dcloudio/uni-components/style/scroll-view.
css';import '@dcloudio/uni-components/style/refresher.
css';import { ScrollView as __syscom_4 } from '@dcloudio/uni-h5';import __easycom_5 from '@dcloudio/uni-ui/lib/uni-popup/uni-popup.vue';import __easycom_6 from 'E:/SmCity/components/ScBuysList/ScBuysList.vue';import '@dcloudio/uni-components/style/input.
css';import { Input as __syscom_7 } from '@dcloudio/uni-h5';import '@dcloudio/uni-components/style/button.
css';import { Button as __syscom_8 } from '@dcloudio/uni-h5';import __easycom_9 from '@dcloudio/uni-ui/lib/uni-loading/uni-loading.vue';import '@dcloudio/uni-components/style/radio.
css';import { Radio as __syscom_10 } from '@dcloudio/uni-h5';import '@dcloudio/uni-components/style/label.
css';import { Label as __syscom_11 } from '@dcloudio/uni-h5';import '@dcloudio/uni-components/style/radio-group.
css';import { RadioGroup as __syscom_12 } from '@dcloudio/uni-h5';import {
19:57:32.240 | ^
19:57:32.240 2 | computed,
19:57:32.240 3 | ref,
19:57:32.296 [Vue warn]: Unh
andled error during execution of async component loader \n at <AsyncComponentWrapper>\nat <PageBody>\nat <Page>\nat <Anonymous>\nat <KeepAlive>\nat <RouterView>\nat <Layout>\nat <App>
19:57:32.298 [TypeError] {message: "Failed to fetch dynamically imported module: http:…host:5173/pages/Subway/Subway.vue?t=1750161451638"}
<template>
<view class="bus-wrap">
<!-- 搜索栏 -->
<uni-search-bar placeholder="搜索站点" ref="searchbar" @confirm="search"></uni-search-bar>
<uni-popup ref="popup" type="bottom" background-color="#fff">
<view class="popup-content">
<view class="popup-header">
<text class="popup-title">搜索结果</text>
<uni-icons type="closeempty" size="24" color="#999" @click="closePopup"></uni-icons>
</view>
<scroll-view scroll-y class="result-list">
<view v-if="searchData.length === 0" class="empty-result">
<text>未找到相关站点</text>
</view>
<view v-for="(result, index) in searchData" :key="index" class="result-item">
<text class="result-name">{{ result.name }}</text>
<text class="result-line">可乘坐: {{ result.linesId }}号线</text>
</view>
</scroll-view>
</view>
</uni-popup>
<!-- 原有站点信息区域-->
<view class="bus-stops" style="height: 600rpx; overflow-y: scroll;">
<view v-for="(stop, index) in busStops" :key="stop.stepsId" class="stop-item"
:style="{ backgroundColor: index % 2 === 0 ? '#52a5f8' : '#0066FF' }">
<text class="stop-name">{{ stop.name }}</text>
<text class="stop-sequence">乘坐: {{ stop.linesId }}号线</text>
</view>
</view>
<!-- 原有站点路线 -->
<ScBuysList>>
<template #itemSlot="item">
<view class="info" @click="gotoDetail(item.id)">
<text class="title">{{ item.name }}</text>
<text class="details">起点: {{ item.first }}, 终点: {{ item.end }}</text>
</view>
<view class="price">价格: ¥{{ item.price }}</view>
</template>
</ScBuysList>
<!-- 新增订单创建区域 -->
<view class="order-section">
<view class="section-title">
<text>创建巴士订单</text>
</view>
<view class="form-item">
<text class="label">起点</text>
<input class="input" v-model="orderForm.start" placeholder="请输入起点" />
</view>
<view class="form-item">
<text class="label">终点</text>
<input class="input" v-model="orderForm.end" placeholder="请输入终点" />
</view>
<view class="form-item">
<text class="label">路线</text>
<input class="input" v-model="orderForm.path" placeholder="请输入路线" />
</view>
<view class="form-item">
<text class="label">价格</text>
<input class="input" v-model="orderForm.price" placeholder="请输入价格" type="number" />
</view>
<button class="submit-btn" @click="createOrder">提交订单</button>
</view>
<!-- 订单列表区域 -->
<view class="order-list-section">
<view class="section-title">
<text>我的订单</text>
<button class="refresh-btn" @click="fetchOrders">
<uni-icons type="refresh" size="16" color="#4a90e2"></uni-icons>
<text>刷新</text>
</button>
</view>
<view v-if="orderLoading" class="loading">
<uni-loading type="circle" color="#4a90e2"></uni-loading>
</view>
<view v-else-if="orders.length === 0" class="empty">
<text>暂无订单记录</text>
</view>
<view v-else class="orders-container">
<view v-for="order in orders" :key="order.id" class="order-item">
<view class="order-header">
<text class="order-number">订单号: {{ order.orderNum }}</text>
<text class="order-status" :class="getStatusClass(order.status)">
{{ getStatusText(order.status) }}
</text>
</view>
<view class="order-content">
<text class="route">{{ order.path }}: {{ order.start }} → {{ order.end }}</text>
<text class="price">¥{{ order.price }}</text>
</view>
<view v-if="order.status === 0" class="order-actions">
<button class="pay-btn" @click="showPayPopup(order)">支付</button>
<button class="cancel-btn" @click="cancelOrder(order.id)">取消</button>
</view>
</view>
</view>
</view>
<!-- 支付弹窗 -->
<uni-popup ref="payPopup" type="bottom" background-color="#fff">
<view class="pay-popup">
<view class="popup-header">
<text class="popup-title">订单支付</text>
<uni-icons type="closeempty" size="24" color="#999" @click="closePayPopup"></uni-icons>
</view>
<view class="pay-content">
<text class="order-number">订单号: {{ currentOrder.orderNum }}</text>
<text class="pay-amount">支付金额: ¥{{ currentOrder.price }}</text>
<radio-group class="payment-methods" @change="h
andlePaymentMethodChange">
<label class="payment-method">
<radio value="wechat" checked />
<text>微信支付</text>
</label>
<label class="payment-method">
<radio value="alipay" />
<text>支付宝</text>
</label>
</radio-group>
<button class="confirm-pay-btn" @click="payOrder">确认支付</button>
</view>
</view>
</uni-popup>
</view>
</template>
<script setup>
import {
computed,
ref,
onMounted
} from 'vue';
import {
ip,
getHttp
} from '../../utils/http.js';
import { onLoad } from '@dcloudio/uni-app'
// 站点信息相关数据
const busStops = ref([]);
const linesId = ref();
const stepsId = ref();
const searchbar = ref(null)
const popup = ref(null)
const searchData = ref([])
//订单
const busOrder = ref()
// 关闭弹窗
const closePopup = () => {
popup.value.close()
}
// 搜索事件
const search = (e) => {
searchData.value = []
console.log('搜索关键字: ' + e.value);
const keyword = e.value.trim(); // 去除前后空格
for (let i = 0; i < busStops.value.length; i++) {
const stop = busStops.value[i];
if (stop.name.includes(keyword)) {
searchData.value.push({
linesId: stop.linesId,
name: stop.name
});
}
}
console.log('搜索结果:', searchData.value);
popup.value.open()
searchbar.value.cancel()
}
// 获取站点信息
async function getBusStops() {
const result = await getHttp({
url: '/prod-api/api/bus/stop/list',
data: {
stepsId:stepsId.value,
name:name.value,
linesId: linesId.value
}
});
busStops.value = result.data.rows;
console.log('站点信息:', busStops.value);
}
// 在组件挂载时调用获取站点信息的函数
onMounted(() => {
getBusStops();
});
// 跳转至路线详情
const gotoDetail = (id) => {
uni.navigateTo({
url: '/pages/Subway/BuysDetail?id=' + id
});
}
// 订单相关数据
const orderForm = ref({
start: '',
end: '',
path: '',
price: '',
status: 0
});
const orders = ref([]);
const orderLoading = ref(false);
const payPopup = ref(null);
const currentOrder = ref({});
const paymentType = ref('wechat');
// 创建订单
const createOrder = async () => {
if (!orderForm.value.start || !orderForm.value.end || !orderForm.value.path || !orderForm.value.price) {
return uni.showToast({ title: '请填写完整订单信息', icon: 'none' });
}
try {
const result = await getHttp({
url: '/prod-api/api/bus/order',
data: {
start: orderForm.value.start,
end: orderForm.value.end,
path: orderForm.value.path,
price: Number(orderForm.value.price),
status: 0
}
});
uni.showToast({ title: '订单创建成功', icon: 'success' });
// 重置表单
orderForm.value = { start: '', end: '', path: '', price: '', status: 0 };
// 刷新订单列表
fetchOrders();
} catch (error) {
uni.showToast({
title: error.data?.msg || '订单创建失败',
icon: 'none'
});
}
};
// 获取订单列表
const fetchOrders = async () => {
orderLoading.value = true;
try {
const result = await getHttp({
url: '/prod-api/api/bus/order/list',
params: {
pageNum: 1,
pageSize: 10
}
});
orders.value = result.data.rows || [];
} catch (error) {
uni.showToast({
title: error.data?.msg || '获取订单失败',
icon: 'none'
});
} finally {
orderLoading.value = false;
}
};
// 支付订单
const showPayPopup = (order) => {
currentOrder.value = order;
payPopup.value.open();
};
const closePayPopup = () => {
payPopup.value.close();
};
const h
andlePaymentMethodChange = (e) => {
paymentType.value = e.detail.value;
};
const payOrder = async () => {
try {
const result = await getHttp({
url: '/prod-api/api/bus/pay',
data: {
orderNum: currentOrder.value.orderNum,
paymentType: paymentType.value
}
});
uni.showToast({ title: '支付成功', icon: 'success' });
closePayPopup();
fetchOrders();
} catch (error) {
uni.showToast({
title: error.data?.msg || '支付失败',
icon: 'none'
});
}
};
// 取消订单
const cancelOrder = async (orderId) => {
try {
uni.showLoading({ title: '处理中...' });
await postHttp({
url: '/prod-api/api/bus/order/cancel',
data: { orderId }
});
uni.showToast({ title: '订单已取消', icon: 'success' });
fetchOrders();
} catch (error) {
uni.showToast({
title: error.data?.msg || '取消失败',
icon: 'none'
});
} finally {
uni.hideLoading();
}
};
// 状态显示
const getStatusText = (status) => {
const statusMap = { 0: '待支付', 1: '已支付', 2: '已完成', 3: '已取消' };
return statusMap[status] || '未知';
};
const getStatusClass = (status) => {
const classMap = {
0: 'status-pending',
1: 'status-paid',
2: 'status-completed',
3: 'status-canceled'
};
return classMap[status] || '';
};
// 初始化
onMounted(() => {
fetchOrders();
});
</script>
<style lang="s
css" scoped>
/* 新增弹窗样式 */
.popup-content {
padding: 30rpx;
.popup-header {
display: flex;
justify-content: space-
between;
align-items: center;
margin-bottom: 30rpx;
.popup-title {
font-size: 36rpx;
font-weight: bold;
color: #333;
}
}
.result-list {
max-height: 60vh;
.empty-result {
padding: 30rpx;
text-align: center;
color: #999;
}
.result-item {
padding: 20rpx;
border-bottom: 1rpx solid #eee;
.result-name {
display: block;
font-size: 32rpx;
color: #333;
margin-bottom: 10rpx;
}
.result-line {
font-size: 28rpx;
color: #666;
}
}
}
}
.bus-wrap {
padding: 20rpx;
background-color: #f0f8ff;
}
.bus-stops {
overflow-y: scroll;
margin: 20rpx 0;
padding: 20rpx;
background-color: #ffffff;
border-radius: 16rpx;
box-shadow: 0rpx 4rpx 8rpx rgba(0, 0, 0, 0.1);
.stop-item {
display: flex;
align-items: center;
justify-content: space-
between;
padding: 20rpx 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
&:last-child {
border-bottom: none;
}
.stop-name {
font-size: 32rpx;
color: #fff;
}
.stop-sequence {
font-size: 28rpx;
color: #fff;
}
}
.highlight {
color: #ff9800;
}
}
/* 新增订单相关样式 */
.order-section, .order-list-section {
background-color: #fff;
border-radius: 16rpx;
padding: 30rpx;
margin: 20rpx 0;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
.section-title {
font-size: 32rpx;
font-weight: bold;
color: #333;
margin-bottom: 20rpx;
display: flex;
justify-content: space-
between;
align-items: center;
}
}
.form-item {
margin-bottom: 20rpx;
.label {
display: block;
font-size: 28rpx;
color: #666;
margin-bottom: 10rpx;
}
.input {
width: 100%;
padding: 20rpx;
border: 1rpx solid #ddd;
border-radius: 8rpx;
font-size: 28rpx;
}
}
.submit-btn, .confirm-pay-btn {
background-color: #4a90e2;
color: #fff;
border-radius: 50rpx;
font-size: 30rpx;
margin-top: 20rpx;
}
.order-item {
padding: 20rpx 0;
border-bottom: 1rpx solid #eee;
&:last-child {
border-bottom: none;
}
}
.order-header {
display: flex;
justify-content: space-
between;
margin-bottom: 15rpx;
}
.order-status {
font-size: 26rpx;
padding: 4rpx 12rpx;
border-radius: 20rpx;
&.status-pending {
color: #f39c12;
background-color: #fff4e5;
}
&.status-paid {
color: #2ecc71;
background-color: #e8f8f0;
}
}
.order-actions {
display: flex;
justify-content: flex-end;
margin-top: 20rpx;
button {
margin-left: 20rpx;
font-size: 26rpx;
padding: 10rpx 20rpx;
border-radius: 30rpx;
&.pay-btn {
background-color: #4a90e2;
color: #fff;
}
&.cancel-btn {
background-color: #fff;
color: #666;
border: 1rpx solid #ddd;
}
}
}
.loading {
display: flex;
justify-content: center;
padding: 50rpx 0;
}
.empty {
text-align: center;
padding: 50rpx 0;
color: #999;
}
.pay-popup {
padding: 30rpx;
.pay-amount {
display: block;
font-size: 36rpx;
font-weight: bold;
color: #ff6b6b;
margin: 20rpx 0;
}
.payment-method {
display: flex;
align-items: center;
padding: 20rpx 0;
border-bottom: 1rpx solid #eee;
}
}
</style>
<template>
<view class="buys">
<!-- 新闻列表 -->
<view class="list">
<view class="buysitem" v-for="item in currentBuysList" :key="item.id" @click="toBuysDetail(item.id)">
<slot name="itemSlot" v-bind="item"></slot>
</view>
</view>
</view>
</template>
<script setup>
import {
computed,
ref
} from 'vue';
import {
ip,
getHttp
} from '../../utils/http.js'
//路线列表
const buysList=ref([])
//当前路线列表内容
const currentBuysList=ref([])
//全部路线列表
async function getBuysList() {
const result = await getHttp({
url: '/prod-api/api/bus/line/list'
})
buysList.value = result.data.rows
currentBuysList.value = buysList.value
}
//跳转路线详情页面
const toBuysDetail=(id)=>{
uni.navigateTo({
url:'/pages/Subway/Subway?id='+id
})
}
getBuysList()
</script>
<style lang="s
css">
.buys {
padding: 20rpx;
background-color: #f5f5f5;
}
.list {
display: flex;
flex-direction: column;
gap: 20rpx;
}
.buysitem {
background-color: #fff;
border-radius: 16rpx;
box-shadow: 0rpx 4rpx 8rpx rgba(0, 0, 0, 0.1);
padding: 20rpx;
display: flex;
align-items: center;
justify-content: space-
between;
transition: transform 0.2s;
&:hover {
transform: scale(1.0);
}
.info {
flex: 1;
margin-right: 20rpx;
.title {
font-size: 29rpx;
color: #333;
margin-bottom: 10rpx;
}
.details {
font-size: 26rpx;
color: #666;
text {
display: block;
margin: 5rpx 0;
}
}
}
.price {
font-size: 32rpx;
color: #ff6600;
font-weight: bold;
}
}
</style>
本文详细解释了CSS中边距(margin)和填充(padding)的概念及使用方法。边距是指元素边框与相邻元素之间的距离，而填充则是指元素边框与内容之间的空间。正确理解和运用这两者对于网页布局至关重要。
扫一扫
965
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
