jufubao-base 1.0.56-beta2005 → 1.0.56-beta2007

package/src/components/JfbBaseCardDetailEntry/Mock.js

@@ -1,5 +1,106 @@
 'use strict';
 
 module.exports = {
-  aaaa: {}
+  getCardYue: {},
+  getBaseByIdCardDetailEntry: {
+    "site_entry_settings": [{
+      "id": 57,
+      "business_code": "movie",
+      "entry_name": "在线选座",
+      "image_url": "https:\/\/sandbox-img.jufubao.cn\/uploads\/20230927\/74fcb8bf1bf617249eee5f1416533766.png",
+      "redirect_data": "{\"path\":\"https:\\\/\\\/website-01.jufubao.cn\\\/base\\\/system\\\/zhrk\\\/zkrk\"}",
+      "redirect_type": "URL"
+    }, {
+      "id": 10,
+      "business_code": "gift",
+      "entry_name": "礼包",
+      "image_url": "https:\/\/sandbox-img.jufubao.cn\/uploads\/20230927\/f1c8a447209eb04d77c2095a13cdadf4.png",
+      "redirect_data": "{\"dir\":\"apply\",\"host\":\"sandbox-website-05.jufubao.cn\",\"path\":\"\\\/main\\\/gift\\\/type\",\"site_id\":\"17928cc37788be02\",\"site_url\":\"https:\\\/\\\/sandbox-website-05.jufubao.cn\\\/apply\\\/main\\\/gift\\\/type\",\"frontPath\":\"\\\/apply\\\/main\\\/gift\\\/type\",\"fixed_business_code\":\"\"}",
+      "redirect_type": "INN"
+    }, {
+      "id": 7,
+      "business_code": "movie",
+      "entry_name": "在线选座",
+      "image_url": "https:\/\/sandbox-img.jufubao.cn\/uploads\/20230927\/61b3302ec80009964e0a4b7b2336e5cf.png",
+      "redirect_data": "{\"dir\":\"apply\",\"host\":\"sandbox-website-05.jufubao.cn\",\"path\":\"\\\/main\\\/movie\\\/index\",\"site_id\":\"17928cc37788be02\",\"site_url\":\"https:\\\/\\\/sandbox-website-05.jufubao.cn\\\/apply\\\/main\\\/movie\\\/index\",\"frontPath\":\"\\\/apply\\\/main\\\/movie\\\/index\",\"fixed_business_code\":\"\"}",
+      "redirect_type": "INN"
+    }, {
+      "id": 9,
+      "business_code": "cake",
+      "entry_name": "蛋糕",
+      "image_url": "https:\/\/sandbox-img.jufubao.cn\/uploads\/20230927\/e582dc796bdb703a10860bcbbbb378f3.png",
+      "redirect_data": "{\"dir\":\"apply\",\"host\":\"sandbox-website-05.jufubao.cn\",\"path\":\"\\\/main\\\/cake\\\/index\",\"site_id\":\"17928cc37788be02\",\"site_url\":\"https:\\\/\\\/sandbox-website-05.jufubao.cn\\\/apply\\\/main\\\/cake\\\/index\",\"frontPath\":\"\\\/apply\\\/main\\\/cake\\\/index\",\"fixed_business_code\":\"\"}",
+      "redirect_type": "INN"
+    }, {
+      "id": 18,
+      "business_code": "book",
+      "entry_name": "图书",
+      "image_url": "https:\/\/sandbox-img.jufubao.cn\/uploads\/20230927\/9edcdc737c48cdbf9364e321e8199a93.png",
+      "redirect_data": "{\"dir\":\"apply\",\"host\":\"sandbox-website-05.jufubao.cn\",\"path\":\"\\\/main\\\/book\\\/index\",\"site_id\":\"17928cc37788be02\",\"site_url\":\"https:\\\/\\\/sandbox-website-05.jufubao.cn\\\/apply\\\/main\\\/book\\\/index\",\"frontPath\":\"\\\/apply\\\/main\\\/book\\\/index\",\"fixed_business_code\":\"\"}",
+      "redirect_type": "INN"
+    }, {
+      "id": 8,
+      "business_code": "market",
+      "entry_name": "百货",
+      "image_url": "https:\/\/sandbox-img.jufubao.cn\/uploads\/20230927\/920c4bd80f0a995e245aedbfaf1181d5.png",
+      "redirect_data": "{\"dir\":\"apply02\",\"host\":\"sandbox-website-05.jufubao.cn\",\"path\":\"\\\/main\\\/mall\\\/index\",\"site_id\":\"17928cc37788be02\",\"site_url\":\"https:\\\/\\\/sandbox-website-05.jufubao.cn\\\/apply02\\\/main\\\/mall\\\/index\",\"frontPath\":\"\\\/apply02\\\/main\\\/mall\\\/index\",\"fixed_business_code\":\"\"}",
+      "redirect_type": "INN"
+    }, {
+      "id": 17,
+      "business_code": "video",
+      "entry_name": "网络视听",
+      "image_url": "https:\/\/sandbox-img.jufubao.cn\/uploads\/20230927\/1ca9647b7ddd9937054792412d3c2367.png",
+      "redirect_data": "{\"dir\":\"apply\",\"host\":\"sandbox-website-05.jufubao.cn\",\"path\":\"\\\/main\\\/video\\\/index\",\"site_id\":\"17928cc37788be02\",\"site_url\":\"https:\\\/\\\/sandbox-website-05.jufubao.cn\\\/apply\\\/main\\\/video\\\/index\",\"frontPath\":\"\\\/apply\\\/main\\\/video\\\/index\",\"fixed_business_code\":\"\"}",
+      "redirect_type": "INN"
+    }, {
+      "id": 35,
+      "business_code": "v-RcA8Mv-Gpd96_Y_mjIf",
+      "entry_name": "全福券",
+      "image_url": "https:\/\/sandbox-img.jufubao.cn\/uploads\/20230927\/53191864826b864b8b6fd4f1eb397a93.png",
+      "redirect_data": "{\"dir\":\"apply\",\"host\":\"sandbox-website-05.jufubao.cn\",\"path\":\"\\\/system\\\/card\\\/card\",\"site_id\":\"17928cc37788be02\",\"site_url\":\"https:\\\/\\\/sandbox-website-05.jufubao.cn\\\/apply\\\/system\\\/card\\\/card\",\"frontPath\":\"\\\/apply\\\/system\\\/card\\\/card\",\"fixed_business_code\":\"\"}",
+      "redirect_type": "INN"
+    }, {
+      "id": 40,
+      "business_code": "93028be3",
+      "entry_name": "专区",
+      "image_url": "https:\/\/sandbox-img.jufubao.cn\/uploads\/20230927\/84d23a8c7af7a63842eb696c00068b3d.png",
+      "redirect_data": "{\"dir\":\"apply05\",\"host\":\"sandbox-website-05.jufubao.cn\",\"path\":\"\\\/main\\\/mall\\\/index\",\"site_id\":\"17928cc37788be02\",\"site_url\":\"https:\\\/\\\/sandbox-website-05.jufubao.cn\\\/apply05\\\/main\\\/mall\\\/index\",\"frontPath\":\"\\\/apply05\\\/main\\\/mall\\\/index\",\"fixed_business_code\":\"-y8t4cmogeFvi8fmuxFSK\"}",
+      "redirect_type": "INN"
+    }, {
+      "id": 34,
+      "business_code": "food",
+      "entry_name": "餐饮",
+      "image_url": "https:\/\/sandbox-img.jufubao.cn\/uploads\/20230927\/97728bf3ef2a6361c0a1771549d2d435.png",
+      "redirect_data": "{\"dir\":\"apply\",\"host\":\"sandbox-website-05.jufubao.cn\",\"path\":\"\\\/main\\\/food\\\/rkym\",\"site_id\":\"17928cc37788be02\",\"site_url\":\"https:\\\/\\\/sandbox-website-05.jufubao.cn\\\/apply\\\/main\\\/food\\\/rkym\",\"frontPath\":\"\\\/apply\\\/main\\\/food\\\/rkym\",\"fixed_business_code\":\"\"}",
+      "redirect_type": "INN"
+    }, {
+      "id": 55,
+      "business_code": "cake",
+      "entry_name": "蛋糕内部",
+      "image_url": "https:\/\/sandbox-img.jufubao.cn\/uploads\/20230927\/2e549739768758dde7968ff7cb98c6d8.png",
+      "redirect_data": "{\"dir\":\"apply03\",\"host\":\"sandbox-website-05.jufubao.cn\",\"path\":\"\\\/main\\\/cake\\\/index\",\"site_id\":\"17928cc37788be02\",\"site_url\":\"https:\\\/\\\/sandbox-website-05.jufubao.cn\\\/apply03\\\/main\\\/cake\\\/index\",\"frontPath\":\"\\\/apply03\\\/main\\\/cake\\\/index\",\"fixed_business_code\":\"cake\"}",
+      "redirect_type": "INN"
+    }, {
+      "id": 54,
+      "business_code": "health",
+      "entry_name": "体检",
+      "image_url": "https:\/\/sandbox-img.jufubao.cn\/uploads\/20230927\/e06b058a2104025ffecee960b3b9321d.png",
+      "redirect_data": "{\"dir\":\"apply\",\"host\":\"sandbox-website-05.jufubao.cn\",\"path\":\"\\\/main\\\/health\\\/index\",\"site_id\":\"17928cc37788be02\",\"site_url\":\"https:\\\/\\\/sandbox-website-05.jufubao.cn\\\/apply\\\/main\\\/health\\\/index\",\"frontPath\":\"\\\/apply\\\/main\\\/health\\\/index\",\"fixed_business_code\":\"\"}",
+      "redirect_type": "INN"
+    }, {
+      "id": 30,
+      "business_code": "travel",
+      "entry_name": "旅游",
+      "image_url": "https:\/\/sandbox-img.jufubao.cn\/uploads\/20230927\/09ceefe2d1776a399b567c7acdf2c9db.png",
+      "redirect_data": "{\"dir\":\"apply\",\"host\":\"sandbox-website-05.jufubao.cn\",\"path\":\"\\\/main\\\/travel\\\/index\",\"site_id\":\"17928cc37788be02\",\"site_url\":\"https:\\\/\\\/sandbox-website-05.jufubao.cn\\\/apply\\\/main\\\/travel\\\/index\",\"frontPath\":\"\\\/apply\\\/main\\\/travel\\\/index\",\"fixed_business_code\":\"\"}",
+      "redirect_type": "INN"
+    }, {
+      "id": 16,
+      "business_code": "play",
+      "entry_name": "演出",
+      "image_url": "https:\/\/sandbox-img.jufubao.cn\/uploads\/20230927\/07e1d76f1850fbadc9a12d7ff2d7689c.png",
+      "redirect_data": "{\"dir\":\"apply\",\"host\":\"sandbox-website-05.jufubao.cn\",\"path\":\"\\\/main\\\/play\\\/index\",\"site_id\":\"17928cc37788be02\",\"site_url\":\"https:\\\/\\\/sandbox-website-05.jufubao.cn\\\/apply\\\/main\\\/play\\\/index\",\"frontPath\":\"\\\/apply\\\/main\\\/play\\\/index\",\"fixed_business_code\":\"\"}",
+      "redirect_type": "INN"
+    }], "is_show_qrcode_logo": 'Y', "card_number": "101001000008076", "card_point": 20367, "card_type_name": "多余额福卡", "end_time": "2025-04-30 23:59:59", "card_status": "Y", "card_status_name": "开启", "card_qrcode": "\/\/sandbox-apis.jufubao.cn\/common\/v1\/image\/qrcode?code_content=h.161.ktrd9ie2jnbkdb8", "barcode": "\/\/sandbox-apis.jufubao.cn\/common\/v1\/image\/barcode?code_content=h.161.ktrd9ie2jnbkdb8", "card_qrcode_expire": 600, "unit": "点", "main_business_code_name": "蛋糕(勿改)", "other_card_point": 4073, "is_exchange": "N", "exchange_card_type_name": "福券", "exchange_card_point": 18330, "card_point_type": 2, "request_id": "ce26274fa52c8412"
+  }
 }

