jufubao-base 1.0.21 → 1.0.23-beta2

package/src/components/JfbBaseCardShift/JfbBaseCardShift.vue

@@ -1,36 +1,50 @@
 <template>
   <view
     class="jfb-base-card-shift"
-    @click="handleSelect"
-    :class="{ editx : isEditx && active }"
+    @click="handleEditxSelect"
+    :class="{
+      editx: isEditx && active,
+      noBorder: noBorder,
+    }"
   >
     <!--#ifdef H5-->
     <view
       class="jfb-base-card-shift__edit"
-      :class="{ editx : isEditx && active }"
-      v-if="isEditx && active"
+      :class="{ editx: isEditx && active }"
+      v-if="isEditx && active && !noBorder"
     >
       <view class="jfb-base-card-shift__edit-icon" @click="delEdit">删除</view>
     </view>
     <!-- #endif -->
-    <view class="jfb-base-card-shift__body" style="position: relative;" v-if=" info!==null">
+    <view
+      class="jfb-base-card-shift__body"
+      style="position: relative"
+      v-if="info !== null"
+    >
       <view>
-        <view class="jfb-base-card-shift__body-info" v-for="(item,index) in valueKey" :key="index">
-          <view class="jfb-base-card-shift__body-info-label">{{item.label}}</view>
-          <view class="jfb-base-card-shift__body-info-value">{{info[item.key]}}</view>
+        <view
+          class="jfb-base-card-shift__body-info"
+          v-for="(item, index) in valueKey"
+          :key="index"
+        >
+          <view class="jfb-base-card-shift__body-info-label">{{
+            item.label
+          }}</view>
+          <view class="jfb-base-card-shift__body-info-value">{{
+            info[item.key]
+          }}</view>
         </view>
         <view class="jfb-base-card-shift__body-tips">
-          转换说明：您现在进行的操作是将电影票兑换券转为福利积分券，福利积分可在商城板块使用。转换规则：电影票兑换券面值*0.9=相应的福利积分。点击确认即视为您已知晓并同意转换，转换成功后无法撤销逆转，请您谨慎操作。
+          <xd-content-xss :html="notice"></xd-content-xss>
         </view>
+      </view>
+      <view :style="{height:bottomHeight+100+'rpx'}"></view>
+      <view class="jfb-base-card-shift__body-footer" :style="prod_bottom">
+        <xd-button type="primary" width="360rpx" @click="handleChange">立即转换</xd-button>
         <view class="jfb-base-card-shift__body-agree">
           <xd-radio size="small" v-model="isCheck"></xd-radio>
           <view>我已经阅读和同意积分转换规则</view>
         </view>
-        <view :style="{height:layoutInfo.bottom + 'rpx'}"></view>
-      </view>
-      <view class="jfb-base-card-shift__body-footer"
-            :style="{bottom: layoutInfo.bottom + 'rpx',height: layoutInfo.bottom + 'rpx'}">
-        <xd-button type="primary" width="360rpx" @click="handleChange">立即转换</xd-button>
       </view>
       <xd-dailog
         class="dialog"
@@ -38,14 +52,25 @@
         :show.sync="success"
         :showClose="false"
         :confirm="false"
-        :cancel="false">
+        :cancel="false"
+      >
         <view class="jfb-base-card-shift__body-success">
-          <xd-font-icon size="100" color="#52C41A" icon="icondui-01"></xd-font-icon>
-          <view class="jfb-base-card-shift__body-success-title">转换成功</view>
+          <view class="jfb-base-card-shift__body-success-head">
+            <xd-font-icon
+              size="42"
+              :color="mainColor"
+              icon="icondui-01"
+            ></xd-font-icon>
+            <view class="jfb-base-card-shift__body-success-title" :style="{
+              color: mainColor
+            }">票券转换成功</view>
+          </view>
+          
           <view class="jfb-base-card-shift__body-success-content">
