other_project/mallplus
7
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

汇融云链2

Browse Source
This commit is contained in:
guoxing
2023-02-13 18:43:39 +08:00
parent 76dca84266
commit a29788866e
331 changed files with 95753 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

180
mallplusui-uniapp-app2/pagesU/address/address.vue Normal file
View File

@@ -0,0 +1,180 @@
<template>
<view class="content b-t">
<view class="list b-b" v-for="(item, index) in addressList" :key="index">
<view class="wrapper" @click="checkAddress(item)">
<view class="u-box">
<text class="name">{{ item.name }}</text>
<text class="mobile">{{ item.phoneNumber }}</text>
</view>
<view class="address-box">
<text v-if="item.defaultStatus == 1" class="tag">默认</text>
<text class="address"> {{ item.province }}-{{ item.city }}-{{ item.region }}-{{ item.detailAddress }}</text>
</view>
</view>
<view class="" style="display: flex;flex-direction: row;width: 100%;justify-content: flex-end;">
<view class="" style="width: 20%;display: flex;align-items: center;justify-content: center;" @click="addAddress('edit', item)">
<text class="yticon icon-bianji"></text>
<text style="font-size: 30upx;margin-left: 10upx;">编辑</text>
</view>
<view class="" style="width: 20%;display: flex;align-items: center;justify-content: center;" @click="delAddress(item)">
<text class="yticon icon-iconfontshanchu1"></text>
<text style="font-size: 30upx;">删除</text>
</view>
</view>
</view>
<!--<text style="display:block;padding: 16upx 30upx 10upx;lihe-height: 1.6;color: #fa436a;font-size: 24upx;">
重要：添加和修改地址回调仅增加了一条数据做演示，实际开发中将回调改为请求后端接口刷新一下列表即可
</text>-->
<button class="add-btn" @click="addAddress('add')">新增地址</button>
</view>
</template>
<script>
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
import Api from '@/common/api';
export default {
components: {
mallplusCopyright
},
data() {
return {
source: 0,
addressList: [],
};
},
async onLoad(option) {
this.source = option.source;
this.getListAddress()
},
async onShow(){
this.getListAddress()
},
methods: {
async getListAddress(){
let params = {};
this.addressList = await Api.apiCall('get', Api.goods.listAddress, params);
},
//选择地址
checkAddress(item) {
if (this.source == 1) {
//this.$api.prePage()获取上一页实例，在App.vue定义
this.$api.prePage().addressData = item;
this.$api.prePage().addressId = item.id;
uni.navigateBack();
}
},
addAddress(type, item) {
uni.navigateTo({
url: `../../pagesU/address/addressManage?type=${type}&data=${JSON.stringify(item)}`
});
},
//添加或修改成功之后回调
refreshList(data, type) {
//添加或修改后事件，这里直接在最前面添加了一条数据，实际应用中直接刷新地址列表即可
this.addressList.unshift(data);
console.log(data, type);
},
// 删除地址
async delAddress(item){
console.log(item)
// let params = {
// id: item.id
// }
let data = await Api.apiCall('post', Api.goods.deleteAddress, {id: item.id});
if(data){
uni.showToast({
title: '删除成功',
})
}else{
uni.showToast({
title: '删除失败',
icon: 'none'
})
}
this.getListAddress();
console.log("------删除-------",data)
},
}
};
</script>
<style lang="scss">
page {
padding-bottom: 120upx;
}
.content {
position: relative;
}
.list {
display: flex;
align-items: center;
flex-direction: column;
padding: 20upx;
background: #fff;
position: relative;
}
.wrapper {
width: 100%;
display: flex;
flex-direction: column;
flex: 1;
}
.address-box {
display: flex;
align-items: center;
margin: 10upx 0;
.tag {
font-size: 24upx;
color: $base-color;
margin-right: 10upx;
background: #fffafb;
border: 1px solid #ffb4c7;
border-radius: 4upx;
padding: 4upx 10upx;
line-height: 1;
}
.address {
font-size: 28upx;
color: $font-color-light;
}
}
.u-box {
font-size: 32upx;
color: $font-color-000;
// margin-top: 16upx;
.name {
margin-right: 30upx;
}
}
.icon-bianji {
// display: flex;
// align-items: center;
// height: 80upx;
font-size: 36upx;
color: $font-color-light;
// padding-left: 30upx;
}
.add-btn {
position: fixed;
left: 30upx;
right: 30upx;
bottom: 16upx;
z-index: 95;
display: flex;
align-items: center;
justify-content: center;
width: 690upx;
height: 80upx;
font-size: 32upx;
color: #fff;
background-color: $base-color;
border-radius: 10upx;
box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
}
</style>

