addressSelection.vue 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265
  1. <!-- 下单界面,收货地址 or 自提门店的选择组件 -->
  2. <template>
  3. <view class="allAddress">
  4. <view
  5. class="address flex flex-wrap flex-center ss-row-between"
  6. @tap="onSelectAddress"
  7. v-if="state.deliveryType === 1"
  8. >
  9. <view class="addressCon" v-if="state.addressInfo.name">
  10. <view class="name"
  11. >{{ state.addressInfo.name }}
  12. <text class="phone">{{ state.addressInfo.mobile }}</text>
  13. </view>
  14. <view>
  15. <text class="default font-color" v-if="state.addressInfo.defaultStatus">[默认]</text>
  16. <text class="line2">
  17. {{ state.addressInfo.areaName }} {{ state.addressInfo.detailAddress }}
  18. </text>
  19. </view>
  20. </view>
  21. <view class="addressCon" v-else>
  22. <view class="setaddress">设置收货地址</view>
  23. </view>
  24. <view class="iconfont">
  25. <view class="ss-rest-button">
  26. <text class="_icon-forward" />
  27. </view>
  28. </view>
  29. </view>
  30. <!-- 情况二:门店的选择 -->
  31. <view
  32. class="address flex flex-wrap flex-center ss-row-between"
  33. v-if="state.deliveryType === 2"
  34. @tap="onSelectAddress"
  35. >
  36. <view class="addressCon" v-if="state.pickUpInfo.name">
  37. <view class="name"
  38. >{{ state.pickUpInfo.name }}
  39. <text class="phone">{{ state.pickUpInfo.phone }}</text>
  40. </view>
  41. <view class="line1">
  42. {{ state.pickUpInfo.areaName }}{{ ', ' + state.pickUpInfo.detailAddress }}
  43. </view>
  44. </view>
  45. <view class="addressCon" v-else>
  46. <view class="setaddress">选择自提门店</view>
  47. </view>
  48. <view class="iconfont">
  49. <view class="ss-rest-button">
  50. <text class="_icon-forward" />
  51. </view>
  52. </view>
  53. </view>
  54. <!-- <view class="line">
  55. <image :src="sheep.$url.static('/static/images/line.png', 'local')" />
  56. </view> -->
  57. </view>
  58. </template>
  59. <script setup>
  60. import { computed } from 'vue';
  61. import sheep from '@/sheep';
  62. import { isEmpty } from 'lodash-es';
  63. const props = defineProps({
  64. modelValue: {
  65. type: Object,
  66. default() {},
  67. },
  68. });
  69. const emits = defineEmits(['update:modelValue']);
  70. // computed 解决父子组件双向数据同步
  71. const state = computed({
  72. get() {
  73. return new Proxy(props.modelValue, {
  74. set(obj, name, val) {
  75. emits('update:modelValue', {
  76. ...obj,
  77. [name]: val,
  78. });
  79. return true;
  80. },
  81. });
  82. },
  83. set(val) {
  84. emits('update:modelValue', val);
  85. },
  86. });
  87. // 选择地址
  88. function onSelectAddress() {
  89. let emitName = 'SELECT_ADDRESS';
  90. let addressPage = '/pages/user/address/list?type=select';
  91. if (state.value.deliveryType === 2) {
  92. emitName = 'SELECT_PICK_UP_INFO';
  93. addressPage = '/pages/user/goods_details_store/index';
  94. }
  95. uni.$once(emitName, (e) => {
  96. changeConsignee(e.addressInfo);
  97. });
  98. sheep.$router.go(addressPage);
  99. }
  100. // 更改收货人地址&计算订单信息
  101. async function changeConsignee(addressInfo = {}) {
  102. if (!isEmpty(addressInfo)) {
  103. if (state.value.deliveryType === 1) {
  104. state.value.addressInfo = addressInfo;
  105. }
  106. if (state.value.deliveryType === 2) {
  107. state.value.pickUpInfo = addressInfo;
  108. }
  109. }
  110. }
  111. // 收货方式切换
  112. const switchDeliveryType = (type) => {
  113. state.value.deliveryType = type;
  114. };
  115. </script>
  116. <style scoped lang="scss">
  117. .allAddress .font-color {
  118. color: #e93323 !important;
  119. }
  120. .line2 {
  121. width: 458rpx;
  122. }
  123. .textR {
  124. text-align: right;
  125. }
  126. .line {
  127. width: 100%;
  128. height: 3rpx;
  129. }
  130. .line image {
  131. width: 100%;
  132. height: 100%;
  133. display: block;
  134. }
  135. .address {
  136. padding: 28rpx;
  137. background-color: #fff;
  138. box-sizing: border-box;
  139. }
  140. .address .addressCon {
  141. // width: 596rpx;
  142. font-size: 26rpx;
  143. color: #666;
  144. flex: 1;
  145. }
  146. .address .addressCon .name {
  147. font-size: 30rpx;
  148. color: #282828;
  149. font-weight: bold;
  150. margin-bottom: 10rpx;
  151. }
  152. .address .addressCon .name .phone {
  153. margin-left: 50rpx;
  154. }
  155. .address .addressCon .default {
  156. margin-right: 12rpx;
  157. }
  158. .address .addressCon .setaddress {
  159. color: #333;
  160. font-size: 28rpx;
  161. }
  162. .address .iconfont {
  163. font-size: 35rpx;
  164. color: #707070;
  165. }
  166. .allAddress {
  167. width: 100%;
  168. background: #00B760;
  169. // padding-bottom: 10rpx;
  170. // padding-top: 50rpx;
  171. }
  172. .allAddress .nav {
  173. width: 690rpx;
  174. margin: 0 auto;
  175. }
  176. .allAddress .nav .item {
  177. width: 334rpx;
  178. }
  179. .allAddress .nav .item.on {
  180. position: relative;
  181. width: 230rpx;
  182. }
  183. .allAddress .nav .item.on::before {
  184. position: absolute;
  185. bottom: 0;
  186. content: '快递配送';
  187. font-size: 28rpx;
  188. display: block;
  189. height: 0;
  190. width: 336rpx;
  191. border-width: 0 20rpx 80rpx 0;
  192. border-style: none solid solid;
  193. border-color: transparent transparent #fff;
  194. z-index: 2;
  195. border-radius: 14rpx 36rpx 0 0;
  196. text-align: center;
  197. line-height: 80rpx;
  198. }
  199. .allAddress .nav .item:nth-of-type(2).on::before {
  200. content: '到店自提';
  201. border-width: 0 0 80rpx 20rpx;
  202. border-radius: 36rpx 14rpx 0 0;
  203. }
  204. .allAddress .nav .item.on2 {
  205. position: relative;
  206. }
  207. .allAddress .nav .item.on2::before {
  208. position: absolute;
  209. bottom: 0;
  210. content: '到店自提';
  211. font-size: 28rpx;
  212. display: block;
  213. height: 0;
  214. width: 401rpx;
  215. border-width: 0 0 60rpx 60rpx;
  216. border-style: none solid solid;
  217. border-color: transparent transparent #f7c1bd;
  218. border-radius: 36rpx 14rpx 0 0;
  219. text-align: center;
  220. line-height: 60rpx;
  221. }
  222. .allAddress .nav .item:nth-of-type(1).on2::before {
  223. content: '快递配送';
  224. border-width: 0 60rpx 60rpx 0;
  225. border-radius: 14rpx 36rpx 0 0;
  226. }
  227. .allAddress .address {
  228. // width: 690rpx;
  229. width: calc(100% - 16rpx);
  230. max-height: 180rpx;
  231. margin: 0 auto;
  232. margin-bottom: 15rpx;
  233. }
  234. .allAddress .line {
  235. width: 100%;
  236. margin: 0 auto;
  237. }
  238. </style>