96 lines
3.8 KiB
Vue
96 lines
3.8 KiB
Vue
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<!-- 状态栏 -->
|
|||
|
|
<status-nav :titleVal="'立即支付'" :statusTitle="true"></status-nav>
|
|||
|
|
<view :style="{paddingTop: statusHNH+'px'}" class="pad-zy30" style="padding-bottom: 150rpx;">
|
|||
|
|
<view v-if="!isSuccess">
|
|||
|
|
<!-- 订单信息 -->
|
|||
|
|
<view class="bacf radius20 mar-s20" style="padding: 27rpx 20rpx;">
|
|||
|
|
<view class="bold fon28">订单支付</view>
|
|||
|
|
<view class="fon26 col3 disjbac pad-sx50 disjbac bbot">
|
|||
|
|
<image src="/static/public/banner.png" class="flexs" style="width: 166rpx;height: 166rpx;border-radius: 15rpx;margin-right: 12rpx;" mode="aspectFill"></image>
|
|||
|
|
<view class="width100">
|
|||
|
|
<view class="fon28 col3 bold clips2">【99皮皮节】【种植发际线】1000单位FUE技术案例招募门美人</view>
|
|||
|
|
<view style="font-size: 22rpx;color: #808080;font-weight: 500;">试用</view>
|
|||
|
|
<view class="disjbac mar-s10">
|
|||
|
|
<view style="color: #F85050;font-size: 32rpx;font-weight: bold;">￥3888</view>
|
|||
|
|
<view class="fon28 col6">x2</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="fon28 disjbac" style="margin: 60rpx 0 20rpx 0;">
|
|||
|
|
<view class="col6">共4件</view>
|
|||
|
|
<view style="font-weight: bold;color: #F85050;">应付款：3888.00+300孔雀币</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 支付方式 -->
|
|||
|
|
<view class="bacf radius20 mar-s20" style="padding: 27rpx 20rpx;font-size: 28rpx;color: #333333;">
|
|||
|
|
<view class="disac">
|
|||
|
|
<image src="/static/public/chooseFS.png" style="width: 40rpx;height: 40rpx;border-radius: 100%;" mode=""></image>
|
|||
|
|
<view style="margin-left: 26rpx;">微信支付</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="disjbac" style="margin-top: 30rpx;">
|
|||
|
|
<view class="disac">
|
|||
|
|
<image src="/static/public/cancle-FS.png" style="width: 40rpx;height: 40rpx;border-radius: 100%;" mode=""></image>
|
|||
|
|
<view style="margin-left: 26rpx;">孔雀币</view>
|
|||
|
|
</view>
|
|||
|
|
<view>余3000</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="fon28 col3" style="padding: 55rpx 0 64rpx 0;text-align: center;">请在<span style="color: #F85050;font-weight: bold;">23时25分36秒</span>完成支付</view>
|
|||
|
|
<!-- 确认支付 -->
|
|||
|
|
<view @tap="payment" style="margin: 0 auto;color: #FFFFFF;font-weight: bold;font-size: 36rpx;text-align: center;width: 546rpx;height: 90rpx;line-height: 90rpx;background-color: #3875F6;border-radius: 20rpx;">确认支付</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 支付成功 -->
|
|||
|
|
<view v-if="isSuccess" class="bacf radius20 mar-s20" style="padding: 27rpx 20rpx;text-align: center;">
|
|||
|
|
<image src="/static/public/pay-success.png" style="width: 194rpx;height: 194rpx;" mode=""></image>
|
|||
|
|
<view class="fon28 col3" style="margin: 20rpx 0 40rpx 0;">支付成功</view>
|
|||
|
|
<view class="" style="font-size: 46rpx;margin-bottom: 120rpx;color: #F85050;">￥3888.00</view>
|
|||
|
|
<view class="disja" style="margin-bottom: 150rpx;">
|
|||
|
|
<view @tap="goDetail" style="width: 244rpx;height: 70rpx;border-radius: 10rpx;text-align: center;line-height: 70rpx;background: #E9E9E9;color: #333333;">查看订单</view>
|
|||
|
|
<view @tap="goShop" style="width: 244rpx;height: 70rpx;border-radius: 10rpx;text-align: center;line-height: 70rpx;background: #3875F6;color: #FFFFFF;">再逛一逛</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
statusHNH:uni.getStorageSync('statusHNH'),
|
|||
|
|
publicColor:uni.getStorageSync('publicColor'),//主题颜色
|
|||
|
|
isSuccess:false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
this.$toolAll.tools.isLogin()
|
|||
|
|
},
|
|||
|
|
onLoad() {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
payment(){
|
|||
|
|
this.isSuccess = true
|
|||
|
|
},
|
|||
|
|
goDetail(){
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url:'/pagesB/orderDetail/orderDetail'
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
goShop(){
|
|||
|
|
uni.reLaunch({
|
|||
|
|
url:'/pages/tabbar/shop/shop'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
page {
|
|||
|
|
background-color: #F5F5F5;
|
|||
|
|
}
|
|||
|
|
</style>
|