321

src/components/common/Option.vue

+<template>
+    <div class="options py-3">
+        <div class="flex justify-between">
+            <div class="inpu-title">选项管理</div>
+            <div class=" text-xs text-app-red"></div>
+        </div>
+        <div class="option-items">
+        <div class="option-item flex" v-for="(i,index) in value" :key="index">
+            <div @click="deleteClicked(i,index)">
+            <app-icon customize type='icon-delete-s' size='24px' color='#BF463D' ></app-icon>
+            </div>
+            <div class="pl-3">
+            <textarea v-model="value[index]"  type="text" placeholder="请输入"  maxlength="500" rows="2"  cols="50"   class="w-full text-sm py-2 px-3 mt-2 rounded text-app-blue-1" />
+            </div>
+            </div>
+        </div>
+        <div class="flex mt-5 justify-center gap-x-1">
+        <div class='self-start'>
+            <app-icon customize type='icon-tianjia' size='20px' color='#BF463D' ></app-icon>
+        </div>
+        <div class='leading-6' @click="addOption">添加选项</div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+// import {remove as _remove} from 'lodash'
+export default Vue.extend({
+    components:{
+          'app-icon':()=>import('@/components/common/Icon.vue'),
+    },
+    data(){
+        return{
+            value:['',''] as string[]
+        } 
+    },
+    methods:{
+        deleteClicked(item:any,Click_index:any){
+            if(this.value.length>2){
+                this.value.splice(Click_index,1)
+            }else{
+                this.$toast.fail('选项不能少于两个')
+            }
+        },
+        addOption(){
+            this.value.push('')
+        }
+    }
+
+
+});
+</script>

src/components/timebox.vue

@@ -48,7 +48,7 @@ export default Vue.extend({
       const hour = +parseInt(r / (1000 * 60 * 60) % 24 + '')
       this.hour = hour >= 10 ? hour + '' : '0' + hour
       const min = +parseInt(r / (1000 * 60) % 60 + '')
-      console.log(min)
+    
       this.min = min >= 10 ? min + '' : '0' + min
       const sec = +parseInt((r - (day * 24 * 60 * 60 * 1000) - hour * (1000 * 60 * 60) - min * (1000 * 60)) / 1000 + '')
       this.sec = sec >= 10 ? sec + '' : '0' + sec
@@ -70,7 +70,5 @@ export default Vue.extend({
     padding: 4px;
     background: #191C73;
   }
-  .time-box {
-    
-  }
+
 </style>
\ No newline at end of file

src/layouts/index.vue

@@ -4,9 +4,7 @@
     
       <app-overlay></app-overlay>
       <div class='content'>
-         
-              <router-view></router-view>
-          
+            <router-view></router-view>
       </div>
       <app-navigator class='fixed bottom-0'></app-navigator>
       <app-picker></app-picker>

src/main.ts

@@ -2,13 +2,14 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
+import { Toast } from 'vant';
 import './style.css'
-import VConsole from 'vconsole';
-
-const vconsole = new VConsole()
-
-console.log(vconsole);
+// import VConsole from 'vconsole';
+Vue.use(Toast);
+// const vconsole = new VConsole()
 
+// console.log(vconsole);
+Vue.prototype.$toast = Toast;
 Vue.config.productionTip = false
 
 

src/project.d.ts

@@ -2,13 +2,14 @@
 
 import Vue from 'vue'
 import { DB } from "@/db/db"
+import { Toast } from 'vant';
 declare module 'vue/types/vue' {
   interface Vue {
     
     // $web3: Web3;
     $db: DB;
     // $bweb3:Web3;
- 
+    $toast:Toast
   }
 }
 

src/router/index.ts

@@ -47,7 +47,16 @@ export const routes: Array<RouteConfig> = [
           icon: 'icon-wode'
         }
       },
-    ]
+    ],
+
+  }, 
+  {
+    path:'/Initiate/Member',
+    name:'Mimber',
+    component: ()=>import('@/views/initiate_comp/MenberPage.vue'),
+    meta:{
+      text:"设置成员"
+    }
   }
 ]
 

src/views/initiate_comp/MenberPage.vue

+<template>
+    <ChildView>
+        哈哈哈
+    </ChildView> 
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import ChildView from '@/layouts/childView.vue'
+export default Vue.extend({
+    components:{
+        ChildView
+    }
+});
+</script>
+<style scoped>
+.Layout{
+    height:100%;
+    width: 100%;
+    position: relative;
+    overflow-y: scroll;
+    overflow-x: hidden;
+}
+.page{
+  height: 100vh;
+  width: 100vw;
+}
+</style>
\ No newline at end of file

src/views/initiate_comp/user_initiate.vue

 <template>
   <div>
     <div class="title text-center text-lg py-6">发起活动</div>
+      <div class="scroll-controller">
       <div class="form-contianer w-11/12 rounded-lg mx-auto border border-app-blue-3">
         <div class="form p-3 text-sm">
             <div class="input py-3">
