2021-11-15

api/set.js

@@ -62,6 +62,14 @@ export function getAddressCity(data,id) {
 		data
 	});
 }
+//逐级获取地址
+export function getRegion(data,id) {
+	return request({
+		url: '/api/region/' + id,
+		method: 'get',
+		data
+	});
+}
 export function getAddressDetail(data,id) {
 	return request({
 		url: '/api/address/detail/'+id,
@@ -69,3 +77,11 @@ export function getAddressDetail(data,id) {
 		data
 	});
 }
+//逐级获取地址
+export function getArea(data,id) {
+	return request({
+		url:'/api/region/' + id,
+		method:'get',
+		data
+	})
+}

api/user.js

@@ -155,14 +155,6 @@ export function getMyStore(data) {
 	})
 }
 
-//申请会员 店长
-export function enter(data) {
-	return request({
-		url:'/api/enter',
-		method:'post',
-		data
-	})
-}
 
 //编辑门店
 export function editStore(data) {
@@ -171,4 +163,21 @@ export function editStore(data) {
 		method:'post',
 		data
 	})
+}
+
+//开通会员
+export function becomeVip(data) {
+	return request({
+		url: '/api/level/recharge',
+		method: 'post',
+		data
+	});
+}
+//获取会员
+export function getVip(data) {
+	return request({
+		url: '/api/level/lst',
+		method: 'get',
+		data
+	});
 }

pages/store/apply.vue

@@ -1,488 +1,982 @@
 <template>
-	<view class="wrapper">
-		<template v-if="isStep == 1">
-			<view class="top-box" style="height: 135rpx;">
-				<image src="../../static/img/vip-bg.png" mode=""></image>
-			</view>
-			<view class="top">
-				<view class="top-tit">
-					鑫旺新零售VIP店长
+	<view class="conter">
+		<view class="top">
+			<!-- <view class="bg"><image src="../../static/img/open-vip.png" mode=""></image></view> -->
+			<view class="title">开通会员</view>
+			<view class="card">
+				<view class="card-top flex">
+					<view class="avtur"><image :src="userInfo.avatar || '/static/error/missing-face.png'" mode=""></image></view>
+					<view class="main">
+						<view class="name">{{ userInfo.nickname }}</view>
+						<view class="tip" v-if="userInfo.pay_valid_time == null">尚未开通会员</view>
+						<view class="tip" v-else>
+							<text v-if="type">离会员到期仅剩{{ day }}天</text>
+							<text else>会员已过期</text>
+						</view>
+					</view>
 				</view>
-				<view class="top-btm">
-					<!-- <text class="hx"></text><text>累计业绩达到12W可申请成为店长</text><text class="hx"></text> -->
+				<view class="bottom flex" style="z-index: 9; margin-top: 94rpx;">
+					<view class="font">
+						<view class="font-title"></view>
+						<view class="font-tip"></view>
+					</view>
 				</view>
 			</view>
-			
-			<view class="item">
-				<view class="item-top">特权一</view>
-				<view class="item-tit">
-					销售奖励
-					<view class="line"></view>
-				</view>
-				<view class="item-info">
-					<view class="info-y"></view>
-					<view class="info">推广更多会员享受更多销售奖励</view>
-				</view>
+		</view>
+		<view class="vip">
+			<view class="system-title">
+				<!-- <view class="img" style="margin-right: 45rpx;"><image class="img" src="../../static/img/vip-left.png"></image></view> -->
+				<view class="title">会员特权</view>
+				<!-- <view class="img" style="margin-left: 45rpx;"><image class="img" src="../../static/img/vip-right.png"></image></view> -->
 			</view>
-			<view class="item">
-				<view class="item-top">特权二</view>
-				<view class="item-tit">
-					区代业绩奖励
-					<view class="line"></view>
-				</view>
-				<view class="item-info">
-					<view class="info-y"></view>
-					<view class="info">推广更多店长将有资格成为区代，享受更多业绩奖励</view>
+			<view class="money-box flex">
+				<view class="money" v-for="(item, index) in payList" @click="changevip(item, index)" :class="{ current: index == choose }">
+					<view class="money-name">{{ item.explain }}</view>
+					<view class="now-money">
+						￥
+						<text>{{ item.money }}</text>
+					</view>
+					<view class="bf-money">￥{{ item.yuan }}</view>
+					<view class="money-tip" :class="{ moneyc: index == choose }">
+						<!-- <image src="../../static/img/good.png" mode=""></image> -->
+						立省{{ item.sq }}元
+					</view>
 				</view>
 			</view>
-			<view class="item">
-				<view class="item-top">特权三</view>
-				<view class="item-tit">
-					开实体店奖励
-					<view class="line"></view>
-				</view>
-				<view class="item-info">
-					<view class="info-y"></view>
-					<view class="info">享受伞下全部用户产生的业绩奖励</view>
-				</view>
+			<view class="city">
+				<picker mode="selector" :range="provincial" range-key="name" :value="myProvincial.id" @change="changeArea($event, 1)">
+					<view v-if="myProvincial.name != ''">{{ myProvincial.name }}</view>
+					<view v-else class="font-color-gray">请选择省</view>
+				</picker>
 			</view>
