88 lines
3.2 KiB
Vue
88 lines
3.2 KiB
Vue
<template>
|
|
<view style="background-color: #e8b596;">
|
|
<u-icon name="arrow-left" color="#fff" size="20" style="float: left;margin-top:4%; margin-left: 4%;" @click="gotoBack" />
|
|
<view :style="{ paddingTop: safeAreaInsets.top + 'px', 'color': '#fff'}" class="page-navbar">结算页面</view>
|
|
</view>
|
|
<view class="attentionList">
|
|
<view class="schemeInfo">
|
|
<span style="margin-left: 5%; color: #fff; font-weight: 600; font-size: 15px;">方案信息</span>
|
|
<u-cell-group style="background-color: #fff;flex: 0; border-radius: 5px;">
|
|
<u-cell title="赛事" value="斯洛文尼亚甲级联赛"
|
|
:titleStyle="{'font-size': '14px','font-weight': '600','color' : '#c6c6c6'}" />
|
|
<u-cell title="职业方案" value="放心,连红不会断在这场!"
|
|
:titleStyle="{'font-size': '14px','font-weight': '600','color' : '#c6c6c6'}" />
|
|
<u-cell title="职业打榜高手" value="提词器"
|
|
:titleStyle="{'font-size': '14px','font-weight': '600','color' : '#c6c6c6'}" />
|
|
<u-cell title="金额" value="488.00元宝"
|
|
:titleStyle="{'font-size': '14px','font-weight': '600','color' : '#c6c6c6'}" />
|
|
</u-cell-group>
|
|
</view>
|
|
<view class="">
|
|
<view class="schemeInfo" style="height: 26vh;">
|
|
<span style="margin-left: 5%; color: #fff; font-weight: 600; font-size: 15px;">我的账户</span>
|
|
<u-cell-group style="background-color: #fff;flex: 0; border-radius: 5px;">
|
|
<u-cell title="选择支付方式" value="元宝支付" :isLink="true"
|
|
:titleStyle="{'font-size': '14px','font-weight': '600','color' : '#c6c6c6'}" />
|
|
<u-cell title="账户金额:668.00元宝" value="直接充值" :isLink="true"
|
|
:titleStyle="{'font-size': '14px','font-weight': '600','color' : '#c6c6c6'}" />
|
|
<u-cell title="可用优惠卷" value="0张可用" :isLink="true"
|
|
:titleStyle="{'font-size': '14px','font-weight': '600','color' : '#c6c6c6'}" />
|
|
</u-cell-group>
|
|
</view>
|
|
</view>
|
|
<u-button size="large" shape="shape" color="#fff" style="width: 90%; margin-top: 4%;" @click="accountBtn">
|
|
<span style="color: #e4b698; font-weight: 600;">立即结算</span>
|
|
</u-button>
|
|
<u-modal :show="show" title="温馨提示" :content='content' style="text-align: center;" confirmColor="red" @confirm="confirm" ref="uModal"
|
|
:asyncClose="true" showCancelButton @cancel="()=>show=false"/>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref
|
|
} from 'vue'
|
|
const {
|
|
safeAreaInsets
|
|
} = uni.getSystemInfoSync();
|
|
const show = ref(false)
|
|
const content = ref('赛事已经开场,确认要选购么!!!!')
|
|
const src = ref('https://cdn.uviewui.com/uview/album/1.jpg');
|
|
const gotoBack = () => {
|
|
uni.navigateBack({
|
|
delta: 1
|
|
})
|
|
}
|
|
const accountBtn = ()=>{
|
|
show.value = true
|
|
}
|
|
const confirm = ()=>{
|
|
show.value = false
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.attentionList {
|
|
width: 100%;
|
|
min-height: 94.5vh;
|
|
background-color: #e8b596;
|
|
.schemeInfo{
|
|
height: 32vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
}
|
|
}
|
|
:deep(.u-cell__value){
|
|
max-width: 60vw;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
color: #000;
|
|
}
|
|
:deep(.u-modal__title){
|
|
display: block;
|
|
}
|
|
</style> |