wangxiaowei/bai_cha_hui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

第一次提交

Browse Source
This commit is contained in:
wangxiaowei
2025-06-11 10:21:51 +08:00
commit 52932d54b1
2341 changed files with 185283 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

175
pages/user/address/add/add.vue Normal file
View File

@ -0,0 +1,175 @@
<template>
<view class="address-form" :data-theme='theme()' :class="theme() || ''">
<form @submit="formSubmit" @reset="formReset">
<view class="bg-white p-0-30 f30">
<view class="d-s-c border-b-d9">
<text class="key-name">收货人</text>
<input class="ml20 flex-1 f32 p-30-0" name="name" type="text" placeholder-class="grary9" v-model="address.name"
placeholder="请输入收货人姓名" />
</view>
<view class="d-s-c border-b-d9">
<text class="key-name">联系方式</text>
<input class="ml20 flex-1 f32 p-30-0" name="phone" type="text" placeholder-class="grary9" v-model="address.phone"
placeholder="请输入收货人手机号" />
</view>
<view class="d-s-c border-b-d9">
<text class="key-name">所在地区</text>
<view class="input-box flex-1">
<input class="ml20 f32 flex-1 p-30-0" type="text" value="" placeholder-class="grary9" placeholder="" v-model="selectCity"
disabled="true" @click="showMulLinkageThreePicker" />
</view>
</view>
<view class="d-s-c border-b-d9">
<text class="key-name">详细地址</text>
<textarea class="ml20 flex-1 p-30-0 lh150" name="detail" :auto-height="true" v-model="address.detail"
placeholder-class="grary9" placeholder="请输入街道小区楼牌号等"></textarea>
</view>
</view>
<view class="p30"><button form-type="submit" class="theme-btn f32 mt60 addBtn">保存</button></view>
</form>
<mpvue-city-picker v-if="is_load" ref="mpvueCityPicker" :province="province" :city="city" :area="area" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"></mpvue-city-picker>
</view>
</template>
<script>
import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
export default {
components: {
mpvueCityPicker
},
data() {
return {
cityPickerValueDefault: [0, 0, 0],
selectCity: '选择省,市,区',
province_id: 0,
city_id: 0,
region_id: 0,
address: {},
delta: 1,
province: [],
city: [],
area: [],
is_load: false
};
},
onLoad: function(options) {
this.delta = options.delta;
this.getData();
},
methods: {
// 获取省市区
getData(){
let self = this;
self._post('settings/getRegion', {}, function(res) {
self.province = res.data.regionData[0];
self.city = res.data.regionData[1];
self.area = res.data.regionData[2];
self.is_load = true;
});
},
/*提交*/
formSubmit: function(e) {
let self = this;
var formdata = e.detail.value;
formdata.province_id = self.province_id;
formdata.city_id = self.city_id;
formdata.region_id = self.region_id;
if (formdata.name == '') {
uni.showToast({
title: '请输入收货人姓名',
duration: 1000,
icon: 'none'
});
return false;
}
if (formdata.phone == '') {
uni.showToast({
title: '请输入手机号码',
duration: 1000,
icon: 'none'
});
return false;
}
if (formdata.province_id == 0 || formdata.city_id == 0 || formdata.region_id) {
if (formdata.detail == '') {
uni.showToast({
title: '请选择完整省市区',
duration: 1000,
icon: 'none'
});
return false;
}
}
if (formdata.detail == '') {
uni.showToast({
title: '请输入街道小区楼牌号等',
duration: 1000,
icon: 'none'
});
return false;
}
self._post('user.address/add', formdata, function(res) {
self.showSuccess(res.msg, function() {
// #ifndef H5
uni.navigateBack({
delta: parseInt(self.delta)
});
// #endif
// #ifdef H5
history.go(-self.delta);
// #endif
});
});
},
formReset: function(e) {
console.log('清空数据');
},
/*三级联动选择*/
showMulLinkageThreePicker() {
this.$refs.mpvueCityPicker.show();
},
/*确定选择的省市区*/
onConfirm(e) {
this.selectCity = e.label;
this.province_id = e.cityCode[0];
this.city_id = e.cityCode[1];
this.region_id = e.cityCode[2];
}
}
};
</script>
<style>
page {
background-color: #FFFFFF;
}
.address-form {
/* border-top: 16rpx solid #f2f2f2; */
}
.address-form .key-name {
width: 140rpx;
font-size: 32rpx
}
.address-form .btn-red {
height: 88rpx;
line-height: 88rpx;
border-radius: 44rpx;
box-shadow: 0 8rpx 16rpx 0 rgba(226, 35, 26, .6);
}
.addBtn {
height: 80rpx;
line-height: 80rpx;
border-radius: 40rpx;
}
</style>

241
pages/user/address/address.vue Normal file
View File

