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

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 = { 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/', // 图片路径(测试/正式) apiUrls : 'https://storage.lianshang.vip/', // 图片路径(测试/正式)
timeout : 60000 timeout : 60000
} }

View File

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

View File

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