scancode-miro/pages/cjx/hexiao/ywy/index.vue

<template>
  <view class="page-container">
    <view class="page-title">
      首页
    </view>
    <view class="header-section">
      <view class="greeting-text">{{ userInfo.role }} {{ userInfo.name }}</view>
      <view class="title-text">提供的服务</view>
    </view>

    <view class="content-grid">
      <view class="card large-card" @click="scanCode('stock')">
        <view class="large-card-text">
          <view class="card-title" style="font-size: 40rpx">扫码上货</view>
          <view class="card-subtitle">一键扫码上货</view>
          <view class="scan-button">去扫码</view>
        </view>
        <view class="large-card-icon">
          <image :src="imgurl+'/cjx/hexiao/shanghuo.png'" mode="aspectFit"></image>
        </view>
      </view>

      <view class="card" @click="scanCode('verify')">
        <view class="icon-wrapper" style="background-color: #e4f7ed;">
          <image :src="imgurl+'/cjx/hexiao/hexiao.png'" mode="aspectFit"></image>
        </view>
        <view class="card-title">扫码核销</view>
      </view>

      <view class="card" @click="navigateTo('patrolRecords')">
        <view class="icon-wrapper" style="background-color: #f2e7ff;">
          <image :src="imgurl+'/cjx/hexiao/xundian.png'" mode="aspectFit"></image>
        </view>
        <view class="card-title">巡店记录</view>
      </view>

      <view class="card small-card" @click="navigateTo('stockRecords')">
        <view class="icon-wrapper" style="background-color: #fff8e1;">
          <image :src="imgurl+'/cjx/hexiao/hexiao.png'" mode="aspectFit"></image>
        </view>
        <text class="card-title">上货记录</text>
      </view>

      <view class="card small-card" @click="navigateTo('verifyRecords')">
        <view class="icon-wrapper" style="background-color: #ffede6;">
          <image :src="imgurl+'/cjx/hexiao/hxjilu.png'" mode="aspectFit"></image>
        </view>
        <text class="card-title">核销记录</text>
      </view>

      <view class="card stat-card mendian-card" @click="navigateTo('storeStats')">
        <view class="stat-content">
          <view class="stat-title">门店统计</view>
          <view class="stat-value">{{ stats.storeCount }}</view>
          <view class="stat-label">总数</view>
        </view>
      </view>

      <view class="card stat-card jifen-card" @click="navigateTo('pointsStats')">
        <view class="stat-content">
          <view class="stat-title">积分统计</view>
          <view class="stat-value">{{ formatNumber(stats.pointsCount) }}</view>
          <view class="stat-label">总数</view>
        </view>
      </view>
    </view>
    <select-store-drawer
        :show="showDrawer>0"
        :selected-id="selectedStore ? selectedStore.id : null"
        @close="showDrawer = 0"
        @select="onStoreSelect"
    ></select-store-drawer>
    <CustomTabbar :current="0"/>
  </view>

</template>

<script>
import CustomTabbar from '@/components/cjx/tabbar_hexiao_ywy.vue';
import {getAdminInfo} from "../../../../utils/auth";
import {getAdminUserInfo} from "../../../../api/hexiao";
import SelectStoreDrawer from '@/components/cjx/select-store-drawer.vue';

export default {
  components: {
    CustomTabbar,
    SelectStoreDrawer
  },
  data() {
    return {
      selectedStore: 0,
      showDrawer:0,
      imgurl:"https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu",
      userInfo: {
        name: '',
        role: '超吉炫'
      },
      stats: {
        storeCount: 0,
        pointsCount: 0
      }
    };
  },
  onLoad(){
    let info = getAdminInfo();
    this.userInfo.role = this.userInfo.role+""+info.roleName;
    this.userInfo.name = info.userName;
  },
  onShow(){
    getAdminUserInfo().then(res=>{
      this.stats.storeCount = res.data.storeCount;
      this.stats.pointsCount = res.data.pointTotal;
    })
  },
  methods: {
    // 监听从抽屉组件传来的 select 事件

    onStoreSelect(store) {
      console.log('在首页接收到选中的门店:', store);
      this.selectedStore = store;
      uni.navigateTo({ url: '/pages/cjx/hexiao/ywy/scan_code?type='+this.showDrawer+'&storeId='+store.id });
    },
    // 格式化数字，添加千位分隔符
    formatNumber(num) {
      return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    },
    // 扫码事件
    scanCode(type) {
      // uni.navigateTo({ url: `/pages/cjx/hexiao/scan_code` });
      if("stock" === type){
        this.showDrawer = 1;
      }else{
        this.showDrawer = 2;
      }
    },
    build(){
      uni.showToast({
        title: '功能建设中',
        icon: 'none'
      });
    },
    // 页面跳转
    navigateTo(page) {
      console.log('准备跳转到:', page);
      // uni.navigateTo({ url: `/pages/${page}/${page}` });

      if("stockRecords" === page){
        uni.navigateTo({ url: `/pages/cjx/hexiao/ywy/add_goods_record` });
      }
      else if("verifyRecords" === page){
        uni.navigateTo({ url: `/pages/cjx/hexiao/ywy/hexiao_record` });
      }else if("patrolRecords" === page){
        uni.navigateTo({ url: `/pages/cjx/hexiao/ywy/patrol_record` });
      }else if("pointsStats" === page){
        uni.navigateTo({ url: `/pages/cjx/hexiao/score_list?score=`+stats.pointsCount });
      }
      else{
        this.build();
      }
    }
  }
}
</script>

