326 lines
6.8 KiB
Vue
326 lines
6.8 KiB
Vue
<template>
|
||
<view>
|
||
<up-navbar bg-color="transparent" title="会员中心" @leftClick="back"></up-navbar>
|
||
<view class="top">
|
||
<view class="vip-box" style=" background-image: url(/user/static/Rectangle_25.png);">
|
||
<view class="icon">
|
||
<image src="/user/static/image_21.png" class="huangguan" mode=""></image>
|
||
</view>
|
||
<view class="tag">当前等级</view>
|
||
<view class="shop-name">店铺名称</view>
|
||
<view class="lv">白银会员</view>
|
||
<view class="time">
|
||
<text>2025.10.14到期 </text>
|
||
<text>月度会员</text>
|
||
</view>
|
||
<view class="rule u-m-t-40 u-flex u-flex-between u-flex-y-center">
|
||
<text class="color-one ">
|
||
<text class="font-16">11000</text>
|
||
<text class="font-12">经验值</text>
|
||
</text>
|
||
<text class="desc">等级说明</text>
|
||
</view>
|
||
<view class="progress">
|
||
<view class="block" :style="{width:100+'px'}"></view>
|
||
</view>
|
||
<view class="u-m-t-12 next-tips">还差5695成长值可以升级到黄金会员</view>
|
||
</view>
|
||
</view>
|
||
<view class="vip-quanyi">
|
||
<view class="u-flex u-flex-between">
|
||
<text class="color-2 font-14 font-700">会员权益</text>
|
||
<view class="u-flex">
|
||
<text class="color-666 u-m-r-4 font-12">会员说明</text>
|
||
<up-icon name="question-circle" size="12" @click="modelShow"></up-icon>
|
||
</view>
|
||
</view>
|
||
<view class="u-m-t-32">
|
||
<view class="menus" :class="state.pay_types=='tiaojian'?'menus-tiaojian' :'menus-pays'">
|
||
<view class="item " v-for="(item,index) in menus" :key="index">
|
||
<view class="u-flex u-flex-x-center u-m-t-4 u-flex-center">
|
||
<image :src="item.icon" mode="" style="width: 100rpx;height: 100rpx;"></image>
|
||
</view>
|
||
<view class="font-14 color-333 text-center u-m-t-4 u-flex">
|
||
<text class="no-wrap u-m-r-4">{{item.name}}</text>
|
||
<up-icon @click="modelShow" size="12" name="question-circle" color="#333" v-if="showQuestion(index)"></up-icon>
|
||
</view>
|
||
<view class="font-12 color-666 text-center">{{item.desc}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="u-p-l-30 u-p-r-30">
|
||
<view class="color-333 font-700 font-14">升级规则</view>
|
||
<view class="color-666 font-14 u-m-t-16">
|
||
每消费1元获得10成长值
|
||
</view>
|
||
<view class="color-666 font-14 u-m-t-16">
|
||
每消费1元获得10成长值
|
||
</view>
|
||
</view>
|
||
|
||
|
||
|
||
<up-popup :show="model.show" mode="center" round="16rpx">
|
||
<view class="model-box">
|
||
<view class="u-flex u-flex-between">
|
||
<text class="color-000 font-700 font-16">详情说明</text>
|
||
<up-icon name="close-circle" color="#666" size="28rpx" @click="modelHide"></up-icon>
|
||
</view>
|
||
<view class="u-m-t-18 up-content">
|
||
<up-parse :content="modelContent"></up-parse>
|
||
</view>
|
||
</view>
|
||
</up-popup>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
ref,
|
||
reactive,
|
||
computed
|
||
} from "vue"
|
||
const model =reactive({
|
||
show:false
|
||
})
|
||
function modelHide(){
|
||
model.show=false;
|
||
}
|
||
function modelShow(){
|
||
model.show=true;
|
||
}
|
||
const modelContent = ref(`
|
||
1、可适用门店：全部门店<br>
|
||
2、可适用商品：部分商品<br>
|
||
3、可使用类型：堂食<br>
|
||
4、可用时间段：全时段可用<br>
|
||
5、限量规则：每人限领3张，每日可最多使用3张<br>
|
||
6、同享规则：与限时折扣同享、与会员价同享<br>
|
||
7、其它说明：这里是后台配置内容
|
||
`)
|
||
const state = reactive({
|
||
pay_types: 'tiaojian'
|
||
})
|
||
|
||
const pay_menus = [{
|
||
name: '赠送成长值',
|
||
desc: '赠送10000成长值',
|
||
icon: '/user/static/Frame_220.png',
|
||
},
|
||
{
|
||
name: '优惠券',
|
||
desc: '每月赠送2张优惠券',
|
||
icon: '/user/static/Frame_221.png'
|
||
},
|
||
{
|
||
name: '享会员价',
|
||
desc: '全店会员价',
|
||
icon: '/user/static/Frame_222.png'
|
||
},
|
||
{
|
||
name: '会员折扣',
|
||
desc: '全店折扣98折',
|
||
icon: '/user/static/Frame_223.png'
|
||
},
|
||
{
|
||
name: '消费送积分',
|
||
desc: '',
|
||
icon: '/user/static/Frame_224.png'
|
||
},
|
||
{
|
||
name: '周期福利',
|
||
desc: '',
|
||
icon: '/user/static/Frame_225.png'
|
||
}
|
||
]
|
||
|
||
const tiaojian_menus = [{
|
||
name: '享会员价',
|
||
desc: '全店会员价',
|
||
icon: '/user/static/Frame_222.png'
|
||
},
|
||
{
|
||
name: '会员折扣',
|
||
desc: '全店折扣98折',
|
||
icon: '/user/static/Frame_223.png'
|
||
},
|
||
{
|
||
name: '消费送积分',
|
||
desc: '',
|
||
icon: '/user/static/Frame_224.png'
|
||
},
|
||
{
|
||
name: '周期福利',
|
||
desc: '',
|
||
icon: '/user/static/Frame_225.png'
|
||
}
|
||
|
||
]
|
||
|
||
const menus = ref(tiaojian_menus)
|
||
|
||
function showQuestion(index) {
|
||
const len = menus.value.length
|
||
if (index >= len - 2) {
|
||
return true
|
||
}
|
||
return false
|
||
}
|
||
function back(){
|
||
uni.navigateBack()
|
||
}
|
||
</script>
|
||
|
||
|
||
<style>
|
||
page {
|
||
background: #F9F9F9;
|
||
}
|
||
</style>
|
||
|
||
<style lang="scss" scoped>
|
||
.font-700 {
|
||
font-weight: 700;
|
||
}
|
||
|
||
.color-one {
|
||
color: #558ABF;
|
||
}
|
||
|
||
.color-2 {
|
||
color: #273d7a;
|
||
}
|
||
|
||
.top {
|
||
background: linear-gradient(283deg, #A9CBF8 11.62%, #E5E7EB 74.58%);
|
||
}
|
||
|
||
.top {
|
||
padding: 208rpx 30rpx 78rpx 30rpx;
|
||
}
|
||
|
||
.vip-box {
|
||
|
||
background-size: cover;
|
||
position: relative;
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
padding-left: 6px;
|
||
padding-right: 64rpx;
|
||
padding-bottom: 24rpx;
|
||
|
||
.icon {
|
||
position: absolute;
|
||
right: 42rpx;
|
||
top: 0;
|
||
|
||
.huangguan {
|
||
width: 214rpx;
|
||
height: 206rpx;
|
||
}
|
||
}
|
||
|
||
.tag {
|
||
position: absolute;
|
||
top: 0;
|
||
font-size: 12px;
|
||
color: #46739F;
|
||
padding: 2px 12px;
|
||
background: #c7d0da;
|
||
border-radius: 0 0 12px 0;
|
||
}
|
||
|
||
.shop-name {
|
||
margin-top: 23px;
|
||
color: #6988AB;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.lv {
|
||
color: #273d7a;
|
||
font-weight: 700;
|
||
font-size: 64rpx;
|
||
letter-spacing: 4rpx;
|
||
transform: skewX(-10deg);
|
||
}
|
||
|
||
.time {
|
||
color: #6988ab;
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.rule {
|
||
.exp {}
|
||
|
||
.desc {
|
||
color: #273d7a;
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
}
|
||
}
|
||
|
||
.next-tips {
|
||
color: #6988ab;
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
.progress {
|
||
margin-top: 8rpx;
|
||
background-color: #BDD5E9;
|
||
height: 10rpx;
|
||
border-radius: 10rpx;
|
||
|
||
.block {
|
||
height: 100%;
|
||
border-radius: 10rpx;
|
||
background: linear-gradient(90deg, #F9FBFA 0.03%, #334783 115.59%);
|
||
}
|
||
}
|
||
|
||
.vip-quanyi {
|
||
background-color: #fff;
|
||
padding: 36rpx 18rpx 42rpx 38rpx;
|
||
border-radius: 40rpx 40rpx 0 0;
|
||
transform: translateY(-40rpx);
|
||
}
|
||
|
||
.menus-pays {
|
||
display: grid;
|
||
/* 每行显示3列，每列宽度相等 */
|
||
grid-template-columns: repeat(3, 1fr);
|
||
/* 列间距 */
|
||
column-gap: 10px;
|
||
/* 行间距 */
|
||
row-gap: 10px;
|
||
/* 可以添加容器的内边距 */
|
||
}
|
||
|
||
.menus-tiaojian {
|
||
display: grid;
|
||
/* 每行显示3列，每列宽度相等 */
|
||
grid-template-columns: repeat(4, 1fr);
|
||
/* 列间距 */
|
||
column-gap: 10px;
|
||
/* 行间距 */
|
||
row-gap: 32rpx;
|
||
/* 可以添加容器的内边距 */
|
||
}
|
||
|
||
.model-box {
|
||
padding: 32rpx 56rpx;
|
||
width: 702rpx;
|
||
}
|
||
|
||
.up-content {
|
||
color: #999;
|
||
font-size: 12px;
|
||
}
|
||
</style> |