From 92230c9a97dc9ce9df3313d11d26999c04bb6b26 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 15 七月 2025 13:12:48 +0800
Subject: [PATCH] 项目初始化
---
src/pages_template/pages/order/index.vue | 250 ++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 250 insertions(+), 0 deletions(-)
diff --git a/src/pages_template/pages/order/index.vue b/src/pages_template/pages/order/index.vue
new file mode 100644
index 0000000..e5b2e88
--- /dev/null
+++ b/src/pages_template/pages/order/index.vue
@@ -0,0 +1,250 @@
+<script setup>
+import { ref, reactive, onMounted } from 'vue';
+import OrderItem from './OrderItem.vue';
+
+const orderList = ref([[], [], [], []]);
+const dataList = reactive([
+ {
+ id: 1,
+ store: '澶忔棩娴佹槦闄愬畾璐╁崠',
+ deal: '浜ゆ槗鎴愬姛',
+ goodsList: [
+ {
+ goodsUrl: '//img13.360buyimg.com/n7/jfs/t1/103005/7/17719/314825/5e8c19faEb7eed50d/5b81ae4b2f7f3bb7.jpg',
+ title: '銆愬啲鏃ラ檺瀹氥�戠幇璐� 鍘熷垱jk鍒舵湇濂�2020鍐鏂版灏忔竻鏂板鏉捐蒋绯瘺琛ｅ濂楀コ寮�琛煭娆剧櫨鎼棩绯荤敎缇庨',
+ type: '鐏拌壊;M',
+ deliveryTime: '浠樻鍚�30澶╁唴鍙戣揣',
+ price: '348.58',
+ number: 2
+ },
+ {
+ goodsUrl: '//img12.360buyimg.com/n7/jfs/t1/102191/19/9072/330688/5e0af7cfE17698872/c91c00d713bf729a.jpg',
+ title: '銆愯憽钀勮棨銆戠幇璐� 灏忔竻鏂板闄㈤鍒舵湇鏍艰鐧捐ざ瑁欏コ鐭鐧炬惌鏃ョ郴鐢滅編椋庡師鍒沯k鍒舵湇濂�2020鏂版',
+ type: '45cm;S',
+ deliveryTime: '浠樻鍚�30澶╁唴鍙戣揣',
+ price: '135.00',
+ number: 1
+ }
+ ]
+ },
+ {
+ id: 2,
+ store: '姹熷崡鐨潻鍘�',
+ deal: '浜ゆ槗澶辫触',
+ goodsList: [
+ {
+ goodsUrl: '//img14.360buyimg.com/n7/jfs/t1/60319/15/6105/406802/5d43f68aE9f00db8c/0affb7ac46c345e2.jpg',
+ title: '銆愬啲鏃ラ檺瀹氥�戠幇璐� 鍘熷垱jk鍒舵湇濂�2020鍐鏂版灏忔竻鏂板鏉捐蒋绯瘺琛ｅ濂楀コ寮�琛煭娆剧櫨鎼棩绯荤敎缇庨',
+ type: '绮夎壊;M',
+ deliveryTime: '浠樻鍚�7澶╁唴鍙戣揣',
+ price: '128.05',
+ number: 1
+ }
+ ]
+ },
+ {
+ id: 3,
+ store: '涓夋槦鏃楄埌搴�',
+ deal: '浜ゆ槗澶辫触',
+ goodsList: [
+ {
+ goodsUrl: '//img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg',
+ title: '涓夋槦锛圫AMSUNG锛変含鍝佸鐢� UA65RUF70AJXXZ 65鑻卞4K瓒呴珮娓� HDR 浜笢寰仈 鏅鸿兘璇煶 鏁欒偛璧勬簮娑叉櫠鐢佃鏈�',
+ type: '4K锛屽箍鑹插煙',
+ deliveryTime: '淇濊川5骞�',
+ price: '1998',
+ number: 3
+ },
+ {
+ goodsUrl: '//img14.360buyimg.com/n7/jfs/t6007/205/4099529191/294869/ae4e6d4f/595dcf19Ndce3227d.jpg!q90.jpg',
+ title: '缇庣殑(Midea)639鍗� 瀵瑰紑闂ㄥ啺绠� 19鍒嗛挓鎬ラ�熷噣鍛� 涓�绾ц兘鏁堝喎钘忓弻寮�闂ㄦ潃鑿屾櫤鑳藉鐢ㄥ弻鍙橀鑺傝兘 BCD-639WKPZM(E)',
+ type: '瀹归噺澶э紝閫熷喕',
+ deliveryTime: '淇濊川5骞�',
+ price: '2354',
+ number: 1
+ }
+ ]
+ },
+ {
+ id: 4,
+ store: '涓夋槦鏃楄埌搴�',
+ deal: '浜ゆ槗澶辫触',
+ goodsList: [
+ {
+ goodsUrl: '//img10.360buyimg.com/n7/jfs/t22300/31/1505958241/171936/9e201a89/5b2b12ffNe6dbb594.jpg!q90.jpg',
+ title: '娉曞浗杩涘彛绾㈤厭 鎷夎彶锛圠AFITE锛変紶濂囨尝灏斿骞茬孩钁¤悇閰�750ml*6鏁寸瑁�',
+ type: '4K锛屽箍鑹插煙',
+ deliveryTime: '鐝嶈棌10骞村ソ閰�',
+ price: '1543',
+ number: 3
+ },
+ {
+ goodsUrl: '//img10.360buyimg.com/n7/jfs/t1/107598/17/3766/525060/5e143aacE9a94d43c/03573ae60b8bf0ee.jpg',
+ title: '钃濆锛圔LUE GIRL锛夐叿鐖藉暏閰� 娓呭暏 鍘熻杩涘彛鍟ら厭 缃愯 500ml*9鍚� 鏁寸瑁�',
+ type: '涓�鎵�',
+ deliveryTime: '鍙ｆ劅濂�',
+ price: '120',
+ number: 1
+ }
+ ]
+ },
+ {
+ id: 5,
+ store: '涓夋槦鏃楄埌搴�',
+ deal: '浜ゆ槗鎴愬姛',
+ goodsList: [
+ {
+ goodsUrl: '//img12.360buyimg.com/n7/jfs/t1/52408/35/3554/78293/5d12e9cfEfd118ba1/ba5995e62cbd747f.jpg!q90.jpg',
+ title: '浼佷笟寰俊 涓帶浜鸿劯鎸囩汗璇嗗埆鑰冨嫟鏈哄埛鑴告満 鏃犵嚎绛惧埌寮傚湴澶氬簵鎵撳崱鏈篧X108',
+ type: '璇嗗埆鏁堢巼楂�',
+ deliveryTime: '浣跨敤鏂逛究',
+ price: '451',
+ number: 9
+ }
+ ]
+ }
+]);
+const list = reactive([
+ { name: '寰呬粯娆�' },
+ { name: '寰呭彂璐�' },
+ { name: '寰呮敹璐�' },
+ { name: '寰呰瘎浠�', count: 12 }
+]);
+const current = ref(0);
+const swiperCurrent = ref(0);
+const loadStatus = ref(['loadmore', 'loadmore', 'loadmore', 'loadmore']);
+
+onMounted(() => {
+ getOrderList(0);
+ getOrderList(1);
+ getOrderList(3);
+});
+
+// 瑙﹀簳鎳掑姞杞�
+const reachBottom = () => {
+ loadStatus.value.splice(current.value, 1, "loading");
+ setTimeout(() => {
+ getOrderList(current.value);
+ }, 1200);
+};
+
+// 椤甸潰鏁版嵁
+const getOrderList = (idx) => {
+ // 妯℃嫙绗琻涓〉闈㈣幏鍙栨暟鎹�
+ for (let i = 0; i < 5; i++) {
+ let index = Math.floor(Math.random() * dataList.length);
+ let data = JSON.parse(JSON.stringify(dataList[index]));
+ data.id = Math.random().toString(36).substr(2, 9);
+ orderList.value[idx].push(data);
+ }
+ loadStatus.value.splice(current.value, 1, "loadmore");
+};
+
+// tab鏍忓垏鎹�
+const change = ({ index }) => {
+ current.value = index; // 鏇存柊current鍙橀噺
+ swiperCurrent.value = index;
+ getOrderList(index);
+};
+
+const animationfinish = (e) => {
+ const currentIndex = e.detail.current;
+ swiperCurrent.value = currentIndex;
+ current.value = currentIndex; // 灏哻urrent鐨勫�兼纭洿鏂颁负swiper鐨刢urrent
+};
+
+// 鑾峰彇tabs缁勪欢鐨剅ef
+const tabs = ref(null);
+</script>
+
+<template>
+ <view>
+ <view class="wrap">
+ <view class="u-tabs-box">
+ <u-tabs activeColor="#f29100" ref="tabs" :list="list" :current="current" @change="change"
+ :is-scroll="false" swiperWidth="750"></u-tabs>
+ </view>
+ <swiper class="swiper-box" :current="swiperCurrent" @animationfinish="animationfinish">
+ <swiper-item class="swiper-item" v-for="(orderlist, index) in orderList" :key="index">
+ <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom"
+ v-if="orderlist.length !== 0">
+ <view class="page-box">
+ <OrderItem v-for="res in orderlist" :key="res.id" :order="res" />
+ <u-loadmore :status="loadStatus[0]" bgColor="#f2f2f2"></u-loadmore>
+ </view>
+ </scroll-view>
+ <scroll-view scroll-y style="height: 100%;width: 100%;" v-else>
+ <view class="page-box">
+ <view class="centre">
+ <image src="https://cdn.uviewui.com/uview/template/taobao-order.png" mode="aspectFit" class="empty-image">
+ </image>
+ <view class="explain">
+ 鎮ㄨ繕娌℃湁鐩稿叧鐨勮鍗�
+ <view class="tips">鍙互鍘荤湅鐪嬫湁閭ｄ簺鎯充拱鐨�</view>
+ </view>
+ <view class="btn">闅忎究閫涢��</view>
+ </view>
+ </view>
+ </scroll-view>
+ </swiper-item>
+ </swiper>
+ </view>
+ </view>
+</template>
+<style>
+/* #ifndef H5 */
+page {
+ height: 100%;
+ background-color: #f2f2f2;
+}
+
+/* #endif */
+</style>
+
+<style lang="scss" scoped>
+.centre {
+ text-align: center;
+ margin: 200rpx auto;
+ font-size: 32rpx;
+ width: 100%;
+
+ .empty-image {
+ width: 164rpx;
+ height: 164rpx;
+ border-radius: 50%;
+ margin: 0 auto 20rpx;
+ display: block; /* 纭繚鍥剧墖浣滀负鍧楃骇鍏冪礌 */
+ }
+
+ .tips {
+ font-size: 24rpx;
+ color: #999999;
+ margin-top: 20rpx;
+ }
+
+ .btn {
+ margin: 80rpx auto;
+ width: 200rpx;
+ border-radius: 32rpx;
+ line-height: 64rpx;
+ color: #ffffff;
+ font-size: 26rpx;
+ background: linear-gradient(270deg, rgba(249, 116, 90, 1) 0%, rgba(255, 158, 1, 1) 100%);
+ }
+}
+
+.wrap {
+ display: flex;
+ flex-direction: column;
+ height: calc(100vh - var(--window-top));
+ width: 100%;
+}
+
+.swiper-box {
+ flex: 1;
+}
+
+.swiper-item {
+ height: 100%;
+}
+</style>
--
Gitblit v1.9.3