YXGJ/cloud/contacts/list.vue

<template>
    <view class="list-box">
        <navigator url="#" class="item-box" v-for="item in list" :key="item.sys_phonebookid">
            <view class="box">
                <view class="left">
                    <view class="title">{{ item.name }}</view>
                    <view class="remarks">{{ item.remarks }}</view>
                </view>
                <navigator url="#" class="right" @click="callPhoneFun(item)">
                    <i class="iconfont icon-dianhua-hong" style="color:#C30D23"></i>
                </navigator>
            </view>
            
        </navigator>
    </view>
</template>

<script>
export default {
    props:['list'],
  data () {
    return {
    }
  },
  methods: {
    callPhoneFun (item) {
        console.log(item);
        this.callPhone(item.phonenumber)
    }
  },
}
</script>

<style  lang="scss">
.list-box {
    background: #ffffff;
    .item-box {
        display: flex;
        padding: 10px 0 0 10px;
        .box {
            border-bottom: 1px solid #DDDDDD;
            display: flex;
            align-items: center;
            align-content: center;
            justify-content: space-between;
            width: 100%;
            padding-bottom: 10px;
            .left {
                display: flex;
                flex-direction: column;
                .title {
                    font-weight: bold;
                    font-size: 14px;
                    color: #333333;
                    margin-bottom: 5px;
                }
                .remarks {
                    font-weight: 400;
                    font-size: 12px;
                    color: #999999;
                }
            }
            .right {
                padding: 10px 10px 10px 10px;
                border-radius: 5px;
            }
        }
    }
}
</style>