Client-Teapay/src/pages/tea-list/index.vue

<template>
  <view class="container">
    <view
      class="list flex_r flex_ac"
      v-for="(item, index) in list"
      :key="index"
    >
      <image class="head_img" :src="item.head_pic" mode=""></image>
      <view class="tea_info flex_grow flex_c">
        <view class="tea_name">{{ item.nickname }}</view>
        <view class="balance flex_r flex_ac"
          >{{ item.mobile }}
          <view class="copyBalance" @tap="copyText(item.mobile)"
            >复制</view
          ></view
        >
      </view>
      <view class="head_option flex_r flex_ac">
        <!-- <image
          class="option_weixin"
          src="/static/weixin.png"
          mode=""
          @tap="copyText(item.wxNumber)"
        ></image> -->
        <view class="option_hr"></view>
        <image
          class="option_phone"
          src="/static/dianhua.png"
          mode=""
          @tap="dial(item.mobile)"
        ></image>
      </view>
    </view>
  </view>
</template>

<script>
let page = 1;
let app = getApp();
var appEv = app.$vm.$options;
import uniCopy from "@/utils/copy";
import { post } from "@/request/api.js";
export default {
  data() {
    return {
      list: [], // 我的茶友列表
    };
  },
  onShow() {
    this.loadData();
  },
  methods: {
    loadData() {
        post('/my/mychayou').then(res => {
            if(res.code === 0){
                this.list = res.data.data
            }
        })
    },
    // 拨打电话
    dial: function (e) {
      let that = this;
      if (e == "") {
        appEv.errTips("用户暂未设置电话");
        return false;
      }
      uni.makePhoneCall({
        phoneNumber: e, //仅为示例
      });
    },
    // 复制微信号
    copyText: function (e) {
      let that = this;
      if (e == "") {
        appEv.errTips("用户暂未设置微信");
        return false;
      }
      uniCopy({
        content: e,
        success: (res) => {},
        error: (e) => {},
      });
    },
  },
};
</script>

<style lang="scss" scoped>
// 页面配置
.container {
  border-top: 20rpx solid #f5f5f5;
}
// 页面配置-end

// 我的茶友列表
.tea_name {
  font-size: 30rpx;
  color: #363638;
}
.option_weixin {
  width: 42rpx;
  height: 35rpx;
}
.balance {
  font-size: 28rpx;
  color: #18bb88;
  margin-top: 6rpx;
}
.option_phone {
  width: 36rpx;
  height: 36rpx;
  margin-left: 30rpx;
}
.tea_level {
  font-size: 26rpx;
  color: #6c6c6c;
  margin-top: 12rpx;
}
.head_img {
  width: 79rpx;
  height: 79rpx;
  margin-right: 40rpx;
  border-radius: 50%;
}
.option_hr {
  width: 3rpx;
  height: 66rpx;
  background: rgba(0, 0, 0, 0.12);
  margin-left: 30rpx;
}
.copyBalance {
  padding: 0 10rpx;
  background: #1cbe8c;
  color: #fff;
  font-size: 22rpx;
  margin-left: 12rpx;
}
.list {
  width: 100%;
  height: 130rpx;
  box-sizing: border-box;
  padding: 0 36rpx;
  border-bottom: 3rpx solid rgba(0, 0, 0, 0.12);
}
// 我的茶友列表-end
</style>