hookehuyr

我的页面跳转方式和按钮样式调整

......@@ -17,3 +17,21 @@ export const styleObject3 = ref({
color: '#FFFFFF',
borderColor: '#F4675A'
})
export const styleObject4 = ref({
backgroundColor: '#FFFFFF',
color: '#713610',
borderColor: '#713610'
})
export const styleObject5 = ref({
backgroundColor: '#FFFFFF',
color: '#FDD347',
borderColor: '#FDD347'
})
export const styleObject6 = ref({
backgroundColor: '#FFFFFF',
color: '#777777',
borderColor: '#777777'
})
......
......@@ -31,12 +31,12 @@
<p>{{ userInfo.fans_num }}</p>
</van-col>
<van-col span="1" class="divide">|</van-col>
<van-col span="5" @click="getFollow">
<van-col span="5" @click="go('/me/followList')">
<p class="tap-color">关注</p>
<p>{{ userInfo.follow_num }}</p>
</van-col>
<van-col span="1" class="divide">|</van-col>
<van-col span="5" @click="getUnwatch">
<van-col span="5" @click="go('/me/unwatchList')">
<p class="tap-color">未看</p>
<p>
<van-tag round color="red">{{ userInfo.unplay_num }}</van-tag>
......@@ -48,19 +48,19 @@
<div class="van-hairline--bottom sub-handle">
<div>
<my-button v-if="userInfo.status === 'apply'" type="custom" :custom-style="styleObject1"
@on-click="goTo('/me/verifyUser')">实名认证</my-button>
<my-button v-else type="custom" :custom-style="styleObject3">已认证</my-button>
<my-button v-if="userInfo.status === 'apply'" type="custom" :custom-style="styleObject4"
@on-click="go('/me/verifyUser', { kg_id: userInfo.kg_id, kg_name: userInfo.kg_name })">实名认证</my-button>
<my-button v-else type="custom" :custom-style="styleObject5">已认证</my-button>
</div>
<div>
<my-button v-if="userInfo.status === 'enable'" type="custom" :custom-style="styleObject2"
<my-button v-if="userInfo.status === 'enable'" type="custom" :custom-style="styleObject1"
@on-click="handleUser('ADD')">新增儿童</my-button>
<my-button v-else type="custom" :custom-style="styleObject4" @on-click="showNotice = true">新增儿童</my-button>
<my-button v-else type="custom" :custom-style="styleObject6" @on-click="showNotice = true">新增儿童</my-button>
</div>
</div>
<template v-for="(item, key) in itemList" :key="key">
<div class="van-hairline--bottom item-list" @click="goTo(item.to)">
<div class="van-hairline--bottom item-list" @click="go(item.to, { kg_id: userInfo.kg_id, kg_name: userInfo.kg_name })">
<van-row>
<van-col span="12">{{ item.name }}</van-col>
<van-col span="12" style="text-align: right; color: #777777;">
......@@ -78,7 +78,7 @@
<van-action-sheet v-model:show="show" :actions="actions" @select="onSelect" />
<!-- 如果没有实名认证,新增儿童提示弹框 -->
<notice-overlay :show="showNotice" text="前往认证" @on-submit="onSubmit" @on-close="onClose">
<notice-overlay :show="showNotice" text="前往认证" @on-submit="go('/me/verifyUser')" @on-close="onClose">
<div style="color: #333333;">
<p>您还没有实名认证</p>
<p>请前往个人中心进行实名认证</p>
......@@ -94,7 +94,11 @@ import { MyButton, NoticeOverlay } from '@/utils/generateModules.js'
import { icon_avatar } from '@/utils/generateIcons.js'
import { changePerformerAPI, myInfoAPI, myPerformerAPI } from '@/api/C/me.js'
import meRoute from '@/router/routes/modules/me'
// 自定义按钮颜色样式
import { styleObject1, styleObject4, styleObject5, styleObject6 } from '@/settings/designSetting.js'
import { useGo } from '@/hooks/useGo'
const go = useGo();
const $router = useRouter();
// 删除 keep-alive 缓存
......@@ -150,28 +154,11 @@ const onSelect = async (item) => {
};
/********** 切换用户功能 END *************/
// 跳转相关页面
const goTo = (path) => {
$router.push({
path: path,
query: {
kg_id: userInfo.value.kg_id,
kg_name: userInfo.value.kg_name
}
})
}
// 未实名认证提示
const showNotice = ref(false)
const onClose = () => { // 关闭提示框回调
showNotice.value = false;
}
// 跳转个人中心
const onSubmit = () => {
$router.push({
path: '/me/verifyUser'
});
}
// 新增/编辑儿童信息
const handleUser = (type) => {
......@@ -200,56 +187,6 @@ const handleUser = (type) => {
}
}
// 自定义按钮颜色样式
const styleObject1 = reactive({
backgroundColor: '#FFFFFF',
color: '#713610',
borderColor: '#713610'
})
const styleObject2 = reactive({
backgroundColor: '#FFFFFF',
color: '#0B3A72',
borderColor: '#0B3A72'
})
const styleObject3 = reactive({
backgroundColor: '#FFFFFF',
color: '#FDD347',
borderColor: '#FDD347'
})
const styleObject4 = reactive({
backgroundColor: '#FFFFFF',
color: '#777777',
borderColor: '#777777'
})
const getFollow = () => {
$router.push({
path: '/me/followList'
})
}
const getUnwatch = () => {
$router.push({
path: '/me/unwatchList'
})
}
</script>
<script>
import mixin from 'common/mixin';
export default {
mixins: [mixin.init],
data() {
return {
}
},
mounted() {
},
methods: {
}
}
</script>
<style lang="less" scoped>
......