hookehuyr

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

...@@ -17,3 +17,21 @@ export const styleObject3 = ref({ ...@@ -17,3 +17,21 @@ export const styleObject3 = ref({
17 color: '#FFFFFF', 17 color: '#FFFFFF',
18 borderColor: '#F4675A' 18 borderColor: '#F4675A'
19 }) 19 })
20 +
21 +export const styleObject4 = ref({
22 + backgroundColor: '#FFFFFF',
23 + color: '#713610',
24 + borderColor: '#713610'
25 +})
26 +
27 +export const styleObject5 = ref({
28 + backgroundColor: '#FFFFFF',
29 + color: '#FDD347',
30 + borderColor: '#FDD347'
31 +})
32 +
33 +export const styleObject6 = ref({
34 + backgroundColor: '#FFFFFF',
35 + color: '#777777',
36 + borderColor: '#777777'
37 +})
......
...@@ -31,12 +31,12 @@ ...@@ -31,12 +31,12 @@
31 <p>{{ userInfo.fans_num }}</p> 31 <p>{{ userInfo.fans_num }}</p>
32 </van-col> 32 </van-col>
33 <van-col span="1" class="divide">|</van-col> 33 <van-col span="1" class="divide">|</van-col>
34 - <van-col span="5" @click="getFollow"> 34 + <van-col span="5" @click="go('/me/followList')">
35 <p class="tap-color">关注</p> 35 <p class="tap-color">关注</p>
36 <p>{{ userInfo.follow_num }}</p> 36 <p>{{ userInfo.follow_num }}</p>
37 </van-col> 37 </van-col>
38 <van-col span="1" class="divide">|</van-col> 38 <van-col span="1" class="divide">|</van-col>
39 - <van-col span="5" @click="getUnwatch"> 39 + <van-col span="5" @click="go('/me/unwatchList')">
40 <p class="tap-color">未看</p> 40 <p class="tap-color">未看</p>
41 <p> 41 <p>
42 <van-tag round color="red">{{ userInfo.unplay_num }}</van-tag> 42 <van-tag round color="red">{{ userInfo.unplay_num }}</van-tag>
...@@ -48,19 +48,19 @@ ...@@ -48,19 +48,19 @@
48 48
49 <div class="van-hairline--bottom sub-handle"> 49 <div class="van-hairline--bottom sub-handle">
50 <div> 50 <div>
51 - <my-button v-if="userInfo.status === 'apply'" type="custom" :custom-style="styleObject1" 51 + <my-button v-if="userInfo.status === 'apply'" type="custom" :custom-style="styleObject4"
52 - @on-click="goTo('/me/verifyUser')">实名认证</my-button> 52 + @on-click="go('/me/verifyUser', { kg_id: userInfo.kg_id, kg_name: userInfo.kg_name })">实名认证</my-button>
53 - <my-button v-else type="custom" :custom-style="styleObject3">已认证</my-button> 53 + <my-button v-else type="custom" :custom-style="styleObject5">已认证</my-button>
54 </div> 54 </div>
55 <div> 55 <div>
56 - <my-button v-if="userInfo.status === 'enable'" type="custom" :custom-style="styleObject2" 56 + <my-button v-if="userInfo.status === 'enable'" type="custom" :custom-style="styleObject1"
57 @on-click="handleUser('ADD')">新增儿童</my-button> 57 @on-click="handleUser('ADD')">新增儿童</my-button>
58 - <my-button v-else type="custom" :custom-style="styleObject4" @on-click="showNotice = true">新增儿童</my-button> 58 + <my-button v-else type="custom" :custom-style="styleObject6" @on-click="showNotice = true">新增儿童</my-button>
59 </div> 59 </div>
60 </div> 60 </div>
61 61
62 <template v-for="(item, key) in itemList" :key="key"> 62 <template v-for="(item, key) in itemList" :key="key">
63 - <div class="van-hairline--bottom item-list" @click="goTo(item.to)"> 63 + <div class="van-hairline--bottom item-list" @click="go(item.to, { kg_id: userInfo.kg_id, kg_name: userInfo.kg_name })">
64 <van-row> 64 <van-row>
65 <van-col span="12">{{ item.name }}</van-col> 65 <van-col span="12">{{ item.name }}</van-col>
66 <van-col span="12" style="text-align: right; color: #777777;"> 66 <van-col span="12" style="text-align: right; color: #777777;">
...@@ -78,7 +78,7 @@ ...@@ -78,7 +78,7 @@
78 <van-action-sheet v-model:show="show" :actions="actions" @select="onSelect" /> 78 <van-action-sheet v-model:show="show" :actions="actions" @select="onSelect" />
79 79
80 <!-- 如果没有实名认证,新增儿童提示弹框 --> 80 <!-- 如果没有实名认证,新增儿童提示弹框 -->
81 - <notice-overlay :show="showNotice" text="前往认证" @on-submit="onSubmit" @on-close="onClose"> 81 + <notice-overlay :show="showNotice" text="前往认证" @on-submit="go('/me/verifyUser')" @on-close="onClose">
82 <div style="color: #333333;"> 82 <div style="color: #333333;">
83 <p>您还没有实名认证</p> 83 <p>您还没有实名认证</p>
84 <p>请前往个人中心进行实名认证</p> 84 <p>请前往个人中心进行实名认证</p>
...@@ -94,7 +94,11 @@ import { MyButton, NoticeOverlay } from '@/utils/generateModules.js' ...@@ -94,7 +94,11 @@ import { MyButton, NoticeOverlay } from '@/utils/generateModules.js'
94 import { icon_avatar } from '@/utils/generateIcons.js' 94 import { icon_avatar } from '@/utils/generateIcons.js'
95 import { changePerformerAPI, myInfoAPI, myPerformerAPI } from '@/api/C/me.js' 95 import { changePerformerAPI, myInfoAPI, myPerformerAPI } from '@/api/C/me.js'
96 import meRoute from '@/router/routes/modules/me' 96 import meRoute from '@/router/routes/modules/me'
97 +// 自定义按钮颜色样式
98 +import { styleObject1, styleObject4, styleObject5, styleObject6 } from '@/settings/designSetting.js'
99 +import { useGo } from '@/hooks/useGo'
97 100
101 +const go = useGo();
98 const $router = useRouter(); 102 const $router = useRouter();
99 103
100 // 删除 keep-alive 缓存 104 // 删除 keep-alive 缓存
...@@ -150,28 +154,11 @@ const onSelect = async (item) => { ...@@ -150,28 +154,11 @@ const onSelect = async (item) => {
150 }; 154 };
151 /********** 切换用户功能 END *************/ 155 /********** 切换用户功能 END *************/
152 156
153 -// 跳转相关页面
154 -const goTo = (path) => {
155 - $router.push({
156 - path: path,
157 - query: {
158 - kg_id: userInfo.value.kg_id,
159 - kg_name: userInfo.value.kg_name
160 - }
161 - })
162 -}
163 -
164 // 未实名认证提示 157 // 未实名认证提示
165 const showNotice = ref(false) 158 const showNotice = ref(false)
166 const onClose = () => { // 关闭提示框回调 159 const onClose = () => { // 关闭提示框回调
167 showNotice.value = false; 160 showNotice.value = false;
168 } 161 }
169 -// 跳转个人中心
170 -const onSubmit = () => {
171 - $router.push({
172 - path: '/me/verifyUser'
173 - });
174 -}
175 162
176 // 新增/编辑儿童信息 163 // 新增/编辑儿童信息
177 const handleUser = (type) => { 164 const handleUser = (type) => {
...@@ -200,56 +187,6 @@ const handleUser = (type) => { ...@@ -200,56 +187,6 @@ const handleUser = (type) => {
200 } 187 }
201 } 188 }
202 189
203 -// 自定义按钮颜色样式
204 -const styleObject1 = reactive({
205 - backgroundColor: '#FFFFFF',
206 - color: '#713610',
207 - borderColor: '#713610'
208 -})
209 -const styleObject2 = reactive({
210 - backgroundColor: '#FFFFFF',
211 - color: '#0B3A72',
212 - borderColor: '#0B3A72'
213 -})
214 -const styleObject3 = reactive({
215 - backgroundColor: '#FFFFFF',
216 - color: '#FDD347',
217 - borderColor: '#FDD347'
218 -})
219 -const styleObject4 = reactive({
220 - backgroundColor: '#FFFFFF',
221 - color: '#777777',
222 - borderColor: '#777777'
223 -})
224 -
225 -const getFollow = () => {
226 - $router.push({
227 - path: '/me/followList'
228 - })
229 -}
230 -const getUnwatch = () => {
231 - $router.push({
232 - path: '/me/unwatchList'
233 - })
234 -}
235 -</script>
236 -
237 -<script>
238 -import mixin from 'common/mixin';
239 -
240 -export default {
241 - mixins: [mixin.init],
242 - data() {
243 - return {
244 -
245 - }
246 - },
247 - mounted() {
248 - },
249 - methods: {
250 -
251 - }
252 -}
253 </script> 190 </script>
254 191
255 <style lang="less" scoped> 192 <style lang="less" scoped>
......