jichuangshe/mini/pages/forget.vue

<template>
  <page-loading class="forget-page" :loading="loading">
    <view class="logo logo-white" />
    <view class="static-text">本平台仅限极创社会员使用，无账号的请联系下方客服电话或微信</view>
    <view
      v-for="(item,index) in contacts"
      :key="index"
      class="contact-item"
    >
      <view
        v-if="item.phone_num"
        @click="handleCallPhone(item.phone_num)"
      >
        <view class="text main-center cross-center">{{ item.name }}</view>
        <view class="phone-num main-center cross-center">
          <view class="icon phone" />
          <text>{{ item.phone_num }}</text>
        </view>
      </view>
      <view
        v-else-if="item.wechat_num"
        @click="$util.copyText(item.wechat_num)"
      >
        <view class="text main-center cross-center">{{ item.name }}</view>
        <view class="phone-num main-center cross-center">
          <view class="icon wechat" />
          <text>{{ item.wechat_num }}</text>
          <view class="icon copy" />
        </view>
      </view>
    </view>
  </page-loading>
</template>

<script>

import PageLoading from '@/components/PageLoading'
export default {
  name: 'Forget',
  components: { PageLoading },
  data() {
    return {
      loading: true,
      contacts: []
    }
  },
  computed: {},
  methods: {
    handleCallPhone(phoneNumber) {
      uni.makePhoneCall({
        phoneNumber: phoneNumber
      })
    },
    getContact() {
      this.$api.setting.loginContact().then(res => {
        this.loading = false
        this.contacts = res.data
      })
    }
  },
  onLoad() {
    this.getContact()
  }
}
</script>

<style lang="scss" scoped>
.forget-page {
  padding: 0 30rpx;
  .logo{
    margin: 100rpx auto 50rpx;
  }
  .static-text{
    text-align: center;
    margin-bottom: 60rpx;
    line-height: 1.65;
  }

  .contact-item{
    .text{
      position: relative;
      font-size: 38rpx;
      &:before,&:after{
        content: "";
        position: absolute;
        width: 20rpx;
        height: 4rpx;
        background: #000;
        transform: translateX(-400%);
      }
      &:after{
        transform: translateX(400%);
      }
    }
    .phone-num{
      margin: 10rpx 0 40rpx;
      .icon{
        width: 30rpx;
        height: 30rpx;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100%;
        margin: 0 8rpx;
        &.phone{
          background-image: url("/static/image/icon/phone.png");
        }
        &.wechat{
          background-image: url("/static/image/icon/wechat.png");
        }
        &.copy{
          background-image: url("/static/image/icon/copy.png");
          background-size: 90%;
          margin-left: 16rpx;
        }
      }
    }
  }
}
</style>