小猪同学 提交我的模块

src/components/service/index.vue

@@ -1,29 +1,18 @@
 <template>
   <view>
     <view class="sort">
-      <u-tabs
-        :list="list1"
-        @click="click"
-        lineWidth="30"
-        lineColor="#5992bb"
-        :activeStyle="{
+      <!-- <u-tabs :list="list1" @click="click" lineWidth="30" lineColor="#5992bb" :activeStyle="{
           color: '#5992bb',
           fontWeight: 'bold',
-        }"
-        :inactiveStyle="{
+        }" :inactiveStyle="{
           color: '#000',
-        }"
-        itemStyle="padding-left: 15px; padding-right: 15px; height: 40px;"
-      />
+        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 40px;" /> -->
+
       <view class="list">
-        <Image
-          src="https://cdn.uviewui.com/uview/album/1.jpg"
-          @tap="$Router.push('/pages/business/service/index')"
-        />
+        <!-- <Image src="../../static/logo.png" @tap="$Router.push('/pages/business/service/index')" /> -->
+        <img class="img" src="@/static/logo.png" alt="">
         <view>
-          <view class="item-text"
-            >【养车】标题标题标题标题标题标题标题标题……</view
-          >
+          <view class="item-text">途虎养车洗车机（贵州省贵阳市云岩区）</view>
           <view class="item-flex">
             <view class="star">
               <u-rate :count="count" v-model="value" :size="14" />
@@ -33,9 +22,12 @@
             <view>989单</view>
           </view>
           <view class="list-item">
+            <view class="item-l">保安中心区美容洗车</view>
+            <view class="item-r">2.7KM</view>
+          </view>
+          <!-- <view class="list-item">
             <view>
-              <view class="price"
-                >券后价
+              <view class="price">券后价
                 <text class="price-item">￥</text>
                 <text class="price-count">19</text>
               </view>
@@ -46,22 +38,14 @@
             </view>
             <view class="appoint">
               <text class="appoint-item" @click="show = true">预约</text>
-              <text class="Buy" @tap="$Router.push('/pages/business/buy/index')"
-                >购买</text
-              >
+              <text class="Buy" @tap="$Router.push('/pages/business/buy/index')">购买</text>
             </view>
-          </view>
+          </view> -->
         </view>
       </view>
 
       <!-- 预约弹出框的实现 -->
-      <u-popup
-        :show="show"
-        mode="center"
-        @close="close"
-        @open="open"
-        :round="20"
-      >
+      <u-popup :show="show" mode="center" @close="close" @open="open" :round="20">
         <view class="popupContent">
           <text class="popupItem">预约服务</text>
           <view class="server">
@@ -81,154 +65,168 @@
 </template>
 
 <script>
