合完了

pages/Shopping-cart/component/addressSelected.vue

@@ -0,0 +1,139 @@
+<template>
+	
+	<view class="flex-col pos">
+		
+	 <view class="flex-row items-center section_2" v-if="isShow">
+	    <image
+	      class="shrink-0 image"
+	      src="./image/dw.png"
+	    />
+	    <view class="flex-col flex-1 group">
+	      <view class="flex-row items-baseline group_14">
+	        <text class="font text" style="margin-right: 15rpx;">{{ addressInfo.name }}</text>
+	        <text class="text_2">{{ addressInfo.phone }}</text>
+	      </view>
+	      <text class="font_2 text_3 mt-9">{{ addressInfo.region }} {{ addressInfo.detailAddress }}</text>
+	    </view>
+	    <image
+	      class="shrink-0 image_2 image_3"
+	      src="./image/yjt.png"
+	    />
+	  </view>
+	  
+	  
+	  <view class="flex-row justify-between items-center section_3 mt-9" v-if="!isShow">
+	    <view class="flex-row items-center">
+	      <image
+	        class="shrink-0 image"
+	        src="./image/dw.png"
+	      />
+	      <text class="font text_4 ml-11">请选择收货地址</text>
+	    </view>
+	    <image
+	      class="image_2"
+	      src="./image/yjt.png"
+	    />
+	  </view>
+	</view>
+</template>
+
+<script setup>
+	import {onMounted, onUnmounted, ref} from 'vue'
+import emitter from '../../../utils/emitter';
+import { JudgeIsNullity } from '../../../common/globalFunction';
+	const isShow = ref(false)
+	const addressInfo = ref({})
+	
+	const getAddressInfoHandler = (val) => {
+		addressInfo.value = val
+		isShow.value = !JudgeIsNullity(addressInfo.value.name)
+	}
+	
+	
+	const delAddressByIdHandler = (val) => {
+		if (addressInfo.value.id === val) {
+			isShow.value = false
+		}
+	}
+	
+	
+	onMounted(() => {
+		emitter.on('getAddressInfo', getAddressInfoHandler)
+		
+		emitter.on('delAddressById', delAddressByIdHandler)
+	})
+	
+	onUnmounted(() => {
+		
+		emitter.off('getAddressInfo', getAddressInfoHandler)
+		
+		emitter.off('delAddressById', delAddressByIdHandler)
+	})
+	
+</script>
+
+<style scoped lang="scss">
+	.mt-9 {
+	  margin-top: 5.88rpx;
+	}
+	.ml-11 {
+	  margin-left: 20.63rpx;
+	}
+	.section_2 {
+	  padding: 29.42rpx 20.63rpx 23.08rpx;
+	  background-color: #ffffff;
+	  border-radius: 18.75rpx;
+	}
+	.image {
+	  width: 43.13rpx;
+	  height: 43.13rpx;
+	}
+	.group {
+	  margin-left: 21.45rpx;
+	}
+	.group_14 {
+	  padding: 0 3.17rpx;
+	}
+	.font {
+	  font-size: 30rpx;
+	  font-family: FZSongKeBenXiuKaiS-R-GB;
+	  line-height: 25.54rpx;
+	}
+	.text {
+	  color: #323232;
+	  line-height: 25.89rpx;
+	}
+	.text_2 {
+	  color: #323232;
+	  font-size: 30rpx;
+	  font-family: FZSongKeBenXiuKaiS-R-GB;
+	  line-height: 20.04rpx;
+	}
+	.font_2 {
+	  font-size: 26.25rpx;
+	  font-family: FZSongKeBenXiuKaiS-R-GB;
+	  line-height: 25.54rpx;
+	  color: #323232;
+	}
+	.text_3 {
+	  color: #818181;
+	  line-height: 31.88rpx;
+	}
+	.image_2 {
+	  width: 24.38rpx;
+	  height: 24.38rpx;
+	}
+	.image_3 {
+	  margin-left: 38.55rpx;
+	}
+	.section_3 {
+	  padding: 31.88rpx 20.63rpx 30rpx;
+	  background-color: #ffffff;
+	  border-radius: 18.75rpx;
+	}
+	.text_4 {
+	  color: #818181;
+	  line-height: 29.06rpx;
+	}
+	@import url(../../../common/css/global.css);
+</style>