切换身份

components/account_change/accountChangePanel.vue

@@ -1,125 +0,0 @@
-<template>
-    <div class="account-change-panel-container">
-        <div class="account-change-title">选择您的角色</div>
-        <div class="account-change-main">
-            <div class="account-change-item">
-                <div class="account-change-img">
-                    <img src="https://iph.href.lu/100x100?fg=666666&bg=cccccc" />
-                </div>
-                <div class="account-change-tips">
-                    我是需求方
-                </div>
-                <div class="account-change-cur"></div>
-            </div>
-
-            <div class="account-change-item">
-                <div class="account-change-img">
-                    <img src="https://iph.href.lu/100x100?fg=666666&bg=cccccc" />
-                </div>
-                <div class="account-change-tips">
-                    我是开发者
-                </div>
-                <div class="account-change-cur"></div>
-            </div>
-        </div>
-        <div @click="submit" class="account-change-submit">确认3选择</div>
-    </div>
-</template>
-
-<script>
-export default {
-    data(){
-        return {
-            accountType:"",
-
-        }
-    },
-    computed:{
-        myInfo() {
-            return this.$store.state.userinfo;
-        },
-    },
-    mounted() {
-
-    },
-    methods: {
-        submit(){
-            alert(234)
-            let userinfo = this.$store.state.userinfo
-            console.log(userinfo)
-        }
-    },
-}
-</script>
-
-
-<style lang="scss">
-.account-change-panel-container{
-    width: 880px;
-    height: 600px;
-    background: #FFFFFF;
-    border-radius: 8px;
-}
-.account-change-title{
-    margin-top: 40px;
-    margin-bottom: 50px;
-    text-align: center;
-    font-size: 28px;
-    font-family: PingFangSC-Medium, PingFang SC;
-    font-weight: 500;
-    color: #0B121A;
-    line-height: 40px
-}
-.account-change-main{
-    margin-left:58px;
-    margin-right: 58px;
-    overflow: hidden;
-    display: flex;
-    justify-content:space-between;
-}
-
-.account-change-item{
-    width: 360px;
-    height: 300px;
-    background: #FFFFFF;
-    border-radius: 16px;
-    border: 2px dotted #CED3D9;
-}
-
-.account-change-img{
-    margin:60px auto 0;
-    width:90px;
-    height:90px;
-    border-radius:100%;
-    overflow: hidden;
-    img{
-        width:90px;
-        height:90px;
-        border-radius:100%;
-    }
-}
-
-.account-change-tips{
-    margin-top: 24px;
-    font-size: 24px;
-    font-family: PingFangSC-Medium, PingFang SC;
-    font-weight: 500;
-    color: #0B121A;
-    line-height: 33px
-    text-align: center
-}
-
-.account-change-submit{
-    margin:58px auto 0 ;
-    width: 140px;
-    height: 48px;
-    border-radius: 24px;
-    border: 1px solid #4A5D74;
-    line-height: 48px;
-    text-align: center;
-
-    font-size: 18px;
-    font-weight: 500;
-    color: #4B5D73
-}
-</style>

components/header.vue

@@ -333,7 +333,7 @@
           <a
             class="account-change"
             style="margin-left: 20px;margin-right:40px"
-            :href="baseUrl + '/index/app'"
+            :href="baseUrl + '/frontend/accountchange'"
             >切换身份</a
           >
 

pages/frontend/account/change.vue

@@ -4,27 +4,27 @@
     <div class="account-change-panel-container" v-if="!mobile">
         <div class="account-change-title">选择您的角色</div>
         <div class="account-change-main">
-            <div class="account-change-item">
+            <div class="account-change-item" @click="changeType(1)" :class="isCompany? 'cur':''">
                 <div class="account-change-img">
-                    <img src="https://iph.href.lu/100x100?fg=666666&bg=cccccc" />
+                    <img :src=" isCompany ?userInfo.icon_url: companyIcon " />
                 </div>
                 <div class="account-change-tips">
                     我是需求方
                 </div>
-                <div class="account-change-cur"></div>
+                <div v-if="isCompany" class="account-change-cur"></div>
             </div>
 
-            <div class="account-change-item">
+            <div class="account-change-item" @click="changeType(2)" :class="isPersonal? 'cur':''">
                 <div class="account-change-img">
-                    <img src="https://iph.href.lu/100x100?fg=666666&bg=cccccc" />
+                    <img :src="isPersonal ?userInfo.icon_url:personalIcon" />
                 </div>
                 <div class="account-change-tips">
                     我是开发者
                 </div>
-                <div class="account-change-cur"></div>
+                <div v-if="isPersonal" class="account-change-cur"></div>
             </div>
         </div>
