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

280 lines
8.3 KiB

  1. <template>
  2. <view class="page">
  3. <!-- 导航栏 -->
  4. <navbar title="解绑团长" leftClick @leftClick="$utils.navigateBack" bgColor="#019245" color="#fff" />
  5. <!-- 当前取餐点 -->
  6. <view class="section" v-if="isBind">
  7. <view class="section-title">当前取餐点</view>
  8. <view class="pickup-item" v-if="currentPickupPoint">
  9. <view class="pickup-image">
  10. <image :src="currentPickupPoint.spotImage" mode="aspectFill"></image>
  11. </view>
  12. <view class="pickup-info">
  13. <view class="pickup-name">{{ currentPickupPoint.spotName }}</view>
  14. <view class="pickup-address">
  15. <view class="pickup-address-icon">
  16. <uv-icon name="map-fill" color="#019245" size="24"></uv-icon>
  17. </view>
  18. <text>{{ currentPickupPoint.area }}{{ currentPickupPoint.address }}</text>
  19. </view>
  20. <view class="pickup-phone">
  21. <uv-icon name="phone-fill" color="#019245" size="24"></uv-icon>
  22. <text>{{ currentPickupPoint.phone }}</text>
  23. </view>
  24. </view>
  25. <view class="select-btn" @click="deleteLeader">
  26. <text>解绑</text>
  27. </view>
  28. </view>
  29. </view>
  30. <!-- 附近取餐点 -->
  31. <view class="section">
  32. <view class="section-title">附近取餐点</view>
  33. <!-- 提示信息 -->
  34. <view class="warning-tip">
  35. <uv-icon name="info-circle" color="#FF5722" size="36"></uv-icon>
  36. <text v-if="isBind">更换取餐地址和团长,需通过平台审核方可更换!</text>
  37. <text v-else>您还未绑定团长请先绑定团长!</text>
  38. </view>
  39. <!-- 取餐点列表 -->
  40. <view class="pickup-list">
  41. <view class="pickup-item" v-for="(item, index) in nearbyPickupPoints" :key="index">
  42. <view class="pickup-image">
  43. <image :src="item.spotImage" mode="aspectFill"></image>
  44. </view>
  45. <view class="pickup-info">
  46. <view class="pickup-name">{{ item.spotName }}</view>
  47. <view class="pickup-address">
  48. <view class="pickup-address-icon">
  49. <uv-icon name="map-fill" color="#019245" size="24"></uv-icon>
  50. </view>
  51. <text>{{ item.area }} {{ item.address }} </text>
  52. </view>
  53. <view class="pickup-phone">
  54. <uv-icon name="phone-fill" color="#019245" size="24"></uv-icon>
  55. <text>{{ item.phone }}</text>
  56. </view>
  57. </view>
  58. <view class="select-btn" @click="updateLeader(item)">
  59. <text>选择</text>
  60. </view>
  61. </view>
  62. </view>
  63. </view>
  64. </view>
  65. </template>
  66. <script>
  67. import navbar from '@/components/base/navbar.vue'
  68. // import { currentPickupPoint, nearbyPickupPoints } from '@/static/js/mockTeam.js'
  69. export default {
  70. components: {
  71. navbar
  72. },
  73. data() {
  74. return {
  75. // 当前取餐点
  76. currentPickupPoint:{},
  77. // 附近取餐点列表
  78. nearbyPickupPoints:[],
  79. isBind: true
  80. }
  81. },
  82. methods: {
  83. // 选择取餐点
  84. deleteLeader() {
  85. uni.showModal({
  86. title: '确认解绑',
  87. content: '您确定要解绑团长吗?',
  88. confirmColor: '#019245',
  89. success: (res) => {
  90. if (res.confirm) {
  91. uni.showLoading({
  92. title: '提交中...'
  93. })
  94. this.$api('deleteLeader',{
  95. leaderId: this.currentPickupPoint.id
  96. }, res => {
  97. if (res.code === 200){
  98. uni.hideLoading()
  99. uni.showToast({
  100. title: `${res.message}`
  101. })
  102. }
  103. this.getLeaderList()
  104. })
  105. }
  106. }
  107. })
  108. },
  109. updateLeader(point) {
  110. uni.showModal({
  111. title: '确认选择',
  112. content: '您确定要选择该取餐点吗?需要平台审核通过后才能更换。',
  113. confirmColor: '#019245',
  114. success: (res) => {
  115. if (res.confirm) {
  116. uni.showLoading({
  117. title: '提交中...'
  118. })
  119. this.$api('updateLeader', {
  120. leaderId: point.id
  121. }, res => {
  122. if (res.code == 200) {
  123. uni.hideLoading()
  124. uni.showToast({
  125. title: `${res.message}`,
  126. icon: 'success',
  127. })
  128. }
  129. })
  130. }
  131. }
  132. })
  133. },
  134. getLeaderList() {
  135. // this.currentPickupPoint = currentPickupPoint
  136. this.$api('queryLeaderList', {}, res => {
  137. if (res.code == 200) {
  138. this.nearbyPickupPoints = res.result.records
  139. }
  140. })
  141. this.$api('queryMyLeader', {}, res => {
  142. if (res.code == 200) {
  143. this.currentPickupPoint = res.result
  144. } else if (res.code == 500 || !res.result) {
  145. this.isBind = false
  146. }
  147. })
  148. }
  149. },
  150. onLoad() {
  151. this.getLeaderList()
  152. }
  153. }
  154. </script>
  155. <style lang="scss" scoped>
  156. .page {
  157. // background-color: #f5f5f5;
  158. // min-height: 100vh;
  159. }
  160. .section {
  161. width: 96%;
  162. margin: 0 auto;
  163. margin-bottom: 20rpx;
  164. // border-radius: 10rpx;
  165. &-title {
  166. font-size: 32rpx;
  167. font-weight: bold;
  168. color: #333;
  169. padding: 30rpx 30rpx 20rpx;
  170. }
  171. }
  172. .pickup {
  173. &-item {
  174. background-color: #fff;
  175. padding: 20rpx 20rpx;
  176. display: flex;
  177. position: relative;
  178. margin-bottom: 2rpx;
  179. border-radius: 20rpx;
  180. }
  181. &-image {
  182. width: 170rpx;
  183. height: 170rpx;
  184. margin: auto 20rpx auto 0;
  185. overflow: hidden;
  186. image {
  187. width: 100%;
  188. height: 100%;
  189. }
  190. }
  191. &-info {
  192. flex: 1;
  193. display: flex;
  194. flex-direction: column;
  195. justify-content: space-between;
  196. }
  197. &-name {
  198. font-size: 30rpx;
  199. font-weight: bold;
  200. color: #3B3B3B;
  201. margin-bottom: 10rpx;
  202. }
  203. &-address, &-phone {
  204. font-size: 26rpx;
  205. color: $uni-color-third;
  206. display: flex;
  207. align-items: center;
  208. margin-bottom: 8rpx;
  209. width: 85%;
  210. text {
  211. margin-left: 8rpx;
  212. }
  213. &-icon {
  214. height: 100%;
  215. padding-top: 20rpx;
  216. }
  217. }
  218. }
  219. .status-icon {
  220. position: absolute;
  221. right: 30rpx;
  222. top: 50%;
  223. transform: translateY(-50%);
  224. }
  225. .select-btn {
  226. background-color: $uni-color;
  227. color: #fff;
  228. width: 100rpx;
  229. height: 60rpx;
  230. display: flex;
  231. justify-content: center;
  232. align-items: center;
  233. border-radius: 10rpx;
  234. align-self: center;
  235. font-size: 24rpx;
  236. }
  237. .warning-tip {
  238. background-color: #FFDBDB;
  239. // width: 90%;
  240. margin: 0rpx 40rpx 20rpx 30rpx;
  241. border-radius: 10rpx;
  242. padding: 15rpx 15rpx;
  243. display: flex;
  244. align-items: center;
  245. margin-bottom: 20rpx;
  246. text {
  247. font-size: 26rpx;
  248. color: $uni-color-second;
  249. margin-left: 10rpx;
  250. }
  251. }
  252. .pickup-list {
  253. gap: 20rpx;
  254. .pickup-item {
  255. margin-bottom: 20rpx;
  256. }
  257. }
  258. </style>