package/src/components/JfbBaseCardDetailEntry/XdEditPwd.vue

@@ -0,0 +1,299 @@
+<template>
+  <view>
+    <xd-dailog
+      :show.sync="uiShow"
+      width="90%"
+      title="设置支付密码"
+      :cancel="false"
+      :confirm="false"
+      :zIndex="1100"
+      :showClose="showClose"
+      @close="handleClose"
+    >
+      <view class="pwd">
+        <view class="pwd__title" v-if="title">
+          <view>
+            {{title}}
+          </view>
+        </view>
+        <view class="pwd__form">
+          <view class="pwd__form-item">
+            <view>
+              手机号：
+            </view>
+            <view>
+              <input
+                :disabled="editPhone!==''"
+                :style="{width:370+'rpx'}"
+                type="number"
+                placeholder="请输入手机号"
+                :adjust-position="false"
+                v-model="form.phone"
+              />
+            </view>
+          </view>
+
+          <view class="pwd__form-item">
+            <view style="display: flex;align-items: center;flex: 1;
+          width: 0;">
+              <view>验证码：</view>
+              <view>
+                <input
+                  :style="{width:160+'rpx',marginRight:30+'rpx'}"
+                  type="text"
+                  placeholder="请输入验证码"
+                  :adjust-position="false"
+                  v-model="form.sms_code"/>
+              </view>
+            </view>
+            <view style="flex-shrink: 0;">
+              <xd-button
+                size="mini"
+                type="default"
+                @click="getSmsCodeHandle"
+                :disabled="!form.phone || status"
+                :style="{width:codeWidth+'rpx'}"
+              >
+                {{statusMsg}}
+              </xd-button>
+            </view>
+          </view>
+
+          <view class="pwd__form-item">
+            <view>设置支付密码：</view>
+            <view>
+              <input
+                type="password"
+                placeholder="请输入六位纯数字密码"
+                :adjust-position="false"
+                v-model="form.password"
+                maxlength="6"
+              />
+            </view>
+          </view>
+
+          <view class="pwd__form-item">
+            <view>确认支付密码：</view>
+            <view>
+              <input
+                type="password"
+                placeholder="请输入确认密码"
+                :adjust-position="false"
+                v-model="form.confirmPwd"
+                maxlength="6"
+              />
+            </view>
+          </view>
+        </view>
+
+        <view>
+          <xd-button
+            type="primary"
+            size="mini"
+            :disabled="!form.phone || !form.sms_code || !form.password || !form.confirmPwd"
+            @click="submit"
+          >确定</xd-button>
+        </view>
+      </view>
+    </xd-dailog>
+  </view>
+</template>
+
+<script>
+  import XdDailog from "@/components/XdDailog/XdDailog";
+  import XdButton from "@/components/XdButton/XdButton";
+
+  export default {
+    name: "SetPassword",
+    props: {
+      show: {
+        type: Boolean,
+        default: false
+      },
+      title: {
+        type: String,
+        default: ''
+      },
+      editPhone: {
+        type: String,
+        default: ''
+      },
+      showClose: {
+        type: Boolean,
+        default: true
+      }
+    },
+    components: {
+      XdDailog,
+      XdButton
+    },
+    data() {
+      return {
+        form: {
+          sms_code: '',
+          phone: '', //手机号
+          password: '',
+          confirmPwd: '',
+        },
+        status: false,
+        second: 0,
+        statusMsg: '获取验证码',
+        codeWidth: '200',
+        confirm: true,
+        uiShow: false
+      }
+    },
+    created() {
+      if (this.editPhone) {
+        this.form.phone = this.editPhone
+      }
+      this.uiShow = this.show;
+    },
+    computed: {},
+    watch: {
+      'form.password': {
+        handler: function (val, oldval) {
+          let num = val.charAt(val.length - 1);
+          let reg = new RegExp("^[0-9]*$");
+          if (!reg.test(num)) {
+            setTimeout(() => {
+              this.form.password = val.slice(0, -1);
+            }, 0);
+          } else {
+            setTimeout(() => {
+              this.form.password = val;
+            }, 0);
+          }
+
+        },
+      },
+
+      'form.confirmPwd': {
+        handler: function (val, oldval) {
+          let num = val.charAt(val.length - 1);
+          let reg = new RegExp("^[0-9]*$");
+          if (!reg.test(num)) {
+            setTimeout(() => {
+              this.form.confirmPwd = val.slice(0, -1);
+            }, 0);
+          } else {
+            setTimeout(() => {
+              this.form.confirmPwd = val;
+            }, 0);
+          }
+
+        },
+      },
+
+      show(newVal) {
+        this.uiShow = newVal;
+
+      },
+
+      uiShow(value) {
+        this.$emit('update:show', value);
+      }
+    },
+    methods: {
+      getSmsCodeHandle() {
+        //无手机号
+        if (!this.form.phone) {
+          this.$xdAlert({
+            content: '请输入手机号!',
+            time: 1500,
+            isClose: false,
+            zIndex: 5000
+          });
+          return
+        }
+
+        if (this.status) {
+          return;
+        }
+        this.$emit('onGetCode', this.form.phone, () => {
+          this.sendSmsSuccess()
+        })
+
+      },
+
+      sendSmsSuccess() {
+        this.status = true;
+        this.second = 119;
+        this.codeWidth = '300';
+        this.statusMsg = `短信已发送:${this.second}s`;
+        let time = setInterval(() => {
+          this.statusMsg = `短信已发送:${this.second}s`;
+          this.second--;
+          if (this.second === 0) {
+            clearInterval(time);
+            this.status = false;
+            this.second = 0;
+            this.codeWidth = '200';
+            this.statusMsg = '获取验证码';
+          }
+        }, 1000)
+      },
+
+      submit() {
+
+        if (this.form.password.length < 6 || this.form.confirmPwd.length < 6) {
+          this.$xdAlert({
+            content: '密码长度不能少于六位!',
+            time: 1500,
+            isClose: false,
+            zIndex: 5000
+          });
+          return
+        }
+
+        if (this.form.password !== this.form.confirmPwd) {
+          this.$xdAlert({
+            content: '确认密码和密码不一致!',
+            time: 1500,
+            isClose: false,
+            zIndex: 5000
+          });
+          return
+        }
+        this.$emit('onSubmit', this.form)
+      },
+
+      handleClose() {
+        this.$emit('onClose')
+      }
+    }
+  }
+</script>
+
+<style lang="less">
+  .pwd {
+    font-size: @xd-font-size-base;
+
+    &__title {
+      border: 1px solid #ccc;
+      padding: unit(20, rpx);
+      text-align: center;
+      font-size: @xd-font-size-base + 4;
+      margin-bottom: unit(20, rpx);
+    }
+
+    &__form {
+      margin-bottom: unit(27, rpx);
+
+      &-item {
+        display: flex;
+        align-items: center;
+        padding: unit(10, rpx) 0;
+
+        input {
+          font-size: @xd-font-size-base;
+          border-bottom: 1px solid #ccc;
+          text-align: left;
+          padding: unit(10, rpx);
+        }
+      }
+    }
+  }
+
+</style>
+

