This commit is contained in:
gyq
2025-09-26 10:56:48 +08:00
34 changed files with 2787 additions and 399 deletions

View File

@@ -0,0 +1 @@
export const prveUrl='/market'

View File

@@ -0,0 +1,12 @@
// 引入 request 文件
import request from '@/common/api/request.js'
import {prveUrl} from './config.js'
export const config = (data) => {
const shopId=uni.getStorageSync('shopId')||'';
return request({
url: prveUrl + '/user/recharge/config',
method: 'get',
data: {...data,shopId:shopId}
})
}

25
common/api/market/vip.js Normal file
View File

@@ -0,0 +1,25 @@
// 引入 request 文件
import request from '@/common/api/request.js'
import {prveUrl} from './config.js'
export const list = (data) => {
return request({
url: prveUrl + '/user/member/list',
method: 'get',
data: data
})
}
export const detail = (data) => {
return request({
url: prveUrl + '/user/member/detail',
method: 'get',
data: data
})
}
export const config = (data) => {
return request({
url: prveUrl + '/user/member/config',
method: 'get',
data: data
})
}

View File

@@ -62,4 +62,12 @@ export const APIrmPlaceOrder = (data) => {
method: 'post',
data: data
})
}
//会员开通
export const joinMember = (data) => {
return request({
url: url + '/user/order/joinMember',
method: 'post',
data: data
})
}

View File

@@ -6,6 +6,7 @@ export default (params) => {
let toast = params.toast || true;
let token=uni.cache.get('token') || '';
const shopId=uni.cache.get('shopId')*1;
const userInfo=uni.cache.get('userInfo')||{};
// #ifdef H5
token="21f0a0b10e1d40ce9c6464037fedb792"
// #endif
@@ -25,9 +26,9 @@ export default (params) => {
platformType: 'ALI',
// #endif
token,
id: uni.cache.get('userInfo').id || '',
id: userInfo.id || '',
shopId:shopId || '',
userId: uni.cache.get('userInfo').id || '',
userId: userInfo.id || '',
}
if (toast) {
uni.showLoading({

View File

@@ -85,4 +85,10 @@ page,
}
.no-wrap{
white-space: nowrap;
}
.line-through{
text-decoration: line-through;
}
.u-flex-1{
flex:1;
}

View File

@@ -1,83 +1,89 @@
{
"name" : "wepp",
"appid" : "__UNI__C94DF77",
"description" : "",
"versionName" : "1.0.0",
"versionCode" : "100",
"transformPx" : false,
/* 5+App */
"app-plus" : {
"usingComponents" : true,
"nvueStyleCompiler" : "uni-app",
"compilerVersion" : 3,
"splashscreen" : {
"alwaysShowBeforeRender" : true,
"waiting" : true,
"autoclose" : true,
"delay" : 0
},
/* */
"modules" : {},
/* */
"distribute" : {
/* android */
"android" : {
"permissions" : [
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
"<uses-feature android:name=\"android.hardware.camera\"/>",
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
]
},
/* ios */
"ios" : {},
/* SDK */
"sdkConfigs" : {}
}
},
/* */
"quickapp" : {},
/* */
"mp-weixin" : {
"appid" : "wxd88fffa983758a30",
"setting" : {
"urlCheck" : false,
"minified" : true,
"es6" : true,
"postcss" : true
},
"usingComponents" : true,
"libVersion" : "latest",
"permission" : {
"scope.userLocation" : {
"desc" : "你的位置信息将用于小程序位置接口的效果展示"
}
},
"requiredPrivateInfos" : [ "getLocation", "onLocationChange", "chooseLocation", "chooseAddress" ]
},
"h5" : {},
"mp-alipay" : {
"usingComponents" : true
},
"mp-baidu" : {
"usingComponents" : true
},
"mp-toutiao" : {
"usingComponents" : true
},
"uniStatistics" : {
"enable" : false
},
"vueVersion" : "3"
}
"name": "wepp",
"appid": "__UNI__C94DF77",
"description": "",
"versionName": "1.0.0",
"versionCode": "100",
"transformPx": false,
/* 5+App */
"app-plus": {
"usingComponents": true,
"nvueStyleCompiler": "uni-app",
"compilerVersion": 3,
"splashscreen": {
"alwaysShowBeforeRender": true,
"waiting": true,
"autoclose": true,
"delay": 0
},
/* */
"modules": {},
/* */
"distribute": {
/* android */
"android": {
"permissions": [
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
"<uses-feature android:name=\"android.hardware.camera\"/>",
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
]
},
/* ios */
"ios": {},
/* SDK */
"sdkConfigs": {}
}
},
/* */
"quickapp": {},
/* */
"mp-weixin": {
"appid": "wxd88fffa983758a30",
"setting": {
"urlCheck": false,
"minified": true,
"es6": true,
"postcss": true
},
"optimization": {
"subPackages": true
},
"usingComponents": true,
"libVersion": "latest",
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
},
"requiredPrivateInfos": ["getLocation", "onLocationChange", "chooseLocation", "chooseAddress"]
},
"h5": {},
"mp-alipay": {
"usingComponents": true,
"optimization": {
"subPackages": true
}
},
"mp-baidu": {
"usingComponents": true
},
"mp-toutiao": {
"usingComponents": true
},
"uniStatistics": {
"enable": false
},
"vueVersion": "3"
}

View File

@@ -118,7 +118,8 @@
{
"path": "pages/user/member/billDetails",
"style": {
"navigationBarTitleText": "账单明细"
"navigationBarTitleText": "账单明细",
"navigationStyle": "custom"
}
},
{
@@ -187,6 +188,14 @@
"navigationBarTitleText": "充值中心",
"navigationStyle": "custom"
}
},
{
"path" : "pages/user/member/charge-detail/charge-detail",
"style" :
{
"navigationBarTitleText" : "",
"navigationStyle": "custom"
}
}
],
"subPackages": [
@@ -199,6 +208,14 @@
"navigationBarTitleText" : "",
"navigationStyle": "custom"
}
},
{
"path" : "vip/buy-vip",
"style" :
{
"navigationBarTitleText" : "",
"navigationStyle": "custom"
}
}
]

View File

