pages下增加开屏页未启用,增加分包other以及静态页面

This commit is contained in:
YeMingfei666 2024-12-19 18:18:24 +08:00
parent a147eaab4f
commit 3535322923
7 changed files with 763 additions and 5 deletions

View File

@ -34,7 +34,6 @@ Vue.use(httpApi, app)
app.$mount()
console.log(uni);
// #ifdef APP

17
other/about/about.vue Normal file
View File

@ -0,0 +1,17 @@
<template>
<view>
关于我们
</view>
</template>
<script>
export default {
data() {
return {
}
}
}
</script>
<style lang="scss" scoped></style>

139
other/address/address.vue Normal file
View File

@ -0,0 +1,139 @@
<template>
<view>
<view class="item" v-for="(res, index) in siteList" :key="res.id">
<view class="top">
<view class="name">{{ res.name }}</view>
<view class="phone">{{ res.phone }}</view>
<view class="tag">
<text v-for="(item, index) in res.tag" :key="index" :class="{red:item.tagText=='默认'}">{{ item.tagText }}</text>
</view>
</view>
<view class="bottom">
广东省深圳市宝安区 自由路66号
<u-icon name="edit-pen" :size="40" color="#999999"></u-icon>
</view>
</view>
<view class="addSite" @tap="toAddSite">
<view class="add">
<u-icon name="plus" color="#ffffff" class="icon" :size="30"></u-icon>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
siteList: []
};
},
onLoad() {
this.getData();
},
methods: {
getData() {
this.siteList = [
{
id: 1,
name: '游X',
phone: '183****5523',
tag: [
{
tagText: '默认'
},
{
tagText: '家'
}
],
site: '广东省深圳市宝安区 自由路66号'
},
{
id: 2,
name: '李XX',
phone: '183****5555',
tag: [
{
tagText: '公司'
}
],
site: '广东省深圳市宝安区 翻身路xx号'
},
{
id: 3,
name: '王YY',
phone: '153****5555',
tag: [],
site: '广东省深圳市宝安区 平安路13号'
}
];
},
toAddSite(){
uni.navigateTo({
url: '/pages/template/address/addSite'
});
}
}
};
</script>
<style lang="scss" scoped>
.item {
padding: 40rpx 20rpx;
.top {
display: flex;
font-weight: bold;
font-size: 34rpx;
.phone {
margin-left: 60rpx;
}
.tag {
display: flex;
font-weight: normal;
align-items: center;
text {
display: block;
width: 60rpx;
height: 34rpx;
line-height: 34rpx;
color: #ffffff;
font-size: 20rpx;
border-radius: 6rpx;
text-align: center;
margin-left: 30rpx;
background-color:rgb(49, 145, 253);
}
.red{
background-color:red
}
}
}
.bottom {
display: flex;
margin-top: 20rpx;
font-size: 28rpx;
justify-content: space-between;
color: #999999;
}
}
.addSite {
display: flex;
justify-content: space-around;
width: 600rpx;
line-height: 100rpx;
position: absolute;
bottom: 30rpx;
left: 80rpx;
background-color: red;
border-radius: 60rpx;
font-size: 30rpx;
.add{
display: flex;
align-items: center;
color: #ffffff;
.icon{
margin-right: 10rpx;
}
}
}
</style>

374
other/coup/coup.vue Normal file
View File

