fish_app/src/pages/member/index.jsx

import { Component } from "react";
import { View, Text, Image } from "@tarojs/components";
import { AtIcon } from "taro-ui";
import Taro from "@tarojs/taro";
import "./index.less";
import vip from "../../images/member/vip.png";
import home from "../../images/nav/home.png";
import toDetail from "../../images/member/toDetail.png";
import warning from "../../images/member/warning.png";
import withdrawable from "../../images/member/withdrawable.png";
import order from "../../images/member/order.png";
export default class Index extends Component {
  componentWillMount() {}

  componentDidMount() {}

  componentWillUnmount() {}

  componentDidShow() {}

  componentDidHide() {}

  render() {
    return (
      <View className="member">
        <View className="member-bg"></View>
        <View className="member-content">
          {/* 会员信息卡 */}
          <View className="member-info-card">
            <View className="member-info-card-header">
              <Image className="avatar" src="" />
              <View className="member-info-card-header-text">
                <Text className="user-name">会员</Text>
                <View className="member-info-card-header-text-level">
                  <Text className="level-text">店长</Text>
                  <Image className="level-icon" src={vip} />
                </View>
              </View>
            </View>
            {/* 我的小店 */}
            <View onClick={() => Taro.navigateTo({ url: `/pages/storeManagement/index?isManager=${true}` })} className="my-shop">
              <Image className="my-shop-icon" src={home} />
              <Text className="my-shop-text">我的小店</Text>
            </View>
          </View>
          {/* 预估收益 */}
          <View className="estimated-income">
            <Text className="estimated-income-title">预估收益</Text>
            <View className="estimated-income-content">
              <View className="income-item">
                <Text className="amount">0.00</Text>
                <Text className="label">今日预估收益</Text>
              </View>
              <View className="divider"></View>
              <View className="income-item">
                <Text className="amount">0.00</Text>
                <Text className="label">累计收益</Text>
              </View>
            </View>
            <view onClick={() => Taro.navigateTo({ url: `/pages/earningsDetail/index` })} className="estimated-income-detail">
              收益详情
              <Image className="to-detail" src={toDetail} />
            </view>
          </View>
          {/* 可提现金额 */}
          <View className="withdrawable-amount">
            <View className="withdrawable-amount-header">
              <Image className="withdrawable-amount-icon" src={withdrawable} />
              <Text className="withdrawable-amount-title">可提现金额</Text>
            </View>
            <View className="withdrawable-amount-content">
              <View className="left">
                <Text className="amount">¥0.00</Text>
                <View className="warning-icon-box">
                  <Image className="warning-icon" src={warning} />
                  <Text className="warning-text">未完成提现认证</Text>
                </View>
              </View>
              <View className="right">点击提现</View>
            </View>
          </View>
          {/* 今日订单 */}
          <View className="today-order">
            <View className="today-order-header">
              <View className="today-order-header-left">
                <Image className="today-order-icon" src={order} />
                <Text className="today-order-title">今日订单</Text>
              </View>
              <View className="today-order-header-right">
                历史订单
                <AtIcon value='chevron-right' size='10' color='#A1A1A1'></AtIcon>
              </View>
            </View>
            <View className="today-order-content">
              <View className="order-item">
                <Text className="label">订单总量</Text>
                <Text className="amount">0</Text>
              </View>
              <View className="order-item">
                <Text className="label">推广订单</Text>
                <Text className="amount">0</Text>
              </View>
              <View className="order-item">
                <Text className="label">购买历史</Text>
                <Text className="amount">0</Text>
              </View>
            </View>
          </View>
        </View>
      </View>
    );
  }
}