兴业优酷的两个页面开发完毕,待确定进入项目的链接参数

This commit is contained in:
xiaogang 2024-06-17 18:47:12 +08:00
parent c6d4ffa2a5
commit 936b3d488a
26 changed files with 618 additions and 48 deletions

31
api/xyyk.js Normal file
View File

@ -0,0 +1,31 @@
import request from "../utils/request";
export const login = (params) => request({
url:'/v1/xy/login',
method:'POST',
...params
})
export const getProduceList = (params) => request({
url:'/v1/auth/activity',
method:'POST',
...params
})
export const goBuy = (params) => request({
url:'/v1/auth/order/buy',
method:'POST',
...params
})
export const getTicketList = (params) => request({
url:'/v1/auth/order/list',
method:'POST',
...params
})
export const queryOrder = (params) => request({
url:'/v1/auth/order/query',
...params
})

27
demo.js Normal file
View File

@ -0,0 +1,27 @@
"uni-app": {
"scripts": {
"h5dev": {
"title":"H5测试开发环境",
"browser":"chrome",
"env": {
"UNI_PLATFORM": "h5",
// "REQUEST_BASE_URL": "http://zxjt.test.86698.cn"
"REQUEST_BASE_URL": "http://zxjt.test.86698.cn"
},
"define": {
}
},
"h5prod": {
"title":"H5正式生产环境",
"browser":"chrome",
"env": {
"UNI_PLATFORM": "h5",
"REQUEST_BASE_URL": "https://zxjt.86698.cn"
},
"define": {
}
}
}
}

4
env.dev.js Normal file
View File

@ -0,0 +1,4 @@
export default {
env: 'development',
request_baseurl: 'http://development',
};

7
env.js Normal file
View File

@ -0,0 +1,7 @@
import dev from './env.dev';
import prod from './env.prod';
export default {
dev,
prod
}

4
env.prod.js Normal file
View File

@ -0,0 +1,4 @@
export default {
env: 'production',
request_baseurl: 'http://production',
};

View File

