tab页提交

package.json

@@ -2,7 +2,7 @@
   "name": "uni-preset-vue",
   "version": "0.0.0",
   "scripts": {
-    "dev": "uni -p mp-weixin",
+    "dev": "uni -p mp-weixin --force",
     "build": "uni build -p mp-weixin",
     "type-check": "vue-tsc --noEmit"
   },

src/App.vue

@@ -32,4 +32,5 @@ onHide(() => {
 </script>
 <style lang="scss">
 @import '@climblee/uv-ui/index.scss';
+@import './custom.scss';
 </style>

src/custom.scss

@@ -0,0 +1,208 @@
+
+/* 行为相关颜色 */
+$uni-color-primary: #007aff;
+$uni-color-success: #4cd964;
+$uni-color-warning: #f0ad4e;
+$uni-color-error: #dd524d;
+
+/* 文字基本颜色 */
+$uni-text-color: #333; // 基本色
+$uni-text-color-inverse: #fff; // 反色
+$uni-text-color-grey: #999; // 辅助灰色，如加载更多的提示信息
+$uni-text-color-placeholder: #808080;
+$uni-text-color-disable: #c0c0c0;
+
+/* 背景颜色 */
+$uni-bg-color: #fff;
+$uni-bg-color-grey: #f8f8f8;
+$uni-bg-color-hover: #f1f1f1; // 点击状态颜色
+$uni-bg-color-mask: rgba(0, 0, 0, 0.4); // 遮罩颜色
+
+/* 边框颜色 */
+$uni-border-color: #c8c7cc;
+
+/* 尺寸变量 */
+
+/* 文字尺寸 */
+$uni-font-size-sm: 12px;
+$uni-font-size-base: 14px;
+$uni-font-size-lg: 16;
+
+/* 图片尺寸 */
+$uni-img-size-sm: 20px;
+$uni-img-size-base: 26px;
+$uni-img-size-lg: 40px;
+
+/* Border Radius */
+$uni-border-radius-sm: 2px;
+$uni-border-radius-base: 3px;
+$uni-border-radius-lg: 6px;
+$uni-border-radius-circle: 50%;
+
+/* 水平间距 */
+$uni-spacing-row-sm: 5px;
+$uni-spacing-row-base: 10px;
+$uni-spacing-row-lg: 15px;
+
+/* 垂直间距 */
+$uni-spacing-col-sm: 4px;
+$uni-spacing-col-base: 8px;
+$uni-spacing-col-lg: 12px;
+
+/* 透明度 */
+$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
+
+/* 文章场景相关 */
+$uni-color-title: #2c405a; // 文章标题颜色
+$uni-font-size-title: 20px;
+$uni-color-subtitle: #555; // 二级标题颜色
+$uni-font-size-subtitle: 18px;
+$uni-color-paragraph: #3f536e; // 文章段落颜色
+$uni-font-size-paragraph: 15px;
+
+///* flex布局 */
+.flex {
+  display: flex;
+}
+
+.flex-inline {
+  display: inline-flex;
+}
+
+
+.flex-auto {
+  flex: 1;
+  overflow: hidden;
+}
+
+.flex-center {
+  @extend .flex;
+  flex-direction: column;
+  width: 100%;
+  overflow: hidden;
+}
+
+.flex-margin {
+  margin: auto;
+}
+
+.flex-warp {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  margin: 0 -5px;
+
+  .flex-warp-item {
+    padding: 5px;
+
+    .flex-warp-item-box {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+.flex-just-between {
+  justify-content: space-between;
+}
+
+.flex-just-around {
+  justify-content: space-around;
+}
+
+.flex-justify-center {
+  justify-content: center;
+}
+
+.flex-align-items-center {
+  align-items: center;
+  align-content: center;
+}
+
+.flex-just-end {
+  justify-content: flex-end;
+}
+
+
+@for $i from 0 through 30 {
+  .wd#{100+$i*10} {
+    width: #{100+$i*10}px !important;
+  }
+}
+
+
+.w50 {
+  width: 50% !important;
+}
+
+.w100 {
+  width: 100% !important;
+}
+
+.h100 {
+  height: 100% !important;
+}
+
+.vh100 {
+  height: 100vh !important;
+}
+
+
+/* 字体大小全局样式
+------------------------------- */
+@for $i from 10 through 32 {
+  .font#{$i} {
+    font-size: #{$i}px !important;
+  }
+}
+
+/* 外边距、内边距全局样式
+------------------------------- */
+@for $i from 1 through 35 {
+  .mt#{$i} {
+    margin-top: #{$i}px !important;
+  }
+  .mr#{$i} {
+    margin-right: #{$i}px !important;
+  }
+  .mb#{$i} {
+    margin-bottom: #{$i}px !important;
+  }
+  .ml#{$i} {
+    margin-left: #{$i}px !important;
+  }
+  .pt#{$i} {
+    padding-top: #{$i}px !important;
+  }
+  .pr#{$i} {
+    padding-right: #{$i}px !important;
+  }
+  .pb#{$i} {
+    padding-bottom: #{$i}px !important;
+  }
+  .pl#{$i} {
+    padding-left: #{$i}px !important;
+  }
+  .pv#{$i} {
+    padding: #{$i}px auto !important;
+  }
+
+  .ph#{$i} {
+    padding: auto #{$i}px !important;
+  }
+
+  .pd#{$i} {
+    padding: #{$i}px !important;
+  }
+
+  .mv#{$i} {
+    margin: #{$i}px auto !important;
+  }
+
+  .mh#{$i} {
+    margin: auto #{$i}px !important;
+  }
+  .mg#{$i} {
+    margin: #{$i}px #{$i}px !important;
+  }
+}

src/main.ts

@@ -3,9 +3,7 @@ import App from "./App.vue";
 import uvUI from '@climblee/uv-ui'
 export function createApp() {
   const app = createSSRApp(App);
-  // #ifdef VUE3
   app.use(uvUI);
-// #endif
   return {
     app,
   };

src/pages.json

@@ -115,7 +115,6 @@
   },
   "globalStyle": {
     "navigationBarTextStyle": "black",
-    "navigationBarTitleText": "洗车",
     "navigationBarBackgroundColor": "#F8F8F8",
     "backgroundColor": "#F8F8F8"
   }

src/pages/coupon/index.vue

@@ -1,51 +1,318 @@
 <template>
-  <view class="content">
-    <image class="logo" src="/static/logo.png" />
-    <view class="text-area">
-      <text class="title">{{ title }}</text>
+  <view class="popup-coupon-content" :class="useInPage ? 'page' : ''">
+    <view class="input">
+      <input class="popup-content-input" v-model="state.code" placeholder="请输入优惠码"/>
+      <view class="text" @click="handleConvert" :class="state.code ? 'hasValue' : ''">
+        兑换
+      </view>
     </view>
