123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225 |
- <template>
- <page-container
- :show="showModal"
- :round="true"
- :z-index="100"
- position="bottom"
- customStyle="border-radius:15px 15px 0 0;"
- @beforeleave="beforeClose"
- @afterleave="closePopu">
- <view class="popu-content" v-if="payInfo">
- <view class="popu-close" @click="cancelPay">
- <uni-icons size="26" type="closeempty"></uni-icons>
- </view>
- <view class="pupu-box-pay-item">
- <view class="popu-content-amount flex align_center justify_center">
- <view>¥{{payInfo.totalAmount}}</view>
- </view>
- <view class="flex align_center justify_between" v-if="payInfo.totalSpecialGiveAmount>0">
- <text>总优惠</text>
- <view class="popu-content-price">¥{{payInfo.totalSpecialGiveAmount}}</view>
- </view>
- <view class="flex align_center justify_between" v-if="payInfo.totalTicketGiveAmount>0">
- <text>代金券</text>
- <view class="popu-content-price">¥{{payInfo.totalTicketGiveAmount}}</view>
- </view>
- <view style="height: 5px;"></view>
- <view class="popu-content-title flex align_center justify_between">
- <text>付款方式</text>
- <view></view>
- </view>
- <view class="popu-content-pay flex align_center justify_between">
- <view class="flex align_center"><uni-icons size="20" type="weixin" color="#4CAF50"></uni-icons> <text style="margin-left: 5px;">微信支付</text></view>
- <view><uni-icons size="22" type="checkbox-filled" color="red"></uni-icons></view>
- </view>
- </view>
- <view class="popu-content-btn">
- <view class="popu-content-btn-item okbtn" @click="confirmPay">确定付款</view>
- </view>
- </view>
- </page-container>
- </template>
- <script>
- export default {
- props: {
- showPopu: {
- type: Boolean,
- default: false
- },
- payInfo: {
- type: Object,
- default: ()=>{
- return null
- }
- },
- payData: {
- type: Object,
- default: ()=>{
- return null
- }
- },
- cancelPayMessage: {
- type: String,
- default: '您的订单在30分钟内未支付将被取消,请尽快完成支付。'
- },
- closeCurPage:{
- type: Boolean,
- default: false
- }
- },
- data() {
- return {
- submitOk: false,
- showModal: this.showPopu
- }
- },
- watch: {
- showPopu(val){
- this.showModal = val
- if(val){
- this.submitOk = false
- }
- },
- showModal(val){
- if(!val){
- this.$emit('close', val)
- }
- }
- },
- methods: {
- beforeClose(){
- if(this.showModal){
- this.cancelPay()
- }
- },
- // 关闭确定订单弹窗后
- closePopu(){
- if(!this.showModal){
- if(this.closeCurPage){
- uni.navigateBack()
- }
- // 确认付款,去订单详情页
- if(this.submitOk){
- this.$emit('payComplete',this.payInfo, true)
- }else{
- this.$emit('payComplete',this.payInfo, false)
- }
- }
- this.showModal = false
- },
- // 确认取消付款弹框
- cancelPay(){
- const _this = this
- uni.showModal({
- title: '确定取消支付吗?',
- content: _this.cancelPayMessage,
- confirmText: '继续支付',
- cancelText: '取消支付',
- success(ret) {
- // 确定取消,跳转到订单详情页
- if(ret.cancel){
- if(_this.showModal){
- _this.showModal = false
- _this.submitOk = false
- }else{
- if(_this.closeCurPage){
- uni.navigateBack()
- }
- _this.$emit('payComplete',_this.payInfo, false)
- }
- }
- // 继续支付
- if(ret.confirm){
- // 继续支付
- if(!_this.showModal){
- _this.showModal = true
- _this.submitOk = false
- }
- }
- }
- })
- },
- // 确认付款
- confirmPay(){
- const _this = this
- // uni.showLoading({
- // title: '正在支付...',
- // mask: true
- // })
- // 确认付款
- const data = _this.payData
- uni.showToast({
- mask: true,
- title: data ? '支付成功' : '支付失败',
- icon: 'none'
- })
- _this.showModal = false
- _this.submitOk = data
- },
- }
- }
- </script>
- <style lang="less">
- .popu-content{
- display: flex;
- flex-direction: column;
- align-items: center;
- padding: 10px 15px;
- .popu-close{
- padding: 10px;
- position: absolute;
- right: 0;
- top: 0;
- z-index: 1000;
- }
- .pupu-box-item,.pupu-box-pay-item{
- width: 100%;
- > view{
- padding: 10px 0;
- }
- }
- .pupu-box-pay-item{
- > view{
- padding: 6px 0;
- }
- .popu-content-amount{
- font-size: 24px;
- color: red;
- padding-top: 30px;
- }
- .popu-content-title{
- font-weight: bold;
- }
- }
- .popu-content-btn{
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: space-around;
- margin: 20px 0 10px;
- .popu-content-btn-item{
- width: 30%;
- height: 34px;
- font-size: 14px;
- display: flex;
- align-items: center;
- justify-content: center;
- border-radius: 100px;
- }
- .cancelBtn{
- background-color: #f8f8f8;
- color: #666;
- }
- .okbtn{
- background-color: #f70000;
- color: #FFFFFF;
- width: 65%;
- .payAmount{
- margin-left: 5px;
- }
- }
- }
- }
- </style>
|