app-AgricultureSmart/uniapp/components/my-userinfo/my-userinfo.vue

<template>
  <view>
    <image src="/static/home/BG.jpg" class="bgImg" ></image>
<!--    这是user信息-->
<!--    <button v-on:click="test">测试</button>-->
<!--    <van-image src="static/home/BG.jpg"></van-image>-->
<!--    nih-->

<!--    <view class="my-grid">-->
<!--      <van-grid clickable direction="horizontal" :border="true" :column-num="4" :square="true" >-->
<!--        &lt;!&ndash;      <van-icon name="cash-o" />&ndash;&gt;-->
<!--        &lt;!&ndash;      <van-icon name="paid" />&ndash;&gt;-->
<!--        &lt;!&ndash;      <van-icon name="orders-o" />&ndash;&gt;-->
<!--        &lt;!&ndash;      <van-icon name="like-o" />&ndash;&gt;-->
<!--        <van-grid-item icon="like-o" text="收藏"-->
<!--                       link-type="navigateTo"-->
<!--                       url="/pages/dashboard/index"-->

<!--        />-->
<!--        <van-grid-item icon="cash-o" text="余额" />-->
<!--        <van-grid-item icon="paid" text="卡券" />-->
<!--        <van-grid-item icon="orders-o" text="订单" />-->
<!--      </van-grid>    </view>-->




    <!-- 面板区域 -->
    <view class="panel-list" style="margin-top: 20px">
      <!-- 第1个面板 -->
      <view class="panel">
        <view class="panel-body">
          <view class="panel-item">
            <van-icon name="star-o" size="25"></van-icon>
            <text>收藏</text>
          </view>
          <view class="panel-item">
            <van-icon name="balance-o" size="25"></van-icon>
            <text>红包</text>
          </view>
          <view class="panel-item">
            <van-icon name="paid" size="25"></van-icon>
            <text>卡券</text>
          </view>
          <view class="panel-item">
            <van-icon name="cash-o" size="25"></van-icon>
            <text>余额</text>
          </view>

        </view>
      </view>
      <!-- 第2个面板 -->
      <view class="panel">
        <view class="panel-title" style="font-family: 'Montserrat', sans-serif;font-weight: bolder">我的订单</view>
        <view class="panel-body">
          <view class="panel-item" @click="toOrders(StaticState().ORDER.UNPAY)">
            <van-icon name="gold-coin-o" size="28"/>
            <text>代付款</text>
          </view><view class="panel-item" @click="toOrders(StaticState().ORDER.UNRECEIVE)">
          <van-icon name="gift-card-o" class="icon" size="30"/>
          <text>代收货</text>
        </view><view class="panel-item" @click="toOrders(StaticState().ORDER.REFUND)">
          <van-icon name="cash-back-record-o" class="icon" size="29"/>
          <text>退款/退货</text>
        </view><view class="panel-item" @click="toOrders(StaticState().ORDER.UNCOMMENT)">
          <van-icon name="records-o" class="icon" size="26"/>
          <text>待评价</text>
        </view>

        </view>
      </view>
      <!-- 第3个面板 -->
      <view class="panel">
        <view class="panel-list-item">
          <text>收货地址</text>
          <van-icon type="arrowright" size="15"></van-icon>
        </view>
        <view class="panel-list-item">
          <text>联系客服</text>
          <van-icon type="arrowright" size="15"></van-icon>
        </view>
        <view class="panel-list-item" @click="logout">
          <text>退出登录</text>
          <van-icon type="arrowright" size="15"></van-icon>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
import {mapState,mapMutations} from 'vuex'
import {StaticState} from "@/store/StaticState";
export default {
  name: "my-userinfo",
  data() {
    return {};
  },
  methods: {
    StaticState,

    test() {
      console.log(1, "test");
    },
    beforeMount() {
      console.log(1, "beforeMount");
    },
    toOrders(pagetype) {
      // console.log('----------------------')
      // console.log(this.StaticState)
      // console.log(this.StaticState.ORDER)
      // console.log('toLogin')
      let self =this
      console.log(pagetype,"这是我传参的参数")
      uni.navigateTo({
        url: '/subpkg/order/order?pagetype=' + pagetype ,// 跳转至 subpkg 中的 selShop 页面
        success() {
          console.log('url跳转成功')
          setTimeout(() => {

          }, 500); // 延迟 1000 毫秒（即 1 秒）后调用 getToken() 函数
        },
        fail() {
          console.log('url跳转失败')
        }
      });
    }
  }
};
</script>

<style lang="scss">

.my-grid{
  position: absolute;
  //border-radius: 20px;
  background-color: antiquewhite;
  width: 90%;
  left: 5%;
  height: 200px;
  border-radius: 100px;
  margin-top: 10px;
}
.bgImg{
  position: absolute;
  width: 95%;
  left: 2.5%;
  top: 1%;
}












.panel-list{
  padding: 0 10px;
  position: relative;
  top: -10px;
  .panel{
    background-color: white;
    border-radius: 10px;
    margin-bottom: 8px;
    .panel-title{
      line-height: 40px;
      padding-left: 10px;
      font-size: 15px;
      border-bottom: 1px solid #f4f4f4;
    }
    .panel-body{
      display: flex;
      justify-content: space-around;
      .panel-item{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        padding: 10px 0;
        font-size: 13px;
        .icon{
          width: 35px;
          height: 35px;
        }
      }
    }
  }
  //.panel:nth-child(1){
  //  margin-top: 10px;
  //  border-radius: 10px;
  //}
}

.panel-list-item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  padding: 0 10px;
  line-height: 45px;


}
</style>