jufubao-base 1.0.56 → 1.0.61-beta1002

package/src/components/JfbBaseCardShiftEntry/JfbBaseCardShiftEntry.vue

@@ -0,0 +1,593 @@
+<template>
+  <view
+    class="jfb-base-card-shift-entry"
+    @click="handleEditxSelect"
+    :class="{
+      editx: isEditx && active,
+      noBorder: noBorder,
+    }"
+  >
+    <!--#ifdef H5-->
+    <view
+      class="jfb-base-card-shift-entry__edit"
+      :class="{ editx: isEditx && active }"
+      v-if="isEditx && active && !noBorder"
+    >
+      <view class="jfb-base-card-shift-entry__edit-icon" @click="delEdit">删除</view>
+    </view>
+    <!-- #endif -->
+    <view
+      class="jfb-base-card-shift-entry__body"
+      v-if="info !== null"
+      :style="{minHeight: layoutInfo.bodyMinHeightRpx + 'rpx'}"
+    >
+    <view class="card-list" :style="{
+            background: headerBg['color'],
+            backgroundSize: '100%'
+          }">
+            <view class="card-list-warp" :style="{backgroundImage: `url(${headerBg['image']})`}">
+            <view class="card-list__title">
+              <view style="display:flex;align-items:center">
+              <xd-font-icon
+                size="40"
+                color="#fff"
+                icon="iconzhuanhuanshitu"
+                style="margin-right:10rpx"
+            ></xd-font-icon>
+            <text>转换的票券</text>
+        </view>
+            </view>
+            <div class="card-list__content">
+              <view>
+                <text>券号：</text>
+                <text>{{info.card_number}}</text>
+              </view>
+            </div>
+            <view class="card-list__date">
+              <text>有效期：</text>
+              <text>{{info.end_time}}</text>
+            </view>
+            <view class="card-list__yue">
+              <text>余额：</text>
+              <text>{{info.card_point}} {{ info.unit }}</text>
+            </view>
+            <view class="card-list__other" v-if="info.other_card_point && info.card_point_type === 2">
+              <view><text>购买其他物品可抵：</text><text>{{info.other_card_point}} {{ info.unit }}</text></view>
+            </view>
+          </view>
+        </view>
+      <!-- 转换剩余 -->
+      <view>
+        <xd-font-icon
+            size="32"
+            color="#bbb"
+            icon="iconrepository-xialaxuanxiangdown"
+          ></xd-font-icon>
+      </view>
+      <view
+        class="jfb-base-card-shift-entry__body-content"
+        :style="{background:changeBg}"
+      >
+      <view class="jfb-base-card-shift-entry__body-content-title">
+          <view>转换后预估票券额度</view>
+      </view>
+        <view
+          :class="
+            item.key === 'other_card_point'
+              ? 'jfb-base-card-shift-entry__body-content-special'
+              : 'jfb-base-card-shift-entry__body-content-item'
+          "
+          v-for="(item, index) in changeValueKey"
+          :key="index"
+        >
+        <view> {{ item.label }}： </view>
+          <view :style="{color:mainColor,fontWeight:500}" v-if="item.type === 'price'">
+            {{ info[item.key] }}
+            <text>点</text>
+          </view>
+          <view style="color: #333; font-weight: 500" v-else>
+            {{ info[item.key] }}
+            <text v-if="item.type === 'type'">券</text>
+          </view>
+        </view>
+      </view>
+      <!-- 注意事项 -->
+      <view class="jfb-base-card-shift-entry__body-tips" v-if="notice">
+        <view style="text-align:center;padding-bottom:24rpx;color:#333;font-weight:500">注意事项</view>
+          <xd-content-xss :html="notice"></xd-content-xss>
+      </view>
+      <view :style="{height: '100rpx'}"></view>
+        <!-- 靠底支付 -->
+        <view class="fixe_bottom" :style="prod_bottom">
+          <xd-button
+          @click="handleChange"
+          width="500rpx"
+          type="primary">
+          转换
+        </xd-button>
+        </view>
+      <xd-dailog
+        class="dialog"
+        title=""
+        :show.sync="success"
+        :showClose="false"
+        :confirm="false"
+        :cancel="false"
+        :radius="20"
+      >
+        <view class="jfb-base-card-shift-entry__body-success">
+          <view class="jfb-base-card-shift-entry__body-success-title">
+            <xd-font-icon
+            size="48"
+            :color="mainColor"
+            icon="icondui-01"
+          ></xd-font-icon>
+          <text :style="{color:mainColor,marginLeft:'20rpx'}">转换成功</text>
+          </view>
+          <view class="jfb-base-card-shift-entry__body-success-content">
+            已成功将  <text style="color:#333;padding: 0 16rpx">{{ card_number }}</text>  转换成为
+            <text style="color:#333;padding: 0 16rpx">{{ changeNumber }}</text>可在券包中查看
+          </view>
+          <xd-button type="primarys" width="360rpx" @click="handleToLink"
+            >返回列表</xd-button
+          >
+        </view>
+      </xd-dailog>
+    </view>
+  </view>
+</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 JfbBaseCardShifEntrytMixin from "./JfbBaseCardShiftEntryMixin";
+import componentsMixins from "@/mixins/componentsMixins";
+import colorCardMixins from "@/mixins/colorCardMixins";
+import extsMixins from "@/mixins/extsMixins";
+import { getContainerPropsValue } from "@/utils/xd.base";
+import XdContentXss from '@/components/XdContentXss/XdContentXss'
+const Color = require("color");
+
+export default {
+  name: "JfbBaseCardShiftEntry",
+  components: {
+    XdFontIcon,
+    XdRadio,
+    XdButton,
+    XdDailog,
+    XdContentXss
+  },
+  mixins: [JfbBaseCardShifEntrytMixin, componentsMixins, extsMixins,colorCardMixins],
+  data() {
+    return {
+      info: null,
+      changeValueKey: [
+        {
+          label: "票券余额",
+          key: "exchange_card_point",
+          type: "price",
+        },
+        {
+          label: "购买其他物品可抵",
+          key: "other_card_point",
+          type: "price",
+        }
+      ],
+      card_number: "",
+      changeNumber: "",
+      success: false,
+      notice: "",
+
+      //页面跳转地址
+      backUrl: "",
+      bottomHeight: 120,
+      changeBg: ''
+    };
+  },
+  computed: {
+    prod_bottom() {
+      return this.fixedStyle({height: 0, zIndex: 111});
+    },
+  },
+  created() {
+    this.changeBg = Color(this.warningColor).alpha(0.2).toString();
+    this.backUrl = getContainerPropsValue(this.container, "content.back_url", {
+      value: "",
+    }).value;
+  },
+  methods: {
+    handleChange() {
+      jfbRootExec("changeCardBindEntry", {
+        vm: this,
+        data: {
+          card_number: this.card_number,
+        },
+      })
+        .then((res) => {
+          this.success = true;
+          this.changeNumber = res["to_card_number"];
+        })
+        .catch();
+    },
+    handleToLink() {
+      this.$xdUniHelper.navigateTo({
+        url: this.backUrl,
+      });
+    },
+    getContent() {
+      jfbRootExec("getListGiftNewsContentEntry", {
+        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;
+        })
+        .catch((error) => {
+          console.error(error);
+        });
+    },
+
+    onJfbLoad(options) {
+      this.card_number = options.card_number;
+      this.getContent();
+      jfbRootExec("getByIdCardDetailEntry", {
+        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" || key=== "other_card_point") {
+              temp[key] = this.$xdUniHelper.divisionFloatNumber(res[key], 100);
+            } else {
+              temp[key] = res[key];
+            }
+          });
+          if(res.other_card_point===0 || res.card_point_type === 1) {
+            this.changeValueKey.splice(1,1)
+          }
+          this.headerBg = this.getCardThemes(res.card_type_name);
+          this.info = temp;
+        })
+        .catch((err) => {});
+    },
+    onJfbUpdate(data) {
+      this.getContent();
+    },
+    onJfbBack(options) {
+      this.$xdUniHelper.navigateBack();
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+@import "./JfbBaseCardShiftEntryLess.less";
+
+.jfb-base-card-shift-entry {
+  border: 1px dashed rgba(0, 0, 0, 0);
+  box-sizing: border-box;
+
+  &__body {
+    position: relative;
+    color: #333;
+    padding: unit(26, rpx);
+    .card-list {
+  overflow: hidden;
+  border-radius: unit(16, rpx);
+  margin-bottom: unit(30, rpx);
+  
+  &:last-child {
+    margin-bottom: 0;
+  }
+  
+  
+  &__title {
+    height: unit(56, rpx);
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    
+    & > view {
+      padding: 0 unit(80, rpx);
+      font-size: unit(24, rpx);
+      line-height: unit(56, rpx);
+      background: rgba(102, 102, 102, 0.4);
+      color: #fff;
+      border-radius: 0 0 unit(16, rpx) 0;
+    }
+    
+  }
+  
+  &__content {
+    padding: unit(10, rpx) unit(40, rpx) 0;
+    height: unit(86, rpx);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    
+    & > view:first-child {
+      font-size: unit(36, rpx);
+      line-height: unit(86, rpx);
+      color: #fff;
+      font-weight: 700;
+    }
+    
+    & > view:nth-child(2) {
+      font-size: unit(24, rpx);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-flow: wrap;
+      flex-direction: column;
+      color: #fff;
+    }
+  }
+  
+  &__date {
+    padding: 0 unit(40, rpx);
+    font-size: unit(28, rpx);
+    line-height: unit(32, rpx);
+    color: #fff;
+  }
+  
+  &__yue {
+    padding: unit(10, rpx) unit(40, rpx) 0;
+    font-size: unit(28, rpx);
+    line-height: unit(32, rpx);
+    color: #fff;
+    
+    & > text:nth-child(2) {
+      font-weight: 700;
+    }
+  }
+  
+  &__other {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    padding: unit(20, rpx) unit(40, rpx) 0;
+    margin-top: unit(0, rpx);
+    
+    & > view {
+      border-radius:unit(8, rpx);
+      background: rgba(255, 255, 255, 0.2);
+      height: unit(48, rpx);
+      line-height: unit(48, rpx);
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      font-weight: 400;
+      font-size: unit(24, rpx);
+      padding: 0 unit(20, rpx);
+      color: #fff;
+    }
+    
+    
+  }
+  
+  &__nodata {
+    padding: unit(20, rpx) unit(40, rpx) 0;
+    margin-top: unit(0, rpx);
+    color: #fff;
+    font-size: unit(28, rpx);
+  }
+  
+  &__entry {
+    padding: unit(20, rpx) unit(40, rpx) 0;
+    & > view {
+      line-height: unit(64, rpx);
+      text-align: center;
+      font-size: unit(26, rpx);
+      border-radius: unit(32, rpx);
+      background: rgba(255, 255, 255, 1);
+      box-shadow: 0 unit(4, rpx) unit(8, rpx) rgba(156, 62, 0, 0.11);
+      font-weight: 500;
+    }
+  }
+  
+  &__entrys {
+    margin: unit(20, rpx) unit(20, rpx) 0;
+    padding: unit(30, rpx);
+    border-radius: unit(16, rpx);
+    background: rgba(255, 255, 255, 1);
+    box-shadow: 0 unit(4, rpx) unit(8, rpx) rgba(156, 62, 0, 0.11);
+    
+    &-title {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+     
+      
+      & > view:first-child {
+        font-size: unit(28, rpx);
+        font-weight: 500;
+        flex: 1;
+      }
+      
+      & > view:nth-child(2) {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        flex-shrink: 0;
+        font-size: unit(20, rpx);
+        color: #999;
+      }
+    }
+    
+    &-scroll {
+    
+    }
+  
+    &-item {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      flex-flow: nowrap;
+      margin-left: unit(-14, rpx);
+      padding-top: unit(20, rpx);
+      
+      & > view {
+        width: unit(120, rpx);
+        margin-right: unit(10, rpx);
+        flex-shrink: 0;
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        align-items: center;
+        
+        & > view:first-child {
+          width: unit(76, rpx);
+          height: unit(76, rpx);
+          overflow: hidden;
+    
+          & > image {
+            height: 100%;
+            width: 100%;
+          }
+        }
+        
+        & > view:nth-child(2) {
+          margin-top: unit(10, rpx);
+          font-size: unit(24, rpx);
+          line-height: unit(36, rpx);
+          margin-bottom: unit(10, rpx);
+        }
+        
+        & > view:nth-child(3) {
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          flex-shrink: 0;
+          font-size: unit(20, rpx);
+          color: #999;
+        }
+        
+        &:last-child {
+          margin-right: 0;
+        }
+        
+      }
+      
+      
+    }
+  }
+  
+  &-warp {
+    width: unit(700, rpx);
+    min-height: unit(290, rpx);
+    position: relative;
+    border-radius: unit(16, rpx);
+    background-size: 100%;
+    padding-bottom: unit(20, rpx);
+  }
+}
+    &-content {
+      background: #fff;
+      border-radius: unit(16, rpx);
+      padding: unit(38, rpx) 0;
+      margin-top: unit(24, rpx);
+
+      &-title {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        font-weight: 500;
+        margin-bottom: unit(32,rpx);
+      }
+
+      &-item {
+        display: flex;
+        color: #666;
+        justify-content: space-between;
+        align-content: center;
+        font-size: unit(28, rpx);
+        padding: unit(16, rpx) unit(48, rpx);
+      }
+
+      &-special {
+        display: flex;
+        color: #666;
+        justify-content: space-between;
+        font-size: unit(24, rpx);
+        padding: unit(18, rpx) unit(24, rpx);
+        margin: 0 unit(24, rpx);
+        border-radius: unit(16, rpx);
+        background: #f9f9f9;
+        align-content: center;
+      }
+    }
+
+    &-tips {
+      font-size: unit(28, rpx);
+      padding: unit(28, rpx);
+      color: #666;
+      background: #fff;
+      border-radius: unit(16,rpx);
+      margin-top: unit(24,rpx);
+    }
+
+    &-agree {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: unit(24, rpx);
+      color: #bbb;
+      padding: unit(20, rpx) 0;
+      margin-bottom: unit(40,rpx);
+
+      & > view {
+        margin-left: unit(25, rpx);
+      }
+    }
+
+    .fixe_bottom{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: unit(100, rpx);
+        padding: 0 unit(40, rpx);
+        background: #FFF;
+        box-shadow: 0 0 unit(16, rpx) rgba(0,0,0,.05);
+        .flex_l{
+          display: flex;
+          align-items: center;
+          font-size: unit(32,rpx);
+        }
+      }
+
+    &-success {
+      padding: unit(70, rpx);
+      &-title {
+        font-size: unit(32, rpx);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      &-content {
+        font-size: unit(28, rpx);
+        color: #666;
+        text-align: center;
+        line-height: unit(42, rpx);
+        margin: unit(50, rpx) 0;
+      }
+    }
+
+
+    .dialog ::v-deep .xd-dailog__body-content {
+      padding: 0;
+    }
+  }
+}
+</style>

package/src/components/JfbBaseCardShiftEntry/JfbBaseCardShiftEntryLess.less

@@ -0,0 +1,80 @@
+/**
+* @desc 获取绝对路径完整地址
+* @param @path
+**/
+//例如：https://image.jufubao.cn/20220501010108/image/bg/default_gonghui_bg.png
+@basePath: 'business/';
+@doMain: '//sandbox-img.jufubao.cn/';
+
+.getBusinessImageUrl(@path, @size: 'size8') {
+  @url: "@{doMain}@{basePath}@{path}?x-oss-process=style/@{size}";
+  background-image: url(@url);
+}
+
+//start
+.jfb-base-card-shift-entry {
+  border: 1px dashed rgba(0, 0, 0, 0);
+  box-sizing: border-box;
+  min-height: unit(100, rpx);
+
+  &__body{
+      position: relative;
+      overflow: hidden;
+      z-index: 2
+  }
+
+  &.editx {
+    position: relative;
+    border: 1px dashed blue;
+    box-sizing: border-box;
+    z-index: 3
+
+  }
+
+  &:hover {
+    border: 1px dashed blue;
+  }
+
+  &.noBorder {
+    border-color: rgba(0,0,0,0);
+    border-width: 0;
+  }
+
+
+  &__edit {
+    cursor: pointer;
+    position: absolute;
+    right: unit(0, rpx);
+    top: unit(-52, rpx);
+    height: unit(50, rpx);
+    line-height: unit(50, rpx);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: rgba(0, 0, 0, .6);
+    border-radius: unit(10, rpx);
+    box-shadow: 0 0 10px rbga(0, 0, 0, 0.3);
+    color: #fff;
+    font-size: unit(22, rpx);
+
+    &-icon{
+      padding: 0 unit(20, rpx);
+    }
+
+    &.editx {
+      box-sizing: border-box;
+
+    }
+  }
+}
+//end
+
+
+/**notPreview**/
+.jfb-base-card-shift-entry {
+  &:before {
+    content: " ";
+    display: table;
+  }
+}
+/**endNotPreview**/

package/src/components/JfbBaseCardShiftEntry/JfbBaseCardShiftEntryMixin.js

@@ -0,0 +1,30 @@
+'use strict';
+
+
+//@AttrImport
+import Attr from "./Attr";
+//@EndAttrImport
+
+
+export default {
+  data() {
+    return {
+      //#ifdef H5
+      
+      //@AttrData
+      Attr:{}, //对外开发编辑属性
+      //@EndAttrData
+      
+      // #endif
+      cssRoot: 'jfb-base-card-shift-entry'
+    }
+  },
+  created() {
+    
+    //@AttrDataCreated
+    this.Attr = this.$xdUniHelper.customClone(Attr);
+    //@EndAttrDataCreated
+    
+
+  },
+}

package/src/components/JfbBaseCardShiftEntry/Mock.js

@@ -0,0 +1,5 @@
+'use strict';
+
+module.exports = {
+  getByIdCardDetailEntry:{"card_number":"171003500000390","card_point":900,"card_type_name":"一对一次卡（无限制）","end_time":"2024-09-30","card_status":"Y","card_status_name":"开启","card_qrcode":"\/\/sandbox-apis.jufubao.cn\/common\/v1\/image\/qrcode?code_content=h.161.4tzflzciaovkl5e","barcode":"\/\/sandbox-apis.jufubao.cn\/common\/v1\/image\/barcode?code_content=h.161.4tzflzciaovkl5e","card_qrcode_expire":600,"unit":"次","main_business_code_name":"","other_card_point":0,"is_exchange":"Y","exchange_card_type_name":"福券","exchange_card_point":26730,"card_point_type":1,"is_show_qrcode_logo":"Y","is_can_unbind":"Y","site_entry_settings":[],"business_codes":["movie","cake","video"],"request_id":"e27d6887c093c381"}
+}

package/src/mixins/colorCardMixins.js

@@ -51,7 +51,7 @@ export default {
     getCardGroupItem(list, allEntry) {
       list.map(item => {
         //设置卡片样式
-        item['theme'] = this.getCardThemes(item['card_type_name'] + item['card_type']);
+        item['theme'] = this.getCardThemes(item['card_type_name']);
         item['entries'] = this.getEntry(item['business_codes'], allEntry)
       });
       return list