150 lines
4.7 KiB
Vue
150 lines
4.7 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" @click="showTakeRateSetModal">
|
|
<view>设置扣点</view>
|
|
<view>(扣点：<text class="text-red">{{myTeamInfo.takeRate}}%</text>)</view>
|
|
</view>
|
|
<view class="bg-main-color submit" @click="">邀请团队</view>
|
|
</view>
|
|
|
|
<!-- 设置扣点模态框 -->
|
|
<view class="cu-modal" :class="isShowTakeRateSet?'show':''">
|
|
<view class="cu-dialog">
|
|
<view class="cu-bar bg-white justify-end">
|
|
<view class="content">设置扣点</view>
|
|
<view class="action" @tap="hideModal">
|
|
<text class="cuIcon-close text-red"></text>
|
|
</view>
|
|
</view>
|
|
<view class="padding-xl">
|
|
<view>设置区域代理扣点可按百分比扣取或金额扣取的方式（建议二选一进行申请）</view>
|
|
<view class="flex justify-center align-center margin-top-sm">
|
|
<text>扣点：</text>
|
|
<input class="radius-input" type="digit" placeholder="请输入订单扣取的比例"></input>
|
|
<text>%</text>
|
|
</view>
|
|
<view class="flex justify-center align-center margin-top-sm">
|
|
<text>金额：</text>
|
|
<input class="radius-input" type="digit" placeholder="请输入按单扣取的金额"></input>
|
|
<text>元</text>
|
|
</view>
|
|
</view>
|
|
<view class="cu-bar bg-white">
|
|
<view class="action margin-0 flex-sub text-black" @tap="hideModal">取消</view>
|
|
<view class="action margin-0 flex-sub text-main-color solid-left" @tap="hideModal"
|
|
@click="applySetTakeRate">提交申请</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
myTeamInfo: {},
|
|
members: [],
|
|
isShowTakeRateSet: false
|
|
}
|
|
},
|
|
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
|
|
})
|
|
},
|
|
showTakeRateSetModal(e) {
|
|
this.showModal(e);
|
|
},
|
|
showModal(e) {
|
|
this.isShowTakeRateSet = true
|
|
},
|
|
hideModal(e) {
|
|
this.isShowTakeRateSet = false
|
|
},
|
|
applySetTakeRate() {
|
|
uni.showToast({
|
|
title: '保存成功',
|
|
icon: 'success',
|
|
mask: true
|
|
})
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.left-grid {
|
|
width: 50%;
|
|
}
|
|
|
|
.bottom-border {
|
|
border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
|
|
}
|
|
</style>
|