From ad216e1a3e9f7f48cf3d893af2b3db96772bec33 Mon Sep 17 00:00:00 2001
From: wangjw <wangjw@dbc-healthcare.com>
Date: Mon, 3 Aug 2020 13:45:49 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BF=9E=E7=BB=AD=E5=8C=85=E6=9C=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/TopBar/TopBar.vue                |   6 +-
 components/uni-drawer/uni-drawer.vue        | 170 +++++
 manifest.json                               |   4 +-
 package.json                                |   2 +-
 pages.json                                  |  36 ++
 pages/certification/certification.vue       |  52 +-
 pages/monthly/monthly.vue                   | 680 ++++++++++++++++++++
 pages/monthlyContract/monthlyContract.vue   | 242 +++++++
 pages/monthlyDeposit/monthlyDeposit.vue     | 508 +++++++++++++++
 pages/monthlyIntroduce/monthlyIntroduce.vue | 105 +++
 pages/monthlyJoin/monthlyJoin.vue           | 490 ++++++++++++++
 pages/monthlyPlan/monthlyPlan.vue           | 360 +++++++++++
 pages/wxpay/wxpay.vue                       |  17 +-
 pages/yuepay/yuepay.vue                     |  18 +-
 static/iconfont.css                         |  12 +-
 15 files changed, 2684 insertions(+), 18 deletions(-)
 create mode 100644 components/uni-drawer/uni-drawer.vue
 create mode 100644 pages/monthly/monthly.vue
 create mode 100644 pages/monthlyContract/monthlyContract.vue
 create mode 100644 pages/monthlyDeposit/monthlyDeposit.vue
 create mode 100644 pages/monthlyIntroduce/monthlyIntroduce.vue
 create mode 100644 pages/monthlyJoin/monthlyJoin.vue
 create mode 100644 pages/monthlyPlan/monthlyPlan.vue

diff --git a/components/TopBar/TopBar.vue b/components/TopBar/TopBar.vue
index 84198af..0878d93 100755
--- a/components/TopBar/TopBar.vue
+++ b/components/TopBar/TopBar.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="topbar_view" :style="{'color': titleColor, 'background-color': bgColor}">
+	<view class="topbar_view" :style="[{'color': titleColor, 'background-color': bgColor}, bold ? {'font-weight':900} : 'initial']">
 		<text class="eosfont left_icon" @click="back()">&#xe622;</text>
 		{{this.title}}
 	</view>
