hly
/
uniapp-shop-templates
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

上传

master
前端-胡立永 7 months ago
parent
f607982274
commit
1fa73dfbce
4 changed files with 272 additions and 491 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +43
    -16
      api/api.js
  2. +92
    -46
      pages_order/components/address/addressList.vue
  3. +106
    -92
      pages_order/components/address/redactAddress.vue
  4. +31
    -337
      pages_order/mine/address.vue

+ 43
- 16
api/api.js View File

@ -1,5 +1,9 @@
import http from './http.js'
let limit = {}
let debounce = {}
const config = {
// 示例
// wxLogin : {url : '/api/wxLogin', method : 'POST',
@ -30,46 +34,69 @@ const config = {
export function api(key, data, callback, loadingTitle){
export function api(key, data, callback, loadingTitle) {
let req = config[key]
if (!req) {
console.error('无效key' + key);
return
}
if(typeof callback == 'string'){
if (typeof callback == 'string') {
loadingTitle = callback
}
if(typeof data == 'function'){
if (typeof data == 'function') {
callback = data
data = {}
}
// 接口限流
if(req.limit){
let storageKey = 'limit:' + req.url
let storage = uni.getStorageSync(storageKey)
if(storage && new Date().getTime() - parseInt(storage) < req.limit){
if (req.limit) {
let storageKey = req.url
let storage = limit[storageKey]
if (storage && new Date().getTime() - storage < req.limit) {
return
}
uni.setStorageSync(storageKey, new Date().getTime())
limit[storageKey] = new Date().getTime()
}
//必须登录
if (req.auth) {
if (!uni.getStorageSync('token')) {
uni.navigateTo({
url: '/pages/login/mobile'
url: '/pages_order/auth/wxLogin'
})
console.error('需要登录')
return
}
}
http.http(req.url, data, callback, req.method,
loadingTitle || req.showLoading, loadingTitle || req.loadingTitle)
// 接口防抖
if(req.debounce){
let storageKey = req.url
let storage = debounce[storageKey]
if (storage) {
clearTimeout(storage)
}
debounce[storageKey] = setTimeout(() => {
clearTimeout(storage)
delete debounce[storageKey]
http.http(req.url, data, callback, req.method,
loadingTitle || req.showLoading, loadingTitle || req.loadingTitle)
}, req.debounce)
return
}
http.http(req.url, data, callback, req.method,
loadingTitle || req.showLoading, loadingTitle || req.loadingTitle)
}


+ 92
- 46
pages_order/components/address/addressList.vue View File

@ -1,52 +1,67 @@
<template>
<uv-radio-group v-model="selectAddress">
<view v-for="item in addressList" :key="item.id" class="address-item">
<view class="address-item-top"
@click="select(item)">
<view class="img-box">
<image src="../../static/address/icon.png" mode="aspectFill"></image>
</view>
<view class="address-info">
<view class="user-info">
<text class="user-name">{{ item.name }}</text>
<text class="user-phone">{{ item.phone }}</text>
<text v-if="item.defaultId == '1'" class="is-default">默认</text>
<scroll-view
scroll-y="true"
:style="{height: height}"
@scrolltolower="moreAddress">
<uv-radio-group v-model="selectAddress"
@change="editDefault"
v-if="addressList.length > 0">
<view v-for="item in addressList" :key="item.id" class="address-item">
<view class="address-item-top"
@click="select(item)">
<view class="img-box">
<image src="../../static/address/icon.png" mode="aspectFill"></image>
</view>
<view class="address-detail">
{{ item.address + " " + item.addressDetail }}
<view class="address-info">
<view class="user-info">
<text class="user-name">{{ item.name }}</text>
<text class="user-phone">{{ item.phone }}</text>
<text v-if="item.defaultFlag == 1" class="is-default">默认</text>
</view>
<view class="address-detail">
{{ item.address + " " + item.addressDetail }}
</view>
</view>
</view>
</view>
<view class="controls"
v-if="controls">
<view class="default-checkbox">
<uv-radio @click="editDefault(item)"
:name="item.id"
label-disabled
size="30rpx"
icon-size="30rpx">
默认地址
</uv-radio>
</view>
<view class="edit-btn">
<uv-icon name="edit-pen"></uv-icon>
<text @click="editAddress(item.id)" class="control-title">编辑</text>
</view>
<view class="del-btn">
<uv-icon name="trash"></uv-icon>
<text class="control-title" @click="deleteAddress(item.id)">删除</text>
<view class="controls"
v-if="controls">
<view class="default-checkbox">
<uv-radio
:name="item.id"
label-disabled
size="30rpx"
icon-size="30rpx">
默认地址
</uv-radio>
</view>
<view class="edit-btn">
<uv-icon name="edit-pen"></uv-icon>
<text @click="editAddress(item)" class="control-title">编辑</text>
</view>
<view class="del-btn">
<uv-icon name="trash"></uv-icon>
<text class="control-title" @click="deleteAddress(item.id)">删除</text>
</view>
</view>
</view>
</uv-radio-group>
<view
style="padding: 100rpx 0;"
v-else>
<uv-empty
mode="history"
textSize="28rpx"
iconSize="100rpx"/>
</view>
</uv-radio-group>
</scroll-view>
</template>
<script>
@ -56,17 +71,48 @@
default : false,
type : Boolean,
},
addressList : {
default : [],
type : Array,
height : {
default : 'calc(90vh - 180rpx)'
}
},
data() {
return {
selectAddress : 0,
queryParams: {
pageNo: 1,
pageSize: 10,
},
addressList: [],
total : 0,
}
},
methods: {
//获取地址列表
getAddressList() {
return new Promise((success, fail) => {
this.$api('addressPage', this.queryParams, res => {
if (res.code == 200) {
this.addressList = res.result.records || [];
this.total = res.result.total || 0;
res.result.records.forEach(n => { //筛选默认地址
console.log(n);
if (n.defaultFlag == 1) {
this.selectAddress = n.id
}
})
success(res.result)
}
})
})
},
// 加载更多
moreAddress(){
if(this.queryParams.pageSize > this.total){
return
}
this.queryParams.pageSize += 10
this.getAddressList()
},
// 删除地址
deleteAddress(e){
this.$emit('deleteAddress', e)
@ -82,7 +128,7 @@
// 选择了地址
select(e){
this.$emit('select', e)
}
},
}
}
</script>


+ 106
- 92
pages_order/components/address/redactAddress.vue View File

@ -1,126 +1,140 @@
<template>
<view class="redact-address">
<uv-popup round="40rpx" ref="addressPopup" :customStyle="{ height: 'auto' , width : '100%' , padding : '20rpx'}">
<view class="redact-address">
<view class="redact-address-title">{{title}}</view>
<uv-form label-width="210rpx"
:model="addressDetail"
ref="form" :rules="rules">
<!-- <uv-field v-model="addressDetail.name" name="联系人" label="联系人" placeholder="请输入联系人姓名"
:rules="[{ required: true, message: '请填写联系人' }]" />
<uv-field v-model="addressDetail.phone" name="手机号" label="手机号" placeholder="请输入手机号"
:rules="[{ required: true, message: '请填写手机号' }]" />
<uv-field @click="$emit('clickAddressIcon')" v-model="addressDetail.address" name="所在地区" label="所在地区" placeholder="选择省市区街道"
:rules="[{ required: true, message: '请选择省市区街道' }]">
<template #right-icon>
<image @click.stop="$emit('clickAddressIcon')" src="../static/address/selectIcon.png" mode="aspectFit"></image>定位
</template>
</uv-field>
<uv-field v-model="addressDetail.addressDetail" name="详细地址" label="详细地址" placeholder="小区楼栋、门牌号、村等"
:rules="[{ required: true, message: '请填写详细地址' }]" /> -->
<uv-form-item label="联系人"
prop="name"
>
<uv-input v-model="addressDetail.name"
placeholder="请输入联系人姓名"
border="none">
<uv-form label-width="210rpx" :model="addressDetail" ref="form">
<uv-form-item label="联系人" prop="name">
<uv-input v-model="addressDetail.name" placeholder="请输入联系人姓名" border="none">
</uv-input>
</uv-form-item>
<uv-form-item label="手机号"
prop="phone"
>
<uv-input v-model="addressDetail.phone"
placeholder="请输入手机号"
border="none">
<uv-form-item label="手机号" prop="phone">
<uv-input v-model="addressDetail.phone" placeholder="请输入手机号" border="none">
</uv-input>
</uv-form-item>
<uv-form-item label="所在地区"
prop="address"
>
<uv-input
v-model="addressDetail.address"
placeholder="请选择所在地区"
border="none">
<uv-form-item label="所在地区" prop="address">
<uv-input v-model="addressDetail.address" placeholder="请选择所在地区" border="none">
</uv-input>
<template #right>
<view style="padding-right: 40rpx;color: #FBAB32;"
@click.stop="$emit('clickAddressIcon')">
<image
src="../../static/address/selectIcon.png"
mode="aspectFit"></image>定位
<view style="padding-right: 40rpx;color: #FBAB32;" @click.stop="selectAddr">
<image src="../../static/address/selectIcon.png" mode="aspectFit"></image>定位
</view>
</template>
</uv-form-item>
<uv-form-item label="详细地址"
prop="addressDetail"
>
<uv-input v-model="addressDetail.addressDetail"
placeholder="请输入详细地址"
border="none">
<uv-form-item label="详细地址" prop="addressDetail">
<uv-input v-model="addressDetail.addressDetail" placeholder="请输入详细地址" border="none">
</uv-input>
</uv-form-item>
</uv-form>
<view @click="onSubmit" class="save">{{ addressDetail.id ? '修改地址' : '新增地址'}}</view>
</view>
</view>
</uv-popup>
</template>
<script>
import Position from '@/utils/position.js'
export default {
data() {
return {
rules: {
'name': {
type: 'string',
required: true,
message: '请填写姓名',
trigger: ['blur', 'change']
},
'addressDetail': {
type: 'string',
max: 50,
required: true,
message: '请输入详细地址',
trigger: ['blur', 'change']
},
},
addressDetail: {}
}
},
props : {
addressDetail : {
type : Object,
default : function(){ return {} }
},
title : {
type : String,
default : '新增地址'
props: {
title: {
type: String,
default: '新增地址'
}
},
methods: {
open(addressDetail) {
this.addressDetail = addressDetail
this.$refs.addressPopup.open('bottom')
},
close(){
this.$refs.addressPopup.close()
},
//新增和修改地址
onSubmit() {
this.$refs.form.validate().then(res => {
console.log(res);
uni.showToast({
icon: 'success',
title: '校验通过'
let isOk = this.parameterVerification(this.addressDetail)
if (isOk && !isOk.auth) {
return uni.showToast({
icon: 'none',
title: isOk.title,
'zIndex': 10000
})
}).catch(errors => {
uni.showToast({
icon: 'error',
title: '校验失败'
}
this.$emit('saveOrUpdate', this.addressDetail)
},
//验证用户参数合法性
parameterVerification(addressDetaila) {
let {
name,
phone,
address,
addressDetail
} = addressDetaila
if (name.trim() == '') {
return {
title: '请填写联系人',
auth: false
}
} else if (phone.trim() == '') {
return {
title: '请填写手机号',
auth: false
}
} else if (address.trim() == '') {
return {
title: '请填写所在地区',
auth: false
}
} else if (addressDetail.trim() == '') {
return {
title: '请填写详细地址',
auth: false
}
} else if (phone.trim() != '') {
if (!this.$utils.verificationPhone(phone)) {
return {
title: '手机号格式不合法',
auth: false
}
}
}
return {
title: '验证通过',
auth: true
}
},
//地图上选择地址
selectAddr() {
Position.getLocation(res => {
Position.selectAddress(res.longitude, res.latitude, success => {
this.setAddress(success)
})
})
// this.$emit('saveOrUpdate', this.addressDetail)
}
},
//提取用户选择的地址信息复制给表单数据
setAddress(res) {
//经纬度信息
this.addressDetail.latitude = res.latitude
this.addressDetail.longitude = res.longitude
if (!res.address && res.name) { //用户直接选择城市的逻辑
return this.addressDetail.address = res.name
}
if (res.address || res.name) {
return this.addressDetail.address = res.address + res.name
}
this.addressDetail.address = '' //用户啥都没选就点击勾选
},
}
}
</script>


+ 31
- 337
pages_order/mine/address.vue View File

@ -3,77 +3,22 @@
<navbar title="地址管理" leftClick @leftClick="leftClick" />
<view v-if="addressList.length > 0" class="address-list">
<!-- <uv-radio-group v-model="selectAddress">
<view v-for="item in addressList" :key="item.id" class="address-item">
<view class="address-item-top">
<view class="img-box">
<image src="../static/address/icon.png" mode="aspectFill"></image>
</view>
<view class="address-info">
<view class="user-info">
<text class="user-name">{{ item.name }}</text>
<text class="user-phone">{{ item.phone }}</text>
<text v-if="item.defaultId == '1'" class="is-default">默认</text>
</view>
<view class="address-detail">
{{ item.address + " " + item.addressDetail }}
</view>
</view>
</view>
<view class="controls">
<view class="default-checkbox">
<uv-radio @click="addDefault(item)"
:name="item.id"
label-disabled
size="30rpx"
icon-size="30rpx">
默认地址
</uv-radio>
</view>
<view class="edit-btn">
<uv-icon name="edit-pen"></uv-icon>
<text @click="getAddressDetail(item.id)" class="control-title">编辑</text>
</view>
<view class="del-btn">
<uv-icon name="trash"></uv-icon>
<text class="control-title" @click="deleteAddress(item.id)">删除</text>
</view>
</view>
</view>
</uv-radio-group> -->
<view class="address-list">
<addressList
controls
ref="addressList"
@deleteAddress="deleteAddress"
@editAddress="getAddressDetail"
@editDefault="addDefault"
:addressList="addressList"/>
@editAddress="editAddress"
@editDefault="editDefault"/>
</view>
<view
style="padding: 100rpx 0;"
v-else>
<uv-empty
mode="history"
textSize="28rpx"
iconSize="100rpx"/>
</view>
<uv-popup
round="40rpx"
<redactAddress
ref="addressPopup"
:customStyle="{ height: 'auto' , width : '100%' , padding : '20rpx'}">
<redactAddress :addressDetail="addressDetail" @saveOrUpdate="saveOrUpdate" :title="title"
@clickAddressIcon="selectAddr"></redactAddress>
</uv-popup>
:addressDetail="addressDetail"
@saveOrUpdate="saveOrUpdate"
:title="title"></redactAddress>
<view class="add-btn">
<view @click="addBtn" class="btn">
@ -86,7 +31,6 @@
<script>
import redactAddress from '../components/address/redactAddress.vue'
import addressList from '../components/address/addressList.vue'
import Position from '@/utils/position.js'
export default {
components: {
@ -95,81 +39,22 @@
},
data() {
return {
selectAddress: 0, //单选框选中的地址
queryParams: {
pageNo: 1,
pageSize: 10
},
addressList: [
{
id : 1,
name : 'xx',
phone : '1305xxxx802',
address : '广东省广州市越秀区',
addressDetail : '城南故事C3栋2802',
},
{
id : 2,
name : 'xx',
phone : '1305xxxx802',
address : '广东省广州市越秀区',
addressDetail : '城南故事C3栋2802',
},
{
id : 3,
name : 'xx',
phone : '1305xxxx802',
address : '广东省广州市越秀区',
addressDetail : '城南故事C3栋2802',
},
],
addressDetail: {},
title: '新增地址'
}
},
onShow() {
// if (this.$route.query.current == 'payOrder') {
// this.$refs.addressPopup.open('bottom')
// }
// this.getAddressList()
this.getAddressList()
},
methods: {
//list列表滑动到底部自动新增数据列表
onLoad() {
this.queryParams.pageSize += 10
this.getAddressList()
},
//获取地址列表
getAddressList() {
this.$api('getAddressList', this.queryParams, res => {
if (res.code == 200) {
this.addressList = res.result.records || [];
this.addressList.forEach(n => { //筛选默认地址
if (n.defaultId == '1') {
this.selectAddress = n.id
}
})
if (this.queryParams.pageSize > res.result.total) {
this.finished = true
}
}
this.loading = false
})
this.$refs.addressList.getAddressList()
},
//获取地址详情
getAddressDetail(id) {
this.title = '修改地址'
this.$api('getAddressDetail', {
id
}, res => {
if (res.code == 200) {
this.addressDetail = res.result;
this.$refs.addressPopup.open('bottom')
}
})
editAddress(address) {
this.$refs.addressPopup.open({...address})
},
//返回个人中心
@ -178,31 +63,23 @@
},
//添加和修改地址
saveOrUpdate() {
let isOk = this.parameterVerification()
if (isOk && !isOk.auth) {
return showNotify({
type: 'warning',
message: isOk.title,
'z-index': 10000
});
}
saveOrUpdate(addressDetail) {
let data = {
name: this.addressDetail.name,
phone: this.addressDetail.phone,
address: this.addressDetail.address,
addressDetail: this.addressDetail.addressDetail,
defaultId: this.addressDetail.defaultId || '0',
latitude: this.addressDetail.latitude,
longitude: this.addressDetail.longitude
name: addressDetail.name,
phone: addressDetail.phone,
address: addressDetail.address,
addressDetail: addressDetail.addressDetail,
defaultId: addressDetail.defaultId || '0',
latitude: addressDetail.latitude,
longitude: addressDetail.longitude
}
if (this.addressDetail.id) {
data.id = this.addressDetail.id
if (addressDetail.id) {
data.id = addressDetail.id
}
this.$api('addOrUpdateAddress', data, res => {
this.$api(data.id ? 'addressEdit' : 'addressAdd', data, res => {
if (res.code == 200) {
this.$refs.addressPopup.close()
this.getAddressList()
@ -210,21 +87,14 @@
title: '操作成功',
icon: 'none'
})
if (this.$route.query.current == 'payOrder') { //如果是从订单支付过来添加地址的就再调回去
uni.navigateTo({
url: `/pages/order/payOrder?orderId=${this.$route.query.orderId}`
})
}
}
})
},
//新增默认地址
addDefault(item) {
this.selectAddress = item.id
this.$api('addOrUpdateAddress', {
id: item.id,
defaultId: '1',
//修改默认地址
editDefault(id) {
this.$api('addressDefault', {
id: id,
}, res => {
if (res.code == 200) {
this.$refs.addressPopup.close()
@ -245,7 +115,7 @@
content: '确认删除此地址?删除后数据不可恢复',
success(e) {
if(e.confirm){
self.$api('deleteAddress', {
self.$api('addressDelete', {
id
}, res => {
if (res.code == 200) {
@ -264,7 +134,7 @@
//点击新增按钮
addBtn() {
this.title = '新增地址'
this.addressDetail = { //初始化数据
this.$refs.addressPopup.open({ //初始化数据
name: '',
phone: '',
address: '',
@ -272,75 +142,8 @@
defaultId: '',
latitude: '',
longitude: ''
}
this.$refs.addressPopup.open('bottom')
},
//验证用户参数合法性
parameterVerification() {
let {
name,
phone,
address,
addressDetail
} = this.addressDetail
if (name.trim() == '') {
return {
title: '请填写联系人',
auth: false
}
} else if (phone.trim() == '') {
return {
title: '请填写手机号',
auth: false
}
} else if (address.trim() == '') {
return {
title: '请填写所在地区',
auth: false
}
} else if (addressDetail.trim() == '') {
return {
title: '请填写详细地址',
auth: false
}
} else if (phone.trim() != '') {
if (!this.$utils.verificationPhone(phone)) {
return {
title: '手机号格式不合法',
auth: false
}
}
}
return {
title: '验证通过',
auth: true
}
},
//地图上选择地址
selectAddr() {
Position.getLocation(res => {
Position.selectAddress(res.longitude, res.latitude, success => {
this.setAddress(success)
})
})
},
//提取用户选择的地址信息复制给表单数据
setAddress(res) {
//经纬度信息
this.addressDetail.latitude = res.latitude
this.addressDetail.longitude = res.longitude
if (!res.address && res.name) { //用户直接选择城市的逻辑
return this.addressDetail.address = res.name
}
if (res.address || res.name) {
return this.addressDetail.address = res.address + res.name
}
this.addressDetail.address = '' //用户啥都没选就点击勾选
}
}
}
</script>
@ -355,115 +158,6 @@
.address-list {
padding: 40rpx 20rpx 120rpx 20rpx;
// .address-item {
// background: white;
// border-radius: 20rpx;
// overflow: hidden;
// margin-bottom: 20rpx;
// padding: 15rpx 15rpx 0rpx 15rpx;
// width: 680rpx;
// .address-item-top {
// border-bottom: 1px dashed #D3D1D1;
// display: flex;
// align-items: center;
// padding: 0rpx 0rpx 15rpx 0rpx;
// .img-box {
// width: 120rpx;
// height: 120rpx;
// image {
// width: 75%;
// height: 75%;
// display: block;
// margin: 12.5% auto;
// }
// }
// .address-info {
// width: calc(100% - 120rpx);
// height: 100%;
// display: flex;
// flex-direction: column;
// justify-content: space-between;
// .user-info {
// display: flex;
// align-items: center;
// text {
// display: block;
// line-height: 40rpx;
// margin-right: 20rpx;
// }
// .user-name,
// .user-phone {
// font-size: 30rpx;
// }
// .is-default {
// display: flex;
// align-items: center;
// justify-content: center;
// background: #FEB773;
// color: white;
// width: 80rpx;
// height: 35rpx;
// border-radius: 20rpx;
// font-size: 22rpx;
// }
// }
// .address-detail {
// color: #4a4a4a;
// font-size: 26rpx;
// overflow: hidden;
// display: -webkit-box;
// -webkit-box-orient: vertical;
// -webkit-line-clamp: 2;
// text-overflow: ellipsis;
// }
// }
// }
// .controls {
// display: flex;
// align-items: center;
// justify-content: space-between;
// align-items: center;
// font-size: 26rpx;
// padding: 15rpx 15rpx 25rpx 15rpx;
// .default-checkbox {
// display: flex;
// text {
// margin-left: 8rpx;
// }
// }
// .control-title {
// height: 30rpx;
// line-height: 30rpx;
// color: #666666;
// }
// view {
// display: flex;
// align-items: center;
// }
// image {
// width: 23rpx;
// height: 23rpx;
// vertical-align: middle;
// margin-right: 8rpx;
// }
// }
// }
}
.add-btn {


Write Preview
Loading…
Cancel
Save