feat: 对接填写地址页面

src/components/avatorGroup.vue

 <template>
   <div class="avator-group">
     <div v-for="(item, index) in avators" :key="index" class="avator-item" :style="widthStyle">
-      <cr-image width="44px" :src="item" />
+      <cr-image :class="{ avator: index == 0 }" width="44px" :src="item" />
       <div v-if="index == 0" class="is-leader">
         <cr-image width="48px" src="@/assets/images/leader.png" />
       </div>
@@ -68,6 +68,12 @@ export default {
     width: 20%;
     height: 44px;
     margin-top: @padding-lg;
+    .avator {
+      border: 2px solid #ffd93d;
+      // border: px solid rgba(255, 212, 0, 0.24);
+      border-radius: 50%;
+      box-sizing: border-box;
+    }
     .is-new {
       position: absolute;
       top: 0;

src/views/goodsDetail/index.vue

@@ -139,7 +139,7 @@
           </div>
         </div>
         <div class="goods-area-button">
-          <button class="goods-bottom-buy" @click="toOrder">立即购买</button>
+          <button class="goods-bottom-buy" @click="toOrder">确认</button>
         </div>
       </div>
       <div v-if="currentPopupType === 'area'" class="goods-area">
@@ -158,9 +158,9 @@
           </div>
         </div>
         <span v-else class="goods-area-none">暂未添加地址哦～</span>
-        <!-- <div class="goods-area-button" @click="addAddress"> -->
-        <!-- <button class="goods-bottom-buy btn-absolute">添加新地址</button> -->
-        <!-- </div> -->
+        <div class="goods-area-button" @click="addAddress">
+          <button class="goods-bottom-buy btn-absolute">添加新地址</button>
+        </div>
       </div>
     </cr-popup>
     <bottom-nav type="shoppingCar" :disabled="false" @buy="goVccOrDetail" />
@@ -283,7 +283,15 @@ export default {
       if (res.stock === 0) {
         this.detailInfo.limitCount = 1;
         this.detailInfo.activityLimitCount = 0;
-        this.$toast('库存不足！');
+        this.$dialog({
+          message: '哎呀，活动太火爆，该商品已经卖光，换一个商品试试吧！',
+          title: '',
+          showCancelButton: false,
+          confirmButtonText: '查看其他商品',
+          onConfirm: () => {
+            this.$router.push({ name: 'groupBuyList' });
+          }
+        });
       }
       this.selectedAddress = res.receiverInfo || {};
       this.specList = res.skuAtts || [];
@@ -312,19 +320,18 @@ export default {
       if (addressInfo) {
         this.addressList = (addressInfo && addressInfo.addrReceiverList) || [];
         this.show = true;
+      } else {
+        this.addAddress();
+      }
+    },
+    addAddress() {
+      if (!this.hasLogin) {
+        this.$router.push({ name: 'login' });
+        return;
       }
-      //  else {
-      //   this.addAddress();
-      // }
+      this.show = false;
+      this.$router.push({ name: 'addressManage' });
     },
-    // addAddress() {
-    //   if (!this.hasLogin) {
-    //     this.$router.push({ name: 'login' });
-    //     return;
-    //   }
-    //   this.show = false;
-    //   this.$router.push({ name: 'addressManage' });
-    // },
     toOrder() {
       if (!this.hasLogin) {
         this.$router.push({ name: 'login' });
@@ -335,6 +342,7 @@ export default {
         return;
       }
       this.show = false;
+      console.log(this.selectedAddress);
       const order = {
         addrReceiverId: this.selectedAddress.addrReceiverId || '',
         selectedSkuList: [
@@ -350,8 +358,9 @@ export default {
         defaultUseActivityCoupon: true,
         couponActivityUseIdList: []
       };
-      window.localStorage.setItem('orderData', order);
+      window.localStorage.setItem('orderData', JSON.stringify(order));
       window.localStorage.removeItem('addressList');
+      this.$router.push({ name: 'createOrder' });
     },
     changeAddress(address) {
       // 选取规格需要清空，init会重新赋值
@@ -430,12 +439,6 @@ export default {
         case 'area':
           this.areaPopup();
           break;
-        case 'coupon':
-          this.show = true;
-          break;
-        case 'service':
-          this.show = true;
-          break;
         default:
           break;
       }

src/views/goodsDetail/smallPic.less

@@ -45,24 +45,15 @@
 
 .goods {
   &-red-bg{ // 用于小图详情页
-    width: 100%;
-    height: 270px;
-    overflow: hidden;
-    position: absolute;
-    left: 0;
+    position: fixed;
+    left: -5%;
     top: 0;
     z-index: -1;
-    &::after{
-      position: absolute;
-      left: -5%;
-      top: 0;
-      z-index: -1;
-      content: '';
-      width: 110%;
-      height: 270px;
-      border-radius: 0 0 10% 10%;  //左上角，右上角，右下角，左下角
-      background-image: linear-gradient(269deg, #FF5D00 12%, #FF1900 86%);
-    }
+    content: '';
+    width: 110%;
+    height: 270px;
+    border-radius: 0 0 10% 10%;  //左上角，右上角，右下角，左下角
+    background: linear-gradient(269deg, #FF5D00 12%, #FF1900 86%);
   }
   &-group-buy-head-content{
     height: 64px;
@@ -87,19 +78,10 @@
       box-sizing: border-box;
       font-size: 16px;
       padding: 0 @padding-sd 60px;
-      &-lose {
-          &-container {
-              background: #fff;
-              padding: 45px 15px;
-              text-align: center;
-              img {
-                  width: 150px;
-              }
-          }  
-      }
   }
   // 头像组、团购规则等
   &-product-info{
+    position: relative;
     display: flex;
     flex-wrap: nowrap;
     align-items: center;
@@ -110,6 +92,20 @@
     margin-bottom: @padding-sm;
     padding: @padding-sm @padding-xs;
     box-sizing: border-box;
+    &-tag{
+      position: absolute;
+      z-index: 2;
+      top: 0;
+      left: 0;
+      font-size: @font-size-12;
+      color: @white;
+      width: 45px;
+      height: 18px;
+      line-height: 18px;
+      text-align: center;
+      background-color: linear-gradient(269deg, #ff5d00 12%, #ff1900 86%);
+      border-radius: 6px 0 6px 0;
+    }
     &-img{
       width: 108px;
       height: 108px;

src/views/goodsDetail/smallPic.vue

@@ -11,6 +11,7 @@
       </div>
       <div class="goods-product-info">
         <div class="goods-product-info-img">
+          <span class="goods-product-info-tag">3人团</span>
           <cr-image width="108px" :src="imgList[0]" />
         </div>
         <div class="goods-product-info-desc">