敢为人鲜小程序前端代码仓库
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.

460 lines
17 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. <template>
  2. <view class="center-page">
  3. <!-- 顶部背景和个人信息 -->
  4. <view class="header" :style="{ backgroundImage: `url(${imageUrl})` }">
  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. export default {
  162. components: {
  163. tabber
  164. },
  165. data() {
  166. return {
  167. identity: uni.getStorageSync('identity') || 0
  168. }
  169. },
  170. methods: {
  171. navigateTo(url) {
  172. this.$utils.navigateTo({
  173. url
  174. })
  175. },
  176. switchIdentity() {
  177. uni.showModal({
  178. title: '提示',
  179. content: `确定要切换为${this.identity ? '团员' : '团长'}吗?`,
  180. confirmColor: '#019245',
  181. success: (res) => {
  182. if (res.confirm){
  183. // 这里的切换逻辑
  184. if (this.identity == 0){
  185. this.$api('queryLeaderInfo', {}, res => {
  186. if (res.code == 200){
  187. if (res.result == null){
  188. // 如果申请都没有提交过
  189. uni.showModal({
  190. title: '提示',
  191. content: '您还没有提交过团长申请,请先提交申请',
  192. confirmColor: '#019245',
  193. confirmText: '提交申请',
  194. showCancel: false,
  195. success: (res) => {
  196. if (res.confirm) {
  197. this.$utils.navigateTo({
  198. url: '/pages_order/mine/team'
  199. })
  200. }
  201. }
  202. })
  203. }else if (res.result.status == '1'){
  204. this.identity = 1
  205. uni.setStorageSync('identity', this.identity)
  206. uni.showToast({
  207. title: '切换成功',
  208. icon: 'success',
  209. duration: 2000
  210. })
  211. }else if (res.result.status == '2'){
  212. uni.showModal({
  213. title: '提示',
  214. content: '团长申请失败,请重新申请',
  215. confirmColor: '#019245',
  216. confirmText: '重新申请',
  217. showCancel: false,
  218. success: (res) => {
  219. if (res.confirm){
  220. this.$utils.navigateTo({
  221. url: '/pages_order/mine/team'
  222. })
  223. }
  224. }
  225. })
  226. }else if (res.result.status == '0'){
  227. uni.showModal({
  228. title: '提示',
  229. content: '团长申请审核中,请耐心等待',
  230. confirmColor: '#019245',
  231. confirmText: '重新申请',
  232. cancelText: '等待申请',
  233. success: (res) => {
  234. if (res.confirm){
  235. this.$utils.navigateTo({
  236. url: '/pages_order/mine/team'
  237. })
  238. }
  239. }
  240. })
  241. }
  242. }
  243. })
  244. }else if (this.identity == 1){
  245. this.identity = 0
  246. uni.setStorageSync('identity', this.identity)
  247. uni.showToast({
  248. title: '切换成功',
  249. icon: 'success',
  250. duration: 2000
  251. })
  252. }
  253. }
  254. }
  255. })
  256. }
  257. },
  258. computed: {
  259. imageUrl() {
  260. return '/static/image/红烧肉.webp'
  261. }
  262. },
  263. onLoad() {
  264. this.$store.commit('getUserInfo')
  265. }
  266. }
  267. </script>
  268. <style lang="scss" scoped>
  269. .center-page {
  270. // min-height: 100vh;
  271. background-color: #f5f5f5;
  272. padding-bottom: 120rpx;
  273. }
  274. .header {
  275. position: relative;
  276. height: 340rpx;
  277. background-size: cover;
  278. background-position: center;
  279. color: #fff;
  280. padding: 60rpx 30rpx 0;
  281. display: flex;
  282. flex-direction: column;
  283. align-items: start;
  284. position: relative;
  285. .user-info {
  286. position: absolute;
  287. display: flex;
  288. align-items: center;
  289. margin-top: 30rpx;
  290. z-index: 2;
  291. left: 30rpx;
  292. top: 120rpx;
  293. .avatar {
  294. width: 110rpx;
  295. height: 110rpx;
  296. border-radius: 50%;
  297. }
  298. .user-name-id {
  299. margin-left: 30rpx;
  300. display: flex;
  301. flex-direction: column;
  302. .user-name {
  303. font-size: 32rpx;
  304. font-weight: bold;
  305. margin-bottom: 6rpx;
  306. }
  307. .user-id {
  308. font-size: 24rpx;
  309. opacity: 0.9;
  310. }
  311. }
  312. }
  313. .role-switch-btn {
  314. position: absolute;
  315. right: 0;
  316. top: 180rpx;
  317. background-color: rgba(255, 255, 255, 0.2);
  318. border-radius: 30rpx 0 0 30rpx;
  319. padding: 10rpx 20rpx;
  320. font-size: 24rpx;
  321. z-index: 2;
  322. display: flex;
  323. align-items: center;
  324. }
  325. }
  326. .orders-section {
  327. background-color: #fff;
  328. border-radius: 20rpx 20rpx 0 0;
  329. margin: -70rpx auto 0;
  330. padding: 15rpx;
  331. position: relative;
  332. z-index: 3;
  333. width: 90%;
  334. // margin: 0 auto;
  335. }
  336. .member-functions {
  337. background-color: #fff;
  338. padding: 30rpx;
  339. margin-top: 20rpx;
  340. width: 88%;
  341. border-radius: 20rpx;
  342. margin: 30rpx auto 0;
  343. }
  344. .section-header {
  345. display: flex;
  346. justify-content: space-between;
  347. align-items: center;
  348. margin-bottom: 40rpx;
  349. .section-title {
  350. font-size: 32rpx;
  351. font-weight: 500;
  352. position: relative;
  353. padding-left: 15rpx;
  354. }
  355. .view-all {
  356. display: flex;
  357. align-items: center;
  358. font-size: 26rpx;
  359. color: $uni-color-third;
  360. }
  361. }
  362. .order-types {
  363. // background-color: red;
  364. display: flex;
  365. justify-content: space-around;
  366. .order-type-item {
  367. display: flex;
  368. flex-direction: column;
  369. align-items: center;
  370. // width: 20%;
  371. .order-icon-wrapper {
  372. position: relative;
  373. margin-bottom: 4rpx;
  374. .green-circle {
  375. width: 70rpx;
  376. height: 70rpx;
  377. background-color: $uni-color;
  378. border-radius: 50%;
  379. display: flex;
  380. justify-content: center;
  381. align-items: center;
  382. }
  383. }
  384. .order-type-text {
  385. font-size: 26rpx;
  386. color: #666;
  387. margin-top: 8rpx;
  388. }
  389. }
  390. }
  391. .function-grid {
  392. display: flex;
  393. flex-wrap: wrap;
  394. .function-item {
  395. width: 25%;
  396. display: flex;
  397. flex-direction: column;
  398. align-items: center;
  399. margin-bottom: 40rpx;
  400. .function-icon {
  401. width: 80rpx;
  402. height: 80rpx;
  403. display: flex;
  404. justify-content: center;
  405. align-items: center;
  406. margin-bottom: 16rpx;
  407. }
  408. .function-text {
  409. font-size: 26rpx;
  410. color: #333;
  411. }
  412. }
  413. }
  414. </style>