猫妈狗爸伴宠师小程序前端代码
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.

161 lines
3.8 KiB

3 months ago
3 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
2 months ago
3 months ago
2 months ago
2 months ago
3 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
2 months ago
3 months ago
  1. <template>
  2. <view class="page">
  3. <view class="tips flex-rowl">
  4. <image src="@/static/images/ydd/icon2.png" mode=""></image>
  5. <text class="color-ffb size-22 ml16">普通喂养员可设置3个接单地址优选喂养员可设置5个接单地址</text>
  6. </view>
  7. <view v-if="list.length">
  8. <view class="li bg-fff" v-for="(item, index) in list" :key="`address-${index}`">
  9. <view class="size-30">
  10. {{ item.area }}
  11. </view>
  12. <view class="size-22 color-777 mt16">
  13. {{ `接单范围:${item.distance}km` }}
  14. </view>
  15. <view class="content mt16">
  16. <view class="flex-between">
  17. <text class="size-22 color-999">不接单日期</text>
  18. <view class="flex-rowr">
  19. <text class="size-22 color-ccc">修改</text>
  20. <image src="@/static/images/ydd/right.png" mode="widthFix" style="width: 20rpx;"></image>
  21. </view>
  22. </view>
  23. <view class="color-999 size-22 mt16 flex-rowl">
  24. <text>
  25. {{ `${item.disabledDate?.length}天:` }}
  26. </text>
  27. <text class="text-ellipsis" style="flex: 1;">
  28. {{ getDisabledDateDesc(item.disabledDate) }}
  29. </text>
  30. </view>
  31. </view>
  32. <view class="flex-between mt16">
  33. <view class="flex-rowl">
  34. <view class="color-ffb size-22">
  35. 接单中
  36. </view>
  37. <switch :checked="item.status" color="#FFBF60" style="transform: scale(0.6);" />
  38. </view>
  39. <view class="flex-rowr">
  40. <view @click="toAdd(item)" class="flex-rowl">
  41. <image src="@/static/images/ydd/edit.png" mode="widthFix" style="width: 20rpx;"></image>
  42. <text class="size-22 color-777 ml10">编辑</text>
  43. </view>
  44. <view @click="fetchDeleteAddress(item.id)" class="flex-rowl" style="margin-left: 50rpx;">
  45. <image src="@/static/images/ydd/cancel.png" mode="widthFix" style="width: 20rpx;"></image>
  46. <text class="size-22 color-777 ml10">删除</text>
  47. </view>
  48. </view>
  49. </view>
  50. </view>
  51. </view>
  52. <view v-else class="flex-rowc">
  53. <image class="icon-empty" src="../static/connectAddress/icon-empty.png" mode="widthFix"></image>
  54. </view>
  55. <view class="footer-btn">
  56. <view class="btn" @click="toAdd()">
  57. 新增接单地址
  58. </view>
  59. </view>
  60. </view>
  61. </template>
  62. <script setup>
  63. import {
  64. ref
  65. } from 'vue'
  66. import {
  67. onShow
  68. } from '@dcloudio/uni-app'
  69. import dayjs from 'dayjs'
  70. import {
  71. getAddressList,
  72. deleteAddress
  73. } from "@/api/address/address.js"
  74. const list = ref([])
  75. const fetchAddressList = async () => {
  76. try {
  77. let response = await getAddressList();
  78. list.value = response.data || []
  79. } catch (err) {
  80. }
  81. }
  82. const getDisabledDateDesc = (dateArr) => {
  83. if (!dateArr?.length) {
  84. return '暂无不可接单日期'
  85. }
  86. return dateArr.map(date => dayjs(date).format('MM-DD')).join('、')
  87. }
  88. const toAdd = (item) => {
  89. if(item) {
  90. uni.navigateTo({
  91. url: `/otherPages/authentication/connectAddress/detail?item=${JSON.stringify(item)}`
  92. })
  93. }else {
  94. uni.navigateTo({
  95. url: '/otherPages/authentication/connectAddress/detail'
  96. })
  97. }
  98. }
  99. const fetchDeleteAddress = async (id) => {
  100. let response = await deleteAddress({ id });
  101. if(response.code == 200) {
  102. uni.showToast({
  103. title: '删除成功!',
  104. icon: "none"
  105. })
  106. fetchAddressList()
  107. }
  108. }
  109. onShow(() => {
  110. fetchAddressList()
  111. })
  112. </script>
  113. <style lang="scss" scoped>
  114. .page {
  115. .icon-empty {
  116. width: 259rpx;
  117. height: auto;
  118. margin-top: 240rpx;
  119. }
  120. }
  121. .content {
  122. background-color: #F3F3F3;
  123. border-radius: 20rpx;
  124. padding: 24rpx;
  125. }
  126. .li {
  127. margin: 16rpx 24rpx 0 24rpx;
  128. border-radius: 20rpx;
  129. padding: 24rpx;
  130. }
  131. .tips {
  132. padding: 10rpx 32rpx;
  133. background-color: rgb(255, 250, 242);
  134. image {
  135. width: 32rpx;
  136. height: 32rpx;
  137. }
  138. }
  139. .text-ellipsis {
  140. overflow: hidden; //超出的文本隐藏
  141. text-overflow: ellipsis; //溢出用省略号显示
  142. white-space: nowrap; //溢出不换行
  143. }
  144. </style>