@@ -19,6 +19,10 @@
 			bgColor: {
 				type: String,
 				default: '#fff'
+			},
+			bold: {
+				type: Boolean,
+				default: false
 			}
 		},
 		methods: {
diff --git a/components/uni-drawer/uni-drawer.vue b/components/uni-drawer/uni-drawer.vue
new file mode 100644
index 0000000..c79f55e
--- /dev/null
+++ b/components/uni-drawer/uni-drawer.vue
@@ -0,0 +1,170 @@
+<template>
+	<view v-if="visibleSync" :class="{ 'uni-drawer--visible': showDrawer }" class="uni-drawer" @touchmove.stop.prevent="clear">
+		<view class="uni-drawer__mask" :class="{ 'uni-drawer__mask--visible': showDrawer && mask }" @tap="close('mask')" />
+		<view class="uni-drawer__content" :class="{'uni-drawer--right': rightMode,'uni-drawer--left': !rightMode, 'uni-drawer__content--visible': showDrawer}" :style="{width:drawerWidth+'px'}">
+			<slot />
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * Drawer 鎶藉眽
+	 * @description 鎶藉眽渚ф粦鑿滃崟
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=26
+	 * @property {Boolean} mask = [true | false] 鏄惁鏄剧ず閬僵
+	 * @property {Boolean} maskClick = [true | false] 鐐瑰嚮閬僵鏄惁鍏抽棴
+	 * @property {Boolean} mode = [left | right] Drawer 婊戝嚭浣嶇疆
+	 * 	@value left 浠庡乏渚ф粦鍑�
+	 * 	@value right 浠庡彸渚т晶婊戝嚭
+	 * @property {Number} width 鎶藉眽鐨勫搴� 锛屼粎 vue 椤甸潰鐢熸晥
+	 * @event {Function} close 缁勪欢鍏抽棴鏃惰Е鍙戜簨浠�
+	 */
+	export default {
+		name: 'UniDrawer',
+		props: {
+			/**
+			 * 鏄剧ず妯″紡锛堝乏銆佸彸锛夛紝鍙湪鍒濆鍖栫敓鏁�
+			 */
+			mode: {
+				type: String,
+				default: ''
+			},
+			/**
+			 * 钂欏眰鏄剧ず鐘舵€�
+			 */
+			mask: {
+				type: Boolean,
+				default: true
+			},
+			/**
+			 * 閬僵鏄惁鍙偣鍑诲叧闂�
+			 */
+			maskClick:{
+				type: Boolean,
+				default: true
+			},
+			/**
+			 * 鎶藉眽瀹藉害
+			 */
+			width: {
+				type: Number,
+				default: 220
+			}
+		},
+		data() {
+			return {
+				visibleSync: false,
+				showDrawer: false,
+				rightMode: false,
+				watchTimer: null,
+				drawerWidth: 220
+			}
+		},
+		created() {
+			// #ifndef APP-NVUE
+			this.drawerWidth = this.width
+			// #endif
+			this.rightMode = this.mode === 'right'
+		},
+		methods: {
+			clear(){},
+			close(type) {
+				// fixed by mehaotian 鎶藉眽灏氭湭瀹屽叏鍏抽棴鎴栭伄缃╃姝㈢偣鍑绘椂涓嶈Е鍙戜互涓嬮€昏緫
+				if((type === 'mask' && !this.maskClick) || !this.visibleSync) return
+				this._change('showDrawer', 'visibleSync', false)
+			},
+			open() {
+				// fixed by mehaotian 澶勭悊閲嶅鐐瑰嚮鎵撳紑鐨勪簨浠�
+				if(this.visibleSync) return
+				this._change('visibleSync', 'showDrawer', true)
+			},
+			_change(param1, param2, status) {
+				this[param1] = status
+				if (this.watchTimer) {
+					clearTimeout(this.watchTimer)
+				}
+				this.watchTimer = setTimeout(() => {
+					this[param2] = status
+					this.$emit('change',status)
+				}, status ? 50 : 300)
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	// 鎶藉眽瀹藉害
+	$drawer-width: 220px;
+
+	.uni-drawer {
+		/* #ifndef APP-NVUE */
+		display: block;
+		/* #endif */
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		overflow: hidden;
+		z-index: 999;
+	}
+
+	.uni-drawer__content {
+		/* #ifndef APP-NVUE */
+		display: block;
+		/* #endif */
+		position: absolute;
+		top: 0;
+		width: $drawer-width;
+		bottom: 0;
+		background-color: $uni-bg-color;
+		transition: transform 0.3s ease;
+	}
+
+	.uni-drawer--left {
+		left: 0;
+		/* #ifdef APP-NVUE */
+		transform: translateX(-$drawer-width);
+		/* #endif */
+		/* #ifndef APP-NVUE */
+		transform: translateX(-100%);
+		/* #endif */
+	}
+
+	.uni-drawer--right {
+		right: 0;
+		/* #ifdef APP-NVUE */
+		transform: translateX($drawer-width);
+		/* #endif */
+		/* #ifndef APP-NVUE */
+		transform: translateX(100%);
+		/* #endif */
+	}
+
+	.uni-drawer__content--visible {
+		transform: translateX(0px);
+	}
+
+
+	.uni-drawer__mask {
+		/* #ifndef APP-NVUE */
+		display: block;
+		/* #endif */
+		opacity: 0;
+		position: absolute;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		right: 0;
+		background-color: $uni-bg-color-mask;
+		transition: opacity 0.3s;
+	}
+
+	.uni-drawer__mask--visible {
+		/* #ifndef APP-NVUE */
+		display: block;
+		/* #endif */
+		opacity: 1;
+	}
+</style>
diff --git a/manifest.json b/manifest.json
index af3818a..6817b38 100755
--- a/manifest.json
+++ b/manifest.json
@@ -2,7 +2,7 @@
   "name": "shop_mobile_uni",
   "appid": "__UNI__F904656",
   "description": "",
-  "versionName": "1.0.18",
+  "versionName": "1.0.19",
   "versionCode": "100",
   "transformPx": false,
   "app-plus": {
@@ -51,7 +51,7 @@
       "mode": "history",
       "base": "/uni"
     },
-    "publicPath": "https://dbc-static.oss-cn-beijing.aliyuncs.com/dbc-shop/uni/mirror/1.0.18/",
+    "publicPath": "https://dbc-static.oss-cn-beijing.aliyuncs.com/dbc-shop/uni/test/1.0.19/",
     "optimization": {
       "treeShaking": {
         "enable": true
diff --git a/package.json b/package.json
index a58f236..6b70e7c 100755
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "shop_mobile_uni",
-  "version": "1.0.18",
+  "version": "1.0.19",
   "description": "璋涘疂澶氬鍟嗗煄",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
diff --git a/pages.json b/pages.json
index 9cdcfb0..050676c 100755
--- a/pages.json
+++ b/pages.json
@@ -173,6 +173,42 @@
 			"style": {
 				"navigationBarTitleText": "绛惧埌璁板綍-璋涘疂澶氬鍟嗗煄"
 			}
+		},
+		{
+			"path": "pages/monthly/monthly",
+			"style": {
+				"navigationBarTitleText": "杩炵画鍖呮湀璁″垝-璋涘疂澶氬鍟嗗煄"
+			}
+		},
+		{
+			"path": "pages/monthlyIntroduce/monthlyIntroduce",
+			"style": {
+				"navigationBarTitleText": "鍖呮湀璇存槑-璋涘疂澶氬鍟嗗煄"
+			}
+		},
+		{
+			"path": "pages/monthlyPlan/monthlyPlan",
+			"style": {
+				"navigationBarTitleText": "鎴戠殑鍖呭勾璁″垝-璋涘疂澶氬鍟嗗煄"
+			}
+		},
+		{
+			"path": "pages/monthlyContract/monthlyContract",
+			"style": {
+				"navigationBarTitleText": "鎴戠殑鍚堝悓-璋涘疂澶氬鍟嗗煄"
+			}
+		},
+		{
+			"path": "pages/monthlyJoin/monthlyJoin",
+			"style": {
+				"navigationBarTitleText": "鍔犲叆鍖呭勾璁″垝-璋涘疂澶氬鍟嗗煄"
+			}
+		},
+		{
+			"path": "pages/monthlyDeposit/monthlyDeposit",
+			"style": {
+				"navigationBarTitleText": "鍔犲叆鍖呭勾璁″垝-璋涘疂澶氬鍟嗗煄"
+			}
 		}
 	],
 	"globalStyle": {
diff --git a/pages/certification/certification.vue b/pages/certification/certification.vue
index 8f0291d..cfe7fcc 100755
--- a/pages/certification/certification.vue
+++ b/pages/certification/certification.vue
@@ -79,9 +79,15 @@
 					
 				},
 				title: '绀句細缁熶竴淇＄敤浠ｇ爜',
-				submitFlag: true
+				submitFlag: true,
+				month_rule_id: '', // 浠庤繛缁寘鏈堣烦杞繃鏉�
+				is_deposit: '' // 浠庤繛缁寘鏈堣烦杞繃鏉�
 			}
 		},
+		onLoad(options) {
+			this.month_rule_id = options.month_rule_id;
+			this.is_deposit = options.is_deposit;
+		},
 		methods: {
 			changeEnterpriseType(type) {
 				this.params.enterprise_type = type;
@@ -177,6 +183,11 @@
 					success: (res) => {
 						this.submitFlag = true;
 						if(res.data.code === 0) {
+							if(this.month_rule_id) {
+								// 浠庤繛缁寘鏈堣烦杞繃鏉�
+								this.monthlySign();
+								return
+							}
 							uni.navigateTo({
 								url: '/pages/apply/choosetype'
 							});
@@ -189,6 +200,45 @@
 						}
 					}
 				})
+			},
+			//杩炵画鍖呮湀绛剧讲鍚堝悓
+			monthlySign() {
+				uni.request({
+					url: '/uni/api/month_signcontract/AddContract',
+					method: 'POST',
+					dataType: 'json',
+					data: {
+						is_deposit: this.is_deposit,
+						month_rule_id: this.month_rule_id
+					},
+					success:(res) => {
+						if(res.data.code === 0) {
+							// 鏄惁浜ゆ娂閲�
+							uni.showToast({
+								title: '鍚堝悓宸茬缃�',
+								icon: 'none'
+							})
+							if(this.is_deposit === '1') {
+								// 浜ゆ娂閲�
+								setTimeout(() => {
+									uni.hideLoading();
+									this.$jump(`/pages/monthlyDeposit/monthlyDeposit?month_apply_id=${res.data.data.month_apply_id}`,2);
+								}, 2000);
+							} else {
+								// 涓嶄氦鎶奸噾
+								setTimeout(() => {
+									uni.hideLoading();
+									this.$jump(`/pages/monthlyPlan/monthlyPlan?month_apply_id=${res.data.data.month_apply_id}`,2);
+								}, 2000);
+							}
+						} else {
+							uni.showToast({
+								title: res.data.message,
+								icon: 'none'
+							})
+						}
+					}
+				})
 			}
 		},
 		components: {
diff --git a/pages/monthly/monthly.vue b/pages/monthly/monthly.vue
new file mode 100644
index 0000000..d4118e7
--- /dev/null
+++ b/pages/monthly/monthly.vue
@@ -0,0 +1,680 @@
+<template>
+	<view class="main">
+		<scroll-view
+			scroll-y
+			:show-scrollbar="false"
+			style="height: 100vh;"
+			@scrolltolower="getData(current)"
+		>
+			<view class="top_card">
+				<view class="fixed">
+					<view class="top_bar">
+						<view class="left">
+							<text class="eosfont left_icon">&#xe743;</text>l
+							<text class="close_title">鍏抽棴</text>
+						</view>
+						<view class="middle" :style="[has ? {'margin-left':'68rpx'} : null]">
+							<view class="title1">鍖呭勾璁″垝</view>
+							<view class="title2">鑷敱鎼厤 7鎶橀挏鎯�</view>
+						</view>
+						<view class="right_btn" v-if="!month_apply_id" @click="joinMonthly">鍔犲叆璁″垝</view>
+						<view class="join_plan" v-else @click="$jump(`/pages/monthlyPlan/monthlyPlan?month_apply_id=${month_apply_id}`,2)">鎴戠殑鍖呭勾璁″垝</view>
+					</view>
+					<view class="search_bar">
+						<text class="eosfont">&#xe73c;</text>
+						<input type="text" class="search_input">
+					</view>
+				</view>
+				<view class="monthly_title">鎯充綘鎵€鎯陈风伒娲婚噰璐�</view>
+				<view class="monthly_sub">
+					<text>瀹犲尰鐪侀挶鏇寸伒娲�</text>
+					<text>鏂板瀷鑷€夐噰璐柟寮�</text>
+				</view>
+				<view class="join_title">璋涘疂澶氬閭€璇锋偍鍔犲叆鍖呭勾璁″垝锝�</view>
+				<view class="card_detail">
+					<view class="detail_flex">
+						<text class="flex_title">鑷敱鎼厤 7鎶橀挏鎯�</text>
+						<view class="flex_right" @click="$jump('/pages/monthlyIntroduce/monthlyIntroduce',2)">
+							<text>鍖呭勾璁″垝璇存槑</text>
+							<text class="eosfont" style="font-size: 20rpx;">&#xe608;</text>
+						</view>
+					</view>
+					<view class="detail_flex">
+						<view class="pre_item">
+							<image class="icon_img" src="https://dbc-static.oss-cn-beijing.aliyuncs.com/static/month1%402x.png" />
+							<view class="pre_desc">
+								<view>鍙備笌鍖呭勾璁″垝</view>
+								<view>鍟嗗搧浣庤嚦7鎶�</view>
+							</view>
+						</view>
+						<view class="pre_item">
+							<image class="icon_img" src="https://dbc-static.oss-cn-beijing.aliyuncs.com/static/month2%402x.png" />
+							<view class="pre_desc">
+								<view>闅忔椂閲囪喘</view>
+								<view>涓嶉檺娆℃暟</view>
+							</view>
+						</view>
+						<view class="pre_item">
+							<image class="icon_img" src="https://dbc-static.oss-cn-beijing.aliyuncs.com/static/month3%402x.png" />
+							<view class="pre_desc">
+								<view>姝ｅ搧淇濊瘉</view>
+								<view>7鏃ュ彲閫€璐�</view>
+							</view>
+						</view>
+						<view class="pre_item">
+							<image class="icon_img" src="https://dbc-static.oss-cn-beijing.aliyuncs.com/static/month4%402x.png" />
+							<view class="pre_desc">
+								<view>閲嶅閲囪喘</view>
+								<view>涓嶉檺鏁伴噺</view>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+			<view class="join_btn" v-if="!month_apply_id" @click="joinMonthly">
+				<view class="title1">鍔犲叆鍖呭勾璁″垝</view>
+				<view class="title2">
+					鍙€�6涓湀/12涓湀璁″垝
+				</view>
+			</view>
+			<view class="check_btn" v-else @click="$jump(`/pages/monthlyPlan/monthlyPlan?month_apply_id=${month_apply_id}`,2)">鏌ョ湅鎴戠殑鍖呭勾璁″垝</view>
+			<view class="recommend_bar">
+				<text class="left_text">绮惧搧鎺ㄨ崘</text>
+				<view class="right_text" @click="openDrawer">绛涢€�<text class="eosfont">&#xe632;</text></view>
+			</view>
+			<view class="recommend_box">
+				<view class="recommend_item" v-for="(item, index) in goodsList" :key="index" @click="$jumpGoodDetail(item.goods_id)">
+					<text class="label">鍖呭勾璁″垝</text>
+					<image class="recommend_img" :src="item.default_image || $noGoodsImg" />
+					<view class="recommend_goods_name">{{item.goods_name}}</view>
+					<view class="recommend_goods_sub">{{item.goods_sub_name}}</view>
+					<view class="recommend_flex">
+						<view class="left" v-if="login_flg">
+							<text>楼 </text>
+							<text>{{item.discount === '0.00' ? (Number(item.price)*Number(min_discount)).toFixed(2) : (Number(item.price)*Number(item.discount)).toFixed(2)}}</text>
+						</view>
+						<view v-else class="no_price">鐧诲綍鏄剧ず浠锋牸</view>
+						<text class="right">宸插敭{{item.total_sales}}</text>
+					</view>
+				</view>
+			</view>
+			<uni-load-more :status="loadingType"></uni-load-more>
+		</scroll-view>
+		<view class="screen_btn" v-if="screen" @click="openDrawer">
+			<text>绛涢€夊晢鍝�</text>
+			<text class="eosfont">&#xe632;</text>
+		</view>
+		<uni-drawer ref="drawer" mode="right" :width="280">
+			<view class="screen_content">
+				<view class="screen_title">绛涢€�</view>
+				<view class="screen_item">
+					<view class="screen_name">鍝佺墝</view>
+					<view class="screen_detail">
+						<view class="detail_item">鍝佺墝鍚嶇О</view>
+						<view class="detail_item act">鍝佺墝鍚嶇О</view>
+					</view>
+				</view>
+				<view class="bottom_box">
+					<view class="reset_btn">閲嶅埗</view>
+					<view class="confirm_btn">纭畾</view>
+				</view>
+			</view>
+		</uni-drawer>
+	</view>
+</template>
+
+<script>
+	import uniDrawer from "@/components/uni-drawer/uni-drawer.vue";
+	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
+	import { login } from '@/common/util.js';
+	export default {
+		data() {
+			return {
+				screen: false,
+				has: true,
+				goodsList: [],
+				month_apply_id: '',
+				ruleList: [],
+				min_discount: 1,
+				current: 1,
+				loadingType: 'more',
+				requestFlag: true,
+				login_flg: 0
+			}
+		},
+		onLoad() {
+			this.getData(1);
+			// #ifdef H5
+			//榛樿璇锋眰寰俊鍒嗕韩
+			if (this.$wechat && this.$wechat.isWechat()) {
+				this.$wechat.share({titie: this.$getNavigationBarTitle()});
+			}
+			this.postData();
+			// #endif
+		},
+		methods: {
+			openDrawer() {
+				this.$refs.drawer.open();
+			},
+			getData(current) {
+				if(!this.requestFlag) return
+				this.loadingType = 'loading';
+				uni.request({
+					url: '/uni/api/month_index/MonthIndex',
+					method: 'POST',
+					data: {
+						current: current,
+						page_size: 10
+					},
+					dataType: 'json',
+					success: (res) => {
+						if(res.data.code === 0) {
+							this.goodsList = this.goodsList.concat(res.data.data.goodsList);
+							this.month_apply_id = res.data.data.month_apply_id;
+							this.ruleList = res.data.data.ruleList;
+							this.min_discount = res.data.data.min_discount;
+							this.data = res.data.data;
+							this.login_flg = res.data.login_flg;
+							const totalPage = Math.ceil(res.data.page.total/res.data.page.page_size);
+							if(current < totalPage) {
+								this.current += 1;
+								this.loadingType = 'more';
+							} else {
+								this.requestFlag = false;
+								this.loadingType = 'nomore'
+							}
+						}
+					}
+				});
+			},
+			// 鍚戝皬绋嬪簭鍙戦€佹暟鎹�
+			postData(){
+				jWeixin.miniProgram.getEnv(function (res) {
+					//鑾峰彇褰撳墠鐜
+					if(res.miniprogram){ 
+						// this.$wechat.postData('璋涘疂澶氬鍟嗗煄-棣栭〉');
+						const postData = {
+							link: window.location.href,
+							title: '璋涘疂澶氬鍟嗗煄-杩炵画鍖呮湀'
+						}
+						jWeixin.miniProgram.postMessage({ data: JSON.stringify(postData) });
+					}
+				});
+			},
+			// 鍔犲叆璁″垝
+			joinMonthly() {
+				if(!this.login_flg) {
+					login();
+					return
+				}
+				this.$jump('/pages/monthlyJoin/monthlyJoin',2)
+			}
+		},
+		onPageScroll(e) {
+			let top  = e.scrollTop;
+			if(top >= 370 && !this.screen) {
+				this.screen = true;
+			} else if (top < 460 && this.screen) {
+				this.screen = false;
+			}
+		},
+		components: {
+			uniDrawer,
+			uniLoadMore
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.main {
+		background:linear-gradient(180deg,rgba(255,255,255,1) 0%,rgba(248,249,251,1) 100%);
+		box-shadow:0px 4rpx 8rpx 0px rgba(0,0,0,0.05);
+		.top_card {
+			height: 410rpx;
+			background:linear-gradient(135deg,rgba(255,232,199,1) 0%,rgba(214,163,93,1) 100%);
+			border-radius: 0 0 24rpx 24rpx;
+			padding: 168rpx 20rpx 0;
+			.fixed  {
+				position: fixed;
+				left: 0;
+				top: 0;
+				background: linear-gradient(135deg,rgba(255,232,199,1) 0%,rgba(214,163,93,1) 100%);
+				z-index: 10;
+				width: 100%;
+				box-sizing: border-box;
+				padding: 0 24rpx;
+				height: 136rpx;
+				border-radius: 0 0 24rpx 24rpx;
+			}
+			.top_bar {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				margin-top: 8rpx;
+				.left {
+					display: flex;
+					align-items: center;
+					color: #7c7c7c;
+					.left_icon {
+						font-weight: 900;
+						margin-right: 10rpx;
+						color: #000;
+						font-size: 40rpx;
+					}
+					.close_title {
+						font-size: 28rpx;
+						color: #212121;
+						margin-left: 10rpx;
+					}
+				}
+				.middle {
+					text-align: center;
+					.title1 {
+						font-size: 32rpx;
+						color: #000;
+						font-family:PingFangSC-Medium,PingFang SC;
+						font-weight:500;
+						height: 44rpx;
+						line-height: 44rpx;
+					}
+					.title2 {
+						font-size: 20rpx;
+						color: #575757;
+						height: 28rpx;
+						line-height: 28rpx;
+						letter-spacing:2px;
+					}
+				}
+				.right_btn {
+					width: 140rpx;
+					height: 56rpx;
+					line-height: 56rpx;
+					border-radius: 16rpx;
+					text-align: center;
+					background-color: #FAE0BB;
+					text-align: center;
+					color: #323233;
+					font-size: 26rpx;
+					font-family:PingFangSC-Medium,PingFang SC;
+					font-weight:500;
+				}
+				.join_plan {
+					width: 192rpx;
+					height: 56rpx;
+					line-height: 56rpx;
+					text-align: center;
+					background:linear-gradient(141deg,rgba(74,86,103,1) 0%,rgba(45,50,57,1) 100%);
+					border-radius: 28rpx 0 0 28rpx;
+					font-size: 26rpx;
+					color: #FCE3C1;
+					position: relative;
+					right: -24rpx;
+				}
+			}
+			.search_bar {
+				width: 100%;
+				height: 64rpx;
+				border-radius: 32rpx;
+				background-color: #fff;
+				margin-top: 24rpx;
+				display: flex;
+				align-items: center;
+				padding: 0 20rpx;
+				box-sizing: border-box;
+				box-shadow:0px 20rpx 40rpx 0px rgba(0,0,0,0.1);
+				text {
+					font-size: 32rpx;
+				}
+				.search_input {
+					font-size: 28rpx;
+					padding-left: 10rpx;
+					width: 100%;
+				}
+			}
+			.monthly_title {
+				height:78rpx;
+				font-size:64rpx;
+				font-family:FZZCHJW--GB1-0,FZZCHJW--GB1;
+				font-weight:normal;
+				color:rgba(110,67,0,1);
+				line-height:78rpx;
+				letter-spacing:2rpx;
+				background:linear-gradient(180deg, rgba(110,67,0,0.5) 0%, rgba(110,67,0,1) 100%);
+				-webkit-background-clip:text;
+				-webkit-text-fill-color:transparent;
+				margin: 32rpx auto 0;
+				text-align: center;
+				font-weight: 900;
+			}
+			.monthly_sub {
+				height:42rpx;
+				font-size:30rpx;
+				font-family:PingFangSC-Medium,PingFang SC;
+				font-weight:500;
+				color:rgba(145,99,32,1);
+				line-height:42rpx;
+				letter-spacing:2rpx;
+				text-align: center;
+				margin-top: 6rpx;
+				text:nth-of-type(1) {
+					margin-right: 36rpx;
+				}
+			}
+			.join_title {
+				color: #C18221;
+				font-size: 24rpx;
+				height: 34rpx;
+				line-height: 34rpx;
+				text-align: center;
+				margin-top: 12rpx;
+			}
+			.card_detail {
+				height: 328rpx;
+				background-color: #fff;
+				box-shadow:0px 4rpx 60rpx 0px rgba(0,0,0,0.1);
+				border-radius:20rpx;
+				margin-top: 20rpx;
+				padding:  32rpx 32rpx 36rpx;
+				box-sizing: border-box;
+				.detail_flex {
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					.flex_title {
+						color: #000;
+						font-size: 32rpx;
+						height: 44rpx;
+						line-height: 44rpx;
+						font-family:PingFangSC-Medium,PingFang SC;
+						font-weight:500;
+					}
+					.flex_right {
+						font-size: 26rpx;
+						color: #7c7c7c;
+						height: 36rpx;
+						line-height: 36rpx;
+					}
+					.pre_item {
+						width: 160rpx;
+						text-align: center;
+						margin-top: 40rpx;
+						.icon_img {
+							width: 100rpx;
+							height: 100rpx;
+						}
+						.pre_desc {
+							color: #744902;
+							font-size: 22rpx;
+							line-height: 32rpx;
+						}
+					}
+				}
+			}
+		}
+		.join_btn {
+			width: 702rpx;
+			height: 88rpx;
+			border-radius: 20rpx;
+			background:linear-gradient(314deg,rgba(238,190,114,1) 0%,rgba(255,224,176,1) 100%);
+			box-shadow:0px 4rpx 40rpx 0px rgba(242,199,130,0.5);
+			margin: 164rpx auto 34rpx;
+			text-align: center;
+			color: #744902;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			.title1 {
+				font-size: 32rpx;
+				height: 44rpx;
+				line-height: 44rpx;
+				font-family:PingFangSC-Medium,PingFang SC;
+				font-weight:500;
+				letter-spacing:1px;
+			}
+			.title2 {
+				font-size: 20rpx;
+				height: 28rpx;
+				line-height: 28rpx;
+				font-size: 20rpx;
+			}
+		}
+		.check_btn {
+			width: 702rpx;
+			height: 88rpx;
+			line-height: 88rpx;
+			margin: 164rpx auto 34rpx;
+			background:linear-gradient(141deg,rgba(74,86,103,1) 0%,rgba(45,50,57,1) 100%);
+			border-radius: 20rpx;
+			text-align: center;
+			color: #FDDCA8;
+			font-size: 32rpx;
+			letter-spacing: 2rpx;
+			font-family:PingFangSC-Medium,PingFang SC;
+			font-weight:500;
+		}
+		.recommend_bar {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			padding: 0 24rpx;
+			.left_text {
+				color: #000;
+				font-size: 36rpx;
+				height: 50rpx;
+				line-height: 50rpx;
+				font-family:PingFangSC-Medium,PingFang SC;
+				font-weight:500;
+			}
+			.right_text {
+				width: 126rpx;
+				height: 56rpx;
+				line-height: 56rpx;
+				border-radius: 28rpx;
+				background:rgba(255,255,255,1);
+				box-shadow:0px 4rpx 60rpx 0px rgba(0,0,0,0.05);
+				text-align: center;
+				color: #000;
+				font-size: 28rpx;
+				.eosfont {
+					color: #151515;
+					margin-left: 6rpx;
+					font-size: 24rpx;
+					opacity: 0.3;
+				}
+			}
+		}
+		.recommend_box {
+			width: 702rpx;
+			margin: 32rpx auto 0;
+			display: flex;
+			justify-content: space-between;
+			flex-wrap: wrap;
+			.recommend_item {
+				width: 340rpx;
+				box-shadow:0px 4rpx 60rpx 0px rgba(0,0,0,0.06);
+				border-radius: 16rpx;
+				background-color: #fff;
+				overflow: hidden;
+				margin-bottom: 20rpx;
+				position: relative;
+				.label {
+					width: 100rpx;
+					height: 40rpx;
+					text-align: center;
+					line-height: 40rpx;
+					background:linear-gradient(141deg,rgba(32,34,36,1) 0%,rgba(90,74,53,1) 100%);
+					box-shadow:0px 4rpx 60rpx 0px rgba(0,0,0,0.06);
+					border-radius:16rpx 0px 16rpx 0px;
+					color: #F2D8A4;
+					font-size: 20rpx;
+					font-family:PingFangSC-Medium,PingFang SC;
+					font-weight:500;
+					position: absolute;
+					top: 20rpx;
+					left: 20rpx;
+					z-index: 9;
+				}
+				.recommend_img {
+					width: 340rpx;
+					height: 340rpx;
+					display: block;
+				}
+				.recommend_goods_name {
+					color: #212121;
+					font-size: 26rpx;
+					text-shadow: 0px 4rpx 60rpx rgba(0,0,0,0.06);
+					line-height: 36rpx;
+					width: 300rpx;
+					margin: 20rpx auto 14rpx;
+					display: -webkit-box;
+					-webkit-line-clamp: 2;
+					-webkit-box-orient: vertical;
+					overflow: hidden;
+				}
+				.recommend_goods_sub {
+					color: #979797;
+					font-size: 24rpx;
+					height: 34rpx;
+					line-height: 34rpx;
+					width: 300rpx;
+					margin: 0 auto 38rpx;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+				}
+				.recommend_flex {
+					width: 300rpx;
+					margin: 0 auto 18rpx;
+					display: flex;
+					justify-content: space-between;
+					align-items: baseline;
+					.no_price {
+						font-size: 24rpx;
+					}
+					.left {
+						color: #F54903;
+						font-family:PingFangSC-Medium,PingFang SC;
+						font-weight:500;
+						text-shadow:0px 4px 60px rgba(0,0,0,0.06);
+						height: 44rpx;
+						line-height: 44rpx;
+						text:nth-of-type(1) {
+							font-size: 24rpx;
+							margin-right: 6rpx;
+						}
+						text:nth-of-type(2) {
+							font-size: 32rpx;
+						}
+					}
+					.right {
+						font-size: 22rpx;
+						height: 32rpx;
+						line-height: 32rpx;
+						text-shadow:0px 4px 60px rgba(0,0,0,0.06);
+						color: #AEAEAE;
+						position: relative;
+						top: -2rpx;
+					}
+				}
+			}
+		}
+		.screen_btn {
+			width: 200rpx;
+			height: 72rpx;
+			text-align: center;
+			line-height: 72rpx;
+			box-shadow:0px 4rpx 60rpx 0px rgba(247,208,147,0.7);
+			background-color: #F7D093;
+			border-radius: 36rpx;
+			font-size: 28rpx;
+			color: #000;
+			font-family:PingFangSC-Medium,PingFang SC;
+			font-weight:500;
+			position: fixed;
+			bottom: 42rpx;
+			left: 50%;
+			margin-left: -100rpx;
+			.eosfont {
+				font-size: 24rpx;
+				font-weight:900;
+			}
+		}
+		.screen_content::-webkit-scrollbar {
+			display: none;
+		}
+		.screen_content {
+			padding: 24rpx;
+			height: 100%;
+			box-sizing: border-box;
+			overflow-y: scroll;
+			.screen_title {
+				font-size: 36rpx;
+				height: 50rpx;
+				line-height: 50rpx;
+				font-family:PingFangSC-Medium,PingFang SC;
+				font-weight:500;
+				margin-bottom: 80rpx;
+			}
+			.screen_item {
+				margin-bottom: 60rpx;
+				.screen_name {
+					font-size: 26rpx;
+					height: 36rpx;
+					line-height: 36rpx;
+				}
+				.screen_detail {
+					overflow: hidden;
+					display: flex;
+					flex-wrap: wrap;
+					.detail_item {
+						height: 60rpx;
+						line-height: 60rpx;
+						padding: 0 22rpx;
+						border-radius: 8rpx;
+						background-color: #F8F9FB;
+						color: #333333;
+						font-size: 26rpx;
+						margin: 24rpx 24rpx 0 0;
+					}
+					.act {
+						background-color: #FFF8E9;
+						color: #BF9B43;
+						font-family:PingFangSC-Medium,PingFang SC;
+						font-weight:500;
+					}
+				}
+			}
+			.screen_item:last-child {
+				margin-bottom: 0;
+			}
+			.bottom_box {
+				position: fixed;
+				bottom: 24rpx;
+				width: 492rpx;
+				left: 24rpx;
+				display: flex;
+				.reset_btn {
+					width: 160rpx;
+					height: 80rpx;
+					text-align: center;
+					line-height: 80rpx;
+					border-radius: 16rpx;
+					background-color: #FFF8E9;
+					font-size: 26rpx;
+					color: #BF9B43;
+				}
+				.confirm_btn {
+					width: 312rpx;
+					height: 80rpx;
+					line-height: 80rpx;
+					text-align: center;
+					background-color: #35363E;
+					border-radius: 16rpx;
+					font-size: 26rpx;
+					color: #FCE3C0;
+					margin-left: 20rpx;
+				}
+			}
+		}
+	}
+</style>
diff --git a/pages/monthlyContract/monthlyContract.vue b/pages/monthlyContract/monthlyContract.vue
new file mode 100644
index 0000000..15f7e1a
--- /dev/null
+++ b/pages/monthlyContract/monthlyContract.vue
@@ -0,0 +1,242 @@
+<template>
+	<view class="main">
+		<TopBar title="鎴戠殑鍚堝悓" />
+		<view class="contract_bar">
+			<text class="left">褰撳墠鍚堝悓</text>
+			<text class="right_btn" @click="cancelContract(data[0]['month_apply_id'])" v-if="data[0]['apply_status'] === '1' || data[0]['apply_status'] === '2'">閫€鍑哄寘骞磋鍒�</text>
+		</view>
+		<view class="now_contract">
+			<view class="contract_flex">
+				<view class="flex_left">
+					<view class="con_title">鍚堝悓鏃堕暱</view>
+					<view class="con_detail">{{data[0].contract_period}}涓湀</view>
+				</view>
+				 <view class="flex_right">
+					 <view class="con_title">绛剧讲鏃堕棿</view>
+					 <view class="con_detail">{{data[0].sign_time.substr(0, 10)}}</view>
+				 </view>
+			</view>
+			<view class="contract_flex">
+				<view class="flex_left">
+					<view class="con_title">浜彈鎶樻墸</view>
+					<view class="con_detail">{{Number(data[0].discount)*10}}鎶�</view>
+				</view>
+				 <view class="flex_right">
+					 <view class="con_title">閲囪喘閲�</view>
+					 <view class="con_detail">鈮{data[0].min_quantity}}鍏�</view>
+				 </view>
+			</view>
+			<view class="contract_flex">
+				<view class="flex_left">
+					<view class="con_title">鎶奸噾</view>
+					<view class="con_detail spec_color" v-if="data[0]['is_deposit'] === '1'">楼{{Number(data[0].deposit/100)*Number(data[0].min_quantity)}}</view>
+					<view class="con_detail" v-else>鏃�</view>
+				</view>
+				 <view class="flex_right">
+					 <view class="con_title">鐘舵€�</view>
+					 <view class="con_detail spec_color">{{data[0].apply_status_name}}</view>
+				 </view>
+			</view>
+			<view class="check_btn">鏌ョ湅鍚堝悓</view>
+		</view>
+		<view class="contract_bar" v-if="data.length>1">
+			<text class="left">鍏朵粬鍚堝悓</text>
+		</view>
+		<view style="padding: 0;" v-if="data.length>1">
+			<view class="now_contract packup" v-for="(item, index) in data" :key="index" v-if="index !== 0" :style="[rotate && (rotateKey === index) ? {'height':'400rpx'} : null]">
+				<view class="contract_flex">
+					<view class="flex_left">
+						<view class="con_title">鍚堝悓鏃堕暱</view>
+						<view class="con_detail">{{item.contract_period}}涓湀</view>
+					</view>
+					 <view class="flex_right">
+						 <view class="con_title">绛剧讲鏃堕棿</view>
+						 <view class="con_detail">{{item.sign_time.substr(0, 10)}}</view>
+					 </view>
+				</view>
+				<view class="contract_flex">
+					<view class="flex_left">
+						<view class="con_title">浜彈鎶樻墸</view>
+						<view class="con_detail">{{Number(item.discount)*10}}鎶�</view>
+					</view>
+					 <view class="flex_right">
+						 <view class="con_title">閲囪喘閲�</view>
+						 <view class="con_detail">鈮{item.min_quantity}}鍏�</view>
+					 </view>
+				</view>
+				<view class="contract_flex">
+					<view class="flex_left">
+						<view class="con_title">鎶奸噾</view>
+						<view class="con_detail spec_color" v-if="item.is_deposit === '1'">楼{{Number(item.deposit/100)*Number(item.min_quantity)}}</view>
+						<view class="con_detail" v-else>鏃�</view>
+					</view>
+					 <view class="flex_right">
+						 <view class="con_title">鐘舵€�</view>
+						 <view class="con_detail spec_color">{{item.apply_status_name}}</view>
+					 </view>
+				</view>
+				<text class="eosfont" :class="{rotate: (index === rotateKey) && rotate}" @click="pack(index)">&#xe729;</text>
+				<view class="check_btn">鏌ョ湅鍚堝悓</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import TopBar from '@/components/TopBar/TopBar.vue';
+	export default {
+		data() {
+			return {
+				data: [{
+					contract_period: '',
+					sign_time: '',
+					deposit: '',
+					discount: '',
+					min_quantity: '',
+					apply_status_name: ''
+				}],
+				rotate: false,
+				rotateKey: -1
+			}
+		},
+		onLoad() {
+			uni.request({
+				url: '/uni/api/month/GetMonthApplyList',
+				method: 'GET',
+				dataType: 'json',
+				success: (res) => {
+					if(res.data.code === 0) {
+						this.data = res.data.data;
+					}
+				}
+			});
+		},
+		methods: {
+			cancelContract(id) {
+				uni.showModal({
+					title: '鎻愮ず',
+					content: '纭鍙栨秷璇ュ悎鍚屽悧锛�',
+					success:(data) => {
+						if(data.confirm) {
+							uni.request({
+								url: '/uni/api/month_signcontract/CancelContract',
+								method: 'POST',
+								dataType: 'json',
+								data: {
+									month_apply_id: id
+								},
+								success: (res) => {
+									uni.showToast({
+										title: '鎮ㄧ殑鍚堝悓宸插彇娑�',
+										icon: 'none'
+									});
+									setTimeout(() => {
+										this.$jump('/pages/monthly/monthly',2);
+									}, 2000);
+								}
+							})
+						}
+					}
+				});
+			},
+			pack(key) {
+				this.rotateKey = key;
+				this.rotate = !this.rotate;
+			}
+		},
+		components: {
+			TopBar
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.main {
+		padding-top: 80rpx;
+		background-color: #F5F5F5;
+		.contract_bar {
+			height: 98rpx;
+			padding: 0 24rpx;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			.left {
+				font-size: 36rpx;
+				color: #000;
+				font-family:PingFangSC-Medium,PingFang SC;
+				font-weight:500;
+			}
+			.right_btn {
+				width: 200rpx;
+				height: 60rpx;
+				border: 1px solid #dcdcdc;
+				box-sizing: border-box;
+				background-color: #fff;
+				text-align: center;
+				line-height: 58rpx;
+				font-size: 26rpx;
+				color: #333;
+				border-radius: 30rpx;
+			}
+		}
+		.now_contract {
+			padding: 32rpx;
+			background-color: #fff;
+			position: relative;
+			transition: all 0.5s;
+			.contract_flex {
+				display: flex;
+				margin-bottom: 24rpx;
+				.flex_left {
+					margin-right: 182rpx;
+					width: 120rpx;
+				}
+			}
+			.con_title {
+				color: #464646;
+				font-size: 26rpx;
+				height: 36rpx;
+				line-height: 36rpx;
+				margin-bottom: 4rpx;
+			}
+			.con_detail {
+				color: #000;
+				font-size: 32rpx;
+				font-family:PingFangSC-Medium,PingFang SC;
+				font-weight:500;
+				height: 44rpx;
+				line-height: 44rpx;
+			}
+			.spec_color {
+				color: #B48000;
+			}
+			.check_btn {
+				width: 100%;
+				height: 76rpx;
+				line-height: 74rpx;
+				text-align: center;
+				border: 1px solid #464646;
+				box-sizing: border-box;
+				color: #464646;
+				font-size: 26rpx;
+				border-radius: 16rpx;
+			}
+		}
+		.packup {
+			border-bottom: 1px solid #ececec;
+			height: 80rpx;
+			overflow: hidden;
+			.eosfont {
+				font-size: 32rpx;
+				font-weight: 900;
+				position: absolute;
+				right: 24rpx;
+				top: 60rpx;
+				transition: all 0.5s;
+			}
+			.rotate {
+				transform: rotateZ(180deg);
+			}
+		}
+	}
+</style>
diff --git a/pages/monthlyDeposit/monthlyDeposit.vue b/pages/monthlyDeposit/monthlyDeposit.vue
new file mode 100644
index 0000000..25186db
--- /dev/null
+++ b/pages/monthlyDeposit/monthlyDeposit.vue
@@ -0,0 +1,508 @@
+<template>
+	<view class="main">
+		<TopBar title="缂寸撼瀹氶噾" :bold="true" />
+		<view class="deposit_card">
+			<view class="bar">
+				<text class="title1">褰撳墠璁″垝璇︽儏</text>
+				<text class="title2">/ 缂寸撼瀹氶噾鍚庡嵆鍙韩鍙楄鍒�</text>
+			</view>
+			<view class="tip1">寮€閫氭椂闂�</view>
+			<view class="month">{{data.contract_period}}涓湀</view>
+			<view class="tip2">璁″垝鎸佺画鏃堕棿</view>
+			<view class="info_box">
+				<view class="info_item info1">
+					<view class="tip1">鍟嗗搧鎶樻墸</view>
+					<view class="month">{{data.discount*10}}鎶�</view>
+					<view class="tip2">鍖呭勾璁″垝鍐呭晢鍝�</view>
+				</view>
+				<view class="info_item info2">
+					<view class="tip1">鎶奸噾</view>
+					<view class="month">{{data.min_quantity*data.deposit/100}}鍏�</view>
+					<view class="tip2">杈炬垚璁″垝鍚庨€€杩�</view>
+				</view>
+			</view>
+			<view class="check_btn">鏌ョ湅鎴戠殑鍚堝悓</view>
+			<view class="pay_btn" @click="goPay">鏀粯鎶奸噾 楼{{data.min_quantity*data.deposit/100}}</view>
+			<view class="cancel_btn" @click="open">鍙栨秷鏀粯 閲嶆柊绛剧讲鍚堝悓</view>
+		</view>
+		<uni-popup ref="popup">
+			<view class="cancel_card">
+				<view class="linear">
+					<view class="title1">璇烽棶鎮ㄨ</view>
+					<view class="title2">鍙栨秷褰撳墠鍖呭勾璁″垝 锛�</view>
+				</view>
+				<view class="content_box">
+					<view>
+						<view class="title1">鍟嗗搧鎶樻墸</view>
+						<view class="title2">鍖呭勾璁″垝鍐呬骇鍝�</view>
+					</view>
+					<view style="position:relative;">
+						<text class="num">{{data.discount*10}}</text>
+						<text class="abso">鎶�</text>
+					</view>
+				</view>
+				<view class="content_box">
+					<view>
+						<view class="title1">浜彈鏃堕棿</view>
+						<view class="title2">鍖呭勾璁″垝鎸佺画鏃堕棿</view>
+					</view>
+					<view style="position:relative;">
+						<text class="num">{{data.contract_period}}</text>
+						<text class="abso">鏈�</text>
+					</view>
+				</view>
+				<view class="btn_box">
+					<view class="btn" @click="close">鍙栨秷</view>
+					<view class="btn confirm" @click="cancel">纭</view>
+				</view>
+			</view>
+		</uni-popup>
+		<uni-popup ref="pay" type="bottom">
+			<view class="popup_content">
+				<view class="popup_top_bar">閫夋嫨鏀粯鏂瑰紡<text @click="close()"></text></view>
+				<view class="flex">
+					<text class="pay_title">鏀粯瀹氶噾</text>
+					<text class="pay_num">楼{{data.min_quantity*data.deposit/100}}</text>
+				</view>
+				<view class="flex pay_item" @click="handleSelect(1)">
+					<view class="flex">
+						<text class="pay_methods_icon yue"></text>
+						<view>
+							<view class="pay_methods_name">浣欓鏀粯</view>
+							<view class="pay_methods_num">鍓╀綑浣欓锛歿{data.money}}鍏�</view>
+						</view>
+					</view>
+					<text :class="type ===1 ? 'check' : 'uncheck'"></text>
+				</view>
+				<view v-if="isWx" class="flex pay_item pay_item_other" @click="handleSelect(2)">
+					<view class="flex">
+						<text class="pay_methods_icon weixin"></text>
+						<view>
+							<view class="pay_methods_name">寰俊鏀粯</view>
+						</view>
+					</view>
+					<text :class="type === 2 ? 'check' : 'uncheck'"></text>
+				</view>
+				<view v-if="!isWx" class="flex pay_item pay_item_other" @click="handleSelect(3)">
+					<view class="flex">
+						<text class="pay_methods_icon alipay"></text>
+						<view>
+							<view class="pay_methods_name">鏀粯瀹濇敮浠�</view>
+						</view>
+					</view>
+					<text :class="type === 3 ? 'check' : 'uncheck'"></text>
+				</view>
+				<view class="pay_methods_btn" @click="handleSubmit">纭鏀粯</view>
+			</view>
+		</uni-popup>
+	</view>
+</template>
+
+<script>
+	import TopBar from '@/components/TopBar/TopBar.vue';
+	import uniPopup from "@/components/uni-popup/uni-popup.vue";
+	import { isWeixin } from '../../common/util.js';
+	export default {
+		data() {
+			return {
+				data: {},
+				type: 1,
+				isWx: false
+			}
+		},
+		onLoad(options) {
+			this.isWx = isWeixin();
+			uni.request({
+				url: `/uni/api/month_repayment/PayDetails/${options.month_apply_id}`,
+				method: 'GET',
+				dataType: 'json',
+				success: (res) => {
+					if(res.data.code === 0) {
+						this.data = res.data.data;
+					} else {
+						uni.showToast({
+							title: res.data.message,
+							icon: 'none'
+						});
+					}
+				}
+			})
+		},
+		methods: {
+			close() {
+				this.$refs.popup.close();
+			},
+			open() {
+				this.$refs.popup.open();
+			},
+			goPay() {
+				this.$refs.pay.open();
+			},
+			// 閫夋嫨鏀粯鏂瑰紡
+			handleSelect(type){
+				this.type = type;
+			},
+			// 纭鏀粯
+			handleSubmit(){
+				const {origin} = location;
+				const amount = this.data.min_quantity*this.data.deposit/100;
+				// 浣欓鏀粯
+				if(this.type === 1){
+					uni.navigateTo({
+						url: `/pages/yuepay/yuepay?amount=${amount}&money=${this.data.money}&order_id=${this.data.order_no}&type=monthly`
+					})
+				}
+				// 寰俊鏀粯
+				if(this.type === 2){
+					uni.setStorage({
+						key: 'monthly',
+						data: 'monthly',
+						success: () => {
+							this.$jump(`${origin}/uni/api/repayment/RedirectAuth?amount=${amount}&order_id=${this.data.order_no}`);
+						}
+					})
+				}
+				// 鏀粯瀹濇敮浠�
+				if(this.type === 3){
+					uni.showLoading({
+						title: '鎻愪氦涓€傘€傘€�'
+					})
+					uni.request({
+						url: `/uni/api/month_repayment/GoPay`,
+						method: 'post',
+						dataType: 'json',
+						data: {
+							amount: parseFloat(amount),
+							order_id: this.data.order_no,
+							payment_code: "epayalipaywap",
+							payment_name: "鎵嬫満鏀粯瀹濇敮浠�"
+						},
+						success: (res) => {
+							const {data} = res;
+							uni.hideLoading();
+							if(data.code === 0){
+								this.$jump(data.data);
+							}else{
+								uni.showToast({
+									title: '鍙戣捣鏀粯澶辫触',
+									icon: 'none'
+								})
+							}
+						}
+					})
+				}
+			},
+			cancel() {
+				uni.request({
+					url: '/uni/api/month_signcontract/CancelContract',
+					method: 'POST',
+					dataType: 'json',
+					data: {
+						month_apply_id: this.data.month_apply_id
+					},
+					success: (res) => {
+						if(res.data.code === 0) {
+							uni.showToast({
+								title: '鎮ㄧ殑鍚堝悓宸插彇娑�',
+								icon: 'none'
+							});
+							setTimeout(() => {
+								this.$jump('/pages/monthly/monthly',2);
+							}, 2000);
+						}
+					}
+				});
+			}
+		},
+		components: {
+			TopBar,
+			uniPopup
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.main {
+		padding-top: 80rpx;
+		min-height: 100vh;
+		box-sizing: border-box;
+		background-color: #F5F5F5;
+		.deposit_card {
+			width: 702rpx;
+			margin: 24rpx auto;
+			background-color: #fff;
+			padding: 32rpx;
+			box-sizing: border-box;
+			.bar {
+				height: 44rpx;
+				line-height: 44rpx;
+				margin-bottom: 50rpx;
+				.title1 {
+					font-size: 32rpx;
+					color: #000;
+					height: 44rpx;
+					line-height: 44rpx;
+					font-family:PingFangSC-Medium,PingFang SC;
+					font-weight:500;
+				}
+				.title2 {
+					color: #7C7C7C;
+					font-size: 26rpx;
+					height: 36rpx;
+					line-height: 36rpx;
+					margin-left: 16rpx;
+				}
+			}
+			.tip1 {
+				color: #464646;
+				font-size: 28rpx;
+				height: 40rpx;
+				line-height: 40rpx;
+			}
+			.month {
+				color: #000;
+				font-size: 40rpx;
+				height: 56rpx;
+				line-height: 56rpx;
+				font-family:PingFangSC-Medium,PingFang SC;
+				font-weight:500;
+				margin: 8rpx 0 4rpx;
+			}
+			.tip2 {
+				color: #979797;
+				font-size: 24rpx;
+				height: 34rpx;
+				line-height: 34rpx;
+			}
+			.info_box {
+				display: flex;
+				margin-top: 50rpx;
+				.info_item {
+					width: 168rpx;
+					margin-right: 80rpx;
+				}
+				.info_item:nth-of-type(2) {
+					margin-right: 0;
+				}
+			}
+			.check_btn {
+				color: #0074FF;
+				font-size: 40rpx;
+				height: 56rpx;
+				line-height: 56rpx;
+				font-family:PingFangSC-Medium,PingFang SC;
+				font-weight:500;
+				margin: 50rpx 0 80rpx;
+			}
+			.pay_btn {
+				height: 80rpx;
+				line-height: 80rpx;
+				text-align: center;
+				background-color: #FFCD00;
+				border-radius: 16rpx;
+				color: #000;
+				font-size: 32rpx;
+				font-family:PingFangSC-Medium,PingFang SC;
+				font-weight:500;
+			}
+			.cancel_btn {
+				height: 80rpx;
+				line-height: 80rpx;
+				text-align: center;
+				background-color: #F8F8F8;
+				border-radius: 16rpx;
+				color: #464646;
+				font-size: 28rpx;
+				margin-top: 24rpx;
+			}
+		}
+		.cancel_card {
+			width: 578rpx;
+			height: 620rpx;
+			background-color: #fff;
+			box-shadow:0px 4rpx 60rpx 0px rgba(0,0,0,0.1);
+			border-radius:20rpx;
+			overflow: hidden;
+			.linear {
+				width: 418rpx;
+				height: 176rpx;
+				background:linear-gradient(180deg,rgba(255,231,130,1) 0%,rgba(255,253,250,1) 100%);
+				overflow: hidden;
+				.title1 {
+					font-size: 32rpx;
+					height: 44rpx;
+					line-height: 44rpx;
+					font-family:PingFangSC-Medium,PingFang SC;
+					font-weight:500;
+					margin: 32rpx 0 4rpx 32rpx;
+				}
+				.title2 {
+					font-size: 40rpx;
+					height: 56rpx;
+					line-height: 56rpx;
+					font-family:PingFangSC-Medium,PingFang SC;
+					font-weight:500;
+					margin-left: 32rpx;
+				}
+			}
+			.content_box {
+				width: 514rpx;
+				height: 114rpx;
+				border-radius: 16rpx;
+				background-color: #fbfbfb;
+				margin: 0 auto 16rpx;
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				padding: 0 48rpx 0 24rpx;
+				box-sizing: border-box;
+				.title1 {
+					font-size: 28rpx;
+					color: #333;
+					height: 40rpx;
+					line-height: 40rpx;
+					font-family:PingFangSC-Semibold,PingFang SC;
+					font-weight:600;
+					margin-bottom: 2rpx;
+				}
+				.title2 {
+					color: #979797;
+					font-size: 20rpx;
+					height: 28rpx;
+					line-height: 28rpx;
+				}
+				.num, .abso {
+					font-size: 60rpx;
+					color: #FF6400;
+					font-family:PingFangSC-Semibold,PingFang SC;
+					font-weight:600;
+				}
+				.abso {
+					font-size: 20rpx;
+					position: absolute;
+					top: 14rpx;
+				}
+			}
+			.btn_box {
+				display: flex;
+				justify-content: space-between;
+				width: 530rpx;
+				margin: 100rpx auto 0;
+				.btn {
+					width: 256rpx;
+					height: 76rpx;
+					text-align: center;
+					line-height: 76rpx;
+					border-radius: 16rpx;
+					background: #F5F5F5;
+					color: #7C7C7C;
+					font-size: 32rpx;
+				}
+				.confirm {
+					background: #FFCD00;
+					color: #000;
+				}
+			}
+		}
+	}
+	.popup_content {
+		border-radius:24rpx 24rpx 0px 0px;
+		background-color: #fff;
+		padding: 42rpx 32rpx 22rpx;
+		.popup_top_bar {
+			position: relative;
+			text-align: center;
+			color: #7C7C7C;
+			font-size: 30rpx;
+			line-height: 42rpx;
+			margin-bottom: 56rpx;
+			text {
+				position: absolute;
+				width: 56rpx;
+				height: 56rpx;
+				right: 0;
+				top: -6rpx;
+				background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAMAAACfWMssAAAAnFBMVEUAAAD////////////4+Pj5+fn5+fn4+Pj4+Pj4+Pj5+fn5+fn4+Pj39/f5+fn5+fn5+fmNjY2SkpKTk5OWlpacnJydnZ2enp6np6epqamrq6u5ubm6urq7u7u9vb3KysrLy8vU1NTV1dXW1tbc3Nzh4eHn5+fo6Ojq6urs7Ozt7e3v7+/w8PDx8fHy8vLz8/P09PT19fX39/f4+Pi1Oh3/AAAAEXRSTlMABwwYJC1XiZmbx8ji6vT4+TH0AcAAAAFMSURBVEjHndfncsIwEATgswFXXBRCGklIj0kjcO//bjFucZMs7f7UzDeybA23EDWxHS+MEpYkiULPsWmYuR/zZGJ/3mOWm7JWUtdqu1nA2glm/26xZIMsF81+Ri6X1Z5WwIYJynO6bBy3+A6pOUxPX8VnIH5+X2IExjY5DMUhD4MehRgMKcJgRAkGE2IwQ3h4yvorj5kOvBGr187C/kqs3qfhtxBdmTshHjR2vOvKwq0/NeBx05al+9A5Y0dK3RhsSbkbhY1UuHFYyReFk8BSCoWTwVpKnRTy/vwEn9kUFu9F9G/fNCzcmUqS3K13G4UkhevdvmlYO1ZJUjmVJKVTyAE8XrddLd+m4U/XVXKr8aj34mLXfYZbcfml83Ky38HKYeSM8A8yPALgoQOPOXiwwqMcLg94XYELEl7J4BKI10686OLVGi/z5n8f/gDdHCF1hcxGRAAAAABJRU5ErkJggg==') no-repeat;
+				background-size: 100% 100%;
+			}
+		}
+		.flex {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			.pay_title {
+				height:44rpx;
+				line-height: 44rpx;
+				font-size:32rpx;
+				color: #212121;
+			}
+			.pay_num {
+				color: #212121;
+				height:50rpx;
+				font-size:36rpx;
+				font-family:PingFangSC-Semibold,PingFang SC;
+				font-weight:600
+			}
+			.pay_methods_icon {
+				width: 60rpx;
+				height: 60rpx;
+				background-size: 100% 100%;
+				background-repeat: no-repeat;
+				margin-right: 16rpx;
+				&.yue{
+					background-image: url(../../static/paytype/yue.png);
+				}
+				&.weixin{
+					background-image: url(../../static/paytype/weixin.png);
+				}
+				&.alipay{
+					background-image: url(../../static/paytype/alipay.png);
+				}
+			}
+			.pay_methods_name {
+				font-size: 26rpx;
+				color: #212121;
+				line-height: 36rpx;
+				margin-bottom: 4rpx;
+			}
+			.pay_methods_num {
+				font-size: 24rpx;
+				color: #8D8D8D;
+				line-height: 34rpx;
+			}
+			.uncheck {
+				width: 40rpx;
+				height: 40rpx;
+				background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAAAAADEa8dEAAAA4ElEQVQ4y73UuwqDMBSA4b7/K/06RBwEBxGcI0jIJOggdvGYDrW2thFOhzZb4MvtXHIJinH5FZLBO+cHOUerKxMASEq3xpE3QF41TZUDxkeQ1JDZ6T6ZbAa1vKNrQWqX5+LFphTXI5ICMx5vOxoKOaAaM78/fDbUr8iTjp/hGVP8E60GGwuixaw7cmRLDC0ZbkdlfKMQLOUDScIURxOJbKgnP0ttTr+hjuoMVXQbamnOUEP7DVIdp7q4KgSqYOrSokqwqlR0RacrX1Uj6FpK15zKNg8hBOm7tu16+dP/FB83GSPcKcU7y9kAAAAASUVORK5CYII=') no-repeat;
+				background-size: 100% 100%;
+			}
+			.check {
+				width: 40rpx;
+				height: 40rpx;
+				background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAMAAADW3miqAAACoFBMVEUhISEkIyArKR84Mx49Nh1cThhgURdiUxdqWRZwXhVzYBV+aROAahOihQ61kwu4lQu6lwq9mQrKpAjasAXwwQL3xgH9ywD/zQD/zQH/zQL/zgf/zgn/zwr/zxD/0BD/0BL/0BP/0RP/0RT/0RX/0h7/0x7/0x//0yP/1CT/1Cj/1Sf/1Sj/1Sr/1Sz/1jH/1zP/1zT/1zX/2Dn/2Dr/2T//2UD/2UL/2kH/2kT/2kX/20X/3E3/3E//3VL/3VT/3lT/3lf/3lj/31v/313/31//32H/4GH/4Gb/4Wb/4Wr/4Wz/4mn/4mv/4m3/43H/43L/43T/43X/5HP/5HT/5HX/5Hb/5Hf/5Hj/5Hn/5Hr/5Xn/5Xv/5X3/5oD/5oH/5oP/5oT/54P/54X/54b/54f/54n/6In/6Iv/6I7/6Y7/6Y//6ZL/6ZP/6ZT/6pf/6pj/6pn/65f/65n/65r/65v/657/65//7KD/7KP/7KT/7aP/7ab/7af/7aj/7an/7qr/7qv/7qz/7q3/763/767/76//77H/77P/8LT/8LX/8Lb/8Lf/8br/8bv/8b3/8r7/8sD/8sH/8sL/88L/88T/88X/88b/88n/9Mj/9Mn/9Mr/9Mv/9Mz/9M3/9c3/9c7/9dD/9dH/9tH/9tL/9tP/9tT/99b/99f/99j/99n/99r/99z/+Nv/+Nz/+N3/+N7/+N//+d7/+d//+eH/+eL/+eP/+eX/+uL/+uT/+uX/+ub/+uf/+uj/+un/+uv/++r/++v/++z/++3/++7/++//+/D//O7//O///PD//PH//PL//PP//PT//PX//fT//fX//fb//ff//fj//fn//fv//vb//vj//vn//vr//vv//vz//v3///z///3///7////If3C4AAACf0lEQVQ4y2O4TwRgQBe4BwR4FN27dfPyxfPnTp8+c+Hi5Zu372FRdO/m9bMn922ujg8Pj6/efujUhcu37qEpunfr+vljW1P0JcXBQNIgbcdxhDKIors3LxzdlSkvjgTks/acunbzHkLR7RvnD660EEcDlmuPXbhyF6bo7o3z+6doi2MA7RkHL1y5B1F07+b5/Yu1xLEAzeUHL4BsZAC6+cLBVabiWIHZ+uPXboMU3b58ZH2cOA6QtOXU5XtARTfPbZsli0uR3KK9F27dZ7h3/dCKYHGcIGzjicv3GG6d3zlLB1NSmFcETOsu2HvhNsONE2u6JTHUCDExcELCvm/z6TsMlw4sjsOmhoEbwkxecfgGw4VdM10hXAEWHjGEGlZRCNtjwf5rDGc2T3KAcNkYGLjE0NWIO03fdYHh9Lo+ewhXkBGiCkWNuOOUrVcZTq7ucYTy+cCqUNWIO0/ecgakyFccSRU7qhrxIJAioHXZEsiqUNVIFIOsAzq8RFUcWRWyGnG1KpDDgUFQYYMQ5GfmQFYjbtcACgJgYLamSOOKOpmMLlBgAqOlN88alyLb0kmgaAFFcE2COnY1Gukt4AgGJZWe/ABFbGqUIksngJMKKNHNbcn0UMBUo+iT27lkDyjRgZPv1JpUHxV0NWp+GU2zockXnBEmVqb5mUghK5EyD8monwbLCOAstWJSTUaUu5ESNOwllI29Y3Iap62DZSlI5lw1taUoKdTTxcJQT8/Qys0rIrW0fdZGROaEZPMN83vr8tNjI0L8/QOjEzNKmics3IKczaEFxso5fW01ZQWFhcXltR0T569GKzCgRc+2dUvnTJ3Q3z9x2rxlm3afQBQ9AO0gCIzNUhSlAAAAAElFTkSuQmCC') no-repeat;
+				background-size: 100% 100%;
+			}
+		}
+		.pay_item {
+			height: 120rpx;
+			align-items: center;
+			border-bottom: 1px solid #ECECEC;
+			.flex {
+				margin-top: 0;
+			}
+		}
+		.pay_methods_btn {
+			width: 100%;
+			height: 76rpx;
+			line-height: 76rpx;
+			border-radius: 16rpx;
+			background-color: #FFCD00;
+			text-align: center;
+			font-size: 28rpx;
+			margin-top: 22rpx;
+		}
+		.pay_item_other{
+			margin-top: 0;
+		}
+	}
+</style>
diff --git a/pages/monthlyIntroduce/monthlyIntroduce.vue b/pages/monthlyIntroduce/monthlyIntroduce.vue
new file mode 100644
index 0000000..9b29334
--- /dev/null
+++ b/pages/monthlyIntroduce/monthlyIntroduce.vue
@@ -0,0 +1,105 @@
+<template>
+	<view class="main">
+		<view class="top_bar">
+			<text class="eosfont" @click="$backup">&#xe743;</text>
+			鍖呮湀璇存槑
+		</view>
+		<view class="content_view">
+			<view class="content_title">
+				<text class="circle_num">1</text>鍖呮湀鏄粈涔堬紵
+			</view>
+			<view class="content_main">璋涘疂澶氬浼氭牴鎹尰闄㈢殑鎷胯揣鍛ㄦ湡锛岃捣璁㈤噺缁欏尰闄笅鍙戜竴涓姌鎵ｏ紝鍖呮湀鏈熼棿锛屽尰闄㈣喘涔板弬涓庡寘鏈堢殑鍟嗗搧鏃跺彲浜彈鎶樻墸锛屽崟鍝佹渶浣�5鎶樸€�</view>
+			<view class="content_title">
+				<text class="circle_num">1</text>鎬庝箞鍖呮湀锛�
+			</view>
+			<view class="content_main">鐐瑰嚮涓嬫柟閫夋嫨璧疯閲忥紝閫夋嫨鎷胯揣鍛ㄦ湡鍜岃捣璁㈤噺锛岀缃插悎鍚岋紝缂寸撼瀹氶噾锛屽垯瀹屾垚鍖呮湀锛屽悎鍚屾湁鏁堟湡鍐咃紝璐拱鍖呮湀浜у搧锛岀珛浜姌鎵ｃ€�</view>
+			<view class="content_title">
+				<text class="circle_num">1</text>鍏充簬瀹氶噾
+			</view>
+			<view class="content_main">鍚堝悓鏈夋晥鏈熷唴锛屽寘鏈堜骇鍝佹秷璐规€婚锛堟姌鎵ｄ环锛夎揪鍒拌捣璁㈤噺锛岃嚜鍚堝悓缁撴潫鏃ユ湡5涓伐浣滄棩鍐咃紝鍏ㄩ閫€杩樺畾閲戯紝鍚﹀垯涓嶄簣浠ラ€€杩樸€�</view>
+			<view class="content_title">
+				<text class="circle_num">1</text>缂寸撼瀹氶噾涓庝笉缂寸撼瀹氶噾鐨勫尯鍒�
+			</view>
+			<view class="content_main">缂寸撼瀹氶噾锛屽悎鍚屾湁鏁堟湡鍐呰喘涔板寘鏈堜骇鍝佸彲绔嬩韩鍏ㄩ鎶樻墸锛涗笉缂寸撼瀹氶噾锛屽悎鍚屾湁鏁堟湡鍐呰喘涔板寘鏈堜骇鍝侊紝缁熶竴浜彈8.5鎶橈紝鍚堝悓鏈夋晥鏈熷唴锛屽寘鏈堜骇鍝佹秷璐规€婚锛堟姌鎵ｄ环锛夎揪鍒拌捣璁㈤噺锛岃嚜鍚堝悓缁撴潫鏃ユ湡5涓伐浣滄棩鍐咃紝鎸夊樊浠疯繑鐜拌嚦璐︽埛浣欓锛屽彲鎻愮幇锛岋紙渚嬪鍏ㄩ鎶樻墸涓�6鎶橈紝鍒欒繑鐜版秷璐规€婚鐨�25%锛夊弽涔嬩笉浜堜互杩旂幇銆�</view>
+			<view class="content_title" style="margin-bottom: 0;">鏈変换浣曢棶棰�</view>
+			<view class="content_title">鐑﹁鐐瑰嚮椤甸潰涓婄殑娑堟伅鎸夐挳杩涜</view>
+			<view class="join_btn">鍔犲叆鍖呭勾璁″垝</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.main {
+		background-color: #FFFCF6;
+		.top_bar {
+			height: 80rpx;
+			line-height: 80rpx;
+			text-align: center;
+			background:linear-gradient(135deg,rgba(255,232,199,1) 0%,rgba(214,163,93,1) 100%);
+			border-radius: 0 0 24rpx 24rpx;
+			position: fixed;
+			width: 100%;
+			box-sizing: border-box;
+			.eosfont {
+				font-size: 56rpx;
+				position: absolute;
+				left: 20rpx;
+				top: 2rpx;
+			}
+		}
+		.content_view {
+			padding: 130rpx 40rpx 24rpx;
+			.content_title {
+				margin-bottom: 20rpx;
+				font-size: 32rpx;
+				font-family:PingFangSC-Medium,PingFang SC;
+				font-weight:500;
+				height: 44rpx;
+				line-height: 44rpx;
+				display: flex;
+				align-items: center;
+				.circle_num {
+					width: 28rpx;
+					height: 28rpx;
+					border-radius: 50%;
+					background-color: #DCAD6C;
+					color: #fff;
+					line-height: 28rpx;
+					text-align: center;
+					font-size: 22rpx;
+					display: inline-block;
+					margin-right: 10rpx;
+				}
+			}
+		}
+		.content_main {
+			font-size: 28rpx;
+			color: #807B74;
+			line-height: 40rpx;
+			margin-bottom: 30rpx;
+		}
+		.join_btn {
+			height: 88rpx;
+			line-height: 88rpx;
+			background:linear-gradient(314deg,rgba(238,190,114,1) 0%,rgba(255,224,176,1) 100%);
+			box-shadow:0px 4rpx 40rpx 0px rgba(242,199,130,0.5);
+			border-radius: 20rpx;
+			text-align: center;
+			font-size: 32rpx;
+			position: fixed;
+			left: 24rpx;
+			bottom: 24rpx;
+			width: 702rpx;
+		}
+	}
+</style>
diff --git a/pages/monthlyJoin/monthlyJoin.vue b/pages/monthlyJoin/monthlyJoin.vue
new file mode 100644
index 0000000..847d45d
--- /dev/null
+++ b/pages/monthlyJoin/monthlyJoin.vue
@@ -0,0 +1,490 @@
+<template>
+	<view class="main">
+		<TopBar title="鍔犲叆鍖呭勾璁″垝" :bold="true" />
+		<text class="ins_btn" @click="$jump('/pages/monthlyIntroduce/monthlyIntroduce',2)">璇存槑</text>
+		<view class="bar">
+			<text class="title1">閫夋嫨鎮ㄧ殑鍖呭勾璁″垝</text>
+			<text class="title2">/ 閫夋嫨璁″垝寮€閫氭椂闄�</text>
+		</view>
+		<view class="plan_card">
+			<view class="card_btn_box">
+				<view class="card_btn" v-for="(item, index) in ruleList" :key="index" :class="{act: index=== key}" @click="changeMonth(index)">
+					寮€閫歿{item.contract_period}}涓湀
+					<!-- <view class="label">鏈€鍒掔畻</view> -->
+				</view>
+			</view>
+			<view class="card_tips" v-if="tips">
+				<text>璇锋牴鎹偍{{ruleList[key]['contract_period']}}涓湀鍐呰鍒掗噰璐€婚噺锛岄€夋嫨鎶樻墸鏂规</text>
+				<text @click="closeTips">脳</text>
+			</view>
+			<view class="now_plan">
+				<text class="left">褰撳墠鏂规锛�</text>
+				<text class="right">
+					閲囪喘閲忛渶鈮�<text class="amount">{{ruleList[key]['child'][monthKey]['min_quantity']}}</text> 鍏�
+				</text>
+			</view>
+			<view class="overdate">{{overdate}} 鍒版湡</view>
+			<view class="pre_box">
+				<view class="pre_item" v-for="(item, index) in ruleList[key]['child']" :key="index" :class="{act: monthKey === index}" @click="changeDiscount(index)">
+					<view class="title1">鍟嗗搧鎶樻墸</view>
+					<view class="title2">{{Number(item.discount)*10}}鎶�</view>
+					<view class="title3">鍖呭勾璁″垝鍐呭晢鍝�</view>
+					<view class="label" v-if="item.cheap_flg === '1'">鏈€浼樻儬</view>
+				</view>
+			</view>
+		</view>
+		<view class="bar">
+			<text class="title1">閫夋嫨鎶奸噾鏂规</text>
+			<text class="title2">/ 杈炬垚璁″垝鍚庡皢閫€杩樺畾閲�</text>
+		</view>
+		<view class="pay_card">
+			<view class="title1" v-if="depositKey === '1'">鍏堢即绾虫娂閲戯紝鍙珛浜嵆鏃舵姌鎵�</view>
+			<view class="title1" v-else>0鎶奸噾锛屽厛鎸夊師浠疯喘涔�</view>
+			<view class="title2" v-if="depositKey === '1'">杈炬垚璁″垝锛氶€€杩樺畾閲懧{Number(ruleList[key]['child'][monthKey]['min_quantity'])*Number(ruleList[key]['child'][monthKey]['deposit'])/100}}</view>
+			<view class="title2" v-else>杈炬垚璁″垝锛氭弧楼{{ruleList[key]['child'][monthKey]['min_quantity']}}鎸墈{Number(ruleList[key]['child'][monthKey]['discount'])*10}}鎶樿繑鐜�</view>
+			<view class="pay_box">
+				<view class="pay_item" :class="{act: depositKey === '1'}" @click="changeDeposit('1')">
+					<view class="title1">鎶奸噾锛�<text>楼{{Number(ruleList[key]['child'][monthKey]['min_quantity'])*Number(ruleList[key]['child'][monthKey]['deposit'])/100}}</text></view>
+					<view class="title2">杈炬垚璁″垝鍚庨€€杩�</view>
+				</view>
+				<view class="pay_item" :class="{act: depositKey === '0'}" @click="changeDeposit('0')">
+					<view class="title1">鎶奸噾锛�<text>0</text></view>
+					<view class="title2">杈炬垚璁″垝鍚庤繑鐜�</view>
+				</view>
+			</view>
+		</view>
+		<view class="bottom_fixed">
+			<view class="fixed_top">
+				<text class="checked eosfont" v-if="checked" @click="check">&#xe61e;</text>
+				<text class="uncheked" v-else @click="check"></text>
+				<text>鎴戝凡闃呰</text>
+				<text class="contract">銆婅皼瀹濆澶氬寘骞翠細鍛樺悎鍚屻€�</text>
+			</view>
+			<view class="fixed_bottom" @click="submit">鍚屾剰骞剁缃插悎鍚�</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import TopBar from '@/components/TopBar/TopBar.vue';
+	import moment from 'moment';
+	export default {
+		data() {
+			return {
+				tips: true,
+				checked: false,
+				ruleList: [{
+					child: [
+						{contract_period:1, min_quantity:0}
+					]
+				}],
+				key: 0,
+				monthKey: 0,
+				depositKey: '1', // 1浜ゆ娂閲� 0涓嶄氦鎶奸噾
+				month_rule_id: '',
+				auth_status: '', // 鏄惁鍥涜绱�
+				overdate: ''
+			}
+		},
+		onLoad() {
+			uni.request({
+				url:'/uni/api/month_signcontract/MonthRuleList',
+				method: 'GET',
+				dataType: 'json',
+				success: (res) => {
+					if(res.data.code === 0) {
+						this.ruleList = res.data.data.ruleList;
+						this.month_rule_id = res.data.data.ruleList[0]['child'][0]['month_rule_id'];
+						this.auth_status = res.data.data.auth_status;
+						let month = this.ruleList[0]['contract_period'];
+						this.overdate = moment().add(month,'M').format('YYYY.MM.DD');
+					}
+				}
+			})
+		},
+		methods: {
+			closeTips() {
+				this.tips = false;
+			},
+			check() {
+				this.checked = !this.checked;
+			},
+			changeMonth(key) {
+				this.key = key;
+				this.monthKey = 0;
+				this.month_rule_id = this.ruleList[key]['child'][this.monthKey]['month_rule_id'];
+				let month = this.ruleList[key]['contract_period'];
+				this.overdate = moment().add(month,'M').format('YYYY.MM.DD');
+			},
+			changeDiscount(key) {
+				this.monthKey = key;
+				this.month_rule_id = this.ruleList[this.key]['child'][key]['month_rule_id'];
+			},
+			changeDeposit(key) {
+				this.depositKey = key;
+			},
+			submit() {
+				if(!this.checked) {
+					uni.showToast({
+						title: '璇峰厛鍕鹃€夈€婅皼瀹濆澶氬寘骞翠細鍛樺悎鍚屻€�',
+						icon: 'none'
+					})
+					return
+				}
+				// 鏄惁鍥涜绱犳牎楠�
+				if(this.auth_status === '1') {
+					uni.showLoading({
+						title: '鎻愪氦涓�',
+						mask: true
+					})
+					uni.request({
+						url: '/uni/api/month_signcontract/AddContract',
+						method: 'POST',
+						dataType: 'json',
+						data: {
+							is_deposit: this.depositKey,
+							month_rule_id: this.month_rule_id
+						},
+						success:(res) => {
+							if(res.data.code === 0) {
+								uni.hideLoading();
+								uni.showToast({
+									title: '鍚堝悓宸茬缃�',
+									icon: 'none'
+								})
+								// 鏄惁浜ゆ娂閲�
+								if(this.depositKey === '1') {
+									// 浜ゆ娂閲�
+									setTimeout(() => {
+										this.$jump(`/pages/monthlyDeposit/monthlyDeposit?month_apply_id=${res.data.data.month_apply_id}`,2);
+									}, 2000);
+								} else {
+									// 涓嶄氦鎶奸噾
+									setTimeout(() => {
+										this.$jump(`/pages/monthlyPlan/monthlyPlan?month_apply_id=${res.data.data.month_apply_id}`,2);
+									}, 2000);
+								}
+							} else {
+								uni.hideToast();
+								uni.showToast({
+									title: res.data.message,
+									icon: 'none'
+								})
+							}
+						}
+					})
+				} else {
+					this.$jump(`/pages/certification/certification?month_rule_id=${this.month_rule_id}&is_deposit=${this.depositKey}`,2)
+				}
+			}
+		},
+		components: {
+			TopBar
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.main {
+		padding: 80rpx 24rpx  168rpx;
+		background-color: #fff;
+		.ins_btn {
+			font-size: 26rpx;
+			color: #000;
+			height: 36rpx;
+			line-height: 36rpx;
+			position: fixed;
+			right: 24rpx;
+			top: 22rpx;
+			z-index: 101;
+		}
+		.bar {
+			height: 98rpx;
+			line-height: 98rpx;
+			.title1 {
+				font-size: 32rpx;
+				color: #000;
+				height: 44rpx;
+				line-height: 44rpx;
+				font-family:PingFangSC-Medium,PingFang SC;
+				font-weight:500;
+			}
+			.title2 {
+				color: #7C7C7C;
+				font-size: 26rpx;
+				height: 36rpx;
+				line-height: 36rpx;
+				margin-left: 16rpx;
+			}
+		}
+		.plan_card {
+			width: 100%;
+			border-radius: 20rpx;
+			box-shadow:0px 4rpx 60rpx 0px rgba(0,0,0,0.06);
+			.card_btn_box {
+				height: 82rpx;
+				display: flex;
+				background:linear-gradient(270deg,rgba(255,251,238,1) 0%,rgba(255,246,217,1) 100%);
+				.card_btn {
+					text-align: center;
+					line-height: 82rpx;
+					font-size: 30rpx;
+					color: #7B5100;
+					flex: 1;
+					.label {
+						width: 80rpx;
+						height: 32rpx;
+						line-height: 32rpx;
+						text-align: center;
+						background: #FF6400;
+						border-radius:16rpx 16rpx 16rpx 0px;
+						color: #fff;
+						font-size: 18rpx;
+						position: absolute;
+						right: 18rpx;
+						top: -10rpx;
+					}
+				}
+				.act {
+					background-color: #FFF;
+					font-family:PingFangSC-Medium,PingFang SC;
+					font-weight:500;
+					color: #000;
+					position: relative;
+				}
+				.act:after {
+					content: '';
+					width: 40rpx;
+					height: 6rpx;
+					background-color: #FF6400;
+					border-radius: 3rpx;
+					position: absolute;
+					bottom: 0;
+					left: 50%;
+					margin-left: -20rpx;
+				}
+				.card_btn:nth-of-type(1) {
+					border-top-right-radius: 16rpx;
+				}
+				.card_btn:nth-of-type(2) {
+					border-bottom-left-radius: 16rpx;
+				}
+			}
+			.card_tips {
+				height: 56rpx;
+				width: 654rpx;
+				border-radius: 8rpx;
+				background-color: #2F2E33;
+				line-height: 56rpx;
+				color: #F3D8A6;
+				font-size: 24rpx;
+				padding: 0 24rpx;
+				box-sizing: border-box;
+				display: flex;
+				justify-content: space-between;
+				margin: 30rpx auto 32rpx;
+			}
+			.now_plan {
+				width: 654rpx;
+				height: 44rpx;
+				line-height: 44rpx;
+				display: flex;
+				justify-content: space-between;
+				margin: 0 auto;
+				.left {
+					color: #333;
+					font-size: 28rpx;
+					font-family:PingFangSC-Medium,PingFang SC;
+					font-weight:500;
+				}
+				.right {
+					font-size: 24rpx;
+					.amount {
+						font-size: 32rpx;
+						color: #B48000;
+						font-family:PingFangSC-Semibold,PingFang SC;
+						font-weight:600;
+						margin: 0 16rpx;
+					}
+				}
+			}
+			.overdate {
+				font-size: 24rpx;
+				color: #7C7C7C;
+				height: 34rpx;
+				line-height: 34rpx;
+				margin: 0 0 32rpx 24rpx;
+			}
+			.pre_box {
+				width: 654rpx;
+				display: flex;
+				flex-wrap: wrap;
+				margin: 0 auto 16rpx;
+				.pre_item {
+					width: 204rpx;
+					height: 200rpx;
+					box-sizing: border-box;
+					border-radius: 16rpx;
+					border: 2rpx solid #ECECEC;
+					box-sizing: border-box;
+					text-align: center;
+					position: relative;
+					margin-bottom: 26rpx;
+					.label {
+						width: 96rpx;
+						height: 36rpx;
+						line-height: 36rpx;
+						text-align: center;
+						font-size: 22rpx;
+						color: #fff;
+						background: #FF6400;
+						border-radius:30rpx 20rpx 20rpx 0;
+						position: absolute;
+						left: 0;
+						top: -18rpx;
+						z-index: 10;
+					}
+					.title1 {
+						font-size: 28rpx;
+						color: #333;
+						height: 40rpx;
+						line-height: 40rpx;
+						font-family:PingFangSC-Semibold,PingFang SC;
+						font-weight:600;
+						margin-top: 24rpx;
+					}
+					.title2 {
+						color: #CE9300;
+						font-size: 36rpx;
+						height: 50rpx;
+						line-height: 50rpx;
+						font-family:PingFangSC-Semibold,PingFang SC;
+						font-weight:600;
+						margin: 14rpx auto 8rpx;
+					}
+					.title3 {
+						color: #979797;
+						font-size: 22rpx;
+						height: 32rpx;
+						line-height: 32rpx;
+					}
+				}
+				.pre_item:nth-of-type(3n-1) {
+					margin: 0 20rpx;
+				}
+				.act {
+					border: 4rpx solid #F2D8A4;
+					background-color: #FFFBF3;
+					.title3 {
+						color: #CE9300;
+					}
+				}
+			}
+		}
+		.pay_card {
+			padding: 24rpx 24rpx 28rpx;
+			border-radius: 20rpx;
+			box-shadow:0px 4rpx 60rpx 0px rgba(0,0,0,0.07);
+			.title1 {
+				color: #977035;
+				font-size: 28rpx;
+				height: 40rpx;
+				line-height: 40rpx;
+				font-family:PingFangSC-Medium,PingFang SC;
+				font-weight:500;
+			}
+			.title2 {
+				color: #979797;
+				font-size: 26rpx;
+				height: 36rpx;
+				line-height: 36rpx;
+			}
+			.pay_box {
+				display: flex;
+				justify-content: space-between;
+				flex-wrap: wrap;
+				margin-top: 24rpx;
+				.pay_item {
+					width: 318rpx;
+					height: 120rpx;
+					border-radius: 16rpx;
+					border: 2px solid #ECECEC;
+					text-align: center;
+					box-sizing: border-box;
+					.title1 {
+						color: #333333;
+						font-size: 28rpx;
+						height: 40rpx;
+						line-height: 40rpx;
+						font-family:PingFangSC-Semibold,PingFang SC;
+						font-weight:600;
+						margin-top: 20rpx;
+						text {
+							color: #FF4A00;
+						}
+					}
+					.title2 {
+						margin-top: 8rpx;
+						color: #979797;
+						font-size: 22rpx;
+						height: 32rpx;
+						line-height: 22rpx;
+					}
+				}
+				.act {
+					border: 4rpx solid #F2D8A4;
+					background-color: #FFFBF3;
+					.title2 {
+						color: #CE9300;
+					}
+				}
+			}
+		}
+		.bottom_fixed {
+			position: fixed;
+			bottom: 0;
+			left: 0;
+			width: 100%;
+			height: 168rpx;
+			.fixed_top {
+				height: 80rpx;
+				display: flex;
+				align-items: center;
+				font-size: 26rpx;
+				color: #000;
+				.uncheked {
+					width: 32rpx;
+					height: 32rpx;
+					border-radius: 50%;
+					background-color: #fff;
+					margin: 0 16rpx 0 24rpx;
+					display: inline-block;
+					box-sizing: border-box;
+					border: 1px solid rgba(0,0,0,0.5);
+				}
+				.checked {
+					width: 32rpx;
+					height: 32rpx;
+					border-radius: 50%;
+					background-color: #FFCD00;
+					display: inline-block;
+					text-align: center;
+					line-height: 32rpx;
+					margin: 0 16rpx 0 24rpx;
+				}
+				.contract {
+					color: #009BFF;
+					text-decoration: underline;
+				}
+			}
+			.fixed_bottom {
+				height: 88rpx;
+				line-height: 88rpx;
+				text-align: center;
+				background-color: #FFCD00;
+				font-size: 32rpx;
+				color: #000;
+			}
+		}
+	}	
+</style>
diff --git a/pages/monthlyPlan/monthlyPlan.vue b/pages/monthlyPlan/monthlyPlan.vue
new file mode 100644
index 0000000..90133cd
--- /dev/null
+++ b/pages/monthlyPlan/monthlyPlan.vue
@@ -0,0 +1,360 @@
+<template>
+	<view class="main">
+		<view class="top_bar">
+			<view class="left" @click="$backup">
+				<text class="eosfont left_icon">&#xe743;</text>l
+				<text class="close_title">鍏抽棴</text>
+			</view>
+			<text class="middle">鎴戠殑鍖呭勾璁″垝</text>
+			<text class="my_contract" @click="$jump('/pages/monthlyContract/monthlyContract',2)">鎴戠殑鍚堝悓</text>
+		</view>
+		<view class="plan_info">
+			<view class="info_title">褰撳墠绱宸查噰璐� (鍏�)</view>
+			<view class="info_amount">{{month_apply_info.total_amount}}</view>
+			<view class="wait" v-if="month_apply_info.apply_status=== '1'" @click="$jump(`/pages/monthlyDeposit/monthlyDeposit?month_apply_id=${month_apply_info.month_apply_id}`,2)">鎮ㄦ湁涓€绗旀娂閲戠瓑寰呯即绾�</view>
+			<view class="info_detail">
+				<view class="detail_item">
+					<view class="title1">{{month_apply_info.date_diff}}澶�</view>
+					<view class="title2">鍓╀綑鏃堕棿</view>
+				</view>
+				<text class="line"></text>
+				<view class="detail_item">
+					<view class="title1">{{month_apply_info.min_quantity}}鍏�</view>
+					<view class="title2">璁″垝鎬婚噰璐�</view>
+				</view>
+				<text class="line"></text>
+				<view class="detail_item">
+					<view class="title1">{{month_apply_info.discount*10}}鎶�</view>
+					<view  class="title2">褰撳墠浜姌鎵�</view>
+				</view>
+			</view>
+		</view>
+		<view class="mid_card">
+			<view class="mid_left">
+				<view class="text1">鍖呭勾璁″垝鍟嗗搧涓撳尯</view>
+				<view class="text2">鑷敱鎼厤 閲囪喘閽滄儬</view>
+			</view>
+			<view class="mid_right">
+				<view class="text1">鎶樻墸閲囪喘</view>
+				<view class="text2" @click="$jump('/pages/monthly/monthly',2)">鍘荤湅鐪�</view>
+			</view>
+		</view>
+		<view class="pro_title">
+			閲囪喘鏄庣粏
+			<text>/鍖呭惈璁″垝鍐呭晢鍝佺殑璁㈠崟</text>
+		</view>
+		<view v-if="month_order_list !== null">
+			<view class="pro_item" v-for="(item, index) in month_order_list" :key="index">
+				<view class="item_top">璁″垝鍐呴噰璐噾棰濓細<text>楼{{item.total_price}}</text></view>
+				<view class="item_content">
+					<view class="content_item" v-for="(vo, key) in item.child" :key="key" @click="$jumpGoodDetail(vo.goods_id)">
+						<image class="item_img" :src="vo.goods_image || $noGoodsImg"/>
+						<view>
+							<view class="item_name">{{vo.goods_name}}</view>
+							<view class="item_spec" v-if="vo.specification" v-html="vo.specification"></view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view v-else class="no_data">
+			<view class="no_title">鏆傛棤璁板綍</view>
+			<view class="no_btn" @click="$jump('/pages/monthly/monthly',2)">鍓嶅線涓撳尯</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				month_apply_info: [],
+				month_order_list: []
+			}
+		},
+		onLoad(options) {
+			let month_apply_id = options.month_apply_id;
+			uni.request({
+				url: '/uni/api/month/GetMyMonthApply',
+				method: 'POST',
+				data: {
+					month_apply_id: month_apply_id
+				},
+				dataType: 'json',
+				success: (res) => {
+					if(res.data.code === 0) {
+						this.month_apply_info = res.data.data.month_apply_info[0];
+						res.data.data.month_order_list !== null && res.data.data.month_order_list.map((item, index) => {
+							item.child.map((vo, key) => {
+								if(!vo.specification) return
+								vo.specification = vo.specification.replace(/src/, 'style="width:18px;height:18px;vertical-align:middle;" src');
+							});
+							
+						});
+						this.month_order_list = res.data.data.month_order_list;
+					}
+				}
+			})
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.main {
+		.top_bar {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			height: 80rpx;
+			padding: 0 20rpx;
+			.left {
+				display: flex;
+				align-items: center;
+				color: #7c7c7c;
+				.left_icon {
+					font-weight: 900;
+					margin-right: 10rpx;
+					color: #000;
+					font-size: 40rpx;
+				}
+				.close_title {
+					font-size: 28rpx;
+					color: #212121;
+					margin-left: 10rpx;
+				}
+			}
+			.middle {
+				text-align: center;
+				color: #000;
+				font-size: 32rpx;
+				line-height: 44rpx;
+				font-family:PingFangSC-Medium,PingFang SC;
+				font-weight:500;
+			}
+			.my_contract {
+				color: #000;
+				font-size: 26rpx;
+				line-height: 36rpx;
+			}
+		}
+		.plan_info {
+			background:linear-gradient(135deg,rgba(255,232,199,1) 0%,rgba(214,163,93,1) 100%);
+			overflow: hidden;
+			.info_title {
+				text-align: center;
+				font-size: 28rpx;
+				height: 40rpx;
+				line-height: 40rpx;
+				font-family:PingFangSC-Medium,PingFang SC;
+				font-weight:500;
+				color: rgba(0,0,0,0.6);
+				margin-top: 40rpx;
+			}
+			.info_amount {
+				text-align: center;
+				font-size: 64rpx;
+				color: #000;
+				height: 90rpx;
+				line-height: 90rpx;
+				font-family:PingFangSC-Semibold,PingFang SC;
+				font-weight:600;
+			}
+			.wait {
+				width: 340rpx;
+				height: 64rpx;
+				line-height: 64rpx;
+				text-align: center;
+				border-radius: 32rpx;
+				background-color: rgba(0,0,0,0.5);
+				color: #fff;
+				font-size: 28rpx;
+				margin: 24rpx auto 0;
+			}
+			.info_detail {
+				width: 710rpx;
+				height: 160rpx;
+				margin: 24rpx auto 0;
+				border-radius:32rpx 32rpx 12rpx 12rpx;
+				background:linear-gradient(180deg,rgba(51,51,51,1) 0%,rgba(48,47,53,1) 100%);
+				box-shadow:0px 4rpx 60rpx 0px rgba(0,0,0,0.1);
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				padding: 0 36rpx;
+				box-sizing: border-box;
+				.line {
+					width: 2rpx;
+					height: 40rpx;
+					background-color: #000;
+				}
+				.detail_item {
+					text-align: center;
+					min-width: 180rpx;
+					.title1 {
+						color: #FCE3C1;
+						font-size: 36rpx;
+						font-family:PingFangSC-Semibold,PingFang SC;
+						font-weight:600;
+						height: 50rpx;
+						line-height: 50rpx;
+					}
+					.title2 {
+						margin-top: 8rpx;
+						color: rgba(253,228,194,0.5);
+						font-size: 26rpx;
+						line-height: 36rpx;
+						height: 36rpx;
+					}
+				}
+			}
+		}
+		.mid_card {
+			width: 702rpx;
+			height: 120rpx;
+			margin: 30rpx auto 40rpx;
+			border-radius: 16rpx;
+			overflow: hidden;
+			display: flex;
+			.mid_left {
+				background:linear-gradient(135deg,rgba(47,46,51,1) 0%,rgba(69,75,93,1) 100%);
+				width: 422rpx;
+				height: 100%;
+				display: flex;
+				justify-content: center;
+				flex-direction: column;
+				padding-left: 40rpx;
+				.text1 {
+					font-size: 32rpx;
+					color: #FDE4C2;
+					height: 44rpx;
+					line-height: 44rpx;
+					font-family:PingFangSC-Medium,PingFang SC;
+					font-weight:500;
+				}
+				.text2 {
+					font-size: 22rpx;
+					color:rgba(253,228,194,0.6);
+					height: 32rpx;
+					line-height: 32rpx;
+					letter-spacing: 2rpx;
+					margin-top: 4rpx;
+				}
+			}
+			.mid_right {
+				width: 240rpx;
+				height: 100%;
+				background-color: #EFD5A2;
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				.text1 {
+					color: #2F2E33;
+					font-size: 32rpx;
+					height: 44rpx;
+					line-height: 44rpx;
+					font-family:PingFangSC-Medium,PingFang SC;
+					font-weight:500;
+					margin: -6rpx 0 6rpx 78rpx;
+				}
+				.text2 {
+					width: 120rpx;
+					height: 40rpx;
+					line-height: 40rpx;
+					text-align: center;
+					background-color: #3B3E4A;
+					border-radius: 20rpx;
+					font-size: 24rpx;
+					color: #fff;
+					margin-left: 82rpx;
+				}
+			}
+		}
+		.pro_title {
+			font-size: 36rpx;
+			height: 50rpx;
+			line-height: 50rpx;
+			font-family:PingFangSC-Medium,PingFang SC;
+			font-weight:500;
+			padding-left: 24rpx;
+			margin-bottom: 24rpx;
+			text {
+				margin-left: 16rpx;
+				color: #959595;
+				font-size: 28rpx;
+				font-weight: initial;
+			}
+		}
+		.pro_item {
+			width: 702rpx;
+			margin: 0 auto 34rpx;
+			.item_top {
+				width: 392rpx;
+				height: 60rpx;
+				line-height: 60rpx;
+				background-color: #FAE0BB;
+				border-radius:16rpx 80rpx 0px 0px;
+				color: #2F2E33;
+				font-size: 26rpx;
+				line-height: 60rpx;
+				padding-left: 20rpx;
+				text {
+					font-size: 32rpx;
+					font-weight: 500;
+				}
+			}
+			.item_content {
+				background-color: #fff;
+				padding: 24rpx 24rpx 0;
+				box-shadow:0px 4rpx 60rpx 0px rgba(0,0,0,0.05);
+				border-radius:20rpx;
+				.content_item {
+					padding-bottom: 24rpx;
+					display: flex;
+					.item_img {
+						width: 160rpx;
+						height: 160rpx;
+						border-radius: 16rpx;
+						margin-right: 24rpx;
+					}
+					.item_name {
+						color: #212121;
+						font-size: 28rpx;
+						height: 40rpx;
+						line-height: 40rpx;
+						margin-bottom: 8rpx;
+					}
+					.item_spec {
+						height: 36rpx;
+						line-height: 36rpx;
+						border-radius: 16rpx;
+						background-color: #F5F5F5;
+						padding: 0 16rpx;
+						color: #7C7C7C;
+						font-size: 22rpx;
+					}
+				}
+			}
+		}
+		.no_data {
+			margin-top: 120rpx;
+			.no_title {
+				color: #959595;
+				font-size: 30rpx;
+				height: 42rpx;
+				line-height: 42rpx;
+				text-align: center;
+			}
+			.no_btn {
+				width: 180rpx;
+				height: 60rpx;
+				line-height: 60rpx;
+				text-align: center;
+				border-radius: 10rpx;
+				background-color: #E2B77C;
+				font-size: 26rpx;
+				color: #302F35;
+				margin: 40rpx auto 0;
+			}
+		}
+	}
+</style>
diff --git a/pages/wxpay/wxpay.vue b/pages/wxpay/wxpay.vue
index 671b655..226cbdc 100755
--- a/pages/wxpay/wxpay.vue
+++ b/pages/wxpay/wxpay.vue
@@ -5,7 +5,7 @@
 			<view class="title">寰俊鏀粯</view>
 		</view>
 		<view class="sub-title">
-			璋涘疂澶氬鍒嗘湡瀹氶噾璁㈠崟-{{order_id}}
+			璋涘疂澶氬璁㈠崟-{{order_id}}
 		</view>
 		<view class="price">
 			锟{amount}}
