xiaoe_mp_npm 0.2.2-beta1 → 0.2.2-beta2

package/miniprogram_dist/PayModule/button/index.wxml

@@ -0,0 +1,8 @@
+<!--src/payModule/index.wxml-->
+<view class="pay-btn">
+    <button
+        class="theme-customize-bg  btn-default {{invalidBtn ? 'invalidBtn' :''}}"
+        style="{{Styles}}"
+        bindtap="goPay"
+        >{{ btnTxt }}</button>
+</view>

package/miniprogram_dist/PayModule/button/index.wxss

@@ -0,0 +1,28 @@
+/* 主题色 */
+.theme-customize-bg {
+  background-color: #1472FF !important;
+}
+.theme-customize-border {
+  border-color: #1472FF !important;
+}
+.theme-customize-font {
+  color: #1472FF !important;
+}
+.theme-customize-light-new {
+  background-color: #9db8f1 !important;
+}
+.theme-customize-bg-light {
+  background-color: #9db8f1 !important;
+}
+.pay-btn .btn-default {
+  width: 240rpx;
+  height: 80rpx;
+  line-height: 80rpx;
+  font-size: 32rpx;
+  border-radius: 40rpx;
+  background-color: #105cfb;
+  color: #ffffff;
+}
+.pay-btn .invalidBtn {
+  opacity: 0.2;
+}

package/miniprogram_dist/PayModule/index/index.js