@ -0,0 +1,241 @@
<template>
<view v-if="!loadding" :data-theme='theme()' :class="theme() || ''">
<view v-if="listData.length>0" class="pbenv">
<view class="address-list bg-white">
<view class="address p-30-0 border-b-d" v-for="(item,index) in listData" :key="index">
<view class="info flex-1 mb10">
<view class="user f32 d-b-c">
<text>{{item.name}}</text>
<text class="ml20 gray9 f26">{{item.phone}}</text>
</view>
<view class="pt20 f26 gray3">
{{item.region.province}}{{item.region.city}}{{item.region.region}}{{item.detail}}
</view>
</view>
<view class="d-b-c">
<view class="radio d-s-c">
<radio style="transform:scale(0.6)" :color='getThemeColor()' :value="item.address_id+''" :checked="default_id==item.address_id+''"
@click="radioChange(item.address_id)" />
<text class="">默认地址</text>
</view>
<view class="d-s-c">
<view class="icon-box plus d-c-c ml30" @click="delAddress(item.address_id)">
<image class="add_icon_img" src="/static/icon/delete.png" mode="aspectFill"></image>
<text class="gray9 ml10">删除</text>
</view>
<view class="none_line ml30"></view>
<view class="icon-box plus d-c-c ml30 mr40" @click="editAddress(item.address_id)">
<image class="add_icon_img" src="/static/icon/edit.png" mode="aspectFill"></image>
<text class="gray9 ml10">编辑</text>
</view>
</view>
</view>
</view>
</view>
<view class="add_add-btn theme-btn" @click="addAddress()">新增收货地址</view>
</view>
<view v-else>
<view class="none_add">
<image class="no_add" src="/static/no_adress.png" mode="aspectFill"></image>
</view>
<view class="no_add_add" @click="addAddress()">新增收货地址</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
/*是否加载完成*/
loadding: true,
indicatorDots: true,
autoplay: true,
interval: 2000,
duration: 500,
/*数据*/
listData: [],
/*默认地址id*/
default_id: '0',
options: {}
}
},
onLoad: function(options) {
this.options = options;
},
onShow: function() {
uni.showLoading({
title: '加载中'
});
/*获取地址列表*/
this.getData();
},
methods: {
/*获取数据*/
getData() {
let self = this;
let dataType = self.dataType;
self._get('user.address/lists', {}, function(res) {
self.listData = res.data.list;
self.default_id = res.data.default_id + '';
self.loadding = false;
uni.hideLoading();
});
},
/*跳转页面*/
addAddress() {
let delta = 1;
if (this.options.source === 'order') {
delta = 2;
}
this.gotoPage('/pages/user/address/add/add?delta=' + delta);
},
/*点击单选*/
radioChange(e) {
let self = this;
self.default_id = e;
self._post('user.address/setDefault', {
address_id: e,
}, function(res) {
if (self.options.source === 'order') {
// #ifndef H5
uni.navigateBack();
// #endif
// #ifdef H5
history.go(-1);
// #endif
}
});
return false;
},
/*编辑地址*/
editAddress(e) {
this.gotoPage('/pages/user/address/edit/edit?address_id=' + e);
},
/*删除地址*/
delAddress(e) {
let self = this;
wx.showModal({
title: "提示",
content: "您确定要移除当前收货地址吗?",
success: function(o) {
o.confirm && self._get('user.address/delete', {
address_id: e
}, function(result) {
if (result.code == 1) {
uni.showToast({
title: '删除成功',
duration: 2000
});
self.getData();
}
});
}
});
}
}
}
</script>
<style lang="scss">
page {
background-color: #FFFFFF;
}
.address-list {
border-top: 16rpx solid #F2F2F2;
padding: 0 20rpx;
padding-bottom: 90rpx;
}
.foot-btns {
padding: 0;
}
.foot-btns .btn-red {
width: 100%;
height: 90rpx;
line-height: 90rpx;
border-radius: 0;
}
.none_add {
padding: 314rpx 214rpx 60rpx 214rpx;
}
.no_add {
width: 322rpx;
height: 180rpx;
}
.no_add_add {
width: 320rpx;
height: 80rpx;
border: 2rpx solid #FFB7B7;
border-radius: 40rpx;
text-align: center;
line-height: 80rpx;
font-size: 32rpx;
font-family: PingFang SC;
font-weight: 500;
@include font_color('font_color');
@include border_color('border_color');
margin: 0 auto;
}
.add_add {
height: 64rpx;
line-height: 64rpx;
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 500;
color: #0777CD;
padding: 0 35rpx;
border-bottom: 1rpx solid #D9D9D9;
}
.defaul_add {
padding: 9rpx 14rpx 10rpx 15rpx;
@include background_color('bg-op');
font-size: 22rpx;
font-family: PingFang SC;
font-weight: 500;
color: #F6220C;
@include font_color('font_color');
}
.add_icon_img {
width: 30rpx;
height: 30rpx;
}
.none_line {
width: 1rpx;
height: 44rpx;
background: #D9D9D9;
}
.add_add-btn{
position: fixed;
bottom: calc(env(safe-area-inset-bottom) + 20rpx);
width:690rpx;
margin: 20rpx 30rpx;
box-sizing: border-box;
font-size: 28rpx;
height: 80rpx;
border-radius: 40rpx;
display: flex;
justify-content: center;
align-items: center;
}
.pbenv{
padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx);
box-sizing: border-box;
}
</style>