@@ -25,14 +25,16 @@
 			return {
 				loading: false,
 				amount: '',
-				order_id: ''
+				order_id: '',
+				type: '' // monthly:杩炵画鍖呮湀
 			}
 		},
-		onLoad(){
+		onLoad(options){
 			const { href } = location;
 			const { amount, order_id, code } = parse(href.split('?')[1]);
 			this.amount = amount;
 			this.order_id = order_id;
+			this.type = uni.getStorageSync('monthly') || '';
 		},
 		methods: {
 			handleSumit(){
@@ -46,8 +48,14 @@
 					return;
 				}
 				this.loading = true;
+				let url = '';
+				if(this.type === 'monthly') {
+					url = '/uni/api/month_repayment/GoPay'
+				} else {
+					url = '/uni/api/repayment/GoPay';
+				}
 				uni.request({
-					url: `/uni/api/repayment/GoPay`,
+					url: url,
 					method: 'post',
 					dataType: 'json',
 					data: {
@@ -91,6 +99,7 @@
 						WeixinJSBridge.log(res.err_msg);
 						const url = window.location.origin;
 						if (res.err_msg === "get_brand_wcpay_request:ok") {
+							uni.removeStorageSync('monthly');
 							uni.navigateTo({
 								url: '/pages/payresult/payresult'
 							})
diff --git a/pages/yuepay/yuepay.vue b/pages/yuepay/yuepay.vue
index 2970b6d..f1f90d8 100755
--- a/pages/yuepay/yuepay.vue
+++ b/pages/yuepay/yuepay.vue
@@ -42,14 +42,16 @@
 				order_id: '',
 				password: '',
 				loading: false,
-				phone_mob: ''
+				phone_mob: '',
+				type: ''  // monthly:杩炵画鍖呮湀
 			}
 		},
 		onLoad(option){
-			const {amount, money, order_id} = option;
+			const {amount, money, order_id,type} = option;
 			this.money = money || '0.00';
 			this.order_price = amount || '0.00';
 			this.order_id = order_id || '';
+			this.type = type || '';
 			uni.request({
 				url: '/uni/api/member/profile',
 				method: 'GET',
@@ -62,8 +64,14 @@
 		methods: {
 			handleSumit(){
 				this.loading = true;
+				let url = '';
+				if(this.type === 'monthly') {
+					url = '/uni/api/month_repayment/GoPay'
+				} else {
+					url = '/uni/api/repayment/GoPay'
+				}
 				uni.request({
-					url: `/uni/api/repayment/GoPay`,
+					url: url,
 					method: 'post',
 					dataType: 'json',
 					data: {
@@ -77,6 +85,10 @@
 						const {data} = res;
 						this.loading = false;
 						if(data.code === 0){
+							if(this.type === 'monthly') {
+								this.$jump('/pages/monthly/monthly',2);
+								return
+							}
 							uni.navigateTo({
 								url: '/pages/payresult/payresult'
 							})
diff --git a/static/iconfont.css b/static/iconfont.css
index b62def9..041ddf7 100755
--- a/static/iconfont.css
+++ b/static/iconfont.css
@@ -1,11 +1,11 @@
 @font-face {
 	font-family: "eosfont";
-	src: url('https://at.alicdn.com/t/font_1878093_yggdekpesv.eot');
-	  src: url('https://at.alicdn.com/t/font_1878093_yggdekpesv.eot?#iefix') format('embedded-opentype'),
-	  url('https://at.alicdn.com/t/font_1878093_yggdekpesv.woff2') format('woff2'),
-	  url('https://at.alicdn.com/t/font_1878093_yggdekpesv.woff') format('woff'),
-	  url('https://at.alicdn.com/t/font_1878093_yggdekpesv.ttf') format('truetype'),
-	  url('https://at.alicdn.com/t/font_1878093_yggdekpesv.svg#iconfont') format('svg');
+  src: url('https://at.alicdn.com/t/font_1878093_3hvt9j2lgso.eot');
+  src: url('https://at.alicdn.com/t/font_1878093_3hvt9j2lgso.eot?#iefix') format('embedded-opentype'),
+  url('https://at.alicdn.com/t/font_1878093_3hvt9j2lgso.woff2') format('woff2'),
+  url('https://at.alicdn.com/t/font_1878093_3hvt9j2lgso.woff') format('woff'),
+  url('https://at.alicdn.com/t/font_1878093_3hvt9j2lgso.ttf') format('truetype'),
+  url('https://at.alicdn.com/t/font_1878093_3hvt9j2lgso.svg#iconfont') format('svg');
 }
 
 .eosfont {
-- 
2.18.1