我的页面

pages.json

@@ -392,6 +392,18 @@
 						"title": "用户积分",
 						"group": "用户中心"
 					}
+				},
+				{
+					"path": "tryOnPreview",
+					"style": {
+						"navigationBarTitleText": "试戴"
+					},
+					"meta": {
+						"auth": true,
+						"sync": true,
+						"title": "试戴",
+						"group": "用户中心"
+					}
 				}
 			]
 		},

pages/index/components/user-avatar-card.vue

@@ -0,0 +1,143 @@
+<template>
+  <view class="user-avatar-card-ctn">
+    <view class="upper-box">
+      <view class="left-box">
+        <view class="ss-flex" style="align-items: flex-end">
+          <view style="font-size: 36rpx; margin-right: 12rpx">{{
+            userInfo?.nickname || nickname
+          }}</view>
+          <view style="color: #999999; font-size: 24rpx">检测时间：2024-08-09 15:51</view>
+        </view>
+        <view class="ss-flex user-info-block">
+          <view class="user-info-item">女</view>
+          <view class="user-info-item">31岁</view>
+          <view class="user-info-item">168cm</view>
+          <view class="user-info-item">50kg</view>
+        </view>
+      </view>
+      <view class="right-box">
+        <image
+          class="avatar-img"
+          :src="
+            isLogin && userInfo.avatar
+              ? sheep.$url.cdn(userInfo.avatar)
+              : sheep.$url.static('/static/img/shop/default_avatar.png')
+          "
+          mode="aspectFill"
+          @tap="sheep.$router.go('/pages/user/info')"
+        >
+        </image>
+      </view>
+    </view>
+    <view class="below-box">
+      <ul class="attr-ul ss-flex">
+        <li class="attr-li">
+          <view class="label">脸型</view>
+          <view class="value">标准脸</view>
+          <view class="line" />
+        </li>
+        <li class="attr-li">
+          <view class="label">肤色</view>
+          <view class="value">冷肤色</view>
+          <view class="line" />
+        </li>
+        <li class="attr-li">
+          <view class="label">色彩偏好</view>
+          <view class="value">中高明度</view>
+          <view class="line" />
+        </li>
+        <li class="attr-li">
+          <view class="label">色彩定位</view>
+          <view class="value">中高纯度</view>
+        </li>
+      </ul>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import { computed } from 'vue';
+  import sheep from '@/sheep';
+
+  // 是否登录
+  const isLogin = computed(() => sheep.$store('user').isLogin);
+
+  // 用户信息
+  const userInfo = computed(() => sheep.$store('user').userInfo);
+</script>
+
+<style lang="scss" scoped>
+  .user-avatar-card-ctn {
+    width: 100%;
+    background: #000;
+    color: #fff;
+    padding: 36rpx 24rpx;
+    box-sizing: border-box;
+    .upper-box {
+      width: 100%;
+      box-sizing: border-box;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .left-box {
+        .user-info-block {
+          margin-top: 24rpx;
+          font-size: 24rpx;
+          .user-info-item {
+            padding: 4rpx 8rpx;
+            background: linear-gradient(
+              to right,
+              rgba(255, 255, 255, 0.4),
+              rgba(255, 255, 255, 0.2)
+            );
+            margin-right: 10rpx;
+            border-radius: 6rpx;
+          }
+        }
+      }
+
+      .right-box {
+        width: 144rpx;
+        height: 144rpx;
+        border-radius: 50%;
+
+        .avatar-img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    .below-box {
+      width: 100%;
+      margin-top: 48rpx;
+      .attr-ul {
+        width: 100%;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        .attr-li {
+          width: 25%;
+          position: relative;
+          .label {
+            color: #999999;
+            font-size: 24rpx;
+          }
+          .value {
+            color: #fff;
+            font-size: 32rpx;
+            margin-top: 16rpx;
+          }
+          .line {
+            width: 1rpx;
+            height: 100%;
+            background: #fff;
+            position: absolute;
+            right: 30rpx;
+            top: 0;
+          }
+        }
+      }
+    }
+  }
+</style>

pages/index/components/user-tryOn.vue

@@ -0,0 +1,55 @@
+<template>
+  <view class="tryOn-ctn">
+    <view class="title">试戴记录</view>
+    <ul class="record-ul">
+      <li
+        class="record-li"
+        v-for="(item, idx) in recordList"
+        :key="item.id"
+        @click="sheep.$router.go('/pages/user/tryOnPreview', {})"
+      >
+        <!-- <image class="record-img" mode="aspectFill" /> -->
+      </li>
+    </ul>
+  </view>
+</template>
+
+<script setup>
+  import { reactive, ref } from 'vue';
+  import sheep from '@/sheep';
+
+  const recordList = ref([]);
+</script>
+
+<style lang="scss" scoped>
+  .tryOn-ctn {
+    width: 100%;
+    background: #fff;
+    padding: 20rpx 0 100rpx 0;
+    .title {
+      width: 664rpx;
+      height: 46rpx;
+      line-height: 46rpx;
+      color: #000;
+      text-align: center;
+      font-size: 24rpx;
+      border-bottom: 1rpx solid #ccc;
+      margin: 0 auto;
+    }
+    .record-ul {
+      width: 100%;
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      box-sizing: border-box;
+      display: flex;
+      flex-wrap: wrap;
+      margin-top: 50rpx;
+      .record-li {
+        width: 25%;
+        aspect-ratio: 1/1.4;
+        border: 1rpx solid #000;
+      }
+    }
+  }
+</style>

pages/index/index.vue

@@ -1,11 +1,94 @@
+<!-- 这里是模板原来的首页代码 -->
+<!-- 首页，支持店铺装修 -->
 <template>
-  <view>
+  <view v-if="template">
-    <s-layout title="首页" navbar="custom" tabbar="/pages/index/index" :bgStyle="{ color: '#fff' }">
+    <s-layout
-      首页
+      title="首页"
+      navbar="custom"
+      tabbar="/pages/index/index"
+      :bgStyle="template.page"
+      :navbarStyle="template.navigationBar"
+      onShareAppMessage
+    >
+      <s-block
+        v-for="(item, index) in template.components"
+        :key="index"
+        :styles="item.property.style"
+      >
+        <s-block-item :type="item.id" :data="item.property" :styles="item.property.style" />
+      </s-block>
     </s-layout>
   </view>
 </template>
 
-<script setup></script>
+<script setup>
+  import { computed } from 'vue';
+  import { onLoad, onPageScroll, onPullDownRefresh } from '@dcloudio/uni-app';
+  import sheep from '@/sheep';
+  import $share from '@/sheep/platform/share';
+  // 隐藏原生tabBar
+  uni.hideTabBar({
+    fail: () => {},
+  });
 
-<style lang="scss" scoped></style>
+  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></style>

pages/index/user.vue

@@ -8,6 +8,7 @@
     :navbarStyle="template.navigationBar"
     onShareAppMessage
   >
+    <userAvatarCard />
     <s-block
       v-for="(item, index) in template.components"
       :key="index"
@@ -15,13 +16,20 @@
     >
       <s-block-item :type="item.id" :data="item.property" :styles="item.property.style" />
     </s-block>
+    <userTryOn />
+    <!-- 购物车 -->
+    <view class="cart-box" @click="sheep.$router.go('/pages/index/cart')">
+      <uni-icons type="cart" size="28" color="#fff" />
+    </view>
   </s-layout>
 </template>
 
 <script setup>
-  import { computed } from 'vue';
+  import { computed, reactive, ref } from 'vue';
   import { onShow, onPageScroll, onPullDownRefresh } from '@dcloudio/uni-app';
   import sheep from '@/sheep';
+  import userAvatarCard from './components/user-avatar-card.vue';
+  import userTryOn from './components/user-tryOn.vue';
 
   // 隐藏原生tabBar
   uni.hideTabBar({
@@ -42,6 +50,22 @@
   });
 
   onPageScroll(() => {});
+
+  const pattern = reactive({
+    icon: 'uni-icons-heart',
+  });
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+  .cart-box {
+    width: 80rpx;
+    height: 80rpx;
+    border-radius: 50%;
+    background: red;
+    position: fixed;
+    bottom: 80px;
+    right: 10px;
+    text-align: center;
+    line-height: 80rpx;
+  }
+</style>

pages/user/tryOnPreview.vue

@@ -0,0 +1,41 @@
+<template>
+  <view>
+    <s-layout :bgStyle="{ color: '#fff' }">
+      <view class="img-box"></view>
+      <view class="btn-box">
+        <view class="btn">删除</view>
+        <view class="btn">分享</view>
+        <view class="btn">下载</view>
+      </view>
+    </s-layout>
+  </view>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+  .img-box {
+    width: 100%;
+    box-sizing: border-box;
+    width: 724rpx;
+    height: 1046rpx;
+    border: 1rpx solid #000;
+    margin: 0 auto;
+    margin-top: 100rpx;
+  }
+  .btn-box {
+    width: 100%;
+    margin-top: 100rpx;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    .btn {
+      width: 188rpx;
+      height: 80rpx;
+      line-height: 80rpx;
+      background: #000;
+      color: #fff;
+      text-align: center;
+    }
+  }
+</style>

sheep/store/app.js

@@ -185,6 +185,7 @@ const adaptTemplate = async (appTemplate, templateId) => {
   }
 
   const tabBar = diyTemplate?.property?.tabBar;
+
   if (tabBar) {
     appTemplate.basic.tabbar = tabBar;
     // TODO 商城装修没有对 tabBar 进行角标配置，测试角标需打开以下注释