Files
sociology_app/pages/component/commonComponents/address/index.vue
2024-10-29 10:07:53 +08:00

910 lines
24 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template><page-meta
:page-font-size="$baseFontSize() + 'px'"
:root-font-size="$baseFontSize() + 'px'"
></page-meta>
<view class=" ">
<!-- 公共组件-每个页面必须引入 -->
<!-- <public-module></public-module>
<z-nav-bar title="确认订单" bgColor="#3AB3AE" fontColor="#fff"></z-nav-bar> -->
<view
class="common_address_box"
:style="`${
backState != 1000 ? 'padding-bottom: 180rpx' : 'padding-bottom: 100rpx'
}`"
>
<z-nav-bar
navFontAlign="left"
title="我的收货地址"
bgColor="#3AB3AE"
fontColor="#fff"
>
<template slot="right"></template>
</z-nav-bar>
<view
class=""
style="padding: 20rpx; background-color: #f9f9f9; height: 100%"
>
<!-- @longpress.native.stop="onLongPress" -->
<common-list
isCondition="true"
:dataList="addressList"
isNoIcon="true"
@hancleClick="selectAddress"
label="name"
class="common_radius_box color_shandow"
style="background-color: #fff"
>
<template slot="labelSlot" slot-scope="slotProps">
<view class="label_content AC_List">
<view style="width: 100%">
<view class="normal_logo">
{{ getName(slotProps.row.consigneeName) }}
</view>
<view :class="`right`">
<view class="normal_box">
<view class="normal_box_top">
<view class="user_info">
<text class="name">
{{ slotProps.row.consigneeName }}
</text>
<text class="tel">
{{ slotProps.row.consigneePhone }}
</text>
<text
v-if="slotProps.row.isDefault == 1"
class="isDefault"
>默认</text
>
</view>
<view class="curriulum_title"
>{{ slotProps.row.province }}{{ slotProps.row.city
}}{{ slotProps.row.county
}}{{ slotProps.row.detailAddress }}
</view>
</view>
</view>
<!-- 018F89 -->
<u-icon
class="editIcon"
name="edit-pen-fill"
color="#3ab3ae"
size="24"
@click.native.stop="handleClickEdit(slotProps.row)"
style="display: inline-block; margin-left: 10rpx"
></u-icon>
<u-icon
class="editIcon"
name="trash-fill"
color="red"
size="24"
@click.native.stop="handleClickDelete(slotProps.row.id)"
style="display: inline-block; margin-left: 10rpx"
></u-icon>
</view>
</view>
<view> </view>
</view>
</template>
<template slot="rightSlot" slot-scope="slotProps">
<view> </view>
</template>
</common-list>
</view>
<view class="goods_nav_box">
<uni-goods-nav
:fill="true"
:options="buyOptions"
:button-group="customButtonGroup1"
@click="onHandleClickIcon"
@buttonClick="onHandleClickBuy"
/>
</view>
</view>
<u-modal
:show="showModal"
:title="modalInfo.title"
:content="modalInfo.content"
showCancelButton
@confirm="deleteAddress"
@cancel="hancleModalCancel"
></u-modal>
<!-- <edit-address
@fresh="handleFresh"
ref="commonAddress"
@selectAddress="selectAddress"
></edit-address> -->
</view>
</template>
<script>
import courseDescription from "@/pages/component/commonComponents/list";
import editAddress from "./edit.vue";
import $http from "@/config/requestConfig.js";
import { mapState } from "vuex";
export default {
components: {
courseDescription, //课程说明
editAddress, //编辑收货地址
},
props: ["backState", "type"],
data() {
return {
isEdit: false,
showModal: false,
addressData: {
address: "天津市河东区桃园西里2单元222号房",
userName: "张花花",
phone: "18834844849",
},
buyOptions: [
// {
// icon: 'chat',
// text: '客服'
// },
// {
// icon: "bars",
// text: "管理",
// // info: 2,
// infoBackgroundColor: "#007aff",
// infoColor: "#f5f5f5",
// },
// {
// icon: 'cart',
// text: '购物车',
// info: 2
// }
],
customButtonGroup1: [
{
with: 200,
text: "+ 添加收货地址",
backgroundColor: "linear-gradient(90deg, #3AB3AE 0%, #117e4c 100%)",
color: "#fff",
},
],
show: false,
addressList: [],
urlList: {
list: "common/userAddress/getUserAddress",
curriculumInfo: "app/phone.do?getCourseInfo",
detailInfo: "app/phoneDoctor.do?getTaiHuClassInfo_new",
delete: "common/userAddress/delete",
},
customButton: [
{
width: "340rpx",
text: "立即支付",
backgroundColor: "linear-gradient(90deg, #3AB3AE 0%, #117e4c 100%)",
color: "#fff",
},
],
modalInfo: {},
};
},
onLoad(options) {
this.options = options;
this.getData();
// this.getUserInfo()
// this.getCateList()
},
onHide() {
// this.showSearchList = false
// this.searchList = []
},
onShow() {
this.selectPayIndex = 0;
this.getData();
},
computed: {
...mapState(["userInfo"]),
},
methods: {
hancleModalCancel() {
this.showModal = false;
},
backClick() {
this.$emit("fresh");
},
handleFresh() {
this.getData();
},
onHandleClickIcon() {
this.isEdit = true;
},
onHandleClickBuy() {
uni.navigateTo({
url: "/pages/component/commonComponents/address/edit",
});
},
handleClickEdit(data) {
console.log("data at line 145:", data);
uni.navigateTo({
url: "/pages/component/commonComponents/address/edit?id=" + data.id,
});
// this.$refs.commonAddress.open(data.id);
},
deleteAddress() {
var data = {};
$http
.request({
// url: "book/buyOrder/buySave",
url: `${this.urlList.delete}?id=${this.selectAddressId}`,
method: "Get", // POST、GET、PUT、DELETE具体说明查看官方文档
data,
header: {
//默认 无 说明:请求头
"Content-Type": "application/json",
},
})
.then((res) => {
console.log("res at line 252:", res);
this.showModal = false;
if (res.code == 0) {
this.getData();
}
});
},
handleClickDelete(id) {
this.modalInfo = { title: "提示信息", content: "确定要删除该地址吗?" };
this.selectAddressId = id;
this.showModal = true;
},
getName(name) {
console.log("name at line 140:", name);
if (name) {
if (name.length <= 2) {
return name;
} else {
return name.substring(0, 1);
}
}
},
open() {
this.getData();
},
fnCopy(value, title) {
this.$commonJS.handleMakingPhoneCalls(value, title);
},
gotoPhone() {
this.$commonJS.handleMakingPhoneCalls("022-24142321");
},
radioChange(index) {
this.selectPayIndex = index;
console.log("this.selectPayIndex at line 315:", this.selectPayIndex);
this.$forceUpdate();
},
handleValChange(e) {
console.log("e at line 424:", e);
},
buttonClick(e) {
console.log(e);
this.options[2].info++;
},
hancleModalConfirm() {
var data = {
values: {
customerType: "D",
token: uni.getStorageSync("token"),
customerOid: uni.getStorageSync("customerOid"),
...this.taiHuClassInfo,
},
};
// $mars.progressBegin('申请中...');
// $mars.post(customerType, 'applyRelearn', data, function (ret) {
// api.hideProgress();
// fnLoadDataGrid();
// });
},
selectAddress(v) {
console.log("v at line 423:", this.type);
// 当前页面
// 在源页面中使用 uni.navigateBack 返回上一页面并传递参数
if (this.options.type == "order") {
uni.$emit("returnData", v);
uni.navigateBack({
delta: 1, // 返回上一级页面
});
}
// this.$emit("selectAddress", v);
},
async getData() {
console.log("this.userInfo.id at line 368:", this.userInfo.id);
var data = {};
var that = this;
console.log(this.$store.state, "11111111111");
$http
.request({
// url: "book/buyOrder/buySave",
url: `${this.urlList.list}?userId=${this.userInfo.id}`,
method: "POST", // POST、GET、PUT、DELETE具体说明查看官方文档
data,
header: {
//默认 无 说明:请求头
"Content-Type": "application/json",
},
})
.then(async (res) => {
console.log("res at line 374:", res);
if (res.code == 0) {
this.addressList = res.list;
}
this.$forceUpdate();
// await that.getDetailInfo();
});
},
getPriceData() {
var that = this;
setTimeout(() => {
that.$nextTick(() => {
that.$refs.priceDetail.getData();
});
}, 100);
},
// 检查是有权限使用搜索功能
checkDisable() {
console.log("点击了");
},
// 显示无权限弹窗
// showNoRights() {
// let that = this
// uni.showModal({
// content: "",
// confirmText: '好的',
// showCancel: false,
// success: function(res) {
// if (res.confirm) {
// // console.log('用户点击确定');
// that.clear()
// }
// }
// })
// },
// 获取用户详情
getUserInfo() {
// 用户详情
if (this.userInfo.id != undefined) {
this.$http.post("book/user/info/" + this.userInfo.id).then((res) => {
this.userMes = res.user;
this.getCateList();
console.log(this.userMes, "呼呼");
});
}
},
async handleselectCate(item, index) {
this.dataList = [];
var data = [];
console.log(item, index, 99999);
var that = this;
// curriculumInfo
this.$http
.post(this.urlList.curriculumInfo, {
customerType: "D",
token: uni.getStorageSync("token"),
customerOid: uni.getStorageSync("customerOid"),
oid: item.coid,
})
.then(async (res) => {
that.curriculumInfo = res.obj;
that.dataList = res.obj.courseList;
// socket.init();
});
// this.$nextTick(() => {
// switch (item.type) {
// case 1:
// // allDataList
// this.dataList = that.allDataList.result1Lst
// break;
// case 2:
// this.dataList = that.allDataList.result2Lst
// break;
// case 3:
// this.dataList = that.allDataList.result3Lst
// break;
// case 4:
// this.dataList = that.allDataList.result4Lst.filter(e =>
// e.oid != '5fcf991c027b11e7ae62008cfae40c18' && e.oid != 'b3d8a938b8e147bc877613bb712a9cb3' && e.oid != '4d4730163135420ea962bfac4805e026' && e.oid != '49fb76ca3d6b43718d78c6aa9a3003c2' && e.oid != 'c7b047ed9246469b9ae2b1013fc3df9c'
// )
// console.log(this.dataList.length, 6666666)
// break;
// }
// this.currentCateIndex = item.index
// })
console.log(this.allDataList, this.dataList, "1688");
// if(this.userMes.tgdzPower == 0){
// let that = this
// uni.showModal({
// content: "购买 针灸六经法要上册和下册 后方可使用此功能",
// confirmText: '好的',
// showCancel: false,
// success: function(res) {
// if (res.confirm) {
// // console.log('用户点击确定');
// }
// }
// })
// return
// }
// if(item.title == "时辰取穴"){
// uni.navigateTo({
// url: "../timeAcupoint/timeAcupoint"
// })
// return
// }
// this.currentStatusIndex = index
this.searchValue = "";
this.searchList = [];
this.showSearchList = false;
// if (index != 2) {
// uni.createSelectorQuery().select('.statusList').boundingClientRect(function (rect) {
// var height = rect.height
// console.log('元素高度:',);
// }).exec();
// } else {
// this.getJFList(dictType)
// }
return data;
},
async getDetailInfo() {
var that = this;
// curriculumInfo
// this.$http
// .post(this.urlList.detailInfo, {
// customerType
// :
// "D",
// token
// : uni.getStorageSync("token")
// ,
// customerOid
// : uni.getStorageSync("customerOid"),
// classOid: 'f81b558ca4ee406e97c4045c87c2539c'
// })
// .then(async res => {
// that.detailInfo = res.obj
// // that.dataList = res.obj.courseList
// // socket.init();
// });
// this.$nextTick(() => {
// switch (item.type) {
// case 1:
// // allDataList
// this.dataList = that.allDataList.result1Lst
// break;
// case 2:
// this.dataList = that.allDataList.result2Lst
// break;
// case 3:
// this.dataList = that.allDataList.result3Lst
// break;
// case 4:
// this.dataList = that.allDataList.result4Lst.filter(e =>
// e.oid != '5fcf991c027b11e7ae62008cfae40c18' && e.oid != 'b3d8a938b8e147bc877613bb712a9cb3' && e.oid != '4d4730163135420ea962bfac4805e026' && e.oid != '49fb76ca3d6b43718d78c6aa9a3003c2' && e.oid != 'c7b047ed9246469b9ae2b1013fc3df9c'
// )
// console.log(this.dataList.length, 6666666)
// break;
// }
// this.currentCateIndex = item.index
// })
console.log(this.allDataList, this.dataList, "1688");
// if(this.userMes.tgdzPower == 0){
// let that = this
// uni.showModal({
// content: "购买 针灸六经法要上册和下册 后方可使用此功能",
// confirmText: '好的',
// showCancel: false,
// success: function(res) {
// if (res.confirm) {
// // console.log('用户点击确定');
// }
// }
// })
// return
// }
// if(item.title == "时辰取穴"){
// uni.navigateTo({
// url: "../timeAcupoint/timeAcupoint"
// })
// return
// }
// this.currentStatusIndex = index
this.searchValue = "";
this.searchList = [];
this.showSearchList = false;
// if (index != 2) {
// uni.createSelectorQuery().select('.statusList').boundingClientRect(function (rect) {
// var height = rect.height
// console.log('元素高度:',);
// }).exec();
// } else {
// this.getJFList(dictType)
// }
return data;
},
async setOneCateIndex(item, index) {
this.allDataList = [];
console.log(index, 99999);
var that = this;
// if(this.userMes.tgdzPower == 0){
// let that = this
// uni.showModal({
// content: "购买 针灸六经法要上册和下册 后方可使用此功能",
// confirmText: '好的',
// showCancel: false,
// success: function(res) {
// if (res.confirm) {
// // console.log('用户点击确定');
// }
// }
// })
// return
// }
// if(item.title == "时辰取穴"){
// uni.navigateTo({
// url: "../timeAcupoint/timeAcupoint"
// })
// return
// }
this.currentStatusIndex = index;
// this.currentCateIndex = 0
this.searchValue = "";
this.searchList = [];
this.showSearchList = false;
this.$nextTick(async () => {
await that.getData();
this.$forceUpdate();
});
// this.handleselectCate(this.cateList[this.currentCateIndex])
// if (index != 2) {
// uni.createSelectorQuery().select('.statusList').boundingClientRect(function (rect) {
// var height = rect.height
// console.log('元素高度:',);
// }).exec();
// } else {
// this.getJFList(dictType)
// }
},
transformData(inputData) {
const result = {};
inputData.forEach((item) => {
const { letter } = item;
if (!result[letter]) {
result[letter] = [];
}
result[letter].push(item);
});
// const finalResult = Object.keys(result).map(key => ({ [key]: result[key] }));
return result;
},
// getJFList(id) {
// $http.request({
// url: "book/prescript/prescriptListForJF",
// method: "POST", // POST、GET、PUT、DELETE具体说明查看官方文档
// data: {
// loadAnimate: 'none', // 请求加载动画
// 'categoryId': id
// },
// header: { //默认 无 说明:请求头
// 'Content-Type': 'application/json'
// },
// }).then(res => {
// if (res.code == 0 && res.list.length > 0) {
// this.twoCateList = []
// this.dataList = this.transformData(res.list)
// console.log('JF经方', this.dataList)
// } else {
// this.twoCateList = []
// this.dataList = []
// }
// }).catch(e => {
// this.twoCateList = []
// this.dataList = []
// console.log(e)
// })
// },
getCateList(id) {
id ? "" : (id = 0);
this.twoCateList = [];
this.curTwoCateIndex = 0;
// 0为获取顶级分类其他为搜索下级分类目前的逻辑顶级是写死的所以可能只会涉及到搜索第二级
// $http.request({
// url: "book/prescript/prescriptCategoryList",
// method: "POST", // POST、GET、PUT、DELETE具体说明查看官方文档
// data: {
// loadAnimate: 'none', // 请求加载动画
// 'categoryId': id
// },
// header: { //默认 无 说明:请求头
// 'Content-Type': 'application/json'
// },
// }).then(res => {
// console.log(res, '脉穴分类获取成功')
// if (res.code == 0 && res.list.length > 0) {
// this.statusList = res.list
// this.getTowCateList(this.statusList[0].type)
// } else {
// this.statusList = []
// }
// }).catch(e => {
// this.statusList = []
// console.log(e)
// })
},
// 放大图片
previewImage(url) {
console.log(url);
uni.previewImage({
urls: [url],
longPressActions: {
itemList: ["很抱歉,暂不支持保存图片到本地"],
success: function (res) {
// console.log(res,'+++++')
},
},
});
},
// getSearch() {
// $http.request({
// url: "book/prescript/searchPrescript",
// method: "POST", // POST、GET、PUT、DELETE具体说明查看官方文档
// data: {
// loadAnimate: 'none', // 请求加载动画
// 'keywords': this.searchValue,
// type: this.currentStatusIndex + 1
// },
// header: { //默认 无 说明:请求头
// 'Content-Type': 'application/json'
// },
// }).then(res => {
// console.log(res, '搜索结果')
// if (res.code == 0 && res.list.length >= 0) {
// this.showSearchList = true
// this.searchList = res.list
// } else {
// this.searchList = []
// }
// }).catch(e => {
// // this.dataList = []
// this.searchList = []
// console.log(e)
// })
// },
// search(res) {
// console.log(res, 'res')
// // uni.showToast({
// // title: '搜索:' + res,
// // icon: 'none'
// // })
// if (res == '') {
// this.showSearchList = false
// this.searchList = []
// } else {
// this.getSearch()
// }
// },
// input(res) {
// console.log('----input:', res)
// if (res == '') {
// this.searchList = []
// } else {
// this.getSearch()
// }
// },
// clear(res) {
// console.log('----clear:', res)
// // uni.showToast({
// // title: 'clear事件清除值为',
// // icon: 'none'
// // })
// this.searchValue = ''
// this.showSearchList = false
// },
// blur(res) {
// // console.log('----blur:', res)
// // if (res == '') {
// // this.showSearchList = false
// // this.searchList = []
// // } else {
// // this.getSearch()
// // }
// },
// focus(e) {
// console.log('----focus:')
// // uni.showToast({
// // title: 'focus事件输出值为' + e.value,
// // icon: 'none'
// // })
// // 等于1 就是有权限
// // this.showSearchList = true
// },
// cancel(res) {
// uni.showToast({
// title: '点击取消,输入值为:' + res.value,
// icon: 'none'
// })
// }
},
onBackPress() {
// #ifdef APP-PLUS
plus.key.hideSoftKeybord();
// #endif
},
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
/deep/.list_item {
// border-bottom: none;
padding-left: 0 !important;
padding-right: 0 !important;
}
.AC_List {
width: 100%;
overflow: hidden;
display: flex;
align-items: center;
background-color: #fff;
// justify-content: space-between;
}
.curriulum_title {
width: 100%;
font-weight: 500;
font-size: 28rpx;
white-space: wrap; /* 禁止文本换行 */
overflow: hidden;
// line-height: 40rpx;
// display: flex;
// align-items: center;
margin-top: 10rpx;
float: left;
margin-bottom: 5rpx;
color: #b0b0b0;
// padding: 20rpx;
box-sizing: border-box;
text {
margin-right: 10rpx;
}
}
.right {
width: calc(100% - 100rpx);
display: flex;
align-items: center;
}
.user_info {
width: 100%;
float: left;
display: flex;
margin-top: 10rpx;
align-items: center;
font-size: 32rpx;
font-weight: 800;
.name {
max-width: calc(100% - 300rpx);
white-space: nowrap; /* 禁止文本换行 */
overflow: hidden; /* 隐藏超出容器的文本 */
text-overflow: ellipsis; /* 使用省略号代替隐藏的内容 */
display: inline-block;
color: #333;
margin-right: 10rpx;
}
.tel {
color: #000;
font-size: 28rpx;
font-weight: 600;
}
}
.common_address_box {
width: 100vw;
height: 100vh;
background-color: #fdfbfb;
}
.normal_box {
width: calc(100% - 60rpx);
height: auto;
float: left;
// overflow: hidden;
.normal_box_top {
width: 100%;
// display: flex;
height: auto;
margin-bottom: 40rpx;
}
.editIcon {
float: right;
}
}
.normal_logo {
width: 80rpx !important;
height: 80rpx !important;
border-radius: 80rpx;
background-color: $themeBgColor;
color: #3ab3ae;
font-size: 34rpx;
font-weight: bold;
text-align: center;
line-height: 80rpx;
float: left;
margin-right: 20rpx;
}
.isDefault {
color: #3ab3ae;
font-size: 22rpx;
font-weight: 600;
border: 1rpx solid $themeColor;
padding: 2rpx 10rpx;
border-radius: 6rpx;
line-height: 30rpx;
margin-left: 18rpx;
}
</style>