diff --git a/pages/userInfo/vip/vip.vue b/pages/userInfo/vip/vip.vue
new file mode 100644
index 0000000..34d99da
--- /dev/null
+++ b/pages/userInfo/vip/vip.vue
@@ -0,0 +1,526 @@
+<template>
+  <view>
+    <view class="container">
+      <view class="header">
+        <view class="vip-info">
+          <image :src="userInfo.img" mode="" class="vip-info__avatar"></image>
+          <view>
+            <view class="vip-info__name">{{userInfo.username}}</view>
+            <view class="vip-info__tips" v-if="vipInfo.isVip == '0'">你还不是会员,开通立享 9 项特权</view>
+            <view class="vip-info__tips" v-if="vipInfo.isVip == '1'">您的会员为：{{vipInfo.vipTypeName}}</view>
+            <view class="vip-info__tips" v-if="vipInfo.isVip == '1'">到期时间为：{{vipInfo.endTime}}</view>
+          </view>
+        </view>
+        <!-- <view class="vip-explan" v-if="vipInfo.isVip == '0'">
+          会员说明
+          <uni-icons type="help" size="20" color="#eee" @click="openIntro()"/>
+        </view> -->
+      </view>
+
+      <view class="vip-box" v-if="systemInfo != 'ios'">
+        <view class="vip-box__item" :class="{'item-active':active == index}" @click="change(index)"
+          v-for="(item,index) in vipList" :key="index">
+          <view class="title">
+            {{item.vipName}}
+          </view>
+          <view class="price">
+            <text class="price-unit">¥</text> {{item.price}}
+          </view>
+          <view class="o-price">
+            {{item.originPrice}}
+          </view>
+          <view class="save-box">
+            立省{{parseFloat(item.originPrice - item.price).toFixed(2)}}元
+          </view>
+        </view>
+      </view>
+	  
+	  <view class="" v-if="systemInfo === 'ios'">
+		<view class="iosStyle">由于相关政策,ios端暂不支持开通会员,请谅解.</view>
+		<!-- <button class="linkToUs" type="default" plain="true" size="mini" open-type="im" data-im-id="DimenMusicHub">联系客服</button> -->
+	  </view>
+
+      <button class="sumbit-btn" @click="$noMultipleClicks(openVip)" v-if="systemInfo != 'ios'">
+        立即开通
+      </button>
+
+      <view class="opened-member-info">
+        <view class="member-info-title">他们已经享受了会员权益</view>
+        <MemberScroll />
+      </view>
+      <view class="member-benefits">
+        <view class="benefits-title title">会员权益</view>
+        <view class="benefits-list">
+          <view class="benefits-item" v-for="item in memberBenefits" >
+            <view class="benefits-icon-div" :style="{backgroundColor: item.bgColor}">
+              <uni-icons class="benefits-icon" custom-prefix="iconfont" :type="item.icon" size="22" :color="item.iconColor" ></uni-icons>
+            </view>
+            <view class="benefits-info">
+              <view class="benefits-name">{{ item.info }}</view>
+              <view class="benefits-description">{{ item.description }}</view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class="purchase-instructions instructions">
+      <view class="instructions-title title">购买须知</view>
+      <view class="ul">
+        <view class="li" v-for="item in purchaseList">
+          <view class="point">·</view>
+          <view class="content">{{ item }}</view>
+        </view>
+      </view>
+    </view>
+<!--    <view class="auto-renewal-instructions instructions">
+      <view class="instructions-title title">自动续费说明</view>
+      <view class="ul">
+        <view class="li" v-for="item in autoRenewalList">
+          <view class="point">·</view>
+          <view class="content">{{ item }}</view>
+        </view> 
+      </view>
+    </view> -->
+  </view>
+</template>
+
+<script>
+	import {queryUserVipList,addVipOrder,unifiedOrder} from '@/api/userInfo.js'
+	import {checkVip} from '@/api/paint.js'
+	import MemberScroll from "./MemberScroll";
+
+	export default {
+    components: {MemberScroll},
+		data() {
+			return {
+				userInfo: null,
+				vipList: [],
+				active: 0,
+				//disabled: false,
+				vipInfo: undefined,
+				systemInfo: undefined,
+				noClick:true, //防止重复提交
+        memberBenefits: [
+          {icon: "icon-wuguanggao", iconColor: "#b07838", bgColor: "#fbefc5", info: "下载图片免广告", description: "无需看广告解锁，直接用"},
+          {icon: "icon-biaoqing", iconColor: "#d58859", bgColor: "#fae1d8", info: "千万表情免费用", description: "超全超有趣的表情库，海量表情免费用"},
+          {icon: "icon-shuazi", iconColor: "#667dc9", bgColor: "#d5e2e9", info: "情侣头像私人定制", description: "不要再和别人撞情头啦"},
+          {icon: "icon-tupian", iconColor: "#9474c3", bgColor: "#e7d7fb", info: "头像壁纸随心选", description: "让您成为朋友圈最靓的仔"},
+          {icon: "icon-tupian", iconColor: "#9474c3", bgColor: "#e7d7fb", info: "专属客服", description: "全天候为您服务"},
+		  {icon: "icon-tupianliebiao", iconColor: "#d68353", bgColor: "#f4e1d3", info: "AI作画高级设置", description: "超精细设置，让您的作品别具一格"},
+          {icon: "icon-zuanshi", iconColor: "#9e7438", bgColor: "#fbefc5", info: "尊贵身份", description: "专属会员身份标识"},
+          {icon: "icon-neirongguanli", iconColor: "#916bd4", bgColor: "#e7d7f7", info: "每周精选内容推送", description: "热点再也不会错过啦"},
+          {icon: "icon-weixin", iconColor: "#6eae9c", bgColor: "#d5ebec", info: "多端互通", description: "意境小程序同步权益"},
+          {icon: "icon-jingqingqidai", iconColor: "#d5d5d7", bgColor: "#f2f3f5", info: "敬请期待", description: "更多精彩权益"},
+        ],
+        purchaseList: [
+            "意境会员下载的全部内容，仅限个人使用，禁止商用。",
+            "会员市场可以叠加购买，续费后过期时间顺延",
+            "会员购买时立即生效，会员生效时常为购买时间加购买时长，比如您在2020年5月1日12点30分购买了一个月会员 (31天)，则在2020年6月1日12点31分期",
+            "会员权益会在会员到期后失效",
+            "购买会员后不支持退款",
+        ],
+        // autoRenewalList: [
+        //     "付款:用户确认购买并付款后记入iTunes账户;",
+        //     "续费:苹果账户iTunes账户会在到期前24小时内扣费，扣费成功后订阅周期顺延一个订阅周期;",
+        //     "取消续订: 如需取消续订，请在订阅周期到期前24小时之前，手动在iTunes/AppleID设置管理中关闭自动续费功能，如到期前24小时内取消，依然会自动扣款再订阅一个周期。",
+        // ]
+			}
+		},
+		methods: {
+			
+			//打开抖音关注页
+			  async linkToUs(){
+					 tt.openAwemeUserProfile({
+					   success: (res) => {
+					     console.log(res);
+					   }
+					 });
+				  },
+			
+			//获取系统信息
+			async getSystemInfo() {
+				let that = this;
+				//获取系统版本
+				uni.getSystemInfo({
+					success(res) {
+						that.systemInfo = res.osName
+						console.log('系统信息为：',that.systemInfo)
+					}
+				});
+			},
+			
+			//检查是否是vip
+			async checkIsVip() {
+				let that = this;
+				const data = {
+					userId: that.userInfo.id,
+					userClientType: 10
+				}
+			 const res = await checkVip(data);
+			 console.log('res===', res);
+			 if (res.data.code === 200) {
+				 that.vipInfo = res.data.data
+			 }
+			 // else {
+			 // 	uni.showModal({
+			 // 		content: '网络错误，请稍后再试~',
+			 // 		showCancel: false
+			 // 	});
+			 // }
+			},
+			
+			async getVipList() {
+				const {
+					data
+				} = await queryUserVipList();
+				this.vipList = data.data
+			},
+			change(index) {
+				this.active = index
+			},
+			async openVip() {
+				let data = this.vipList[this.active];
+				let phone = this.userInfo
+				if (!Object.keys(data).length) return
+				//this.disabled = true
+				uni.showLoading({
+					title: "加载中..."
+				});
+				const res_add = await addVipOrder({
+					vipId: data.id
+				})
+				//console.log('res_add',res_add)
+				if(res_add.data.code === 200){
+					let orderNo = res_add.data.data;
+					const res_uni = await unifiedOrder({
+						orderNo,
+						sceneCode: 1,
+						payType: 'dypay',
+					})
+					//console.log('res_uni',res_uni)
+					if(res_uni.data.code === 200){
+						let {orderId,orderToken} = res_uni.data.data.dyThirdInOrderVo
+						this.tikPay(orderId,orderToken);
+					}else{
+						return uni.showToast({
+							title: res_uni.data.msg,
+							icon: 'none'
+						})
+					}
+				}else{
+					return uni.showToast({
+						title: res_add.data.msg,
+						icon: 'none'
+					})
+				}
+			},
+			tikPay(order_id, order_token) {
+				tt.pay({
+					orderInfo: {
+						order_id,
+						order_token
+					},
+					service: 5,
+					success(res) {
+						if (res.code == 0) {
+						
+						}
+						uni.hideLoading();
+						//this.disabled = false
+					},
+					fail(res) {
+						uni.hideLoading();
+						//this.disabled = false
+					},
+				})
+			},
+			//会员说明
+			// openIntro(){
+			// 	console.log("打开会员说明")
+			// },
+		},
+		onShow() {
+			this.userInfo = uni.getStorageSync('userInfo')
+			this.checkIsVip();
+			this.getSystemInfo();
+		},
+		created() {
+			if (!this.userInfo) {
+				uni.navigateBack()
+				uni.showToast({
+					title: '请先登录',
+					icon: 'none'
+				})
+			}
+			this.getVipList()
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@mixin flex($center: center, $content: center) {
+		display: flex;
+		align-items: $center;
+		justify-content: $content;
+	}
+
+	.container {
+		padding: 30rpx;
+		background: #fff;
+    border-radius: 0 0 60rpx 60rpx;
+		.iosStyle{
+			color:red;
+			font-size:35rpx;
+		}
+		.linkToUs{
+			width: 400rpx;
+			height: 80rpx;
+			margin-top: 30rpx;
+			border: none;
+			//bottom: 50rpx;
+			background-color: $uni-primary;
+			border-radius: 50rpx;
+			//padding-bottom: 30rpx;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+			color: #fff;
+			font-size: 16px;
+			color: $uni-white;
+			&::after{
+				border:none;
+			}
+		}
+		
+		.vip-box {
+			margin: 30px 0;
+			@include flex(center, space-around);
+			
+			
+
+			.vip-box__item {
+				width: 45%;
+				height: 300rpx;
+				padding: 20rpx;
+				@include flex;
+				flex-direction: column;
+				color: #000;
+				border: 1px solid #eee;
+				border-radius: 30rpx;
+
+				&>view {
+					margin-bottom: 15rpx;
+				}
+
+				.title {
+					font-weight: bold;
+					font-size: 30rpx;
+				}
+
+				.price {
+					font-weight: bold;
+					font-size: 48rpx;
+					color: #1991fd;
+
+					.price-unit {
+						font-size: 24rpx
+					}
+				}
+
+				.o-price {
+					color: #1991fd;
+					font-size: 26rpx;
+					text-decoration: line-through;
+				}
+
+				.save-box {
+					border-radius: 30rpx;
+					width: 150rpx;
+					height: 50rpx;
+					background-color: #e8f4ff;
+					font-size: 24rpx;
+					color: #ff0000;
+					@include flex;
+				}
+			}
+
+			.item-active {
+				border: none;
+				background: linear-gradient(to bottom right, #68c2ff, #0684fe);
+
+
+
+				.price,
+				.title {
+					color: #fff;
+				}
+
+				.o-price {
+					color: #eee;
+				}
+
+				.save-box {
+					color: #fff;
+					background-color: rgba(255, 255, 255, .1);
+				}
+			}
+		}
+
+		.sumbit-btn {
+			margin-top: 60rpx;
+			height: 88rpx;
+			@include flex;
+			font-size: 26rpx;
+			color: #fff;
+			background: linear-gradient(to bottom right, #68c2ff, #0684fe);
+		}
+
+		.header {
+			height: 200rpx;
+			background-color: gray;
+			padding: 20rpx;
+			@include flex(center, space-between);
+			border-radius: 20rpx;
+
+			.vip-explan {
+				color: #eee;
+				font-size: 24rpx;
+				@include flex(center, flex-start);
+
+			}
+
+			.vip-info {
+				@include flex(center, flex-start);
+
+				.vip-info__avatar {
+					width: 120rpx;
+					height: 120rpx;
+					border-radius: 50%;
+					margin-right: 20rpx;
+				}
+
+				.vip-info__name {
+					color: #fff;
+					font-size: 30rpx;
+					font-weight: 500;
+					margin-bottom: 10rpx;
+				}
+
+				.vip-info__tips {
+					color: #eee;
+					font-size: 24rpx
+				}
+			}
+		}
+    .opened-member-info {
+      background-color: $uni-primary-20;
+      padding: 20rpx;
+      margin: 20rpx auto;
+      border-radius: 10rpx;
+      color: $uni-primary;
+
+      .member-info-title {
+        font-size: 24rpx;
+        margin-bottom: 20rpx;
+        font-weight: 600;
+      }
+
+    }
+
+    .member-benefits {
+
+      .benefits-title {
+
+      }
+
+      .benefits-list {
+        display: flex;
+        flex-wrap: wrap;
+
+        .benefits-item {
+          height: 120rpx;
+          width: 50%;
+          display: flex;
+          align-items: center;
+
+          .benefits-icon-div {
+            height: 80rpx;
+            width: 80rpx;
+            border-radius: 40rpx;
+            flex-shrink: 0;
+            text-align: center;
+            line-height: 80rpx;
+            margin-right: 20rpx;
+
+            .benefits-icon {
+
+            }
+
+          }
+
+          .benefits-info {
+            height: 120rpx;
+
+            .benefits-name {
+              margin-top: 12rpx;
+              font-size: 28rpx;
+              line-height: 48rpx;
+            }
+
+            .benefits-description {
+              font-size: 20rpx;
+              line-height: 32rpx;
+              color: $uni-base-color;
+            }
+
+          }
+
+        }
+
+      }
+
+    }
+	}
+  .title {
+    font-size: 40rpx;
+    margin-bottom: 20rpx;
+  }
+
+  .purchase-instructions {
+    padding: 30rpx;
+
+  }
+  .auto-renewal-instructions {
+    padding: 30rpx;
+
+  }
+
+  .instructions {
+
+    .ul {
+
+      .li {
+        display: flex;
+        color: $uni-base-color;
+        font-size: 24rpx;
+        line-height: 36rpx;
+        margin-bottom: 10rpx;
+
+        .point {
+          width: 30rpx;
+          text-align: center;
+          flex-shrink: 0;
+        }
+
+        .content {
+
+        }
+
+      }
+
+    }
+
+  }
+
+</style>