Merge branch 'ymf' of https://newgitea.sxczgkj.cn/czg_team/cashier_wx into gyq

common/api/market/config.js

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

common/api/market/recharge.js

@@ -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}
+	})
+}

common/api/market/vip.js

@@ -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
+	})
+}

common/api/order/index.js

@@ -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
+	})
 }

common/api/request.js

@@ -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({

common/css/common.scss

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

manifest.json

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

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"
+				}
 			}
 				
 			]

pages/user/member/billDetails.vue

@@ -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 class="bottom">
-			<view @click="clickEvent(1)" :class="[formData.active==1?'fonts':'']">
+			<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="[formData.active==1?'xian':'']" style="left: 36rpx;"> </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>
-				<view class=" listrigth2">
+				<view @click="clickEvent(2)" :class="[formData.active==2?'fonts':'']">
-							<view>{{item.createTime}}
+					积分明细
+					<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;
+		height: 500rpx;
-		background-image: url('https://czg-qr-order.oss-cn-beijing.aliyuncs.com/menber/billingDetails.png');
+		background-size: cover;
-		background-size: 750rpx 320rpx;
 		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;

pages/user/member/charge-detail/charge-detail.vue

@@ -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>

pages/user/member/czzx.vue

@@ -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() {
+	import * as vipApi from '@/common/api/market/recharge.js'
-	uni.navigateBack();
+	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 {
+	.color1 {
-	width: 100%;
+		color: #5F2E0F;
-	height: 600upx;
-	padding: calc(var(--status-bar-height) + 180upx) 28upx 28upx;
-	position: relative;
-	.bg {
-		width: 100%;
-		height: 100%;
-		position: absolute;
-		top: 0;
-		left: 0;
 	}
-	.select-shop {
+
-		display: flex;
+	.color2 {
-		align-items: center;
+		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;
+			position: relative;
-			.t {
+
-				color: #333;
+			.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;
+			justify-content: space-between;
-			.t {
+			position: relative;
-				color: #5e3110;
+			padding-top: 40upx;
-				&.i {
+
-					position: relative;
+			.left {
-					top: 10upx;
+				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>

pages/user/user.vue

@@ -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 my_assets" @click="Myassets"> -->
-				<view class="my_item_title">我的资产</view>
+			<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;"
+							<image style="width: 50rpx;height: 37rpx;" src="/static/icon/vip.png" mode="aspectFill">
-								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) {
+			if(!userInfo.isVip){
-				uni.pro.navigateTo('user/member/memberdetails', {
+				uni.navigateTo({
-					shopId: uni.cache.get('shopId')
+					url: '/user/vip/buy-vip?shopId='+ShopId.value
 				})
-			} else {
+			}else{
-				uni.pro.navigateTo('user/member/paycode', {
+				uni.navigateTo({
-					shopId: uni.cache.get('shopId'),
+					url: '/user/vip/vip?shopId='+ShopId.value
-					shopInfo: JSON.stringify(uni.cache.get('orderVIP').shopInfo)
 				})
 			}
+			
+			// 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;
+				width: 40rpx;
-				height: 60rpx;
+				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;
 			}

user/components/registermember.vue

@@ -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>

user/vip/buy-vip.vue

@@ -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>

user/vip/vip.vue

@@ -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="item " v-for="(item,index) in menus" :key="index">
-						<view class="u-flex u-flex-x-center u-m-t-4">
+						<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;
 		/* 可以添加容器的内边距 */
 	}
 

vite.config.js

@@ -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