Skip to content

U
uniapp_scan
Commit 6754431d authored by jyx's avatar jyx
Browse files
Options

优化样式

parent 5d3145c1
Hide whitespace changes
Inline Side-by-side
Showing with 258 additions and 118 deletions
scan/pagesA/vipPay/vipPay.vue
View file @ 6754431d
...@@ -7,58 +7,69 @@ ...@@ -7,58 +7,69 @@
src="https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg_scan/img/ic_vip_banner.png" mode="widthFix" /> src="https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg_scan/img/ic_vip_banner.png" mode="widthFix" />
<view class="section"> <view class="section">
<view class="pack-box">
<view class="pack-item"
:style="item.largeType =='vip' ?'background: #f5f5f5;':'background: #f4c98b;'"
:class="[{active: index==selectedIndex}]" v-for='(item, index) in vipList' :key='index'
@click="choosePack(item, index)">
<view style="display: flex;flex-direction: column;align-items: center;">
<view class="price row">
{{item.firstPayPrice}}元
</view>
<view class="name row" v-if="item.title!=null&&item.title!=''">
{{item.title}}
</view>
<view class="origin row" v-if="item.remarks!=null&&item.remarks!=''"> <view class="pack-box">
{{item.remarks}} <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" v-if="item.topTitle">
{{ item.topTitle }}
</view>
<view class="name row" :class="[{active2: index==selectedIndex}]">
{{item.title}}
</view>
<view class="price row"
:class="[{active1: index==selectedIndex},{price2:item.firstPayPrice<=0}]">
<view style="font-size: 50rpx;">{{item.firstPayPrice<=0 ? '' : '￥'}}</view>
{{item.firstPayPrice<=0 ? '免费试用' : item.firstPayPrice}}
</view>
<view class="origin row" v-if='item.oldPrice'>
￥{{item.oldPrice}}
</view>
<view class="origin2 row" v-if='item.remarks'>
{{ getRemark1(item.remarks) + '\r\n' + getRemark2(item.remarks) }}
</view>
<view class="label2" v-if="index==selectedIndex&&item.firstPayPrice>0">
{{ '仅需'+amount(item.firstPayPrice / item.days)+'元/天' }}
</view>
</view> </view>
</view> </view>
<view class="cut-down" v-if='item.topTitle!=null&&item.topTitle.length>0'> </scroll-view>
{{item.topTitle}}
</view>
<view v-if="index==selectedIndex" style="position: absolute;bottom: 0;right: 0;">
<image mode="scaleToFill"
style="width: 100rpx;height: 100rpx;display: flex;align-items: right;"
src="https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/img/ic_loading.gif">
</image>
</view>
</view>
</view> </view>
</view> </view>
<!-- <view v-if="false" class="item-agree">
<image style="width:28rpx;height: 28rpx;" v-if="needClick" @click="clickAgreeBtn"
src="@/static/ic_vip_enable.png">
</image>
<image style="width:28rpx;height: 28rpx;" v-else @click="clickAgreeBtn" src="@/static/ic_vip_none.png">
</image>
<view style="font-size: 22rpx;margin-left: 10rpx;" @click="clickAgree">点击购买即表示您同意《会员付费协议》</view>
</view> -->
<view class="trialStyle"> <view class="trialStyle">
<text v-if="hintText"> <text v-if="hintText">
{{hintText}} {{hintText}}
</text> </text>
</view> </view>
<view @click="handleUnsign" v-if="agreementDto"
style="margin-top: 12rpx;margin-left: 30rpx;color: black;font-size: 36rpx;font-weight: 700;">自动续费管理
>
</view>
<view class="item-agree"> <view class="item-agree">
<view style="font-size: 28rpx;" @click="clickAgree">用户付费须知> </view> <view style="font-size: 28rpx;" @click="clickAgree">用户付费须知> </view>
</view> </view>
<view class="agreementWrp">
<checkbox-group @change="checkboxChange" style="width: 50rpx;">
<checkbox :checked="checked" style="transform:scale(0.9)">
</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"> <view class="section">
<button class="apply-button" @click="handlePay">立即试用</button> <button class="apply-button" @click="handlePay">立即试用</button>
</view> </view>
...@@ -100,6 +111,8 @@ ...@@ -100,6 +111,8 @@
needClick: false, needClick: false,
selectedIndex: 0, selectedIndex: 0,
os: 'android', os: 'android',
checked: false,
agreementDto: null,
hintText: '' hintText: ''
} }
}, },
...@@ -107,17 +120,17 @@ ...@@ -107,17 +120,17 @@
loadData() { loadData() {
if (tt.getSystemInfoSync().platform === 'ios') { if (tt.getSystemInfoSync().platform === 'ios') {
this.os = 'ios'; this.os = 'ios';
} }
this.post({ this.post({
url: '/vip/getVipProducts/cyc', url: '/vip/getVipProducts',
showLoading: false, showLoading: false,
success: ({ success: ({
data data
}) => { }) => {
this.vipList = data.list this.vipList = data.list
this.hintText = this.vipList[0].trailRemark; this.hintText = this.vipList[0].trailRemark;
if (data.list != null) { if (data.list != null) {
// this.selectedIndex = data.list[0].activityType; // this.selectedIndex = data.list[0].activityType;
for (let i = 0; i < data.list.length; i++) { for (let i = 0; i < data.list.length; i++) {
...@@ -129,6 +142,21 @@ ...@@ -129,6 +142,21 @@
} }
} }
}); });
this.post({
url: '/vip/getOrderList',
showLoading: false,
success: ({
data
}) => {
if (data.agreement == undefined) {
this.agreementDto = null;
} else {
this.agreementDto = data.agreement;
}
}
});
}, },
clickAgreeBtn() { clickAgreeBtn() {
this.needClick = !this.needClick this.needClick = !this.needClick
...@@ -137,9 +165,8 @@ ...@@ -137,9 +165,8 @@
this.$refs.alertDialog.close(); this.$refs.alertDialog.close();
}, },
choosePack(item, index) { choosePack(item, index) {
this.selectedIndex = index; this.selectedIndex = index;
this.hintText = this.vipList[this.selectedIndex].trailRemark;
this.hintText = this.vipList[this.selectedIndex].trailRemark;
}, },
clickAgree() { clickAgree() {
// let url = 'https://mints-web.mints-id.com/agreements/scandemon/gmxy.html'; // let url = 'https://mints-web.mints-id.com/agreements/scandemon/gmxy.html';
...@@ -152,6 +179,12 @@ ...@@ -152,6 +179,12 @@
return return
} }
if (!this.checked) {
message.notify("请阅读《支付协议》后勾选同意")
return
}
let that = this; let that = this;
let vipBean = this.vipList[this.selectedIndex]; let vipBean = this.vipList[this.selectedIndex];
...@@ -276,6 +309,45 @@ ...@@ -276,6 +309,45 @@
that.paySuccess(largeType); that.paySuccess(largeType);
} }
}); });
},
checkboxChange(e) {
if (e.detail.value.length > 0) {
this.checked = true
} else {
this.checked = false
}
},
handleUnsign() {
if (this.agreementDto) {
let params = JSON.stringify(this.agreementDto)
navigateTo(`/pagesA/unsign/unsign?params=` + params)
}
},
amount(value) {
return value.toFixed(2)
},
getRemark1(value) {
let data = value.split(',')
if (data.length > 0) {
return data[0]
}
return ''
},
getRemark2(value) {
let data = value.split(',')
if (data.length > 1) {
return data[1]
}
return ''
},
goAgreement(type) {
if (type == 1) {
navigateTo(`/pages/brower/brower?url=https://api.mints-tech.cn/camera-api/agreements/lingxi/gmxy.html`)
} else if (type == 2) {
navigateTo(`/pages/brower/brower?url=https://api.mints-tech.cn/camera-api/agreements/lingxi/syzc.html`)
} else if (type == 3) {
navigateTo(`/pages/brower/brower?url=https://api.mints-tech.cn/camera-api/agreements/lingxi/yhxy.html`)
}
} }
} }
} }
...@@ -288,96 +360,151 @@ ...@@ -288,96 +360,151 @@
flex-direction: column; flex-direction: column;
.section { .section {
margin-top: 30rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: white;
}
.pack-box { .title {
margin-top: 25rpx; font-size: 32rpx;
margin-left: 18rpx; font-weight: 700;
display: flex; color: white;
flex-direction: row; margin-bottom: 30rpx;
align-items: center;
flex-wrap: wrap;
.active {
border: 6rpx solid #fd5350 !important;
} }
.pack-item { .pack-box {
margin-bottom: 25rpx; margin-top: 25rpx;
margin-right: 22rpx;
width: calc(28%);
height: 230rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: row;
justify-content: space-around; align-items: center;
// background: #f5f5f5; flex-wrap: wrap;
border: 6rpx solid #f5f5f5; overflow-x: scroll;
border-radius: 10rpx;
position: relative; .pack-item {
margin-left: 30rpx;
.row { width: calc(32% - 30rpx);
margin: 8rpx 15rpx; display: inline-block;
marign-bottom: 0;
} .active {
background-color: #FEEDD0;
border: 4rpx solid #FDEADC !important;
}
.row:last-child { .pack-content {
margin-bottom: 8rpx; width: 100%;
} height: 320rpx;
display: flex;
flex-direction: column;
align-items: center;
background: white;
border: 2rpx solid #EAECEC;
border-radius: 20rpx;
position: relative;
padding-top: 60rpx;
.row {
display: flex;
align-items: center;
margin: 6rpx 15rpx;
marign-bottom: 0;
}
.name { .row:last-child {
font-size: 29rpx; margin-bottom: 8rpx;
color: #333; }
}
.price { .name {
font-size: 40rpx; font-size: 30rpx;
color: #fd5350; font-weight: 700;
font-weight: 700; color: #000000;
} }
.price {
font-size: 60rpx;
color: #000000;
font-weight: 700;
}
.origin { .price2 {
color: #5A3C0F; font-size: 40rpx;
// background: #5a1505; }
background-image: linear-gradient(90deg, #F3DEBE, #EAC180);
font-size: 22rpx; .active1 {
border-radius: 20rpx; color: #fd5350;
height: 30rpx; }
line-height: 30rpx;
padding-top: 4rpx; .active2 {
padding-bottom: 3rpx; color: #6D301D;
padding-left: 16rpx; }
padding-right: 16rpx;
.origin {
font-size: 26rpx;
margin: 0;
text-align: center;
color: #676666;
text-decoration: line-through;
}
.origin2 {
font-size: 26rpx;
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 { .pack-item:last-child {
position: absolute; margin-right: 30rpx;
top: 0;
color: #fff;
background: #ff502f;
font-size: 22rpx;
border-radius: 15rpx;
height: 30rpx;
line-height: 30rpx;
padding-top: 6rpx;
padding-bottom: 3rpx;
padding-left: 16rpx;
padding-right: 16rpx;
transform: translate(0, -50%);
} }
} }
}
.apply-button { .apply-button {
width: 90%; border-radius: 50rpx;
border-radius: 10rpx; background: #e8c8ae;
background: #FFCB68; color: #8d5a29;
color: #6A3D1E; width: 550rpx;
margin: 30rpx auto; margin: 40rpx auto;
}
} }
.item-agree { .item-agree {
width: 100%; width: 100%;
display: flex; display: flex;
...@@ -387,6 +514,19 @@ ...@@ -387,6 +514,19 @@
margin-top: 16rpx; margin-top: 16rpx;
} }
.agreementWrp {
display: flex;
align-items: center;
color: darkgray;
font-size: 26rpx;
margin-top: 30rpx;
padding-left: 30rpx;
.agreementText {
color: #387EF4;
}
}
.trialStyle { .trialStyle {
height: 50rpx; height: 50rpx;
padding: 30rpx; padding: 30rpx;
......
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