printer-miniapp/src/pages/index/index.vue

<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
{
  style: {
    navigationBarTitleText: '首页',
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <view class="my-page">
    <!-- 自定义导航栏 -->
    <pyh-nv ref="nvRef" :config="nvConfig">
      <wd-img :src="logoSrc" height="30" mode="heightFix"></wd-img>
    </pyh-nv>

    <view class="px-4">
      <!-- 主图轮播 1:1 height="calc(100vw - 60rpx)" -->
      <wd-swiper
        v-model:current="current"
        :list="swiperList"
        :indicator="{ type: 'dots-bar' }"
        value-key="url"
        height="calc(66.6vw - 20rpx)"
        imageMode="widthFix"
        :duration="500"
        custom-class="my-swiper shadow-class"
      ></wd-swiper>
      <!-- 功能区 -->
      <view class="guide-box shadow-class">
        <view class="guide-item" @click="toUserHub()">
          <wd-img :src="deviceImgSrc" width="100" mode="widthFix"></wd-img>
          <view class="item-title">打印助手</view>
          <view class="item-desc">我的打印助手</view>
        </view>
        <view class="guide-item" @click="toPrint()">
          <wd-img :src="fileImgSrc" width="100" mode="widthFix"></wd-img>
          <view class="item-title">远程打印</view>
          <view class="item-desc">无需驱动 隔空打印</view>
        </view>
      </view>
      <!-- 补充入口 -->
      <view class="content">
        <view class="section">
          <view class="item" @click="toConnect()">
            <view class="title">
              <wd-img :src="connectSrc" width="40" mode="widthFix"></wd-img>
              <view class="title-text">设备配网</view>
            </view>
          </view>
          <view class="item" @click="developing()">
            <view class="title">
              <wd-img :src="pictureSrc" width="40" mode="widthFix"></wd-img>
              <view class="title-text">相册图片</view>
            </view>
          </view>
          <view class="item">
            <view class="title" @click="developing()">
              <wd-img :src="wechatFileSrc" width="40" mode="widthFix"></wd-img>
              <view class="title-text">微信图片</view>
            </view>
          </view>
          <view class="item">
            <view class="title" @click="developing()">
              <wd-img :src="wechatInvoiceSrc" width="40" mode="widthFix"></wd-img>
              <view class="title-text">微信发票</view>
            </view>
          </view>
          <!-- <view class="item">
            <view class="title">
              <image :src="settingSrc"></image>
              <view class="title-text">预留入口</view>
            </view>
            <view class="tips">描述信息</view>
          </view> -->
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useUserStore } from '@/store'
import { useToast } from 'wot-design-uni'
import { toLogin } from '@/utils'

defineOptions({
  name: 'Home',
})

const toast = useToast()
const isLogined = computed(() => !!useUserStore().token)
const nvRef: any = ref()
const nvConfig = ref({
  title: '首页',
  type: 'slot', // default slot logo
  back: {
    hide: true,
  },
  bgColor: '#ffffff',
  color: '#000000',
  transparent: {
    type: 'type',
    initColor: '#000000',
  },
})
const logoSrc = ref('/static/images/logo_temp.png')
const deviceImgSrc = ref('/static/images/device.png')
const fileImgSrc = ref('/static/images/file.png')
const connectSrc = ref('/static/images/connect.png')
const pictureSrc = ref('/static/images/picture.png')
const wechatFileSrc = ref('/static/images/wechat_file.png')
const wechatInvoiceSrc = ref('/static/images/wechat_invoice.png')
const swiperList = ref([])
const current = ref(0)

// 初始化 swiperList 数组
function initSwiperList() {
  swiperList.value = [
    { id: '3', url: '/static/images/banner3.jpg' },
    { id: '2', url: '/static/images/banner2.jpg' },
    { id: '1', url: '/static/images/banner1.jpg' },
  ]
}

// 跳转
// uni.reLaunch({
//   url: `/pages/personal/index`,
// })
// uni.navigateTo({
//   url: `/pages/map/index`,
// })

function toUserHub() {
  if (isLogined.value) {
    uni.navigateTo({
      url: `/pages/assistant/index`,
    })
  } else {
    toast.warning('请先前往登录')
    toLogin(1500)
  }
}

function toPrint() {
  if (isLogined.value) {
    uni.navigateTo({
      url: `/pages/print/index`,
    })
  } else {
    toast.warning('请先前往登录')
    toLogin(1500)
  }
}

function developing() {
  toast.warning('该功能开发中...')
}

function toConnect() {
  uni.navigateTo({
    url: `/pages/connect/index`,
  })
}

onLoad((option: any) => {
  initSwiperList()
})

// 监听滚动
onPageScroll((e) => {
  nvRef.value.pageScroll(e)
})
</script>

<style lang="scss" scoped>
.my-page {
  background-color: #eeeeee;
  background-size: 100% auto;
  background-position: top;
  background-repeat: no-repeat;
  width: 100%;
  min-height: calc(100vh - 60rpx);
  padding: 30rpx 0;
  overflow-y: auto;
}

:deep(.my-swiper) {
  border-radius: 40rpx !important;
  swiper {
    border-radius: 40rpx !important;
  }
}

.guide-box {
  display: flex;
  padding: 20rpx 0 20rpx;
  margin-top: 30rpx;
  border-radius: 40rpx;
  background-color: #fff;
  .guide-item {
    flex: 1;
    text-align: center;
    .item-title {
      font-size: 32rpx;
      font-weight: bold;
      margin-top: 4rpx;
    }
    .item-desc {
      font-size: 24rpx;
      margin-top: 4rpx;
      margin-bottom: 20rpx;
    }
  }
  .guide-item + .guide-item {
    border-left: 1px solid transparent; /* 设置透明边框以便于渐变可见 */
    border-image: linear-gradient(to bottom, white, #b8b8b8, white) 10 10; /* 使用渐变作为边框图片 */
  }
}

.content {
  width: 100%;
  position: relative;
  margin-top: 30rpx;

  .section {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-left: -20rpx;
    
    .item {
      flex: 1 1 calc(50% - 20px);
      // background-color: #e1e1e1;
      background-color: #ffffff;
      padding: $uni-spacing-row-lg 0;
      margin: 0 0 20rpx 20rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-radius: 30rpx;
      
      .title {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: $uni-font-size-lg;
        
        .title-text {
          margin-left: 20rpx;
        }
      }
      
      .tips {
        color: $uni-text-color-grey;
        font-size: $uni-font-size-base;
      }
    }
  }
}
</style>