[会员中心修改样式及调节]

This commit is contained in:
2021-10-13 13:11:12 +08:00
parent 3c7ad35631
commit 1e57b9272a
6 changed files with 6642 additions and 6510 deletions

View File

@@ -9,7 +9,8 @@ import store from '@/store'
// 基础配置
const config = {
apiUrl : 'https://oapi.lianshang.vip/api/', // 正式环境
// apiUrl : 'https://oapi.lianshang.vip/api/', // 正式环境
apiUrl : 'http://api.ahxh.shangkelian.cn/api/', // 测试环境
apiUrls : 'https://storage.lianshang.vip/', // 图片路径(测试/正式)
timeout : 60000
}

View File

@@ -63,13 +63,15 @@
"path": "pages/vip/vip",
"name": "vipIndex",
"style": {
"navigationBarTitleText": "开通节点"
"navigationBarTitleText": "开通节点",
"navigationBarBackgroundColor": "#774ffd"
}
}, {
"path": "pages/vip/agree",
"name": "vipAgree",
"style": {
"navigationBarTitleText": "用户协议"
"navigationBarTitleText": "用户协议",
"navigationBarBackgroundColor": "#774ffd"
}
}, {
"path": "pages/vip/examine",

View File

@@ -5,32 +5,41 @@
<view class="canPop" v-if="canForm">
<image class="canPop-tips" @click="canClick" src="/static/user/order-cancelPay.png" mode="widthFix"></image>
<view class="canPop-cont">上传打款凭证</view>
<image class="canPop-cover" :src="canFromImg.showpath || require('@/static/icons/add-icon.png')" @click="updImg()" mode="aspectFill"></image>
<image class="canPop-cover" :src="canFromImg.showpath || require('@/static/icons/add-icon.png')"
@click="updImg()" mode="aspectFill"></image>
<view class="canPop-btn" @click="canSubmit">提交</view>
</view>
<swiper class="vip-container" previous-margin="55rpx" next-margin="55rpx" :current="tabsIndex" circular @change="swiperChange">
<swiper class="vip-container" previous-margin="55rpx" next-margin="55rpx" :current="tabsIndex" circular
@change="swiperChange">
<swiper-item class="swiper-item" v-for="(item, index) in identitie" :key="index">
<view class="vip-item" :class="tabsIndex == index ? 'color-item-img' : ''">
<image class="vip-back" :src="item.card_cover" mode="scaleToFill"></image>
<view class="vip-cont">
<view class="vip-name">
{{ item.name }}
<image class="vip-name-img" @click="showRemark(item.name, item.node_definition)" src="../../static/user/vip_privilege_03.png" mode="widthFix"></image>
<image class="vip-name-img" @click="showRemark(item.name, item.node_definition)"
src="../../static/user/vip_privilege_03.png" mode="widthFix"></image>
</view>
<view class="vip-number" v-if="item.count">{{ item.count.stock > 0 ? '剩余名额:' + item.count.residue : '不限名数' }}</view>
<view class="vip-number" v-if="item.count">
{{ item.count.stock > 0 ? '剩余名额:' + item.count.residue : '不限名数' }}</view>
<view class="currentInfo" v-if="currentInfo.identity.identity_id === item.identity_id">当前身份</view>
<view class="vip-tips">
<!-- 会员 -->
<view v-if="item.identity_id == 2" class="vip-tips-text vip-tips-color-01">{{ item.title }}</view>
<view v-if="item.identity_id == 2" class="vip-tips-text vip-tips-color-01">{{ item.title }}
</view>
<!-- VIP节点 -->
<view v-else-if="item.identity_id == 3" class="vip-tips-text vip-tips-color-02">{{ item.title }}</view>
<view v-else-if="item.identity_id == 3" class="vip-tips-text vip-tips-color-02">
{{ item.title }}</view>
<!-- 主节点 -->
<view v-else-if="item.identity_id == 4" class="vip-tips-text vip-tips-color-03">{{ item.title }}</view>
<view v-else-if="item.identity_id == 4" class="vip-tips-text vip-tips-color-03">
{{ item.title }}</view>
<!-- 超级节点 -->
<view v-else-if="item.identity_id == 5" class="vip-tips-text vip-tips-color-04">{{ item.title }}</view>
<view v-else-if="item.identity_id == 5" class="vip-tips-text vip-tips-color-04">
{{ item.title }}</view>
</view>
</view>
</view>
@@ -61,7 +70,8 @@
<view class="privilege-label" v-else>{{ openCondition.service_charge.message }}</view>
</block>
<block v-else>
<view class="privilege-label" :class="{ active: openCondition.price.finish }">{{ openCondition.price.message }}</view>
<view class="privilege-label" v-if="openCondition.certification"
:class="{ active: openCondition.certification.finish }">{{ openCondition.certification.message }}</view>
</block>
</view>
</view>
@@ -69,13 +79,17 @@
<image class="privilege-img" src="/static/user/vip_privilege_02.png" mode=""></image>
<view class="privilege-text">
<view class="privilege-name">节点权益</view>
<view class="privilege-label privilege-right" v-for="(item, index) in identitie[tabsIndex].rights" :key="index">&{{ item.remark }}</view>
<view class="privilege-label privilege-right" v-for="(item, index) in identitie[tabsIndex].rights"
:key="index">&{{ item.remark }}</view>
</view>
</view>
</view>
<!-- 用户协议 -->
<view class="agree"><view class="agree-tips" @click="$Router.push({ name: 'vipAgree', params: { type: 'vipAgree' } })">请仔细阅读并确认服务协议</view></view>
<view class="agree">
<view class="agree-tips" @click="$Router.push({ name: 'vipAgree', params: { type: 'vipAgree' } })">
请仔细阅读并确认服务协议</view>
</view>
<view class="agree-btn" @click="agreeChange">
<radio :checked="selected" style="transform: scale(.7);" color="#7c52fc"></radio>
会员服务协议
@@ -83,7 +97,7 @@
<!-- 开通按钮 -->
<view class="footer">
<image class="footer-btn" :src="identitie[tabsIndex].button_cover" mode="widthFix" @click="openOrder"></image>
<image class="footer-btn" :src="identitie[tabsIndex].button_cover" mode="widthFix" @click="openOrder" />
<!-- <button class="footer-btn" type="default" >
<view class="footer-btn-num">
合计{{total}}
@@ -97,9 +111,19 @@
</template>
<script>
import { identities, vipOrder, vipWechatPay, vipCont, vipVoucher } from '@/apis/interfaces/vip';
import { wxConfig } from '@/apis/interfaces/wx';
import { uploads } from '@/apis/interfaces/uploading';
import {
identities,
vipOrder,
vipWechatPay,
vipCont,
vipVoucher
} from '@/apis/interfaces/vip';
import {
wxConfig
} from '@/apis/interfaces/wx';
import {
uploads
} from '@/apis/interfaces/uploading';
export default {
data() {
return {
@@ -131,8 +155,11 @@ export default {
// 当前用户信息
idenInfo(type) {
identities().then(res => {
console.log(res, 'res。。。获取身份详情')
res.identities.map(item => {
item.obj_condition = new Object();
console.log(item.get_condition.length > 0)
for (let val of item.get_condition) {
item.obj_condition[val.name] = {
message: val.message,
@@ -140,15 +167,19 @@ export default {
};
}
return item;
});
this.identitie = res.identities;
if (type === 'cre') {
this.tabsIndex = res.identities.findIndex(val => val.identity_id == this.$Route.query.identity_id)
this.tabsIndex = res.identities.findIndex(val => val.identity_id == this.$Route.query
.identity_id)
}
this.openCondition = res.identities[this.tabsIndex].obj_condition;
this.rights = res.identities[this.tabsIndex].rights;
this.total = res.identities[this.tabsIndex].price;
this.canBtn = res.identities[this.tabsIndex].can;
this.currentInfo = res.user
this.loding = false;
}).catch(err => {
uni.showToast({
@@ -215,7 +246,9 @@ export default {
icon: 'none'
});
});
jweixin.config({ ...payConfig });
jweixin.config({
...payConfig
});
vipOrder(this.identitie[this.tabsIndex].identity_id, {
year: this.sumNumber
}).then(payId => {
@@ -239,7 +272,8 @@ export default {
vipWechatPay(id, {
openid: this.$store.getters.getCode
}).then(payConfig => {
wx.chooseWXPay({...payConfig,
wx.chooseWXPay({
...payConfig,
success() {
uni.showModal({
title: '提示',
@@ -285,7 +319,9 @@ export default {
uni.chooseImage({
count: 1,
success: path => {
uploads([{uri: path.tempFilePaths[0]}]).then(res => {
uploads([{
uri: path.tempFilePaths[0]
}]).then(res => {
this.canFromImg = {
showpath: res.url[0],
path: res.path[0]
@@ -313,7 +349,9 @@ export default {
cover: newCover,
identity_id: newId
}).then(res => {
this.$Router.push({ name: 'Examine' });
this.$Router.push({
name: 'Examine'
});
}).catch(err => {
uni.showToast({
title: err.message,
@@ -340,6 +378,7 @@ page {
top: 0;
z-index: 99;
}
.canPop {
position: absolute;
background-color: #ffffff;
@@ -351,6 +390,7 @@ page {
box-sizing: border-box;
border-radius: 10rpx;
text-align: center;
.canPop-tips {
position: absolute;
right: 20rpx;
@@ -359,16 +399,19 @@ page {
height: 32rpx;
z-index: 1002;
}
.canPop-cont {
font-size: 32rpx;
font-weight: 600;
}
.canPop-cover {
margin: 60rpx auto 40rpx;
width: 240rpx;
height: 240rpx;
border: 2rpx solid #f3f3f3;
}
.canPop-btn {
text-align: center;
background: $mian-color;
@@ -377,6 +420,7 @@ page {
line-height: 90rpx;
font-size: $title-size;
color: white;
&::after {
border: none;
}
@@ -386,7 +430,7 @@ page {
.vip-container {
width: 750rpx;
height: 340rpx;
margin-top: $margin;
margin-top: $margin * 1.5;
}
.swiper-item {
@@ -400,6 +444,7 @@ page {
height: 340rpx;
border-radius: 20rpx;
position: relative;
.vip-back {
position: absolute;
left: 0;
@@ -407,6 +452,7 @@ page {
width: 100%;
height: 100%;
}
.vip-cont {
position: absolute;
left: 0;
@@ -416,23 +462,35 @@ page {
z-index: 9;
padding: 45rpx 70rpx;
box-sizing: border-box;
.vip-name {
display: flex;
font-size: 46rpx;
color: #ffffff;
font-weight: 600;
.vip-name-img {
width: 36rpx;
height: 36rpx;
margin: 12rpx 20rpx;
}
}
.vip-number {
margin: 10rpx 0 40rpx;
color: #ffffff;
font-size: 32rpx;
opacity: 0.8;
}
.currentInfo {
position: absolute;
right: 82rpx;
top: 20rpx;
color: #fff;
font-size: 24rpx;
}
.vip-tips {
font-size: 30rpx;
background-color: #e8ebf6;
@@ -441,54 +499,67 @@ page {
height: 60rpx;
line-height: 60rpx;
padding: 0 30rpx;
.vip-tips-text {
font-weight: 700;
background-clip: text;
color: transparent;
}
.vip-tips-color-00 {
background-image: linear-gradient(to bottom, #6189f0, #b6b9c1);
}
.vip-tips-color-01 {
background-image: linear-gradient(to top, #ffd459, #ff6c52);
}
.vip-tips-color-02 {
background-image: linear-gradient(to top, #e0c9fe, #892edb);
}
.vip-tips-color-03 {
background-image: linear-gradient(to top, #f6b237, #f035e3);
}
.vip-tips-color-04 {
background-image: linear-gradient(to top, #c455ec, #5f76e9);
}
}
}
}
// 会员特权
.privilege {
padding: 20rpx 30rpx 80rpx;
box-sizing: border-box;
.privilege-list {
margin-bottom: 50rpx;
margin-bottom: 30rpx;
display: flex;
.privilege-img {
width: 74rpx;
height: 74rpx;
width: 50rpx;
height: 50rpx;
}
.privilege-text {
width: calc(100% - 74rpx);
padding-left: 40rpx;
font-size: 32rpx;
width: calc(100% - 60rpx);
padding-left: 30rpx;
font-size: 30rpx;
color: #999999;
line-height: 52rpx;
line-height: 48rpx;
.privilege-name {
font-size: 40rpx;
font-size: 34rpx;
color: #000000;
margin: 10rpx 0 20rpx;
}
.privilege-label.active {
color: #f6b338;
}
.privilege-right {
color: #7877eb;
}
@@ -498,16 +569,18 @@ page {
// 用户协议
.agree {
margin: $margin 0;
margin: 0 0 10rpx 0;
text-align: center;
.agree-tips {
background-color: #999999;
background-color: #cacaca;
display: inline-block;
padding: 14rpx $padding;
color: #ffffff;
border-radius: 60rpx;
}
}
.agree-btn {
display: flex;
font-size: $title-size-lg;
@@ -525,28 +598,35 @@ page {
font-size: $title-size-m;
color: $text-gray;
padding: $padding $padding * 2 $padding * 2;
.title {
padding-bottom: $padding/2;
font-weight: bold;
}
.item {
padding-bottom: $padding/2;
line-height: 40rpx;
text-align: justify;
}
}
// footer
.footer {
padding: 0 $padding;
box-sizing: border-box;
text-align: center;
margin-bottom: 30rpx;
.footer-btn {
width: 74%;
}
}
// 会员权限
.privilege {
padding: $padding;
.title {
font-weight: bold;
color: #322711;
@@ -554,15 +634,18 @@ page {
text-align: center;
line-height: 90rpx;
}
.privilege-box {
display: flex;
flex-wrap: wrap;
padding: $padding 0;
.item {
width: 25%;
padding: $padding/2;
box-sizing: border-box;
text-align: center;
.icon {
width: 78rpx;
height: 78rpx;
@@ -570,6 +653,7 @@ page {
border-radius: 50%;
vertical-align: top;
}
.text {
font-size: $title-size-sm;
color: #201212;
@@ -578,10 +662,12 @@ page {
}
}
}
// 会员卡
.cards {
position: relative;
background: #1f1b1c;
.card {
position: relative;
margin: 0 $margin;
@@ -589,12 +675,14 @@ page {
padding: 15rpx;
border-radius: $radius/2;
z-index: 2;
.card-content {
position: relative;
border: solid 1rpx rgba($color: white, $alpha: 0.4);
border-radius: $radius/2;
padding: 30rpx 180rpx 60rpx 148rpx;
min-height: 98rpx;
.cover {
position: absolute;
left: 30rpx;
@@ -603,16 +691,19 @@ page {
height: 98rpx;
border-radius: 50%;
}
.user {
color: rgba($color: white, $alpha: 0.7);
line-height: 58rpx;
font-size: $title-size-lg;
}
.sub-time {
line-height: 40rpx;
color: #e6ce9e;
font-size: $title-size-sm;
}
.btn {
position: absolute;
color: #261f0f;
@@ -627,6 +718,7 @@ page {
}
}
}
.cards-angle {
position: absolute;
left: 0;
@@ -634,6 +726,7 @@ page {
width: 100%;
z-index: 3;
}
&::after {
content: ' ';
height: 70rpx;
@@ -645,6 +738,7 @@ page {
z-index: 0;
}
}
// tabs
.tabs {
background: #1f1b1c;
@@ -653,16 +747,19 @@ page {
display: flex;
justify-content: center;
font-size: $title-size-lg;
.item {
margin: 0 $margin;
line-height: 70rpx;
height: 70rpx;
color: rgba($color: white, $alpha: 0.6);
&.show {
position: relative;
font-weight: bold;
font-size: $title-size;
color: white;
&::after {
position: absolute;
bottom: 0;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long