项目中地址管理思路

Posted 2020-11-29 hy96

1、默认创建的用户肯定是无地址的所以要添加地址：

前端页面

<template>
<div class="box">
    <Header>
      <div slot="center">用户地址编辑</div>
    </Header>
    <div class="content">
       <van-address-edit
        :area-list="areaList"
        show-postal
        show-set-default
        show-search-result
        :search-result="searchResult"
        :area-columns-placeholder="[‘请选择‘, ‘请选择‘, ‘请选择‘]"
        @save="onSave"
        @delete="onDelete"
        @change-detail="onChangeDetail"
      />
    </div>
  </div>

</template>
<script>
import Header from ‘@/components/Header‘
import axios from ‘@/utils/request‘
import city from ‘@/utils/city‘
import Vue from ‘vue‘
import { AddressEdit, Toast } from ‘vant‘
Vue.use(AddressEdit)
Vue.use(Toast)
export default {
  components: {
    Header
  },
  data () {
    return {
      areaList: city,
      searchResult: []
    }
  },

  methods: {
    onSave (content) {
      console.log(content)
      axios.post(‘/address/add‘, {
        userid: localStorage.getItem(‘userid‘),
        name: content.name,
        tel: content.tel,
        province: content.province,
        city: content.city,
        county: content.county,
        addressDetail: content.addressDetail,
        flag: content.isDefault,
        areaCode: content.areaCode,
        postalCode: content.postalCode
      }).then(() => {
        Toast(‘添加地址成功‘)
        this.$router.back()
      })
    },
    onDelete () {
      Toast(‘delete‘)
    },
    onChangeDetail (val) {
      // if (val) {
      //   this.searchResult = [{
      //     name: ‘黄龙万科中心‘,
      //     address: ‘杭州市西湖区‘
      //   }]
      // } else {
      //   this.searchResult = []
      // }
    }
  }
}
</script>

后端添加地址的接口

router.post(‘/add‘, (req, res, next) => {
  let { userid, name, tel, addressDetail, flag, province, city, county, postalCode, areaCode } = req.body
  flag = flag * 1 || 0
  if(flag == 1){
    sql.update(Address, { userid, flag: 1 }, { $set: {flag: 0} }).then(() => {
      console.log("修改默认地址");
       
  let addressid = ‘address_‘ + uuid.v1()
  sql.insert(Address, { userid, name, tel, addressDetail, flag, province, city, county, postalCode, areaCode, addressid }).then(() => {
    res.send({
      code: ‘200‘,
      message: ‘添加地址成功‘
    })
  })
    })
  } else {
    console.log("diyitiao");
    sql.find(Address, { userid }, { _id: 0 }).then(data => {
    console.log(data);
      if (data.length === 0) {
        console.log("??");
        flag = 1
      }
      let addressid = ‘address_‘ + uuid.v1()
      sql.insert(Address, { userid, name, tel, addressDetail, flag, province, city, county, postalCode, areaCode, addressid }).then(() => {
      res.send({
      code: ‘200‘,
      message: ‘添加地址成功‘
    })
  })
    })
  }
  console.log(name,tel,flag);
 
})

2、添加完地址，那么地址那一栏就有地址了。这时前端页面负责将他渲染出来，前端页面可以直接修改默认地址

前端页面

<template>
  <div class="box">
    <Header>
      <div slot="center">地址列表</div>
    </Header>
    <div class="content">
      <van-address-list
        v-model="chosenAddressId"
        :list="list"
        @add="onAdd"
        @edit="onEdit"
        @select="onSelect"
      />
    </div>
  </div>
</template>
<style lang="scss">
@import ‘@/lib/reset.scss‘;
.van-address-item__name {
  font-size: 15px;
}
</style>
<script>
import Header from ‘@/components/Header‘
import axios from ‘@/utils/request‘
import Vue from ‘vue‘
import { AddressList, Dialog, Toast } from ‘vant‘
Vue.use(AddressList)
Vue.use(Dialog)
Vue.use(Toast)
export default {
  components: {
    Header
  },
  data () {
    return {
      chosenAddressId: 1,
      list: [],
      flag: false
    }
  },
  created () {
    console.log(this.$route.query.userid)
    if (!this.$route.query.userid) {
      Dialog.alert({
        message: ‘您还没有登录，请前往登录‘
      })
      this.$router.replace(‘/login‘)
    } else {
      let url = ‘/address?userid=‘ + this.$route.query.userid
      axios.get(url).then(res => {
        console.log(res.data)
        if (res.data.code !== ‘30000‘) {
          for (let i = 0; i < res.data.data.length; i++) {
            res.data.data[i].id = i
            console.log(i)
            res.data.data[i].address = res.data.data[i].province + res.data.data[i].city + res.data.data[i].county + res.data.data[i].addressDetail
            console.log(res.data.data[i].address)
            if (res.data.data[i].flag === 1) {
              this.chosenAddressId = i
            }
          }
          console.log(res.data.data)
          this.list = res.data.data
        } else {
          Dialog.alert({
            message: ‘您还没有收货地址，请添加‘
          })
        }
      })
    }
  },
  methods: {
    onAdd () {
      // Toast(‘新增地址‘)
      this.$router.push(‘/addaddress‘)
    },
    onEdit (item, index) {
      // Toast(‘编辑地址:‘ + index)
      // console.log(item)
      this.$router.push(‘/updateaddress?addressid=‘ + item.addressid)
    },
    onSelect (item, index) {
      console.log(index, item.userid)
      axios.post(‘/address/updatedefault‘, {
        userid: item.userid,
        addressid: item.addressid
      }).then(res => {
        console.log(‘应该成功了啊‘)
        // Toast(‘已修改默认地址‘)
      })
    },
    goback () {
      this.$router.back()
    }
  }
}
</script>

