From c754e1304799c932b1aabe7a85960d29274791b7 Mon Sep 17 00:00:00 2001
From: 陶杰 <1378534974@qq.com>
Date: 星期三, 18 十二月 2024 09:50:28 +0800
Subject: [PATCH] 1.售后图片可以选择多张，并发向服务器请求上传功能，避免响应过长服务器假死
---
pages/user/address/address.vue | 341 +++++++++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 318 insertions(+), 23 deletions(-)
diff --git a/pages/user/address/address.vue b/pages/user/address/address.vue
index 9df16bb..cee367b 100644
--- a/pages/user/address/address.vue
+++ b/pages/user/address/address.vue
@@ -1,10 +1,40 @@
<template>
<!-- 收货地址列表 -->
<view class="p15 container-address">
+ <view class="search-container m-t-12 flex">
+ <view class="flex1 input" @click="selectWxAddress('input')">
+ <u-input placeholder="小区名/店铺名/写字楼/街道名等" disabled v-model="search_flow">
+ <template slot="suffix">
+ <uni-icons color="#20613D" type="search" size="24"></uni-icons>
+ </template>
+ </u-input>
+ </view>
+ </view>
+ <view class="m-t-12 ">
+ <view class="desc-gray">当前位置</view>
+ <view class="flex current-address">
+ <view class="flex1">
+ {{ addressDesc || (address&&address.id?address.address: '选择地址') }}
+
+ </view>
+ <view class="flex" @click="changeCurrentAddress">
+ <view>
+ <image style="width: 30rpx;height: 30rpx;margin-top: 6rpx;margin-right: 10rpx;" class="m-t-2"
+ src="https://hmy-flower.oss-cn-shanghai.aliyuncs.com/a2/a248385d4fe748ca81ee058ea5bf8c47icon-address.jpg">
+ </image>
+ </view>
+ <view>重新定位</view>
+ </view>
+ </view>
+ </view>
+ <view class="m-t-12 ">
+ <view class="desc-gray">我的收货地址</view>
+
+ </view>
<no-data v-if="!list||list.length==0" style="width: 100%;"></no-data>
<!-- 循环 -->
- <view v-for="(item,index) of list" :key="index" class="location-each">
+ <view v-for="(item,index) of list" :key="index" class="location-each m-t-12">
<view class="flex">
<view class="container-info">
<view class="flex">
@@ -38,7 +68,7 @@
@click="changeDefaultAddress(item,index)">
</view>
- <span class="desc">{{ item.isDefault ? '默认地址:' : '当前地址:' }}{{ item.address || '' }}</span>
+ <span class="desc" style="word-break: break-all;">{{ item.isDefault ? '默认地址:' : '当前地址:' }}</span>
<!-- 当前地址/默认地址勾选 -->
</view>
<view class="desc del t-red" @click="deleteAddress(item)">
@@ -47,14 +77,17 @@
<view class="desc del t-green m-l-10" v-if="source==='select'" @click="selectAddress(item)">
选择此地址
</view>
+ <view class="desc del t-green m-l-10" v-if="source==='home'" @click="selectAddress(item)">
+ 按此地址定位
+ </view>
</view>
</view>
<view style="height: 92rpx;width: 690rpx;">
</view>
- <view class="button-green button-fixed-bottom" style="width: 690rpx;line-height: 92rpx;height: 92rpx;"
- @click="addAddress">添加收货地址
+ <view class="button-green button-fixed-bottom" v-if="currentInfo.id"
+ style="width: 690rpx;line-height: 92rpx;height: 92rpx;" @click="addAddress">添加收货地址
</view>
<uni-popup ref="popup_form" type="top" :mask-click="false">
@@ -78,7 +111,8 @@
手机号
</view>
<view class="form-item-value">
- <input v-model="submitForm.tel" placeholder="请输入收货人手机号" class="form-input"></input>
+ <input v-model="submitForm.tel" placeholder="请输入收货人手机号" class="form-input"
+ @blur="validatePhoneNumber()"></input>
</view>
</view>
<view class="form-item">
@@ -97,13 +131,21 @@
</view>
- <view class="form-item">
+ <view class="form-item" style="height: unset;min-height: 36rpx;">
<view class="form-item-label require">
详细地址
</view>
- <view class="form-item-value">
- <input v-model="submitForm.address" placeholder="请输入详细地址" class="form-input"></input>
+ <view class="form-item-value flex flex1">
+ <input v-model="submitForm.address" placeholder="请输入详细地址" class="form-input flex1"></input>
+ <!-- <u-textarea v-model="submitForm.address" autoHeight placeholder="请输入详细地址" class="form-input flex1" >
+
+ </u-textarea>
+ <view class="m-l-15 m-r-0 flex m-t-8" style="min-width: 120rpx;color: #7CC662;text-align: right;"
+ @click="selectWxAddress('form')">
+ <uni-icons color="#7CC662" type="location" size="18"></uni-icons>
+ 定位
+ </view> -->
</view>
</view>
<view class="form-item">
@@ -126,10 +168,15 @@
</template>
<script>
+ // #ifdef PUB_CUSTOMER
// import qqmapwx from '@/plugins/qqmap-wx-jssdk.min.js';
- // const lockey = 'VUHBZ-2AMLP-B7AD7-VUQZ7-D4TW5-MFFVN'; //使用在腾讯位置服务申请的key
- // const chooseLocation = requirePlugin('chooseLocation');
+ // const lockey = 'GSBBZ-CJA3U-NNDVH-GE65N-6FIF6-ZGBCU'; //使用在腾讯位置服务申请的key
+ // const chooseLocation = requirePlugin('chooseLocation');
+ // #endif
+ import {
+ mapState
+ } from 'vuex'
export default {
async onPullDownRefresh() {
this.page.current = 0
@@ -140,7 +187,55 @@
// this.list = [{}, {}]
this.source = options.source || ''
this.listApi = '/api/address/list'
- await this.getList()
+ if (!this.currentInfo.id) {
+
+ } else {
+ await this.getList()
+
+ }
+
+ },
+ onShow() {
+ // const location = chooseLocation.getLocation(); // 如果点击确认选点按钮，则返回选点结果对象，否则返回null
+ // // console.log('onshow location', location, this.tmp_picker_lock_index, this.formcodes["LOC_ONE"])
+ // // address: "江苏省苏州市吴中区太湖东路280号"
+ // // city: "苏州市"
+ // // district: "吴中区"
+ // // latitude: 31.262438
+ // // longitude: 120.633985
+ // // name: "太湖东路280号小区"
+ // // province: "江苏省"
+ // if (location && location.address) {
+ // this.submitForm.address = location.address
+ // this.submitForm.latitude = location.latitude
+ // this.submitForm.longitude = location.longitude
+ // if (!this.submitForm.province && location.province) {
+ // this.submitForm.province = location.province
+ // if (!this.submitForm.city && location.city) {
+ // this.submitForm.city = location.city
+ // }
+ // if (!this.submitForm.region && location.district) {
+ // this.submitForm.region = location.district
+ // }
+ // if (!this.submitForm.region && location.city) {
+ // this.submitForm.region = location.city
+ // }
+ // }
+ // this.$forceUpdate()
+ // }
+ },
+ computed: {
+ ...mapState({
+ address: state => {
+ return state.defaultaddress || {}
+ },
+ addressDesc: state => {
+ return state.addressDesc || ''
+ },
+ // search_flow() {
+ // return this.addressDesc || ''
+ // }
+ }),
},
data() {
@@ -154,13 +249,101 @@
province: '',
city: '',
region: '',
-
+ latitude: 0,
+ longitude: 0,
},
regionDataPlus: [],
list: [],
+ search_flow: '',
};
},
methods: {
+ selectWxAddress(source) {
+ let that = this
+
+ {
+ //表单选择了地址
+ wx.chooseLocation({
+ success: location => {
+ console.log('success loc', location,source)
+ // address: "江苏省苏州市吴中区太湖东路288号"
+ // errMsg: "chooseLocation:ok"
+ // latitude: 31.26249
+ // longitude: 120.63212
+ // name: "苏州市吴中区人民政府"
+ if (source === 'form') {
+ // (location.address || '') +
+ that.submitForm.address = (location.name || location.address || '')
+ that.submitForm.latitude = location.latitude || 0
+ that.submitForm.longitude = location.longitude || 0
+ } else if (source === 'input') {
+ // (location.address || '') +
+ // that.search_flow = (location.name || '')
+ that.$store.commit('setAddressDesc', (location.name || location.address || ''))
+ that.$forceUpdate()
+ that.backpage()
+ }
+
+ // if (!that.submitForm.province && location.provinceName) {
+ // that.submitForm.province = location.provinceName
+ // if (!that.submitForm.city && location.cityName) {
+ // that.submitForm.city = location.cityName
+ // }
+ // if (!that.submitForm.region && location.countyName) {
+ // that.submitForm.region = location.countyName
+ // }
+ // if (!that.submitForm.region && location.cityName) {
+ // that.submitForm.region = location.cityName
+ // }
+ // }
+ // success loc
+ // {errMsg: "chooseAddress:ok", userName: "张三", nationalCode: "510000", telNumber: "020-81167888", postalCode: "510000", …}
+ // cityName: "广州市"
+ // countyName: "海珠区"
+ // detailInfo: "新港中路397号"
+ // errMsg: "chooseAddress:ok"
+ // nationalCode: "510000"
+ // postalCode: "510000"
+ // provinceName: "广东省"
+ // telNumber: "020-81167888"
+ // userName: "张三"
+ },
+ fail: e => {
+ console.log('fail loc', e)
+ // that.$message.showToast('定位失败')
+ }
+ })
+ // uni.getLocation({
+ // type: 'wgs84',
+ // success(res) {
+ // //得到经纬度
+ // console.log(res);
+ // const referer = '花满芫'; //调用插件的app的名称
+ // const location = JSON.stringify({
+ // latitude: res.latitude,
+ // longitude: res.longitude
+ // });
+ // const category = '生活服务,娱乐休闲';
+ // // &category=${category}
+
+ // wx.navigateTo({
+ // url: `plugin://chooseLocation/index?key=${lockey}&referer=${referer}&location=${location}`
+ // });
+
+ // }
+ // })
+ }
+ },
+ validatePhoneNumber() {
+
+ // 手机号码正则表达式，可以根据需要调整
+ const phoneRegex = /^[1][3-9][0-9]{9}$/;
+ if (!phoneRegex.test(this.submitForm['tel'])) {
+ this.$message.showToast('请填写正确手机号码')
+ }
+
+ },
+
addAddress() {
delete this.submitForm.id
this.submitForm['name'] = ''
@@ -172,13 +355,68 @@
this.submitForm['isDefault'] = false
this.openAddressForm()
},
+ changeCurrentAddress() {
+ // if(!this.addressDesc){
+
+ // }
+ let that = this
+ this.$message.showLoading()
+ uni.getLocation({
+ type: 'gcj02',
+ geocode: true,
+ success: async (res) => {
+ // this.location = {
+ // latitude: res.latitude,
+ // longitude: res.longitude,
+ // speed: res.speed,
+ // accuracy: res.accuracy,
+ // address: res.address,
+ // };
+ const {
+ code,data
+ } = await that.$http.request('get', '/api/pub/customer/home/address/parse', {
+ data: {},
+ params: {
+ // https://apis.map.qq.com/ws/geocoder/v1/?location=39.984154,116.307490&key=[你的key]&get_poi=1
+ location:`${res.latitude},${res.longitude}`
+ }
+ })
+ console.log('定位成功:', data);
+ if(data){
+ var address = data.result&&data.result.address || ''
+
+ that.$store.commit('setAddressDesc', (address || ''))
+ that.$forceUpdate()
+
+ that.backpage()
+
+ }
+
+
+ },
+ fail: (err) => {
+ that.error = err;
+ console.error('定位失败:', err);
+ },
+ complete() {
+ that.$message.hideLoading()
+ }
+ });
+ },
PickArea(item, e) {
console.log('PickArea', item, e)
if (e.detail.value) {
this.submitForm.province = ''
this.submitForm.city = ''
this.submitForm.region = ''
- if (e.detail.value.length <= 3) {
+ if (e.detail.value.length == 2) {
+ if (!!e.detail.value[0])
+ this.submitForm.province = e.detail.value[0].value
+ if (!!e.detail.value[0])
+ this.submitForm.city = e.detail.value[0].value
+ if (!!e.detail.value[1])
+ this.submitForm.region = e.detail.value[1].value
+ } else if (e.detail.value.length <= 3) {
if (!!e.detail.value[0])
this.submitForm.province = e.detail.value[0].value
if (!!e.detail.value[1])
@@ -201,9 +439,25 @@
}
},
async init_area() {
- const res = await this.$http.request('get', '/api/pub/china/area/json')
- this.regionDataPlus = res.data && JSON.parse(res.data.replaceAll('code', 'value').replaceAll('name',
- 'text')) || []
+ // debugger;
+ // if (this.regionDataPlus && this.regionDataPlus.length > 0) {
+
+ // } else {
+ // var a = this.$storage.getItem('cache_area')
+ var a =false
+ if (a) {
+ this.regionDataPlus = JSON.parse(a) || []
+ } else {
+ await this.$http.request('get', '/api/pub/china/area/json/refresh')
+ const res = await this.$http.request('get', '/api/pub/china/area/json')
+ // console.log('area', JSON.parse(res.data))
+ this.regionDataPlus = res.data && JSON.parse(res.data.replaceAll('code', 'value').replaceAll(
+ 'name',
+ 'text')) || []
+ this.$storage.setItem('cache_area', JSON.stringify(this.regionDataPlus))
+ }
+ // }
+
},
chooseLocation() {
//前往接口挑选位置
@@ -281,6 +535,7 @@
this.$store.commit('setDefaultAddress', {
...item
})
+
}
}, err => {
@@ -295,11 +550,20 @@
})
},
async selectAddress(item) {
- await this.$message.confirm('确定选择此地址作为收货地址吗')
//携带，然后返回
- this.$store.commit('setDefaultAddress', {
- ...item
- })
+
+ if(this.source==='home'){
+ this.$store.commit('setAddressDesc', '')
+ this.$store.commit('setDefaultAddress', {
+ ...item
+ })
+ }else{
+ await this.$message.confirm('确定选择此地址作为收货地址吗')
+ this.$store.commit('setDefaultAddress', {
+ ...item
+ })
+
+ }
this.backpage()
},
async deleteAddress(item) {
@@ -311,7 +575,7 @@
this.$message.hideLoading()
if (code === 0) {
this.$message.showToast('删除成功')
- if (item.isDefault) {
+ if (this.address.id === item.id) {
//要清空地址了
this.$store.commit('setDefaultAddress', {})
}
@@ -339,8 +603,10 @@
this.$message.hideLoading()
} else {
this.submitForm = {
- name: this.currentInfo && this.currentInfo.nickName || '',
- tel: this.currentInfo && this.currentInfo.tel || '',
+ // name: this.currentInfo && this.currentInfo.nickName || '',
+ // tel: this.currentInfo && this.currentInfo.tel || '',
+ name: '',
+ tel: '',
address: '',
isDefault: false,
province: '',
@@ -361,6 +627,20 @@
this.$message.showToast('字段未填写完整')
return
}
+ if (!this.submitForm['province'] || !this.submitForm['province'] || !this.submitForm['province']) {
+ this.$message.showToast('省市区未选择完整')
+ return
+ }
+
+ // 手机号码正则表达式，可以根据需要调整
+ const phoneRegex = /^[1][3-9][0-9]{9}$/;
+ if (!phoneRegex.test(this.submitForm['tel'])) {
+ this.$message.showToast('请填写正确手机号码')
+ return
+ }
+
+
+
this.$message.showLoading()
const {
code
@@ -372,11 +652,18 @@
if (code === 0) {
this.$refs.popup_form.close()
this.$message.showToast(this.submitForm.id ? '修改成功' : '新增成功')
+
let tmp = this
setTimeout(() => {
tmp.page.current = 1
tmp.refreshList()
}, 300)
+ //如果当前选择的地址是这个，需要更新一下数据
+ if (this.address.id && this.submitForm.id === this.address.id) {
+ this.$store.commit('setDefaultAddress', {
+ ...this.submitForm
+ })
+ }
}
},
@@ -386,6 +673,14 @@
<style lang="scss" scoped>
.container-address {
+ .current-address {
+ padding: 20rpx;
+ background-color: #FFFFFF;
+ border-radius: 16rpx;
+ margin-top: 16rpx;
+ margin-bottom: 20rpx;
+ }
+
.popup-address-form {
background: #FFFFFF;
border-radius: 16rpx;
--
Gitblit v1.9.3