index.vue 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256
  1. <template>
  2. <view class="content">
  3. <view class="one">
  4. <view class="one_1" v-if="user&&user._id">
  5. <view class="left">
  6. <image v-if="user.icon&&user.icon.length>0" class="logo" :src="user.icon[0].url"></image>
  7. <image v-else class="logo" :src="config.icon[0].url"></image>
  8. </view>
  9. <view class="right">
  10. <view class="name">{{user.nick_name||'暂无昵称'}}</view>
  11. <view class="gender">性别:{{getGender(user.gender)}}</view>
  12. </view>
  13. </view>
  14. <view class="one_1" v-else>
  15. <view class="left">
  16. <image class="logo" :src="config.icon[0].url"></image>
  17. </view>
  18. <view class="right">
  19. <view class="name" @click="show=true">点击登录</view>
  20. </view>
  21. </view>
  22. </view>
  23. <view class="two">
  24. <view class="two_1">
  25. <view class="left">我的订单</view>
  26. <view class="right" @tap="toCommon(`pagesMy/order/index?status=${'-1'}`)">查看全部订单
  27. <up-icon name="arrow-right" size="16"></up-icon>
  28. </view>
  29. </view>
  30. <view class="two_2">
  31. <view class="list" v-for="(item,index) in configInfo.orderList" :key="index" @tap="toRoute(item)">
  32. <uni-badge :text="item.num" absolute="rightTop" size="normal">
  33. <view class="icon">
  34. <text class="t-icon" :class="[item.icon]"></text>
  35. </view>
  36. <text class="title">{{item.title}}</text>
  37. </uni-badge>
  38. </view>
  39. </view>
  40. </view>
  41. <view class="thr">
  42. <view class="list" v-for="(item, index) in configInfo.menuList" :key="index" @click="toCommon(item.route)">
  43. <view class="left">
  44. <view class="icon">
  45. <text class="t-icon" :class="[item.icon]"></text>
  46. </view>
  47. <text class="title">{{item.title}}</text>
  48. </view>
  49. <view class="right">
  50. <up-icon name="arrow-right" size="16"></up-icon>
  51. </view>
  52. </view>
  53. </view>
  54. <up-overlay :show="show">
  55. <login @showChange='showChange'></login>
  56. </up-overlay>
  57. </view>
  58. </template>
  59. <script setup lang="ts">
  60. import configInfo from '../../config.js';
  61. import login from "@/components/login.vue"
  62. import { inject, computed, ref } from 'vue';
  63. //该依赖已内置不需要单独安装
  64. import { onShow, onPullDownRefresh } from "@dcloudio/uni-app";
  65. // 请求接口
  66. const $api = inject('$api');
  67. const $config = inject('$config');
  68. // 基本信息
  69. const config = ref({ logo: [], icon: [], file: [] });
  70. // 遮罩层
  71. const show = ref(false);
  72. // user
  73. const user = computed(() => {
  74. return uni.getStorageSync('user');
  75. })
  76. // 字典表
  77. const genderList = ref([]);
  78. onShow(async () => {
  79. await searchConfig();
  80. await searchOther();
  81. await search();
  82. if (!user.value) show.value = true
  83. })
  84. // config信息
  85. const searchConfig = async () => {
  86. config.value = uni.getStorageSync('config');
  87. };
  88. // 其他查询信息
  89. const searchOther = async () => {
  90. let res;
  91. // 性别
  92. res = await $api(`dictData`, 'GET', { code: 'gender', is_use: '0' });
  93. if (res.errcode === 0) genderList.value = res.data;
  94. };
  95. // 查询
  96. const search = async () => { };
  97. const showChange = () => {
  98. show.value = false
  99. }
  100. const getGender = (i) => {
  101. if (i) {
  102. const r = genderList.value.find((f) => f.value === i)
  103. if (r) return r.label
  104. else return '暂无'
  105. } else return '暂无'
  106. }
  107. // 订单
  108. const toRoute = (item) => {
  109. if (user.value && user.value._id) {
  110. uni.navigateTo({
  111. url: `/${item.route}?status=${item.status}`
  112. })
  113. } else show.value = true
  114. }
  115. // 公共跳转
  116. const toCommon = (e) => {
  117. if (user.value && user.value._id) {
  118. uni.navigateTo({
  119. url: `/${e}`
  120. })
  121. } else show.value = true
  122. }
  123. </script>
  124. <style lang="scss" scoped>
  125. .content {
  126. display: flex;
  127. flex-direction: column;
  128. width: 100vw;
  129. height: 100vh;
  130. background: linear-gradient(to bottom, #3c9cff, #f1f1f1);
  131. .one {
  132. padding: 5vw;
  133. .one_1 {
  134. display: flex;
  135. align-items: center;
  136. .left {
  137. margin: 0 2vw 0 0;
  138. .logo {
  139. width: 15vw;
  140. height: 15vw;
  141. border-radius: 90px;
  142. }
  143. }
  144. .right {
  145. color: var(--mainColor);
  146. .name {
  147. font-size: var(--font16Size);
  148. margin: 0 0 2vw 0;
  149. }
  150. .gender {
  151. font-size: var(--font14Size);
  152. }
  153. }
  154. }
  155. }
  156. .two {
  157. display: flex;
  158. flex-direction: column;
  159. padding: 3vw;
  160. margin: 2vw;
  161. border-radius: 10px;
  162. background-color: var(--mainColor);
  163. .two_1 {
  164. display: flex;
  165. justify-content: space-between;
  166. align-items: center;
  167. padding: 0 0 2vw 0;
  168. border-bottom: 1px solid var(--f9Color);
  169. .left {
  170. font-weight: 600;
  171. font-size: var(--font16Size);
  172. }
  173. .right {
  174. display: flex;
  175. align-items: center;
  176. font-size: var(--font14Size);
  177. color: var(--f99Color);
  178. }
  179. }
  180. .two_2 {
  181. display: flex;
  182. justify-content: space-between;
  183. padding: 2vw 0;
  184. .list {
  185. display: flex;
  186. flex-direction: column;
  187. align-items: center;
  188. justify-content: center;
  189. text-align: center;
  190. .title {
  191. display: inline-block;
  192. margin: 1vw 0 0 0;
  193. font-size: var(--font14Size);
  194. }
  195. }
  196. }
  197. }
  198. .thr {
  199. display: flex;
  200. flex-direction: column;
  201. margin: 2vw;
  202. border-radius: 10px;
  203. background-color: var(--mainColor);
  204. .list {
  205. display: flex;
  206. justify-content: space-between;
  207. padding: 3vw;
  208. border-bottom: 1px solid var(--f9Color);
  209. .left {
  210. display: flex;
  211. align-items: center;
  212. font-size: var(--font14Size);
  213. .icon {
  214. padding: 0 2vw 0 0;
  215. }
  216. .title {
  217. display: inline-block;
  218. font-size: var(--font14Size);
  219. }
  220. }
  221. .right {
  222. display: flex;
  223. align-items: center;
  224. font-size: var(--font14Size);
  225. color: var(--f99Color);
  226. }
  227. }
  228. .list:last-child {
  229. border: none;
  230. }
  231. }
  232. }
  233. </style>