xiaogang
/
zxjt-h5
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

中信建投h5最新盖板

This commit is contained in:
xiaogang 2024-09-27 15:43:42 +08:00
parent ab573ee1ff
commit 24d5345efc
8 changed files with 82 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -16,5 +16,9 @@
<body> <body>
<div id="app"><!--app-html--></div> <div id="app"><!--app-html--></div>
<script type="module" src="/main.js"></script> <script type="module" src="/main.js"></script>
<!-- <script src="https://fastly.jsdelivr.net/npm/eruda"></script>
<script>
eruda.init()
</script> -->
</body> </body>
</html> </html>

4
package.json
View File

@ -1,5 +1,5 @@
{ {
"name": "vue-h5", "name": "领红包",
"version": "1.0.0", "version": "1.0.0",
"description": "", "description": "",
"main": "main.js", "main": "main.js",
@ -13,7 +13,7 @@
"browser":"chrome", "browser":"chrome",
"env": { "env": {
"UNI_PLATFORM": "h5", "UNI_PLATFORM": "h5",
"REQUEST_BASE_URL": "http://192.168.110.39:8083" "REQUEST_BASE_URL": "https://zxjt.test.86698.cn"
}, },
"define": { "define": {

134
pages/index/index.vue
View File

@ -1,23 +1,27 @@
<template> <template>
<view class="content"> <scroll-view class="content" scroll-y>
<!-- <view class='tips-text'>暂无可以领取的红包</view> --> <image src="../../static/image/bg.png" mode="widthFix" style="width: 100%;display: block;"></image>
<view class="tips-area">
<image src="../../static/image/tips_bg.png" class="tips-img" mode="widthFix"></image>
</view>
<uni-popup ref="popupRef" type="center" :is-mask-click="false" :mask-click="false"> <uni-popup ref="popupRef" type="center" :is-mask-click="false" :mask-click="false">
<view class="popup-content"> <view class="popup-content" style="background-image:url('../../static/image/popup_bg.png');height:360rpx">
<view class="title">恭喜你提现成功!</view> <view class="number">红包已领取<text style="color:#F71E00">{{num}}</text>元</view>
<view class="number">{{num}}<text>元</text></view> <view class="tips">请留意微信支付入账信息</view>
<view class="tips">*24小时内在微信"服务通知"中领取</view>
<view class="btn" @click="closePopup"> <view class="btn" @click="closePopup">
<image src="../../static/image/popup_btn.png"></image> <image src="../../static/image/popup_btn.png"></image>
</view> </view>
<view class="close"> <!-- <view class="close">
<image src="../../static/image/ic_close.png" @click="closePopup"></image> <image src="../../static/image/ic_close.png" @click="closePopup"></image>
</view> </view> -->
</view> </view>
</uni-popup> </uni-popup>
<uni-popup ref="popupNullRef" type="center" :is-mask-click="false" :mask-click="false">
<view class="popup-content" style="background-image:url('../../static/image/null.png');height:260rpx">
<view class="tips_null">暂无可领取的红包！</view>
<!-- <view class="close">
<image src="../../static/image/ic_close.png" @click="closePopup"></image>
</view> -->
</view> </view>
</uni-popup>
</scroll-view>
</template> </template>
<script setup> <script setup>
@ -25,6 +29,7 @@
import {getQueryString} from '../../utils/utils' import {getQueryString} from '../../utils/utils'
import { checkTradeNo,getAccessPage,sendPacket } from '../../api' import { checkTradeNo,getAccessPage,sendPacket } from '../../api'
const popupRef = ref(null) const popupRef = ref(null)
const popupNullRef = ref(null)
//红包金额 //红包金额
const num = ref(0); const num = ref(0);
//有code就代表是授权回调回来的 //有code就代表是授权回调回来的
@ -53,32 +58,34 @@
if(res.status === true){ if(res.status === true){
recieveEvent() recieveEvent()
}else{ }else{
uni.showModal({ popupNullRef.value.open()
title: '提示', // uni.showModal({
content: '暂无可领取的红包！！！', // title: '提示',
showCancel:false, // content: '暂无可领取的红包！',
success: function (res) { // showCancel:false,
if (res.confirm) { // success: function (res) {
console.log('用户点击确定'); // if (res.confirm) {
} else if (res.cancel) { // console.log('用户点击确定');
console.log('用户点击取消'); // } else if (res.cancel) {
} // console.log('用户点击取消');
} // }
}); // }
// });
} }
}).catch(() => { }).catch(() => {
uni.showModal({ popupNullRef.value.open()
title: '提示', // uni.showModal({
content: '暂无可领取的红包！！！', // title: '提示',
showCancel:false, // content: '暂无可领取的红包！',
success: function (res) { // showCancel:false,
if (res.confirm) { // success: function (res) {
console.log('用户点击确定'); // if (res.confirm) {
} else if (res.cancel) { // console.log('用户点击确定');
console.log('用户点击取消'); // } else if (res.cancel) {
} // console.log('用户点击取消');
} // }
}); // }
// });
}) })
} }
//发送红包的事件 //发送红包的事件
@ -118,14 +125,7 @@
.content { .content {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
display: flex; overflow-y: auto;
flex-direction: column;
align-items: center;
justify-content: flex-end;
background: url('../../static/image/bg.png') no-repeat;
background-size: 100% 100%;
box-sizing:border-box;
padding-bottom:20rpx;
.tips-text{ .tips-text{
color:#310000; color:#310000;
font-size:40rpx; font-size:40rpx;
@ -155,44 +155,54 @@
} }
} }
.popup-content{ .popup-content{
width:750rpx; width:610rpx;
height:850rpx; /* height:360rpx; */
background: url("../../static/image/popup_bg.png") no-repeat; /* background: url("../../static/image/popup_bg.png") no-repeat; */
background-size:100% 800rpx; background-repeat:no-repeat;
background-size:cover;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;
padding-top:230rpx; position: relative;
.title{
font-weight:bolder;
margin-bottom:20rpx;
color:#0A0200;
font-size:34rpx;
}
.number{ .number{
color:#F71E00; color:#834525;
font-size:90rpx; font-size:40rpx;
font-weight:bolder; margin-top:70rpx;
margin-bottom:15rpx; margin-bottom:15rpx;
> text{ > text{
font-size:40rpx; font-size:40rpx;
margin:0 12rpx;
display: inline-block;
} }
} }
.tips{ .tips{
color:#43403F; color:#d9c3b5;
font-size:30rpx; font-size:30rpx;
margin-bottom:85rpx; margin-bottom:25rpx;
margin-top:50rpx;
opacity: 0.6; opacity: 0.6;
font-size:28rpx; font-size:28rpx;
font-weight:400; font-weight:400;
} }
.tips_null{
color:#666;
font-size:30rpx;
opacity: 0.6;
font-size:28rpx;
font-weight:400;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
.btn > image{ .btn > image{
width:300rpx; width:350rpx;
height:90rpx; height:76rpx;
} }
.close { .close {
margin-top:60rpx; position: absolute;
bottom:-100rpx;
> image { > image {
width:60rpx; width:60rpx;
height:60rpx; height:60rpx;

BIN
static/image/bg.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 147 KiB

After

Width:  |  Height:  |  Size: 186 KiB

BIN
static/image/null.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
static/image/popup_bg.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 79 KiB

After

Width:  |  Height:  |  Size: 8.3 KiB

BIN
static/image/popup_btn.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.3 KiB

After

Width:  |  Height:  |  Size: 4.3 KiB

4
utils/request.js
View File

@ -11,8 +11,8 @@ function request(options) {
// // 如果使用params传参则，以&符拼接的格式传参 // // 如果使用params传参则，以&符拼接的格式传参
if (options.params) { if (options.params) {
options.data = options.params options.data = options.params
// defaultHeader['Content-Type'] = 'application/json' defaultHeader['Content-Type'] = 'application/json'
defaultHeader['Content-Type'] = 'application/x-www-form-urlencoded' // defaultHeader['Content-Type'] = 'application/x-www-form-urlencoded'
} }
const token = uni.getStorageSync('token'); const token = uni.getStorageSync('token');
if (token) { if (token) {