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

237 lines
6.7 KiB

  1. <template>
  2. <view class="page">
  3. <!-- 导航栏 -->
  4. <navbar title="解绑团长" leftClick @leftClick="$utils.navigateBack" bgColor="#019245" color="#fff" />
  5. <!-- 当前取餐点 -->
  6. <view class="section">
  7. <view class="section-title">当前取餐点</view>
  8. <view class="pickup-item" v-if="currentPickupPoint">
  9. <view class="pickup-image">
  10. <image :src="currentPickupPoint.image" mode="aspectFill"></image>
  11. </view>
  12. <view class="pickup-info">
  13. <view class="pickup-name">{{ currentPickupPoint.name }}</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.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="status-icon">
  26. <uv-icon name="checkmark-circle-fill" color="#019245" size="40"></uv-icon>
  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>更换取餐地址和团长,需通过平台审核方可更换!</text>
  37. </view>
  38. <!-- 取餐点列表 -->
  39. <view class="pickup-list">
  40. <view class="pickup-item" v-for="(item, index) in nearbyPickupPoints" :key="index">
  41. <view class="pickup-image">
  42. <image :src="item.image" mode="aspectFill"></image>
  43. </view>
  44. <view class="pickup-info">
  45. <view class="pickup-name">{{ item.name }}</view>
  46. <view class="pickup-address">
  47. <view class="pickup-address-icon">
  48. <uv-icon name="map-fill" color="#019245" size="24"></uv-icon>
  49. </view>
  50. <text>{{ item.address }}</text>
  51. </view>
  52. <view class="pickup-phone">
  53. <uv-icon name="phone-fill" color="#019245" size="24"></uv-icon>
  54. <text>{{ item.phone }}</text>
  55. </view>
  56. </view>
  57. <view class="select-btn" @click="selectPickupPoint(item)">
  58. <text>选择</text>
  59. </view>
  60. </view>
  61. </view>
  62. </view>
  63. </view>
  64. </template>
  65. <script>
  66. import navbar from '@/components/base/navbar.vue'
  67. import { currentPickupPoint, nearbyPickupPoints } from '@/static/js/mockTeam.js'
  68. export default {
  69. components: {
  70. navbar
  71. },
  72. data() {
  73. return {
  74. // 当前取餐点
  75. currentPickupPoint:{},
  76. // 附近取餐点列表
  77. nearbyPickupPoints:[]
  78. }
  79. },
  80. methods: {
  81. // 选择取餐点
  82. selectPickupPoint(point) {
  83. uni.showModal({
  84. title: '确认选择',
  85. content: '您确定要选择该取餐点吗?需要平台审核通过后才能更换。',
  86. confirmColor: '#019245',
  87. success: (res) => {
  88. if (res.confirm) {
  89. uni.showLoading({
  90. title: '提交中...'
  91. })
  92. setTimeout(() => {
  93. uni.hideLoading()
  94. uni.showToast({
  95. title: '申请已提交,等待平台审核',
  96. icon: 'none',
  97. })
  98. setTimeout(() => {
  99. this.$utils.navigateBack()
  100. }, 1400)
  101. }, 1000)
  102. // 返回上一页
  103. }
  104. }
  105. })
  106. }
  107. },
  108. onLoad() {
  109. this.currentPickupPoint = currentPickupPoint
  110. this.nearbyPickupPoints = nearbyPickupPoints
  111. }
  112. }
  113. </script>
  114. <style lang="scss" scoped>
  115. .page {
  116. // background-color: #f5f5f5;
  117. // min-height: 100vh;
  118. }
  119. .section {
  120. width: 96%;
  121. margin: 0 auto;
  122. margin-bottom: 20rpx;
  123. // border-radius: 10rpx;
  124. &-title {
  125. font-size: 32rpx;
  126. font-weight: bold;
  127. color: #333;
  128. padding: 30rpx 30rpx 20rpx;
  129. }
  130. }
  131. .pickup {
  132. &-item {
  133. background-color: #fff;
  134. padding: 20rpx 20rpx;
  135. display: flex;
  136. position: relative;
  137. margin-bottom: 2rpx;
  138. border-radius: 20rpx;
  139. }
  140. &-image {
  141. width: 170rpx;
  142. height: 170rpx;
  143. margin: auto 20rpx auto 0;
  144. overflow: hidden;
  145. image {
  146. width: 100%;
  147. height: 100%;
  148. }
  149. }
  150. &-info {
  151. flex: 1;
  152. display: flex;
  153. flex-direction: column;
  154. justify-content: space-between;
  155. }
  156. &-name {
  157. font-size: 30rpx;
  158. font-weight: bold;
  159. color: #3B3B3B;
  160. margin-bottom: 10rpx;
  161. }
  162. &-address, &-phone {
  163. font-size: 26rpx;
  164. color: $uni-color-third;
  165. display: flex;
  166. align-items: center;
  167. margin-bottom: 8rpx;
  168. width: 85%;
  169. text {
  170. margin-left: 8rpx;
  171. }
  172. &-icon {
  173. height: 100%;
  174. padding-top: 20rpx;
  175. }
  176. }
  177. }
  178. .status-icon {
  179. position: absolute;
  180. right: 30rpx;
  181. top: 50%;
  182. transform: translateY(-50%);
  183. }
  184. .select-btn {
  185. background-color: $uni-color;
  186. color: #fff;
  187. width: 100rpx;
  188. height: 60rpx;
  189. display: flex;
  190. justify-content: center;
  191. align-items: center;
  192. border-radius: 10rpx;
  193. align-self: center;
  194. font-size: 24rpx;
  195. }
  196. .warning-tip {
  197. background-color: #FFDBDB;
  198. // width: 90%;
  199. margin: 0rpx 40rpx 20rpx 30rpx;
  200. border-radius: 10rpx;
  201. padding: 15rpx 15rpx;
  202. display: flex;
  203. align-items: center;
  204. margin-bottom: 20rpx;
  205. text {
  206. font-size: 26rpx;
  207. color: $uni-color-second;
  208. margin-left: 10rpx;
  209. }
  210. }
  211. .pickup-list {
  212. gap: 20rpx;
  213. .pickup-item {
  214. margin-bottom: 20rpx;
  215. }
  216. }
  217. </style>