<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" @click="goAdd()"> <view class="dis"> <view class="boximg"> <image src="../../static/imgs/telicon.png" style="width: 30px; height: 30px;margin-right: 10px; "></image> </view> <view style="display: flex;align-items: center;"> <view class="">{{addrInfo.name || '--'}}</view> <view class="hui-time"> {{addrInfo.mobile || '--'}} </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">数量:{{value}}</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> </view> </view> </view> <view class="beizhu"> <view style="margin-right: 15px;">订单备注</view> <input type="text" placeholder="选填,请输入备注信息" /> </view> </view> <view class="bottom-box"> <view class=""> <view style="font-weight: 600;font-size: 20px;color: #FA6400;"> <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: { name:'' }, 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.name ) { // 查询默认预留信息 this.getAddress() } console.log(this.addrInfo,181); this.transferIndex(0) // 根据storeId查询店铺信息 this.getInfoByStoreId() // 查询剩余积分 this.getUserInfoList() }, methods: { getAddress() { request({ url: "/business/userManager/mtUserExpressAddress/getDefault", method: 'get', }).then((res) => { this.addrInfo = res.data }) }, // 创建订单并 付款 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 {} .hui-time { font-size: 14px; color: #666666; margin-left: 10px; } .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; } .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: 50px; background: #FF9655; } </style>