创建大转盘活动完成

ybf_wx/src/views/active/createBigWheelActive.vue

@@ -28,7 +28,7 @@
           >
             <van-datetime-picker
               v-model="basicInfo.startTime"
-              type="datetime"
+              type="date"
               @cancel="basicInfo.startShow = false"
               @confirm="basicInfo.startShow = false"
               @change="startTimeChange"
@@ -43,7 +43,7 @@
             v-model="basicInfo.endTime1"
             placeholder="选择活动结束时间"
             readonly="readonly"
-            @click="endShow = true"
+            @click="basicInfo.endShow = true"
           />
           <van-popup
             v-model="basicInfo.endShow"
@@ -52,7 +52,7 @@
           >
             <van-datetime-picker
               v-model="basicInfo.endTime"
-              type="datetime"
+              type="date"
               @cancel="basicInfo.endShow = false"
               @confirm="basicInfo.endShow = false"
               @change="endTimeChange"
@@ -165,17 +165,27 @@
       </van-cell>
     </van-cell-group>
     <div class="title">奖品设置</div>
-    <van-cell-group class="all sz">
-      <van-cell
-        title="奖项名称"
-        style="font-size:14px;"
-        :value="LuckyDraw.name"
-        class="name"
+    <van-cell-group
+      class="all sz"
+      v-for="(list, index) in prizeList"
+      :key="index"
     >
+      <van-icon v-if="prizeList.length>1" name="close" size="20" class="close" @click="removePrice(index)" />
+      <van-cell center>
+        <template slot="title">
+          <span class="custom-title">奖项名称</span>
+        </template>
+        <template slot="default">
+           <van-field
+            class="right"
+            v-model="prizeList[index].name"
+            placeholder="请输入奖项名称"
+          />
+        </template>
       </van-cell>
       <van-cell title="优惠券类型" style="font-size:14px;" class="type">
         <template slot="default">
-          <van-radio-group v-model="type" class="right">
+          <van-radio-group v-model="prizeList[index].type" class="right">
             <van-radio name="1" style="float:left;">代金券</van-radio>
             <van-radio name="2" style="float:right;">折扣券</van-radio>
           </van-radio-group>
@@ -187,39 +197,39 @@
             class="tm"
             readonly
             clickable
-            :value="LuckyDraw.probability"
-            @touchstart.native.stop="LuckyDraw.show3 = true"
+            :value="prizeList[index].discountsMoney"
+            @touchstart.native.stop="prizeList[index].discountsShow = true"
             placeholder="输入金额"
           />
           <van-number-keyboard
-            v-model="LuckyDraw.probability"
-            :show="LuckyDraw.show3"
-            @blur="LuckyDraw.show3 = false"
+            v-model="prizeList[index].discountsMoney"
+            :show="prizeList[index].discountsShow"
+            @blur="prizeList[index].discountsShow = false"
           />
         </div>
         <span class="word">元优惠</span>
-        <van-checkbox v-model="limit2"></van-checkbox>
+        <van-checkbox v-model="prizeList[index].full"></van-checkbox>
         <span class="word">满</span>
         <div class="je">
           <van-field
             class="tm"
             readonly
             clickable
-            :value="LuckyDraw.probability"
-            @touchstart.native.stop="LuckyDraw.show3 = true"
+            :value="prizeList[index].fullMoney"
+            @touchstart.native.stop="prizeList[index].fullShow = true"
             placeholder="输入金额"
           />
           <van-number-keyboard
-            v-model="LuckyDraw.probability"
-            :show="LuckyDraw.show3"
-            @blur="LuckyDraw.show3 = false"
+            v-model="prizeList[index].fullMoney"
+            :show="prizeList[index].fullShow"
+            @blur="prizeList[index].fullShow = false"
           />
         </div>
         <span class="word end">元可用</span>
       </div>
-      <van-cell title="券有效期" style="font-size:14px;" >
+      <van-cell title="券有效期" style="font-size:14px;">
         <template slot="default">
-          <van-radio-group v-model="type" class="right">
+          <van-radio-group v-model="prizeList[index].validity" class="right">
             <van-radio name="1" style="float:left;">指定日期</van-radio>
             <van-radio name="2" style="float:right;">有效天数</van-radio>
           </van-radio-group>
@@ -229,18 +239,22 @@
         <template slot="default">
           <van-field
             class="right"
-            v-model="startTime1"
-            placeholder="选择活动结束时间"
+            v-model="prizeList[index].startTime1"
+            placeholder="选择活动开始时间"
             readonly="readonly"
-            @click="startShow = true"
+            @click="prizeList[index].startShow = true"
           />
