wanmeiyizhan/pages/homeFn/complaintsAndQuestionare/index.vue

<template>
	<div class="complaints">
    <image mode="aspectFill" style="width:750rpx;height:280rpx;" src="https://eshangtech.com/ShopICO/complaintsAndQuestionare/ts-wj-ban.png"></image>
    <div class="complaints-content" >
      <div class="title">
        <div style="display: flex;justify-content: flex-start;">
          <div style="height:32rpx;width:6rpx;background: #6c92e9;margin-right:16rpx;"></div>
          <div>选择类型</div>
        </div>      
        <div style="position:relative;justify-content: flex-end;">
          <div class="severpart-box" @click="getLocalServer">            
            <image mode="aspectFit" src="https://eshangtech.com/ShopICO/icos/dingweiblue.png" style="margin-right:16rpx;width:24rpx;height:32rpx;"></image>
            <span >{{serverPart?serverPart.ServerPart_Name:'定位服务区'}}</span>
          </div>
        </div>
      </div>
      <div class="complaints-card">
        <van-row type="flex" justify="space-between" align="center"  @click="questionareCilck()">
          <van-col span="12">
            <div>问卷调查</div>
            <div class="go-btn">Go <van-icon name="arrow" /></div>
          </van-col>
          <van-col span="12">
            <image style="width:218rpx;height:132rpx; float:right;" src="https://eshangtech.com/ShopICO/complaintsAndQuestionare/wjdc-icon.png" />
          </van-col>
        </van-row>
      </div>
      <div class="complaints-card" @click="complaintsCilck()">
        <van-row type="flex" justify="space-between" align="center">
          <van-col span="12">
            <div>投诉建议</div>
            <div class="go-btn">Go <van-icon name="arrow" /></div>
          </van-col>
          <van-col span="12">
            <image style="width:218rpx;height:132rpx; float:right;" src="https://eshangtech.com/ShopICO/complaintsAndQuestionare/tsyj-icon.png" />
          </van-col>
        </van-row>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
export default {
  data () {
    return {
      serverPart: null
    }
  },
  computed: {
    ...mapGetters({ 'user': 'user' })
  },
  methods: {
    ...mapMutations({
      setSeverList: 'severList',
      setHomeServer: 'setHomeServer'
    }),
    questionareCilck () {
      let _this = this
      if (!this.serverPart) {
        mpvue.showModal({
          content: '请授权你的位置，以确认你需填写的问卷调查',
          showCancel: false,
          success: (res) => {
            if (res.confirm) {
              _this.getLocalServer()
            }
          }
        })
        return false
      }
      if (!this.user || !this.user.MEMBERSHIP_MOBILEPHONE) {
        this.user.MEMBERSHIP_MOBILEPHONE = ''
      }
      this.isGo('/pages/webview/main?name=questionnarie&severpart=' + this.serverPart.ServerPart_Id + '&province=' + this.serverPart.ProvinceCode)
    },
    complaintsCilck () {
      let _this = this
      if (!this.serverPart) {
        mpvue.showModal({
          content: '请授权你的位置，以便于你填写投诉建议',
          showCancel: false,
          success: (res) => {
            if (res.confirm) {
              _this.getLocalServer()
            }
          }
        })
        return false
      }
      this.isGo('/pages/homeFn/newComplaints/main')
    },
    isGo (url) {
      mpvue.navigateTo({ url: url })
    },
    getLocalServer () { // 根据定位获取周边服务区
      let _this = this
      mpvue.choosePoi({
        // type: 'wgs84',
        success: function (res) {
          // console.log(res)
          let latitude = res.latitude
          let longitude = res.longitude
          _this.$api.getCoop({
            action_type: 'getServerPartByLocation',
            action_data: latitude,
            action_record: longitude,
            distance: 150,
            type: 1000
          }).then(function (data) {
            if (data.ResultCode === '100') {
              let _data = data.Data.List
              _data.map(n => { n.showName = n.ServerPart_Name + '(' + Math.round(n.Distance * 100) / 100 + 'km)' })
              _this.serverPart = _data[0]
              _this.setHomeServer(_data[0])
              _this.setSeverList(_data)
            }
          })
        },
        fail (res) {
          _this.openSetting = true
        }
      })
    }
  },
  onLoad (option) {
    // this.getLocalServer()
  }
}
</script>

<style lang="stylus" scoped>
.borbottom
  border-bottom 2rpx solid #eee

.complaints
	font-size 28rpx
	padding-bottom 60rpx

.title
  padding-bottom 32rpx
  display flex
  align-items center
  justify-content space-between

.complaints-content
  margin 24rpx
  padding 0 24rpx

.complaints-card
  font-size: 30rpx
  padding 40rpx 24rpx 24rpx 58rpx
  border-radius 12rpx
  background-color #fff
  & +.complaints-card 
    margin-top 24rpx

.go-btn
  border 1rpx solid #eee
  border-radius 24rpx
  height: 44rpx
  line-height 44rpx
  display: flex
  align-items center
  font-size 28rpx
  width 96rpx
  margin-top 30rpx
  justify-content center
</style>