edit

lib/dever/config.js

@@ -8,7 +8,7 @@ const request = {
 	//	服务器接口地址
 
 	host: "http://192.168.2.70/dreamland/",
-	host: "http://192.168.3.66/dreamland/",
+	//host: "http://192.168.3.66/dreamland/",
 	
 	//	请求的参数	
 	data: {},

pages/dream/buy.vue

@@ -1,41 +1,43 @@
-<template name="buy">
-	<view class="buy-layer" :class="show ?'slidein':''">
-	  <form bindsubmit='doBuy'>
-	    <view class="tit ">正在购买</view>
-	    <view class='msg' bindtap='handleTip'>查看购买说明</view>
-	    <scroll-view scroll-y class="list">
-	      <view wx:for="{{buylist}}" class="item {{buyIndex === index?'active':''}}" data-index="{{index}}" data-buyid="{{item.id}}" data-cash="{{item.cash}}" data-num="{{item.num}}" bindtap='selectBuy' wx:key="{{item.id}}">
-	        <text class='name'>{{item.name}}</text>
-	        <text>￥{{item.price}}</text>
-	      </view>
-	    </scroll-view>
-	    <view class="btn-wrapper ">
-	      <view class="button cancel" bindtap="hideBuy">取消
-	      </view>
-	      <view class="button primary ">确认
-	        <button formType="submit"></button>
-	      </view>
-	    </view>
-	  </form>
-	</view>
-	<view class="mask" wx:if="{{tipShow}}">
-	  <view class="buytip-layer layer " catchtap="handleStop">
-	    <view class='buy-tit'>购买说明</view>
-	    <rich-text class='p' nodes='{{buydesc}}'></rich-text>
-	    <view class="btn-wrapper">
-	      <view class="button" bindtap="hideTip">我知道了</view>
-	    </view>
-	  </view>
-	</view>
-	<view class="mask success-tip" wx:if="{{paysucshow}}">
-	  <view class="layer">
-	    <view class='tit'>支付成功</view>
-	    <view class='msg'>您已成功购买{{paycount}}本电子刊</view>
-	    <view class="btn-wrapper">
-	      <view class="button" bindtap="gotoCodeDetail">查看兑换码</view>
-	      <view class="button" bindtap="gotoRead">立即阅读</view>
-	    </view>
-	  </view>
+<template name="buy">
+	<view>
+		<view class="buy-layer" :class="show ?'slidein':''">
+		  <form bindsubmit="doBuy">
+			<view class="tit ">购买{{fetch.info.ticket_name}}</view>
+			<view class="msg" @click="showTip">查看{{fetch.info.ticket_name}}说明</view>
+			<scroll-view scroll-y class="list">
+			  <view v-for="(v, k) in fetch.buy" :key="k" class="item" :class="index === k?'active':''" @click="buy(k)">
+				<text class="name">{{v.name}}</text>
+				<text>￥{{v.price}}</text>
+			  </view>
+			</scroll-view>
+			<view class="btn-wrapper ">
+			  <view class="button cancel" @click="hideBuy">取消
+			  </view>
+			  <view class="button primary" :style="bgcolor" @click="buyAct">确认
+				<button formType="submit"></button>
+			  </view>
+			</view>
+		  </form>
+		</view>
+		<view class="mask" v-if="tip">
+		  <view class="buytip-layer layer " catchtap="handleStop">
+			<view class="buy-tit">购买说明</view>
+			<rich-text class="p" :nodes="fetch.info.buy_content"></rich-text>
+			<view class="btn-wrapper">
+			  <view class="button" @click="hideTip" :style="bgcolor">我知道了</view>
+			</view>
+		  </view>
+		</view>
+		<view class="mask success-tip" v-if="pay">
+		  <view class="layer">
+			<view class="tit">支付成功</view>
+			<view class="msg">您已成功购买{{paycount}}张{{fetch.info.ticket_name}}</view>
+			<view class="btn-wrapper">
+			  <view class="button" @click="gotoCodeDetail">赠送{{fetch.info.ticket_name}}</view>
+			  <view class="button" @click="gotoRead">立即进入</view>
+			</view>
+		  </view>
+		</view>
 	</view>
 </template>
 
@@ -43,23 +45,52 @@
 export default {
 	name: "buy",
 	props: {
-		show : false
+		id : 0,
+		bgcolor : '',
+		color : '',
 	},
 	data() {
 		return {
-			
+			fetch : {
+				buy : [],
+				info : {},
+			},
+			index : 0,
+			pay : false,
+			tip : false,
+			show : false,
 		}
 	},
+	mounted() {
+		this.getData();
+	},
 	methods:{
-		showDrawer : function(key) {
-			if (key) {
-				this.$emit('showDrawer', key);
-			} else {
-				this.Dever.alert('您点错了吧~');
-			}
+		getData : function() {
+			var self = this;
+			this.Dever.get(this, 'app/collection/?l=api.getBuy', {id:this.id}, function(t) {
+				self.show = true;
+			});
+		},
+		//购买
+		buy : function(index) {
+			this.index = index;
+		},
+		//拉起支付
+		buyAct : function() {
+			var self = this;
+			this.Dever.alert('拉起支付', 'none', function() {
+				self.$emit('view');
+			});
+		},
+		showTip : function() {
+			this.tip = true;
+		},
+		hideTip : function() {
+			this.tip = false;
 		},
-		handle : function(e) {
-			this.showDrawer(this.button[e.index].key);
+		hideBuy : function() {
+			this.show = false;
+			this.$emit('hideBuy');
 		}
 	},
 	components:{
@@ -67,7 +98,6 @@ export default {
 	}
 }
 </script>
-</script>
 
 <style>
 .buy-layer{
@@ -100,7 +130,46 @@ export default {
   text-decoration: underline;
   color: #666;
 }
+.btn-wrapper {
+  justify-content: space-around;
+  width: 100%;
+}
 
+.button {
+  height: 80rpx;
+  border: 1rpx solid #cc1619;
+  color: #cc1619;
+  font-size: 30rpx;
+  min-width: 300rpx;
+  border-radius: 40rpx;
+  text-align: center;
+  line-height: 80rpx;
+  display: block;
+  position: relative;
+}
+.button>button{
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  opacity: 0;
+}
+
+.button.big {
+  width: 420rpx;
+}
+
+.button.primary {
+  background-color: #000;
+  color: #fff;
+}
+
+.button.blk {
+  background-color: #000;
+  color: #fff;
+  border-color: #000;
+}
 .buy-layer .btn-wrapper{
   display: flex;
   justify-content: space-between;
@@ -148,7 +217,7 @@ export default {
   align-items: center;
 }
 .list .item .name:before{
-  content: '';
+  content: "";
   width: 40rpx;
   height: 40rpx;
   display: block;
@@ -230,5 +299,53 @@ export default {
   background-color: #000;
   color: #fff;
   border-radius: 0 0 5rpx 0;
+}
+.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;
 }
 </style>

pages/dream/index.vue

@@ -11,22 +11,25 @@
 			
 			<view class="btn-ctrls">
 				
-				<view class="btn-wrapper space-between" v-if="fetch.button" :style="fetch.button.style">
+				<view class="btn-wrapper space-between" v-if="fetch.button" :style="fetch.button.bgcolor">
 					<view class="button primary big" :style="fetch.button.color" v-if="fetch.button.name && fetch.button.name[0]" @click="goView">{{fetch.button.name[0]}}</view>
 					<block v-if="fetch.button.name && fetch.button.name[1]">
 						<text class="spliter"></text>
-						<view class="button primary" :style="fetch.button.color">{{fetch.button.name[1]}}</view>
+						<view class="button primary big" :style="fetch.button.color">{{fetch.button.name[1]}}</view>
 					</block>
 				</view>
 				<view class='dots'>
 					<text :class="swiper.index == k ? 'cur' : ''" v-for="(v, k) in fetch.items" :key="k"></text>
 				</view>
-				
+			</view>
+			<view v-if="buyState">
+				<buy :id="id" :bgcolor="fetch.button.bgcolor" :color="fetch.button.color" @hideBuy="hideBuy" @view="view"></buy>
 			</view>
 		</view>
 	</gracePage>
 </template>
-<script>
+<script>
+import buy from "@/pages/dream/buy.vue";
 export default{
 	data() {
 		return {
@@ -35,11 +38,13 @@ export default{
 				index : 0,
 				circular : true,
 			},
-			fetch: {
+			fetch: {
+				page_id : 0,
 				is_buy : false,
 				info : {},
 				button : {}
-			}
+			},
+			buyState : false,
 		}
 	},
 	onLoad(option) {
@@ -55,18 +60,26 @@ export default{
 			this.swiper.index = e.detail.current;
 		},
 		getData : function() {
-			var self = this;
 			this.Dever.get(this, 'app/collection/?l=api.getInfo', {id:this.id});
 		},
 		goView : function() {
 			//是否购买
 			if (!this.fetch.is_buy) {
-				
+				this.buyState = true;
 			} else {
-				this.Dever.location('dream/view?id=1&page_id=2&index=0');
+				this.view();
 			}
+		},
+		view : function() {
+			this.Dever.location('dream/view?id='+this.id+'&page_id='+this.fetch.page_id+'&index=0');
+		},
+		hideBuy : function() {
+			this.buyState = false;
 		}
-	},
+	},
+	components:{
+		buy
+	}
 }
 </script>
 <style>