123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152 |
- <template>
- <view class="container">
- <navbar :config="config" backColor="#666666"></navbar>
- <view class="partner">
- <image class="top-bg" :src="imgUrl+'/distribution-top-bg.png'"></image>
- <view class="userInfo">
- <view class="u-plr30">
- <view class="head u-flex-sb">
- <view class="u-flex">
- <image v-if="accountInfo.head_photo" v-else :src="accountInfo.head_photo"></image>
- <image v-else :src="imgUrl+'/head-on.png'" mode=""></image>
- <view class="u-ml30 u-mt10">
- <view class="u-font30 u-1A1A1A nickname u-text1" >{{accountInfo.nickname}}</view>
- <view class="u-mt5 u-02331F u-font24" v-if="accountInfo.role_name != null ">{{accountInfo.role_name}}</view>
- </view>
- </view>
- <view class="u-font24 u-999 u-mt10">直接伙伴:<text class="u-FF0000">{{num}}</text>人 </view>
- </view>
- </view>
- <view class="partner-list">
- <image class="partner-bg" :src="imgUrl+'/partner-bg.png'"></image>
- <view class="position-ab">
- <view v-if="partnerList.length>0">
- <view class="item u-plr30" v-for="(item,index) in partnerList" :key="item.id">
- <view class="u-flex-sb u-border-one-one pd44">
- <image class="u-avatar106" v-if="item.head_photo" :src="item.head_photo"></image>
- <image class="u-avatar106" v-else :src="imgUrl+'/head-on.png'"></image>
- <view class="u-font24 u-999">
- <view class="u-font28 u-1A1A1A ht36 u-text-width">{{item.nickname}}</view>
- <view>
- <rich-text :nodes="'*******'+$mUtil.cutOut(item.mobile)"></rich-text>
- </view>
- <view>绑定时间:{{item.register_time}}</view>
- </view>
- <view class="u-font24 u-FF0000">{{item.role_name}}</view>
- </view>
- </view>
- </view>
- <view class="nogoods u-mt30 u-flex-column-center" v-if="partnerList.length==0">
- <nodata :config="{top:5,content:'暂无数据~'}"></nodata>
- </view>
- </view>
- </view>
- </view>
- </view>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- config: {
- back: true, //false是tolbar页面 是则不写
- title: '我的伙伴',
- color: '#1A1A1A',
- //背景颜色;参数一:透明度(0-1);参数二:背景颜色(array则为线性渐变,string为单色背景)
- backgroundColor: [1, "#FFFFFF"],
- statusBarFontColor: '#1A1A1A'
- },
- num:0,
- partnerList:[],
- accountInfo:{},
- imgUrl: this.$mConfig.staticUrl
- }
- },
- onLoad() {
- //获取用户信息
- this.$http.get('/account/getAccountInfo',).then(res => {
- if(res&&res.code==200){
- this.accountInfo = res.data
- }
- })
- //获取伙伴列表
- this.$http.get('/account/myPartner',).then(res => {
- if(res&&res.code==200){
- this.num = res.num
- this.partnerList=res.data
- }
- })
- },
- methods: {
-
- }
- }
- </script>
- <style lang="scss">
- .nickname{
- width: 300rpx;
- }
- .u-flex-sb {
- display: flex;
- justify-content: space-between;
- }
- .ht36{
- height: 36rpx;
- line-height: 36rpx;
- }
- .partner {
- position: relative;
- .top-bg {
- width: 100%;
- height: 238rpx;
- }
- .userInfo {
- position: absolute;
- top: 68rpx;
- width: 100%;
- .head {
- background-color: #FFFAEE;
- padding: 40rpx 30rpx 36rpx;
- border-radius: 20rpx;
- z-index: -1;
- image {
- width: 106rpx;
- height: 106rpx;
- border: 4rpx solid #FFFFFF;
- border-radius: 50%;
- }
- }
- }
- .partner-list {
- margin-top: -48rpx;
- position: relative;
- .partner-bg {
- height: 70vh;
- width: 100%;
- }
- .position-ab {
- position: absolute;
- top: 50rpx;
- width: 100%;
- }
- .pd44 {
- padding: 44rpx 0rpx;
- }
- }
- }
- </style>
|