-          <van-popup v-model="startShow" position="bottom" :overlay="true">
+          <van-popup
+            v-model="prizeList[index].startShow"
+            position="bottom"
+            :overlay="true"
+          >
             <van-datetime-picker
-              v-model="startTime"
-              type="datetime"
-              @cancel="startShow = false"
-              @confirm="startShow = false"
-              @change="startTimeChange"
+              v-model="prizeList[index].startTime"
+              type="date"
+              @cancel="prizeList[index].startShow = false"
+              @confirm="prizeList[index].startShow = false"
+              @change="startTimeChange2(prizeList[index].startTime, index)"
             />
           </van-popup>
         </template>
@@ -249,18 +263,22 @@
         <template slot="default">
           <van-field
             class="right"
-            v-model="endTime1"
+            v-model="prizeList[index].endTime1"
             placeholder="选择活动结束时间"
             readonly="readonly"
-            @click="endShow = true"
+            @click="prizeList[index].endShow = true"
           />
-          <van-popup v-model="endShow" position="bottom" :overlay="true">
+          <van-popup
+            v-model="prizeList[index].endShow"
+            position="bottom"
+            :overlay="true"
+          >
             <van-datetime-picker
-              v-model="endTime"
-              type="datetime"
-              @cancel="endShow = false"
-              @confirm="endShow = false"
-              @change="endTimeChange"
+              v-model="prizeList[index].endTime"
+              type="date"
+              @cancel="prizeList[index].endShow = false"
+              @confirm="prizeList[index].endShow = false"
+              @change="endTimeChange2(prizeList[index].endTime, index)"
             />
           </van-popup>
         </template>
@@ -271,15 +289,15 @@
             class="right noborder"
             readonly
             clickable
-            :value="cashCoupon"
+            :value="prizeList[index].prize"
             placeholder="请输入数量"
-            @touchstart.native.stop="show = true"
+            @touchstart.native.stop="prizeList[index].prizeShow = true"
           />
           <van-number-keyboard
-            v-model="cashCoupon"
-            :show="show"
+            v-model="prizeList[index].prize"
+            :show="prizeList[index].prizeShow"
             :maxlength="6"
-            @blur="show = false"
+            @blur="prizeList[index].prizeShow = false"
           />
         </template>
       </van-cell>
@@ -293,18 +311,22 @@
             class="right noborder"
             readonly
             clickable
-            :value="LuckyDraw.number"
+            :value="prizeList[index].limit"
             placeholder="请输入次数"
-            @touchstart.native.stop="LuckyDraw.show = true"
+            @touchstart.native.stop="prizeList[index].limitShow = true"
           />
           <van-number-keyboard
-            v-model="LuckyDraw.number"
-            :show="LuckyDraw.show"
-            @blur="LuckyDraw.show = false"
+            v-model="prizeList[index].limit"
+            :show="prizeList[index].limitShow"
+            @blur="prizeList[index].limitShow = false"
           />
         </template>
       </van-cell>
-      <div class="des">描述</div>
+      <div class="add" @click="addPrice">添加奖项</div>
+    </van-cell-group>
+    <div class="detail">
+      <div class="border">
+        <div class="des">活动描述</div>
         <van-field
           class="area"
           v-model="message"
@@ -314,8 +336,12 @@
           placeholder="请输入描述"
           show-word-limit
         />
-    </van-cell-group>
-    <div class="add">添加奖项</div>
+      </div>
+    </div>
+    <div class="detail" style="margin-top:0;">
+      <div class="des">活动图片</div>
+      <van-uploader v-model="fileList" multiple :max-count="9" />
+    </div>
     <div class="creat">创建活动</div>
   </div>
 </template>