<style lang="scss">
.page-container {
  background-image: url("https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/hexiao/hexiao_bg.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.page-title {
  color: #ffffff;
  text-align: center;
  font-size: 19px;
  height: 160rpx;
  line-height: 160rpx;
}
.header-section {
  padding: 40rpx 40rpx 80rpx;
  padding-top: 0rpx;
  color: #ffffff;

  .greeting-text {
    font-size: 32rpx;
    opacity: 0.9;
  }

  .title-text {
    font-size: 42rpx;
    font-weight: bold;
    margin-top: 66rpx;
  }
}
.content-grid {
  padding: 0 30rpx;
  margin-top: -40rpx;
  position: relative;
  z-index: 10;
  // 使用CSS Grid布局
  display: grid;
  grid-template-columns: 1fr 1fr; // 两列等宽
  gap: 20rpx; // 卡片间距

}

.card {
  background-image: url("https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/hexiao/mini_bg.png");
  background-position: center;
  background-repeat: no-repeat;
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 25rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;

  .card-title {
    font-size: 38rpx;
    font-weight: 600;
    color: #333;
  }

  .icon-wrapper {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20rpx;
  }
}

.large-card {
  // 关键：让这个卡片跨越两行
  grid-row: span 2;
  height: 83%; // 确保高度自适应
  position: relative;
  flex-direction: column;
  justify-content: space-between;
  color: #ffffff;

  background-image: url("https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/hexiao/lan_bg.png");
  background-position: center;
  background-repeat: no-repeat;

  .large-card-text {
    position: relative;
    left: -18%;
    top: 16px;
    .card-title { color: #ffffff; }
    .card-subtitle { font-size: 24rpx; opacity: 0.8; margin: 10rpx 0; }
  }

  .scan-button {
    background-color: #ffffff;
    color: #5E87FF;
    font-size: 24rpx;
    padding: 8rpx 20rpx;
    border-radius: 30rpx;
    display: inline-block;
    margin-top: 20rpx;
  }

  .large-card-icon {
    align-self: flex-end;
    width: 140rpx;
    height: 140rpx;
    image { width: 100%; height: 100%; }
  }
}

.small-card {
  flex: 1;
}

.stat-card {
  // 关键：让统计卡片默认只占一列，但如果需要跨列可以单独设置
  // grid-column: span 2; // 如果需要单张卡片占满一行，则打开此行

  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  position: relative;
  padding-left: 40rpx;

  &::before {
    content: '';
    position: absolute;
    left: 20rpx;
    top: 35rpx;
    width: 8rpx;
    height: 25rpx;
    background-color: #6a8dff;
    border-radius: 4rpx;
  }

  .stat-content {
    .stat-title { font-size: 28rpx; color: #666; }
    .stat-value { font-size: 44rpx; font-weight: bold; color: #333; margin: 10rpx 0; }
    .stat-label { font-size: 24rpx; color: #999; }
  }

  .stat-image {
    width: 120rpx;
    position: absolute;
    right: 20rpx;
    bottom: 20rpx;
  }
}
.mendian-card{
  background-image: url("https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/hexiao/mendian.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: inherit;

}
.jifen-card{
  background-size: 100% 100%;
  background-image: url("https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/hexiao/jifen.png");
  background-position: center;
  background-repeat: no-repeat;
  background-color: inherit;

}
</style>