220
mallplusui-uniapp-app2/pagesU/address/addressManage.vue Normal file
View File

@@ -0,0 +1,220 @@
<template>
<view class="content">
<view class="row b-b">
<text class="tit">联系人</text>
<input class="input" type="text" v-model="addressData.name" placeholder="收货人姓名" placeholder-class="placeholder" />
</view>
<view class="row b-b">
<text class="tit">手机号</text>
<input class="input" type="number" maxlength="11" v-model="addressData.phoneNumber" placeholder="收货人手机号码" placeholder-class="placeholder" />
</view>
<view class="row b-b">
<text class="tit">城市</text>
<input placeholder="请选择城市" disabled="true" :value="addressData.province + ' ' + addressData.city + ' ' + addressData.region" @click="lotusAddressData.visible = true" class="input">
<lotus-address v-on:choseVal="choseValue" :lotusAddressData="lotusAddressData"></lotus-address>
</input>
<text class="yticon icon-shouhuodizhi"></text>
</view>
<view class="row b-b">
<text class="tit">地图:</text>
<input class="input" @click="openMap()" type="text" value="" v-model="mapAddressName" placeholder="在地图上搜索并选择地址" disabled="true" />
<text class="yticon icon-shouhuodizhi"></text>
</view>
<view class="row b-b">
<text class="tit">详细</text>
<input class="input" type="text" v-model="addressData.detailAddress" placeholder="街道、楼号、门牌" placeholder-class="placeholder" />
</view>
<view class="row default-row">
<text class="tit">设为默认</text>
<switch :checked="addressData.defaultStatus" color="#fa436a" @change="switchChange" />
</view>
<button class="add-btn" @click="confirm">提交</button>
</view>
</template>
<script>
import Api from '@/common/api';
import lotusAddress from "@/components/Winglau14-lotusAddress/Winglau14-lotusAddress.vue"
export default {
data() {
return {
mapAddressName: '',
addressData: {
name: '',
phoneNumber: '',
province: '',
city: '',
region: '',
detailAddress: '',
defaultStatus: 0,
def: false
},
lotusAddressData:{
visible:false,
provinceName:'',
cityName:'',
townName:'',
},
}
},
onLoad(option){
let title = '新增收货地址';
if(option.type==='edit'){
title = '编辑收货地址'
this.addressData = JSON.parse(option.data)
}
this.manageType = option.type;
uni.setNavigationBarTitle({
title
})
},
methods: {
switchChange(e){
this.addressData.defaultStatus = e.detail.value?1:0
this.addressData.def = e.detail.value
},
openMap() {
var _this = this;
uni.chooseLocation({
success: function(res) {
console.log('res', res);
_this.addressData.latitude = res.latitude;
_this.addressData.longitude = res.longitude;
_this.mapAddressName= res.address + res.name;
_this.addressData.detailAddress = res.address + res.name;
console.log('经度：' + res.longitude);
console.log('详细地址：' + res.address);
console.log('纬度：' + res.latitude);
}
});
},
choseValue(res){
//res数据源包括已选省市区与省市区code
this.lotusAddressData.visible = false;//visible为显示与关闭组件标识true显示false隐藏
if(res.isChose){
console.log(res)
this.lotusAddressData.provinceName = res.provice;//省
this.lotusAddressData.cityName = res.city;//市
this.lotusAddressData.townName = res.town;//区
//赋值到addressData
this.addressData.province = res.provice
this.addressData.city = res.city
this.addressData.region = res.town
}
},
//提交
async confirm(){
const that = this
let data = this.addressData;
if(!data.name){
this.$api.msg('请填写收货人姓名');
return;
}
if(!/(^1[3|4|5|7|8][0-9]{9}$)/.test(data.phoneNumber)){
that.$api.msg('请输入正确的手机号码');
return
}
if (!data.province) {
that.$api.msg('请选择省市区');
return
}
if (!data.city) {
that.$api.msg('请选择二级城市')
return
}
if (!data.region) {
that.$api.msg('请选择三级区或县')
return
}
if(!data.detailAddress){
that.$api.msg('请输入详细地址');
return
}
let data1 = await Api.apiCall('post', Api.goods.addressSave, that.addressData);
if (data1) {
this.$api.msg(`保存成功`);
setTimeout(() => {
uni.navigateBack({
delta:1
})
}, 800);
} else {
this.$api.msg(`保存失败`);
}
},
},
components:{
"lotus-address":lotusAddress
},
}
</script>
<style lang="scss">
page{
background: $page-color-base;
padding-top: 16upx;
}
.row{
display: flex;
align-items: center;
position: relative;
padding:0 30upx;
height: 110upx;
background: #fff;
.tit{
flex-shrink: 0;
width: 120upx;
font-size: 30upx;
color: $font-color-dark;
}
.input{
flex: 1;
font-size: 30upx;
color: $font-color-dark;
}
.icon-shouhuodizhi{
font-size: 36upx;
color: $font-color-light;
}
}
.default-row{
margin-top: 16upx;
.tit{
flex: 1;
}
switch{
transform: translateX(16upx) scale(.9);
}
}
.add-btn{
display: flex;
align-items: center;
justify-content: center;
width: 690upx;
height: 80upx;
margin: 60upx auto;
font-size: $font-lg;
color: #fff;
background-color: $base-color;
border-radius: 10upx;
box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
}
</style>

