add js logic

src/components/tab_bar.vue

@@ -1,17 +1,34 @@
 <script setup>
-import { reactive, ref } from "vue";
-const emits = defineEmits([ 'click:tab' ]);
+import { reactive, ref, computed } from "vue";
+const emits = defineEmits([ 'click:tab', 'update:idx' ]);
+
 const props = defineProps({
-    tabs: { default: [ {a: 1}, { a: 2} ] },
+    tabs: { default: [] },
+    idx: { default: 0 }
+});
+
+const tabIdx = computed({
+    get: () => props.idx,
+    set: val => emits('update:idx', val)
 });
-const tabIdx = ref(0);
+
+function tabChange(ele, idx){
+    tabIdx.value  = idx;
+    emits('click:tab', { ele, idx });
+}
 
 </script>
 
 <template>
 	<view class="tab-bar">
-        <view class="tb-item" v-for="(e, i) in tabs" :key="i" :class="{'tb-active': tabIdx === i}" @click="tabIdx = i">
-            <view class="ti-txt">889</view>
+        <view 
+            class="tb-item" 
+            v-for="(e, i) in tabs" 
+            :key="i" 
+            :class="{'tb-active': tabIdx === i}"
+            @click="tabChange(e, i)"
+        >
+            <view class="ti-txt">{{ e.name || '-' }}</view>
         </view>
 	</view>
 </template>

src/pages/member/index.vue

@@ -1,20 +1,30 @@
 <script setup>
 import { onLoad } from '@dcloudio/uni-app';
 import { reactive, ref } from 'vue';
+import { routeTo } from "@/utils/polish";
 
 onLoad(() => {
     
 });
 
+function toLogin(){
+    routeTo('/subpackage/authorize/pages/index');
+}
+
 </script>
 
 <template>
     <view class="member-index">
         <view class="mi-header">
-            <image class="mh-avatar"></image>
-            <view class="mh-info">
-                <view class="mi-name">抖音用户</view>
-                <view class="mi-num">17688184874</view>
+            <view class="mh-user" v-if="false">
+                <image class="mh-avatar"></image>
+                <view class="mh-info">
+                    <view class="mi-name">抖音用户</view>
+                    <view class="mi-num">17688184874</view>
+                </view>
+            </view>
+            <view class="mh-unlogin" v-else>
+                <view class="mu-btn" @click="toLogin">登录</view>
             </view>
         </view>
         <view class="mi-section">
@@ -36,28 +46,41 @@ onLoad(() => {
 
     }
     .mi-header{
-        padding: 40upx 48upx 48upx;
         background: $mColor;
-        @include ctf;
-        .mh-avatar{
-            flex-shrink: 0;
-            flex-grow: 0;
-            margin-right: 24upx;
-            width: 128upx;
-            height: 128upx;
-            border-radius: 50%;
-            background-color: #fff;
-        }
-        .mh-info{
-            padding-top: 8upx;
-            .mi-name{
-                @include flcw(36upx, 50upx, #fff, 500);
-                @include tHide;
+        .mh-user{
+            padding: 40upx 48upx 48upx;
+            @include ctf;
+            .mh-avatar{
+                flex-shrink: 0;
+                flex-grow: 0;
+                margin-right: 24upx;
+                width: 128upx;
+                height: 128upx;
+                border-radius: 50%;
+                background-color: #fff;
             }
-            .mi-num{
-                margin-top: 24upx;
-                @include flcw(28upx, 40upx, #fff);
-                @include tHide;
+            .mh-info{
+                padding-top: 8upx;
+                .mi-name{
+                    @include flcw(36upx, 50upx, #fff, 500);
+                    @include tHide;
+                }
+                .mi-num{
+                    margin-top: 24upx;
+                    @include flcw(28upx, 40upx, #fff);
+                    @include tHide;
+                }
+            }
+        }
+        .mh-unlogin{
+            min-height: 216upx;
+            @include ctf(center);
+            .mu-btn{
+                width: 240rpx;
+				text-align: center;
+				border-radius: 46rpx;
+                background-color: #FFF;
+                @include flcw(32upx, 88upx, $mColor, 500);
             }
         }
     }

src/pages/order/list.vue

@@ -2,6 +2,11 @@
 import { onLoad } from '@dcloudio/uni-app';
 import tabBar from "@/components/tab_bar.vue";
 import { routeTo } from '@/utils/polish';
+import { reactive, ref } from 'vue';
+const tab = reactive({
+    list: [ {name: '全部'}, {name: '已核销'}, {name: '已退款'}, ],
+    idx: 0
+});
 onLoad(() => {
     
 });
@@ -15,7 +20,7 @@ function toOrderDetail(){
 <template>
 	<view class="order-list">
         <view class="ol-header">
-            <tab-bar></tab-bar>
+            <tab-bar :tabs="tab.list" v-model:idx="tab.idx"></tab-bar>
         </view>
         <view class="ol-list-content">
             <view class="ol-item" v-for="i in 10" :key="i" @click="toOrderDetail">