Merge branch 'ymf' of https://newgitea.sxczgkj.cn/czg_team/cashier_wx into gyq
1
common/api/market/config.js
Normal file
@@ -0,0 +1 @@
|
||||
export const prveUrl='/market'
|
||||
12
common/api/market/recharge.js
Normal 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
@@ -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
|
||||
})
|
||||
}
|
||||
@@ -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
|
||||
})
|
||||
}
|
||||
@@ -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({
|
||||
|
||||
@@ -85,4 +85,10 @@ page,
|
||||
}
|
||||
.no-wrap{
|
||||
white-space: nowrap;
|
||||
}
|
||||
.line-through{
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.u-flex-1{
|
||||
flex:1;
|
||||
}
|
||||
170
manifest.json
@@ -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"
|
||||
}
|
||||
19
pages.json
@@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
]
|
||||
|
||||
@@ -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;
|
||||
|
||||
168
pages/user/member/charge-detail/charge-detail.vue
Normal 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>
|
||||
@@ -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>
|
||||
@@ -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
BIN
static/icon/code.png
Normal file
|
After Width: | Height: | Size: 846 B |
BIN
static/vip/money.png
Normal file
|
After Width: | Height: | Size: 1.3 KiB |
BIN
static/vip/sel.png
Normal file
|
After Width: | Height: | Size: 1.1 KiB |
500
user/components/registermember.vue
Normal 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>
|
||||
|
Before Width: | Height: | Size: 4.7 KiB After Width: | Height: | Size: 4.7 KiB |
|
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 4.0 KiB |
|
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 3.9 KiB |
|
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 4.0 KiB |
|
Before Width: | Height: | Size: 5.3 KiB After Width: | Height: | Size: 5.3 KiB |
|
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.5 KiB |
|
Before Width: | Height: | Size: 45 KiB After Width: | Height: | Size: 45 KiB |
BIN
user/static/buy-vip/Frame_220.png
Normal file
|
After Width: | Height: | Size: 4.7 KiB |
BIN
user/static/buy-vip/Frame_221.png
Normal file
|
After Width: | Height: | Size: 4.0 KiB |
BIN
user/static/buy-vip/Frame_222.png
Normal file
|
After Width: | Height: | Size: 3.9 KiB |
BIN
user/static/buy-vip/Frame_223.png
Normal file
|
After Width: | Height: | Size: 4.0 KiB |
BIN
user/static/buy-vip/Frame_224.png
Normal file
|
After Width: | Height: | Size: 6.0 KiB |
BIN
user/static/buy-vip/Frame_225.png
Normal file
|
After Width: | Height: | Size: 4.0 KiB |
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
578
user/vip/buy-vip.vue
Normal 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>
|
||||
@@ -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;
|
||||
/* 可以添加容器的内边距 */
|
||||
}
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||