edit

pages/dream/buy.vue

@@ -31,10 +31,16 @@
 		</view>
 		<view class="mask" v-if="share">
 		  <view class="buytip-layer layer " catchtap="handleStop">
-			<view class="buy-tit">分享说明</view>
-			<text class="p">{{fetch.info.name}}</text>
+			<view class="buy-tit">分享说明</view>
+			<view class="share_left">
+				<text class="p">{{fetch.info.share_title}}</text>
+				<text class="p">{{fetch.info.share_content}}</text>
+			</view>
+			<view class="share_right">
+				<image :src="fetch.info.share_pic" class="image"></image>
+			</view>
 			<view class="btn-wrapper">
-			  <view class="button" @click="hideShare" :style="bgcolor">我知道了</view>
+			  <view class="button" @click="hideShare" :style="bgcolor">分享</view>
 			</view>
 		  </view>
 		</view>
@@ -130,6 +136,16 @@ export default {
 </script>
 
 <style>
+.share_left {
+	position: relative;
+}
+.share_right {
+	position: relative;
+}
+.image {
+	width:150rpx;
+	height:150rpx;
+}
 .buy-layer{
   padding: 50rpx 55rpx 62rpx;
   background-color: #fff;

pages/dream/index.vue

@@ -42,6 +42,22 @@
 			<view v-if="infoState">
 				<info :id="id" :bgcolor="fetch.button.bgcolor" :color="fetch.button.color" @hideInfo="hideInfo"></info>
 			</view>
+			
+			<view class="mask buy-layer" v-if="inviteState">
+			  <view class="buytip-layer layer " catchtap="handleStop">
+				<view class="buy-tit">邀请你</view>
+				<text class="p">222</text>
+				
+				<view class="btn-wrapper ">
+				  <view class="button cancel" @click="hideInvite">取消
+				  </view>
+				  <view class="button primary" :style="fetch.button.bgcolor" @click="hideInvite">确认
+					<button formType="submit"></button>
+				  </view>
+				</view>
+				
+			  </view>
+			</view>
 		</view>
 	</gracePage>
 </template>
@@ -66,6 +82,7 @@ export default{
 			buyState : false,
 			rankingState : false,
 			infoState : false,
+			inviteState : true,
 		}
 	},
 	onLoad(option) {
@@ -99,6 +116,12 @@ export default{
 		},
 		view : function() {
 			this.Dever.location('dream/view?code='+this.fetch.code + '&name=' + this.fetch.info.name);
+		},
+		showInvite : function() {
+			this.inviteState = true;
+		},
+		hideInvite : function() {
+			this.inviteState = false;
 		},
 		showBuy : function() {
 			this.buyState = true;
@@ -394,4 +417,101 @@ swiper-item image{
   top: 0;
   display: none;
 }
+
+.mask {
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.mask .layer {
+  width: 570rpx;
+  box-sizing: border-box;
+  padding: 70rpx 60rpx;
+  background: #fff;
+  border-radius: 10rpx;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%,-50%);
+}
+
+.mask .layer .tit {
+  text-align: center;
+  font-size: 40rpx;
+  margin: 16rpx 0 60rpx;
+}
+
+.mask .layer input {
+  border-radius: 10rpx;
+  border: 1rpx solid #999;
+  height: 88rpx;
+  line-height: 88rpx;
+  padding: 0 28rpx;
+  box-sizing: border-box;
+  font-size: 24rpx;
+}
+
+.mask .layer .errtip {
+  color: #d1171a;
+  text-align: center;
+  font-size: 24rpx;
+  margin: 21rpx 0;
+  height: 34rpx;
+}
+
+.mask .layer .btn-wrapper {
+  padding-top: 30rpx;
+}
+
+.buytip{
+  font-size: 24rpx;
+  color: #999999;
+  text-decoration: underline;
+  padding-bottom: 40rpx;
+}
+
+.p{
+  font-size: 24rpx;
+  text-align: justify;
+  line-height: 40rpx;
+  margin-bottom: 12rpx;
+  display: block;
+  box-sizing: border-box;
+}
+.buy-tit{
+  font-size: 40rpx;
+  /* font-weight: bolder; */
+  text-align: center;
+  margin-bottom: 40rpx;
+}
+.mask .buytip-layer{
+  padding: 60rpx; 
+}
+
+.buy-layer .btn-wrapper{
+  display: flex;
+  justify-content: space-between;
+  padding-top: 20rpx;
+}
+.buy-layer .btn-wrapper .button{
+  border: 0;
+  min-width: 0;
+  box-sizing: border-box;
+  color: #999999;
+  width: 200rpx;
+  border-radius: 5rpx;
+}
+.buy-layer .btn-wrapper .button.primary{
+  border:0;
+  color: #fff;
+}
+.buy-layer .btn-wrapper .button.cancel{
+  border:0;
+  background-color: #CCCCCC;
+  color: #fff;
+}
 </style>