@ -0,0 +1,374 @@
<template>
<view class="u-wrap">
<view class="meituan">
<view class="content">
<view class="left">
<view class="sum">
<text class="num">8</text>
</view>
<view class="type">抵用券</view>
</view>
<view class="centre">
<view class="title">洗牙8元无门槛红包</view>
<view class="valid-date">今日到期</view>
</view>
<view class="right">
<view size="mini" class="immediate-use" :round="true">立即使用</view>
</view>
</view>
<view class="tips">
<view class="circle-left"></view>
<view class="circle-right"></view>
<view class="explain u-line-1">满8.1元可用限最新版本客户端使用</view>
<view class="rule u-line-1" @tap="xxx122">
<text>使用规则</text>
<u-icon name="arrow-right" color="" :size="20" @click=""></u-icon>
</view>
</view>
</view>
<view class="jingdong">
<view class="left">
<view class="sum">
<text class="num">100</text>
</view>
<view class="type">满149元可用</view>
</view>
<view class="right">
<view class="top">
<view class="title">
<text class="tag">限品类东券</text>
<text>仅可购买个人护理部分商品</text>
</view>
<view class="bottom">
<view class="date u-line-1">2020.01.01-2020.01.31</view>
<view class="immediate-use">立即使用</view>
</view>
</view>
<view class="tips">
<view class="explain">
<u-icon name="zhuanfa" class="transpond" :size="24"></u-icon>
<text>可赠送</text>
</view>
</view>
</view>
</view>
<view class="taobao">
<view class="title">
<view class="left">
<image class="buddha" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1975388697,1068670603&fm=26&gp=0.jpg" mode="aspectFill"></image>
<view class="store">袜子精保护协会</view>
</view>
<view class="entrance">进店</view>
</view>
<view class="ticket">
<view class="left">
<image
class="picture"
src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578059523488&di=5f592ac19c1b983005d3e85add469756&imgtype=0&src=http%3A%2F%2Fimg010.hc360.cn%2Fg7%2FM00%2F2D%2FB9%2FwKhQs1QfUo6EdeM-AAAAALwk1hM072.jpg"
mode="widthFix"
></image>
<view class="introduce">
<view class="top">
<text class="big">3</text>
满88减3
</view>
<view class="type">店铺优惠券</view>
<view class="date u-line-1">2019.11.28-2020.1.24</view>
</view>
</view>
<view class="right">
<view class="use immediate-use" :round="true">去使用</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
};
</script>
<style lang="scss" scoped>
page {
height: 100%;
background-color: rgb(244, 244, 244);
}
.u-wrap {
padding: 24rpx;
}
.meituan {
margin: 30rpx auto;
background-color: #ffffff;
width: 700rpx;
// border: 10rpx;
color: $u-type-warning;
font-size: 28rpx;
.content {
display: flex;
align-items: center;
padding: 80rpx 20rpx;
border: 10rpx;
background-color: #fff5f4;
.left {
.sum {
font-size: 32rpx;
.num {
font-size: 60rpx;
font-weight: bold;
}
}
}
.centre {
margin-left: 40rpx;
.title {
font-size: 32rpx;
font-weight: bold;
color: $u-main-color;
margin-bottom: 20rpx;
}
}
.right {
margin-left: 30rpx;
.immediate-use {
padding: 0 20rpx;
height: 50rpx;
border-radius: 25rpx;
line-height: 50rpx;
background-color: $u-type-warning!important;
color: #ffffff!important;
font-size: 24rpx;
border: none;
word-break: keep-all;
}
}
}
.tips {
padding: 0 20rpx;
border: 10rpx;
background-color: $u-type-info-light;
position: relative;
color: $u-tips-color;
display: flex;
justify-content: space-between;
line-height: 60rpx;
font-size: 24rpx;
.circle-left,
.circle-right {
position: absolute;
height: 36rpx;
width: 18rpx;
background-color: #f2f2f2;
}
.circle-right {
border-radius: 40rpx 0 0 40rpx;
right: 0;
top: -18rpx;
}
.circle-left {
border-radius: 0 40rpx 40rpx 0;
left: 0;
top: -18rpx;
}
.rule {
font-size: 24rpx;
display: flex;
align-items: center;
text {
margin-right: 10rpx;
flex: 1;
}
}
}
}
.jingdong {
margin-top: 40rpx;
width: 700rpx;
height: auto;
background-color: #ffffff;
display: flex;
.left {
padding: 0 30rpx;
background-color: rgb(95, 148, 224); //rgb(94, 152, 225);
text-align: center;
font-size: 28rpx;
color: #ffffff;
.sum {
margin-top: 50rpx;
font-weight: bold;
font-size: 32rpx;
.num {
font-size: 80rpx;
}
}
.type {
margin-bottom: 50rpx;
font-size: 24rpx;
}
}
.right {
padding: 20rpx 20rpx 0;
font-size: 28rpx;
.top {
border-bottom: 2rpx dashed $u-border-color;
.title {
margin-right: 60rpx;
line-height: 40rpx;
.tag {
padding: 4rpx 20rpx;
background-color: rgb(73, 154, 201);
border-radius: 20rpx;
color: #ffffff;
font-weight: bold;
font-size: 24rpx;
margin-right: 10rpx;
}
}
.bottom {
display: flex;
margin-top: 20rpx;
align-items: center;
justify-content: space-between;
margin-bottom: 10rpx;
.date {
font-size: 20rpx;
flex: 1;
}
.immediate-use {
height: auto;
padding: 0 20rpx;
font-size: 24rpx;
border-radius: 40rpx;
line-height: 40rpx;
color: rgb(117, 142, 165);
border: 2rpx solid rgb(117, 142, 165);
}
}
}
.tips {
width: 100%;
line-height: 50rpx;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 24rpx;
.transpond {
margin-right: 10rpx;
}
.explain {
display: flex;
align-items: center;
}
.particulars {
width: 30rpx;
height: 30rpx;
box-sizing: border-box;
padding-top: 8rpx;
border-radius: 50%;
background-color: $u-type-info-disabled;
text-align: center;
}
}
}
}
.taobao {
margin-top: 40rpx;
width: 700rpx;
background-color: white;
padding: 30rpx 20rpx 20rpx;
border-radius: 20rpx;
.title {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20rpx;
font-size: 30rpx;
.left {
display: flex;
align-items: center;
}
.store {
font-weight: 500;
}
.buddha {
width: 70rpx;
height: 70rpx;
border-radius: 10rpx;
margin-right: 10rpx;
}
.entrance {
color: $u-type-info;
border: solid 2rpx $u-type-info;
line-height: 48rpx;
padding: 0 30rpx;
background: none;
border-radius: 15px;
}
}
.ticket {
display: flex;
.left {
width: 70%;
padding: 30rpx 20rpx;
background-color: rgb(255, 245, 244);
border-radius: 20rpx;
border-right: dashed 2rpx rgb(224, 215, 211);
display: flex;
.picture {
width: 172rpx;
border-radius: 20rpx;
}
.introduce {
margin-left: 10rpx;
.top{
color:$u-type-warning;
font-size: 28rpx;
.big{
font-size: 60rpx;
font-weight: bold;
margin-right: 10rpx;
}
}
.type{
font-size: 28rpx;
color: $u-type-info-dark;
}
.date{
margin-top: 10rpx;
font-size: 20rpx;
color: $u-type-info-dark;
}
}
}
.right {
width: 30%;
padding: 40rpx 20rpx;
background-color: rgb(255, 245, 244);
border-radius: 20rpx;
display: flex;
align-items: center;
.use{
height: auto;
padding: 0 20rpx;
font-size: 24rpx;
border-radius: 40rpx;
color: #ffffff!important;
background-color: $u-type-warning!important;
line-height: 40rpx;
color: rgb(117, 142, 165);
margin-left: 20rpx;
}
}
}
}
</style>

