index.vue

<template>

  <div class="member-info" ref="member-info" :style="{
        'padding-top':getPaddingList[0]['value']+'px',
        'padding-bottom':getPaddingList[1]['value']+'px',
        'padding-left':getPaddingList[2]['value']+'px',
        'padding-right':getPaddingList[3]['value']+'px'}">
    <div class="infoCard" v-if="loginFlag" :style="{
        'border-radius':boderRadius,
        'background':backgroundColor,
        'box-shadow':datas.componentData['shadowShow']?'0px 0px 5px '+datas.componentData['shadowSize']+'px #ccc':''
        }">
      <div class="bg-img">
        <img :style="{'border-radius':boderRadius}" v-if="datas.componentData['backgroundImgShow']" :src="backgroundImage" alt />
      </div>
      <div class="mainContent">
        <div class="infoDetail flex">
          <div class="infoCardLeft flex">
            <div class="userPic" @click="toInfo">
              <img v-if="userData.headPortraitUrl && userData.headPortraitUrl!=''" :src="userData.headPortraitUrl" class="Img" />
              <img v-else src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/jpg/39ada9cc-aff3-4842-8376-9f49e36c5811.jpg" class="Img" alt />
            </div>
            <div class="info flex" @click="toOpenNewCard(myCartList[0],0)">
              <div class="infoTop flex">
                <div class="name">{{userData.nickname || userData.mobilephone}}</div>
                <div class="vipType flex">
                  <img src="https://mayi-newshop.oss-cn-shanghai.aliyuncs.com/product/R7x3myNiHF.png" class="vipTypeIcon">
                  <div v-if="myCartList.length>0">{{myCartList[0].title}}</div>
                </div>
              </div>
              <div class="vipTip" v-if="myCartList.length>0">
                <div>{{myCartList[0].recommendText}}</div>
                <!-- <div v-if="myCartList[0].receiveStatus==0">
                  <div class="ov_btn" :class="{'notMet':myCartList[0].receiveWay == 1}">
                    <template v-if="myCartList[0].receiveWay == 1">未满足条件</template>
                    <template v-else>{{myCartList[0].openButtonText || '立即开通'}}</template>
                  </div>
                </div>
                <div v-else-if="myCartList[0].receiveStatus==1">
                  <div class="ov_btn">
                    <template v-if="myCartList[0].receiveWay == 2">立即续费</template>
                    <template v-else>查看权益</template>
                  </div>
                </div>
                <div v-else-if="myCartList[0].receiveStatus==2">
                  <div class="ov_btn" :class="{'notMet':myCartList[0].receiveWay != 2}">
                    <template v-if="myCartList[0].receiveWay != 2">已失效</template>
                    <template v-else>立即续费</template>
                  </div>
                </div> -->
              </div>
            </div>
          </div>
          <div class="memberCode flex" v-show="datas.componentData.showStyle == 2 || datas.componentData.showStyle == 4" @click="toMobileCard()">
            <div class="line"></div>
            <img class="code" src="https://mayi-newshop.oss-cn-shanghai.aliyuncs.com/product/HyGQDa5S4i.png" />
          </div>
        </div>
        <div class="otherDetail flex" v-show="datas.componentData.showStyle == 3 || datas.componentData.showStyle == 4">
          <div class="integral" v-show="datas.componentData.memberCodeShow == true" @click="handleClick(1)">我的积分：{{userData.cardBonus}}</div>
          <div class="ticket" v-show="datas.componentData.ticketShow == true" @click="handleClick(3)">我的券包：{{electronicCardNum}}</div>
        </div>
      </div>
    </div>
    <div class="noLogin" v-else>
      <div class="noLoginCard flex" :style="{
        'border-radius':boderRadius,
        'background':backgroundColor,
        'box-shadow':datas.componentData['shadowShow']?'0px 0px 5px '+datas.componentData['shadowSize']+'px #ccc':''
        }">
        <div class="bg-img">
          <img :style="{'border-radius':boderRadius}" v-if="datas.componentData['backgroundImgShow']" :src="backgroundImage" alt />
        </div>
        <div class="noLoginMain flex">
          <div class="left flex">
            <div class="bc2" v-if="shopInfo.logoUrl && datas.componentData.noLoginshowStyle == 1">
              <img :src="shopInfo.logoUrl" alt />
            </div>
            <div class="leftText">
              <div class="text">
                Hi～
              </div>
              <div class="text">{{datas.componentData['noLoginText']}}</div>
            </div>
          </div>
          <div class="right" @click="toLogin" :style="{'color':datas.componentData['noLoginBtnTextColor']}">
            登录/注册
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import memberInfo from '@/api/memberInfo'
import { DFSImg } from '@/utils/index'
const app = getApp()

