teambuy-front/pages_order/mine/unbindTeam.vue

<template>
    <view class="page">
        <!-- 导航栏 -->
        <navbar title="解绑团长" leftClick @leftClick="$utils.navigateBack" bgColor="#019245" color="#fff" />

        <!-- 当前取餐点 -->
        <view class="section" v-if="isBind">
            <view class="section-title">当前取餐点</view>
            <view class="pickup-item" v-if="currentPickupPoint">
                <view class="pickup-image">
                    <image :src="currentPickupPoint.spotImage" mode="aspectFill"></image>
                </view>
                <view class="pickup-info">
                    <view class="pickup-name">{{ currentPickupPoint.spotName }}</view>
                    <view class="pickup-address">
                        <view class="pickup-address-icon">
                            <uv-icon name="map-fill" color="#019245" size="24"></uv-icon>
                        </view>
                        <text>{{ currentPickupPoint.area }}{{ currentPickupPoint.address }}</text>
                    </view>
                    <view class="pickup-phone">
                        <uv-icon name="phone-fill" color="#019245" size="24"></uv-icon>
                        <text>{{ currentPickupPoint.phone }}</text>
                    </view>
                </view>
                <view v-if="currentPickupPoint.bindStatus == '0'" class="cancel-btn" disabled>
                    <text>解绑中...</text>
                </view>
                <view v-else class="select-btn" @click="deleteLeader">
                    <text>解绑</text>
                </view>

            </view>
        </view>

        <!-- 附近取餐点 -->
        <view class="section">
            <view class="section-title">附近取餐点</view>

            <!-- 提示信息 -->
            <view class="warning-tip">
                <uv-icon name="info-circle" color="#FF5722" size="36"></uv-icon>
                <text v-if="isBind">更换取餐地址和团长,需通过平台审核方可更换!</text>
                <text v-else>您还未绑定团长，请先绑定团长!</text>
            </view>

            <!-- 取餐点列表 -->
            <view class="pickup-list">
                <view class="pickup-item" v-for="(item, index) in nearbyPickupPoints" :key="index">
                    <view class="pickup-image">
                        <image :src="item.spotImage" mode="aspectFill"></image>
                    </view>
                    <view class="pickup-info">
                        <view class="pickup-name">{{ item.spotName }}</view>
                        <view class="pickup-address">
                            <view class="pickup-address-icon">
                                <uv-icon name="map-fill" color="#019245" size="24"></uv-icon>
                            </view>
                            <text>{{ item.area }} {{ item.address }} </text>
                        </view>
                        <view class="pickup-phone">
                            <uv-icon name="phone-fill" color="#019245" size="24"></uv-icon>
                            <text>{{ item.phone }}</text>
                        </view>
                    </view>
                    <view class="select-btn" @click="updateLeader(item)">
                        <text>选择</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import navbar from '@/components/base/navbar.vue'
// import { currentPickupPoint, nearbyPickupPoints } from '@/static/js/mockTeam.js'

export default {
    components: {
        navbar
    },
    data() {
        return {
            // 当前取餐点
            currentPickupPoint:{},
            // 附近取餐点列表
            nearbyPickupPoints:[],
            isBind: true
        }
    },
    methods: {
        // 选择取餐点
        deleteLeader() {
            uni.showModal({
                title: '确认解绑',
                content: '您确定要解绑团长吗？',
                confirmColor: '#019245',
                success: (res) => {
                    if (res.confirm) {
                        uni.showLoading({
                            title: '提交中...'
                        })
                        
                        this.$api('deleteLeader',{
                            leaderId: this.currentPickupPoint.id
                        }, res => {
                            if (res.code === 200){
                                uni.hideLoading()
                                uni.showToast({
                                    title: `${res.message}`
                                })
                                this.getLeaderList()
                            }
                            
                        })
                    }
                }
            })
        },
        updateLeader(point) {
            uni.showModal({
                title: '确认选择',
                content: '您确定要选择该取餐点吗？需要平台审核通过后才能更换。',
                confirmColor: '#019245',
                success: (res) => {
                    if (res.confirm) {
                        uni.showLoading({
                            title: '提交中...'
                        })
                        this.$api('updateLeader', {
                            leaderId: point.id
                        }, res => {
                            if (res.code == 200) {
                                uni.hideLoading()
                                uni.showToast({
                                    title: `${res.message}`,
                                    icon: 'success',
                                })
                                this.getLeaderList()
                            }
                        })
                    }
                }
            })
            
        },
        getLeaderList() {
            // this.currentPickupPoint = currentPickupPoint
            // this.nearbyPickupPoints = []
            // this.currentPickupPoint = {}
            this.isBind = true
            this.$api('queryLeaderList', {}, res => {
                if (res.code == 200) {
                    this.nearbyPickupPoints = res.result.records
                }
            })
            this.$api('queryMyLeader', {}, res => {
                if (res.code == 200 && res.result.bindStatus !== '2') {
                    this.currentPickupPoint = res.result
                } else if (res.code == 500 || !res.result || res.result.bindStatus == '2') {
                    this.isBind = false
                }
            })
        }
    },
    onLoad() {
        this.getLeaderList()
    }
}
</script>

<style lang="scss" scoped>
.page {
    // background-color: #f5f5f5;
    // min-height: 100vh;
}

.section {
    width: 96%;
    margin: 0 auto;
    margin-bottom: 20rpx;
    // border-radius: 10rpx;
    &-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        padding: 30rpx 30rpx 20rpx;
    }
}

.pickup {
    &-item {
        background-color: #fff;
        padding: 20rpx 20rpx;
        display: flex;
        position: relative;
        margin-bottom: 2rpx;
        border-radius: 20rpx;
    }
    
    &-image {
        width: 170rpx;
        height: 170rpx;
        margin: auto 20rpx auto 0;
        overflow: hidden;
        
        image {
            width: 100%;
            height: 100%;
        }
    }
    
    &-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    &-name {
        font-size: 30rpx;
        font-weight: bold;
        color: #3B3B3B;
        margin-bottom: 10rpx;
    }
    
    &-address, &-phone {
        font-size: 26rpx;
        color: $uni-color-third;
        display: flex;
        align-items: center;
        margin-bottom: 8rpx;
        width: 85%;
        text {
            margin-left: 8rpx;
        }
        &-icon {
            height: 100%;
            padding-top: 20rpx;
        }
    }
}

.status-icon {
    position: absolute;
    right: 30rpx;
    top: 50%;
    transform: translateY(-50%);
}

// 隔一层会灰雾雾的效果
.cancel-btn {
    background-color: $uni-color-second;
    color: #fff;
    width: 120rpx;
    height: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10rpx;
    align-self: center;
    font-size: 24rpx;
    opacity: 0.7;
}

.select-btn {
    background-color: $uni-color;
    color: #fff;
    width: 100rpx;
    height: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10rpx;
    align-self: center;
    font-size: 24rpx;
}

.warning-tip {
    background-color: #FFDBDB;
    // width: 90%;
    margin: 0rpx 40rpx 20rpx 30rpx;
    border-radius: 10rpx;
    padding: 15rpx 15rpx;
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    
    text {
        font-size: 26rpx;
        color: $uni-color-second;
        margin-left: 10rpx;
    }
}

.pickup-list {
    gap: 20rpx;
    .pickup-item {
        margin-bottom: 20rpx;
        
    }
}
</style>