ry_app/pages/userStores/userStores.vue

<template>
  <view class="user-stores-container">
    <!-- 页面标题 -->
    <view class="page-header">
      <text class="page-title">用户门店关联</text>
      <view class="header-right">
        <button class="save-btn" @click="saveUserStores">保存</button>
      </view>
    </view>

    <!-- 门店列表 -->
    <view class="stores-list">
      <view class="store-item" v-for="store in stores" :key="store.storeId">
        <view class="store-info">
          <text class="store-name">{{ store.storeName }}</text>
          <text class="store-code">编码：{{ store.storeCode }}</text>
        </view>
        <uni-data-checkbox 
          :value="store.storeId" 
          :checked="isStoreChecked(store.storeId)" 
          @change="onCheckboxChange"
          :name="'store-' + store.storeId"
        ></uni-data-checkbox>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-if="stores.length === 0">
      <text class="empty-text">暂无门店数据</text>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        form: {}, // 用户所关联的门店
        stores: [], // 所有的门店
        userId: null,
        selectedStoreIds: [] // 选中的门店ID数组
      }
    },
    onLoad(options) {
      // 获取用户ID（可以从路由参数或本地存储获取）
      this.userId = options.userId || 2; // 这里使用默认值2作为示例
      this.loadUserStores();
    },
    methods: {
      // 加载用户门店数据
      loadUserStores() {
        uni.showLoading({
          title: '加载中...'
        });

        // 模拟后端请求，实际项目中应替换为真实API调用
        // 假设API返回的数据格式如下：
        // {
        //   "code": 200,
        //   "data": {
        //     "allStores": [{storeId: 1, storeName: "门店621", storeCode: "门店6code"}, ...],
        //     "stores": [{storeId: 1, storeName: "门店621", storeCode: "门店6code"}, ...],
        //     "userId": 2
        //   },
        //   "msg": "操作成功"
        // }
        
        // 这里使用setTimeout模拟异步请求
        setTimeout(() => {
          // 模拟后端返回的数据
          const mockResponse = {
            code: 200,
            data: {
              allStores: [
                {storeId: 1, storeName: "门店621", storeCode: "门店6code"},
                {storeId: 2, storeName: "门店622", storeCode: "门店6code2"},
                {storeId: 3, storeName: "门店623", storeCode: "门店6code3"}
              ],
              stores: [
                {storeId: 1, storeName: "门店621", storeCode: "门店6code"}
              ],
              userId: 2
            },
            msg: "操作成功"
          };

          // 处理返回数据
          this.form = mockResponse.data.stores || {};
          this.stores = mockResponse.data.allStores || [];
          
          // 初始化选中的门店ID数组
          this.selectedStoreIds = mockResponse.data.stores.map(store => store.storeId);
          
          uni.hideLoading();
        }, 1000);
      },

      // 检查门店是否被选中
      isStoreChecked(storeId) {
        return this.selectedStoreIds.includes(storeId);
      },

      // 复选框变化事件
      onCheckboxChange(e) {
        const storeId = e.value;
        const isChecked = e.checked;
        
        if (isChecked) {
          // 添加到选中数组
          if (!this.selectedStoreIds.includes(storeId)) {
            this.selectedStoreIds.push(storeId);
          }
        } else {
          // 从选中数组中移除
          this.selectedStoreIds = this.selectedStoreIds.filter(id => id !== storeId);
        }
      },

      // 保存用户门店关联
      saveUserStores() {
        uni.showLoading({
          title: '保存中...'
        });

        // 模拟保存请求，实际项目中应替换为真实API调用
        setTimeout(() => {
          // 这里可以将selectedStoreIds发送到后端保存
          console.log('保存的门店ID:', this.selectedStoreIds);
          
          uni.hideLoading();
          uni.showToast({
            title: '保存成功',
            icon: 'success'
          });
          
          // 返回上一页
          setTimeout(() => {
            uni.navigateBack();
          }, 1500);
        }, 1000);
      }
    }
  }
</script>

<style lang="scss" scoped>
  .user-stores-container {
    background-color: #f5f5f5;
    min-height: 100vh;
    padding-bottom: 20rpx;
  }

  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx 40rpx;
    background-color: #ffffff;
    border-bottom: 1rpx solid #e0e0e0;
  }

  .page-title {
    font-size: 40rpx;
    font-weight: 600;
    color: #333333;
  }

  .save-btn {
    padding: 12rpx 30rpx;
    background-color: #007aff;
    color: #ffffff;
    border: none;
    border-radius: 8rpx;
    font-size: 28rpx;
  }

  .stores-list {
    margin: 20rpx;
    background-color: #ffffff;
    border-radius: 16rpx;
    overflow: hidden;
  }

  .store-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx 40rpx;
    border-bottom: 1rpx solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
  }

  .store-info {
    flex: 1;
  }

  .store-name {
    display: block;
    font-size: 32rpx;
    font-weight: 600;
    color: #333333;
    margin-bottom: 10rpx;
  }

  .store-code {
    display: block;
    font-size: 28rpx;
    color: #999999;
  }

  .empty-state {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300rpx;
  }

  .empty-text {
    font-size: 30rpx;
    color: #999999;
  }
</style>