前两个静态页面完成

ybf_wx/src/router/index.js

@@ -19,6 +19,11 @@ const routes = [
     path: '/createActive',
     name: 'createActive',
     component: () => import(/* webpackChunkName: "about" */ '../views/active/createActive.vue')
+  },
+  {
+    path: '/activeList',
+    name: 'activeList',
+    component: () => import(/* webpackChunkName: "about" */ '../views/active/activeList.vue')
   }
 ]
 

ybf_wx/src/views/active/activeList.vue

+<template>
+  <div>
+    <div class="title">
+      <span>会员分裂</span>
+      <span class="fr">查看更多<span class="icon">></span></span>
+    </div>
+    <div class="active">
+      <div class="list">
+          <div class="left"></div>
+          <div class="right"></div>
+      </div>
+    </div>
+    
+
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style scoped>
+.title {
+  height: 44px;
+  background: rgba(248, 248, 248, 1);
+  line-height: 44px;
+  padding: 0 16px;
+  font-size: 12px;
+  color: rgba(45, 71, 106, 1);
+}
+.icon {
+  font-weight: 800;
+}
+.active {
+    padding: 16px;
+    box-shadow:0px 2px 4px 0px rgba(221,221,221,1);
+}
+.list {
+  height: 104px;
+  width: 100%;
+  background-color: #fff;
+  display: flex;
+  justify-content: space-between
+}
+.left,.right {
+    background-color: pink;
+    height: 80px;
+}
+.left {
+    width: 80px;   
+}
+.right {
+    width: 72%;
+}
+</style>

ybf_wx/src/views/active/createActive.vue

 <template>
-  <div>
+  <div class="container">
     <div class="title">基础设置</div>
     <van-cell-group>
-      <van-cell
-        class="list"
-        title="活动标题"
-        value="新客有礼"
-        style="font-size:14px;"
-      />
+      <van-cell title="活动标题" style="font-size:14px;">
+        <template slot="default" >
+          <van-field v-model="title" placeholder="请输入活动标题" class="right" style="font-size:14px;" />
+        </template>
+      </van-cell>
       <van-cell title="消费后领券" style="font-size:14px;">
         <template slot="default">
-          <van-switch v-model="coupon" size="20px" />
+          <van-switch v-model="coupon" size="20px"  class="right"  />
         </template>
       </van-cell>
       <van-cell title="新客专享" style="font-size:14px;">
         <template slot="default">
-          <van-switch v-model="newCustomer" size="20px" />
+          <van-switch v-model="newCustomer" size="20px"  class="right"  />
         </template>
       </van-cell>
       <van-cell title="领券条件" style="font-size:14px;">
@@ -27,15 +26,14 @@
     </van-cell-group>
     <div class="title">券设置</div>
     <van-cell-group>
-      <van-cell
-        class="list"
-        title="活动标题"
-        value="新客有礼"
-        style="font-size:14px;"
-      />
+      <van-cell title="活动标题" style="font-size:14px;">
+        <template slot="default">
+          <van-field v-model="title2" placeholder="请输入活动标题"  class="right" style="font-size:14px;" />
+        </template>
+      </van-cell>
       <van-cell title="券类型" style="font-size:14px;">
         <template slot="default">
-          <van-radio-group v-model="type">
+          <van-radio-group v-model="type"  class="right" >
             <van-radio name="1" style="float:left;">代金券</van-radio>
             <van-radio name="2" style="float:right;">折扣券</van-radio>
           </van-radio-group>
@@ -44,6 +42,7 @@
       <van-cell title="代金券金额" style="font-size:14px;">
         <template slot="default">
           <van-field
+            class="right noborder"
             readonly
             clickable
             :value="cashCoupon"
@@ -60,7 +59,7 @@
       <van-cell title="使用门槛" style="font-size:14px;">
         <template slot="default">
           <van-field
-            class="limit"
+            class="right noborder"
             readonly
             clickable
             :value="limit"
@@ -74,28 +73,69 @@
           />
         </template>
       </van-cell>
-      <van-cell title="活动开始时间" style="font-size:14px;">
+     <!--  <van-cell title="活动开始时间" style="font-size:14px;">
         <template slot="default">
-          <span @click="handleSTimeShow">{{startTime==''?"请选择开始时间":startTime}}</span>
+          <span @click="handleSTimeShow">{{ startTime }}</span>
           <van-popup v-model="startShow" position="bottom">
             <van-datetime-picker
               v-model="startTime"
