达人动态列表页，达人动态组件，开发中~

王强
1 parent 1322b93e
Showing 8 changed files with 425 additions and 2 deletions
src/components/darenListCom/darenListCom.less
src/components/darenListCom/darenListCom.vue
src/components/horizList/horizList.vue
src/components/userAvatarBox/userAvatarBox.less
src/components/userAvatarBox/userAvatarBox.vue
src/pages/darenList/darenList.less
src/pages/darenList/darenList.vue
src/router/index.js
+@charset "UTF-8";
+
+.daren-list-box {
+	.daren-list-com {
+		
+	}
+}
+<template>
+    <div class="daren-list-com">
+
+		<!-- 标题slot -->
+		<slot name="title-box"></slot>
+
+		<div class="box">
+			<div class="top-box">
+				
+				<!-- 用户头像/昵称 -->
+				<user-avatar class="top-left" @jump="userJump"
+					>
+				</user-avatar>
+
+				<!-- 发布时间 -->
+				<div class="top-right">
+
+				</div>
+			</div>
+
+			<!-- 动态简介 -->
+			<div class="intro"></div>
+
+			<!-- 中间图片部分 -->
+			<div class="center-box">
+				
+				<!-- 达人图片展示（单独组建处理，宫格形式） -->
+
+
+
+
+
+			</div>
+
+			<!-- 底部部分 -->
+			<div class="bottom-box">
+				
+				<!-- 附加信息slot -->
+				<slot name="Add-info"></slot>
+
+				<!-- 商品标签组建 -->
+
+
+
+
+
+
+				<!-- 评论/点赞/查看按钮 -->
+				<div class="comment-like-view-box">
+					<div class="left">
+
+
+
+
+
+					</div>
+					<div class="right">
+
+					</div>
+				</div>
+			</div>
+
+		</div>
+    </div>
+</template>
+
+<script>
+
+	// 引入组件
+	import userAvatar from "@/components/userAvatarBox/userAvatarBox";
+
+
+
+
+    export default {
+		name: "darenListCom",
+        data() {
+            return {
+
+            }
+        },
+		props: ["lists"],
+		components: {
+			userAvatar,
+
+
+
+
+
+        },
+		methods: {
+
+			/**
+			 * 点击跳转
+			 * @param {object} item [数据对象]
+			 */
+			jump(item) {
+				this.$emit("jump", item);
+			},
+
+			/**
+			 * 用户头像/昵称，点击跳转
+			 * @param {object} item [数据对象]
+			 */
+			userJump(item) {
+				this.$emit("userJump", item);
+			}
+		}
+    }
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style rel="stylesheet/less" lang="less" scoped>
+    @import './darenListCom';
+</style>
@@ -54,13 +54,16 @@
 </template>
 <script>
+
 	// 引入组件
 	import goodsItem1 from "@/components/goodsItem_1/goodsItem_1";
 	import goodsItem2 from "@/components/goodsItem_2/goodsItem_2";
 	import goodsItem3 from "@/components/goodsItem_3/goodsItem_3";
