init
This commit is contained in:
砂糖
227
fuintUniapp/pages/settlement/index.vue
Normal file
227
fuintUniapp/pages/settlement/index.vue
Normal file
@@ -0,0 +1,227 @@
|
||||
<template>
|
||||
<view class="container p-bottom">
|
||||
<!-- 清单列表 -->
|
||||
<view class="m-top20">
|
||||
<view v-for="(item, index) in storeRule" :key="index" class="checkout_list">
|
||||
<view class="flow-shopList dis-flex">
|
||||
<view class="flow-list-right flex-box">
|
||||
<text class="goods-name twolist-hidden">预存￥{{ item.store }} 到账 ￥{{ item.upStore }}</text>
|
||||
<view class="flow-list-cont dis-flex flex-x-between flex-y-center">
|
||||
<text class="small">X{{ item.num }} </text>
|
||||
<text class="flow-cont">￥{{ item.amount.toFixed(2) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flow-num-box b-f">
|
||||
<text>共{{ totalNum }}张，合计：</text>
|
||||
<text class="flow-money col-m">￥{{ totalAmount.toFixed(2) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 支付方式 -->
|
||||
<view class="pay-method flow-all-money b-f m-top20">
|
||||
<view class="flow-all-list dis-flex">
|
||||
<text class="flex-five">支付方式</text>
|
||||
</view>
|
||||
<!-- 微信支付 -->
|
||||
<view class="pay-item dis-flex flex-x-between" @click="handleSelectPayType(PayTypeEnum.WECHAT.value)">
|
||||
<view class="item-left dis-flex flex-y-center">
|
||||
<view class="item-left_icon wechat">
|
||||
<text class="iconfont icon-weixinzhifu"></text>
|
||||
</view>
|
||||
<view class="item-left_text">
|
||||
<text>{{ PayTypeEnum.WECHAT.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-right col-m" v-if="curPayType == PayTypeEnum.WECHAT.value">
|
||||
<text class="iconfont icon-duihao"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 买家留言 -->
|
||||
<view class="flow-all-money b-f m-top20">
|
||||
<view class="ipt-wrapper">
|
||||
<textarea v-model="remark" rows="3" maxlength=100 placeholder="买家留言 (选填,100字以内)" type="text"></textarea>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 提交订单 -->
|
||||
<view class="flow-fixed-footer b-f m-top10">
|
||||
<view class="dis-flex chackout-box">
|
||||
<view class="chackout-left pl-12">
|
||||
<view class="col-amount-do">应付金额：￥{{ totalAmount.toFixed(2) }}</view>
|
||||
<view class="col-amount-view">实得金额：￥{{ getTotalAmount.toFixed(2) }}</view>
|
||||
</view>
|
||||
<view class="chackout-right" @click="onSubmitOrder()">
|
||||
<view class="flow-btn f-32" :class="{ disabled }">提交订单</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as Verify from '@/utils/verify'
|
||||
import * as CouponApi from '@/api/coupon'
|
||||
import * as SettlementApi from '@/api/settlement'
|
||||
import PayTypeEnum from '@/common/enum/order/PayType'
|
||||
import { wxPayment } from '@/utils/app'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 枚举类
|
||||
PayTypeEnum,
|
||||
// 当前页面参数
|
||||
options: {},
|
||||
// 当前选中的支付方式
|
||||
curPayType: PayTypeEnum.WECHAT.value,
|
||||
// 买家留言
|
||||
remark: '',
|
||||
// 禁用submit按钮
|
||||
disabled: false,
|
||||
// 按钮禁用
|
||||
disabled: false,
|
||||
couponId: 0,
|
||||
selectNum: "",
|
||||
storeRule: [],
|
||||
totalAmount: 0,
|
||||
getTotalAmount: 0,
|
||||
totalNum: 0
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
this.options = options
|
||||
this.couponId = options.couponId
|
||||
this.selectNum = options.selectNum
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {
|
||||
// 获取当前订单信息
|
||||
this.getCouponDetail()
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
// 获取卡券信息
|
||||
getCouponDetail() {
|
||||
const app = this
|
||||
return new Promise((resolve, reject) => {
|
||||
CouponApi.detail(app.couponId)
|
||||
.then(result => {
|
||||
app.initData()
|
||||
app.couponInfo = result.data
|
||||
let ruleItem = app.couponInfo.inRule.split(",")
|
||||
let selected = app.selectNum.split(",")
|
||||
ruleItem.forEach(function(item, index) {
|
||||
let rule = item.split("_")
|
||||
let num = selected[index]
|
||||
let amount = parseFloat(rule[0]) * num
|
||||
app.totalAmount += parseFloat(amount)
|
||||
app.getTotalAmount += parseFloat(rule[1] * num)
|
||||
app.totalNum += parseInt(num)
|
||||
if (num > 0) {
|
||||
app.storeRule.push({"store": parseFloat(rule[0]), "num": parseInt(num), "amount": parseFloat(amount), "upStore": parseFloat(rule[1])})
|
||||
}
|
||||
})
|
||||
resolve(result)
|
||||
})
|
||||
.catch(err => reject(err))
|
||||
})
|
||||
},
|
||||
|
||||
initData() {
|
||||
this.storeRule = [],
|
||||
this.totalAmount = 0,
|
||||
this.getTotalAmount = 0,
|
||||
this.totalNum = 0
|
||||
},
|
||||
|
||||
// 选择支付方式
|
||||
handleSelectPayType(value) {
|
||||
this.curPayType = value
|
||||
},
|
||||
|
||||
// 订单提交
|
||||
onSubmitOrder() {
|
||||
const app = this
|
||||
if (app.disabled) {
|
||||
app.$toast('请勿重复提交订单哦');
|
||||
return false
|
||||
}
|
||||
// 表单验证
|
||||
if (!app.onVerifyFrom()) {
|
||||
return false
|
||||
}
|
||||
// 按钮禁用
|
||||
app.disabled = true
|
||||
// 请求api
|
||||
SettlementApi.submit(app.couponId, app.selectNum, "prestore", app.remark, 0, 0, 0, "", 0, 0, 0, "", "JSAPI")
|
||||
.then(result => app.onSubmitCallback(result))
|
||||
.catch(err => {
|
||||
if (err.result) {
|
||||
const errData = err.result.data
|
||||
if (errData.isCreated) {
|
||||
app.navToMyOrder(errData.orderInfo.id)
|
||||
return false
|
||||
}
|
||||
}
|
||||
app.disabled = false
|
||||
})
|
||||
},
|
||||
|
||||
// 订单提交成功后回调
|
||||
onSubmitCallback(result) {
|
||||
const app = this
|
||||
// 发起微信支付
|
||||
if (result.data.payType == PayTypeEnum.WECHAT.value) {
|
||||
wxPayment(result.data.payment)
|
||||
.then(() => app.$success('支付成功'))
|
||||
.catch(err => app.$error('支付失败'))
|
||||
.finally(() => {
|
||||
app.disabled = false
|
||||
app.navToMyOrder(result.data.orderInfo.id)
|
||||
})
|
||||
}
|
||||
|
||||
// 余额支付
|
||||
if (result.data.payType == PayTypeEnum.BALANCE.value) {
|
||||
app.$success('支付成功')
|
||||
app.disabled = false
|
||||
app.navToMyOrder(result.data.orderInfo.id)
|
||||
}
|
||||
},
|
||||
|
||||
// 跳转到我的订单(等待1秒)
|
||||
navToMyOrder(orderId) {
|
||||
setTimeout(() => {
|
||||
this.$navTo('pages/order/detail?orderId='+orderId)
|
||||
}, 1000)
|
||||
},
|
||||
|
||||
// 表单验证
|
||||
onVerifyFrom() {
|
||||
const app = this
|
||||
if (app.hasError) {
|
||||
app.$toast(app.errorMsg)
|
||||
return false
|
||||
}
|
||||
return true
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "./style.scss";
|
||||
</style>
|
||||
Reference in New Issue
Block a user