Authored by yyq

frame view

@@ -2,29 +2,41 @@ Component({ @@ -2,29 +2,41 @@ Component({
2 properties: { 2 properties: {
3 address: { 3 address: {
4 type: Object, 4 type: Object,
5 - value: '', 5 + value: {},
6 observer: '_addressChange' 6 observer: '_addressChange'
  7 + },
  8 + frame: {
  9 + type: Boolean,
  10 + value: false
7 } 11 }
8 }, 12 },
9 - data: {  
10 - address: {}  
11 - },  
12 methods: { 13 methods: {
13 _addressChange(address) { 14 _addressChange(address) {
14 - if (address && address.area && address.address) {  
15 - const length = 45;  
16 - let areaText = `${address.area} ${address.address}`; 15 + let frame = false;
  16 +
  17 + if (address) {
  18 + if (address.area && address.address) {
  19 + const length = 45;
  20 + let areaText = `${address.area} ${address.address}`;
17 21
18 - if (areaText.length > length) {  
19 - areaText = areaText.substring(0, length) + '...'; 22 + if (areaText.length > length) {
  23 + areaText = areaText.substring(0, length) + '...';
  24 + }
  25 +
  26 + address.areaText = areaText;
  27 + address.consignee = address.consignee || '';
  28 + address.mobile = address.mobile || '';
20 } 29 }
21 30
22 - address.areaText = areaText;  
23 - address.consignee = address.consignee || '';  
24 - address.mobile = address.mobile || ''; 31 + if (!address.consignee && !address.area && !address.address) {
  32 + frame = true;
  33 + }
25 } 34 }
26 35
27 - this.setData({address}); 36 + this.setData({
  37 + address,
  38 + frame
  39 + });
28 }, 40 },
29 chooseAddress() { 41 chooseAddress() {
30 this.triggerEvent('chooseAddress'); 42 this.triggerEvent('chooseAddress');
1 <view class="address-card"> 1 <view class="address-card">
2 - <view wx:if="{{address}}" class="address" bindtap="chooseAddress"> 2 + <view wx:if="{{address}}" class="address {{frame ? 'frame' : ''}}" bindtap="chooseAddress">
3 <text class="iconfont icon-location"></text> 3 <text class="iconfont icon-location"></text>
4 <view class="consignee"> 4 <view class="consignee">
5 <text class="name">{{address.consignee}}</text> 5 <text class="name">{{address.consignee}}</text>
@@ -43,7 +43,7 @@ @@ -43,7 +43,7 @@
43 43
44 .address .consignee .name, 44 .address .consignee .name,
45 .address .consignee .phone { 45 .address .consignee .phone {
46 - max-width: 40%; 46 + max-width: 34%;
47 text-overflow: ellipsis; 47 text-overflow: ellipsis;
48 white-space: nowrap; 48 white-space: nowrap;
49 overflow: hidden; 49 overflow: hidden;
@@ -93,3 +93,12 @@ @@ -93,3 +93,12 @@
93 height: 1rpx; 93 height: 1rpx;
94 background: #e0e0e0; 94 background: #e0e0e0;
95 } 95 }
  96 +
  97 +.address.frame .name,
  98 +.address.frame .phone,
  99 +.address.frame .direction{
  100 + width: 100%;
  101 + height: 36rpx;
  102 + background-color: #f3f3f3;
  103 + color: #f3f3f3;
  104 +}
@@ -7,6 +7,10 @@ Component({ @@ -7,6 +7,10 @@ Component({
7 index: { 7 index: {
8 type: Number, 8 type: Number,
9 value: 0 9 value: 0
  10 + },
  11 + frame: {
  12 + type: Boolean,
  13 + value: false
10 } 14 }
11 }, 15 },
12 methods: { 16 methods: {
1 <wxs src="../../../wxs/helper.wxs" module="helper" /> 1 <wxs src="../../../wxs/helper.wxs" module="helper" />
2 2
3 -<view class="goods-item {{index ? '' : 'top-none'}}" bindtap="itemTapped">  
4 - <image class="thumb" src="{{helper.image(item.goods_images || item.goods_image, 76, 100)}}"></image>  
5 - <view class="goods-type price-gift-tag" wx:if="{{item.goods_type === 'price_gift'}}">  
6 - <text>加价购</text>  
7 - </view>  
8 - <view class="goods-type gift-tag" wx:if="{{item.goods_type === 'gift'}}">  
9 - <text>赠品</text> 3 +<view class="goods-item {{index ? '' : 'top-none'}} {{frame ? 'frame' : ''}}" bindtap="itemTapped">
  4 + <view class="thumb">
  5 + <image class="thumb" src="{{helper.image(item.goods_images || item.goods_image, 76, 100)}}"></image>
  6 + <view class="goods-type price-gift-tag" wx:if="{{item.goods_type === 'price_gift'}}">
  7 + <text>加价购</text>
  8 + </view>
  9 + <view class="goods-type gift-tag" wx:if="{{item.goods_type === 'gift'}}">
  10 + <text>赠品</text>
  11 + </view>
10 </view> 12 </view>
11 <view class="name-price"> 13 <view class="name-price">
12 <text class="name item-left">{{item.product_name}}</text> 14 <text class="name item-left">{{item.product_name}}</text>
@@ -9,6 +9,10 @@ @@ -9,6 +9,10 @@
9 position: relative; 9 position: relative;
10 } 10 }
11 11
  12 +.goods-item .red {
  13 + color: #d0021b;
  14 +}
  15 +
12 .goods-item.top-none { 16 .goods-item.top-none {
13 border-top: 0; 17 border-top: 0;
14 } 18 }
@@ -16,11 +20,18 @@ @@ -16,11 +20,18 @@
16 .goods-item .thumb { 20 .goods-item .thumb {
17 width: 150rpx; 21 width: 150rpx;
18 height: 200rpx; 22 height: 200rpx;
  23 + background-color: #f3f3f3;
19 position: absolute; 24 position: absolute;
20 left: 0; 25 left: 0;
21 } 26 }
22 27
23 -.goods-item .goods-type { 28 +.goods-item .thumb image {
  29 + display: block;
  30 + width: 100%;
  31 + height: 100%;
  32 +}
  33 +
  34 +.goods-item .thumb .goods-type {
24 width: 150rpx; 35 width: 150rpx;
25 height: 30rpx; 36 height: 30rpx;
26 line-height: 30rpx; 37 line-height: 30rpx;
@@ -30,15 +41,15 @@ @@ -30,15 +41,15 @@
30 text-align: center; 41 text-align: center;
31 position: absolute; 42 position: absolute;
32 left: 0; 43 left: 0;
33 - bottom: 20rpx; 44 + bottom: 0;
34 } 45 }
35 46
36 -.goods-item .price-gift-tag {  
37 - background-color: #85c45c; 47 +.goods-item .thumb .price-gift-tag {
  48 + background-color: #fc1261;
38 } 49 }
39 50
40 -.goods-item .gift-tag {  
41 - background-color: #fc1261; 51 +.goods-item .thumb .gift-tag {
  52 + background-color: #85c45c;
42 } 53 }
43 54
44 .goods-item .name-price { 55 .goods-item .name-price {
@@ -66,3 +77,25 @@ @@ -66,3 +77,25 @@
66 .goods-item .item-right { 77 .goods-item .item-right {
67 float: right; 78 float: right;
68 } 79 }
  80 +
  81 +.frame.goods-item .name,
  82 +.frame.goods-item .price,
  83 +.frame.goods-item .color-size,
  84 +.frame.goods-item .num {
  85 + width: 100%;
  86 + height: 36rpx;
  87 + background-color: #f3f3f3;
  88 + color: #f3f3f3;
  89 +}
  90 +
  91 +.frame.goods-item .price {
  92 + width: 100rpx;
  93 +}
  94 +
  95 +.frame.goods-item .color-size {
  96 + width: 50%;
  97 +}
  98 +
  99 +.frame.goods-item .num {
  100 + width: 60rpx;
  101 +}
@@ -142,6 +142,12 @@ Page({ @@ -142,6 +142,12 @@ Page({
142 }); 142 });
143 143
144 this.setData(data); 144 this.setData(data);
  145 + }).catch(() => {
  146 + wx.showModal({
  147 + content: '网络异常,请稍后重试',
  148 + showCancel: false,
  149 + confirmText: '好的',
  150 + });
145 }); 151 });
146 } 152 }
147 }, 153 },
@@ -6,7 +6,10 @@ @@ -6,7 +6,10 @@
6 </view> 6 </view>
7 <view class="split-line"></view> 7 <view class="split-line"></view>
8 <view class="goods-list"> 8 <view class="goods-list">
9 - <order-item wx:for="{{goodsList}}" wx:key="unique" item="{{item}}" index="{{index}}"></order-item> 9 + <block wx:if="{{goodsList.length}}">
  10 + <order-item wx:for="{{goodsList}}" wx:key="unique" item="{{item}}" index="{{index}}"></order-item>
  11 + </block>
  12 + <order-item wx:else frame="true"></order-item>
10 </view> 13 </view>
11 <view class="split-line"></view> 14 <view class="split-line"></view>
12 <view class="choose-wrap"> 15 <view class="choose-wrap">