<template>
  <page-meta :page-style="themeColor"></page-meta>
  <view class="my-shop">
    <!--顶部个人信息-->
    <view class="top">
      <image class="top-image" :src="$util.img('public/static/img/futures/my_shop_top_bg.png')" mode="widthFix"></image>
      <view class="top-content">
        <image class="avatar" :src="$util.img('upload/1/headimg/20230222/20230222053005167705820555566.png')" mode="widthFix"></image>
        <view class="nickname">187****4859的小店</view>
        <view class="link-button">
          点击完善信息<i class="icondiy icon-system-arrow-right-s-line"></i>
        </view>
      </view>
    </view>
    <!--菜单列表-->
    <view class="menu-list">
      <view class="title">小店订单</view>
      <view class="menu-list-content">
        <view class="menu-block" v-for="(item,index) in menu" :key="index">
          <view class="left" :style="{ background: item.background}">
            <image class="top-image" :src="$util.img(item.image)" mode="widthFix"></image>
          </view>
          <view class="right">
            <view class="block-title">{{ item.title }}</view>
            <view class="block-desc">{{ item.desc }}</view>
          </view>
          <view class="block-icon">
            <i class="icondiy icon-system-arrow-right-s-line"></i>
          </view>
        </view>
      </view>
    </view>
    <!--登录弹框-->
    <ns-login ref="login"></ns-login>
    <!--加载动画-->
    <loading-cover ref="loadingCover"></loading-cover>
  </view>
</template>

<script>
export default {
  data() {
    return {
      menu: [
        {
          image: 'public/static/img/futures/my_shop_order_sell.png',
          title: '小店销售订单',
          desc: '显示当前全部正在出售中的订单',
          background: '#eaebff',
        },{
          image: 'public/static/img/futures/my_shop_order_buy.png',
          title: '小店采购订单',
          desc: '显示当前全部已采购的订单',
          background: '#fbebeb',
        },{
          image: 'public/static/img/futures/my_shop_order_stock.png',
          title: '小店库存订单',
          desc: '显示当前全部正在库存中的订单',
          background: '#e2fdf8',
        }
      ],



    };
  },
  components: {},
  mixins: [],
  onLoad(option) {},
  onShow() {},
  onReady(){
    // 判断是否登录
    if (!uni.getStorageSync('token')) this.$refs.login.open('/pages_promotion/futures/seckill');


    if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
  },
  methods: {









  },
  onBackPress(options) {
    if (options.from === 'navigateBack') return false;
    this.$util.redirectTo('/pages/member/index');
    return true;
  }
};
</script>

<style lang="scss" scoped>
.my-shop{
  background: #f5f6fa;
  min-height: 100vh;

  .top{
    width: 100%;
    position: relative;
    display: inline-flex;
    border-bottom-left-radius: 35rpx;
    border-bottom-right-radius: 35rpx;
    overflow: hidden;

    .top-image{
      width: 100%;
    }
    .top-content{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: inline-flex;
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: center;
      .avatar{
        --avatar-size--: 120rpx;
        width: var(--avatar-size--) !important;
        height: var(--avatar-size--) !important;
        border-radius: 50%;
        border: 6rpx solid #fef6f5;
      }
      .nickname{
        height: 60rpx;
        line-height: 60rpx;
        font-size: 30rpx;
        color: #ffe0e1;
      }
      .link-button{
        height: 60rpx;
        line-height: 60rpx;
        font-size: 26rpx;
        color: #a7484c;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        flex-wrap: nowrap;
        i{
          font-size: 36rpx;
          color: #a7484c;
        }
      }
    }
  }
  .menu-list{
    width: 100%;
    display: inline-flex;
    flex-direction: column;
    padding: 30rpx;

    .title{
      height: 60rpx;
      line-height: 60rpx;
      font-size: 34rpx;
      font-weight: bold;
      width: calc(100% - (30rpx * 3));
      padding-left: 30rpx;
      position: relative;
    }
    .title::after{
      content: "";
      position: absolute;
      left: 0;
      top: calc((100% - 45rpx) / 2);
      height: 45rpx;
      width: 10rpx;
      background: #ef5452;
    }
    .menu-list-content{
      width: calc(100% - (30rpx * 2));

      .menu-block{
        --block-size--: 150rpx;
        --left-size--: calc(var(--block-size--) - 40rpx);
        --icon--width: 50rpx;
        width: 100%;
        height: var(--block-size--);
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: flex-start;
        align-items: center;
        background: #FFFFFF;
        border-radius: 20rpx;
        margin-top: 30rpx;
        box-shadow: 4rpx 4rpx 6rpx #e9eaed;

        .left{
          height: var(--left-size--);
          width: var(--left-size--);
          margin: 0 30rpx;
          display: inline-flex;
          flex-direction: row;
          flex-wrap: nowrap;
          align-content: center;
          justify-content: center;
          align-items: center;
          border-radius: 40rpx;
          .top-image{
            height: 50% !important;
            width: 50% !important;
          }
        }
        .right{
          width: calc(100% - var(--left-size--) - var(--icon--width) - (30rpx * 2));
          height: 100%;
          display: inline-flex;
          flex-direction: column;
          flex-wrap: nowrap;
          justify-content: center;
          align-items: flex-start;
          .block-title{
            font-size: 30rpx;
            font-weight: bold;
          }
          .block-desc{
            font-size: 26rpx;
            color: #afafaf;
          }
        }
        .block-icon{
          height: 100%;
          width: var(--icon--width);
          display: inline-flex;
          flex-direction: row;
          flex-wrap: nowrap;
          align-content: center;
          justify-content: flex-start;
          align-items: center;
          i{
            font-size: 40rpx;
          }
        }
      }
    }
  }
}
</style>
