时味苏州
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

863 lines
16 KiB

<template>
<!-- 自提 -->
<!-- 购物车下单 解决滚动穿透 -->
<page-meta :page-style="'overflow:'+(popShow?'hidden':'visible')"></page-meta>
<view class="bg" v-if="orderList.length>0">
<view class="order-container" style="margin-bottom: 20rpx;" v-for="(info,i) in orderList" :key="i">
<!-- 自提 -->
<view >
<view class="pickself" >
<navigator :url="`/subPackages/techan/selfPickUpPoint?pickupId=null&goodsId=${info.pInfo.id}&skuId=${info.sInfo.id}`">
<view class="pickpoint">
<view class="flex-shrink-0">自提点</view>
<view class="pickpointAddress">
<view class="pointAddressText text-overflow" v-if="info.pickupAddress&&info.pickupAddress.title">
{{info.pickupAddress.title}}
</view>
<view class="pointAddressText text-overflow" v-else>选择提货地址</view>
<uni-icons style="height: 36rpx;" type="right" size="18"></uni-icons>
</view>
</view>
</navigator>
</view>
</view>
<view class="new-box" >
<view class="commodity box">
<image class="img" :src="showImg(info.sInfo.headimg)" mode="aspectFill"></image>
<view class="sku-content">
<view class="text-overflowRows">{{ info.pInfo.title }}</view>
<view class="text-overflow" style="font-size: 24rpx;color: #666666;">{{ info.sInfo.sku_name }}</view>
<view class="tag text-overflow" v-if="info.sInfo.display_tags">
<view class="tag-item" v-for="(item, index) in info.sInfo.display_tags.split(',')" :key="index">
{{ item }}
</view>
</view>
<view class="flex-between">
<view class="commodity-price">
{{info.sInfo.price/100}}
</view>
<view class="num-box">
<view :class="['ctrl',info.sInfo.buyNum>1?'':'disabled']" @click="reduce(info.sInfo)">-</view>
<input class="num" type="text" v-model="info.sInfo.buyNum" :disabled='true' />
<view :class="['ctrl']" @click="plus(info.sInfo)">+</view>
</view>
</view>
</view>
</view>
</view>
<view class="tickets-box flex-between">
<view class="remark">
<view class="remark-title" >订单备注:</view>
<input style="z-index:0;text-align: right;" type="text" placeholder="选填" v-model="info.remark" maxlength="50"/>
</view>
</view>
</view>
<view class="btn-list">
<view class="price-box">
<view class="text">合计:</view>
<view class="price">{{ total() }}</view>
</view>
<view class="btn" @click="order()">下一步</view>
</view>
</view>
</template>
<script>
import addressAddVue from '../../components/addressAdd.vue';
export default {
components: {addressAddVue},
data() {
return {
// isPost: "1", //0=核销,1=邮寄,2=自取,3=邮寄/自提
contacts: null, // 默认收货地址
contactsEdit: true,
addressList: [],
step: 2,
orderList: [],
selectInfo: null, // 选中的要修改的产品
info: null,//规格的信息
detail:null,//商品的信息
orderGoods: [],
post: 0,
flag: true,
coupon: "",
allprice: 0,
popShow: false, // 解决滚动穿透
isShoppingCart: 1,
};
},
onLoad(options) {
this.isShoppingCart = 1;
this.$store.commit("choseCoupon", "");
this.handleOrderGoods()
},
onShow() {
// 更新自提点
uni.$on("updateDataByConnect",this.getDataByConnect)
},
onUnload(){
uni.$off("updateDataByConnect",this.getDataByConnect)
},
onReady () {
},
methods: {
// 只处理邮寄/自提、自提
handleOrderGoods () {
let orderList = this.$store.state.user.techanOrderList.list2;
// orderList = uni.getStorageSync("techanOrderList").list2
console.log(orderList)
if (!Array.isArray(orderList) || orderList.length<=0) {
uni.navigateBack();
return
}
// is_post 1邮寄 2自提 默认邮寄1
orderList.forEach(v=>{
v.user_select_type = v.user_select_type; // 用户自选方式
v.pickupAddress = v.pickupAddress || null // 自提信息
v.remark = v.remark||""
})
this.orderList = orderList
console.log(this.orderList)
},
plus(sku) {
this.$nextTick(() => {
this.$store.commit("choseCoupon","");
this.coupon = this.$store.state.user.coupon
sku.buyNum += 1;
if (this.flag) {
this.getPost();
}
});
},
reduce(sku) {
if (sku.buyNum > 1) {
this.$store.commit("choseCoupon","");
this.coupon = this.$store.state.user.coupon
this.$nextTick(() => {
sku.buyNum -= 1;
if (this.flag) {
this.getPost();
}
});
}
},
// 总价
total() {
let price = 0
let postPrice = 0
let allPrice = 0
if (this.orderList && Array.isArray(this.orderList)) {
this.orderList.forEach(v=>{
allPrice += v.sInfo.price*v.sInfo.buyNum
if (v.user_select_type == 1) {
postPrice+=v.post
}
})
}
console.log(postPrice)
this.allprice = allPrice + postPrice
if (this.coupon) {
if (this.coupon.activity.fold == 0) {
if (this.coupon.activity.money>allPrice) {
price =0
}else{
price = allPrice - (this.coupon.activity.money)
}
} else{
price = allPrice - allPrice * (this.coupon.activity.fold*10/100)
}
} else {
price = allPrice
}
price=price+postPrice
return price < 0 ? 0 : (price/100).toFixed(2)
},
// 预定
order() {
for(let info of this.orderList) {
if (info.user_select_type == 1) {
if(!info.contacts) {
uni.showToast({
title: '请选择收货地址',
icon: 'none'
});
return;
}
}
if (info.user_select_type == 2) {
if (!info.pickupAddress||!info.pickupAddress.id) {
uni.showToast({title: '请选择自提点',icon: 'none'});
return;
}
}
}
// 如果是购物车下单
if (this.isShoppingCart) {
let allOrderList = this.$store.state.user.techanOrderList;
allOrderList.list2 = this.orderList
this.$store.commit("changeTechanOrderList", allOrderList);
// console.log(this.orderList)
this.goCartNextPage(2)
return
}
},
// ---------------自提-----------------------
changPopShow (e) {
this.popShow = e.show
},
getDataByConnect(data) {
if (data.msgType == "updatePickUpPoint") {
for(let p of this.orderList) {
if (p.sInfo.id == data.data.skuId) {
let selectItem = data.data.selectItem
p.pickupAddress = selectItem
p.pickupAddress.address = selectItem.address;
p.pickupAddress.title = selectItem.title;
p.pickupAddress.id = selectItem.id;
p.pickupAddress.tel = selectItem.tel;
break;
}
}
this.$forceUpdate()
}
},
}
};
</script>
<style lang="scss" scoped>
.bg {
min-height: 100vh;
overflow-x: hidden;
background: #f2f4f7;
padding-bottom: 200rpx;
}
view {
box-sizing: border-box;
}
.flex-shrink-0{
flex-shrink: 0;
}
.box {
width: 100%;
min-height: 100rpx;
padding: 20rpx;
background: #ffffff;
// border-radius: 16rpx;
}
.address {
width: 697rpx;
height: 291rpx;
background: #FFFFFF;
border-radius: 13rpx;
margin: 0 auto;
margin-top: 26rpx;
.a-title{
font-size: 31rpx;
font-family: PingFang SC;
font-weight: bold;
color: #000000;
padding: 30rpx 18rpx;
justify-content: space-between;
align-items: center;
display: flex;
width: 100%;
.more-person{
width: 133rpx;
height: 60rpx;
border-radius: 30rpx;
border: 1px solid #999999;
font-family: PingFang SC;
font-weight: 400;
font-size: 28rpx;
color: #000000;
line-height: 16rpx;
}
}
.btn-box{
display: flex;
align-items: center;
justify-content: center;
border-top:1rpx solid rgba(216, 216, 216, 1) ;
height: 176rpx;
.a-img{
width: 219rpx;
height: 73rpx;
border-radius: 37rpx;
border: 1px solid #333333;
font-family: PingFang SC;
font-weight: 400;
font-size: 29rpx;
color: #000000;
}
}
}
.pickself{
width: 697rpx;
height: 120rpx;
background: #FFFFFF;
margin: 0rpx auto;
.pickpoint{
display: flex;
width: 100%;
font-size: 31rpx;
font-weight: bold;
padding: 40rpx 18rpx;
}
.pickpointAddress{
display: flex;
font-weight: 500;
flex: 1;
width: 10rpx;
align-items: center;
justify-content: flex-end;
}
.pickpointImg{
width: 20rpx;
height: 20rpx;
}
.pointAddressText{
padding: 0 20rpx 0 40rpx;
flex: 1;
text-align: right;
width: 10rpx;
}
}
.new-box{
background: #fff;
width: 698rpx;
margin: 0 auto 0rpx;
// border-radius: 14rpx;
.commodity {
display: flex;
.num-box {
display: flex;
align-items: center;
margin-left: 20rpx;
width: 160rpx;
justify-content: space-between;
.num {
text-align: center;
width: 50rpx;
}
.ctrl {
width: 47rpx;
height: 47rpx;
background: #6A8A2D;
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;
}
}
}
.img {
width: 174rpx;
height: 174rpx;
background: #f2f4f7;
border-radius: 10rpx;
flex-shrink: 0;
}
.sku-content{
flex: 1;
width: 1rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
font-weight: 500;
font-size: 28rpx;
color: #333333;
padding-left: 12rpx;
}
.tag {
margin-top: 10rpx;
display: flex;
.tag-item {
border-radius: 7rpx;
border: 1px solid #6A8A2D;
padding: 2rpx 6rpx;
font-weight: 500;
font-size: 20rpx;
color: #6A8A2D;
margin-right: 10rpx;
}
}
.commodity-price{
&:before{
content:"¥";
font-size: 24rpx;
}
}
}
.btn-list {
width: 100%;
height: 166rpx;
background: #ffffff;
box-shadow: 0rpx -3rpx 9rpx 1rpx rgba(227, 229, 232, 0.5);
display: flex;
position: fixed;
bottom: 0;
padding: 20rpx 20rpx;
align-items: center;
justify-content: space-between;
.btn {
width: 294rpx;
height: 88rpx;
background: #6A8A2D;
border-radius: 11rpx;
text-align: center;
line-height: 88rpx;
font-size: 36rpx;
font-family: PingFang SC;
font-weight: 500;
color: #FFFFFF;
}
.price-box {
display: flex;
align-items: center;
.text {
font-size: 29rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 500;
color: #333;
}
.price {
margin-left: 15rpx;
font-size: 36rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: bold;
color: #DC2525;
&:before {
content: '¥';
display: inline-block;
font-size: 36rpx;
}
}
.post-text {
margin-left: 15rpx;
color: #fc5109;
font-size: 24rpx;
}
}
}
.contacts {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
image {
width: 36rpx;
height: 36rpx;
}
.contacts-left {
.name-phone {
display: flex;
align-items: baseline;
.name {
font-size: 32rpx;
font-family: PingFang SC;
font-weight: 400;
color: #222222;
}
.phone {
margin-left: 27rpx;
font-size: 25rpx;
font-family: PingFang SC;
font-weight: 400;
color: #666666;
}
}
.adds {
font-size: 27rpx;
font-family: PingFang SC;
font-weight: 400;
color: #000;
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: 31rpx;
font-weight: 400;
color: #000000;
}
.confirm {
font-weight: 400;
color: #000000;
}
}
}
.popup-list {
height: 666rpx;
overflow: scroll;
.popup-item {
border-radius: 12rpx;
padding: 2rpx;
margin-top: 24rpx;
font-size: 24rpx;
color: #333333;
font-weight: 400;
background-color: #ffffff;
.item-top {
border-radius: 12rpx;
padding: 30rpx 40rpx;
background-color: #ffffff;
img {
color: #666666;
width: 40rpx;
height: 40rpx;
}
.name {
overflow: hidden;
font-family: PingFang SC;
font-weight: 400;
font-size: 32rpx;
display: flex;
align-items: baseline;
text {
color: #666;
font-size: 25rpx;
padding: 0 24rpx;
}
.tag {
padding: 0 8rpx;
height: 32rpx;
border-radius: 7rpx;
line-height: 30rpx;
text-align: center;
font-size: 23rpx;
font-family: PingFang SC;
font-weight: 500;
color: #ffffff;
background: #6A8A2D;
}
}
.com-flex-start {
margin: 0 0 30rpx;
}
.subtitle {
font-weight: 400;
flex: 1;
text-align: left;
margin-top: 33rpx;
color: #666666;
font-size: 25rpx;
.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;
}
}
}
}
.popup-item.active{
background: #6A8A2D;
}
}
.button {
text-align: center;
width: 100%;
height: 80rpx;
line-height: 80rpx;
background-color: #ffffff;
border-radius: 40rpx;
font-family: PingFang SC;
font-weight: 400;
font-size: 33rpx;
color: #000000;
}
}
.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;
}
.left {
width: 140rpx;
height: 104rpx;
line-height: 104rpx;
font-family: PingFang;
font-weight: bold;
font-size: 31rpx;
color: #000000;
}
.input {
font-size: 31rpx;
font-weight: 400;
text-align: right;
}
.remark {
padding:30rpx;
display: flex;
align-items: center;
width: 698rpx;
min-height: 120rpx;
background: #ffffff;
margin: 0 auto;
// border-radius: 14rpx;
.remark-title{
font-size: 31rpx;
font-family: PingFang SC;
font-weight: bold;
color: #000000;
flex-shrink: 0;
}
input {
margin-left: 64rpx;
width: 500rpx;
font-size: 31rpx;
}
}
.tickets-box {
width: 698rpx;
margin: 0rpx auto 0;
border-radius: 13rpx;
background: #fff;
height: 120rpx;
.order-title {
margin: 31rpx 0 31rpx 30rpx;
font-size: 31rpx;
font-family: PingFang SC;
font-weight: bold;
color: #000000;
}
.coupon-price {
color:#DD0000;
font-size: 30rpx;
font-weight: bold;
}
}
.top-line{
border-top:rgba(216, 216, 216, 1) solid 2rpx ;
}
.post{
height: 120rpx;
padding: 0 30rpx;
font-size: 32rpx;
font-family: PingFang SC;
font-weight: bold;
color: #000000;
}
.sendwayArea{
padding: 26rpx 26rpx;
display: flex;
justify-content: space-between;
.sendway-item{
font-weight: 500;
font-size: 27rpx;
color: #111111;
width: 48%;
text-align: center;
height: 57rpx;
line-height: 57rpx;
background: #FFFFFF;
border-radius: 13rpx;
}
.sendway-item.active{
border: 1px solid #6A8A2D;
color: #6A8A2D;
}
}
.add-edit-content{
background-color: white;
padding: 0 20rpx;
border-radius: 20rpx;
}
.coupon-btn {
color: #999999;;
display: flex;
align-items: center;
.select {
display: block;
width: 153rpx;
height: 40rpx;
background: #6A8A2D;
border-radius: 9rpx;
font-weight: 500;
font-size: 24rpx;
color: #FFFFFF;
text-align: center;
line-height: 40rpx;
font-family: PingFang SC;
margin-right: 20rpx;
}
}
.shop-name{
font-weight: bold;
font-size: 31rpx;
color: #333333;
padding-bottom: 12rpx;
min-height: fit-content;
}
.tickets-container {
width: 698rpx;
background: #fff;
height: 120rpx;
margin: 22rpx auto 0;
.order-title {
margin: 31rpx 0 31rpx 30rpx;
font-size: 31rpx;
font-family: PingFang SC;
font-weight: bold;
color: #000000;
}
.coupon-price {
color:#DD0000;
font-size: 30rpx;
font-weight: bold;
}
}
</style>