-              type="dateTime"
-              @confirm = "handleSTimeClose"
-              @change="getStartTime"
+              type="date"
+              @confirm="handleSTimeClose"
+            />
+          </van-popup>
+        </template>
+      </van-cell> -->
+      <van-cell title="活动开始时间" style="font-size:14px;">
+        <template slot="default">
+          <van-field
+            class="right"
+            v-model="startTime1"
+            placeholder="选择活动结束时间" readonly="readonly"
+            @click="startShow = true"
+          />
+          <van-popup v-model="startShow"  position="bottom" :overlay="true">
+            <van-datetime-picker
+              v-model="startTime"
+              type="datetime"
+              @cancel="startShow = false"
+              @confirm="startShow = false"
+              @change="startTimeChange"
             />
           </van-popup>
         </template>
       </van-cell>
       <van-cell title="活动结束时间" style="font-size:14px;">
         <template slot="default">
+          <van-field
+            class="right"
+            v-model="endTime1"
+            placeholder="选择活动结束时间" readonly="readonly"
+            @click="endShow = true"
+          />
+          <van-popup v-model="endShow"  position="bottom" :overlay="true">
             <van-datetime-picker
               v-model="endTime"
               type="datetime"
+              @cancel="endShow = false"
+              @confirm="endShow = false"
+              @change="endTimeChange"
             />
+          </van-popup>
         </template>
       </van-cell>
+      <div class="des">描述</div>   
+      <van-field
+        class="area"
+        v-model="message"
+        rows="2"
+        autosize
+        type="textarea"
+        maxlength="50"
+        placeholder="请输入描述"
+        show-word-limit
+      />
     </van-cell-group>
+    <div class="creat">创建活动</div>
   </div>
 </template>
 