-			<view class="more">
-				<image src="../../static/icon/i-left.png" mode=""></image>
-				<view class="more-tit">
-					更多店长特权持续开放中，敬请期待
+			<view v-if="myProvincial.check">
+				<view class="city">
+					<picker mode="selector" :range="municipal" range-key="name" :value="myMunicipal.id" @change="changeArea($event, 2)">
+						<view v-if="myMunicipal.name != ''">{{ myMunicipal.name }}</view>
+						<view v-else class="font-color-gray">请选择市</view>
+					</picker>
 				</view>
-				<image src="../../static/icon/i-right.png" mode=""></image>
-			</view>
-			<view class="btn" @click="changeStep">立即申请成为店长</view>
-		</template>
-		<template v-if="isStep == 2">
-			<view class="tab-wrapper">
-				<view class="tab-item">
-					<view class="itemx">
-						<view class="item-tit">姓名：</view>
-						<input type="text" v-model="name" placeholder="请输入您的姓名"/>
-					</view>
-					<view class="itemx">
-						<view class="item-tit">推荐人编号：</view>
-						<input type="text" v-model="speed_id" placeholder="" disabled/>
+				<view v-if="myMunicipal.check">
+					<view class="city">
+						<picker mode="selector" :range="county" range-key="name" :value="myCounty.id" @change="changeArea($event, 3)">
+							<view v-if="myCounty.name != ''">{{ myCounty.name }}</view>
+							<view v-else class="font-color-gray">请选择区</view>
+						</picker>
 					</view>
-					<view class="itemx">
-						<view class="item-tit">联系方式：</view>
-						<input type="text" v-model="phone" placeholder="请输入您的手机号"/>
-					</view>
-					<view class="itemx">
-						<view class="item-tit">店铺名称：</view>
-						<input type="text" v-model="merchant_name" placeholder="请输入店铺名称"/>
+					<view v-if="myCounty.check && level >= 4">
+						<view class="city">
+							<picker mode="selector" :range="town" range-key="name" :value="myTown.id" @change="changeArea($event, 4)">
+								<view v-if="myTown.name != ''">{{ myTown.name }}</view>
+								<view v-else class="font-color-gray">请选择镇</view>
+							</picker>
+						</view>
+						<view v-if="myTown.check && level >= 5">
+							<view class="city">
+								<picker mode="selector" :range="village" range-key="name" :value="myVillage.id" @change="changeArea($event, 5)">
+									<view v-if="myVillage.name != ''">{{ myVillage.name }}</view>
+									<view v-else class="font-color-gray">请选择村</view>
+								</picker>
+							</view>
+						</view>
 					</view>
 				</view>
 			</view>
-			<view class="up-wrapper">
-				身份证正反面
-				<view class="imgs">
-					<view class="imgs-item">
-						<image :src="sfzz" mode="" v-if="sfzz" @click.stop="upImg('sfzz')"></image>
-						<image src="../../static/img/add.png" mode="" v-if="!sfzz" @click.stop="upImg('sfzz')"></image>
+		</view>
+		<view class="box-buttom">
+			<view class="price-left">
+				<text class="entrepreneurship">
+					开通前请阅读
+					<text>《会员服务协议》</text>
+				</text>
+			</view>
+			<view class="price-right" @click="submit">马上开通</view>
+		</view>
+		<uni-popup ref="popupPay" type="bottom">
+			<view class="popup-box">
+				<view class="popup-pay">
+					<view class="paybox-top flex">
+						<view class="type">选择支付方式</view>
+						<view class="image" @click="close"><image src="https://zhibo.liuniu946.com/img/x.png" mode="aspectFill"></image></view>
+					</view>
+					<!-- #ifndef APP-PLUS -->
+					<view class="paybox-main flex">
+						<view class="zftype flex">
+							<image src="https://zhibo.liuniu946.com/img/weixin.png" mode="aspectFill"></image>
+							<view class="zf">微信支付</view>
+						</view>
+						<label class="radio1" @click="changePayType(1)"><radio style="transform:scale(0.7)" value="" :checked="payType == 1" color="#FE4141"></radio></label>
 					</view>
-					<view class="imgs-item">
-						<image :src="sfzf" mode="" v-if="sfzf" @click.stop="upImg('sfzf')"></image>
-						<image src="../../static/img/add.png" mode="" v-if="!sfzf" @click.stop="upImg('sfzf')"></image>
+					<!-- #endif -->
+					<!-- #ifdef APP-PLUS -->
+					<view class="paybox-main flex">
+						<view class="zftype flex">
+							<view class="icon iconfont iconzhifubao"></view>
+							<view class="zf">支付宝支付</view>
+						</view>
+						<label class="radio1" @click="changePayType(3)"><radio style="transform:scale(0.7)" value="" :checked="payType == 3" color="#FE4141"></radio></label>
+					</view>
+					<!-- #endif -->
+					<view class="paybox-main flex">
+						<view class="zftype flex">
+							<image src="https://zhibo.liuniu946.com/img/yue.png" mode="aspectFill"></image>
+							<view class="zf">余额支付</view>
+						</view>
+						<label class="radio" @click="changePayType(2)">
+							<radio style="transform:scale(0.7)" class="rad" value="" :checked="payType == 2" color="#FE4141"></radio>
+						</label>
 					</view>
 				</view>