-    <uv-button type="primary" text="确定"></uv-button>
-    <uv-calendars insert @change="change" />
-    <uv-image src="https://cdn.uviewui.com/uview/album/1.jpg" mode="widthFix"></uv-image>
-    <uv-qrcode ref="qrcode" size="300px" value="https://h5.uvui.cn"></uv-qrcode>
-    <uv-switch v-model="open" loading></uv-switch>
+    <view class="tab">
+      <view class="tab-item" @click="handleClickSelectType('available')"
+            :class="state.selecType == 'available' ? 'active' : ''">
+        <view class="tab-text">
+          可用({{ state.useNum.available }})
+        </view>
+      </view>
+      <view class="tab-item" @click="handleClickSelectType('notavailable')"
+            :class="state.selecType == 'notavailable' ? 'active' : ''">
+        <view class="tab-text">
+          不可用({{ state.useNum.notavailable }})
+        </view>
+      </view>
+    </view>
+    <view class="coupon-list">
+      <view class="coupon-card" @click="handClickCoupon(item)" v-for="item in state.couponList" :key="item.id"
+          >
+        <view class="card-content">
+          <view class="amount-content" :class="state.selecType == 'available' ? 'available' : '' ">
+            <view class="amount">
+              <view class="price">{{ item.discountPrice }}</view>
+              {{ item.unit }}
+            </view>
+            <view class="amount-text">
+              {{ item.couponAmountText }}
+            </view>
+          </view>
+          <view class="coupon-info">
+            <view class="info-name">
+              {{ item.couponName }}
+            </view>
+            <view class="info-time">
+              {{ item.couponTime }}
+            </view>
+          </view>
+        </view>
+
+        <view class="coupon-desc">
+          {{ item.couponDesc }}
+        </view>
+      </view>
+      <!--      -->
+      <!--      <PinappEmpty v-if="showEmpty"></PinappEmpty>-->
+      <uv-empty  v-if="state.couponList.length==0" mode="coupon" text="没有可用优惠券"></uv-empty>
+    </view>
+<!--    <view v-if="showClose" class="button-cancel" @click="handleClose">
+      不使用
+    </view>-->
   </view>
 </template>
 
+
 <script setup lang="ts">
-import { ref } from 'vue'
-const title = ref('Hello')
-const open = ref(false)
+import {reactive, ref} from 'vue'
+import {onHide, onShow} from "@dcloudio/uni-app";
+
+
+const props = defineProps({
+  // 是否展示【不使用】按钮，浮层时候使用
+  showClose: {
+    type: Boolean,
+    default: true
+  },
+  // 页面中使用传true，浮层使用传false
+  useInPage: {
+    type: Boolean,
+    default: false
+  },
+  // 优惠券列表
+  defaultSelectType: {
+    type: String,
+    default: ''
+  },
+})
+
+
+const emits = defineEmits(['handleConvert', 'handleClose', 'handClickCoupon', 'handleSelectType'])
+
+const initState = () => ({
+  selecType: 'available', //available notavailable
+  showEmpty: false,
+  code: '',
+  useNum: {
+    available: 0,
+    notavailable: 0,
+  },
+  couponList: [] as any[]
+})
+
+const state = reactive(initState())
+
+onShow(() => {
+  let gd = getApp<any>().globalData;
+  if (!gd.token) {
+    console.error(gd)
+    return;
+  }
+  refreshCouponList();
+});
+
+onHide(() => {
+  Object.assign(state, initState());
+})
 