-            您已成功将 {{card_number}} 转换为 {{changeNumber}}已自动帮您绑定成功，可在卡列表查询
+            已成功将 <text class="b">{{ card_number }}</text><br/> 转换成为 <text class="b">{{ changeNumber }}</text><br/>
+            <text @click="handleToLink">可在券包中查看</text>
           </view>
-          <xd-button type="primarys" width="360rpx" @click="handleToLink">返回列表</xd-button>
+          <!-- <xd-button type="primarys" width="360rpx" @click="handleToLink">返回列表</xd-button> -->
         </view>
       </xd-dailog>
     </view>
@@ -53,193 +78,252 @@
 </template>
 
 <script>
-  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
-  import XdRadio from "@/components/XdRadio/XdRadio";
-  import XdButton from "@/components/XdButton/XdButton";
-  import XdDailog from "@/components/XdDailog/XdDailog";
-  import {jfbRootExec} from "@/utils/xd.event";
-  import JfbBaseCardShiftMixin from "./JfbBaseCardShiftMixin";
-
-  export default {
-    name: "JfbBaseCardShift",
-    components: {
-      XdFontIcon,
-      XdRadio,
-      XdButton,
-      XdDailog
+import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+import XdRadio from "@/components/XdRadio/XdRadio";
+import XdButton from "@/components/XdButton/XdButton";
+import XdDailog from "@/components/XdDailog/XdDailog";
+import { jfbRootExec } from "@/utils/xd.event";
+import JfbBaseCardShiftMixin from "./JfbBaseCardShiftMixin";
+import componentsMixins from "@/mixins/componentsMixins";
+import extsMixins from "@/mixins/extsMixins";
+import { getContainerPropsValue } from "@/utils/xd.base";
+import XdContentXss from '@/components/XdContentXss/XdContentXss'
+
+export default {
+  name: "JfbBaseCardShift",
+  components: {
+    XdFontIcon,
+    XdRadio,
+    XdButton,
+    XdDailog,
+    XdContentXss
+  },
+  mixins: [JfbBaseCardShiftMixin, componentsMixins, extsMixins],
+  data() {
+    return {
+      info: null,
+      valueKey: [
+        {
+          label: "票券名称",
+          key: "card_type_name",
+        },
+        {
+          label: "票券号码",
+          key: "card_number",
+        },
+        {
+          label: "票券剩余",
+          key: "card_point",
+        },
+        {
+          label: "票券转换",
+          key: "exchange_card_type_name",
+        },
+        {
+          label: "转换剩余",
+          key: "exchange_card_point",
+        },
+      ],
+      card_number: "",
+      changeNumber: "",
+      success: false,
+      isCheck: false,
+      notice: "",
+
+      //页面跳转地址
+      backUrl: "",
+      bottomHeight: 120
+    };
+  },
+  computed: {
+    prod_bottom() {
+      return this.fixedStyle({ height: this.bottomHeight, zIndex: 111 });
     },
-    mixins: [
-      JfbBaseCardShiftMixin
-    ],
-    data() {
-      return {
-        info: null,
-        valueKey: [
-          {
-            label: '票券名称',
-            key: 'main_product_name'
-          },
-          {
-            label: '票券号码',
-            key: 'card_number'
-          },
-          {
-            label: '票券剩余',
-            key: 'card_point'
-          },
-          {
-            label: '票券转换',
-            key: 'exchange_card_type_name'
-          },
-          {
-            label: '转换剩余',
-            key: 'exchange_card_point'
-          },
-        ],
-        card_number: '',
-        changeNumber: '',
-        success: false,
-        isCheck: false
-        //todo
+  },
+  created() {
+    this.backUrl = getContainerPropsValue(this.container, "content.back_url", {
+      value: "",
+    }).value;
+  },
+  methods: {
+    handleChange() {
+      if (!this.isCheck) {
+        this.$xdAlert({
+          content: "请先同意转换规则",
+        });
+        return;
       }
-    },
-    created() {
 
-      //todo
-    },
-    methods: {
-      handleChange() {
-        if(!this.isCheck) {
-          this.$xdAlert({
-            content: '请先同意转换规则',
-          })
-          return
-        }
-        jfbRootExec('changeCardBind',
-          {
-          vm: this,
-          data: {
-            card_number: this.card_number,
+      let card_number =  this.card_number;
+      if(this.$configProject.isPreview) card_number = '101001000005193';
+      let content = `您要将<view style="color:red">【${card_number}】</view>进行转换操作吗？`;
+      this.$xdConfirm({
+        title: "是否确认转换",
+        isHtml: true,
+        styles: this.styles,
+        content:content,
+        success:(action)=>{
+          if(action.confirm) {
+            jfbRootExec("changeCardBind", {
+              vm: this,
+              data: {
+                card_number: this.card_number,
+              },
+            })
+              .then((res) => {
+                debugger
+                this.success = true;
+                this.changeNumber = res["to_card_number"];
+              })
+              .catch();
           }
-        }).then((res)=>{
-          this.success=true
-          this.changeNumber = res['to_card_number']
-        }).catch()
-      },
-      handleToLink(){
-        this.$xdUniHelper.navigateTo({
-          url: '/pages/card/card'
+        }
+      });
+    },
+    handleToLink() {
+      this.$xdUniHelper.navigateTo({
+        url: this.backUrl,
+      });
+    },
+    getContent() {
+      jfbRootExec("getListGiftNewsContent", {
+        vm: this,
+        data: {
+          page_id: this.pageAttr["page_id"], //页面ID
+          container_id: this.containerId, //组件ID
+          limit: 1,
+        },
+      })
+        .then((res) => {
+          this.notice = res.list[0].content;
+          console.log(this.content, "this.content");
         })
-      },
-      onJfbLoad(options) {
-        console.log(this.layoutInfo, options, 8888)
-        this.card_number = options.card_number
-        jfbRootExec('getByIdCardDetail', {
-          vm: this,
-          data: {
-            card_number: this.card_number
-          }
-        }).then(res => {
-          console.log(res,'00000000')
-          this.info = res
-        }).catch(err => {})
-      },
-      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)
-        this.$xdUniHelper.navigateBack()
-      },
-    }
-  }
+        .catch((error) => {
+          console.error(error);
+        });
+    },
 
+    onJfbLoad(options) {
+      this.card_number = options.card_number;
+      this.getContent();
+      jfbRootExec("getByIdCardDetail", {
+        vm: this,
+        data: {
+          card_number: this.card_number,
+        },
+      })
+        .then((res) => {
+          let temp = {};
+          Object.keys(res).map((key) => {
+            if (key === "card_point" || key === "exchange_card_point") {
+              temp[key] = this.$xdUniHelper.divisionFloatNumber(res[key], 100);
+            } else {
+              temp[key] = res[key];
+            }
+          });
+          this.info = temp;
+        })
+        .catch((err) => {});
+    },
+    onJfbUpdate(data) {
+      this.getContent();
+    },
+    onJfbBack(options) {
+      this.$xdUniHelper.navigateBack();
+    },
+  },
+};
 </script>
 
 <style scoped lang="less">
-  @import "./JfbBaseCardShiftLess.less";
+@import "./JfbBaseCardShiftLess.less";
 
-  .jfb-base-card-shift {
-    border: 1px dashed rgba(0, 0, 0, 0);
-    box-sizing: border-box;
+.jfb-base-card-shift {
+  border: 1px dashed rgba(0, 0, 0, 0);
+  box-sizing: border-box;
 
-    &__body {
-      &-info {
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        font-size: unit(30, rpx);
-        padding: unit(60, rpx);
-        border-bottom: unit(2, rpx) solid #EEEEEEFF;
-
-        &-label {
-          width: unit(120, rpx);
-          color: #A6A6A6;
-          margin-right: unit(70, rpx);
-          text-align: center;
-        }
+  &__body {
+    color: #333;
+    &-info {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      font-size: unit(26, rpx);
+      padding: unit(40, rpx);
+      border-bottom: unit(2, rpx) solid #eeeeee;
+      background: #fff;
 
-        &-value {
-          flex: 1;
-        }
+      &-label {
+        width: unit(120, rpx);
+        color: #a6a6a6;
+        margin-right: unit(70, rpx);
+        text-align: center;
       }
 
-      &-tips {
-        font-size: unit(24, rpx);
-        padding: unit(60, rpx);
-        color: #555555;
-        background: #F9F9F9;
+      &-value {
+        flex: 1;
       }
+    }
 
-      &-agree {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: unit(24, rpx);
-        color: #A6A6A6;
-        padding: unit(60, rpx);
+    &-tips {
+      font-size: unit(24, rpx);
+      padding: unit(60, rpx);
+      color: #bbb;
+      background: #f9f9f9;
+    }
 
-        & > view {
-          margin-left: unit(25, rpx);
-        }
-      }
+    &-agree {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: unit(24, rpx);
+      color: #bbb;
+      margin: unit(40,rpx) 0;
 
-      &-footer {
-        position: fixed;
-        left: 0;
-        right: 0;
-        background: #fff;
-        padding-top: unit(20, rpx);
+      & > view {
+        margin-left: unit(25, rpx);
       }
+    }
 
-      &-success {
-        padding: unit(70,rpx);
-        &-title {
-          font-size: unit(42,rpx);
-          color: #242424;
-        }
+    &-footer {
+      position: fixed;
+      left: 0;
+      right: 0;
+      // bottom: unit(120,rpx) !important;
+      height: unit(100, rpx);
+      background: #FFFFFF;
+      padding-top: unit(20, rpx);
+    }
 
-        &-content {
-          font-size: unit(32,rpx);
-          color: #5A5A5A;
-          text-align: center;
-          line-height: unit(42,rpx);
-          margin: unit(50,rpx) 0;
-        }
+    &-success {
+      padding: unit(70, rpx);
+      &-title {
+        font-size: unit(36, rpx);
+        color: #242424;
+        margin-left: 8px;
+      }
+      &-head{
+        display: flex;
+        align-items: center;
+        justify-content: center;
       }
 
-      .dialog ::v-deep .xd-dailog__body-content {
-        padding: 0;
+      &-content {
+        font-size: unit(32, rpx);
+        color: #5a5a5a;
+        text-align: center;
+        line-height: unit(42, rpx);
+        margin: unit(40, rpx) 0 0;
+        .b{
+          font-weight: bold;
+          margin-left: 8rpx;
+        }
       }
     }
+
+    .dialog ::v-deep .xd-dailog__body-content {
+      padding: 0;
+    }
   }
+}
 </style>

package/src/components/JfbBaseCardShift/JfbBaseCardShiftLess.less

@@ -13,18 +13,30 @@
 
 //start
 .jfb-base-card-shift {
-  border: 1px dashed rgba(0, 0, 0, 0);
   box-sizing: border-box;
 
-  &.editx {
-    position: relative;
-    border: 1px dashed blue;
-    box-sizing: border-box;
-
+  &__body{
+      position: relative;
+      overflow: hidden;
+      z-index: 2
   }
 
-  &:hover {
-    border: 1px dashed blue;
+  &.editx,&.editx:hover {
+    position: relative;
+    min-height: unit(100, rpx);
+    z-index: 3;
+    &::after {
+      border: 2rpx dashed blue;
+      content: " ";
+      position: absolute;
+      top:0;
+      left:0;
+      bottom:0;
+      right:0;
+      z-index: 4;
+      cursor: pointer;
+    }
+
   }
 
 
@@ -55,3 +67,13 @@
   }
 }
 //end
+
+
+/**notPreview**/
+.jfb-base-card-shift {
+  //&:before {
+    //content: " ";
+    //display: table;
+  //}
+}
+/**endNotPreview**/