jiazhipeng
5 months ago
10 changed files with 3906 additions and 10 deletions
File diff suppressed because it is too large
@ -0,0 +1,903 @@ |
|||
<template> |
|||
<view class="bg" v-if="info"> |
|||
<view class="address box" @click="changeAddressPopup('open', '', key)" v-if="!contacts && info[0].is_post == 1"> |
|||
<image src="https://kunshan.xmainc.com/uploads/20230105/870e4ce1d5a661986d8a54e9f3c2b0b3.png" mode="aspectFill"></image> |
|||
<view class="text">添加邮寄地址</view> |
|||
</view> |
|||
<view class="contacts box" v-if="contacts && info[0].is_post == 1"> |
|||
<view class="contacts-left"> |
|||
<view class="name-phone"> |
|||
<view class="name">{{ contacts.name }}</view> |
|||
<view class="phone">{{ contacts.tel }}</view> |
|||
</view> |
|||
<view class="adds text-overflowRows">{{ contacts.province_text + contacts.city_text + contacts.district_text + contacts.detail_addr }}</view> |
|||
</view> |
|||
<image @click="changeAddressPopup('open', '', key)" src="https://kunshan.xmainc.com/uploads/20230105/327cfda2cc308fc01e34f40498dbe9b6.png" mode="aspectFill"></image> |
|||
</view> |
|||
<view class="commodity box"> |
|||
<view class="merchant-name"> |
|||
{{info[0].merchant_name}} |
|||
</view> |
|||
<view style="margin-top: 20rpx;" class="" v-for="(item,index) in info" :key="item.id"> |
|||
<view class="goods"> |
|||
<image class="img" :src="showImg(item.goods_image)" mode=""></image> |
|||
<view class="" style="display: flex;flex-direction: column;justify-content: space-between;"> |
|||
<view class=""> |
|||
{{item.good_name}} |
|||
</view> |
|||
<view> |
|||
<span class="info-tags" v-for="(itemT,indexT) in item.goods_new_tag.split(',').splice(0,2)" :key="indexT">{{itemT}}</span> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="sku-info"> |
|||
<view class="title"> |
|||
<view class="text-overflowRows" style="font-size: 31rpx;font-weight: 500;color: #000;">{{ item.Specifications_name }}</view> |
|||
<view class="price-list"> |
|||
<view class="price-r">{{ item.Specifications_money / 100 }}</view> |
|||
<!-- <view class="price-g">¥{{ info.skuInfo.price / 100 }}</view> --> |
|||
</view> |
|||
</view> |
|||
<view class="num-box"> |
|||
<view class="ctrl" @click="reduce(item)">-</view> |
|||
<view class="num">{{item.num}}</view> |
|||
<!-- <input class="num" :disabled="true" type="text" v-model="item.num" @input="rge($event)" @blur="setV()" /> --> |
|||
<view class="ctrl" @click="plus(item)">+</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="person-info box" v-if="info[0].is_post == 0 && info[0].is_card == 1"> |
|||
<view class="person-title">购买信息</view> |
|||
<view class="p_name line flex"> |
|||
<view class="left">用户姓名：</view> |
|||
<input class="input" type="text" placeholder="请输入姓名" v-model="reserve_name" /> |
|||
</view> |
|||
<view class="p_id line flex"> |
|||
<view class="left">身份证号：</view> |
|||
<input class="input" type="text" placeholder="请输入身份证号" v-model="reserve_idcard" /> |
|||
</view> |
|||
<view class="p_tel flex"> |
|||
<view class="left">手机号码：</view> |
|||
<input class="input" type="text" placeholder="接受预定信息的号码" v-model="reserve_phone" /> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 优惠 --> |
|||
<view class="youhui"> |
|||
<view class="" style="font-size: 32rpx;font-weight: bold;color: #000;">优惠</view> |
|||
<view class="youhui-price"> |
|||
<view class="" style="color: #4D526C;font-weight: 500;"> |
|||
活动促销： |
|||
</view> |
|||
<view class="" style="color: #FC5109;font-weight: bold;"> |
|||
-￥{{delPrice}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- <view class="remark"> |
|||
<view class="">备注:</view> |
|||
<input type="text" placeholder="订单备注" v-model="remark" maxlength="50"/> |
|||
</view> --> |
|||
<!-- <view class="" style="font-size: 24rpx;font-weight: 500;color: #FC5109;margin-left: 26.7rpx;margin-top: 27.33rpx;"> |
|||
*温馨提示：本商品不支持退换货 |
|||
</view> --> |
|||
<view class="btn-list"> |
|||
<view class="price-box"> |
|||
<view class="text">合计:</view> |
|||
<view class="price">{{ (allPrice + post)/100}}</view> |
|||
<!-- <view class="price">{{ getAllPrice() - disPrice + (post / 100) }}</view> --> |
|||
<view class="post" v-if="post">含邮费:¥{{ post / 100 }}</view> |
|||
</view> |
|||
<view class="btn" @click="order()">立即购买</view> |
|||
</view> |
|||
|
|||
<!-- 选择收货地址弹窗 --> |
|||
<uni-popup ref="addressPopup" type="bottom" backgroundColor="#F4F4F4"> |
|||
<view class="people-popup"> |
|||
<view class="top-box"> |
|||
<view class="top flex-between"> |
|||
<text class="text-overflow" @click="changeAddressPopup('close')">取消</text> |
|||
<text class="confirm" @click="changeAddressPopup('close', 'confirm')">确定</text> |
|||
</view> |
|||
</view> |
|||
<navigator url="/subPackages/user/myAddressAdd" class="button">添加收货地址</navigator> |
|||
<view class="popup-list" v-if="addressList.length > 0"> |
|||
<view class="popup-item" v-for="(item, index) in addressList" :key="index" @click="seldThisAddress(item)"> |
|||
<view class="item-top flex-between"> |
|||
<view> |
|||
<view class="name flex-start"> |
|||
{{ item.name }} |
|||
<text>{{ item.tel }}</text> |
|||
<text class="tag" v-if="item.is_default == 1">默认</text> |
|||
</view> |
|||
<view class="subtitle">{{ item.address }}</view> |
|||
</view> |
|||
<navigator :url="`/subPackages/user/myAddressAdd?id=${item.id}`"> |
|||
<img src="https://static.ticket.sz-trip.com/taizhou/images/detail/edit.png" alt="" /> |
|||
</navigator> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</uni-popup> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
contacts: null, |
|||
info: null, |
|||
num: 1, |
|||
post: 0, |
|||
flag: true, |
|||
addressList: [], |
|||
reserve_name: '', |
|||
reserve_idcard: '', |
|||
reserve_phone: '', |
|||
remark: '', |
|||
allPrice: 0, // 折扣后总价 |
|||
discounts:null, |
|||
disPrice: {}, // 折扣对象 |
|||
delPrice:0 |
|||
// disPrice: 0 |
|||
}; |
|||
}, |
|||
onLoad() { |
|||
this.info = this.$store.state.user.sshoppingCart |
|||
console.log('info',this.info); |
|||
|
|||
this.info.forEach(item => { |
|||
this.getDiscount(item) |
|||
}) |
|||
if (!this.info) { |
|||
uni.navigateBack(); |
|||
} |
|||
console.log('----***info***------',this.info); |
|||
}, |
|||
onShow() { |
|||
this.getContacts(); |
|||
this.getAllAddressList(); |
|||
// this.getAllPrice() |
|||
// this.getTotal() |
|||
}, |
|||
methods: { |
|||
// 获取总价 |
|||
getAllPrice() { |
|||
this.info.forEach(item => { |
|||
if ((item.Specifications_money * item.num) - (this.disPrice[item.specifications_id]*100) <= 0) { |
|||
item.price1 = this.disPrice[item.specifications_id] |
|||
item.price = 0 |
|||
} else{ |
|||
item.price1 = this.disPrice[item.specifications_id] |
|||
let price = (item.Specifications_money * item.num) - (this.disPrice[item.specifications_id]*100) |
|||
item.price = +price.toFixed(2) |
|||
} |
|||
}) |
|||
let allPrice = 0 |
|||
let delPrice = 0 |
|||
this.info.forEach(item => { |
|||
delPrice += item.price1 |
|||
allPrice += item.price |
|||
}) |
|||
this.delPrice = delPrice |
|||
console.log('delPrice',this.delPrice); |
|||
this.allPrice = allPrice |
|||
}, |
|||
|
|||
getContacts() { |
|||
if (this.info[0].is_post == 0) { |
|||
return; |
|||
} |
|||
this.Post({}, '/api/user/getDefaultConsignee').then(res => { |
|||
if (res) { |
|||
this.contacts = res.data; |
|||
this.getPost(); |
|||
} |
|||
}); |
|||
}, |
|||
getPost() { |
|||
if (this.info[0].is_post == 0) { |
|||
return; |
|||
} |
|||
console.log(this.info); |
|||
this.flag = false; |
|||
let data = this.info.map((item) => { |
|||
return { specifications_id:item.specifications_id, num: item.num, consignee_id: this.contacts.id } |
|||
}) |
|||
// let data = [{ specifications_id: this.info.skuInfo.id, num: this.num, consignee_id: this.contacts.id }]; |
|||
console.log(data); |
|||
this.Post({ data:JSON.stringify(data)}, '/api/order/getNewPost').then(res => { |
|||
if (res) { |
|||
this.post = 0 |
|||
res.data.forEach((item)=> { |
|||
this.post += item.post_money |
|||
}) |
|||
this.flag = true; |
|||
} |
|||
}); |
|||
}, |
|||
rge(val) { |
|||
this.$nextTick(() => { |
|||
this.num = val.detail.value.replace(/^(0+)|[^\d]+/g, ''); |
|||
}); |
|||
}, |
|||
setV() { |
|||
if (!this.num) { |
|||
this.$nextTick(() => { |
|||
this.num = 1; |
|||
if (this.flag) { |
|||
this.getPost(); |
|||
} |
|||
}); |
|||
} else { |
|||
if (this.flag) { |
|||
this.getPost(); |
|||
} |
|||
} |
|||
}, |
|||
plus(item) { |
|||
// this.num = Number(this.num); |
|||
this.$nextTick(() => { |
|||
item.num += 1; |
|||
this.getDiscount(item) |
|||
// this.disPrice = this.calculateTotalPrice(this.discounts,this.num) |
|||
// console.log(this.disPrice); |
|||
if (this.flag) { |
|||
this.getPost(); |
|||
} |
|||
}); |
|||
}, |
|||
reduce(item) { |
|||
if (item.num > 1) { |
|||
this.$nextTick(() => { |
|||
item.num -= 1; |
|||
this.getDiscount(item) |
|||
// this.disPrice = this.calculateTotalPrice(item.discounts,item.num) |
|||
console.log(this.disPrice); |
|||
if (this.flag) { |
|||
this.getPost(); |
|||
} |
|||
}); |
|||
} |
|||
// this.num = Number(this.num); |
|||
// if (this.num > 1) { |
|||
// this.$nextTick(() => { |
|||
// this.num -= 1; |
|||
// this.disPrice = this.calculateTotalPrice(this.discounts,this.num) |
|||
// console.log(this.disPrice); |
|||
// if (this.flag) { |
|||
// this.getPost(); |
|||
// } |
|||
// }); |
|||
// } |
|||
}, |
|||
//获取数量折扣 |
|||
getDiscount(item) { |
|||
this.Post({ specifications_id: item.specifications_id }, '/api/goods/getSpeNumDiscount').then(res => { |
|||
this.discounts = res.data.discount_rule; |
|||
if (this.discounts) { |
|||
let disPrice_item = this.calculateTotalPrice(this.discounts,item.num) |
|||
this.disPrice[item.specifications_id] = +disPrice_item |
|||
} else { |
|||
this.disPrice[item.specifications_id] = 0 |
|||
} |
|||
this.getAllPrice() |
|||
}); |
|||
}, |
|||
//计算折扣价 |
|||
calculateTotalPrice(discounts, selectedQuantity) { |
|||
if (discounts) { |
|||
let totalPrice = 0; |
|||
for (const discount of discounts) { |
|||
if (selectedQuantity >= discount.num) { |
|||
totalPrice = discount.money; |
|||
} |
|||
} |
|||
return totalPrice; |
|||
} else { |
|||
return 0; |
|||
} |
|||
}, |
|||
// 选择收货地址弹窗 |
|||
changeAddressPopup(type, confirm, index) { |
|||
if (type == 'open') { |
|||
this.$refs.addressPopup.open('bottom'); |
|||
} |
|||
else this.$refs.addressPopup.close(); |
|||
this.$forceUpdate(); |
|||
}, |
|||
// 获取收货地址列表 |
|||
getAllAddressList() { |
|||
this.Post({}, '/api/user/consigneeList').then(res => { |
|||
if (res.code === 200) this.addressList = res.data; |
|||
}); |
|||
}, |
|||
// 选择收货地址 |
|||
seldThisAddress(item) { |
|||
if (!this.contacts) this.contacts = {}; |
|||
Object.assign(this.contacts, item); |
|||
if (this.flag) { |
|||
this.getPost(); |
|||
} |
|||
this.$refs.addressPopup.close(); |
|||
this.$forceUpdate(); |
|||
}, |
|||
// 预定 |
|||
order() { |
|||
if (this.info[0].is_post == 1 && !this.contacts) { |
|||
uni.showToast({ |
|||
title: '请选择收货地址', |
|||
icon: 'none' |
|||
}); |
|||
return; |
|||
} |
|||
if (this.info[0].is_post == 0 && this.info[0].is_card == 1) { |
|||
if (!this.reserve_name) { |
|||
uni.showToast({ |
|||
title: '请输入姓名', |
|||
icon: 'none' |
|||
}); |
|||
return; |
|||
} |
|||
if (!this.reserve_phone) { |
|||
uni.showToast({ |
|||
title: '请输入电话', |
|||
icon: 'none' |
|||
}); |
|||
return; |
|||
} |
|||
if (!this.reserve_idcard) { |
|||
uni.showToast({ |
|||
title: '请输入身份证', |
|||
icon: 'none' |
|||
}); |
|||
return; |
|||
} |
|||
} |
|||
// let goods = []; |
|||
let goods = this.info.map((item) => { |
|||
return { specifications_id:item.specifications_id, num: item.num, consignee_id: item.is_post == 1 ? this.contacts.id : null } |
|||
}) |
|||
// let goodsItem = { |
|||
// specifications_id: this.info.skuInfo.id, |
|||
// num: this.num, |
|||
// consignee_id: this.info.skuInfo.is_post == 1 ? this.contacts.id : null |
|||
// }; |
|||
// goods.push(goodsItem); |
|||
let data = { |
|||
goods: goods, |
|||
coupon: null, |
|||
remark: this.remark, |
|||
is_post: this.info[0].is_post, |
|||
reserve_name: this.reserve_name, |
|||
reserve_phone: this.reserve_phone, |
|||
reserve_idcard: this.reserve_idcard |
|||
}; |
|||
this.Post( |
|||
{ |
|||
method: 'POST', |
|||
data: JSON.stringify(data) |
|||
}, |
|||
'/api/order/place' |
|||
).then(resT => { |
|||
if (resT.code == 200) { |
|||
this.Post( |
|||
{ |
|||
order_id: resT.data.order_id, |
|||
type: "miniprogram", |
|||
// #ifdef MP-WEIXIN |
|||
platform: 'miniprogram', |
|||
// #endif |
|||
// #ifdef H5 |
|||
platform: 'JSAPI', |
|||
// #endif |
|||
}, |
|||
'/api/pay/unify' |
|||
).then(res => { |
|||
if (res.data) { |
|||
// #ifdef MP-WEIXIN |
|||
uni.requestPayment({ |
|||
nonceStr: res.data.nonceStr, |
|||
package: res.data.package, |
|||
paySign: res.data.paySign, |
|||
signType: res.data.signType, |
|||
timeStamp: res.data.timeStamp, |
|||
complete() { |
|||
|
|||
}, |
|||
success(){ |
|||
uni.showLoading({ |
|||
title:'加载中...' |
|||
}) |
|||
setTimeout(()=>{ |
|||
uni.hideLoading() |
|||
uni.navigateTo({ |
|||
url: '/subPackages/order/detail?id='+resT.data.order_id |
|||
}); |
|||
},2000) |
|||
} |
|||
}); |
|||
// #endif |
|||
// #ifdef H5 |
|||
WeixinJSBridge.invoke('getBrandWCPayRequest', { |
|||
appId: res.data.appId, |
|||
timeStamp: res.data.timeStamp, |
|||
nonceStr: res.data.nonceStr, |
|||
package: res.data.package, |
|||
signType: res.data.signType, |
|||
paySign: res.data.paySign |
|||
}, function(Twores) { |
|||
if (Twores.err_msg === 'get_brand_wcpay_request:ok') { |
|||
uni.showLoading({ |
|||
title:'加载中...' |
|||
}) |
|||
setTimeout(()=>{ |
|||
uni.hideLoading() |
|||
uni.navigateTo({ |
|||
url: '/subPackages/order/detail?id='+resT.data.order_id |
|||
}); |
|||
},2000) |
|||
} else { |
|||
|
|||
} |
|||
}); |
|||
// #endif |
|||
} |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.bg { |
|||
min-height: 100vh; |
|||
overflow-x: hidden; |
|||
background: #f2f4f7; |
|||
padding-bottom: 200rpx; |
|||
} |
|||
view { |
|||
box-sizing: border-box; |
|||
} |
|||
.box { |
|||
width: 710rpx; |
|||
min-height: 100rpx; |
|||
padding: 30rpx; |
|||
background: #ffffff; |
|||
border-radius: 16rpx; |
|||
margin: 0 auto; |
|||
margin-top: 20rpx; |
|||
} |
|||
.address { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
image { |
|||
width: 32rpx; |
|||
height: 32rpx; |
|||
} |
|||
.text { |
|||
font-size: 28rpx; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: #6c7a94; |
|||
margin-left: 18rpx; |
|||
} |
|||
} |
|||
.commodity { |
|||
// display: flex; |
|||
// align-items: center; |
|||
.img { |
|||
width: 140rpx; |
|||
height: 140rpx; |
|||
background: #f2f4f7; |
|||
border-radius: 10rpx; |
|||
margin-right: 18rpx; |
|||
} |
|||
.title { |
|||
width: 300rpx; |
|||
margin-left: 20rpx; |
|||
font-size: 30rpx; |
|||
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: 500; |
|||
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: 200rpx; |
|||
justify-content: space-between; |
|||
.num { |
|||
text-align: center; |
|||
width: 50rpx; |
|||
} |
|||
.ctrl { |
|||
width: 70rpx; |
|||
height: 60rpx; |
|||
line-height: 60rpx; |
|||
text-align: center; |
|||
font-weight: bold; |
|||
font-size: 36rpx; |
|||
} |
|||
} |
|||
} |
|||
.btn-list { |
|||
width: 750rpx; |
|||
height: 166rpx; |
|||
background: #ffffff; |
|||
box-shadow: 0rpx -3rpx 9rpx 1rpx rgba(227, 229, 232, 0.5); |
|||
display: flex; |
|||
position: fixed; |
|||
bottom: 0; |
|||
padding: 20rpx 50rpx; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
.btn { |
|||
width: 250rpx; |
|||
height: 80rpx; |
|||
background: linear-gradient(270deg, #fc5109 0%, #fdc43a 100%); |
|||
border-radius: 44rpx; |
|||
text-align: center; |
|||
line-height: 80rpx; |
|||
font-size: 32rpx; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
} |
|||
.price-box { |
|||
display: flex; |
|||
align-items: center; |
|||
.text { |
|||
font-size: 28rpx; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: #393b3e; |
|||
} |
|||
.price { |
|||
margin-left: 15rpx; |
|||
font-size: 48rpx; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: #fc5109; |
|||
&:before { |
|||
content: '¥'; |
|||
display: inline-block; |
|||
color: #fc5109; |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
.post { |
|||
margin-left: 15rpx; |
|||
color: #fc5109; |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
} |
|||
.contacts { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
image { |
|||
width: 31rpx; |
|||
height: 36rpx; |
|||
} |
|||
.contacts-left { |
|||
.name-phone { |
|||
display: flex; |
|||
align-items: center; |
|||
.name { |
|||
font-size: 32rpx; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #222222; |
|||
} |
|||
.phone { |
|||
margin-left: 27rpx; |
|||
font-size: 28rpx; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: #303030; |
|||
} |
|||
} |
|||
.adds { |
|||
font-size: 28rpx; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: #6c7a94; |
|||
margin-top: 20rpx; |
|||
max-width: 500rpx; |
|||
} |
|||
} |
|||
} |
|||
.people-popup { |
|||
padding: 26rpx; |
|||
min-height: 800rpx; |
|||
|
|||
.top-box { |
|||
height: 80rpx; |
|||
|
|||
.top { |
|||
position: fixed; |
|||
left: 0; |
|||
right: 0; |
|||
color: #000; |
|||
height: 80rpx; |
|||
font-size: 0; |
|||
overflow: hidden; |
|||
padding: 0 26rpx; |
|||
|
|||
text { |
|||
text-align: left; |
|||
font-size: 30rpx; |
|||
font-weight: 400; |
|||
color: #000000; |
|||
} |
|||
|
|||
.confirm { |
|||
font-weight: 400; |
|||
color: #000000; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.popup-list { |
|||
height: 666rpx; |
|||
overflow: scroll; |
|||
|
|||
.popup-item { |
|||
border-radius: 12rpx; |
|||
padding: 0 20rpx; |
|||
margin-top: 24rpx; |
|||
font-size: 24rpx; |
|||
color: #333333; |
|||
font-weight: 400; |
|||
background-color: #ffffff; |
|||
|
|||
.item-top { |
|||
padding: 32rpx; |
|||
|
|||
img { |
|||
color: #666666; |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
} |
|||
|
|||
.name { |
|||
font-size: 30rpx; |
|||
color: #000000; |
|||
overflow: hidden; |
|||
|
|||
text { |
|||
color: #999999; |
|||
} |
|||
|
|||
.tag { |
|||
width: 70rpx; |
|||
height: 32rpx; |
|||
background: #00d7ed; |
|||
border-radius: 7rpx; |
|||
line-height: 32rpx; |
|||
text-align: center; |
|||
font-size: 21rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
} |
|||
} |
|||
|
|||
.com-flex-start { |
|||
margin: 0 0 30rpx; |
|||
} |
|||
|
|||
.subtitle { |
|||
font-weight: 400; |
|||
flex: 1; |
|||
text-align: left; |
|||
margin-top: 33rpx; |
|||
|
|||
.mobile { |
|||
margin-bottom: 36rpx; |
|||
} |
|||
} |
|||
|
|||
.status { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
line-height: 40rpx; |
|||
border-radius: 50%; |
|||
text-align: center; |
|||
box-sizing: border-box; |
|||
|
|||
img { |
|||
width: 27rpx; |
|||
height: 21rpx; |
|||
} |
|||
} |
|||
.statuss { |
|||
background: linear-gradient(90deg, #fa2b66, #ff9834); |
|||
border: none; |
|||
} |
|||
.noSelect { |
|||
border: 1rpx solid #999999; |
|||
} |
|||
} |
|||
|
|||
// .item-site { |
|||
// color: #666666; |
|||
// display: flex; |
|||
// align-items: center; |
|||
// padding: 36rpx 0; |
|||
|
|||
// view { |
|||
// width: 23rpx; |
|||
// height: 23rpx; |
|||
// margin-right: 10rpx; |
|||
// border: 1rpx solid #999999; |
|||
// border-radius: 50%; |
|||
|
|||
// view { |
|||
// width: 8rpx; |
|||
// height: 8rpx; |
|||
// background: #000000; |
|||
// border-radius: 50%; |
|||
// margin: auto; |
|||
// } |
|||
// } |
|||
// } |
|||
} |
|||
} |
|||
|
|||
.button { |
|||
font-size: 30rpx; |
|||
font-weight: 400; |
|||
color: #000000; |
|||
text-align: center; |
|||
width: 100%; |
|||
height: 80rpx; |
|||
line-height: 80rpx; |
|||
background-color: #ffffff; |
|||
border-radius: 60rpx; |
|||
} |
|||
} |
|||
|
|||
.person-info { |
|||
padding: 30rpx 30rpx 15rpx 30rpx; |
|||
background: #fff; |
|||
margin-top: 30rpx; |
|||
border-radius: 16rpx; |
|||
} |
|||
.person-title { |
|||
font-size: 32rpx; |
|||
font-weight: bold; |
|||
color: #000; |
|||
} |
|||
.line { |
|||
border-bottom: 1px solid #e3e5e8; |
|||
} |
|||
.flex { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
.left { |
|||
width: 140rpx; |
|||
font-size: 28rpx; |
|||
font-weight: 500; |
|||
color: #4d526c; |
|||
height: 104rpx; |
|||
line-height: 104rpx; |
|||
} |
|||
.input { |
|||
font-size: 28rpx; |
|||
font-weight: 400; |
|||
} |
|||
.remark { |
|||
padding: 30rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
width: 710rpx; |
|||
min-height: 150rpx; |
|||
background: #ffffff; |
|||
border-radius: 16rpx; |
|||
margin: 0 auto; |
|||
margin-top: 30rpx; |
|||
view { |
|||
color: #4d526c; |
|||
font-size: 28rpx; |
|||
} |
|||
input { |
|||
margin-left: 64rpx; |
|||
width: 500rpx; |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
|
|||
.info-tags { |
|||
padding: 8rpx 7rpx; |
|||
text-align: center; |
|||
line-height: 35rpx; |
|||
font-size: 20rpx; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.info-tags:first-child { |
|||
background: rgba(252,81,9,.08); |
|||
color: #FC5109; |
|||
} |
|||
|
|||
.info-tags:last-child { |
|||
background: rgba(73,143,239,.1); |
|||
color: #498FEF; |
|||
} |
|||
|
|||
.merchant-name { |
|||
margin-bottom: 24rpx; |
|||
} |
|||
|
|||
.goods { |
|||
display: flex; |
|||
} |
|||
|
|||
.sku-info { |
|||
display: flex; |
|||
margin-top: 26rpx; |
|||
align-items: baseline; |
|||
justify-content: space-between; |
|||
border-bottom: 1rpx solid #ccc; |
|||
padding-bottom: 25.3rpx; |
|||
} |
|||
|
|||
.sku-info:last-child { |
|||
border:none !important; |
|||
} |
|||
|
|||
.youhui { |
|||
width: 710rpx; |
|||
margin: 0 auto; |
|||
margin-top: 22rpx; |
|||
padding: 32.67rpx 19.33rpx 32.67rpx 24rpx; |
|||
background: #FFFFFF; |
|||
border-radius: 13rpx; |
|||
} |
|||
|
|||
.youhui-price { |
|||
margin-top: 52.67rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
margin-left: .67rpx; |
|||
font-size: 27rpx; |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,19 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
|
|||
</style> |
|||
@ -0,0 +1,556 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<view class="guanli" v-if="list && list.length>0" @click="guanli">{{operate}}</view> |
|||
<view v-for="(item,index) in list" :key="index"> |
|||
<view class="goodBox" v-if="item.data && item.data.length > 0 "> |
|||
<view class="title" v-if="item.data.some(v => v.flag === 1)">{{item.merchant_name}} ></view> |
|||
<view class="goodItem" v-for="(goodItem,goodIndex) in item.data" :key="goodIndex" |
|||
v-if="goodItem.flag != 0"> |
|||
<view class="noSelect" v-if="!goodItem.is_select" @click="changeSelect(goodItem)"></view> |
|||
<view class="selectBox flex-around" v-else @click="changeSelect(goodItem)"> |
|||
<img src="https://static.ticket.sz-trip.com/cgc/images/order/dui.png"> |
|||
</view> |
|||
<image :src="showImg(goodItem.Specifications_image)" mode="aspectFill" |
|||
@click="goDetails(goodItem.good_id)"></image> |
|||
<view class="contentBox"> |
|||
<view class="title text-overflow">{{goodItem.good_name}}</view> |
|||
<view class="subTitle text-overflow">{{goodItem.Specifications_name}}</view> |
|||
<view class="priceBox flex-between"> |
|||
<view class="price">{{showPrice(goodItem.Specifications_money)}}</view> |
|||
<view class="flex-between" style="width: 165rpx;font-size: 29rpx;"> |
|||
<view :class="['jian', goodItem.num == 1 ? 'zhihui' : '']" @click="delNum(goodItem)">- |
|||
</view> |
|||
<view>{{goodItem.num}}</view> |
|||
<view class="jia" @click="addNum(goodItem)">+</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="loseGood" v-if="loseList && loseList.length>0"> |
|||
<view class="title flex-between">失效商品<span @click="delLoseGood('',1)">清空失效商品</span></view> |
|||
<view class="goodItem" v-for="(goodItem,goodIndex) in loseList" :key="goodIndex"> |
|||
<view class="noSelect"></view> |
|||
<image :src="showImg(goodItem.Specifications_image)" mode="aspectFill"></image> |
|||
<view class="contentBox"> |
|||
<view class="title text-overflow">{{goodItem.good_name}}</view> |
|||
<view class="subTitle text-overflow">{{goodItem.Specifications_name}}</view> |
|||
<view class="priceBox flex-between"> |
|||
<view class="price">{{showPrice(goodItem.Specifications_money)}}</view> |
|||
<view class="btn" @click="delLoseGood(goodItem.id,0)">删除</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 预定按钮 --> |
|||
<view class="orderBox flex-between"> |
|||
<view class="priceBox"> |
|||
<view class="selectBox flex-around" v-if="allSelect" @click="changeAllSelect"> |
|||
<img src="https://static.ticket.sz-trip.com/cgc/images/order/dui.png" alt=""> |
|||
</view> |
|||
<view class="noSelect" v-else @click="changeAllSelect"></view>全选 |
|||
<span v-if="operate == '管理'">在线付:</span> |
|||
<p v-if="operate == '管理'">￥{{getAllPrice()}}</p> |
|||
</view> |
|||
<view class="btn" @click="order" v-if="operate == '管理'">提交订单</view> |
|||
<view class="btn" @click="delGood" v-else>删除</view> |
|||
</view> |
|||
|
|||
<view class="noProduct" v-if="list.length == 0 && loseList.length == 0"> |
|||
暂无商品 |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
operate: '管理', |
|||
list: [], |
|||
loseList: [], |
|||
allSelect: false, |
|||
} |
|||
}, |
|||
onShow() { |
|||
this.getShoppingList() |
|||
this.allSelect = false |
|||
}, |
|||
methods: { |
|||
getShoppingList() { |
|||
this.Post({ |
|||
is_post: 2, |
|||
lon: this.$store.state.user.location.lon || '120.63132', |
|||
lat: this.$store.state.user.location.lat || '31.30227' |
|||
}, '/api/shopping/getShoppingList').then(res => { |
|||
this.list = res.data |
|||
this.loseList = [] |
|||
this.list.forEach(item => { |
|||
item.data.forEach(items => { |
|||
if (items.flag === 0) { |
|||
this.loseList.push(items) |
|||
} |
|||
|
|||
}) |
|||
}) |
|||
console.log('打印', this.loseList); |
|||
}) |
|||
}, |
|||
// 管理 |
|||
guanli() { |
|||
if (this.operate == '管理') { |
|||
this.operate = '退出管理' |
|||
} else { |
|||
this.operate = '管理' |
|||
} |
|||
console.log(this.operate) |
|||
}, |
|||
delNum(item) { |
|||
if (item.num <= 1) { |
|||
item.num = 1 |
|||
uni.showToast({ |
|||
title: '已经最少了，不能再减了', |
|||
icon: 'none' |
|||
}) |
|||
} else { |
|||
item.num -= 1 |
|||
this.updateCart(item) |
|||
} |
|||
}, |
|||
addNum(item) { |
|||
item.num += 1 |
|||
this.updateCart(item) |
|||
}, |
|||
updateCart(item) { |
|||
let that = this |
|||
that.Post({ |
|||
s_id: item.id, |
|||
num: item.num |
|||
}, '/api/shopping/updateShopping').then(function(res) { |
|||
if (res) { |
|||
// that.$toast.clear() |
|||
} |
|||
}) |
|||
}, |
|||
// 更改选中状态 |
|||
changeSelect(item) { |
|||
item.is_select = !item.is_select |
|||
this.list.forEach(item => { |
|||
let checkAll = item.data.findIndex(items => { |
|||
return !items.is_select |
|||
}) |
|||
if (checkAll == -1) { |
|||
this.allSelect = true |
|||
} else { |
|||
this.allSelect = false |
|||
} |
|||
}) |
|||
this.$forceUpdate() |
|||
}, |
|||
// 去商品详情 |
|||
goDetails(id) { |
|||
uni.navigateTo({ |
|||
url: '/subPackages/goods/goodsInfo?id=' + id |
|||
}); |
|||
}, |
|||
// 改变所有选中 |
|||
changeAllSelect() { |
|||
this.allSelect = !this.allSelect |
|||
this.list.forEach(item => { |
|||
item.data.forEach(items => { |
|||
if (this.allSelect) items.is_select = true |
|||
else items.is_select = false |
|||
}) |
|||
}) |
|||
}, |
|||
// 删除失效商品 |
|||
delLoseGood(id, index) { |
|||
if (index == 0) { |
|||
this.Post({ |
|||
s_id: id |
|||
}, '/api/shopping/delShopping').then(res => { |
|||
this.getShoppingList() |
|||
this.$forceUpdate() |
|||
}) |
|||
} else { |
|||
let ids = [] |
|||
this.loseList.forEach(item => { |
|||
ids.push(item.id) |
|||
}) |
|||
this.Post({ |
|||
s_id: ids.toString() |
|||
}, '/api/shopping/delShopping').then(res => { |
|||
this.getShoppingList() |
|||
this.$forceUpdate() |
|||
}) |
|||
} |
|||
}, |
|||
// 删除商品 |
|||
delGood() { |
|||
let ids = [] |
|||
this.list.forEach(item => { |
|||
item.data.forEach(items => { |
|||
if (items.is_select == true) { |
|||
ids.push(items.id) |
|||
} |
|||
}) |
|||
}) |
|||
this.Post({ |
|||
s_id: ids.toString() |
|||
}, '/api/shopping/delShopping').then(res => { |
|||
this.getShoppingList() |
|||
this.$forceUpdate() |
|||
}) |
|||
}, |
|||
// 获取总价 |
|||
getAllPrice() { |
|||
let allPrice = 0 |
|||
this.list.forEach(item => { |
|||
item.data.forEach(items => { |
|||
if (items.is_select == true) { |
|||
allPrice += items.Specifications_money * items.num |
|||
} |
|||
}) |
|||
}) |
|||
return (allPrice / 100).toFixed(2) |
|||
}, |
|||
// 结算 |
|||
order() { |
|||
let list = [] |
|||
let ids = [] |
|||
this.list.forEach(item => { |
|||
item.data.forEach((items, index) => { |
|||
if (items.is_select == true) { |
|||
ids.push(items.merchant_id) |
|||
list.push(items) |
|||
} |
|||
}) |
|||
}) |
|||
if (Array.from(new Set(ids)).length > 1) { |
|||
uni.showToast({ |
|||
title: '请选择同一商户下的商品', |
|||
icon: 'none' |
|||
}) |
|||
return; |
|||
} |
|||
if (list.length == 0) { |
|||
uni.showToast({ |
|||
title: '请选择商品', |
|||
icon: 'none' |
|||
}) |
|||
return; |
|||
} |
|||
console.log('list参数', list); |
|||
this.$store.commit("changeOrderSCart", list) |
|||
// this.gotoPath('/subPackages/order/eCartOrder') |
|||
this.gotoPath('/subPackages/order/gwcOrder') |
|||
// this.gotoPath('/subPackages/goods/goodsOrder') |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.bg { |
|||
width: 100%; |
|||
min-height: 100vh; |
|||
padding: 0 27rpx 200rpx; |
|||
box-sizing: border-box; |
|||
background-color: #F8F8F8; |
|||
} |
|||
|
|||
.guanli { |
|||
height: 76rpx; |
|||
text-align: right; |
|||
font-size: 32rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
color: #000000; |
|||
line-height: 76rpx; |
|||
} |
|||
|
|||
.goodBox { |
|||
width: 697rpx; |
|||
height: auto; |
|||
background: #FFFFFF; |
|||
border-radius: 20rpx; |
|||
margin: 0 auto 27rpx; |
|||
padding: 25rpx 20rpx; |
|||
box-sizing: border-box; |
|||
|
|||
.title { |
|||
font-size: 35rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #000000; |
|||
} |
|||
|
|||
.goodItem { |
|||
width: 100%; |
|||
height: 173rpx; |
|||
margin-top: 46rpx; |
|||
display: flex; |
|||
|
|||
.noSelect { |
|||
width: 37rpx; |
|||
height: 37rpx; |
|||
border-radius: 50%; |
|||
border: 2rpx solid #666666; |
|||
box-sizing: border-box; |
|||
margin-right: 25rpx; |
|||
margin-top: 68rpx; |
|||
} |
|||
|
|||
.selectBox { |
|||
width: 37rpx; |
|||
height: 37rpx; |
|||
// background: linear-gradient(90deg, #FA2B66, #FF9834); |
|||
// border-radius: 50%; |
|||
margin-right: 25rpx; |
|||
margin-top: 68rpx; |
|||
|
|||
img { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
|
|||
image { |
|||
width: 173rpx; |
|||
height: 173rpx; |
|||
border-radius: 13rpx; |
|||
} |
|||
|
|||
.contentBox { |
|||
width: 400rpx; |
|||
height: 173rpx; |
|||
margin-left: 23rpx; |
|||
|
|||
.title { |
|||
font-size: 31rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #000000; |
|||
} |
|||
|
|||
.subTitle { |
|||
font-size: 27rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
color: #7C7C7C; |
|||
margin-top: 13rpx; |
|||
} |
|||
|
|||
.priceBox { |
|||
margin-top: 35rpx; |
|||
|
|||
.price { |
|||
font-size: 40rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #FF2D3B; |
|||
} |
|||
|
|||
.price:before { |
|||
content: "￥"; |
|||
font-size: 27rpx; |
|||
} |
|||
|
|||
.jian, |
|||
.jia { |
|||
width: 47rpx; |
|||
height: 47rpx; |
|||
background: #2791F7; |
|||
border-radius: 50%; |
|||
text-align: center; |
|||
color: #FFFFFF; |
|||
line-height: 47rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.loseGood { |
|||
width: 697rpx; |
|||
height: auto; |
|||
background: #FFFFFF; |
|||
border-radius: 20rpx; |
|||
margin: 0 auto 27rpx; |
|||
padding: 25rpx 20rpx; |
|||
box-sizing: border-box; |
|||
|
|||
.title { |
|||
font-size: 35rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #666666; |
|||
|
|||
span { |
|||
font-size: 32rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
color: #2791F7; |
|||
} |
|||
} |
|||
|
|||
.goodItem { |
|||
width: 100%; |
|||
height: 173rpx; |
|||
margin-top: 46rpx; |
|||
display: flex; |
|||
color: #999999; |
|||
|
|||
.noSelect { |
|||
width: 37rpx; |
|||
height: 37rpx; |
|||
border-radius: 50%; |
|||
border: 2rpx solid #CCCCCC; |
|||
background: #F1F1F1; |
|||
box-sizing: border-box; |
|||
margin-right: 25rpx; |
|||
margin-top: 68rpx; |
|||
} |
|||
|
|||
image { |
|||
width: 173rpx; |
|||
height: 173rpx; |
|||
border-radius: 13rpx; |
|||
margin-right: 23rpx; |
|||
} |
|||
|
|||
.contentBox { |
|||
width: 421rpx; |
|||
height: 173rpx; |
|||
|
|||
.title { |
|||
font-size: 31rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.subTitle { |
|||
font-size: 27rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
} |
|||
|
|||
.priceBox { |
|||
margin-top: 35rpx; |
|||
|
|||
.price { |
|||
font-size: 40rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.price:before { |
|||
content: "￥"; |
|||
font-size: 27rpx; |
|||
} |
|||
|
|||
.btn { |
|||
width: 125rpx; |
|||
height: 53rpx; |
|||
background: #999999; |
|||
border-radius: 13rpx; |
|||
text-align: center; |
|||
line-height: 53rpx; |
|||
font-size: 29rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #FFFFFF; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.noProduct { |
|||
width: 100%; |
|||
height: 300rpx; |
|||
text-align: center; |
|||
line-height: 300rpx; |
|||
color: #999999; |
|||
font-size: 32rpx; |
|||
} |
|||
|
|||
.orderBox { |
|||
width: 750rpx; |
|||
height: 151rpx; |
|||
background: #FFFFFF; |
|||
box-shadow: 0px 0px 16rpx 0px rgba(6, 0, 1, 0.1); |
|||
padding: 0 27rpx; |
|||
box-sizing: border-box; |
|||
position: fixed; |
|||
left: 0; |
|||
bottom: 0; |
|||
|
|||
.priceBox { |
|||
display: flex; |
|||
font-size: 27rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
color: #666666; |
|||
|
|||
span { |
|||
font-size: 27rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
color: #333333; |
|||
margin-left: 20rpx; |
|||
} |
|||
|
|||
p { |
|||
font-size: 36rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #FF2D3B; |
|||
margin-top: -5rpx; |
|||
} |
|||
|
|||
.noSelect { |
|||
width: 41rpx; |
|||
height: 41rpx; |
|||
border-radius: 50%; |
|||
border: 2rpx solid #666666; |
|||
box-sizing: border-box; |
|||
margin-right: 10rpx; |
|||
} |
|||
|
|||
.selectBox { |
|||
width: 41rpx; |
|||
height: 41rpx; |
|||
// background: linear-gradient(90deg, #FA2B66, #FF9834); |
|||
border-radius: 50%; |
|||
margin-right: 10rpx; |
|||
|
|||
img { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.btn { |
|||
width: 219rpx; |
|||
height: 77rpx; |
|||
background: #6CA5AA; |
|||
border-radius: 39rpx; |
|||
text-align: center; |
|||
line-height: 77rpx; |
|||
font-size: 33rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #FFFFFF; |
|||
} |
|||
} |
|||
|
|||
.zhihui { |
|||
background: #E8E8E8 !important; |
|||
color: #999999 !important; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,387 @@ |
|||
<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-input" 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="text-align: right;font-size: 33rpx;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"> |
|||
<view class="list-item-title">设为默认:</view> |
|||
<view class="list-item-switch"> |
|||
<switch :checked="idDefault" @change="switchChange" color="#6CA5AA"/> |
|||
</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){ |
|||
this.id = option.id |
|||
if (option.id > 0) { |
|||
this.title = '编辑收货地址' |
|||
this.getDetail() |
|||
} |
|||
else { |
|||
this.getSeldCityList() |
|||
} |
|||
}, |
|||
methods: { |
|||
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() { |
|||
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(); |
|||
} |
|||
}) |
|||
}, |
|||
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 |
|||
} |
|||
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').then(res => { |
|||
if(res.code == 1){ |
|||
uni.setStorageSync('addressNow',JSON.stringify(res.data)) |
|||
uni.showModal({ |
|||
title: '提示', |
|||
content: this.id>0?'编辑成功':'添加成功', |
|||
showCancel: false, |
|||
success: res => { |
|||
if(res.confirm){ |
|||
uni.navigateBack({}) |
|||
} |
|||
} |
|||
}) |
|||
}else{ |
|||
uni.showModal({ |
|||
title: '提示', |
|||
content: res.msg, |
|||
showCancel: false, |
|||
success: res => { |
|||
|
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.bg { |
|||
min-height: 100vh; |
|||
background-color: white; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.list-forms { |
|||
display: flex; |
|||
flex-direction: column; |
|||
border-top: 1rpx solid #D8D8D8; |
|||
padding: 20rpx 40rpx; |
|||
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: 34rpx; |
|||
font-size: 31rpx; |
|||
text-align: right; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.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: #6CA5AA; |
|||
border-radius: 37rpx; |
|||
justify-content: center; |
|||
align-items: center; |
|||
margin-top: 650rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,339 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<!-- <view class="cancat-nav flex-around"> |
|||
<view :class="['concat-nav-item',showType===0?'active':'']" @click="showType=0"> |
|||
<view>出行人信息</view> |
|||
<view v-if="showType===0" class="active-bar"></view> |
|||
</view> |
|||
<view :class="['concat-nav-item',showType===1?'active':'']" @click="showType=1"> |
|||
<view>收货地址</view> |
|||
<view v-if="showType===1" class="active-bar"></view> |
|||
</view> |
|||
</view> --> |
|||
|
|||
<!-- 出行人信息 --> |
|||
<view v-if="showType===0"> |
|||
<view class="item" v-for="(item,index) in travelList" :key="index"> |
|||
<view class="name"> |
|||
<view class=""> |
|||
{{item.name}} |
|||
</view> |
|||
<view class=""> |
|||
{{item.tel}} |
|||
<span v-if="item.is_default==1">默认</span> |
|||
</view> |
|||
</view> |
|||
<view class="idcard"> |
|||
<view class=""> |
|||
{{item.document_type_text}}: |
|||
</view> |
|||
<view class=""> |
|||
{{item.id_number}} |
|||
</view> |
|||
</view> |
|||
<view class="item-btn"> |
|||
<view class="choice"> |
|||
<!-- <image src="https://static.ticket.sz-trip.com/yandu/images/user/dui.png" mode="aspectFill" |
|||
v-if="item.is_default==1"> |
|||
</image> |
|||
<view class="yuan" v-else @click.stop="defaultC(item)"> |
|||
|
|||
</view> |
|||
<view class=""> |
|||
默认出行人 |
|||
</view> --> |
|||
</view> |
|||
<view class="btn-list"> |
|||
<view class="btn-item" @click.stop="edit(item.id)"> |
|||
修改 |
|||
</view> |
|||
<view class="btn-item" @click.stop="delet(item)"> |
|||
删除 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 收货地址 --> |
|||
<view v-else> |
|||
<view class="item" v-for="(item,index) in addressList" :key="index"> |
|||
<view class="name"> |
|||
<view> |
|||
{{item.name}} |
|||
</view> |
|||
<view class=""> |
|||
{{item.tel}} |
|||
<span v-if="item.is_default==1">默认</span> |
|||
</view> |
|||
</view> |
|||
<view class="idcard"> |
|||
<view class=""> |
|||
收货地址: |
|||
</view> |
|||
<view class="text-overflow"> |
|||
{{item.address}} |
|||
</view> |
|||
</view> |
|||
<view class="item-btn" style="justify-content: flex-end;"> |
|||
<view class="btn-list"> |
|||
<view class="btn-item" @click.stop="edit(item.id)"> |
|||
修改 |
|||
</view> |
|||
<view class="btn-item" @click.stop="delet(item)"> |
|||
删除 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="btn-box"> |
|||
<navigator :url="showType ? '/subPackages/user/myAddressAdd' : '/subPackages/user/myContactsAdd'" class="btn"> |
|||
{{showType ? '新增收货地址' : '添加联系人'}} |
|||
</navigator> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "travelerList", |
|||
data() { |
|||
return { |
|||
showType: 1, |
|||
travelList: [], |
|||
addressList: [] |
|||
}; |
|||
}, |
|||
onShow() { |
|||
this.init() |
|||
}, |
|||
methods: { |
|||
init () { |
|||
// 出行人信息 |
|||
// this.Post({}, "/api/user/contactList").then(res => { |
|||
// if (res) this.travelList = res.data |
|||
// }) |
|||
|
|||
// 收货地址 |
|||
this.Post({}, '/api/user/consigneeList').then(res => { |
|||
if(res) this.addressList = res.data |
|||
}) |
|||
}, |
|||
delet(item) { |
|||
let that = this |
|||
uni.showModal({ |
|||
title: '提示', |
|||
content: '确定要删除该出行人吗?', |
|||
success: function(res) { |
|||
if (res.confirm) { |
|||
that.Post({ |
|||
id: item.id |
|||
}, "/api/user/delDetail").then(res => { |
|||
if (res) { |
|||
uni.showToast({ |
|||
icon: "none", |
|||
title: res.msg |
|||
}) |
|||
} |
|||
that.init() |
|||
}) |
|||
} else if (res.cancel) { |
|||
console.log('用户点击取消'); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
defaultC(item) { |
|||
this.Post({ |
|||
id: item.id, |
|||
is_default: 1 |
|||
}, "/api/user/editContact").then(res => { |
|||
if (res.code == 1) { |
|||
this.travelList.forEach(i => i.is_default = 0) |
|||
item.is_default = !item.is_default |
|||
} |
|||
}) |
|||
}, |
|||
// 修改出行人信息 |
|||
edit(id){ |
|||
let url = '' |
|||
if(this.showType) { |
|||
url = '/subPackages/user/myAddressAdd?id='+id |
|||
}else { |
|||
url = "/subPackages/user/myContactsAdd?type=edit&id="+id |
|||
} |
|||
uni.navigateTo({ |
|||
url: url |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.bg { |
|||
position: relative; |
|||
background: #F7F7F7; |
|||
height: 100vh; |
|||
overflow-x: hidden; |
|||
padding-bottom: 200rpx; |
|||
} |
|||
|
|||
.cancat-nav{ |
|||
width: 100%; |
|||
display: flex; |
|||
height: 112rpx; |
|||
flex-shrink: 0; |
|||
background-color: #fff; |
|||
.concat-nav-item{ |
|||
ffont-weight: 500; |
|||
font-size: 35rpx; |
|||
color: #000000; |
|||
height: 100%; |
|||
text-align: center; |
|||
position: relative; |
|||
padding-top: 35rpx; |
|||
} |
|||
.concat-nav-item.active{ |
|||
color: #000000; |
|||
} |
|||
.active-bar{ |
|||
width: 73rpx; |
|||
height: 7rpx; |
|||
background: #515150; |
|||
border-radius: 3rpx; |
|||
margin: auto; |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
} |
|||
} |
|||
|
|||
.item { |
|||
width: 697rpx; |
|||
background: #FFFFFF; |
|||
border-radius: 13rpx; |
|||
margin: 28rpx auto 0; |
|||
padding: 26rpx; |
|||
|
|||
.name, |
|||
.idcard { |
|||
display: flex; |
|||
font-size: 31rpx; |
|||
font-weight: bold; |
|||
color: #333333; |
|||
|
|||
} |
|||
|
|||
.name { |
|||
view:last-child{ |
|||
margin-left: 40rpx; |
|||
} |
|||
|
|||
span { |
|||
padding: 3rpx 9rpx; |
|||
background: #515150; |
|||
border-radius: 7rpx; |
|||
font-weight: bold; |
|||
font-size: 24rpx; |
|||
color: #FFFFFF; |
|||
margin-left: 15rpx; |
|||
} |
|||
} |
|||
|
|||
.idcard { |
|||
margin-top: 26rpx; |
|||
|
|||
view:last-child { |
|||
margin-left: 14rpx; |
|||
font-weight: 400; |
|||
max-width: 492rpx; |
|||
|
|||
} |
|||
} |
|||
|
|||
.item-btn { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
margin-top: 40rpx; |
|||
|
|||
.choice { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
view:last-child { |
|||
margin-left: 20rpx; |
|||
|
|||
font-size: 27rpx; |
|||
|
|||
font-weight: 500; |
|||
color: #333333; |
|||
} |
|||
|
|||
image { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
} |
|||
|
|||
.yuan { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
background: rgba(255, 200, 37, 0); |
|||
border: 1rpx solid #999999; |
|||
border-radius: 20rpx; |
|||
} |
|||
} |
|||
|
|||
.btn-list { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
view { |
|||
width: 134rpx; |
|||
height: 54rpx; |
|||
background: #FFFFFF; |
|||
border: 1px solid #999999; |
|||
border-radius: 27rpx; |
|||
|
|||
|
|||
font-size: 27rpx; |
|||
font-weight: 500; |
|||
color: #333333; |
|||
line-height: 52rpx; |
|||
text-align: center; |
|||
} |
|||
|
|||
view:last-child { |
|||
margin-left: 14rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.btn-box { |
|||
position: fixed; |
|||
bottom: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 200rpx; |
|||
background-color: #fff; |
|||
|
|||
.btn { |
|||
width: 697rpx; |
|||
line-height: 80rpx; |
|||
background: #6CA5AA; |
|||
border-radius: 37rpx; |
|||
font-weight: 500; |
|||
font-size: 36rpx; |
|||
color: #fff; |
|||
text-align: center; |
|||
position: fixed; |
|||
bottom: 53rpx; |
|||
left: 26.67rpx; |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue