This commit is contained in:
@fawn-nine
2023-03-03 12:11:23 +08:00
commit f8e1a3015b
502 changed files with 57308 additions and 0 deletions

View File

@@ -0,0 +1,875 @@
<template>
<view>
<!-- 公共组件-每个页面必须引入 -->
<public-module></public-module>
<z-nav-bar title="商品结算"></z-nav-bar>
<view v-if="adressMoRen.username==undefined" class="addShouhuo" @click="toAddress()">
<u-icon name="plus" size="20" style="display: inline-block;margin-right: 10rpx;"></u-icon>
请添加收货地址
</view>
<view class="adDefault" @click="dizhiShow = true" v-if="adressMoRen.username!=undefined">
<view class="defalTop">
<text class="userName">
{{adressMoRen.username}}
</text>
<text class="userTel">
{{adressMoRen.userphone}}
</text>
<text class="userMoren" v-if="adressMoRen.isdefault==1">
默认
</text>
</view>
<view class="defalBottom">
<text class="userAddress">
{{adressMoRen.areaidpathtext}} {{adressMoRen.useraddress}}
</text>
</view>
<u-icon name="map" color="#aaa" size="25" class="defalLeft"></u-icon>
<u-icon name="arrow-right" color="#aaa" size="22" class="defalRight"></u-icon>
</view>
<view class="cartItem" v-for="(item,index) in cartList" :key="index">
<view class="cartContent">
<image :src="item.image" mode=""></image>
<view class="itemCenter">
<view class="cartTitle">
<text>{{item.productName}}</text>
</view>
<view class="itemPrice">
<text>{{item.price*item.productAmount}}</text>
<u-number-box v-model="item.productAmount" @change="valChange($event, item)" :input-width="50"
:input-height="20" :min="1" :max="item.productStock" integer @overlimit='overlimit'></u-number-box>
</view>
</view>
</view>
</view>
<view class="youhui_quan">
<view class="yq_alljia">
商品总价
<text>{{totalPrice}}</text>
</view>
<view class="yq_youhui" @click="youhuiShow = true">
<u-icon name="red-packet-fill" color="#e74141" size="18" class="yqLeft"></u-icon>
优惠券
<u-icon name="arrow-right" color="#aaa" size="18" class="yqRight"></u-icon>
<text class="dagnqian"
v-if="youhuiList.length>0&&youhuiContent.id==undefined">当前可选{{this.youhuiList.length}}</text>
<text class="dagnqian" v-if="youhuiList.length==0&&youhuiContent.id==undefined"
style="background-color: #999;">暂无优惠券</text>
<text class="dagnqian" v-if="youhuiContent.id!=undefined">
- {{youhuiContent.coupons.couponAmount}}</text>
</view>
<view class="yq_yunfei">
<u-icon name="car-fill" color="#e0880c" size="18" class="yqLeft"></u-icon>
运费
<text>{{farePrice}}</text>
</view>
</view>
<view class="zhif_fangsh">
<view class="zhif_radio">
<u-radio-group v-model="payType">
<view style="width: 100%;">
<view v-for="(item, index) in paylist" @click="choseType(item.id)" class="zhif_xuanx">
<image :src="item.img"></image>
{{item.title}}
<u-radio :key="index" activeColor="#fe6e09" :name='item.id'
style="float: right;margin-top: 5rpx;"></u-radio>
</view>
</view>
</u-radio-group>
</view>
</view>
<view class="footer">
<view class="commodityPrice">
<span style="color: #666;margin-right: 10rpx; font-size: 15px;">实付款: </span>
<span></span>{{realPrice}}
</view>
<view class="operate" @click="goBuyJie">
<view class="goBuy">
立即支付
</view>
</view>
</view>
<!-- 地址弹出 -->
<u-popup :show="dizhiShow" :round="10" @close="dizhiShow=false">
<view class="tanchu">
<view class="dp_title">请选择地址</view>
<view class="dp_add" @click="toAddress()">
<u-icon name="plus" color="#fff" size="12"></u-icon>
添加地址
</view>
<view style="max-height: 1000rpx;overflow-y: scroll;">
<view :class="adressMoRIndex == index ? 'addressItem addItem_style' : 'addressItem'"
v-for="(item,index) in addressList" :key="index" @click="choseDizhi(index)">
<view class="addrContent">
<view class="addrContentTop">
<view class="userName">
{{item.username}}
</view>
<view class="userTel">
{{item.userphone}}
</view>
<view class="userMoren" v-if="item.isdefault==1">
默认
</view>
<u-icon name="checkmark-circle-fill" class="chooseCheck" size="20" color="#fd6004"
v-if="adressMoRIndex == index"></u-icon>
</view>
<view class="addrContentBottom">
<view class="userAddress">
{{item.areaidpathtext}} {{item.useraddress}}
</view>
</view>
</view>
</view>
</view>
</view>
</u-popup>
<!-- 优惠券弹出 -->
<u-popup :show="youhuiShow" :round="10" @close="youhuiShow=false">
<view class="tanchu">
<view class="dp_title">请选择优惠券</view>
<view style="max-height: 1000rpx;overflow-y: scroll;">
<view :class="youhuiIndex === index ? 'youhuiItem youItem_style' : 'youhuiItem'"
v-for="(item,index) in youhuiList" :key="index" @click="choseYouhui(index)">
<view style="width: 25%;color:#fd6004;text-align: center;">
<text></text>
<b style="font-size: 45rpx;">{{item.coupons.couponAmount}}</b>
<text
style="display: block;color: #666;font-size: 25rpx;margin-top: 10rpx;">{{item.coupons.useLevel}}元可用</text>
</view>
<view style="width: 68%;padding-left: 5%;">
<text>{{item.coupons.couponName}}</text>
<text
style="display: block;font-size: 20rpx;color: #999;margin-top: 10rpx;">到期时间{{item.coupons.expirationDate}}</text>
</view>
<view style="width: 7%;">
<text
style="border: 1px solid #d9d9d9;width: 35rpx;height:35rpx;display:inline-block;border-radius: 30rpx;"
v-if="youhuiIndex !== index"></text>
<u-icon name="checkmark-circle-fill" color="#fd6004" size="20" v-if="youhuiIndex === index">
</u-icon>
</view>
<br clear="both">
</view>
</view>
<view style="font-size: 20rpx;color: #aaa;margin-top: 30rpx;">* 每笔订单只能使用一张优惠价</view>
</view>
</u-popup>
</view>
</template>
<script>
import $http from '@/config/requestConfig.js';
import {
setPay,
setPayAssign
} from '@/config/utils';
import {
mapState
} from 'vuex';
export default {
data() {
return {
typeId: 0,
shangIDNum: 0,
cartIDNum: [],
cartList: [],
amount:null, // 商品总价
addressList: [],
adressMoRen: {},
adressMoRenPath:"",
adressMoRIndex: 0,
youhuiList: [],
addressId:null,
youhuiContent: {},
youhuiIndex: '',
dizhiShow: false,
youhuiShow: false,
totalPrice: 0,
isSend:'0',
farePrice: 0,
realPrice: 0,
payType: 1,
nowClick: true,
paylist: [{
title: '支付宝',
id: 1,
img: '../../static/icon/pay_1.png'
}
// {
// title: '微信',
// id: 2,
// img: '../../static/icon/pay_2.png'
// },
// {
// title: 'ios内购',
// id: 3,
// img: '../../static/icon/pay_2.png'
// }
],
}
},
onLoad(e) {
if (e.type == 1) {
this.typeId = 1
this.cartIDNum = JSON.parse(e.list);
} else if (e.type == 2) {
this.typeId = 0
this.shangIDNum = e.list
}
// this.getYunFei()
},
onShow() {
if (this.typeId == 1) {
this.getCartList()
} else if (this.typeId == 0) {
this.getShangList(this.shangIDNum);
}
// this.getUserAddress()
},
computed: {
...mapState(['userInfo']),
},
methods: {
// 获取地址列表
getUserAddress() {
this.$http
.post(`book/useraddress/getUserAddress?userId=${this.userInfo.id}`)
.then(res => {
if (res.code == 0) {
if (res.list.length != 0) {
this.addressList = res.list
console.log(this.addressList,'地址列表')
this.adressMoRen = this.addressList[this.adressMoRIndex]
console.log(this.adressMoRen, '默认')
if(this.adressMoRen != {}){
this.getYunFei()
}else{
this.getUserAddress()
}
}
}
})
},
// 获取优惠券列表
getCourpe() {
let proId = ''
for (let i = 0; i < this.cartList.length; i++) {
if (i == this.cartList.length - 1) {
proId = proId + this.cartList[i].productId
} else {
proId = proId + this.cartList[i].productId + ','
}
}
let allprice = 0;
this.cartList.forEach((item, index) => {
let price = 0;
price = item.productAmount * item.price;
allprice += price
})
this.amount = allprice // 商品总价
this.allPrice()
// '&products=' + proId + //商品id
this.$http
.post('book/couponhistory/appGetUserCoupon?userId=' + this.userInfo.id + '&amount=' + this.amount + '&type=0')
.then(res => {
this.youhuiList = res.userCoupons
});
},
// 获取商品详情
getShangList(e) {
this.cartList = []
this.$http
.post('book/shopproduct/info/' + e)
.then(res => {
let prodCont = {}
prodCont.productId = res.shopProduct.productId
prodCont.image = res.shopProduct.productImages
prodCont.productName = res.shopProduct.productName
prodCont.productAmount = 1
prodCont.price = res.shopProduct.price
prodCont.weight = res.shopProduct.weight
this.cartList.push(prodCont)
this.getCourpe()
this.getUserAddress()
//this.getYunFei()
// this.getYunFei()
})
},
// 获取购物车列表
getCartList() {
this.cartList = []
this.$http
.post(`book/ordercart/getCartList?userId=${this.userInfo.id}`)
.then(res => {
for (let i = 0; i < this.cartIDNum.length; i++) {
this.cartList.push(res.cartList[this.cartIDNum[i]])
}
// console.log(this.cartList, '购物车列表')
this.getCourpe()
this.getUserAddress()
})
},
// 获取运费
getYunFei(){
let key = []
let dataToString = ''
// console.log(this.adressMoRen, '默认地址')
this.cartList.forEach((item, index) => {
key.push({productsid: item.productId, productAmount:item.productAmount})
dataToString = dataToString.concat(item.productId+"="+item.productAmount+"&")
})
$http.request({
url: "book/buyorder/getTransPrice/" + this.adressMoRen.areaidpath + "?" + dataToString,
method: "POST", // POST、GET、PUT、DELETE具体说明查看官方文档
// data: key,
header: { //默认 无 说明:请求头
'Content-Type': 'application/json'
},
}).then(res => {
if (res.code == 0) {
this.farePrice = res.price
}else{
this.farePrice = 0
}
this.allPrice()
})
},
// 总价
allPrice() {
let allprice = 0;
this.cartList.forEach((item, index) => {
let price = 0;
price = item.productAmount * item.price;
allprice += price
})
this.totalPrice = allprice
if (this.youhuiContent.id != undefined) {
this.realPrice = this.totalPrice - this.youhuiContent.coupons.couponAmount
} else {
this.realPrice = this.totalPrice
}
this.realPrice = this.realPrice + this.farePrice
},
// 超出阈值时
overlimit(){
uni.showToast({
title:'超出商品数量',
icon: 'error',
duration: 1000
})
},
// 修改数量
valChange(e, item) {
let productItem = {}
productItem = item
productItem.productAmount = e.value
this.updateCart(productItem)
this.$nextTick(()=>{
this.getYunFei()
this.getCourpe()
})
},
// 更新购物车
updateCart(shagnpin){
// 已在购物车中添加
$http.request({
url: "book/ordercart/update",
method: "POST", // POST、GET、PUT、DELETE具体说明查看官方文档
data: shagnpin,
header: { //默认 无 说明:请求头
'Content-Type': 'application/json'
}
}).then(res => {
if (res.code == 0) {
// uni.showToast({
// title: '加入购物车成功',
// duration: 1000,
// });
}
})
},
// 更改地址
choseDizhi(e) {
this.adressMoRIndex = e
this.adressMoRen = this.addressList[this.adressMoRIndex]
console.log(this.adressMoRen)
this.dizhiShow = false
this.getYunFei()
},
// 添加地址
toAddress() {
uni.navigateTo({
url: '/pages/user/addAddress?type=0&index=0'
})
},
// 选择优惠券
choseYouhui(e) {
this.youhuiIndex = e
this.youhuiContent = this.youhuiList[this.youhuiIndex]
this.allPrice()
this.youhuiShow = false
},
// 提交结算
goBuyJie() {
if (!this.nowClick) {
return
}
this.nowClick = false
setTimeout(() => {
this.nowClick = true
}, 5000)
let youPre = {
id: '',
coupons: {
amount: 0,
name: ''
}
};
if (this.youhuiContent.id != undefined) {
youPre = this.youhuiContent
}
let xiaBiao = [];
for (let i = 0; i < this.cartList.length; i++) {
xiaBiao.push({
productId: this.cartList[i].productId,
quantity: this.cartList[i].productAmount
})
}
let data = {
buyType: this.typeId, //0- 商品页直接下单 1- 购物车结算
userId: this.userInfo.id, //下单人ID
shippingUser: this.adressMoRen.username, //收货人姓名
userPhone: this.adressMoRen.userphone, //收货人手机号
province: this.adressMoRen.areaidpathtext.split(' ')[0], //省
city: this.adressMoRen.areaidpathtext.split(' ')[1], //市
district: this.adressMoRen.areaidpathtext.split(' ')[2], //区
address: this.adressMoRen.useraddress, //地址
paymentMethod: this.payType, //支付方式 1支付宝2微信3ios内购
orderMoney: this.totalPrice, //订单金额
realMoney: this.realPrice, //实收金额
shippingMoney: this.farePrice, //运费
couponId: youPre.id, //优惠券Id
isSend: this.isSend,
couponName: youPre.coupons.name, //优惠券名称
districtMoney: youPre.coupons.amount, //优惠金额
orderStatus: 0, //订单状态
products: xiaBiao, //订单列表
orderType: "order", //订单类型
addressId:this.adressMoRen.addressid // 地址ID
}
$http.request({
url: "book/buyorder/save",
method: "POST", // POST、GET、PUT、DELETE具体说明查看官方文档
data,
header: { //默认 无 说明:请求头
'Content-Type': 'application/json'
},
}).then(res => {
if (res.code == 0) {
if (res.orderSn == null) {
uni.showToast({
title: "失败,请重新下单",
icon: "none",
image: '../../static/icon/ic_close.png'
});
} else {
uni.showToast({
title: "正在支付",
icon: "loading"
});
setPay({
typePay: 'alipay',
subject: 'order',
totalAmount: res.money,
type: 2,
relevanceoid: res.orderSn,
customerId: this.userInfo.id,
}, res => {
if (res.success) {
uni.showToast({
title: "支付成功"
});
setTimeout(() => {
uni.navigateTo({
url: './orderList'
});
}, 1000)
} else {
uni.showToast({
title: "支付失败",
icon: "none",
image: '../../static/icon/ic_close.png'
});
setTimeout(() => {
uni.navigateTo({
url: './orderList'
});
}, 1000)
}
})
}
}
})
},
}
}
</script>
<style lang="scss" scoped>
.addShouhuo {
padding: 30rpx 50rpx 30rpx 100rpx;
background-color: #fff;
border-top: 1px solid #eee;
border-bottom: 2px dashed #b2e9d7;
margin: 0 0 20rpx 0;
font-size: 35rpx;
}
.adDefault {
padding: 30rpx 50rpx 30rpx 100rpx;
background-color: #fff;
border-top: 1px solid #eee;
border-bottom: 2px dashed #b2e9d7;
margin: 0 0 20rpx 0;
position: relative;
.defalTop {
.userName {
font-size: 35rpx;
font-weight: bold;
margin-right: 30rpx;
}
.userTel {
font-size: 25rpx;
color: #888;
}
.userMoren {
border: 1px solid #fd6004;
color: #fd6004;
padding: 3rpx 10rpx;
font-size: 22rpx;
border-radius: 10rpx;
margin: 0 0 0 20rpx;
}
}
.defalBottom {
.userAddress {
font-size: 32rpx;
line-height: 40rpx;
}
}
.defalLeft {
position: absolute;
left: 30rpx;
top: 55rpx;
}
.defalRight {
position: absolute;
right: 10rpx;
top: 60rpx;
}
}
.cartItem {
padding: 10rpx 20rpx 10rpx 30rpx;
border-bottom: 1px solid #eee;
display: flex;
align-items: center;
background-color: #fff;
.cartContent {
flex: 1;
display: flex;
image {
width: 150rpx;
height: 180rpx;
border-radius: 10rpx;
padding: 10rpx;
margin-right: 15rpx;
}
.itemCenter {
flex: 1;
flex-direction: column;
justify-content: space-around;
}
.cartTitle {
font-size: 30rpx;
margin: 35rpx 0 20rpx 0;
}
.itemPrice {
font-size: 28rpx;
display: flex;
justify-content: space-between;
}
}
}
.youhui_quan {
margin: 20rpx 0 0 0;
padding: 30rpx 40rpx 0 40rpx;
background-color: #fff;
border-bottom: 1px solid #eee;
.yq_alljia {
text {
float: right;
color: #bf0c0c;
}
}
.yq_youhui {
.yqLeft {
display: inline-block;
margin-right: 10rpx;
}
.yqRight {
float: right;
}
.dagnqian {
float: right;
font-size: 22rpx;
background-color: #dd1919;
color: #fff;
border-radius: 20rpx;
padding: 5rpx 10rpx;
}
}
.yq_yunfei {
.yqLeft {
display: inline-block;
margin-right: 10rpx;
}
text {
float: right;
}
}
}
.youhui_quan>view {
font-size: 32rpx;
padding-bottom: 20rpx;
margin-bottom: 20rpx;
border-bottom: 1px solid #ededed;
}
.zhif_fangsh {
margin: 20rpx 0 120rpx 0;
padding: 30rpx 40rpx 0 40rpx;
background-color: #fff;
border-bottom: 1px solid #eee;
.zhif_radio {
.zhif_xuanx {
font-size: 32rpx;
padding-bottom: 20rpx;
margin-bottom: 20rpx;
border-bottom: 1px solid #ededed;
image {
width: 40rpx;
height: 40rpx;
display: inline-block;
margin-right: 20rpx;
vertical-align: bottom;
}
}
}
}
.footer {
width: 100%;
height: 100rpx;
background-color: #fff;
border-top: 1px solid #eee;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
bottom: 0%;
.commodityPrice {
font-size: 40rpx;
color: #bf0c0c;
font-weight: 700;
margin-left: 40rpx;
span {
font-size: 15px;
}
}
.operate {
display: flex;
.goBuy {
font-size: 32rpx;
color: #fff;
padding: 32rpx 60rpx;
letter-spacing: 0.8px;
background-color: #a53008;
}
}
}
.tanchu {
padding: 40rpx 30rpx 40rpx 30rpx;
position: relative;
.dp_title {
font-size: 32rpx;
margin-bottom: 50rpx;
color: #555;
text-align: center;
font-weight: bold;
}
.dp_add {
position: absolute;
top: 40rpx;
right: 30rpx;
font-size: 22rpx;
background-color: #fd6004;
color: #fff;
border-radius: 10rpx;
padding: 5rpx 10rpx;
.u-icon {
display: inline-block;
margin-right: 5rpx;
}
}
.addressItem {
border: 2px dashed #d9d9d9;
border-radius: 10rpx;
width: 100%;
display: flex;
padding: 20rpx 10rpx;
margin: 25rpx 0 0 0;
align-items: center;
background-color: #fff;
.addrContent {
margin-left: 40rpx;
flex: 1;
.addrContentTop {
display: flex;
align-items: flex-end;
margin: 0 0 15rpx 0;
position: relative;
.userName {
font-size: 35rpx;
font-weight: bold;
margin-right: 30rpx;
}
.userTel {
font-size: 25rpx;
color: #888;
}
.userMoren {
border: 1px solid #fd6004;
color: #fd6004;
padding: 3rpx 10rpx;
font-size: 22rpx;
border-radius: 10rpx;
margin: 0 0 0 20rpx;
}
.chooseCheck {
position: absolute;
top: 3rpx;
right: 6rpx;
}
}
.addrContentBottom {
font-size: 32rpx;
}
}
}
.addressItem.addItem_style {
border-color: #fd6004;
}
.youhuiItem {
border: 1px solid #d9d9d9;
border-radius: 10rpx;
width: 100%;
display: flex;
padding: 20rpx 10rpx;
margin: 25rpx 0 0 0;
align-items: center;
background-color: #fff;
font-size: 30rpx;
}
.youhuiItem>view {
float: left;
}
.youhuiItem.youItem_style {
border-color: #fd6004;
}
}
</style>