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> <template>
<view class="body"> <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" <image style="width: 100%;" src="https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/img/bg_heli_vip.png"
mode="widthFix" /> mode="widthFix" />
<view class="section"> <view class="section">
<view v-if="agreementDto != undefined" @click="handleUnsign" <view v-if="agreementDto != undefined" @click="handleUnsign"
style="margin-top: 12rpx;margin-left: 30rpx;color: black;">自动续费管理</view> style="margin-top: 12rpx;margin-left: 30rpx;color: black;">自动续费管理</view>
<view class="pack-box"> <view class="pack-box">
<view class="pack-item" :class="[{active: index==selectedIndex}]" v-for='(item, index) in vipList' <scroll-view scroll-x style="white-space: nowrap">
:key='index' @click="choosePack(item, index)"> <view class="pack-item" v-for='(item, index) in vipList' :key='index'
<view class="label"> @click="choosePack(item, index)">
{{ item.topTitle }} <view class="pack-content" :class="[{active: index==selectedIndex}]">
</view> <view class="label">
<view class="name row" :class="[{active2: index==selectedIndex}]"> {{ item.topTitle }}
{{item.title}} </view>
</view> <view class="name row" :class="[{active2: index==selectedIndex}]">
<view class="price row" :class="[{active1: index==selectedIndex}]"> {{item.title}}
<view style="font-size: 22rpx;">￥</view> </view>
{{item.firstPayPrice}} <view class="price row" :class="[{active1: index==selectedIndex}]">
</view> <view style="font-size: 22rpx;">￥</view>
<view class="origin row" v-if='item.oldPrice'> {{item.firstPayPrice}}
￥{{item.oldPrice}} </view>
</view> <view class="origin row" v-if='item.oldPrice'>
￥{{item.oldPrice}}
<view class="origin2 row" v-if='item.oldPrice'> </view>
{{item.remarks }}
</view> <view class="origin2 row" v-if='item.oldPrice'>
{{item.remarks }}
<view class="label2" v-if="index==selectedIndex"> </view>
{{ '仅需'+amount(item.firstPayPrice / item.days)+'元/天' }}
<view class="label2" v-if="index==selectedIndex">
{{ '仅需'+amount(item.firstPayPrice / item.days)+'元/天' }}
</view>
</view> </view>
</view> </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>
</view>
</scroll-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> </view>
</template> </template>
...@@ -118,7 +118,7 @@ ...@@ -118,7 +118,7 @@
}, },
handlePay() { handlePay() {
if (!this.checked) { if (!this.checked) {
message.notify("请阅读《连续订阅服务协议》与《支付协议》后勾选同意") message.notify("请阅读《连续订阅服务协议》与《支付协议》与《河狸小故事隐私政策》后勾选同意")
return return
} }
...@@ -215,122 +215,121 @@ ...@@ -215,122 +215,121 @@
.pack-box { .pack-box {
margin-top: 25rpx; margin-top: 25rpx;
display: flex; display: flex;
margin-left: 30rpx;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
overflow-x: scroll;
.active {
background-color: #FEF8F5;
border: 4rpx solid #FDEADC !important;
}
.pack-item { .pack-item {
margin-bottom: 25rpx; margin-left: 30rpx;
margin-right: 30rpx; width: calc(32% - 30rpx);
width: calc(31% - 30rpx); display: inline-block;
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 { .active {
margin-bottom: 8rpx; background-color: #FEF8F5;
border: 4rpx solid #FDEADC !important;
} }
.name { .pack-content {
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;
width: 100%; width: 100%;
border-radius: 0 0 20rpx 20rpx; height: 260rpx;
background-color: #FC4F3B; display: flex;
color: white; flex-direction: column;
font-size: 24rpx; align-items: center;
height: 50rpx; background: white;
line-height: 50rpx; border: 4rpx solid #EAECEC;
text-align: center; border-radius: 20rpx;
position: absolute; position: relative;
bottom: 0; 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 { .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