jufubao-base 1.0.208-beta1 → 1.0.209-beta1

package/src/components/JfbBaseRechargeNew/JfbBaseRechargeNew.vue

@@ -2,110 +2,467 @@
   <view
     class="jfb-base-recharge-new"
     @click="handleEditxSelect"
-    :class="{ editx : isEditx && active }"
+    :class="{ editx: isEditx && active }"
   >
     <!--#ifdef H5-->
     <view
       class="jfb-base-recharge-new__edit"
-      :class="{ editx : isEditx && active }"
+      :class="{ editx: isEditx && active }"
       v-if="isEditx && active"
     >
       <view class="jfb-base-recharge-new__edit-icon" @click="delEdit">删除</view>
     </view>
     <!-- #endif -->
     <view class="jfb-base-recharge-new__body">
-      <view>测试插件( {{containerId}} )</view>
+      <view class="recharge" :class="{active:tabsIndex === 'old'}" >
+        <view class="recharge-tab" v-if="tabs.length > 1">
+          <view
+            v-for="item in tabs"
+            :key="item.value"
+            @click.stop="handleTabs(item.value)"
+            :style="{ color: tabsIndex === item.value?mainColor: '#333'}"
+          >
+            <text>{{item.label}}</text>
+            <text class="recharge-tab-index" v-if="tabsIndex === item.value" :style="{background: tabsIndex === item.value?mainColor: '#fff'}"></text>
+          </view>
+        </view>
+        <view class="recharge-list">
+          <view class="recharge-item" v-if="tabsIndex === 'new'">
+            <view
+              class="recharge-pack"
+              v-for="item in newCardList"
+              :key="item.package_id"
+              :style="{backgroundImage: 'url('+  item['package_image'] +')'}"
+            >
+              <view class="name">{{item.package_name}}</view>
+              <view class="price">面值：{{item.card_point}}</view>
+              <view class="time">有效期：{{item['valid_date']}}</view>
+              <view class="line"></view>
+              <view class="buy">
+                <view>
+                  <xd-unit :is-old="false" :price="item.card_amount" color-new="#fff" :font-size="40" :icon-size=".3"></xd-unit>
+                </view>
+                <view @click="handleNewBuy(item)">{{buyBtnName}}</view>
+              </view>
+            </view>
+          </view>
+          <view class="recharge-item" v-if="tabsIndex === 'old'">
+            <view class="jfb-base-recharge-new__body-card">
+              <view>
+                <view class="jfb-base-recharge-new__body-form">
+                  <input v-model="cardNumber" :placeholder="card_num_placeholder" />
+                </view>
+                <view class="jfb-base-recharge-new__body-form">
+                  <input v-model="card_point" :placeholder="point_placeholder" />
+                </view>
+                <view
+                  v-if="amount && card_point"
+                  :style="{
+                    color: mainColor,
+                    fontSize: '24rpx',
+                    paddingBottom: '32rpx',
+                  }"
+                >支付金额：{{ amount }} 元</view>
+                <xd-button
+                  size="medium"
+                  type="primary"
+                  :bgColor="mainColor"
+                  @click="handleToRecharge"
+                  :disabled="!amount || !card_point || !cardNumber"
+                >提交</xd-button>
+              </view>
+            </view>
+          </view>
+        </view>
+        <view class="xd-notice-content" v-if="content">
+          <view>注意事项:</view>
+          <view v-html="content" class="prod_info"></view>
+        </view>
+        <view
+          v-if="isPreview && statusContent === true && content === '' "
+          class="xd-notice"
+          :style="{ color: dangerColor,fontSize: 24 + 'rpx',backgroundColor:noticeBgc }"
+        >注意事项未配置数据，因此改模块在正式环境将不显示</view>
+        <view class="bottom_btn-mask"></view>
+      </view>
     </view>
   </view>
 </template>
 
 <script>