314
mallplusui-uniapp-app2/pagesU/address/addressManage1.vue Normal file
View File

@@ -0,0 +1,314 @@
<template>
<view class="content">
<view class="box">
<view class="box_left">收货人:</view>
<view class="box_right"><input type="text" v-model="user.name" placeholder="为确保收货请使用真名" /></view>
</view>
<view class="box">
<view class="box_left">手机号:</view>
<view class="box_right"><input type="number" maxlength="11" v-model="user.phoneNumber" placeholder="请确保收货电话真实有效" /></view>
</view>
<view class="box">
<view class="box_left">地区:</view>
<view class="box_right">
<view class="citybtn" @click="showMulLinkageThreePicker">{{ pickerText }}</view>
<!-- <view><image src="../../static/xiala.png" mode=""></image></view> -->
</view>
</view>
<view class="box">
<view class="box_left">地址定位:</view>
<view class="box_right_right" @click="openMap()">
<input type="text" value="" v-model="mapAddressName" placeholder="在地图上搜索并选择地址" disabled="true" />
<!-- <text>{{ mapAddressName }}</text> -->
<image src="/static/location.png" mode=""></image>
</view>
</view>
<view class="box">
<view class="box_left">详细地址:</view>
<view class="box_right_right">
<input type="text" value="" v-model="user.detailAddress" placeholder="街道门牌,楼层房间号等信息" />
<image src="../../static/address.png" mode="" @click="gosite"></image>
</view>
</view>
<!-- <view class="box">
<view class="box_left">
身份证号
</view>
<view class="box_right">
<input type="text" value="" v-model="IDcard" placeholder="身份证号码" />
</view>
</view> -->
<view class="box">
<view class="box_left_two">设为默认收件地址:</view>
<view class="box_right_two"><switch color="#D23535" :checked="user.defaultStatus == 1" style="transform:scale(0.8)" @change="switchBtn" /></view>
</view>
<button class="btn" @click="submit">提交</button>
<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"></mpvue-city-picker>
</view>
</template>
<script>
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
import Api from '@/common/api';
export default {
components: {
mallplusCopyright
},
data() {
return {
cityPickerValueDefault: [0, 0, 1],
themeColor: '#007AFF',
pickerText: '选择省/市/区',
mode: '',
deepLength: 1,
pickerValueDefault: [0],
pickerValueArray: [],
user: {
name: '', // [str] [必填] [收货人]
phoneNumber: '',
province: '', //[str] [必填] [省]
city: '', // [str] [必填] [市]
region: '', // [str] [必填] [区]
detailAddress: '', // [str] [必填] [详址]
defaultStatus: '0', // [int] [可选] [默认地址。1是0否]
longitude: 0, //经度
latitude: 0 //纬度
},
IDcard: '',
id: '',
mapAddressName: ''
};
},
components: {
mpvueCityPicker
},
onLoad(option) {
console.log(option);
let title = '新增收货地址';
var that = this;
if (option.type === 'edit') {
title = '编辑收货地址';
this.user = JSON.parse(option.data);
console.log('user',this.user);
that.id = this.user.id;
var province = this.user.province;
var city = this.user.city;
var region = this.user.region;
that.pickerText = province + '-' + city + '-' + region;
}
uni.setNavigationBarTitle({
title
});
},
methods: {
// 三级联动选择
showMulLinkageThreePicker() {
this.$refs.mpvueCityPicker.show();
},
onConfirm(e) {
console.log(e);
var label = e.label;
this.pickerText = label;
var labelArr = label.split('-');
this.user.province = labelArr[0];
this.user.city = labelArr[1];
this.user.region = labelArr[2];
},
gosite() {
var that = this;
uni.chooseLocation({
success: function(res) {
console.log('位置名称：' + res.name);
console.log('详细地址：' + res.address);
that.user.detailAddress = res.address;
console.log('纬度：' + res.latitude);
console.log('经度：' + res.longitude);
}
});
},
openMap() {
var _this = this;
uni.chooseLocation({
keyword: _this.user.detailAddress,
success: function(res) {
console.log('res', res);
_this.user.latitude = res.latitude;
_this.user.longitude = res.longitude;
_this.mapAddressName = res.address + res.name;
console.log('经度：' + res.longitude);
console.log('详细地址：' + res.address);
console.log('纬度：' + res.latitude);
}
});
},
async submit() {
let params;
var info = this.user,
_this = this;
if (info.name==''||info.phoneNumber==''||info.detailAddress=='') {
uni.showToast({
title: '请将信息填写完整',
icon: 'none'
});
return;
}
var reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
if(!reg.test(info.phoneNumber)){
uni.showToast({
title: '请输入正确的手机号',
icon: 'none'
});
return;
}
uni.showLoading({
title: '请稍等...'
});
if (_this.id) {
params = {
id: _this.id,
defaultStatus: info.defaultStatus,
detailAddress: info.detailAddress,
phoneNumber: info.phoneNumber,
province: info.province,
city: info.city,
region: info.region,
longitude: info.longitude,
latitude: info.latitude,
name: info.name
};
} else {
params = {
defaultStatus: info.defaultStatus,
region: info.region,
detailAddress: info.detailAddress,
phoneNumber: info.phoneNumber,
province: info.province,
city: info.city,
longitude: info.longitude,
latitude: info.latitude,
name: info.name
};
}
let data = await Api.apiCall('post', Api.goods.addressSave, params);
if (data) {
this.$api.msg(`地址${_this.id ? '修改' : '添加'}成功`);
setTimeout(() => {
uni.navigateBack({
delta:1
})
// let url = '../../pagesU/address/address';
// uni.navigateTo({
// url
// });
}, 800);
} else {
this.$api.msg(`地址${_this.id ? '修改' : '添加'}失败`);
}
},
switchBtn: function(e) {
var that = this;
console.log('switch1 发生 change 事件，携带值为', e.target.value);
if (e.target.value == true) {
that.user.defaultStatus = 1;
} else {
that.user.defaultStatus = 0;
}
console.log(that.user.defaultStatus);
}
}
};
</script>
<style>
page {
background: $page-color-base;
padding-top: 16upx;
}
.content {
width: 100%;
font-size: 28upx;
/* padding-top: 40upx; */
color: #676769;
}
.box {
width: 100%;
padding: 0 20upx;
height: 100upx;
display: flex;
align-items: center;
/* margin-bottom: 20upx; */
border-bottom: 1upx solid #EEEEEE;
}
.box_left {
width: 20%;
display: flex;
align-items: center;
}
.box_left_two {
width: 550upx;
}
.box_right {
width: 70%;
display: flex;
}
.box_right_right {
width: 85%;
height: 80upx;
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 3%;
}
.box_right_right input {
width: 87%;
height: 70upx;
line-height: 70upx;
}
.box_right_right image {
width: 40upx;
height: 40upx;
}
.box_right image {
width: 40upx;
height: 40upx;
margin-top: 20upx;
margin-left: 30upx;
}
.box_right_two {
width: 150upx;
}
.box_right input {
width: 97%;
height: 80upx;
padding-left: 3%;
background-color: #ffffff;
}
.btn {
width: 690upx;
height: 90upx;
line-height: 90upx;
background: #fa436a;
/* background-color: rgba(242 155 135); */
color: #ffffff;
font-size: 32upx;
margin-top: 120upx;
}
.citybtn {
width: 80%;
height: 80upx;
line-height: 80upx;
overflow: hidden;
}
</style>