商家端 添加 我的团队 封装订单组件

src/pages.json

@@ -40,6 +40,12 @@
         "navigationBarTitleText": "店铺"
       }
     },
+    {
+      "path": "pages/tabbar/store/myTeam",
+      "style": {
+        "navigationBarTitleText": "我的团队"
+      }
+    },
     {
       "path": "pages/tabbar/store/shopManage",
       "style": {

src/pages/tabbar/order/components/orderItem.vue

@@ -0,0 +1,174 @@
+<template>
+  <view class="">
+    <view class="order__info" v-for="index in 2" :key="index">
+      <view class="order__info--phone">
+        <view>
+          <view style="font-size: 35rpx; margin-bottom: 20rpx">
+            182***4342
+            <text class="tipInfo" style="margin-left: 10rpx">(预留手机)</text>
+          </view>
+          <view class="tipInfo">近90天第16次下单</view>
+        </view>
+        <u-icon name="phone" color="#2979ff" size="28" @click="handlerMakePhone"></u-icon>
+      </view>
+
+      <view class="order__info--pay">
+        <text>顾客待付款</text>
+        <view class="service">
+          <image
+            slot="icon"
+            src="@/static/QR57a.jpg"
+            style="width: 200rpx; height: 200rpx"
+          />
+          <view class="description">
+            <view class="description--title">汽车维修与保养</view>
+            <view class="tipInfo">专业维修保界</view>
+            <view class="description--text">服务描述……</view>
+          </view>
+        </view>
+      </view>
+
+      <view class="order__info--compute">
+        <view class="computeFlex">
+          <view>发票信息</view>
+          <view class="tipInfo">不需要</view>
+        </view>
+        <view class="computeFlex">
+          <view>技术服务费</view>
+          <view class="tipInfo">￥15</view>
+        </view>
+        <view class="computeFlex">
+          <view>本单预计收入</view>
+          <view class="tipInfo" style="color: #DF5F5F;">￥723.7</view>
+        </view>
+      </view>
+
+      <view class="order__info--tip">
+        <view class="tip-l">
+          <view class="tipInfo"> 订单编号：12232964103521日</view>
+          <view class="tipInfo"> 交易快照：发生争议时，可作为判断依据</view>
+          <view class="tipInfo"> 下单时间：12-0318：03</view>
+        </view>
+        <view class="tip-r">
+          <view class="r-btn" v-if="typeStyle == 1" @click="handlerCloseOrder">
+            关闭交易
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default{
+    data(){
+      return{
+
+      }
+    },
+    props:{
+      "typeStyle":{
+        type:Number,
+        default:0
+      }
+    },
+    watch: {
+      typeStyle(newValue,oldValue){
+        console.log('newValue',newValue);
+      }
+    },
+    methods:{
+      // 点击拨打电话
+      handlerMakePhone(){
+        uni.makePhoneCall({
+        	phoneNumber: '114' //仅为示例
+        });
+      },
+      // 删除订单
+      handlerCloseOrder(){
+        uni.showToast({
+        	title: '么的',
+          icon:'none'
+        });
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+.order {
+  &__info {
+    margin: 20rpx 0;
+    background-color: $uni-bg-color;
+    padding: $uni-bg-padding-sm;
+    &--phone {
+      display: flex;
+      justify-content: space-between;
+      padding-bottom: 20rpx;
+      border-bottom: 2rpx solid #ececec;
+    }
+
+    &--pay {
+      margin: 20rpx 0;
+      > text {
+        font-size: 36rpx;
+        color: #333;
+      }
+
+      .service {
+        display: flex;
+        margin-top: 20rpx;
+        .description {
+          margin-left: 20rpx;
+          &--title {
+            font-size: 34rpx;
+            font-weight: 700;
+            margin-bottom: 10rpx;
+          }
+
+          &--text {
+            font-size: 30rpx;
+            color: #333;
+          }
+        }
+      }
+    }
+
+    &--compute {
+      margin-top: 40rpx;
+      padding-bottom: 20rpx;
+      border-bottom: 2rpx solid #ececec;
+      .computeFlex {
+        margin-bottom: 20rpx;
+        display: flex;
+        justify-content: space-between;
+      }
+    }
+
+    &--tip {
+      margin-top: 30rpx;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .tip-l{
+
+      }
+      .tip-r{
+        .r-btn{
+          padding: 10rpx 20rpx;
+          border-radius: 20rpx;
+          border: 2rpx solid #FF9480;
+          color: #FF9480;
+          font-size:26rpx;
+          background-color: #fff;
+        }
+      }
+    }
+  }
+}
+
+.tipInfo {
+  font-size: 24rpx;
+  color: #666;
+}
+</style>

src/pages/tabbar/order/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: yizhiyang
  * @Date: 2023-11-30 09:40:24
- * @Description: 
+ * @Description:
 -->
 <template>
   <view>
@@ -25,63 +25,18 @@
             marginBottom: '15rpx',
           }"
           itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
+          @click="handlerChangeItem"
         ></u-tabs>
       </view>
 
-      <view class="order__info" v-for="index in 4" :key="index">
-        <view class="order__info--phone">
-          <view>
-            <view style="font-size: 35rpx; margin-bottom: 20rpx">
-              182***4342
-              <text class="tipInfo" style="margin-left: 10rpx">(预留手机)</text>
-            </view>
-            <view class="tipInfo">近90天第16次下单</view>
-          </view>
-          <u-icon name="phone" color="#2979ff" size="28"></u-icon>
-        </view>
+      <orderItem :typeStyle.sync='typeStyle'></orderItem>
 
-        <view class="order__info--pay">
-          <text>顾客待付款</text>
-          <view class="service">
-            <image
-              slot="icon"
-              src="@/static/QR57a.jpg"
-              style="width: 200rpx; height: 200rpx"
-            />
-            <view class="description">
-              <view class="description--title">汽车维修与保养</view>
-              <view class="tipInfo">专业维修保界</view>
-              <view class="description--text">服务描述……</view>
-            </view>
-          </view>
-        </view>
-
-        <view class="order__info--compute">
-          <view class="computeFlex">
-            <view>发票信息</view>
-            <view class="tipInfo">不需要</view>
-          </view>
-          <view class="computeFlex">
-            <view>技术服务费</view>
-            <view class="tipInfo">￥15</view>
-          </view>
-          <view class="computeFlex">
-            <view>本单预计收入</view>
-            <view class="tipInfo">￥723.7</view>
-          </view>
-        </view>
-
-        <view class="order__info--tip">
-          <view class="tipInfo"> 订单编号：12232964103521日</view>
-          <view class="tipInfo"> 交易快照：发生争议时，可作为判断依据</view>
-          <view class="tipInfo"> 下单时间：12-0318：03</view>
-        </view>
-      </view>
     </view>
   </view>
 </template>
 
 <script>
+  import orderItem from "@/pages/tabbar/order/components/orderItem.vue"
 export default {
   data() {
     return {
@@ -92,71 +47,21 @@ export default {
         { id: '4', name: '退款' },
         { id: '5', name: '已完成' },
       ],
+      typeStyle:0
     };
   },
+  components:{orderItem},
+  methods:{
+    // 点击切换顶部导航栏
+    handlerChangeItem(item){
+      this.typeStyle = item.index
+    }
+  }
 };
 </script>
-
 <style lang="scss" scoped>
-.order {
-  min-height: 100vh;
-  background-color: $uni-bg-color-page;
-  &__info {
-    margin: 20rpx 0;
-    background-color: $uni-bg-color;
-    padding: $uni-bg-padding-sm;
-    &--phone {
-      display: flex;
-      justify-content: space-between;
-      padding-bottom: 20rpx;
-      border-bottom: 2rpx solid #ececec;
-    }
-
-    &--pay {
-      margin: 20rpx 0;
-      > text {
-        font-size: 36rpx;
-        color: #333;
-      }
-
-      .service {
-        display: flex;
-        margin-top: 20rpx;
-        .description {
-          margin-left: 20rpx;
-          &--title {
-            font-size: 34rpx;
-            font-weight: 700;
-            margin-bottom: 10rpx;
-          }
-
-          &--text {
-            font-size: 30rpx;
-            color: #333;
-          }
-        }
-      }
-    }
-
-    &--compute {
-      margin-top: 40rpx;
-      padding-bottom: 20rpx;
-      border-bottom: 2rpx solid #ececec;
-      .computeFlex {
-        margin-bottom: 20rpx;
-        display: flex;
-        justify-content: space-between;
-      }
-    }
-
-    &--tip {
-      margin-top: 30rpx;
-    }
+  .order {
+    min-height: 100vh;
+    background-color: $uni-bg-color-page;
   }
-}
-
-.tipInfo {
-  font-size: 24rpx;
-  color: #666;
-}
 </style>

src/pages/tabbar/store/index.vue

@@ -132,6 +132,7 @@ export default {
   methods:{
     // 点击跳转
     handlerSkip(item,index){
+      console.log('index',index);
       switch(index){
         case 0:
           uni.navigateTo({
@@ -143,6 +144,11 @@ export default {
             url:'/pages/tabbar/store/evaluateManagement'
           })
         break;
+        case 5:
+          uni.navigateTo({
+            url:'/pages/tabbar/store/myTeam'
+          })
+        break;
       }
     }
   }

src/pages/tabbar/store/myTeam.vue

@@ -0,0 +1,116 @@
+<template>
+  <view class="container">
+    <view class="top-img-box">
+      <img class="top-img" src="@/static/QR57a.jpg" alt="" />
+      <view class="top-name"> My Team </view>
+    </view>
+
+    <view class="group-item-box">
+      <view class="item-top">
+        <view class="top-l">团队成员</view>
+        <view class="top-r">></view>
+      </view>
+      <view class="item-content">
+        <img
+          class="item-img"
+          :key="item"
+          src="@/static/QR57a.jpg"
+          alt=""
+          v-for="item of 3"
+        />
+      </view>
+    </view>
+
+    <view class="group-item-box">
+      <view class="item-top">
+        <view class="top-l">最近动态</view>
+        <view class="top-r">></view>
+      </view>
+      <view class="item-content dynamic-img-box">
+        <img class="dynamic-img" src="@/static/QR57a.jpg" alt="" />
+      </view>
+    </view>
+
+    <view class="group-item-box">
+      <view class="item-top">
+        <view class="top-l">团队任务</view>
+        <view class="top-r">></view>
+      </view>
+      <view class="item-content">
+        <img
+          class="item-img"
+          src="@/static/QR57a.jpg"
+          alt=""
+          :key="item"
+          v-for="item of 3"
+        />
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.container {
+  padding: 20rpx 10rpx 50rpx;
+
+  .top-img-box {
+    text-align: center;
+
+    .top-img {
+      width: 160rpx;
+      height: 160rpx;
+      border-radius: 100rpx;
+    }
+
+    .top-name {
+      color: #6b7280;
+      font-weight: bold;
+      font-size: 32rpx;
+      margin-top: 20rpx;
+    }
+  }
+
+  .group-item-box {
+    padding: 0 20rpx;
+    margin-top: 60rpx;
+
+    .item-top {
+      display: flex;
+      justify-content: space-between;
+
+      .top-l,
+      .top-r {
+        color: #6b7280;
+        font-weight: bold;
+        font-size: 32rpx;
+        margin-top: 20rpx;
+      }
+    }
+
+    .item-content {
+      display: flex;
+
+      .item-img {
+        width: 160rpx;
+        height: 160rpx;
+        border-radius: 100rpx;
+        margin: 60rpx 20rpx 0 0;
+      }
+
+      .dynamic-img {
+        width: 100%;
+        height: 500rpx;
+        margin-top: 60rpx;
+      }
+    }
+  }
+}
+</style>