移动端修改

src/views/create/createH5.vue

@@ -172,7 +172,15 @@ export default {
     if (this.$route.query.id) {
       detailApi(this.$route.query.id).then(res => {
         console.log(res, '详情');
-        this.form = res.data
+        let data = res.data
+        let characterPersonalityTags = data.characterPersonalityTags.split(',')
+        for (let i = 0; i < characterPersonalityTags.length; i++) {
+          characterPersonalityTags[i] = parseInt(characterPersonalityTags[i])
+        }
+        data.characterPersonalityTags = characterPersonalityTags
+        console.log(data, 'data');
+        this.form = data
+
       })
     }
   },
@@ -224,19 +232,49 @@ export default {
       })
     },
     submitForm() {
-      this.$refs.form.validate((valid) => {
+      this.$refs.form.validate((valid, object) => {
         if (valid) {
-          addCharacterApi(this.form).then(() => {
-            this.$message({
-              message: '创建成功',
-              type: 'success'
-            });
-            this.$refs.form.resetFields()
-            this.$router.push('/profile')
-          })
+          if (this.form.id) {
+            updateCharacterApi(this.form).then(() => {
+              this.$message({
+                message: '编辑成功',
+                type: 'success'
+              });
+              this.$refs.form.resetFields()
+              this.$router.push('/profile')
+            })
+          } else {
+            addCharacterApi(this.form).then(() => {
+              this.$message({
+                message: '创建成功',
+                type: 'success'
+              });
+              this.$refs.form.resetFields()
+              this.$router.push('/profile')
+            })
+          }
+
+        } else {
+          console.log(object, 'object.keys() ');
+          let keys = Object.keys(object)
+          this.$modal.msgError(object[keys[0]][0].message);
         }
       })
     },
+    // submitForm() {
+    //   this.$refs.form.validate((valid) => {
+    //     if (valid) {
+    //       addCharacterApi(this.form).then(() => {
+    //         this.$message({
+    //           message: '创建成功',
+    //           type: 'success'
+    //         });
+    //         this.$refs.form.resetFields()
+    //         this.$router.push('/profile')
+    //       })
+    //     }
+    //   })
+    // },
   }
 }
 

src/views/homeComponents/searchH5.vue

@@ -2,20 +2,13 @@
   <div class="h-full w-full flex flex-col">
     <div class="flex items-center py-2">
       <i class="el-icon-arrow-left px-2" @click="$router.push('/home')"></i>
-      <el-input ref="searchInput" v-model="searchValue" placeholder="请输入搜索关键词"></el-input>
+      <el-input ref="searchInput" v-model="query.characterName" placeholder="请输入搜索关键词" @change="search"></el-input>
       <i class="el-icon-search px-2" @click="search"></i>
     </div>
-    <div class="lietRom flex-1 overflow-auto" 
-      v-infinite-scroll="load"
-      infinite-scroll-disabled="disabled"
-    >
+    <div class="lietRom flex-1 overflow-auto" v-infinite-scroll="load" infinite-scroll-disabled="disabled">
       <div class="list mt-4">
-        <div
-          v-for="(item, index) in characterList"
-          :key="index"
-          class="box2 relative rounded-lg overflow-hidden shadow-lg cursor-pointer"
-          @click="toDetail(item)"
-        > 
+        <div v-for="(item, index) in characterList" :key="index"
+          class="box2 relative rounded-lg overflow-hidden shadow-lg cursor-pointer" @click="toDetail(item)">
           <div class="w-full overflow-hidden">
             <img :src="baseApi + item.picture" class="w-full img" />
           </div>
@@ -25,7 +18,8 @@
               {{ item.prologue }}
             </p>
             <div class="labels flex my-1 flex-wrap">
-              <div v-for="(item2, index2) in item.labelArr" :key="index2" class="m-0.5 tag px-2 py-1 rounded flex items-center text-xs text-gray-500">
+              <div v-for="(item2, index2) in item.labelArr" :key="index2"
+                class="m-0.5 tag px-2 py-1 rounded flex items-center text-xs text-gray-500">
                 <!-- <i class="fas fa-smile text-yellow-400 mr-2"></i> -->
                 {{ item2 }}
               </div>
