components/list.vue

@@ -0,0 +1,76 @@
+<template>
+  <view class="list">
+    <uni-card padding="0" spacing="0" type="line">
+      <view v-if="!titleImg">
+        <template v-slot:title>
+          <uni-list>
+						<uni-list-item :title="name"/>
+					</uni-list>
+        </template>
+      </view>
+      <view v-if="titleImg">
+        <template v-slot:cover>
+          <view class="custom-cover">
+            <image class="cover-image" mode="aspectFill" :src="cover">
+            </image>
+            <view class="cover-content">
+              <text class="uni-subtitle uni-white">{{ name }}</text>
+            </view>
+          </view>
+        </template>
+      </view>
+      <uni-list>
+        <uni-list-item v-for="(item, index) in data" :key="index" :title="item.title" showArrow
+          @click="onClick"
+          :thumb="`${baseurl}${item.thumbnail}`"
+          thumb-size="lg" rightText="详情" />
+      </uni-list>
+    </uni-card>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    // 数据内容
+    data: { type: Array, default: () => [] },
+    name: { type: String, default: '默认title' },
+    // 是否启用图片卡片
+    titleImg: { type: Boolean, default: false },
+    // 图片地址
+    cover: { type: String, default: '' }
+  },
+  computed: {},
+  data() {
+    return {
+      baseurl: 'http://192.168.3.45:9002',
+    };
+  },
+  async mounted() {},
+  methods: {
+    async onClick(e) {
+      console.log(e);
+    }
+  },
+};
+</script>
+<style lang="scss" scoped>
+.cover-image {
+  width: 100%;
+  height: 150px;
+}
+.cover-content {
+  position: absolute;
+  top: 35%;
+  width: 100%;
+  background: #000;
+  opacity: 0.5;
+}
+.uni-subtitle {
+  line-height: 30px;
+  margin-left: 10px;
+}
+.list {
+  margin-top: 15px;
+}
+</style>

components/swiper-baner.vue