@@ -0,0 +1,254 @@
+// src/payModule/index/index.js
+import {debounce,isFunction} from "../../common/utils/index"
+import api from "../../common/api/pay"
+import { sensorLog } from "live-mp-tools";
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+        //按钮默认文案
+         btnTxt:{
+            type:String,
+            value:'确认支付'
+        },
+        //业务侧样式
+        Styles:{
+            type:String,
+            value:""
+        },
+        //是否禁止支付
+        invalidBtn:{
+            type:Boolean,
+            value:false
+        },
+         //支付前支付参数
+         prePayInfo:{
+            type:Object,
+            value:{}
+        },
+        //异步操作校验
+        checkState:{
+            type:Boolean,
+            value:true
+        },
+        // //业务侧校验结果
+        checkBefore:{
+            type:Boolean,
+            value:true
+        },
+        // //支付后处理各个业务侧的回调
+
+        //支付参数
+        payParams:{
+            type:Object,
+            value:{}
+        },
+        //支付后的参数
+        afterPay: {
+            type: Object,
+            value: () => {
+                return {
+                    callBack: null,
+                };
+            },
+        },
+        //埋点数据
+        aliveInfo:{
+            type: Object,
+            value:{}
+        },
+        sensorReportParams:{
+            type: Object,
+            value:{}
+        }
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        showWechatLoading:false,
+        payResult:{} //支付信息
+    },
+
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        goPay:debounce(function ()  {
+          
+            // 业务侧支付前参数检查 checkBeforePay  
+            this.triggerEvent('checkBeforePay')
+            if(!this.data.checkBefore){
+                return false
+            }
+            //异步批价校验
+            this.triggerEvent('checkBeforePayAsync')
+            if (this.data.checkState) {
+                this.submit();
+            }
+        }, 3000,true),
+        sensorLogPay:function(result){
+            let { aliveInfo, sensorReportParams, payParams } = this.properties
+            sensorLog.sensors.track('click_butt',{
+                page_id:'e_alive#mini#first#alive_room',
+                page_name:'直播间页面',
+                l_program: '鹅直播',
+                page_path: '鹅直播#小程序#首页#直播间页面',
+                page_button: "提交订单",
+                client: "小程序",
+                order_id:result.order_id ? result.order_id :'',
+                goods_id: payParams.resource_id ? payParams.resource_id :'',
+                app_id: aliveInfo.app_id,
+                c_user_id: aliveInfo.user_id,
+                union_id: wx.getStorageSync('userInfo').universal_union_id,
+                current_role: sensorReportParams.current_role ? sensorReportParams.current_role :'',
+                resource_id: aliveInfo.alive_id,
+                type: sensorReportParams.type ? sensorReportParams.type :'',
+                cmm1: sensorReportParams.alive_type ? sensorReportParams.alive_type :'',
+                cmm2: sensorReportParams.version_type ? sensorReportParams.version_type : '',
+                comm2: sensorReportParams.pay_type ? sensorReportParams.pay_type :''
+              })
+        },
+        submit:function(){
+            // 0元购专属loading
+            if (this.data.prePayInfo?.rate_price === 0) {
+                console.log('0元支付')
+                this.setData({
+                    showWechatLoading:true
+                })
+            } else {
+                console.log('非0元支付')
+                wx.showLoading({
+                    title: '加载中',
+                })
+            }
+          
+            this.pay({
+                ...this.data.payParams
+            }).then((res) => {
+                wx.hideLoading()
+                //埋点
+                this.sensorLogPay(res.data.data)
+                if (res.data && res.data.code === 0) {
+                     //支付后处理各个业务侧的回调
+                     this.setData({
+                        payResult : res.data.data
+                     })
+                    this.triggerEvent('checkBeforePayAsync',res.data.data)
+                    //处理支付
+                    this.handlePayResult(res.data.data);
+                }else{
+                    wx.showToast({
+                        title: res.data.msg,
+                        icon: 'none',
+                        duration: 2000
+                    })
+                }
+            })
+        },
+        //调支付接口
+        pay(params){
+            console.log('params',params)
+            return api.pay(params).then(res => {
+                this.setData({
+                    showWechatLoading:false
+                })
+                if (res.data.code !== 0) {
+                    wx.showToast({
+                        title: res.data.msg,
+                        icon: 'none',
+                        duration: 2000
+                      })
+                }
+                return res;
+            }).catch(err => {
+                this.setData({
+                    showWechatLoading:false
+                })
+            });
+        },
+        //处理支付结果
+        handlePayResult(result){
+            if (result.pay_state === "SUCCESS") {
+                this.payComplete(result);
+                return;
+            }else{
+                this.miniProPay(result);
+            }
+        },
+        miniProPay(payConfig){
+            let that =this
+            wx.requestPayment({
+                timeStamp: payConfig.timeStamp,
+                nonceStr: payConfig.nonceStr,
+                package: payConfig.package,
+                signType: payConfig.signType,
+                paySign: payConfig.paySign,
+                success (res) {
+                    // if (res.errMsg == "requestPayment:ok"){
+                    //     that.payComplete()
+                    // }
+                },
+                fail (res) {
+                    // that.payFail()
+                },
+                complete(res){
+                    that.queryOrderState({
+                        order_id: that.data.payResult.order_id,
+                        // front_callback: JSON.stringify(res || {}),
+                        app_id: that.properties.aliveInfo.app_id,
+                        front_callback: '{}', 
+                    }).then((data) => {
+                        that.resolvePayResult(data.data);
+                    });
+                }
+
+              })
+        },
+        // 支付后，查询订单状态
+        queryOrderState(payload) {
+            let params = {
+                ...payload
+            };
+            return api.query_call_back(params).then(data => {
+                return data;
+            }).catch(err => {
+                console.log(err)
+            });
+        },
+        // // 处理支付最终结果
+        resolvePayResult(res) {
+            if (res.code === 0) {
+                // 1、支付成功 3、取消支付 4、已关闭（微信方过期） 7，支付失败 -1其余都是处理中
+                const payOrderState = res.data.pay_order_state;
+                if (payOrderState === 1) {
+                    this.payComplete(res.data);
+                } else {
+                    wx.showToast({
+                        title: '您的订单未完成支付，请重新支付',
+                        icon: 'none',
+                        duration: 2000
+                    })
+                    this.payFail(payOrderState);
+                }
+            } else {
+                wx.showToast({
+                    title: '您的订单未完成支付，请重新支付',
+                    icon: 'none',
+                    duration: 2000
+                })
+                this.payFail();
+            }
+        },
+        //支付成功
+        payComplete(result){
+            this.triggerEvent('successCallback',result)
+        },
+         // 支付失败
+         payFail(result) {
+            this.triggerEvent('failCallback',result)
+        },
+    }
+})

package/miniprogram_dist/PayModule/index/index.json

@@ -0,0 +1,7 @@
+{
+    "component": true,
+    "usingComponents": {
+      "payButton": "../button/index",
+      "wechatLoading": "../wechatLoading/index"
+    }
+  }

package/miniprogram_dist/PayModule/index/index.wxml

@@ -0,0 +1,12 @@
+<!--src/payModule/index/index.wxml-->
+<view>
+    <!-- 0元微信支付loading态 -->
+    <wechatLoading wx:if="{{showWechatLoading}}"></wechatLoading>
+    <!-- 支付按钮 -->
+    <payButton
+        btnTxt="确认支付"
+        Styles="{{Styles}}"
+        invalidBtn="{{invalidBtn}}"
+        bind:goPay="goPay"
+    ></payButton>
+</view>

package/miniprogram_dist/PayModule/index/index.wxss

