静态页面

src/components/common/MapSearch/index.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="components MapSearch" v-show="Show">
+    <div class="BaiDuMapSearch flex-h">
+      <div class="flex-item">
+        <input type="search" v-model="MapSearchKey" placeholder="请输入地址" @search="MapSearchFoo">
+      </div>
+      <a @click="MapSearchFoo">搜索</a>
+    </div>
+
+    <div class="MapContainer">
+      <div id="Map"></div>
+    </div>
+
+    <div class="Bottom flex-h">
+      <a class="flex-item" @click="$emit('Close')">取消</a>
+      <a class="flex-item" @click="SureAddress">确定</a>
+    </div>
+  </div>
+</template>
+
+<script>
+/*
+  页面名称：
+*/
+export default {
+  name: 'MapSearch',
+  props: ['Show'],
+  data () {
+    return {
+      City: null,
+      Province: null,
+      CurrentSelectAddress: null,
+      LocalMap: null,
+      MapSearchKey: ''
+    }
+  },
+  computed: {
+  },
+  components: {
+  },
+  created () {
+    // console.log(this.$route)
+  },
+  mounted () {
+    this.$nextTick(() => {
+      this.MapInit()
+    })
+  },
+  methods: {
+    SureAddress () { // 确认选取地址
+      if (this.CurrentSelectAddress === null) return
+      this.$emit('Sure', { Province: this.Province, City: this.City, ...this.CurrentSelectAddress })
+    },
+    MapSearchFoo () {
+      if (this.MapSearchKey !== '') {
+        this.LocalMap.search(this.MapSearchKey)
+      }
+    },
+    MapInit () {
+      let map = new window.BMap.Map('Map')
+      map.centerAndZoom(new window.BMap.Point(116.404, 39.915), 11)
+      this.LocalMap = new window.BMap.LocalSearch(map, {
+        renderOptions: { map: map },
+        onSearchComplete: (res) => {
+          console.log(res)
+          this.City = res.city
+          this.Province = res.province
+          map.addEventListener('click', (e) => {
+            this.CurrentSelectAddress = {
+              name: this.MapSearchKey,
+              ...e.point
+            }
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/components/common/MapSearch/page.scss

@@ -0,0 +1,68 @@
+.components.MapSearch {
+  width: 100%;
+  height: 100vh;
+  position: absolute;
+  z-index: 10;
+  overflow: hidden;
+  top: 0;
+  left: 0;
+  > .BaiDuMapSearch {
+    width: 80%;
+    position: absolute;
+    z-index: 2;
+    top: 0.3rem;
+    left: 10%;
+    border-radius: 0.06rem;
+    border: 0.01rem solid #ccc;
+    overflow: hidden;
+    > div {
+      position: relative;
+      overflow: hidden;
+      > input {
+        width: 100%;
+        display: block;
+        font-size: 0.14rem;
+        line-height: 0.2rem;
+        padding: 0.1rem 0;
+        background: #fff;
+        text-indent: 0.1rem;
+        border: none;
+      }
+    }
+    > a {
+      font-size: 0.14rem;
+      background: #ff5200;
+      color: #fff;
+      width: 0.6rem;
+      text-align: center;
+      line-height: 0.4rem;
+    }
+  }
+  > .MapContainer {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    z-index: 1;
+    > div {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  > .Bottom {
+    width: 100%;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    z-index: 2;
+    > a {
+      text-align: center;
+      font-size: 0.14rem;
+      line-height: 0.4rem;
+      background: #ccc;
+      color: #fff;
+      &:last-child {
+        background: #ff5200;
+      }
+    }
+  }
+}

src/pages/SignUp/index.vue

@@ -80,8 +80,11 @@
 
     <div class="BaiDuMap" v-show="ShowMap">
 
-      <div class="BaiDuMapSearch">
-        <input type="search" v-model="MapSearchKey" placeholder="请输入地址" @search="MapSearch">
+      <div class="BaiDuMapSearch flex-h">
+        <div class="flex-item">
+          <input type="search" v-model="MapSearchKey" placeholder="请输入地址" @search="MapSearch">
+        </div>
+        <a @click="MapSearch">搜索</a>
       </div>
 
       <div class="MapContainer">
@@ -128,7 +131,9 @@ export default {
         captcha: '',
         password: '',
         lat: '',
-        lng: ''
+        lng: '',
+        city: '',
+        province: ''
       },
       Timer: null,
       TimeNum: 60,
@@ -215,7 +220,9 @@ export default {
       this.ShowMap = false
     },
     MapSearch () {
-      this.LocalMap.search(this.MapSearchKey)
+      if (this.MapSearchKey !== '') {
+        this.LocalMap.search(this.MapSearchKey)
+      }
     },
     MapInit () {
       let map = new window.BMap.Map('Map')
@@ -223,12 +230,23 @@ export default {
       this.LocalMap = new window.BMap.LocalSearch(map, {
         renderOptions: { map: map },
         onSearchComplete: (res) => {
+          this.FormData.city = res.city
+          this.FormData.province = res.province
           map.addEventListener('click', (e) => {
+            console.log(e.currentTarget.Ua)
             this.CurrentSelectAddress = {
-              name: e.currentTarget.bh + this.MapSearchKey,
+              name: this.MapSearchKey,
               ...e.point
             }
+            // res.Hr.map((item) => {
+            //   if (`${item.point.lng}` === `${e.point.lng}` && `${item.point.lat}` === `${e.point.lat}`) {
+            //     console.log(item)
+            //   }
+            // })
           })
+          // window.setTimeout(() => {
+          //   document.getElementsByClassName('BMap_Marker')[0].get(0).click()
+          // }, 100)
         }
       })
     },

src/pages/SignUp/page.scss

@@ -168,17 +168,30 @@
       z-index: 2;
       top: 0.3rem;
       left: 10%;
-      > input {
-        width: 100%;
-        display: block;
-        box-sizing: border-box;
+      border-radius: 0.06rem;
+      border: 0.01rem solid #ccc;
+      overflow: hidden;
+      > div {
+        position: relative;
+        overflow: hidden;
+        > input {
+          width: 100%;
+          display: block;
+          font-size: 0.14rem;
+          line-height: 0.2rem;
+          padding: 0.1rem 0;
+          background: #fff;
+          text-indent: 0.1rem;
+          border: none;
+        }
+      }
+      > a {
         font-size: 0.14rem;
-        line-height: 0.2rem;
-        padding: 0.1rem 0;
-        background: #fff;
-        border-radius: 0.06rem;
-        border: 0.01rem solid #ccc;
-        text-indent: 0.1rem;
+        background: #ff5200;
+        color: #fff;
+        width: 0.6rem;
+        text-align: center;
+        line-height: 0.4rem;
       }
     }
     > .MapContainer {

src/pages/WoDe/DianPuRenZheng/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="Page">
-    <MainPageContainer :ShowMainHeader="true" :MainHeaderTitle="`店铺认证`" :ShowMainHeaderBack="true" :ShowMainHeaderMore="true" :MainHeaderMoreText="`保存`">
+    <MainPageContainer :ShowMainHeader="true" :MainHeaderTitle="`店铺认证`" :ShowMainHeaderBack="true" :ShowMainHeaderMore="true" :MainHeaderMoreText="`保存`" :MainHeaderMoreClick="SaveForm">
       <div class="Container">
         <div class="Content">
 
@@ -40,12 +40,12 @@
               <span>营业执照</span>
             </div>
             <div class="PhotoList">
-              <a class="Add" @click="AddZhiZhaoImg">
+              <a class="Add" @click="$refs.ZzFile.click()">
                 <i class="iconfont iconjia centerLabel"></i>
               </a>
               <div v-for="(item, index) in ZZImgArr" :key="index">
                 <img :src="item" class="centerLabel contain" alt="">
-                <a class="iconfont iconguanbi" @click="DeleteZZImg(index)"></a>
+                <a class="iconfont iconguanbi" @click="ZZImgArr.splice(index, 1)"></a>
               </div>
               <input type="file" ref="ZzFile" @change="ZzFileChange" style="display: none">
             </div>
@@ -57,39 +57,52 @@
             </div>
             <div class="IdCardList">
               <div>
-                <a></a>
+                <a @click="$refs.SfzzmFile.click()">
+                  <img v-if="SfzzmImg !== null" :src="SfzzmImg" class="centerLabel contain" alt="">
+                </a>
                 <span>身份证正面照</span>
+                <input type="file" ref="SfzzmFile" @change="SfzzmFileChange" style="display: none">
               </div>
               <div>
-                <a></a>
+                <a @click="$refs.SfzfmFile.click()">
+                  <img v-if="SfzfmImg !== null" :src="SfzfmImg" class="centerLabel contain" alt="">
+                </a>
                 <span>身份证背面照</span>
+                <input type="file" ref="SfzfmFile" @change="SfzfmFileChange" style="display: none">
               </div>
             </div>
           </div>
 
           <div>
             <div class="Line flex-h">
-              <span>详细地址</span>
-              <div class="flex-item">
+              <span>所在地区</span>
+              <div class="flex-item" @click="ShowAreaSelect = true">
                 <div>
-                  <input type="text" placeholder="街道、门牌号等">
+                  <span v-if="AreaList[0] !== null">{{AreaList[0]}} {{AreaList[1]}}</span>
+                  <span v-else>请选择地区</span>
                 </div>
               </div>
+              <i class="iconfont iconjiantouright"></i>
             </div>
             <div class="Line flex-h">
-              <span>所在地区</span>
+              <span>详细地址</span>
               <div class="flex-item">
                 <div>
-                  <span>xxx</span>
+                  <input type="text" placeholder="街道、门牌号等">
                 </div>
               </div>
-              <i class="iconfont iconjiantouright"></i>
             </div>
             <div class="Line flex-h">
               <span>营业时间</span>
-              <div class="flex-item">
+              <div class="flex-item" @click="ShowTimeStartSelect = true">
                 <div>
-                  <span>xxx</span>
+                  <span style="text-align: center;">{{StartTime === null ? '开始时间' : StartTime}}</span>
+                </div>
+              </div>
+              <em>至</em>
+              <div class="flex-item" @click="ShowTimeEndSelect = true">
+                <div>
+                  <span style="text-align: center;">{{EndTime === null ? '结束时间' : EndTime}}</span>
                 </div>
               </div>
               <i class="iconfont iconjiantouright"></i>
@@ -102,12 +115,29 @@
           </div>
 
         </div>
+        <div class="PickLayer" v-show="ShowAreaSelect">
+          <div>
+            <van-picker ref="AreaPicker" :columns="Columns" @change="AreaChange" show-toolbar title="选择城市" @cancel="ShowAreaSelect = false" @confirm="AreaConfirm" />
+          </div>
+        </div>
+        <div class="PickLayer" v-show="ShowTimeStartSelect">
+          <div>
+            <van-datetime-picker v-model="CurrentStartDate" type="time" @confirm="StartTimeConfirm" @cancel="ShowTimeStartSelect = false" />
+          </div>
+        </div>
+        <div class="PickLayer" v-show="ShowTimeEndSelect">
+          <div>
+            <van-datetime-picker v-model="CurrentEndDate" type="time" @confirm="EndTimeConfirm" @cancel="ShowTimeEndSelect = false" />
+          </div>
+        </div>
       </div>
     </MainPageContainer>
   </div>
 </template>
 
 <script>
+import { Picker, DatetimePicker } from 'vant'
+import AreaColumns from '../../../util/Area'
 import MainPageContainer from '../../../components/common/MainPageContainer'
 import { createNamespacedHelpers } from 'vuex'
 const { mapState: mapUserState, mapActions: mapUserActions, mapMutations: mapUserMutations } = createNamespacedHelpers('user')
@@ -115,8 +145,30 @@ export default {
   name: 'index',
   data () {
     return {
+      DataLock: false,
+      CurrentStartDate: '08:00',
+      ShowTimeStartSelect: false,
+      CurrentEndDate: '18:00',
+      ShowTimeEndSelect: false,
+      ShowAreaSelect: false,
       ZzFileData: null,
-      ZZImgArr: []
+      ZZImgArr: [],
+      SfzzmImg: null,
+      SfzfmImg: null,
+      AreaList: [null, null],
+      StartTime: null,
+      EndTime: null,
+      Columns: [
+        {
+          values: Object.keys(AreaColumns),
+          className: 'column1'
+        },
+        {
+          values: AreaColumns['北京'],
+          className: 'column2',
+          defaultIndex: 0
+        }
+      ]
     }
   },
   computed: {
@@ -125,7 +177,9 @@ export default {
     })
   },
   components: {
-    MainPageContainer
+    MainPageContainer,
+    'van-picker': Picker,
+    'van-datetime-picker': DatetimePicker
   },
   created () {
   },
@@ -140,11 +194,48 @@ export default {
     ...mapUserActions([
       'ImgUpload'
     ]),
-    DeleteZZImg (index) { // 删除营业执照图片
-      this.ZZImgArr.splice(index, 1)
+    SaveForm () { // 保存认证
+      if (this.DataLock) return
+      this.DataLock = true
+    },
+    EndTimeConfirm (e) { // 确定选择结束时间
+      this.EndTime = this.CurrentEndDate
+      this.ShowTimeEndSelect = false
     },
-    AddZhiZhaoImg () { // 添加营业执照
-      this.$refs.ZzFile.click()
+    StartTimeConfirm (e) { // 确定选择开始时间
+      this.StartTime = this.CurrentStartDate
+      this.ShowTimeStartSelect = false
+    },
+    AreaConfirm () { // 确定选择城市
+      let Arr = this.$refs.AreaPicker.getValues()
+      if (Arr[1] === undefined) {
+        for (let key in AreaColumns) {
+          if (key === Arr[0]) {
+            Arr[1] = AreaColumns[key][0]
+          }
+        }
+      }
+      this.AreaList = Arr
+      this.ShowAreaSelect = false
+    },
+    AreaChange (picker, values) {
+      picker.setColumnValues(1, AreaColumns[values[0]])
+    },
+    SfzzmFileChange (e) { // 身份证正面照更新
+      let aFormData = new FormData()
+      aFormData.append('file', e.target.files[0])
+      this.ImgUpload({ urlData: { plat: 'shop' }, data: aFormData, headers: { 'Content-Type': 'multipart/form-data' } }).then((res) => {
+        this.$refs.SfzzmFile.value = ''
+        this.SfzzmImg = res.data.data
+      })
+    },
+    SfzfmFileChange (e) { // 身份证反面照更新
+      let aFormData = new FormData()
+      aFormData.append('file', e.target.files[0])
+      this.ImgUpload({ urlData: { plat: 'shop' }, data: aFormData, headers: { 'Content-Type': 'multipart/form-data' } }).then((res) => {
+        this.$refs.SfzfmFile.value = ''
+        this.SfzfmImg = res.data.data
+      })
     },
     ZzFileChange (e) { // 营业执照图片更新
       let aFormData = new FormData()

src/pages/WoDe/DianPuRenZheng/page.scss

@@ -130,6 +130,8 @@
               padding-bottom: 58.59%;
               background: #fff;
               border-radius: 0.06rem;
+              position: relative;
+              overflow: hidden;
               box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.05);
             }
             > span {
@@ -143,5 +145,21 @@
         }
       }
     }
+    > .PickLayer {
+      width: 100%;
+      position: fixed;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.5);
+      z-index: 100;
+      > div {
+        width: 100%;
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        overflow: hidden;
+      }
+    }
   }
 }

src/util/Area.js

@@ -0,0 +1,39 @@
+/* eslint-disable */
+const AreaColumns = {
+  "北京市": ["北京市"],
+  "天津市": ["天津市"],
+  "河北省": ["石家庄市", "唐山市", "秦皇岛市", "邯郸市", "邢台市", "保定市", "张家口市", "承德市", "沧州市", "廊坊市", "衡水市"],
+  "山西省": ["太原市", "大同市", "阳泉市", "长治市", "晋城市", "朔州市", "晋中市", "运城市", "忻州市", "临汾市", "吕梁市"],
+  "内蒙古自治区": ["呼和浩特市", "包头市", "乌海市", "赤峰市", "通辽市", "鄂尔多斯市", "呼伦贝尔市", "巴彦淖尔市", "乌兰察布市", "兴安盟", "锡林郭勒盟", "阿拉善盟"],
+  "辽宁省": ["沈阳市", "大连市", "鞍山市", "抚顺市", "本溪市", "丹东市", "锦州市", "营口市", "阜新市", "辽阳市", "盘锦市", "铁岭市", "朝阳市", "葫芦岛市"],
+  "吉林省": ["长春市", "吉林市", "四平市", "辽源市", "通化市", "白山市", "松原市", "白城市", "延边朝鲜族自治州"],
+  "黑龙江省": ["哈尔滨市", "齐齐哈尔市", "鸡西市", "鹤岗市", "双鸭山市", "大庆市", "伊春市", "佳木斯市", "七台河市", "牡丹江市", "黑河市", "绥化市", "大兴安岭地区"],
+  "上海市": ["上海市"],
+  "江苏省": ["南京市", "无锡市", "徐州市", "常州市", "苏州市", "南通市", "连云港市", "淮安市", "盐城市", "扬州市", "镇江市", "泰州市", "宿迁市"],
+  "浙江省": ["杭州市", "宁波市", "温州市", "嘉兴市", "湖州市", "绍兴市", "金华市", "衢州市", "舟山市", "台州市", "丽水市"],
+  "安徽省": ["合肥市", "芜湖市", "蚌埠市", "淮南市", "马鞍山市", "淮北市", "铜陵市", "安庆市", "黄山市", "滁州市", "阜阳市", "宿州市", "六安市", "亳州市", "池州市", "宣城市"],
+  "福建省": ["福州市", "厦门市", "莆田市", "三明市", "泉州市", "漳州市", "南平市", "龙岩市", "宁德市"],
+  "江西省": ["南昌市", "景德镇市", "萍乡市", "九江市", "新余市", "鹰潭市", "赣州市", "吉安市", "宜春市", "抚州市", "上饶市"],
+  "山东省": ["济南市", "青岛市", "淄博市", "枣庄市", "东营市", "烟台市", "潍坊市", "济宁市", "泰安市", "威海市", "日照市", "临沂市", "德州市", "聊城市", "滨州市", "菏泽市"],
+  "河南省": ["郑州市", "开封市", "洛阳市", "平顶山市", "安阳市", "鹤壁市", "新乡市", "焦作市", "濮阳市", "许昌市", "漯河市", "三门峡市", "南阳市", "商丘市", "信阳市", "周口市", "驻马店市", "省直辖县"],
+  "湖北省": ["武汉市", "黄石市", "十堰市", "宜昌市", "襄阳市", "鄂州市", "荆门市", "孝感市", "荆州市", "黄冈市", "咸宁市", "随州市", "恩施土家族苗族自治州", "省直辖县"],
+  "湖南省": ["长沙市", "株洲市", "湘潭市", "衡阳市", "邵阳市", "岳阳市", "常德市", "张家界市", "益阳市", "郴州市", "永州市", "怀化市", "娄底市", "湘西土家族苗族自治州"],
+  "广东省": ["广州市", "韶关市", "深圳市", "珠海市", "汕头市", "佛山市", "江门市", "湛江市", "茂名市", "肇庆市", "惠州市", "梅州市", "汕尾市", "河源市", "阳江市", "清远市", "东莞市", "中山市", "潮州市", "揭阳市", "云浮市"],
+  "广西壮族自治区": ["南宁市", "柳州市", "桂林市", "梧州市", "北海市", "防城港市", "钦州市", "贵港市", "玉林市", "百色市", "贺州市", "河池市", "来宾市", "崇左市"],
+  "海南省": ["海口市", "三亚市", "三沙市", "儋州市", "省直辖县"],
+  "重庆市": ["重庆市", "县"],
+  "四川省": ["成都市", "自贡市", "攀枝花市", "泸州市", "德阳市", "绵阳市", "广元市", "遂宁市", "内江市", "乐山市", "南充市", "眉山市", "宜宾市", "广安市", "达州市", "雅安市", "巴中市", "资阳市", "阿坝藏族羌族自治州", "甘孜藏族自治州", "凉山彝族自治州"],
+  "贵州省": ["贵阳市", "六盘水市", "遵义市", "安顺市", "毕节市", "铜仁市", "黔西南布依族苗族自治州", "黔东南苗族侗族自治州", "黔南布依族苗族自治州"],
+  "云南省": ["昆明市", "曲靖市", "玉溪市", "保山市", "昭通市", "丽江市", "普洱市", "临沧市", "楚雄彝族自治州", "红河哈尼族彝族自治州", "文山壮族苗族自治州", "西双版纳傣族自治州", "大理白族自治州", "德宏傣族景颇族自治州", "怒江傈僳族自治州", "迪庆藏族自治州"],
+  "西藏自治区": ["拉萨市", "日喀则市", "昌都市", "林芝市", "山南市", "那曲市", "阿里地区"],
+  "陕西省": ["西安市", "铜川市", "宝鸡市", "咸阳市", "渭南市", "延安市", "汉中市", "榆林市", "安康市", "商洛市"],
+  "甘肃省": ["兰州市", "嘉峪关市", "金昌市", "白银市", "天水市", "武威市", "张掖市", "平凉市", "酒泉市", "庆阳市", "定西市", "陇南市", "临夏回族自治州", "甘南藏族自治州"],
+  "青海省": ["西宁市", "海东市", "海北藏族自治州", "黄南藏族自治州", "海南藏族自治州", "果洛藏族自治州", "玉树藏族自治州", "海西蒙古族藏族自治州"],
+  "宁夏回族自治区": ["银川市", "石嘴山市", "吴忠市", "固原市", "中卫市"],
+  "新疆维吾尔自治区": ["乌鲁木齐市", "克拉玛依市", "吐鲁番市", "哈密市", "昌吉回族自治州", "博尔塔拉蒙古自治州", "巴音郭楞蒙古自治州", "阿克苏地区", "克孜勒苏柯尔克孜自治州", "喀什地区", "和田地区", "伊犁哈萨克自治州", "塔城地区", "阿勒泰地区", "自治区直辖县级行政区划"],
+  "台湾省": ["台北市", "高雄市", "台南市", "台中市", "金门县", "南投县", "基隆市", "新竹市", "嘉义市", "新北市", "宜兰县", "新竹县", "桃园县", "苗栗县", "彰化县", "嘉义县", "云林县", "屏东县", "台东县", "花莲县", "澎湖县", "连江县"],
+  "香港特别行政区": ["香港岛", "九龙", "新界"],
+  "澳门特别行政区": ["澳门半岛", "离岛"]
+}
+
+export default AreaColumns