index.vue 2.95 KB
<template>
	<view class="container">
    <Navbar bgColor="#ff630c" title="配送工主页" :textColor="'#ffffff'" :canBack="true"></Navbar>
    <view class="topContentCss"></view>
    <view class="cardAreaCss" >
      <!-- 员工信息 -->
      <userInfoCard :userInfo="userInfoData" :orderList="orderInfoList"></userInfoCard>
      <!-- 头部气瓶背景文字 -->
      <!-- 消息轮播 -->
      <u-notice-bar class="margin-top" :text="text" direction="column" color="#EB5C11" bgColor="#F1E4DB" speed="50"
                    url="/pages/componentsB/tag/tag"></u-notice-bar>
<!--      <functionCard ></functionCard>-->
    </view>
	</view>
</template>

<script>
import orderImg from '@/static/images/appList/otherImg/order.png'
import smokeAlarmImg from '@/static/images/appList/otherImg/smokeAlarm.png'
import userInfoImg from '@/static/images/mine/userInfo.png'
import userInfoCard from "./components/userInfoCard";
import functionCard from "./components/functionCard"
export default {
  components:{
    userInfoCard,
    functionCard
  },
  onLoad(data){
    if(data.ygbh){
      this.getDetailData(data.ygbh);
    }
    console.log('打印data',data);
  },
  mounted(){},
  data(){
    return {
      orderInfoList:[
        {
          key:'ljpsdd',
          imgSrc:orderImg,
          name:'累计配送订单',
          value:25
        },
        {
          key:'ljpsqp',
          imgSrc:smokeAlarmImg,
          name:'累计配送气瓶',
          value:25
        }
      ],
      text: [
        '为了您和家人的安全,请不要使用过期的石油气钢瓶',
        '温馨提示'
      ],
      userInfoData:{
        imgSrc:userInfoImg,
        name:'任巧生',
        address:'孝感城南液化石油气',
        phone:'181****4021'
      }
    }
  },
  methods:{
    async getDetailData(ygbhCode){
      const result = await this.$api.gasApi.userDetailInfoPort({code:ygbhCode});
      const { value } = result;
      this.userInfoData.phone = value.ffzrlxfs;
      this.userInfoData.name = value.fxm;
      this.userInfoData.address = value.fssczmc;
      this.orderInfoList = await this.$assignValues(value,this.orderInfoList);
      this.$forceUpdate();

      console.log('打印获取员工详细信息的result===>',result);

    }
  },

}
</script>

<style lang="scss" scoped>
.container{
  ::v-deep.u-icon__icon{
    color: #ffffff!important;
  }
  .topContentCss {
    position: relative;
    width: 100%;
    height: 200px;
    //background: #EA5504;
    background: linear-gradient(180deg, rgba(255, 99, 12, 1) 0%, rgba(242, 244, 243, 1) 100%);
    border-radius: 0 0 30px 30px;
    color: #fff;

    .topBarCss {
      height: 65px;
    }

    .authCss {
      border-radius: 30px 0 0 30px;
      background: #fff;
      // width: 0px;
      padding: 5px;
    }

    .chatCss {
      // position: absolute;
      // margin: -10px 0 0 -10px;
    }
  }
  .cardAreaCss {
    position: relative;
    top: -150px;
    margin: 0px 10px;
    color: #000;
  }

}
</style>