|
@@ -14,12 +14,11 @@
|
|
|
</div>
|
|
</div>
|
|
|
<div class="user-day">这是您使用飞鸟有味的第15天</div>
|
|
<div class="user-day">这是您使用飞鸟有味的第15天</div>
|
|
|
</div>
|
|
</div>
|
|
|
-
|
|
|
|
|
</div>
|
|
</div>
|
|
|
<div class="code-icon" v-if="curRole === 1">
|
|
<div class="code-icon" v-if="curRole === 1">
|
|
|
<img src="@/assets/img/mine/code-icon.png" alt="" />
|
|
<img src="@/assets/img/mine/code-icon.png" alt="" />
|
|
|
</div>
|
|
</div>
|
|
|
- <div class="switch-role-btn" v-if="curRole === 2">
|
|
|
|
|
|
|
+ <div class="switch-role-btn" v-if="roles && roles.length > 1" @click="changeToggle">
|
|
|
<span>切换身份</span>
|
|
<span>切换身份</span>
|
|
|
<el-icon><Switch /></el-icon>
|
|
<el-icon><Switch /></el-icon>
|
|
|
</div>
|
|
</div>
|
|
@@ -47,20 +46,49 @@
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+ <!-- 角色切换 -->
|
|
|
|
|
+ <action-sheet :style="{ bottom: 50 + 'px' }" v-model:show="show" :actions="actions" @select="onSelect" />
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
<script setup>
|
|
<script setup>
|
|
|
-import { onActivated, ref, computed } from "vue";
|
|
|
|
|
|
|
+import { onActivated, ref, computed, onMounted } from "vue";
|
|
|
import { useRouter } from "vue-router";
|
|
import { useRouter } from "vue-router";
|
|
|
|
|
+import { useStore } from "vuex";
|
|
|
|
|
+import { ActionSheet } from "vant";
|
|
|
|
|
+import { SET_USER_CUR_ROLE } from "@/store/modules/app/type";
|
|
|
|
|
|
|
|
|
|
+const store = useStore();
|
|
|
const router = useRouter();
|
|
const router = useRouter();
|
|
|
|
|
|
|
|
// 0: 农户, 1: 专家, 2:农资农服
|
|
// 0: 农户, 1: 专家, 2:农资农服
|
|
|
const curRole = ref(Number(localStorage.getItem("SET_USER_CUR_ROLE")));
|
|
const curRole = ref(Number(localStorage.getItem("SET_USER_CUR_ROLE")));
|
|
|
|
|
+const roles = ref(JSON.parse(store.state.app.roles));
|
|
|
|
|
+// const roles = ref([0,1,2,3])
|
|
|
|
|
+const actions = ref([]);
|
|
|
|
|
+const userObj = ref({})
|
|
|
|
|
+const list = ref([]);
|
|
|
|
|
|
|
|
// 网格项数据
|
|
// 网格项数据
|
|
|
const gridItems = ref([]);
|
|
const gridItems = ref([]);
|
|
|
|
|
|
|
|
|
|
+const objects = [
|
|
|
|
|
+ { name: "农户", id: 0, text: "NH" },
|
|
|
|
|
+ { name: "农资", id: 2, text: "NZ" },
|
|
|
|
|
+];
|
|
|
|
|
+
|
|
|
|
|
+onMounted(() => {
|
|
|
|
|
+ // 仅保留 objects 中存在的角色
|
|
|
|
|
+ actions.value = objects.filter(obj => roles.value && roles.value.includes(obj.id));
|
|
|
|
|
+});
|
|
|
|
|
+
|
|
|
|
|
+const show = ref(false);
|
|
|
|
|
+const onSelect = (item) => {
|
|
|
|
|
+ show.value = false;
|
|
|
|
|
+ store.dispatch(`app/${SET_USER_CUR_ROLE}`, item.id);
|
|
|
|
|
+ localStorage.setItem('SET_USER_CUR_ROLE',item.id)
|
|
|
|
|
+ window.location.reload()
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
onActivated(() => {
|
|
onActivated(() => {
|
|
|
if (curRole.value === 0) {
|
|
if (curRole.value === 0) {
|
|
|
gridItems.value = [
|
|
gridItems.value = [
|
|
@@ -188,6 +216,10 @@ const handleCellClick = (item) => {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
};
|
|
};
|
|
|
|
|
+
|
|
|
|
|
+const changeToggle = () => {
|
|
|
|
|
+ show.value = true;
|
|
|
|
|
+};
|
|
|
</script>
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
|
.mine-index {
|
|
.mine-index {
|
|
@@ -203,7 +235,7 @@ const handleCellClick = (item) => {
|
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
|
.user-info-box {
|
|
.user-info-box {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
|
|
|
|
+ align-items: center;
|
|
|
.avatar {
|
|
.avatar {
|
|
|
border: 1px solid #fff;
|
|
border: 1px solid #fff;
|
|
|
margin-right: 12px;
|
|
margin-right: 12px;
|
|
@@ -235,14 +267,14 @@ const handleCellClick = (item) => {
|
|
|
height: 100%;
|
|
height: 100%;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
- .switch-role-btn{
|
|
|
|
|
|
|
+ .switch-role-btn {
|
|
|
margin-right: -16px;
|
|
margin-right: -16px;
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
justify-content: center;
|
|
|
padding: 5px 10px 6px 12px;
|
|
padding: 5px 10px 6px 12px;
|
|
|
color: #fff;
|
|
color: #fff;
|
|
|
- background: #2199F8;
|
|
|
|
|
|
|
+ background: #2199f8;
|
|
|
border-radius: 25px 0 0 25px;
|
|
border-radius: 25px 0 0 25px;
|
|
|
gap: 5px;
|
|
gap: 5px;
|
|
|
font-size: 13px;
|
|
font-size: 13px;
|