@@ -0,0 +1 @@
+/* src/payModule/index/index.wxss */

package/miniprogram_dist/PayModule/wechatLoading/index.js

@@ -0,0 +1,43 @@
+// src/payModule/wechatLoading/index.js
+Component({
+
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+    },
+    lifetimes: {
+        attached: function() {
+             this.initLoading()
+        },
+        detached: function() {
+          // 在组件实例被从页面节点树移除时执行
+        },
+      },
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        roundNum:1
+    },
+
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        initLoading() {
+            console.log('this',this.data.roundNum)
+            setInterval(() => {
+                if (this.data.roundNum < 3) {
+                    this.setData({
+                        roundNum: this.data.roundNum+1
+                    })
+                } else if (this.data.roundNum === 3) {
+                    this.setData({
+                        roundNum:1
+                    })
+                }
+            }, 500);
+        },
+    }
+})

package/miniprogram_dist/PayModule/wechatLoading/index.json

@@ -0,0 +1,4 @@
+{
+    "component": true,
+    "usingComponents": {}
+}

package/miniprogram_dist/PayModule/wechatLoading/index.less

@@ -0,0 +1,66 @@
+.loadingBox {
+    position: fixed;
+    width: 240rpx;
+    height: 240rpx;
+    background: rgba(0, 0, 0, 0.7);
+    border-radius: 10rpx;
+    top: 30%;
+    left: 50%;
+    margin-left: -120rpx;
+}
+
+.loadingIcon {
+    width: 72rpx;
+    height: 72rpx;
+    margin: 40rpx auto 10px auto;
+}
+
+.loadingIcon image {
+    float: left;
+    width: 100%;
+    height: 100%;
+}
+
+.loadingTitle {
+    width: 100%;
+    text-align: center;
+    line-height:50rpx;
+    font-size: 32rpx;
+    color: white;
+    margin-bottom: 20rpx;
+}
+
+.loadingAnimation {
+    width: 60rpx;
+    height: auto;
+    margin: 0 auto;
+    position: relative;
+}
+
+.loadingRound {
+    width: 10rpx;
+    height: 10rpx;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.3);
+}
+
+.loadingRoundWhite {
+    background: white;
+}
+
+.loadingRoundLeft {
+    position: absolute;
+    left: 0;
+    top: 0;
+}
+
+.loadingRoundMid {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.loadingRoundRight {
+    position: absolute;
+    right: 0;
+    top: 0;
+}

package/miniprogram_dist/PayModule/wechatLoading/index.wxml

@@ -0,0 +1,12 @@
+<!--src/payModule/wechatLoading/index.wxml-->
+<view class="loadingBox">
+    <view class="loadingIcon">
+        <image mode="scaleToFill" src="../../common/assets/images/pay/loading.svg"></image>
+    </view>
+    <view class="loadingTitle">微信支付</view>
+    <view class="loadingAnimation">
+        <view class="loadingRound loadingRoundLeft {{ roundNum ===1 ? 'loadingRoundWhite' : '' }}"></view>
+        <view class="loadingRound loadingRoundMid {{ roundNum ===2 ? 'loadingRoundWhite' : '' }}"></view>
+        <view class="loadingRound loadingRoundRight {{ roundNum ===3 ? 'loadingRoundWhite' : '' }}"></view>
+    </view>
+</view>

package/miniprogram_dist/PayModule/wechatLoading/index.wxss

@@ -0,0 +1,57 @@
+.loadingBox {
+  position: fixed;
+  width: 240rpx;
+  height: 240rpx;
+  background: rgba(0, 0, 0, 0.7);
+  border-radius: 10rpx;
+  top: 30%;
+  left: 50%;
+  margin-left: -120rpx;
+}
+.loadingIcon {
+  width: 72rpx;
+  height: 72rpx;
+  margin: 40rpx auto 10px auto;
+}
+.loadingIcon image {
+  float: left;
+  width: 100%;
+  height: 100%;
+}
+.loadingTitle {
+  width: 100%;
+  text-align: center;
+  line-height: 50rpx;
+  font-size: 32rpx;
+  color: white;
+  margin-bottom: 20rpx;
+}
+.loadingAnimation {
+  width: 60rpx;
+  height: auto;
+  margin: 0 auto;
+  position: relative;
+}
+.loadingRound {
+  width: 10rpx;
+  height: 10rpx;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.3);
+}
+.loadingRoundWhite {
+  background: white;
+}
+.loadingRoundLeft {
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+.loadingRoundMid {
+  margin-left: auto;
+  margin-right: auto;
+}
+.loadingRoundRight {
+  position: absolute;
+  right: 0;
+  top: 0;
+}

package/miniprogram_dist/Recommend/index.js

@@ -0,0 +1,58 @@
+/*
+ * @Descripttion: 
+ * @version: 
+ * @Author: conlinchen
+ * @Date: 2021-11-08 11:13:58
+ * @LastEditors: conlinchen
+ * @LastEditTime: 2021-11-08 11:44:35
+ */
+
+const computedBehavior = require('miniprogram-computed').behavior
+
+
+Component({
+  behaviors: [computedBehavior],
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    recommendData: {
+      type: Object,
+      value: {}
+      }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    srcTypeMap: { // 资源类型映射
+      audio: '音频',
+      image_text: '图文',
+      video: '视频',
+      member: '会员',
+      alive: '直播',
+      column: '专栏',
+      topic: '大专栏',
+      distribute_goods: '专栏',
+      content_market: '专栏',
+      term: '训练营',
+      big_class: '班课'
+    },
+  },
+
+  computed:{
+    recommendList(properties) {
+      return properties.recommendData.list || [];
+    }
+  },
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    handleItemClick(e){
+      let item = e.currentTarget.dataset.item;
+      this.triggerEvent('itemClick', item);
+    }
+  }
+})

