123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256 |
- <template>
- <view class="content">
- <view class="one">
- <view class="one_1" v-if="user&&user._id">
- <view class="left">
- <image v-if="user.icon&&user.icon.length>0" class="logo" :src="user.icon[0].url"></image>
- <image v-else class="logo" :src="config.icon[0].url"></image>
- </view>
- <view class="right">
- <view class="name">{{user.nick_name||'暂无昵称'}}</view>
- <view class="gender">性别:{{getGender(user.gender)}}</view>
- </view>
- </view>
- <view class="one_1" v-else>
- <view class="left">
- <image class="logo" :src="config.icon[0].url"></image>
- </view>
- <view class="right">
- <view class="name" @click="show=true">点击登录</view>
- </view>
- </view>
- </view>
- <view class="two">
- <view class="two_1">
- <view class="left">我的订单</view>
- <view class="right" @tap="toCommon(`pagesMy/order/index?status=${'-1'}`)">查看全部订单
- <up-icon name="arrow-right" size="16"></up-icon>
- </view>
- </view>
- <view class="two_2">
- <view class="list" v-for="(item,index) in configInfo.orderList" :key="index" @tap="toRoute(item)">
- <uni-badge :text="item.num" absolute="rightTop" size="normal">
- <view class="icon">
- <text class="t-icon" :class="[item.icon]"></text>
- </view>
- <text class="title">{{item.title}}</text>
- </uni-badge>
- </view>
- </view>
- </view>
- <view class="thr">
- <view class="list" v-for="(item, index) in configInfo.menuList" :key="index" @click="toCommon(item.route)">
- <view class="left">
- <view class="icon">
- <text class="t-icon" :class="[item.icon]"></text>
- </view>
- <text class="title">{{item.title}}</text>
- </view>
- <view class="right">
- <up-icon name="arrow-right" size="16"></up-icon>
- </view>
- </view>
- </view>
- <up-overlay :show="show">
- <login @showChange='showChange'></login>
- </up-overlay>
- </view>
- </template>
- <script setup lang="ts">
- import configInfo from '../../config.js';
- import login from "@/components/login.vue"
- import { inject, computed, ref } from 'vue';
- //该依赖已内置不需要单独安装
- import { onShow, onPullDownRefresh } from "@dcloudio/uni-app";
- // 请求接口
- const $api = inject('$api');
- const $config = inject('$config');
- // 基本信息
- const config = ref({ logo: [], icon: [], file: [] });
- // 遮罩层
- const show = ref(false);
- // user
- const user = computed(() => {
- return uni.getStorageSync('user');
- })
- // 字典表
- const genderList = ref([]);
- onShow(async () => {
- await searchConfig();
- await searchOther();
- await search();
- if (!user.value) show.value = true
- })
- // config信息
- const searchConfig = async () => {
- config.value = uni.getStorageSync('config');
- };
- // 其他查询信息
- const searchOther = async () => {
- let res;
- // 性别
- res = await $api(`dictData`, 'GET', { code: 'gender', is_use: '0' });
- if (res.errcode === 0) genderList.value = res.data;
- };
- // 查询
- const search = async () => { };
- const showChange = () => {
- show.value = false
- }
- const getGender = (i) => {
- if (i) {
- const r = genderList.value.find((f) => f.value === i)
- if (r) return r.label
- else return '暂无'
- } else return '暂无'
- }
- // 订单
- const toRoute = (item) => {
- if (user.value && user.value._id) {
- uni.navigateTo({
- url: `/${item.route}?status=${item.status}`
- })
- } else show.value = true
- }
- // 公共跳转
- const toCommon = (e) => {
- if (user.value && user.value._id) {
- uni.navigateTo({
- url: `/${e}`
- })
- } else show.value = true
- }
- </script>
- <style lang="scss" scoped>
- .content {
- display: flex;
- flex-direction: column;
- width: 100vw;
- height: 100vh;
- background: linear-gradient(to bottom, #3c9cff, #f1f1f1);
- .one {
- padding: 5vw;
- .one_1 {
- display: flex;
- align-items: center;
- .left {
- margin: 0 2vw 0 0;
- .logo {
- width: 15vw;
- height: 15vw;
- border-radius: 90px;
- }
- }
- .right {
- color: var(--mainColor);
- .name {
- font-size: var(--font16Size);
- margin: 0 0 2vw 0;
- }
- .gender {
- font-size: var(--font14Size);
- }
- }
- }
- }
- .two {
- display: flex;
- flex-direction: column;
- padding: 3vw;
- margin: 2vw;
- border-radius: 10px;
- background-color: var(--mainColor);
- .two_1 {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 0 0 2vw 0;
- border-bottom: 1px solid var(--f9Color);
- .left {
- font-weight: 600;
- font-size: var(--font16Size);
- }
- .right {
- display: flex;
- align-items: center;
- font-size: var(--font14Size);
- color: var(--f99Color);
- }
- }
- .two_2 {
- display: flex;
- justify-content: space-between;
- padding: 2vw 0;
- .list {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- text-align: center;
- .title {
- display: inline-block;
- margin: 1vw 0 0 0;
- font-size: var(--font14Size);
- }
- }
- }
- }
- .thr {
- display: flex;
- flex-direction: column;
- margin: 2vw;
- border-radius: 10px;
- background-color: var(--mainColor);
- .list {
- display: flex;
- justify-content: space-between;
- padding: 3vw;
- border-bottom: 1px solid var(--f9Color);
- .left {
- display: flex;
- align-items: center;
- font-size: var(--font14Size);
- .icon {
- padding: 0 2vw 0 0;
- }
- .title {
- display: inline-block;
- font-size: var(--font14Size);
- }
- }
- .right {
- display: flex;
- align-items: center;
- font-size: var(--font14Size);
- color: var(--f99Color);
- }
- }
- .list:last-child {
- border: none;
- }
- }
- }
- </style>
|