修改

App.vue

@@ -16,19 +16,16 @@
 <style lang="scss">
 	/*每个页面公共css */
 	@import '@/uni_modules/uni-scss/index.scss';
-	/* #ifndef APP-NVUE */
-	@import '@/static/customicons.css';
+  /*iconfont*/
+  @import "@/static/icon/iconfont.css";
 
-	@import './static/css/main.scss';
-	// 设置整个项目的背景色
-	page {
-		background-color: #f5f5f5;
-	}
+  // 设置整个项目的背景色
+  page {
+    min-height: 100vh;
+    background-color: $uni-bg-color;
+  }
 
-	/* #endif */
-	.example-info {
-		font-size: 14px;
-		color: #333;
-		padding: 10px;
-	}
+  view {
+    box-sizing: border-box;
+  }
 </style>

api/creator.js

@@ -38,51 +38,57 @@ export function detailsTiktokImg(data) {
 	})
 }
 // 查询是否点赞过
-export function judgeTiktokLike(data) {
+export function judgeTiktokLike(data, headers) {
 	return request({
 		url: `${serviceTitle}${prefix}/judgeTiktokLike`,
 		method: 'post',
-		data
+		data,
+		headers: headers
 	})
 }
 // 查询是否收藏过
-export function judgeTiktokCollect(data) {
+export function judgeTiktokCollect(data, headers) {
 	return request({
 		url: `${serviceTitle}${prefix}/judgeTiktokCollect`,
 		method: 'post',
-		data
+		data,
+		headers: headers
 	})
 }
 // 点赞
-export function tiktokLike(data) {
+export function tiktokLike(data, headers) {
 	return request({
 		url: `${serviceTitle}${prefix}/tiktokLike`,
 		method: 'post',
-		data
+		data,
+		headers: headers
 	})
 }
 // 取消点赞
-export function tiktokUnLike(data) {
+export function tiktokUnLike(data, headers) {
 	return request({
 		url: `${serviceTitle}${prefix}/tiktokUnLike`,
 		method: 'post',
-		data
+		data,
+		headers: headers
 	})
 }
 // 收藏
-export function tiktokCollect(data) {
+export function tiktokCollect(data, headers) {
 	return request({
 		url: `${serviceTitle}${prefix}/tiktokCollect`,
 		method: 'post',
-		data
+		data,
+		headers: headers
 	})
 }
 // 取消收藏
-export function tiktokUnCollect(data) {
+export function tiktokUnCollect(data, headers) {
 	return request({
 		url: `${serviceTitle}${prefix}/tiktokUnCollect`,
 		method: 'post',
-		data
+		data,
+		headers: headers
 	})
 }
 
@@ -95,28 +101,31 @@ export function queryCreatorScanCodeById(data) {
 }
 
 // 新增/更新艺术家即将入账广告收益
-export function insertOrUpdatePreAdProfit(data) {
+export function insertOrUpdatePreAdProfit(data, headers) {
 	return request({
 		url: `${serviceTitle}${prefix}/insertOrUpdatePreAdProfit`,
 		method: 'post',
-		data
+		data,
+		headers: headers
 	})
 }
 
 // 新增/更新艺术家即将入账邀请收益
-export function insertOrUpdatePreInviteProfit(data) {
+export function insertOrUpdatePreInviteProfit(data, headers) {
 	return request({
 		url: `${serviceTitle}${prefix}/insertOrUpdatePreInviteProfit`,
 		method: 'post',
-		data
+		data,
+		headers: headers
 	})
 }
 
 // 检查某平台用户当日下载次数是否超标
-export function checkUserCanDownload(data) {
+export function checkUserCanDownload(data, headers) {
 	return request({
 		url: `${serviceTitle}${prefix}/checkUserCanDownload`,
 		method: 'post',
-		data
+		data,
+		headers: headers
 	})
 }

api/index.js

@@ -4,6 +4,14 @@ const prefix = '/img/mini/tiktok'
 //GET 传参需要用 params
 //POST 传参需要用 data
 
+//查询首页banner
+export function getListBanner() {
+	return request({
+		url: `${serviceTitle}${prefix}/listBanner`,
+		method: 'get'
+	})
+}
+
 //查询热门艺术家列表
 export function listHotCreator() {
 	return request({

components/toTop/toTop.vue

@@ -0,0 +1,84 @@
+<template>
+  <!-- 返回顶部 -->
+  <view class="toTop_M">
+      <view class="btn" @tap="toTop" :style="{'display':(toTopFlag === false ? 'none' : 'block')}">
+        <uni-icons class="list-menu-icon" custom-prefix="iconfont" :type="'icon-shouye'" size="20" :color="iconColor"></uni-icons>
+      </view>
+  </view>
+</template>
+
+<script>
+
+import UniIcons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons";
+export default {
+  name: "toTop",
+  //import引入的组件需要注入到对象中才能使用
+  components: {UniIcons},
+  //混合封装的属性和方法
+  mixins: [],
+  //组件传入的属性
+  props: {
+    toTopFlag: {
+      type: Boolean,
+      default: false
+    },
+    toTop: {
+      type: Function,
+      default: () => {}
+    }
+  },
+  data() {
+    //这里存放数据
+    return {
+      iconColor: '#1a94bc',
+    };
+  },
+  //计算属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+  },
+  created() {
+  }, //生命周期 - 创建完成（可以访问当前this实例）
+  mounted() {
+  }, //生命周期 - 挂载完成（可以访问DOM元素）
+  beforeCreate() {
+  }, //生命周期 - 创建之前
+  beforeMount() {
+  }, //生命周期 - 挂载之前
+  beforeUpdate() {
+  }, //生命周期 - 更新之前
+  updated() {
+  }, //生命周期 - 更新之后
+  beforeDestroy() {
+  }, //生命周期 - 销毁之前
+  destroyed() {
+  }, //生命周期 - 销毁完成
+  activated() {
+  } //如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+
+<style scoped lang="scss">
+.toTop_M {
+
+  .btn {
+    position: fixed;
+    z-index: 9999;
+    right: 32rpx;
+    bottom: 200rpx;
+    background-color: $uni-white;
+    padding: 10rpx;
+    display: none;
+    border-radius: 10rpx;
+
+  }
+
+  .btn .cuIcon-top {
+    font-size: 30px;
+    color: #FFFFFF;
+  }
+}
+</style>

components/waterfall-list/waterfall-list.vue

@@ -0,0 +1,194 @@
+<template>
+  <!-- 瀑布流布局列表 -->
+  <view class="waterfall-list_M" :style="{marginLeft: margin + 'px', marginRight: margin + 'px'}">
+    <view
+        class="waterfall-col"
+        v-for="(colItem, index) in cols"
+    >
+      <view
+          class="waterfall-col-item"
+          v-for="item in colItem.dataList"
+          :key="item.id"
+          :style="{
+            width: item.width + 'px',
+            height: item.height + 'px',
+            marginBottom: interval + 'px'
+          }"
+      >
+        <image lazy-load class="waterfall-img"
+               :src="item.imgUrl"
+               @click="clickItem(item)"
+               mode="aspectFill"></image>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+
+export default {
+  name: "waterfall-list",
+  //import引入的组件需要注入到对象中才能使用
+  components: {},
+  //混合封装的属性和方法
+  mixins: [],
+  //组件传入的属性
+  props: {
+    col: {
+      type: Number,
+      default: 3,
+    },
+    margin: {
+      type: Number,
+      default: 20,
+    },
+    interval: {
+      type: Number,
+      default: 10
+    },
+    clickItem: {
+      type: Function,
+      default: () => {}
+    }
+  },
+  data() {
+    //这里存放数据
+    return {
+      pageWidth: 750,
+      colWidth: 210,
+      cols: [
+        {
+          height: 0,
+          dataList: []
+        }
+      ]
+    };
+  },
+  //计算属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    init() {
+      let that = this;
+      that.col = that.col ? that.col : 3;
+      //初始化列
+      if (that.col > 0) {
+        let cols = []
+        for (let i = 0; i < that.col; i++) {
+          cols.push({
+            height: 0,
+            dataList: []
+          })
+        }
+        that.cols = cols;
+      }
+      //计算列宽度
+      that.colWidth = (that.pageWidth - that.margin * 2 - that.interval * (that.col - 1)) / that.col;
+    },
+    getAddCurrentIndex(data) {
+      if (data && data.length > 0) {
+        let min = data[0].height;
+        let index = 0;
+        for (let i = 0; i < data.length; i++) {
+          if (data[i].height < min){
+            min = data[i].height;
+            index = i;
+          }
+        }
+        return index;
+      }
+      return undefined;
+    },
+    calcHeightWidth(item) {
+      let that = this;
+      item.width = that.colWidth;
+      switch (item.typeId) {
+        case 1:
+          item.height = item.width * 1;
+          break;
+        case 2:
+          item.height = item.width * 1;
+          break;
+        case 3:
+          item.height = item.width + (item.width * 0.7);
+          break;
+        case 4:
+          item.height = item.width - (item.width * 0.2);
+          break;
+        case 5:
+          item.height = item.width - (item.width * 0.2);
+          break;
+        case 6:
+          item.height = item.width * 1;
+          break;
+        default:
+          item.height = item.width * 1;
+      }
+      return item
+    },
+    addData(data) {
+      let that = this;
+      for (let i = 0; i < data.length; i++) {
+        that.calcHeightWidth(data[i]);
+        let index = that.getAddCurrentIndex(that.cols);
+        that.cols[index].height += data[i].height;
+        that.cols[index].dataList.push(data[i]);
+      }
+    }
+  },
+  created() {
+    let that = this;
+    uni.getSystemInfo({
+      success: function (res) {
+        that.pageWidth = res.screenWidth;
+        that.init();
+      }
+    })
+  }, //生命周期 - 创建完成（可以访问当前this实例）
+  mounted() {
+
+  }, //生命周期 - 挂载完成（可以访问DOM元素）
+  beforeCreate() {
+  }, //生命周期 - 创建之前
+  beforeMount() {
+  }, //生命周期 - 挂载之前
+  beforeUpdate() {
+  }, //生命周期 - 更新之前
+  updated() {
+  }, //生命周期 - 更新之后
+  beforeDestroy() {
+  }, //生命周期 - 销毁之前
+  destroyed() {
+  }, //生命周期 - 销毁完成
+  activated() {
+  } //如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+
+<style lang="scss" scoped>
+.waterfall-list_M {
+  display: flex;
+  justify-content: space-between;
+
+  .waterfall-col {
+
+    .waterfall-col-item {
+      background: $uni-bg-base-color;
+      border-radius: 10px;
+      overflow: hidden;
+      box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.25);
+
+      .waterfall-img {
+        width: 100%;
+        height: 100%;
+
+      }
+
+    }
+
+  }
+
+}
+</style>

main.js

@@ -2,8 +2,8 @@ import App from './App'
 import store from './store/'
 
 // const baseURL = 'http://localhost:7010'
-const baseURL = 'http://81.69.47.31:7010'
-// const baseURL = 'http://veqf45.natappfree.cc'
+// const baseURL = 'http://81.69.47.31:7010'
+const baseURL = 'https://service.bnyer.cn'
 
 Vue.prototype.baseURL = baseURL;
 

manifest.json

@@ -1,6 +1,6 @@
 {
     "name" : "节点壁纸",
-    "appid" : "",
+    "appid" : "__UNI__EDB5E94",
     "description" : "",
     "versionName" : "1.0.0",
     "versionCode" : "100",
@@ -58,7 +58,7 @@
     "mp-toutiao" : {
         "appid" : "ttc408b2b55b364f6601",
         "setting" : {
-            "urlCheck" : true,
+            "urlCheck" : false,
             "es6" : true,
             "minified" : true,
             "postcss" : true

package-lock.json

@@ -1,6 +1,134 @@
 {
+  "name": "bnyer-cloud-tiktok",
+  "lockfileVersion": 2,
   "requires": true,
-  "lockfileVersion": 1,
+  "packages": {
+    "": {
+      "dependencies": {
+        "axios": "^0.26.1",
+        "qs": "^6.10.3",
+        "vue-router": "^4.0.14",
+        "vuex": "^4.0.2"
+      }
+    },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.1.4",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.1.4.tgz",
+      "integrity": "sha512-IiA0SvDrJEgXvVxjNkHPFfDx6SXw0b/TUkqMcDZWNg9fnCAHbTpoo59YfJ9QLFkwa3raau5vSlRVzMSLDnfdtQ=="
+    },
+    "node_modules/axios": {
+      "version": "0.26.1",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-0.26.1.tgz",
+      "integrity": "sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==",
+      "dependencies": {
+        "follow-redirects": "^1.14.8"
+      }
+    },
+    "node_modules/call-bind": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/call-bind/-/call-bind-1.0.2.tgz",
+      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "dependencies": {
+        "function-bind": "^1.1.1",
+        "get-intrinsic": "^1.0.2"
+      }
+    },
+    "node_modules/follow-redirects": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.0.tgz",
+      "integrity": "sha512-aExlJShTV4qOUOL7yF1U5tvLCB0xQuudbf6toyYA0E/acBNw71mvjFTnLaRp50aQaYocMR0a/RMMBIHeZnGyjQ==",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.1.tgz",
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
+      "integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
+      "dependencies": {
+        "function-bind": "^1.1.1",
+        "has": "^1.0.3",
+        "has-symbols": "^1.0.1"
+      }
+    },
+    "node_modules/has": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/has/-/has-1.0.3.tgz",
+      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "dependencies": {
+        "function-bind": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/has-symbols/-/has-symbols-1.0.3.tgz",
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object-inspect": {
+      "version": "1.12.0",
+      "resolved": "https://registry.npmmirror.com/object-inspect/-/object-inspect-1.12.0.tgz",
+      "integrity": "sha512-Ho2z80bVIvJloH+YzRmpZVQe87+qASmBUKZDWgx9cu+KDrX2ZDH/3tMy+gXbZETVGs2M8YdxObOh7XAtim9Y0g=="
+    },
+    "node_modules/qs": {
+      "version": "6.10.3",
+      "resolved": "https://registry.npmmirror.com/qs/-/qs-6.10.3.tgz",
+      "integrity": "sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==",
+      "dependencies": {
+        "side-channel": "^1.0.4"
+      },
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/side-channel": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmmirror.com/side-channel/-/side-channel-1.0.4.tgz",
+      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "dependencies": {
+        "call-bind": "^1.0.0",
+        "get-intrinsic": "^1.0.2",
+        "object-inspect": "^1.9.0"
+      }
+    },
+    "node_modules/vue-router": {
+      "version": "4.0.15",
+      "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.0.15.tgz",
+      "integrity": "sha512-xa+pIN9ZqORdIW1MkN2+d9Ui2pCM1b/UMgwYUCZOiFYHAvz/slKKBDha8DLrh5aCG/RibtrpyhKjKOZ85tYyWg==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.0.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
+    "node_modules/vuex": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmmirror.com/vuex/-/vuex-4.0.2.tgz",
+      "integrity": "sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.0.0-beta.11"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.2"
+      }
+    }
+  },
   "dependencies": {
     "@vue/devtools-api": {
       "version": "6.1.4",

pages.json

@@ -3,7 +3,7 @@
 		{
 			"path": "pages/index/indexProto",
 			"style": {
-				"navigationBarTitleText": "首页",
+				"navigationBarTitleText": "",
 				"enablePullDownRefresh": true
 			}
 		},
@@ -102,7 +102,9 @@
 		"navigationBarTitleText": "bnyer",
 		"navigationBarBackgroundColor": "#F8F8F8",
 		"backgroundColor": "#F8F8F8",
-		"navigationStyle": "custom"
+		"rpxCalcMaxDeviceWidth": 960, // rpx 计算所支持的最大设备宽度，单位 px，默认值为 960
+		"rpxCalcBaseDeviceWidth": 375, // rpx 计算使用的基准设备宽度，设备实际宽度超出 rpx 计算所支持的最大设备宽度时将按基准宽度计算，单位 px，默认值为 375
+		"rpxCalcIncludeWidth": 750 // rpx 计算特殊处理的值，始终按实际的设备宽度计算，单位 rpx，默认值为 750
 	},
 	//底部跳转tab
 	"tabBar": {
@@ -112,27 +114,27 @@
 		"backgroundColor": "#F8F8F8",
 		"list": [{
 				"pagePath": "pages/index/indexProto",
-				"iconPath": "static/index-default.png",
-				"selectedIconPath": "static/index-select.png",
+				"iconPath": "static/home-default.png",
+				"selectedIconPath": "static/home-select.png",
 				"text": "首页"
 			},
 			{
 				"pagePath": "pages/creator/creator",
-				"iconPath": "static/theme-default.png",
-				"selectedIconPath": "static/theme-select.png",
+				"iconPath": "static/art-default.png",
+				"selectedIconPath": "static/art-select.png",
 				"text": "艺术家"
 			},
 			{
 				"pagePath": "pages/atlas/atlas",
-				"iconPath": "static/theme-default.png",
-				"selectedIconPath": "static/theme-select.png",
+				"iconPath": "static/classify-default.png",
+				"selectedIconPath": "static/classify-select.png",
 				// "text": "精彩图集"
 				"text": "分类"
 			},
 			{
 				"pagePath": "pages/userInfo/userInfo",
-				"iconPath": "static/mine-default.png",
-				"selectedIconPath": "static/mine-select.png",
+				"iconPath": "static/my-default.png",
+				"selectedIconPath": "static/my-select.png",
 				"text": "我的"
 			}
 		]

pages/atlas/atlas.vue

@@ -4,15 +4,19 @@
 			@confirm="search" />
 		<view class="title">
 			<uni-segmented-control :current="current" :values="arrList" @clickItem="onClickItem" styleType="text"
-				activeColor="#11A8FD"></uni-segmented-control>
+				:activeColor="primaryColor"></uni-segmented-control>
 		</view>
 		<swiper class="swiper" :circular="false" :current="current" :indicator-dots="false" :autoplay="false"
 			@change="changeItem" :duration="500"
-			:style="'height:'+ imgBoxHeight * Math.ceil(imgList.length / 3) + 'rpx'">
+			:style="'height:'+ imgBoxHeight + 'px'">
+      <!-- imgBoxHeight * Math.ceil(imgList.length / 2)     -->
 			<swiper-item class="swiper-item" v-for="(item,index) in arrList" :key="index">
-				<view class="imgBox" v-for="(val,i) in imgList" :key="i" @click="targetImgList(val)">
-					<image :src="val.img" mode="" :style="'height:' + imgHeight + 'rpx;width:'+imgWidth+'rpx'"></image>
-					<view>{{val.signName}}</view>
+				<view class="imgBox" v-for="(val,i) in imgList" :key="i" @click="targetImgList(val)"
+              :style="'height:' + imgHeight + 'px;width:'+ imgWidth + 'px'">
+					<image :src="val.img" mode="aspectFill"
+                 :style="'height:' + imgHeight + 'px;width:'+ imgWidth + 'px'"
+                 ></image>
+					<view class="target-name">{{val.signName}}</view>
 				</view>
 			</swiper-item>
 		</swiper>
@@ -28,12 +32,13 @@
 	export default {
 		data() {
 			return {
+			  primaryColor: "#1a94bc",
 				imgWidth: 0,
 				imgHeight: 0,
 				imgBoxHeight: 0,
 				current: 0,
 				pageNum: 1,
-				pageSize: 10,
+				pageSize: 16,
 				arrList: [],
 				arrListId: [],
 				imgList: []
@@ -42,10 +47,9 @@
 		async created() {
 			await uni.getSystemInfo({
 				success: res => {
-					this.imgWidth = (res.windowWidth - 60) / 3 * 2
-					this.imgHeight = (res.windowWidth - 60) / 3 * 2 + 16
-					this.imgBoxHeight = (res.windowWidth - 60) / 3 * 2 + 108
-					console.log('this.imgHeight', this.imgHeight)
+					this.imgWidth = (res.screenWidth - 64) / 2
+					this.imgHeight = ((res.screenWidth - 64) / 2 - (res.screenWidth - 64) / 4)
+					this.imgBoxHeight = res.screenHeight - 152
 				}
 			})
 			if (uni.getStorageSync('atlas_current')) {
@@ -56,7 +60,6 @@
 		},
 		watch: {
 			current(n, o) {
-				console.log('current', this.current, n, o)
 				this.imgList = []
 				this.getSignImgList(this.current)
 				immediate: true
@@ -64,7 +67,6 @@
 		},
 		// 上划加载更多
 		onReachBottom() {
-			console.log(111)
 			if (this.imgList.length > 1) {
 				this.pageNum += 1
 				this.getSignImgList(this.current)
@@ -171,10 +173,10 @@
 	}
 </script>
 
-<style lang="less">
+<style lang="scss">
 	.atlas {
 		.uni-searchbar {
-			border: 1px solid #11A8FD;
+			border: 1px solid $uni-primary;
 			border-radius: 16rpx;
 			padding: 0;
 			margin-left: 40rpx;
@@ -186,40 +188,51 @@
 			}
 		}
 
-		.segmented-control {
-			overflow-x: auto;
+    .title {
+      margin: 10px 0;
 
-			.segmented-control__item {
-				flex: none;
-				width: 20vw;
+      ::v-deep .segmented-control {
+        border-radius: 8rpx 8rpx 0 0;
+        background-color: rgba(17, 168, 253, 0.1);
+      }
 
-				.segmented-control__text {
-					font-size: 12px;
-				}
-			}
-		}
+      ::v-deep .segmented-control__item {
+
+        view {
+          display: flex;
+          align-items: center;
+        }
+
+      }
+
+    }
 
 		.swiper {
-			margin: 30rpx 0;
 			overflow-y: auto;
 
 			.swiper-item {
-				display: flex;
-				justify-content: flex-start;
-				align-items: baseline;
-				height: calc(100vh - 90px) ! important;
-				flex-wrap: wrap;
+        display: flex;
+        justify-content: space-between;
+        width: calc(100% - 44px) !important;
+        flex-wrap: wrap;
+        padding: 0 22px;
+        align-content: flex-start;
 
 				.imgBox {
 					text-align: center;
-					margin: 18rpx;
+					margin-bottom: 20px;
+          position: relative;
 
 					image {
 						border-radius: 10px;
 					}
 
-					text {
+          .target-name {
 						font-size: 12px;
+            position: absolute;
+            left: 10px;
+            bottom: 10px;
+            color: $uni-white;
 					}
 				}
 			}

pages/atlas/atlasList.vue

@@ -1,18 +1,10 @@
 <template>
 	<view class="atlasList">
-		<!-- 		<uni-search-bar class="uni-mt-10" placeholder="请输入喜欢的艺术家代号吧~" clearButton="auto" cancelButton="none"
-			@confirm="search" /> -->
-		<view class="atlasList-list">
-			<!-- 				<view class="first-box" :style="'width:'+imgWidth" >
-					热门作品
-				</view> -->
-			<!-- 			<view class="ad-view">
-				<ad adpid="1111111111" type="banner" @load="onload" @close="onclose" @error="onerror"></ad>
-			</view> -->
-			<image v-for="(item,index) in imgList" :key='index' class="img-box"
-				:style="'width:'+imgWidth+';height:'+imgHeight" :src="item.imgUrl" @click="targetDetail(item)" mode="">
-			</image>
-		</view>
+    <waterfallList ref="waterfallRef" :col="2" :clickItem="targetDetail" ></waterfallList>
+    <!-- 显示加载中或者全部加载完成 -->
+    <view>
+      <uni-load-more :status="loadStatus"></uni-load-more>
+    </view>
 	</view>
 </template>
 
@@ -25,7 +17,11 @@
 		querySignImg,
 		querySignImgBySignName
 	} from '@/api/atlas.js'
+  import waterfallList from '@/components/waterfall-list/waterfall-list.vue'
 	export default {
+    components: {
+      waterfallList
+    },
 		data() {
 			return {
 				imgList: [], //图片列表
@@ -34,40 +30,39 @@
 				checkId: {},
 				pageNum: 1,
 				pageSize: 10,
+        loadStatus:'noMore',  //加载样式：more - 加载前样式，loading - 加载中样式，noMore - 没有数据样式
+        isLoadMore:false,  //是否加载中
 			}
 		},
 		created() {
-			uni.getSystemInfo({
-				success: res => {
-					console.log(res)
-					this.imgWidth = res.windowWidth - 60 + 'rpx'
-					this.imgHeight = (res.windowWidth - 60) * 2 - 30 + 'rpx'
-				}
-			})
+      let that = this;
+      that.pageNum = 1;
+      that.$refs.waterfallRef && that.$refs.waterfallRef.init();
 			if (uni.getStorageSync('atlas_detailId')) {
-				this.checkId = uni.getStorageSync('atlas_detailId')
-				console.log(this.checkId)
+        that.checkId = uni.getStorageSync('atlas_detailId')
+
 				uni.setNavigationBarTitle({
-					title: this.checkId.signName
+					title: that.checkId.signName
 				});
-				this.getImgList()
+        that.getImgList()
 			}
 		},
 		// 下拉刷新
 		onPullDownRefresh() {
-			console.log(1111)
 			this.pageNum = 1
 			this.imgList = []
 			this.getImgList()
 			uni.stopPullDownRefresh()
 		},
 		// 上划加载更多
-		onReachBottom() {
-			console.log(2222)
-			if (this.imgList.length > 9) {
-				this.pageNum += 1
-				this.getImgList()
-			}
+		onReachBottom() {//上拉触底函数
+      if(!this.isLoadMore) {  //此处判断，上锁，防止重复请求
+        this.isLoadMore=true
+        if (this.loadStatus === "more") {
+          this.pageNum += 1  //每次上拉请求新的一页
+          this.getImgList();
+        }
+      }
 		},
 		methods: {
 			// 搜索
@@ -116,47 +111,69 @@
 			},
 			// 图片列表
 			async getImgList() {
-				if (this.checkId.type === 'click') {
+        let that = this;
+        that.loadStatus = 'loading';
+				if (that.checkId.type === 'click') {
 					const res = await querySignImg({
-						pageNum: this.pageNum,
-						pageSize: this.pageSize,
-						signId: this.checkId.signId,
-						typeId: this.checkId.typeId
+						pageNum: that.pageNum,
+						pageSize: that.pageSize,
+						signId: that.checkId.signId,
+						typeId: that.checkId.typeId
 					})
 					if (res.data.code === 200) {
-						this.imgList.push(...res.data.rows)
+            that.$refs.waterfallRef.addData(res.data.rows);
+            if(res.data.rows.length < that.pageSize){  //判断接口返回数据量小于请求数据量，则表示此为最后一页
+              that.isLoadMore = true
+              that.loadStatus = 'noMore'
+            }else{
+              this.loadStatus = 'more';
+              that.isLoadMore = false
+            }
 					} else {
 						uni.showToast({
 							title: res.data.msg,
 							icon: 'none'
 						})
+            that.isLoadMore = false
+            if(that.page > 1){
+              that.page -= 1
+            }
 					}
-				} else if (this.checkId.type === 'search') {
+				} else if (that.checkId.type === 'search') {
 					const params = {
-						pageNum: this.pageNum,
-						pageSize: this.pageSize,
-						signName: this.checkId.signName
+						pageNum: that.pageNum,
+						pageSize: that.pageSize,
+						signName: that.checkId.signName
 					}
 					const res = await querySignImgBySignName(params)
 					if (res.data.code === 200) {
-						this.imgList.push(...res.data.rows)
+            that.$refs.waterfallRef.addData(res.data.rows);
+            if(res.data.rows.length < that.pageSize){  //判断接口返回数据量小于请求数据量，则表示此为最后一页
+              that.isLoadMore = true
+              that.loadStatus = 'noMore'
+            }else{
+              this.loadStatus = 'more';
+              that.isLoadMore = false
+            }
 					} else {
 						uni.showModal({
 							content: res.data.msg,
 							showCancel: false
 						});
+            that.isLoadMore = false
+            if(that.page > 1){
+              that.page -= 1
+            }
 					}
 				}
 			},
 			// 前往详情页
 			targetDetail(item) {
-				console.log('跳转', item)
 				if (item.id) {
 					uni.setStorage({
 						key: 'detailId',
 						data: item.id,
 						success() {
-							console.log(111111)
 							uni.navigateTo({
 								url: '../creator/imgDetail'
 							})
@@ -177,7 +194,7 @@
 	}
 </script>
 
-<style lang="less">
+<style lang="scss">
 	.atlasList {
 		.uni-searchbar {
 			border: 1px solid #11A8FD;

pages/creator/creator.vue

@@ -1,10 +1,10 @@
 <template>
 	<view class="creator">
-		<view>
+		<view closs="top">
 			<swiper class="swiper-box" :autoplay="autoplay" :interval="interval" :duration="duration"
 				:indicator-dots="indicatorDots">
 				<swiper-item v-for="(item, index) in banner" :key="index">
-					<image class="img" @click="linkTo(item)" :src="item.bannerImg"></image>
+					<image class="img" @click="linkTo(item)" :src="item.bannerImg" mode="aspectFill"></image>
 				</swiper-item>
 			</swiper>
 		</view>
@@ -14,36 +14,42 @@
 				<!-- 展示用户相关信息 -->
 				<view class="fb-d-r fb-j-sb fb-a-c list-top">
 					<view class="fb-d-r fb-a-c head-box">
-						<image class="head" :src="item.img"></image>
+						<image class="head" :src="item.img" mode="aspectFill"></image>
 						<view class="ml-10">
-							<view class="">
+							<view class="userName">
 								<text class="">{{item.scanCode}}</text>
 							</view>
 							<view class="fb-d-r fb-j-sb">
 								<view class="imgLength-box">
-									<image class="img-icon" src="../../static/imgLength.png" mode=""></image>
+                  <uni-icons class="listIconImage" custom-prefix="iconfont" type="icon-tupian" size="12" :color="iconColor" ></uni-icons>
 									<text>{{item.imgTotalNum}}</text>
 								</view>
 								<view class="imgLength-box">
-									<image class="img-icon" src="../../static/collectLength.png" mode=""></image>
+                  <uni-icons class="listIconImage" custom-prefix="iconfont" type="icon-shoucang" size="12" :color="iconColor" ></uni-icons>
 									<text>{{item.imgCollectionNum}}</text>
 								</view>
 								<view class="imgLength-box">
-									<image class="img-icon" src="../../static/likeLength.png" mode=""></image>
+                  <uni-icons class="listIconImage" custom-prefix="iconfont" type="icon-xihuan" size="12" :color="iconColor" ></uni-icons>
 									<text>{{item.imgLikeNum}}</text>
 								</view>
 							</view>
 						</view>
 					</view>
-					<image class="jiantou" src="../../static/jiantou-right.png" mode=""></image>
+          <view>
+            <uni-icons class="listIconImage" custom-prefix="iconfont" type="icon-gengduo" size="20" :color="iconColor" ></uni-icons>
+          </view>
 				</view>
 				<!-- 	展示用户对应三张图 -->
 				<view class="fb-d-r fb-j-sb img-box">
 					<view v-for="(pic,param) in item.imgList" :key="param">
-						<image class="threeImg" :src="pic.imgUrl"></image>
+						<image class="threeImg" :src="pic.imgUrl" mode="aspectFill"></image>
 					</view>
 				</view>
 			</view>
+      <!-- 显示加载中或者全部加载完成 -->
+      <view>
+        <uni-load-more :status="loadStatus"></uni-load-more>
+      </view>
 		</view>
 	</view>
 </template>
@@ -59,15 +65,18 @@
 	export default {
 		data() {
 			return {
+        iconColor: '#1a94bc',
 				banner: [],
 				creatorImgList: [],
 				autoplay: true,
 				interval: 2000,
 				duration: 1000,
-				indicatorDots: true,
+				indicatorDots: false,
 				pageNum: 1,
 				pageSize: 10,
-				creatorInfo: {}
+				creatorInfo: {},
+        loadStatus:'noMore',  //加载样式：more - 加载前样式，loading - 加载中样式，noMore - 没有数据样式
+        isLoadMore:false,  //是否加载中
 			}
 		},
 		onLoad() {
@@ -84,11 +93,14 @@
 		},
 
 		// 上划加载更多
-		onReachBottom() {
-			if (this.creatorImgList.length > 1) {
-				this.pageNum += 1
-				this.getCreatorImgsPage()
-			}
+		onReachBottom() {//上拉触底函数
+      if(!this.isLoadMore) {  //此处判断，上锁，防止重复请求
+        this.isLoadMore=true
+        if (this.loadStatus === "more") {
+          this.pageNum += 1  //每次上拉请求新的一页
+          this.getCreatorImgsPage();
+        }
+      }
 		},
 		methods: {
 			// 跳转艺术家详情页
@@ -142,17 +154,30 @@
 			},
 			//获取艺术家图片分页
 			async getCreatorImgsPage() {
+			  let that = this;
+        that.loadStatus = 'loading';
 				const res = await getCreatorImgsPage({
-					pageNum: this.pageNum,
-					pageSize: this.pageSize
+					pageNum: that.pageNum,
+					pageSize: that.pageSize
 				})
 				if (res.data.code === 200) {
 					this.creatorImgList.push(...res.data.rows)
+          if(res.data.rows.length < that.pageSize){  //判断接口返回数据量小于请求数据量，则表示此为最后一页
+            that.isLoadMore = true
+            that.loadStatus = 'noMore'
+          }else{
+            this.loadStatus = 'more';
+            that.isLoadMore = false
+          }
 				} else {
 					uni.showModal({
 						content: '用户图片列表加载失败！',
 						showCancel: false
 					});
+          that.isLoadMore = false
+          if(that.page > 1){
+            that.page -= 1
+          }
 				}
 			}
 
@@ -161,20 +186,47 @@
 </script>
 
 <style scoped lang="scss">
+.swiper-box {
+  height: 25vh;
+  background-color: $uni-bg-base-color;
+}
+.swiper-item {
+  background-color: $uni-bg-base-color;
+  width: 100%;
+  height: 100%;
+
+  ::v-deep image {
+    width: 100%;
+    height: 100%;
+  }
+
+}
 	.creator {
 		padding: 20rpx;
-		background-color: #ffffff;
 		font-size: 22rpx;
 
+    .top {
+
+    }
+
 		.list {
 			margin-top: 20rpx;
 
 			&-item {
-				padding: 5rpx;
+				padding: 20rpx;
 				margin-top: 20rpx;
+        background-color: $uni-white;
+        border-radius: 10rpx;
+        box-shadow: 4rpx 4rpx 10rpx rgba(0, 0, 0, 0.2);
 			}
 			.list-top{
 				margin-bottom: 20rpx;
+        padding-bottom: 20rpx;
+        border-bottom: 2rpx solid $uni-border-2;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
 			}
 			.head-box {
 				flex: .8;
@@ -190,9 +242,9 @@
 						display: flex;
 						justify-content: flex-start;
 						align-items: center;
-						.img-icon {
-							width: 30rpx;
-							height: 30rpx;
+
+						.listIconImage {
+              margin-right: 10rpx;
 						}
 					}
 
@@ -207,36 +259,23 @@
 			.img-box {
 				margin-top: 10rpx;
 				display: flex;
-				justify-content: flex-start;
+				justify-content: space-between;
+
+        .threeImg {
+          width: 100%;
+          height: 100%;
+        }
+
 				view {
-					width: 32%;
-					image {
-						border-radius: 8rpx;
-						width: calc(100% - 12rpx);
-					}
+          width: 220rpx;
+          height: 300rpx;
+          border-radius: 10rpx;
+          overflow: hidden;
 				}
 			}
 		}
 	}
 
-	.swiper-box {
-		height: 250rpx;
-		// border: 2rpx solid #18BC37;
-		border-radius: 8rpx;
-		overflow: hidden;
-
-	}
-
-	.swiper-item {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-		height: 200px;
-		color: #fff;
-	}
 
 	.img {
 		position: absolute;
@@ -244,23 +283,38 @@
 		height: 100%;
 	}
 	.head {
-		// flex: 1;
-		// display: flex;
 		width: 80rpx;
 		height: 80rpx;
 		border-radius: 50%;
-		// justify-content: space-between;
-		// align-items: flex-end;
 	}
 
 	.userName {
+    font-size: 24rpx;
+    font-weight: 600;
+    text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.25);
+	}
 
-		margin-left: 10rpx;
+/* ==== 弹性盒模型布局 ==== */
+.fb-d-r { display: flex; flex-direction: row; }
+.fb-d-c { display: flex; flex-direction: column;}
+.fb-w { flex-wrap: wrap; }
+.fb-j-a { justify-content: flex-start; }
+.fb-j-e { justify-content: flex-end; }
+.fb-j-c { justify-content: center; }
+.fb-j-sb { justify-content: space-between; }
+.fb-j-sa { justify-content: space-around; }
+.fb-a-a { align-items: flex-start; }
+.fb-a-e { align-items: flex-end; }
+.fb-a-c { align-items: center; }
+.fb-a-sb { align-items: space-between; }
+.fb-a-sa { align-items: space-around; }
 
-	}
+/* ==== 外边距 ==== */
+.ml-10 {
+  margin-left: 10rpx;
+}
+.mt-10 {
+  margin-top: 10rpx;
+}
 
-	.threeImg {
-		height: 300rpx;
-		width: 200rpx;
-	}
 </style>

pages/creator/creatorDetail.vue

@@ -7,8 +7,8 @@
 					<text>{{creatorInfo.scanCode}}</text>
 				</view>
 				<view class="avatar-right-box">
-					<button open-type="share" size="mini" type="default" style="background-color:#11A8FD;outline：none;">
-						<image src="../../static/img/share.svg" mode=""></image>
+					<button class="" open-type="share" size="mini" type="default" style="background: none; outline: none;">
+            <uni-icons class="list-menu-icon" custom-prefix="iconfont" :type="'icon-fenxiang'" size="20" :color="'#FFFFFF'"></uni-icons>
 					</button>
 				</view>
 			</view>
@@ -36,18 +36,14 @@
 		</view>
 		<view class="middle">
 			<uni-segmented-control :current="current" :values="arrList" @clickItem="onClickItem" styleType="text"
-				activeColor="#11A8FD"></uni-segmented-control>
+				activeColor="#1a94bc"></uni-segmented-control>
 		</view>
-		<swiper class="swiper" :circular="false" :current="current" :indicator-dots="false" :autoplay="false"
-			@change="changeItem" :duration="500" :style="'height:'+swiperHeight+'rpx'">
-			<swiper-item v-for="(item,index) in arrList" :key="index">
-				<view class="swiper-item bottom">
-					<image :src="val.imgUrl" mode="" :style="'width:'+imgWidth+'rpx;height:'+imgHeight+'rpx'"
-						@click="targetDetail(val)" v-for="(val,index) in imgList" :key="val"></image>
-				</view>
-			</swiper-item>
-		</swiper>
-	</view>
+    <waterfallList ref="waterfallRef" :col="2" :clickItem="targetDetail" ></waterfallList>
+    <!-- 显示加载中或者全部加载完成 -->
+    <view>
+      <uni-load-more :status="loadStatus"></uni-load-more>
+    </view>
+    <toTop :toTopFlag="toTopFlag" :toTop="toTop"></toTop>
 	</view>
 </template>
 
@@ -55,7 +51,13 @@
 	import {
 		getTypeImgsPage
 	} from '@/api/creator.js'
+  import waterfallList from '@/components/waterfall-list/waterfall-list.vue'
+  import toTop from '@/components/toTop/toTop.vue'
 	export default {
+    components: {
+      waterfallList,
+      toTop
+    },
 		data() {
 			return {
 				creatorInfo: {},
@@ -64,78 +66,74 @@
 				typeIdList: [],
 				arrList: [],
 				imgList: [],
-				imgWidth: 0, // 图片宽
-				imgHeight: 0, // 图片高
-				swiperHeight: 0, // swiper高
 				pageNum: 1,
-				pageSize: 4,
+				pageSize: 10,
+        loadStatus:'noMore',  //加载样式：more - 加载前样式，loading - 加载中样式，noMore - 没有数据样式
+        isLoadMore:false,  //是否加载中,
+        toTopFlag: false
 			}
 		},
 		created() {
-			uni.getSystemInfo({
-				success: res => {
-					this.imgWidth = res.windowWidth - 60
-					this.imgHeight = (res.windowWidth - 60) * 2 - 30
-					console.log('this.imgHeight', this.imgHeight)
-				}
-			})
 			uni.getStorage({
 				key: 'creatorDetail',
 				success: res => {
-					this.creatorInfo = res.data
-					this.creatorInfo.typeList.forEach(item => {
-						this.arrList.push(item.typeName)
-						this.typeIdList.push(item.typeId)
+				  let that = this;
+          that.pageNum = 1;
+          that.creatorInfo = res.data
+          that.creatorInfo.typeList.forEach(item => {
+            that.arrList.push(item.typeName)
+            that.typeIdList.push(item.typeId)
 					})
-					this.typeId = this.typeIdList[0]
-					this.getTypeImgsPage(this.typeId)
+          that.typeId = that.typeIdList[0]
+          that.$refs.waterfallRef && that.$refs.waterfallRef.init();
+          that.getTypeImgsPage(that.typeId)
 				}
 			})
 		},
 		// 上划加载更多
-		onReachBottom() {
-			console.log(111)
-			if (this.imgList.length > 1) {
-				this.pageNum += 1
-				this.getTypeImgsPage(this.typeId)
-			}
+		onReachBottom() {//上拉触底函数
+      if(!this.isLoadMore) {  //此处判断，上锁，防止重复请求
+        this.isLoadMore=true
+        if (this.loadStatus === "more") {
+          this.pageNum += 1  //每次上拉请求新的一页
+          this.getTypeImgsPage(this.typeId);
+        }
+      }
 		},
 		onShareAppMessage(res) {
 			if (res.from === 'button') { // 来自页面内分享按钮
-				console.log(res)
+				// console.log(res)
 			}
+      uni.showToast({
+        title: '分享成功',
+        icon: 'none'
+      })
 			return {
 				title: `来看看艺术家${this.creatorInfo.scanCode}精心准备的图片吧~`,
 				path: `/pages/creator/imgDetail?id=${this.creatorInfo.id}`
 			}
-			uni.showToast({
-				title: '分享成功',
-				icon: 'none'
-			})
 		},
 		watch: {
 			current(n, o) {
-				console.log('current', this.current, n, o)
-				this.typeId = this.typeIdList[n]
-				this.imgList = []
-				this.getTypeImgsPage(this.typeId)
-				immediate: true
+			  let that = this
+        that.typeId = that.typeIdList[n]
+        that.pageNum = 1
+        that.$refs.waterfallRef && that.$refs.waterfallRef.init();
+				this.getTypeImgsPage(that.typeId)
+        immediate: true
 			}
 		},
+    onPageScroll(e){
+      // 监听页面滚动
+      this.toTopFlag = e.scrollTop > 200; //根据距离顶部距离是否显示回到顶部按钮
+    },
 		methods: {
 			// 标签栏点击
 			onClickItem(e) {
 				this.current = e.currentIndex
 			},
-			// 内容滑动
-			changeItem(e) {
-				this.pageNum = 1
-				this.current = e.detail.current
-				// this.getTypeImgsPage(this.typeId)
-			},
 			// 前往详情页
 			targetDetail(item) {
-				console.log('item', item)
 				if (item.id) {
 					uni.setStorage({
 						key: 'detailId',
@@ -151,39 +149,52 @@
 
 			//获取图片分页
 			async getTypeImgsPage(typeId) {
-				console.log('typeId', typeId)
-				uni.showLoading({
-					title: '加载中'
-				});
+			  let that = this
+				that.loadStatus = 'loading';
 				const params = {
-					scanCode: this.creatorInfo.scanCode,
+					scanCode: that.creatorInfo.scanCode,
 					typeId: typeId,
-					pageNum: this.pageNum,
-					pageSize: this.pageSize,
+					pageNum: that.pageNum,
+					pageSize: that.pageSize,
 				}
 				const res = await getTypeImgsPage(params)
 				if (res.data.code === 200) {
-					this.imgList.push(...res.data.rows)
-					this.swiperHeight = (this.imgHeight + 40) * Math.ceil(this.imgList.length / 2) + 40
-					console.log('this.imgList', this.swiperHeight)
-					uni.hideLoading()
+
+          that.$refs.waterfallRef.addData(res.data.rows);
+          if(res.data.rows.length < that.pageSize){  //判断接口返回数据量小于请求数据量，则表示此为最后一页
+            that.isLoadMore = true
+            that.loadStatus = 'noMore'
+          }else{
+            this.loadStatus = 'more';
+            that.isLoadMore = false
+          }
+
 				} else {
-					uni.hideLoading()
 					uni.showToast({
 						title: res.data.msg,
 						icon: 'none'
 					})
+          that.isLoadMore = false
+          if(that.page > 1){
+            that.page -= 1
+          }
 				}
-			}
+			},
+      toTop() {
+        uni.pageScrollTo({
+          scrollTop: 0,
+          duration: 100,
+        });
+      }
 		}
 	}
 </script>
 
-<style lang="less">
+<style lang="scss" scoped>
 	.creatorDetail {
 		.avatar-box {
 			padding: 20rpx 20rpx;
-			background: #11A8FD;
+      background-image: linear-gradient(-225deg, #007adf 0%, #00ecbc 100%);
 
 			.avatar-top {
 				display: flex;
@@ -203,17 +214,15 @@
 					}
 
 					text {
-						font-size: 14px;
-						color: #fff;
+						font-size: 26rpx;
+						color: $uni-white;
 						margin-left: 20rpx;
+            font-weight: 600;
+            text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.25);
 					}
 				}
 
 				.avatar-right-box {
-					image {
-						width: 40rpx;
-						height: 40rpx;
-					}
 
 					button::after {
 						border: none;
@@ -222,8 +231,10 @@
 			}
 
 			.avatar-box-text {
-				color: #fff;
-				font-size: 12px;
+				color: $uni-white;
+				font-size: 24rpx;
+        white-space: nowrap;
+        text-overflow: ellipsis;
 			}
 
 			.avatar-box-tag {
@@ -238,7 +249,8 @@
 					align-items: center;
 
 					.tag-left-box {
-						width: 120rpx;
+            margin-right: 40rpx;
+            display: flex;
 
 						text {
 							display: block;
@@ -247,7 +259,7 @@
 						}
 
 						text:last-child {
-							margin-top: 8rpx;
+							margin-left: 8rpx;
 						}
 					}
 				}
@@ -255,10 +267,23 @@
 		}
 
 		.middle {
-			.segmented-control {
+      margin-bottom: 20rpx;
+
+			::v-deep .segmented-control {
 				border-radius: 8rpx 8rpx 0 0;
 				background-color: rgba(17, 168, 253, 0.1);
 			}
+
+      ::v-deep .segmented-control__item {
+
+        view {
+          display: flex;
+          align-items: center;
+        }
+
+      }
+
+
 		}
 
 		.bottom {

pages/creator/imgDetail.vue

@@ -1,34 +1,36 @@
 <template>
-	<view class="imgDetail">
-		<image class="main-img" :src="detailMsg.imgUrl" mode=""></image>
-		<view class="toolbar">
-			<view class="toolbar-box">
-				<image v-if="detailMsg.isHot ==='0'" src="../../static/hot-not.png" mode=""></image>
-				<image v-else src="../../static/hot-yes.png" mode=""></image>
-			</view>
-			<view class="toolbar-box" @click="download(detailMsg.imgUrl)">
-				<image v-if="isDownload" src="../../static/download-select.png" mode=""></image>
-				<image v-else src="../../static/download.png" mode=""></image>
-				<text>下载</text>
-			</view>
-			<view class="toolbar-box" @click="likeCollect('isLike')">
-				<image v-if="isLike" src="../../static/like-select.png" mode=""></image>
-				<image v-else src="../../static/like.png" mode=""></image>
-				<text>喜欢</text>
-			</view>
-			<view class="toolbar-box" @click="likeCollect('isCollect')">
-				<image v-if="isCollect" src="../../static/collect-select.png" mode=""></image>
-				<image v-else src="../../static/collect.png" mode=""></image>
-				<text>收藏</text>
-			</view>
-			<view class="toolbar-box share-box">
-				<button open-type="share">
-					<image src="../../static/share.png" mode=""></image>
-					<text>分享</text>
-				</button>
-			</view>
-		</view>
-	</view>
+  <view>
+    <view class="imgDetail">
+      <image class="main-img" :src="detailMsg.imgUrl" mode="widthFix"></image>
+    </view>
+    <view class="toolbar" v-if="detailMsg.imgUrl">
+      <view class="toolbar-box">
+        <uni-icons v-if="detailMsg.isHot ==='0'" class="tool-bar-icon" custom-prefix="iconfont" :type="'icon-hot'" size="24"  ></uni-icons>
+        <uni-icons v-else class="tool-bar-icon" custom-prefix="iconfont" :type="'icon-hot'" size="24" :color="likeColor"></uni-icons>
+      </view>
+      <view class="toolbar-box" @click="download(detailMsg.imgUrl)">
+        <uni-icons v-if="isDownload" class="tool-bar-icon" custom-prefix="iconfont" :type="'icon-xiazai'" size="24" ></uni-icons>
+        <uni-icons v-else class="tool-bar-icon" custom-prefix="iconfont" :type="'icon-xiazai'" size="24" ></uni-icons>
+        <text>下载</text>
+      </view>
+      <view class="toolbar-box" @click="likeCollect('isLike')">
+        <uni-icons v-if="isLike" class="tool-bar-icon" custom-prefix="iconfont" :type="'icon-yixihuan'" size="24" :color="likeColor"></uni-icons>
+        <uni-icons v-else class="tool-bar-icon" custom-prefix="iconfont" :type="'icon-weixihuan'" size="24" ></uni-icons>
+        <text>喜欢</text>
+      </view>
+      <view class="toolbar-box" @click="likeCollect('isCollect')">
+        <uni-icons v-if="isCollect" class="tool-bar-icon" custom-prefix="iconfont" :type="'icon-yishoucang'" size="24" :color="collectColor"></uni-icons>
+        <uni-icons v-else class="tool-bar-icon" custom-prefix="iconfont" :type="'icon-weishoucang'" size="24" ></uni-icons>
+        <text>收藏</text>
+      </view>
+      <view class="toolbar-box share-box">
+        <button open-type="share">
+          <uni-icons class="tool-bar-icon" custom-prefix="iconfont" :type="'icon-fenxiang1'" size="24" ></uni-icons>
+          <text>分享</text>
+        </button>
+      </view>
+    </view>
+  </view>
 </template>
 
 <script>
@@ -45,17 +47,22 @@
 		insertOrUpdatePreInviteProfit, // 新增/更新艺术家即将入账邀请收益
 		checkUserCanDownload // 检查某平台用户当日下载次数是否超标
 	} from '@/api/creator.js'
+  import {loginTiktok} from '@/api/auth.js'
 	export default {
 		data() {
 			return {
 				detailMsg: {}, // 图片信息
-				userInfo: {}, // 登录用户信息
+				userInfo: undefined, // 登录用户信息
 				isDownload: false, // 是否已下载
 				isLike: false, // 是否点赞/喜欢
 				isCollect: false, // 是否收藏,
 				scanCode: undefined, //艺术家搜索码
-				canDownload: false //能否下载 false为能下载
-
+        artist: {},
+				canDownload: false, //能否下载 false为能下载
+        whiteColor: '#FFFFFF',
+        primaryColor: '#1a94bc',
+        likeColor: '#ef223c',
+        collectColor: '#dcaa04',
 			}
 		},
 		created() {
@@ -68,28 +75,33 @@
 		},
 		onShareAppMessage(res) {
 			if (res.from === 'button') { // 来自页面内分享按钮
-				console.log(res)
+				// console.log(res)
 			}
+      uni.showToast({
+        title: '分享成功',
+        icon: 'none'
+      })
 			return {
 				title: '来看看艺术家[' + this.scanCode + ']精心准备的图片吧~',
 				path: `/pages/creator/imgDetail?id=${this.userInfo.id}`,
 				bgImgUrl: `${this.detailMsg.imgUrl}`
 			}
-			uni.showToast({
-				title: '分享成功',
-				icon: 'none'
-			})
 		},
 		methods: {
 			// 图片详情
 			async getImgDetail(id) {
 				const res = await detailsTiktokImg(id)
-				console.log('res', res)
 				if (res.data.code === 200) {
+				  if (!res.data?.data){
+            uni.showToast({
+              title: '获取图片信息失败',
+              icon: 'none'
+            })
+          }
 					this.detailMsg = res.data.data
-					console.log('图片详情', res)
 					const result = await queryCreatorScanCodeById(this.detailMsg.creatorId)
 					if (result.data.code === 200) {
+					  this.artist = result.data.data;
 						this.scanCode = result.data.data.scanCode
 					} else {
 						uni.showToast({
@@ -101,7 +113,6 @@
 						key: 'userInfo',
 						success: res => {
 							this.userInfo = res.data
-							console.log('userInfo', this.userInfo)
 							this.searchIsLike()
 							this.searchisCollect()
 							this.checkUserDownload()
@@ -115,13 +126,12 @@
 				}
 			},
 			// 查询是否点赞
-			async searchIsLike() {
+			async searchIsLike(token) {
 				const params = {
 					imgId: this.detailMsg.id,
 					userId: this.userInfo.id
 				}
-				console.log('params', this.detailMsg, params)
-				const res = await judgeTiktokLike(params)
+				const res = await judgeTiktokLike(params, token)
 				if (res.data.code === 200) {
 					this.isLike = res.data.data
 				} else {
@@ -132,12 +142,12 @@
 				}
 			},
 			// 查询是否收藏过
-			async searchisCollect() {
+			async searchisCollect(token) {
 				const params = {
 					imgId: this.detailMsg.id,
 					userId: this.userInfo.id
 				}
-				const res = await judgeTiktokCollect(params)
+				const res = await judgeTiktokCollect(params, token)
 				if (res.data.code === 200) {
 					this.isCollect = res.data.data
 				} else {
@@ -147,65 +157,193 @@
 					})
 				}
 			},
+      async lickRequest(token) {
+        const params = {
+          imgId: this.detailMsg.id,
+          userId: this.userInfo.id
+        }
+        let isLike = this.isLike
+        if (!isLike) {
+          //点赞
+          const res = await tiktokLike(params, token)
+          if (res.data.code === 200) {
+            this.isLike = !isLike
+          } else {
+            uni.showToast({
+              title: res.data.msg,
+              icon: 'none'
+            })
+          }
+        } else {
+          //取消点赞
+          const res = await tiktokUnLike(params, token)
+          if (res.data.code === 200) {
+            this.isLike = !isLike
+          } else {
+            uni.showToast({
+              title: res.data.msg,
+              icon: 'none'
+            })
+          }
+        }
+      },
+      async collectRequest(token) {
+        const params = {
+          imgId: this.detailMsg.id,
+          userId: this.userInfo.id
+        }
+        let isCollect = this.isCollect
+        if (!isCollect) {
+          //收藏
+          const res = await tiktokCollect(params, token)
+          if (res.data.code === 200) {
+            this.isCollect = !isCollect
+          } else {
+            uni.showToast({
+              title: res.data.msg,
+              icon: 'none'
+            })
+          }
+        } else {
+          //取消收藏
+          const res = await tiktokUnCollect(params, token)
+          if (res.data.code === 200) {
+            this.isCollect = !isCollect
+          } else {
+            uni.showToast({
+              title: res.data.msg,
+              icon: 'none'
+            })
+          }
+        }
+      },
+      async lickOrCollect(val, token) {
+        if (val === 'isLike') {
+          await this.lickRequest(token);
+        } else if (val === 'isCollect') {
+          await this.collectRequest(token);
+        }
+      },
 			// 点赞/收藏
-			async likeCollect(val) {
-				const params = {
-					imgId: this.detailMsg.id,
-					userId: this.userInfo.id
-				}
-				if (val === 'isLike') {
-					this.isLike = !this.isLike
-					console.log('this.isLike', this.isLike)
-					if (this.isLike) {
-						//点赞
-						console.log('点赞')
-						const res = await tiktokLike(params)
-						if (res.data.code === 200) {} else {
-							uni.showToast({
-								title: res.data.msg,
-								icon: 'none'
-							})
-						}
-					} else {
-						//取消点赞
-						console.log('取消点赞')
-						const res = await tiktokUnLike(params)
-						if (res.data.code === 200) {} else {
-							uni.showToast({
-								title: res.data.msg,
-								icon: 'none'
-							})
-						}
-					}
-				} else if (val === 'isCollect') {
-					this.isCollect = !this.isCollect
-					if (this.isCollect) {
-						//收藏
-						console.log('收藏')
-						const res = await tiktokCollect(params)
-						if (res.data.code === 200) {} else {
-							uni.showToast({
-								title: res.data.msg,
-								icon: 'none'
-							})
-						}
-					} else {
-						//取消收藏
-						console.log('取消收藏')
-						const res = await tiktokUnCollect(params)
-						if (res.data.code === 200) {} else {
-							uni.showToast({
-								title: res.data.msg,
-								icon: 'none'
-							})
-						}
-					}
-				}
+			likeCollect(val) {
+			  if (!this.userInfo) {
+			    this.getUserInfoLogin((token) => {
+			      this.lickOrCollect(val, token)
+			    })
+        } else {
+          this.lickOrCollect(val)
+        }
+			},
+      async loginFunc(res, userInfo, callBack) {
+        const params = {
+          code: res.code,
+          encryptedData: userInfo.encryptedData,
+          iv: userInfo.iv
+        }
+        // 用户授权登录
+        await loginTiktok(params).then(res => {
+          if (res.data.code === 200) {
+            uni.setStorage({
+              key: 'userInfo',
+              data: res.data.data.userInfo,
+            })
+            this.userInfo = res.data.data.userInfo;
+            uni.setStorage({
+              key: 'token',
+              data: res.data.data.access_token
+            })
+            let headers = {
+              TiktokAuthorization: res.data.data.access_token
+            }
+            this.checkUserDownload(headers)
+            callBack && callBack(headers)
+            this.searchIsLike(headers)
+            this.searchisCollect(headers)
+          } else {
+            uni.showToast({
+              title: res.data.msg,
+              icon: 'none'
+            })
+          }
+        }).catch(res => {})
+      },
+      // 获取用户信息
+      async getUserInfoLogin(callBack) {
+        uni.getSetting({
+          success: (settingObj) => {
+            if (settingObj.authSetting['scope.userInfo'] === undefined || settingObj.authSetting['scope.userInfo']) {
+              uni.login({
+                force: true,
+                success: (res) => {
+                  uni.getUserInfo({
+                    withCredentials: true,
+                    success: async (userInfo) => {
+                      await this.loginFunc(res, userInfo, callBack)
+                    },
+                    complete: () => {
 
+                    },
+                    fail: (errMsg) => {
 
-			},
+                    }
+                  })
+                },
+                complete: () => {
+
+                },
+                fail: (errMsg) => {
+
+                }
+              })
+            } else {
+              uni.showModal({
+                title: '您已拒绝授权用户信息',
+                content: '是否进入权限管理，调整授权？',
+                success: function (res) {
+                  if (res.confirm) {
+                    uni.openSetting({
+                      success: (settingRes) => {
+                        if (settingRes.authSetting['scope.userInfo']) {
+                          uni.login({
+                            force: true,
+                            success: (res) => {
+                              uni.getUserInfo({
+                                withCredentials: true,
+                                success: async (userInfo) => {
+                                  await this.loginFunc(res, userInfo, callBack)
+                                },
+                                complete: () => {
+
+                                },
+                                fail: (errMsg) => {
+
+                                }
+                              })
+                            },
+                            complete: () => {
+
+                            },
+                            fail: (errMsg) => {
+
+                            }
+                          })
+                        }
+                      },
+                      fail: () => {
+
+                      }
+                    })
+                  } else if (res.cancel) {
+                    console.log('用户点击取消');
+                  }
+                }
+              });
+            }
+          }
+        })
+      },
 			//写入图片广告收益
-			async insertPreAdProfit() {
+			async insertPreAdProfit(token) {
 				const params = {
 					imgId: this.detailMsg.id,
 					creatorId: this.detailMsg.creatorId,
@@ -214,7 +352,7 @@
 					appType: '0',
 					platform: '0'
 				}
-				const res = await insertOrUpdatePreAdProfit(params);
+				const res = await insertOrUpdatePreAdProfit(params, token);
 				if (res.data.code === 200) {
 					console.log("写入广告收益成功!")
 					this.adResult = res.data.code;
@@ -227,7 +365,7 @@
 			},
 
 			//写入图片邀请收益
-			async insertPreInviteProfit() {
+			async insertPreInviteProfit(token) {
 				const params = {
 					imgId: this.detailMsg.id,
 					creatorId: this.detailMsg.creatorId,
@@ -235,9 +373,9 @@
 					appType: '0',
 					platform: '0'
 				}
-				const res = await insertOrUpdatePreInviteProfit(params)
+				const res = await insertOrUpdatePreInviteProfit(params, token)
 				if (res.data.code === 200) {
-					console.log("写入邀请收益成功");
+					// console.log("写入邀请收益成功");
 					this.inviteResult = res.data.code;
 				} else {
 					uni.showToast({
@@ -248,13 +386,13 @@
 			},
 
 			//检查某平台用户当日下载次数是否超标
-			async checkUserDownload() {
+			async checkUserDownload(token) {
 				const params = {
 					userId: this.userInfo.id,
 					appType: '0',
 					platform: '0'
 				}
-				const res = await checkUserCanDownload(params);
+				const res = await checkUserCanDownload(params, token);
 				if (res.data.code === 200) {
 					console.log("当日下载结果为", res.data.data)
 					this.canDownload = res.data.data;
@@ -265,13 +403,19 @@
 					})
 				}
 			},
-
-
-
+      authDownload(url) {
+        if (!this.userInfo) {
+          this.getUserInfoLogin((token) => {
+            this.download(url, token)
+          })
+        } else {
+          this.download(url)
+        }
+      },
 			// 下载
-			download(url) {
+			download(url, token) {
 				let that = this;
-				if (this.canDownload != true) {
+				if (that.canDownload !== true) {
 					//满足可下载条件
 					this.isDownload = true
 					uni.showLoading({
@@ -290,38 +434,23 @@
 										uni.downloadFile({
 											url,
 											success: (res) => {
-												console.log('下载路径', res)
 												if (res.statusCode === 200) {
 													uni.saveImageToPhotosAlbum({
 														//图片路径，不支持网络图片路径
-														filePath: res
-															.tempFilePath,
+														filePath: res.tempFilePath,
 														success: (res) => {
-															console.log(
-																'success',
-																res)
 
 														},
 														fail: (res) => {
-															console.log(
-																'fail',
-																res)
-															return uni
-																.showToast({
-																	title: res
-																		.errMsg,
+															return uni.showToast({
+																	title: res.errMsg,
 																	icon: 'none'
 																});
 														},
 														complete: (res) => {
-															uni
-														.hideLoading();
-															if (res
-																.errMsg !==
-																"saveImageToPhotosAlbum:ok"
-															) {
-																return uni
-																	.showToast({
+															uni.hideLoading();
+															if (res.errMsg !== "saveImageToPhotosAlbum:ok") {
+																return uni.showToast({
 																		title: "下载失败！",
 																		icon: 'none'
 																	});
@@ -331,8 +460,8 @@
 																		title: "下载成功！",
 																		icon: 'none',
 																		success() {
-																			that.insertPreAdProfit();
-																			that.insertPreInviteProfit();
+																			that.insertPreAdProfit(token);
+																			that.insertPreInviteProfit(token);
 																		}
 																	});
 															}
@@ -357,13 +486,8 @@
 												if (res.confirm) {
 													//调起客户端小程序设置界面，返回用户设置的操作结果。（重新让用户授权）
 													uni.openSetting({
-														success: (
-															res) => {
-															console
-																.log(
-																	res
-																	.authSetting
-																);
+														success: (res) => {
+
 														},
 													});
 												} else if (res.cancel) {
@@ -389,7 +513,6 @@
 									},
 									fail: (res) => {
 										uni.hideLoading();
-										console.log(res.errMsg);
 										return uni.showToast({
 											title: res.errMsg,
 											icon: 'none'
@@ -424,67 +547,74 @@
 	}
 </script>
 
-<style lang="less">
+<style lang="scss">
 	.imgDetail {
 		height: 100vh;
 		width: 100vw;
-		overflow: hidden;
+		overflow: auto;
 		position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
 		.main-img {
 			width: 100%;
 			height: 100%;
+      box-shadow: 2rpx 4rpx 8rpx rgba(0, 0, 0, 0.25);
 		}
+  }
 
-		.toolbar {
-			width: 60px;
-			background-color: rgba(255, 255, 255, 0.2);
-			position: absolute;
-			bottom: 76px;
-			right: 10px;
-			border-radius: 60px;
-			padding-top: 40rpx;
+  .toolbar {
+    width: 60px;
+    background-color: rgba(248, 248, 248, 0.5);
+    /* 模糊大小就是靠的blur这个函数中的数值大小 */
+    backdrop-filter: blur(4rpx);
+    position: fixed;
+    bottom: 120rpx;
+    right: 40rpx;
+    border-radius: 60px;
+    padding-top: 40rpx;
+    box-shadow: 2rpx 4rpx 8rpx rgba(0, 0, 0, 0.25);
 
-			.share-box {
+    .share-box {
 
-				>button {
-					line-height: 0 !important;
-					padding: 0;
-					outline: none;
-					background: none;
-					border: none;
+      >button {
+        line-height: 0 !important;
+        padding: 0;
+        outline: none;
+        background: none;
+        border: none;
 
-				}
+      }
 
-				>button::after {
-					border: none;
-				}
-			}
+      >button::after {
+        border: none;
+      }
+    }
 
-			.toolbar-box {
-				height: 60px;
-				text-align: center;
-				margin-bottom: 40rpx;
+    .toolbar-box {
+      height: 60px;
+      text-align: center;
+      margin-bottom: 40rpx;
 
-				text {
-					display: block;
-					text-align: center;
-					line-height: 60rpx;
-					font-size: 12px;
-				}
+      text {
+        display: block;
+        text-align: center;
+        line-height: 60rpx;
+        font-size: 12px;
+      }
 
-				image {
-					width: 50rpx;
-					height: 50rpx;
-					margin: 0 auto;
-				}
-			}
+      image {
+        width: 50rpx;
+        height: 50rpx;
+        margin: 0 auto;
+      }
+    }
 
-			.toolbar-box:first-child {
-				line-height: 40rpx;
-				height: 40rpx;
-			}
+    .toolbar-box:first-child {
+      line-height: 40rpx;
+      height: 40rpx;
+    }
 
-		}
-	}
+  }
 </style>

pages/index/indexProto.vue

@@ -1,74 +1,129 @@
 <template>
 	<view class="container">
-		<view v-if="!showChoiceness">
-			<view class="top">
-				<image class="back-img" src="../../static/img/start.gif" mode=""></image>
-				<view class="top-bottom">
-				</view>
-				<uni-search-bar class="uni-mt-10" placeholder="请输入喜欢的艺术家代号吧~" clearButton="auto" cancelButton="none"
-					@confirm="search" />
-				<text>热门艺术家</text>
-				<view class="user-list">
-					<view class="user-list-box" v-for="(item,index) in hotCreatorList" :key='item.id'
-						@click="goCreatorDetail(item.scanCode)">
-						<image :src="item.img" mode=""></image>
-						<text>{{item.scanCode}}</text>
-					</view>
-				</view>
-			</view>
-			<view class="middle">
-				<text>近期精选</text>
-				<image src="../../static/img/slide-top.svg" mode=""></image>
-			</view>
-		</view>
-		<Choiceness v-else></Choiceness>
+    <view class="top">
+      <uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="banner" :current="current" :mode="mode" :dots-styles="dotsStyles" >
+        <swiper class="swiper-box" @change="changeSwiper" :current="swiperDotIndex" :autoplay="autoplay"
+                :interval="interval" :duration="duration" circular>
+          <swiper-item v-for="(item, index) in banner" :key="index">
+            <view class="swiper-item" :class="'swiper-item' + index">
+              <image class="img" :src="item.bannerImg" mode="aspectFill"></image>
+            </view>
+          </swiper-item>
+        </swiper>
+      </uni-swiper-dot>
+    </view>
+    <view class="middle">
+      <uni-search-bar class="uni-mt-10" placeholder="请输入喜欢的艺术家搜索号吧~" clearButton="auto" cancelButton="none"
+        @confirm="search" />
+      <view class="title">
+        <text>热门艺术家</text>
+      </view>
+      <view class="user-list">
+        <view class="user-list-box" v-for="(item,index) in hotCreatorList" :key='item.id'
+          @click="goCreatorDetail(item.scanCode)">
+          <image :src="item.img" mode=""></image>
+          <text>{{item.scanCode}}</text>
+        </view>
+      </view>
+      <view v-if="creatorLoading" class="user-list-loading">
+        <uni-load-more :status="'loading'"></uni-load-more>
+      </view>
+    </view>
+    <view class="footer">
+      <view class="title">
+        <text>近期精选</text>
+      </view>
+      <waterfallList ref="waterfallRef" :col="2" :clickItem="targetDetail" ></waterfallList>
+      <!-- 显示加载中或者全部加载完成 -->
+      <view>
+        <uni-load-more :status="loadStatus"></uni-load-more>
+      </view>
+    </view>
 	</view>
 </template>
 
 <script>
 	import {
 		listHotCreator,
-		creatorDetails
+		creatorDetails,
+    imgLists,
+    getListBanner
 	} from '@/api/index.js'
-	import {loginTiktok} from '@/api/auth.js'
-	import Choiceness from './choiceness.vue'
+	// import Choiceness from './choiceness.vue'
+  import waterfallList from '@/components/waterfall-list/waterfall-list.vue'
 	export default {
 		data() {
 			return {
 				hotCreatorList: [],
 				isTarget: true,
-				showChoiceness:false
+				showChoiceness:false,
+        pageNum: 1,
+        pageSize: 10,
+        imgList: [],
+        loadStatus:'noMore',  //加载样式：more - 加载前样式，loading - 加载中样式，noMore - 没有数据样式
+        isLoadMore:false,  //是否加载中
+        creatorLoading: false,
+        banner:[
+          {
+            bannerImg: "/static/uni.png"
+          }
+        ],
+        current: 0,
+        mode: 'default',
+        dotsStyles: {
+          backgroundColor: 'rgba(255, 255, 255, .5)',
+          border: '1px rgba(0, 0, 0, .3) solid',
+          color: '#fff',
+          selectedBackgroundColor: 'rgba(26, 148, 188, .9)',
+          selectedBorder: '1px rgba(0, 0, 0, .9) solid',
+          bottom: 15
+        },
+        swiperDotIndex: 0,
+        autoplay: true,
+        interval: 5000,
+        duration: 500,
 			}
 		},
 		components:{
-			Choiceness,
+      waterfallList
 		},
 		// 下拉刷新
 		onPullDownRefresh() {
-			this.showChoiceness = false
 			uni.stopPullDownRefresh()
 		},
 		created() {
-			const userInfo = uni.getStorageSync('userInfo')
-			if (!userInfo) {
-				console.log('havent userInfo')
-				this.getUserInfo()
-			} else {
-				console.log('have userInfo')
-			}
-			this.getHotCreatorList()
-		},
-		onPageScroll(e) {
-			// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
-
-			if (e.scrollTop > 160) {
-				this.showChoiceness = true
-				// uni.redirectTo({
-				// 	url: '../index/choiceness'
-				// })
-			}
+      let that = this;
+      that.pageNum = 1;
+      that.$refs.waterfallRef && that.$refs.waterfallRef.init();
+      that.getBanner();
+      that.getHotCreatorList()
+      that.getImgList();
 		},
+    onShow() {
+      /*let that = this;
+      that.pageNum = 1;
+      that.$refs.waterfallRef && that.$refs.waterfallRef.init();
+      that.getBanner();
+      that.getHotCreatorList()
+      that.getImgList();*/
+    },
+    // 上划加载更多
+    onReachBottom(e) {//上拉触底函数
+      if(!this.isLoadMore) {  //此处判断，上锁，防止重复请求
+        this.isLoadMore=true
+        if (this.loadStatus === "more") {
+          this.pageNum += 1  //每次上拉请求新的一页
+          this.getImgList();
+        }
+      }
+    },
 		methods: {
+      changeSwiper(e){
+        this.current = e.detail.current;
+      },
+      clickItem(e) {
+        this.swiperDotIndex = e
+      },
 			// 搜索
 			search(res) {
 				if (res.value) {
@@ -82,55 +137,25 @@
 				}
 
 			},
-			// 获取用户信息
-			getUserInfo() {
-				uni.login({
-					force: true,
-					success: res => {
-						uni.getUserInfo({
-							withCredentials: true,
-							success: userInfo => {
-								const params = {
-									code: res.code,
-									encryptedData: userInfo.encryptedData,
-									iv: userInfo.iv
-								}
-								console.log('params',params)
-								// 用户授权登录
-								loginTiktok(params).then(res => {
-									if (res.data.code === 200) {
-										uni.setStorage({
-											key: 'userInfo',
-											data: res.data.data.userInfo,
-										})
-										uni.setStorage({
-											key: 'token',
-											data: res.data.data.access_token
-										})
-									} else {
-										uni.showToast({
-											title: res.data.msg,
-											icon: 'none'
-										})
-									}
-								}).catch(res => {})
-								console.log(`getUserInfo 调用成功`, userInfo);
-							},
-							fail(userInfo) {
-								console.log(`getUserInfo 调用失败`);
-							},
-						});
-					},
-					fail(res) {
-						console.log(`login 调用失败`);
-					},
-				});
-
-			},
+      // 获取banner列表
+      async getBanner() {
+        let that = this;
+        const res = await getListBanner()
+        if (res.data.code === 200) {
+          that.banner = res.data.data
+        } else {
+          uni.showModal({
+            content: 'banner加载失败！',
+            showCancel: false
+          });
+        }
+      },
 			// 获取热门艺术家列表
 			async getHotCreatorList() {
+			  this.creatorLoading = true;
 				const res = await listHotCreator()
 				if (res.data.code === 200) {
+          this.creatorLoading = false;
 					this.hotCreatorList = res.data.data
 				} else {
 					uni.showToast({
@@ -138,8 +163,36 @@
 						icon: 'none'
 					})
 				}
-				console.log('getHotCreatorList', res)
 			},
+
+      // 图片列表
+      async getImgList() {
+			  let that = this;
+        that.loadStatus = 'loading';
+        const res = await imgLists({
+          pageNum: that.pageNum,
+          pageSize: that.pageSize
+        })
+        if (res.data.code === 200) {
+          that.$refs.waterfallRef.addData(res.data.rows);
+          if(res.data.rows.length < that.pageSize){  //判断接口返回数据量小于请求数据量，则表示此为最后一页
+            that.isLoadMore = true
+            that.loadStatus = 'noMore'
+          }else{
+            this.loadStatus = 'more';
+            that.isLoadMore = false
+          }
+        } else {
+          uni.showToast({
+            title: res.data.msg,
+            icon: 'none'
+          })
+          that.isLoadMore = false
+          if(that.page > 1){
+            that.page -= 1
+          }
+        }
+      },
 			// 前往艺术家空间
 			async goCreatorDetail(scanCode) {
 				if (scanCode) {
@@ -172,87 +225,112 @@
 					})
 				}
 			},
+      // 前往详情页
+      targetDetail(item) {
+        if (item.id) {
+          uni.setStorage({
+            key: 'detailId',
+            data: item.id,
+            success() {
+              uni.navigateTo({
+                url: '../creator/imgDetail'
+              })
+            }
+          })
+        }
+      },
 			// 滚动监听
 			handleScroll() {
 				let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
-				console.log(scrollTop)
 			},
 		},
 	}
 </script>
 
-<style lang="less">
+<style lang="scss" scoped>
+
+.swiper-box {
+  height: 30vh;
+  background-color: $uni-bg-base-color;
+}
+
+.swiper-item {
+  background-color: $uni-bg-base-color;
+  width: 100%;
+  height: 100%;
+
+  ::v-deep image {
+    width: 100%;
+    height: 100%;
+  }
+
+}
 	.container {
+
 		.top {
+      height: 30vh;
 			width: 100vw;
 
-			image {
-				width: 100vw;
-				height: 400rpx;
-			}
+		}
 
-			.uni-searchbar {
-				border: 1px solid #11A8FD;
-				margin: 0 40rpx;
-				border-radius: 16rpx;
-				padding: 0;
+    .title {
+      text-align: center;
+      font-size: 28rpx;
+      line-height: 48rpx;
+      font-weight: 600;
+      color: $uni-title-text;
+      margin-top: 20rpx;
+      margin-bottom: 20rpx;
+      text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.25);
+    }
 
-				.uni-searchbar__box {
-					padding: 0;
-					border-radius: 16rpx !important;
-				}
-			}
+		.middle {
+      padding-top: 40rpx;
 
-			>text {
-				font-weight: bold;
-				font-size: 14px;
-				display: block;
-				text-align: center;
-				padding-top: 40rpx;
-				padding-bottom: 20rpx;
-			}
+      ::v-deep .uni-searchbar {
+        border: 1px solid $uni-primary;
+        margin: 0 40rpx;
+        border-radius: 16rpx;
+        padding: 0;
 
-			.user-list {
-				display: flex;
-				justify-content: flex-start;
-				align-items: center;
-				overflow-x: auto;
+      }
+      ::v-deep .uni-searchbar__box {
+        padding: 0;
+        border-radius: 16rpx !important;
+      }
 
-				.user-list-box {
-					width: 140rpx;
-					padding: 20rpx;
-					text-align: center;
+      .user-list-loading {
+        min-height: 200rpx;
+        display: flex;
+        justify-content: center;
+      }
 
-					image {
-						width: 100rpx;
-						height: 100rpx;
-						border-radius: 100rpx;
-					}
+      .user-list {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        overflow-x: auto;
 
-					text {
-						font-size: 24rpx;
-						color: #1E1E1E;
-						text-align: center;
-					}
-				}
-			}
-		}
+        .user-list-box {
+          width: 140rpx;
+          padding: 20rpx;
+          text-align: center;
 
-		.middle {
-			text-align: center;
-			height: calc(100vh - 248rpx);
-			padding-top: 40rpx;
+          image {
+            width: 100rpx;
+            height: 100rpx;
+            border-radius: 100rpx;
+            box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.25);
+          }
 
-			text {
-				font-weight: bold;
-				font-size: 14px;
-				display: block;
-			}
+          text {
+            font-size: 24rpx;
+            text-align: center;
+          }
+
+        }
+      }
 
-			image {
-				width: 40rpx;
-				height: 40rpx;
-			}
 		}
 	}
 </style>

pages/userInfo/myCollection/myCollection.vue

@@ -1,15 +1,13 @@
 <template>
 	<view class="myCollection">
-		<view class="myCollection-list">
-			<view class="imgList1">
-				<image v-for="(item,index) in imgList" :key='index' class="img-box"
-					:style="'width:'+imgWidth+';height:'+imgHeight" :src="item.imgUrl" @click="targetDetail(item)"
-					mode=""></image>
-			</view>
-			<!-- <view class="ad-view">
-				<ad adpid="__UNI__069D14D" type="banner" @load="onload" @close="onclose" @error="onerror"></ad>
-			</view> -->
-		</view>
+    <waterfallList ref="waterfallRef" :col="2" :clickItem="targetDetail" ></waterfallList>
+    <!-- 显示加载中或者全部加载完成 -->
+    <view>
+      <uni-load-more :status="loadStatus"></uni-load-more>
+    </view>
+    <!-- <view class="ad-view">
+      <ad adpid="__UNI__069D14D" type="banner" @load="onload" @close="onclose" @error="onerror"></ad>
+    </view> -->
 	</view>
 </template>
 
@@ -17,7 +15,11 @@
 	import {
 		listTiktokCollection
 	} from '@/api/userInfo.js'
+  import waterfallList from '@/components/waterfall-list/waterfall-list.vue'
 	export default {
+    components:{
+      waterfallList
+    },
 		data() {
 			return {
 				userInfo: {}, // 用户信息
@@ -26,66 +28,89 @@
 				imgHeight: 0, // 图片高
 				pageNum: 1,
 				pageSize: 4,
+        loadStatus:'noMore',  //加载样式：more - 加载前样式，loading - 加载中样式，noMore - 没有数据样式
+        isLoadMore:false,  //是否加载中
 			}
 		},
 		created() {
-			this.userInfo = uni.getStorageSync('userInfo')
-			uni.getSystemInfo({
-				success: res => {
-					this.imgWidth = res.windowWidth - 60 + 'rpx'
-					this.imgHeight = (res.windowWidth - 60) * 2 - 30 + 'rpx'
-					this.getImgList()
-				}
-			})
+      let that = this;
+      that.userInfo = uni.getStorageSync('userInfo')
+      if (that.userInfo) {
+        that.pageNum = 1;
+        that.$refs.waterfallRef && that.$refs.waterfallRef.init();
+        that.getImgList()
+      }
 		},
 		// 下拉刷新
 		onPullDownRefresh() {
-			//TODO 此處待優化
-			console.log(1111)
 			this.pageNum = 1
 			this.imgList = []
 			this.getImgList()
 			uni.stopPullDownRefresh()
 		},
 		// 上划加载更多
-		onReachBottom() {
-			if (this.imgList.length > 3) {
-				this.pageNum += 1
-				this.getImgList()
-			}
+		onReachBottom() {//上拉触底函数
+      if(!this.isLoadMore) {  //此处判断，上锁，防止重复请求
+        this.isLoadMore=true
+        if (this.loadStatus === "more") {
+          this.pageNum += 1  //每次上拉请求新的一页
+          this.getImgList();
+        }
+      }
 		},
 		methods: {
 			// 收藏图片分頁
 			async getImgList() {
+			  let that = this
 				const res = await listTiktokCollection({
-					userId: this.userInfo.id,
-					pageNum: this.pageNum,
-					pageSize: this.pageSize
+					userId: that.userInfo.id,
+					pageNum: that.pageNum,
+					pageSize: that.pageSize
 				})
 				if (res.data.code === 200) {
-					this.imgList.push(...res.data.rows)
+          that.$refs.waterfallRef.addData(res.data.rows);
+          if(res.data.rows.length < that.pageSize){  //判断接口返回数据量小于请求数据量，则表示此为最后一页
+            that.isLoadMore = true
+            that.loadStatus = 'noMore'
+          }else{
+            this.loadStatus = 'more';
+            that.isLoadMore = false
+          }
 				} else {
 					uni.showToast({
 						title: res.data.msg,
 						icon: 'none'
 					})
+          that.isLoadMore = false
+          if(that.page > 1){
+            that.page -= 1
+          }
 				}
 			},
-			// 前往详情页 //TODO bug待修复
+			// 前往详情页
 			targetDetail(item) {
-				console.log('跳转', item)
 				if (item.id) {
 					uni.setStorage({
 						key: 'detailId',
 						data: item.imgId,
 						success() {
-							console.log(111111)
 							uni.navigateTo({
 								url: '../../creator/imgDetail'
 							})
 						}
 					})
 				}
+        /*if (item.id) {
+          uni.setStorage({
+            key: 'detailId',
+            data: item.id,
+            success() {
+              uni.navigateTo({
+                url: '../creator/imgDetail'
+              })
+            }
+          })
+        }*/
 			},
 		},
 		// onload(e) {
@@ -100,7 +125,7 @@
 	}
 </script>
 
-<style lang="less">
+<style lang="scss">
 	.myCollection {
 		padding-right: 40rpx;
 		padding-top: 40rpx;

pages/userInfo/question/question.vue

@@ -1,6 +1,6 @@
 <template>
 	<view class="container">
-		<view class="head"> 欢迎使用节点壁纸</view>
+		<view class="head">欢迎使用节点壁纸</view>
 		<uni-group mode="card">
 			<uni-collapse>
 				<uni-collapse-item title="1.节点壁纸是什么？" :show-animation="true">
@@ -89,23 +89,6 @@
 			}
 		},
 		created() {
-			const userInfo = uni.getStorageSync('userInfo')
-			if (!userInfo) {
-				console.log('havent userInfo')
-				uni.showModal({
-					content: '艺术家账户过期,请重新登录！',
-					showCancel: false,
-					success() {
-						//没有缓存则跳转登录页面
-						uni.reLaunch({
-							url: '/pages/login/login'
-						});
-					}
-				});
-			} else {
-				this.userInfo = userInfo;
-				console.log('have userInfo')
-			}
 		},
 		methods: {
 			
@@ -114,10 +97,14 @@
 	}
 </script>
 
-<style lang="less">
+<style lang="scss">
 	.head{
 		text-align: center;
-		color: blue;
+		color: $uni-primary;
 		font-size:36rpx;
 	}
+  ::v-deep .uni-collapse-item__wrap-content {
+    line-height: 38rpx;
+    padding: 20rpx 40rpx;
+  }
 </style>

pages/userInfo/secretSign/secretSign.vue

@@ -57,23 +57,7 @@
 			}
 		},
 		created() {
-			const userInfo = uni.getStorageSync('userInfo')
-			if (!userInfo) {
-				console.log('havent userInfo')
-				uni.showModal({
-					content: '艺术家账户过期,请重新登录！',
-					showCancel: false,
-					success() {
-						//没有缓存则跳转登录页面
-						uni.reLaunch({
-							url: '/pages/login/login'
-						});
-					}
-				});
-			} else {
-				this.userInfo = userInfo;
-				console.log('have userInfo')
-			}
+
 		},
 		methods: {
 

pages/userInfo/setting/setting.vue

@@ -1,11 +1,17 @@
 <template>
 	<view class="container">
-		  <uni-group mode="card">
-			<uni-list>
-				<uni-list-item title="清除缓存" :show-extra-icon="true" :extra-icon="clearCache" clickable showArrow @click="logoutUser">></uni-list-item>
-				<uni-list-item title="注销登录" :show-extra-icon="true" :extra-icon="logout" clickable showArrow @click="logoutUser"></uni-list-item>
-			</uni-list>
-		  </uni-group>
+    <view class="list-menu">
+      <view class="list-menu-item" @click="logoutUser">
+        <uni-icons class="list-menu-icon" custom-prefix="iconfont" :type="clearIcon" size="20" :color="primaryColor"></uni-icons>
+        <view class="text">清除缓存</view>
+        <uni-icons class="list-menu-genduo" custom-prefix="iconfont" type="icon-gengduo"></uni-icons>
+      </view>
+      <view class="list-menu-item" @click="logoutUser">
+        <uni-icons class="list-menu-icon" custom-prefix="iconfont" :type="logOutIcon" size="20" :color="primaryColor"></uni-icons>
+        <view class="text">注销登录</view>
+        <uni-icons class="list-menu-genduo" custom-prefix="iconfont" type="icon-gengduo"></uni-icons>
+      </view>
+    </view>
 	</view>
 </template>
 
@@ -16,16 +22,9 @@
 	export default {
 		data() {
 			return {
-				clearCache: {
-					color:'#0000ff',
-					size: '22',
-					type: 'refresh'
-				},
-				logout: {
-					color:'#0000ff',
-					size: '22',
-					type: 'redo'
-				},
+        primaryColor: "#1a94bc",
+        clearIcon: "icon-qingchu",
+        logOutIcon: "icon-tuichu",
 				userInfo:{}
 			}
 		},
@@ -103,14 +102,49 @@
 </script>
 
 <style lang="scss">
-	.ivOver{
-		width: 100%;
-		height:100rpx;
-		line-height: 100rpx;
-		text-align: center;
-		background: #fff;
-		font-size: 20rpx;
-	}
+.container {
+  padding: 20rpx;
+
+  .list-menu {
+    margin-top: 20rpx;
+    padding: 0 20rpx;
+    background-color: $uni-white;
+    border-radius: 10rpx;
+    box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
+
+
+  }
+
+  .list-menu-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 80rpx;
+    line-height: 80rpx;
+    border-bottom: 2rpx solid $uni-border-2;
+
+    .list-menu-icon{
+      color: $uni-primary;
+    }
+
+    .text {
+      font-size: 26rpx;
+      line-height: 80rpx;
+      width: calc(100% - 100rpx);
+    }
+
+    .list-menu-genduo{
+
+    }
+
+  }
+
+  .list-menu-item:first-child {
+  }
 
+  .list-menu-item:last-child {
+    border-bottom: 0 !important;
+  }
 
+}
 </style>

pages/userInfo/userInfo.vue

@@ -1,38 +1,82 @@
 <template>
 	<view class="userInfo">
 		<view class="my-message">
-			<view class="left">
-				<image :src="userInfo.img" mode=""></image>
-			</view>
-			<view class="right">
-				{{userInfo.username}}
-			</view>
+      <view class="dim-div"></view>
+      <view class="user-info-content">
+        <view class="left">
+          <image :src="userInfo.img" mode=""></image>
+        </view>
+        <view class="right">
+          <view class="username" v-if="userInfo.username" @click="getUserInfoLogin">{{userInfo.username}}</view>
+          <view class="login-btn uni-primary" v-else @click="getUserInfoLogin">点击登录</view>
+        </view>
+      </view>
 		</view>
-		<uni-list>
-			<uni-list-item title="我的收藏" link to="/pages/userInfo/myCollection/myCollection"></uni-list-item>
-			<uni-list-item title="常见问题" link to="/pages/userInfo/question/question"></uni-list-item>
-			<uni-list-item title="联系我们" link to="/pages/userInfo/contactUs/contactUs"></uni-list-item>
-			<uni-list-item title="设置" link to="/pages/userInfo/setting/setting"></uni-list-item>
-			<view class="share-box">
-				<button title="分享" open-type="share">分享</button>
-			</view>
-		</uni-list>
+    <view class="menu-content">
+      <view class="prominent-menu">
+        <view class="prominent-menu-item collect-menu" @click="toLinkAuth('/pages/userInfo/myCollection/myCollection')">
+          <view class="prominent-menu-title">我的收藏</view>
+          <view class="prominent-menu-icon">
+            <uni-icons custom-prefix="iconfont" type="icon-wodeshoucang"size="40" :color="primaryColor" />
+          </view>
+        </view>
+      </view>
+      <view class="list-menu">
+        <view class="list-menu-item" v-for="item in menus" @click="toLink(item.url)">
+          <uni-icons class="list-menu-icon" custom-prefix="iconfont" :type="item.icon" size="20" :color="primaryColor"></uni-icons>
+          <view class="text">{{item.title}}</view>
+          <uni-icons class="list-menu-genduo" custom-prefix="iconfont" type="icon-gengduo"></uni-icons>
+        </view>
+      </view>
+      <view class="share-box">
+        <button title="分享" open-type="share">
+          <view class="list-menu-item">
+            <uni-icons class="list-menu-icon" custom-prefix="iconfont" type="icon-fenxiang1" size="20" :color="primaryColor" />
+            <view class="text">分享</view>
+            <uni-icons class="list-menu-genduo" custom-prefix="iconfont" type="icon-gengduo"></uni-icons>
+          </view>
+        </button>
+      </view>
+    </view>
 	</view>
 </template>
 
 <script>
+import {loginTiktok} from '@/api/auth.js'
+import UniIcons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons";
 	export default {
-		data() {
+    components: {UniIcons},
+    data() {
 			return {
-				userInfo: {}
+				userInfo: {},
+        primaryColor: "#1a94bc",
+        menus: [
+          {
+            title: "常见问题",
+            icon: "icon-wenti-",
+            url: "/pages/userInfo/question/question"
+          },
+          {
+            title: "联系我们",
+            icon: "icon-zhifeiji",
+            url: "/pages/userInfo/contactUs/contactUs"
+          },
+          {
+            title: "设置",
+            icon: "icon-chilun",
+            url: "/pages/userInfo/setting/setting"
+          }
+        ]
 			}
 		},
 		created() {
-			this.userInfo = uni.getStorageSync('userInfo')
+      this.userInfo = uni.getStorageSync('userInfo')
 		},
+    onShow() {
+    },
 		onShareAppMessage(res) {
 			if (res.from === 'button') { // 来自页面内分享按钮
-				console.log(res)
+				// console.log(res)
 			}
 			return {
 				title: '想要好看的图片就来[节点壁纸]吧!',
@@ -40,61 +84,297 @@
 			}
 		},
 		methods: {
+      loginFunc(res, userInfo) {
+        const params = {
+          code: res.code,
+          encryptedData: userInfo.encryptedData,
+          iv: userInfo.iv
+        }
+        // 用户授权登录
+        loginTiktok(params).then(res => {
+          if (res.data.code === 200) {
+            uni.setStorage({
+              key: 'userInfo',
+              data: res.data.data.userInfo,
+            })
+            this.userInfo = res.data.data.userInfo;
+            uni.setStorage({
+              key: 'token',
+              data: res.data.data.access_token
+            })
+          } else {
+            uni.showToast({
+              title: res.data.msg,
+              icon: 'none'
+            })
+          }
+        }).catch(res => {})
+      },
+      // 获取用户信息
+      getUserInfoLogin() {
+        uni.getSetting({
+          success: (settingObj) => {
+            if (settingObj.authSetting['scope.userInfo'] === undefined || settingObj.authSetting['scope.userInfo']) {
+              uni.login({
+                force: true,
+                success: (res) => {
+                  uni.getUserInfo({
+                    withCredentials: true,
+                    success: (userInfo) => {
+                      this.loginFunc(res, userInfo)
+                    },
+                    complete: () => {
+
+                    },
+                    fail: (errMsg) => {
+
+                    }
+                  })
+                },
+                complete: () => {
+
+                },
+                fail: (errMsg) => {
+
+                }
+              })
+            } else {
+              uni.showModal({
+                title: '您已拒绝授权用户信息',
+                content: '是否进入权限管理，调整授权？',
+                success: function (res) {
+                  if (res.confirm) {
+                    uni.openSetting({
+                      success: (settingRes) => {
+                        if (settingRes.authSetting['scope.userInfo']) {
+                          uni.login({
+                            force: true,
+                            success: (res) => {
+                              uni.getUserInfo({
+                                withCredentials: true,
+                                success: (userInfo) => {
+                                  this.loginFunc(res, userInfo)
+                                },
+                                complete: () => {
+
+                                },
+                                fail: (errMsg) => {
+
+                                }
+                              })
+                            },
+                            complete: () => {
+
+                            },
+                            fail: (errMsg) => {
+
+                            }
+                          })
+                        }
+                      },
+                      fail: () => {
+
+                      }
+                    })
+                  } else if (res.cancel) {
+                    console.log('用户点击取消');
+                  }
+                }
+              });
+            }
+          }
+        })
+      },
 			share() {
 
-			}
+			},
+      toLink(url) {
+        uni.navigateTo({
+          url: url
+        });
+      },
+      toLinkAuth(url) {
+			  if (this.userInfo) {
+          uni.navigateTo({
+            url: url
+          });
+        } else {
+          uni.showToast({
+            title: '请先登录',
+            icon: 'none'
+          })
+        }
+      }
 		}
 	}
 </script>
 
-<style lang="less">
+<style lang="scss">
 	.userInfo {
 		height: 100%;
-		background-color: white;
+    position: relative;
 
 		.my-message {
-			display: flex;
-			justify-content: flex-start;
-			align-items: center;
-			padding: 20rpx;
-
-			.left {
-				width: 100rpx;
-				height: 100rpx;
-				margin-right: 20rpx;
-
-				>image {
-					width: 100%;
-					height: 100%;
-					border-radius: 50%;
-				}
-			}
+      width: 100vw;
+      height: calc(20vh + 20rpx);
+      background-image: linear-gradient(-225deg, #FFFEFF 0%, #D7FFFE 100%);
+      position: relative;
 
-			.right {
-				font-size: 12px;
-			}
+      .dim-div {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        /* 主要内容 */
+        background: rgba(26, 148, 188, .1);
+        /* 模糊大小就是靠的blur这个函数中的数值大小 */
+        backdrop-filter: blur(25rpx);
+      }
+
+      .user-info-content {
+        height: 100%;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        padding: 20rpx;
+        position: absolute;
+        top: 0;
+        left: 0;
+
+        .left {
+          width: 100rpx;
+          height: 100rpx;
+          margin-right: 20rpx;
+
+          >image {
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+            background-image: linear-gradient(-225deg, #70dcc6 0%, #1a94bc 100%);
+          }
+        }
+
+        .right {
+          font-size: 26rpx;
+          font-weight: 600;
+
+          .login-btn {
+            height: 50rpx;
+            line-height: 50rpx;
+          }
+
+          .username {
+            font-size: 26rpx;
+            font-weight: 600;
+            text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.25);
+          }
+
+        }
+      }
 		}
 
+    .menu-content {
+      width: 100vw;
+      min-height: calc(100vh - 20vh);
+      background: $uni-bg-color;
+      border-radius: 20rpx 20rpx 0 0;
+      position: absolute;
+      top: calc(20vh);
+      left: 0;
+      right: 0;
+      padding: 20rpx;
+      box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
+
+      .prominent-menu {
+        height: 120rpx;
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .prominent-menu-item {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          width: calc(50% - 10rpx);
+          height: 100%;
+          border-radius: 10rpx;
+          background-image: linear-gradient(-225deg, #E3FDF5 0%, #FFE6FA 100%);
+          padding: 20rpx 10rpx 20rpx 30rpx;
+          box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
+
+          .prominent-menu-title {
+            font-size: 26rpx;
+            font-weight: 600;
+            text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.25);
+          }
+
+          .prominent-menu-icon {
+
+          }
+
+        }
+
+      }
+
+      .list-menu {
+        margin-top: 20rpx;
+        padding: 0 20rpx;
+        background-color: $uni-white;
+        border-radius: 10rpx;
+        box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
+
+
+      }
+
+    }
+
+    .list-menu-item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 80rpx;
+      line-height: 80rpx;
+      border-bottom: 2rpx solid $uni-border-2;
+
+      .list-menu-icon{
+        color: $uni-primary;
+      }
+
+      .text {
+        font-size: 26rpx;
+        line-height: 80rpx;
+        width: calc(100% - 100rpx);
+      }
+
+      .list-menu-genduo{
+
+      }
+
+    }
+
+    .list-menu-item:first-child {
+    }
+
+    .list-menu-item:last-child {
+      border-bottom: 0 !important;
+    }
+
 		.share-box {
-			width: 100vw;
+			width: 100%;
+      margin-top: 20rpx;
+      border-radius: 10rpx;
+      box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
+      overflow: hidden;
 
 			>button {
-				background: none;
+				background: $uni-white;
 				outline: none;
-				font-size: 14px;
+				font-size: 26rpx;
 				text-align: left;
 				line-height: 14px;
-				padding: 12px 15px;
 			}
 
 		}
-
-		.bottom-btn {
-			position: fixed;
-			bottom: 0;
-			left: 0;
-			width: 100vw;
-			z-index: 1000;
-		}
 	}
 </style>

static/css/main.scss

@@ -1,33 +0,0 @@
-/* ===== 页面公用 ===== */
-page {
-	// width: 100vw;
-	height: 100vh;
-	background-color: #f5f5f5;
-}
-
-view {
-	box-sizing: border-box;
-}
-
-/* ==== 弹性盒模型布局 ==== */
-.fb-d-r { display: flex; flex-direction: row; }
-.fb-d-c { display: flex; flex-direction: column;}
-.fb-w { flex-wrap: wrap; }
-.fb-j-a { justify-content: flex-start; }
-.fb-j-e { justify-content: flex-end; }
-.fb-j-c { justify-content: center; }
-.fb-j-sb { justify-content: space-between; }
-.fb-j-sa { justify-content: space-around; }
-.fb-a-a { align-items: flex-start; }
-.fb-a-e { align-items: flex-end; }
-.fb-a-c { align-items: center; }
-.fb-a-sb { align-items: space-between; }
-.fb-a-sa { align-items: space-around; }
-
-/* ==== 外边距 ==== */
-.ml-10 {
-	margin-left: 10rpx;
-}
-.mt-10 {
-	margin-top: 10rpx;
-}

static/customicons.css

@@ -1,20 +0,0 @@
-@font-face {
-  font-family: "customicons"; /* Project id 2878519 */
-  src:url('/static/customicons.ttf') format('truetype');
-}
-
-.customicons {
-  font-family: "customicons" !important;
-}
-
-.youxi:before {
-  content: "\e60e";
-}
-
-.wenjian:before {
-  content: "\e60f";
-}
-
-.zhuanfa:before {
-  content: "\e610";
-}

static/icon/iconfont.css

@@ -0,0 +1,101 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 3946003 */
+  src: url('/static/icon/iconfont.ttf?t=1678976128744') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-tuichu:before {
+  content: "\e62c";
+}
+
+.icon-qingchu:before {
+  content: "\e8b4";
+}
+
+.icon-wenti-:before {
+  content: "\e631";
+}
+
+.icon-chilun:before {
+  content: "\e61f";
+}
+
+.icon-zhifeiji:before {
+  content: "\e661";
+}
+
+.icon-wodeshoucang:before {
+  content: "\e6c4";
+}
+
+.icon-gengduo:before {
+  content: "\e617";
+}
+
+.icon-hot:before {
+  content: "\e758";
+}
+
+.icon-fenxiang:before {
+  content: "\e724";
+}
+
+.icon-fenxiang1:before {
+  content: "\e636";
+}
+
+.icon-weishoucang:before {
+  content: "\e63a";
+}
+
+.icon-weixihuan:before {
+  content: "\e63b";
+}
+
+.icon-yishoucang:before {
+  content: "\e63c";
+}
+
+.icon-yixihuan:before {
+  content: "\e641";
+}
+
+.icon-xiazai:before {
+  content: "\e647";
+}
+
+.icon-shoucang:before {
+  content: "\e8b9";
+}
+
+.icon-tupian:before {
+  content: "\e8ba";
+}
+
+.icon-xihuan:before {
+  content: "\e63d";
+}
+
+.icon-wode:before {
+  content: "\e620";
+}
+
+.icon-shouye:before {
+  content: "\e664";
+}
+
+.icon-fenlei:before {
+  content: "\e67b";
+}
+
+.icon-yishu:before {
+  content: "\e6ad";
+}
+

uni.scss

@@ -1 +1,61 @@
 @import '@/uni_modules/uni-scss/variables.scss';
+//主色
+$uni-primary: #1a94bc;
+$uni-primary-disable:mix(#fff,$uni-primary,50%);
+$uni-primary-light: mix(#fff,$uni-primary,80%);
+
+// 辅助色
+// 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。
+$uni-success: #18bc37;
+$uni-success-disable:mix(#fff,$uni-success,50%);
+$uni-success-light: mix(#fff,$uni-success,80%);
+
+$uni-warning: #f3a73f;
+$uni-warning-disable:mix(#fff,$uni-warning,50%);
+$uni-warning-light: mix(#fff,$uni-warning,80%);
+
+$uni-error: #e43d33;
+$uni-error-disable:mix(#fff,$uni-error,50%);
+$uni-error-light: mix(#fff,$uni-error,80%);
+
+$uni-info: #8f939c;
+$uni-info-disable:mix(#fff,$uni-info,50%);
+$uni-info-light: mix(#fff,$uni-info,80%);
+
+// 中性色
+// 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。
+$uni-main-color: #3a3a3a; 			// 主要文字
+$uni-base-color: #6a6a6a;			// 常规文字
+$uni-secondary-color: #909399;	// 次要文字
+$uni-extra-color: #c7c7c7;			// 辅助说明
+
+$uni-btn-text-color: #494951;
+
+// 边框颜色
+$uni-border-1: #F0F0F0;
+$uni-border-2: #EDEDED;
+$uni-border-3: #DCDCDC;
+$uni-border-4: #B9B9B9;
+
+// 常规色
+$uni-black: #000000;
+$uni-white: #ffffff;
+$uni-transparent: rgba($color: #000000, $alpha: 0);
+$uni-title-text: #262626;
+
+// 背景色
+$uni-bg-color: #f8f8f8;
+$uni-bg-base-color: #CBCBCB;
+
+/* 水平间距 */
+$uni-spacing-sm: 8px;
+$uni-spacing-base: 15px;
+$uni-spacing-lg: 30px;
+
+// 阴影
+$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5);
+$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2);
+$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5);
+
+// 蒙版
+$uni-mask: rgba($color: #000000, $alpha: 0.4);

utils/request.js

@@ -44,6 +44,9 @@ service.interceptors.response.use(res => {
 	// 	return Promise.reject(res.data.msg);
 	// }
 }, error => {
+	/*if(error.response.status === 403){
+		// refreshToken() 刷新token并重置token
+	}*/
 	return Promise.reject(error)
 })
 

yarn.lock

@@ -2,88 +2,88 @@
 # yarn lockfile v1
 
 
-"@vue/devtools-api@^6.0.0-beta.11", "@vue/devtools-api@^6.1.4":
-  version "6.4.2"
-  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.4.2.tgz#faf303a70cd9f8662896d663a195df41a8af1e53"
-  integrity sha512-6hNZ23h1M2Llky+SIAmVhL7s6BjLtZBCzjIz9iRSBUsysjE7kC39ulW0dH4o/eZtycmSt4qEr6RDVGTIuWu+ow==
+"@vue/devtools-api@^6.0.0", "@vue/devtools-api@^6.0.0-beta.11":
+  "integrity" "sha512-IiA0SvDrJEgXvVxjNkHPFfDx6SXw0b/TUkqMcDZWNg9fnCAHbTpoo59YfJ9QLFkwa3raau5vSlRVzMSLDnfdtQ=="
+  "resolved" "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.1.4.tgz"
+  "version" "6.1.4"
 
-axios@^0.26.1:
-  version "0.26.1"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-0.26.1.tgz#1ede41c51fcf51bbbd6fd43669caaa4f0495aaa9"
-  integrity sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==
+"axios@^0.26.1":
+  "integrity" "sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA=="
+  "resolved" "https://registry.npmmirror.com/axios/-/axios-0.26.1.tgz"
+  "version" "0.26.1"
   dependencies:
-    follow-redirects "^1.14.8"
+    "follow-redirects" "^1.14.8"
 
-call-bind@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.2.tgz#b1d4e89e688119c3c9a903ad30abb2f6a919be3c"
-  integrity sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==
+"call-bind@^1.0.0":
+  "integrity" "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA=="
+  "resolved" "https://registry.npmmirror.com/call-bind/-/call-bind-1.0.2.tgz"
+  "version" "1.0.2"
   dependencies:
-    function-bind "^1.1.1"
-    get-intrinsic "^1.0.2"
+    "function-bind" "^1.1.1"
+    "get-intrinsic" "^1.0.2"
 
-follow-redirects@^1.14.8:
-  version "1.15.2"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13"
-  integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
+"follow-redirects@^1.14.8":
+  "integrity" "sha512-aExlJShTV4qOUOL7yF1U5tvLCB0xQuudbf6toyYA0E/acBNw71mvjFTnLaRp50aQaYocMR0a/RMMBIHeZnGyjQ=="
+  "resolved" "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.0.tgz"
+  "version" "1.15.0"
 
-function-bind@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
-  integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
+"function-bind@^1.1.1":
+  "integrity" "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+  "resolved" "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.1.tgz"
+  "version" "1.1.1"
 
-get-intrinsic@^1.0.2:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.1.3.tgz#063c84329ad93e83893c7f4f243ef63ffa351385"
-  integrity sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A==
+"get-intrinsic@^1.0.2":
+  "integrity" "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q=="
+  "resolved" "https://registry.npmmirror.com/get-intrinsic/-/get-intrinsic-1.1.1.tgz"
+  "version" "1.1.1"
   dependencies:
-    function-bind "^1.1.1"
-    has "^1.0.3"
-    has-symbols "^1.0.3"
+    "function-bind" "^1.1.1"
+    "has" "^1.0.3"
+    "has-symbols" "^1.0.1"
 
-has-symbols@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.3.tgz#bb7b2c4349251dce87b125f7bdf874aa7c8b39f8"
-  integrity sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==
+"has-symbols@^1.0.1":
+  "integrity" "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A=="
+  "resolved" "https://registry.npmmirror.com/has-symbols/-/has-symbols-1.0.3.tgz"
+  "version" "1.0.3"
 
-has@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
-  integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
+"has@^1.0.3":
+  "integrity" "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw=="
+  "resolved" "https://registry.npmmirror.com/has/-/has-1.0.3.tgz"
+  "version" "1.0.3"
   dependencies:
-    function-bind "^1.1.1"
+    "function-bind" "^1.1.1"
 
-object-inspect@^1.9.0:
-  version "1.12.2"
-  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.2.tgz#c0641f26394532f28ab8d796ab954e43c009a8ea"
-  integrity sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==
+"object-inspect@^1.9.0":
+  "integrity" "sha512-Ho2z80bVIvJloH+YzRmpZVQe87+qASmBUKZDWgx9cu+KDrX2ZDH/3tMy+gXbZETVGs2M8YdxObOh7XAtim9Y0g=="
+  "resolved" "https://registry.npmmirror.com/object-inspect/-/object-inspect-1.12.0.tgz"
+  "version" "1.12.0"
 
-qs@^6.10.3:
-  version "6.11.0"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.11.0.tgz#fd0d963446f7a65e1367e01abd85429453f0c37a"
-  integrity sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==
+"qs@^6.10.3":
+  "integrity" "sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ=="
+  "resolved" "https://registry.npmmirror.com/qs/-/qs-6.10.3.tgz"
+  "version" "6.10.3"
   dependencies:
-    side-channel "^1.0.4"
+    "side-channel" "^1.0.4"
 
-side-channel@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"
-  integrity sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==
+"side-channel@^1.0.4":
+  "integrity" "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw=="
+  "resolved" "https://registry.npmmirror.com/side-channel/-/side-channel-1.0.4.tgz"
+  "version" "1.0.4"
   dependencies:
-    call-bind "^1.0.0"
-    get-intrinsic "^1.0.2"
-    object-inspect "^1.9.0"
+    "call-bind" "^1.0.0"
+    "get-intrinsic" "^1.0.2"
+    "object-inspect" "^1.9.0"
 
-vue-router@^4.0.14:
-  version "4.1.5"
-  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.1.5.tgz#256f597e3f5a281a23352a6193aa6e342c8d9f9a"
-  integrity sha512-IsvoF5D2GQ/EGTs/Th4NQms9gd2NSqV+yylxIyp/OYp8xOwxmU8Kj/74E9DTSYAyH5LX7idVUngN3JSj1X4xcQ==
+"vue-router@^4.0.14":
+  "integrity" "sha512-xa+pIN9ZqORdIW1MkN2+d9Ui2pCM1b/UMgwYUCZOiFYHAvz/slKKBDha8DLrh5aCG/RibtrpyhKjKOZ85tYyWg=="
+  "resolved" "https://registry.npmmirror.com/vue-router/-/vue-router-4.0.15.tgz"
+  "version" "4.0.15"
   dependencies:
-    "@vue/devtools-api" "^6.1.4"
+    "@vue/devtools-api" "^6.0.0"
 
-vuex@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/vuex/-/vuex-4.0.2.tgz#f896dbd5bf2a0e963f00c67e9b610de749ccacc9"
-  integrity sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==
+"vuex@^4.0.2":
+  "integrity" "sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q=="
+  "resolved" "https://registry.npmmirror.com/vuex/-/vuex-4.0.2.tgz"
+  "version" "4.0.2"
   dependencies:
     "@vue/devtools-api" "^6.0.0-beta.11"