work-order/work-order-uniapp/pages/mch/check.vue

<template>
  <view class="app-container">
    <HeaderBar title="商家后台" enable-back text-align="center"/>

    <view class="mch-list">
      <view
        v-for="item in mchList"
        :key="item.id"
        class="mch-item"
        @click="handleSelect(item)"
      >
        <view class="mch-info">
          <image class="avatar" :src="parseLocalUrl(item.avatar)" mode="aspectFill" />
          <view class="info">
            <view class="name">{{ item.name }}</view>
            <view class="address">{{ item.regionMergerName }}{{ item.address }}</view>
          </view>
        </view>
        <view class="status" :class="item.status">{{ MchStatus.parseName(item.status) }}</view>
      </view>
    </view>

    <view v-if="mchList.length === 0" class="empty">
      <view class="text">暂无商家，去申请一个吧</view>
    </view>

    <view class="bottom-btn" @click="goToEdit" v-if="canApply">
      <uni-icons type="plusempty" size="20" color="#fff"></uni-icons>
      <text>申请商户</text>
    </view>
  </view>
</template>

<script>
import { getMchList } from '@/api/app/mch'
import HeaderBar from '@/components/HeaderBar.vue'
import { MchStatus } from '@/utils/enums'
import { parseLocalUrl } from '@/utils/index'
import { appJoinMchStaff } from '@/api/app/mchStaff'
import { mapGetters } from 'vuex'

export default {
  components: {
    HeaderBar
  },
  data() {
    return {
      MchStatus,
      mchList: [],
      shareCode: '',
      shareMchId: ''
    }
  },
  computed: {
    ...mapGetters(['userId']),
    canApply() {
      if (this.mchList == null || this.mchList.length === 0) {
        return true;
      }
      return !this.mchList.some(item => item.userId === this.userId);
    }
  },
  onShow() {
    this.getMchList()
  },
  onLoad(options) {
    // 处理分享参数
    if (options.code && options.mchId) {
      this.shareCode = options.code
      this.shareMchId = options.mchId
      this.showJoinConfirm()
    }
  },
  methods: {
    parseLocalUrl,
    getMchList() {
      getMchList().then(res => {
        this.mchList = res.data || []
      })
    },
    goToEdit() {
      uni.navigateTo({
        url: '/pages/mch/edit'
      })
    },
    handleSelect(item) {
      if (item.status === MchStatus.WAIT_VERIFY) {
        this.$modal.msgError('该商家正在审核中')
        return
      }
      if (item.status === MchStatus.REJECTED) {
        uni.navigateTo({
          url: '/pages/mch/edit?id=' + item.id
        })
        return
      }
      this.$store.dispatch('SetMchId', item.id);
      uni.reLaunch({ url: '/pages/mch/index' })
    },
    showJoinConfirm() {
      uni.showModal({
        title: '加入商户',
        content: '是否成为该商户的员工？',
        success: (res) => {
          if (res.confirm) {
            this.$modal.loading('处理中...')
            // 这里需要调用加入店铺的API
            appJoinMchStaff({
              mchId: this.shareMchId,
              code: this.shareCode
            }).then(() => {
              uni.showToast({ title: '加入成功', icon: 'success' })
              this.getMchList()
            }).catch(() => {
              this.$modal.closeLoading()
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding-bottom: 120rpx;
}

.mch-list {
  margin-top: 30rpx;
  padding: 0 20rpx;
}

.mch-item {
  background: #fff;
  border-radius: 24rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4rpx 24rpx rgba(106, 140, 255, 0.06);
}

.mch-info {
  display: flex;
  align-items: center;
  flex: 1;
  margin-right: 20rpx;
}

.avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.info {
  flex: 1;
  .name {
    font-size: 32rpx;
    color: #333;
    font-weight: 500;
    margin-bottom: 10rpx;
  }
  .address {
    font-size: 24rpx;
    color: #999;
  }
}

.status {
  font-size: 24rpx;
  padding: 6rpx 16rpx;
  border-radius: 20rpx;

  &.pending {
    color: #e6a23c;
    background: #fdf6ec;
  }

  &.approved {
    color: #67c23a;
    background: #f0f9eb;
  }

  &.rejected {
    color: #f56c6c;
    background: #fef0f0;
  }
}

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 200rpx;

  image {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 30rpx;
  }

  .text {
    font-size: 28rpx;
    color: #999;
  }
}

.bottom-btn {
  position: fixed;
  bottom: 40rpx;
  width: 90%;
  left: 5%;
  background: linear-gradient(180deg, #6a8cff 0%, #4a6cff 100%);
  color: #fff;
  border-radius: 50rpx;
  padding: 20rpx 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 12rpx rgba(106, 140, 255, 0.3);

  text {
    margin-left: 10rpx;
    font-size: 28rpx;
  }
}
</style>