export default {
  name: 'member-info',
  props: {
    //默认
    //渲染环境
    render: {
      type: Boolean,
      default: false,
    },
    datas: {
      type: Object,
      default: () => {
        return {
          componentData: {},
        }
      },
      validator: (value) => {
        return true
      },
    },
  },
  data() {
    return {
      //用户数据
      userData: {
        type: Object,
        default: () => {
          return {
            belongToShopCode: 'shzb',
            belongToShopId: '89',
            belongToShopName: '真北店',
            birth: null,
            cardBonus: '53',
            certifiedStatus: '0',
            cityCode: '310100',
            cityId: '457',
            detailedAddress: '',
            districtCode: '310107',
            districtId: '2933',
            email: '',
            gender: '1',
            headPortraitUrl:
              'http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/jpg/39ada9cc-aff3-4842-8376-9f49e36c5811.jpg',
            mobilephone: '12345678900',
            nickname: '用户昵称',
            originName: '',
            electronicCardNum: 0,
            cardBonus: 0,
          }
        },
      },
      myCartList: [],
      certified: false,
      openVipLogoUrl: null,
      electronicCardNum: 0,
      loginFlag: false,
      shopInfo: {
        logoUrl: '',
      },
    }
  },
  components: {},
  computed: {
    backgroundColor() {
      return this.datas.componentData['backgroundColorShow']
        ? this.datas.componentData['backgroundColor']
        : 'rgba(255, 255, 255, 1)'
    },
    boderRadius() {
      return (2 * this.datas.componentData['radius']) / 100 + 'em'
    },
    getPaddingList() {
      return this.datas.componentData.paddingList
    },
    globalDataShopInfo() {
      return this.mpApp.globalData.shopInfo
    },
    backgroundImage() {
      return DFSImg(this.datas.componentData.backgroundImage, 640, null, 1)
    },
  },
  watch: {
    globalDataShopInfo: {
      handler(newVal, oldVal) {
        if (newVal) {
          console.log(newVal, oldVal, '------------------globalDataShopInfo')
          this.shopInfo = this.mpApp.globalData.shopInfo
          if (this.shopInfo && this.shopInfo.logoUrl) {
            this.shopInfo.logoUrl = DFSImg(this.shopInfo.logoUrl, 400, 400)
          }
          console.log(this.shopInfo, 'this.shopInfo')
        }
      },
      immediate: true,
    },
  },
  created() {
    if (wx.getStorageSync('sessionid')) {
      memberInfo.getUserInfo().then((res) => {
        console.log(res, ' this.userData ')
        if (res.data.code == 200) {
          this.userData = res.data.data
          console.log(this.userData, ' this.userData ')
        }
      })
      // TODO 新版会员卡无列表
      memberInfo.getV3PortalShopCard().then((res) => {
        this.myCartList = []
        if (res.data.code == 200) {
          if (res.data.data) {
            this.myCartList.push(res.data.data)
            this.myCartList.forEach((item, index) => {
              if (item.receiveStatus == 1) {
                this.certified = true
                this.openVipLogoUrl = item.openVipLogo
              }
            })
          }
        }
      })
      // 是否开通会员积分
      memberInfo.QueryIsOpen().then((res) => {
        if (res.data.code == 200) {
          this.integralStatus = res.data.data ? true : false
        } else {
          this.integralStatus = false
        }
      })

      //获取电子卡卷
      memberInfo
        .getUnUseElectronicCard({ pageNum: 1, pageSize: 1 })
        .then((res) => {
          if (res.data.code == 200) {
            this.electronicCardNum = res.data.total || 0
          }
        })
      this.loginFlag = true
    } else {
      this.loginFlag = false
    }
    console.log(this.loginFlag, 'this.loginFlag')
  },
  mounted() {},
  methods: {
    DFSRightImg(systemCode, path, w, h) {
      if (path == null || path == '') {
        if (systemCode == 'FREE_SHIPPING') {
          return 'http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/0a6acac3-31ee-46b2-80af-7e2e73b271ac.png'
        } else if (systemCode == 'DISCOUNT') {
          return 'http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/efe72515-9a4e-4ca5-8773-248d3430a851.png'
        } else if (systemCode == 'DISTRIBUTION') {
          return 'http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/effb2c9a-e661-4794-9412-664e4755b89e.png'
        } else if (systemCode == 'OPEN_VIP_LOGO') {
          return 'http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/d3b636a9-a269-46c2-8912-ac6cacba9171.png'
        } else {
          return ''
        }
      }
      return path
    },
    toLogin() {
      // 跳转登录页
      // let backUrl = '/home/main'

      let url = `/pages/login/main`
      wx.navigateTo({
        url: url,
      })
    },
    // 新版会员卡跳转链接
    toOpenNewCard(item, index) {
      console.log(this.userData, 'this.userData.mobilephone')
      let query = {
        cardId: item.id,
        userTel: this.userData.mobilephone,
        memberInfo: true,
      }
      app.$themeToLink({
        type: 1,
        link: `/personalCenter/membershipCard?cardId=${query.cardId}&userTel=${query.userTel}&memberInfo=true`,
      })
    },
    toInfo() {
      app.$themeToLink({
        type: 1,
        link: `/personalCenter/userInfo?memberInfo=true`,
      })
    },
    toMobileCard() {
      app.$themeToLink({
        type: 1,
        link: `/personalCenter/vip/vipMobileCard`,
      })
      // wx.navigateTo({
      //   url: '/pages/memberCode/main',
      // })
    },
    handleClick(id) {
      if (id == 0) {
        this.toPages('/personalCenter/coupon/myCoupon')
      } else if (id == 1) {
        app.$themeToLink({
          type: 1,
          link: `/pointShop/pointCenter`,
        })
      } else if (id == 2) {
        this.toPages('/giftCards/giftCardList')
      } else if (id == 3) {
        app.$themeToLink({
          type: 1,
          link: `/myCoupon/electronicVolume`,
        })
      } else {
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.member-info {
  font-size: 12px;
  width: 100%;
  box-sizing: border-box;
}
.infoCard {
  background: #fff;
  border-radius: 2px;
  padding: 24px 18px 19px 13px;
  box-sizing: border-box;
  position: relative;
  .bg-img {
    height: 100%;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
    }
  }
  .mainContent {
    width: 100%;
    height: 100%;
    position: relative;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    .infoDetail {
      align-items: center;
      justify-content: space-between;

      .infoCardLeft {
        align-items: center;
        .userPic {
          width: 44px;
          height: 44px;
          border-radius: 50%;
          // overflow: hidden;
          border: 1px solid #fff;
          position: relative;
          .Img {
            height: 100%;
            width: 100%;
            border-radius: 50%;
          }
        }
        .info {
          flex-direction: column;
          justify-content: space-between;
          margin-left: 10px;
          .infoTop {
            align-items: center;
          }
          .name {
            height: 16px;
            font-size: 12px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 16px;
          }
          .vipType {
            align-items: center;
            height: 16px;
            background: linear-gradient(90deg, #61626b 0%, #323339 100%);
            padding: 0 8px;
            box-sizing: border-box;
            border-radius: 8px;
            font-size: 12px;

            font-weight: 400;
            color: #facf58;
            line-height: 16px;
            margin-left: 5px;
            .vipTypeIcon {
              height: 12px;
              width: 12px;
              margin-right: 2px;
            }
          }
          .vipTip {
            height: 16px;
            font-size: 12px;

            font-weight: 400;
            color: #999999;
            line-height: 16px;
            margin-top: 14px;
          }
        }
      }
      .memberCode {
        align-items: center;
        .line {
          width: 1px;
          height: 48px;
          background: #d8d8d8;
        }
        .code {
          width: 40px;
          height: 40px;
          margin-left: 13px;
        }
      }
    }
    .otherDetail {
      align-items: center;
      justify-content: space-between;
      margin-top: 21px;
      padding: 0px 24px;
      box-sizing: border-box;
      .integral {
        height: 17px;
        font-size: 12px;
        font-weight: 400;
        color: #333333;
        line-height: 17px;
      }
      .ticket {
        height: 17px;
        font-size: 12px;
        font-weight: 400;
        color: #333333;
        line-height: 17px;
      }
    }
  }
}
.noLogin {
  width: 100%;
  .noLoginCard {
    justify-content: space-between;
    align-items: center;
    padding: 24px 18px 19px 13px;
    box-sizing: border-box;
    position: relative;
    .bg-img {
      height: 100%;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
      }
    }
    .noLoginMain {
      width: 100%;
      height: 100%;
      position: relative;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      align-items: center;
      justify-content: space-between;
      .left {
        align-items: center;
        .bc2 {
          width: 64px;
          height: 64px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .leftText {
           div {
            font-size: 13px;
            font-weight: 600;
            line-height: 21px;
            color: var(--main-color);
            width: 148px;
            max-width: 148px;
          }
          margin-left: 10px;
        }
      }
      .right {
        width: 86px;
        height: 32px;
        background: var(--main-color);
        border-radius: 16px;
        line-height: 32px;
        text-align: center;
        font-size: 12px;
        font-weight: 500;
        color: #333333;
      }
    }
  }
}
</style>