Skip to content

U
uniapp_vedio
Commit 5d1e4141 authored by jyx's avatar jyx
Browse files
Options

代码优化

parent 23b8a74c
Hide whitespace changes
Inline Side-by-side
Showing with 156 additions and 157 deletions
vedio/pagesA/vipPay/vipPay.vue
View file @ 5d1e4141
<template>
<view class="body">
<scroll-view scroll-y style="height: 100%;">
<image style="width: 100%;" src="https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/img/bg_heli_vip.png"
mode="widthFix" />
<view class="section">
<view v-if="agreementDto != undefined" @click="handleUnsign"
style="margin-top: 12rpx;margin-left: 30rpx;color: black;">自动续费管理</view>
<view class="pack-box">
<view class="pack-item" :class="[{active: index==selectedIndex}]" v-for='(item, index) in vipList'
:key='index' @click="choosePack(item, index)">
<view class="label">
{{ item.topTitle }}
</view>
<view class="name row" :class="[{active2: index==selectedIndex}]">
{{item.title}}
</view>
<view class="price row" :class="[{active1: index==selectedIndex}]">
<view style="font-size: 22rpx;">￥</view>
{{item.firstPayPrice}}
</view>
<view class="origin row" v-if='item.oldPrice'>
￥{{item.oldPrice}}
</view>
<view class="origin2 row" v-if='item.oldPrice'>
{{item.remarks }}
</view>
<view class="label2" v-if="index==selectedIndex">
{{ '仅需'+amount(item.firstPayPrice / item.days)+'元/天' }}
<image style="width: 100%;" src="https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/img/bg_heli_vip.png"
mode="widthFix" />
<view class="section">
<view v-if="agreementDto != undefined" @click="handleUnsign"
style="margin-top: 12rpx;margin-left: 30rpx;color: black;">自动续费管理</view>
<view class="pack-box">
<scroll-view scroll-x style="white-space: nowrap">
<view class="pack-item" v-for='(item, index) in vipList' :key='index'
@click="choosePack(item, index)">
<view class="pack-content" :class="[{active: index==selectedIndex}]">
<view class="label">
{{ item.topTitle }}
</view>
<view class="name row" :class="[{active2: index==selectedIndex}]">
{{item.title}}
</view>
<view class="price row" :class="[{active1: index==selectedIndex}]">
<view style="font-size: 22rpx;">￥</view>
{{item.firstPayPrice}}
</view>
<view class="origin row" v-if='item.oldPrice'>
￥{{item.oldPrice}}
</view>
<view class="origin2 row" v-if='item.oldPrice'>
{{item.remarks }}
</view>
<view class="label2" v-if="index==selectedIndex">
{{ '仅需'+amount(item.firstPayPrice / item.days)+'元/天' }}
</view>
</view>
</view>
</view>
</view>
<view class="agreementWrp">
<checkbox-group @change="checkboxChange" style="width: 50rpx;">
<checkbox :checked="checked" style="transform:scale(0.6)">
</checkbox>
</checkbox-group>
<text>您已阅读并同意
<text class="agreementText" @click="goAgreement(1)">《连续订阅服务协议》</text>
与<text class="agreementText" @click="goAgreement(2)">《支付协议》</text>
与<text class="agreementText" @click="goAgreement(3)">《河狸小故事隐私政策》</text>
</text>
</view>
<view class="section">
<button class="apply-button" @click="handlePay">立即开通</button>
</scroll-view>
</view>
</scroll-view>
</view>
<view class="agreementWrp">
<checkbox-group @change="checkboxChange" style="width: 50rpx;">
<checkbox :checked="checked" style="transform:scale(0.6)">
</checkbox>
</checkbox-group>
<text>您已阅读并同意
<text class="agreementText" @click="goAgreement(1)">《连续订阅服务协议》</text>
与<text class="agreementText" @click="goAgreement(2)">《支付协议》</text>
与<text class="agreementText" @click="goAgreement(3)">《河狸小故事隐私政策》</text>
</text>
</view>
<view class="section">
<button class="apply-button" @click="handlePay">立即开通</button>
</view>
</view>
</template>
......@@ -118,7 +118,7 @@
},
handlePay() {
if (!this.checked) {
message.notify("请阅读《连续订阅服务协议》与《支付协议》后勾选同意")
message.notify("请阅读《连续订阅服务协议》与《支付协议》与《河狸小故事隐私政策》后勾选同意")
return
}
......@@ -215,122 +215,121 @@
.pack-box {
margin-top: 25rpx;
display: flex;
margin-left: 30rpx;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
.active {
background-color: #FEF8F5;
border: 4rpx solid #FDEADC !important;
}
overflow-x: scroll;
.pack-item {
margin-bottom: 25rpx;
margin-right: 30rpx;
width: calc(31% - 30rpx);
height: 260rpx;
display: flex;
flex-direction: column;
align-items: center;
background: white;
border: 4rpx solid #EAECEC;
border-radius: 20rpx;
position: relative;
padding-top: 50rpx;
.row {
display: flex;
align-items: center;
margin: 6rpx 15rpx;
marign-bottom: 0;
}
margin-left: 30rpx;
width: calc(32% - 30rpx);
display: inline-block;
.row:last-child {
margin-bottom: 8rpx;
.active {
background-color: #FEF8F5;
border: 4rpx solid #FDEADC !important;
}
.name {
font-size: 26rpx;
font-weight: 700;
color: #000000;
}
.price {
font-size: 40rpx;
color: #000000;
font-weight: 700;
}
.active1 {
color: #fd5350;
}
.active2 {
color: #6D301D;
}
.origin {
font-size: 22rpx;
text-align: center;
color: #676666;
text-decoration: line-through;
}
.origin2 {
font-size: 22rpx;
text-align: center;
color: #676666;
}
.label {
margin-top: -4rpx;
margin-left: -4rpx;
border-radius: 20rpx 0 20rpx 0;
width: 80%;
background: linear-gradient(90deg, #FC4F3B, #FBCB7A);
color: white;
font-size: 24rpx;
height: 50rpx;
line-height: 50rpx;
margin-right: 20rpx;
text-align: center;
position: absolute;
top: 0;
left: 0;
}
.label2 {
margin-bottom: -4rpx;
margin-left: -4rpx;
margin-right: -4rpx;
.pack-content {
width: 100%;
border-radius: 0 0 20rpx 20rpx;
background-color: #FC4F3B;
color: white;
font-size: 24rpx;
height: 50rpx;
line-height: 50rpx;
text-align: center;
position: absolute;
bottom: 0;
}
height: 260rpx;
display: flex;
flex-direction: column;
align-items: center;
background: white;
border: 4rpx solid #EAECEC;
border-radius: 20rpx;
position: relative;
padding-top: 50rpx;
.row {
display: flex;
align-items: center;
margin: 6rpx 15rpx;
marign-bottom: 0;
}
.row:last-child {
margin-bottom: 8rpx;
}
.name {
font-size: 26rpx;
font-weight: 700;
color: #000000;
}
.price {
font-size: 40rpx;
color: #000000;
font-weight: 700;
}
.active1 {
color: #fd5350;
}
.active2 {
color: #6D301D;
}
.origin {
font-size: 22rpx;
text-align: center;
color: #676666;
text-decoration: line-through;
}
.origin2 {
// width: 100rpx;
font-size: 22rpx;
text-align: center;
color: #676666;
word-wrap: break-word;
word-break: break-all;
white-space: pre-line;
}
.label {
margin-top: -4rpx;
margin-left: -4rpx;
border-radius: 20rpx 0 20rpx 0;
width: 80%;
background: linear-gradient(90deg, #FC4F3B, #FBCB7A);
color: white;
font-size: 24rpx;
height: 50rpx;
line-height: 50rpx;
margin-right: 20rpx;
text-align: center;
position: absolute;
top: 0;
left: 0;
}
.label2 {
margin-bottom: -4rpx;
margin-left: -4rpx;
margin-right: -4rpx;
width: 100%;
border-radius: 0 0 20rpx 20rpx;
background-color: #FC4F3B;
color: white;
font-size: 24rpx;
height: 50rpx;
line-height: 50rpx;
text-align: center;
position: absolute;
bottom: 0;
}
.cut-down {
position: absolute;
top: 0;
right: 0;
color: #fff;
background: #ff502f;
font-size: 22rpx;
border-radius: 15rpx;
height: 30rpx;
line-height: 30rpx;
padding: 0 10rpx;
transform: translate(0, -50%);
}
}
.pack-item:last-child {
margin-right: 30rpx;
}
}
.apply-button {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment