From 499a94ded67a4c1e763dc6686afe5a2e99faf407 Mon Sep 17 00:00:00 2001
From: xuxueyang <xuxy@fengyuntec.com>
Date: 星期三, 24 七月 2024 11:09:20 +0800
Subject: [PATCH] update 订单功能（花店端）
---
pages/user/address/address.vue | 773 ++++++++++++++++++++++++++++++++--------------------------
1 files changed, 428 insertions(+), 345 deletions(-)
diff --git a/pages/user/address/address.vue b/pages/user/address/address.vue
index 75053a7..920a686 100644
--- a/pages/user/address/address.vue
+++ b/pages/user/address/address.vue
@@ -1,398 +1,481 @@
<template>
- <!-- 收获地址列表 -->
- <view class="p15 container-address">
- <no-data v-if="!list||list.length==0" style="width: 100%;"></no-data>
+ <!-- 收获地址列表 -->
+ <view class="p15 container-address">
+ <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 class="flex">
- <view class="container-info">
- <view class="flex">
- <view class="name">{{item.name || '-'}}</view>
- <view class="tel">{{item.tel||'-'}}</view>
- </view>
- <view class="address">
- {{item.address}}
+ <!-- 循环 -->
+ <view v-for="(item,index) of list" :key="index" class="location-each">
+ <view class="flex">
+ <view class="container-info">
+ <view class="flex">
+ <view class="name">{{ item.name || '-' }}</view>
+ <view class="tel">{{ item.tel || '-' }}</view>
+ </view>
+ <view class="address">
+ {{ item.address }}
- </view>
- </view>
- <!-- <view class="h-line"></view> -->
- <view class="edit" @click="()=>{
+ </view>
+ </view>
+ <!-- <view class="h-line"></view> -->
+ <view class="edit" @click="()=>{
this.submitForm = {
...item
}
openAddressForm()
}">
- <uni-icons type="compose" class="icon" color="#666666"></uni-icons>
- </view>
- </view>
- <view class="v-line"></view>
- <view class="flex">
- <view class="flex" @click="changeDefaultAddress(item,index)">
- <!-- <label class="radio flex" > -->
- <!-- <radio value="r1" :checked="item.defaulted" disabled
- style="transform:scale(0.6)" v-if="item.defaulted" />
- <radio value="r1"
- style="transform:scale(0.6)" :checked="item.defaulted" v-if="!item.defaulted" @change="changeDefaultAddress(item,index)"/>
- -->
+ <uni-icons type="compose" class="icon" color="#666666"></uni-icons>
+ </view>
+ </view>
+ <view class="v-line"></view>
+ <view class="flex">
+ <!-- @click="changeDefaultAddress(item,index)"-->
+ <view class="flex">
+ <view class="radio m-t-2 m-r-10" :class="[item.defaulted?'select':'']">
- <!-- </label> -->
- <view class="radio m-t-2 m-r-10" :class="[item.defaulted?'select':'']">
+ </view>
+ <span class="desc">{{ item.defaulted ? '默认地址:' : '当前地址:' }}{{ item.address || '' }}</span>
+ <!-- 当前地址/默认地址勾选 -->
+ </view>
+ <view class="desc del t-red" @click="deleteAddress(item)">
+ 删除
+ </view>
+ <view class="desc del t-green m-l-10" v-if="source==='select'" @click="selectAddress(item)">
+ 选择此地址
+ </view>
+ </view>
- </view>
- <span class="desc">{{item.defaulted?'默认地址:':'当前地址:'}}{{item.schoolAreaStr||''}}
- {{item.blockStr||''}}
- {{item.room||''}}</span>
- <!-- 当前地址/默认地址勾选 -->
- </view>
- <view class="desc del t-red" @click="deleteAddress(item)">
- 删除
- </view>
- <view class="desc del t-green m-l-10" v-if="source==='select'" @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=" ()=>{
+ </view>
+ <view style="height: 92rpx;width: 690rpx;">
+
+ </view>
+ <view class="button-green button-fixed-bottom" style="width: 690rpx;line-height: 92rpx;height: 92rpx;" @click=" ()=>{
delete this.submitForm.id
this.submitForm['name'] = ''
this.submitForm['tel'] = ''
this.submitForm['tel'] = ''
this.submitForm['area'] = ''
-
+
openAddressForm()
- }">添加收货地址</view>
+ }">添加收货地址
+ </view>
- <uni-popup ref="popup_form" type="top" :mask-click="false">
- <view class="popup-address-form">
- <view class="close-parent">
- {{submitForm.id?'新增':'编辑'}}收货地址
- <uni-icons class="close" type="closeempty" @click="closeAddressForm"></uni-icons>
- </view>
- <!--收货人、手机号、校区、详细地址 -->
- <view class="submit form">
- <view class="form-item">
- <view class="form-item-label require">
- 收货人
- </view>
- <view class="form-item-value">
- <input v-model="submitForm.name" placeholder="请输入收货人" class="form-input"></input>
- </view>
- </view>
- <view class="form-item">
- <view class="form-item-label require">
- 请选择收获地址
- </view>
- <view class="form-item-value">
- <input v-model="submitForm.room" placeholder="请选择收获地址" disabled class="form-input"></input>
- <!-- todo 点击定位 -->
- </view>
- </view>
- <view class="form-item">
- <view class="form-item-label require">
- 详细地址
- </view>
- <view class="form-item-value">
- <input v-model="submitForm.address" placeholder="请输入详细地址" class="form-input"></input>
+ <uni-popup ref="popup_form" type="top" :mask-click="false">
+ <view class="popup-address-form">
+ <view class="close-parent">
+ {{ submitForm.id ? '新增' : '编辑' }}收货地址
+ <uni-icons class="close" type="closeempty" @click="closeAddressForm"></uni-icons>
+ </view>
+ <!--收货人、手机号、校区、详细地址 -->
+ <view class="submit form">
+ <view class="form-item">
+ <view class="form-item-label require">
+ 收货人
+ </view>
+ <view class="form-item-value">
+ <input v-model="submitForm.name" placeholder="请输入收货人" class="form-input"></input>
+ </view>
+ </view>
+ <view class="form-item">
+ <view class="form-item-label require">
+ 请选择收获地址
+ </view>
+ <view class="m-l-a m-r-0 flex " :class="[!dto['province']?'desc-gray':'']">
+ <uni-data-picker :area="true" @change="(e)=>{PickArea(dto,e)}" placeholder=""
+ :localdata="regionDataPlus">
+ {{ dto['province'] || '请选择' }}{{ dto['city'] && ('/' + dto['city']) || '' }}{{
+ dto['region'] && ('/' + dto['region']) || ''
+ }}
+ </uni-data-picker>
+ <u-icon class="m-l-a" name="arrow-right"></u-icon>
+ </view>
- </view>
- </view>
- <view class="form-item">
- <view class="form-item-label">
- 是否默认
- </view>
- <view class="form-item-value">
- <radio value="r1" :checked="submitForm.defaulted"
- @click="submitForm.defaulted=!submitForm.defaulted"
- style="transform:scale(0.6);margin-top: -8rpx;" />
- </view>
- </view>
- </view>
+ <!-- <view class="form-item-value" @click="chooseLocation">-->
+ <!-- <input v-model="submitForm.room" placeholder="请选择收获地址" disabled class="form-input"></input>-->
+ <!-- <!– 点击定位 –>-->
+ <!-- </view>-->
+ </view>
+ <view class="form-item">
+ <view class="form-item-label require">
+ 详细地址
+ </view>
+ <view class="form-item-value">
+ <input v-model="submitForm.address" placeholder="请输入详细地址" class="form-input"></input>
- <view class="button-green m-t-15" @click="saveOrUpdateAddress">保存</view>
- </view>
- </uni-popup>
+ </view>
+ </view>
+ <view class="form-item">
+ <view class="form-item-label">
+ 是否默认
+ </view>
+ <view class="form-item-value">
+ <radio value="r1" :checked="submitForm.isDefault"
+ @click="submitForm.isDefault=!submitForm.isDefault"
+ style="transform:scale(0.6);margin-top: -8rpx;"/>
+ </view>
+ </view>
+ </view>
- </view>
+ <view class="button-green m-t-15" @click="saveOrUpdateAddress">保存</view>
+ </view>
+ </uni-popup>
+
+ </view>
</template>
<script>
- export default {
- async onPullDownRefresh() {
- this.page.current = 0
- await this.getList()
- uni.stopPullDownRefresh()
- },
- async onLoad(options) {
- // this.list = [{}, {}]
- this.source = options.source || ''
- this.listApi = '/api/address/customer/list'
- await this.getList()
+// import qqmapwx from '@/plugins/qqmap-wx-jssdk.min.js';
+// const lockey = 'VUHBZ-2AMLP-B7AD7-VUQZ7-D4TW5-MFFVN'; //使用在腾讯位置服务申请的key
+// const chooseLocation = requirePlugin('chooseLocation');
- },
- data() {
- return {
- source: '',
- submitForm: {
- name: '',
- tel: '',
- address: '',
- schoolArea: '',
- block: '',
- room: '',
- defaulted: false
- },
- };
- },
- methods: {
- async changeDefaultAddress(item, index) {
- if (item.defaulted) {
- return
- }
- this.$nextTick(() => {
- // item.defaulted = false
- // this.$set(item,'defaulted',false)
- this.$message.confirm('确定设置此地址为默认地址吗').then(async res => {
- this.$message.showLoading()
- var {
- code
- } = await this.$http.request('post', '/api/address/customer/default/' +
- item.id, {})
- this.$message.hideLoading()
- if (code == 0) {
- for (var dto of this.list) {
- dto.defaulted = false
- }
- this.$message.showToast('设置成功')
- item.defaulted = true
- this.$store.commit('setDefaultAddress', {
- ...item
- })
+export default {
+ async onPullDownRefresh() {
+ this.page.current = 0
+ await this.getList()
+ uni.stopPullDownRefresh()
+ },
+ async onLoad(options) {
+ // this.list = [{}, {}]
+ this.source = options.source || ''
+ this.listApi = '/api/address/list'
+ await this.getList()
- }
- }, err => {
- this.$nextTick(() => {
- this.list[index].defaulted = false
- this.$forceUpdate()
- console.log('err', err, this.list[index])
- })
+ },
+ data() {
+ return {
+ source: '',
+ submitForm: {
+ name: '',
+ tel: '',
+ address: '',
+ isDefault: false,
+ province: '',
+ city: '',
+ region: '',
+
+ },
+ regionDataPlus: [],
+ };
+ },
+ methods: {
+ PickArea(item, e) {
+ console.log('PickArea', item, e)
+ if (e.detail.value) {
+ this.dto.province = ''
+ this.dto.city = ''
+ this.dto.region = ''
+ if (e.detail.value.length <= 3) {
+ if (!!e.detail.value[0])
+ this.dto.province = e.detail.value[0].value
+ if (!!e.detail.value[1])
+ this.dto.city = e.detail.value[1].value
+ if (!!e.detail.value[2])
+ this.dto.region = e.detail.value[2].value
+ } else {
+ //说明有重复的
+ var plusnum = e.detail.value.length - 3
+ if (!!e.detail.value[plusnum + 0])
+ this.dto.province = e.detail.value[plusnum + 0].value
+ if (!!e.detail.value[plusnum + 1])
+ this.dto.city = e.detail.value[plusnum + 1].value
+ if (!!e.detail.value[plusnum + 2])
+ this.dto.region = e.detail.value[plusnum + 2].value
+ }
+
+ this.$forceUpdate()
+
+ }
+ },
+ 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')) || []
+ },
+ chooseLocation() {
+ //前往接口挑选位置
+ const qqmapsdk = new qqmapwx({
+ // 使用你在腾讯地图应用生成的key
+ key: lockey
+ });
+
+ uni.getLocation({
+ type: 'wgs84',
+ success(res) {
+ //得到经纬度
+ console.log(res);
+ qqmapsdk.reverseGeocoder({
+ location: {
+ latitude: res.latitude,
+ longitude: res.longitude
+ },
+ //成功后的回调
+ success: (r) => {
+ // console.log('地址信息', r.result.address_component);
+ // result: {location: {lat: 31.26249, lng: 120.63212}, address: "江苏省苏州市吴中区太湖东路288号",…}
+ // ad_info: {nation_code: "156", adcode: "320506", phone_area_code: "0512", city_code: "156320500",…}
+ // address: "江苏省苏州市吴中区太湖东路288号"
+ // address_component: {nation: "中国", province: "江苏省", city: "苏州市", district: "吴中区", street: "太湖东路",…}
+ // address_reference: {,…}
+ // formatted_addresses: {recommend: "长桥苏州市吴中区人民政府(太湖东路北)", rough: "长桥苏州市吴中区人民政府(太湖东路北)"}
+ // location: {lat: 31.26249, lng: 120.63212}
+ // status: 0
+ tmp.formcodes['LOC_ONE'][tmp.tmp_picker_lock_index].longitude = r
+ .result.location.lng
+ tmp.formcodes['LOC_ONE'][tmp.tmp_picker_lock_index].latitude = r
+ .result.location.lat
+ tmp.formcodes['LOC_ONE'][tmp.tmp_picker_lock_index].loc_desc = r
+ .result.address
+ tmp.formcodes['LOC_ONE'][tmp.tmp_picker_lock_index]._show = false
+ tmp.$forceUpdate()
+ tmp.tmp_picker_lock_index = -1
+
+ },
+ fail: function (res) {
+ console.log(res);
+ tmp.tmp_picker_lock_index = -1
+ },
+ });
+ }
+ });
+ },
+ async changeDefaultAddress(item, index) {
+ if (item.isDefault) {
+ return
+ }
+ this.$nextTick(() => {
+
+ this.$message.confirm('确定设置此地址为默认地址吗').then(async res => {
+ this.$message.showLoading()
+ var {
+ code
+ } = await this.$http.request('post', '/api/address/customer/default/' +
+ item.id, {})
+ this.$message.hideLoading()
+ if (code === 0) {
+ for (var dto of this.list) {
+ dto.isDefault = false
+ }
+ this.$message.showToast('设置成功')
+ item.isDefault = true
+ this.$store.commit('setDefaultAddress', {
+ ...item
+ })
+
+ }
+ }, err => {
+ this.$nextTick(() => {
+ this.list[index].defaulted = false
+ this.$forceUpdate()
+ console.log('err', err, this.list[index])
+ })
- })
- })
- },
- async selectAddress(item) {
- await this.$message.confirm('确定选择此地址作为收获地址吗')
- //携带，然后返回
- this.$store.commit('setDefaultAddress', {
- ...item
- })
- this.backpage()
- },
- async deleteAddress(item) {
- await this.$message.confirm('确定删除此地址吗')
- this.$message.showLoading()
- var {
- code
- } = await this.$http.request('get', '/api/address/customer/delete/' + item.id, {})
- this.$message.hideLoading()
- if (code == 0) {
- this.$message.showToast('删除成功')
- setTimeout(() => {
- this.page.current = 1
- this.getList()
- }, 500)
- }
- },
- async openAddressForm() {
- if (this.submitForm.id) {
- this.$message.showLoading()
- var {
- data
- } = await this.$http.request('get', '/api/address/customer/get/' + this.submitForm.id, {})
+ })
+ })
+ },
+ async selectAddress(item) {
+ await this.$message.confirm('确定选择此地址作为收获地址吗')
+ //携带，然后返回
+ this.$store.commit('setDefaultAddress', {
+ ...item
+ })
+ this.backpage()
+ },
+ async deleteAddress(item) {
+ await this.$message.confirm('确定删除此地址吗')
+ this.$message.showLoading()
+ var {
+ code
+ } = await this.$http.request('get', '/api/address/customer/delete/' + item.id, {})
+ this.$message.hideLoading()
+ if (code === 0) {
+ this.$message.showToast('删除成功')
+ setTimeout(() => {
+ this.page.current = 1
+ this.getList()
+ }, 500)
+ }
+ },
+ async openAddressForm() {
+ this.init_area()
+ if (this.submitForm.id) {
+ this.$message.showLoading()
+ var {
+ data
+ } = await this.$http.request('get', '/api/address/list/detail/' + this.submitForm.id, {})
- if (data) {
- this.submitForm = {
- ...this.submitForm,
- ...data
- }
- this.blockIndex = -1
- this.schoolIndex = -1
- }
- this.$message.hideLoading()
- } else {
- this.submitForm = {
- name: this.currentInfo && this.currentInfo.nickName || '',
- tel: this.currentInfo && this.currentInfo.tel || '',
- address: '',
- schoolArea: '',
- block: '',
- room: '',
- defaulted: false
- }
- this.schoolIndex = -1
- this.blockIndex = -1
- this.blocks = []
- }
+ if (data) {
+ this.submitForm = {
+ ...this.submitForm,
+ ...data
+ }
+ }
+ this.$message.hideLoading()
+ } else {
+ this.submitForm = {
+ name: this.currentInfo && this.currentInfo.nickName || '',
+ tel: this.currentInfo && this.currentInfo.tel || '',
+ address: '',
+ isDefault: false,
+ province: '',
+ city: '',
+ region: '',
+ }
+ }
- this.$refs.popup_form.open()
+ this.$refs.popup_form.open()
- },
- closeAddressForm() {
- this.$refs.popup_form.close()
+ },
+ closeAddressForm() {
+ this.$refs.popup_form.close()
- },
- async saveOrUpdateAddress() {
- if (!this.checkFormValues(this.submitForm, ['tel', 'name', 'address'])) {
- this.$message.showToast('字段未填写完整')
- return
- }
- this.$message.showLoading()
- const {
- code
- } = await this.$http.request('post', '/api/address/customer/' + (this.submitForm.id ? 'edit' :
- 'new'), {
- data: this.submitForm
- })
- this.$message.hideLoading()
- if (code == 0) {
- this.$refs.popup_form.close()
- this.$message.showToast(this.submitForm.id ? '修改成功' : '新增成功')
+ },
+ async saveOrUpdateAddress() {
+ if (!this.checkFormValues(this.submitForm, ['tel', 'name', 'address'])) {
+ this.$message.showToast('字段未填写完整')
+ return
+ }
+ this.$message.showLoading()
+ const {
+ code
+ } = await this.$http.request('post', '/api/address/' + (this.submitForm.id ? 'update' :
+ 'edit'), {
+ data: this.submitForm
+ })
+ this.$message.hideLoading()
+ if (code === 0) {
+ this.$refs.popup_form.close()
+ this.$message.showToast(this.submitForm.id ? '修改成功' : '新增成功')
- setTimeout(() => {
- this.page.current = 1
- this.getList()
- }, 300)
- }
- },
+ setTimeout(() => {
+ this.page.current = 1
+ this.getList()
+ }, 300)
+ }
+ },
- }
- }
+ }
+}
</script>
<style lang="scss" scoped>
- .container-address {
- .popup-address-form {
- background: #FFFFFF;
- border-radius: 16rpx;
- // width: 690rpx;
- height: 882rpx;
- margin-top: 120rpx;
- margin-left: 30rpx;
- margin-right: 30rpx;
- padding: 24rpx 36rpx;
+.container-address {
+ .popup-address-form {
+ background: #FFFFFF;
+ border-radius: 16rpx;
+ // width: 690rpx;
+ height: 882rpx;
+ margin-top: 120rpx;
+ margin-left: 30rpx;
+ margin-right: 30rpx;
+ padding: 24rpx 36rpx;
- .submit {
- margin-top: 30rpx;
+ .submit {
+ margin-top: 30rpx;
- .form-input {
- height: 36rpx;
- line-height: 36rpx;
- }
- }
- }
+ .form-input {
+ height: 36rpx;
+ line-height: 36rpx;
+ }
+ }
+ }
- .location-each {
- background: #FFFFFF;
- border-radius: 16rpx;
- margin-bottom: 24rpx;
- padding: 36rpx;
+ .location-each {
+ background: #FFFFFF;
+ border-radius: 16rpx;
+ margin-bottom: 24rpx;
+ padding: 36rpx;
- .name {
- font-size: 32rpx;
- color: #000000;
- line-height: 44rpx;
- text-align: left;
- font-style: normal;
- }
+ .name {
+ font-size: 32rpx;
+ color: #000000;
+ line-height: 44rpx;
+ text-align: left;
+ font-style: normal;
+ }
- .tel {
- font-size: 28rpx;
- color: #666666;
- line-height: 40rpx;
- text-align: left;
- font-style: normal;
- padding-top: 4rpx;
- margin-left: 20rpx;
- }
+ .tel {
+ font-size: 28rpx;
+ color: #666666;
+ line-height: 40rpx;
+ text-align: left;
+ font-style: normal;
+ padding-top: 4rpx;
+ margin-left: 20rpx;
+ }
- .address {
- font-size: 24rpx;
- color: #000000;
- line-height: 34rpx;
- text-align: left;
- font-style: normal;
- }
+ .address {
+ font-size: 24rpx;
+ color: #000000;
+ line-height: 34rpx;
+ text-align: left;
+ font-style: normal;
+ }
- .desc {
- font-size: 24rpx;
- color: #666666;
- line-height: 34rpx;
- text-align: left;
- font-style: normal;
- }
+ .desc {
+ font-size: 24rpx;
+ color: #666666;
+ line-height: 34rpx;
+ text-align: left;
+ font-style: normal;
+ }
- .del {
- // vertical-align: baseline;
- margin-left: auto;
- margin-right: 6rpx;
- margin-top: 4rpx;
- }
+ .del {
+ // vertical-align: baseline;
+ margin-left: auto;
+ margin-right: 6rpx;
+ margin-top: 4rpx;
+ }
- .container-info {
- max-width: 540rpx;
- }
+ .container-info {
+ max-width: 540rpx;
+ }
- .h-line {
- width: 2rpx;
- height: 46rpx;
- background-color: #EEEEEE;
- margin-left: 28rpx;
- margin-right: 24rpx;
- }
+ .h-line {
+ width: 2rpx;
+ height: 46rpx;
+ background-color: #EEEEEE;
+ margin-left: 28rpx;
+ margin-right: 24rpx;
+ }
- .v-line {
- width: 638rpx;
- height: 2rpx;
- // border: 2rpx solid #EEEEEE;
- background-color: #EEEEEE;
- margin-top: 24rpx;
- margin-bottom: 24rpx;
- }
+ .v-line {
+ width: 638rpx;
+ height: 2rpx;
+ // border: 2rpx solid #EEEEEE;
+ background-color: #EEEEEE;
+ margin-top: 24rpx;
+ margin-bottom: 24rpx;
+ }
- .edit {
- // min-width: 80rpx;
- width: fit-content;
- margin-left: auto;
- margin-right: 0rpx;
- display: flex;
- position: relative;
+ .edit {
+ // min-width: 80rpx;
+ width: fit-content;
+ margin-left: auto;
+ margin-right: 0rpx;
+ display: flex;
+ position: relative;
- .icon {
- // margin: 0 auto;
- // mar
- margin-left: auto;
- margin-right: auto;
- margin-top: 20rpx;
- display: block;
+ .icon {
+ // margin: 0 auto;
+ // mar
+ margin-left: auto;
+ margin-right: auto;
+ margin-top: 20rpx;
+ display: block;
- }
- }
+ }
+ }
- .edit::before {
- content: " ";
- width: 2rpx;
- height: 46rpx;
- background-color: #EEEEEE;
- position: absolute;
- left: -24rpx;
- top: 20rpx;
- }
- }
- }
+ .edit::before {
+ content: " ";
+ width: 2rpx;
+ height: 46rpx;
+ background-color: #EEEEEE;
+ position: absolute;
+ left: -24rpx;
+ top: 20rpx;
+ }
+ }
+}
</style>
\ No newline at end of file
--
Gitblit v1.9.3