|
|
- <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 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',
- })
- }
- })
- }
- }
- })
-
- },
- getLeaderList() {
- // this.currentPickupPoint = currentPickupPoint
- this.$api('queryLeaderList', {}, res => {
- if (res.code == 200) {
- this.nearbyPickupPoints = res.result.records
- }
- })
- this.$api('queryMyLeader', {}, res => {
- if (res.code == 200) {
- this.currentPickupPoint = res.result
- } else if (res.code == 500 || !res.result) {
- 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%);
- }
-
- .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>
|