fix: js在线运行

fix: js在线运行

miniprogram/app.js

@@ -12,7 +12,7 @@ App({
       userPrefix: '昵称:',
       userName: '月牙天冲',
       designPlaceholder: '自定义名称',
-      joinTitle: '进入',
+      joinTitle: '微信登录',
       isOldVersion: false
     },
     homePageConfig: {
@@ -35,7 +35,7 @@ App({
         avatarUrl: 'https://yongma16.xyz/staticFile/common/img/aiTop.jpg',
         bgUrl: 'https://yongma16.xyz/staticFile/common/img/aiBg.jpg'
       },
-      mode: 'openAiUse',
+      mode: 'introduce',
       option: 'introduce,openAiUse',
       layoutConfig: {
         introduceText: 'api介绍',
@@ -46,14 +46,15 @@ App({
         reportText: '复制数据',
         copyText: '复制',
         pasteText: '粘贴',
-        upText: "↑",
-        downText: "↓",
+        upText: "",
+        downText: "",
         errorMsg: 'openai的服务器异常！',
         emptyText: '欢迎',
         storageKey: 'openAiOptionsConfig',
         permissionTitle: '很抱歉您没有权限！',
         permissionContent: '请联系微信号：cse-yma16\r\n 需要1元开通权限\r\n1元可支持100条消息！',
         wxInfoImg: 'https://yongma16.xyz/staticFile/common/img/userInfo.png',
+        isShowOpenAi:true,
         limitMsgCount: 10,
         confirmText: '添加微信',
         cancelText: '返回'
@@ -104,6 +105,31 @@ App({
       }
     });
     return markdownText
+  },
+    /**
+   * 转换html
+   * @param {string} text 
+   */
+  changeHtmlText(text) {
+    const markdownText = this.towxml(text, 'html', {
+      theme: 'light', //主题 dark 黑色，light白色，不填默认light
+      events:{
+        tap:(e)=>{
+          console.log('e',e)
+          if(e&&e.target&&e.target.dataset.data){
+            const {attrs,tag}=e.target.dataset.data
+            if(tag==='img'){
+              const {src}=attrs
+              wx.previewImage({
+                current: src, // 当前显示图片的http链接
+                urls: [src] // 需要预览的图片http链接列表
+              })
+            }
+          }
+        }
+      }
+    });
+    return markdownText
   },
   getUserProfile: function (e) {
     // 推荐使用 wx.getUserProfile 获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认

miniprogram/app.wxss

 /**app.wxss**/
+
+
+
 .container {
   display: flex;
   flex-direction: column;

miniprogram/pages/blog/blog.wxss

@@ -33,7 +33,7 @@
 .blog-title{
   text-align: center;
   font-weight: bold;
-  background: rgba(114, 158, 240);
+  background: rgba(16, 116, 187);
   color: #ffffff;
   position: relative;
   margin:0;

miniprogram/pages/codeOnline/codeOnline.js

+// pages/codeOnline/codeOnline.js
+const app = getApp()
+Component({
+    /**
+     * 继承父级样式
+     */
+    options: {
+        addGlobalClass: true,
+    },
+
+
+
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        baseUrl: 'https://yongma16.xyz',
+        runJsPath: '/common-api/searchOpenAiText/',
+        config: {
+            title: '运行js',
+            runCodePlaceholderText: '请输入js',
+            loading: true,
+            runBtnText: '运行',
+            formatBtnText: '格式化',
+            htmlNode: ''
+        },
+        codeVal: '',
+        loading: false,
+        runCodeRes: '结果集',
+        htmlNode: '结果集'
+    },
+
+
+    lifetimes: {
+        // 生命周期函数，可以为函数，或一个在 methods 段中定义的方法名
+        attached: function () {
+            this.initData('请输入')
+        }
+    },
+    methods: {
+        initData(val) {
+            this.setData({
+                htmlNode: app.changeHtmlText(val)
+            })
+        },
+        runCode() {
+            const codeVal = this.data.codeVal
+            console.log('运行代码', codeVal)
+            const thisBack = this
+            if (codeVal) {
+                // let obj =(new Function("return "+""+codeVal+""))();
+                const data = {
+                    coontent: codeVal
+                }
+                wx.request({
+                    url: this.data.baseUrl + this.data.runJsPath,
+                    method: 'POST',
+                    data: data,
+                    success: res => {
+                        console.log(res, 'res')
+                        const resText=res.data
+                        thisBack.setData({
+                            runCodeRes:resText ,
+                            htmlNode: app.changeHtmlText(resText)
+                        })
+                    },
+                    fail: r => {
+                        console.log(r, r)
+                    }
+                })
+
+            }
+            // // eval(this.data.codeVal)
+
+        },
+        bindKeyInput(e) {
+            this.setData({
+                codeVal: e.detail.value
+            })
+        },
+    }
+})
\ No newline at end of file

miniprogram/pages/codeOnline/codeOnline.json

+{
+  "component": true,
+  "usingComponents": {
+    "towxml":"/towxml/towxml"
+  }
+}
\ No newline at end of file

miniprogram/pages/codeOnline/codeOnline.wxml

+<!--pages/codeOnline/codeOnline.wxml-->
+<view class="container">
+  <view class="container-header">
+    {{config.title}}
+  </view>
+
+  <view class="container-box">
+    <view class="container-box-show">
+      <view class="container-box-show-btn">
+        <button type="primary" loading="{{loading}}" size="mini" bindtap="runCode">{{config.runBtnText}}</button>
+        <button type="primary" loading="{{loading}}" size="mini" bindtap="runCode" class="format-btn">{{config.formatBtnText}}</button>
+      </view>
+      <view class="container-box-show-response">
+        <view class="container-html">
+          <towxml nodes="{{htmlNode}}" />
+        </view>
+      </view>
+    </view>
+    <view class="container-box-edit">
+      <view class="section">
+        <textarea loading="{{loading}}" bindinput="bindKeyInput" value="{{codeVal}}" placeholder="{{config.runCodePlaceholderText}}" auto-focus />
+      </view>
+    </view>
+  </view>
+</view>
\ No newline at end of file

miniprogram/pages/codeOnline/codeOnline.wxss

+/* pages/codeOnline/codeOnline.wxss */
+.container {
+  position: relative;
+  width: 100vw;
+  height: 90vh;
+  /* background: rgba(255, 255, 255, 0.5); */
+  /* background-image: url('https://yongma16.xyz/media/editor/wallhaven-3kqv3y_20220724071651129556.jpg');
+  background-repeat: no-repeat;
+  background-size: cover; */
+    background: linear-gradient(to right, rgba(1, 41, 116, 0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(1, 41, 116, 0.1) 1px, transparent 1px);
+  background-repeat: repeat;
+  background-size: 10px 10px;
+  /* fallback for old browsers */
+  overflow: hidden;
+}
+
+.container-header {
+  background: rgba(16, 116, 187);
+  width: 100%;
+  text-align: center;
+  color: #ffffff;
+  height: 40px;
+  line-height: 40px;
+  font-weight: bold;
+}
+.container-box{
+  position: relative;
+  background-color: rgba(255,255,255,.5);
+  width: 90%;
+  height: calc( 100vh - 100px);
+}
+.container-box-show{
+  position: relative;
+  width: 100%;
+  height: 150px;
+
+  text-align: left;
+}
+.container-box-show-btn{
+  margin-top: 5px;
+  position: relative;
+  text-align: left;
+}
+.format-btn{
+  position: relative;
+  margin-left: 10px;
+}
+
+.container-box-edit{
+  position: relative;
+  width: 100%;
+  height: 50%;
+  background: rgba(255, 255, 255, .2);
+  border: 1px solid rgb(8, 183, 252);
+  box-shadow: 0 2rpx 5rpx 5rpx rgba(255, 255, 255, .2);
+}
+.section{
+  position: relative;
+  width: 80%;
+  color: #333;
+}
+
+.container-html{
+  position: relative;
+  height: 100px;
+  width: 100%;
+  color: #333;
+  user-select: text;
+  overflow: auto;
+  border: 1px solid rgb(8, 183, 252);
+}
\ No newline at end of file

miniprogram/pages/future/future.js

@@ -185,10 +185,11 @@ Component({
         success: (res => {
           console.log('cloud res userInfo', res)
           if (res && res.data && res.data) {
+            console.log('res.data__________',res.data)
             thisBack.setData({
               // 默认十条消息
-              msgCount: res.data.data[0].send_msg_count || 10,
-              isVip: res.data.data[0].is_vip || 0
+              msgCount: res.data.data.data[0].send_msg_count || 10,
+              isVip: res.data.data.data[0].is_vip || 0
             })
           }
         }),
@@ -268,6 +269,7 @@ Component({
       const openId = wx.getStorageSync('currentOpenid')
       const wxOpenId = openId && openId.openid
       params.wx_open_id = wxOpenId
+      const thisBack=this
       wx.request({
         url: this.data.baseCloudUrl + this.data.baseCloudAddRecordPath,
         headers: headers,
@@ -275,6 +277,7 @@ Component({
         method: 'POST',
         success: (res => {
           console.log('cloud res', res)
+          thisBack.getUserReadCount()
         }),
         fail: r => {
           console.log('cloud r', r)

miniprogram/pages/future/future.wxml

@@ -2,13 +2,13 @@
 <view class="container-future">
   <view class="form-container-introduce" wx:if="{{mode==='introduce'}}">
     <view class="header-box" style="width: 100%;">
-      <view  wx:if="{{isShowOenAi}}" style="width: 50%;" >
-        <button style="width: 100%;" type="primary" style="background: rgb(8, 183, 252);" loading="{{isLoading}}">{{layoutConfig.introduceText}}
+      <view  wx:if="{{isShowOenAi}}" style="width: 100%;display: flex;" >
+        <button style="width: 100%;" type="primary" style="background:rgb(16, 116, 187) ;" loading="{{isLoading}}">{{layoutConfig.introduceText}}
         </button>
-        <button style="width: 100%;" type="primary" style="background: rgb(0, 114, 221);" bindtap="changeMode" loading="{{isLoading}}" data-mode='openAiUse'>{{layoutConfig.useText}}</button>
+        <button style="width: 100%;" type="primary" style="background: rgb(33, 161, 1);" bindtap="changeMode" loading="{{isLoading}}" data-mode='openAiUse'>{{layoutConfig.useText}}</button>
       </view>
       <view wx:else style="width:100%;height: 43px;line-height: 43px;text-align: center;font-weight: bold;">
-        <view style="width:100%;position: relative" type="primary" style="background: rgb(8, 183, 252);" loading="{{isLoading}}">{{layoutConfig.introduceText}}
+        <view style="width:100%;position: relative" type="primary" style="background: rgb(16, 116, 187);" loading="{{isLoading}}">{{layoutConfig.introduceText}}
         </view>
       </view>
       
@@ -24,8 +24,8 @@
   </view>
   <view class="form-container-api" wx:if="{{mode==='openAiUse'}}">
     <view class="shadow" style="display: flex;justify-content: space-between;width:100%">
-      <button style="flex:1;background-color: #0758c1;" type="primary" bindtap="changeMode" loading="{{isLoading}}" data-mode='introduce'>{{layoutConfig.returnText}}</button>
-      <button wx:if="{{layoutConfig.isShowCopyAll}}" style="flex:1;" type="primary" style="background: rgb(0, 114, 221);" bindtap="reportAnswerData" loading="{{isLoading}}" data-mode='openAiUse'>{{layoutConfig.reportText}}</button>
+      <button style="flex:1;background-color: rgb(16, 116, 187);" type="primary" bindtap="changeMode" loading="{{isLoading}}" data-mode='introduce'>{{layoutConfig.returnText}}</button>
+      <button wx:if="{{layoutConfig.isShowCopyAll}}" style="flex:1;" type="primary" style="background: rgb(16, 116, 187);" bindtap="reportAnswerData" loading="{{isLoading}}" data-mode='openAiUse'>{{layoutConfig.reportText}}</button>
     </view>
     <view class="chat-container" id="chat-container-id" style="width: 100%;">
       <scroll-view scroll-y="true" class="scroll-answer" scroll-with-animation bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}" wx:if="{{ chatObjConfig.option&&chatObjConfig.option.length>0 }}">
@@ -68,7 +68,7 @@
               </view>
 
             </view>
-            <view style="display: flex;width: 100%;box-sizing: border-box;">
+            <view style="display: flex;width: 100%;box-sizing: border-box;" wx:if="{{layoutConfig.isShowCopyBtn}}">
               <view style="width: 70%;">
               </view>
               <view style="width: 30%;text-align: center;">
@@ -100,9 +100,11 @@
         </view>
       </view>
       <view class="paste-container">
+       <view style="width: 75%;display: flex;justify-content: space-between;" wx:if="{{!layoutConfig.showPasteBtn}}">
         <button class="paste-btn" size="mini" bindtap="pasteBtn" data-response=" {{item.answer}}">{{layoutConfig.pasteText}}</button>
-        <button class="paste-btn" size="mini" bindtap="clearBtn" data-response=" {{item.answer}}">{{layoutConfig.clearText}}</button>
-        <view>
+        <button class="clear-btn" size="mini" bindtap="clearBtn" data-response=" {{item.answer}}">{{layoutConfig.clearText}}</button>
+       </view>
+        <view wx:if="{{layoutConfig.showTopBtn}}">
           <button class="paste-btn-up" size="mini" bindtap="upBtn" data-response=" {{item.answer}}">{{layoutConfig.upText}}</button>
           <button class="paste-btn-down" size="mini" bindtap="downBtn" data-response=" {{item.answer}}">{{layoutConfig.downText}}</button>
         </view>

miniprogram/pages/future/future.wxss

@@ -86,6 +86,7 @@ button {
   color: rgb(255, 255, 255);
   background: rgb(218, 218, 218);
   margin: 5px auto;
+  box-shadow:inset 0 1rpx 2rpx 1rpx rgba(0,0,0,0.2);
 }
 
 .header-box {
@@ -97,7 +98,7 @@ button {
 }
 
 .copy-btn {
-  background: rgb(0, 114, 221);
+  background: rgb(33, 161, 1);
   color: #ffffff;
   border-radius: 5px;
   margin-top: 5px;
@@ -203,7 +204,14 @@ button {
 }
 
 .paste-btn {
-  background: rgb(0, 114, 221);
+  background: rgba(16, 116, 187);
+  color: #ffffff;
+  /* transform: scale(.7); */
+  border-radius: 5px;
+}
+
+.clear-btn {
+  background: rgba(16, 116, 187);
   color: #ffffff;
   /* transform: scale(.7); */
   border-radius: 5px;
@@ -215,8 +223,7 @@ button {
 }
 
 .user-image-box {
-  width: 200px;
-  height: 140px;
+  width: 300px;
   text-align: center;
   align-items: center;
 }
@@ -254,6 +261,7 @@ button {
   font-weight: 300;
   font-size: 32rpx;
   user-select: text;
+  box-shadow: -5rpx 3rpx 1rpx -4rpx #c8c3c3;
 }
 
 .questioned-box-poly {
@@ -265,6 +273,7 @@ button {
   border-top: 10px solid transparent;
   border-bottom: 10px solid transparent;
   border-left: 12px solid rgb(255, 255, 255);
+  box-shadow: 0rpx 0rpx 0rpx 0rpx #c8c3c3;
 }
 .clear-paste-btn{
   width:70%;
@@ -285,6 +294,14 @@ button {
   /* padding-left: 5px; */
   color: rgb(0, 114, 221);
 }
+.send-btn::after{
+  position: absolute;
+  left:0;
+  top:0;
+  width: 100px;
+  height: 100%;
+  background-color:  rgba(255, 255, 255, .8);
+}
 
 .up-down-btn{
   width:30%;
@@ -293,9 +310,10 @@ button {
 .send-btn {
   box-shadow: 0 2rpx 5rpx 5rpx #c8c3c3;
   width: 30%;
-  background-color: #0758c1;
+  background-color:rgba(16, 116, 187);
   height: 100px;
   line-height: 100px;
+  /* border-radius: 10px 0 0 10px; */
   text-align: center;
 }
 
@@ -334,6 +352,7 @@ button {
   box-sizing: content-box;
   z-index: 999;
   user-select: text;
+  box-shadow:5rpx 3rpx 1rpx -4rpx #c8c3c3;
 }
 
 .form-response-box-poly {
@@ -350,17 +369,18 @@ button {
 .paste-container {
   display: flex;
   border: 1px solid rgb(0, 114, 221);
-  padding: 4px;
+  justify-content: space-between;
+  padding: 4px 0;
 }
 
 .paste-btn-up {
-  background: rgb(0, 114, 221);
+  background: rgba(16, 116, 187);
   color: #ffffff;
   width: 30px !important;
   height: 30px !important;
   line-height: 30px !important;
   text-align: center !important;
-  border-radius: 100%;
+  border-radius: 20px;
 }
 
 .paste-btn-up:hover {
@@ -375,7 +395,7 @@ button {
 
 .paste-btn-down {
   margin-left: 2px;
-  background: rgb(0, 114, 221);
+  background: rgba(16, 116, 187);
   color: #ffffff;
   width: 30px !important;
   height: 30px !important;

miniprogram/pages/home/home.js

@@ -25,7 +25,7 @@ Page({
       indicatorActiveColor: "#dff9fb",
     },
     menuIsShow: false,
-    bottomBtn: 'front',
+    bottomBtn: 'target',
     titleObj: [],
     baseUrl: 'https://yongma16.xyz/api/',
     path: 'article/index/',
@@ -37,7 +37,9 @@ Page({
       homePageText: '主页',
       blogText: '博客',
       apiText: 'openai',
-      aboutText: '关于'
+      aboutText: '关于',
+      imgsText:'图片',
+      codeText:'code',
     }
   },
   // 监听

miniprogram/pages/home/home.json

@@ -3,6 +3,8 @@
     "home-content": "/pages/homeContent/homeContent",
     "blog": "/pages/blog/blog",
     "life": "/pages/life/life",
-    "future": "/pages/future/future"
+    "future": "/pages/future/future",
+    "codeOnline": "/pages/codeOnline/codeOnline",
+    "imgs": "/pages/imgs/imgs"
   }
 }
\ No newline at end of file

miniprogram/pages/home/home.wxml

@@ -32,15 +32,19 @@
 
   <view class="container-content">
     <home-content class='home-content-class' headerItem='{{content}}' wx:if="{{bottomBtn==='front'}}" id="home-content-id"></home-content>
-    <blog class='home-content-class' id="blog-id" wx:if="{{bottomBtn==='blog'}}" bind:updateArticleMenu="updateArticleMenu"></blog>
-    <future class='home-content-class' wx:if="{{bottomBtn==='target'}}" bind:updateBottomNavigation="updateBottomNavigation"></future>
-    <life class='home-content-class' wx:if="{{bottomBtn==='life'}}" bindUserinfo="{{userInfo}}"></life>
+    <blog class='home-content-class' id="blog-id" wx:elif="{{bottomBtn==='blog'}}" bind:updateArticleMenu="updateArticleMenu"></blog>
+    <future class='home-content-class' wx:elif="{{bottomBtn==='target'}}" bind:updateBottomNavigation="updateBottomNavigation"></future>
+    <imgs class='home-content-class' wx:elif="{{bottomBtn==='imgs'}}" bindUserinfo="{{userInfo}}"></imgs>
+    <codeOnline class='home-content-class' wx:elif="{{bottomBtn==='code'}}" bindUserinfo="{{userInfo}}"></codeOnline>
+    <life class='home-content-class' wx:elif="{{bottomBtn==='life'}}" bindUserinfo="{{userInfo}}"></life>
   </view>
   <view class="container-footer" wx:if="{{isShowBottom}}">
     <view class="container-footer-btn-menu">
       <view class="default-btn active {{bottomBtn==='front'? 'btn-actived':''}}" bindtap="clickBottomBtn" data-label='front'>{{bottomStyleConfig.homePageText}}</view>
       <view class="default-btn active {{bottomBtn==='blog'? 'btn-actived':''}}" bindtap="clickBottomBtn" data-label='blog'>{{bottomStyleConfig.blogText}}</view>
       <view class="default-btn active {{bottomBtn==='target'? 'btn-actived':''}}" bindtap="clickBottomBtn" data-label='target'>{{bottomStyleConfig.apiText}}</view>
+      <view class="default-btn active {{bottomBtn==='imgs'? 'btn-actived':''}}" bindtap="clickBottomBtn" data-label='imgs'>{{bottomStyleConfig.imgsText}}</view>
+      <view class="default-btn active {{bottomBtn==='code'? 'btn-actived':''}}" bindtap="clickBottomBtn" data-label='code'>{{bottomStyleConfig.codeText}}</view>
       <view class="default-btn active {{bottomBtn==='life'? 'btn-actived':''}}" bindtap="clickBottomBtn" data-label='life'>{{bottomStyleConfig.aboutText}}</view>
     </view>
   </view>

miniprogram/pages/home/home.wxss

@@ -34,7 +34,7 @@ page {
   left: -23px;
   border: 20px solid;
   opacity: .8;
-  border-color:  transparent transparent transparent rgb(0, 183, 255);
+  border-color:  transparent transparent transparent rgb(16, 116, 187);
 }
 
 .arrow-right{
@@ -54,7 +54,7 @@ page {
   right: -23px;
   border: 20px solid;
   opacity: .8;
-  border-color:  transparent  rgb(0, 183, 255) transparent transparent;
+  border-color:  transparent  rgb(16, 116, 187) transparent transparent;
 }
 /* 左侧的菜单 */
 .container-menu{
@@ -193,14 +193,14 @@ page {
   line-height: 60px;
 }
 .default-btn:active,default-btn:active:hover{
-  background-color:rgb(8, 183, 252);
+  background-color:rgb(16, 116, 187);
   color:#ffffff;
 }
 .btn-actived{
   color:#ffffff;
   font-weight: bold;
-  background-color:  rgb(8, 183, 252);
-  box-shadow: 0 5px 5px 5px rgba(8, 183, 252,.5);
+  background-color:  rgb(16, 116, 187);
+  box-shadow: 0 5px 5px 5px rgba(114, 158, 240,.2);
 }
 
 

miniprogram/pages/imgs/imgs.js

@@ -22,6 +22,8 @@ Component({
   data: {
     title: '表情包',
     loading: false,
+    mode:'imgs',
+    isImgsMode:true,
     searchVal: '二次元',
     emptyText:'查询为空',
     baseUrl: 'https://yongma16.xyz',
@@ -47,6 +49,9 @@ Component({
         })
       }
       this.searchImg()
+      wx.nextTick(()=>{
+        this.scrollAction()
+      })
     },
     moved: function () { },
     detached: function () {
@@ -58,6 +63,45 @@ Component({
    * 组件的方法列表
    */
   methods: {
+    scrollAction(){
+      // const query = wx.createSelectorQuery()
+      // console.log('query',query)
+      // query.select('#img-list-id').boundingClientRect(function(res){
+      //   res.top // #the-id 节点的上边界坐标（相对于显示区域）
+      //   console.log('clientRect res',res)
+      // })
+      // query.selectViewport().scrollOffset(function(res){
+      //   res.scrollTop // 显示区域的竖直滚动位置
+      //   console.log('scroll res',res)
+      // })
+      // query.exec()
+      // wx.pageScrollTo({
+      //   duration: 0,
+      // })
+      // 监听
+      wx.createIntersectionObserver().relativeToViewport({
+        bottom:10
+      }).observe('.imgs-list', (res) => {
+        // res.intersectionRatio // 相交区域占目标节点的布局区域的比例
+        // res.intersectionRect // 相交区域
+        // res.intersectionRect.left // 相交区域的左边界坐标
+        // res.intersectionRect.top // 相交区域的上边界坐标
+        // res.intersectionRect.width // 相交区域的宽度
+        // res.intersectionRect.height // 相交区域的高度
+        console.log('res list',res)
+      })
+      wx.createIntersectionObserver().relativeToViewport({
+        bottom:400
+      }).observe('.imgs-list-content', (res) => {
+        // res.intersectionRatio // 相交区域占目标节点的布局区域的比例
+        // res.intersectionRect // 相交区域
+        // res.intersectionRect.left // 相交区域的左边界坐标
+        // res.intersectionRect.top // 相交区域的上边界坐标
+        // res.intersectionRect.width // 相交区域的宽度
+        // res.intersectionRect.height // 相交区域的高度
+        console.log('res observe',res)
+      })
+    },
     bindKeyInput(e) {
       this.setData({
         searchVal: e.detail.value
@@ -65,13 +109,20 @@ Component({
     },
     previewImage(e) {
       console.log('click png', e)
+      const imgsArray=this.data.imgsArray
       const url = e.target.dataset.url
       wx.previewImage({
         current: url, // 当前显示图片的http链接
-        urls: [url] // 需要预览的图片http链接列表
+        urls: imgsArray.map(item=>{return item.src}) // 需要预览的图片http链接列表
       })
     },
     searchImg() {
+      if (!this.data.searchVal) {
+        return wx.showModal({
+          cancelColor: 'cancelColor',
+          title: '查询不能为空！'
+        })
+      }
       this.setData({
         loading: true
       })

miniprogram/pages/imgs/imgs.wxml

@@ -6,27 +6,26 @@
   <view class="container-content">
     <view class="container-content-top">
       <view class="container-content-left">
-        <input 
-        class="weui-input" 
-        bindinput="bindKeyInput" 
-        bindconfirm="bindKeyInput"
-        value="{{searchVal}}" Loading="{{loading}}" placeholder="{{config.searchPlaceholder}}" />
+        <input class="weui-input" bindinput="bindKeyInput" bindconfirm="bindKeyInput" value="{{searchVal}}" placeholder="{{config.searchPlaceholder}}" />
       </view>
       <view class="container-content-right">
-        <button class="mini-btn" type="primary" size="mini"
-        bindtap="searchImg"
-        >{{config.searchText}}</button>
+        <button class="mini-btn" type="primary" size="mini" bindtap="searchImg" loading="{{loading}}">{{config.searchText}}</button>
       </view>
     </view>
-    <view class="imgs-list">
-      <view class="imgs-list-content" wx:for="{{imgsArray}}" wx:for-item="item" wx:key="index">
+    <view class="loading" wx:if="{{loading}}">
+      <view class="loader-child" />
+      <view class="loader-child" />
+      <view class="loader-child" />
+    </view>
+    <view class="imgs-list" wx:else="{{!loading}}" id="img-list-id">
+      <view class="imgs-list-content" wx:for="{{imgsArray}}" wx:for-item="item" wx:key="index" >
         <view class="img_title">{{item.text}}</view>
         <view class="img-box">
           <image class="img-content" mode="{{item.mode}}" src="{{item.src}}" data-url="{{item.src}}" bindtap="previewImage"></image>
         </view>
       </view>
-      <view wx:if="{{!imgsArray.lenghth}}" class="empty-text">
-       {{emptyText}}
+      <view wx:if="{{!imgsArray.length}}" class="empty-text">
+        {{emptyText}}
       </view>
     </view>
   </view>

miniprogram/pages/imgs/imgs.wxss

@@ -4,6 +4,9 @@
   width: 100vw;
   height: 90vh;
   background: rgba(255, 255, 255, 0.5);
+  background-image: url('https://yongma16.xyz/media/editor/wallhaven-3kqv3y_20220724071651129556.jpg');
+  background-repeat: no-repeat;
+  background-size: cover;
   /* fallback for old browsers */
   overflow: hidden;
 }
@@ -27,48 +30,71 @@
   position: relative;
   padding: 10px 2px;
   display: flex;
+  background: rgba(255, 255, 255, .9);
+  box-shadow: 0 2rpx 5rpx 5rpx rgba(255, 255, 255, .2);
 }
 
-.imgs-list{
+.imgs-list {
   padding: 5px 5px;
-  max-height: calc( 100vh - 165px);
+  max-height: calc(100vh - 165px);
+  /* border-top: 2px solid rgba(16, 116, 187); */
+  background: rgba(255, 255, 255, .1);
   overflow: auto;
 }
 
-.img-box{
+.img-box {
   display: inline;
 }
-.empty-text{
+
+.empty-text {
   height: 40px;
   width: 100%;
   color: #333;
 }
-.weui-input{
+
+.weui-input {
   position: relative;
-  border: 1px solid rgba(16, 116, 187,.2);
-  color: #333;
+  border: 1px solid rgba(16, 116, 187, .2);
+  color: rgba(16, 116, 187) !important;
+  text-align: center;
   height: 32px;
   line-height: 32px;
-  width: 100%;
+  margin-left: 90px;
 }
-.mini-btn{
-  background:rgba(16, 116, 187) !important;
+
+.mini-btn {
+  background: rgba(16, 116, 187) !important;
   color: #fff;
   border-radius: 5px;
   width: 100%;
 }
-.container-content-left{
-  width: 80%;
+
+.container-content-left {
+  flex: 1;
 }
-.container-content-right{
-  width: 20%;
+
+.container-content-right {
+  width: 80px;
+  text-align: right;
   margin-left: 2px;
   line-height: 32px;
 }
-.img-content{
+
+.img-content {
   width: 200px;
   border: 2px solid rgba(16, 116, 187);
   padding: 1px;
   height: 100px;
   margin-bottom: 5px;
+}
+
+.loading {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  perspective: 780px;
+  position: relative;
+  top: 20%;
+  left: 50%;
+  transform: translate(-50%, -20%);
 }
\ No newline at end of file

miniprogram/pages/index/index.js

@@ -127,28 +127,22 @@ Page({
   joinProfile(info) {
     const thisBack = this
     console.log('userinfo', info)
-    this.getOpenid((info) => {
+    this.getOpenid(() => {
       console.log('spring登录')
       thisBack.loginSpringCloud()
-      if (info && info.detail) {
-        const rowData = info.detail.rawData ? JSON.parse(info.detail.rawData) : { nickName: '', avatarUrl: '' }
-        this.setData({
-          userImageUrl: rowData.avatarUrl || thisBack.data.userImageUrl,
-          userName: rowData.nickName || thisBack.data.userName,
-          userInfo: rowData
-        })
-        const userInfo = {
-          nickName: rowData.nickName || thisBack.data.userName,
-          avatarUrl: rowData.avatarUrl || thisBack.data.userImageUrl,
-          userInfo: rowData
-        }
-        thisBack.setData({
-          userInfo: userInfo,
-          hasUserInfo: true
-        })
-        wx.setStorageSync('currentUserInfo', userInfo)
-        console.log('rowData', rowData)
+      this.setData({
+        userImageUrl: thisBack.data.userImageUrl,
+        userName: thisBack.data.userName,
+      })
+      const userInfo = {
+        nickName: thisBack.data.userName,
+        avatarUrl: thisBack.data.userImageUrl
       }
+      thisBack.setData({
+        userInfo: userInfo,
+        hasUserInfo: true
+      })
+      wx.setStorageSync('currentUserInfo', userInfo)
       thisBack.jumpTohome()
     }, () => {
       wx.setStorageSync('currentUserInfo', null)

miniprogram/pages/index/index.wxss

@@ -14,6 +14,7 @@ page {
   background-repeat: no-repeat;
   background-size: cover;
   padding-bottom: 60rpx;
+  --baseColor:rgb(16,116,187);
 }
 .l-avatar-text{
   color:#ffffff !important;
@@ -25,6 +26,12 @@ page {
   transform: translateY(50%);
 }
 
+.code-container{
+  position: absolute;
+  top:70%;
+  transform: translateY(50%);
+}
+
 
 .user-login {
   width:120px !important;

project.config.json

 {
-  "description": "项目配置文件",
-  "packOptions": {
-    "ignore": []
-  },
-  "setting": {
-    "urlCheck": true,
-    "es6": true,
-    "enhance": true,
-    "postcss": true,
-    "preloadBackgroundData": false,
-    "minified": true,
-    "newFeature": true,
-    "coverView": true,
-    "nodeModules": false,
-    "autoAudits": false,
-    "showShadowRootInWxmlPanel": true,
-    "scopeDataCheck": false,
-    "uglifyFileName": false,
-    "checkInvalidKey": true,
-    "checkSiteMap": true,
-    "uploadWithSourceMap": true,
-    "compileHotReLoad": true,
-    "lazyloadPlaceholderEnable": false,
-    "useMultiFrameRuntime": true,
-    "useApiHook": true,
-    "useApiHostProcess": true,
-    "babelSetting": {
-      "ignore": [],
-      "disablePlugins": [],
-      "outputPath": ""
+    "description": "项目配置文件",
+    "packOptions": {
+        "ignore": [],
+        "include": []
     },
-    "enableEngineNative": false,
-    "useIsolateContext": true,
-    "userConfirmedBundleSwitch": false,
-    "packNpmManually": false,
-    "packNpmRelationList": [],
-    "minifyWXSS": true,
-    "disableUseStrict": false,
-    "minifyWXML": true,
-    "showES6CompileOption": false,
-    "useCompilerPlugins": false
-  },
-  "compileType": "miniprogram",
-  "libVersion": "2.27.0",
-  "appid": "wx373f33f993c688d1",
-  "projectname": "yma16_program",
-  "miniprogramRoot": "miniprogram/",
-  "cloudfunctionRoot": "cloudfunctions/",
-  "cloudfunctionTemplateRoot": "cloudfunctionTemplate",
-  "watchOptions": {
-    "ignore": []
-  },
-  "debugOptions": {
-    "hidedInDevtools": []
-  },
-  "scripts": {},
-  "condition": {
-    "plugin": {
-      "list": []
+    "setting": {
+        "urlCheck": true,
+        "es6": true,
+        "enhance": true,
+        "postcss": true,
+        "preloadBackgroundData": false,
+        "minified": true,
+        "newFeature": true,
+        "coverView": true,
+        "nodeModules": false,
+        "autoAudits": false,
+        "showShadowRootInWxmlPanel": true,
+        "scopeDataCheck": false,
+        "uglifyFileName": false,
+        "checkInvalidKey": true,
+        "checkSiteMap": true,
+        "uploadWithSourceMap": true,
+        "compileHotReLoad": true,
+        "lazyloadPlaceholderEnable": false,
+        "useMultiFrameRuntime": true,
+        "useApiHook": true,
+        "useApiHostProcess": true,
+        "babelSetting": {
+            "ignore": [],
+            "disablePlugins": [],
+            "outputPath": ""
+        },
+        "enableEngineNative": false,
+        "useIsolateContext": true,
+        "userConfirmedBundleSwitch": false,
+        "packNpmManually": false,
+        "packNpmRelationList": [],
+        "minifyWXSS": true,
+        "disableUseStrict": false,
+        "minifyWXML": true,
+        "showES6CompileOption": false,
+        "useCompilerPlugins": false,
+        "condition": false
     },
-    "game": {
-      "list": []
-    },
-    "gamePlugin": {
-      "list": []
-    },
-    "miniprogram": {
-      "list": [
-        {
-          "name": "pages/getOpenId/index",
-          "pathName": "pages/getOpenId/index",
-          "query": "",
-          "scene": null
+    "compileType": "miniprogram",
+    "libVersion": "2.27.0",
+    "appid": "wx373f33f993c688d1",
+    "projectname": "yma16_program",
+    "miniprogramRoot": "miniprogram/",
+    "cloudfunctionRoot": "cloudfunctions/",
+    "cloudfunctionTemplateRoot": "cloudfunctionTemplate/",
+    "condition": {
+        "plugin": {
+            "list": []
+        },
+        "game": {
+            "list": []
+        },
+        "gamePlugin": {
+            "list": []
+        },
+        "miniprogram": {
+            "list": [
+                {
+                    "name": "pages/getOpenId/index",
+                    "pathName": "pages/getOpenId/index",
+                    "query": "",
+                    "scene": null
+                }
+            ]
         }
-      ]
+    },
+    "srcMiniprogramRoot": "miniprogram/",
+    "editorSetting": {
+        "tabIndent": "insertSpaces",
+        "tabSize": 4
     }
-  }
 }
\ No newline at end of file

project.private.config.json

 {
-  "setting": {},
-  "condition": {
-    "plugin": {
-      "list": []
+    "setting": {
+        "compileHotReLoad": true
     },
-    "game": {
-      "list": []
-    },
-    "gamePlugin": {
-      "list": []
-    },
-    "miniprogram": {
-      "list": [
-        {
-          "name": "pages/getOpenId/index",
-          "pathName": "pages/getOpenId/index",
-          "query": "",
-          "scene": null
+    "condition": {
+        "miniprogram": {
+            "list": [
+                {
+                    "name": "pages/getOpenId/index",
+                    "pathName": "pages/getOpenId/index",
+                    "query": "",
+                    "scene": null
+                }
+            ]
         }
-      ]
-    }
-  }
+    },
+    "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
+    "projectname": "yma16_program"
 }
\ No newline at end of file