110 lines
3.3 KiB
Vue
110 lines
3.3 KiB
Vue
<template>
|
|
<view>
|
|
<!-- 顶部操作条 -->
|
|
<cu-custom :bgColor="'bg-main-color'" :isBack="true">
|
|
<block slot="backText">返回</block>
|
|
<block slot="content">我的团队</block>
|
|
</cu-custom>
|
|
<!-- 团队成员 -->
|
|
<view class="margin-bottom-with-bar">
|
|
<view class="bg-white padding bottom-border" v-for="(member, index) in members">
|
|
<view class="flex justify-between">
|
|
<view class="flex justify-start align-center" style="width: 40%;">
|
|
<view class="cu-avatar round"
|
|
:style="'background-image:url(' + member.avatarUrl + ');min-width: 64rpx'"></view>
|
|
<view class="text-lg margin-left-sm">{{member.name}}</view>
|
|
</view>
|
|
<view class="flex justify-end align-center">
|
|
<view v-if="Boolean(member.showEditInput)" :key="member.id"
|
|
class="flex justify-end align-center margin-lr-sm">
|
|
<input class="radius-input" type="text" :value="member.noteName" placeholder="姓名备注"></input>
|
|
<view class="text-lg margin-left-sm">
|
|
<text class="cuIcon-roundcheckfill text-main-color" :data-index="index"
|
|
@click="editNoteName"></text>
|
|
<text class="cuIcon-roundclosefill margin-left-xs" :data-index="index"
|
|
@click="hideEditInput"></text>
|
|
</view>
|
|
</view>
|
|
<view v-else class="flex justify-end margin-lr-sm" :key="member.id">
|
|
<text>{{member.noteName}}</text>
|
|
<text class="text-lg" :data-index="index" @click="showEditInput"><text
|
|
class="cuIcon-edit margin-left-xs"></text></text>
|
|
</view>
|
|
<view class="text-xxl text-main-color" :data-phone="member.phoneNum" @click="makePhoneCall">
|
|
<view class="cuIcon-phone"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 底部操作栏 -->
|
|
<view class="cu-bar bg-white tabbar border shop fixed-bottom-bar">
|
|
<view class="left-grid text-center">
|
|
<view>设置扣点</view>
|
|
<view>(扣点：<text class="text-red">{{myTeamInfo.takeRate}}%</text>)</view>
|
|
</view>
|
|
<view class="bg-main-color submit" @click="submit">提交订单</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
myTeamInfo: {},
|
|
members: []
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.loadData();
|
|
},
|
|
methods: {
|
|
async loadData() {
|
|
this.myTeamInfo = await this.$api.data('myTeamInfo');
|
|
this.members = this.myTeamInfo.members;
|
|
},
|
|
showEditInput(e) {
|
|
let curIndex = e.currentTarget.dataset.index;
|
|
this.$set(this.members, curIndex, Object.assign(this.members[curIndex], {
|
|
showEditInput: true
|
|
}))
|
|
console.log(this.members)
|
|
},
|
|
hideEditInput(e) {
|
|
let curIndex = e.currentTarget.dataset.index;
|
|
this.$set(this.members, curIndex, Object.assign(this.members[curIndex], {
|
|
showEditInput: false
|
|
}))
|
|
console.log(this.members)
|
|
},
|
|
editNoteName(e) {
|
|
this.hideEditInput(e);
|
|
},
|
|
makePhoneCall(e) {
|
|
let phoneNum = e.currentTarget.dataset.phone;
|
|
uni.makePhoneCall({
|
|
phoneNumber: phoneNum
|
|
})
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.left-grid {
|
|
width: 50%;
|
|
}
|
|
|
|
.radius-input {
|
|
border: 1rpx solid rgba(0, 0, 0, 0.1);
|
|
border-radius: 10rpx;
|
|
padding: 10rpx;
|
|
box-sizing: content-box;
|
|
}
|
|
|
|
.bottom-border {
|
|
border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
|
|
}
|
|
</style>
|