@@ -1,7 +1,8 @@
<template>
<!-- 账单明细 -->
<view style="padding-bottom: 40rpx;">
<view class="bild">
<up-navbar bgColor="transparent" title="明细" @leftClick="back"></up-navbar>
<view class="bild" style="background-image: url(/static/czzx_header_bg.png);">
<view class="bildLeft">
<text>我的余额</text>
<view>{{formData.info.amount||0}}</view>
@@ -11,80 +12,78 @@
<view>{{formData.info.accountPoints||0}}</view>
</view>
</view>
<view class="navTop">
<view @click="clickEvent(1)" :class="[formData.active==1?'fonts':'']">
余额明细
<view :class="[formData.active==1?'xian':'']" style="left: 36rpx;"> </view>
</view>
<view @click="clickEvent(2)" :class="[formData.active==2?'fonts':'']">
积分明细
<view :class="[formData.active==2?'xian':'']" style="left: 36rpx;"> </view>
</view>
</view>
<view class="listStyle " v-for="(item,i) in formData.list" :key="i">
<!-- <image class="head_img" :src="item.head_img?item.head_img:'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/menber/head_default.png'" style="width: 76rpx;height: 76rpx;float: left;" mode=""></image> -->
<view class="flex-start">
<view class="listStyle_left">
<view class="listrigth">
<view v-if="formData.active == 1">
<text v-if="item.bizCode == 'cashIn'">
现金充值
</text>
<text v-if="item.bizCode == 'wechatIn'">
微信小程序充值
</text>
<text v-if="item.bizCode == 'alipayIn'">
支付宝小程序充值
</text>
<text v-if="item.bizCode == 'awardIn'">
充值奖励
</text>
<text v-if="item.bizCode == 'rechargeRefund'">
充值退款
</text>
<text v-if="item.bizCode == 'orderPay'">
订单消费
</text>
<text v-if="item.bizCode == 'orderRefund'">
订单退款
</text>
<text v-if="item.bizCode == 'adminIn'">
管理员充值
</text>
<text v-if="item.bizCode == 'adminOut'">
管理员消费
</text>
</view>
<view v-else>
{{item.content}}
</view>
<!-- <view
:class="{colorStyle: (formData.active==1&&item.type == '+') || (formData.active==2&&item.floatType=='add')}">
{{ formData.active == 1 ? item.type : (item.floatType == 'add'?'+':'')}}
{{formData.active == 1 ? item.amount : item.floatPoints}}
</view> -->
<view v-if="formData.active == 1" :class="{colorStyle: (item.bizCode == 'cashIn' || item.bizCode == 'wechatIn' ||
item.bizCode == 'alipayIn'|| item.bizCode == 'awardIn'|| item.bizCode == 'rechargeRefund')}">
{{ item.amount }}
</view>
<view v-else :class="{colorStyle: (item.floatPoint>0)}">
{{item.floatPoints}}
</view>
</view>
<view class="bottom">
<view class="navTop">
<view @click="clickEvent(1)" :class="[formData.active==1?'fonts':'']">
余额明细
<view :class="[formData.active==1?'xian':'']" style="left: 36rpx;"> </view>
</view>
<view class=" listrigth2">
<view>{{item.createTime}}
<view @click="clickEvent(2)" :class="[formData.active==2?'fonts':'']">
积分明细
<view :class="[formData.active==2?'xian':'']" style="left: 36rpx;"> </view>
</view>
</view>
<view class="listStyle " v-for="(item,i) in formData.list" :key="i">
<view class="flex-start">
<view class="listStyle_left">
<view class="listrigth">
<view v-if="formData.active == 1">
<text v-if="item.bizCode == 'cashIn'">
现金充值
</text>
<text v-if="item.bizCode == 'wechatIn'">
微信小程序充值
</text>
<text v-if="item.bizCode == 'alipayIn'">
支付宝小程序充值
</text>
<text v-if="item.bizCode == 'awardIn'">
充值奖励
</text>
<text v-if="item.bizCode == 'rechargeRefund'">
充值退款
</text>
<text v-if="item.bizCode == 'orderPay'">
订单消费
</text>
<text v-if="item.bizCode == 'orderRefund'">
订单退款
</text>
<text v-if="item.bizCode == 'adminIn'">
管理员充值
</text>
<text v-if="item.bizCode == 'adminOut'">
管理员消费
</text>
</view>
<view v-else>
{{item.content}}
</view>
<view v-if="formData.active == 1" :class="{colorStyle: (item.bizCode == 'cashIn' || item.bizCode == 'wechatIn' ||
item.bizCode == 'alipayIn'|| item.bizCode == 'awardIn'|| item.bizCode == 'rechargeRefund')}">
{{ item.amount }}
</view>
<view v-else :class="{colorStyle: (item.floatPoint>0)}">
{{item.floatPoints}}
</view>
<view v-if="formData.active == 1">余额:{{item.balance}}</view>
</view>
</view>
<view class=" listrigth2">
<view>{{item.createTime}}
</view>
<view v-if="formData.active == 1">余额:{{item.balance}}</view>
</view>
</view>
<view v-if="formData.list.length <= 0" style="text-align: center;">
<image style="width: 402rpx;height: 442rpx;margin:240rpx auto 32rpx;"
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/nomore.png" mode="aspectFill"></image>
</view>
<up-loadmore :status="formData.form.status" fontSize="14" color="#999" iconSize="14" />
</view>
<view v-if="formData.list.length <= 0" style="text-align: center;">
<image style="width: 402rpx;height: 442rpx;margin:240rpx auto 32rpx;"
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/nomore.png" mode="aspectFill"></image>
</view>
<up-loadmore :status="formData.form.status" fontSize="14" color="#999" iconSize="14" />
</view>
</view>
</template>
<script setup>
@@ -102,7 +101,11 @@
APIshopUsermoneyRecord,
APIshopUserpointsRecord
} from '@/common/api/member.js'
function back(){
uni.navigateBack()
}
const formData = reactive({
active: 1,
list: [],
@@ -196,9 +199,8 @@
<style scoped lang="less">
.bild {
height: 320rpx;
background-image: url('https://czg-qr-order.oss-cn-beijing.aliyuncs.com/menber/billingDetails.png');
background-size: 750rpx 320rpx;
height: 500rpx;
background-size: cover;
display: flex;
justify-content: space-around;
align-items: center;
@@ -220,18 +222,21 @@
}
}
}
.bottom{
background-color: rgba(255, 255, 255, .3);
padding: 40rpx 28rpx 0 28rpx;
transform: translateY(-140rpx);
border-radius: 74rpx 74rpx 0 0;
}
.navTop {
display: flex;
justify-content: space-around;
align-items: center;
color: #333;
margin-top: -60rpx;
// padding: 0 120rpx;
font-size: 28rpx;
.fonts {
font-weight: bold;
font-size: 32rpx;
}
@@ -241,7 +246,7 @@
.xian {
width: 58rpx;
height: 6rpx;
background: #333;
background: #FFAA62;
border-radius: 2rpx 2rpx 2rpx 2rpx;
position: absolute;
bottom: -16rpx;

View File

@@ -0,0 +1,168 @@
<!-- 充值中心 -->
<template>
<view class="container">
<up-navbar bgColor="transparent" title="明细" @leftClick="back"></up-navbar>
<view class="header-wrap">
<image class="bg" src="/static/czzx_header_bg.png" mode="aspectFill"></image>
<view class="u-flex info text-center">
<view class="u-flex-1">
<view class="color-333 font-14">我的余额</view>
<view class="u-m-t-30 font-700 color-333" style="font-size: 40rpx;">200.00</view>
</view>
<view class="u-flex-1">
<view class="color-333 font-14">我的积分</view>
<view class="u-m-t-30 font-700 color-333" style="font-size: 40rpx;">200.00</view>
</view>
</view>
</view>
<view class="bottom">
<view class="u-flex tabs">
<view class="color-333 font-16 tabs-item" v-for="(item,index) in tabs.list" :key="index"
@click="tabs.sel=index" :class="{active:tabs.sel==index}">
<view>
{{item.name}}
</view>
<view class="u-flex u-flex-center u-m-t-10">
<view class="block">
</view>
</view>
</view>
</view>
<view class="u-m-t-32">
<view class="color-333 font-16 font-700">订单消费</view>
<view v-for="(item,index) in lists" :key="index">
<view>森食界创意轻食(未央店)</view>
</view>
</view>
</view>
</view>
</template>
<script setup>
import * as vipApi from '@/common/api/market/recharge.js'
import {
joinMember
} from '@/common/api/order/index.js'
import {
ref,
onMounted,
computed,
reactive
} from 'vue'
import {
onLoad,onReachBottom
} from '@dcloudio/uni-app'
async function buy() {
const res = await joinMember()
}
function back() {
uni.navigateBack();
}
const list = ref([])
async function init() {
const res = await vipApi.config()
if (res) {
list.value = res
}
}
onMounted(init)
const tabs = reactive({
list: [{
name: '余额明细'
},
{
name: '积分明细'
},
],
sel: 0
})
onLoad(() => {
})
onReachBottom(()=>{
console.log('onReachBottom');
})
</script>
<style scoped lang="scss">
.tabs {
justify-content: center;
gap: 138rpx;
.tabs-item {
.block {
width: 58rpx;
height: 6rpx;
background-color: transparent;
border-radius: 6rpx;
transition: all .3s ease-in-out;
}
&.active {
.block {
background-color: #FFAA62;
}
}
}
}
.color1 {
color: #5F2E0F;
}
.color2 {
color: #FF6300;
}
.header-wrap {
width: 100%;
height: 530rpx;
box-sizing: border-box;
padding: calc(var(--status-bar-height) + 180upx) 28upx 28upx;
position: relative;
.bg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.info {
position: relative;
}
}
.bottom {
background-color: rgba(255, 255, 255, .3);
padding: 40rpx 28rpx 0 28rpx;
transform: translateY(-140rpx);
border-radius: 74rpx 74rpx 0 0;
}
</style>

View File

@@ -23,76 +23,265 @@
</view>
<view class="btm-wrap">
<view class="">
</view>
</view>
</view>
<view class="bottom">
<view class="u-flex u-flex-between">
<view class="u-flex ">
<image src="/static/vip/money.png" style="width: 44rpx;height: 44rpx;" mode=""></image>
<text class="u-m-l-24 color-333 font-16 font-700">立即充值</text>
</view>
<view class="font-12 color-999">
<text>充值代表接受</text>
<text style="color: #ECB592;">用户隐私协议</text>
</view>
</view>
<view class="list u-m-t-40">
<view class="item color1" @click="sel=index" v-for="(item,index) in list" :key="index"
:class="{active:sel==index}">
<view class="">
<text></text>
<text class="font-700" style="font-size: 48rpx;"
:class="{color2:sel==index}">{{item.amount}}</text>
</view>
<view class="font-12" v-if="item.rewardAmount" :class="{color2:sel==index}">
<text></text>
<text></text>
<text class="font-14">{{item.rewardAmount}}</text>
</view>
<view class="font-12" v-if="item.rewardPoints">
<text></text>
<text></text>
<text class="font-14">{{item.rewardPoints}}</text>
</view>
<view class="font-12 color-666" v-if="item.couponInfoList.length">
<text></text>
<text>{{item.couponInfoList.length}}</text>
<text>张券</text>
<text class="color2 u-m-l-8" v-if="sel==index">查看</text>
</view>
<view class="sel u-flex" v-if="sel==index">
<image class="image" src="/static/vip/sel.png" mode=""></image>
</view>
</view>
</view>
<view class="u-flex other flex-center">
<text class="font-14 color-333 font-700 u-m-r-28">其他金额</text>
<up-input v-model="money" type="number" placeholder="请输入充值金额" border="none"
placeholder-style="font-size:14px;"></up-input>
</view>
<view class="color-999 font-12 u-m-t-4">自定义金额充值时不享受任何优惠赠送</view>
<button class="buy-btn" @click="buy">
<text class="font-16 ">{{charge_money}}</text>
<text class="font-14 u-m-l-24">立即充值</text>
</button>
<view class="u-m-t-36 color-999 font-12">
<view>充值说明</view>
<view class="u-m-t-16">
<text>适用门店</text>
<text class="color2 u-m-l-28">全国门店通用 > </text>
</view>
<view class="u-m-t-16">
<text>有效期限</text>
<text class=" u-m-l-28">永久有效 </text>
</view>
<view class="u-m-t-16 u-flex u-flex-y-center">
<text class="no-wrap">注意事项</text>
<view class="u-m-l-28">
<view>1.储值完成后不支持自助退款可联系商家处理</view>
<view> 2.余额不支持转赠不可提现长期有效</view>
</view>
</view>
<view class="u-m-t-16 u-flex u-flex-y-center">
<text class="no-wrap">充值说明</text>
<view class="u-m-l-28">
此处显示内容:管理端配置读取智慧充值中充值说明字段内容
</view>
</view>
</view>
</view>
</view>
</template>
<script setup>
function back() {
uni.navigateBack();
}
import * as vipApi from '@/common/api/market/recharge.js'
import {joinMember} from '@/common/api/order/index.js'
import {
ref,onMounted,computed
} from 'vue'
async function buy(){
const res=await joinMember()
}
function back() {
uni.navigateBack();
}
const list = ref([])
const sel = ref(0)
const money = ref(null);
async function init(){
const res=await vipApi.config()
if(res){
list.value=res.rechargeDetailList
}
}
const charge_money=computed(()=>{
const item= list.value[sel.value]
if(item){
return item.amount
}
return ''
})
onMounted(init)
</script>
<style scoped lang="scss">
.header-wrap {
width: 100%;
height: 600upx;
padding: calc(var(--status-bar-height) + 180upx) 28upx 28upx;
position: relative;
.bg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
.color1 {
color: #5F2E0F;
}
.select-shop {
display: flex;
align-items: center;
.color2 {
color: #FF6300;
}
.buy-btn {
margin-top: 28rpx;
padding: 32rpx 32rpx;
color: #fff;
font-size: 16px;
font-weight: 700;
border-radius: 80rpx;
line-height: 1;
background: linear-gradient(98deg, #fe6d1100 40.64%, #FFD1B4 105.2%), linear-gradient(259deg, #FE6D11 50.14%, #FFD1B4 114.93%);
box-shadow: 0 14rpx 30.4rpx 0 #fe8b435e;
}
.other {
background: #F6F6F6;
padding: 24rpx 16rpx;
margin-top: 40rpx;
}
.header-wrap {
width: 100%;
height: 530rpx;
box-sizing: border-box;
padding: calc(var(--status-bar-height) + 180upx) 28upx 28upx;
position: relative;
.select-btn {
.bg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.select-shop {
display: flex;
align-items: center;
gap: 12upx;
.t {
color: #333;
position: relative;
.select-btn {
display: flex;
align-items: center;
gap: 12upx;
.t {
color: #333;
}
}
}
}
.balance-wrap {
display: flex;
justify-content: space-between;
position: relative;
padding-top: 40upx;
.left {
.balance-wrap {
display: flex;
align-items: center;
.t {
color: #5e3110;
&.i {
position: relative;
top: 10upx;
justify-content: space-between;
position: relative;
padding-top: 40upx;
.left {
display: flex;
align-items: center;
.t {
color: #5e3110;
&.i {
position: relative;
top: 10upx;
font-size: 28upx;
}
&.n {
font-size: 64upx;
font-weight: bold;
}
}
}
.right {
display: flex;
flex-direction: column;
gap: 12upx;
.t {
color: #86491d;
font-size: 28upx;
}
&.n {
font-size: 64upx;
font-weight: bold;
}
}
}
.right {
display: flex;
flex-direction: column;
gap: 12upx;
.t {
color: #86491d;
font-size: 28upx;
}
}
}
}
</style>
.bottom {
background-color: rgba(255, 255, 255, .3);
padding: 40rpx 28rpx 0 28rpx;
transform: translateY(-140rpx);
border-radius: 74rpx 74rpx 0 0;
}
.list {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 20rpx;
row-gap: 22rpx;
.item {
padding: 36rpx 22rpx;
border-radius: 42rpx;
background: linear-gradient(180deg, #F5F5F5 58.54%, #FFF 140.47%);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
box-sizing: border-box;
border: 6rpx solid transparent;
transition: all .3s ease-in-out;
&.active {
background: linear-gradient(180deg, #FFC29A -26.17%, #FFF 64.06%);
border: 6rpx solid #FE6C0E;
box-shadow: 0 0 31rpx 2rpx #fe8b435e;
}
.sel {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%) translateY(21rpx);
.image {
width: 42rpx;
height: 42rpx;
}
}
}
}
</style>

View File

@@ -9,17 +9,21 @@
<image class="my_info_left_head" :src="userInfo.headImg" mode="aspectFill"></image>
<view class="name">{{userInfo.nickName}}</view>
</view>
<image class="my_info_right_qr" @click="clickEvent" v-if="userInfo.isVip == 1 && ShopId"
<image class="my_info_right_qr" @click="clickEvent" src="/static/icon/code.png" mode="aspectFill">
</image>
<!-- <image class="my_info_right_qr" @click="clickEvent" v-if="userInfo.isVip == 1 && ShopId"
:src="'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/my_qRcode.png'" mode="aspectFill">
</image>
<view class="my_info_right" @click="clickEvent" v-if="userInfo.isVip == 0 && ShopId">
<text>免费入会</text>
</view>
</view> -->
</view>
<up-gap height="26rpx" bg-color="#F9F9F9"></up-gap>
<view class="my_item my_assets" @click="Myassets">
<view class="my_item_title">我的资产</view>
<!-- <view class="my_item my_assets" @click="Myassets"> -->
<view class="my_item my_assets" >
<view class="my_item_title u-m-t-12">我的资产</view>
<view class="amount">
<view class="u-flex u-flex-between u-m-t-20">
<view class="u-flex">
@@ -45,7 +49,7 @@
</view>
<view class="font-12 color-666">这里是店铺名称</view>
</view>
</view>
<view class="u-flex u-flex-column u-flex-center">
<view class="text-center color-333 font-12">查看全部</view>
@@ -55,9 +59,7 @@
<view class="vip u-m-t-40">
<view class="u-flex u-flex-between u-m-t-20">
<view class="u-flex">
<image style="width: 50rpx;height: 37rpx;"
src="/static/icon/vip.png"
mode="aspectFill">
<image style="width: 50rpx;height: 37rpx;" src="/static/icon/vip.png" mode="aspectFill">
</image>
<text class="color-333 font-14 u-m-l-20">会员</text>
</view>
@@ -66,7 +68,7 @@
<up-icon name="arrow-down" color="#666" size="12px"></up-icon>
</view>
</view>
<view class="card-list">
<view class="card-list-item" v-for="(item,index) in 3" :key="index">
<up-image radius="20rpx" width="182rpx" height="182rpx"></up-image>
@@ -77,15 +79,15 @@
</view>
<view class="font-12 color-666">这里是店铺名称</view>
</view>
</view>
<view class="u-flex u-flex-column u-flex-center">
<view class="text-center color-333 font-12">查看全部</view>
<view class="text-center color-333 font-12" @click="tomemberList">查看全部</view>
</view>
</view>
</view>
</view>
<view class="my_item my_fun u-m-t-30">
@@ -126,6 +128,7 @@
import {
productStore
} from '@/stores/user.js';
import * as vipApi from '@/common/api/market/vip.js'
const store = productStore();
const myFunList = ref([{
name: "积分",
@@ -159,20 +162,38 @@
const userInfo = reactive({})
const ShopId = ref(uni.cache.get('shopId'))
function tomemberList(){
uni.navigateTo({
url:'/pages/user/member/list'
})
}
const clickEvent = () => {
if (ShopId.value) {
if (userInfo.isVip == 0) {
uni.pro.navigateTo('user/member/memberdetails', {
shopId: uni.cache.get('shopId')
if(!userInfo.isVip){
uni.navigateTo({
url: '/user/vip/buy-vip?shopId='+ShopId.value
})
} else {
uni.pro.navigateTo('user/member/paycode', {
shopId: uni.cache.get('shopId'),
shopInfo: JSON.stringify(uni.cache.get('orderVIP').shopInfo)
}else{
uni.navigateTo({
url: '/user/vip/vip?shopId='+ShopId.value
})
}
// if (userInfo.isVip == 0) {
// uni.pro.navigateTo('user/member/memberdetails', {
// shopId: uni.cache.get('shopId')
// })
// } else {
// uni.pro.navigateTo('user/member/paycode', {
// shopId: uni.cache.get('shopId'),
// shopInfo: JSON.stringify(uni.cache.get('orderVIP').shopInfo)
// })
// }
} else {
uni.pro.navigateTo('member/list', {
type: 'user_payCode'
@@ -246,6 +267,10 @@
break;
}
}
async function getData() {
const res = await vipApi.list()
console.log(res);
}
onShow(() => {
store.actionsAPIuser()
if (uni.cache.get('shopId')) {
@@ -256,6 +281,7 @@
...uni.cache.get('userInfo').assetsSummary
})
}
getData()
})
</script>
@@ -312,8 +338,8 @@
}
.my_info_right_qr {
width: 60rpx;
height: 60rpx;
width: 40rpx;
height: 40rpx;
}
}
@@ -420,10 +446,12 @@
grid-template-columns: repeat(4, 1fr);
column-gap: 40rpx;
margin-top: 20rpx;
.card-list-item{
.card-list-item {
max-width: 182rpx;
box-shadow: 8rpx 8rpx 32rpx 0 #0b18390f;
.info{
.info {
padding-bottom: 16rpx;
overflow: hidden;
}

1130
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff

BIN
static/icon/code.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 846 B

BIN
static/vip/money.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
static/vip/sel.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@@ -0,0 +1,500 @@
<template>
<!-- 店铺详情 -->
<u-popup :show="memberOpen" :round="20" overlayOpacity="0.8" mode="bottom" @close="showClose" height="500">
<view class="register-member-wrap">
<view class="register-title">欢迎加入{{shopUserInfo.shopName?shopUserInfo.shopName:'本店'}}</view>
<view class="register-tip">请完善个人信息完成会员注册</view>
<view class="register-content">
<view class="reg-head">
<view class="reg-head-img">
<!-- #ifdef MP-WEIXIN || H5 -->
<button class="reg-head-img" type="default" open-type="chooseAvatar"
@chooseavatar="onChooseAvatar">
<image class="reg-head-img"
:src="userHeadImg || 'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/menber/head_default.png'"
mode="aspectFill"></image>
</button>
<!-- #endif -->
<!-- #ifdef MP-ALIPAY -->
<button class="reg-head-img" @click="onChooseAvatar">
<image class="reg-head-img"
:src="userHeadImg || 'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/menber/head_default.png'"
mode="aspectFill"></image>
</button>
<!-- #endif -->
</view>
</view>
<view class="reg-cell">
<view class="lable">昵称<text style="color: #CD1A1A;">*</text></view>
<u-input class="value" v-model="formInfo.nickName" fontSize="14px" type="text" input-align="left"
placeholder="请输入昵称" :custom-style="{border:'none'}"
placeholderStyle="color:#999;font-size: 28rpx" />
</view>
<view class="reg-cell" @click="calendarShow = true">
<view class="lable">生日</view>
<view class="value" :style="{color: formInfo.birthDay ? '#333' : '#999'}">
{{ formInfo.birthDay || '请选择日期'}}
</view>
<!-- <u-calendar @close="calendarShow = false" monthNum="99" minDate="1945-01-01" maxDate="2055-12-12" :show="calendarShow" mode="single" @confirm="confirmCalendar"></u-calendar> -->
<!-- <u-picker :show="calendarShow" ref="uPicker" :columns="columns" @confirm="confirm" @change="changeHandler"></u-picker> -->
<!-- <picker :show="calendarShow" mode="date"></picker> -->
<up-datetime-picker mode="date" @cancel="calendarShow = false" :show="calendarShow"
:minDate="-2208988800000" v-model="value1" itemHeight="66" visibleItemCount="5"
@confirm="confirmTime"></up-datetime-picker>
<up-icon name="arrow-down-fill" color="#000" size="10"></up-icon>
</view>
<view class="reg-cell">
<view class="lable">性别<text style="color: #CD1A1A;">*</text></view>
<up-radio-group v-model="formInfo.sex" active-color="#E3AD7F">
<up-radio :name="1" label="男"></up-radio>
<up-radio :name="0" label="女"></up-radio>
</up-radio-group>
</view>
<view class="reg-cell">
<view class="lable">手机号</view>
<up-input class="value" v-model="formInfo.telephone" fontSize="14px" type="text" input-align="left"
readonly placeholder="获取手机号" :custom-style="{border:'none'}"
placeholder-style="color:#999;font-size: 28rpx" />
<!-- #ifdef MP-WEIXIN || H5 -->
<button class="getPhone" size="10" open-type="getPhoneNumber" @getphonenumber="getPhone">
<!-- #endif -->
<!-- #ifdef MP-ALIPAY -->
<button class="getPhone" size="10" open-type="getAuthorize" scope='phoneNumber'
@getAuthorize="getPhone">
<!-- #endif -->
<view class="text">{{'获取手机号'}}</view>
</button>
</view>
<view class="agreement">
<view class="agreement_tip">我已阅读并同意以下内容</view>
<view class="agreement_item" @click="isProtocol = !isProtocol">
<up-checkbox-group>
<up-checkbox :checked="isProtocol" shape="circle" activeColor="#E3AD7F"
@change="radioChange" size="15" iconSize="10"></up-checkbox>
</up-checkbox-group>
<text @click.stop="viewProtocol(1)" class="agreement_item_text">用户协议/隐私条款</text>
</view>
<!-- <view class="agreement_item">
<u-checkbox-group>
<u-checkbox shape="circle" activeColor="#E3AD7F" @change="radioChange" size="30"></u-checkbox>
</u-checkbox-group>
<text class="agreement_item_text">隐私条款</text>
</view> -->
</view>
<view class="register_btn" @tap="$u.debounce(registerMember, 500)">快速注册</view>
</view>
</view>
</u-popup>
</template>
<script setup>
import {
defineProps,
reactive,
ref,
defineEmits
} from 'vue';
import {
APIshopUser,
APIshopUserInfo
} from '@/common/api/member.js'
import {
APIuserphone
} from '@/common/api/api.js'
const props = defineProps({
shopUserInfo: {
type: Object,
default: () => ({})
},
detailtype: {
type: String,
default: ''
},
memberOpen: {
type: Boolean,
default: false
},
});
// 定义事件发射器
const emits = defineEmits(['emitsmemberOpen']);
// 定义要触发的事件
const formInfo = reactive({
nickName: "",
telephone: "",
birthDay: "",
sex:1,
})
const value1 = Number(new Date())
const calendarShow = ref(false)
// 用户图片
const userHeadImg = ref('')
//显示隐藏
const isProtocol = ref(false)
const init = async () => {
// if (uni.cache.get('shopUserInfo') && uni.cache.get('shopId') == uni.cache.get('shopUserInfo').id) {
// shopUserInfo = uni.cache.get('shopUserInfo');
// } else {
// let res = await this.api.shopUserInfo({
// "shopId": uni.cache.get('shopId'),
// "userId": uni.cache.get('userInfo').id,
// })
// if (res.code == 0) {
// shopUserInfo = res.data;
// }
// }
// memberOpen.value = shopUserInfo.isVip == 0 ? true : false;
// userHeadImg.value = shopUserInfo.headImg;
// formInfo.nickName = shopUserInfo.nickName && shopUserInfo.nickName != '微信用户' ? shopUserInfo
// .nickName : '';
// formInfo.telephone = shopUserInfo.telephone;
// formInfo.birthDay = shopUserInfo.birthDay
}
// 返回
const showClose = () => {
uni.navigateBack()
}
//
const radioChange = (n) => {
isProtocol.value = n;
}
// 查看协议
const viewProtocol = () => {
wx.openPrivacyContract({
success: () => {}, // 打开成功
fail: () => {}, // 打开失败
complete: () => {}
})
}
//上传头像
const onChooseAvatar = (e) => {
//#ifdef MP-WEIXIN
let avatarUrl = e.detail.avatarUrl
uni.uploadFile({
url: uni.conf.baseUrl + '/account/user/common/upload',
filePath: avatarUrl,
header: {
shopId: uni.cache.get('shopId'),
token: uni.cache.get('token') || '',
'content-type': 'multipart/form-data'
},
fileType: 'image',
name: "file",
formData: {
file: avatarUrl,
},
success: (uploadFileRes) => {
let {
data
} = JSON.parse(uploadFileRes.data)
userHeadImg.value = data
},
fail: (res) => {
console.log(res)
}
});
// #endif
//#ifdef MP-ALIPAY
uni.chooseImage({
count: 1, // 默认9设置图片的数量
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function(res) {
// 成功选择图片后
let avatarUrl = res.tempFilePaths[0]; // 获取文件路径
my.uploadFile({
url: uni.conf.baseUrl + '/account/user/common/upload',
filePath: avatarUrl,
header: {
environment: 'app',
type: 'android',
version: '1.7.3',
'content-type': 'multipart/form-data'
},
fileType: 'image',
name: "file",
formData: {
file: avatarUrl,
},
success: (uploadFileRes) => {
let {
data
} = JSON.parse(uploadFileRes.data)
userHeadImg.value = data
},
fail: (res) => {
console.log(res)
}
});
},
fail: (res) => {
console.log(res)
}
});
// #endif
}
// 确定生日
const confirmTime = (e) => {
calendarShow.value = false;
formInfo.birthDay = getDate(e.value);
}
// 获取手机号
const getPhone = (d) => {
// #ifdef MP-WEIXIN
if (d.detail.iv) {
uni.login({
provider: 'weixin',
success: async (data) => {
let res = await APIuserphone({
code: data.code,
encryptedData: d.detail.encryptedData,
iv: d.detail.iv,
source: "wechar"
})
formInfo.telephone = res
}
})
}
// #endif
// #ifdef MP-ALIPAY
// 支付宝小程序环境
my.getAuthCode({
scopes: 'auth_user',
success: (res) => {
console.log(res)
my.getPhoneNumber({
success: async (data) => {
let res = await APIuserphone({
encryptedData: JSON.parse(data.response).response,
source: "alipay"
})
formInfo.telephone = res
// console.log(this.phonetitle)
}
});
}
});
// #endif
}
// 格式化时间戳
const getDate = (time) => {
const date = new Date(time);
// const date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
month = month > 9 ? month : '0' + month;
day = day > 9 ? day : '0' + day;
return `${year}-${month}-${day}`;
}
const registerMember = async () => {
if (formInfo.nickName == "" || formInfo.nickName == null) {
uni.showToast({
title: '请输入会员昵称',
icon: 'none'
});
return;
}
if (formInfo.telephone == "" || formInfo.telephone == null) {
uni.showToast({
title: '请获取手机号',
icon: 'none'
});
return;
}
if (!isProtocol.value) {
uni.showToast({
title: '请勾选协议',
icon: 'none'
});
return;
}
const submitForm={
// id: uni.cache.get('userInfo').id,
// shopId: uni.cache.get('shopId'),
nickName: formInfo.nickName,
headImg: userHeadImg.value,
phone: formInfo.telephone,
birthDay: formInfo.birthDay,
sex:formInfo.sex
}
await APIshopUser(submitForm)
let APIshopUserInfores = await APIshopUserInfo({
shopId: uni.cache.get('shopId')
})
uni.cache.set('orderVIP', APIshopUserInfores)
uni.cache.set('ordershopUserInfo', APIshopUserInfores.shopInfo)
uni.showToast({
title: '注册成功',
icon: 'none'
})
// 定义自定义事件
// setTimeout(() => {
// uni.navigateBack()
// }, 1500)
emits('emitsmemberOpen',submitForm);
}
</script>
<style lang="scss" scoped>
.u-datetime-picker {
height: 300px !important;
}
.register-member-wrap {
padding: 64rpx 24rpx;
display: flex;
flex-direction: column;
.register-title {
font-weight: bold;
font-size: 36rpx;
color: #333333;
margin-bottom: 16rpx;
}
.register-tip {
font-weight: 400;
font-size: 24rpx;
color: #999999;
}
.register-content {
display: flex;
flex-direction: column;
.reg-head {
display: flex;
align-items: center;
justify-content: center;
margin-top: 64rpx;
.reg-head-img {
width: 120rpx;
height: 120rpx;
border-radius: 50%;
padding: 0;
position: relative;
}
.reg-head-edit {
width: 24rpx;
height: 24rpx;
position: absolute;
bottom: 0;
right: 14rpx;
}
}
.reg-cell {
display: flex;
align-items: center;
padding: 20rpx 0;
border-bottom: 2rpx solid #E5E5E5;
.lable {
width: 120rpx;
font-weight: 500;
font-size: 28rpx;
color: #333333;
}
.value {
font-weight: 400;
font-size: 28rpx;
color: #333;
padding: 12rpx 0 12rpx 18rpx;
}
.u-input {
input {
font-size: 28rpx !important;
}
}
.getPhone {
background-color: none;
border: 2rpx solid #E3AD7F;
color: #E3AD7F;
font-size: 24rpx;
padding: 5rpx 30rpx;
// #ifdef MP-ALIPAY
padding-top: 0;
display: initial;
height: 70rpx;
line-height: 70rpx;
box-sizing: border-box;
border-radius: 5rpx;
// #endif
}
}
.agreement {
display: flex;
flex-direction: column;
margin-top: 48rpx;
.agreement_tip {
font-weight: 400;
font-size: 24rpx;
color: #666666;
}
.agreement_item {
display: flex;
padding-top: 32rpx;
padding-bottom: 16rpx;
align-items: center;
.agreement_item_text {
font-weight: 500;
font-size: 24rpx;
color: #E3AD7F;
}
}
}
.register_btn {
width: 572rpx;
height: 90rpx;
line-height: 90rpx;
text-align: center;
background: #E3AD7F;
border-radius: 48rpx 48rpx 48rpx 48rpx;
font-weight: 500;
font-size: 36rpx;
color: #FFFFFF;
margin: 30rpx auto 0 auto;
}
}
}
</style>

View File

Before

Width:  |  Height:  |  Size: 4.7 KiB

After

Width:  |  Height:  |  Size: 4.7 KiB

View File

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 4.0 KiB

View File

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 3.9 KiB

View File

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 4.0 KiB

View File

Before

Width:  |  Height:  |  Size: 5.3 KiB

After

Width:  |  Height:  |  Size: 5.3 KiB

View File

Before

Width:  |  Height:  |  Size: 4.5 KiB

After

Width:  |  Height:  |  Size: 4.5 KiB

View File

Before

Width:  |  Height:  |  Size: 45 KiB

After

Width:  |  Height:  |  Size: 45 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

View File

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

578
user/vip/buy-vip.vue Normal file
View File

@@ -0,0 +1,578 @@
<template>
<view>
<up-navbar bg-color="transparent" title="会员中心" @leftClick="back"></up-navbar>
<view class="top" style=" background-image: url(/static/czzx_header_bg.png);">
<view>
<view class="u-flex">
<up-avatar size="136rpx" shape="square" round="20rpx" :src="shopInfo.coverImg"></up-avatar>
<view class="u-p-l-20">
<view class="shop-name u-line-1">{{shopInfo.shopName||'店铺名称' }}</view>
<view class="no-buy">暂未开通</view>
</view>
</view>
</view>
</view>
<view class="box">
<view class="vip-quanyi">
<template v-if="state.openType=='CONDITION'">
<view class="font-700 color-000 color-000 u-m-t-8">
如何成为会员
</view>
<view class="u-flex u-m-t-20 u-flex-between" v-for="(item,index) in conditionList" :key="index">
<text class="color-000">{{item.title}}</text>
<view class="finish-btn" :class="item.isFinsh?'active':''">
{{item.isFinsh?'已完成':'未完成'}}
</view>
</view>
<view class="u-flex u-flex-between u-m-t-48">
<text class="color-000 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 menus-tiaojian">
<view class="item " v-for="(item,index) in tiaojian_menus" :key="index">
<view class="u-flex u-flex-x-center u-m-t-4">
<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 u-flex-center">
<text class="no-wrap u-m-r-4">{{item.name}}</text>
<up-icon @click="modelShow(item.name)" size="12" name="question-circle" color="#333"
v-if="showQuestion(index,tiaojian_menus)"></up-icon>
</view>
<view class="font-12 color-666 text-center">{{item.desc}}</view>
</view>
</view>
</view>
</template>
<template v-else>
<view class="vip-list">
<view v-for="(item,index) in configList" :key="index" class="vip-list-item"
@click="vipSel=index" :class="{active:vipSel==index}">
<view class="font-16 color-333">{{item.name}}</view>
<view class="u-m-t-16 color-333">
<text class="font-14"></text>
<text style="font-size: 48rpx;">{{item.price}}</text>
</view>
<view class="color-999 font-14 line-through text-center" v-if="item.origin_price">
<text></text>
<text>{{item.origin_price}}</text>
</view>
</view>
</view>
<view class="u-flex u-flex-between u-m-t-48">
<text class="color-000 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 menus-pays">
<view class="item " v-for="(item,index) in pay_menus" :key="index">
<view class="u-flex u-flex-x-center u-m-t-4">
<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 u-flex-center">
<text class="no-wrap u-m-r-4">{{item.name}}</text>
<up-icon @click="modelShow(item.name)" size="12" name="question-circle" color="#333"
v-if="showQuestion(index,pay_menus)&& memberLevel"></up-icon>
</view>
<view class="font-12 color-666 text-center" v-if="item.name=='赠送成长值'">
{{'赠送'+returnReward+'成长值'}}
</view>
<view class="font-12 color-666 text-center"
v-else-if="item.name=='优惠券'&&returCouponList.length">
{{'赠送'+returCouponList.length+'张优惠券'}}
</view>
<view class="font-12 color-666 text-center" v-else-if="item.name=='会员折扣'&&memberLevel">
全店折扣{{memberLevel.discount}}
</view>
<view class="font-12 color-666 text-center" v-else>{{item.desc}}</view>
</view>
</view>
</view>
<button class="buy-btn" @click="buy">立即开通</button>
</template>
</view>
</view>
<up-popup :show="model.show" mode="center" round="16rpx" close-on-click-overlay @close="model.show=false">
<view class="model-box">
<view class="u-flex u-flex-between">
<text class="color-000 font-700 font-16">{{model.title}}</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>
<up-popup :show="model.show1" mode="bottom" round="16rpx" close-on-click-overlay @close="model.show1=false">
<view class="model-box">
<view class="u-flex u-flex-between">
<text class="color-000 font-700 font-16">{{model.title}}</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>
<registermember :memberOpen="memberOpen" :shopUserInfo="shopInfo" @emitsmemberOpen="emitsmemberOpen">
</registermember>
</view>
</template>
<script setup>
import {
ref,
reactive,
computed
} from "vue"
import {
joinMember
} from '@/common/api/order/index.js'
import * as vipApi from '@/common/api/market/vip.js'
import {
APIusershopInfodetail
} from '@/common/api/member.js'
import {
onLoad
} from '@dcloudio/uni-app'
import registermember from '@/user/components/registermember.vue'
const model = reactive({
show: false,
show1: false,
title: ''
})
const memberOpen=ref(false)
function modelHide() {
model.show = false;
}
function modelShow(name) {
if (name == '消费送积分') {
model.title = '消费送积分'
modelContent.value = `每消耗1元赠送${memberLevel.value.costRewardPoints}积分`
}
if (name == '周期福利') {
model.title = '周期福利'
modelContent.value =
`${memberLevel.value.cycleUnit}赠送${memberLevel.value.cycleRewardPoints}积分,${memberLevel.value.cycleRewardCouponList.length}张优惠券`
}
if (name == '会员说明') {
model.title = '会员说明'
modelContent.value = state.remark
}
model.show = true;
}
const modelContent = ref(`
1、可适用门店全部门店<br>
2、可适用商品部分商品<br>
3、可使用类型堂食<br>
4、可用时间段全时段可用<br>
5、限量规则每人限领3张每日可最多使用3张<br>
6、同享规则与限时折扣同享、与会员价同享<br>
7、其它说明这里是后台配置内容
`)
const state = reactive({
openType: 'CONDITION'
})
const pay_menus = ref([{
name: '赠送成长值',
desc: '赠送成长值',
icon: '/user/static/buy-vip/Frame_220.png',
},
{
name: '优惠券',
desc: '每月赠送2张优惠券',
icon: '/user/static/buy-vip/Frame_221.png'
},
{
name: '享会员价',
desc: '全店会员价',
icon: '/user/static/buy-vip/Frame_222.png'
},
{
name: '会员折扣',
desc: '全店折扣98折',
icon: '/user/static/buy-vip/Frame_223.png'
},
{
name: '消费送积分',
desc: '',
icon: '/user/static/buy-vip/Frame_224.png'
},
{
name: '周期福利',
desc: '',
icon: '/user/static/buy-vip/Frame_225.png'
}
])
const tiaojian_menus = [{
name: '享会员价',
desc: '全店会员价',
icon: '/user/static/buy-vip/Frame_222.png'
},
{
name: '会员折扣',
desc: '全店折扣98折',
icon: '/user/static/buy-vip/Frame_223.png'
},
{
name: '消费送积分',
desc: '',
icon: '/user/static/buy-vip/Frame_224.png'
},
{
name: '周期福利',
desc: '',
icon: '/user/static/buy-vip/Frame_225.png'
}
]
function showQuestion(index, arr) {
const len = arr.length
if (index >= len - 2) {
return true
}
return false
}
function back() {
uni.navigateBack()
}
const configList = ref([])
const vipSel = ref(0)
const conditionList = ref([])
const conditionListMap = {
'BIND_PHONE': '绑定手机号',
'ORDER': '完成消费',
'COST_AMOUNT': '消费达到指定金额',
'RECHARGE_AMOUNT': '充值达到指定金额',
}
const memberLevel = ref(null)
const shopInfo = reactive({})
async function init(shopId) {
const shopRes = await APIusershopInfodetail({
shopId
})
if (shopRes) {
Object.assign(shopInfo, shopRes.shopInfo)
}
const res = await vipApi.config({
shopId: shopId
})
if (res) {
if(res.memberConfig.isSubmitInfo){
memberOpen.value=true;
}
conditionList.value = res.memberConfig.conditionList.map(v => {
const json = {
...v,
isFinsh: res.conditionMap[v.code],
title: conditionListMap[v.code],
}
if (v.code == 'ORDER') {
json.title = json.title + v.value + '次'
}
if (v.code == 'COST_AMOUNT' || v.code == 'RECHARGE_AMOUNT') {
json.title = json.title + v.value + '元'
}
return json
})
configList.value = res.memberConfig.configList
Object.assign(state, res.memberConfig)
memberLevel.value = res.memberLevel
}
}
const returnReward = computed(() => {
const item = configList.value[vipSel.value]
if (item) {
return item.reward
}
return ''
})
const returCouponList = computed(() => {
const item = configList.value[vipSel.value]
if (item.couponList) {
return item.couponList
}
return []
})
const option = reactive({
shopId: ''
})
onLoad((opt) => {
Object.assign(option, opt)
console.log(option);
let shopId = uni.cache.get('shopId')
if (opt.shopId) {
shopId = opt.shopId
}
if (shopId) {
option.shopId = shopId
}
init(shopId)
})
let userInfo = {}
function emitsmemberOpen(e){
memberOpen.value=false
userInfo=e
}
async function buy() {
const json = {
shopId: option.shopId,
name: configList.value[vipSel.value].name,
num: 1,
}
if (state.isSubmitInfo) {
json.sex = userInfo.sex ;
json.birthDay = userInfo.birthDay;
json.nickName = userInfo.nickName
}
const res = await joinMember(json)
}
</script>
<style>
page {
background: #F9F9F9;
}
</style>
<style lang="scss" scoped>
.finish-btn {
padding: 2rpx 28rpx;
border-radius: 40rpx;
font-size: 14px;
border: 2rpx solid #D9D9D9;
padding: 4rpx 28rpx;
&.active {
border: 2rpx solid #FF6300;
color: #FF6300;
}
}
.box {
background-color: rgba(255, 255, 255, .3);
}
.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;
background-size: cover;
box-sizing: border-box;
height: 530rpx;
.shop-name {
color: #5E3110;
font-size: 16px;
font-weight: 700;
}
.no-buy {
margin-top: 12rpx;
padding: 8rpx 22rpx;
border-radius: 50rpx;
background-color: #F8F8F8;
font-size: 14px;
color: #999;
text-align: center;
}
}
.vip-box {
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;
}
.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 {
padding: 44rpx 28rpx 42rpx 28rpx;
border-radius: 40rpx 40rpx 0 0;
transform: translateY(-140rpx);
background-color: rgba(255, 255, 255, .3);
}
.menus-pays {
display: grid;
/* 每行显示3列每列宽度相等 */
grid-template-columns: repeat(3, 1fr);
/* 列间距 */
column-gap: 10px;
/* 行间距 */
row-gap: 32rpx;
/* 可以添加容器的内边距 */
}
.menus-tiaojian {
display: grid;
/* 每行显示3列每列宽度相等 */
grid-template-columns: repeat(4, 1fr);
/* 列间距 */
column-gap: 10px;
/* 行间距 */
row-gap: 10px;
/* 可以添加容器的内边距 */
}
.model-box {
padding: 32rpx 56rpx;
width: 702rpx;
}
.up-content {
color: #999;
font-size: 12px;
}
.vip-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 36rpx;
.vip-list-item {
border: 4rpx solid #D9D9D9;
border-radius: 40rpx;
overflow: hidden;
transition: all .3s ease-in-out;
background-color: #fff;
padding: 42rpx 34rpx;
&.active {
border: 4rpx solid #FF6300;
background-image: linear-gradient(180deg, #FFC29A -26.17%, #FFF 64.06%);
}
}
}
.buy-btn {
margin-top: 98rpx;
padding: 32rpx 32rpx;
color: #fff;
font-size: 16px;
font-weight: 700;
border-radius: 80rpx;
line-height: 1;
background: linear-gradient(98deg, #fe6d1100 40.64%, #FFD1B4 105.2%), linear-gradient(259deg, #FE6D11 50.14%, #FFD1B4 114.93%);
box-shadow: 0 14rpx 30.4rpx 0 #fe8b435e;
}
</style>

View File

@@ -2,9 +2,9 @@
<view>
<up-navbar bg-color="transparent" title="会员中心" @leftClick="back"></up-navbar>
<view class="top">
<view class="vip-box">
<view class="vip-box" style=" background-image: url(/user/static/Rectangle_25.png);">
<view class="icon">
<image src="/user/images/image_21.png" class="huangguan" mode=""></image>
<image src="/user/static/image_21.png" class="huangguan" mode=""></image>
</view>
<view class="tag">当前等级</view>
<view class="shop-name">店铺名称</view>
@@ -34,10 +34,10 @@
<up-icon name="question-circle" size="12" @click="modelShow"></up-icon>
</view>
</view>
<view class="">
<view class="u-m-t-32">
<view class="menus" :class="state.pay_types=='tiaojian'?'menus-tiaojian' :'menus-pays'">
<view class="item u-m-t-32" v-for="(item,index) in menus" :key="index">
<view class="u-flex u-flex-x-center u-m-t-4">
<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">
@@ -108,54 +108,54 @@
const pay_menus = [{
name: '赠送成长值',
desc: '赠送10000成长值',
icon: '/user/images/Frame_220.png',
icon: '/user/static/Frame_220.png',
},
{
name: '优惠券',
desc: '每月赠送2张优惠券',
icon: '/user/images/Frame_221.png'
icon: '/user/static/Frame_221.png'
},
{
name: '享会员价',
desc: '全店会员价',
icon: '/user/images/Frame_222.png'
icon: '/user/static/Frame_222.png'
},
{
name: '会员折扣',
desc: '全店折扣98折',
icon: '/user/images/Frame_223.png'
icon: '/user/static/Frame_223.png'
},
{
name: '消费送积分',
desc: '',
icon: '/user/images/Frame_224.png'
icon: '/user/static/Frame_224.png'
},
{
name: '周期福利',
desc: '',
icon: '/user/images/Frame_225.png'
icon: '/user/static/Frame_225.png'
}
]
const tiaojian_menus = [{
name: '享会员价',
desc: '全店会员价',
icon: '/user/images/Frame_222.png'
icon: '/user/static/Frame_222.png'
},
{
name: '会员折扣',
desc: '全店折扣98折',
icon: '/user/images/Frame_223.png'
icon: '/user/static/Frame_223.png'
},
{
name: '消费送积分',
desc: '',
icon: '/user/images/Frame_224.png'
icon: '/user/static/Frame_224.png'
},
{
name: '周期福利',
desc: '',
icon: '/user/images/Frame_225.png'
icon: '/user/static/Frame_225.png'
}
]
@@ -199,11 +199,11 @@
}
.top {
padding: 100rpx 30rpx 78rpx 30rpx;
padding: 208rpx 30rpx 78rpx 30rpx;
}
.vip-box {
background-image: url(/user/images/Rectangle_25.png);
background-size: cover;
position: relative;
border-radius: 12px;
@@ -310,7 +310,7 @@
/* 列间距 */
column-gap: 10px;
/* 行间距 */
row-gap: 10px;
row-gap: 32rpx;
/* 可以添加容器的内边距 */
}

View File

@@ -9,7 +9,7 @@ export default defineConfig({
hmr: true,
proxy: {
'/api': {
target: 'http://192.168.0.71',
target: 'http://192.168.1.42',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, ''),
secure: false