428 lines
14 KiB
Vue
428 lines
14 KiB
Vue
<template>
|
||
<view>
|
||
<view
|
||
style="width: 690upx;height: 130upx;background: #FFFFFF;margin: 30upx; padding: 10upx;border-radius: 20upx;"
|
||
@tap='goEditAddress' v-if="sendName != '自取'">
|
||
<view style="display: flex;margin: 10upx 0 0 20upx;">
|
||
<image src="https://api.shengqianxiong.com.cn/img/20201118/276b48a6ab854b64bcfbd5377b5f5901.png"
|
||
style="width: 70upx; height: 70upx;margin-top: 10upx;"></image>
|
||
<view style="margin-left: 20upx;width: 80%;" v-if="checkAddress">
|
||
<view style="display: flex;align-items: center;">
|
||
<view style="font-size: 32upx;color: #333333;">{{consignee}}</view>
|
||
<view style="font-size: 28upx;color: #999999;margin-left: 10upx;">{{mobile}}</view>
|
||
</view>
|
||
<view v-if="consignee"
|
||
style="margin-top: 10upx;font-size: 30upx;color: #333333;width: 90%; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
|
||
{{provinces}}{{detail}}
|
||
</view>
|
||
</view>
|
||
<view v-if="checkAddress == false"
|
||
style="margin-left: 20upx;width: 80%;margin-top: 25upx;color: #000000;">
|
||
暂无地址信息，请添加地址信息</view>
|
||
<image src="https://api.shengqianxiong.com.cn/img/20201112/e0eb6f49777b4b3293d402cb2f991eb5.png"
|
||
style="width: 17upx;height: 28upx;margin-top: 35upx;"></image>
|
||
</view>
|
||
</view>
|
||
|
||
<view
|
||
style="width: 690upx;height: max-content;background: #FFFFFF;margin: 30upx; padding: 10upx;border-radius: 20upx;">
|
||
<view style="display: flex;padding: 20upx;">
|
||
<image :src="attrValuecoverImg" style="width: 200upx; height: 200upx;"></image>
|
||
<view style="width: 65%;margin-left: 20upx;">
|
||
<view
|
||
style="font-size: 28upx;color: #333333;height: 78upx;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;">
|
||
{{title}}
|
||
</view>
|
||
<view style="display: flex;width: 100%;" v-if="checkString != ''">
|
||
<view style="font-size: 24upx;color: #333333;margin-top: 25upx;">商品规格:</view>
|
||
<view style="font-size: 24upx;color: #333333;margin-top: 25upx;margin-left: 15upx;">
|
||
{{checkString}}
|
||
</view>
|
||
</view>
|
||
<view style="display: flex;">
|
||
<!-- <view
|
||
:style="checkString != '' ? 'display: flex;width: 70%;margin-top: 10upx;' : 'display: flex;width: 70%;margin-top: 30upx;'">
|
||
<view style="font-size: 30upx;color: #333333;margin-top: 25upx;">¥ {{money}}</view>
|
||
<view style="font-size: 20upx;color: #666666;margin-top: 30upx;margin-left: 15upx;">
|
||
x{{number}}</view>
|
||
</view> -->
|
||
<!-- <view v-if="isExpress === 1 && className === '' && checkString == '' " -->
|
||
<view
|
||
style="width:200upx;height: 60upx;display: flex;margin-top: 30upx;border-radius: 5upx;border:1px solid #E6E6E6;">
|
||
<view
|
||
style="border-right:1px solid #E6E6E6;width: 70upx;color: #999999;text-align: center;margin-top: 15upx;"
|
||
@click="jian">-</view>
|
||
<view
|
||
style="width: 80upx;text-align: center;font-size: 24upx;color: #333333;margin-top: 15upx;">
|
||
{{number}}
|
||
</view>
|
||
<view
|
||
style="border-left:1px solid #E6E6E6;width: 70upx;color: #999999;text-align: center;margin-top: 15upx"
|
||
@click="jia">+</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view style="display: flex;padding: 20upx;">
|
||
<view style="font-size: 30upx;color: #333333;width: 25%;">配送方式</view>
|
||
<view style="font-size: 30upx;color: #000000;margin-left: 10upx;width: 40%;">
|
||
<picker mode="selector" :range="WayList" @change="WaySel">
|
||
<view v-if="sendName === '请选择配送方式'" style="color: #000000;">{{sendName}}</view>
|
||
<view v-else>{{sendName}}</view>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
<view style="display: flex;padding: 20upx;" v-if="sendName === '快递'">
|
||
<view style="font-size: 30upx;color: #333333;width: 25%;">快递</view>
|
||
<view style="font-size: 30upx;color: #000000;margin-left: 10upx;width: 40%;">
|
||
{{postagePrice == 0 ? '包邮' : postagePrice + '元'}}
|
||
</view>
|
||
</view>
|
||
<!-- 领劵end -->
|
||
<view style="display: flex;padding: 30upx 20upx;">
|
||
<view style="font-size: 30upx;color: #333333;width: 25%;">订单备注</view>
|
||
<input type="text" style="width: 70%;font-size: 30upx;color: #999999;margin-left: 10upx;"
|
||
v-model="descrition" placeholder="选填" />
|
||
</view>
|
||
</view>
|
||
<view style="display: flex;background-color: #FFFFFF;width: 100%;height: 100upx;position: fixed;bottom: 0upx;">
|
||
<view style="display: flex;font-size: 28upx;color: #333333;padding: 25upx 0 10upx 20upx;width: 50%;">
|
||
<view v-if="className != 'jifen'" style="font-size: 28upx;color: #333333;padding: 5upx 0 10upx 10upx;">
|
||
总金额：</view>
|
||
<view v-if="className != 'jifen'" style="font-size: 40upx;color: #05C25C;padding: 0upx 0 10upx 10upx;">
|
||
¥{{price + postagePrice}}</view>
|
||
<view v-if="className === 'jifen'" style="font-size: 40upx;color: #05C25C;padding: 0upx 0 10upx 10upx;">
|
||
{{price}}
|
||
<text style="font-size: 28rpx;">积分</text>
|
||
</view>
|
||
</view>
|
||
<button
|
||
style="background-color: #05C25C;width: 300upx;height: 70upx;font-size: 28upx;color: #FFFFFF;text-align: center;margin-top: 15upx;border-radius: 50upx;"
|
||
@tap='goPay'>提交订单</button>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
sendName: '请选择配送方式',
|
||
sendWay: 0,
|
||
WayList: [],
|
||
descrition: '',
|
||
number: 1,
|
||
money: 0,
|
||
consignee: '',
|
||
provinces: '',
|
||
commissionPrice: 0,
|
||
id: 0,
|
||
price: 0,
|
||
couponUserId: '',
|
||
postagePrice: 0,
|
||
postagePrices: 0,
|
||
title: '',
|
||
attrValuecoverImg: '',
|
||
isExpress: 1,
|
||
checkString: '',
|
||
detail: '',
|
||
skuId: 0,
|
||
lessMoney: 0,
|
||
maxNumber: 0,
|
||
groupPinkId: '',
|
||
mobile: '',
|
||
jianMoney: 0,
|
||
list: {},
|
||
addressId: '',
|
||
className: '',
|
||
userByinvitationId: '',
|
||
checkAddress: false
|
||
}
|
||
},
|
||
onShow() {
|
||
this.addressId = this.$queue.getData('EditAddress');
|
||
if (this.addressId) {
|
||
this.getAddressList(this.addressId);
|
||
} else {
|
||
this.addressMy()
|
||
}
|
||
},
|
||
onLoad(d) {
|
||
let peisongSel = this.$queue.getData('peisongSel');
|
||
if (peisongSel) {
|
||
this.WayList = peisongSel.split(',');
|
||
}
|
||
if (d.id) {
|
||
if (d.maxNumber) {
|
||
this.maxNumber = parseFloat(d.maxNumber);
|
||
}
|
||
this.className = d.className ? d.className : '';
|
||
this.id = d.id;
|
||
this.groupPinkId = d.groupPinkId;
|
||
if (d.userByinvitationId) {
|
||
this.userByinvitationId = d.userByinvitationId;
|
||
}
|
||
if (d.checkString) {
|
||
this.money = d.numberMoney;
|
||
this.checkString = d.checkString;
|
||
this.number = d.number;
|
||
this.price = parseFloat(d.money);
|
||
this.skuId = d.skuId;
|
||
this.attrValuecoverImg = d.attrValuecoverImg;
|
||
} else {
|
||
this.number = 1;
|
||
this.price = parseFloat(d.money);
|
||
this.money = d.numberMoney;
|
||
}
|
||
this.jianMoney = this.price;
|
||
this.getCommondityList(d.id);
|
||
}
|
||
},
|
||
methods: {
|
||
WaySel(e) {
|
||
console.log(e);
|
||
// this.sendId = this.WayListTwo[e.detail.value].id;
|
||
this.sendName = this.WayList[e.detail.value];
|
||
console.log('this.sendName---->',this.sendName);
|
||
|
||
if (this.sendName === '快递') {
|
||
this.sendWay = 1;
|
||
this.postagePrice = this.postagePrices;
|
||
} else if (this.sendName === '自取') {
|
||
this.sendWay = 2;
|
||
this.postagePrice = 0;
|
||
}else if (this.sendName === '同城自取') {
|
||
this.sendWay = 2;
|
||
this.postagePrice = 0;
|
||
}
|
||
},
|
||
// 根据地址id查询地址
|
||
getAddressList(addressId) {
|
||
if (addressId) {
|
||
this.$Request.getT('/app/address/selectAddressByAddressId?addressId=' + this.addressId).then(res => {
|
||
console.log(res)
|
||
if (res.code == 0 && res.data) {
|
||
this.checkAddress = true;
|
||
this.detail = res.data.city + '' + res.data.district + '' + res.data.detailsAddress;
|
||
this.consignee = res.data.name;
|
||
this.mobile = res.data.phone;
|
||
this.provinces = res.data.province;
|
||
// this.name = res.data.name;
|
||
// this.mobile = res.data.phone;
|
||
// this.cityaddress = res.data.province + res.data.city + res.data.district;
|
||
// this.detailaddress = res.data.detailsAddress;
|
||
// this.isDefault = res.data.isDefault;
|
||
// this.userId = res.data.userId;
|
||
// this.latitude = res.data.latitude;
|
||
// this.longitude = res.data.longitude;
|
||
// this.province = res.data.province
|
||
// this.city = res.data.city
|
||
// this.district = res.data.district
|
||
} else {
|
||
this.checkAddress = false;
|
||
}
|
||
// uni.hideLoading();
|
||
});
|
||
} else {
|
||
uni.navigateTo({
|
||
url: '../../../my/address/address?id=' + 1
|
||
})
|
||
}
|
||
},
|
||
// 获取默认地址
|
||
addressMy() {
|
||
this.$Request.getT('/app/address/selectAddressById').then(res => {
|
||
console.log(res)
|
||
if (res.code == 0 && res.data) {
|
||
this.checkAddress = true;
|
||
|
||
this.detail = res.data.city + '' + res.data.district + '' + res.data.detailsAddress;
|
||
this.consignee = res.data.name;
|
||
this.mobile = res.data.phone;
|
||
this.provinces = res.data.province;
|
||
|
||
// this.name = res.data.name;
|
||
// this.mobile = res.data.phone;
|
||
// this.cityaddress = res.data.province + res.data.city + res.data.district;
|
||
// this.detailaddress = res.data.detailsAddress;
|
||
// this.isDefault = res.data.isDefault;
|
||
// this.userId = res.data.userId;
|
||
// this.latitude = res.data.latitude;
|
||
// this.longitude = res.data.longitude;
|
||
// this.province = res.data.province
|
||
// this.city = res.data.city
|
||
// this.district = res.data.district
|
||
// this.addressId = res.data.addressId
|
||
} else {
|
||
this.checkAddress = false;
|
||
}
|
||
});
|
||
},
|
||
numFilter(value) {
|
||
// 截取当前数据到小数点后三位
|
||
let tempVal = parseFloat(value).toFixed(2)
|
||
let realVal = tempVal.substring(0, tempVal.length - 1)
|
||
return realVal
|
||
},
|
||
getCommondityList(id) {
|
||
uni.showLoading({
|
||
title: '加载中...'
|
||
});
|
||
this.$Request.getT('/goods/find?id=' + id).then(res => {
|
||
if (res.status === 0) {
|
||
this.list = res.data;
|
||
let relation_id = this.$queue.getData('relation_id');
|
||
this.attrValuecoverImg = res.data.coverImg;
|
||
if (this.checkString == '') {
|
||
this.price = parseFloat(this.list.sku[0].skuPrice);
|
||
this.money = parseFloat(this.list.sku[0].skuPrice);
|
||
this.maxNumber = this.list.sku[0].stock ? this.list.sku[0].stock : 1;
|
||
}
|
||
this.isExpress = res.data.isExpress;
|
||
this.title = this.list.title;
|
||
if (this.list.postagePrice) {
|
||
this.postagePrice = 0;
|
||
this.postagePrices = parseFloat(this.list.postagePrice);
|
||
} else {
|
||
this.postagePrice = 0;
|
||
this.postagePrices = 0;
|
||
}
|
||
this.commissionPrice = parseFloat(this.list.commissionPrice);
|
||
}
|
||
uni.hideLoading();
|
||
});
|
||
},
|
||
// getAddressList() {
|
||
// let userId = this.$queue.getData('userId');
|
||
// this.$Request.getT('/app/address/findDefaultByUserId?userId=' + userId).then(res => {
|
||
// if (res.status === 0) {
|
||
// if (res.data) {
|
||
// this.checkAddress = true;
|
||
// this.detail = res.data.detail;
|
||
// this.consignee = res.data.consignee;
|
||
// this.mobile = res.data.mobile;
|
||
// this.provinces = res.data.provinces;
|
||
// } else {
|
||
// this.checkAddress = false;
|
||
// }
|
||
// } else {
|
||
// this.checkAddress = false;
|
||
// }
|
||
// });
|
||
// },
|
||
goPay() {
|
||
if (this.sendWay == 0) {
|
||
this.$queue.showToast('请选择配送方式!')
|
||
return;
|
||
}
|
||
if (!this.checkAddress && this.sendName != '自取') {
|
||
this.$queue.showToast('请设置收货地址信息');
|
||
return;
|
||
}
|
||
let userId = this.$queue.getData('userId');
|
||
if (this.skuId === 0) {
|
||
this.skuId = this.list.sku[0].id;
|
||
}
|
||
var orderType = '1'; //1普通订单 2拼团 3秒杀
|
||
var type = '';
|
||
var status = '';
|
||
var secKillId = '';
|
||
var groupId = '';
|
||
var goodsId = '';
|
||
var isExpress = '';
|
||
var commissionPrice = '';
|
||
status = '1';
|
||
type = this.list.type.id;
|
||
goodsId = this.list.id;
|
||
isExpress = this.list.isExpress;
|
||
commissionPrice = this.commissionPrice;
|
||
let data = {
|
||
userId: userId,
|
||
status: status,
|
||
sendWay: this.sendWay,
|
||
consignee: this.consignee,
|
||
mobile: this.mobile,
|
||
provinces: this.provinces,
|
||
detail: this.detail,
|
||
type: type,
|
||
secKillId: secKillId,
|
||
groupPinkId: this.groupPinkId,
|
||
orderType: orderType,
|
||
title: this.list.title,
|
||
groupId: groupId,
|
||
couponMoney: this.lessMoney, //这个是优惠券金额，替换了descrition的值描述
|
||
userCouponsId: this.couponUserId,
|
||
goodsId: goodsId,
|
||
img: this.attrValuecoverImg,
|
||
isExpress: isExpress,
|
||
descrition: this.descrition,
|
||
skuId: this.skuId,
|
||
price: this.money,
|
||
number: this.number,
|
||
postagePrice: this.postagePrice,
|
||
payMoney: this.price + this.postagePrice,
|
||
relationId: this.userByinvitationId,
|
||
detailJson: this.checkString,
|
||
commissionPrice: commissionPrice
|
||
}
|
||
this.$Request.postJson('/app/orders/save', data).then(res => {
|
||
if (res.status === 0) {
|
||
uni.redirectTo({
|
||
url: '../my/payment?money=' + this.price + '&title=' + this.list.title +
|
||
'&img=' + this.list.img + '&id=' +
|
||
res.data.id + '&orderType=' + orderType
|
||
});
|
||
}
|
||
});
|
||
},
|
||
goEditAddress() {
|
||
uni.navigateTo({
|
||
url: '/my/address/address?id=1'
|
||
});
|
||
},
|
||
jian() {
|
||
if (this.number != 1) {
|
||
let number = this.number - 1
|
||
this.number = number
|
||
// this.price = parseFloat(this.price - this.money).toFixed(1);
|
||
this.price = parseFloat(this.numFilter(parseFloat(this.price) - parseFloat(this.money)));
|
||
}
|
||
},
|
||
jia() {
|
||
let number = this.number + 1
|
||
if (this.maxNumber >= number) {
|
||
this.number = number
|
||
this.price = parseFloat(this.numFilter(parseFloat(this.price) + parseFloat(this.money)));
|
||
// this.price = parseFloat(this.price) + parseFloat(this.money);
|
||
} else {
|
||
this.$queue.showToast('没库存啦，只能买这么多了！');
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
page {
|
||
background: #F2F2F2;
|
||
}
|
||
|
||
.topic_cont_text {
|
||
padding: 30upx;
|
||
colof: #999;
|
||
background: #E1FFFF;
|
||
max-height: 130upx;
|
||
overflow: hidden;
|
||
word-break: break-all;
|
||
/* break-all(允许在单词内换行。) */
|
||
text-overflow: ellipsis;
|
||
/* 超出部分省略号 */
|
||
display: -webkit-box;
|
||
/** 对象作为伸缩盒子模型显示 **/
|
||
-webkit-box-orient: vertical;
|
||
/** 设置或检索伸缩盒对象的子元素的排列方式 **/
|
||
-webkit-line-clamp: 2;
|
||
/** 显示的行数 **/
|
||
}
|
||
</style> |