@@ -22,22 +23,76 @@
                   <div class="inpu-title">什么什么</div>
                   <div class=" text-xs text-app-red">validation</div>
               </div>
-               <input type="text" placeholder="请输入" class="w-full text-sm py-2 px-3 mt-2 rounded text-app-blue-1">
+               <input type="text" placeholder="请输入" class="w-full text-sm app py-2 px-3 mt-2 rounded text-app-blue-1">
             </div>
-            <div class="options py-3">
-              <div class="flex justify-between">
-                  <div class="inpu-title">选项管理</div>
-                  <div class=" text-xs text-app-red"></div>
-              </div>
-              <div class="option-item">
-                
-              </div>
+            <app-option ref="optionEl"></app-option>
+            <div class="space py-2"></div>
+        </div>
+      </div>
+       <div class="form-contianer w-11/12 mt-3 rounded-lg mx-auto border border-app-blue-3">
+        <div class="form p-3 text-sm">
+            <div class="time-picker py-3">
+                <div class='flex justify-between'>
+                  <div>投票开始时间</div>
+                  <div class='flex items-center'>        
+                    <span class=" text-xs">{{dateStart}}</span>        
+                    <date-pick v-model="dateStart"  class=" self-center" >
+                      <template v-slot:default="{toggle}">
+                          <div @click="toggle">
+                            <app-icon customize type='icon-rili' size='20px'> </app-icon>
+                          </div>
+                      </template>
+                    </date-pick> 
+                  </div>
+                </div>
+                <input type="number" placeholder="请输入开始区块               当前区块3923288" class="w-full text-sm py-2 px-3 mt-2 rounded text-app-blue-1">
+            </div>
+            <div class="time-picker py-3">
+                <div class='flex justify-between'>
+                  <div>投票截止时间</div>
+                  <div class='flex items-center'>        
+                    <span class="  text-xs">{{dateEnd}}</span>        
+                    <date-pick v-model="dateEnd" >
+                      <template v-slot:default="{toggle}">
+                          <div @click="toggle" class="items-center">
+                            <app-icon customize type='icon-rili' size='20px'> </app-icon>
+                          </div>
+                      </template>
+                    </date-pick> 
+                  </div>
+                </div>
+                <input type="number" placeholder="请输入开始区块               当前区块3923288" class="w-full text-sm py-2 px-3 mt-2 rounded text-app-blue-1">
+            </div>
+            <div class="cell flex justify-between items-center border-b py-2 border-app-dark-4 ">
+              <div>每人参与次数设置</div>
+              <div class="flex items-center cursor-pointer" @click="pickToggle">
+                <div class=" text-xs opacity-60">
+                  每天一次
+                </div>
+                    <app-icon customize type='icon-arrow-right-copy-copy'></app-icon>
+                 </div>
+            </div>
+
+            <div class="cell flex justify-between items-center border-b py-2 border-app-dark-4 ">
+              <div>是否公开投票</div>
+              <van-switch v-model="checked" size="18px"/>
+            </div>
+
+            <div class="cell flex justify-between items-center py-2 ">
+              <div>成员数设置</div>
+              <div class="flex items-center cursor-pointer" @click="pickToggle">
+                <div class=" text-xs opacity-60">
+                  3人
+                </div>
+                    <app-icon customize type='icon-arrow-right-copy-copy'></app-icon>
+                 </div>
             </div>
-            <div class="space py-12"></div>
+            <div class="space h-11"></div>
         </div>
       </div>
       <div class="w-11/12 mx-auto mt-5">
-        <app-btn text='发起活动' size="full" border='border-none' class=" bg-app-blue-3 rounded py-3"></app-btn>
+        <app-btn text='发起活动' size="full" border='border-none' class=" bg-app-blue-3 rounded py-3" @btnClicked="checkSomething"></app-btn>
+      </div>
       </div>
   </div>
 </template>
@@ -45,17 +100,41 @@
 <script lang="ts">
 
 import Vue from "vue";
-
+import 'vue-date-pick/dist/vueDatePick.css';
+import { Switch } from 'vant';
+import DatePick from 'vue-date-pick';
+Vue.use(Switch);
 export default Vue.extend({
-
   data() {
     return {
-
+      dateStart: '2019-01-01',
+      dateEnd:'2019-02-02',
+      checked:true
     };
   },
   components:{
-      "app-btn":()=>import('@/components/common/Btn.vue')
-  }
+     DatePick,
+    "app-btn":()=>import('@/components/common/Btn.vue'),
+    'app-icon':()=>import('@/components/common/Icon.vue'),
+      'app-option':()=>import('@/components/common/Option.vue')
+  },
+  methods:{
+    checkSomething(){
+      const optionEl = this.$refs.optionEl as Vue
+      console.log(optionEl.$data.value);
+      this.$router.push('/Initiate/Member')
+    },
+        pickToggle(){
+      console.log(2222);
+      
+    }
 
+  }
 });
 </script>
+<style scoped>
+.scroll-controller {
+    height: calc(100vh - 160px) ;
+    overflow-y: scroll;
+}
+</style>
\ No newline at end of file