通过微信开发者工具 商城模板 创建新小程序

mini-program/pages/order/order-confirm/components/address-card/index.js

@@ -0,0 +1,25 @@
+/*
+ * @Author: rileycai
+ * @Date: 2022-03-05 16:47:16
+ * @LastEditTime: 2022-03-05 16:48:32
+ * @LastEditors: rileycai
+ * @Description:
+ * @FilePath: /tdesign-miniprogram-starter/pages/order/order-confirm/components/address-card/index.js
+ */
+Component({
+  externalClasses: ['wr-class'],
+  properties: {
+    addressData: {
+      type: Object,
+      value: {},
+    },
+  },
+  methods: {
+    onAddressTap() {
+      this.triggerEvent('addressclick');
+    },
+    onAddTap() {
+      this.triggerEvent('addclick');
+    },
+  },
+});

mini-program/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"
+  }
+}

mini-program/pages/order/order-confirm/components/address-card/index.wxml

@@ -0,0 +1,46 @@
+<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="{{addressData && addressData.detailAddress}}" 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="{{addressData.addressTag}}">
+						{{addressData.addressTag}}
+					</view>
+					{{addressData.provinceName}} {{addressData.cityName}} {{addressData.districtName}}
+				</view>
+				<view class="detail">{{addressData.detailAddress}}</view>
+				<view class="info">
+					{{addressData.name}} {{utils.hidePhoneNum(addressData.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>
+

mini-program/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://cdn-we-retail.ym.tencent.com/miniapp/order/stripe.png);
+  background-repeat: repeat-x;
+  display: block;
+}