|
|
@@ -0,0 +1,351 @@
|
|
|
+<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">
|
|
|
+ <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 class="account-change-submit">确认选择</div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {
|
|
|
+ mapState
|
|
|
+} from "vuex"
|
|
|
+import DealSeoList from "@/components/learn/dealSeoList"
|
|
|
+import qs from "qs"
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'SeoLearnList',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ baseUrl: '',
|
|
|
+ // firstLoad: true,
|
|
|
+ isWeixinApp: true,
|
|
|
+ categoryExpanded: true, // 更多按钮不要，默认为展开状态
|
|
|
+ showCategoryDrawer: false,
|
|
|
+ currentDrawerCategoryId: 0,
|
|
|
+ currentDrawerCategoryIndex: 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async asyncData({
|
|
|
+ ...params
|
|
|
+ }) {
|
|
|
+ let dealDataObj = new DealSeoList(params)
|
|
|
+ let ans = await dealDataObj.dealData()
|
|
|
+
|
|
|
+ return {
|
|
|
+ ...ans
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ 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()
|
|
|
+ },
|
|
|
+ /** 分页页码改变时 */
|
|
|
+ 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
|
|
|
+ }
|
|
|
+
|
|
|
+ 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)
|
|
|
+
|
|
|
+ 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'
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+// @import "@/assets/css/learn/list.scss";
|
|
|
+</style>
|
|
|
+<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;
|
|
|
+}
|
|
|
+
|
|
|
+.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;
|
|
|
+}
|
|
|
+</style>
|
ccf