<template>
<view class="container">
<view class="address-info-box" @click="selectAddress()">
<view class="address-icon">
<text class="iconfont icondizhi"></text>
</view>
<view class="address-content">
<text class="address-info">
<text class="address-name">{{addressData.username}}</text>
<text class="address-phone">{{addressData.phone}}</text>
</text>
<view class="address-detail">{{addressData.address}}</view>
</view>
<view class="address-link">
<text class="iconfont iconfangxiang"></text>
</view>
</view>
<view class="goods-info-box">
<view class="shop-info">
<text class="iconfont icondianpu"></text>
<text class="shop-name">{{orderData.supplierName}}</text>
<text class="iconfont iconfangxiang"></text>
</view>
<view class="goods-list">
<view class="goods-row" v-for="(item, index) in orderData.goodsList" :key="index">
<image class="goods-img" :src="item.imgUrl"></image>
<view class="goods-info">
<view class="goods-name">{{item.productName}}</view>
<view class="goods-type">
类型：{{item.productType == 1 ? '普通商品' : (item.productType == 2 ? '拍卖商品' : (item.productType == 3 ? '自助采摘' : '共享种植'))}}
</view>
<view class="plant-area" v-if="orderType == 3">面积：{{orderData.areaSize}}㎡</view>
<view class="goods-price-number">
<text class="goods-unit">￥</text>
<text class="goods-price">{{orderType == 1 ? item.bizPrice : paySum}}</text>
<text class="goods-number">x{{item.buyNum}}</text>
<text class="plant-text" v-if="orderType == 3">有效期：{{orderData.term}}天</text>
</view>
</view>
</view>
</view>
<view class="order-info">
<u-cell-group :border="false">
<u-cell-item title="商品金额" :arrow="false" :border-bottom="false" title-width="170" :title-style="{textAlign: 'right'}">
<text class="order-text-right">￥{{orderType == 1 ? getAllGoodsInitialPrice() : paySum}}</text>
</u-cell-item>
<u-cell-item title="积分抵扣" :arrow="false" :border-bottom="false" title-width="170" :title-style="{textAlign: 'right'}"
v-if="orderType == 1">
<view>
<text class="order-text-left">-{{getIntegral()+'积分'}}</text>
<text class="order-text-right">-￥{{(getIntegral()/100).toFixed(2)}}</text>
</view>
</u-cell-item>
<u-cell-item title="优惠券" :border-bottom="false" title-width="170" :title-style="{textAlign: 'right'}" @click="showCoupon()"
v-if="orderType == 1">
<view>
<text class="order-text-left">{{coupon.couponName}}</text>
<text class="order-text-right">{{couponList.length ? ('-￥'+coupon.discountAmount) : '无可用优惠券'}}</text>
</view>
</u-cell-item>
<u-field label="备注" v-model="notes" placeholder="请输入备注" :border-bottom="false" label-align="right" label-width="170"
:field-style="{marginLeft: '16px'}"></u-field>
</u-cell-group>
</view>
<view class="pay-info">
<text class="pay-text">共{{getAllGoodsNumber()}}件</text>
<text class="pay-text">总计</text>
<text class="pay-price">￥{{orderType == 1 ? getAllGoodsPrice() : paySum}}</text>
</view>
</view>
<view class="handle-box">
<view class="handle-info">
<text class="handle-text" style="margin-right: 12px;">共{{getAllGoodsNumber()}}件</text>
<text class="handle-text">合计：</text>
<text class="handle-price">￥{{orderType == 1 ? getAllGoodsPrice() : paySum}}</text>
</view>
<view class="handle-button" @click="submitOrder()">提交订单</view>
</view>
<uni-popup ref="popup" type="bottom">
<view class="coupon-box">
<view class="coupon-row" v-for="(item, index) in couponList" :key="index" @click="selectCoupon(item)">
<view class="coupon-left">
<view class="coupon-left-price"><text style="font-size: 16px;">￥</text>{{item.discountAmount}}</view>
<view class="coupon-left-text">满减金额</view>
</view>
<view class="coupon-info">
<view class="coupon-text1">{{item.couponName}}</view>
<view class="coupon-text1" style="margin-bottom: 4px;">满{{item.fullAmount}}减{{item.discountAmount}}</view>
<view class="coupon-text2">{{item.couponType == 1 ? '仅限用于' + item.supplierName + '的店铺' : ''}}</view>
<view class="coupon-text2" style="color: #999999;">有效期：{{item.publishStartTime}}~{{item.useEndTime}}</view>
</view>
</view>
</view>
</uni-popup>
<u-top-tips ref="uTips"></u-top-tips>
</view>
</template>
<script>
const NET = require('@/utils/request')
const API = require('@/config/api')
export default {
data() {
return {
flag: 1,
orderType: 1,
addressData: {
memberAddressId: '',
username: '',
phone: '',
province: '',
city: '',
area: '',
address: '',
},
userData: {},
orderData: {
tenantCode: '',
supplierName: '',
areaSize: '',
term: '',
goodsList: []
},
integral: 0,
coupon: {
couponId: '',
couponName: '',
discountAmount: 0,
couponType: '',
},
couponList: [],
notes: '',
paySum: 0,
mineIntegral: {},
orderId: ''
}
},
onLoad(options) {
this.orderType = options.orderType
this.paySum = options.paySum ? options.paySum : 0
this.flag = options.flag
this.userData = uni.getStorageSync("userData")
this.orderData = uni.getStorageSync("orderData")
if (!uni.getStorageSync("defaultAddress")) {
NET.request(API.getAddressList, {}, 'POST').then(res => {
if (res.data.find(site => site.isDefault == 1)) {
let address = res.data.find(site => site.isDefault == 1)
this.addressData = {
memberAddressId: address.id,
username: address.username,
phone: address.phone,
province: address.province,
city: address.city,
area: address.area,
address: address.address
}
}
}).catch(error => {
this.$refs.uTips.show({
title: '获取默认地址失败',
type: 'warning',
})
})
}
if (this.orderType == 1) {
NET.request(API.getIntegral, {}, 'POST').then(res => {
this.integral = res.data.usableIntegral
}).catch(error => {
this.$refs.uTips.show({
title: '获取个人积分失败',
type: 'warning',
})
})
NET.request(API.getUsableCouponList, {
tenantCode: this.orderData.tenantCode,
totalPrice: this.getAllGoodsInitialPrice(),
}, 'GET').then(res => {
this.couponList = res.data
}).catch(error => {
this.$refs.uTips.show({
title: res.msg,
type: 'warning',
})
})
}
},
onShow() {
if (uni.getStorageSync("defaultAddress")) {
this.addressData = uni.getStorageSync("defaultAddress")
}
},
methods: {
// 获取全部商品原价格
getAllGoodsInitialPrice() {
let price = this.orderData.goodsList.reduce((total, site) => {
return total + site.bizPrice * site.buyNum
}, 0)
return price.toFixed(2)
},
// 获取全部价格
getAllGoodsPrice() {
let price = this.orderData.goodsList.reduce((total, site) => {
return total + site.bizPrice * site.buyNum
}, 0)
return (price - this.coupon.discountAmount - (this.getIntegral() / 100)).toFixed(2)
},
// 获取全部商品数量
getAllGoodsNumber() {
let number = this.orderData.goodsList.reduce((total, site) => {
return total + site.buyNum
}, 0)
return number
},
// 选择地址
selectAddress() {
uni.navigateTo({
url: '/pagesMain/addressList?type=2'
});
},
// 获取积分
getIntegral() {
let price = this.orderData.goodsList.reduce((total, site) => {
return total + site.bizPrice * site.buyNum
}, 0) - this.coupon.discountAmount
if (this.integral / 100 > price) {
return price * 100
} else {
return this.integral
}
},
// 显示优惠券弹窗
showCoupon() {
if (!this.couponList.length) {
return
}
this.$refs.popup.open()
},
// 选择优惠券
selectCoupon(item) {
this.coupon = {
couponId: item.couponId,
couponName: item.couponName,
discountAmount: parseFloat(item.discountAmount).toFixed(2),
couponType: item.couponType,
}
this.$refs.popup.close()
},
// 提交订单
submitOrder() {
if (!this.addressData.username) {
this.$refs.uTips.show({
title: '请选择地址',
type: 'warning',
})
} else {
NET.request(API.submitOrder, {
// 会员
mid: this.userData.userId,
nickname: this.userData.userName,
// 地址
...this.addressData,
// 商铺
supplierName: this.orderData.supplierName,
tenantCode: this.orderData.tenantCode,
// 商品
productIds: this.orderData.goodsList.map(site => {
return site.productId
}).join(','),
productType: this.orderData.goodsList.map(site => {
return site.productType
}).join(','),
products: this.orderData.goodsList.map(site => {
return {
...site,
supplierName: this.orderData.supplierName,
tenantCode: this.orderData.tenantCode,
bizPrice: this.orderType == 1 ? site.bizPrice : this.paySum,
}
}),
// 优惠券
couponId: this.orderType == 1 ? this.coupon.couponId : '',
couponDiscountAmount: this.orderType == 1 ? this.coupon.discountAmount : '',
couponType: this.orderType == 1 ? this.coupon.couponType : '',
// 积分
integralValue: this.orderType == 1 ? this.getIntegral() : 0,
integralAmount: this.orderType == 1 ? this.getIntegral() / 100 : 0,
// 金额
discountAmount: this.orderType == 1 ? (parseFloat(this.coupon.discountAmount) + (this.getIntegral() / 100)) : 0,
orderSum: this.orderType == 1 ? this.orderData.goodsList.reduce((total, site) => {
return total + site.bizPrice * site.buyNum
}, 0) : this.paySum,
paySum: this.orderType == 1 ? this.getAllGoodsPrice() : this.paySum,
// 支付类型
flag: this.flag,
orderType: this.orderType,
// 备注
notes: this.notes,
}, 'POST').then(res => {
if (res.isSuccess) {
if (res.data) {
this.orderId = res.data.orderId
uni.requestPayment({
provider: 'wxpay',
timeStamp: res.data.timeStamp,
nonceStr: res.data.nonceStr,
package: res.data.packageValue,
signType: res.data.signType,
paySign: res.data.paySign,
success: (payRes) => {
console.log('success:' + JSON.stringify(payRes));
uni.redirectTo({
url: '/pagesMain/paySuccess?orderId=' + this.orderId
});
},
fail: (error) => {
console.log('fail:' + JSON.stringify(error));
this.$refs.uTips.show({
title: '支付未成功',
type: 'warning',
})
setTimeout(() => {
uni.redirectTo({
url: '/pagesMain/orderDetail?orderId=' + this.orderId + '&orderStatus=' + 1
});
}, 1000)
}
})
} else {
uni.redirectTo({
url: '/pagesMain/paySuccess'
});
}
}
}).catch(error => {
console.log('error提交订单失败:', error);
this.$refs.uTips.show({
title: error.data.msg,
type: 'warning',
})
})
}
},
},
}
</script>
<style lang="less" scoped>
page {
width: 100%;
height: 100%;
}
.container {
width: 100%;
height: 100%;
float: left;
background-color: #f7f7f7;
box-sizing: border-box;
padding-bottom: 70px;
overflow-y: auto;
.address-info-box {
width: calc(100% - 32px);
float: left;
box-sizing: border-box;
padding: 16px 18px 16px 16px;
margin: 10px 16px;
background: #FFFFFF;
border-radius: 10px;
.address-icon {
width: 36px;
height: 40px;
float: left;
align-items: center;
display: flex;
.iconfont {
color: #52A63A;
font-size: 36px;
}
}
.address-content {
width: calc(100% - 66px);
height: 40px;
float: left;
margin: 0 8px 0 12px;
.address-info {
height: 20px;
font-family: PingFang SC;
line-height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.address-name {
font-size: 16px;
color: #333333;
margin-right: 14px;
}
.address-phone {
font-size: 12px;
color: #666666;
}
}
.address-detail {
height: 20px;
font-size: 16px;
font-family: PingFang SC;
color: #333333;
line-height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.address-link {
width: 10px;
height: 40px;
float: left;
align-items: center;
display: flex;
.iconfont {
color: #999999;
font-size: 12px;
}
}
}
.goods-info-box {
width: calc(100% - 32px);
float: left;
margin: 0 16px 10px 16px;
background: #FFFFFF;
border-radius: 10px;
.shop-info {
width: 100%;
height: 48px;
float: left;
box-sizing: border-box;
padding: 13px 15px 12px 15px;
border-bottom: 1px solid #EEEEEE;
line-height: 22px;
.icondianpu {
font-size: 22px;
color: #333333;
}
.shop-name {
font-size: 15px;
font-family: PingFang SC;
color: #333333;
margin: 0 8px 0 10px;
}
.iconshangjia {
font-size: 12px;
color: #999999;
}
}
.goods-list {
width: 100%;
float: left;
box-sizing: border-box;
padding: 10px 15px 0 15px;
.goods-row {
width: 100%;
height: 90px;
float: left;
display: flex;
margin-bottom: 10px;
.goods-img {
width: 90px;
height: 90px;
border-radius: 5px;
object-fit: cover;
}
.goods-info {
width: calc(100% - 106px);
height: 90px;
margin-left: 16px;
.goods-name {
width: 100%;
height: 36px;
float: left;
font-size: 14px;
font-family: PingFang SC;
color: #333333;
line-height: 18px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-wrap: break-word;
}
.goods-type {
height: 20px;
float: left;
background: #F0F0F0;
border-radius: 4px;
padding: 0 8px;
margin: 6px 0;
font-size: 10px;
font-family: PingFang SC;
color: #666666;
line-height: 20px;
}
.plant-area {
height: 20px;
float: right;
margin: 6px 0;
font-size: 12px;
font-family: PingFang SC;
color: #333333;
}
.goods-price-number {
width: 100%;
height: 20px;
float: left;
line-height: 20px;
font-family: PingFang SC;
color: #333333;
.goods-unit {
font-size: 12px;
}
.goods-price {
font-size: 15px;
margin-right: 6px;
}
.goods-number {
font-size: 12px;
}
}
.plant-text {
float: right;
font-size: 12px;
font-family: PingFang SC;
color: #333333;
}
}
}
}
.order-info {
width: 100%;
float: left;
.order-text-left {
font-size: 13px;
font-family: PingFang SC;
color: #666666;
float: left;
margin-left: 16px;
}
.order-text-right {
font-size: 13px;
font-family: PingFang SC;
color: #52A63A;
}
/deep/.u-cell_title {
color: #333333;
}
/deep/.u-label-text {
color: #333333;
}
}
.pay-info {
width: 100%;
height: 46px;
float: left;
box-sizing: border-box;
border-top: 1px solid #EEEEEE;
padding-right: 15px;
line-height: 44px;
font-family: PingFang SC;
font-size: 14px;
text-align: right;
white-space: nowrap;
.pay-text {
color: #333333;
margin-right: 6px;
}
.pay-price {
color: #52A63A;
}
}
}
.handle-box {
width: 100%;
height: 70px;
box-sizing: border-box;
padding: 15px 0 15px 16px;
position: fixed;
bottom: 0;
background: #FFFFFF;
box-shadow: 0px 3px 13px 0px rgba(0, 0, 0, 0.15);
.handle-info {
width: calc(100% - 110px);
height: 40px;
float: left;
line-height: 40px;
font-family: PingFang SC;
text-align: left;
white-space: nowrap;
.handle-text {
font-size: 16px;
color: #666666;
}
.handle-price {
font-size: 15px;
color: #52A63A;
}
}
.handle-button {
width: 100px;
height: 40px;
float: right;
box-sizing: border-box;
padding-left: 10px;
background: #52A63A;
border-radius: 20px 0px 0px 20px;
font-size: 15px;
font-family: PingFang SC;
color: #FFFFFF;
line-height: 40px;
text-align: center;
}
}
.coupon-box {
width: 100vw;
height: 500px;
background-color: #FFFFFF;
border-radius: 15px 15px 0px 0px;
box-sizing: border-box;
padding: 16px 16px 0 16px;
overflow-y: auto;
.coupon-row {
width: 100%;
height: 105px;
float: left;
margin-bottom: 10px;
border-radius: 10px;
background: #FFFFFF;
box-shadow: 0px 0px 10px 0px rgba(103, 103, 103, 0.3);
overflow: hidden;
.coupon-left {
width: 107px;
height: 105px;
box-sizing: border-box;
padding-right: 10px;
float: left;
background-size: 107px 105px;
background-position: center;
background-repeat: no-repeat;
background-image: url(@/static/images/couponHead.png);
.coupon-left-price {
width: 100%;
height: 24px;
float: left;
margin: 28px 0 12px 0;
font-size: 24px;
font-family: PingFang SC;
color: #FFFFFF;
line-height: 24px;
text-align: center;
}
.coupon-left-text {
width: 100%;
height: 20px;
float: left;
color: #FFFFFF;
font-size: 12px;
font-family: PingFang SC;
line-height: 20px;
text-align: center;
}
}
.coupon-info {
width: calc(100% - 115px);
height: 100%;
float: right;
box-sizing: border-box;
padding: 16px 0 12px 0;
.coupon-text1 {
width: 100%;
height: 20px;
float: right;
font-size: 15px;
font-family: PingFang SC;
color: #333333;
line-height: 20px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.coupon-text2 {
width: 100%;
height: 18px;
float: right;
font-size: 13px;
font-family: PingFang SC;
color: #EB5F2F;
line-height: 18px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
}
}
}
}
</style>