-  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
-  import { jfbRootExec } from "@/utils/xd.event";
-  import JfbBaseRechargeNewMixin from "./JfbBaseRechargeNewMixin";
-  import { getContainerPropsValue } from "@/utils/xd.base";
-  import componentsMixins from "@/mixins/componentsMixins";
-  import extsMixins from "@/mixins/extsMixins";
-  export default {
-    name: "JfbBaseRechargeNew",
-    components: {
-      XdFontIcon
+import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+import XdButton from "@/components/XdButton/XdButton";
+import XdUnit from "@/components/XdUnit/XdUnit.vue";
+import { jfbRootExec } from "@/utils/xd.event";
+import JfbBaseRechargeNewMixin from "./JfbBaseRechargeNewMixin";
+import { getContainerPropsValue } from "@/utils/xd.base";
+import componentsMixins from "@/mixins/componentsMixins";
+import extsMixins from "@/mixins/extsMixins";
+import Color from "color";
+import getServiceUrl from "@/common/getServiceUrl";
+export default {
+  name: "JfbBaseRechargeNew",
+  components: {
+    XdFontIcon,
+    XdButton,
+    XdUnit
+  },
+  mixins: [componentsMixins, extsMixins, JfbBaseRechargeNewMixin],
+  data() {
+    return {
+      closeMask: true,
+      card_num_placeholder: "",
+      point_placeholder: "",
+      cardNumber: "",
+      card_point: "",
+      payPath: "",
+      amount: "",
+      timer:null,
+
+      //提示文案
+      isPreview: false,
+      content: "",
+      statusContent: false,
+      noticeBgc:'',
+
+      tabs: [],
+      tabsIndex: '',
+      buyBtnName: '立即购买' ,
+      newCardList:[],
+    };
+  },
+  watch: {
+    container(value,oldValue) {
+      if(JSON.stringify(value) === JSON.stringify(oldValue)) return;
+      if (this.$configProject['isPreview']) this.init(value)
+    },
+    card_point(value) {
+      if(this.timer) clearTimeout(this.timer);
+      this.timer = setTimeout(()=>{
+        if (value && value != 0) {
+          this.handleGetPrice();
+        }
+      }, 1000)
+    },
+  },
+  created() {
+    this.isPreview = this.$configProject.isPreview;
+    this.noticeBgc = Color(this.dangerColor).alpha(0.1).toString();
+    this.init(this.container);
+  },
+  methods: {
+    onJfbLoad(options) {
+      this.getContent();
     },
-    mixins: [
-      componentsMixins, extsMixins, JfbBaseRechargeNewMixin
-    ],
-    data() {
-      return {
+    /**
+     * @description 监听事件变化
+     * @param container {object} 业务组件对象自己
+     */
+    init(container) {
+      this.card_num_placeholder = getContainerPropsValue(this.container, "content.card_num_placeholder", "输入券号");
+      this.point_placeholder = getContainerPropsValue(this.container, "content.point_placeholder", "充值点数");
+      this.payPath = getContainerPropsValue(container, "content.payPath", {value: "",}).value;
+      this.buyBtnName = getContainerPropsValue(container, 'content.buyBtnName', '立即购买')
 
-        //todo
+      //标签设置
+      let tabs = getContainerPropsValue(container, "content.tabs", [{label:'新券购买', value:'new', check: true},{label:'旧券充值', value:'old', check: true}]);
+      let isNewCard = false;
+      this.tabs = tabs.filter(item=>{
+        if(item.check && item.value === 'new') {
+          isNewCard = true;
+        }
+        return item.check
+      });
+      if(tabs.length === 2) this.tabsIndex = 'old';
+      else {
+        if(tabs.length > 0)  this.tabsIndex = tabs[0].value;
       }
+      if(isNewCard) this.getNewCardList();
     },
-    watch: {
-      container(value, oldValue) {
-        if (JSON.stringify(value) === JSON.stringify(oldValue)) return;
-        if (this.$configProject['isPreview']) this.init(value)
-      },
+
+    handleTabs(value){
+      if(this.tabsIndex === value) return;
+      this.tabsIndex = value;
     },
-    created() {
-      this.init(this.container);
 
-      //todo
+    //==套餐购买=============
+    /**
+     * @description 获取套餐列表
+     */
+    getNewCardList(){
+      jfbRootExec("cardRechargeList", {
+        vm: this,
+        data: {},
+      })
+        .then((res) => {
+          this.newCardList = (res.list || []).map(item=>{
+            item['package_image'] = getServiceUrl(item['package_image']);
+            item['card_point'] = `${this.$xdUniHelper.divisionFloatNumber(item['card_point'],100)}`
+            if(item['card_unit']){
+              item['card_point'] = `${item['card_point']} ${item['card_unit']}`
+            }
+            return item;
+          });
+        })
+        .catch((error) => {
+          console.error(error);
+        });
+    },
+
+    handleNewBuy(item){
+      this.$xdShowLoading({});
+      jfbRootExec("cardRechargeNew", {
+        vm: this,
+        data: {
+          package_id: item.package_id,
+        },
+      })
+        .then((res) => {
+          this.$xdHideLoading();
+          this.toLink(res.pay_order_id, res.order_id)
+        })
+        .catch((err) => {
+          this.$xdHideLoading();
+          console.log(err, "err");
+        });
+
+    },
+    //==套餐购买=============
+
+    getContent() {
+      jfbRootExec("getListRechargeNewsContent", {
+        vm: this,
+        data: {
+          page_id: this.pageAttr["page_id"], //页面ID
+          container_id: this.containerId, //组件ID
+        },
+      })
+        .then((res) => {
+          if(res && res.list && res.list.length > 0) {
+            this.content = res.list[0].content;
+          }
+          this.statusContent = true;
+        })
+        .catch((error) => {
+          console.error(error);
+        });
+    },
+
+    toLink(pay_order_id, order_id){
+      this.$xdUniHelper.redirectTo({
+        url: `${this.payPath}?order_id=${pay_order_id}&main_order_id=${order_id}&type=recharge`,
+      }, false, true);
+    },
+
+    handleToRecharge() {
+      if (!this.cardNumber) {
+        this.$xdAlert({ content: "请输入卡券号" });
+        return;
+      }
+      if (!this.card_point) {
+        this.$xdAlert({ content: "请输入充值点数" });
+        return;
+      }
+
+      if( this.$configProject.isPreview) {
+        return;
+      }
+
+      this.$xdShowLoading({});
+      jfbRootExec("cardRecharge", {
+        vm: this,
+        data: {
+          card_number: this.cardNumber, //页面ID
+          card_point: this.card_point * 100, //组件ID
+        },
+      })
+        .then((res) => {
+          this.$xdHideLoading();
+          this.toLink(res.pay_order_id, res.order_id)
+        })
+        .catch((err) => {
+          this.$xdHideLoading();
+          console.log(err, "err");
+        });
+    },
+
+    handleGetPrice(e) {
+      //未填写值
+      if (!this.cardNumber || !this.card_point) {
+        return;
+      }
+
+      //预览模式
+      if( this.$configProject.isPreview) {
+        this.amount = this.card_point;
+        return;
+      }
+
+      jfbRootExec("getRechargeAmount", {
+        vm: this,
+        data: {
+          card_number: this.cardNumber, //页面ID
+          card_point: this.$xdUniHelper.multiplyFloatNumber(Number(this.card_point),100), //组件ID
+        },
+      })
+        .then((res) => {
+          this.amount = this.$xdUniHelper.divisionFloatNumber(res.amount ,100);
+        })
+        .catch((err) => {
+        });
+    },
+
+    onJfbUpdate(data) {
+      if( this.$configProject.isPreview) {
+        this.getContent();
+      }
+
     },
-    methods: {
-      onJfbLoad(options) {
-
-        // jfbRootExec('baiduUserLogin', {
-
-        //   vm: this,//   data: {
-
-        //     account: 'gaoshiyong',//     password: '123456789',//     type: 3,//     ...options
-
-        //   }
-
-        // }).then().catch()
-      },
-      /**
-       * @description 监听事件变化
-       * @param container {object} 业务组件对象自己
-       */
-      init(container) {
-
-        //this.bgcolor = getContainerPropsValue(container, 'content.bgcolor', '#fff');
-
-        //this.height = getContainerPropsValue(container, 'content.height', 10);
-      },
-      onJfbScroll(options) {
-        console.log('event.onJfbScroll', options)
-      },
-      onJfbReachBottom(options) {
-        console.log('event.onJfbReachBottom', options)
-      },
-      onJfbShow(options) {
-        console.log('event.onJfbShow', options)
-      },
-      onJfbHide(options) {
-        console.log('event.onJfbHide', options)
-      },
-      onJfbBack(options) {
-        console.log('event.onJfbBack', options)
-      },
-      onJfbUpdate(...data) {
-        console.log('event.onJfbUpdate', data)
-      },
-      onJfbCustomEvent(options) {
-        console.log('event.onJfbReachBottom', options)
-      },
-    }
-  }
 
+    onJfbShow(options) {
+      this.onJfbLoad(options);
+    },
+    onJfbCustomEvent(options) {
+      console.log("event.onJfbReachBottom", options);
+    },
+  },
+};
 </script>
 
 <style scoped lang="less">
-  @import "./JfbBaseRechargeNewLess.less";
+@import "./JfbBaseRechargeNewLess.less";
+
+.jfb-base-recharge-new {
+  &__body {
+    &-card {
+      box-shadow: 0 unit(16, rpx) unit(60, rpx) 0 rgba(227, 227, 227, 0.37);
+      border-radius: unit(20, rpx);
+      background: #fff;
+      padding: 30rpx;
+    }
+    &-form {
+      input {
+        background: #eeeeee;
+        border-radius: unit(16, rpx);
+        padding: unit(30, rpx);
+        margin-bottom: unit(30, rpx);
+      }
+    }
+
+    .xd-notice-content {
+      padding: 0 40rpx 40rpx 40rpx;
+      & > view:first-child {
+        font-size: 32rpx;
+        font-weight: 500;
+        color: #333;
+        margin-bottom: 20rpx;
+      }
+      & > view:last-child {
+        line-height: 44rpx;
+        font-size: 26rpx;
+        color: #666;
+        /deep/ img, /deep/ image{
+          max-width: 100% !important;
+          height: auto !important;
+          margin: 22rpx 0;
+        }
+
+        /deep/ *{
+          max-width: 100% !important;
+        }
+      }
+    }
+    .xd-notice {
+      margin-top: unit(40, rpx);
+      padding: unit(40, rpx);
+      border-radius: unit(15, rpx)
+    }
+  }
+}
 
-  .jfb-base-recharge-new {
-    &__body{
+.recharge {
+  padding: 30rpx;
 
+  &-tab {
+    height: 100rpx;
+    margin-bottom: 15rpx;
+    display:flex;
+    justify-content: flex-start;
+    align-items: center;
+    & > view {
+      margin: 0 50rpx 0 0;
+      font-size: 32rpx;
+      position: relative;
+      height: 100%;
+      line-height: 100rpx;
+      cursor: pointer;
     }
+
+    &-index {
+      height: 6rpx;
+      overflow: hidden;
+      border-radius: 4rpx;
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 16rpx;
+    }
+  }
+
+  .recharge-pack {
+    height: 330rpx;
+    background-position: top left;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    color: #fff;
+    padding: 30rpx;
+    box-sizing: border-box;
+    border-radius: 16rpx;
+    margin-bottom: 30rpx;
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    & .name {
+      font-size: 32rpx;
+      font-weight: 500;
+    }
+
+    & .price {
+      font-size: 28rpx;
+      font-weight: 400;
+      padding: 20rpx 0 10rpx;
+    }
+
+    & .time {
+      font-size: 28rpx;
+      font-weight: 400;
+    }
+
+    & .line {
+      margin: 20rpx 0;
+      height: 2rpx;
+      background: rgba(255,255,255,.2);
+    }
+
+    & .buy {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      & > view:nth-child(2) {
+        height: 60rpx;
+        min-width: 120rpx;
+        text-align: center;
+        border-radius: 40rpx;
+        line-height: 60rpx;
+        border: 4rpx solid #fff;
+        padding: 0 25rpx;
+        font-size: 28rpx;
+
+      }
+    }
+
   }
+}
 </style>

package/src/components/JfbBaseRechargeNew/Mock.js

@@ -1,13 +1,5 @@
 'use strict';
 
 module.exports = {
-  
-  getRechargeByIdFilmSquate:{},
-  
-  updateRechargeFilmPaiqiDate:{},
-  
-  removeRechargeFilmAddress:{},
-  
-  addRechargeFilmcart:{},
-  
+  cardRecharge: {"amount":10000,"request_id":"1d4ab6e96e7fd54d"}
 }