提交一次代码,邮储音视频项目

This commit is contained in:
xiaogang 2024-11-12 15:28:14 +08:00
parent c656192050
commit 22461b4063
14 changed files with 634 additions and 33 deletions

View File

@ -4,7 +4,7 @@ import path from 'path'
const config = {
pages:'./src/pages',
pagesInclude:['ycnc']
pagesInclude:['ycysp/pay.vue']
}
const { pages, pagesInclude } = config

View File

@ -1,40 +1,24 @@
{
"pages": [
{
"path": "pages/ycnc/index",
"type": "home",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "奶茶活动",
"navigationBarBackgroundColor": "#FFF"
}
"path": "pages/ycysp/coupon",
"type": "page"
},
{
"path": "pages/ycnc/detail",
"type": "page",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "商品详情",
"navigationBarBackgroundColor": "#FFF"
}
"path": "pages/ycysp/pay",
"type": "page"
},
{
"path": "pages/ycnc/order",
"type": "page",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "我的订单",
"navigationBarBackgroundColor": "#FFF"
}
"path": "pages/ycysp/component/member",
"type": "page"
},
{
"path": "pages/ycnc/orderDetail",
"type": "page",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "订单详情",
"navigationBarBackgroundColor": "#FFF"
}
"path": "pages/ycysp/component/recharge-item",
"type": "page"
},
{
"path": "pages/ycysp/component/ticket-recieve",
"type": "page"
}
],
"globalStyle": {

View File

@ -0,0 +1,18 @@
<template>
<view class="wrapper"></view>
</template>
<script setup lang="ts">
import { ref, reactive, unref, onMounted} from 'vue';
</script>
<style scoped lang="scss">
.wrapper{
// width:226rpx;
width:100%;
height:110rpx;
box-sizing: border-box;
background: url('@/static/ycysp/cloud.webp') no-repeat;
background-size: 100% 100%;
}
</style>

View File

@ -0,0 +1,63 @@
<template>
<view class="flex flex-col flex-items-center flex-justify-center re-wrapper">
<view class="type-name">黄金月卡</view>
<view class="flex type-amount">
<view class="flex flex-col flex-justify-end icon"></view>
<view class="num">18</view>
</view>
<view class="type-ori">原价30</view>
</view>
</template>
<script setup lang="ts">
import { ref, reactive, unref, onMounted} from 'vue';
</script>
<style scoped lang="scss">
.re-wrapper{
width:100%;
height:200rpx;
box-sizing: border-box;
border-radius: 10rpx;
opacity: 1;
background: #DCEFFF;
box-sizing: border-box;
border: 1.6rpx solid #2D91FF;
}
.type-name{
/* 选项框标题 */
font-size: 26rpx;
font-weight: normal;
line-height: normal;
letter-spacing: 0em;
color: #070B1B;
}
.type-amount{
margin-top:6rpx;
.icon{
font-size: 28rpx;
font-weight: 600;
line-height: normal;
letter-spacing: 0em;
color: #659BEB;
margin-bottom:4rpx;
}
.num{
/* 价格 */
font-size: 48rpx;
font-weight: 600;
line-height: normal;
letter-spacing: 0em;
color: #659BEB;
}
}
.type-ori{
font-size: 24rpx;
font-weight: normal;
line-height: normal;
letter-spacing: 0em;
text-decoration: line-through;
color: #A4C4FA;
margin-top:6rpx;
}
</style>

View File

@ -0,0 +1,152 @@
<template>
<view class="flex pos-relative wrapper flex-justify-between" :class="{small:['small'].includes(type),large:['large'].includes(type)}">
<view class="flex flex-items-center flex-justify-center pos-absolute tips" v-if="['small'].includes(type)">每日限量50张</view>
<view class="amount">
<view class="icon"></view>
<view class="number">10</view>
</view>
<view class="operation" v-if="['small'].includes(type)">
<view class="name">优酷喵喵年卡适用</view>
<view class="flex flex-items-center flex-justify-center btn">立即领取</view>
</view>
<view class="operation-large" v-else>
<view class="name-tips">
<view class="name-large">芒果全屏会员年卡适用</view>
<view class="tips-large">每日限量50张</view>
</view>
<view class="flex flex-items-center flex-justify-center btn-large">立即领取</view>
</view>
</view>
</template>
<script setup>
import { ref, reactive, unref, onMounted} from 'vue';
const props = defineProps({
type:{
type:String,
default:'small'
}
})
</script>
<style scoped lang="scss">
.wrapper{
height: 136rpx;
color: #0E9BF2;
}
.small{
width: 322rpx;
background: url('@/static/ycysp/ticket-small.webp') no-repeat;
margin-bottom:18rpx;
background-size: cover;
}
.large{
width: 662rpx;
background: url('@/static/ycysp/ticket-large.webp') no-repeat;
background-size: cover;
}
.tips{
border-radius: 20rpx 0rpx 20rpx 0rpx;
opacity: 1;
background: #69C5FF;width: 100rpx;
height: 20rpx;
width: 100rpx;
font-size: 12rpx;
font-weight: normal;
line-height: normal;
letter-spacing: 0.04em;
color: #FFFFFF;
}
.amount{
display: flex;
justify-content: center;
// width:120rpx;
width:140rpx;
height:100%;
font-weight: bold;
line-height: normal;
letter-spacing: 0.04em;
}
.icon{
font-size: 18rpx;
display: flex;
align-items: center;
margin-top:20rpx;
}
.number{
font-size: 48rpx;
display: flex;
align-items: center;
}
.operation{
width:180rpx;
height:100%;
display:flex;
flex-direction: column;
justify-content: center;
box-sizing: border-box;
padding:0 15rpx;
}
.name{
width:100%;
font-size: 22rpx;
font-weight: normal;
line-height: normal;
letter-spacing: 0em;
color: #1F93DA;
overflow: hidden; /*文本超出隐藏*/
display:-webkit-box; /*盒子模型微弹性伸缩模型*/
-webkit-box-orient: vertical;/*伸缩盒子的子元素垂直排列*/
-webkit-line-clamp: 2; /*文本显示3行*/
}
.btn{
margin-top:10rpx;
width: 134rpx;
height: 34rpx;
background: linear-gradient(270deg, #9ad2ff 0%, #0e9bf2 100%);
border-radius:38rpx;
font-size: 20rpx;
font-weight: normal;
line-height: 24rpx;
color: #FFFFFF;
}
.operation-large{
width:500rpx;
height:100%;
display:flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding:0 24rpx 0 10rpx;
}
.name-tips{
display: flex;
flex-direction: column;
}
.name-large{
font-size: 28rpx;
font-weight: normal;
line-height: normal;
letter-spacing: 0.04em;
color: #1F93DA;
}
.tips-large{
font-size: 20rpx;
font-weight: normal;
line-height: normal;
letter-spacing: 0.04em;
color: #8CA1D1;
margin-top:4rpx;
}
.btn-large{
width: 162rpx;
height: 64rpx;
background: linear-gradient(270deg, #9ad2ff 0%, #0e9bf2 100%);
border-radius:68rpx;
font-size: 28rpx;
font-weight: normal;
line-height: 64rpx;
color: #FFFFFF;
}
</style>

View File

@ -0,0 +1,16 @@
<template>
<view class="page-wrapper">
</view>
</template>
<script setup>
import { ref, reactive, unref, onMounted} from 'vue';
</script>
<style scoped lang="scss">
.page-wrapper{
width:100vw;
height:100vh;
}
</style>

255
src/pages/ycysp/home.vue Normal file
View File

@ -0,0 +1,255 @@
<template>
<scroll-view class="page-wrapper" scroll-y>
<view class="w-full box-border banner-container">
<image
src="@/static/ycysp/banner.webp"
mode="scaleToFill"
class="w-full h-full"
/>
</view>
<!-- // -->
<view class="ticket-container">
<view class="title">
<view class="title-line"></view>
<view class="title-text">领券更划算</view>
<view class="title-more">我的优惠券</view>
</view>
<view class="flex flex-wrap flex-justify-between">
<ticketRecieve />
<ticketRecieve />
<ticketRecieve type="large"/>
</view>
</view>
<!-- // -->
<view class="member-container">
<view class="title">
<view class="title-text">选择影音会员</view>
</view>
<scroll-view scroll-x class="scroll">
<view class="swiper">
<view v-for="(item,index) in typeArr" class="member-item">
<member key="index"/>
</view>
</view>
</scroll-view>
</view>
<!-- // -->
<view class="recharge-container">
<view class="title">
<view class="title-text">充值选项</view>
</view>
<scroll-view scroll-x class="recharge-scroll">
<view v-for="(item,index) in typeArr" class="recharge-item">
<rechargeItem key="index"/>
</view>
</scroll-view>
</view>
<!-- // -->
<view class="input-container">
<input type="text" placeholder="请输入手机号码充值" placeholder-class="pcs">
</view>
<!-- 下一步 -->
<view class="flex flex-items-center flex-justify-center next-btn">
下一步
</view>
<!-- 描述 -->
<view class="description">
<view class="small-title">产品介绍</view>
<view class="small-text">1充值后可登录官方APP<text class="small-red">查看会员状态及有效期</text>过期不可使用</view>
<view class="small-text">2<text class="small-red">充值前请您确认充值信息是否正确一旦提交无法取消或更改</text>如因账号信息输入错误导致充值至他人账户仍视为充值成功无法补券</view>
<view class="small-text">3此权益中包含的优酷/腾讯黄金会员芒果视频会员可在手机电脑平板上使用不支持电视端不支持投屏<text class="small-red">腾讯视频QQ音乐支持QQ号或手机号</text>其余会员账号均为手机号</view>
<view class="small-text">4本产品仅适用于中国大陆地区用户暂不支持开通中国港澳台海外地区服务</view>
<view class="small-text">5如有疑问请联系成都蓝色兄弟网络科技有限公司<text class="small-red">客服电话400-118-1216</text>服务时间09:00-18:00</view>
</view>
<view style="height:40rpx;"></view>
<!-- 我的订单 -->
<view class="flex flex-justify-center flex-items-center order-btn">我的<br/>订单</view>
</scroll-view>
</template>
<script setup >
import { ref, reactive, unref, onMounted} from 'vue';
import ticketRecieve from './component/ticket-recieve.vue';
import member from './component/member.vue';
import rechargeItem from './component/recharge-item.vue';
const typeArr = new Array(8).fill(new Date().getTime())
</script>
<style scoped lang="scss">
.page-wrapper{
width:100vw;
height:100vh;
opacity: 1;
background: linear-gradient(180deg, #FFFFFF 18%, #F3F3F3 40%, #FAFBFD 60%, #FAFBFD 61%, #FAFBFD 65%);
overflow-y: auto;
}
.banner-container{
height:338rpx;
padding: 36rpx 20rpx 0 4rpx;
background: url('@/static/ycysp/banner-bg.webp') no-repeat;
background-size: 100% auto;
}
.ticket-container{
width: 710rpx;
height: 416rpx;
border-radius: 28rpx;
opacity: 1;
background: #FFFFFF;
box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.04);
margin:40rpx auto 0;
box-sizing: border-box;
padding: 24rpx;
}
.title{
width:100%;
height:50rpx;
display: flex;
align-items: center;
position: relative;
margin-bottom:20rpx;
.title-line{
width: 10rpx;
height: 34rpx;
border-radius: 0rpx 6rpx 6rpx 0rpx;
opacity: 1;
background: linear-gradient(180deg, #95CEFF 0%, #439FFF 100%);
}
.title-text{
font-size: 36rpx;
font-weight: normal;
line-height: normal;
letter-spacing: 0.04em;
font-family: PingFang SC;
color: #212F3B;
margin-left:14rpx;
}
.title-more{
position: absolute;
right:0;
font-family: PingFang SC;
font-size: 26rpx;
font-weight: normal;
line-height: normal;
letter-spacing: 0.04em;
color: #666E7E;
}
}
.member-container{
width:100%;
padding-left:20rpx;
box-sizing: border-box;
margin:40rpx auto 0;
}
.scroll{
width:100%;
height:240rpx;
overflow-x: auto;
}
.swiper{
width:calc((100vw - 68rpx) / 3 * 4 + 64rpx)
// white-space: nowrap;
}
.member-item{
display: inline-block;
margin:0 16rpx 16rpx 0;
width:calc((100vw - 68rpx) / 3);
}
.recharge-container{
width:100%;
margin:40rpx auto 0;
padding-left:20rpx;
box-sizing: border-box;
}
.recharge-scroll{
width:100%;
overflow-x: auto;
white-space: nowrap;
}
.recharge-item{
display: inline-block;
margin:0 16rpx 16rpx 0;
width:calc((100vw - 20rpx) / 3.5);
}
.input-container{
width: 710rpx;
height: 88rpx;
border-radius: 84rpx;
opacity: 1;
background: #EEF7FF;
margin: 40rpx auto 0;
display: flex;
align-items: center;
padding:0 40rpx;
box-sizing: border-box;
input{
font-size: 32rpx;
font-weight: normal;
line-height: normal;
letter-spacing: 0em;
color: #8DBFF6;
}
}
.pcs{
font-size: 32rpx;
font-weight: normal;
line-height: normal;
letter-spacing: 0em;
color: #8DBFF6;
}
.next-btn{
width: 710rpx;
height: 88rpx;
padding: 12rpx 28rpx;
margin: 40rpx auto 0;
font-size: 32rpx;
font-weight: normal;
line-height: normal;
letter-spacing: 0em;
color: #FFFFFF;
background: linear-gradient(270deg, #3194FF 0%, #96CFFF 100%);
box-sizing: border-box;
border-radius: 392rpx;
}
.description{
width:100%;
box-sizing: border-box;
padding: 0 20rpx;
margin-top:40rpx;
}
.small-title{
/* 标题二 */
font-size: 28rpx;
font-weight: normal;
line-height: 32rpx;
letter-spacing: 0px;
color: #0F0F0F;
margin-bottom:20rpx;
}
.small-text{
font-size: 24rpx;
font-weight: normal;
line-height: 44rpx;
color: #383838
}
.small-red{
color: #FF0000
}
.order-btn{
position: fixed;
right: 20rpx;
top:100rpx;
width: 96rpx;
height: 96rpx;
font-size: 24rpx;
font-weight: normal;
line-height: 32rpx;
letter-spacing: 0px;
color: #FFFFFF;
opacity: 1;
background: rgba(45, 145, 255, 0.6);
border-radius:96rpx;
}
</style>

112
src/pages/ycysp/pay.vue Normal file
View File

@ -0,0 +1,112 @@
<template>
<view class="flex flex-col flex-items-center flex-justify-between page-wrapper">
<view class="info">
<view class="title-small">订单详情</view>
<view class="flex detail-info">
<view class="detail-img"></view>
<view class="detail-other">
<view class="flex flex-justify-between name-info">
<text>优酷VIP视频月卡</text>
<text><text style="font-size:20rpx"></text>15</text>
</view>
<view class="flex flex-justify-between count-info">
<text>数量</text>
<text>x1</text>
</view>
</view>
</view>
<view class="order-info">
<view class="order-item">充值账户152****7226</view>
<view class="order-item">充值类型月卡</view>
</view>
</view>
<view class="pay-btn">立即支付</view>
</view>
</template>
<script setup>
import { ref, reactive, unref, onMounted} from 'vue';
</script>
<style scoped lang="scss">
.page-wrapper{
width:100vw;
height:100vh;
opacity: 1;
background: linear-gradient(180deg, #FFFFFF 18%, #F3F3F3 40%, #FAFBFD 60%, #FAFBFD 61%, #FAFBFD 65%);
padding:33rpx 0;
box-sizing: border-box;
}
.info{
width: 702rpx;
height: 374rpx;
border-radius: 24rpx;
opacity: 1;
background: #FFFFFF;
box-sizing: border-box;
padding:32rpx 24rpx;
}
.title-small{
font-size: 28rpx;
font-weight: normal;
line-height: 32rpx;
letter-spacing: 0px;
color: #333333;
}
.detail-info{
padding:24rpx 0;
border-bottom:1rpx solid #E1E1F0;
}
.detail-img{
width:92rpx;
height:92rpx;
border:1px solid red;
margin-right:30rpx;
}
.detail-other{
flex:1;
font-weight:400;
line-height: 32rpx;
letter-spacing: 0px;
.name-info{
font-size: 24rpx;
color: #333333;
}
.count-info{
font-size: 20rpx;
color: #9E9E9E;
margin-top:12rpx;
}
}
.order-info{
border-bottom:1rpx solid #E1E1F0;
padding-bottom:24rpx;
}
.order-item{
font-size: 22rpx;
font-weight: normal;
line-height: 32rpx;
letter-spacing: 0px;
color: #6C6C6C;
margin-top:24rpx;
}
.pay-btn{
width: 710rpx;
height: 88rpx;
/* 自动布局 */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 12rpx 28rpx;
border-radius: 392rpx;
opacity: 1;
background: linear-gradient(270deg, #2C91FF 0%, #9AD2FF 100%);
box-sizing: border-box;
font-size: 32rpx;
font-weight: normal;
line-height: normal;
letter-spacing: 0em;
color: #FFFFFF;
}
</style>

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

BIN
src/static/ycysp/cloud.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

9
uni-pages.d.ts vendored
View File

@ -4,10 +4,11 @@
// Generated by vite-plugin-uni-pages
interface NavigateToOptions {
url: "/pages/ycnc/index" |
"/pages/ycnc/detail" |
"/pages/ycnc/order" |
"/pages/ycnc/orderDetail";
url: "/pages/ycysp/coupon" |
"/pages/ycysp/pay" |
"/pages/ycysp/component/member" |
"/pages/ycysp/component/recharge-item" |
"/pages/ycysp/component/ticket-recieve";
}
interface RedirectToOptions extends NavigateToOptions {}