-			</view>
-			<view class="up-wrapper">
-				营业执照
-				<view class="imgs">
-					<view class="imgs-item">
-						<image :src="sfzz" mode="" v-if="yyzz" @click.stop="upImg('yyzz')"></image>
-						<image src="../../static/img/add.png" mode="" v-if="!yyzz" @click.stop="upImg('yyzz')"></image>
+				<view class="buttom flex">
+					<view class="heji">
+						合计：
+						<text>
+							￥
+							<text class="money">{{ money }}</text>
+						</text>
 					</view>
+					<view class="zhifu" @click="readyPay()">立即支付</view>
 				</view>
 			</view>
-			<view class="btn-tc">
-				
-			</view>
-			<view class="sub-btn" @click="sub">
-				提交申请
-			</view>
-		</template>
+		</uni-popup>
 	</view>
 </template>
 
 <script>
 import { mapState, mapMutations } from 'vuex';
-import { register, verify } from '@/api/login.js';
-import { upload ,enter} from '@/api/user.js';
+import { becomeVip, getVip } from '@/api/user.js';
+import { getRegion } from '@/api/set.js';
+import { getUserInfo } from '@/api/user.js';
+import { timeComputed } from '@/utils/rocessor.js';
+// #ifdef H5
+import weixinObj from '@/plugin/jweixin-module/index.js';
+// #endif
+
 export default {
+	computed: {
+		...mapState('user', ['userInfo', 'orderInfo', 'hasLogin']),
+		...mapState('address', ['provincial', 'municipal', 'county', 'town', 'village'])
+	},
+	onLoad(option) {
+		this.state = option.state;
+		this.getVip();
+		this.init(0, 1);
+		this.checkedAuto = +this.userInfo.red_packet == 0 ? false : true;
+		if (this.userInfo.pay_valid_time != null) {
+			let TimeObj = timeComputed(this.userInfo.pay_valid_time * 1000);
+			this.type = TimeObj.type == 0 ? true : false;
+			this.day = TimeObj.day;
+		}
+	},
 	data() {
 		return {
-			time: '', //保存倒计时对象
-			countDown: 0,//倒计时
-			isStep: 1,
+			timeEnd: true, //判断会员是否超时
+			state: '',
+			// #ifndef APP-PLUS
+			payType: 1,
+			payName: 'weixin',
+			// #endif
+			// #ifdef APP-PLUS
+			payType: 2,
+			payName: 'yue',
+			// #endif
 			name: '',
-			speed_id: '',
-			phone: '',
-			// code: '',
-			sfzz: '', //身份证正面
-			sfzf: '', //身份证反面
-			yyzz: '',//营业执照
-			merchant_name: '',//店铺名称
+			payList: [],
+			froms: '',
+			money: 0,
+			now_money: '', // 当前余额
+			payLoding: false, //判断是否支付中
+			choose: 0,
+			level_id: '',
+			myProvincial: {
+				id: 0,
+				name: '',
+				check: false //是否选择完
+			}, //省数据
+			myMunicipal: {
+				id: 0,
+				name: '',
+				check: false //是否选择完
+			}, //市数据
+			myCounty: {
+				id: 0,
+				name: '',
+				check: false //是否选择完
+			}, //区数据
+			myTown: {
+				id: 0,
+				name: '',
+				check: false //是否选择完
+			}, //镇数据
+			myVillage: {
+				id: 0,
+				name: ''
+			}, //村数据
+			level: 5
 		};
 	},
-	onLoad() {
-		let obj = this
-		obj.speed_id = uni.getStorageSync('spread') || '';
-		if(obj.speed_id == '') {
-			obj.speed_id = obj.userInfo.spread_uid || ''
-		}
-	},
-	computed: {
-		...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
-	},
-	watch:{
-		countDown(i) {
-			if (i == 0) {
-				clearInterval(this.time);
-			}
-		}
-	},
 	methods: {
-		changeStep() {
-			this.isStep = 2;
+		...mapMutations('user', ['setUserInfo', 'setOrderInfo']),
+		...mapMutations('address', ['setProvincial', 'setMunicipal', 'setCounty', 'setTown', 'setVillage']),
+		// 获取vip等级
+		getVip() {
+			getVip({}).then(({ data }) => {
+				data.forEach((sj, index) => {
+					console.log(sj, '123456');
+					if (sj.explain == '村代') {
+						sj.level = 5;
+					}
+					if (sj.explain == '镇代') {
+						sj.level = 4;
+					}
+					if (sj.explain == '区代') {
+						sj.level = 3;
+					}
+					sj.sq = (sj.money * 0.33).toFixed(0);
+					sj.yuan = (sj.sq * 1 + sj.money * 1).toFixed(2);
+				});
+				this.payList = data;
+				// 设置默认选中的对象
+				this.level_id = data[0].id;
+				this.money = data[0].money;
+				console.log(this.payList);
+			});
 		},
-		upImg(item) {
-			let obj = this;
-			upload({
-				filename: ''
-			}).then(res => {
-				console.log(res[0].url);
-				
-				obj[item] = res[0].url
-			}).catch( err => {
-				console.log(err)
-			})
+		submit() {
+			if (this.money == 0) {
+				uni.showModal({
+					title: '提示',
+					content: '请选择要开通的会员'
+				});
+			} else {
+				console.log('打开支付弹窗');
+				this.$refs.popupPay.open();
+			}
 		},
-		//发送验证码
-		verification() {
-			let obj = this;
-			if (this.phone == '') {
-				this.$api.msg('请输入电话号码');
-				return;
+		close() {
+			this.$refs.popupPay.close();
+		},
+		changePayType(type) {
+			this.payType = type;
+			console.log('this.payType', this.payType);
+			if (this.payType == 1) {
+				this.payName = 'weixin';
+				console.log('weixin', this.payName);
 			}
-			if (this.phone.length < 11) {
-				this.$api.msg('请输入正确的手机号');
-				return;
+			if (this.payType == 2) {
+				this.payName = 'yue';
+				console.log('yue', this.payName);
 			}
-			// 判断是否在倒计时
-			if (obj.countDown > 0) {
-				return false;
-			} else {
-				obj.countDown = 60;
-				obj.time = setInterval(() => {
-					obj.countDown--;
-				}, 1000);
-				//调用验证码接口
-				verify({
-					phone: obj.phone,
-					type: 'register'
-				})
-					.then(({ data }) => {})
-					.catch(err => {
-						console.log(err);
-					});
+			if (this.payType == 3) {
+				this.payName = 'ali';
+				console.log('ali', this.payName);
 			}
 		},
-		//提交
-		sub() {
-			let obj = this
-			if(obj.name == '') {
-				obj.$api.msg('请输入姓名')
-				return
+		readyPay() {
+			this.pay();
+		},
+		changevip(item, index) {
+			this.level_id = item.id;
+			this.level = item.level;
+			this.choose = index;
+			this.money = item.money;
+			if (item.level == 4) {
+				this.myVillage = {
+					id: 0,
+					name: ''
+				}; 
+			}
+			if (item.level == 3) {
+				this.myTown = {
+					id: 0,
+					name: ''
+				}; 
 			}
-			if(obj.phone == '') {
-				obj.$api.msg('请输入联系方式')
-				return
+		},
+		getUserInfoB() {
+			getUserInfo({})
+				.then(({ data }) => {
+					this.setUserInfo(data);
+					if (this.state == 1) {
+						uni.navigateTo({
+							url: '/pages/vip/success'
+						});
+					} else {
+						uni.navigateBack();
+					}
+				})
+				.catch(e => {
+					console.log(e);
+				});
+		},
+		pay() {
+			let obj = this;
+			console.log('点击');
+			try {
+				let obj = this;
+				if(obj.level == 3 && obj.myCounty.id ==""){
+					this.$api.msg("请选择要代理的区")
+					return;
+				}
+				if(obj.level == 4 && obj.myTown.id == ""){
+					this.$api.msg("请选择要代理的镇")
+					return;
+				}
+				if(obj.level == 5 && obj.myVillage.id == ""){
+					this.$api.msg("请选择要代理的村")
+					return;
+				}
+				obj.payLoding = true;
+				// #ifdef H5
+				// 获取当前是否为微信浏览器
+				obj.froms = uni.getStorageSync('weichatBrowser') || '';
+				// #endif
+				uni.showLoading({
+					title: '支付中',
+					mask: true
+				});
+				let data = {
+					pay_type: this.payName,
+					level_id: obj.level_id,
+					// #ifdef H5
+					from: obj.froms ? 'weixin' : 'H5', //来源
+					// #endif
+					// #ifdef MP-WEIXIN
+					from: 'routine', //来源
+					// #endif
+					// #ifdef APP-PLUS
+					from: 'app' //来源
+					// #endif
+				};
+				if(obj.level == 3){
+					data.city_id = obj.myCounty.id
+				}
+				if(obj.level == 4){
+					data.city_id = obj.myTown.id
+				}
+				if(obj.level == 5){
+					data.city_id = obj.myVillage.id
+				}
+				console.log(data, '传值');
+				becomeVip(data).then(({ data }) => {
+					console.log('fufei', data);
+					uni.hideLoading();
+					if (obj.payName == 'ali') {
+						const url = data.data;
+						console.log(url, 'url');
+						uni.requestPayment({
+							provider: 'alipay',
+							orderInfo: url,
+							success: res => {
+								console.log(res);
+								uni.showToast({
+									title: '充值成功',
+									duration: 2000
+								});
+							},
+							fail: e => {
+								console.log(e);
+							},
+							complete: () => {}
+						});
+						obj.payLoding = false;
+					}
+					if (data.status == 'PAY_ERROR') {
+						console.log(data);
+					}
+					if (data.status == 'SUCCESS') {
+						obj.$refs.popupPay.close();
+						obj.getUserInfoB();
+					}
+					console.log('-----', data);
+					let da = data.result.jsConfig;
+					if (obj.payName == 'weixin' || obj.payName == 'routine') {
+						// let da = data.result.jsConfig;
+						console.log('--da--', da);
+						let data = {
+							// #ifdef H5
+							timestamp: da.timestamp,
+							// #endif
+							// #ifdef MP
+							timeStamp: da.timestamp,
+							// #endif
+							nonceStr: da.nonceStr,
+							package: da.package,
+							signType: da.signType,
+							paySign: da.paySign,
+							success: function(res) {
+								console.log(res);
+								obj.getUserInfoB();
+							},
+							fail: e => {
+								console.log(e);
+							}
+						};
+						console.log('--data--', data);
+						// #ifdef MP
+						wx.requestPayment(data);
+						// #endif
+						// #ifdef H5
+						if (obj.payName == 'weixin') {
+							weixinObj.chooseWXPay(data);
+						}
+						// #endif
+					}
+
+					uni.hideLoading();
+					// #ifdef H5
+					if (data.status == 'PAY_ERROR') {
+						console.log(data);
+					}
+					if (data.status == 'SUCCESS') {
+						obj.$refs.popupPay.close();
+						obj.getUserInfoB();
+					}
+					// #endif
+				});
+			} catch (e) {
+				console.log('fufiecw', e);
+				//TODO handle the exception
 			}
-			if (this.phone.length < 11) {
-				this.$api.msg('请输入正确的手机号');
-				return;
+		},
+		init(id, type) {
+			getRegion({}, id).then(({ data }) => {
+				console.log(type);
+				if (type == 1) {
+					this.setProvincial(data);
+				}
+				if (type == 2) {
+					this.setMunicipal(data);
+				}
+				if (type == 3) {
+					if (this.level == 3) {
+						data = data.filter(e => {
+							console.log(e);
+							return e.agent_uid == null;
+						});
+					}
+					console.log(data);
+					this.setCounty(data);
+				}
+				if (type == 4) {
+					console.log('zheng');
+					if (this.level == 4) {
+						data = data.filter(e => {
+							console.log(e);
+							return e.agent_uid == null;
+						});
+					}
+					console.log(data);
+					this.setTown(data);
+				}
+				if (type == 5) {
+					if (this.level == 5) {
+						data = data.filter(e => {
+							console.log(e);
+							return e.agent_uid == null;
+						});
+					}
+					console.log(data);
+					this.setVillage(data);
+				}
+			});
+		},
+		changeArea(e, type) {
+			console.log(type, '123456');
+			if (type == 1) {
+				let index = e.detail.value;
+				this.myProvincial.id = this.provincial[index].city_id;
+				this.myProvincial.name = this.provincial[index].name;
+				this.myProvincial.check = true;
+				this.myMunicipal = {
+					id: 0,
+					name: '',
+					check: false //是否选择完
+				};
+				this.init(this.myProvincial.id, 2);
 			}
-			if(obj.sfzz == '') {
-				obj.$api.msg('请上传身份证证件照')
-				return
+			if (type == 2) {
+				let index = e.detail.value;
+				this.myMunicipal.id = this.municipal[index].city_id;
+				this.myMunicipal.name = this.municipal[index].name;
+				this.myMunicipal.check = true;
+				this.myCounty = {
+					id: 0,
+					name: '',
+					check: false //是否选择完
+				};
+				this.init(this.myMunicipal.id, 3);
 			}
-			if(obj.sfzf == '') {
-				obj.$api.msg('请上传身份证证件照')
-				return
+			if (type == 3) {
+				let index = e.detail.value;
+				this.myCounty.id = this.county[index].city_id;
+				this.myCounty.name = this.county[index].name;
+				this.myCounty.check = true;
+				this.myTown = {
+					id: 0,
+					name: '',
+					check: false //是否选择完
+				};
+				this.init(this.myCounty.id, 4);
 			}
-			if(obj.yyzz == '') {
-				obj.$api.msg('请上传营业执照')
-				return
+			if (type == 4) {
+				let index = e.detail.value;
+				this.myTown.id = this.town[index].city_id;
+				this.myTown.name = this.town[index].name;
+				this.myTown.check = true;
+				this.myVillage = {
+					id: 0,
+					name: '',
+					check: false //是否选择完
+				};
+				this.init(this.myTown.id, 5);
 			}
-			if(obj.merchant_name == '') {
-				obj.$api.msg('请输入店铺名称')
-				return
+			if (type == 5) {
+				let index = e.detail.value;
+				this.myVillage.id = this.village[index].city_id;
+				this.myVillage.name = this.village[index].name;
 			}
-			let card_id = obj.sfzz + ',' + obj.sfzf
-			uni.showLoading({
-				title: '提交中...',
-				mask: true
-			})
-			enter({
-				type: 1,
-				merchant_name: obj.merchant_name,
-				link_user: obj.name,
-				link_tel: obj.phone,
-				spread_uid: obj.speed_id,
-				charter: obj.yyzz,
-				card_id: card_id
-			}).then( res => {
-				uni.hideLoading()
-				uni.showToast({
-					title: '提交成功',
-					duration: 2000
-				});
-				setTimeout(()=> {
-					uni.navigateBack({})
-				},2000)
-				
-				console.log(res)
-			}).catch( err => {
-				uni.hideLoading()
-				console.log(err)
-				
-			})
 		}
 	}
 };
 </script>
 
-<style lang="scss" scoped>
-.wrapper {
-	height: 100%;
+<style lang="scss">
+.outBottom {
+	width: 190rpx;
+	height: 69rpx;
+	background: #3a3a3b;
+	border-radius: 35rpx;
+	color: #ffffff;
+	line-height: 69rpx;
+	text-align: center;
+	font-size: 27rpx;
+	font-family: PingFang SC;
+	font-weight: 500;
 }
 .top {
-	position: relative;
-	z-index: 2;
-	margin: 0 auto 49rpx;
-	width: 674rpx;
-	height: 231rpx;
-	background: linear-gradient(-23deg, #ffe7be, #fed591);
-	border-radius: 10rpx;
-	.top-tit {
-		padding-top: 80rpx;
-		text-align: center;
-		font-size: 49rpx;
-		font-family: Source Han Sans CN;
-		font-weight: 500;
-		color: #6A4714;
-	}
-	.top-btm {
-		margin-top: 35rpx;
-		font-size: 19rpx;
-		font-family: Source Han Sans CN;
-		font-weight: 400;
-		color: #6A4714;
-		text-align: center;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		text {
-			display: inline-block;
-			padding: 0 4rpx;
-		}
-		.hx {
-			width: 66rpx;
-			height: 1rpx;
-			background: #81504A;
+	.bg {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		width: 100%;
+		height: 626rpx;
+		image {
+			width: 100%;
+			height: 100%;
 		}
 	}
-}
-.item {
-	margin: 44rpx auto;
-	width: 674rpx;
-	// height: 176rpx;
-	box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
-	border-radius: 10rpx;
-	padding-bottom: 40rpx;
-	.item-top {
-		width: 85rpx;
-		line-height: 36rpx;
-		background-color: #fed591;
-		border-radius: 10rpx 18rpx 18rpx 0;
+	.title {
+		position: relative;
+		z-index: 10;
+		width: 100%;
+		padding-top: 20rpx;
 		text-align: center;
-		font-size: 20rpx;
-		font-family: Source Han Sans CN;
-		font-weight: 400;
-		color: #975f4a;
+		font-size: 34rpx;
+		font-family: PingFang SC;
+		font-weight: bold;
+		color: #333333;
 	}
-	.item-tit {
-		display: inline-block;
-		padding: 0 10rpx;
-		font-size: 26rpx;
-		font-family: Source Han Sans CN;
-		font-weight: 500;
-		color: #202020;
-		margin-left: 68rpx;
-		margin-top: 20rpx;
-		.line {
-			// width: 197rpx;
-			margin-top: -10rpx;
-			height: 15rpx;
-			background: #FFF0C5;
-		}
-	}
-	.item-info {
-		display: flex;
-		align-items: flex-start;
-		padding-left: 68rpx;
-		padding-top: 15rpx;
-		// align-items: center;
-		font-size: 21rpx;
-		font-family: Source Han Sans CN;
-		font-weight: 400;
-		color: #6F6F6F;
-		line-height: 40rpx;
-		.info-y {
-			width: 24rpx;
-			height: 24rpx;
-			background: #343238;
-			border-radius: 50%;
-			margin-right: 14rpx;
-			margin-top: 8rpx;
-			flex-shrink: 0;
-		}
-		.info {
-			padding-right: 20rpx;
+	.card {
+		position: relative;
+		margin: 20rpx auto 0;
+		z-index: 10;
+		width: 655rpx;
+		// height: 324rpx;
+		background: linear-gradient(225deg, #ffeed2 0%, #fed591 100%);
+		border-radius: 24rpx;
+		padding: 28rpx 25rpx 30rpx 36rpx;
+		.card-top {
+			justify-content: flex-start;
+			.avtur {
+				width: 90rpx;
+				height: 90rpx;
+				border-radius: 50%;
+				margin-right: 10rpx;
+				image {
+					width: 100%;
+					height: 100%;
+					border-radius: 50%;
+				}
+			}
+			.name {
+				font-size: 30rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #333333;
+			}
+			.tip {
+				font-size: 20rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #333333;
+				opacity: 0.52;
+			}
 		}
-	}
-}
-.btn {
-	margin: 20rpx auto;
-	width: 606rpx;
-	height: 80rpx;
-	background: linear-gradient(-23deg, #ffe7be, #fed591);
-	border-radius: 40rpx;
-	font-size: 35rpx;
-	font-family: Source Han Sans CN;
-	font-weight: 400;
-	color: #704e1c;
-	line-height: 80rpx;
-	text-align: center;
-}
-.tab-wrapper {
-	padding: 20rpx 30rpx;
-	background-color: #f2f3f5;
-	.itemx {
-		margin: 0 auto;
-		width: 100%;
-		background-color: #fff !important;
-		height: 100rpx;
-		display: flex;
-		// width: 690px;
-		border: 1px #f4f4f4 solid;
-		.code {
-			width: 150rpx;
-			flex-shrink: 0;
-			text-align: center;
-			font-size: 28rpx;
+		.btn {
+			position: absolute;
+			top: 40rpx;
+			right: 24rpx;
+			width: 190rpx;
+			height: 69rpx;
+			background: #3a3a3b;
+			border-radius: 35rpx;
+			font-size: 30rpx;
 			font-family: PingFang SC;
 			font-weight: 500;
-			color: #FF4C4C;
-			line-height: 100rpx;
+			color: #ffffff;
+			line-height: 69rpx;
+			text-align: center;
 		}
-		.item-tit {
-			height: 100rpx;
-			line-height: 100rpx;
-			padding-left: 30rpx;
-			width: 250rpx;
+	}
+	.bottom {
+		margin-top: 40rpx;
+		.font-title {
 			font-size: 30rpx;
 			font-family: PingFang SC;
-			font-weight: 500;
-			color: #666666;
-			flex-shrink: 0;
+			font-weight: bold;
+			color: #333333;
 		}
-		input {
-			width: 440rpx;
-			padding-right: 20rpx;
-			height: 100rpx;
-			line-height: 100rpx;
-			font-size: 30rpx;
+		.font-tip {
+			font-size: 22rpx;
 			font-family: PingFang SC;
 			font-weight: 500;
-			color: #333333;
+			color: #343434;
+		}
+	}
+	.turn {
+		width: 108rpx;
+		height: 51rpx;
+		background: #ffffff;
+		border-radius: 26rpx;
+		padding: 10rpx;
+		font-size: 30rpx;
+		font-family: PingFang SC;
+		font-weight: bold;
+		color: #333333;
+		display: flex;
+		align-items: center;
+		.yuan {
+			display: inline-block;
+			width: 35rpx;
+			height: 35rpx;
+			background: linear-gradient(112deg, #ffe5bb, #fed591);
+			border-radius: 50%;
+			margin-right: 12rpx;
 		}
 	}
 }
-.up-wrapper {
-	margin: auto;
-	padding: 38rpx 21rpx;
-	width: 690rpx;
-	// height: 250rpx;
+.vip {
+	margin-top: 20rpx;
 	background: #ffffff;
-	border-radius: 10rpx;
-	font-size: 28rpx;
-	font-family: PingFang SC;
-	font-weight: 500;
-	color: #333333;
-	.imgs {
-		padding: 27rpx 70rpx;
+	padding-bottom: 54rpx;
+	.system-title {
 		display: flex;
-		justify-content: space-around;
-		.imgs-item {
-			height: 160rpx;
-			width: 160rpx;
+		justify-content: center;
+		align-items: center;
+		padding-top: 40rpx;
+		.title {
+			font-size: 32rpx;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #1d2023;
+		}
+
+		.img {
+			width: 170rpx;
+			height: 2rpx;
+			display: block;
+		}
+	}
+	.item-box {
+		margin-top: 40rpx;
+		justify-content: center;
+		align-items: center;
+		.item {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
 			image {
-				width: 100%;
-				height: 100%;
+				width: 100rpx;
+				height: 100rpx;
+			}
+			.item-title {
+				margin-top: 14rpx;
+				font-size: 24rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #333333;
+			}
+			.item-tip {
+				margin-top: 10rpx;
+				font-size: 20rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #999999;
+			}
+		}
+	}
+	.money-box {
+		margin-top: 40rpx;
+		justify-content: center;
+		align-items: center;
+		padding: 0 47rpx 160rpx 25rpx;
+		.current {
+			border: 1rpx solid #fed591 !important;
+			background: #fff8ec !important;
+		}
+		.money {
+			margin-left: 22rpx;
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			width: 204rpx;
+			height: 296rpx;
+			background: #f5f5f5;
+			border: 1rpx solid #ffffff;
+			border-radius: 20rpx;
+			position: relative;
+			.tj {
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 90rpx;
+				height: 44rpx;
+				text-align: center;
+				line-height: 44rpx;
+				font-size: 25rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #ffffff;
+				.tj-bg {
+					width: 90rpx;
+					height: 44rpx;
+				}
+				text {
+					display: inline-block;
+					position: relative;
+					top: -56rpx;
+				}
+			}
+			.money-name {
+				margin-top: 58rpx;
+				font-size: 33rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #644931;
+			}
+			.now-money {
+				font-size: 30rpx;
+				font-family: FZCuHeiSongS-B-GB;
+				font-weight: 400;
+				color: #f7cf9c;
+				text {
+					font-size: 50rpx;
+				}
+			}
+			.bf-money {
+				font-size: 33rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				text-decoration: line-through;
+				color: #9a5a12;
+				opacity: 0.35;
+			}
+			.moneyc {
+				background: #f7cf9c !important;
+				color: #ffffff !important;
+			}
+			.money-tip {
+				margin-top: 10rpx;
+				width: 158rpx;
+				height: 45rpx;
+				background: #f5f5f5;
+				border: 1px solid #f7cf9c;
+				border-radius: 23rpx;
+				padding: 5rpx 10rpx;
+				font-size: 25rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #f7cf9c;
+				image {
+					position: relative;
+					top: 2rpx;
+					width: 23rpx;
+					height: 23rpx;
+				}
 			}
 		}
 	}
 }
-.sub-btn {
-	// position: fixed;
-	// bottom: 0;
-	margin: 60rpx auto;
-	width: 600rpx;
+.box-buttom {
+	width: 750rpx;
 	height: 98rpx;
-	border-radius: 49rpx;
-	background: linear-gradient(180deg, #FD4646, #FF3535);
-	font-size: 36rpx;
-	font-family: PingFang SC;
-	font-weight: 500;
-	color: #FFFFFF;
-	line-height: 98rpx;
-	text-align: center;
+
+	// position: absolute;
+	// buttom:0;
+	position: fixed;
+	bottom: 0;
+	right: 0;
+	// position: absolute;
+	// buttom:100rpx;
+	display: flex;
+	align-items: center;
+	background: #34332f;
+	.price-left {
+		display: flex;
+		.entrepreneurship {
+			font-size: 24rpx;
+			font-weight: 500;
+			color: #bbbbbb;
+			margin-left: 16rpx;
+			text {
+				font-size: 30rpx;
+				color: #ffffff;
+			}
+		}
+	}
+	.price-right {
+		position: absolute;
+		bottom: 0;
+		right: 0;
+		// position: fixed;
+		// buttom: 0;
+		// right: 0;
+		width: 280rpx;
+		height: 108rpx;
+		background: #fed591;
+		font-size: 36rpx;
+		font-weight: bold;
+		color: #000000;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+	.price-right1 {
+		position: absolute;
+		bottom: 0;
+		right: 0;
+		// position: fixed;
+		// buttom: 0;
+		// right: 0;
+		width: 280rpx;
+		height: 108rpx;
+		background: #b5b5b5;
+		font-size: 36rpx;
+		font-weight: bold;
+		color: #ffffff;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
 }
-.btn-tc {
-	height: 98rpx;
+.popup-box {
+	width: 100%;
+	height: 450rpx;
+	background: #ffffff;
 }
-.top-box {
+.popup-pay {
 	position: relative;
-	z-index: 1;
-	image {
-		width: 750rpx;
-		height: 236rpx;
-		position: absolute;
-		top: 0;
-		
+	justify-content: space-between;
+	padding: 0rpx 25rpx 32rpx 25rpx;
+	.paybox-top {
+		padding-top: 38rpx;
+		width: 100%;
+		.type {
+			font-size: 28rpx;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #333333;
+		}
+		.image {
+			padding-right: 24rpx;
+			padding-bottom: 10rpx;
+			image {
+				width: 16rpx;
+				height: 16rpx;
+			}
+		}
+	}
+	.paybox-main {
+		width: 100%;
+		margin-top: 54rpx;
+		.zftype {
+			padding-left: 5rpx;
+			image {
+				width: 38rpx;
+				height: 40rpx;
+			}
+			.zf {
+				padding-left: 18rpx;
+				font-size: 28rpx;
+				font-family: PingFang SC;
+				font-weight: 400;
+				color: #3f454b;
+			}
+		}
 	}
 }
-.more {
-	display: flex;
+.buttom {
+	width: 100%;
+	height: 113rpx;
+	padding-top: 20rpx;
 	align-items: center;
-	justify-content: center;
-	font-size: 21rpx;
-	font-family: Source Han Sans CN;
-	font-weight: 400;
-	color: #6F6F6F;
-	height: 40rpx;
-	line-height: 40rpx;
-	image {
-		height: 15rpx;
-		width: 40rpx;
+	.heji {
+		height: 100%;
+		width: 50%;
+		padding-left: 23rpx;
+		padding-top: 20rpx;
+		font-size: 28rpx;
+		font-family: PingFang SC;
+		font-weight: 400;
+		color: #3f454b;
+		text {
+			font-size: 24rpx;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #ff0000;
+			.money {
+				font-size: 36rpx;
+			}
+		}
 	}
-	view {
-		padding: 0 8rpx;
+	.zhifu {
+		width: 50%;
+		height: 92rpx;
+		background: linear-gradient(180deg, #fd4646, #ff3535);
+		text-align: center;
+		line-height: 92rpx;
+		font-size: 32rpx;
+		font-family: PingFang SC;
+		font-weight: bold;
+		color: #ffffff;
+	}
+}
+.ling-box {
+	position: relative;
+	z-index: 10;
+	width: 654rpx;
+	height: auto;
+	background: #fff8ec;
+	border: 1px solid #fed591;
+	border-radius: 24rpx;
+	margin: 20rpx auto 0;
+	padding: 20rpx 24rpx 15rpx 42rpx;
+	.ling-title {
+		font-size: 30rpx;
+		font-family: PingFang SC;
+		font-weight: bold;
+		color: #644931;
+	}
+	.ling-tip {
+		font-size: 22rpx;
+		font-family: PingFang SC;
+		font-weight: 500;
+		color: #644931;
+		line-height: 24px;
+		opacity: 0.67;
 	}
 }
 </style>

store/model/address.js

@@ -1,6 +1,11 @@
 let state = {
 	area:[],//省市区数据
-	city:[]//村镇数据
+	city:[],//村镇数据
+	provincial:[],//省数据
+	municipal:[],//市数据
+	county:[],//区数据
+	town:[],//镇数据
+	village:[],//村数据
 }
 
 let mutations = {
@@ -11,9 +16,27 @@ let mutations = {
 	// 设置村镇
 	setCity(state,data){
 		state.city = data;
+	},
+	// 设置省
+	setProvincial(state,data){
+		state.provincial = data;
+	},
+	// 设置市
+	setMunicipal(state,data){
+		state.municipal = data;
+	},
+	// 设置区
+	setCounty(state,data){
+		state.county = data;
+	},
+	// 设置镇
+	setTown(state,data){
+		state.town = data;
+	},
+	// 设置村
+	setVillage(state,data){
+		state.village = data;
 	}
-	
-	
 }
 let getters = {}