package/src/components/JfbBaseCardDetailEntry/XdPwPay.vue

@@ -0,0 +1,214 @@
+<template>
+  <xd-dailog
+          :width="width"
+          :title="title"
+          :show.sync="uiShow"
+          :cancel="false"
+          :confirm="false"
+          :showClose="showClose"
+          @close="handleClose"
+  >
+    <view class="xd-pw-pay">
+      <view class="xd-pw-pay__header">
+        <view
+                v-for="(item,index) in textList"
+                :key="index"
+                class="xd-pw-pay__header-item">
+          {{item.label}}
+          <view v-if="item.value" class="xd-pw-pay__header-item-price">
+            <xd-unit
+                    :price="item.value"
+                    :iocnSize="0.32"
+            >
+            </xd-unit>
+          </view>
+        </view>
+      </view>
+      <view>
+        <view class="input-wrap">
+          <input
+                  class="input1"
+                  type="number"
+                  v-for="(item, index) in input_len"
+                  :style="{fontSize: '32rpx'}"
+                  @tap="onInput"
+                  :password="password"
+                  :key="index"
+                  :value="input_val.length >= index + 1 ? input_val[index] : ''"
+                  :focus="false"
+          />
+        </view>
+        <!-- 实际监听 -->
+        <input class="input2"
+               type="number"
+               v-if="isFocus"
+               @blur="blurInput"
+               @input="setInput"
+               v-model="input_val"
+               :maxlength="input_len"
+               :focus="true"
+        />
+
+        <view
+                class="forget-pw"
+                v-if="forget"
+                @click="handleForget"
+        >
+          忘记密码
+        </view>
+      </view>
+    </view>
+  </xd-dailog>
+</template>
+
+<script>
+  import XdUnit from "@/components/XdUnit/XdUnit";
+  import XdDailog from "@/components/XdDailog/XdDailog";
+
+  export default {
+    name: "XdPwPay",
+    components: {XdUnit, XdDailog},
+    comments: {
+      XdDailog
+    },
+    props: {
+      input_len: {
+        type: Number,
+        default: 6
+      }, //密码长度
+      password: {
+        type: Boolean,
+        default: true
+      },
+      width: {
+        type: Number | String,
+        default: '50%',
+      },
+      title: {
+        type: String,
+        default: '标题',
+      },
+      show: {
+        type: Boolean,
+        default: true,
+      },
+      textList: {
+        type: Array,
+        default: []
+      },
+      forget: {
+        type: Boolean,
+        default: true
+      },
+      showClose: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data() {
+      return {
+        isFocus: false,
+        input_val: '', // 验证码的值
+        uiShow: false
+      }
+    },
+    watch: {
+      show(newVal) {
+        if (newVal === false) {
+          this.input_val = ''
+          this.isFocus = true
+        }
+        this.uiShow = newVal;
+
+      },
+
+      uiShow(value) {
+        this.$emit('update:show', value);
+      }
+    },
+    created() {
+      if (this.show) {
+        this.input_val = ''
+        this.isFocus = true
+        this.uiShow = this.show;
+      }
+    },
+    methods: {
+      onInput() {
+        this.isFocus = true;
+      },
+      setInput(e) {
+
+        // this.input_val = e.detail.value;
+        if (this.input_val.length == 6) {
+          this.$emit('onSubmit', this.input_val)
+        }
+      },
+      blurInput() {
+        this.isFocus = false;
+      },
+      handleForget() {
+        this.$emit('onForget')
+      },
+      handleClose() {
+        this.$emit('update:show', this.show);
+        this.$emit('onClose')
+      },
+      clearPwd() {
+        this.input_val = ''
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .xd-pw-pay {
+    padding: unit(20, rpx);
+    font-size: @xd-font-size-lg;
+  }
+
+  .xd-pw-pay__header {
+    padding: unit(20, rpx) 0;
+
+    &-item {
+      margin-bottom: unit(20, rpx);
+
+      &-price {
+        display: flex;
+        justify-content: center;
+        margin-top: unit(20, rpx)
+      }
+    }
+  }
+
+  .input-wrap {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    margin-top: unit(40, rpx);
+
+    .input1 {
+      display: flex;
+      width: unit(60, rpx);
+      height: unit(60, rpx);
+      justify-content: space-around;
+      text-align: center;
+      border: 1px solid #9b9ba5;
+    }
+  }
+
+  .input2 {
+    width: unit(10, rpx);
+    height: unit(10, rpx);
+    position: absolute;
+    top: unit(0, rpx);
+    left: unit(-750, rpx);
+    min-height: 0
+  }
+
+  .forget-pw {
+    text-align: right;
+    margin-top: unit(20, rpx);
+    color: #ccc
+  }
+</style>