@@ -32,7 +32,6 @@ export default {
   methods: {
     ...mapActions(['imgQuery']),
     async itemClick(e) {
-      console.log(e, '123');
       let path;
       // 栏目
       if (e.type == 1) path = `/pages/list/index?column=${e.column}`;

main.js

@@ -6,11 +6,13 @@ import store from './store';
 // 引入自定义组件
 import NavBar from './components/nav-bar.vue'
 import baner from './components/swiper-baner.vue'
+import list from './components/list.vue'
 Vue.config.productionTip = false
 App.mpType = 'app'
 
 Vue.component('navbar', NavBar)
 Vue.component('baner', baner)
+Vue.component('list', list)
 const app = new Vue({
   store,
   ...App

pages/details/index.vue

@@ -6,12 +6,20 @@
 </template>
 
 <script>
+  import { mapActions, mapState } from 'vuex'
 	export default {
     onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
-      console.log(option.id); //打印出上个页面传递的参数。
+      this.id = option.id;
+      this.type = option.type;
+    },
+    computed: {
+      ...mapState(['details'])
     },
 		data() {
-			return {}
+			return {
+        id: '',
+        type: null,
+      }
 		},
 		methods: {
 

pages/index/index.vue

@@ -2,17 +2,28 @@
 	<view class="container">
     <navbar></navbar>
     <baner></baner>
-		<view class="intro">首页</view>
-		<text class="intro">详见：首页</text>
+	  <list :name="'期刊内容'" :data="contentList" :cover="cover" :titleImg="true"></list>
+    <list :name="'新闻内容'" :data="contentList"></list>
 	</view>
 </template>
 
 <script>
+  import { mapActions, mapState } from 'vuex'
 	export default {
 		data() {
-			return {}
+			return {
+        cover: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
+      }
 		},
-		methods: {}
+    computed: {
+      ...mapState(['contentList'])
+    },
+    async mounted() {
+      await this.contentQuery();
+    },
+		methods: {
+      ...mapActions(['contentQuery']),
+    }
 	}
 </script>
 

pages/list/index.vue

@@ -3,7 +3,7 @@
     <navbar></navbar>
     <uni-list>
       <uni-list-item v-for="(item, index) in contentList" :key="index" :title="item.title" :note="item.describe" showArrow
-        :thumb="`http://192.168.3.45:9002${item.thumbnail}`"
+        :thumb="`${baseurl}${item.thumbnail}`"
         thumb-size="lg" rightText="详情" />
     </uni-list>
 	</view>
@@ -13,7 +13,6 @@
   import { mapActions, mapState } from 'vuex'
 	export default {
     onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
-      console.log(option.column); // column 类型
       this.column = option.column;
     },
     computed: {
@@ -21,7 +20,8 @@
     },
 		data() {
 			return {
-        column: ''
+        column: '',
+        baseurl: 'http://192.168.3.45:9002',
       }
 		},
     async  mounted() {

store/index.js

@@ -10,28 +10,29 @@ const api = {
 
 const state = () => ({
   imgList: [],
-  contentList: []
+  contentList: [],
+  details: {}
 });
 
 const actions = {
   async imgQuery({ commit }) {
     const res = await $request.get(`${baseurl}${api.imgQuery}`);
-    commit('imgQuery', res[1].data);
+    commit('imgQuery', res[1]?.data);
     return res;
   },
   async contentQuery({ commit }, payload) {
     const res = await $request.get(`${baseurl}${api.contentQuery}`, payload);
-    commit('contentQuery', res[1].data);
+    commit('contentQuery', res[1]?.data);
     return res;
   },
 };
 
 const mutations = {
   imgQuery(state, payload) {
-    state.imgList = payload.data;
+    state.imgList = payload?.data;
   },
   contentQuery(state, payload) {
-    state.contentList = payload.data;
+    state.contentList = payload?.data;
   },
 };
 

unpackage/dist/dev/mp-weixin/app.json

@@ -63,7 +63,8 @@
   },
   "usingComponents": {
     "navbar": "/components/nav-bar",
-    "baner": "/components/swiper-baner"
+    "baner": "/components/swiper-baner",
+    "list": "/components/list"
   },
   "sitemapLocation": "sitemap.json"
 }

unpackage/dist/dev/mp-weixin/common/vendor.js

@@ -941,7 +941,7 @@ function initData(vueOptions, context) {
     try {
       data = data.call(context); // 支持 Vue.prototype 上挂的数据
     } catch (e) {
-      if (Object({"NODE_ENV":"development","VUE_APP_NAME":"magazine-web","VUE_APP_PLATFORM":"mp-weixin","BASE_URL":"/"}).VUE_APP_DEBUG) {
+      if (Object({"VUE_APP_NAME":"magazine-web","VUE_APP_PLATFORM":"mp-weixin","NODE_ENV":"development","BASE_URL":"/"}).VUE_APP_DEBUG) {
         console.warn('根据 Vue 的 data 函数初始化小程序 data 失败，请尽量确保 data 函数中不访问 vm 对象，否则可能影响首次数据渲染速度。', data);
       }
     }
@@ -2085,7 +2085,7 @@ uni$1;exports.default = _default;
 
 /***/ }),
 
-/***/ 106:
+/***/ 109:
 /*!***********************************************************************************************************!*\
   !*** C:/Users/10428/Desktop/框架源码/微前端/代码/magazine-web/uni_modules/uni-icons/components/uni-icons/icons.js ***!
   \***********************************************************************************************************/
@@ -3411,28 +3411,29 @@ var api = {
 
 var state = function state() {return {
     imgList: [],
-    contentList: [] };};
+    contentList: [],
+    details: {} };};
 
 
 var actions = {
-  imgQuery: function imgQuery(_ref) {return _asyncToGenerator( /*#__PURE__*/_regenerator.default.mark(function _callee() {var commit, res;return _regenerator.default.wrap(function _callee$(_context) {while (1) {switch (_context.prev = _context.next) {case 0:commit = _ref.commit;_context.next = 3;return (
+  imgQuery: function imgQuery(_ref) {return _asyncToGenerator( /*#__PURE__*/_regenerator.default.mark(function _callee() {var _res$;var commit, res;return _regenerator.default.wrap(function _callee$(_context) {while (1) {switch (_context.prev = _context.next) {case 0:commit = _ref.commit;_context.next = 3;return (
                 _request.default.get("".concat(baseurl).concat(api.imgQuery)));case 3:res = _context.sent;
-              commit('imgQuery', res[1].data);return _context.abrupt("return",
+              commit('imgQuery', (_res$ = res[1]) === null || _res$ === void 0 ? void 0 : _res$.data);return _context.abrupt("return",
               res);case 6:case "end":return _context.stop();}}}, _callee);}))();
   },
-  contentQuery: function contentQuery(_ref2, payload) {return _asyncToGenerator( /*#__PURE__*/_regenerator.default.mark(function _callee2() {var commit, res;return _regenerator.default.wrap(function _callee2$(_context2) {while (1) {switch (_context2.prev = _context2.next) {case 0:commit = _ref2.commit;_context2.next = 3;return (
+  contentQuery: function contentQuery(_ref2, payload) {return _asyncToGenerator( /*#__PURE__*/_regenerator.default.mark(function _callee2() {var _res$2;var commit, res;return _regenerator.default.wrap(function _callee2$(_context2) {while (1) {switch (_context2.prev = _context2.next) {case 0:commit = _ref2.commit;_context2.next = 3;return (
                 _request.default.get("".concat(baseurl).concat(api.contentQuery), payload));case 3:res = _context2.sent;
-              commit('contentQuery', res[1].data);return _context2.abrupt("return",
+              commit('contentQuery', (_res$2 = res[1]) === null || _res$2 === void 0 ? void 0 : _res$2.data);return _context2.abrupt("return",
               res);case 6:case "end":return _context2.stop();}}}, _callee2);}))();
   } };
 
 
 var mutations = {
   imgQuery: function imgQuery(state, payload) {
-    state.imgList = payload.data;
+    state.imgList = payload === null || payload === void 0 ? void 0 : payload.data;
   },
   contentQuery: function contentQuery(state, payload) {
-    state.contentList = payload.data;
+    state.contentList = payload === null || payload === void 0 ? void 0 : payload.data;
   } };var _default =
 
 
@@ -11105,7 +11106,7 @@ function type(obj) {
 
 function flushCallbacks$1(vm) {
     if (vm.__next_tick_callbacks && vm.__next_tick_callbacks.length) {
-        if (Object({"NODE_ENV":"development","VUE_APP_NAME":"magazine-web","VUE_APP_PLATFORM":"mp-weixin","BASE_URL":"/"}).VUE_APP_DEBUG) {
+        if (Object({"VUE_APP_NAME":"magazine-web","VUE_APP_PLATFORM":"mp-weixin","NODE_ENV":"development","BASE_URL":"/"}).VUE_APP_DEBUG) {
             var mpInstance = vm.$scope;
             console.log('[' + (+new Date) + '][' + (mpInstance.is || mpInstance.route) + '][' + vm._uid +
                 ']:flushCallbacks[' + vm.__next_tick_callbacks.length + ']');
@@ -11126,14 +11127,14 @@ function nextTick$1(vm, cb) {
     //1.nextTick 之前 已 setData 且 setData 还未回调完成
     //2.nextTick 之前存在 render watcher
     if (!vm.__next_tick_pending && !hasRenderWatcher(vm)) {
-        if(Object({"NODE_ENV":"development","VUE_APP_NAME":"magazine-web","VUE_APP_PLATFORM":"mp-weixin","BASE_URL":"/"}).VUE_APP_DEBUG){
+        if(Object({"VUE_APP_NAME":"magazine-web","VUE_APP_PLATFORM":"mp-weixin","NODE_ENV":"development","BASE_URL":"/"}).VUE_APP_DEBUG){
             var mpInstance = vm.$scope;
             console.log('[' + (+new Date) + '][' + (mpInstance.is || mpInstance.route) + '][' + vm._uid +
                 ']:nextVueTick');
         }
         return nextTick(cb, vm)
     }else{
-        if(Object({"NODE_ENV":"development","VUE_APP_NAME":"magazine-web","VUE_APP_PLATFORM":"mp-weixin","BASE_URL":"/"}).VUE_APP_DEBUG){
+        if(Object({"VUE_APP_NAME":"magazine-web","VUE_APP_PLATFORM":"mp-weixin","NODE_ENV":"development","BASE_URL":"/"}).VUE_APP_DEBUG){
             var mpInstance$1 = vm.$scope;
             console.log('[' + (+new Date) + '][' + (mpInstance$1.is || mpInstance$1.route) + '][' + vm._uid +
                 ']:nextMPTick');
@@ -11219,7 +11220,7 @@ var patch = function(oldVnode, vnode) {
     });
     var diffData = this.$shouldDiffData === false ? data : diff(data, mpData);
     if (Object.keys(diffData).length) {
-      if (Object({"NODE_ENV":"development","VUE_APP_NAME":"magazine-web","VUE_APP_PLATFORM":"mp-weixin","BASE_URL":"/"}).VUE_APP_DEBUG) {
+      if (Object({"VUE_APP_NAME":"magazine-web","VUE_APP_PLATFORM":"mp-weixin","NODE_ENV":"development","BASE_URL":"/"}).VUE_APP_DEBUG) {
         console.log('[' + (+new Date) + '][' + (mpInstance.is || mpInstance.route) + '][' + this._uid +
           ']差量更新',
           JSON.stringify(diffData));

unpackage/dist/dev/mp-weixin/components/list.json

@@ -0,0 +1,8 @@
+{
+  "usingComponents": {
+    "uni-card": "/uni_modules/uni-card/components/uni-card/uni-card",
+    "uni-list": "/uni_modules/uni-list/components/uni-list/uni-list",
+    "uni-list-item": "/uni_modules/uni-list/components/uni-list-item/uni-list-item"
+  },
+  "component": true
+}

unpackage/dist/dev/mp-weixin/components/list.wxss

@@ -0,0 +1,22 @@
+@charset "UTF-8";
+/* 水平间距 */
+/* 水平间距 */
+.cover-image.data-v-5ed3214e {
+  width: 100%;
+  height: 150px;
+}
+.cover-content.data-v-5ed3214e {
+  position: absolute;
+  top: 35%;
+  width: 100%;
+  background: #000;
+  opacity: 0.5;
+}
+.uni-subtitle.data-v-5ed3214e {
+  line-height: 30px;
+  margin-left: 10px;
+}
+.list.data-v-5ed3214e {
+  margin-top: 15px;
+}
+

unpackage/dist/dev/mp-weixin/pages/index/index.wxml

@@ -1 +1 @@
-<view class="container"><navbar vue-id="8dd740cc-1" bind:__l="__l"></navbar><baner vue-id="8dd740cc-2" bind:__l="__l"></baner><view class="intro">首页</view><text class="intro">详见：首页</text></view>
+<view class="container"><navbar vue-id="8dd740cc-1" bind:__l="__l"></navbar><baner vue-id="8dd740cc-2" bind:__l="__l"></baner><list vue-id="8dd740cc-3" name="期刊内容" data="{{contentList}}" cover="{{cover}}" titleImg="{{true}}" bind:__l="__l"></list><list vue-id="8dd740cc-4" name="新闻内容" data="{{contentList}}" bind:__l="__l"></list></view>

unpackage/dist/dev/mp-weixin/pages/index/index.wxss

@@ -1,28 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-/* .container {
-	font-size: 14px;
-	line-height: 24px;
-} */
-/* .searchInput {
-	width: 80%;
-	margin: 0 auto;
-} */
-

unpackage/dist/dev/mp-weixin/pages/list/index.wxss

@@ -1,2 +0,0 @@
-
-