113
other/pay/pay.vue Normal file
View File

@ -0,0 +1,113 @@
<template>
<view>
<view class="u-padding-40">
<u-button type="success" @click="showPop(true)">
<u-icon name="red-packet"></u-icon>
<text class="u-padding-left-10">发送1.00元红包</text>
</u-button>
</view>
<u-keyboard
default=""
ref="uKeyboard"
mode="number"
:mask="true"
:mask-close-able="false"
:dot-enabled="false"
v-model="show"
:safe-area-inset-bottom="true"
:tooltip="false"
@change="onChange"
@backspace="onBackspace">
<view>
<view class="u-text-center u-padding-20 money">
<text>1.00</text>
<text class="u-font-20 u-padding-left-10"></text>
<view class="u-padding-10 close" data-flag="false" @tap="showPop(false)">
<u-icon name="close" color="#333333" size="28"></u-icon>
</view>
</view>
<view class="u-flex u-row-center">
<u-message-input
mode="box"
:maxlength="6"
:dot-fill="true"
v-model="password"
:disabled-keyboard="true"
@finish="finish"
></u-message-input>
</view>
<view class="u-text-center u-padding-top-10 u-padding-bottom-20 tips">支付键盘</view>
</view>
</u-keyboard>
</view>
</template>
<script>
export default {
data() {
return {
show:false,
password:''
}
},
onLoad() {
},
methods: {
onChange(val){
if(this.password.length<6){
this.password += val;
}
if(this.password.length>=6){
this.pay();
}
},
onBackspace(e){
if(this.password.length>0){
this.password = this.password.substring(0,this.password.length-1);
}
},
pay(){
uni.showLoading({
title:'支付中'
})
setTimeout(()=>{
uni.hideLoading();
this.show = false;
uni.showToast({
icon:'success',
title:'支付成功'
})
},2000);
},
showPop(flag = true){
this.password = '';
this.show = flag;
},
finish(){
console.log(11111)
}
}
}
</script>
<style lang="scss">
.money{
font-size: 80rpx;
color: $u-type-warning;
position: relative;
.close{
position: absolute;
top: 20rpx;
right: 20rpx;
line-height: 28rpx;
font-size: 28rpx;
}
}
.tips{
color:$u-tips-color;
}
</style>

