init

miniprogram/pages/order/order-confirm/components/address-card/index.js

@@ -0,0 +1,46 @@
+Component({
+  externalClasses: ['wr-class'],
+  properties: {
+    addressData: {
+      type: Object,
+      value: {},
+      observer: function(newVal, oldVal) {
+        // 确保数据正确传递到模板
+        if (newVal && Object.keys(newVal).length > 0) {
+          const processedAddress = {
+            ...newVal,
+            // 确保区域信息字段存在
+            provinceName: newVal.provinceName || '',
+            cityName: newVal.cityName || '',
+            districtName: newVal.districtName || '',
+            detailAddress: newVal.detailAddress || '',
+            name: newVal.name || '',
+            phone: newVal.phone || '',
+            addressTag: newVal.addressTag || ''
+          };
+          
+          // 直接设置到组件的data中，确保模板能访问
+          this.setData({
+            currentAddress: processedAddress
+          });
+        } else {
+          // 如果没有地址数据，设置为空对象而不是null，这样模板的条件判断能正确工作
+          this.setData({
+            currentAddress: {}
+          });
+        }
+      }
+    },
+  },
+  data: {
+    currentAddress: {}
+  },
+  methods: {
+    onAddressTap() {
+      this.triggerEvent('addressclick');
+    },
+    onAddTap() {
+      this.triggerEvent('addclick');
+    },
+  },
+});

miniprogram/pages/order/order-confirm/components/address-card/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-cell": "tdesign-miniprogram/cell/cell",
+    "t-icon": "tdesign-miniprogram/icon/icon"
+  }
+}

miniprogram/pages/order/order-confirm/components/address-card/index.wxml

@@ -0,0 +1,51 @@
+<wxs module="utils">
+	var hidePhoneNum = function(array) {
+	if (!array) return;
+	var mphone = array.substring(0, 3) + '****' + array.substring(7);
+	return mphone;
+	}
+	module.exports = {
+	hidePhoneNum:hidePhoneNum
+	}
+</wxs>
+
+<view class="address-card wr-class">
+	<t-cell wx:if="{{currentAddress && (currentAddress.detailAddress || currentAddress.name)}}" bindtap="onAddressTap" hover>
+		<view class="order-address" slot="title">
+			<t-icon name="location" color="#333333" size="40rpx" />
+			<view class="address-content">
+				<view class="title">
+					<view class="address-tag" wx:if="{{currentAddress.addressTag}}">
+						{{currentAddress.addressTag}}
+					</view>
+					<view style="margin-top: 10rpx;">
+						<text wx:if="{{currentAddress.provinceName}}">{{currentAddress.provinceName}}</text>
+						<text wx:if="{{currentAddress.cityName}}"> {{currentAddress.cityName}}</text>
+						<text wx:if="{{currentAddress.districtName}}"> {{currentAddress.districtName}}</text>
+					</view>
+
+				</view>
+				<view class="detail">{{currentAddress.detailAddress}}</view>
+				<view class="info">
+					{{currentAddress.name}} {{utils.hidePhoneNum(currentAddress.phone)}}
+				</view>
+			</view>
+			<t-icon
+			 class="address__right"
+			 name="chevron-right"
+			 color="#BBBBBB"
+			 size="40rpx"
+			/>
+		</view>
+	</t-cell>
+	<t-cell
+	 wx:else
+	 bindtap="onAddTap"
+	 title="添加收货地址"
+	 hover
+	>
+		<t-icon name="add-circle" slot="left-icon" size="40rpx" />
+	</t-cell>
+	<view class="top-line" />
+</view>
+

miniprogram/pages/order/order-confirm/components/address-card/index.wxss

@@ -0,0 +1,66 @@
+.address-card {
+  background: #fff;
+  margin: 0rpx 0rpx 24rpx;
+}
+.address-card .wr-cell__title {
+  color: #999;
+  margin-left: 6rpx;
+}
+.address-card .order-address {
+  display: flex;
+  width: 100%;
+}
+.address-card .order-address .address-content {
+  flex: 1;
+}
+.order-address .address__right {
+  align-self: center;
+}
+.address-card .order-address .title {
+  display: flex;
+  align-items: center;
+  height: 40rpx;
+  font-size: 28rpx;
+  font-weight: normal;
+  color: #999999;
+  line-height: 40rpx;
+}
+.address-card .order-address .title .address-tag {
+  width: 52rpx;
+  height: 29rpx;
+  border: 1rpx solid #0091ff;
+  background-color: rgba(122, 167, 251, 0.1);
+  text-align: center;
+  line-height: 29rpx;
+  border-radius: 8rpx;
+  color: #0091ff;
+  font-size: 20rpx;
+  margin-right: 12rpx;
+}
+.address-card .order-address .detail {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #333333;
+  line-height: 48rpx;
+  margin: 8rpx 0;
+}
+.address-card .order-address .info {
+  height: 40rpx;
+  font-size: 28rpx;
+  font-weight: normal;
+  color: #333333;
+  line-height: 40rpx;
+}
+.address-card .top-line {
+  width: 100%;
+  height: 6rpx;
+  background-color: #fff;
+  background-image: url(https://tdesign.gtimg.com/miniprogram/template/retail/order/stripe.png);
+  background-repeat: repeat-x;
+  display: block;
+}