feat: UI调整;

api/fetch.js

@@ -1,7 +1,7 @@
 import api from './api.js'
 
 const fetch = (key, data = {}, transform = true, loadingTitle) => {
-  return new Promise(resolve => {
+  return new Promise((resolve, reject) => {
     
     const callback = (res) => {
       if (!transform) {

components/serve/serveModuleCard.vue

@@ -1,5 +1,6 @@
 <template>
   <view class="card">
+    <serveModuleView v-model="isFold" :data="data" @change="onChange"></serveModuleView>
     <view v-if="!isFold" class="content">
       <view class="list">
         <view class="list-item" v-for="item in list" :key="item.id">
@@ -7,7 +8,6 @@
         </view>
       </view>
     </view>
-    <serveModuleView :style="style" v-model="isFold" :data="data" @change="onChange"></serveModuleView>
   </view>
 </template>
 
@@ -34,11 +34,6 @@
         list: [],
       }
     },
-    computed: {
-      style() {
-        return this.isFold ? '' : 'position: absolute; top: 0; left: 0; width: 100%;'
-      }
-    },
     methods: {
       async getData() {
         try {
@@ -79,13 +74,11 @@
   }
 
   .list {
-    padding: 90rpx 20rpx 0 12rpx;
+    padding: 0 12rpx;
     box-sizing: border-box;
 
     &-item {
-      & + & {
-        margin-top: 26rpx;
-      }
+      margin-top: 26rpx;
     }
   }
 </style>

components/serve/serveModuleView.vue

@@ -1,19 +1,11 @@
 <template>
-  <view :style="style" @click="onClick">
-    <view class="module">
-      <image class="module-bg" src="@/static/image/bg-serve.png" mode="widthFix"></image>
-      <image class="module-bg absolute" src="@/static/image/bg-serve-1.png" mode="widthFix"></image>
-      <image class="module-bg absolute" src="@/static/image/bg-serve-2.png" mode="widthFix"></image>
-      <view class="flex module-fg">
-        <view class="flex module-info">
-          <view class="title">{{ data.title }}</view>
-          <image class="icon" src="@/static/image/serve-icon.png" mode="widthFix"></image>
-        </view>
-        <button class="flex btn">
-          <view>更多</view>
-          <uv-icon name="arrow-down-fill" color="#808080" size="10rpx"></uv-icon>
-        </button>
-      </view>
+  <view class="module" @click="onClick">
+    <image class="module-bg" :src="data.image" mode="scaleToFill"></image>
+    <view class="flex module-fg">
+      <button class="flex btn">
+        <view>更多</view>
+        <uv-icon name="arrow-down-fill" color="#808080" size="10rpx"></uv-icon>
+      </button>
     </view>
   </view>
 </template>
@@ -58,46 +50,35 @@ export default {
 
 <style scoped lang="scss">
 
+  $w: calc(100vw - 38rpx*2);
+
   .module {
     font-size: 0;
-    width: 100%;
+    width: $w;
     height: auto;
     position: relative;
+    font-size: 0;
+    border-radius: 25rpx;
+    overflow: hidden;
+    box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0,0,0,0.16);
+
     &-bg {
-      width: 100%;
-      height: auto;
+      width: $w;
+      height: calc(#{$w} * 179 / 714);
     }
 
     &-fg {
       position: absolute;
       top: 0;
       left: 0;
-      justify-content: space-between;
+      align-items: center;
+      justify-content: flex-end;
       width: 100%;
-      padding: 30rpx 30rpx 0 22rpx;
+      height: 100%;
+      padding: 0 22rpx;
       box-sizing: border-box;
     }
 
-    &-info {
-      column-gap: 16rpx;
-
-      .title {
-        font-size: 32rpx;
-        font-weight: 700;
-        line-height: 1;
-        font-family: PingFang SC;
-        color: transparent;
-        background-image: linear-gradient(to right, #6851A7, #AA87F0);
-        background-clip: text;
-        display: inline-block;
-      }
-
-      .icon {
-        width: 30rpx;
-        height: auto;
-      }
-    }
-
     .btn {
       column-gap: 10rpx;
       font-size: 22rpx;
@@ -105,9 +86,4 @@ export default {
     }
   }
 
-  .absolute {
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
 </style>

components/serve/serveSecondModuleCard.vue

@@ -1,12 +1,6 @@
 <template>
   <view class="flex card" @click="jumpToList(data.id, data.title)">
-    <image class="card-icon" :src="data.icon" mode="aspectFit"></image>
-    <view class="flex card-title">
-      <view>{{ data.title }}</view>
-      <image class="card-title-icon" src="@/static/image/serve-second-icon.png" mode="widthFix"></image>
-    </view>
-
-    <image class="card-bg" src="@/static/image/card-bg-icon.png" mode="widthFix"></image>
+    <image class="card-bg" :src="data.image" mode="scaleToFill"></image>
   </view>
 </template>
 
@@ -31,41 +25,20 @@
 </script>
 
 <style scoped lang="scss">
+    $w: calc(100vw - 50rpx*2);
+
   .card {
-    justify-content: flex-start;
-    column-gap: 78rpx;
     position: relative;
-    width: 100%;
-    height: 200rpx;
-    padding: 0 28rpx;
-    box-sizing: border-box;
-    background: linear-gradient(to right, rgba($color: #C8C3FD, $alpha: 0.22), #FFFFFF);
-    border-radius: 10rpx;
-    box-shadow: 4rpx 4rpx 6rpx 0rpx rgba(0,0,0,0.15);
-
-    &-icon {
-      width: 180rpx;
-      height: 230rpx;
-    }
-
-    &-title {
-      column-gap: 14rpx;
-      font-size: 32rpx;
-      font-weight: 600;
-      color: #9082D8;
-
-      &-icon {
-        width: 24rpx;
-        height: auto;
-      }   
-    }
+    width: $w;
+    height: auto;
+    font-size: 0;
+    border-radius: 25rpx;
+    overflow: hidden;
+    box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0,0,0,0.16);
 
     &-bg {
-      width: 142rpx;
-      height: auto;
-      position: absolute;
-      bottom: 0;
-      right: 8rpx;
+      width: $w;
+      height: calc(#{$w} * 179 / 714);
     }
   }
 </style>

pages.json

@@ -44,8 +44,6 @@
 				"path": "case/index"
 			}, {
 				"path": "case/poster"
-			}, {
-				"path": "serve/category"
 			}, {
 				"path": "serve/search"
 			}, {

pages/index/case.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="page__view">
     <view class="bg">
-      <image class="img" src="@/static/image/bg-index.png" mode="widthFix"></image>
+      <image class="img" :src="configList.page_index_bg" mode="widthFix"></image>
       <image class="bg-logo" src="@/static/image/bg-icon.png" mode="widthFix"></image>
     </view>
 
@@ -157,18 +157,18 @@
 
   .header {
     margin-bottom: 32rpx;
-    padding-top: calc(var(--status-bar-height) + 40rpx);
+    padding-top: calc(var(--status-bar-height) + 60rpx);
     justify-content: space-between;
 
     .title {
       font-size: 44rpx;
-      font-weight: 600;
+      font-weight: 700;
       color: #6851A7;
     }
 
     .desc {
-      font-size: 18rpx;
-      font-weight: 500;
+      font-size: 22rpx;
+      font-weight: 600;
       color: #808080;
     }
 

pages/index/center.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="page__view">
     <view class="bg">
-      <image class="img" src="@/static/image/bg-index.png" mode="widthFix"></image>
+      <image class="img" :src="configList.page_index_bg" mode="widthFix"></image>
       <image class="bg-logo" src="@/static/image/bg-icon.png" mode="widthFix"></image>
     </view>
 
@@ -12,14 +12,6 @@
           <view class="title">{{ configList.page_center_title }}</view>
           <view class="desc">{{ configList.page_center_desc }}</view>
         </view>
-        <view class="flex icon">
-          <image class="img" :src="configList.config_logo" mode="widthFix"></image>
-        </view>
-      </view>
-
-      <!-- 轮播图 -->
-      <view class="section swiper">
-        <uv-swiper :list="bannerList" keyName="image" indicator indicatorMode="dot" indicatorActiveColor="#FFFFFF" indicatorInactiveColor="#6851A7" height="424rpx"></uv-swiper>
       </view>
 
       <view class="list">
@@ -50,21 +42,11 @@
     },
     data() {
       return {
-        bannerList: [],
       }
     },
     onLoad() {
-      this.fetchBanner()
     },
     methods: {
-			// 获取轮播图
-			async fetchBanner() {
-				try {
-					this.bannerList = (await this.$fetch('queryBannerList', { type: '3' }))?.records // type：0-首页 1-案例 2-服务 3-其他
-				} catch (err) {
-
-				}
-			},
       jumpToDetail(paramCode) {
         uni.navigateTo({
 					url: `/pages_order/center/serve?paramCode=${paramCode}`
@@ -83,18 +65,18 @@
   }
 
   .header {
-    padding-top: calc(var(--status-bar-height) + 40rpx);
+    padding-top: calc(var(--status-bar-height) + 60rpx);
     justify-content: space-between;
 
     .title {
       font-size: 44rpx;
-      font-weight: 600;
+      font-weight: 700;
       color: #6851A7;
     }
 
     .desc {
-      font-size: 18rpx;
-      font-weight: 500;
+      font-size: 22rpx;
+      font-weight: 600;
       color: #808080;
     }
 
@@ -162,6 +144,7 @@
   }
 
   .list {
+    margin-top: 60rpx;
     padding: 0 38rpx;
 
     &-item {

pages/index/index.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="page__view">
     <view class="bg">
-      <image class="img" src="@/static/image/bg-index.png" mode="widthFix"></image>
+      <image class="img" :src="configList.page_index_bg" mode="widthFix"></image>
       <image class="bg-logo" src="@/static/image/bg-icon.png" mode="widthFix"></image>
     </view>
 
@@ -129,7 +129,6 @@
         uni.navigateTo({
 					url: '/pages_order/thesis/search?search=' + this.keyword
 				})
-				this.keyword = ''
 			},
       jumpToCategory(categoryOne, categoryTwo, title, api) {
         uni.navigateTo({
@@ -149,18 +148,18 @@
   }
 
   .header {
-    padding-top: calc(var(--status-bar-height) + 40rpx);
+    padding-top: calc(var(--status-bar-height) + 60rpx);
     justify-content: space-between;
 
     .title {
       font-size: 44rpx;
-      font-weight: 600;
+      font-weight: 700;
       color: #6851A7;
     }
 
     .desc {
-      font-size: 18rpx;
-      font-weight: 500;
+      font-size: 22rpx;
+      font-weight: 600;
       color: #808080;
     }
 
@@ -335,7 +334,7 @@
         column-gap: 12rpx;
         padding: 8rpx 24rpx 8rpx 26rpx;
         font-size: 20rpx;
-        font-weight: 400;
+        font-weight: 600;
         color: #6851A7;
         background: #FFFFFF;
         border-radius: 20rpx;

pages/index/serve.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="page__view">
     <view class="bg">
-      <image class="img" src="@/static/image/bg-index.png" mode="widthFix"></image>
+      <image class="img" :src="configList.page_index_bg" mode="widthFix"></image>
       <image class="bg-logo" src="@/static/image/bg-icon.png" mode="widthFix"></image>
     </view>
 
@@ -25,20 +25,6 @@
         </uv-search>
       </view>
 
-      <!-- 轮播图 -->
-      <!-- <view class="section swiper">
-        <uv-swiper :list="bannerList" keyName="image" indicator indicatorMode="dot" indicatorActiveColor="#FFFFFF" indicatorInactiveColor="#6851A7" height="424rpx"></uv-swiper>
-      </view> -->
-
-      <!-- <view class="list">
-        <view class="list-item"
-          v-for="item in list" 
-          :key="item.id"
-          @click="jumpToSecondCategory(item.id, item.title)"
-        >
-          <image class="list-item-bg" :src="item.image" mode="scaleToFill"></image>
-        </view>
-      </view> -->
       <view class="list">
         <view class="list-item" v-for="item in list" :key="item.id" >
           <serveModuleCard :data="item"></serveModuleCard>
@@ -71,31 +57,18 @@
 					pid: '0',
 				},
         mixinsListApi: 'queryCategoryServiceModuleList',
-        bannerList: [],
         firstCategoryList: [],
       }
     },
     onLoad() {
-      // this.fetchBanner()
       this.getData()
     },
     methods: {
-			// 获取轮播图
-			async fetchBanner() {
-				try {
-					this.bannerList = (await this.$fetch('queryBannerList', { type: '2' }))?.records // type：0-首页 1-案例 2-服务 3-其他
-				} catch (err) {
-
-				}
-			},
 			search() {
-        // todo
-			},
-      jumpToSecondCategory(pid, title) {
         uni.navigateTo({
-					url: `/pages_order/serve/category?pid=${pid}&title=${title}`
+					url: `/pages_order/serve/search?search=${this.keyword}`
 				})
-      },
+			},
     },
   }
 </script>
@@ -111,18 +84,18 @@
 
   .header {
     margin-bottom: 32rpx;
-    padding-top: calc(var(--status-bar-height) + 40rpx);
+    padding-top: calc(var(--status-bar-height) + 60rpx);
     justify-content: space-between;
 
     .title {
       font-size: 44rpx;
-      font-weight: 600;
+      font-weight: 700;
       color: #6851A7;
     }
 
     .desc {
-      font-size: 18rpx;
-      font-weight: 500;
+      font-size: 22rpx;
+      font-weight: 600;
       color: #808080;
     }
 
@@ -221,7 +194,7 @@
   }
 
   .list {
-    padding: 0 28rpx 0 32rpx;
+    padding: 0 38rpx;
     
     &-item {
       & + & {

pages_order/serve/category.vue

@@ -1,80 +0,0 @@
-<template>
-  <view class="page__view">
-
-		<!-- 导航栏 -->
-		<navbar :title="title" leftClick @leftClick="$utils.navigateBack" />
-
-    <view class="list">
-      <view class="list-item"
-        v-for="item in secondCategoryList" 
-        :key="item.id"
-        @click="jumpToList(item.id, item.title)"
-      >
-        <image class="list-item-bg" :src="item.image" mode="scaleToFill"></image>
-      </view>
-    </view>
-  </view>
-</template>
-
-<script>
-  export default {
-    data() {
-      return {
-        pid: null,
-        title: null,
-        bannerList: [],
-        secondCategoryList: [],
-      }
-    },
-    onLoad(arg) {
-
-      const { pid, title } = arg
-
-      this.pid = pid
-      this.title = title
-
-      this.getData()
-    },
-    methods: {
-      async getData() {
-        try {
-          this.secondCategoryList = (await this.$fetch('queryCategoryServiceModuleList', { pid: this.pid, pageNo: 1, pageSize: 1000 }))?.records
-        } catch (err) {
-
-        }
-      },
-      jumpToList(categoryId, title) {
-        uni.navigateTo({
-					url: `/pages_order/serve/search?categoryId=${categoryId}&title=${title}`
-				})
-      },
-    },
-  }
-</script>
-
-<style scoped lang="scss">
-
-  .list {
-    margin: 49rpx 18rpx 17rpx 18rpx;
-
-    &-item {
-      position: relative;
-      font-size: 0;
-      border-radius: 25rpx;
-      overflow: hidden;
-      box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0,0,0,0.16);
-
-      & + & {
-        margin-top: 32rpx;
-      }
-
-      &-bg {
-        $w: calc(100vw - 18rpx*2);
-        width: $w;
-        height: calc(#{$w} * 179 / 714);
-      }
-
-    }
-  }
-
-</style>

pages_order/serve/search.vue

@@ -36,11 +36,19 @@
     },
     onLoad(arg) {
 
-      const { categoryId, title } = arg
+      const { categoryId, search, title } = arg
 
-      this.title = title
+      if (title) {
+        this.title = title
+      }
+
+      if (categoryId) {
+        this.queryParams.categoryId = categoryId
+      }
 
-      this.queryParams.categoryId = categoryId
+      if (search) {
+        this.queryParams.title = search
+      }
 
       this.getData()
     },

pages_order/thesis/search.vue

@@ -2,7 +2,7 @@
   <view class="page__view">
     
 		<!-- 导航栏 -->
-		<navbar :title="title" leftClick @leftClick="$utils.navigateBack" bgColor="transparent" />
+		<navbar :title="title" leftClick @leftClick="$utils.navigateBack" />
     
     <view class="top">
       <!-- 搜索栏 -->

pages_order/thesis/thesisInfoView.vue

@@ -7,8 +7,8 @@
     <view class="content" v-if="data.shortTitle">
       {{ data.shortTitle || '' }}
     </view>
-    <view class="flex tag" v-if="data.tags">
-      <view class="tag-item" v-for="(item, index) in data.tags" :key="index">
+    <view class="flex tag" v-if="tags.length">
+      <view class="tag-item" v-for="(item, index) in tags" :key="index">
         {{ item }}
       </view>
     </view>
@@ -27,7 +27,12 @@
           return {}
         }
       }
-    }
+    },
+    computed: {
+      tags() {
+        return this.data?.tag?.split?.('、') || []
+      }
+    },
   }
 </script>
 
@@ -65,12 +70,12 @@
       row-gap: 8rpx;
 
       &-item {
-        padding: 4rpx 8rpx;
+        padding: 4rpx 10rpx;
         font-size: 16rpx;
         font-weight: 700;
         color: #FFFFFF;
         background: rgba($color: #6851A7, $alpha: 0.59);
-        border-radius: 10rpx;
+        border-radius: 4rpx;
       }
     }