201
pages/user/address/edit/edit.vue Normal file
View File

@ -0,0 +1,201 @@
<template>
<view class="address-form" :data-theme='theme()' :class="theme() || ''">
<form @submit="formSubmit" @reset="formReset">
<view class="bg-white p-0-30 f30">
<view class="d-s-c border-b-d9">
<text class="key-name">收货人</text>
<input class="ml20 f32 flex-1 p-30-0" name="name" type="text" v-model="address.name" placeholder-class="grary9"
placeholder="请输入收货人姓名" />
</view>
<view class="d-s-c border-b-d9">
<text class="key-name">联系方式</text>
<input class="ml20 f32 flex-1 p-30-0" name="phone" type="text" v-model="address.phone" placeholder-class="grary9"
placeholder="请输入收货人手机号" />
</view>
<view class="d-s-c border-b-d9">
<text class="key-name">所在地区</text>
<view class="input-box flex-1">
<input class="ml20 f32 flex-1 p-30-0" type="text" value="" placeholder-class="grary9" placeholder="" v-model="selectCity"
disabled="true" @click="showMulLinkageThreePicker" />
</view>
</view>
<view class="d-s-c border-b-d9">
<text class="key-name">详细地址</text>
<textarea class="ml20 flex-1 f32 p-30-0 lh150" name="detail" placeholder-class="grary9" :auto-height="true"
v-model="address.detail" placeholder="请输入街道小区楼牌号等"></textarea>
</view>
</view>
<view class="p30"><button form-type="submit" class="theme-btn f32 mt60 addBtn">保存</button></view>
</form>
<mpvue-city-picker v-if="is_load" ref="mpvueCityPicker" :province="province" :city="city" :area="area" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"></mpvue-city-picker>
</view>
</template>
<script>
import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
export default {
components: {
mpvueCityPicker
},
data() {
return {
cityPickerValueDefault: [0, 0, 0],
selectCity: '选择省,市,区',
province_id: 0,
city_id: 0,
region_id: 0,
/*地址id*/
address_id: 0,
/*地址数据*/
address: {},
/*地区*/
region: {},
is_load: false,
province: [],
city: [],
area: [],
delta: 1,
};
},
onLoad(e) {
this.delta = e.delta;
this.address_id = e.address_id;
},
mounted() {
/*获取地址数据*/
this.getData();
},
methods: {
/*获取数据*/
getData() {
let self = this;
let address_id = self.address_id;
self._get(
'user.address/detail', {
address_id: address_id
},
function(res) {
self.address = res.data.detail;
self.address_id = res.data.detail.address_id;
self.province_id = res.data.detail.province_id;
self.city_id = res.data.detail.city_id;
self.region_id = res.data.detail.region_id;
self.region = res.data.region;
let add = '';
var b = self.region.forEach(item => {
add += item;
});
self.selectCity = add;
self.province = res.data.regionData[0];
self.city = res.data.regionData[1];
self.area = res.data.regionData[2];
self.is_load = true;
}
);
},
/*提交地址*/
formSubmit: function(e) {
let self = this;
var formdata = e.detail.value;
formdata.province_id = self.province_id;
formdata.city_id = self.city_id;
formdata.region_id = self.region_id;
formdata.address_id = self.address_id;
formdata.region = self.region;
if (formdata.name == '') {
uni.showToast({
title: '请输入收货人姓名',
duration: 1000,
icon: 'none'
});
return false;
}
if (formdata.phone == '') {
uni.showToast({
title: '请输入手机号码',
duration: 1000,
icon: 'none'
});
return false;
}
if (formdata.province_id == 0 || formdata.city_id == 0 || formdata.region_id) {
if (formdata.detail == '') {
uni.showToast({
title: '请选择完整省市区',
duration: 1000,
icon: 'none'
});
return false;
}
}
self._post('user.address/edit', formdata, function(res) {
self.showSuccess(res.msg, function() {
console.log(self.delta);
// #ifdef H5
uni.navigateBack({
delta: parseInt(self.delta)
});
//#endif
// #ifndef H5
uni.navigateBack({
delta: 1
});
//#endif
});
});
},
/*清空数据*/
formReset: function(e) {
console.log('清空数据');
},
/*三级联动选择*/
showMulLinkageThreePicker() {
this.$refs.mpvueCityPicker.show();
},
/*选择之后绑定*/
onConfirm(e) {
this.region = e.label.split(',');
this.selectCity = e.label;
this.province_id = e.cityCode[0];
this.city_id = e.cityCode[1];
this.region_id = e.cityCode[2];
}
}
};
</script>
<style>
page {
background-color: #FFFFFF;
}
.address-form {
border-top: 16rpx solid #f2f2f2;
}
.address-form .key-name {
width: 140rpx;
font-size: 32rpx;
}
.address-form .btn-red {
height: 88rpx;
line-height: 88rpx;
border-radius: 44rpx;
box-shadow: 0 8rpx 16rpx 0 rgba(226, 35, 26, .6);
}
.addBtn {
height: 80rpx;
line-height: 80rpx;
border-radius: 40rpx;
}
</style>