package/miniprogram_dist/Recommend/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

package/miniprogram_dist/Recommend/index.less

@@ -0,0 +1,116 @@
+
+.recommend-block-wrapper{
+    padding: 32rpx 0 24rpx;
+  p{
+      font-size: 32rpx;
+      font-weight: 500;
+      color:#000000;
+      margin-left: 32rpx;
+      margin-bottom: 32rpx;
+      display: flex;
+      align-items: center;
+  }
+  .recommend-wrapper{
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 42rpx;
+      padding:0 32rpx;
+      flex-shrink: 0;
+      .recommend-cover-wrapper{
+          width: 240rpx;
+          height: 180rpx;
+          position: relative;
+          overflow: hidden;
+          .recommend-market-tag{
+              position: absolute;
+              top: 24rpx;
+              left: -50rpx;
+              width: 180rpx;
+              height: 30rpx;
+              line-height: 30rpx;
+              text-align: center;
+              -webkit-transform: rotate(-45deg);
+              transform: rotate(-45deg);
+              background: #ff002a;
+              color: #fff;
+              font-size: 20rpx;
+          }
+          .recommend-cover-img{
+              width: 240rpx;
+              height: 180rpx;
+              border-radius: 8rpx;
+          }
+          .recommend-cover-type{
+              font-size: 18rpx;
+              padding:0 12rpx;
+              height: 32rpx;
+              background-color: rgba(51, 51, 51, 0.6);
+              border-radius: 4rpx;
+              color: #fff;
+              border-radius: 4rpx;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              position: absolute;
+              bottom: 10rpx;
+              right: 10rpx;
+              backdrop-filter: blur(24rpx);
+          }
+      }
+      .recommend-cover-base-wrapper{
+          display: inline-flex;
+          flex-direction: column;
+          justify-content: space-between;
+          flex:1;
+          margin-left: 24rpx;
+          .recommend-cover-base-title{
+              overflow : hidden;
+              text-overflow: ellipsis;
+              display: -webkit-box;
+              -webkit-line-clamp: 2;
+              -webkit-box-orient: vertical;
+              -webkit-line-clamp:2;
+              word-break: break-all;
+              opacity: 1;
+              color: rgba(51,51,51,1);
+              font-size: 28rpx;
+              font-weight: 500;
+          }
+          .recommend-cover-base-price{
+              text-align: right;
+              font-weight:500;
+              color: rgba(51,51,51,1);
+              font-size: 28rpx;
+              font-weight: 500;
+              .price{
+                opacity: 1;
+                color: rgba(51,51,51,1);
+                font-size: 24rpx;
+                font-weight: 500;
+              }
+          }
+      }
+  }
+}
+.empty-recommend{
+  text-align: center;
+  padding: 80rpx 0;
+  // margin-top:0.8rpx;
+  // margin-bottom:0.8rpx;
+  img{
+      width: 176rpx;
+      height: 162rpx;
+  }
+  span{
+      margin-top: 32rpx;
+      font-size: 24rpx;
+      color:#999999;
+      display: block;
+      text-align: center;
+  }
+}
+.recommend-useful-coupon-wrapper{
+  border-bottom: 2rpx solid #F5F6F9;
+  margin: 40rpx 32rpx 0 32rpx;
+  padding-bottom: 40rpx;
+}