416 lines
8.8 KiB
Vue
416 lines
8.8 KiB
Vue
<!-- 会员信息 -->
|
|
<template>
|
|
<s-layout navbar="inner" title="SVIP会员专享" :statusBar="true" :bgStyle="{ color: '#FE832A', backgroundColor:'white' }"
|
|
navbarbackgroundColor="rgba(57,55,54)">
|
|
<view class='vip-main'>
|
|
<view class="vip-top">
|
|
<image
|
|
src="https://zysc.fjptzykj.com:3000/shangcheng/07cee74ec47ed41b33e277dffe9291a6cab8423d8f8539c34662a793842e6d27.png"
|
|
class="img"></image>
|
|
<view class="userInfo">
|
|
<view class="l">
|
|
|
|
<image :src="sheep.$url.cdn(userInfo.avatar)" mode="aspectFill" class="img"></image>
|
|
<view class="text">
|
|
<view class="t">{{ userInfo.nickname }}
|
|
<image src="" class="img"></image>
|
|
</view>
|
|
<view class="c" v-if="!userInfo.activate">您与众悦e家商场的第101天</view>
|
|
<view class="b" v-if="!userInfo.activate">开通即享会员权益</view>
|
|
<view class="b" v-if="userInfo.activate">SVIP会员 {{ sheep.$helper.timeFormat(userInfo.cardExpirationTime, 'yyyy-mm-dd') }} 到期</view>
|
|
</view>
|
|
</view>
|
|
<view class="r" v-if="!userInfo.activate">
|
|
<text>立即开通</text>
|
|
</view>
|
|
<view class="r" v-if="userInfo.activate">
|
|
<text>续费会员</text>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="vipLv" v-if="userInfo.activate">当前卡片：{{userInfo.cardName}}</view> -->
|
|
</view>
|
|
<view class="vip-zxq">
|
|
<image
|
|
src="https://zysc.fjptzykj.com:3000/shangcheng/d865a7766bf5ccbfb76e97f3fd65bcfdc37a612fe94878b7a899adab869360f8.png"
|
|
class="img"></image>
|
|
<view class="list">
|
|
<view class="item" v-for="(item, index) in vipList2" :key="index">
|
|
<view class="new-nei">
|
|
<view class="l">
|
|
<image :src="item.iconUrl" class="l-img"></image>
|
|
</view>
|
|
<view class="r">
|
|
<view class="t">
|
|
{{item.benName}}
|
|
</view>
|
|
<view class="b">
|
|
{{item.intro}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="" style="clear: both;">
|
|
|
|
</view>
|
|
</view>
|
|
|
|
<view class="vip-kt">
|
|
<view class="top">
|
|
<!-- <text class="t1" v-if="userInfo.activate == 1">试用会员</text> -->
|
|
<text class="t1" v-if="!userInfo.activate">开通会员</text>
|
|
<text class="t2" v-if="userInfo.activate">有效期至</text>
|
|
<text class="t3" v-if="userInfo.activate">{{ timeAute }}</text>
|
|
</view>
|
|
<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
|
|
<view id="demo1" @click="vipFun(index,item.name)" class="scroll-view-item_H uni-bg-red"
|
|
:class="valVip == index ? 'on' : ''" v-for="(item,index) in vipList" :key="index">
|
|
<view class="t">{{item.name}}</view>
|
|
<view class="c">￥<text class="tx">{{item.specialPrice}}</text></view>
|
|
<view class="b" v-if="item.name=='试用'">试用1天</view>
|
|
<view class="b sc" v-else>￥{{item.originalPrice}}</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<view class="vip-text">
|
|
购买即视为同意《<text class="ts" @click="sheep.$router.redirect('/pages/user/user_vip/agreement')">会员用户协议</text>》
|
|
</view>
|
|
<!-- <view class="vip-btn" @click="beclick()" v-if="!userInfo.activate">
|
|
立即试用
|
|
</view> -->
|
|
<view class="vip-btn" @click="beclick()">
|
|
立即开通
|
|
</view>
|
|
</view>
|
|
</s-layout>
|
|
</template>
|
|
<script setup>
|
|
import {
|
|
computed,
|
|
reactive,
|
|
onBeforeMount,
|
|
onMounted,
|
|
ref
|
|
} from 'vue';
|
|
import request from '@/sheep/request';
|
|
import {
|
|
baseUrl,
|
|
apiPath
|
|
} from '@/sheep/config';
|
|
import sheep from '@/sheep';
|
|
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
|
|
const userInfo = computed(() => sheep.$store('user').userInfo);
|
|
|
|
const vipList = ref([]);
|
|
const vipList2 = ref([]);
|
|
const valVip = ref(88888);
|
|
const nameVip = ref([]);
|
|
const timeAute = ref(sheep.$helper.timeFormat(userInfo.cardExpirationTime, 'yyyy-mm-dd'));
|
|
// 定义方法
|
|
function getList() {
|
|
request({
|
|
url: `${baseUrl}${apiPath}/member/card/type/list`,
|
|
method: 'GET',
|
|
params: {},
|
|
custom: {
|
|
showLoading: false,
|
|
},
|
|
}).then((res) => {
|
|
vipList.value = res.data;
|
|
});
|
|
}
|
|
|
|
// vipFun
|
|
let data = {
|
|
cardName: nameVip.value
|
|
}
|
|
|
|
function vipFun(index, name) {
|
|
valVip.value = index
|
|
data.cardName = name
|
|
timeAute.value = sheep.$helper.timeFormat(vipList.value[index].cardExpirationTime, 'yyyy-mm-dd');
|
|
|
|
console.log(userInfo.cardExpirationTime,"userInfo.cardExpirationTime")
|
|
}
|
|
|
|
// beclick
|
|
function beclick() {
|
|
if( data.cardName == '' ) {
|
|
sheep.$helper.toast('请选择')
|
|
return;
|
|
};
|
|
request({
|
|
url: `${baseUrl}${apiPath}/pay/member/create`,
|
|
method: 'post',
|
|
data,
|
|
custom: {
|
|
showLoading: false,
|
|
},
|
|
}).then((res) => {
|
|
if (res.code == 0) {
|
|
if (data.cardName == "试用") {
|
|
sheep.$helper.toast('试用开通成功');
|
|
// sheep.$router.go('/pages/index/user')
|
|
} else {
|
|
sheep.$router.go('/pages/pay/index', {
|
|
id: res.data.payOrderId,
|
|
type: 'vip',
|
|
vipid: res.data.id,
|
|
cardName: data.cardName
|
|
})
|
|
}
|
|
|
|
} else {
|
|
sheep.$helper.toast(res.msg);
|
|
}
|
|
|
|
});
|
|
}
|
|
|
|
// 定义方法2
|
|
function getList2() {
|
|
request({
|
|
url: `${baseUrl}${apiPath}/member/benefit/list`,
|
|
method: 'GET',
|
|
params: {},
|
|
custom: {
|
|
showLoading: false,
|
|
},
|
|
}).then((res) => {
|
|
vipList2.value = res.data;
|
|
});
|
|
}
|
|
// 使用 onMounted 生命周期钩子
|
|
onMounted(() => {
|
|
getList();
|
|
getList2();
|
|
});
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.vip-main {
|
|
margin-top: -3.75rem;
|
|
|
|
.vip-top {
|
|
width: 100%;
|
|
height: 200px;
|
|
// background: rgba(57, 55, 54);
|
|
position: relative;
|
|
|
|
.vipLv {
|
|
position: absolute;
|
|
bottom: 93px;
|
|
right: 10%;
|
|
color: #8a745c;
|
|
}
|
|
|
|
.img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.userInfo {
|
|
position: absolute;
|
|
bottom: 38px;
|
|
padding: 0 20px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 85%;
|
|
align-items: center;
|
|
|
|
.l {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.img {
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 23px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.text {
|
|
.t {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
|
|
.img {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
}
|
|
|
|
.c {
|
|
color: rgba(208, 185, 156);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.b {
|
|
color: rgba(201, 141, 99);
|
|
font-size: 12px;
|
|
margin-top: 7px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.r {
|
|
color: #8a745c;
|
|
font-size: 12px;
|
|
padding: 5px 10px;
|
|
background: white;
|
|
border-radius: 0 11px 0 11px;
|
|
position: absolute;
|
|
right: 7px;
|
|
bottom: 64px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.vip-zxq {
|
|
.img {
|
|
width: 63%;
|
|
height: 68px;
|
|
margin: 0 auto;
|
|
display: block;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.list {
|
|
padding: 0 10px;
|
|
|
|
.item {
|
|
width: 47%;
|
|
float: left;
|
|
padding: 5px;
|
|
|
|
.new-nei {
|
|
background: rgba(247, 247, 247);
|
|
padding: 15px 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.l {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.l-img {
|
|
width: 40px;
|
|
height: 40px;
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
|
|
.r {
|
|
.t {}
|
|
|
|
.b {
|
|
font-size: 13px;
|
|
color: rgba(191, 147, 109);
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.vip-kt {
|
|
padding: 10px 10px;
|
|
|
|
.top {
|
|
.t1 {
|
|
font-size: 17px;
|
|
font-weight: 700;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.t2 {
|
|
font-size: 15px;
|
|
margin-right: 10px;
|
|
color: rgba(121, 121, 121);
|
|
}
|
|
|
|
.t3 {
|
|
font-size: 13px;
|
|
color: rgba(174, 90, 42);
|
|
}
|
|
}
|
|
|
|
.scroll-view_H {
|
|
white-space: nowrap;
|
|
width: 100%;
|
|
|
|
.scroll-view-item_H {
|
|
display: inline-block;
|
|
background-color: white;
|
|
border: 1px solid rgba(214, 214, 214);
|
|
margin-right: 15px;
|
|
border-radius: 10px;
|
|
margin-top: 15px;
|
|
padding: 10px 3px;
|
|
width: 100px;
|
|
|
|
&.on {
|
|
background-color: rgba(254, 247, 236);
|
|
border: 1px solid rgba(252, 194, 130);
|
|
}
|
|
|
|
.t {
|
|
color: rgba(117, 78, 25);
|
|
font-weight: 700;
|
|
font-size: 15px;
|
|
text-align: center;
|
|
}
|
|
|
|
.c {
|
|
color: rgba(117, 78, 25);
|
|
// color: rgba(117, 78, 25);
|
|
font-weight: 700;
|
|
font-size: 15px;
|
|
text-align: center;
|
|
padding: 10px 0;
|
|
|
|
.tx {
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
|
|
.b {
|
|
color: rgba(173, 173, 173);
|
|
font-size: 14px;
|
|
text-align: center;
|
|
|
|
&.sc {
|
|
text-decoration: line-through;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.vip-text {
|
|
text-align: center;
|
|
color: rgba(157, 157, 157);
|
|
margin: 15px 0;
|
|
font-size: 13px;
|
|
|
|
.ts {
|
|
color: rgba(174, 90, 42);
|
|
}
|
|
}
|
|
|
|
.vip-btn {
|
|
padding: 10px 0;
|
|
background: rgba(254, 220, 137);
|
|
text-align: center;
|
|
margin: 0 15px;
|
|
border-radius: 9px;
|
|
color: rgba(95, 53, 38);
|
|
}
|
|
|
|
}
|
|
</style> |