feat(首页): 添加试衣间页面并更新相关配置

- 新增试衣间页面组件，支持店铺装修和轮播图功能- 更新 .env 文件，修改开发环境基础 URL - 调整 app.js 中的初始化逻辑，
2025-09-19 10:19:11 +08:00
parent a93e4b7e32
commit cb434a532c
4 changed files with 161 additions and 7 deletions
@@ -0,0 +1,142 @@
+<!-- 首页，支持店铺装修 -->
+<template>
+  <view v-if="template">
+    <uni-swiper-dot :info="state.info" :current="state.current" field="content" :mode="'default'">
+      <view class="uni-margin-wrap">
+        <swiper
+          class="swiper"
+          circular
+          :autoplay="true"
+          :interval="2000"
+          :duration="500"
+          @change="swiperChange"
+        >
+          <swiper-item v-for="(item, index) in state.info" :key="index">
+            <view class="swiper-item uni-bg-red">{{ item.content }}</view>
+          </swiper-item>
+        </swiper>
+      </view>
+    </uni-swiper-dot>
+  </view>
+</template>
+
+<script setup>
+  import { computed, reactive } from 'vue';
+  import { onLoad, onPageScroll, onPullDownRefresh } from '@dcloudio/uni-app';
+  import sheep from '@/sheep';
+  import $share from '@/sheep/platform/share';
+  // 隐藏原生tabBar
+  uni.hideTabBar({
+    fail: () => {},
+  });
+
+  const state = reactive({
+    info: [
+      {
+        content: '内容 A',
+      },
+      {
+        content: '内容 B',
+      },
+      {
+        content: '内容 C',
+      },
+    ],
+    current: 0,
+  });
+  const swiperChange = (e) => {
+    console.log('🚀 ~ swiperChange 🐶40 ~ e: ', e);
+    state.current = e.detail.current;
+  };
+
+  const template = computed(() => sheep.$store('app').template?.home);
+  // 在此处拦截改变一下首页轮播图 此处先写死后期复活 放到启动函数里
+  // (async function() {
+  // console.log('原代码首页定制化数据',template)
+  // let {
+  // 	data
+  // } = await index2Api.decorate();
+  // console.log('首页导航配置化过高无法兼容',JSON.parse(data[1].value))
+  // 改变首页底部数据 但是没有通过数组id获取商品数据接口
+  // let {
+  // 	data: datas
+  // } = await index2Api.spids();
+  // template.value.data[9].data.goodsIds = datas.list.map(item => item.id);
+  // template.value.data[0].data.list = JSON.parse(data[0].value).map(item => {
+  // 	return {
+  // 		src: item.picUrl,
+  // 		url: item.url,
+  // 		title: item.name,
+  // 		type: "image"
+  // 	}
+  // })
+  // }())
+
+  onLoad((options) => {
+    // #ifdef MP
+    // 小程序识别二维码
+    if (options.scene) {
+      const sceneParams = decodeURIComponent(options.scene).split('=');
+      console.log('sceneParams=>', sceneParams);
+      options[sceneParams[0]] = sceneParams[1];
+    }
+    // #endif
+
+    // 预览模板
+    if (options.templateId) {
+      sheep.$store('app').init(options.templateId);
+    }
+
+    // 解析分享信息
+    if (options.spm) {
+      $share.decryptSpm(options.spm);
+    }
+
+    // 进入指定页面(完整页面路径)
+    if (options.page) {
+      sheep.$router.go(decodeURIComponent(options.page));
+    }
+  });
+
+  // 下拉刷新
+  onPullDownRefresh(() => {
+    sheep.$store('app').init();
+    setTimeout(function () {
+      uni.stopPullDownRefresh();
+    }, 800);
+  });
+
+  onPageScroll(() => {});
+</script>
+
+<style>
+  .uni-margin-wrap {
+    width: 100%;
+  }
+  .swiper {
+    height: 680rpx;
+  }
+  .swiper-item {
+    display: block;
+    height: 680rpx;
+    line-height: 300rpx;
+    text-align: center;
+    background: green;
+  }
+  .swiper-list {
+    margin-top: 40rpx;
+    margin-bottom: 0;
+  }
+  .uni-common-mt {
+    margin-top: 60rpx;
+    position: relative;
+  }
+  .info {
+    position: absolute;
+    right: 20rpx;
+  }
+  .uni-padding-wrap {
+    width: 550rpx;
+    padding: 0 100rpx;
+  }
+</style>