-export default {
-  data() {
-    return {
-      show: false,
-      showDate: false,
-      value1: Number(new Date()),
-    };
-  },
-  methods: {
-    click(item) {
-      console.log('item', item);
-    },
-    open() {
-      // console.log('open');
+  export default {
+    data() {
+      return {
+        show: false,
+        showDate: false,
+        value1: Number(new Date()),
+        count:2,
+        value:10
+      };
     },
-    close() {
-      this.show = false;
-      // console.log('close');
+    methods: {
+      click(item) {
+        console.log('item', item);
+      },
+      open() {
+        // console.log('open');
+      },
+      close() {
+        this.show = false;
+        // console.log('close');
+      },
     },
-  },
-};
+  };
 </script>
 
 <style lang="scss" scoped>
-/*商家服务分类的是实现 */
-.sort {
-  background-color: #fff;
-
-  .list {
-    height: 250rpx;
-    background-color: #fff;
-    padding: 0 20rpx;
-    margin-bottom: 20rpx;
-    display: flex;
-
-    Image {
-      width: 180px;
-      height: calc(100% - 20rpx);
-      margin: 10rpx 20rpx 10rpx 0;
-    }
+  /*商家服务分类的是实现 */
 
-    .item-text {
-      font-weight: bold;
-      margin: 10rpx 0 10rpx;
-      color: #333;
-    }
+  .sort {
+    background-color: #EFEFEF;
 
-    .item-flex {
+    .list {
+      height: 250rpx;
+      background-color: #fff;
+      padding:  20rpx;
+      margin-bottom: 20rpx;
       display: flex;
-      justify-content: space-between;
-      font-size: 28rpx;
-      margin: 0 20rpx 10rpx 0;
-      color: #0d0d0d66;
-
-      .star {
-        display: flex;
-
-        .line {
-          margin-left: 16rpx;
-          margin-top: 5rpx;
-          font-size: 22rpx;
-        }
-
-        .points {
-          color: #ff4b04;
-          font-size: 22rpx;
-          margin-top: 6rpx;
-          margin-left: 10rpx;
-        }
+      .img {
+        width: 180px;
+        height: calc(100% - 20rpx);
+        margin: 10rpx 20rpx 10rpx 0;
       }
-    }
-
-    .list-item {
-      display: flex;
-      justify-content: space-between;
 
-      .price {
-        font-size: 32rpx;
+      .item-text {
         font-weight: bold;
-        color: #fa3534;
-
-        .price-item {
-          font-size: 24rpx;
-          margin-left: 10rpx;
-        }
-
-        .price-count {
-          font-size: 44rpx;
-        }
+        margin: 10rpx 0 10rpx;
+        color: #333;
       }
 
-      .gate-rate {
-        color: #c9c9c9;
-        font-size: 26rpx;
-        margin: 16rpx 0 0 40rpx;
-
-        .gate-rate-item {
-          text-decoration: line-through;
+      .item-flex {
+        display: flex;
+        justify-content: space-between;
+        font-size: 28rpx;
+        margin: 0 20rpx 10rpx 0;
+        color: #0d0d0d66;
+
+        .star {
+          display: flex;
+
+          .line {
+            margin-left: 16rpx;
+            margin-top: 5rpx;
+            font-size: 22rpx;
+          }
+
+          .points {
+            color: #ff4b04;
+            font-size: 22rpx;
+            margin-top: 6rpx;
+            margin-left: 10rpx;
+          }
         }
       }
 
-      .appoint {
-        width: 80px;
-        height: 32px;
+      .list-item{
         display: flex;
-        margin-top: 20px;
-        font-size: 14px;
-
-        .appoint-item {
-          width: 40px;
-          height: 32px;
-          line-height: 32px;
-          text-align: center;
-          display: inline-block;
-          box-sizing: border-box;
-          border-radius: 16px 0 0 16px;
-          border: 1px solid #ec5729;
+        justify-content: space-between;
+        margin-top: 40rpx;
+        .item-l{
+          color: #CFCFCF;
         }
-
-        .Buy {
-          width: 40px;
-          height: 32px;
-          color: #fff;
-          line-height: 32px;
-          text-align: center;
-          display: inline-block;
-          border-radius: 0 16px 16px 0;
-          background-color: #ec5729;
+        .item-r{
+          color: #252525;
         }
       }
+
+      // .list-item {
+      //   display: flex;
+      //   justify-content: space-between;
+
+      //   .price {
+      //     font-size: 32rpx;
+      //     font-weight: bold;
+      //     color: #fa3534;
+
+      //     .price-item {
+      //       font-size: 24rpx;
+      //       margin-left: 10rpx;
+      //     }
+
+      //     .price-count {
+      //       font-size: 44rpx;
+      //     }
+      //   }
+
+      //   .gate-rate {
+      //     color: #c9c9c9;
+      //     font-size: 26rpx;
+      //     margin: 16rpx 0 0 40rpx;
+
+      //     .gate-rate-item {
+      //       text-decoration: line-through;
+      //     }
+      //   }
+
+      //   .appoint {
+      //     width: 80px;
+      //     height: 32px;
+      //     display: flex;
+      //     margin-top: 20px;
+      //     font-size: 14px;
+
+      //     .appoint-item {
+      //       width: 40px;
+      //       height: 32px;
+      //       line-height: 32px;
+      //       text-align: center;
+      //       display: inline-block;
+      //       box-sizing: border-box;
+      //       border-radius: 16px 0 0 16px;
+      //       border: 1px solid #ec5729;
+      //     }
+
+      //     .Buy {
+      //       width: 40px;
+      //       height: 32px;
+      //       color: #fff;
+      //       line-height: 32px;
+      //       text-align: center;
+      //       display: inline-block;
+      //       border-radius: 0 16px 16px 0;
+      //       background-color: #ec5729;
+      //     }
+      //   }
+      // }
     }
   }
-}
-
-/* 弹框的样式 */
-.popupContent {
-  width: 600rpx;
-  height: 400rpx;
-  padding: 30rpx;
-  box-sizing: border-box;
-
-  .popupItem {
-    font-size: 34rpx;
-    font-weight: bold;
-  }
 
-  .server {
-    margin: 20rpx 0 20rpx 30rpx;
+  /* 弹框的样式 */
+  .popupContent {
+    width: 600rpx;
+    height: 400rpx;
+    padding: 30rpx;
+    box-sizing: border-box;
+
+    .popupItem {
+      font-size: 34rpx;
+      font-weight: bold;
+    }
+
+    .server {
+      margin: 20rpx 0 20rpx 30rpx;
+    }
   }
-}
 </style>

src/pages.json

@@ -109,6 +109,36 @@
           "style": {
             "navigationBarTitleText": "我的收藏"
           }
+        },
+        {
+          "path": "inquiry/index",
+          "style": {
+            "navigationBarTitleText": "询价"
+          }
+        },
+        {
+          "path": "mygroup/index",
+          "style": {
+            "navigationBarTitleText": "我的团队"
+          }
+        },
+        {
+          "path": "privacypolicy/index",
+          "style": {
+            "navigationBarTitleText": "隐私条款"
+          }
+        },
+        {
+          "path": "servicecenter/index",
+          "style": {
+            "navigationBarTitleText": "联系客服"
+          }
+        },
+        {
+          "path": "aboutmy/index",
+          "style": {
+            "navigationBarTitleText": "关于"
+          }
         },
         {
           "path": "appoint/index",

src/pages/business/service/detail.vue

@@ -25,7 +25,7 @@
       <!-- 优惠券 -->
       <view class="coupon">
         <view class="coupon-flex">
-          <view class="coupon-item"> <tex class="text">￥</tex>5 </view>
+          <view class="coupon-item"> <text class="text">￥</text>5 </view>
           <view class="keep">
             <view>养车/用车品类新用户专享</view>
             <view>养车用车服务通用</view>
@@ -38,7 +38,7 @@
       </view>
       <view class="coupon">
         <view class="coupon-flex">
-          <view class="coupon-item"> <tex class="text">￥</tex>5 </view>
+          <view class="coupon-item"> <text class="text">￥</text>5 </view>
           <view class="keep">
             <view>养车/用车品类新用户专享</view>
             <view>养车用车服务通用</view>

src/pages/tabbar/mine/index.vue

@@ -2,10 +2,7 @@
   <view class="container">
     <view class="head-wrap">
       <view class="content">
-        <view
-          class="avatar-wrap"
-          @tap="$Router.push('/pages/user/personalCenter/index')"
-        >
+        <view class="avatar-wrap" @tap="$Router.push('/pages/user/personalCenter/index')">
           <u-avatar :src="user_info.avatar" size="80"></u-avatar>
         </view>
         <view>
@@ -13,21 +10,13 @@
           <view class="user-base" v-if="user_info.nickname">
             <view class="user-nickname">{{ user_info.nickname }}</view>
             <view class="btn-wrap">
-              <view
-                class="btn-content"
-                @tap="$Router.push('/pages/user/settings/index')"
-                >设置</view
-              >
+              <view class="btn-content" @tap="$Router.push('/pages/user/settings/index')">设置</view>
               <view class="btn-content">认证</view>
             </view>
           </view>
 
           <!-- 未登录 -->
-          <view
-            class="clickLogin"
-            v-else
-            @tap="$Router.push('/pages/login/index')"
-            >点击登录/注册
+          <view class="clickLogin" v-else @tap="$Router.push('/pages/login/index')">点击登录/注册
           </view>
         </view>
       </view>
@@ -35,17 +24,8 @@
       <!-- 收藏 -->
       <view class="Collect">
         <u-grid :border="false" col="4">
-          <u-grid-item
-            v-for="(listItem, listIndex) in list1"
-            :key="listIndex"
-            @tap="$Router.push(listItem.url)"
-          >
-            <u-icon
-              :customStyle="{ paddingTop: 20 + 'rpx' }"
-              :name="listItem.name"
-              :size="24"
-              color="#fff"
-            />
+          <u-grid-item v-for="(listItem, listIndex) in list1" :key="listIndex" @tap="$Router.push(listItem.url)">
+            <u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="listItem.name" :size="24" color="#fff" />
             <text class="grid-text">{{ listItem.title }}</text>
           </u-grid-item>
         </u-grid>
@@ -59,16 +39,9 @@
       <view class="order-out-box">
         <view class="order-inner-box">
           <u-grid :border="false" col="4" style="background-color: #fff">
-            <u-grid-item
-              v-for="(listItem, listIndex) in list2"
-              :key="listIndex"
-            >
-              <u-icon
-                :customStyle="{ paddingTop: 20 + 'rpx' }"
-                :name="listItem.name"
-                :size="34"
-                @tap="gotoOrder(listItem)"
-              ></u-icon>
+            <u-grid-item v-for="(listItem, listIndex) in list2" :key="listIndex">
+              <u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="listItem.name" :size="34"
+                @tap="gotoOrder(listItem)"></u-icon>
               <text class="grid-text">{{ listItem.title }}</text>
             </u-grid-item>
           </u-grid>
@@ -85,10 +58,7 @@
         </view>
         <view class="income-content">
           <u-grid :border="false" col="4" bgColor="#fff">
-            <u-grid-item
-              v-for="(listItem, listIndex) in incomeList"
-              :key="listIndex"
-            >
+            <u-grid-item v-for="(listItem, listIndex) in incomeList" :key="listIndex">
               <view class="num-box">{{ listItem.num }}元</view>
               <view class="num-title">{{ listItem.title }}</view>
             </u-grid-item>
@@ -99,268 +69,234 @@
 
     <!-- 预约列表 -->
     <view class="appointList">
-      <u-cell
-        icon="setting-fill"
-        title="预约列表"
-        isLink
-        url="/pages/user/appoint/index"
-      />
+      <u-cell icon="setting-fill" title="预约列表" isLink url="/pages/user/appoint/index" />
     </view>
 
     <view class="other-out-box">
       <view class="other-inner-box">
         <u-cell-group :border="false">
-          <u-cell
-            size="large"
-            :border="false"
-            icon="setting-fill"
-            title="我的团队"
-            isLink
-            url=""
-          ></u-cell>
-          <u-cell
-            size="large"
-            :border="false"
-            icon="setting-fill"
-            title="关于我们"
-            isLink
-            url=""
-          ></u-cell>
-          <u-cell
-            size="large"
-            :border="false"
-            icon="setting-fill"
-            title="隐私条款"
-            isLink
-            url=""
-          ></u-cell>
-          <u-cell
-            size="large"
-            :border="false"
-            icon="setting-fill"
-            title="客服中心"
-            isLink
-            url=""
-          ></u-cell>
+          <u-cell size="large" :border="false" icon="setting-fill" title="我的团队" isLink url="" @tap="$Router.push('/pages/user/mygroup/index')"></u-cell>
+          <u-cell size="large" :border="false" icon="setting-fill" title="关于我们" isLink url="" @tap="$Router.push('/pages/user/aboutmy/index')"></u-cell>
+          <u-cell size="large" :border="false" icon="setting-fill" title="隐私条款" isLink url="" @tap="$Router.push('/pages/user/privacypolicy/index')"></u-cell>
+          <u-cell size="large" :border="false" icon="setting-fill" title="客服中心" isLink url="" @tap="$Router.push('/pages/user/servicecenter/index')"></u-cell>
         </u-cell-group>
       </view>
     </view>
   </view>
 </template>
 <script>
-import { mapGetters } from 'vuex';
+  import {
+    mapGetters
+  } from 'vuex';
 
-export default {
-  data() {
-    return {
-      list1: [
-        {
-          name: 'photo',
-          title: '收藏',
-          url: '/pages/user/collect/list',
-        },
-        {
-          name: 'lock',
-          title: '积分',
-          url: '/pages/user/score/index',
-        },
-        {
-          name: 'star',
-          title: '询价记录',
-          url: '/pages/user/inquiry/index',
-        },
-        {
-          name: 'hourglass',
-          title: '优惠券',
-          url: '/pages/user/coupon/index',
-        },
-      ],
-      list2: [
-        {
-          name: 'photo',
-          title: '我的订单',
-        },
-        {
-          name: 'lock',
-          title: '待付款',
-          order: true,
-        },
-        {
-          name: 'star',
-          title: '已完成',
-        },
-        {
-          name: 'hourglass',
-          title: '待评价',
-        },
-      ],
-      incomeList: [
-        {
-          num: '0.00',
-          title: '总收益',
-        },
-        {
-          num: '0.00',
-          title: '本月收益',
-        },
-        {
-          num: '0.00',
-          title: '本周收益',
-        },
-        {
-          num: '0.00',
-          title: '可提现',
-        },
-      ],
-    };
-  },
+  export default {
+    data() {
+      return {
+        list1: [{
+            name: 'photo',
+            title: '收藏',
+            url: '/pages/user/collect/list',
+          },
+          {
+            name: 'lock',
+            title: '积分',
+            url: '/pages/user/score/index',
+          },
+          {
+            name: 'star',
+            title: '询价记录',
+            url: '/pages/user/inquiry/index',
+          },
+          {
+            name: 'hourglass',
+            title: '优惠券',
+            url: '/pages/user/coupon/index',
+          },
+        ],
+        list2: [{
+            name: 'photo',
+            title: '我的订单',
+          },
+          {
+            name: 'lock',
+            title: '待付款',
+            order: true,
+          },
+          {
+            name: 'star',
+            title: '已完成',
+          },
+          {
+            name: 'hourglass',
+            title: '待评价',
+          },
+        ],
+        incomeList: [{
+            num: '0.00',
+            title: '总收益',
+          },
+          {
+            num: '0.00',
+            title: '本月收益',
+          },
+          {
+            num: '0.00',
+            title: '本周收益',
+          },
+          {
+            num: '0.00',
+            title: '可提现',
+          },
+        ],
+      };
+    },
 
-  computed: {
-    ...mapGetters(['user_info']),
-  },
+    computed: {
+      ...mapGetters(['user_info']),
+    },
 
-  methods: {
-    gotoOrder(item) {
-      if (item.order) {
-        this.$Router.push('/pages/order/order');
-      }
+    methods: {
+      gotoOrder(item) {
+        if (item.order) {
+          this.$Router.push('/pages/order/order');
+        }
+      },
     },
-  },
-};
+  };
 </script>
 <style lang="scss" scoped>
-.container {
-  padding-top: 5px;
-  min-height: 100vh;
-  background-color: #efefef;
-}
-
-/* 顶部登录 */
-.head-wrap {
-  padding-top: 5px;
-  margin-top: 5px;
-  background-color: #347caf;
-  height: 390rpx;
-
-  .content {
-    display: flex;
-    padding: 38rpx 0 0 36rpx;
-    box-sizing: border-box;
-
-    .clickLogin {
-      font-size: 48rpx;
-      color: #ffffff;
-      margin-top: 40rpx;
-      margin-left: 20rpx;
-    }
+  .container {
+    padding-top: 5px;
+    min-height: 100vh;
+    background-color: #efefef;
+  }
 
-    .avatar-wrap {
-      display: inline-block;
-    }
+  /* 顶部登录 */
+  .head-wrap {
+    padding-top: 5px;
+    margin-top: 5px;
+    background-color: #347caf;
+    height: 390rpx;
 
-    .user-base {
-      margin-left: 10rpx;
-      vertical-align: middle;
+    .content {
       display: flex;
-      flex-direction: column;
-      justify-content: space-evenly;
+      padding: 38rpx 0 0 36rpx;
+      box-sizing: border-box;
 
-      .user-nickname {
-        margin-top: 20rpx;
-        font-size: 40rpx;
+      .clickLogin {
+        font-size: 48rpx;
         color: #ffffff;
+        margin-top: 40rpx;
+        margin-left: 20rpx;
+      }
+
+      .avatar-wrap {
+        display: inline-block;
       }
 
-      .btn-wrap {
-        width: 160rpx;
-        margin-top: 20rpx;
+      .user-base {
+        margin-left: 10rpx;
+        vertical-align: middle;
         display: flex;
-        justify-content: space-between;
+        flex-direction: column;
+        justify-content: space-evenly;
+
+        .user-nickname {
+          margin-top: 20rpx;
+          font-size: 40rpx;
+          color: #ffffff;
+        }
+
+        .btn-wrap {
+          width: 160rpx;
+          margin-top: 20rpx;
+          display: flex;
+          justify-content: space-between;
 
-        .btn-content {
-          font-size: 24rpx;
-          padding: 0 16rpx;
-          border-radius: 16rpx;
-          background-color: #ffffff;
+          .btn-content {
+            font-size: 24rpx;
+            padding: 0 16rpx;
+            border-radius: 16rpx;
+            background-color: #ffffff;
+          }
         }
       }
     }
-  }
 
-  .Collect {
-    margin-top: 10rpx;
+    .Collect {
+      margin-top: 10rpx;
+
+      // 宫格颜色
+      .grid-text {
+        font-size: 30rpx;
+        color: #fff;
+        margin-top: 5rpx;
+        box-sizing: border-box;
+      }
+    }
 
-    // 宫格颜色
-    .grid-text {
-      font-size: 30rpx;
-      color: #fff;
-      margin-top: 5rpx;
+    .order-out-box {
+      margin-top: 30rpx;
+      padding: 10rpx 16rpx;
       box-sizing: border-box;
+
+      .order-inner-box {
+        font-size: 30rpx;
+        padding-bottom: 30rpx;
+        background-color: $uni-bg-color;
+        border-radius: 10rpx;
+      }
     }
   }
 
-  .order-out-box {
-    margin-top: 30rpx;
+  .income-out-box {
+    margin-top: 110rpx;
     padding: 10rpx 16rpx;
     box-sizing: border-box;
 
-    .order-inner-box {
-      font-size: 30rpx;
-      padding-bottom: 30rpx;
+    .income-inner-box {
+      padding: 20rpx;
       background-color: $uni-bg-color;
-      border-radius: 10rpx;
-    }
-  }
-}
 
-.income-out-box {
-  margin-top: 110rpx;
-  padding: 10rpx 16rpx;
-  box-sizing: border-box;
-
-  .income-inner-box {
-    padding: 20rpx;
-    background-color: $uni-bg-color;
-
-    .income-head {
-      display: flex;
-      justify-content: space-between;
+      .income-head {
+        display: flex;
+        justify-content: space-between;
 
-      .my-income {
-        color: $uni-color-primary;
-        font-size: 32rpx;
-        font-weight: 600;
+        .my-income {
+          color: $uni-color-primary;
+          font-size: 32rpx;
+          font-weight: 600;
+        }
       }
-    }
 
-    .income-content {
-      .num-box {
-        padding: 20rpx 0;
-        font-size: 36rpx;
-        font-weight: 600;
-        color: $uni-text-color;
-      }
+      .income-content {
+        .num-box {
+          padding: 20rpx 0;
+          font-size: 36rpx;
+          font-weight: 600;
+          color: $uni-text-color;
+        }
 
-      .num-title {
-        font-size: 28rpx;
-        color: $uni-text-color-grey;
+        .num-title {
+          font-size: 28rpx;
+          color: $uni-text-color-grey;
+        }
       }
     }
   }
-}
 
-.other-out-box {
-  margin-top: 10rpx;
-  padding: 20rpx 16rpx;
-  box-sizing: border-box;
+  .other-out-box {
+    margin-top: 10rpx;
+    padding: 20rpx 16rpx;
+    box-sizing: border-box;
 
-  .other-inner-box {
-    background-color: $uni-bg-color;
+    .other-inner-box {
+      background-color: $uni-bg-color;
+    }
   }
-}
 
-.appointList {
-  background-color: #fff;
-  margin: 10rpx 16rpx 0 16rpx;
-}
+  .appointList {
+    background-color: #fff;
+    margin: 10rpx 16rpx 0 16rpx;
+  }
 </style>

src/pages/user/aboutmy/index.vue

@@ -0,0 +1,107 @@
+<template>
+  <view class="container">
+    <view class="title">公司简介</view>
+    <view class="item-box">
+      <text class='item-text'>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊oooooooooooeeeeeeeeeeeeeeeeeeeeee</text>
+      <text class='item-text'>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</text>
+      <text class='item-text'>啊啊啊啊啊啊啊啊啊</text>
+    </view>
+
+
+
+    <view class="title">联系我们</view>
+    <view class="item-box">
+      <view class="item">
+        <view class="item-l">
+          <img class="img" src="@/static/logo.png" alt="">
+        </view>
+        <view class="item-r">电话：010-12345678</view>
+      </view>
+      <view class="item">
+        <view class="item-l">
+          <img class="img" src="@/static/logo.png" alt="">
+        </view>
+        <view class="item-r">邮箱：info@xxxxxxxxxxxx.om</view>
+      </view>
+      <view class="item">
+        <view class="item-l">
+          <img class="img" src="@/static/logo.png" alt="">
+        </view>
+        <view class="item-r">地址：北京市海淀区中关村大街1号</view>
+      </view>
+    </view>
+
+
+
+    <view class="title">公司历程</view>
+    <view class="item-box">
+      <view class="progress-box">
+        <img class="img" src="@/static/logo.png" alt="">
+        <text class="progress-text">阿巴阿巴</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default{
+    data(){
+      return{
+
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  page{
+    background-color: #F3F4F6;
+    margin: 0;
+    padding: 0;
+  }
+  .container{
+    padding: 40rpx;
+    .title{
+      font-size: 42rpx;
+      font-weight: bold;
+      color: #000;
+      margin: 40rpx 0;
+    }
+    .item-box{
+      padding: 20rpx;
+      border-radius: 20rpx;
+      background-color: #fff;
+      line-height: 40rpx;
+      .item-text{
+        margin-top: 10rpx;
+      }
+      .item{
+        display: flex;
+        align-items: center;
+        font-size: 28rpx;
+        color: #424C5B;
+        .item-l{
+          .img{
+            width: 50rpx;
+            height: 50rpx;
+          }
+        }
+        .item-r{
+          margin-left: 20rpx;
+        }
+      }
+
+      .progress-box{
+        .img{
+          width: 100%;
+          height: 300rpx;
+          margin-bottom: 20rpx;
+        }
+        .progress-text{
+          font-size: 28rpx;
+          color: #424C5B;
+        }
+      }
+    }
+  }
+</style>

src/pages/user/appoint/index.vue

@@ -1,173 +1,112 @@
 <template>
-  <view class="appoint">
-    <view class="appoint-list">
-      <view class="appoint-title" @tap="$Router.push('/pages/business/service/index')">【养车】标题标题标题标题标题标题标题标题标题标题……</view>
-      <view class="appoint-address">贵州省贵阳市榕江县栽麻乡小利村三组</view>
-      <view class="appoint-flex">
-        <Image src="https://cdn.uviewui.com/uview/album/1.jpg" />
-        <view class="appoint-text">
-          <view>业务：洗车……</view>
-          <view>时间：2023年06月18日</view>
-          <view>联系方式：18285564342</view>
+  <view class="container">
+    <view class="appoint" v-for="item of 3">
+      <view class="appoint-list">
+        <view class="appoint-title">【养车】标题标题标题标题标题标题标题标题标题标题……</view>
+        <view class="appoint-address">贵州省贵阳市榕江县栽麻乡小利村三组</view>
+        <view class="appoint-flex">
+          <!-- <Image src="https://cdn.uviewui.com/uview/album/1.jpg" /> -->
+          <img class="img" src="@/static/logo.png" alt="">
+          <view class="appoint-text">
+            <view>业务：洗车……</view>
+            <view>时间：2023年06月18日</view>
+            <view>联系方式：18285564342</view>
+          </view>
         </view>
         <view class="appoint-goto">
-          <view class="detail" @tap="$Router.push('/pages/user/appointDetail/index')">详情</view>
-          <view class="cancel" @click="show = true">取消</view>
+          <!-- <view class="detail" @tap="$Router.push('/pages/user/appointDetail/index')">详情</view> -->
+          <!-- <view class="cancel" @click="show = true">取消</view> -->
+          <u-button class="detail" text="详情" @tap="$Router.push('/pages/business/service/detail')"></u-button>
+          <u-button class="cancel" text="取消"></u-button>
         </view>
       </view>
-
-      <!-- 取消弹框的实现 -->
-      <view>
-        <u-modal :show="show" :title="title" :content='content'></u-modal>
-      </view>
-    </view>
-    <view class="appoint-list">
-      <view class="appoint-title" @tap="$Router.push('/pages/business/service/index')">【养车】标题标题标题标题标题标题标题标题标题标题……</view>
-      <view class="appoint-address">贵州省贵阳市榕江县栽麻乡小利村三组</view>
-      <view class="appoint-flex">
-        <Image src="https://cdn.uviewui.com/uview/album/1.jpg" />
-        <view class="appoint-text">
-          <view>业务：洗车……</view>
-          <view>时间：2023年06月18日</view>
-          <view>联系方式：18285564342</view>
-        </view>
-        <view class="appoint-goto">
-          <view class="detail" @tap="$Router.push('/pages/user/appointDetail/index')">详情</view>
-          <view class="cancel" @click="show = true">取消</view>
-        </view>
-      </view>
-
-      <!-- 取消弹框的实现 -->
-      <view>
-        <u-modal :show="show" :title="title" :content='content'></u-modal>
-      </view>
-    </view>
-    <view class="history">历史预约列表</view>
-    <view class="appoint-list">
-      <view class="appoint-title" @tap="$Router.push('/pages/business/service/index')">【养车】标题标题标题标题标题标题标题标题标题标题……</view>
-      <view class="appoint-address">贵州省贵阳市榕江县栽麻乡小利村三组</view>
-      <view class="appoint-flex">
-        <Image src="https://cdn.uviewui.com/uview/album/1.jpg" />
-        <view class="appoint-text">
-          <view>业务：洗车……</view>
-          <view>时间：2023年06月18日</view>
-          <view>联系方式：18285564342</view>
-        </view>
-        <view class="appoint-goto">
-          <view class="detail" @tap="$Router.push('/pages/user/appointDetail/index')">详情</view>
-          <view class="cancel" @click="show = true">取消</view>
-        </view>
-      </view>
-
-      <!-- 取消弹框的实现 -->
-      <view>
-        <u-modal :show="show" :title="title" :content='content'></u-modal>
-      </view>
     </view>
   </view>
 </template>
 
 <script>
-export default {
-  data() {
-    return {
-      show: false,
-      title: '取消预约',
-      content: '你确定要取消当前预约吗?'
-    };
-  },
-  methods: {
-    confirm() {
-      console.log(1111111111);
-      this.show = false;
+  export default {
+    data() {
+      return {
+        show: false,
+        title: '取消预约',
+        content: '你确定要取消当前预约吗?'
+      };
     },
-    cancel() {
-      this.show = false;
-    }
-  },
-};
+    methods: {
+      confirm() {
+        console.log(1111111111);
+        this.show = false;
+      },
+      cancel() {
+        this.show = false;
+      }
+    },
+  };
 </script>
 
 <style lang="scss" scoped>
-.appoint {
-  height: 100vh;
-  background-color: #efefef;
-
-  .history {
-    font-size: 38rpx;
-    margin: 20rpx 10rpx;
-    font-weight: bold;
+  page{
+    background-color: #efefef;
   }
-}
-
-.appoint-list {
-  height: 420rpx;
-  padding: 10rpx;
-  background-color: #fff;
-  margin-bottom: 20rpx;
-  box-sizing: border-box;
-
-  .appoint-title {
-    font-size: 38rpx;
-    font-weight: bold;
-    margin-bottom: 10rpx;
-    color: #090909;
+  .container{
+    padding: 20rpx;
   }
-
-  .appoint-address {
-    font-size: 32rpx;
-    margin: 20rpx;
-    padding-bottom: 20rpx;
-    color: #000000;
-    border-bottom: 2rpx solid #E5E5E5;
+  .appoint {
+    .history {
+      font-size: 38rpx;
+      margin: 20rpx 10rpx;
+      font-weight: bold;
+    }
   }
 
+  .appoint-list {
+    padding: 20rpx;
+    background-color: #fff;
+    margin-bottom: 20rpx;
+    box-sizing: border-box;
+    border-radius: 20rpx;
+    .appoint-title {
+      font-size: 38rpx;
+      font-weight: bold;
+      margin-bottom: 10rpx;
+      color: #090909;
+    }
 
-  .appoint-flex {
-    display: flex;
-
-    Image {
-      width: 210rpx;
-      height: 160rpx;
-      display: block;
-      margin-right: 15rpx;
+    .appoint-address {
+      font-size: 32rpx;
+      margin: 20rpx;
+      padding-bottom: 20rpx;
+      color: #000000;
+      border-bottom: 2rpx solid #E5E5E5;
     }
 
-    .appoint-text {
-      font-size: 28rpx;
 
-      >view {
-        margin-bottom: 26rpx;
-        margin-right: 20rpx;
+    .appoint-flex {
+      display: flex;
+      .img {
+        width: 210rpx;
+        height: 160rpx;
+        display: block;
+        margin-right: 15rpx;
+      }
+      .appoint-text {
+        font-size: 28rpx;
+        >view {
+          margin-bottom: 26rpx;
+        }
       }
     }
-
     .appoint-goto {
       display: flex;
-      margin-top: 100rpx;
-
-      .detail {
-        width: 90rpx;
-        height: 70rpx;
-        line-height: 70rpx;
-        text-align: center;
-        color: #fff;
-        border-radius: 35rpx 0 0 35rpx;
-        background-color: #6c9fc3;
+      .detail,.cancel{
+        width: 45%;
+        border-radius: 20rpx;
       }
-
-      .cancel {
-        width: 90rpx;
-        height: 70rpx;
-        line-height: 70rpx;
-        background-color: #fff;
-        border-radius: 0 35rpx 35rpx 0;
-        box-sizing: border-box;
-        color: #6c9fc3;
-        padding-left: 10rpx;
-        border: 2rpx solid #6c9fc3;
+      .detail{
+        background-color: #6C9FC3;
+        color: #fff;
       }
     }
   }
-}
 </style>

src/pages/user/collect/list.vue

@@ -3,34 +3,33 @@
     <view class="text">以下是您收藏的商品服务</view>
 
     <!-- 收藏的服务 -->
-    <service v-for="item in 10" :key="item"/>
+    <service v-for="item in 2" :key="item" />
   </view>
 </template>
 
 <script>
-import service from '@/components/service'
-export default {
-  components: {
-    service,
-  },
-  data() {
-    return {
-    };
-  },
-  onLoad() { },
-  methods: {},
-};
+  import service from '@/components/service'
+  export default {
+    components: {
+      service,
+    },
+    data() {
+      return {};
+    },
+    onLoad() {},
+    methods: {},
+  };
 </script>
 
 <style lang="scss" scoped>
-.collect {
-  height: 100vh;
-  background-color: #efefef;
+  .collect {
+    height: 100vh;
+    background-color: #efefef;
 
-  .text {
-    text-align: center;
-    padding: 40rpx;
-    color: #999;
+    .text {
+      text-align: center;
+      padding: 40rpx;
+      color: #999;
+    }
   }
-}
 </style>

src/pages/user/coupon/index.vue

@@ -1,27 +1,26 @@
 <template>
   <view class="container">
     <!-- 优惠券的可用和失效 -->
+    <!-- <view class="top-tab">
+      <u-tabs class="tab" :list="list" @click="click"></u-tabs>
+    </view> -->
+    
+    
     <view class="use">
-      <u-tabs
-        :list="list2"
-        lineWidth="70"
-        lineColor="#347caf"
-        :scrollable="false"
-        :activeStyle="{
+      <u-tabs :list="list2" lineWidth="100" lineColor="#347caf" :scrollable="false" :activeStyle="{
           color: '#347caf',
           fontWeight: 'bold',
           transform: 'scale(1.05)',
-        }"
-        :inactiveStyle="{
+        }" :inactiveStyle="{
           color: '#b7b6b8',
           transform: 'scale(1)',
-        }"
-        itemStyle="padding-left: 90rpx; padding-right: 80rpx; height: 120rpx;"
-      />
+        }" itemStyle="padding-left: 90rpx; padding-right: 80rpx; height: 120rpx;"
+        @change='handlerSelectTab'
+        />
     </view>
 
     <!-- 优惠券可用 -->
-    <view class="couponUse">
+    <view class="couponUse" v-show="lable_type == 0">
       <view class="useLeft">
         <view>满500减100元</view>
         <text>2320-07-02 ~ 202-08-03</text>
@@ -33,7 +32,7 @@
       </view>
     </view>
     <!-- 优惠券失效 -->
-    <view class="couponDisUse couponUse">
+    <view class="couponDisUse couponUse" v-show="lable_type == 1" v-for="item of 3">
       <view class="useLeft">
         <view>满500减100元</view>
         <text>2320-07-02 ~ 202-08-03</text>
@@ -48,104 +47,127 @@
 </template>
 
 <script>
-export default {
-  data() {
-    return {
-      list: [
-        {
-          id: 0,
-          name: '通用',
-        },
-        {
-          id: 1,
-          name: '满减',
-        },
-        {
-          id: 2,
-          name: '折扣',
-        },
-        {
-          id: 3,
-          name: '赠送',
-        },
-      ],
-      list2: [
-        {
-          name: '可用',
-        },
-        {
-          name: '失效',
-        },
-      ],
-      current: 1,
-    };
-  },
-  methods: {
-    sectionChange() {},
-  },
-};
+  export default {
+    data() {
+      return {
+        list: [{
+            id: 0,
+            name: '通用',
+          },
+          {
+            id: 1,
+            name: '满减',
+          },
+          {
+            id: 2,
+            name: '折扣',
+          },
+          {
+            id: 3,
+            name: '赠送',
+          },
+        ],
+        list2: [{
+            name: '可用',
+          },
+          {
+            name: '失效',
+          },
+        ],
+        lable_type: 0, // 是否可用
+      };
+    },
+    methods: {
+      sectionChange() {},
+      click() {
+
+      },
+      // 点击选择tab栏
+      handlerSelectTab(e){
+        console.log('e',e);
+        this.lable_type = e.index
+      }
+    },
+  };
 </script>
 
 <style lang="scss" scoped>
-.container {
-  height: 100vh;
-  background-color: #efefef;
-  .use {
-    padding: 0 140rpx;
-  }
+  .container {
+    height: 100vh;
+    background-color: #efefef;
 
-  /* 优惠券可用 */
-  .couponUse {
-    margin: 20rpx 30rpx;
-    height: 200rpx;
-    display: flex;
-    background-color: #fff;
-    box-sizing: border-box;
-    .useLeft {
-      width: 380rpx;
-      padding: 20rpx;
-      > view {
-        font-size: 40rpx;
-        margin: 20rpx;
-        color: #333;
-      }
-      > text {
-        font-size: 28rpx;
-        color: #5f5f5f;
+    .top-tab {
+      .tab {
+        display: flex;
+        justify-content: space-between;
       }
     }
-    .useRight {
-      height: 100%;
-      padding: 10rpx;
-      color: #fff;
-      text-align: center;
+
+    .use {
+      padding: 0 140rpx;
+    }
+
+    /* 优惠券可用 */
+    .couponUse {
+      margin: 20rpx 30rpx;
+      height: 200rpx;
+      display: flex;
+      background-color: #fff;
       box-sizing: border-box;
-      width: calc(100% - 380rpx);
-      background-color: #347caf;
-      .text {
-        font-size: 50rpx;
-        > text {
-          margin-left: 5rpx;
-          font-size: 24rpx;
+
+      .useLeft {
+        width: 380rpx;
+        padding: 20rpx;
+
+        >view {
+          font-size: 40rpx;
+          margin: 20rpx;
+          color: #333;
+        }
+
+        >text {
+          font-size: 28rpx;
+          color: #5f5f5f;
         }
       }
-      .gouUse {
-        width: 180rpx;
-        height: 60rpx;
-        line-height: 60rpx;
-        color: #347caf;
-        margin: 16rpx 0 0 60rpx;
-        background-color: #fff;
+
+      .useRight {
+        height: 100%;
+        padding: 10rpx;
+        color: #fff;
+        text-align: center;
+        box-sizing: border-box;
+        width: calc(100% - 380rpx);
+        background-color: #347caf;
+
+        .text {
+          font-size: 50rpx;
+
+          >text {
+            margin-left: 5rpx;
+            font-size: 24rpx;
+          }
+        }
+
+        .gouUse {
+          width: 180rpx;
+          height: 60rpx;
+          line-height: 60rpx;
+          color: #347caf;
+          margin: 16rpx 0 0 60rpx;
+          background-color: #fff;
+        }
       }
     }
-  }
-  .couponDisUse {
-    .useRight {
-      background-color: #cecece;
-      .gouUse {
-        color: #cecece;
+
+    .couponDisUse {
+      .useRight {
+        background-color: #cecece;
+
+        .gouUse {
+          color: #cecece;
+        }
       }
     }
   }
-}
 </style>

src/pages/user/inquiry/index.vue

@@ -0,0 +1,14 @@
+<template>
+  <view class="container">
+    - 暂无 -
+  </view>
+</template>
+
+<script>
+</script>
+
+<style scoped lang="scss">
+  .container{
+    text-align: center;
+  }
+</style>

src/pages/user/mygroup/index.vue

@@ -0,0 +1,106 @@
+<template>
+  <view class="container">
+    <view class="top-img-box">
+      <img class="top-img" src="@/static/logo.png" 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" src="@/static/logo.png" 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/logo.png" 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/logo.png" alt="" 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>

src/pages/user/privacypolicy/index.vue

@@ -0,0 +1,63 @@
+<template>
+  <view class="container">
+    <view class="title">
+      概述
+    </view>
+    <view class="text">
+      我们将非常重视您的个人信息保护。在您使用我们的服务前，请您仔细阅读并了解<隐私条款>。我们将严格按照本隐私条款使用和保护您的个人信息
+    </view>
+
+    <view class="title">
+      信息收集
+    </view>
+    <view class="text">
+      我们将非常重视您的个人信息保护。在您使用我们的服务前，请您仔细阅读并了解<隐私条款>。我们将严格按照本隐私条款使用和保护您的个人信息
+    </view>
+
+    <view class="title">
+      信息使用
+    </view>
+    <view class="text">
+      我们将非常重视您的个人信息保护。在您使用我们的服务前，请您仔细阅读并了解<隐私条款>。我们将严格按照本隐私条款使用和保护您的个人信息
+    </view>
+    
+    <view class="title">
+      信息保护
+    </view>
+    <view class="text">
+      我们将非常重视您的个人信息保护。在您使用我们的服务前，请您仔细阅读并了解<隐私条款>。我们将严格按照本隐私条款使用和保护您的个人信息
+    </view>
+    
+    <view class="title">
+      信息披露
+    </view>
+    <view class="text">
+      我们将非常重视您的个人信息保护。在您使用我们的服务前，请您仔细阅读并了解<隐私条款>。我们将严格按照本隐私条款使用和保护您的个人信息
+    </view>
+  </view>
+</template>
+
+<script>
+  export default{
+    data(){
+      return{
+
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .container{
+    padding: 40rpx;
+    .title{
+      font-size: 28rpx;
+      color: #000;
+      font-weight: bold;
+    }
+    .text{
+      margin:20rpx 0 40rpx;
+      color: #6B7280;
+    }
+  }
+</style>

src/pages/user/servicecenter/index.vue

@@ -0,0 +1,115 @@
+<template>
+  <view class="container">
+    <view class="title">
+      常见问题
+    </view>
+    <view class="item-box issue-box">
+      <view class="item" v-for="item of 4">
+        <view class="item-l">
+          <img class="img" src="@/static/logo.png" alt="">
+        </view>
+        <view class="item-r">
+          如何注销账户？
+        </view>
+      </view>
+    </view>
+
+
+    <view class="title">
+      热门问题
+    </view>
+    <view class="item-box hote-box">
+      <view class="item" v-for="item of 4">
+        <view class="item-l">
+          <img class="img" src="@/static/logo.png" alt="">
+        </view>
+        <view class="item-r">
+          如何注销账户？
+        </view>
+      </view>
+    </view>
+
+    <!-- <view class="title">
+      在线客服
+    </view>
+    <view class="item-box hote-box">
+      <view class="item" v-for="item of 4">
+        <view class="item-l">
+          <img class="img" src="@/static/logo.png" alt="">
+        </view>
+        <view class="item-r">
+          如何注销账户？
+        </view>
+      </view>
+    </view> -->
+  </view>
+</template>
+
+<script>
+  export default{
+    data(){
+      return{
+
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .container{
+    padding: 40rpx;
+    .title{
+      font-size: 32rpx;
+      font-weight: bold;
+      color: #000;
+      margin-top: 40rpx;
+    }
+    .item-box{
+      display: flex;
+      justify-content: space-between;
+      flex-wrap: wrap;
+    }
+    .issue-box{
+      .item{
+        display: flex;
+        align-items: center;
+        padding: 20rpx 10rpx;
+        background-color: #F3F4F6;
+        border-radius: 20rpx;
+        width: 42%;
+        margin: 20rpx 10rpx;
+        .item-l{
+          .img{
+            width: 50rpx;
+            height: 50rpx;
+            border-radius: 50rpx;
+          }
+        }
+        .item-r{
+          margin-left: 20rpx;
+        }
+      }
+    }
+    .hote-box{
+      .item{
+        display: flex;
+        align-items: center;
+        padding: 20rpx 10rpx;
+        background-color: #F3F4F6;
+        border-radius: 20rpx;
+        margin: 10rpx;
+        width: 100%;
+        .item-l{
+          .img{
+            width: 50rpx;
+            height: 50rpx;
+            border-radius: 50rpx;
+          }
+        }
+        .item-r{
+          margin-left: 20rpx;
+        }
+      }
+    }
+  }
+</style>