获取默认地址的接口

router.get(‘/defaultaddress‘, function(req, res, next) {
  let { userid} = req.query
  let flag = 1
  sql.find(Address, { userid, flag }, { _id: 0 }).then(data => {
    if (data.length === 0) {
      res.send({
        code: ‘30000‘,
        message: ‘没有默认地址‘
      })
    } else {
      res.send({
        code: ‘200‘,
        message: ‘获取地址‘,
        data: data
      })
    }
  })
});

 

后端查看地址的接口

router.get(‘/select‘, function(req, res, next) {
  let { addressid } = req.query
  sql.find(Address, { addressid }, { _id: 0 }).then(data => {
      res.send({
        code: ‘200‘,
        message: ‘查询地址‘,
        data: data
      })
  })
});

修改默认地址的接口

router.post(‘/updatedefault‘, (req, res, next) => {
  let { userid, addressid } = req.body
  sql.update(Address, { userid, flag: 1 }, { $set: { flag: 0 } }).then(() => {
    console.log("修改默认地址成功0");
    sql.update(Address, { addressid }, { $set: { flag: 1 } }).then(() => {
      console.log("修改默认地址成功1");
    })
  })
})

 

3、前端能查到地址了，那么肯定可以对地址进行修改，设置默认地址啥的

前端代码

<template>
<div class="box">
   <Header>
      <div slot="center">用户地址编辑</div>
    </Header>
    <div class="content">
       <van-address-edit
        :area-list="areaList"
        :address-info="addressInfo"
        save-button-text="修改"
        show-postal
        show-delete
        show-set-default
        show-search-result
        :search-result="searchResult"
        :area-columns-placeholder="[‘请选择‘, ‘请选择‘, ‘请选择‘]"
        @save="onSave"
        @delete="onDelete"
        @change-detail="onChangeDetail"
      />
    </div>
  </div>

</template>
<script>
import Header from ‘@/components/Header‘
import axios from ‘@/utils/request‘
import city from ‘@/utils/city‘
import Vue from ‘vue‘
import { AddressEdit, Toast } from ‘vant‘
Vue.use(AddressEdit)
Vue.use(Toast)
export default {
  components: {
    Header
  },
  data () {
    return {
      areaList: city,
      searchResult: [],
      addressInfo: {}
    }
  },
  mounted () {
    console.log(this.$route.query)
    let url = ‘/address/select?addressid=‘ + this.$route.query.addressid
    axios.get(url).then(res => {
      console.log(res)
      this.addressInfo = {
        name: res.data.data[0].name,
        tel: res.data.data[0].tel,
        province: res.data.data[0].province,
        city: res.data.data[0].city,
        county: res.data.data[0].county,
        areaCode: res.data.data[0].areaCode,
        postalCode: res.data.data[0].postalCode,
        addressDetail: res.data.data[0].addressDetail
      }
    })
  },
  methods: {
    onSave (content) {
      console.log(content)
      axios.post(‘/address/update‘, {
        addressid: this.$route.query.addressid,
        userid: localStorage.getItem(‘userid‘),
        name: content.name,
        tel: content.tel,
        province: content.province,
        city: content.city,
        county: content.county,
        addressDetail: content.addressDetail,
        flag: content.isDefault,
        areaCode: content.areaCode,
        postalCode: content.postalCode
      }).then(() => {
        Toast(‘地址修改成功‘)
        this.$router.back()
      })
    },
    onDelete () {
      axios.post(‘/address/delete‘, {
        addressid: this.$route.query.addressid
      }).then(() => {
        Toast(‘删除成功‘)
        this.$router.back()
      })
    },
    onChangeDetail (val) {
    },
    goback () {
      this.$router.back()
    }
  }
}
</script>

后端的地址修改接口

router.post(‘/update‘, (req, res, next) => {
  let { addressid, userid, name, tel, addressDetail, flag, province, city, county, postalCode, areaCode } = req.body
  flag = flag * 1 || 0
  if(flag == 1){
    sql.update(Address, { userid, flag: 1 }, { $set: {flag: 0} }).then(() => {
      console.log("修改默认地址");
    })
  }
  sql.update(Address, {addressid}, { $set:{name: name, tel: tel, addressDetail: addressDetail, flag: flag, province: province, city: city, county: county, postalCode: postalCode, areaCode: areaCode } }).then(() => {
    res.send({
      code: ‘200‘,
      message: ‘修改地址成功‘
    })
  })
})

修改默认地址的接口

router.post(‘/updatedefault‘, (req, res, next) => {
  let { userid, addressid } = req.body
  sql.update(Address, { userid, flag: 1 }, { $set: { flag: 0 } }).then(() => {
    console.log("修改默认地址成功0");
    sql.update(Address, { addressid }, { $set: { flag: 1 } }).then(() => {
      console.log("修改默认地址成功1");
    })
  })
})

删除地址的接口

router.post(‘/delete‘, (req, res, next) => {
  let { addressid } = req.body
  sql.delete(Address, { addressid }).then(() => {
    res.send({
      code: ‘200‘,
      message: ‘删除地址成功‘
    })
  })
})

 

 

查看地址的接口

router.get(‘/select‘, function(req, res, next) {
  let { addressid } = req.query
  sql.find(Address, { addressid }, { _id: 0 }).then(data => {
      res.send({
        code: ‘200‘,
        message: ‘查询地址‘,
        data: data
      })
  })
});