proginn-frontend/pages/frontend/account/change.vue

<template>
<div :class="mobile ? 'mobileMain' : ''" :style="{marginTop: mainMarginTop, marginBottom: mobile ? '0px' : '30px !important'}">

    <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" @click="changeType(1)" :class="isCompany? 'cur':''">
                <div class="account-change-img">
                    <img :src=" isCompany ?userInfo.icon_url: companyIcon " />
                </div>
                <div class="account-change-tips">
                    我是需求方
                </div>
                <div v-if="isCompany" class="account-change-cur"></div>
            </div>

            <div class="account-change-item" @click="changeType(2)" :class="isPersonal? 'cur':''">
                <div class="account-change-img">
                    <img :src="isPersonal ?userInfo.icon_url:personalIcon" />
                </div>
                <div class="account-change-tips">
                    我是开发者
                </div>
                <div v-if="isPersonal" class="account-change-cur"></div>
            </div>
        </div>
        <div @click="submit" class="account-change-submit">确认选择</div>
    </div>
</div>
</template>

<script>
import {
    mapState
} 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,
            personalIcon,
            companyIcon,

            home_page_type: ""
        }
    },
    head() {
        const {
            title = "",
                keyword = "",
                description = "",
                h1 = "",
                canonical = "",
                metaLocation
        } = this.head || {}
        let obj = {
            title: title,
            meta: [{
                name: "keywords",
                content: keyword
            }, {
                name: "description",
                content: description
            }, {
                name: "h1",
                content: h1
            }],
            link: [{
                rel: "canonical",
                href: canonical
            }]
        }
        if (metaLocation) {
            obj.meta.push({
                name: "location",
                content: metaLocation
            })
        }
        return obj
    },
    computed: {
        ...mapState(["deviceType"]),
        showWxHeader() {
            return !this.deviceType.app && !this.isWeixinApp &&
                (this.deviceType.android || this.deviceType.ios)
        },
        mainMarginTop() {
            if (this.mobile && this.showWxHeader) {
                return '64px !important'
            } else if (this.mobile) {
                return '0px !important'
            } else {
                return '20px !important'
            }
        },
        userInfo() {
            return this.$store.state.userinfo
        },
        isCompany() {
            return this.home_page_type == 1
        },
        isPersonal() {
            return this.home_page_type == 2
        }
    },

    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: {
        changeType(e) {
            console.log(e)
            this.home_page_type = e
        },
        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);
                }
            }

            // TODO:跳转对应的首页

            location.href = "/"
        }
    }
}
</script>

<style lang="scss">
.account-change-panel-container {
    width: 880px;
    height: 600px;
    background: #FFFFFF;
    border-radius: 8px;
    overflow: hidden;
}

.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;
    cursor: pointer;

    &.cur {
        border: 2px solid #308EFF;
    }
}

.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;
    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>