feat(appoint): 预约列表页面的完成,取消弹框还有问题

src/components/service/index.vue

@@ -51,6 +51,7 @@
             <view class="popup-title">联系方式</view>
             <u--input placeholder="请输入联系方式" border="bottom" clearable />
           </view>
+          <u-button type="primary" shape="circle" size="small" text="确定" />
         </view>
       </u-popup>
     </view>
@@ -196,7 +197,7 @@ export default {
 .popupContent {
   width: 600rpx;
   height: 400rpx;
-  padding: 40rpx;
+  padding: 30rpx;
   box-sizing: border-box;
 
   .popupItem {
@@ -205,7 +206,7 @@ export default {
   }
 
   .server {
-    margin: 30rpx 0 0 30rpx;
+    margin: 20rpx 0 20rpx 30rpx;
   }
 }
 </style>

src/pages.json

@@ -85,7 +85,7 @@
         {
           "path": "buy/index",
           "style": {
-            "navigationBarTitleText": "商家详情"
+            "navigationBarTitleText": "提交订单"
           }
         },
         {
@@ -257,6 +257,18 @@
             "navigationBarTitleText": "我的收藏"
           }
         },
+        {
+          "path": "appoint/index",
+          "style": {
+            "navigationBarTitleText": "预约列表"
+          }
+        },
+        {
+          "path": "appointDetail/index",
+          "style": {
+            "navigationBarTitleText": "预约详情"
+          }
+        },
         {
           "path": "coupon/index",
           "style": {

src/pages/business/buy/index.vue

@@ -0,0 +1,56 @@
+<template>
+  <view class="buy">
+
+    <!-- 底部提交按钮的实现 -->
+    <view class="buy-bottom">
+      <view class="but-text">总计:￥<text>83</text></view>
+      <view class="buyButton">
+        <u-button color="#fa6f19" shape="circle" text="立即购买" />
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.buy {
+  height: 100vh;
+  background-color: #efefef;
+  position: relative;
+}
+
+/* 底部提交按钮的样式 */
+.buy-bottom {
+  height: 100rpx;
+  line-height: 100rpx;
+  background-color: #fff;
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  display: flex;
+  justify-content: space-between;
+  padding: 10rpx 50rpx;
+  box-sizing: border-box;
+
+  .but-text {
+    color: #fa6f19;
+    font-size: 34rpx;
+    margin-top: -10rpx;
+
+    >text {
+      font-size: 38rpx;
+    }
+  }
+
+  .buyButton {
+    width: 160px;
+    margin-top: 10rpx;
+  }
+}
+</style>

src/pages/my/appoint/index.vue

@@ -0,0 +1,173 @@
+<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>
+        <view class="appoint-goto">
+          <view class="detail" @tap="$Router.push('/pages/my/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="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/my/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/my/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;
+    },
+    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;
+  }
+}
+
+.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;
+  }
+
+  .appoint-address {
+    font-size: 32rpx;
+    margin: 20rpx;
+    padding-bottom: 20rpx;
+    color: #000000;
+    border-bottom: 2rpx solid #E5E5E5;
+  }
+
+
+  .appoint-flex {
+    display: flex;
+
+    Image {
+      width: 210rpx;
+      height: 160rpx;
+      display: block;
+      margin-right: 15rpx;
+    }
+
+    .appoint-text {
+      font-size: 28rpx;
+
+      >view {
+        margin-bottom: 26rpx;
+        margin-right: 20rpx;
+      }
+    }
+
+    .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;
+      }
+
+      .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;
+      }
+    }
+  }
+}
+</style>

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/my/personalCenter/index')"
-        >
+        <view class="avatar-wrap" @tap="$Router.push('/pages/my/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/my/settings/index')"
-                >设置</view
-              >
+              <view class="btn-content" @tap="$Router.push('/pages/my/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>
@@ -36,38 +25,19 @@
       <!-- 收藏 -->
       <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>
       </view>
 
       <!-- 我的订单 -->
-      <view
-        class="order-out-box"
-        @tap="$Router.push('/pages/my/myOrder/index')"
-      >
+      <view class="order-out-box" @tap="$Router.push('/pages/my/myOrder/index')">
         <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"
-              ></u-icon>
+            <u-grid-item v-for="(listItem, listIndex) in list2" :key="listIndex">
+              <u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="listItem.name" :size="34"></u-icon>
               <text class="grid-text">{{ listItem.title }}</text>
             </u-grid-item>
           </u-grid>
@@ -84,10 +54,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>
@@ -98,49 +65,16 @@
 
     <!-- 预约列表 -->
     <view class="appointList">
-      <u-cell
-        icon="setting-fill"
-        title="预约列表"
-        isLink
-        url="/pages/componentsB/tag/tag"
-      />
+      <u-cell icon="setting-fill" title="预约列表" isLink url="/pages/my/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=""></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-group>
       </view>
     </view>