jiazhipeng
5 months ago
12 changed files with 1700 additions and 773 deletions
@ -0,0 +1,398 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<view class="list-forms"> |
|||
<view class="list-item"> |
|||
<view class="list-item-title">姓名</view> |
|||
<view class="list-item-input"><input type="text" v-model="username" placeholder="请输入姓名" /></view> |
|||
</view> |
|||
<view class="list-item"> |
|||
<view class="list-item-title">手机号</view> |
|||
<view class="list-item-input"><input type="number" v-model="mobile" placeholder="请输入手机号" maxlength="11" |
|||
/></view> |
|||
</view> |
|||
<view class="list-item" style="position: relative;"> |
|||
<view class="list-item-title">选择地区</view> |
|||
<view class="list-item-input3" style="flex: 1;"> |
|||
<picker mode="multiSelector" :range="newProvinceDataList" range-key="name" @change="changeArea" @columnchange="pickerColumnchange" |
|||
style="position: relative;z-index: 2;"> |
|||
<input type="text" readonly style="font-size: 35rpx;position: relative;z-index: -1;" |
|||
v-model="citySeld" disabled="true" placeholder="请选择地区"/> |
|||
</picker> |
|||
</view> |
|||
</view> |
|||
<view class="list-item"> |
|||
<view class="list-item-title">详细地址</view> |
|||
<view class="list-item-input"><input type="text" v-model="detailAddr" placeholder="请输入详细地址" /></view> |
|||
</view> |
|||
<view class="list-item" style="border-bottom: 0;"> |
|||
<view class="list-item-title">设为默认</view> |
|||
<view class="list-item-switch"> |
|||
<switch :checked="idDefault" @change="switchChange" color="#74A5AA"/> |
|||
</view> |
|||
</view> |
|||
<!-- <view class="list-item-btn"> |
|||
<view class="list-item-post" @click="postSave()">保存</view> |
|||
</view> --> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import District from 'ydui-district/dist/jd_province_city_area_id'; |
|||
export default { |
|||
data() { |
|||
return { |
|||
username: '', |
|||
mobile: '', |
|||
citySeld: '', |
|||
detailAddr: '', |
|||
idDefault: false, |
|||
title: '新增收货地址', |
|||
show: false, |
|||
district: District, //数据 |
|||
ready: false, |
|||
province: null, |
|||
city: null, |
|||
area: '', |
|||
provinceId: null, |
|||
cityId: null, |
|||
areaId: null, |
|||
columns: [], |
|||
id: '', |
|||
newProvinceDataList:[ |
|||
[],[],[] |
|||
], |
|||
multiIndex: [0, 0, 0], |
|||
} |
|||
}, |
|||
onLoad(option){ |
|||
|
|||
}, |
|||
methods: { |
|||
init(option) { |
|||
this.id = null |
|||
this.username = '' |
|||
this.mobile = '' |
|||
this.citySeld = '' |
|||
this.detailAddr = '' |
|||
this.idDefault = false |
|||
this.province = null |
|||
this.city = null |
|||
this.area = '' |
|||
this.provinceId = null |
|||
this.cityId = null |
|||
this.areaId = null |
|||
this.multiIndex = [0, 0, 0] |
|||
this.id = option.id |
|||
|
|||
|
|||
if (option.id > 0) { |
|||
this.title = '编辑收货地址' |
|||
this.getDetail() |
|||
} |
|||
else { |
|||
this.getSeldCityList() |
|||
} |
|||
}, |
|||
|
|||
switchChange(e){ |
|||
this.idDefault = e.detail.value |
|||
}, |
|||
changeArea(e){ |
|||
// 数组内的下标 |
|||
this.multiIndex = e.detail.value; |
|||
this.citySeld = this.newProvinceDataList[0][this.multiIndex[0]].name + this.newProvinceDataList[1][this.multiIndex[1]].name + this.newProvinceDataList[2][this.multiIndex[2]].name |
|||
this.provinceId = this.newProvinceDataList[0][this.multiIndex[0]].id |
|||
this.cityId = this.newProvinceDataList[1][this.multiIndex[1]].id |
|||
this.areaId = this.newProvinceDataList[2][this.multiIndex[2]].id |
|||
}, |
|||
getSeldCityList() { |
|||
if (this.columns.length>0) { |
|||
return |
|||
} |
|||
|
|||
let that = this |
|||
that.Post({}, '/api/areas/getAll').then(res => { |
|||
if (res.code === 1) { |
|||
var data = res.data; |
|||
var result = {}; |
|||
for (var i = 0; i < data.length; i++) { |
|||
var item = data[i]; |
|||
if (item.parent_id == 0) { |
|||
continue; |
|||
} |
|||
//获取省 |
|||
if (item.parent_id == "1") { |
|||
result[item.id.toString()] = {}; |
|||
result[item.id.toString()].children = [] |
|||
result[item.id.toString()].name = item.name; |
|||
result[item.id.toString()].id = item.id; |
|||
} else if (result[item.parent_id.toString()]) { |
|||
//填充市 |
|||
var t = { |
|||
id: item.id, |
|||
name: item.name, |
|||
children: [] |
|||
} |
|||
result[item.parent_id.toString()].children.push(t) |
|||
} else { |
|||
//填充区 |
|||
var k = { |
|||
id: item.id, |
|||
name: item.name |
|||
} |
|||
for (var j = 0; j < result[item.parent_id.toString().substr(0, 2) + "0000"].children |
|||
.length; j++) { |
|||
if (result[item.parent_id.toString().substr(0, 2) + "0000"].children[j].id == item |
|||
.parent_id) { |
|||
result[item.parent_id.toString().substr(0, 2) + "0000"].children[j].children.push(k) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
var r = []; |
|||
//将Object转为Array |
|||
for (var i in result) { |
|||
r.push(result[i]); |
|||
} |
|||
//将数据赋值给省市区联动选择器 |
|||
that.district = r; |
|||
let arr = [] |
|||
let arr1 = [] |
|||
let arr2 = [] |
|||
that.district.forEach(item => { |
|||
arr.push(item) |
|||
}) |
|||
that.district[0].children.forEach(item => { |
|||
arr1.push(item) |
|||
}) |
|||
that.district[0].children[0].children.forEach(item => { |
|||
arr2.push(item) |
|||
}) |
|||
that.columns = arr |
|||
//控制异步数据 |
|||
that.ready = true; |
|||
console.log(this.columns) |
|||
for(let i=0; i<this.columns.length; i++){ |
|||
this.newProvinceDataList[0].push({name:this.columns[i].name,id:this.columns[i].id}); |
|||
} |
|||
console.log(this.columns[0].children) |
|||
for(let i=0; i<this.columns[0].children.length; i++){ |
|||
this.newProvinceDataList[1].push({name:this.columns[0].children[i].name,id:this.columns[0].children[i].id}); |
|||
} |
|||
for(let i=0; i<this.columns[0].children[0].children.length; i++){ |
|||
this.newProvinceDataList[2].push({name:this.columns[0].children[0].children[i].name,id:this.columns[0].children[0].children[i].id}); |
|||
} |
|||
} |
|||
}) |
|||
}, |
|||
// 滑动 |
|||
pickerColumnchange(e){ |
|||
// 第几列滑动 |
|||
// console.log(e.detail.column); |
|||
// 第几列滑动的下标 |
|||
// console.log(e.detail.value) |
|||
// 第一列滑动 |
|||
if(e.detail.column === 0){ |
|||
this.multiIndex[0] = e.detail.value |
|||
// console.log('第一列滑动'); |
|||
// this.newProvinceDataList[1] = []; |
|||
this.newProvinceDataList[1] = this.columns[this.multiIndex[0]].children.map((item,index)=>{ |
|||
// console.log(item) |
|||
return item |
|||
}) |
|||
// console.log(this.multiIndex) |
|||
if(this.columns[this.multiIndex[0]].children.length === 1){ |
|||
this.newProvinceDataList[2] = this.columns[this.multiIndex[0]].children[0].children.map((item,index)=>{ |
|||
// console.log(item) |
|||
return item |
|||
}) |
|||
}else{ |
|||
this.newProvinceDataList[2] = this.columns[this.multiIndex[0]].children[this.multiIndex[1]].children.map((item,index)=>{ |
|||
// console.log(item) |
|||
return item |
|||
}) |
|||
} |
|||
// 第一列滑动 第二列 和第三列 都变为第一个 |
|||
this.multiIndex.splice(1, 1, 0) |
|||
this.multiIndex.splice(2, 1, 0) |
|||
} |
|||
// 第二列滑动 |
|||
if(e.detail.column === 1){ |
|||
this.multiIndex[1] = e.detail.value |
|||
// console.log('第二列滑动'); |
|||
// console.log(this.multiIndex) |
|||
this.newProvinceDataList[2] = this.columns[this.multiIndex[0]].children[this.multiIndex[1]].children.map((item,index)=>{ |
|||
// console.log(item) |
|||
return item |
|||
}) |
|||
// 第二列 滑动 第三列 变成第一个 |
|||
this.multiIndex.splice(2, 1, 0) |
|||
} |
|||
// 第三列滑动 |
|||
if(e.detail.column === 2){ |
|||
this.multiIndex[2] = e.detail.value |
|||
// console.log('第三列滑动') |
|||
// console.log(this.multiIndex) |
|||
} |
|||
}, |
|||
getDetail() { |
|||
this.Post({ |
|||
id: this.id |
|||
}, "/api/user/contactDetail").then(res => { |
|||
res = res.data; |
|||
if (res && res.id > 0) { |
|||
this.username = res.name |
|||
this.mobile = res.tel |
|||
this.idDefault = res.is_default == 1 ? true : false |
|||
this.provinceId = res.province_id |
|||
this.cityId = res.city_id |
|||
this.areaId = res.district_id |
|||
this.citySeld = res.province_text + '' + res.city_text + '' + res.district_text |
|||
this.detailAddr = res.detail_addr; |
|||
this.getSeldCityList(); |
|||
} |
|||
}) |
|||
}, |
|||
async postSave() { |
|||
this.username = this.username.trim() |
|||
this.mobile = this.mobile.trim() |
|||
this.detailAddr = this.detailAddr.trim() |
|||
if (this.username.length < 1) { |
|||
uni.showToast({ |
|||
title: '请输入姓名', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
if (this.username.length > 6) { |
|||
uni.showToast({ |
|||
title: '姓名最多6个字', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
if (!this.IsTel(this.mobile)) { |
|||
uni.showToast({ |
|||
title: '请输入正确的手机号', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
if (this.citySeld.length < 1) { |
|||
uni.showToast({ |
|||
title: '请选择地区', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
if (this.detailAddr.length < 2) { |
|||
uni.showToast({ |
|||
title: '请输入具体地址', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
let res = await this.Post({ |
|||
name: this.username, |
|||
tel: this.mobile, |
|||
is_default: this.idDefault ? '1' : '0', |
|||
province_id: this.provinceId, |
|||
city_id: this.cityId, |
|||
district_id: this.areaId, |
|||
detail_addr: this.detailAddr, |
|||
id: this.id || null |
|||
},'/api/user/' + (this.id > 0 ? 'edit' : 'add') + 'Consignee') |
|||
|
|||
if(res.code == '1'){ |
|||
// uni.setStorageSync('addressNow',JSON.stringify(res.data)) |
|||
uni.showModal({ |
|||
title: '提示', |
|||
content: this.id>0?'编辑成功':'添加成功', |
|||
showCancel: false, |
|||
}) |
|||
}else{ |
|||
uni.showModal({ |
|||
title: '提示', |
|||
content: res.msg, |
|||
showCancel: false, |
|||
}) |
|||
} |
|||
|
|||
return {...res,data: {id: this.id}} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.bg { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.list-forms { |
|||
display: flex; |
|||
flex-direction: column; |
|||
box-sizing: content-box |
|||
} |
|||
|
|||
.list-item { |
|||
display: flex; |
|||
border-bottom: 1rpx solid #D8D8D8; |
|||
padding: 30rpx 0; |
|||
height: 60rpx; |
|||
align-items: center; |
|||
box-sizing: content-box |
|||
} |
|||
|
|||
.list-item-title { |
|||
width: 150rpx; |
|||
font-size: 31rpx; |
|||
margin-right: 20rpx; |
|||
} |
|||
|
|||
.list-item-input { |
|||
flex: 1; |
|||
} |
|||
|
|||
.list-item-input input { |
|||
width: 100%; |
|||
height: 100%; |
|||
padding: 0; |
|||
margin: 0; |
|||
border: 0; |
|||
background-color: transparent; |
|||
line-height: 31rpx; |
|||
font-size: 31rpx; |
|||
} |
|||
|
|||
.list-item-input input::placeholder { |
|||
font-size: 26rpx; |
|||
} |
|||
|
|||
.list-item-switch { |
|||
display: flex; |
|||
flex: 1; |
|||
justify-content: flex-end; |
|||
} |
|||
|
|||
.list-item-btn { |
|||
display: flex; |
|||
justify-content: center; |
|||
margin-top: 20rpx; |
|||
} |
|||
|
|||
.list-item-post { |
|||
display: flex; |
|||
color: #FFFFFF; |
|||
font-size: 36rpx; |
|||
width: 697rpx; |
|||
height: 73rpx; |
|||
background: linear-gradient(90deg, #F84A56, #FF9834); |
|||
border-radius: 37rpx; |
|||
justify-content: center; |
|||
align-items: center; |
|||
margin-top: 725rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,455 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
|
|||
<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0" |
|||
:safe-area="true" @change="popChange"> |
|||
<view class="cart-container" v-if="showCart"> |
|||
<view class="header-container"> |
|||
<view class="select-area flex flex-items-center" @click.stop="selectAllGoods"> |
|||
<view class="select-cycle" v-show="!selectAll"></view> |
|||
<view class="select-cycle selected" v-show="selectAll"> |
|||
<image :src="showImg('/uploads/20241104/3d903e0c2788104b57b4ce5e07ea1de1.png')"> |
|||
</view> |
|||
<view style="padding-left: 26rpx;" >全选</view> |
|||
</view> |
|||
<view class="delete-area flex flex-items-center" @click.stop="clearAllGoods"> |
|||
<image :src="showImg('/uploads/20241104/50900c9a5fa5fbdbdee526abc9af4a40.png')"></image> |
|||
<view style="padding-left: 8rpx;" >清空</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="content-container"> |
|||
<view class="content-item" v-for="(item,i) in cartData" :key="i" :model="cartData"> |
|||
<view class="flex flex-items-center" @tap.stop="setItemSelect(item)"> |
|||
<view class="select-cycle" v-show="!item.isSelected"></view> |
|||
<view class="select-cycle selected" v-show="item.isSelected"> |
|||
<image :src="showImg('/uploads/20241104/3d903e0c2788104b57b4ce5e07ea1de1.png')"> |
|||
</view> |
|||
<view style="padding-left: 26rpx;flex:1"> |
|||
<view class="commodity box" > |
|||
<image class="img" :src="showImg(item.Specifications_image)" mode="aspectFill"></image> |
|||
<view class="title goods-text-area"> |
|||
<view class="commodity-info"> |
|||
<view class="text-overflowRows" style="font-weight: bold;">{{ item.good_name }}</view> |
|||
<view class="text-overflowRows" style="font-size: 27rpx;color: #999999;padding-top: 10rpx;">{{ item.Specifications_name }}</view> |
|||
</view> |
|||
<view class="flex flex-between"> |
|||
<view class="commodity-price"> |
|||
￥ <view style="font-size: 40rpx;">{{item.Specifications_money/100}}</view> |
|||
</view> |
|||
<view class="add-num-area"> |
|||
<view :class="['ctrl',item.num>1?'':'disabled']" @click.stop="addBuyNum(item,-1,i)" >-</view> |
|||
<view>{{item.num}}</view> |
|||
<view :class="['ctrl']" @click.stop="addBuyNum(item,1,i)">+</view> |
|||
|
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</uni-popup> |
|||
|
|||
|
|||
|
|||
|
|||
<slot name="content"></slot> |
|||
</view> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "cartData", |
|||
data() { |
|||
return { |
|||
cartData: [], |
|||
showCart: false, |
|||
selectAll: false, |
|||
canOpenpop: true, |
|||
allPrice: {allPrice:0, iNum:0, fNum:'00'}, |
|||
} |
|||
}, |
|||
props:{ |
|||
paramData: { |
|||
type: Object, |
|||
}, |
|||
}, |
|||
|
|||
mounted() { |
|||
this.canOpenpop = true |
|||
this.refreshData() |
|||
uni.$on("updateDataByConnect",this.getDataByConnect) |
|||
}, |
|||
beforeUnmount () { |
|||
console.log('触发off') |
|||
uni.$off("updateDataByConnect",this.getDataByConnect) |
|||
}, |
|||
beforeDestroy () { |
|||
console.log('触发off') |
|||
uni.$off("updateDataByConnect",this.getDataByConnect) |
|||
}, |
|||
|
|||
methods: { |
|||
calNum () { |
|||
let res = 0 |
|||
this.cartData.forEach(v=>{ |
|||
res += v.num |
|||
}) |
|||
return res |
|||
}, |
|||
closePopup() { |
|||
this.$refs.popup.close() |
|||
this.paramData.showCart = this.showCart |
|||
this.$emit('changeParamData', this.paramData) |
|||
}, |
|||
openPop(){ |
|||
this.$refs.popup.open() |
|||
this.paramData.showCart = this.showCart |
|||
this.$emit('changeParamData', this.paramData) |
|||
}, |
|||
popChange (e) { |
|||
this.showCart = e.show |
|||
this.paramData.showCart = this.showCart |
|||
this.$emit('changeParamData', this.paramData) |
|||
}, |
|||
|
|||
getDataByConnect(data) { |
|||
if (data.msgType == "updateCartDataInfo") { |
|||
this.refreshData(data) |
|||
} |
|||
}, |
|||
|
|||
|
|||
refreshData (data) { |
|||
let selectedData = [] |
|||
try { |
|||
selectedData = JSON.parse(uni.getStorageSync('cartDataInfo')); |
|||
} catch(e) { |
|||
selectedData = [] |
|||
} |
|||
|
|||
if (Array.isArray(data) && data.length>0) { |
|||
this.cartData = data |
|||
this.setAllSelect() |
|||
} else { |
|||
this.Post({},'/api/shopping/getShoppingList').then(res => { |
|||
if (res) { |
|||
this.cartData = (res.data || []).map(v=>{return {...v, isSelected:selectedData.includes(v.specifications_id)}}) |
|||
this.setAllSelect() |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
// 购物车操作 |
|||
setItemSelect(item) { |
|||
item.isSelected = !item.isSelected |
|||
// uni.setStorageSync('cartDataInfo', JSON.stringify(this.cartData)); |
|||
this.setAllSelect() |
|||
|
|||
}, |
|||
selectAllGoods(){ |
|||
let goods = this.cartData |
|||
if (this.selectAll) { |
|||
goods.forEach(v => v.isSelected = false) |
|||
this.selectAll = false |
|||
} else { |
|||
goods.forEach(v => v.isSelected = true) |
|||
this.selectAll = true |
|||
} |
|||
this.setAllSelect() |
|||
|
|||
}, |
|||
clearAllGoods(){ |
|||
let _this = this |
|||
Promise.all(this.cartData.map(v=>{ |
|||
return _this.Post({s_id: v.id},'/api/shopping/delShopping') |
|||
})).finally(res =>{ |
|||
this.cartData = [] |
|||
this.setAllSelect() |
|||
}) |
|||
}, |
|||
setAllSelect() { |
|||
let goods = this.cartData |
|||
if(goods.length>0&& goods.every(v => v.isSelected)){ |
|||
this.selectAll = true |
|||
} else { |
|||
this.selectAll = false |
|||
} |
|||
let selectedData = goods.filter(v=>v.isSelected).map(v=>v.specifications_id) |
|||
uni.setStorageSync('cartDataInfo', JSON.stringify(selectedData)); |
|||
this.calAllPrice() |
|||
}, |
|||
|
|||
addBuyNum(item, num,index){ |
|||
if (num == -1 && item.num == 1) { |
|||
this.Post({s_id: item.id},'/api/shopping/delShopping').then(res =>{ |
|||
this.cartData.splice(index,1) |
|||
this.setAllSelect() |
|||
}) |
|||
} else { |
|||
let numData = item.num + num |
|||
this.Post({s_id: item.id, num: numData},'/api/shopping/updateShopping').then(res =>{ |
|||
item.num += num |
|||
this.setAllSelect() |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
calAllPrice () { |
|||
let selectedGoods = this.cartData.filter(v=>v.isSelected) |
|||
let totalPrice = 0 |
|||
selectedGoods.forEach(v=>{ |
|||
totalPrice += v.Specifications_money/100 * v.num |
|||
}) |
|||
totalPrice = totalPrice.toFixed(2) |
|||
console.log(totalPrice) |
|||
this.allPrice = {allPrice: totalPrice, iNum: totalPrice.split('.')[0], fNum: totalPrice.split('.')[1]} |
|||
|
|||
this.paramData.allPrice = totalPrice |
|||
this.paramData.iNum = this.allPrice.iNum |
|||
this.paramData.fNum = this.allPrice.fNum |
|||
this.paramData.num = this.calNum() |
|||
|
|||
this.$emit('changeParamData', this.paramData) |
|||
}, |
|||
|
|||
goCartOrder () { |
|||
if(this.cartData.every(v => !v.isSelected)){ |
|||
uni.showToast({ |
|||
title:'请先选中要购买的商品', |
|||
icon:'none', |
|||
}) |
|||
return |
|||
} |
|||
let orderData = this.cartData.filter(v=>v.isSelected).map(v=>{ |
|||
return { |
|||
goodsInfo: { |
|||
image: v.Specifications_image, |
|||
title:v.good_name, |
|||
merchant_name: v.merchant_name, |
|||
}, |
|||
skuInfo: { |
|||
title:v.Specifications_name, |
|||
buyNum:v.num, |
|||
money: v.Specifications_money, |
|||
id: v.specifications_id, |
|||
}, |
|||
|
|||
} |
|||
}) |
|||
|
|||
|
|||
let orderInfo = { |
|||
is_post: 1, // 购物车都是邮寄 |
|||
goods: orderData, |
|||
post: 0 |
|||
} |
|||
|
|||
uni.setStorageSync('teChanOrder', JSON.stringify(orderInfo)); //规格 |
|||
// uni.setStorageSync('teChanInfo', JSON.stringify(this.info)); //商品 |
|||
uni.navigateTo({ |
|||
url: '/subPackages/techan/order' |
|||
}); |
|||
}, |
|||
}, |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
*{ |
|||
box-sizing: border-box; |
|||
} |
|||
.bg{ |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
.cart-container{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
background-color: white; |
|||
height: 933rpx; |
|||
padding-bottom: 184rpx; |
|||
border-radius: 20rpx 20rpx 0rpx 0rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
position: absolute; |
|||
width: 100%; |
|||
bottom: 0; |
|||
z-index: 20; |
|||
|
|||
.header-container{ |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 40rpx 26rpx; |
|||
|
|||
.select-area{ |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
font-size: 37rpx; |
|||
color: #000000; |
|||
} |
|||
|
|||
|
|||
|
|||
.delete-area{ |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
font-size: 27rpx; |
|||
color: #999999; |
|||
image{ |
|||
width: 26rpx; |
|||
height: 26rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.content-container{ |
|||
flex: 1; |
|||
height: 10rpx; |
|||
overflow-y: auto; |
|||
padding:0 26rpx 26rpx; |
|||
|
|||
.content-item{ |
|||
margin-bottom: 48rpx; |
|||
} |
|||
|
|||
.commodity { |
|||
display: flex; |
|||
.add-num-area{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
width: 160rpx; |
|||
|
|||
image{ |
|||
width: 49rpx; |
|||
height: 49rpx; |
|||
} |
|||
|
|||
} |
|||
.goods-text-area{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
} |
|||
.commodity-price{ |
|||
font-weight: 500; |
|||
font-size: 24rpx; |
|||
color: #F84A56; |
|||
display: flex; |
|||
align-items: baseline; |
|||
} |
|||
.commodity-info{ |
|||
font-family: PingFangSC; |
|||
font-weight: 500; |
|||
font-size: 32rpx; |
|||
color: #2C2C2C; |
|||
} |
|||
// align-items: center; |
|||
.img { |
|||
width: 217rpx; |
|||
height: 179rpx; |
|||
border-radius: 13rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
.title { |
|||
flex: 1; |
|||
margin-left: 20rpx; |
|||
font-size: 32rpx; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #000000; |
|||
|
|||
.price-list { |
|||
display: flex; |
|||
margin-top: 18rpx; |
|||
align-items: center; |
|||
.price-r { |
|||
font-size: 32rpx; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: #fc5109; |
|||
&:before { |
|||
content: '¥'; |
|||
display: inline-block; |
|||
color: #fc5109; |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
.price-g { |
|||
font-size: 24rpx; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: #b5bcc9; |
|||
text-decoration: line-through; |
|||
margin-left: 10rpx; |
|||
} |
|||
} |
|||
} |
|||
.num-box { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-left: 20rpx; |
|||
width: 160rpx; |
|||
justify-content: space-between; |
|||
.num { |
|||
text-align: center; |
|||
width: 50rpx; |
|||
} |
|||
.ctrl { |
|||
width: 46rpx; |
|||
height: 46rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
} |
|||
|
|||
|
|||
|
|||
.select-cycle{ |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
border-radius: 50%; |
|||
border: 1px solid #999999; |
|||
image{ |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
.select-cycle.selected { |
|||
border: none; |
|||
image{ |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
} |
|||
} |
|||
|
|||
.ctrl { |
|||
width: 47rpx; |
|||
height: 47rpx; |
|||
background: #74A5AA; |
|||
border-radius: 50%; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
font-size: 34rpx; |
|||
color: #FFFFFF; |
|||
line-height: 47rpx; |
|||
text-align: center; |
|||
} |
|||
.ctrl.disabled{ |
|||
background: #E8E8E8; |
|||
color: #999999; |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,265 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<view class="list-forms"> |
|||
<view class="list-item"> |
|||
<view class="list-item-title">姓名</view> |
|||
<view class="list-item-input"><input type="text" v-model="username" placeholder="请输入姓名" /></view> |
|||
</view> |
|||
<view class="list-item"> |
|||
<view class="list-item-title">证件类型</view> |
|||
<view class="list-item-input"> |
|||
<picker mode="selector" :range="idcardTypeList" range-key="title" @change="changeIdType"> |
|||
<input type="text" readonly style="font-size: 35rpx;position: relative;" |
|||
v-model="idcardTypeValue" disabled="true" placeholder="请选择"/> |
|||
</picker> |
|||
</view> |
|||
</view> |
|||
<view class="list-item"> |
|||
<view class="list-item-title">证件号</view> |
|||
<view class="list-item-input"><input type="text" v-model="idNumber" placeholder="请输入正确的证件号" /></view> |
|||
</view> |
|||
|
|||
<view class="list-item"> |
|||
<view class="list-item-title">联系电话</view> |
|||
<view class="list-item-input"><input type="number" v-model="mobile" placeholder="请输入手机号" maxlength="11" /></view> |
|||
</view> |
|||
<view class="list-item"> |
|||
<view class="list-item-title">设为默认</view> |
|||
<view class="list-item-switch"> |
|||
<switch :checked="idDefault" @change="switchChange" color="#515150"/> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- <view class="btn" @click="submit">保存</view> --> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
username: '', |
|||
mobile: '', |
|||
idNumber: '', |
|||
idcardTypeValue: '身份证', |
|||
show: false, |
|||
idcardTypeList: [], |
|||
document_type: 'DAM01001', |
|||
id: '', |
|||
type: '', |
|||
idDefault: false, |
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
init (data) { |
|||
|
|||
this.username = '' |
|||
this.mobile= '' |
|||
this.idNumber= '' |
|||
this.idcardTypeValue= '身份证' |
|||
this.show= false |
|||
this.idcardTypeList= [] |
|||
this.document_type= 'DAM01001' |
|||
this.id= '' |
|||
this.type='' |
|||
this.idDefault= false |
|||
|
|||
this.type = 'add' |
|||
this.getIdcardTypeList() |
|||
if (data && data.id) { |
|||
this.id = data.id |
|||
this.type = 'edit' |
|||
this.getDetail() |
|||
} |
|||
}, |
|||
switchChange(e){ |
|||
this.idDefault = e.detail.value |
|||
}, |
|||
|
|||
getDetail() { |
|||
this.Post({ |
|||
id: this.id |
|||
}, '/api/user/contactDetail').then(res => { |
|||
if (res.code === 1) { |
|||
res = res.data |
|||
if (res && res.id > 0) { |
|||
this.username = res.name |
|||
this.mobile = res.tel |
|||
this.idNumber = res.id_number |
|||
this.idDefault = res.is_default == 1 ? true : false |
|||
this.document_type = res.document_type |
|||
this.idcardTypeValue = res.document_type_text |
|||
} |
|||
} |
|||
}) |
|||
}, |
|||
//获取证件类型 |
|||
getIdcardTypeList() { |
|||
this.Post({}, '/api/user/getIdcardTypeList').then(res => { |
|||
this.idcardTypeList = res.data |
|||
}) |
|||
}, |
|||
// 选择证件类型 |
|||
changeIdType(e) { |
|||
this.idcardTypeValue = this.idcardTypeList[e.detail.value].title |
|||
this.document_type = this.idcardTypeList[e.detail.value].document_type |
|||
}, |
|||
// 提交 |
|||
async submit() { |
|||
this.username = this.username.trim() |
|||
this.mobile = this.mobile.trim() |
|||
this.idNumber = this.idNumber.trim() |
|||
if (this.username.length < 1) { |
|||
uni.showToast({ |
|||
title: '请输入姓名', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
if (!this.IsTel(this.mobile)) { |
|||
uni.showToast({ |
|||
title: '请输入正确的手机号', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
if (this.idcardTypeValue == '身份证') { |
|||
if (!this.idCardNumber(this.idNumber)) { |
|||
uni.showToast({ |
|||
title: '请输入正确的身份证', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
} else if (this.idcardTypeValue == '护照') { |
|||
if (!this.passportValid(this.idNumber)) { |
|||
uni.showToast({ |
|||
title: '请输入正确的护照', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
} else if (this.idcardTypeValue == '台胞证') { |
|||
if (!this.taiwanValid(this.idNumber)) { |
|||
uni.showToast({ |
|||
title: '请输入正确的台胞证', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
} else if (this.idcardTypeValue == '港澳通行证') { |
|||
if (!this.gangaoValid(this.idNumber)) { |
|||
uni.showToast({ |
|||
title: '请输入正确的港澳通行证', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
} else if (this.idcardTypeValue == '外国人永久居留证') { |
|||
if (!this.foreignerValid(this.idNumber)) { |
|||
uni.showToast({ |
|||
title: '请输入正确的外国人永久居留证', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
} else if (this.idcardTypeValue == '军官证') { |
|||
if (!this.officerValid(this.idNumber)) { |
|||
uni.showToast({ |
|||
title: '请输入正确的军官证', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
} |
|||
let res = await this.Post({ |
|||
id: this.type == 'edit'?this.id:'', |
|||
id_number: this.idNumber, |
|||
name: this.username, |
|||
tel: this.mobile, |
|||
document_type: this.document_type, |
|||
is_default: this.idDefault ? '1' : '0', |
|||
}, this.type=='edit'?'/api/user/editContact':'/api/user/addContact') |
|||
if (res.code == 1) { |
|||
uni.showModal({ |
|||
title: '提示', |
|||
content: '操作成功', |
|||
showCancel: false, |
|||
}) |
|||
}else{ |
|||
uni.showModal({ |
|||
title: '提示', |
|||
content: res.msg, |
|||
showCancel: false, |
|||
}) |
|||
} |
|||
return {...res,data: {id: this.id}} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.bg { |
|||
width: 100%; |
|||
height: 100%; |
|||
position: relative; |
|||
} |
|||
|
|||
.list-forms { |
|||
padding: 0 33rpx; |
|||
|
|||
.list-item { |
|||
display: flex; |
|||
border-bottom: 1rpx solid #D8D8D8; |
|||
padding: 30rpx 0; |
|||
height: 60rpx; |
|||
box-sizing: content-box; |
|||
align-items: center; |
|||
|
|||
.list-item-title { |
|||
font-size: 34rpx; |
|||
margin-right: 20rpx; |
|||
width: 200rpx; |
|||
} |
|||
|
|||
.list-item-input { |
|||
flex: 1; |
|||
|
|||
input { |
|||
width: 100%; |
|||
height: 100%; |
|||
padding: 0; |
|||
margin: 0; |
|||
border: 0; |
|||
background-color: transparent; |
|||
line-height: 34rpx; |
|||
font-size: 34rpx; |
|||
text-align: left; |
|||
} |
|||
|
|||
input::placeholder { |
|||
font-size: 26rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.btn { |
|||
width: 697rpx; |
|||
height: 80rpx; |
|||
background: #515150; |
|||
border-radius: 40rpx; |
|||
text-align: center; |
|||
line-height: 80rpx; |
|||
font-size: 36rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #FFFFFF; |
|||
position: absolute; |
|||
bottom: 53rpx; |
|||
left: 27rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,11 @@ |
|||
{ |
|||
"requires": true, |
|||
"lockfileVersion": 1, |
|||
"dependencies": { |
|||
"ydui-district": { |
|||
"version": "1.1.0", |
|||
"resolved": "https://registry.npmmirror.com/ydui-district/-/ydui-district-1.1.0.tgz", |
|||
"integrity": "sha512-MBhvfaR5Gkn6MUmEnrH1A7IFB5igALuDgtIF+gz3dRwNwW9+KOmih7z+xZFfGluMsEbWaT7C3lWOckYsLZQnFg==" |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,19 @@ |
|||
{ |
|||
"name": "cgc_wechat", |
|||
"version": "1.0.0", |
|||
"description": "", |
|||
"main": "main.js", |
|||
"dependencies": { |
|||
"ydui-district": "^1.1.0" |
|||
}, |
|||
"devDependencies": {}, |
|||
"scripts": { |
|||
"test": "echo \"Error: no test specified\" && exit 1" |
|||
}, |
|||
"repository": { |
|||
"type": "git", |
|||
"url": "http://123.60.98.226:3000/chenkainan/cgc_WeChat.git" |
|||
}, |
|||
"author": "", |
|||
"license": "ISC" |
|||
} |
|||
@ -1,77 +1,58 @@ |
|||
import Vue from 'vue'; |
|||
import store from '@/store'; |
|||
import Vue from 'vue' |
|||
import store from '@/store' |
|||
|
|||
// 定义 API URL
|
|||
const DEV_API_URL = 'https://api.cloud.sz-trip.com'; |
|||
const PROD_API_URL = 'https://api.cloud.sz-trip.com'; |
|||
const NEWAPIURL = process.env.NODE_ENV === 'development' ? DEV_API_URL : PROD_API_URL; |
|||
let NEWAPIURL = 'https://tlgz.sz-trip.com' |
|||
Vue.prototype.NEWAPIURL = NEWAPIURL |
|||
|
|||
// 获取token
|
|||
const getToken = () => { |
|||
const userInfoFromStorage = uni.getStorageSync('userInfo'); |
|||
if (userInfoFromStorage) { |
|||
const userInfo = JSON.parse(userInfoFromStorage); |
|||
if (userInfo.token) { |
|||
return userInfo.token; |
|||
} |
|||
} |
|||
return store.state.user.userInfo.token; |
|||
}; |
|||
|
|||
// 定义错误处理函数
|
|||
const handleError = (res, reject) => { |
|||
setTimeout(() => { |
|||
uni.showToast({ |
|||
title: res.data?.msg || res.msg, |
|||
icon: 'none' |
|||
}); |
|||
reject(res); |
|||
}, 0); |
|||
if (res.data?.code === 401) { |
|||
store.commit('changeLoginPath'); |
|||
} |
|||
}; |
|||
|
|||
// 挂载到 Vue 原型上
|
|||
Vue.prototype.NEWAPIURL = NEWAPIURL; |
|||
// #ifdef H5
|
|||
Vue.prototype.NEWAPIURL = '/api'; |
|||
// #endif
|
|||
|
|||
Vue.prototype.Post = (params = {}, apiurl) => { |
|||
const token = getToken(); |
|||
if (token) { |
|||
params.token = token; |
|||
} |
|||
Vue.prototype.Post = (params, apiurl) => { |
|||
if (uni.getStorageSync('userInfo') && JSON.parse(uni.getStorageSync('userInfo')).token) params.token = JSON.parse(uni.getStorageSync('userInfo')).token |
|||
else if (store.state.user.userInfo.token) params.token = store.state.user.userInfo.token |
|||
params.token = "aa3940ea-57f5-412e-9803-4035d5115994" |
|||
return new Promise((resolve, reject) => { |
|||
uni.showLoading({ |
|||
title: '加载中' |
|||
}); |
|||
}) |
|||
uni.request({ |
|||
method: params.method || 'GET', |
|||
url: Vue.prototype.NEWAPIURL + apiurl, |
|||
data: params, |
|||
header: { |
|||
url: NEWAPIURL + apiurl, |
|||
data: params || {}, |
|||
header: params.header || { |
|||
'content-type': 'application/json', |
|||
'token': token || '' |
|||
'token': params.token || '' |
|||
}, |
|||
success: (res) => { |
|||
console.log('success', res.data); |
|||
success: res => { |
|||
uni.hideLoading() |
|||
if (res.data.code === 200 || res.data.code === 1) { |
|||
resolve(res.data); |
|||
if (res.data.code === 1) { |
|||
resolve(res.data) |
|||
} else { |
|||
handleError(res, reject); |
|||
setTimeout(() => { |
|||
uni.showToast({ |
|||
title: res.data.msg, |
|||
icon: 'none' |
|||
}) |
|||
reject(null) |
|||
}, 0) |
|||
if (res.data.code === 401) { |
|||
store.commit('changeLoginPath') |
|||
} |
|||
} |
|||
}, |
|||
fail: (err) => { |
|||
console.log('err', err); |
|||
fail: err => { |
|||
console.log('err', err) |
|||
uni.hideLoading() |
|||
handleError(err, reject); |
|||
setTimeout(() => { |
|||
uni.showToast({ |
|||
title: err.msg || err.data.msg, |
|||
icon: 'none' |
|||
}) |
|||
}, 0) |
|||
if (err.data.code === 401) { |
|||
store.commit('changeLoginPath') |
|||
} |
|||
reject(err) |
|||
} |
|||
}) |
|||
}) |
|||
} |
|||
}); |
|||
}); |
|||
}; |
|||
|
|||
export default NEWAPIURL; |
|||
|
|||
export default NEWAPIURL |
|||
|
|||
Loading…
Reference in new issue