-        <div class="account-change-submit">确认选择</div>
+        <div @click="submit" class="account-change-submit">确认选择</div>
     </div>
 </div>
 </template>
@@ -35,18 +35,20 @@ import {
 } from "vuex"
 import DealSeoList from "@/components/learn/dealSeoList"
 import qs from "qs"
-
+import companyIcon from "@/assets/img/account/company.png"
+import personalIcon from "@/assets/img/account/personal.png"
 export default {
     name: 'SeoLearnList',
     data() {
         return {
             baseUrl: '',
+            mobile: false,
             // firstLoad: true,
             isWeixinApp: true,
-            categoryExpanded: true, // 更多按钮不要，默认为展开状态
-            showCategoryDrawer: false,
-            currentDrawerCategoryId: 0,
-            currentDrawerCategoryIndex: 0
+            personalIcon,
+            companyIcon,
+
+            home_page_type: ""
         }
     },
     head() {
@@ -97,194 +99,60 @@ export default {
             } else {
                 return '20px !important'
             }
+        },
+        userInfo() {
+            return this.$store.state.userinfo
+        },
+        isCompany() {
+            return this.home_page_type == 1
+        },
+        isPersonal() {
+            return this.home_page_type == 2
         }
     },
-    async asyncData({
-        ...params
-    }) {
-        let dealDataObj = new DealSeoList(params)
-        let ans = await dealDataObj.dealData()
 
-        return {
-            ...ans
-        }
-    },
     mounted() {
+        this.home_page_type = this.userInfo.home_page_type
+        //  console.log(444,)
         this.baseUrl = this.$store.state.domainConfig.siteUrl
         this.isWeixinApp = navigator.userAgent.indexOf("miniProgram") > -1
     },
     methods: {
-        /** 分页获取技能列表数据 */
-        _getLearnList() {
-            const self = this
-            const data = {
-                type: 1,
-                page: this.pagination.page,
-                page_size: this.pagination.pagesize,
-                cate_id: this.pagination.selectedCateIdTwo,
-                status: 2,
-                owner_type: 1,
-                root_type: this.root_type
-            }
-
-            this.pagination.loading = true
-            this.pagination.noMore = false
-
-            this.$axios.$post('/api/sale/saleList', data).then(res => {
-                if (Number(res.status) === 1) {
-                    let learnList = res.data.list || []
-                    learnList.forEach((item) => {
-                        let imageList = item.image.split(',')
-                        item.coverImage = imageList[0] || ''
-                        imageList.splice(0, 1)
-                        item.imageList = imageList
-                    })
-
-                    if (self.mobile) {
-                        self.learnList = self.learnList.concat(learnList)
-                    } else {
-                        self.learnList = learnList
-                    }
-
-                    self.pagination.total = res.data.total
-                    self.pagination.pagesize = res.data.page_size || 9
-                    if (self.pagination.page * self.pagination.pagesize >= self.pagination.total) {
-                        console.log('noMore true', self.pagination)
-                        self.pagination.noMore = true
-                    } else {
-                        console.log('noMore false', self.pagination)
-                        self.pagination.noMore = false
-                    }
-                }
-            }).then(() => {
-                self.pagination.loading = false
-            })
-        },
-        /** 点击展开、收起 */
-        handleClickExpandCategory() {
-            this.categoryExpanded = !this.categoryExpanded
-        },
-        /** 点击一级分类时 */
-        handleClickCategoryOne(id) {
-            if (id === 0) {
-                // 点击全部时，移除筛选分类
-                this.pagination.selectedCateIdOne = id
-                this.pagination.selectedCateIdTwo = ''
-                this.currentDrawerCategoryId = ''
-                this.pagination.page = 1
-                this.learnList = []
-                window.scroll(0, 0)
-
-                this._getLearnList()
-                return
-            }
-            if (this.pagination.selectedCateIdOne !== id) {
-                this.pagination.selectedCateIdOne = id
-            }
-        },
-        /** 点击二级分类时：移动端 */
-        handleClickCategoryTwo(id) {
-            if (this.pagination.selectedCateIdTwo === id) {
-                this.pagination.selectedCateIdTwo = ''
-                this.currentDrawerCategoryId = ''
-            } else {
-                this.pagination.selectedCateIdTwo = id
-                this.currentDrawerCategoryId = id
-            }
-            this.pagination.page = 1
-            this.learnList = []
-            window.scroll(0, 0)
-
-            this._getLearnList()
+        changeType(e) {
+            console.log(e)
+            this.home_page_type = e
         },
-        /** 分页页码改变时 */
-        handlePageChange(val) {
-            let query = {
-                page: val
-            }
-            if (this.root_type && Number(this.root_type) > 0) {
-                query.root_type = this.root_type
-            }
-            window.location.href = `${window.location.origin}${window.location.pathname}?${qs.stringify(query)}`
-        },
-        /** mobile 加载更多 */
-        handleLoadMoreSkill() {
-            if (this.pagination.loading) {
-                return
+        async submit() {
+            
+            let home_page_type  = this.userInfo.home_page_type
+            if(home_page_type != this.home_page_type){
+                let res = await this.$axios.$post("/api/user/update_info", {
+                    home_page_type: this.home_page_type
+                });
+
+                if(Number(res.status) !== 1){
+                    this.$message.error(res.info);
+                }
             }
 
-            this.pagination.page++
-            this._getLearnList()
-        },
-        /** 点击筛选时 */
-        handleShowCategoryDrawer() {
-            this.showCategoryDrawer = true
-        },
-        /**
-         * 点击 mobile 分类 drawer 一级分类
-         */
-        handleClickDrawerCategoryOne(id) {
-            if (id === 0) {
-                this.showCategoryDrawer = false
-                return
-            }
-            if (id !== this.currentDrawerCategoryIndex) {
-                this.currentDrawerCategoryIndex = id
-            }
-        },
-        /**
-         * 点击 mobile 分类 drawer 二级分类
-         */
-        handleClickDrawerCategoryTwo(id) {
-            if (this.currentDrawerCategoryId === id) {
-                this.pagination.selectedCateIdTwo = ''
-            } else {
-                this.pagination.selectedCateIdTwo = id
-            }
-            this.currentDrawerCategoryId = id
-            this.showCategoryDrawer = false
-            this.pagination.page = 1
-            this.learnList = []
-            window.scroll(0, 0)
+            // TODO:跳转对应的首页
 
-            this._getLearnList()
-        },
-        /**
-         * 点击 mobile 的一项技能时
-         */
-        handleClickSkillItem(saleId) {
-            if (this.deviceType.android || this.deviceType.ios) {
-                // 端跳转
-                let jumpUrl = `${this.baseUrl}/l/${saleId}`
-                location.href = `proginn://webview?url=${jumpUrl}`
-            } else {
-                // web 跳转
-                location.href = `/l/${saleId}`
-            }
-        },
-        /**
-         * 点击成为讲师
-         */
-        handleClickAdd() {
-            location.href = '/workbench/skill/index'
+            location.href = "/"
         }
     }
 }
 </script>
 
-<style lang="scss" scoped>
-// @import "@/assets/css/learn/list.scss";
-</style>
 <style lang="scss">
-
-.account-change-panel-container{
+.account-change-panel-container {
     width: 880px;
     height: 600px;
     background: #FFFFFF;
     border-radius: 8px;
     overflow: hidden;
 }
-.account-change-title{
+
+.account-change-title {
     margin-top: 40px;
     margin-bottom: 50px;
     text-align: center;
@@ -294,37 +162,43 @@ export default {
     color: #0B121A;
     line-height: 40px
 }
-.account-change-main{
-    margin-left:58px;
+
+.account-change-main {
+    margin-left: 58px;
     margin-right: 58px;
     overflow: hidden;
     display: flex;
-    justify-content:space-between;
+    justify-content: space-between;
 }
 
-.account-change-item{
+.account-change-item {
     width: 360px;
     height: 300px;
     background: #FFFFFF;
     border-radius: 16px;
     border: 2px dotted #CED3D9;
     cursor: pointer;
+
+    &.cur {
+        border: 2px solid #308EFF;
+    }
 }
 
-.account-change-img{
-    margin:60px auto 0;
-    width:90px;
-    height:90px;
-    border-radius:100%;
+.account-change-img {
+    margin: 60px auto 0;
+    width: 90px;
+    height: 90px;
+    border-radius: 100%;
     overflow: hidden;
-    img{
-        width:90px;
-        height:90px;
-        border-radius:100%;
+
+    img {
+        width: 90px;
+        height: 90px;
+        border-radius: 100%;
     }
 }
 
-.account-change-tips{
+.account-change-tips {
     margin-top: 24px;
     font-size: 24px;
     font-family: PingFangSC-Medium, PingFang SC;
@@ -334,8 +208,8 @@ export default {
     text-align: center
 }
 
-.account-change-submit{
-    margin:58px auto 0 ;
+.account-change-submit {
+    margin: 58px auto 0;
     width: 140px;
     height: 48px;
     border-radius: 24px;
@@ -348,4 +222,12 @@ export default {
     color: #4B5D73;
     cursor: pointer;
 }
+
+.account-change-cur {
+    margin: 15px auto 0;
+    width: 34px;
+    height: 34px;
+    background: url("~@/assets/img/account/cur.png") no-repeat 50% 50%;
+    background-size: 100% auto;
+}
 </style>