-    import swiperItem from "@/components/swiperItem/swiperItem";
+	import swiperItem from "@/components/swiperItem/swiperItem";
+	
     export default {
-        data: function () {
+		name: "horizList",
+        data() {
             return {
                 basicWidth: 100,
 				scrollItemBox: 100
+@charset "UTF-8";
+
+.user-avatar-box {
+	display: inline-block;
+	background-color: transparent;
+	width: 100%;
+	height: auto;
+	.box {
+		position: relative;
+		display: flex;
+		justify-content: flex-start;
+		align-items: center;
+		width: auto;
+		height: 100%;
+		.avatar-box {
+			width: 100px;
+			height: 100px;
+			.avatar-img {
+				display: block;
+				width: 100px;
+				height: 100px;
+			}
+		}
+		.nickname {
+			margin-left: 20px;
+			color: #333333;
+			font-size: 28px;
+		}
+	}
+}
+<template>
+    <div class="user-avatar-box" v-if="users" @click="jump(users)">
+		<div class="box">
+			<div class="avatar-box">
+				<img v-lazy="users.avatar" class="avatar-img" />
+			</div>
+			<div class="nickname">
+				{{users.nickname}}
+			</div>
+		</div>
+    </div>
+</template>f
+
+<script>
+    export default {
+        data: function () {
+            return {
+                
+            }
+        },
+        props: ["users"],
+		methods: {
+			
+			/**
+			 * 点击跳转事件绑定
+			 */
+			jump(item) {
+				this.$emit("jump", item);
+			}
+		}
+    }
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style rel="stylesheet/less" lang="less">
+    @import './userAvatarBox';
+</style>
 \ No newline at end of file
+@charset "UTF-8";
+
+.daren-list-com {
+    .title-box + .box {
+		margin-top: 30px;
+    }
+    > .box {
+        
+    }
+}
 \ No newline at end of file
+<template>
+    <div class="daren-list-box">
+
+        <!-- 达人动态列表 -->
+        <daren-list-com class="daren-list-com" @userJump="userJump" @jump="jump"
+            :lists="{}">
+
+            <!-- 最新动态标题 -->
+            <text-title-box slot="title-box"
+                :titles="{
+                    title: '最新动态',
+                    more: true
+                }">
+            </text-title-box>
+        </daren-list-com>
+
+
+
+
+
+
+
+
+    </div>
+</template>
+
+<script>
+
+    // 引入组件
+    import { Toast, Indicator } from "mint-ui";
+	import darenListCom from "@/components/darenListCom/darenListCom";
+	import textTitleBox from "@/components/textTitleBox/textTitleBox";
+	
+    
+
+    export default {
+        name: "darenList",
+        data() {
+            return {
+                title: "",              // 标题
+                
+
+
+
+            }
+        },
+        components:{
+            darenListCom,
+            textTitleBox,
+
+
+
+
+
+        },
+        created() {
+
+            // 获取优选库精选活动
+            // this.activityAd();
+        },
+        methods: {
+
+            // 下拉刷新
+            // onRefresh() {
+
+            //     // 下拉刷新中
+            //     this.$set(this, "isLoading", true);
+
+            //     // 获取优选库精选活动
+            //     this.activityAd();
+            // },
+
+            /**
+             * 获取优选库精选活动
+             */
+            activityAd() {
+                // 加载中提示
+                Indicator.open("加载中...");
+
+                // 获取证书请求接口
+                this.http("/Api/" + this.getApiVersion().index + "/activityAd", {
+                        id: this.$route.query.id
+                    }, this.activityAdCallback, {
+                        method: "post"
+                    }
+                );
+            },
+
+            /**
+             * 获取优选库精选活动回调
+             * @param {object} res [服务器返回数据]
+             * @param {object} ext [扩展参数]
+             */
+            activityAdCallback(res, ext) {
+
+                // 加载完成
+                Indicator.close();
+
+                // 下拉刷新结束
+                this.$set(this, "isLoading", false);
+
+                // 返回处理
+                if (res.code == 200) {
+
+                    // 解构数据
+                    let { data: datas } = res;
+
+                    /* 获取优选库精选活动数据 开始 */
+
+                    // 设置标题
+                    this.$set(this, "title", datas.title);
+
+                    // 设置banner数据
+                    if (datas.banner && datas.banner.length) {
+                        this.$set(this, "banner", datas.banner);
+                    }
+
+                    // 设置navs数据
+                    if (datas.navs && datas.navs.length) {
+                        this.$set(this, "navs", datas.navs);
+                    }
+
+                    // 设置ads数据
+                    if (datas.ads && datas.ads.length) {
+                        this.$set(this, "ads", datas.ads);
+                    }
+
+                    /* 获取优选库精选活动数据 结束 */
+
+                } else if (res.code == 400) {
+
+                    // 获取优选库精选活动失败
+                    Toast(res.message);
+                } else {
+
+                    // 获取优选库精选活动失败
+                    Toast("获取优选库精选活动失败");
+                }
+            },
+
+            /**
+             * 调用通用跳转
+             * @param {object} item [通用跳转对象]
+             */
+            toDetail(item) {
+
+                // 判断是否有通用跳转函数
+                if (typeof this.$parent.gotoDetail === "function") {
+
+                    // 调用通用跳转
+                    this.$parent.gotoDetail(item);
+                }
+            },
+
+            /**
+             * 跳转达人动态详情
+             * @param {object} item [数据对象]
+             */
+            jump(item) {
+
+
+                console.log("jump", item);
+
+
+                // 判断并调用通用跳转
+                if (typeof this.$parent.gotoDetail === "function") {
+                    this.$parent.gotoDetail(item);
+                }
+            },
+
+			/**
+			 * 用户头像/昵称，点击跳转
+			 * @param {object} item [数据对象]
+			 */
+			userJump(item) {
+                
+                
+
+                console.log("userJump", item);
+                
+
+
+
+			}
+        },
+        head: {
+            title () {
+                return {
+                    inner: this.title
+                }
+            }
+        },
+        watch: {
+
+            // 设置页面标题
+            title(newVal) {
+                if (this.$store.state.browser.toLowerCase() == "qq" && this.$store.state.deviceType.toLowerCase() == "iphone") {
+                    this.$iFrame.insertIFrame(newVal);
+                } else {
+                    this.$emit("updateHead");
+                }
+            }
+        }
+    }
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style rel="stylesheet/less" lang="less" scoped>
+    @import "darenList";
+</style>
@@ -81,6 +81,17 @@ const router = new Router({
                     meta: {
                         requireAuth: false
                     }
+                },
+                {
+                    // 优选库环球优物更多列表页
+                    path: "/darenList",
+                    name: "darenList",
+                    component: resolve => {
+                        require(["@/pages/darenList/darenList"], resolve);
+                    },
+                    meta: {
+                        requireAuth: false
+                    }
                 }
             ]
         },