@ -13,7 +13,7 @@
"browser":"chrome",
"env": {
"UNI_PLATFORM": "h5",
"REQUEST_BASE_URL": "http://zxjt.test.86698.cn"
"REQUEST_BASE_URL": "http://192.168.110.39:8083"
},
"define": {

View File

@ -1,11 +1,24 @@
{
"pages": [ //pageshttps://uniapp.dcloud.io/collocation/pages
"pages": [
// {
// "path": "pages/index/index",
// "style": {
// "navigationBarTitleText": "现金红包明细"
// }
// },
{
"path": "pages/index/index",
"path": "pages/xyyk/index",
"style": {
"navigationBarTitleText": "现金红包明细"
"navigationBarTitleText": "兴业优酷"
}
},
{
"path": "pages/xyyk/tickets",
"style": {
"navigationBarTitleText": "我的券包"
}
}
],
"globalStyle": {
"navigationStyle": "custom",

View File

@ -1,4 +1,4 @@
d<template>
<template>
<view class="content">
<!-- <view class='tips-text'>暂无可以领取的红包</view> -->
<view class="tips-area">
@ -6,7 +6,7 @@ d<template>
</view>
<uni-popup ref="popupRef" type="center" :is-mask-click="false" :mask-click="false">
<view class="popup-content">
<view class="title">恭喜你提现成功</view>
<view class="title">恭喜你提现成功!</view>
<view class="number">{{num}}<text></text></view>
<view class="tips">*24小时内在微信"服务通知"中领取</view>
<view class="btn" @click="closePopup">
@ -166,21 +166,26 @@ d<template>
padding-top:230rpx;
.title{
font-weight:bolder;
margin-bottom:30rpx;
margin-bottom:20rpx;
color:#0A0200;
font-size:34rpx;
}
.number{
color:#F71E00;
font-size:60rpx;
font-size:90rpx;
font-weight:bolder;
margin-bottom:30rpx;
margin-bottom:15rpx;
> text{
font-size:30rpx;
font-size:40rpx;
}
}
.tips{
color:darkgray;
color:#43403F;
font-size:30rpx;
margin-bottom:100rpx;
margin-bottom:85rpx;
opacity: 0.6;
font-size:28rpx;
font-weight:400;
}
.btn > image{
width:300rpx;

View File

@ -0,0 +1,87 @@
<template>
<view class="product-container">
<view class="product-tips">
支付享立减1元
</view>
<view class="product-price display">
<view class="price">
<text>{{detail.price}}</text>/{{detail.brand}}
</view>
<view class="ori">
原价{{detail.show_price}}
</view>
</view>
<view class="product-type display">
{{detail.name}}
</view>
<view class="product-btn" @click="$emit('buy-event',detail)">
立即购买
</view>
</view>
</template>
<script setup>
const props = defineProps({
detail:{
type:Object,
require:true,
}
})
</script>
<style scoped lang="scss">
.product-container{
width:292rpx;
height:318rpx;
background: url('../../../static/xyyk/bg-product.png') no-repeat;
background-size: 100% 100%;
margin-top:30rpx;
.product-tips{
font-weight: 400;
font-size: 20rpx;
color: #B05619;
box-sizing: border-box;
padding-left:40rpx;
}
.display{
display: flex;
flex-direction: column;
align-items: center;
}
.product-price{
color: #FD613F;
.price{
font-weight: 400;
font-size: 40rpx;
text{
font-weight:bold;
font-size: 60rpx;
}
}
.ori{
font-size: 24rpx;
color: #E18B72;
font-weight:400;
text-decoration-line: line-through;
}
}
.product-type{
font-weight: 400;
font-size: 28rpx;
color: #FFFFFF;
margin-top:40rpx;
}
.product-btn{
width: 218rpx;
height: 60rpx;
background: linear-gradient( 90deg, #FFD888 0%, #FFE39E 100%);
border-radius: 30rpx;
font-weight: 400;
font-size: 30rpx;
color: #A83203;
text-align: center;
line-height: 60rpx;
margin:16rpx auto 0;
}
}
</style>

View File

@ -0,0 +1,80 @@
<template>
<view class="ticket-container">
<view class="ticket-type">{{detail.product_name}}</view>
<view class="ticket-content">
<image src="../../../static/xyyk/icon-ticket.png" mode=""></image>
<view class="ticket-name">{{detail.product_name}}</view>
<view class="ticket-btn" @click="$emit('view-event',detail)">
立即查看
</view>
</view>
</view>
</template>
<script setup>
const props = defineProps({
detail:{
type:Object,
require:true
}
})
</script>
<style scoped lang="scss">
.ticket-container{
width: 694rpx;
height: 240rpx;
background: #FFFFFF;
border-radius: 24rpx 24rpx 24rpx 24rpx;
font-weight: 500;
font-size: 32rpx;
color: #1A1A1A;
box-sizing: border-box;
padding:32rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
margin-top:32rpx;
.ticket-type{
width:100%;
height:32rpx;
font-weight: 500;
font-size: 32rpx;
color: #1A1A1A;
line-height: 32rpx;
}
.ticket-content{
height:92rpx;
display: flex;
align-items: center;
position: relative;
image{
width:92rpx;
height:92rpx;
margin-right: 22rpx;
}
.ticket-name{
font-weight: 500;
font-size: 28rpx;
color: #333333;
width:50%;
overflow: hidden; /* 隐藏溢出内容 */
text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
white-space: nowrap; /* 禁止文本换行 */
}
.ticket-btn{
position: absolute;
right:0;
width: 150rpx;
height: 54rpx;
background: #47A5FF;
border-radius: 27rpx;
font-weight: 500;
font-size: 24rpx;
color: #FFFFFF;
text-align: center;
line-height:54rpx ;
}
}
}
</style>

243
pages/xyyk/index.vue Normal file
View File

@ -0,0 +1,243 @@
<template>
<view class="container">
<image class="title" src="../../static/xyyk/bg-title.png" mode="widthFix"></image>
<view class="tips">
支付享立减1元
</view>
<view class="tickets" @click="toTickets">
我的券包
</view>
<view class="bottom-banner">
<view class="banner-title">
兑换商品列表
</view>
<view class="banner-tips">
<view>兴业优酷半价购送周卡</view>
<view><text class="line"></text>支付享立减1元<text class="line"></text></view>
</view>
<scroll-view class="banner-content" scroll-y>
<view class="banner-container">
<view v-for="(item,index) in products" :key="item.id">
<ProductItem :detail="item" @buy-event="handleBuy"/>
</view>
</view>
</scroll-view>
</view>
<uni-popup ref="popupRef" type="center" :is-mask-click="false" :mask-click="false">
<view class="popup-content">
<view class="popup-title">购买{{payResult ? '成功' : '失败'}}</view>
<view class="popup-tips" v-if="payResult">恭喜购买成功请稍后查看结果</view>
<view class="popup-tips" v-else>支付失败了</view>
<view class="btn" @click="closePopup">
确定
</view>
</view>
</uni-popup>
</view>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import ProductItem from './components/product-item';
import {getQueryString} from '../../utils/utils';
import {login,getProduceList,goBuy,queryOrder} from '../../api/xyyk';
const popupRef = ref(null);
const products = ref([]);
const payResult = ref(false);
const orderNo = "SN202406131136518803"
const code = 'MDQ4MDM2ZWYwNzUxYmMwYmM3YTk4ZjdmNjEzZWNmOGNjZDk0OGQ5ZjM0NjY1NjY1NDMyYjY2MzVmNjkwZTE5MjU1MTdhOTc1MDkzOGVhMWJhNDE5YWVlMjQ5NGMwZjFmMTg4NzgyZDBiN2UyOGYwZDFjNzIzOGIzOTQ1ZGRiMWU0M2FiNjhjOTRlZjEyODE1MmM5NjIyMTQzZTBhYmQzZGFiOTRjM2ZhNTNlYTVlYTRiOGY0ZTIxZjFkN2I4ZjFlYzBmODQ1NzlmYTY2MDJmMmViZDIxMzc4ZDMwMmM1OGExZTZiMTQ1N2Y0MjY5NWJlNDRhZWU5YzE5OTViMmQ1MjAxNWY5NWM4ZTQ0OGI2NGEyZDI5MTkyNWNkZjA0YWIwZjFlZGE3MGJmZjk3YzViZTYwNTYzZDgxMjk2YmE5MWE4ZDQ0ZDZiZGY3MmJlMzdmN2NmMjI3YjU5NmQwNmMwYWM4MmZkYjc5MTk0MmRlNzE0NWU3ZmYxMGNkNjhmN2RhODMwMzU3NGUzMTM0ZGU3OTc1NWIwNDM0ODBmMjdlMzliZDEwZjViNWI4OTE1N2RhN2EzNmU5ZGNmZjQ3NzhiYjBhOGFmOTNlNTM2M2NiNmIzY2UwODJjZDU5NzFjMTVmZGI2ZA=='
onMounted(()=>{
//code,
// const code = getQueryString('code');
// const orderNo = getQueryString('order_no');
// if(code){
// getProductConfig()
// }else if(orderNo){
// queryOrderStatus()
// }
getProductConfig()
})
const getProductConfig = async () => {
const params = {data:code}
const resData = await login({params})
uni.setStorageSync('token',resData.token);
const productConfig = await getProduceList();
const {name,description,product} = productConfig;
products.value = product;
}
const queryOrderStatus = () => {
const params = {
order_no:orderNo
}
queryOrder({params}).then(res => {
const {state} = res
payResult.value = state == '2' ? true : false;
popupRef.value.open()
})
}
const handleBuy = (item) => {
const {id} = item;
const params = {product_id:id}
goBuy({params}).then(res => {
const {payToken,payOrderId,mchtOrderId} = res;
window.location.href = payToken;
})
}
const toTickets = () => {
uni.navigateTo({url:'/pages/xyyk/tickets'})
}
const closePopup = () => {
popupRef.value.close()
}
</script>
<style scoped lang="scss">
.container{
position: relative;
display: flex;
flex-direction: column;
align-items: center;
width:100vw;
height:100vh;
background: url('../../static/xyyk/bg.png') no-repeat;
background-size: 100% 100%;
.title{
width:640rpx;
margin: 32rpx auto 0;
}
.tips{
width: 215rpx;
height: 42rpx;
background: linear-gradient( 90deg, #E5F5FF 0%, #FFFEFF 100%);
border-radius: 21rpx;
margin-top:16rpx;
font-weight: 400;
font-size: 24rpx;
color: #00A5EB;
text-align: center;
line-height: 42rpx;
}
.tickets{
position: fixed;
right:0;
top:150rpx;
width: 102rpx;
height: 32rpx;
background: linear-gradient( 90deg, #E7F6FF 0%, #FEFEFF 100%);
border-radius: 52rpx 0px 0px 52rpx;
font-weight: 400;
font-size: 20rpx;
color: #00A5EB;
line-height: 28rpx;
text-align: center;
line-height: 28rpx;
}
.bottom-banner{
position: absolute;
bottom:10rpx;
width:730rpx;
height:620rpx;
background: url('../../static/xyyk/bg-banner.png') no-repeat;
background-size: 100% 100%;
display: flex;
flex-direction: column;
.banner-title{
width:350rpx;
height:78rpx;
text-align: center;
line-height: 78rpx;
font-weight: 400;
font-size: 32rpx;
color: #FFFFFF;
margin:0 auto;
padding-left:50rpx;
}
.banner-tips{
display: flex;
flex-direction: column;
align-items: center;
margin-top:30rpx;
.line{
display: block;
width: 40rpx;
height: 0;
border: 1rpx solid #3F85BC;
&:first-child{
margin-right:14rpx;
}
&:last-child{
margin-left:14rpx;
}
}
> :first-child{
font-weight: 600;
font-size: 32rpx;
color: #135BC3;
}
> :last-child{
display: flex;
align-items: center;
font-weight: 400;
font-size: 28rpx;
color: #3F85BC;
}
}
.banner-content{
box-sizing: border-box;
padding:0 60rpx 40rpx;
flex:1;
overflow: auto;
.banner-container{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
}
}
.popup-content{
width:578rpx;
height:700rpx;
background: url("../../static/xyyk/bg-popup.png") no-repeat;
background-size:100% 700rpx;
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
padding-top:290rpx;
.popup-title{
font-weight:600;
color:#111B1F;
font-size:60rpx;
margin-top:24rpx;
}
.popup-tips{
font-weight: 400;
font-size: 28rpx;
color: #00A5EB;
margin-top:34rpx;
opacity: .6;
}
.btn{
width: 236rpx;
height: 72rpx;
background: linear-gradient( 180deg, #57C3FB 7%, #2D98F7 100%);
border-radius: 36rpx;
text-align: center;
line-height: 72rpx;
font-weight: 400;
font-size: 32rpx;
color: #FFFFFF;
margin-top:100rpx;
}
}
}
</style>

66
pages/xyyk/tickets.vue Normal file
View File

@ -0,0 +1,66 @@
<template>
<scroll-view scroll-y="true" class="container" @scrolltolower="getNextPage">
<view class="wrapper">
<view v-for="(item,index) in list" :key="item.id">
<TicketItem :detail="item" @view-event="handleView"/>
</view>
</view>
</scroll-view>
</template>
<script setup>
import { onMounted , ref, unref } from 'vue';
import TicketItem from './components/ticket-item';
import {getTicketList} from '../../api/xyyk';
const page = ref(1);
const pageSize = 10;
const total = ref(0);
const list = ref([]);
onMounted(()=> {
const params = {
page:unref(page),
pageSize:unref(pageSize)
}
getTicketList({params}).then(res => {
const {count,data} = res
total.value = count;
list.value = data;
})
})
const isLastPage = () => unref(page) === Math.ceil(unref(total) / pageSize)
const getNextPage = () => {
if(isLastPage){
console.log('已经是最后一页');
return false;
};
const params = {
page:unref(page) + 1,
pageSize:unref(pageSize),
}
}
const handleView = (item) => {
const {voucher_link} = item
console.log(item)
}
</script>
<style scoped lang="scss">
.container{
width:100vw;
height:100vh;
background-color: #f7f7f7;
overflow-y: auto;
.wrapper{
width:100%;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
padding-bottom:32rpx;
}
}
</style>

BIN
static/xyyk/bg-banner.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

BIN
static/xyyk/bg-popup.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

BIN
static/xyyk/bg-product.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
static/xyyk/bg-title.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

BIN
static/xyyk/bg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 268 KiB

BIN
static/xyyk/icon-ticket.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

View File

@ -1 +0,0 @@
.uni-popup[data-v-f0b957f8]{position:fixed;z-index:99}.uni-popup.top[data-v-f0b957f8],.uni-popup.left[data-v-f0b957f8],.uni-popup.right[data-v-f0b957f8]{top:var(--window-top)}.uni-popup .uni-popup__wrapper[data-v-f0b957f8]{display:block;position:relative}.uni-popup .uni-popup__wrapper.left[data-v-f0b957f8],.uni-popup .uni-popup__wrapper.right[data-v-f0b957f8]{padding-top:var(--window-top);flex:1}.fixforpc-z-index[data-v-f0b957f8]{z-index:999}.fixforpc-top[data-v-f0b957f8]{top:0}.content[data-v-881fd965]{width:100vw;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;background:url(./bg-3NzT_zCy.png) no-repeat;background-size:100% 100%;box-sizing:border-box;padding-bottom:.625rem}.content .tips-text[data-v-881fd965]{color:#310000;font-size:1.25rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.content .btn-area[data-v-881fd965]{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.content .btn-area uni-image[data-v-881fd965]{width:9.375rem;height:3.125rem;border-radius:3.125rem}.content .tips-area[data-v-881fd965]{width:21.875rem;margin-top:1.25rem}.content .tips-area .tips-img[data-v-881fd965]{display:block;width:100%}.popup-content[data-v-881fd965]{width:23.4375rem;height:26.5625rem;background:url(./popup_bg-g-F1YU-s.png) no-repeat;background-size:100% 25rem;display:flex;flex-direction:column;align-items:center;box-sizing:border-box;padding-top:7.1875rem}.popup-content .title[data-v-881fd965]{font-weight:bolder;margin-bottom:.9375rem}.popup-content .number[data-v-881fd965]{color:#8b0000;font-size:1.875rem;font-weight:bolder;margin-bottom:.9375rem}.popup-content .number>uni-text[data-v-881fd965]{font-size:.9375rem}.popup-content .tips[data-v-881fd965]{color:#a9a9a9;font-size:.9375rem;margin-bottom:3.125rem}.popup-content .btn>uni-image[data-v-881fd965]{width:9.375rem;height:2.8125rem}.popup-content .close[data-v-881fd965]{margin-top:1.875rem}.popup-content .close>uni-image[data-v-881fd965]{width:1.875rem;height:1.875rem}

View File

@ -0,0 +1 @@
.uni-popup[data-v-f0b957f8]{position:fixed;z-index:99}.uni-popup.top[data-v-f0b957f8],.uni-popup.left[data-v-f0b957f8],.uni-popup.right[data-v-f0b957f8]{top:var(--window-top)}.uni-popup .uni-popup__wrapper[data-v-f0b957f8]{display:block;position:relative}.uni-popup .uni-popup__wrapper.left[data-v-f0b957f8],.uni-popup .uni-popup__wrapper.right[data-v-f0b957f8]{padding-top:var(--window-top);flex:1}.fixforpc-z-index[data-v-f0b957f8]{z-index:999}.fixforpc-top[data-v-f0b957f8]{top:0}.content[data-v-ebd11ddf]{width:100vw;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;background:url(./bg-3NzT_zCy.png) no-repeat;background-size:100% 100%;box-sizing:border-box;padding-bottom:.625rem}.content .tips-text[data-v-ebd11ddf]{color:#310000;font-size:1.25rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.content .btn-area[data-v-ebd11ddf]{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.content .btn-area uni-image[data-v-ebd11ddf]{width:9.375rem;height:3.125rem;border-radius:3.125rem}.content .tips-area[data-v-ebd11ddf]{width:21.875rem;margin-top:1.25rem}.content .tips-area .tips-img[data-v-ebd11ddf]{display:block;width:100%}.popup-content[data-v-ebd11ddf]{width:23.4375rem;height:26.5625rem;background:url(./popup_bg-g-F1YU-s.png) no-repeat;background-size:100% 25rem;display:flex;flex-direction:column;align-items:center;box-sizing:border-box;padding-top:7.1875rem}.popup-content .title[data-v-ebd11ddf]{font-weight:bolder;margin-bottom:.625rem;color:#0a0200;font-size:1.0625rem}.popup-content .number[data-v-ebd11ddf]{color:#f71e00;font-size:2.8125rem;font-weight:bolder;margin-bottom:.46875rem}.popup-content .number>uni-text[data-v-ebd11ddf]{font-size:1.25rem}.popup-content .tips[data-v-ebd11ddf]{color:#43403f;font-size:.9375rem;margin-bottom:2.65625rem;opacity:.6;font-size:.875rem;font-weight:400}.popup-content .btn>uni-image[data-v-ebd11ddf]{width:9.375rem;height:2.8125rem}.popup-content .close[data-v-ebd11ddf]{margin-top:1.875rem}.popup-content .close>uni-image[data-v-ebd11ddf]{width:1.875rem;height:1.875rem}

View File

@ -14,7 +14,7 @@
<title>vue-h5</title>
<!--preload-links-->
<!--app-context-->
<script type="module" crossorigin src="./assets/index-Br-FhQIZ.js"></script>
<script type="module" crossorigin src="./assets/index-CMpkHqXW.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-BgCuxJG8.css">
</head>
<body>

View File

@ -1,8 +1,8 @@
{
"hash": "0b46acb1",
"configHash": "dc8b7459",
"hash": "01c15a5a",
"configHash": "d144ff1f",
"lockfileHash": "e3b0c442",
"browserHash": "fbfc7312",
"browserHash": "5acd962d",
"optimized": {},
"chunks": {}
}

View File

@ -1,6 +1,4 @@
// const baseUrl = "http://zxjt.test.86698.cn"
const baseUrl = process.env.REQUEST_BASE_URL
console.log(baseUrl)
function request(options) {
uni.showLoading({
@ -13,7 +11,12 @@ function request(options) {
// // 如果使用params传参则以&符拼接的格式传参
if (options.params) {
options.data = options.params
defaultHeader['Content-Type'] = 'application/json'
// defaultHeader['Content-Type'] = 'application/json'
defaultHeader['Content-Type'] = 'application/x-www-form-urlencoded'
}
const token = uni.getStorageSync('token');
if (token) {
defaultHeader.Authorization = `Bearer ${token}`
}
return new Promise((resolve, reject) => {
uni.request({