oil-station/gasStation-uni/pagesHome/order/order.vue
2024-01-23 14:19:35 +08:00

823 lines
18 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="content">
<view class="container">
<view class="my-header">
<view class="my-icons" @click="goback"> <uni-icons type="left" size="16"></uni-icons> </view>
<view class="my-text">提交订单</view>
<view class="my-icons"></view>
</view>
<!-- 顶部区域 -->
<scroll-view scroll-x="true" class="tap-top">
<view class="sz" v-for="(item,index) in tapList" :key="index" @click="transferIndex(index) ">
<view class="box" :class="{'xztap': qhindex == index}">{{item.text }}</view>
<view class="gang" v-if="qhindex == index"></view>
</view>
</scroll-view>
<view class="box-bai" v-if="qhindex == 0">
<view class="dis">
<!-- <uni-icons type="location-filled" size="20"></uni-icons> -->
<view class="boximg">
<image :src="logo?baseUrl+logo:'../../static/logo.png'" mode="aspectFit"></image>
</view>
<view class="">
<view class="">{{storeName}}</view>
<view class="hui-time">
{{storeAddress}}
</view>
</view>
</view>
<view class="">
<!-- <uni-icons type="right" size="20"></uni-icons> -->
</view>
</view>
<view class="box-bai" v-if="qhindex == 1" @click="goAdd()">
<view class="dis">
<uni-icons type="location-filled" color="#666666" size="30" style="margin-right: 5px;"></uni-icons>
<view v-if="addrInfo" class="">
<view class="">{{addrInfo.name}}--{{addrInfo.mobile}}</view>
<view class="hui-time">
<!-- 山东省济南市槐荫区兴福路 -->
{{addrInfo.address}}
</view>
</view>
<view v-else class="">
<view class="">请选择家庭住址</view>
<!-- <view class="hui-time">
</view> -->
</view>
</view>
<view class="">
<uni-icons type="right" size="20"></uni-icons>
</view>
</view>
<view class="box-bait">
<view class="dis-box">
<view class="goodsimg">
<image :src='baseUrl+goodsInfo.coverImage' mode="aspectFit"></image>
</view>
<view class="">
<view class="">{{goodsInfo.giftName}}</view>
<view class="huyi">市场价:{{goodsInfo.market}}</view>
<view class="btwo">
<view class="">
<span
v-if="goodsInfo.exchangeMethod == '积分' || goodsInfo.exchangeMethod == '积分+金额' || goodsInfo.exchangeMethod == '积分+加钱购'">{{goodsInfo.exchangePoints}}积分</span>
<span v-if="goodsInfo.exchangeMethod == '积分+金额'">+</span>
<span
v-if="goodsInfo.exchangeMethod == '金额' || goodsInfo.exchangeMethod == '积分+金额'">¥{{goodsInfo.exchangeAmount}}</span>
</view>
<view class="">
<u-number-box v-model="value" @change="valChange" button-size="18"
:disablePlus="flag"></u-number-box>
</view>
</view>
</view>
</view>
<view class="endbox">
<view style="color: #666666;font-size: 14px;">{{value}}件商品合计:</view>
<view v-if="allPoints>0" style="color: red;"> <text
style="font-weight: bold;font-size: 20px;">{{allPoints}}</text> 积分
</view>
<span v-if="allAmout>0 && allPoints>0">+</span>
<view v-if="allAmout>0" style="color: red;"> <text
style="font-weight: bold;font-size: 20px;">¥{{allAmout}}</text>
</view>
</view>
<view
v-if="shippingType == '物流配送' && goodsInfo.expressShippingFee == '统一运费' && goodsInfo.shippingFeeAmount && goodsInfo.shippingFeeAmount>0"
class="endbox">
<view style="color: #666666;font-size: 14px;">统一运费: </view>
<view style="color: red;"> <text
style="font-weight: bold;font-size: 18px;">¥{{goodsInfo.shippingFeeAmount}}</text>
</view>
</view>
</view>
<view class="beizhu">
<view style="margin-right: 15px;">备注</view>
<input type="text" placeholder="选填,请输入备注信息" />
</view>
<view class="bottom-box">
<view class="">
<view style="color: red;">
<text v-if="allPoints>0" style="font-weight: bold;font-size: 20px;">{{allPoints}}</text> 积分
<span v-if="allAmout>0 && allPoints>0">+</span>
<text v-if="allAmout>0" style="font-weight: bold;font-size: 20px;">¥{{allAmout}}</text>
</view>
<view style="color: #9d9d9d; font-size: 12px; ">积分账户{{myPoints}}</view>
</view>
<view @click="choose()" class="andeniu">
<text>兑换</text>
</view>
</view>
</view>
</view>
</template>
<script>
import config from '@/config'
import request from '../../utils/request'
import BigNumber from 'bignumber.js'
export default {
data() {
return {
myPoints: 0, //我的积分
goodsInfo: '',
storeName: '',
storeAddress: '',
logo: '',
flag: false, // 禁用
title: '',
qhindex: 0,
value: 1,
baseUrl: config.baseUrl,
allPoints: 0,
allAmout: 0,
orderInfo: {},
addrInfo: {
address: ''
},
appltType: uni.getStorageSync("appltType"),
shippingType: '',
paymentType: '',
storeId: uni.getStorageSync('storeId'),
chainStoreId: uni.getStorageSync('chainStoreId'),
tapList: [{
text: '到店自提'
},
{
text: '快递配送'
}
]
}
},
components: {
},
onLoad() {
uni.$on('goodsInfo', (data) => {
this.goodsInfo = data
console.log("from 11", data)
if (this.goodsInfo != null) {
this.dataProcessing()
this.allData()
}
})
uni.$emit('un')
// 根据storeId查询店铺信息
this.getInfoByStoreId()
},
onShow() {
uni.$on('chooseAddr', (data) => {
this.addrInfo = data
})
uni.$emit('unChooseAddr')
// 当地址信息为空是查询地址
if (!this.addrInfo.address) {
this.getAddr()
}
this.transferIndex(0)
// 根据storeId查询店铺信息
this.getInfoByStoreId()
// 查询剩余积分
this.getUserInfoList()
},
methods: {
// 创建订单并 付款
async choose() {
let _this = this
let integralOrdersList = []
if (_this.value <= 0) {
uni.showToast({
title: "请选择商品!",
icon: "error"
})
return
}
if (_this.appltType == "WECHAT") {
_this.paymentType = "WECHAT"
} else {
_this.paymentType = "ALIPAY"
}
let integralOrders = {
giftId: this.goodsInfo.id,
amount: _this.allAmout,
integral: _this.allPoints,
storeId: _this.storeId,
chainStoreId: _this.chainStoreId,
exchangeQuantity: _this.value,
orderType: 1,
paymentType: _this.paymentType,
shippingType: _this.shippingType,
}
if (this.shippingType == "物流配送") {
if (this.addrInfo) {
integralOrders.addressId = this.addrInfo.id
} else {
uni.showToast({
title: "请填写配送信息!",
icon: "error"
})
}
}
let check = await this.checkTheRedemptionLimit(this.goodsInfo.id)
if (check) {
uni.showToast({
title: "达到兑换上限!",
icon: "error"
})
return
}
integralOrdersList.push(integralOrders)
request({
url: "business/integral/integralOrders/integralOrdersProcessingUni",
method: 'post',
data: {
integralOrdersList: integralOrdersList,
// authCode:this_.authCode,
// paymentType: _this.paymentType,
// paymentType: "WECHAT",
paymentType: _this.appltType,
allAmout: _this.allAmout,
allPoints: _this.allPoints,
chainStoreId: _this.chainStoreId,
storeId: _this.storeId,
},
}).then(res => {
// if (res.data.code === "error") {
if (_this.allAmout == 0) {
uni.reLaunch({
url: '/pagesRefuel/orderSuccess/index'
})
} else if (res.data.code === "success") {
// let payProvider = "wxpay"
// if (_this.appltType == "WECHAT") {
// payProvider = "wxpay"
// } else {
// payProvider = "alipay"
// }
if (res.data.data.reservedPayInfo) {
_this.orderInfo = JSON.parse(res.data.data.reservedPayInfo);
uni.requestPayment({
// 微信支付provider: 'wxpay' 支付宝支付 'alipay'
// provider: payProvider,
provider: 'wxpay',
timeStamp: _this.orderInfo.timeStamp,
nonceStr: _this.orderInfo.nonceStr,
package: _this.orderInfo.package,
signType: 'MD5',
paySign: _this.orderInfo.paySign,
success: function(res) {
console.log('success:', res);
uni.reLaunch({
url: '/pagesRefuel/orderSuccess/index'
})
},
fail: function(err) {
request({
url: "business/integral/integralOrders/editPayStatus",
method: 'get',
data: {
"orderNo": res.data.data.orderNo,
"status": "payFail",
"storeId": -1
},
}).then((res) => {
uni.showToast({
title: "支付失败!",
icon: "error"
})
})
console.log('fail:', err);
}
});
}
if (_this.appltType == "ALIPAY") {
my.tradePay({
tradeNO: res.data.data.reservedTransactionId
}, function(resp) {
console.log("resp", resp)
if (resp.resultCode == '9000') {
console.log("支付成功")
uni.reLaunch({
url: '/pagesRefuel/orderSuccess/index'
})
} else {
uni.showToast({
title: "支付失败!",
icon: "error"
})
}
});
}
} else {
uni.showToast({
title: "支付失败!",
icon: "error"
})
}
})
},
dataProcessing() {
if (this.goodsInfo.deliveryMethod != null && this.goodsInfo.deliveryMethod != undefined) {
const deliveryData = JSON.parse(this.goodsInfo.deliveryMethod);
this.deliveryMethod = deliveryData.join('+');
} else {
this.deliveryMethod = '无配送信息'
}
},
async valChange(e) {
// 判断是否达到领取上限
// let flag = await this.checkTheRedemptionLimit(this.goodsInfo.id)
let flag = await this.enquiryForCollection(this.goodsInfo.id)
let num = e.value + Number(flag)
//判断库存
if (num > this.goodsInfo.exchangeTimes) {
uni.showToast({
title: "已达到兑换上限!",
icon: "none"
})
e.value = this.goodsInfo.exchangeTimes - flag
this.value = this.goodsInfo.exchangeTimes - flag
this.flag = true
this.allData()
return
} else if (e.value >= this.goodsInfo.remainingInventory && this
.goodsInfo.remainingInventory != -
1) { // -1为无限库存
uni.showToast({
title: "库存不足!",
icon: "none"
})
e.value = this.goodsInfo.remainingInventory
this.value = this.goodsInfo.remainingInventory
this.flag = true
this.allData()
} else {
this.flag = false
this.value = e.value
this.allData()
}
},
transferIndex(index) {
// this.qhindex = index
const deliveryData = JSON.parse(this.goodsInfo.deliveryMethod);
console.log("deliveryData", deliveryData)
if (deliveryData.length >= 2) {
deliveryData[0] = '门店自提'
deliveryData[1] = '物流配送'
this.shippingType = deliveryData[index]
this.qhindex = index
} else if (deliveryData[0] == '门店自提') {
this.shippingType = "门店自提"
if (index == 1) {
uni.showToast({
title: "该商品只支持到店自提!",
icon: "none"
})
}
this.qhindex = 0
} else if (deliveryData[0] == '物流配送') {
this.shippingType = "物流配送"
this.qhindex = 1
if (index == 0) {
uni.showToast({
title: "该商品只支持物流配送!",
icon: "none"
})
}
}
this.allData()
},
goAdd() {
uni.navigateTo({
url: '/pagesHome/Address/Address'
})
},
goback() {
uni.navigateBack()
},
// 金额计算
allData() {
this.allPoints = 0
this.allAmout = 0
console.log("this.shippingType", this.shippingType)
if (this.shippingType == "物流配送" &&
this.goodsInfo.expressShippingFee == '统一运费' && this.goodsInfo
.shippingFeeAmount &&
this.goodsInfo.shippingFeeAmount >
0
) {
this.allAmout = this.goodsInfo.shippingFeeAmount
}
console.log("allAmout", this.allAmout)
console.log("shippingFeeAmount", this.goodsInfo
.shippingFeeAmount)
let allPoints = new BigNumber(0)
if (this.goodsInfo.exchangePoints) {
allPoints = new BigNumber(this.goodsInfo.exchangePoints)
}
let value = new BigNumber(this.value)
allPoints = allPoints.times(value)
console.log("allPoints", allPoints)
if (this.goodsInfo.exchangeMethod == '积分+金额' || this.goodsInfo.exchangeMethod == '金额') {
let allAmout = new BigNumber(this.goodsInfo.exchangeAmount)
allAmout = allAmout.times(value)
if (this.goodsInfo.exchangePoints < 0) {
allAmout = 0
}
let all = allAmout.plus(this.allAmout)
this.allAmout = Number(all).toFixed(2);
}
// 计算加钱购
if (this.goodsInfo.exchangeMethod === '积分+加钱购') {
// 拿到总的积分
this.myPoints = this.myPoints ? this.myPoints : 0
let points = this.myPoints - allPoints; // 使用 toNumber() 获取 BigNumber 的数值
// 以及分等一多少
if (points <= 0) {
// 计算需要的金额
points = Math.abs(points);
let sum = points * this.goodsInfo.moneyRatio.toFixed(2); // 直接使用 JavaScript 中的乘法
this.allAmout = this.allAmout + sum
this.allPoints = this.myPoints;
} else {
// this.allAmout = 0
this.allPoints = Number(allPoints).toFixed(2);
}
return
}
// 更新组件的值
this.allPoints = Number(allPoints).toFixed(2);
},
async getAddr() {
await request({
url: 'business/userManager/mtUserExpressAddress/getList',
method: 'get',
}).then((res) => {
if (res.code == 200) {
console.log("res", res.data)
if (res.data.length > 0) {
this.addrInfo = res.data[0]
} else {
this.addrInfo.address = '请填写地址'
}
}
})
},
// 查询我的积分
getUserInfoList() {
console.log("查询我的积分", this.chainStoreId)
request({
url: '/business/userManager/user/getByUniApp',
method: 'get',
params: {
chainStoreId: this.chainStoreId
}
}).then((res) => {
if (res.code == 200) {
this.myPoints = res.data.points
this.allData()
}
})
},
// 根据storeid 查找店铺信息
// getStroeById() {
// request({
// url: 'business/storeInformation/store/storeInfoUni',
// method: 'get',
// params: {
// storeId: uni.getStorageSync('storeId')
// }
// }).then((res) => {
// if (res.code == 200) {
// this.myPoints = res.data.points
// }
// })
// },
// 根据storeId查询店铺信息
getInfoByStoreId() {
request({
url: '/business/storeInformation/store/storeInfoUni',
method: 'get',
params: {
storeId: uni.getStorageSync('storeId')
}
}).then((res) => {
if (res.code == 200) {
this.storeName = res.data.name
this.storeAddress = res.data.address
this.logo = res.data.logo
}
})
},
// 查询该商品是否达到个人的兑换上限
async checkTheRedemptionLimit(giftId) {
let flag = false;
await request({
url: 'business/integral/integralOrders/checkTheRedemptionLimit',
method: 'get',
params: {
giftId: giftId
}
}).then((res) => {
if (res.code == 200) {
flag = res.data
}
})
return flag
},
// 查询该商品是否达到个人的兑换上限
async enquiryForCollection(giftId) {
let flag = 0;
await request({
url: 'business/integral/integralOrders/enquiryForCollection',
method: 'get',
params: {
giftId: giftId
}
}).then((res) => {
if (res.code == 200) {
flag = res.data
}
})
return flag
}
}
}
</script>
<style scoped lang="scss">
.content {
background: #f4f5f6;
}
.container {
width: 100%;
height: 100vh;
box-sizing: border-box;
padding-top: 88px;
}
.my-header {
width: 100%;
height: 88px;
background: #ffffff;
display: flex;
align-items: center;
justify-content: space-between;
color: #000;
box-sizing: border-box;
padding: 0px 15px;
padding-top: 40px;
.my-icons {
width: 20px;
}
position: fixed;
top: 0px;
}
.dis {
display: flex;
align-items: center;
}
.tap-top {
box-sizing: border-box;
padding-top: 10px;
width: 100%;
// padding-bottom: 22rpx;
padding-bottom: 10px;
background: #ffffff;
border-bottom: 1px solid #EEEEEE;
white-space: nowrap;
.sz {
width: 50%;
display: inline-block;
}
.box {
// margin: 0 auto;
text-align: center;
font-size: 32rpx;
margin-right: 50rpx;
line-height: 32rpx;
text-align: center;
// font-weight: bold;
color: #666666;
margin: 0 auto;
margin-bottom: 20rpx;
}
}
.xztap {
color: #333333 !important;
font-weight: bold !important;
}
.gang {
width: 128rpx;
height: 8rpx;
margin: 0 auto;
background: #1678ff;
border-radius: 14rpx;
}
.box-bai {
width: 100%;
height: 60px;
background: #ffffff;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: 0px 20px;
}
.box-bait {
width: 100%;
background: #ffffff;
box-sizing: border-box;
padding: 15px;
margin: 20px auto;
}
.boximg {
width: 40px;
height: 40px;
border-radius: 8px;
background-color: #1678ff;
margin-right: 10px;
image {
width: 100%;
height: 100%;
}
}
.hui-time {
font-size: 14px;
color: #666666;
}
.dis-box {
display: flex;
}
.goodsimg {
width: 75px;
height: 75px;
overflow: hidden;
margin-right: 10px;
image {
width: 100%;
height: 100%;
}
}
.endbox {
margin-top: 15px;
width: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
}
.btwo {
width: 240px;
display: flex;
justify-content: space-between;
}
.huyi {
font-size: 14px;
margin: 5px auto;
color: #999999;
}
.red {
color: red;
}
.beizhu {
background-color: #ffffff;
display: flex;
align-items: center;
box-sizing: border-box;
padding: 15px 20px;
}
.bottom-box {
width: 100%;
height: 88px;
background: white;
box-sizing: border-box;
padding: 20px;
display: flex;
align-items: center;
justify-content: space-between;
position: fixed;
bottom: 0px;
z-index: 99999;
}
.andeniu {
width: 100px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
border-radius: 4px;
background: #1678ff;
}
</style>