16 changed files with 628 additions and 114 deletions
-
1.gitignore
-
20uniapp_project_code/.hbuilderx/launch.json
-
118uniapp_project_code/src/components/index/keyboard/view_keyboard.vue
-
6uniapp_project_code/src/components/index/list_item.nvue
-
107uniapp_project_code/src/components/index/view_header.nvue
-
169uniapp_project_code/src/components/pay/paying.vue
-
220uniapp_project_code/src/components/pay/success.vue
-
6uniapp_project_code/src/pages.json
-
5uniapp_project_code/src/pages/index/index.nvue
-
90uniapp_project_code/src/pages/pay/index.vue
-
BINuniapp_project_code/src/static/pay/check-icon.png
-
BINuniapp_project_code/src/static/pay/pay-picture.png
-
BINuniapp_project_code/src/static/pay/pay-vip-icon.png
-
BINuniapp_project_code/src/static/pay/print-img.png
-
BINuniapp_project_code/src/static/pay/wx-icon.png
-
BINuniapp_project_code/src/static/pay/zfb-icon.png
@ -1,62 +1,83 @@ |
|||
<template> |
|||
<view class="header-box"> |
|||
<view class="video-tip"> |
|||
<image class="v-image" src="/static/index/camera_icon.png" mode="widthFix" /> |
|||
<text class="v-text">您已进入视频覆盖区</text> |
|||
</view> |
|||
<view class="cancel-button" @click="handle_closeStandby"> |
|||
<view class="header-box" :style="[{ background: props.backgroundCustom }, getBorderStyle]"> |
|||
<view class="video-tip"> |
|||
<image class="v-image" src="/static/index/camera_icon.png" mode="widthFix" /> |
|||
<text class="v-text">您已进入视频覆盖区{{ props.backgroundCustom }}</text> |
|||
</view> |
|||
<view class="cancel-button" @click="handle_closeStandby"> |
|||
<text class="v-text"> 取消交易</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script setup> |
|||
//触发自定义事件 |
|||
const emits = defineEmits(['closeStandby']) |
|||
|
|||
const handle_closeStandby = ()=>{ |
|||
emits("closeStandby","false") |
|||
//触发自定义事件 |
|||
import { defineEmits, defineProps, computed } from 'vue' |
|||
const emits = defineEmits(['closeStandby']) |
|||
const props = defineProps({ |
|||
backgroundCustom: { |
|||
type: String, |
|||
default: "#F5F7F8" |
|||
}, |
|||
needBorder: { |
|||
type: Boolean, |
|||
default: true |
|||
} |
|||
}) |
|||
|
|||
const getBorderStyle = computed(() => { |
|||
if (props.needBorder) { |
|||
return "border-bottom: 1rpx solid #F5F7F8;" |
|||
} else { |
|||
return "border-bottom:none;" |
|||
} |
|||
}) |
|||
|
|||
const handle_closeStandby = () => { |
|||
emits("closeStandby", "false") |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.header-box { |
|||
z-index: 5; |
|||
padding: 11.11rpx 17.36rpx; |
|||
padding: 11.11rpx 0; |
|||
height: 79.17rpx; |
|||
width: 750rpx; |
|||
@include ctf(space-between); |
|||
flex-direction: row; |
|||
background: #F5F7F8; |
|||
width: 750rpx; |
|||
@include ctf(space-between); |
|||
flex-direction: row; |
|||
border-bottom: 1rpx solid #F5F7F8; |
|||
} |
|||
|
|||
.video-tip { |
|||
@include ctf(flex-start); |
|||
flex-direction: row; |
|||
.v-image { |
|||
width: 70.03rpx; |
|||
height: 54.17rpx; |
|||
} |
|||
.v-text{ |
|||
margin-left: 16rpx; |
|||
font-weight: 400; |
|||
font-size: 19.44rpx; |
|||
color: #999999; |
|||
.video-tip { |
|||
@include ctf(flex-start); |
|||
flex-direction: row; |
|||
margin-left: 17.36rpx; |
|||
.v-image { |
|||
width: 70.03rpx; |
|||
height: 54.17rpx; |
|||
} |
|||
|
|||
.v-text { |
|||
margin-left: 16rpx; |
|||
font-weight: 400; |
|||
font-size: 19.44rpx; |
|||
color: #999999; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.cancel-button { |
|||
@include ctf(center); |
|||
width: 131.94rpx; |
|||
height: 51.39rpx; |
|||
border: 0.69rpx solid #999999; |
|||
border-radius: 6.94rpx; |
|||
.v-text{ |
|||
@include flcw(33.33upx, 46.53upx, #fff, 500); |
|||
font-weight: 500; |
|||
font-size: 16.67rpx; |
|||
color: #999999; |
|||
.cancel-button { |
|||
@include ctf(center); |
|||
width: 131.94rpx; |
|||
height: 51.39rpx; |
|||
border: 0.69rpx solid #999999; |
|||
border-radius: 6.94rpx; |
|||
margin-right: 17.36rpx; |
|||
.v-text { |
|||
// @include flcw(33.33upx, 46.53upx, #fff, 500); |
|||
font-weight: 500; |
|||
font-size: 16.67rpx; |
|||
color: #999999; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,169 @@ |
|||
<template> |
|||
<view class="paying-box"> |
|||
|
|||
<text class="p-text">支付金额</text> |
|||
|
|||
<text class="p-total">￥{{props.payTotal||"0.00"}}</text> |
|||
|
|||
<view class="p-zhichi"> |
|||
<view class="p-line"></view> |
|||
<text class="p-words">支持以下付款方式</text> |
|||
<view class="p-line"></view> |
|||
</view> |
|||
|
|||
<view class="p-icons"> |
|||
<image class="p-image-pay-icon" src="/static/pay/wx-icon.png" mode="widthFix" /> |
|||
<image class="p-image-pay-icon" src="/static/pay/zfb-icon.png" mode="widthFix" /> |
|||
</view> |
|||
|
|||
<image class="p-image-pay-picture" src="/static/pay/pay-picture.png" mode="widthFix" /> |
|||
|
|||
<text class="p-tips">请将付款码对准右下方扫码口</text> |
|||
|
|||
<view class="p-btn" @click="handle_clickCard"> |
|||
<image class="pb-image" src="/static/pay/pay-vip-icon.png" mode="aspectFit" /> |
|||
<text class="pb-text">储值卡支付</text> |
|||
</view> |
|||
|
|||
|
|||
<view class="p-user"> |
|||
<text class="p-txt">猫星人（18316553589）</text> |
|||
</view> |
|||
</view> |
|||
|
|||
</template> |
|||
|
|||
<script setup> |
|||
//触发自定义事件 |
|||
const emits = defineEmits(['clickVipCard']) |
|||
const props = defineProps({ |
|||
payTotal: { |
|||
type: Number, |
|||
default: 0 |
|||
}, |
|||
}) |
|||
|
|||
const handle_clickCard = () => { |
|||
console.log("handle_clickCard") |
|||
emits("clickVipCard", "false") |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.paying-box { |
|||
width: 750rpx; |
|||
// height: 500rpx; |
|||
@include ctf(center); |
|||
flex-direction: column; |
|||
|
|||
.p-text { |
|||
margin-top: 161rpx; |
|||
font-weight: 600; |
|||
font-size: 22.22rpx; |
|||
color: #1A1A1A; |
|||
|
|||
} |
|||
|
|||
.p-total { |
|||
margin-top: 30.67rpx; |
|||
font-weight: 600; |
|||
font-size: 55.56rpx; |
|||
color: #1A1A1A; |
|||
} |
|||
|
|||
.p-zhichi{ |
|||
margin-top: 132.67rpx; |
|||
@include ctf(center); |
|||
flex-direction: row; |
|||
.p-line{ |
|||
margin: 0 37.5rpx; |
|||
width: 200rpx; |
|||
height: 2rpx; |
|||
background: #E8E8E8; |
|||
} |
|||
.p-words { |
|||
font-weight: 700; |
|||
font-size: 22.22rpx; |
|||
color: #1A1A1A; |
|||
display: block; |
|||
} |
|||
} |
|||
|
|||
|
|||
.p-icons { |
|||
margin-top: 19.67rpx; |
|||
@include ctf(center); |
|||
flex-direction: row; |
|||
|
|||
// width: 750rpx; |
|||
.p-image-pay-icon { |
|||
width: 41.67rpx; |
|||
height: 41.67rpx; |
|||
margin: 0 9rpx; |
|||
} |
|||
} |
|||
|
|||
.p-image-pay-picture { |
|||
margin-top: 68rpx; |
|||
width: 138.89rpx; |
|||
height: 290.97rpx; |
|||
} |
|||
|
|||
.p-tips { |
|||
margin-top: 50rpx; |
|||
font-weight: 800; |
|||
font-size: 22.22rpx; |
|||
color: #1A1A1A; |
|||
} |
|||
|
|||
.p-btn { |
|||
margin-top: 107rpx; |
|||
@include ctf(center); |
|||
flex-direction: row; |
|||
width: 240.97rpx; |
|||
height: 81.94rpx; |
|||
background: #009874; |
|||
box-shadow: 0 0.69rpx 20.83rpx 0 #00987430; |
|||
border-radius: 13.89rpx; |
|||
|
|||
.pb-image { |
|||
width: 41.9rpx; |
|||
height: 31.25rpx; |
|||
} |
|||
|
|||
.pb-text { |
|||
margin-left: 17rpx; |
|||
font-weight: 800; |
|||
font-size: 22.22rpx; |
|||
color: #FFFFFF; |
|||
} |
|||
} |
|||
|
|||
.p-user { |
|||
margin-top: 92rpx; |
|||
margin-left: 67rpx; |
|||
margin-bottom: 92rpx; |
|||
width: 750rpx; |
|||
.p-txt { |
|||
font-weight: 400; |
|||
font-size: 22.22rpx; |
|||
color: #999999; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.cancel-button { |
|||
@include ctf(center); |
|||
width: 131.94rpx; |
|||
height: 51.39rpx; |
|||
border: 0.69rpx solid #999999; |
|||
border-radius: 6.94rpx; |
|||
|
|||
.v-text { |
|||
@include flcw(33.33upx, 46.53upx, #fff, 500); |
|||
font-weight: 500; |
|||
font-size: 16.67rpx; |
|||
color: #999999; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,220 @@ |
|||
<template> |
|||
<view class="success-box"> |
|||
<view class="s-bg"></view> |
|||
|
|||
<view class="s-header"> |
|||
<view class="video-tip"> |
|||
<image class="v-image" src="/static/index/camera_icon.png" mode="widthFix" /> |
|||
<text class="v-text">您已进入视频覆盖区</text> |
|||
</view> |
|||
<!-- <view class="cancel-button" @click="handle_closey"> |
|||
<text class="v-text"> 取消交易</text> |
|||
</view> --> |
|||
</view> |
|||
|
|||
<view class="s-content"> |
|||
<view class="sc-title"> |
|||
<view class="sc-success"> |
|||
<image class="sc-check-icon" src="/static/pay/check-icon.png" mode="acepectFit" /> |
|||
<view>支付成功</view> |
|||
</view> |
|||
<view class="sc-total">￥68.60</view> |
|||
</view> |
|||
<text class="sc-num">共 <text>15</text> 件商品</text> |
|||
<text class="sc-tip-1">请领取小票，期待下次光临！</text> |
|||
|
|||
<image class="sc-print-img" src="/static/pay/print-img.png" mode="acepectFit" /> |
|||
|
|||
<view class="sc-tip-2"> |
|||
获得<text>30积分</text>，已放入您的账户， |
|||
</view> |
|||
<view class="sc-tip-3">请在【小程序会员中心】里查看</view> |
|||
|
|||
<view class="sc-btn" @click="handle_clickToIndex"> |
|||
<text class="scb-txt-1" >返回首页</text><text class="scb-txt-2">2s</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script setup> |
|||
//触发自定义事件 |
|||
const emits = defineEmits(['clickToIndex']) |
|||
const props = defineProps({ |
|||
paySuccessInfo: { |
|||
type: Object, |
|||
default: "{}" |
|||
}, |
|||
}) |
|||
|
|||
const handle_clickToIndex = () => { |
|||
emits("clickToIndex", "") |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.success-box { |
|||
@include ctf(flex-start); |
|||
flex-direction: column; |
|||
|
|||
.s-bg { |
|||
width: 750rpx; |
|||
height: 772rpx; |
|||
background-image: linear-gradient(180deg, #00C9AC 0%, #009874 100%); |
|||
// background-image: linear-gradient(to bottom, #00C9AC, #009874); //nvue |
|||
position: fixed; |
|||
top: 0; |
|||
z-index: -1; |
|||
border-bottom-left-radius: 60rpx; |
|||
border-bottom-right-radius: 60rpx; |
|||
} |
|||
|
|||
.s-header { |
|||
z-index: 5; |
|||
padding: 11.11rpx 17.36rpx; |
|||
height: 79.17rpx; |
|||
width: 750rpx; |
|||
margin-top: 20rpx; |
|||
@include ctf(flex-start); |
|||
flex-direction: row; |
|||
// border-bottom: 1rpx solid #F5F7F8; |
|||
|
|||
.video-tip { |
|||
@include ctf(flex-start); |
|||
flex-direction: row; |
|||
|
|||
.v-image { |
|||
width: 70.03rpx; |
|||
height: 54.17rpx; |
|||
} |
|||
|
|||
.v-text { |
|||
margin-left: 16rpx; |
|||
font-weight: 400; |
|||
font-size: 22rpx; |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.s-content { |
|||
z-index: 5; |
|||
width: 680.56rpx; |
|||
height: 940.28rpx; |
|||
background: #FFFFFF; |
|||
border-radius: 27.78rpx; |
|||
@include ctf(flex-start); |
|||
flex-direction: column; |
|||
|
|||
.sc-title { |
|||
margin-top: 52.44rpx; |
|||
width: 600rpx; |
|||
@include ctf(space-between); |
|||
flex-direction: row; |
|||
|
|||
.sc-success { |
|||
@include ctf(center); |
|||
flex-direction: row; |
|||
|
|||
.sc-check-icon{ |
|||
width: 69.44rpx; |
|||
height: 68.08rpx; |
|||
} |
|||
|
|||
>view { |
|||
margin-left: 18.75rpx; |
|||
font-weight: 600; |
|||
font-size: 41.67rpx; |
|||
color: #009874; |
|||
} |
|||
} |
|||
|
|||
.sc-total { |
|||
font-weight: 600; |
|||
font-size: 55.56rpx; |
|||
color: #1A1A1A; |
|||
} |
|||
} |
|||
|
|||
.sc-num { |
|||
align-self: flex-end; |
|||
margin-right: 34.44rpx; |
|||
font-weight: 400; |
|||
font-size: 22.22rpx; |
|||
color: #999999; |
|||
} |
|||
|
|||
.sc-tip-1 { |
|||
margin-top: 104.78rpx; |
|||
font-weight: 700; |
|||
font-size: 33.33rpx; |
|||
color: #1A1A1A; |
|||
} |
|||
|
|||
.sc-print-img { |
|||
margin-top: 65rpx; |
|||
width: 193.06rpx; |
|||
height: 137.5rpx; |
|||
} |
|||
|
|||
.sc-tip-2 { |
|||
margin-top: 27.78rpx; |
|||
font-weight: 400; |
|||
font-size: 22.22rpx; |
|||
color: #999999; |
|||
|
|||
>text { |
|||
color: #ff873d; |
|||
} |
|||
} |
|||
|
|||
.sc-tip-3 { |
|||
margin-top: 10.89rpx; |
|||
font-weight: 400; |
|||
font-size: 22.22rpx; |
|||
color: #999999; |
|||
} |
|||
|
|||
.sc-btn { |
|||
margin-top: 127rpx; |
|||
width: 393.75rpx; |
|||
height: 104.17rpx; |
|||
border: 1.39rpx solid #009874; |
|||
border-radius: 6.94rpx; |
|||
@include ctf(center); |
|||
flex-direction: row; |
|||
|
|||
.scb-txt-1 { |
|||
font-weight: 500; |
|||
font-size: 33.33rpx; |
|||
color: #009874; |
|||
} |
|||
|
|||
.scb-txt-2 { |
|||
margin-left: 17.89rpx; |
|||
font-weight: 600; |
|||
font-size: 33.33rpx; |
|||
color: #333333; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
.cancel-button { |
|||
@include ctf(center); |
|||
width: 131.94rpx; |
|||
height: 51.39rpx; |
|||
border: 0.69rpx solid #999999; |
|||
border-radius: 6.94rpx; |
|||
|
|||
.v-text { |
|||
@include flcw(33.33upx, 46.53upx, #fff, 500); |
|||
font-weight: 500; |
|||
font-size: 16.67rpx; |
|||
color: #999999; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,90 @@ |
|||
<template> |
|||
<view class="pay-page"> |
|||
<view v-if="!paySuccess"> |
|||
<view-header class="mheader" :backgroundCustom="('none')" :needBorder="('false')" @closeStandby="handle_closeStandby"></view-header> |
|||
<paying v-if="true" @clickVipCard="handle_clickVipCard"></paying> |
|||
</view> |
|||
<pay-success v-else></pay-success> |
|||
|
|||
<!-- 手机尾号后4位数验证 --> |
|||
<input-box-end-phone v-if="showEndPhoneBox" :maskHeight="screenHeight" :maxInput="4" |
|||
@showIt="handle_closeEndPhoneBox" @clickCommit="handle_clickCommit_qr"></input-box-end-phone> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import util from "@/utils/util.js" |
|||
|
|||
import viewHeader from '@/components/index/view_header.nvue';//头部 |
|||
import inputQrBox from '@/components/index/keyboard/input_box_QR.vue'; //条形码 |
|||
import inputBoxEndPhone from '@/components/index/keyboard/input_box_end_phone.vue';//手机号尾号 |
|||
import paying from '@/components/pay/paying.vue';//支付中 |
|||
import paySuccess from '@/components/pay/success.vue';//支付成功 |
|||
|
|||
export default { |
|||
components: { |
|||
'view-header': viewHeader, |
|||
'input-box-end-phone': inputBoxEndPhone, |
|||
'paying': paying, |
|||
'pay-success': paySuccess, |
|||
}, |
|||
watch:{ |
|||
showPageStandby(ov,nv){ |
|||
if(nv){ |
|||
// #ifdef APP-NVUE |
|||
setTimeout(async()=>{ |
|||
dom = weex.requireModule("dom"); |
|||
let size = await util.getNvueRefSize(this,dom,"mfooter"); |
|||
this.footerHeight = size.height.toFixed(2) |
|||
},200) |
|||
// #endif |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
showPageStandby: false, |
|||
showEndPhoneBox:false, |
|||
screenHeight: '', |
|||
footerHeight: '', |
|||
paySuccess:false, |
|||
} |
|||
}, |
|||
async onLoad(res) { |
|||
console.log("pay onload:",res) |
|||
}, |
|||
async onReady() { |
|||
await this.setPageHeight() |
|||
}, |
|||
methods: { |
|||
|
|||
handle_clickVipCard() { |
|||
util.showNone("储值卡支付未接入") |
|||
this.handle_clickVIP() |
|||
// util.routeTo(`/pages/pay/success`, 'nT'); |
|||
}, |
|||
|
|||
handle_closeEndPhoneBox(val) { |
|||
console.log("handle_closeEndPhoneBox", val) |
|||
this.showEndPhoneBox = !this.showEndPhoneBox |
|||
}, |
|||
|
|||
handle_clickVIP() { |
|||
util.showNone("会员登录") |
|||
this.showEndPhoneBox = !this.showEndPhoneBox |
|||
}, |
|||
async setPageHeight(){ |
|||
this.screenHeight = await util.getPageHeight() |
|||
}, |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
|
|||
<style lang="scss" scoped> |
|||
.pay-page { |
|||
width: 750rpx; |
|||
|
|||
} |
|||
</style> |
|||
|
After Width: 138 | Height: 137 | Size: 6.3 KiB |
|
After Width: 277 | Height: 580 | Size: 23 KiB |
|
After Width: 90 | Height: 68 | Size: 1.8 KiB |
|
After Width: 386 | Height: 275 | Size: 30 KiB |
|
After Width: 83 | Height: 83 | Size: 4.1 KiB |
|
After Width: 83 | Height: 83 | Size: 6.4 KiB |
Write
Preview
Loading…
Cancel
Save
Reference in new issue