Coupon flow completed

rc-busness/assets/css/global.less

@@ -26,7 +26,6 @@ aside div[data-js-modal-menu] {
 .fade-leave-active {
 	opacity: 0;
 }
-
 .ts-no-data {
 	text-align: center;
 	margin: 3rem 0;
@@ -818,7 +817,11 @@ picture {
 	margin: 0 auto;
 	.el-dialog{
 	  width: 100%;
-
+	}
+	.el-dialog__body{
+		max-height:50vh;
+		overflow-x:hidden;
+		overflow-y:auto;
 	}
 }
 #tns2-iw {

rc-busness/pages/personal/settlement.less

@@ -6,13 +6,89 @@ ul li ol li em strong i {
 .rc-header {
     width: 100%;
 }
-
-
-
 .settlement {
-    
 }
 
+.rc-discount {
+    position: relative;
+    width: 100%;
+    img {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+    .rc-contair {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+    }
+    .rc-left {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      color: #e1001a;
+      width: 34%;
+      float: left;
+      height: 100%;
+      i {
+        font-style: normal;
+        font-size: 12px;
+      }
+      span {
+        font-size: 26px;
+      }
+      strong {
+        font-style: normal;
+        font-size: 12px;
+        display: block;
+        margin-top: 8px;
+      }
+    }
+    .rc-right {
+      display: flex;
+      flex-direction: column;
+      padding: 5px 10px;
+      justify-content: center;
+      height: 100%;
+      i {
+        font-style: normal;
+        font-size: 16px;
+        color: #e1001a;
+      }
+      .rc-main {
+        color: #999999;
+        font-size: 12px;
+      }
+      span {
+        display: block;
+        margin-top: 2px;
+      }
+      em {
+        font-style: normal;  
+      }
+    }
+    .rc-footer {
+      display: flex;
+      justify-content: flex-end;
+      margin-right: 10px;
+      span {
+        width: 72px;
+        height: 25px;
+        background: #e2001a;
+        text-align: center;
+        line-height: 25px;
+        font-size: 12px;
+        color: #ffffff;
+        margin-bottom: 8px;
+        border-radius: 100px;
+        margin-right: 8px;
+        cursor: pointer;
+      }
+    }
+}
 
 .rc-main {
     width: 92%;
@@ -255,7 +331,7 @@ ul li ol li em strong i {
         }
 
         ul {
-            width: 25%;
+            width: 100%;
             display: flex;
             flex-direction: column;
             justify-content: space-between;

rc-busness/pages/personal/settlement.vue

@@ -65,12 +65,12 @@
             <span>配送方式:</span>
             <i>{{ shopprice.price }}</i>
           </li>
-		  <!--
+		  
           <li>
             <span> 活动促销:</span>
-            <i>{{ shopprice.distribution }}</i>
+            <i class="ts-right-arr ts-right-arr--two" @click="userget()">{{ curCoupon.couponName }}</i>
           </li>
-		  -->
+	
           <li>
             <span>商品总价:</span>
             <i class="red">{{ sumPrice }}</i>
@@ -147,12 +147,43 @@
         </div>
       </div>
     </el-dialog>
+	<el-dialog :visible.sync="dialogInfo1"  class="pop_coupon">
+		<div class="ts-no-data" v-if="drawlist.length<=0">您还没有优惠券，可在商品的详情页面中领取</div>
+	  <div class="rs-dis">
+	    <div
+	      class="rc-discount"
+	      v-for="(item, index) in drawlist"
+	      :key="index"
+	    >
+	      <img :src="userimage" alt="" />
+	      <div class="rc-contair">
+	        <div class="rc-left">
+	          <div v-if="item.couponAmount">
+	            <i>￥</i><span>{{ item.couponAmount }}</span>
+	          </div>
+	        </div>
+	        <div class="rc-right">
+	          <i>
+	            {{ item.couponDesc }}
+	          </i>
+	          <div v-show="item.validTo">
+	            <span>有效期</span>
+	            <em>{{ item.validTo }}</em>
+	          </div>
+	          <div class="rc-footer">
+	            <span @click="pickCoupon(item)">立即使用</span>
+	          </div>
+	        </div>
+	      </div>
+	    </div>
+	  </div>
+	</el-dialog>
   </div>
 </template>
 
 <script>
 import Myheader from "~/components/header.vue";
-import { userin, memberAddress, generateOrderWX } from "../../ajax/getData";
+import { userin, memberAddress, generateOrderWX, getdraw } from "../../ajax/getData";
 import tabs from "@/components/tabs.vue";
 import myAddress from "~/components/address.vue";
 import { mapMutations } from "vuex";
@@ -170,6 +201,10 @@ export default {
 			path:'/personal/settlement'
 		  }
 	  ],
+	  userimage: require("../../assets/image/unused.png"),
+	  curCoupon:{couponName:'未选择可用优惠券'},
+	  drawlist:[],
+	  dialogInfo1:false,
       goldmedal: [],
       dialogAddTitle: "",
       addressstype: null,
@@ -210,7 +245,6 @@ export default {
     // 总价计算
     sumPrice() {
       return this.goldmedal.reduce((pre, cur) => {
-        console.log(pre);
         return pre + cur.buyCount * cur.productPrice;
       }, 0);
     },
@@ -229,6 +263,35 @@ export default {
       });
       this.useraddress = data;
     },
+	userget(){
+		let user = this.$store.state.userInfo;
+		if (user) {
+		  this.userdraw(user.data.mobile);
+		  this.dialogInfo1 = true;
+		} else {
+			this.$router.push({
+				path: "/userlogin/login",
+			});
+		}
+	},
+	//获取用户领取的优惠券
+	async userdraw(mobile) {
+	  let data = await getdraw(mobile);
+	  let _self = this;
+	  if (data) {
+		//TODO check status = 0
+		this.drawlist=[];
+		data.data.forEach((item) => {
+			if(item.status==0) {
+				_self.drawlist.push(item);
+			}
+		});
+	  }
+	},
+	pickCoupon(item){
+		this.curCoupon = item;
+		this.dialogInfo1 = false;
+	},
     editAddress(item) {
       this.dialogAddTitle = "修改收货地址";
       this.editAddressData = {
@@ -331,6 +394,13 @@ export default {
             addressDetailInfo: orderAddress[0].detailAddress,
           },
         };
+		if(this.curCoupon.couponId) {
+			oneProduct.couponId = this.curCoupon.couponId;
+			oneProduct.couponTypeId = this.curCoupon.couponTypeId;
+			oneProduct.couponName = this.curCoupon.couponName;
+			oneProduct.couponCode = this.curCoupon.couponCode;
+			oneProduct.couponAmount = (this.curCoupon.couponAmount?this.curCoupon.couponAmount:this.curCoupon.discount);
+		}
         postData.push(oneProduct);
       });
       // let postData = [
@@ -405,9 +475,6 @@ export default {
     },
     async canceldanhao(orderNumber) {
       let data = await userin(orderNumber);
-      console.log(data);
-      //  this.goldmedal=data;
-      console.log(this.goldmedal);
     },
   },
   mounted() {

rc-busness/pages/productdetails/producted.vue

@@ -209,6 +209,7 @@
       <Myfooter v-on:litentop="showmesg"></Myfooter>
     </div>
     <el-dialog :visible.sync="dialogInfo1" @close="userclose" class="pop_coupon">
+		<div class="ts-no-data" v-if="usernewlist.length<=0">您还没有优惠券，可在商品的详情页面中领取</div>
       <div class="rs-dis">
         <div
           class="rc-discount"
@@ -226,7 +227,7 @@
               <i>
                 {{ item.couponDesc }}
               </i>
-              <div>
+              <div v-show="item.validTo">
                 <span>有效期</span>
                 <em>{{ item.validTo }}</em>
               </div>
@@ -528,9 +529,7 @@ export default {
         userlist.filter((item) => {
           item.productCodes = item.productCodes.split(",");
           item.productCodes.forEach((element) => {
-            if (element == this.productCode && item.activityId !== 10) {
+            if (element == this.curItem.productCode && item.activityId !== 10) {
-              console.log(element);
-              console.log(this.productCode);
               menualist.push(item);
             }
           });