wx/pages/my/index.vue

<template>
  <view class="box">
    <!-- 背景色 -->
    <view class="background-color">
      <!-- 登录 -->
      <view @click="login" class="register">
        <view class="register-text">您暂未登录,点击下方登录按钮</view>
        <view class="register-button">登录/注册</view>
      </view>
    </view>
    <!-- 会员 -->
    <view class="member">
      <view class="">图片</view>
      <view class="member-text">升级会员,订水省钱</view>
      <view class="member-buttom">立即充值</view>
    </view>
    <!-- 我的订单 -->
    <view class="my-order">
      <view @click="orders" class="my-order-up">
        <view>我的订单</view>
        <view class="my-order-up-left">
          <view style="display: flex; align-items: center; font-size: 0.9rem; color: #838999">全部订单</view>
          <view>
            <uni-icons type="right" size="18"></uni-icons>
          </view>
        </view>
      </view>
      <view class="my-order-botton">
        <view v-for="(item, index) in order" :key="index" class="my-order-botton-box">
          <uni-icons color="#00ba26" :type="item.icon" size="30"></uni-icons>
          <view class="">{{ item.text }}</view>
        </view>
      </view>
    </view>
    <!-- 更多服务 -->
    <view @click="services(item.id)" v-for="item in serve" :key="item.id" class="more-services">
      <view class="more-services-one">
        <view class="more-services-one-text">
          <view><uni-icons :type="item.icon" size="26"></uni-icons></view>
          <view style="margin-left: 1rem">{{ item.text }}</view>
        </view>
        <view><uni-icons type="forward" size="26"></uni-icons></view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
const order = ref([
  {
    text: '待付款',
    icon: 'cart-filled'
  },
  {
    text: '待配送',
    icon: 'cart-filled'
  },
  {
    text: '配送中',
    icon: 'cart-filled'
  },
  {
    text: '已完成',
    icon: 'cart-filled'
  }
]);
const serve = ref([
  {
    text: '我的地址',
    icon: 'location-filled',
    id: 0
  },
  {
    text: '微信客服',
    icon: 'weixin',
    id: 1
  }
]);
// 我的订单
const orders = () => {
  console.log(1);
  uni.navigateTo({
    url: '/pages/my/components/myOrder'
  });
};
//我的登录
const login = () => {
  uni.navigateTo({
    url: '/pages/my/components/login'
  });
};
// 跳转
const services = (id) => {
  console.log(serve.value[0].id);
  if (serve.value[0].id === id) {
    uni.navigateTo({
      url: '/pages/my/components/myAddress'
    });
  }
};
</script>

<style lang="scss" scoped>
// 登录
.background-color {
  background-color: #00ba26;
  height: 8rem;
  display: flow-root;
  .register {
    margin: 3rem auto 0.5rem;
    width: 92%;
    background-color: #fff;
    text-align: center;
    border-radius: 1rem;
    padding-bottom: 3rem;
    .register-text {
      padding: 1rem 0;
      color: #6e737d;
    }
    .register-button {
      background-color: #00ba26;
      width: 10rem;
      height: 2.5rem;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 1.5rem;
      color: #fff;
    }
  }
}
// 会员
.member {
  width: 83%;
  margin: 4.8rem auto 0;
  height: 4.5rem;
  border-radius: 0.5rem;
  background-color: #000;
  color: #f0d3a9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  .member-text {
    margin-left: -2.5rem;
    font-size: 0.9rem;
  }
  .member-buttom {
    background-color: #f0d3a9;
    color: #000;
    font-size: 0.9rem;
    width: 5rem;
    height: 2rem;
    line-height: 2rem;
    border-radius: 1rem;
    text-align: center;
  }
}
//我的订单
.my-order {
  width: 92%;
  margin: 0.5rem auto 1rem;
  .my-order-up {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    padding: 0.8rem 0.5rem;
    border-bottom: 1px solid #f0f2f7;
    .my-order-up-left {
      display: flex;
    }
  }
  .my-order-botton {
    background-color: #fff;
    display: flex;

    .my-order-botton-box {
      width: 4rem;
      height: 4rem;
      display: flex;
      flex-direction: column;
      margin: 0.2rem 0.8rem;
      align-items: center;
    }
  }
}
// 更多服务
.more-services {
  background-color: #fff;
  .more-services-one {
    width: 86%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    border-bottom: 1rpx solid #eee;
    .more-services-one-text {
      display: flex;
      align-items: center;
    }
  }
  .more-services-tow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 2rem;
  }
}
</style>