-const change = () => {
-  console.log("change")
+const refreshCouponList = () => {
+  let available = 0,
+      notavailable = 0;
+  state.couponList.forEach(item => {
+    if (item.type == 'available') available++
+    else if (item.type == 'notavailable') notavailable++
+  })
+  state.useNum = {
+    available,
+    notavailable
+  }
+}
+
+/**
+ * 点击兑换
+ */
+const handleConvert = () => {
+  if (state.code) {
+    emits('handleConvert', state.code)
+  }
+}
+
+
+/**
+ * 切换优惠券类别
+ */
+const handleClickSelectType = (type: string) => {
+  if (state.selecType !== type) {
+    state.selecType = type;
+    emits('handleSelectType', type);
+  }
 }
-</script>
 
-<style>
-.content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
+
+const handClickCoupon = (item: any) => {
+  emits('handClickCoupon', item)
 }
 
-.logo {
-  height: 200rpx;
-  width: 200rpx;
-  margin-top: 200rpx;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: 50rpx;
+const handleClose = () => {
+  emits('handleClose')
 }
 
-.text-area {
-  display: flex;
-  justify-content: center;
+const handleGotoGuide = () => {
+  uni.navigateTo({
+    url: '/pages/guide/index'
+  })
 }
 
-.title {
-  font-size: 36rpx;
-  color: #8f8f94;
+</script>
+
+
+<style lang="scss" scoped>
+.popup-coupon-content {
+  font-size: 24rpx;
+
+  &.page {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .input {
+    margin-top: 20rpx;
+    padding: 0 20rpx;
+    display: flex;
+    align-items: center;
+
+    .popup-content-input {
+      border-radius: 70rpx;
+      background: #f7f8fa;
+      padding: 0 20rpx;
+      flex: 1;
+      height: 70rpx;
+      margin-right: 20rpx;
+    }
+
+    .text {
+      color: #1989fa;
+      font-size: 28rpx;
+      opacity: 0.8;
+
+      &.hasValue {
+        opacity: 1;
+      }
+    }
+  }
+
+  .tab {
+    display: flex;
+    align-items: center;
+    background: #fff;
+    box-shadow: 0 12rpx 24rpx -24rpx #969799;
+
+    .tab-item {
+      flex: 1;
+      text-align: center;
+      font-size: 28rpx;
+      font-weight: 500;
+      color: #646566;
+
+      .tab-text {
+        display: inline-block;
+        padding: 20rpx 0;
+      }
+    }
+
+    .active {
+      color: #323233;
+
+      .tab-text {
+        border-bottom: 2px solid #1989fa;
+      }
+    }
+  }
+
+  .coupon-list {
+    margin-top: 4rpx;
+    //background: #f6F7F9;
+    min-height: 340rpx;
+    flex: 1;
+    padding: 20rpx 0;
+    overflow-y: scroll;
+
+    .coupon-card {
+      margin: 0rpx 20rpx 20rpx;
+      background: #fff;
+      border-radius: 20rpx;
+      padding: 10rpx 20rpx 0 20rpx;
+
+      .card-content {
+        display: flex;
+        margin: 30rpx 0;
+
+        .amount-content {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          padding: 0 10rpx;
+          width: 260rpx;
+
+          &.available {
+            color: #1989fa;
+          }
+
+          .amount {
+            display: flex;
+            align-items: center;
+
+            .price {
+              font-weight: 500;
+              font-size: 54rpx;
+              margin-right: 4rpx;
+            }
+          }
+
+          .amount-text {
+            margin-top: 4rpx;
+          }
+        }
+
+        .coupon-info {
+          flex: 1;
+          color: #323233;
+          margin-left: 20rpx;
+
+          .info-name {
+            font-size: 30rpx;
+            font-weight: 500;
+          }
+
+          .info-time {
+            margin-top: 20rpx;
+          }
+        }
+      }
+
+      .coupon-desc {
+        border-top: 2rpx dashed #ebedf0;
+        padding: 20rpx;
+      }
+    }
+
+    .coupon-card:last-of-type {
+      margin-bottom: 0;
+    }
+
+  }
+
+  .button-cancel {
+    margin: 20rpx;
+    height: 80rpx;
+    background: #1989fa;
+    border-radius: 80rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    font-size: 32rpx;
+    font-weight: 500;
+  }
 }
 </style>

src/pages/index/index.vue

@@ -17,8 +17,12 @@
           bgColor="#ffffff">
       </uv-swiper>
     </view>
-    <uv-line color="#2979ff"></uv-line>
-    <uv-divider :dashed="true"></uv-divider>
+    <view class="w100">
+      <uv-notice-bar mode="closable" speed="50" url="/pages/coupon/index" :text="state.notice"></uv-notice-bar>
+    </view>
+
+    <view class="w100 gap"></view>
+
 
     <view class="menu-content w100">
       <uv-grid :border="false" :col="3">
@@ -29,25 +33,25 @@
       </uv-grid>
     </view>
 
+    <view class="w100 gap"></view>
+
     <view class="qrcode-content">
       <uv-qrcode ref="qrcode_ref" value="https://h5.uvui.cn" :options="state.qrcodeOption"></uv-qrcode>
-      <uv-button size="large" :custom-style="state.customStyle" text="扫码洗车"
+      <uv-button size="large" :custom-style="state.customStyle" text="扫码开始洗车"
                  color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></uv-button>
 
     </view>
 
-    <view>
+    <view class="mt10">
       <uv-alert title="提示" type="warning" description="将二维码置于洗车机扫描口启动洗车"></uv-alert>
     </view>
 
+    <view class=" mt10 guide-content">
+      <view>
+        <uv-text  size="13"  shape="circle" href="#" @click="handleGotoGuide" text="查看操作指引" type="primary">查看操作指引</uv-text>
+      </view>
+    </view>
 
-    <!--    <uv-button type="primary" text="确定"></uv-button>
-        <uv-calendars insert @change="change"/>
-        <uv-image src="https://cdn.uviewui.com/uview/album/1.jpg" mode="widthFix"></uv-image>
-        <uv-qrcode ref="qrcode" size="300px" value="https://h5.uvui.cn"></uv-qrcode>
-        <uv-switch v-model="open" loading></uv-switch>-->
-
-    <!--    <tab-bar></tab-bar>-->
   </view>
 </template>
 
@@ -72,9 +76,11 @@ const initState = () => ({
     {name: "photo", title: "洗车"},
     {name: "lock", title: "充值"},
     {name: "star", title: "卡券"},
+    {name: "red-packet", title: "停车"},
   ],
   qrcodeOption: {
     style: 'round',
+    size: 230,
     // 指定二维码前景，一般可在中间放logo
     foregroundImageSrc: 'https://www.uvui.cn/common/logo.png'
   },
@@ -83,11 +89,8 @@ const initState = () => ({
     height: '80rpx',
     width: '80%',
     borderRadius: '40rpx',//圆角
-    // nvue中必须是下方的写法
-    'border-top-right-radius': '40rpx',
-    'border-bottom-left-radius': '40rpx',
-    'border-bottom-right-radius': '40rpx'
-  }
+  },
+  notice: '中秋佳节，全场8折，快来洗车吧！'
 })
 
 const state = reactive(initState())
@@ -97,7 +100,7 @@ onShow(() => {
   if (!gd.token) {
     console.log(gd)
   }
-  setInterval(()=>refreshQrcode(), 10000)
+  setInterval(() => refreshQrcode(), 20000)
 });
 
 onHide(() => {
@@ -115,15 +118,22 @@ const refreshQrcode = () => {
   })
 }
 
+const handleGotoGuide = () => {
+  uni.navigateTo({
+    url: '/pages/guide/index'
+  })
+}
+
 </script>
 
-<style>
+<style scoped lang="scss">
 .content {
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  border-radius: 8rpx;
 }
 
 .logo {
@@ -135,20 +145,10 @@ const refreshQrcode = () => {
   margin-bottom: 50rpx;
 }
 
-.text-area {
-  display: flex;
-  justify-content: center;
-}
-
-.title {
-  font-size: 36rpx;
-  color: #8f8f94;
-}
-
 .menu-content {
   width: 100%;
-  margin-top: 40rpx;
   padding: 0 20rpx;
+  border-radius: 8rpx;
 }
 
 .qrcode-content {
@@ -161,4 +161,16 @@ const refreshQrcode = () => {
   align-content: center;
   justify-content: center;
 }
+
+.gap {
+  width: 100%;
+  height: 36rpx;
+  background-color: #f5f3f3;
+  margin-top: 10rpx;
+  margin-bottom: 10rpx;
+}
+
+.guide-content {
+  text-align: center;
+}
 </style>

src/pages/map/index.vue

@@ -1,51 +1,312 @@
 <template>
   <view class="content">
-    <image class="logo" src="/static/logo.png" />
-    <view class="text-area">
-      <text class="title">{{ title }}</text>
+    <map style="width: 100%; height: 400px;"
+         id="wash_map"
+         :latitude="state.latitude"
+         :longitude="state.longitude"
+         :markers="state.covers"
+         min-scale="1"
+         :scale="12"
+         @regionchange="handleMapRegionChange"
+         @updated="handleMapUpdated"
+         @labeltap="handleMapTapMarker"
+         @markertap="handleMapTapMarker"
+    >
+
+      <view class="content_reset-btn" @click="resetLocation">
+        <uv-icon name="empty-address" size="28" color="#000" icon="/static/map-re-location.png"></uv-icon>
+      </view>
+    </map>
+
+
+    <view class="w100 content_search mt10">
+      <uv-search :showAction="true" actionText="搜索" placeholder="请输入站点名称搜索" :animation="true" @search="handleSearchStation"></uv-search>
+    </view>
+
+    <!--    站点清单  start-->
+    <view class="w100 content_station">
+      <view class="station_item" v-for="item in state.stationList" :key="item.id">
+        <view class="station_item-title">
+          <text class="font13">{{ item.name }}</text>
+        </view>
+
+        <view class="station_item-status">
+          <text class="station_item-status-text">营业中</text>
+        </view>
+
+        <view class="station_item-content">
+          <view class="station_item-content-left">
+            <view class="station_item-content-left-label">
+              <view class="font12 station_item-content-left-label-left">
+                <text class="station_item-content-left-label-left_idle">空闲</text>
+                <text class="station_item-content-left-label-left_count">{{ item.idle }}/{{ item.total }}</text>
+              </view>
+              <!--              <uv-tags size="small" class="station_item-content-left-label_tag" text="洗车机" plain shape="circle"></uv-tags>-->
+              <view class="station_item-content-left-label_func">{{ item.funs?.join(" | ") }}</view>
+            </view>
+            <view class="station_item-content-left-position">
+              <uv-icon name="empty-address" size="20" color="#aaa"></uv-icon>
+              <text>{{ item.address }}</text>
+            </view>
+          </view>
+          <view class="station_item-content-right">
+            <uv-button circle type="primary" size="mini" plain @click="handleNavStation(item)">去洗车</uv-button>
+          </view>
+        </view>
+
+        <view class="station_item-distance">
+          <uv-text type="primary" :text="item.tips" size="12"></uv-text>
+        </view>
+      </view>
     </view>
-    <uv-button type="primary" text="确定"></uv-button>
-    <uv-calendars insert @change="change" />
-    <uv-image src="https://cdn.uviewui.com/uview/album/1.jpg" mode="widthFix"></uv-image>
-    <uv-qrcode ref="qrcode" size="300px" value="https://h5.uvui.cn"></uv-qrcode>
-    <uv-switch v-model="open" loading></uv-switch>
+    <!--    站点清单  end-->
+
   </view>
 </template>
 
+
 <script setup lang="ts">
-import { ref } from 'vue'
-const title = ref('Hello')
-const open = ref(false)
+import {reactive, ref} from 'vue'
+import {onHide, onShow} from "@dcloudio/uni-app";
+
+const mapCtx = ref(); // 地图上下文
+
+const initState = () => ({
+  latitude: 23.098994,
+  longitude: 113.32252,
+  covers: [] as any[],
+  markers: [] as any[],
+  isIgnoreChangeLocation: false,
+  loading: false,
+  stationList: [
+    {
+      id: 1,
+      name: '河源路洗车场',
+      status: 1,
+      total: 7,
+      idle: 2,
+      funs: ['清洁', '泡沫', '吸尘', '消毒', '充电'],
+      address: '深圳市宝安区河源路12345号',
+      tips: '半小时内免停车费，超时领取停车券免费',
+    },
+    {
+      id: 1,
+      name: '河源路洗车场2222',
+      status: 1,
+      total: 17,
+      idle: 2,
+      funs: ['清洁', '泡沫', '吸尘', '消毒', '充电'],
+      address: '深圳市宝安区河源路12345号',
+      tips: '半小时内免停车费，超时领取停车券免费',
+    }
+  ] as any[]
+})
+
+const state = reactive(initState())
+
+onShow(() => {
+  let gd = getApp<any>().globalData;
+  if (!gd.token) {
+    console.error(gd)
+    return;
+  }
+  mapCtx.value = uni.createMapContext("wash_map");
+  // refreshCouponList();
+});
+
+onHide(() => {
+  Object.assign(state, initState());
+})
+
+const handleMapRegionChange = (e: any) => {
+  if (state.isIgnoreChangeLocation) {
+    return;
+  }
+  if (e.type === "end" && state.markers.length) {
+    // console.log("map change end", {
+    //   ...e.detail.centerLocation,
+    // });
+    const current = e.target.centerLocation;
+    const {latitude, longitude} = current;
+    relocation(longitude, latitude);
+    // stationPage.value.page = 1;
+    // refreshStation({
+    //   latitude,
+    //   longitude,
+    // });
+  }
+}
+
+
+const relocation = (longitude: number, latitude: number) => {
+  mapCtx.value?.moveToLocation({
+    latitude,
+    longitude,
+  });
+}
+
+//重置地图定位
+const resetLocation = () => {
+  if (state.loading) {
+    return;
+  }
+  // eslint-disable-next-line promise/catch-or-return
+  // fetchLocation().then((res: any) => {
+  //   const { latitude, longitude } = res;
+  //   mapCtx.value?.moveToLocation({
+  //     latitude,
+  //     longitude,
+  //   });
+  // });
+};
+
+const handleMapUpdated = (e: any) => {
+  setTimeout(() => {
+    state.isIgnoreChangeLocation = false;
+  }, 500);
+}
+
+
+const handleMapTapMarker = (e: any) => {
+  if (e.detail.markerId === -1) {
+    return;
+  }
+  let chooseMarker = state.stationList.find((k: any) => k.id == e.detail.markerId);
+  if (chooseMarker) {
+    // _changeMarker(findIndex);
+  }
+}
+
+const handleSearchStation = (e: any) => {
+  console.log("search>>>", e)
+  // const { value } = e.detail;
+  // if (!value) {
+  //   return;
+  // }
+}
+
+const handleNavStation = (station: any) => {
 
-const change = () => {
-  console.log("change")
 }
 </script>
 
-<style>
+
+<style lang="scss" scoped>
 .content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
+  width: 100%;
+  //background: #efeffe;
+
+  &_reset-btn {
+    position: absolute;
+    right: 10rpx;
+    bottom: 10rpx;
+  }
 
-.logo {
-  height: 200rpx;
-  width: 200rpx;
-  margin-top: 200rpx;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: 50rpx;
+  &_search {
+
+  }
+
+  &_station {
+    height: calc(100vh - 480px);
+  }
 }
 
-.text-area {
+.station_item {
   display: flex;
-  justify-content: center;
-}
+  flex-direction: column;
+  border-radius: 10rpx;
+  margin-top: 20rpx;
+  padding: 15rpx;
+  background: #fafafa;
+  position: relative;
+
+  &-title {
+    display: inline-flex;
+    padding-left: 5px;
+  }
+
+  &-status {
+    position: absolute;
+    right: 0;
+    top:0;
+
+    &-text {
+      background: $uni-color-primary;
+      padding: 6rpx;
+      color: white;
+      font-size: 12px;
+    }
+  }
+
+  &-content {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+
+    &-left {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      padding: 5rpx;
+
+      &-label {
+        padding: 4rpx 8rpx;
+        display: inline-flex;
+        margin-top: 8rpx;
+        //justify-content: space-between;
+
+        &-left {
+          //border: 1px solid $uni-color-primary;
+          border-radius: 4rpx;
+
+          &_idle {
+            background: $uni-color-primary;
+            padding: 6rpx;
+            color: white;
+            border-radius: 4rpx;
+          }
+
+          &_count {
+            //border-radius: 4rpx;
+            margin-left: 10px;
+            color: $uni-color-primary;
+            font-size: 13px;
+          }
+
+          &_tag {
+            width: 30rpx;
+          }
+
+        }
+
+
+        &_func {
+          padding-left: 50rpx;
+          font-size: 24rpx;
+          color: #aaa;
+        }
+      }
+
+      &-position {
+        display: inline-flex;
+        font-size: 24rpx;
+        margin-top: 8rpx;
+      }
+    }
+
+    &-right {
+      width: 120rpx;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-content: center;
+    }
+  }
 
-.title {
-  font-size: 36rpx;
-  color: #8f8f94;
+  &-distance {
+    font-size: 24rpx;
+    padding-left: 5px;
+    margin-top: 8rpx;
+  }
 }
 </style>

src/pages/order/b.vue

@@ -0,0 +1,170 @@
+<template>
+	<view class="page_order">
+		<view>
+			<u-subsection :list="list" :current="curNow" @change="sectionChange" activeColor="#25A785"
+				bgColor="#eeeeee"></u-subsection>
+		</view>
+		<view class="order_card">
+			<view class="card" v-for="(item,index) in pro">
+				<view class="card_top">
+					<view style="width: 80%;" class="font14">订单号：{{item.number}}</view>
+					<view class="font14" style="color: #25A785;">待付款</view>
+				</view>
+				<u-line color="#eaeaea" :hairline="false"></u-line>
+				<view class="card_medium">
+					<image src="../../tupian/maomi.jpg" class="card_img"></image>
+					<view class="med_right">
+						<view class="font16 fontbold med_right1">{{item.name}}</view>
+						<view class="font12 med_right2">预约时间：{{item.time}}</view>
+						<view class="med_right3">
+							<view class="font12">优惠:{{item.Discount}}</view>
+							<view class="font12" style="margin-left: 20rpx;">实付：</view>
+							<view class="font12 col_red">￥</view>
+							<view class="font16 col_red">{{item.money}}</view>
+						</view>
+					</view>
+				</view>
+				<view class="card_btm">
+					<u-button class="btm1" shape="circle">取消订单</u-button>
+					<u-button class="btm2" shape="circle">立即付款</u-button>
+				</view>
+			</view>
+		</view>
+	</view>
+
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				pro:[{
+					name:"专业疏通管道服务",
+					number:"X45344354544321",
+					time:"2021-12-10",
+					Discount:"104元",
+					money:"130.00"
+				},
+				{
+					name:"专业疏通管道服务",
+					number:"X45344354544321",
+					time:"2021-12-10",
+					Discount:"104元",
+					money:"130.00"
+				},
+				{
+					name:"专业疏通管道服务",
+					number:"X45344354544321",
+					time:"2021-12-10",
+					Discount:"104元",
+					money:"130.00"
+				}
+				],
+				list: ['全部订单', '已完成订单', '未完成订单', '待评价'],
+				curNow: 0
+			}
+		},
+		methods: {
+			sectionChange(index) {
+				this.curNow = index;
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.page_order {
+		width: 100vw;
+		min-height: 100vh;
+
+		.col_red {
+			color: red;
+		}
+		.font12{
+			font-size: 12px;
+		}
+		.font14{
+			font-size: 14px;
+		}
+		.font16{
+			font-size: 16px;
+		}
+		.order_card {
+			width: 100vw;
+			display: flex;
+			flex-wrap: wrap;
+			justify-content: center;
+
+			.card {
+				width: 92%;
+				height: 400rpx;
+				margin-top: 30rpx;
+				border-radius: 10px;
+				background-color: white;
+				box-shadow: 1px 1px 5px #d5d5d5;
+
+				.card_top {
+					display: flex;
+					padding: 15rpx;
+				}
+
+				.card_medium {
+					width: 95%;
+					height: 220rpx;
+					display: flex;
+					align-items: center;
+					padding: 15rpx;
+
+					.card_img {
+						height: 180rpx;
+						width: 180rpx;
+						border-radius: 10px;
+					}
+
+					.med_right {
+						height: 180rpx;
+						margin-left: 20rpx;
+
+						.med_right1 {
+							margin-bottom: 30rpx;
+						}
+
+						.med_right2 {
+							color: #909090;
+							margin-bottom: 25rpx;
+							
+						}
+
+						.med_right3 {
+							display: flex;
+							align-items: center;
+						}
+					}
+				}
+
+				.card_btm {
+					display: flex;
+					height: 80rpx;
+					width: 100%;
+					align-items: center;
+
+					.btm1 {
+						height: 60rpx;
+						width: 200rpx;
+						background-color: #ffffff;
+						color: #25A785;
+						border: #25A785 1px solid;
+						margin-left: 260rpx;
+					}
+
+					.btm2 {
+						height: 60rpx;
+						width: 200rpx;
+						background-color: #25A785;
+						color: white;
+					}
+				}
+			}
+		}
+	}
+</style>

src/pages/order/c.vue

@@ -0,0 +1,264 @@
+<template>
+	<view>
+		<view class="wrap" >
+				<swiper-item class="swiper-item">
+					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
+						<view class="page-box">
+							<view class="order" v-for="(item,index) in pro">
+								<view class="top">
+									<view class="left">
+										<u-icon name="home" :size="20" color="rgb(94,94,94)"></u-icon>
+										<view class="store">{{item.store}}</view>
+										<u-icon name="arrow-right" color="rgb(203,203,203)" :size="15"></u-icon>
+									</view>
+									<view class="right">{{item.right}}</view>
+								</view>
+								<view class="item" @click="jump_detail(132)" >
+									<view class="left">
+										<u--image :src="item.src" width="90px" height="100px"></u--image>
+									</view>
+									<view class="content">
+										<view class="title u-line-2">{{item.title}}</view>
+										<view class="delivery-time">下单时间：{{item.time}}</view>
+									</view>
+									<view class="right">
+										<view class="price">
+											￥{{item.price}}
+											<text class="decimal">.{{item.decimal}}</text>
+										</view>
+										<view class="number">x{{item.number}}</view>
+									</view>
+								</view>
+								<view class="total">
+									共{{item.total}}件商品 合计:
+									<text class="total-price">
+									￥{{item.price}}.
+									<text class="decimal">{{item.decimal}}</text>
+									</text>
+								</view>
+							</view>
+						</view>
+					</scroll-view>
+				</swiper-item>
+			</swiper>
+		</view>
+	</view>
+</template>
+
+<script>
+
+	export default {
+		data() {
+			return {
+				pro:[{
+					store:"小王的店",
+					right:"未支付",
+					title:"荣耀30 Pro 50倍远摄麒麟990 5G 4000万超感光...",
+					time:"2021-12-10",
+					price:"3999",
+					decimal:"00",
+					number:"1",
+					total:"1",
+					src:require('@/tupian/touxiang.jpg'),
+				},
+				{
+					store:"小王的店",
+					right:"未支付",
+					title:"荣耀30 Pro 50倍远摄麒麟990 5G 4000万超感光...",
+					time:"2021-12-10",
+					price:"3999",
+					decimal:"00",
+					number:"1",
+					total:"1",
+					src:require('@/tupian/touxiang.jpg'),
+				},
+				{
+					store:"小王的店",
+					right:"未支付",
+					title:"荣耀30 Pro 50倍远摄麒麟990 5G 4000万超感光...",
+					time:"2021-12-10",
+					price:"3999",
+					decimal:"00",
+					number:"1",
+					total:"1",
+					src:require('@/tupian/touxiang.jpg'),
+				},
+				],
+				dataList: [],
+				
+				
+			};
+		},
+	}
+</script>
+
+<style>
+	/* #ifndef H5 */
+	page {
+		height: 100%;
+		background-color: #f2f2f2;
+	}
+
+	/* #endif */
+</style>
+
+<style lang="scss" scoped>
+	.order {
+		width: 710rpx;
+		background-color: #ffffff;
+		margin: 20rpx auto;
+		border-radius: 20rpx;
+		box-sizing: border-box;
+		padding: 20rpx;
+		font-size: 28rpx;
+
+		.top {
+			display: flex;
+			justify-content: space-between;
+
+			.left {
+				display: flex;
+				align-items: center;
+
+				.store {
+					margin: 0 10rpx;
+					font-size: 32rpx;
+					font-weight: bold;
+				}
+			}
+
+			.right {
+				color:  #f29100;
+			}
+		}
+
+		.item {
+			display: flex;
+			margin: 20rpx 0 0;
+
+			.left {
+				margin-right: 20rpx;
+
+				image {
+					width: 200rpx;
+					height: 200rpx;
+					border-radius: 10rpx;
+				}
+			}
+
+			.content {
+				width: 60%;
+
+				.title {
+					font-size: 28rpx;
+					line-height: 50rpx;
+				}
+
+				.type {
+					margin: 10rpx 0;
+					font-size: 24rpx;
+					color: $u-tips-color;
+				}
+
+				.delivery-time {
+					color: #e5d001;
+					font-size: 24rpx;
+				}
+			}
+
+			.right {
+				margin-left: 10rpx;
+				padding-top: 20rpx;
+				text-align: right;
+
+				.decimal {
+					font-size: 24rpx;
+					margin-top: 4rpx;
+				}
+
+				.number {
+					color: $u-tips-color;
+					font-size: 24rpx;
+				}
+			}
+		}
+
+		.total {
+			margin-top: 20rpx;
+			text-align: right;
+			font-size: 24rpx;
+
+			.total-price {
+				font-size: 32rpx;
+			}
+		}
+
+		.bottom {
+			display: flex;
+			margin-top: 40rpx;
+			padding: 0 10rpx;
+			justify-content: space-between;
+			align-items: center;
+
+			.btn {
+				line-height: 52rpx;
+				width: 160rpx;
+				border-radius: 26rpx;
+				border: 2rpx solid $u-border-color;
+				font-size: 26rpx;
+				text-align: center;
+				color:#f29100;
+			}
+
+			.evaluate {
+				color: #f29100;
+				border-color:  #f29100;
+			}
+		}
+	}
+
+	.centre {
+		text-align: center;
+		margin: 200rpx auto;
+		font-size: 32rpx;
+
+		image {
+			width: 164rpx;
+			height: 164rpx;
+			border-radius: 50%;
+			margin-bottom: 20rpx;
+		}
+
+		.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%;
+		height: 100%;
+	}
+
+	.swiper-box {
+		flex: 1;
+	}
+
+	.swiper-item {
+		height: 100%;
+	}
+</style>

src/pages/order/index.vue

@@ -1,51 +1,354 @@
 <template>
-  <view class="content">
-    <image class="logo" src="/static/logo.png" />
-    <view class="text-area">
-      <text class="title">{{ title }}</text>
-    </view>
-    <uv-button type="primary" text="确定"></uv-button>
-    <uv-calendars insert @change="change" />
-    <uv-image src="https://cdn.uviewui.com/uview/album/1.jpg" mode="widthFix"></uv-image>
-    <uv-qrcode ref="qrcode" size="300px" value="https://h5.uvui.cn"></uv-qrcode>
-    <uv-switch v-model="open" loading></uv-switch>
+  <view class="container">
+    <scroll-view scroll-y="true" class="orders-scroll1" v-for="(item,index) in state.orderList" :key="index">
+      <view class="wrapper">
+        <view class="order-list">
+          <view class="order">
+
+            <view class="header">
+              <view class="flex-fill font-size-medium"></view>
+              <view class="status">
+                <view>
+                  未支付
+                </view>
+
+                <uv-icon name="arrow-right" size="16"></uv-icon>
+              </view>
+            </view>
+            <view class="images">
+              <image src="/static/mock/zhuti.jpg"></image>
+              <view class="good_name">{{ item.name }}</view>
+            </view>
+            <view class="info">
+              <view class="left">
+                <view>订单编号：{{ item.number }}</view>
+                <view>下单时间：{{ item.time }}</view>
+              </view>
+              <view class="right">￥{{ item.money }}</view>
+            </view>
+            <view class="action" style="text-align: right;">
+              <uv-button plain  type="primary" size="mini">{{ item.payment }}</uv-button>
+              <uv-button  type="error" size="mini" class="ml10" style="margin-left: 10px;">{{ item.delete }}</uv-button>
+<!--              <view class="button button_pay"
+                    style="width: 36px;text-align:center;font-size: 10px;">{{ item.payment }}
+              </view>
+              <view class="button button_del" hover-class="none"
+                    style="width: 25px;text-align:center;font-size: 10px;">{{ item.delete }}
+              </view>-->
+            </view>
+          </view>
+        </view>
+      </view>
+    </scroll-view>
   </view>
 </template>
 
-<script setup lang="ts">
-import { ref } from 'vue'
-const title = ref('Hello')
-const open = ref(false)
+<script lang="ts" setup>
+import {reactive, ref} from 'vue'
+import {onHide, onShow} from "@dcloudio/uni-app";
+
+
+const initState = () => ({
+  orderList: [{
+    name: "菌满堂野生菌火锅",
+    number: "DB23473207638761",
+    time: "2021-11-23 14:02:00",
+    money: "239.20",
+    payment: "去支付",
+    delete: "删除"
+  },
+    {
+
+      name: "菌满堂野生菌火锅",
+      number: "DB23473207638761",
+      time: "2021-11-23 14:02:00",
+      money: "239.20",
+      payment: "去支付",
+      delete: "删除"
+    },
+    {
+
+      name: "菌满堂野生菌火锅",
+      number: "DB23473207638761",
+      time: "2021-11-23 14:02:00",
+      money: "239.20",
+      payment: "去支付",
+      delete: "删除"
+    }
+  ]
+})
+
+const state = reactive(initState())
+
+onShow(() => {
+  uni.setNavigationBarTitle({title: '我的订单'})
+  let gd = getApp<any>().globalData;
+  if (!gd.token) {
+    console.error(gd)
+    return;
+  }
+  loadOrderList();
+});
 
-const change = () => {
-  console.log("change")
+onHide(() => {
+  Object.assign(state, initState());
+})
+
+const loadOrderList = () => {
+  //load order list
 }
+
 </script>
 
-<style>
-.content {
+<style lang="scss" scoped>
+.container {
+  background-color: #f6f6f6;
+}
+
+.font-size-lg {
+  border: none;
+  background-color: var(--theme_color);
+}
+
+.navbar {
+  height: calc(44px + var(--status-bar-height));
+  display: flex;
+  background-color: #ffffff;
+}
+
+.talk-btn {
+  height: 32px;
+  margin-left: 10px;
+  margin-top: 26px;
   display: flex;
-  flex-direction: column;
   align-items: center;
   justify-content: center;
+  font-size: 16px !important;
+  padding: 0 20rpx;
+  border-radius: 50rem !important;
+
+  image {
+    width: 40rpx;
+    height: 40rpx;
+    margin-right: 10px;
+  }
+}
+
+.tabbar {
+  /* #ifdef MP-WEIXIN */
+  // margin-top: 60px;
+  /* #endif */
+
+  height: 100rpx;
+  background-color: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  // margin-top: 100rpx;
+
+  .item {
+    height: 100%;
+    font-size: 32rpx;
+    color: #999;
+    font-weight: 400 !important;
+    display: flex;
+    align-items: center;
+
+    &.active {
+      color: #343434;
+      border-bottom: 4rpx solid #343434;
+    }
+  }
 }
 
-.logo {
-  height: 200rpx;
-  width: 200rpx;
-  margin-top: 200rpx;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: 50rpx;
+.swiper {
+  width: 100%;
+  height: calc(100vh - 44px);
 }
 
-.text-area {
+
+.history-order {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .menu {
+    padding: 18rpx 30rpx;
+    display: flex;
+    align-items: center;
+    color: #FFFFFF;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 10;
+
+    .item {
+      padding: 14rpx 30rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      image {
+        width: 40rpx;
+        height: 40rpx;
+        margin-right: 10rpx;
+      }
+
+      &.active {
+        color: var(--theme_color);
+        background-color: #ffffff;
+      }
+    }
+  }
+
+  .history-order-swiper {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.store-order-wrapper {
+  width: 100%;
+  height: 100%;
   display: flex;
+  flex-direction: column;
+  align-items: center;
   justify-content: center;
+  color: #999;
+  line-height: 1.3rem !important;
+
+  image {
+    width: 400rpx;
+    height: 333rpx;
+    margin-bottom: 40rpx;
+  }
+}
+
+.orders-scroll {
+  width: 100%;
+  height: 100%;
+  padding-top: 104rpx;
+}
+
+.orders-scroll1 {
+  width: 100%;
+  height: 100%;
+  padding-top: 20rpx;
+}
+
+.good_name {
+  padding-left: 30rpx;
+  padding-top: 15rpx;
+  color: #555;
+  font-weight: 600;
+  font-size: 14px;
 }
 
-.title {
-  font-size: 36rpx;
-  color: #8f8f94;
+.order-list {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+
+  .order {
+    background-color: #ffffff;
+    padding: 30rpx 40rpx;
+    margin-bottom: 18rpx;
+
+    .header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .status {
+        font-size: 14px;
+        color: #595959;
+        display: flex;
+        align-items: center;
+
+        image {
+          width: 30rpx;
+          height: 30rpx;
+          margin-left: 10px;
+        }
+      }
+    }
+
+    .images {
+      display: flex;
+      padding: 30rpx 0;
+
+      image {
+        flex-shrink: 0;
+        width: 150rpx;
+        height: 112.5rpx;
+      }
+    }
+
+    .info {
+      display: flex;
+      align-items: center;
+      margin-bottom: 30rpx;
+
+      .left {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        font-size: 12px;
+        color: #7a7a7a;
+
+        // view {
+        // 	margin-bottom: 10rpx;
+        // 	font-size: 12px;
+
+        // 	&:last-child {
+        // 		margin-bottom: 0;
+        // 	}
+        // }
+      }
+
+      .right {
+        font-size: 32rpx;
+        color: #343434;
+      }
+    }
+
+    .action {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+
+
+      button {
+        margin-left: 30rpx;
+        font-size: 16px;
+      }
+    }
+  }
+
+  .button {
+    margin-left: 30rpx;
+    padding: 15rpx 20rpx;
+    font-size: 16px;
+    border-radius: 70rpx;
+    background-color: #eee;
+
+    &_pay {
+      background-color: var(--theme_color);
+      color: white;
+      border: none;
+      border-radius: 70rpx;
+    }
+
+    &_del {
+      color: white;
+      background-color: #F56C6C;
+    }
+
+    &_re {
+      color: white;
+      background-color: #5CB87A;
+    }
+  }
 }
 </style>

src/pages/user/index.vue

@@ -1,54 +1,259 @@
 <template>
-  <view class="content">
-    <image class="logo" src="/static/logo.png" />
-    <view class="text-area">
-      <text class="title">{{ title }}</text>
+
+    <image src="/static/user/user-bg.png" mode="widthFix" class="bg" />
+
+  <block>
+    <view class="container" :style="containerStyle">
+      <view class="header flex-column">
+        <view class="flex-grow flex-center">
+          <image
+              src="/static/user/round.png"
+              mode="heightFix"
+              style="height: 100%"
+          />
+        </view>
+        <view class="main flex-shrink">
+          <view
+              class="avatar"
+              @click="toPage(2)"
+              :style="{
+              'background-image': `url(${user.avatar})`,
+            }"
+          ></view>
+          <view class="phone fs-40 fw-500">{{ user.mobilePhoneFormat }}</view>
+
+          <view class="money flex-align-center" @click="toPage(-1)">
+            <uv-icon name="red-packet" size="24"></uv-icon>
+            <view>¥{{user.balance}}</view>
+<!--            <view class="color-primary ml-12" style="font-size: 16px"
+            >我的钱包
+            </view
+            >
+            <view class="fs-40 fw-500 ml-auto mt-12 color-primary"></view>
+            <view class="fs-60 fw-500 ml-12 mr-48 color-primary">{{
+                user.balance
+              }}
+            </view>-->
+          </view>
+        </view>
+      </view>
+
+      <view class="body">
+        <block v-for="(item, index) in menu" :key="index">
+          <view
+              class="menu-item"
+              v-if="
+              index !== menu.length - 1
+            "
+              @click="toPage(index)"
+          >
+            <view class="menu-item_left">
+              <image :src="'/static/user/'+index+'.png'"></image>
+              <view class="menu-item_left-title">{{ item.title }}</view>
+            </view>
+            <view class="menu-item_right">
+              <uv-icon name="arrow-right" size="16"></uv-icon>
+            </view>
+          </view>
+        </block>
+      </view>
     </view>
-    <uv-button type="primary" text="确定"></uv-button>
-    <uv-calendars insert @change="change" />
-    <uv-image src="https://cdn.uviewui.com/uview/album/1.jpg" mode="widthFix"></uv-image>
-    <uv-qrcode ref="qrcode" size="300px" value="https://h5.uvui.cn"></uv-qrcode>
-    <uv-switch v-model="open" loading></uv-switch>
-
-<!--    <tab-bar></tab-bar>-->
-  </view>
+  </block>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-// import TabBar from "@/components/tab-bar";
-const title = ref('Hello')
-const open = ref(false)
+import {onLoad, onShow} from "@dcloudio/uni-app";
+import {ref} from "vue";
 
-const change = () => {
-  console.log("change")
-}
+const containerStyle = ref({});
+const user = ref<any>({
+  avatar: "",
+  mobilePhoneFormat: '15012341234',
+  balance: '2345.67',
+});
+const service = ref("");
+const menu = ref([
+  {
+    title: "我的卡包",
+    path: "/pages-charge/card/card",
+  },
+  {
+    title: "充电订单",
+    path: "/pages-charge/orders/orders",
+  },
+  {
+    title: "我的收藏",
+    path: "/pages-user/collect/collect",
+  },
+  {
+    title: "个人信息",
+    path: "/pages-user/profile/profile",
+  },
+  {
+    title: "联系我们",
+    path: "",
+  },
+  {
+    title: "常见问题",
+    path: "/pages-common/faq/faq",
+  },
+  {
+    title: "电站列表",
+    path: "/pages/list/list",
+  },
+]);
+const toPage = (index: number) => {
+  if (index < 0) {
+    uni.navigateTo({
+      url: "/pages-user/wallet/wallet",
+    });
+    return;
+  }
+  if (index === 4) {
+    uni.makePhoneCall({
+      phoneNumber: service.value,
+    });
+    return;
+  }
+  const item = menu.value[index];
+  uni.navigateTo({
+    url: item.path + (index === 5 ? `?service=${service.value}` : ""),
+  });
+};
+
+onLoad(() => {
+  uni.setNavigationBarTitle({title: '个人中心'})
+  const bound = uni.getMenuButtonBoundingClientRect();
+  containerStyle.value = {
+    top: `${bound.bottom + 10}px`,
+  };
+  // fetchContact().then((res) => {
+  //   if (res && res.mobile) {
+  //     service.value = res.mobile;
+  //   }
+  // });
+});
+onShow(() => {
+  // fetchProfile().then((res) => {
+  //   res.mobilePhoneFormat =
+  //       res.mobilePhone.slice(0, 3) + "****" + res.mobilePhone.slice(7);
+  //   res.avatar = res.avatar
+  //       ? res.avatar
+  //       : "https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0";
+  //   user.value = res;
+  // });
+});
 </script>
 
-<style>
-.content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
+<style lang="scss" scope>
+.bg {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 660rpx;
 }
 
-.logo {
-  height: 200rpx;
-  width: 200rpx;
-  margin-top: 200rpx;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: 50rpx;
+.container {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100vh;
+  width: 100%;
+  overflow-y: auto;
 }
 
-.text-area {
-  display: flex;
-  justify-content: center;
+.header {
+  //height: 400rpx;
+  width: 100%;
+
+  .main {
+    height: 334rpx;
+    background: rgba(254, 255, 255, 0.7);
+    border-radius: 40rpx 40rpx 0 0;
+    position: relative;
+    text-align: center;
+
+    .avatar {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      top: -50rpx;
+      width: 110rpx;
+      height: 110rpx;
+      border: 2rpx solid #ffffff;
+      filter: drop-shadow(0px 4rpx 8rpx rgba(0, 24, 60, 0.1));
+      background-size: cover;
+      background-repeat: no-repeat;
+      border-radius: 50%;
+    }
+
+    .phone {
+      padding-top: 78rpx;
+      color: #000;
+    }
+
+    .money {
+      //position: absolute;
+      //left: 0;
+      //bottom: 0;
+      width: 690rpx;
+      height: 118rpx;
+      background: #feffff;
+      border-radius: 120rpx;
+      margin: 0 auto;
+      margin-top: 30rpx;
+      color: #000000;
+      padding: 0 24rpx 0 40rpx;
+
+      display: flex;
+      align-content: center;
+      align-items: center;
+
+    }
+  }
 }
 
-.title {
-  font-size: 36rpx;
-  color: #8f8f94;
+.body {
+  width: 100%;
+  background-color: #fff;
+  padding: 0rpx 30rpx;
+
+  .menu-item {
+    display: inline-flex;
+    justify-content: space-between;
+    padding: 4rpx 10rpx;
+    background-color: #fff;
+    height: 90rpx;
+    border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
+    align-items: center;
+    width: 100%;
+
+    &_left {
+      display: flex;
+
+
+      image {
+        width: 52rpx;
+        height: 52rpx;
+        margin-right: 20rpx;
+      }
+
+      &-title {
+        font-size: 13px;
+      }
+    }
+
+    &_right {
+      width: 120rpx;
+    }
+
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
 }
+
+
 </style>

src/uni.scss

@@ -76,150 +76,3 @@ $uni-color-subtitle: #555; // 二级标题颜色
 $uni-font-size-subtitle: 18px;
 $uni-color-paragraph: #3f536e; // 文章段落颜色
 $uni-font-size-paragraph: 15px;
-
-///* flex布局 */
-.flex {
-  display: flex;
-}
-
-.flex-inline {
-  display: inline-flex;
-}
-
-
-.flex-auto {
-  flex: 1;
-  overflow: hidden;
-}
-
-.flex-center {
-  @extend .flex;
-  flex-direction: column;
-  width: 100%;
-  overflow: hidden;
-}
-
-.flex-margin {
-  margin: auto;
-}
-
-.flex-warp {
-  display: flex;
-  flex-wrap: wrap;
-  align-content: flex-start;
-  margin: 0 -5px;
-
-  .flex-warp-item {
-    padding: 5px;
-
-    .flex-warp-item-box {
-      width: 100%;
-      height: 100%;
-    }
-  }
-}
-
-.flex-just-between {
-  justify-content: space-between;
-}
-
-.flex-just-around {
-  justify-content: space-around;
-}
-
-.flex-justify-center {
-  justify-content: center;
-}
-
-.flex-align-items-center {
-  align-items: center;
-  align-content: center;
-}
-
-.flex-just-end {
-  justify-content: flex-end;
-}
-
-
-@for $i from 0 through 30 {
-  .wd#{100+$i*10} {
-    width: #{100+$i*10}px !important;
-  }
-}
-
-
-.w50 {
-  width: 50% !important;
-}
-
-.w100 {
-  width: 100% !important;
-}
-
-.h100 {
-  height: 100% !important;
-}
-
-.vh100 {
-  height: 100vh !important;
-}
-
-
-/* 字体大小全局样式
-------------------------------- */
-@for $i from 10 through 32 {
-  .font#{$i} {
-    font-size: #{$i}px !important;
-  }
-}
-
-/* 外边距、内边距全局样式
-------------------------------- */
-@for $i from 1 through 35 {
-  .mt#{$i} {
-    margin-top: #{$i}px !important;
-  }
-  .mr#{$i} {
-    margin-right: #{$i}px !important;
-  }
-  .mb#{$i} {
-    margin-bottom: #{$i}px !important;
-  }
-  .ml#{$i} {
-    margin-left: #{$i}px !important;
-  }
-  .pt#{$i} {
-    padding-top: #{$i}px !important;
-  }
-  .pr#{$i} {
-    padding-right: #{$i}px !important;
-  }
-  .pb#{$i} {
-    padding-bottom: #{$i}px !important;
-  }
-  .pl#{$i} {
-    padding-left: #{$i}px !important;
-  }
-  .pv#{$i} {
-    padding: #{$i}px auto !important;
-  }
-
-  .ph#{$i} {
-    padding: auto #{$i}px !important;
-  }
-
-  .pd#{$i} {
-    padding: #{$i}px !important;
-  }
-
-  .mv#{$i} {
-    margin: #{$i}px auto !important;
-  }
-
-  .mh#{$i} {
-    margin: auto #{$i}px !important;
-  }
-  .mg#{$i} {
-    margin: #{$i}px #{$i}px !important;
-  }
-}