@@ -334,7 +360,7 @@ export default {
         endShow: false
       },
       LuckyDraw: {
-        name: "一等奖",
+        name: "",
         number: "",
         winningNumber: "",
         probability: "",
@@ -344,36 +370,64 @@ export default {
         show2: false,
         show3: false
       },
-      prizeList: {},
+      prizeList: [
+        {
+          name: "",
+          type: "",
+          discountsMoney: "",
+          discountsShow: false,
+          full: "",
+          fullMoney: "",
+          fullShow: false,
+          validity: "",
+          startTime: "",
+          startTime1: "",
+          startShow: false,
+          endTime: "",
+          endTime1: "",
+          endShow: false,
+          prize: "",
+          prizeShow: false,
+          limit: "",
+          limitShow: false
+        }
+      ],
       title: "",
       title2: "",
       coupon: "",
       newCustomer: "",
       condition: "",
       type: "",
-      show: false,
-      show2: false,
-      cashCoupon: "",
-      limit: "",
-      limit2: "",
-      startTime: new Date(),
-      startTime1: "",
-      endTime: "",
-      endTime1: "",
       startShow: false,
       endShow: false,
-      message: ""
+      message: "",
+      fileList: []
     };
   },
   methods: {
     startTimeChange(e) {
       let startTimeArr = e.getValues();
-      this.basicInfo.startTime1 = `${startTimeArr[0]}-${startTimeArr[1]}-${startTimeArr[2]}  ${startTimeArr[3]}:${startTimeArr[4]}:00`;
+      this.basicInfo.startTime1 = `${startTimeArr[0]}-${startTimeArr[1]}-${startTimeArr[2]}`;
+    },
+    startTimeChange2(e, index) {
+      this.prizeList[index].startTime1 = this.timeFormat(e)
+      //let startTimeArr = e.getValues();
+      //this.prizeList[index].startTime1 = `${startTimeArr[0]}-${startTimeArr[1]}-${startTimeArr[2]}  ${startTimeArr[3]}:${startTimeArr[4]}:00`;
+    },
+    timeFormat(time) { // 时间格式化 2019-09-08
+        let year = time.getFullYear();
+        let month = time.getMonth() + 1;
+        let day = time.getDate();
+        return year + '年' + month + '月' + day + '日' 
     },
     endTimeChange(e) {
       let endTimeArr = e.getValues();
-      this.basicInfo.endTime1 = `${endTimeArr[0]}-${endTimeArr[1]}-${endTimeArr[2]}  ${endTimeArr[3]}:${endTimeArr[4]}:00`;
+      this.basicInfo.endTime1 = `${endTimeArr[0]}-${endTimeArr[1]}-${endTimeArr[2]}`;
     },
+    endTimeChange2(e, index) {      
+      this.prizeList[index].endTime1 = this.timeFormat(e)
+    },
+    // 数字大写转小写
     numberToUpperCase(textIndex) {
       let newString = "";
       let newTextIndex = textIndex + "";
@@ -425,7 +479,33 @@ export default {
         newString += sum(newTextIndex.substring(i, i + 1), i);
       }
       return newString;
-    }
+    },
+    addPrice() {
+      this.prizeList.push({
+        name: "",
+        type: "",
+        discountsMoney: "",
+        discountsShow: false,
+        full: "",
+        fullMoney: "",
+        fullShow: false,
+        validity: "",
+        startTime: "",
+        startTime1: "",
+        startShow: false,
+        endTime: "",
+        endTime1: "",
+        endShow: false,
+        prize: "",
+        prizeShow: false,
+        limit: "",
+        limitShow: false
+      });
+    },
+    removePrice(index) {
+      this.prizeList.splice(index,1)
+    },
+     
   },
   mounted() {}
 };
@@ -444,8 +524,8 @@ export default {
 .small {
   font-size: 10px;
 }
-.creat,.add{
-  margin-top: 80px;
+.creat,
+.add {
   width: 96%;
   height: 40px;
   background: rgba(117, 178, 253, 1);
@@ -455,18 +535,22 @@ export default {
   font-size: 16px;
   font-weight: bold;
   color: #fff;
-  margin-left: 2%;
+  margin: 0 auto;
+  margin-top: 80px;
   margin-bottom: 16px;
 }
 .add {
-    margin-top: 12px;
+  margin: 12px auto;
 }
-.van-field__body textarea {
-  background: rgba(248, 248, 248, 1);
+.area {
+  background-color: #f8f8f8;
+  width: 100%;
 }
 .des {
-  padding: 6px 16px;
   font-size: 14px;
+  font-weight: bold;
+  color: rgba(45, 71, 106, 1);
+  margin-bottom: 12px;
 }
 
 .phone {
@@ -530,6 +614,7 @@ export default {
 }
 .sz {
   position: relative;
+  padding-top: 10px;
 }
 .je {
   width: 88px;
@@ -555,6 +640,22 @@ export default {
   display: none;
 }
 .all {
-  box-shadow:0px 1px 3px 0px rgba(221,221,221,1);
+  box-shadow: 0px 1px 3px 0px rgba(221, 221, 221, 1);
+  padding-bottom: 1px;
+}
+.detail {
+  margin-top: 12px;
+  background-color: #fff;
+  /* height: 135px; */
+  padding: 12px 16px 0 16px;
+}
+.border {
+  border-bottom: 1px solid #ebedf0;
+  padding-bottom: 9px;
+}
+.close {
+  position: absolute;
+  z-index: 999;
+  top: 0;
 }
 </style>