@@ -103,6 +143,8 @@
 export default {
   data() {
     return {
+      title: "",
+      title2: "",
       coupon: "",
       newCustomer: "",
       condition: "",
@@ -111,49 +153,79 @@ export default {
       show2: false,
       cashCoupon: "",
       limit: "",
-      startTime: '',
-      endTime: new Date(),
-      startShow: false
+      startTime: new Date(),
+      startTime1: "",
+      endTime: "",
+      endTime1: "",
+      startShow: false,
+      endShow: false,
+      message: "",
+      
     };
   },
   methods: {
-    timeFormat(time) { // 时间格式化 2019-09-08
-        let year = time.getFullYear();
-        let month = time.getMonth() + 1;
-        let day = time.getDate();
-        return year + '年' + month + '月' + day + '日'
-    },
-    handleSTimeShow() {
-      this.startShow = true
+    startTimeChange(e) {
+      let startTimeArr = e.getValues()
+      this.startTime1 = `${startTimeArr[0]}-${startTimeArr[1]}-${startTimeArr[2]}  ${startTimeArr[3]}:${startTimeArr[4]}:00`
     },
-    handleSTimeClose() {
-      this.startTime = this.timeFormat(this.startTime)
-      this.startShow = false
-      //console.log(getValues(),"???");
-      
-    },
-    getStartTime(val) {
-      console.log(val,"开始时间");
-      
+    endTimeChange(e) {
+      let endTimeArr = e.getValues()
+      this.endTime1 = `${endTimeArr[0]}-${endTimeArr[1]}-${endTimeArr[2]}  ${endTimeArr[3]}:${endTimeArr[4]}:00`
     }
+  },
+  mounted() {
   }
 };
 </script>
 <style>
+
 </style>
 
 <style lang="scss" scoped>
+// /deep/ .noborder  .van-cell:not(:last-child)::after {
+//   display: none !important;
+// }
+.noborder .van-cell:not(:last-child)::after{
+  border: 0px solid red !important;
+}
+.creat {
+  margin-top: 80px;
+  width:96%;
+  height:40px;
+  background:rgba(117,178,253,1);
+  border-radius:10px;
+  text-align: center;
+  line-height: 40px;
+  font-size:16px;
+  font-weight:bold;
+  color: #fff;
+  margin-left: 2%;
+}
+.container {
+  background:rgba(248,248,248,1);
+}
+.van-field__body textarea {
+  background:rgba(248,248,248,1);
+}
+.area /deep/ [data-v-08d4afe1] .van-field__control {
+  margin: 0 12px;
+  background:rgba(248,248,248,1);
+}
 
+.des {
+  padding: 6px 16px;
+  font-size: 14px;
+}
 /deep/ .van-field__control {
   height: 20px;
-  margin-left: 77px;
+ // margin-left: 77px;
 }
 /deep/ .van-cell {
   height: 46px;
 }
 .phone {
   float: left;
-  margin-top: 6px;
+
 }
 .title {
   background-color: #f8f8f8;
@@ -163,4 +235,13 @@ export default {
   padding-left: 16px;
   color: #2d476a;
 }
+[data-v-08d4afe1] .van-cell {
+  height: 100%;
+  font-size: 14px;
+ // padding: 0;
+}
+.right {
+  padding: 0;
+  
+}
 </style>

ybf_wx/src/views/active/turntableDetail.vue

 <template>
-  <div>
-    <div>大转盘详情</div>
+  <div class="container">
+    <div class="topb">
+      <img src="../../../public/img/zhuanpanbg.png" alt="" />
+    </div>
+    <div class="title">
+      <span class="bt">服装店幸运抽奖</span>
+      <div class="tb">
+        <img src="../../../public/img/zp.png" alt="" />
+        大转盘抽奖
+      </div>
+    </div>
+    <div class="wtitle">
+      <img src="../../../public/img/water.png" alt="" />
+      <span class="wan">玩法介绍</span>
+    </div>
+    <div class="content">
+      <p>
+        马几一民号传所把半米料己走专管每见严且具还京叫海公好速信调化眼务难心化二响住厂图电没速严义常象关更了低。由压反几风列线法再石究说布通总织第量回儿称从消片度音济学地通斯带老水亲东志报月者进放北传看术走形解林直动效提情影和复色米最只等。济交感去照象强手式性九己值正可心什体收并适部该置可山省十。
+      </p>
+      <p>
+        马几一民号传所把半米料己走专管每见严且具还京叫海公好速信调化眼务难心化二响住厂图电没速严义常象关更了低。由压反几风列线法再石究说布通总织第量回儿称从消片度音济学地通斯带老水亲东志报月者进放北传看术走形解林直动效提情影和复色米最只等。济交感去照象强手式性九己值正可心什体收并适部该置可山省十。
+      </p>
+    </div>
+    <div class="creat">创建同款活动</div>
   </div>
 </template>
 
 <script>
-export default {
-
-}
+export default {};
 </script>
 
-<style>
-
+<style></style>
+<style scoped>
+p {
+  font-size: 12px;
+  font-weight: 400;
+  color: rgba(45, 71, 106, 0.8);
+  margin-top: 14px;
+}
+.wan {
+  position: absolute;
+  left: 77px;
+  top: 8px;
+  font-size: 16px;
+  font-weight: bold;
+}
+.wtitle {
+  width: 200px;
+  height: 24px;
+  position: absolute;
+  left: 50%;
+  transform: translate(-50%);
+  top: 268px;
+  z-index: 999;
+}
+.wtitle img {
+  width: 100%;
+}
+.topb {
+  width: 100%;
+  height: 200px;
+}
+.topb img {
+  width: 100%;
+}
+.title {
+  width: 100%;
+  height: 50px;
+  font-size: 18px;
+  background-color: #fff;
+  box-shadow: 0px 2px 4px 0px rgba(221, 221, 221, 1);
+  line-height: 50px;
+  padding-left: 16px;
+  position: relative;
+}
+.container {
+  background-color: rgba(248, 248, 248, 1);
+  height: 100%;
+}
+.bt {
+  font-size: 16px;
+  margin-left: 96px;
+  font-weight: bold;
+  color: rgba(45, 71, 106, 1);
+}
+.tb {
+  position: absolute;
+  height: 24px;
+  line-height: 24px;
+  left: 16px;
+  top: 14px;
+  border-radius: 2px;
+  border: 1px solid rgba(45, 71, 106, 1);
+  font-size: 10px;
+  font-weight: 500;
+  color: rgba(45, 71, 106, 1);
+  width: 88px;
+  text-align: center;
+}
+.tb img {
+  width: 12px;
+  height: 12px;
+}
+.content {
+  margin: 36px 16px 16px;
+  background: rgba(255, 255, 255, 1);
+  box-shadow: 0px 2px 4px 0px rgba(221, 221, 221, 1);
+  height: 376px;
+  position: relative;
+  padding: 16px 16px 30px 16px;
+}
+.creat {
+  position: absolute;
+  left: 50%;
+  transform: translate(-50%);
+  width: 343px;
+  height: 40px;
+  line-height: 40px;
+  background: rgba(117, 178, 253, 1);
+  border-radius: 10px;
+  font-size: 16px;
+  font-weight: bold;
+  color: rgba(255, 255, 255, 1);
+  text-align: center;
+}
 </style>