|
|
@@ -0,0 +1,245 @@
|
|
|
+<template>
|
|
|
+ <view class="content">
|
|
|
+ <view class="mapBox">
|
|
|
+ <map id="map1" ref="map1" style="width:100%;height:50vh;" :latitude="lat":longitude="lng"
|
|
|
+ :markers="covers" @poitap="labeltap"
|
|
|
+ ></map>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="siginBox">
|
|
|
+ <scroll-view scroll-y="true" class="scrollView">
|
|
|
+ <view class="dizline" v-for="(item,index) in addressList" @click="ckSignin(index,item)" :class="{active:ckIndex==index}">
|
|
|
+ <image src="../../static/img/icon_zuobiao_def@2x.png" mode="" class="dizlineImg" v-if="ckIndex!=index"></image>
|
|
|
+ <image src="../../static/img/icon_zuobiao@2x.png" mode="" class="dizlineImg2" v-else></image>
|
|
|
+ <view class="addressTxt">
|
|
|
+ <view class="addressName">{{item.name}}</view>
|
|
|
+ <view class="district">{{item.district}}{{item.address}}</view>
|
|
|
+ </view>
|
|
|
+ <image src="../../static/img/icon_duihao@2x.png" mode="" v-if="ckIndex==index" class="duihaoimg"></image>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ <view class="bottom">
|
|
|
+ <view class="bottomBtn" @click="signin">签到</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ shopId:'',
|
|
|
+ lng: '',
|
|
|
+ lat: '',
|
|
|
+ covers:[],
|
|
|
+ addressName:'',
|
|
|
+ appkey:'064b6a4a8ade55656edcde2f528876de',
|
|
|
+ keywords:'',
|
|
|
+ addressList:'',
|
|
|
+ ckIndex:0,
|
|
|
+ address:'',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(opt) {
|
|
|
+ this.shopId=opt.shopId;
|
|
|
+ var that = this
|
|
|
+ uni.getLocation({
|
|
|
+ //type: 'gcj02',
|
|
|
+ success(res) {
|
|
|
+ console.log(res)
|
|
|
+ that.lng = res.longitude;
|
|
|
+ that.lat = res.latitude;
|
|
|
+ var obj={
|
|
|
+ latitude: that.lat,
|
|
|
+ longitude: that.lng,
|
|
|
+ }
|
|
|
+ that.covers.push(obj)
|
|
|
+ that.getaddress()
|
|
|
+ },
|
|
|
+ fail() {
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+ //#ifdef H5
|
|
|
+
|
|
|
+ that.lng = '117.143411'
|
|
|
+ that.lat = '36.677445'
|
|
|
+ var obj={
|
|
|
+ latitude: that.lat,
|
|
|
+ longitude: that.lng,
|
|
|
+ }
|
|
|
+ that.covers.push(obj)
|
|
|
+ that.getaddress()
|
|
|
+ // #endif
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ckSignin(index,item){
|
|
|
+ this.ckIndex=index;
|
|
|
+ this.address=item.name;
|
|
|
+ },
|
|
|
+ signin(){
|
|
|
+ uni.showLoading({ });
|
|
|
+ this.$http('accompany/SuperAccounts/addSuperSignIn', {
|
|
|
+ shopId:this.shopId,
|
|
|
+ address:this.address,
|
|
|
+ lat:this.lat,
|
|
|
+ lng:this.lng
|
|
|
+ }, 'POST').then(res => {
|
|
|
+ uni.showToast({
|
|
|
+ title: '签到成功',
|
|
|
+ icon:'success',
|
|
|
+ duration: 2000,
|
|
|
+ });
|
|
|
+ //this.$store.commit('mutationsCategoryList',this.categoryList)
|
|
|
+ setTimeout(function(){
|
|
|
+ uni.navigateBack({
|
|
|
+ delta:1
|
|
|
+ })
|
|
|
+ },1000)
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ labeltap(e){
|
|
|
+ console.log(e);
|
|
|
+ this.lat=e.detail.latitude;
|
|
|
+ this.lng=e.detail.longitude;
|
|
|
+ this.addressName=e.detail.name;
|
|
|
+ this.getcovers()
|
|
|
+ },
|
|
|
+ getcovers(){
|
|
|
+ this.covers=[]
|
|
|
+ var obj={
|
|
|
+ latitude: this.lat,
|
|
|
+ longitude: this.lng,
|
|
|
+ callout:{
|
|
|
+ content:this.addressName,
|
|
|
+ display:'ALWAYS',
|
|
|
+ padding: 10, //文本边缘留白
|
|
|
+ fontSize: 16, //文字大小
|
|
|
+ borderRadius: 10, //callout边框圆角
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.covers.push(obj)
|
|
|
+ this.getLocationList()
|
|
|
+ },
|
|
|
+ getLocationList() {
|
|
|
+ console.log("getLocationList")
|
|
|
+ let _this = this;
|
|
|
+ let data = {};
|
|
|
+ data.keywords =this.addressName;
|
|
|
+ data.location = this.lng+','+this.lat;
|
|
|
+ data.key=this.appkey;
|
|
|
+ uni.request({
|
|
|
+ url: 'https://restapi.amap.com/v3/assistant/inputtips?parameters',
|
|
|
+ method: 'GET',
|
|
|
+ data: data,
|
|
|
+ success(res) {
|
|
|
+ _this.addressList = res.data.tips;
|
|
|
+ _this.address=_this.addressList[0].name
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getaddress(){
|
|
|
+ let _this = this;
|
|
|
+ let data = {};
|
|
|
+
|
|
|
+ data.location = this.lng+','+this.lat;
|
|
|
+ data.key=this.appkey;
|
|
|
+ uni.request({
|
|
|
+ url: 'https://restapi.amap.com/v3/geocode/regeo',
|
|
|
+ method: 'GET',
|
|
|
+ data: data,
|
|
|
+ success(res) {
|
|
|
+ /* _this.list = res.data.tips; */
|
|
|
+ //console.log(res.data.regeocode.formatted_address)
|
|
|
+ _this.addressName=res.data.regeocode.formatted_address;
|
|
|
+ console.log(_this.addressName)
|
|
|
+ _this.getLocationList()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ .content{
|
|
|
+ background: #F4F5F7;
|
|
|
+ min-height: 100vh;
|
|
|
+
|
|
|
+ }
|
|
|
+ /* #ifdef H5 */
|
|
|
+ .content{
|
|
|
+ background: #F4F5F7;
|
|
|
+ min-height:calc(100vh - 44px);
|
|
|
+
|
|
|
+ }
|
|
|
+ /* #endif */
|
|
|
+ .siginBox{
|
|
|
+ background: #FFFFFF;
|
|
|
+ height: 50vh;
|
|
|
+ }
|
|
|
+ .dizlineImg{
|
|
|
+ width: 24rpx;
|
|
|
+ height: 24rpx;
|
|
|
+ margin-top: 30rpx;
|
|
|
+ }
|
|
|
+ .dizline{
|
|
|
+ display: flex;
|
|
|
+ margin: 30rpx 24rpx;
|
|
|
+ padding-bottom: 24rpx;
|
|
|
+ border-bottom: 1px solid #EEEEEE;
|
|
|
+ }
|
|
|
+ .scrollView{
|
|
|
+ height: calc(50vh - 120rpx);
|
|
|
+ }
|
|
|
+ .addressTxt{
|
|
|
+ padding-left: 30rpx;
|
|
|
+ width: 600rpx;
|
|
|
+ }
|
|
|
+ .addressName{
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #3C3C3C;
|
|
|
+ }
|
|
|
+ .district{
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999999;
|
|
|
+ padding-top: 8rpx;
|
|
|
+ }
|
|
|
+ .bottom{
|
|
|
+ width: 750rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0px -4px 8px 0px rgba(153,153,153,0.08);
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ }
|
|
|
+ .bottomBtn{
|
|
|
+ width: 702rpx;
|
|
|
+ height: 74rpx;
|
|
|
+ background: linear-gradient(124deg, #FF8700 0%, #FF4F00 100%);
|
|
|
+ border-radius: 37rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 74rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size:30rpx;
|
|
|
+ margin-top: 24rpx;
|
|
|
+ margin-left: 24rpx;
|
|
|
+ }
|
|
|
+ .active .addressName{
|
|
|
+ color: #FF4F00;
|
|
|
+ }
|
|
|
+ .dizlineImg2{
|
|
|
+ width: 24rpx;
|
|
|
+ height: 38rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ }
|
|
|
+ .duihaoimg{
|
|
|
+ width: 40rpx;
|
|
|
+ height: 28rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ }
|
|
|
+</style>
|
