商品详情弹框

pages/integral/integral.js

@@ -13,7 +13,12 @@ Page({
     couponList: [],
     channelid: '',
     shopid: '',
-    storeid: ''
+    storeid: '',
+    bodyHidden: true,
+    bgStatus: false,
+    scorePhone: false,
+    animationData: {},
+    integralIngo:{},
   },
 
   /**
@@ -128,6 +133,67 @@ couponListView: function(data) {
         })
     console.log(this.data.couponList)
     }
-}
+ },
+// 点击标识点触发
+detailsClick(row) {
+    this.hideModal();
+    this.row = row.currentTarget.dataset.info
+    console.log(this.row)
+    if (this.row.detail_type === 0) {
+        this.row.detailArr = this.row.detail.split('\n')
+    } else {
+        this.row.detailArr = row.detail
+    }
+    this.setData({
+        integralIngo: this.row,
+    })
+    console.log(this.data.integralIngo)
+    setTimeout(() => {
+        this.showDodal();
+    }, 100)
+},
+
+showDodal() {
+    var that = this;
+    // 显示遮罩层
+    var animation = wx.createAnimation({
+        duration: 150,
+        timingFunction: "linear",
+        delay: 0
+    })
+    this.setData({
+        bgStatus: true,
+        bodyHidden: false
+    })
+    
+    that.animation = animation
+    animation.translateY(-500).step()
+    that.setData({
+        animationData: animation.export()
+    })
+},
+
+//隐藏对话框
+hideModal() {
+    var that = this;
+    console.log(that.data)
+    // 隐藏遮罩层
+    var animation = wx.createAnimation({
+        duration: 150,
+        timingFunction: "linear",
+        delay: 0
+    })
+    this.setData({
+        bodyHidden: true,
+        bgStatus: false,
+        scorePhone: false,
+    })
+    
+    that.animation = animation
+    animation.translateY(0).step()
+    that.setData({
+        animationData: animation.export()
+    })
+},
        
 })

pages/integral/integral.wxml

@@ -7,14 +7,14 @@
       </swiper-item>
     </block>
   </swiper>
-  
-<!-- 我的卡券 -->
-<view class="my-card">
-  <view class="card-content">
-    <text>我的兑换</text>
+
+  <!-- 我的卡券 -->
+  <view class="my-card">
+    <view class="card-content">
+      <text>我的兑换</text>
+    </view>
   </view>
 </view>
-</view>
 <view class="exchange-style">
   <view class="exchange-text">免费兑换</view>
 </view>
@@ -28,7 +28,7 @@
       <view class="content-details">
         <!-- <text>商品详情 ></text> -->
       </view>
-      <view class="content-details">
+      <view class="content-details" catchtap="detailsClick" data-info="{{item}}">
         <text>商品详情 ></text>
       </view>
     </view>
@@ -50,4 +50,41 @@
   <view class="receive-info">
     <button v-if="phone === '********'" type="default" hover-class="navigator-hover" class="receive-btn" open-type="getPhoneNumber">立即领取</button>
   </view>
+</view>
+
+<!-- 弹出框背景黑化 -->
+<view class="background-style" wx:if="{{bgStatus}}" catchtap="hideModal"></view>
+<!-- 弹出框 -->
+<view animation="{{animationData}}" class="commodity_attr_box">
+  <view class="eject-close">
+    <text class="eject-iconfont eject-iconguanbi1" catchtap="hideModal"></text>
+  </view>
+  <view class="eject-commodity">
+    <view class="eject-img">
+      <image src="{{integralIngo.image}}" mode="" class="eject-image"></image>
+    </view>
+    <view class="eject-text">
+      <view class="eject-text-title">
+        <text>{{integralIngo.name}}</text>
+      </view>
+      <view class="eject-text-integral">
+        <text>{{integralIngo.integral}} 移动积分</text>
+      </view>
+    </view>
+  </view>
+  <view class="eject-explain">
+    <view class="eject-explain-title">
+      <text>商品详情：</text>
+    </view>
+    <view class="eject-explain-content">
+      <scroll-view scroll-top="0" scroll-y="true" style="height: 550rpx;">
+        <view wx:for="{{integralIngo.detailArr}}" wx:key="key" wx:if="{{integralIngo.detail_type == 0}}">
+          {{item}}
+        </view>
+        <view wx:if="{{integralIngo.detail_type == 1}}" style="width: 100%;height: 100%;">
+          <image style="width: 100%;height: 100%;" src="{{integralIngo.detailArr}}" mode="widthFix"></image>
+        </view>
+      </scroll-view>
+    </view>
+  </view>
 </view>

pages/integral/integral.wxss

@@ -157,4 +157,73 @@ page{
   color: white !important;
   border-radius: 0 !important;
   border: none !important;
+}
+
+.background-style{
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.commodity_attr_box{
+  position: fixed;
+  height: 1000rpx;
+  left: 0;
+  right: 0;
+  bottom: -1000rpx;
+  background: white;
+  z-index: 6;
+  padding: 40rpx 38rpx 0rpx 38rpx;
+  box-sizing: border-box;
+  border-top-left-radius: 20rpx;
+  border-top-right-radius: 20rpx;
+}
+
+.eject-close {
+  text-align: right;
+}
+.eject-text {
+  font-size: 52rpx;
+  color: rgb(153, 153, 153);
+}
+
+.eject-commodity {
+  display: flex;
+}
+.eject-img {
+  width: 168rpx;
+  height: 168rpx;
+  border: 2rpx solid #F2F6FC;
+}
+.eject-image {
+  width: 100%;
+  height: 100%;
+}
+
+.eject-text {
+  padding-left: 24rpx;
+  height: 168rpx;
+  line-height: 84rpx;
+}
+.eject-text-title {
+  color: rgb(51, 51, 51);
+  font-size: 34rpx;
+  font-weight: 600;
+}
+
+.eject-text-integral {
+  font-size: 28rpx;
+  color: #fa7200;
+  font-weight: 600;
+}
+
+.eject-explain {
+  color: rgb(153, 153, 153);
+  font-size: 28rpx;
+}
+.eject-explain-title {
+  margin: 40rpx 0;
 }