uni-aiyangniu/pages/myCenter/myCenter.vue

<template>
  <view class="myCenter" :style="{backgroundImage: 'url('+imageURL+')'}">
    <view class="set_class" @click="goSetting">
      <u-icon name="setting"size="25"></u-icon>
    </view>
    <view class="urowClass">
      <u-row>
        <u-col span="1" >
        </u-col>
        <u-col span="2" >
          <u-image  src="/static/login/1.jpg" shape="circle" width="140rpx" height="140rpx"></u-image>
        </u-col>
        <u-col span="7">
         <view class="nameClass">王小二</view>
        </u-col>
      </u-row>
    </view>
    <view class="gridClass">
      <u-grid :border="false" col="4" >
        <u-grid-item  v-for="(listItem,listIndex) in list" :key="listIndex">
          <text>{{listItem.name}}</text>
          <text class="bottomText">{{listItem.title}}</text>
        </u-grid-item>
      </u-grid>
    </view>
    <view class="menuClass">
      <view class="title_class">
        <u-row>
          <u-col span="9">我的订单</u-col>
          <u-col span="3"><view style="text-align: center;">全部订单 ></view></u-col>
        </u-row>
      </view>
      <u-grid :border="false" col="5" >
        <u-grid-item >
          <view class="badgeClass"><u-badge bgColor="#D62D4A" value="2" class="badgeClass"></u-badge></view>
          <image class="imgClass" src="@/static/myCenter/1.jpg" />
          <text>代付款</text>
        </u-grid-item>
        <u-grid-item>
          <view class="badgeClass"><u-badge bgColor="#D62D4A" value="2" class="badgeClass"></u-badge></view>
          <image class="imgClass"  src="@/static/myCenter/2.jpg" />
          <text >待发货</text>
        </u-grid-item>
        <u-grid-item >
          <view class="badgeClass"><u-badge bgColor="#D62D4A" value="2" class="badgeClass"></u-badge></view>
          <image class="imgClass" src="@/static/myCenter/3.jpg"/>
          <text >待收货</text>
        </u-grid-item>
        <u-grid-item > 
          <view class="badgeClass"><u-badge bgColor="#D62D4A" value="2" class="badgeClass"></u-badge></view>
          <image class="imgClass" src="@/static/myCenter/4.jpg"/>
          <text >待评价</text>
        </u-grid-item>
        <u-grid-item>
          <view class="badgeClass"><u-badge bgColor="#D62D4A" value="2" ></u-badge></view>
          <image class="imgClass" src="@/static/myCenter/5.jpg"/>
          <text >售后</text>
        </u-grid-item>
      </u-grid>
    </view>
    <view class="myPurse">
      <u-row>
        <u-col span="1" >
          <u-image class="img_class" width="30px" height="30px" src="/static/myCenter/pingan.png"></u-image>
        </u-col>
        <u-col span="8" >
          <text>爱养牛钱包</text>
        </u-col>
        <u-col span="3">
         <text >查看余额 ></text>
        </u-col>
      </u-row>
    </view>
    <view class="bott">
      <view class="title">必备工具</view>
      <view class="tool_class">
        <u-grid :border="false" col="4" >
          <u-grid-item style="margin-top:15rpx" v-for="(tool,index) in toolList" :key="index">
            <u-image class="img_class" width="40px" height="40px" :src="tool.src"></u-image>
            <text class="grid-text">{{tool.name}}</text>
          </u-grid-item>
        </u-grid>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
         list: [{
            name: '2',
            title: '积分'
          },
          {
            name: '0',
            title: '优惠券'
          },
          {
            name: '2',
            title: '购物车'
          },
          {
            name: '24',
            title: '收藏夹'
          },
        ],
        imageURL:'/static/login/bg5.jpg',
        toolList:[{
            src: '/static/myCenter/pingtuan.png',
            name: '物料预定'
          },
          {
            src: '/static/myCenter/caigoujuece.png',
            name: '奶款担保'
          },
          {
            src: '/static/myCenter/daikou.png',
            name: '我的代扣'
          },
          {
            src: '/static/myCenter/jifen.png',
            name: '我的积分'
          },
          {
            src: '/static/myCenter/milkPrice.png',
            name: '物料预定'
          },
          {
            src: '/static/myCenter/piliang.png',
            name: '物料预定'
          },
          {
            src: '/static/myCenter/companyManager.png',
            name: '物料预定'
          },
        ],
      };
    },
    methods:{
      goSetting(){
        uni.navigateTo({ url: '/pages/myCenter/setting'})
      }
    }
  }
</script>

<style lang="scss">
  @import 'myCenter.scss';
</style>