@@ -34,8 +28,8 @@
           <div class="absolute w-full bottom-0 flex items-center justify-between mt-3 px-2 pb-2">
             <div></div>
             <div class="flex items-center box1 text-red-500">
-              <v-icon name="fire" scale="1"/>
-              <span class="ml-1">{{ item.hotCount||0 }}</span>
+              <v-icon name="fire" scale="1" />
+              <span class="ml-1">{{ item.hotCount || 0 }}</span>
             </div>
           </div>
         </div>
@@ -54,17 +48,18 @@ export default {
     return {
       query: {
         pageSize: 10,
-        pageNum: 1
+        pageNum: 1,
+        characterName: ''
       },
       total: 0,
       loading: false,
       noMore: true,
       characterList: [],
-      searchValue: ''
+
     }
   },
   computed: {
-    disabled () {
+    disabled() {
       return this.loading || this.noMore
     }
   },
@@ -73,28 +68,23 @@ export default {
   },
   methods: {
     search() {
-      let query = {
-        characterName: this.searchValue,
-      }
       this.characterList = []
       this.query.pageNum = 1
-      this.noMore = false
-      this.getCharacterList(query)
+      // this.noMore = false
+      if (!this.query.characterName) {
+        return
+      }
+      this.getCharacterList()
     },
     load() {
       console.log('加载更多');
       this.query.pageNum += 1
       this.getCharacterList()
     },
-    getCharacterList(query) {
+    getCharacterList() {
       this.loading = true
       let params = this.query
-      if (query) {
-        params = {
-          ...params,
-          ...query
-        }
-      }
+      console.log(params, 'params');
       characterListApi(params).then(res => {
         // console.log(res, '角色列表');\
         if (res.rows.length == 0) {
@@ -108,7 +98,7 @@ export default {
     },
     toDetail(item) {
       this.$router.push({
-        path: '/chat',
+        path: '/chatH5',
         query: {
           characterId: item.id
         }
@@ -127,44 +117,53 @@ export default {
   // width: 68px;
   font-size: 14px;
 }
+
 .box2 {
-  background: #ffffff0f; 
+  background: #ffffff0f;
   border: 1px solid #ffffff2e;
   height: 380px;
 }
+
 .box2:hover {
   border: solid 1px var(--bg-color1);
 }
+
 .img {
   height: 200px;
   object-fit: cover;
   object-position: top;
   transition: transform .2s
 }
+
 .img:hover {
   transform: scale(1.1);
 }
+
 .labels {
   max-height: 56px;
   overflow-y: auto;
 }
+
 .prologue {
-  overflow:hidden;
+  overflow: hidden;
   text-overflow: ellipsis;
   -webkit-line-clamp: 2;
   display: -webkit-box;
   -webkit-box-orient: vertical;
 }
+
 .list {
   display: grid;
   grid-template-columns: 1fr 1fr;
   /* grid-auto-rows: minmax(280px, 280px); */
   grid-gap: 10px;
 }
+
 .lietRom {
   padding: 5px;
   padding-bottom: 60px;
 }
+
 .lietRom::-webkit-scrollbar {
   display: none;
 }

src/views/user/userH5.vue

@@ -1,44 +1,45 @@
 <template>
   <div class="w-full h-full relative" style="padding-bottom: 60px;">
-    <div class="flex justify-between w-full px-4 py-6 text-white top" @click="toPage('userInfo')">
-      <div class="flex">
-        <div class="w-14 h-14 border-2 border-gray-50 rounded-full bg-gray-300">
-          <img class="w-full h-full rounded-full" :src="baseURL + userInfo.profilePicture" alt="">
-        </div>
-        <div class="flex flex-col ml-4">
-          <div>{{ userInfo.userName }}</div>
-        </div>
-      </div>
-      <i class="el-icon-arrow-right"></i>
+    <div class=" w-full h-40 top flex items-end relative overflow-hidden bg-white">
+      <img class=" absolute object-cover w-full h-full" v-if="userInfo.cover" :src="baseApi + userInfo.cover" alt="">
     </div>
-    <div class="boxs p-5 border-gray-200 shadow-md rounded-md">
-      <!-- <div class="box px-2 py-2 mb-2 flex items-center rounded-md cursor-pointer"
-        :class="active === 'userInfo' ? '' : ''" @click="menuClick('userInfo')">
-        <i class="el-icon-user text-xl"></i>
-        用户信息
-      </div> -->
-      <div class="box px-2 py-2 flex items-center rounded-md cursor-pointer " @click="toPage('consume')">
-        <i class="el-icon-setting text-xl"></i>
-        消费明细
+    <div class="px-6 flex justify-between relative w-full">
+      <div class="w-20 h-20 border-2 bg-white border-gray-50 rounded-full" style="transform: translateY(-50%);">
+        <img class="w-full h-full rounded-full" :src="$store.state.user.avatar" alt="">
       </div>
-      <div class="box px-2 py-2 flex items-center rounded-md cursor-pointer " @click="toPage('invite')">
-        <i class="el-icon-present text-xl"></i>
-        邀请有礼
+      <div
+        class="text-gray-700 mt-4 w-20 h-8 text-sm flex justify-center items-center border border-gray-700 rounded-full"
+        @click="toPage('userInfo')">
+        编辑资料
       </div>
-      <!-- <div class="box px-2 py-2 flex items-center rounded-md cursor-pointer " @click="toPage('signIn')">
-        <i class="el-icon-present text-xl"></i>
-        签到
-      </div> -->
-      <div class="box px-2 py-2 flex items-center rounded-md cursor-pointer " @click="toPage('opinion')">
-        <i class="el-icon-message text-xl"></i>
-        意见反馈
+    </div>
+    <div class=" text-gray-700 flex flex-col ml-4 justify-center">
+      <div class="text-lg font-semibold">{{ userInfo.userName }}</div>
+      <!-- <div class="text-sm">账号：{{ userInfo.account }}</div> -->
+      <div class=" text-sm">
+        UID: {{ userInfo.id }}
+        <i class="el-icon-copy-document cursor-pointer"></i>
       </div>
-      <div class="box px-2 py-2 flex items-center rounded-md cursor-pointer " @click="toPage('logOut')">
-        <i class="fa-solid fa-arrow-right-from-bracket text-xl"></i>
-        退出登录
+      <div class="flex mt-2">
+        <div class="text-xs">
+          <span class="text-base font-semibold mr-2">0</span>关注
+        </div>
+        <div class="text-xs ml-4">
+          <span class="text-base font-semibold mr-2">0</span>粉丝
+        </div>
       </div>
-
     </div>
+    <van-cell class=" py-6 text-gray-700 mt-12" title="消费明细" icon="balance-list-o" is-link
+      @click="toPage('consume')"></van-cell>
+    <van-cell class=" py-6 text-gray-700" title="邀请有礼" icon="friends-o" is-link @click="toPage('invite')" />
+    <!-- <van-cell class=" py-6 text-gray-700" title="签到" is-link @click="toPage('signIn')" /> -->
+    <van-cell class=" py-6 text-gray-700" title="意见反馈" icon="envelop-o" is-link @click="toPage('opinion')" />
+    <van-cell class=" py-6 text-gray-700" title="退出登录" is-link @click="toPage('logOut')">
+      <template #title>
+        <i class="fa-solid fa-arrow-right-from-bracket mr-1"></i>
+        <span>退出登录</span>
+      </template>
+    </van-cell>
     <div class="w-full text-gray-500 mb-4 px-4 text-sm absolute" style="bottom: 60px;">
       © 2024 Xchat
       <a :href="`${baseURL}/#/termOfUse`" target="_blank" class="underline mx-1">用户协议</a>
@@ -100,12 +101,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.UserInfo {
-  padding: 10px 10px;
+.top {
+  background: linear-gradient(rgba(0, 0, 0, 0) 23.28%, rgba(0, 0, 0, 0.72) 100%), url(https://cdn-az.rochat.tech/avatar/131__c9103616-e103-11ee-bef2-66a40ff97e79.png) center center / cover no-repeat;
 }
 
-.top {
-  background: linear-gradient(var(--bg-color1) 20%, #fff);
+.UserInfo {
+  padding: 10px 10px;
 }
 
 .boxs {
@@ -116,6 +117,7 @@ export default {
   margin: 15px;
   width: calc(100% - 30px);
   padding: 10px;
+
 }
 
 .box {