Initial commit: 积分兑换电商平台多商户版 MER-2.2
Made-with: Cursor
This commit is contained in:
apple
267
mer_uniapp/pages/address/components/areaWindow/index.vue
Normal file
267
mer_uniapp/pages/address/components/areaWindow/index.vue
Normal file
@@ -0,0 +1,267 @@
|
||||
<template>
|
||||
<view :data-theme="theme">
|
||||
<view class="address-window" :class="display==true?'on':''">
|
||||
<view class='title'>请选择所在地区<text class='iconfont icon-ic_close1' @tap='close'></text></view>
|
||||
<view class="address-count">
|
||||
<view class="address-selected">
|
||||
<view v-for="(item,index) in selectedArr" :key="index" class="selected-list" :class="{active:index === selectedIndex}" @click="change(item, index)">
|
||||
{{item.regionName?item.regionName:'请选择'}}
|
||||
<text class="iconfont icon-ic_rightarrow"></text>
|
||||
</view>
|
||||
<view class="selected-list" :class="{active:-1 === selectedIndex}" v-if="showMore" @click="change(-1, -1)">
|
||||
<text class="iconfont icon-ic_rightarrow"></text>
|
||||
请选择
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view scroll-y="true" :scroll-top="scrollTop" class="address-list" @scroll="scroll">
|
||||
<view v-for="(item,index) in addressList" :key="index" class="list" :class="{active:item.regionId === activeId}" @click="selected(item, index)">
|
||||
<text class="item-name">{{item.regionName}}</text>
|
||||
<text v-if="item.regionId === activeId" class="iconfont icon-duihao2"></text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='mask' catchtouchmove="true" :hidden='display==false' @tap='close'></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// +----------------------------------------------------------------------
|
||||
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
||||
// +----------------------------------------------------------------------
|
||||
// | Copyright (c) 2016~2026 https://www.crmeb.com All rights reserved.
|
||||
// +----------------------------------------------------------------------
|
||||
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
||||
// +----------------------------------------------------------------------
|
||||
// | Author: CRMEB Team <admin@crmeb.com>
|
||||
// +----------------------------------------------------------------------
|
||||
import { getCity } from '@/api/api.js';
|
||||
const CACHE_ADDRESS = {};
|
||||
let app = getApp();
|
||||
export default {
|
||||
props: {
|
||||
display: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
address: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
theme: app.globalData.theme,
|
||||
active: 0,
|
||||
//地址列表
|
||||
addressList: [],
|
||||
selectedArr: [],
|
||||
selectedIndex: -1,
|
||||
is_loading: false,
|
||||
old: { scrollTop: 0 },
|
||||
scrollTop: 0,
|
||||
addressData: [],
|
||||
province: [],
|
||||
city: [],
|
||||
district: [],
|
||||
street: []
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
activeId(){
|
||||
return this.selectedIndex == -1 ? 0 : this.selectedArr[this.selectedIndex].regionId
|
||||
},
|
||||
showMore(){
|
||||
return this.selectedArr.length ? this.selectedArr[this.selectedArr.length - 1].isChild : true
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
address(n){
|
||||
this.selectedArr = n ? [...n] : []
|
||||
},
|
||||
display(n){
|
||||
if(!n) {
|
||||
this.addressList = [];
|
||||
this.selectedArr = this.address ? [...this.address] : [];
|
||||
this.selectedIndex = -1;
|
||||
this.is_loading = false;
|
||||
}else{
|
||||
this.loadAddress(1, 1)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.loadAddress(1, 1);
|
||||
},
|
||||
methods: {
|
||||
loadAddress(parentId, regionType){
|
||||
if(CACHE_ADDRESS[parentId]){
|
||||
this.addressList = CACHE_ADDRESS[parentId];
|
||||
return ;
|
||||
}
|
||||
let data = {
|
||||
parentId: parentId,
|
||||
regionType: regionType
|
||||
}
|
||||
this.is_loading = true;
|
||||
getCity(data).then(res=>{
|
||||
this.is_loading = false;
|
||||
CACHE_ADDRESS[parentId] = res.data;
|
||||
this.addressList = res.data;
|
||||
})
|
||||
this.goTop()
|
||||
},
|
||||
change(item,index){
|
||||
if(this.selectedIndex == index) return;
|
||||
this.selectedIndex = index;
|
||||
this.loadAddress(item.parentId,item.regionType);
|
||||
},
|
||||
selected(item, index){
|
||||
if(this.is_loading) return;
|
||||
if(this.selectedIndex > -1){
|
||||
this.selectedArr.splice(this.selectedIndex + 1,999)
|
||||
this.selectedArr[this.selectedIndex] = item;
|
||||
this.selectedIndex = -1;
|
||||
}else if(item.regionType === 1){
|
||||
this.selectedArr = [item];
|
||||
}else{
|
||||
this.selectedArr.push(item);
|
||||
}
|
||||
if(item.isChild){
|
||||
this.loadAddress(item.regionId, item.regionType+1);
|
||||
} else {
|
||||
this.$emit('submit', [...this.selectedArr]);
|
||||
this.$emit('changeClose');
|
||||
}
|
||||
this.goTop()
|
||||
},
|
||||
close: function() {
|
||||
this.$emit('changeClose');
|
||||
},
|
||||
scroll : function(e) {
|
||||
this.old.scrollTop = e.detail.scrollTop
|
||||
},
|
||||
goTop: function(e) {
|
||||
this.scrollTop = this.old.scrollTop
|
||||
this.$nextTick(() => {
|
||||
this.scrollTop = 0
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.address-window {
|
||||
background-color: #fff;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 101;
|
||||
border-radius: 30rpx 30rpx 0 0;
|
||||
transform: translate3d(0, 100%, 0);
|
||||
transition: all .3s cubic-bezier(.25, .5, .5, .9);
|
||||
}
|
||||
.address-window.on {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
.address-window .title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
height: 123rpx;
|
||||
line-height: 123rpx;
|
||||
position: relative;
|
||||
}
|
||||
.address-window .title .iconfont {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
color: #8a8a8a;
|
||||
font-size: 35rpx;
|
||||
}
|
||||
.address-count{
|
||||
.address-selected{
|
||||
padding: 0 30rpx;
|
||||
margin-top: 10rpx;
|
||||
position: relative;
|
||||
padding-bottom: 20rpx;
|
||||
border-bottom: 2rpx solid #f7f7f7;
|
||||
}
|
||||
.selected-list{
|
||||
font-size: 26rpx;
|
||||
color: #282828;
|
||||
line-height: 50rpx;
|
||||
padding-bottom: 10rpx;
|
||||
padding-left: 60rpx;
|
||||
position: relative;
|
||||
&.active{
|
||||
color: #e28d54;
|
||||
}
|
||||
&:before,&:after{
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
&:before{
|
||||
width: 4rpx;
|
||||
height: 100%;
|
||||
@include main_bg_color(theme);
|
||||
top: 0;
|
||||
left: 10rpx;
|
||||
}
|
||||
&:after{
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
@include main_bg_color(theme);
|
||||
border-radius: 100%;
|
||||
left: 6rpx;
|
||||
top: 50%;
|
||||
margin-top: -8rpx;
|
||||
}
|
||||
&:first-child,&:last-child{
|
||||
&:before{
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
&:first-child{
|
||||
&:before{
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
.iconfont{
|
||||
font-size: 20rpx;
|
||||
float: right;
|
||||
color: #dddddd;
|
||||
}
|
||||
}
|
||||
scroll-view{
|
||||
height: 700rpx;
|
||||
}
|
||||
.address-list{
|
||||
padding: 0 30rpx;
|
||||
margin-top: 20rpx;
|
||||
box-sizing: border-box;
|
||||
.list{
|
||||
.iconfont{
|
||||
float: right;
|
||||
color: #ddd;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.item-name{
|
||||
display: inline-block;
|
||||
line-height: 50rpx;
|
||||
margin-bottom: 20rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
&.active{
|
||||
color: #e28d54;
|
||||
.iconfont{
|
||||
color: #e28d54;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
mer_uniapp/pages/address/static/images/address.png
Normal file
BIN
mer_uniapp/pages/address/static/images/address.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 698 B |
BIN
mer_uniapp/pages/address/static/images/line.png
Normal file
BIN
mer_uniapp/pages/address/static/images/line.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
BIN
mer_uniapp/pages/address/static/images/noAddress.png
Normal file
BIN
mer_uniapp/pages/address/static/images/noAddress.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
471
mer_uniapp/pages/address/user_address/index.vue
Normal file
471
mer_uniapp/pages/address/user_address/index.vue
Normal file
@@ -0,0 +1,471 @@
|
||||
<template>
|
||||
<view :data-theme="theme">
|
||||
<form @submit="formSubmit" report-submit='true'>
|
||||
<view class='addAddress borderPad'>
|
||||
<view class='list borRadius14'>
|
||||
<view class='item acea-row' style="border: none;">
|
||||
<view class='name'>姓名</view>
|
||||
<input type='text' placeholder='请输入姓名' placeholder-style="color:#ccc;" name='realName'
|
||||
:value="userAddress.realName" placeholder-class='placeholder' maxlength="20"></input>
|
||||
</view>
|
||||
<view class='item acea-row'>
|
||||
<view class='name'>手机号码</view>
|
||||
<input type='number' placeholder='请输入手机号码' placeholder-style="color:#ccc;" name="phone"
|
||||
:value='userAddress.phone' placeholder-class='placeholder' maxlength="11"></input>
|
||||
</view>
|
||||
<view class='item acea-row row-between-wrapper'>
|
||||
<view class='name'>所在地区</view>
|
||||
<view class="address">
|
||||
<view class="region_count" @click="changeRegion">
|
||||
<text v-if="!addressInfo.length" style="color:#cdcdcd;">请选择地址</text>
|
||||
<text v-else>{{addressText}}</text>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class='iconfont icon-ic_location1 font_color' @tap="chooseLocation"></view>
|
||||
<!-- <text class="iconfont icon-ic_rightarrow"></text>-->
|
||||
</view>
|
||||
<view class='item acea-row row-between-wrapper'>
|
||||
<view class='name'>详细地址</view>
|
||||
<input class="address" type='text' placeholder='请填写具体地址' placeholder-style="color:#ccc;" name='detail'
|
||||
placeholder-class='placeholder' v-model='userAddress.detail' maxlength="100" />
|
||||
</view>
|
||||
</view>
|
||||
<view class='default acea-row row-middle borRadius14 mt20'>
|
||||
<checkbox-group @change='ChangeIsDefault'>
|
||||
<checkbox :checked="userAddress.isDefault" />设置为默认地址
|
||||
</checkbox-group>
|
||||
</view>
|
||||
|
||||
<button class='keepBnt' form-type="submit">{{orderNo!=0?'保存并使用':'立即保存'}}</button>
|
||||
<!-- #ifdef MP -->
|
||||
<view class="wechatAddress" v-if="!addressId" @click="getWxAddress">导入微信地址</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef H5 -->
|
||||
<view class="wechatAddress" v-if="this.$wechat.isWeixin() && !addressId" @click="getAddress">导入微信地址</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</form>
|
||||
<view v-show="showLoading" class="bg-fixed"></view>
|
||||
<areaWindow ref="areaWindow" :display="display" :address="addressInfo" @submit="OnChangeAddress"
|
||||
@changeClose="changeClose"></areaWindow>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
editAddress,
|
||||
addAddress,
|
||||
getAddressDetail,
|
||||
getCity,
|
||||
getWxAddressInfo
|
||||
} from '@/api/user.js';
|
||||
import {
|
||||
getCityList
|
||||
} from "@/utils";
|
||||
import {
|
||||
toLogin
|
||||
} from '@/libs/login.js';
|
||||
import {
|
||||
mapGetters
|
||||
} from "vuex";
|
||||
import areaWindow from '../components/areaWindow';
|
||||
import {
|
||||
Debounce
|
||||
} from '@/utils/validate.js'
|
||||
|
||||
import {
|
||||
addressWxImportApi
|
||||
} from '@/api/public.js';
|
||||
import {addressMapApi} from "../../../api/user";
|
||||
let app = getApp();
|
||||
export default {
|
||||
components: {
|
||||
areaWindow
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
cartId: '', //购物车id
|
||||
pinkId: 0, //拼团id
|
||||
couponId: 0, //优惠券id
|
||||
addressId: 0, //地址id
|
||||
userAddress: {
|
||||
isDefault: false
|
||||
}, //地址详情
|
||||
region: ['省', '市', '区'],
|
||||
valueRegion: [0, 0, 0, 0],
|
||||
district: [],
|
||||
multiArray: [],
|
||||
multiIndex: [0, 0, 0],
|
||||
cityId: 0,
|
||||
bargain: false, //是否是砍价
|
||||
combination: false, //是否是拼团
|
||||
secKill: false, //是否是秒杀
|
||||
theme: app.globalData.theme,
|
||||
showLoading: false,
|
||||
display: false,
|
||||
addressInfo: [],
|
||||
addressData: [],
|
||||
orderNo: '' //订单id
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['isLogin']),
|
||||
addressText() {
|
||||
return this.addressInfo.map(v => v.regionName).join('/');
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
isLogin: {
|
||||
handler: function(newV, oldV) {
|
||||
if (newV) {
|
||||
this.getUserAddress();
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
if (this.isLogin) {
|
||||
this.orderNo = options.orderNo || 0;
|
||||
this.addressId = options.id || 0;
|
||||
uni.setNavigationBarTitle({
|
||||
title: this.addressId ? '编辑地址' : '添加地址'
|
||||
})
|
||||
this.getUserAddress();
|
||||
} else {
|
||||
toLogin();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 关闭地址弹窗；
|
||||
changeClose: function() {
|
||||
this.display = false;
|
||||
},
|
||||
OnChangeAddress(address) {
|
||||
this.addressInfo = address;
|
||||
},
|
||||
changeRegion() {
|
||||
this.display = true;
|
||||
},
|
||||
getUserAddress: function() {
|
||||
if (!this.addressId) return false;
|
||||
getAddressDetail(this.addressId).then(res => {
|
||||
if (res.data) {
|
||||
this.$set(this, 'userAddress', res.data);
|
||||
this.getChangAddress(res.data)
|
||||
}
|
||||
});
|
||||
},
|
||||
// 获取选择省市区数据
|
||||
getChangAddress(data){
|
||||
this.addressInfo = [{
|
||||
regionName: data.province,
|
||||
parentId: 1,
|
||||
isChild: true,
|
||||
regionId: data.provinceId,
|
||||
regionType: 1
|
||||
}, {
|
||||
regionName: data.city,
|
||||
parentId: data.provinceId,
|
||||
regionId: data.cityId,
|
||||
isChild: true,
|
||||
regionType: 2
|
||||
}, {
|
||||
regionName: data.district,
|
||||
parentId: data.cityId,
|
||||
regionId: data.districtId,
|
||||
isChild: true,
|
||||
regionType: 3
|
||||
}, {
|
||||
isChild: false,
|
||||
parentId: data.districtId,
|
||||
regionName: data.street,
|
||||
regionType: 4
|
||||
}]
|
||||
},
|
||||
toggleTab(str) {
|
||||
this.$refs[str].show();
|
||||
},
|
||||
onConfirm(val) {
|
||||
this.region = val.checkArr[0] + '-' + val.checkArr[1] + '-' + val.checkArr[2];
|
||||
},
|
||||
//选择定位
|
||||
chooseLocation: function() {
|
||||
this.$util.$L.getLocation().then(res=>{
|
||||
uni.chooseLocation({
|
||||
latitude: uni.getStorageSync('user_latitude'),
|
||||
longitude: uni.getStorageSync('user_longitude'),
|
||||
success: (res) => {
|
||||
this.getMapAddress(res)
|
||||
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
// 获取地图选点的省市区地址
|
||||
async getMapAddress(res){
|
||||
const { data } = await addressMapApi({latitude: res.latitude, longitude:res.longitude})
|
||||
this.$set(this.userAddress, 'detail', data.detail);
|
||||
this.getChangAddress(data)
|
||||
},
|
||||
//导入微信地址回显到地址栏
|
||||
addressWxImportAdd(res) {
|
||||
this.userAddress.realName = res.userName;
|
||||
this.userAddress.phone = res.telNumber;
|
||||
this.userAddress.detail = res.detailInfo;
|
||||
getWxAddressInfo({
|
||||
"cityName": res.cityName,
|
||||
"countryName": res.countryName || res.countyName,
|
||||
"detail": res.detailInfo,
|
||||
"nationalCode": res.nationalCode,
|
||||
"provinceName": res.provinceName,
|
||||
"streetName": res.streetName || res.addressStreetFourthStageName
|
||||
}).then(r => {
|
||||
this.addressInfo = [{
|
||||
regionName: r.data.province,
|
||||
parentId: 1,
|
||||
isChild: true,
|
||||
regionId: r.data.provinceId,
|
||||
regionType: 1
|
||||
}, {
|
||||
regionName: r.data.city,
|
||||
parentId: r.data.provinceId,
|
||||
regionId: r.data.cityId,
|
||||
isChild: true,
|
||||
regionType: 2
|
||||
}, {
|
||||
regionName: r.data.district,
|
||||
parentId: r.data.cityId,
|
||||
regionId: r.data.districtId,
|
||||
isChild: true,
|
||||
regionType: 3
|
||||
}, {
|
||||
isChild: false,
|
||||
parentId: r.data.districtId,
|
||||
regionName: r.data.street,
|
||||
regionType: 4
|
||||
}]
|
||||
});
|
||||
},
|
||||
// 导入共享地址（小程序）
|
||||
getWxAddress: function() {
|
||||
this.$util.addressWxImport().then(userInfo => {
|
||||
this.addressWxImportAdd(userInfo);
|
||||
});
|
||||
},
|
||||
// 导入共享地址（微信）；
|
||||
getAddress() {
|
||||
let that = this;
|
||||
that.$wechat.openAddress().then(userInfo => {
|
||||
that.addressWxImportAdd(userInfo);
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 提交用户添加地址
|
||||
*
|
||||
*/
|
||||
formSubmit: Debounce(function(e) {
|
||||
let that = this,
|
||||
value = e.detail.value;
|
||||
if (!value.realName) return that.$util.Tips({
|
||||
title: '请填写收货人姓名'
|
||||
});
|
||||
if (!value.phone) return that.$util.Tips({
|
||||
title: '请填写手机号码'
|
||||
});
|
||||
if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(value.phone)) return that.$util.Tips({
|
||||
title: '请输入正确的手机号码'
|
||||
});
|
||||
if (!that.addressInfo.length == '省-市-区-街道') return that.$util.Tips({
|
||||
title: '请选择所在地区'
|
||||
});
|
||||
if (!value.detail) return that.$util.Tips({
|
||||
title: '请填写详细地址'
|
||||
});
|
||||
value.id = that.addressId;
|
||||
value.province = that.addressInfo[0].regionName;
|
||||
value.provinceId = that.addressInfo[0].regionId;
|
||||
value.city = that.addressInfo[1].regionName;
|
||||
value.cityId = that.addressInfo[1].regionId;
|
||||
value.district = that.addressInfo[2].regionName;
|
||||
value.districtId = that.addressInfo[2].regionId;
|
||||
value.street = that.addressInfo.length>3?that.addressInfo[3].regionName:'';
|
||||
value.isDefault = that.userAddress.isDefault;
|
||||
|
||||
uni.showLoading({
|
||||
title: '保存中',
|
||||
mask: true
|
||||
})
|
||||
if (that.addressId) {
|
||||
editAddress(value).then(res => {
|
||||
that.$util.Tips({
|
||||
title: '修改成功',
|
||||
icon: 'success'
|
||||
});
|
||||
uni.hideLoading();
|
||||
that.onSuccess();
|
||||
}).catch(err => {
|
||||
uni.hideLoading();
|
||||
return that.$util.Tips({
|
||||
title: err
|
||||
});
|
||||
})
|
||||
} else {
|
||||
addAddress(value).then(res => {
|
||||
that.$util.Tips({
|
||||
title: '添加成功',
|
||||
icon: 'success'
|
||||
});
|
||||
that.addressId = res.data;
|
||||
uni.hideLoading();
|
||||
that.onSuccess();
|
||||
}).catch(err => {
|
||||
return that.$util.Tips({
|
||||
title: err
|
||||
});
|
||||
uni.hideLoading();
|
||||
})
|
||||
}
|
||||
|
||||
}),
|
||||
onSuccess() {
|
||||
let orderNo = this.orderNo;
|
||||
let id = this.addressId;
|
||||
setTimeout(()=> {
|
||||
if (orderNo!=0 && id!=0) {
|
||||
uni.redirectTo({
|
||||
url: '/pages/goods/order_confirm/index?is_address=1&orderNo=' + orderNo +
|
||||
'&addressId=' + id
|
||||
})
|
||||
} else {
|
||||
// #ifdef H5
|
||||
return history.back();
|
||||
// #endif
|
||||
// #ifndef H5
|
||||
return uni.navigateBack({
|
||||
delta: 1,
|
||||
})
|
||||
// #endif
|
||||
}
|
||||
}, 1000);
|
||||
},
|
||||
ChangeIsDefault: function(e) {
|
||||
this.$set(this.userAddress, 'isDefault', !this.userAddress.isDefault);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.bg-fixed {
|
||||
width: 100%;
|
||||
height: 750rpx;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.addAddress {
|
||||
padding-top: 20rpx;
|
||||
}
|
||||
|
||||
.addAddress .list {
|
||||
background-color: #fff;
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
.addAddress .list .item {
|
||||
border-top: 1rpx solid #eee;
|
||||
padding: 24rpx 0;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.addAddress .list .item .name {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
width: 120rpx;
|
||||
}
|
||||
|
||||
.addAddress .list .item input, .address {
|
||||
flex: 1;
|
||||
width: 490rpx;
|
||||
margin-left: 20rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.addAddress .list .item .placeholder {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.addAddress .list .item picker .picker {
|
||||
width: 410rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.addAddress .default {
|
||||
padding: 0 24rpx;
|
||||
height: 90rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.addAddress .default checkbox {
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
|
||||
.addAddress .keepBnt {
|
||||
width: 690rpx;
|
||||
height: 88rpx;
|
||||
border-radius: 50rpx;
|
||||
text-align: center;
|
||||
line-height: 88rpx;
|
||||
margin: 80rpx auto 24rpx auto;
|
||||
font-size: 28rpx;
|
||||
color: #fff;
|
||||
@include linear-gradient(theme);
|
||||
}
|
||||
|
||||
.addAddress .wechatAddress {
|
||||
width: 690rpx;
|
||||
height: 86rpx;
|
||||
border-radius: 50rpx;
|
||||
text-align: center;
|
||||
line-height: 86rpx;
|
||||
margin: 0 auto;
|
||||
font-size: 28rpx;
|
||||
@include main_color(theme);
|
||||
@include coupons_border_color(theme);
|
||||
}
|
||||
|
||||
.font_color {
|
||||
@include main_color(theme);
|
||||
}
|
||||
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.icon-ic_location1 {
|
||||
font-size: 40rpx;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.abs_right {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/deep/ checkbox .uni-checkbox-input.uni-checkbox-input-checked {
|
||||
@include main_bg_color(theme);
|
||||
@include coupons_border_color(theme);
|
||||
color: #fff !important
|
||||
}
|
||||
|
||||
/deep/ checkbox .wx-checkbox-input.wx-checkbox-input-checked {
|
||||
@include main_bg_color(theme);
|
||||
@include coupons_border_color(theme);
|
||||
color: #fff !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
</style>
|
||||
378
mer_uniapp/pages/address/user_address_list/index.vue
Normal file
378
mer_uniapp/pages/address/user_address_list/index.vue
Normal file
@@ -0,0 +1,378 @@
|
||||
<template>
|
||||
<view class="section" :data-theme="theme">
|
||||
<view class='line'>
|
||||
<image src='../static/images/line.png' v-if="addressList.length"></image>
|
||||
</view>
|
||||
<view class='address-management' :class='addressList.length < 1 && page > 1 ? "fff":""'>
|
||||
<radio-group class="radio-group" @change="radioChange" v-if="addressList.length">
|
||||
<view class='item borRadius14' v-for="(item,index) in addressList" :key="index">
|
||||
<view class='address' @click='goOrder(item.id)'>
|
||||
<view class='consignee'>收货人：{{item.realName}}<text class='phone'>{{item.phone}}</text></view>
|
||||
<view>收货地址：{{item.province}}{{item.city}}{{item.district}}{{ item.street}}{{item.detail}}</view>
|
||||
</view>
|
||||
<view class='operation acea-row row-between-wrapper'>
|
||||
<!-- #ifndef MP -->
|
||||
<radio class="radio" :value="index.toString()" :checked="item.isDefault">
|
||||
<text>设为默认</text>
|
||||
</radio>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP -->
|
||||
<radio class="radio" :value="index" :checked="item.isDefault">
|
||||
<text>设为默认</text>
|
||||
</radio>
|
||||
<!-- #endif -->
|
||||
<view class='acea-row row-middle'>
|
||||
<view @click='editAddress(item.id)'><text class='iconfont icon-ic_edit'></text>编辑</view>
|
||||
<view @click='delAddress(index)'><text class='iconfont icon-ic_delete'></text>删除</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</radio-group>
|
||||
<view class='loadingicon acea-row row-center-wrapper'>
|
||||
<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>
|
||||
</view>
|
||||
<emptyPage v-if="addressList.length == 0 && !loading" title="暂无添加地址~" :imgSrc="urlDomain+'crmebimage/presets/noAddress.png'"></emptyPage>
|
||||
<view style='height:120rpx;'></view>
|
||||
</view>
|
||||
<view class='footer acea-row row-between-wrapper borRadius14 borderPad'>
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<view class='addressBnt on' @click='addAddress'><text
|
||||
class='iconfont icon-tianjiadizhi'></text>添加新地址</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-->
|
||||
<view class='addressBnt' @click='addAddress'><text class='iconfont icon-tianjiadizhi'></text>添加新地址
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef H5-->
|
||||
<view class='addressBnt' :class="this.$wechat.isWeixin()?'':'on'" @click='addAddress'><text
|
||||
class='iconfont icon-tianjiadizhi'></text>添加新地址</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
|
||||
<!-- #ifdef MP -->
|
||||
<atModel v-if="locationStatus" :locationType="true" @closeModel="modelCancel" @confirmModel="confirmModel"
|
||||
:content="locationContent"></atModel>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// +----------------------------------------------------------------------
|
||||
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
||||
// +----------------------------------------------------------------------
|
||||
// | Copyright (c) 2016~2026 https://www.crmeb.com All rights reserved.
|
||||
// +----------------------------------------------------------------------
|
||||
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
||||
// +----------------------------------------------------------------------
|
||||
// | Author: CRMEB Team <admin@crmeb.com>
|
||||
// +----------------------------------------------------------------------
|
||||
import {
|
||||
getAddressList,
|
||||
setAddressDefault,
|
||||
delAddress,
|
||||
} from '@/api/user.js';
|
||||
import emptyPage from '@/components/emptyPage.vue';
|
||||
import atModel from '@/components/accredit/index.vue';
|
||||
import {
|
||||
toLogin
|
||||
} from '@/libs/login.js';
|
||||
import {
|
||||
mapGetters
|
||||
} from "vuex";
|
||||
let app = getApp();
|
||||
export default {
|
||||
components: {
|
||||
emptyPage,
|
||||
atModel
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
urlDomain: this.$Cache.get("imgHost"),
|
||||
addressList: [],
|
||||
cartId: '',
|
||||
pinkId: 0,
|
||||
couponId: 0,
|
||||
loading: false,
|
||||
loadend: false,
|
||||
loadTitle: '加载更多',
|
||||
page: 1,
|
||||
limit: 20,
|
||||
bargain: false, //是否是砍价
|
||||
combination: false, //是否是拼团
|
||||
secKill: false, //是否是秒杀
|
||||
theme: app.globalData.theme,
|
||||
locationContent: '授权位置信息，提供完整服务',
|
||||
locationStatus: false,
|
||||
productId: 0
|
||||
};
|
||||
},
|
||||
computed: mapGetters(['isLogin']),
|
||||
watch: {
|
||||
isLogin: {
|
||||
handler: function(newV, oldV) {
|
||||
if (newV) {
|
||||
this.getUserAddress(true);
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
if (this.isLogin) {
|
||||
this.orderNo = options.orderNo || 0;
|
||||
this.productId = Number(options.id) || 0; //商品id
|
||||
this.getAddressList(true);
|
||||
} else {
|
||||
toLogin();
|
||||
}
|
||||
},
|
||||
onShow: function() {
|
||||
let that = this;
|
||||
that.getAddressList(true);
|
||||
},
|
||||
methods: {
|
||||
modelCancel() {
|
||||
this.locationStatus = false;
|
||||
},
|
||||
confirmModel() {
|
||||
uni.getLocation({
|
||||
type: 'gcj02',
|
||||
altitude: true,
|
||||
geocode: true,
|
||||
success: function(res) {
|
||||
try {
|
||||
uni.setStorageSync('user_latitude', res.latitude);
|
||||
uni.setStorageSync('user_longitude', res.longitude);
|
||||
} catch {}
|
||||
}
|
||||
});
|
||||
this.locationStatus = false;
|
||||
},
|
||||
/**
|
||||
* 获取地址列表
|
||||
*
|
||||
*/
|
||||
getAddressList: function(isPage) {
|
||||
let that = this;
|
||||
if (that.loading) return;
|
||||
that.loading = true;
|
||||
getAddressList().then(res => {
|
||||
that.addressList = res.data;
|
||||
that.loading = false;
|
||||
}).catch(err => {
|
||||
that.loading = false;
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 设置默认地址
|
||||
*/
|
||||
radioChange: function(e) {
|
||||
let index = parseInt(e.detail.value),
|
||||
that = this;
|
||||
let address = this.addressList[index];
|
||||
if (address == undefined) return that.$util.Tips({
|
||||
title: '您设置的默认地址不存在!'
|
||||
});
|
||||
setAddressDefault(address.id).then(res => {
|
||||
for (let i = 0, len = that.addressList.length; i < len; i++) {
|
||||
if (i == index) that.addressList[i].isDefault = true;
|
||||
else that.addressList[i].isDefault = false;
|
||||
}
|
||||
that.$util.Tips({
|
||||
title: '设置成功',
|
||||
icon: 'success'
|
||||
}, function() {
|
||||
that.$set(that, 'addressList', that.addressList);
|
||||
});
|
||||
}).catch(err => {
|
||||
return that.$util.Tips({
|
||||
title: err
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 编辑地址
|
||||
*/
|
||||
editAddress: function(id) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/address/user_address/index?id=${id}&orderNo=${this.orderNo}`
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 删除地址
|
||||
*/
|
||||
delAddress: function(index) {
|
||||
let that = this,
|
||||
address = this.addressList[index];
|
||||
if (address == undefined) return that.$util.Tips({
|
||||
title: '您删除的地址不存在!'
|
||||
});
|
||||
uni.showModal({
|
||||
content: '确定删除该地址',
|
||||
cancelText: "取消", // 取消按钮的文字
|
||||
confirmText: "确定", // 确认按钮文字
|
||||
showCancel: true, // 是否显示取消按钮，默认为 true
|
||||
cancelColor: '#f55850',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
delAddress(address.id).then(res => {
|
||||
that.addressList.splice(index, 1);
|
||||
that.$set(that, 'addressList', that.addressList);
|
||||
that.$util.Tips({
|
||||
title: '删除成功',
|
||||
icon: 'success'
|
||||
});
|
||||
}).catch(err => {
|
||||
return that.$util.Tips({
|
||||
title: err
|
||||
});
|
||||
});
|
||||
} else {
|
||||
|
||||
}
|
||||
},
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 新增地址
|
||||
*/
|
||||
addAddress: function() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/address/user_address/index?orderNo=' + this.orderNo
|
||||
})
|
||||
},
|
||||
goOrder: function(id) {
|
||||
if (this.orderNo) {
|
||||
uni.redirectTo({
|
||||
url: '/pages/goods/order_confirm/index?is_address=1&orderNo=' + this.orderNo +
|
||||
'&addressId=' + id
|
||||
})
|
||||
}
|
||||
if(this.productId){
|
||||
uni.redirectTo({
|
||||
url: `/pages/activity/reservation/reservation/index?id=${this.productId}&addressId=${id}`
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
onReachBottom: function() {
|
||||
this.getAddressList();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.address-management {
|
||||
padding: 20rpx 24rpx;
|
||||
}
|
||||
|
||||
.address-management.fff {
|
||||
background-color: #fff;
|
||||
height: 1300rpx
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 100%;
|
||||
height: 3rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.address-management .item {
|
||||
background-color: #fff;
|
||||
padding: 0 24rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.address-management .item .address {
|
||||
padding: 35rpx 0;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
font-size: 28rpx;
|
||||
color: #282828;
|
||||
}
|
||||
|
||||
.address-management .item .address .consignee {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.address-management .item .address .consignee .phone {
|
||||
margin-left: 25rpx;
|
||||
}
|
||||
|
||||
.address-management .item .operation {
|
||||
height: 83rpx;
|
||||
font-size: 28rpx;
|
||||
color: #282828;
|
||||
}
|
||||
|
||||
.address-management .item .operation .radio text {
|
||||
margin-left: 13rpx;
|
||||
}
|
||||
|
||||
.address-management .item .operation .iconfont {
|
||||
color: #2c2c2c;
|
||||
font-size: 35rpx;
|
||||
vertical-align: -2rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.address-management .item .operation .iconfont.icon-ic_delete {
|
||||
margin-left: 35rpx;
|
||||
font-size: 38rpx;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
height: 106rpx;
|
||||
height: calc(106rpx + constant(safe-area-inset-bottom));
|
||||
height: calc(106rpx + env(safe-area-inset-bottom));
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.footer .addressBnt {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
border-radius: 44rpx;
|
||||
text-align: center;
|
||||
line-height: 88rpx;
|
||||
font-size: 28rpx;
|
||||
color: #fff;
|
||||
@include linear-gradient(theme);
|
||||
}
|
||||
|
||||
.footer .addressBnt.on {
|
||||
width: 690rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.footer .addressBnt .iconfont {
|
||||
font-size: 35rpx;
|
||||
margin-right: 8rpx;
|
||||
vertical-align: -1rpx;
|
||||
}
|
||||
|
||||
.footer .addressBnt.wxbnt {
|
||||
@include left_color(theme);
|
||||
}
|
||||
|
||||
/deep/ radio .wx-radio-input.wx-radio-input-checked {
|
||||
@include main_bg_color(theme);
|
||||
@include coupons_border_color(theme);
|
||||
}
|
||||
/deep/.uni-radio-input{
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
/deep/ radio .uni-radio-input.uni-radio-input-checked {
|
||||
@include main_bg_color(theme);
|
||||
border: none !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user