frame view

@@ -2,29 +2,41 @@ Component({
     properties: {
         address: {
             type: Object,
-            value: '',
+            value: {},
             observer: '_addressChange'
+        },
+        frame: {
+            type: Boolean,
+            value: false
         }
     },
-    data: {
-        address: {}
-    },
     methods: {
         _addressChange(address) {
-            if (address && address.area && address.address) {
-                const length = 45;
-                let areaText = `${address.area} ${address.address}`;
+            let frame = false;
+
+            if (address) {
+                if (address.area && address.address) {
+                    const length = 45;
+                    let areaText = `${address.area} ${address.address}`;
 
-                if (areaText.length > length) {
-                    areaText = areaText.substring(0, length) + '...';
+                    if (areaText.length > length) {
+                        areaText = areaText.substring(0, length) + '...';
+                    }
+
+                    address.areaText = areaText;
+                    address.consignee = address.consignee || '';
+                    address.mobile = address.mobile || '';
                 }
 
-                address.areaText = areaText;
-                address.consignee = address.consignee || '';
-                address.mobile = address.mobile || '';
+                if (!address.consignee && !address.area && !address.address) {
+                    frame = true;
+                }
             }
 
-            this.setData({address});
+            this.setData({
+                address,
+                frame
+            });
         },
         chooseAddress() {
             this.triggerEvent('chooseAddress');

 <view class="address-card">
-    <view wx:if="{{address}}" class="address" bindtap="chooseAddress">
+    <view wx:if="{{address}}" class="address {{frame ? 'frame' : ''}}" bindtap="chooseAddress">
         <text class="iconfont icon-location"></text>
         <view class="consignee">
             <text class="name">{{address.consignee}}</text>

@@ -43,7 +43,7 @@
 
 .address .consignee .name,
 .address .consignee .phone {
-    max-width: 40%;
+    max-width: 34%;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
@@ -93,3 +93,12 @@
     height: 1rpx;
     background: #e0e0e0;
 }
+
+.address.frame .name,
+.address.frame .phone,
+.address.frame .direction{
+    width: 100%;
+    height: 36rpx;
+    background-color: #f3f3f3;
+    color: #f3f3f3;
+}

@@ -7,6 +7,10 @@ Component({
         index: {
             type: Number,
             value: 0
+        },
+        frame: {
+            type: Boolean,
+            value: false
         }
     },
     methods: {

 <wxs src="../../../wxs/helper.wxs" module="helper" />
 
-<view class="goods-item {{index ? '' : 'top-none'}}" bindtap="itemTapped">
-    <image class="thumb" src="{{helper.image(item.goods_images || item.goods_image, 76, 100)}}"></image>
-    <view class="goods-type price-gift-tag" wx:if="{{item.goods_type === 'price_gift'}}">
-        <text>加价购</text>
-    </view>
-    <view class="goods-type gift-tag" wx:if="{{item.goods_type === 'gift'}}">
-        <text>赠品</text>
+<view class="goods-item {{index ? '' : 'top-none'}} {{frame ? 'frame' : ''}}" bindtap="itemTapped">
+    <view class="thumb">
+        <image class="thumb" src="{{helper.image(item.goods_images || item.goods_image, 76, 100)}}"></image>
+        <view class="goods-type price-gift-tag" wx:if="{{item.goods_type === 'price_gift'}}">
+            <text>加价购</text>
+        </view>
+        <view class="goods-type gift-tag" wx:if="{{item.goods_type === 'gift'}}">
+            <text>赠品</text>
+        </view>
     </view>
     <view class="name-price">
         <text class="name item-left">{{item.product_name}}</text>

@@ -9,6 +9,10 @@
     position: relative;
 }
 
+.goods-item .red {
+    color: #d0021b;
+}
+
 .goods-item.top-none {
     border-top: 0;
 }
@@ -16,11 +20,18 @@
 .goods-item .thumb {
     width: 150rpx;
     height: 200rpx;
+    background-color: #f3f3f3;
     position: absolute;
     left: 0;
 }
 
-.goods-item .goods-type {
+.goods-item .thumb image {
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+
+.goods-item .thumb .goods-type {
     width: 150rpx;
     height: 30rpx;
     line-height: 30rpx;
@@ -30,15 +41,15 @@
     text-align: center;
     position: absolute;
     left: 0;
-    bottom: 20rpx;
+    bottom: 0;
 }
 
-.goods-item .price-gift-tag {
-    background-color: #85c45c;
+.goods-item .thumb .price-gift-tag {
+    background-color: #fc1261;
 }
 
-.goods-item .gift-tag {
-    background-color: #fc1261;
+.goods-item .thumb .gift-tag {
+    background-color: #85c45c;
 }
 
 .goods-item .name-price {
@@ -66,3 +77,25 @@
 .goods-item .item-right {
     float: right;
 }
+
+.frame.goods-item .name,
+.frame.goods-item .price,
+.frame.goods-item .color-size,
+.frame.goods-item .num {
+    width: 100%;
+    height: 36rpx;
+    background-color: #f3f3f3;
+    color: #f3f3f3;
+}
+
+.frame.goods-item .price {
+    width: 100rpx;
+}
+
+.frame.goods-item .color-size {
+    width: 50%;
+}
+
+.frame.goods-item .num {
+    width: 60rpx;
+}

@@ -142,6 +142,12 @@ Page({
                 });
 
                 this.setData(data);
+            }).catch(() => {
+                wx.showModal({
+                    content: '网络异常，请稍后重试',
+                    showCancel: false,
+                    confirmText: '好的',
+                });
             });
         }
     },

@@ -6,7 +6,10 @@
     </view>
     <view class="split-line"></view>
     <view class="goods-list">
-        <order-item wx:for="{{goodsList}}" wx:key="unique" item="{{item}}" index="{{index}}"></order-item>
+        <block wx:if="{{goodsList.length}}">
+            <order-item wx:for="{{goodsList}}" wx:key="unique" item="{{item}}" index="{{index}}"></order-item>
+        </block>
+        <order-item wx:else frame="true"></order-item>
     </view>
     <view class="split-line"></view>
     <view class="choose-wrap">