新增能量赠送

pages/home/jl/index.js

@@ -19,7 +19,12 @@ Page({
         pickerValue: [0, 0],
         prayerContent:'', //祈祷内容
         showSexLogo:false,//不展示形象修改按钮
-        showPray:false //显示祈祷弹层
+        showPray:false, //显示祈祷弹层
+        showIsPray:false, //显示取消祈祷弹层
+        showEnergy:false, //显示赠送能量弹层
+        showEnergyToast:false, //显示赠送能量提示
+        showEnergySuccess:false, //赠送成功提示
+        showEnergyFail:false, //赠送成功提示
     },
     ShowOrNotLogoS(){
         this.setData({singleShow:!this.data.singleShow})
@@ -93,11 +98,33 @@ Page({
         })
         console.log(this.data.prayerContent);
     },
+    openEnergy(){
+        this.setData({
+            showEnergy:!this.data.showEnergy
+        })
+    },
+    cancelEnergy(){
+        this.setData({
+            showEnergy:!this.data.showEnergy
+        })
+    },
+    cancelEnergyToast(){
+        this.setData({
+            showEnergyToast:false,
+            showEnergyFail:false
+        })
+    },
     openPray(){
+        if(this.data.userInfo.prayerEndTime){
+            this.setData({
+                showIsPray:!this.data.showIsPray
+            })
+        }else{
             this.setData({
                 showPray:!this.data.showPray,
                 prayerContent:''
             })
+        }
     },
     onPickerChange(e){
         if(e.detail.value[0] === this.data.hours){
@@ -115,8 +142,7 @@ Page({
     },
     getUserInfo(){
         req.getRequest('/api/user/curt',{}).then((res)=>{
-            if(res.data.code==200){
+            if(res.data.code===200){
-                console.log(res.data.data);
                 const pendantEnergy = res.data.data.pendantEnergy
                 const minute = pendantEnergy * 6
                 const hours = Math.floor(pendantEnergy / 60); // 计算小时数
@@ -131,7 +157,7 @@ Page({
                     minute:minute,
                     pendantEnergy:pendantEnergy
                 })
-                console.log(this.data.userInfo);
+                // console.log(this.data.userInfo);
             }
            }).catch((err)=>{
             console.log(err);
@@ -151,12 +177,17 @@ Page({
                 message: '能量不足',
             });
         }
-        console.log(prayerEnergy);
+        if(this.data.prayerContent.length > 11){
+            return Toast({
+                context: this,
+                selector: '#t-toast',
+                message: '祈祷内容不能超过11个字',
+            });
+        }
         req.patchRequest('/api/user/curt/prayer',{
             prayerContent:this.data.prayerContent,
             prayerEnergy:prayerEnergy
         }).then((res) => {
-            console.log(res);
             if(res.data.code === 200){
                 Toast({
                     context: this,
@@ -170,11 +201,52 @@ Page({
                     message: res.data.msg,
                 });
             }
+            this.getUserInfo()
             this.openPray()
         }).catch((err) => {
             console.log('祈祷失败',err);
         })
     },
+    btnCancel(){
+        console.log('111');
+        req.patchRequest('/api/user/curt/prayer/stop',{}).then((res)=>{
+            Toast({
+                context: this,
+                selector: '#t-toast',
+                message: '已结束祈祷',
+            });
+            this.openPray()
+            this.getUserInfo()
+        })
+    },
+    btnShare(){
+        console.log('赠送能量');
+        req.patchRequest('/api/user/curt/give-crystalline-energy-to-lover',{}).then((res)=>{
+            console.log(res);
+            if(res.data.code === 200){
+                this.setData({
+                    showEnergySuccess:!this.data.showEnergySuccess,
+                    showEnergy:!this.data.showEnergy
+                })
+                return setTimeout(()=>{
+                    this.setData({
+                        showEnergySuccess:!this.data.showEnergySuccess,
+                    })
+                },2000)
+            }
+            this.setData({
+                showEnergy:!this.data.showEnergy,
+                showEnergyToast:!this.data.showEnergyToast,
+                toast:res.data.msg
+            })
+        }).catch((err)=>{
+            console.log('111');
+            this.setData({
+                showEnergyFail:!this.data.showEnergyFail,
+                showEnergy:!this.data.showEnergy
+            })
+        })
+    },
 
     /**
      * 生命周期函数--监听页面加载

pages/home/jl/index.wxml

@@ -36,11 +36,27 @@
 </swiper-item>
 
   <swiper-item class="call1"><!--情侣页面-->
+    <!-- 未祈祷页面 -->
+    <view wx:if="{{ !userInfo.prayerEndTime }}">
         <t-image class="txl" src="{{userInfo.avatar}}"></t-image>
         <view class="txtextl">{{userInfo.nick}}</view><!--头像名字1-->
         <view class="jiuchan"></view>
         <t-image class="txr" shape="circle" src="{{loverInfo.avatar}}"></t-image><!--头像2-->
         <view class="txtextr">{{loverInfo.nick}}</view><!--头像名字2-->
+    </view>
+    <!-- 有祈祷页面 -->
+    <view wx:else>
+        <t-image class="txl txl-qd" src="{{userInfo.avatar}}"></t-image>
+        <view class="txtextl-qd">
+            <t-icon name="chevron-right-double" size="24" color="#DE868F"/>
+            <view class="text-qd">
+                <view class="top">{{ userInfo.prayerContent }}</view>
+                <view>你已为Ta祈祷  02:20:13</view>
+            </view>
+            <t-icon name="chevron-right-double" size="24" color="#DE868F"/>
+        </view>
+        <t-image class="txr txr-qd" shape="circle" src="{{loverInfo.avatar}}"></t-image><!--头像2-->
+    </view>
     <dic class="bkg1"></dic><!--黄色点背景图-->
     <div class="bkg3"></div><!--点点点，最底层背景图-->
     
@@ -70,7 +86,7 @@
 
     <view class="dcleft">
         <t-progress class="dcleft1" theme="circle"  percentage="70"  color="#f76229" label=""  t-class-bar="dcleft1" />
-        <view class="dcbs"></view>
+        <view class="dcbs" bindtap="openEnergy"></view>
     </view><!--下方左侧块-->
     <!--下方左侧块-->
     <view class="lovepic"></view>
@@ -120,7 +136,7 @@
 
 </swiper>
 
-<!-- 弹层 -->
+<!-- 未祈祷弹层 -->
 <view class="pray" wx:if="{{showPray}}">
     <view class="dialog">
         <view class="dialog-item">
@@ -137,7 +153,7 @@
         </view>
     </view>
     <view class="timing">
-        <view class="timing-title">你还有{{pendantEnergy}}%水晶能量，可为对方祈祷{{hours}}小时{{minute}}分</view>
+        <view class="timing-title">你还有{{userInfo.pendantEnergy}}%水晶能量，可为对方祈祷{{hours}}小时{{minute}}分</view>
         <t-toast id="t-toast" />
         <view class="picker">
             <picker-view value="{{pickerValue}}" bindchange="onPickerChange" indicator-class="active">
@@ -152,6 +168,67 @@
     </view>
 </view>
 
+<!-- 已祈祷弹层 -->
+<view class="pray" wx:if="{{showIsPray}}">
+    <view class="dialog">
+        <t-toast id="t-toast" />
+        <view class="dialog-text">
+            <view>要结束祈祷吗？</view>
+            <view>将返还23%星座能量</view>
+            <view>溢出能量将消失</view>
+        </view>
+        <view class="dialog-btn">
+            <button bindtap="openPray">返回</button>
+            <button bindtap="btnCancel">结束</button>
+        </view>
+    </view>
+</view>
+
+<!-- 赠送能量弹层 -->
+<view class="pray" wx:if="{{showEnergy}}">
+    <view class="dialog">
+        <t-toast id="t-toast" />
+        <view class="dialog-text">
+            <view>你要将能量共享给对方吗？</view>
+            <view>溢出能量将保留</view>
+        </view>
+        <view class="dialog-btn">
+            <button bindtap="cancelEnergy">取消</button>
+            <button bindtap="btnShare">共享</button>
+        </view>
+    </view>
+</view>
+<!-- 赠送能量提示 -->
+<view class="pray" wx:if="{{showEnergyToast}}">
+    <view class="dialog">
+        <t-toast id="t-toast" />
+        <view class="dialog-text">
+            <view>{{toast}}</view>
+            <view>无法进行共享哦！</view>
+        </view>
+        <view class="dialog-btn">
+            <button bindtap="cancelEnergyToast">好的</button>
+        </view>
+    </view>
+</view>
+<!-- 赠送能量成功 -->
+<view class="energy-success" wx:if="{{showEnergySuccess}}">
+    <view>谢谢你送我的能量！</view>
+    <view>真是太好了~</view>
+</view>
+<!-- 赠送能量失败 -->
+<view class="pray" wx:if="{{showEnergyFail}}">
+    <view class="dialog">
+        <t-toast id="t-toast" />
+        <view class="dialog-text">
+            <view>赠送能量失败啦～</view>
+            <view>是不是网络出问题了？</view>
+        </view>
+        <view class="dialog-btn">
+            <button bindtap="cancelEnergyToast">好的</button>
+        </view>
+    </view>
+</view>
 
 <div class="jltxt" bindtap="go2Jlai">精灵 AI</div>
 

pages/home/jl/index.wxss

@@ -192,6 +192,12 @@
     background-image: url(https://xzjl-1257436036.cos.ap-nanjing.myqcloud.com/jl/tx.png);
 }
 
+.txl-qd {
+    position: absolute;
+    left: 80rpx;
+    margin-left:0;
+}
+
 .txr{
     position:absolute;
     width:72rpx;
@@ -203,6 +209,11 @@
     background-image: url(https://xzjl-1257436036.cos.ap-nanjing.myqcloud.com/jl/tx.png);
 }
 
+.txr-qd {
+    position: absolute;
+    right: 80rpx;
+}
+
 .txtextl{
     position:absolute;
     width:166rpx;
@@ -214,6 +225,33 @@
     font-size: 27rpx;
     text-align: right;
 }
+
+.txtextl-qd{
+    position: absolute;
+    top: 130rpx;
+    left: 154rpx;
+    width: 444rpx;
+    height: 90rpx;
+    display: flex;
+    align-items: center;
+}
+
+.text-qd {
+    width: 360rpx;
+    color: rgba(108, 108, 108, 1);
+    font-size: 14px;
+}
+
+.text-qd .top {
+    color: #DE868F;
+}
+
+.text-qd view {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
 .jiuchan{
     position: absolute;
     width:47.33rpx;
@@ -736,6 +774,20 @@ background-image: url(https://xzjl-1257436036.cos.ap-nanjing.myqcloud.com/jl/ysf
     font-size: 14px;
 }
 
+.dialog-text {
+    height: 300rpx;
+    color: rgba(108, 108, 108, 1);
+    font-size: 18px;
+    text-align: center;
+    font-weight: 400;
+    padding-top: 60rpx;
+    box-sizing: border-box;
+}
+
+.dialog-text view {
+    margin-bottom: 30rpx;
+}
+
 .timing {
     position: absolute;
     bottom: 0;
@@ -777,3 +829,19 @@ background-image: url(https://xzjl-1257436036.cos.ap-nanjing.myqcloud.com/jl/ysf
 picker-view-column {
     height: 364rpx;
 }
+
+.energy-success {
+    position: absolute;
+    top: 500rpx;
+    right: 30rpx;
+    width: 286rpx;
+    height: 160rpx;
+    opacity: 0.9;
+    border-radius: 15px;
+    background-color: rgba(255, 255, 255, 1);
+    color: #6C6C6C;
+    font-size: 14px;
+    padding: 36rpx 0 0 20rpx;
+    box-sizing: border-box;
+    box-shadow: 1px 2px 6px 0px rgba(0, 0, 0, 0.4);
+}