敢为人鲜小程序前端代码仓库
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

407 lines
14 KiB

1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
  1. <template>
  2. <view class="center-page">
  3. <!-- 顶部背景和个人信息 -->
  4. <view class="header" :style="{ 'background-image': 'url(/static/image/红烧肉.webp)' }">
  5. <view class="user-info">
  6. <image class="avatar" :src="userInfo.headImage" mode="aspectFill"></image>
  7. <view class="user-name-id">
  8. <text class="user-name">{{ userInfo.nickName }}</text>
  9. <text class="user-id">ID:{{ userInfo.id }}</text>
  10. </view>
  11. </view>
  12. <view class="role-switch-btn" @tap="switchIdentity">
  13. <uv-icon name="reload" size="30rpx" color="#fff" style="margin-right: 6rpx;" />
  14. <text>切换为{{ !identity ? '团长' : '团员'}}</text>
  15. </view>
  16. </view>
  17. <!-- 我的订单区域 -->
  18. <view class="orders-section">
  19. <view class="section-header">
  20. <text class="section-title">我的订单</text>
  21. <view class="view-all" @tap="navigateTo('/pages/index/order?status=all')">
  22. <text>全部</text>
  23. <uv-icon name="arrow-right" size="30rpx" color="#999" />
  24. </view>
  25. </view>
  26. <view class="order-types">
  27. <view class="order-type-item" v-if="identity === 0"
  28. @tap="navigateTo('/pages/index/order?status=pending')">
  29. <view class="order-icon-wrapper">
  30. <view class="green-circle">
  31. <uv-icon name="red-packet" size="44rpx" color="#fff" />
  32. </view>
  33. <uv-badge max="9" absolute :offset="[-10, -12]" bgColor="#FF2A2A"
  34. :value="userInfo.waitingPayCount" style="padding: 10rpx 15rpx;" />
  35. </view>
  36. <text class="order-type-text">待支付</text>
  37. </view>
  38. <view class="order-type-item" @tap="navigateTo('/pages/index/order?status=processing')">
  39. <view class="order-icon-wrapper">
  40. <view class="green-circle">
  41. <uv-icon name="chat" size="44rpx" color="#fff" />
  42. </view>
  43. <uv-badge max="9" absolute :offset="[-10, -12]" bgColor="#FF2A2A"
  44. :value="userInfo.waitingDiningCount" style="padding: 10rpx 15rpx;" />
  45. </view>
  46. <text class="order-type-text">待出餐</text>
  47. </view>
  48. <view class="order-type-item" @tap="navigateTo('/pages/index/order?status=shipping')">
  49. <view class="order-icon-wrapper">
  50. <view class="green-circle">
  51. <uv-icon name="chat" size="44rpx" color="#fff" />
  52. </view>
  53. <uv-badge max="9" absolute :offset="[-10, -12]" bgColor="#FF2A2A"
  54. :value="userInfo.deliveringCount" style="padding: 10rpx 15rpx;" />
  55. </view>
  56. <text class="order-type-text">送餐中</text>
  57. </view>
  58. <view class="order-type-item" @tap="navigateTo('/pages/index/order?status=delivered')">
  59. <view class="order-icon-wrapper">
  60. <view class="green-circle">
  61. <uv-icon name="chat" size="44rpx" color="#fff" />
  62. </view>
  63. <uv-badge max="9" absolute :offset="[-10, -12]" bgColor="#FF2A2A" :value="userInfo.pickupCount"
  64. style="padding: 10rpx 15rpx;" />
  65. </view>
  66. <text class="order-type-text">待取餐</text>
  67. </view>
  68. <view class="order-type-item" @tap="navigateTo('/pages/index/order?status=completed')">
  69. <view class="order-icon-wrapper">
  70. <view class="green-circle">
  71. <uv-icon name="chat" size="44rpx" color="#fff" />
  72. </view>
  73. <uv-badge max="9" absolute :offset="[-10, -12]" bgColor="#FF2A2A"
  74. :value="userInfo.completedCount" style="padding: 10rpx 15rpx;" />
  75. </view>
  76. <text class="order-type-text">已完成</text>
  77. </view>
  78. </view>
  79. </view>
  80. <!-- 团员功能区域 -->
  81. <view class="member-functions">
  82. <view class="section-header">
  83. <text class="section-title">团员功能</text>
  84. </view>
  85. <view class="function-grid" v-if="identity === 0">
  86. <view class="function-item" @tap="navigateTo('/pages_order/mine/updateUser')">
  87. <view class="function-icon">
  88. <uv-icon name="chat" size="94rpx" color="#019245" />
  89. </view>
  90. <text class="function-text">资料修改</text>
  91. </view>
  92. <view class="function-item" @tap="navigateTo('/pages_order/mine/team')">
  93. <view class="function-icon">
  94. <uv-icon name="chat" size="94rpx" color="#019245" />
  95. </view>
  96. <text class="function-text">团长申请</text>
  97. </view>
  98. <view class="function-item" @tap="navigateTo('/pages_order/mine/unbindTeam')">
  99. <view class="function-icon">
  100. <uv-icon name="chat" size="94rpx" color="#019245" />
  101. </view>
  102. <text class="function-text">解绑团长</text>
  103. </view>
  104. <view class="function-item" @tap="navigateTo('/pages_order/mine/share')">
  105. <view class="function-icon">
  106. <uv-icon name="chat" size="94rpx" color="#019245" />
  107. </view>
  108. <text class="function-text">推广链接</text>
  109. </view>
  110. <view class="function-item" @tap="navigateTo('/pages_order/mine/coupon')">
  111. <view class="function-icon">
  112. <uv-icon name="chat" size="94rpx" color="#019245" />
  113. </view>
  114. <text class="function-text">优惠券</text>
  115. </view>
  116. <view class="function-item" @tap="navigateTo('/pages_order/mine/wallet')">
  117. <view class="function-icon">
  118. <uv-icon name="chat" size="94rpx" color="#019245" />
  119. </view>
  120. <text class="function-text">钱包</text>
  121. </view>
  122. </view>
  123. <view class="function-grid" v-else>
  124. <view class="function-item" @tap="navigateTo('/pages_order/mine/updateUser')">
  125. <view class="function-icon">
  126. <uv-icon name="chat" size="94rpx" color="#019245" />
  127. </view>
  128. <text class="function-text">我的资料</text>
  129. </view>
  130. <view class="function-item" @tap="navigateTo('/pages_order/mine/myTeam')">
  131. <view class="function-icon">
  132. <uv-icon name="chat" size="94rpx" color="#019245" />
  133. </view>
  134. <text class="function-text">我的团员</text>
  135. </view>
  136. <view class="function-item" @tap="navigateTo('/pages_order/mine/team')">
  137. <view class="function-icon">
  138. <uv-icon name="chat" size="94rpx" color="#019245" />
  139. </view>
  140. <text class="function-text">团长信息</text>
  141. </view>
  142. <view class="function-item" @tap="navigateTo('/pages_order/mine/share')">
  143. <view class="function-icon">
  144. <uv-icon name="chat" size="94rpx" color="#019245" />
  145. </view>
  146. <text class="function-text">推广链接</text>
  147. </view>
  148. <view class="function-item" @tap="navigateTo('/pages_order/mine/wallet')">
  149. <view class="function-icon">
  150. <uv-icon name="chat" size="94rpx" color="#019245" />
  151. </view>
  152. <text class="function-text">钱包</text>
  153. </view>
  154. </view>
  155. </view>
  156. <tabber select="center" />
  157. </view>
  158. </template>
  159. <script>
  160. import tabber from '@/components/base/tabbar.vue'
  161. // import { mockUserInfo } from '@/static/js/mockUserInfo.js'
  162. // import { unix } from 'dayjs'
  163. export default {
  164. components: {
  165. tabber
  166. },
  167. data() {
  168. return {
  169. // userInfo: mockUserInfo,
  170. identity: 0
  171. }
  172. },
  173. methods: {
  174. navigateTo(url) {
  175. this.$utils.navigateTo({
  176. url
  177. })
  178. },
  179. switchIdentity() {
  180. uni.showModal({
  181. title: '提示',
  182. content: `确定要切换为${this.identity === 0 ? '团长' : '团员'}吗?`,
  183. confirmColor: '#019245',
  184. // cancelColor: '#FF2A2A',
  185. success: (res) => {
  186. if (res.confirm){
  187. // 这里的切换逻辑
  188. uni.showLoading({
  189. title: '切换中...'
  190. })
  191. setTimeout(() => {
  192. uni.hideLoading();
  193. this.identity = this.identity === 0 ? 1 : 0;
  194. uni.setStorageSync('identity', this.identity)
  195. uni.showToast({
  196. title: '切换成功',
  197. icon: 'success',
  198. duration: 2000
  199. })
  200. }, 1000);
  201. }
  202. }
  203. })
  204. }
  205. },
  206. onLoad (){
  207. // 进来加载的时候 会检查一次信息是否完整 若不完整 重新进入登录界面
  208. this.$store.commit('getUserInfo')
  209. uni.setStorageSync('identity', 0) // 一开始的身份默认为团员
  210. this.identity = uni.getStorageSync('identity') // 获取身份
  211. }
  212. }
  213. </script>
  214. <style lang="scss" scoped>
  215. .center-page {
  216. // min-height: 100vh;
  217. background-color: #f5f5f5;
  218. padding-bottom: 120rpx;
  219. }
  220. .header {
  221. position: relative;
  222. height: 340rpx;
  223. background-size: cover;
  224. background-position: center;
  225. color: #fff;
  226. padding: 60rpx 30rpx 0;
  227. display: flex;
  228. flex-direction: column;
  229. align-items: start;
  230. position: relative;
  231. .user-info {
  232. position: absolute;
  233. display: flex;
  234. align-items: center;
  235. margin-top: 30rpx;
  236. z-index: 2;
  237. left: 30rpx;
  238. top: 120rpx;
  239. .avatar {
  240. width: 110rpx;
  241. height: 110rpx;
  242. border-radius: 50%;
  243. }
  244. .user-name-id {
  245. margin-left: 30rpx;
  246. display: flex;
  247. flex-direction: column;
  248. .user-name {
  249. font-size: 32rpx;
  250. font-weight: bold;
  251. margin-bottom: 6rpx;
  252. }
  253. .user-id {
  254. font-size: 24rpx;
  255. opacity: 0.9;
  256. }
  257. }
  258. }
  259. .role-switch-btn {
  260. position: absolute;
  261. right: 0;
  262. top: 180rpx;
  263. background-color: rgba(255, 255, 255, 0.2);
  264. border-radius: 30rpx 0 0 30rpx;
  265. padding: 10rpx 20rpx;
  266. font-size: 24rpx;
  267. z-index: 2;
  268. display: flex;
  269. align-items: center;
  270. }
  271. }
  272. .orders-section {
  273. background-color: #fff;
  274. border-radius: 20rpx 20rpx 0 0;
  275. margin: -70rpx auto 0;
  276. padding: 15rpx;
  277. position: relative;
  278. z-index: 3;
  279. width: 90%;
  280. // margin: 0 auto;
  281. }
  282. .member-functions {
  283. background-color: #fff;
  284. padding: 30rpx;
  285. margin-top: 20rpx;
  286. width: 88%;
  287. border-radius: 20rpx;
  288. margin: 30rpx auto 0;
  289. }
  290. .section-header {
  291. display: flex;
  292. justify-content: space-between;
  293. align-items: center;
  294. margin-bottom: 40rpx;
  295. .section-title {
  296. font-size: 32rpx;
  297. font-weight: 500;
  298. position: relative;
  299. padding-left: 15rpx;
  300. }
  301. .view-all {
  302. display: flex;
  303. align-items: center;
  304. font-size: 26rpx;
  305. color: $uni-color-third;
  306. }
  307. }
  308. .order-types {
  309. // background-color: red;
  310. display: flex;
  311. justify-content: space-around;
  312. .order-type-item {
  313. display: flex;
  314. flex-direction: column;
  315. align-items: center;
  316. // width: 20%;
  317. .order-icon-wrapper {
  318. position: relative;
  319. margin-bottom: 4rpx;
  320. .green-circle {
  321. width: 70rpx;
  322. height: 70rpx;
  323. background-color: $uni-color;
  324. border-radius: 50%;
  325. display: flex;
  326. justify-content: center;
  327. align-items: center;
  328. }
  329. }
  330. .order-type-text {
  331. font-size: 26rpx;
  332. color: #666;
  333. margin-top: 8rpx;
  334. }
  335. }
  336. }
  337. .function-grid {
  338. display: flex;
  339. flex-wrap: wrap;
  340. .function-item {
  341. width: 25%;
  342. display: flex;
  343. flex-direction: column;
  344. align-items: center;
  345. margin-bottom: 40rpx;
  346. .function-icon {
  347. width: 80rpx;
  348. height: 80rpx;
  349. display: flex;
  350. justify-content: center;
  351. align-items: center;
  352. margin-bottom: 16rpx;
  353. }
  354. .function-text {
  355. font-size: 26rpx;
  356. color: #333;
  357. }
  358. }
  359. }
  360. </style>