View File

@ -244,10 +244,16 @@
}
},
{
"path" : "pages/pays/pays",
"style" :
{
"navigationBarTitleText" : ""
"path": "pages/pays/pays",
"style": {
"navigationBarTitleText": ""
}
},
{
"path": "pages/first/first",
"style": {
"navigationBarTitleText": "开屏广告",
"navigationStyle": "custom"
}
}
],
@ -678,6 +684,39 @@
}
}
]
},
{
"root": "other",
"pages": [
{
"path": "about/about",
"style": {
"navigationBarTitleText": "关于我们"
}
},
{
"path" : "coup/coup",
"style" :
{
"navigationBarTitleText" : "卡包"
}
},
{
"path" : "address/address",
"style" :
{
"navigationBarTitleText" : "收货地址"
}
},
{
"path" : "pay/pay",
"style" :
{
"navigationBarTitleText" : "发红包"
}
}
]
}
],

77
pages/first/first.vue Normal file
View File

@ -0,0 +1,77 @@
<template>
<view class="u-relative bg-gray fixed position-all">
<view class="time btn" v-if="time<=0" @click="enter"><text>进入</text></view>
<view class="time" v-else ><text>{{time}}</text></view>
<view class="w-full box">
<image src="/static/images/share_bg2.png" class="img"></image>
</view>
</view>
</template>
<script>
export default {
data() {
return {
time:3
}
},
onLoad() {
this.init()
},
methods: {
enter(){
uni.reLaunch({
url:'/pages/index/index'
})
},
init(){
this.timer=setInterval(()=>{
this.time--
if(this.time<=0){
clearInterval(this.timer)
}
},1000)
}
}
}
</script>
<style lang="scss" scoped>
.position-all{
position: fixed;
inset: 0;
.time{
position: absolute;
z-index: 10;
width: 50rpx;
height: 50rpx;
text-align: center;
display: flex;
justify-content: center;
font-size: 14px;
color: #555;
align-items: center;
right: 30rpx;
border-radius: 50%;
background-color: rgba(255, 255, 255, .5);
border: 1px solid rgba(255, 255, 255, .8);
top: calc(var(--status-bar-height) + 20rpx );
}
.btn{
border-radius: 100rpx;
white-space: nowrap;
width: auto;
height: auto;
padding: 4rpx 20rpx;
}
.box{
position: absolute;
inset: 0;
.img{
width: 100%;
height: 100%;
}
}
}
</style>