jufubao-base 1.0.232-beta4 → 1.0.232-beta6

package/src/components/JfbBaseOpenVip/Attr.js

@@ -233,12 +233,12 @@ export default {
         notice: '',
       },
       {
-        label: '支付跳转路径:',
+        label: '会员详情路径:',
         ele: 'xd-select-pages-path',
-        valueKey: 'payPath',
+        valueKey: 'vipDetailPath',
         groupKey:'advanced',
-        placeholder: '请选择支付跳转路径',
-        value: data['payPath'] || null,
+        placeholder: '请选择会员详情路径',
+        value: data['vipDetailPath'] || null,
         setting: {
           router: XdBus.getParentApi('getPagesTree'),
         },

package/src/components/JfbBaseOpenVip/JfbBaseOpenVip.vue

@@ -16,15 +16,18 @@
     <view class="jfb-base-open-vip__body" :style="[bodyStyle]">
       <!-- 用户信息 -->
       <view class="u_header">
-        <view class="u_avatar"></view>
+        <view class="u_avatar">
+          <image :src="uInfo.head_url" mode="aspectFill"></image>
+        </view>
         <view class="u_info">
           <view class="u_info-top">
-            <view class="vip_name">黑白灰</view>
-            <view v-if="0" class="vip_level">普通用户</view>
-            <view v-else class="vip_level plus">PLUS会员</view>
+            <view class="vip_name">{{ uInfo.show_user_name }}</view>
+            <view v-if="isVip" class="vip_level plus">PLUS会员</view>
+            <view v-else class="vip_level">普通用户</view>
           </view>
           <view class="u_sub">
-            <view>138****7353</view>
+            <view v-if="isVip">已省xx</view>
+            <view v-else>{{ uInfo.phone_number }}</view>
           </view>
         </view>
         <view class="buy_btn" @click="showDrawer=true">立即续费</view>
@@ -37,7 +40,9 @@
             <view class="vip_box-title">PLUS会员</view>
             <view>开通享受更多权益</view>
           </view>
-          <view class="vip_logo"></view>
+          <view class="vip_logo">
+            <image :src="siteLogo" mode="aspectFill"></image>
+          </view>
         </view>
         <view class="vip_banner">
           <view class="banner_item" v-for="i in 4" :key="i">
@@ -61,12 +66,18 @@
           </view>
         </view>
       </view>
-
-      <xd-vip-list @handlePrivacy="handlePrivacy"></xd-vip-list>
+      
+      <xd-vip-list :list="vipCardList"
+        @handlePrivacy="handlePrivacy"
+        @toVipDetail="toVipDetail"
+      ></xd-vip-list>
 
       <xd-down-drawer :show.sync="showDrawer" height="480rpx">
         <view class="drawer_title">立即续费</view>
-        <xd-vip-list @handlePrivacy="handlePrivacy"></xd-vip-list>
+        <xd-vip-list :list="vipCardList"
+          @handlePrivacy="handlePrivacy"
+          @toVipDetail="toVipDetail"
+        ></xd-vip-list>
       </xd-down-drawer>
 
     </view>
@@ -83,6 +94,7 @@
   import { getContainerPropsValue } from "@/utils/xd.base";
   import componentsMixins from "@/mixins/componentsMixins";
   import extsMixins from "@/mixins/extsMixins";
+  import getServiceUrl from "@/common/getServiceUrl"
 
   export default {
     name: "JfbBaseOpenVip",
@@ -97,11 +109,16 @@
     ],
     data() {
       return {
-        //hideMask: true,
+        closeMask: true,
 
         showDrawer: false,
+        uInfo: {},
+        xnamespace: "",
+        vipCardList: [],
+
+        siteLogo: "",
         //todo
-        payPath: "",
+        vipDetailPath: "",
       }
     },
     computed: {
@@ -110,6 +127,9 @@
           minHeight: this.layoutInfo.bodyMinHeightRpx + "rpx",
           '--main-color': this.mainColor
         }
+      },
+      isVip(){
+        return this.uInfo.user_level === 'VIP';
       }
     },
     watch: {
@@ -120,28 +140,39 @@
     },
     created() {
       this.init(this.container);
-
+      this.siteLogo = getServiceUrl(this.projectAttr['site_logo']);
       //todo
     },
     methods: {
       onJfbLoad(options) {
-
-        // jfbRootExec('baiduUserLogin', {
-
-        //   vm: this,//   data: {
-
-        //     account: 'gaoshiyong',//     password: '123456789',//     type: 3,//     ...options
-
-        //   }
-
-        // }).then().catch()
+        this.setNameSpace(options);
+        this.p_getBaseUserInfo();
+        this.p_getVipList();
       },
       /**
        * @description 监听事件变化
        * @param container {object} 业务组件对象自己
        */
       init(container) {
-        this.payPath = getContainerPropsValue(container, 'content.payPath', {value: ""}).value;
+        this.vipDetailPath = getContainerPropsValue(container, 'content.vipDetailPath', {value: "/system/system/vipdetail"}).value;
+      },
+      p_getBaseUserInfo(){
+        jfbRootExec("getBaseUserInfo", {
+          vm: this,
+          data: {}
+        }).then(res => {
+          this.uInfo = res;
+        })
+      },
+      p_getVipList(){
+        jfbRootExec("getVipList", {
+          vm: this,
+          data: {
+            namespace: this.xnamespace,
+          }
+        }).then(res => {
+          this.vipCardList = res.list;
+        })
       },
       handlePrivacy(code){
         let params = `page_id=${this.pageAttr["page_id"]}`;
@@ -150,8 +181,13 @@
           url: `/pages/content/content?${params}`
         })
       },
+      toVipDetail(vip_card_id){
+        this.$xdUniHelper.navigateTo({
+          url: `${this.vipDetailPath}?vip_card_id=${vip_card_id}`
+        })
+      },
       onJfbScroll(options) {
-        console.log('event.onJfbScroll', options)
+        // console.log('event.onJfbScroll', options)
       },
       onJfbReachBottom(options) {
         console.log('event.onJfbReachBottom', options)
@@ -190,9 +226,13 @@
         .u_avatar{
           width: 120rpx;
           height: 120rpx;
-          background-color: #f00;
           border-radius: 120rpx;
           margin-right: 24rpx;
+          overflow: hidden;
+          image{
+            width: 100%;
+            height: 100%;
+          }
         }
         .u_info{
           flex:1;
@@ -261,7 +301,10 @@
           .vip_logo{
             width: 104rpx;
             height: 104rpx;
-            background-color: #E8A841;
+            image{
+              width: 100%;
+              height: 100%;
+            }
           }
         }
 

package/src/components/JfbBaseOpenVip/Mock.js

@@ -1,13 +1,20 @@
 'use strict';
 
 module.exports = {
-  
-  getOpenByIdFilmSquate:{},
-  
-  updateOpenFilmPaiqiDate:{},
-  
-  removeOpenFilmAddress:{},
-  
-  addOpenFilmcart:{},
-  
+  getBaseUserInfo: {
+    "user_name": "15801505541",
+    "user_code": "97SJSG667V",
+    "nickname": "草鸡无敌飞侠",
+    "real_name": "",
+    "head_url": "https://sandbox-img.jufubao.cn//uploads/20230217/dc6f1817ae3714814328fcff55925d00.jpg?x-oss-process=style/size8",
+    "province_code": "",
+    "city_code": "",
+    "province_name": "",
+    "city_name": "",
+    "sex": "",
+    "sex_name": "未知",
+    "birthday_date": "",
+    "phone_number": "15801505541",
+    "request_id": "44cf5b8402ff7c2e"
+  }
 }

package/src/components/JfbBaseOpenVip/XdVipList.vue

@@ -1,13 +1,13 @@
 <template>
   <view class="xd_vip_wrap">
     <view class="vip_list">
-      <view class="vip_item" :class="{active: i==1}" v-for="i in 6" :key="i">
-        <view class="vip_name">1日体验</view>
-        <view class="vip_price">10.00</view>
+      <view class="vip_item" :class="{active: item.vip_card_id===vip_card_id}" v-for="item in uiList" :key="item.vip_card_id">
+        <view class="vip_name">{{ item.product_name}}</view>
+        <view class="vip_price">{{ $xdUniHelper.divisionFloatNumber(item.sale_price, 100) }}</view>
       </view>
     </view>
     <view class="vip_pay">
-      <xd-button type="primary" width="600rpx">立即支付￥148/年</xd-button>
+      <view class="pay_btn" @click="toVipDetail">立即支付 <xd-unit style="margin-left: 16rpx;" :price="curVipCard.sale_price" :isOld="false" colorNew="#FFFFFF"></xd-unit></view>
       <view class="vip_tip">开通视为同意<text @click.stop="handlePrivacy('privacy_service')">《共享PLUS会员用户协议》</text></view>
     </view>
   </view>
@@ -15,18 +15,45 @@
 
 <script>
   import XdButton from "@/components/XdButton/XdButton.vue"
+  import XdUnit from "@/components/XdUnit/XdUnit.vue"
   export default {
     components: {
-      XdButton
+      XdButton,
+      XdUnit
+    },
+    props: {
+      list: {
+        type: Array,
+        default(){
+          return []
+        }
+      }
+    },
+    watch: {
+      list(val){
+        this.vip_card_id = val[0].vip_card_id || ''
+        this.uiList = val
+      }
+    },
+    computed: {
+      curVipCard(){
+        return this.uiList.find(item => item.vip_card_id === this.vip_card_id) || {}
+      }
     },
     data(){
       return {
-        
+        uiList: [],
+        vip_card_id: ''
       }
     },
     methods: {
       handlePrivacy(type){
         this.$emit('handlePrivacy', type)
+      },
+      toVipDetail(){
+        if(this.vip_card_id){
+          this.$emit('toVipDetail', this.vip_card_id)
+        }
       }
     }
   }
@@ -70,6 +97,17 @@
     }
     .vip_pay{
       padding: 24rpx 0 50rpx;
+      .pay_btn{
+        width: 600rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 80rpx;
+        background-color: var(--main-color);
+        color: #FFFFFF;
+        margin: 0 auto;
+        border-radius: 80rpx;
+      }
     }
     .vip_tip{
       text-align: center;

package/src/components/JfbBaseOpenVipDetail/Api.js

@@ -6,53 +6,31 @@
  */
 module.exports = [
   {
-    //设置方法名字当别忘记加上【模块名字】：Open
-    mapFnName: 'getOpenByIdFilmSquate',
-    title: '获取电影广场列表',
-    path: '/api/account/film/list-film-square',
+    mapFnName: "getVipConfirm",
+    title: "获取vip确认信息",
+    path: "/member/v1/:xnamespace/order/confirm",
     isRule: false,
-    params: {
-      last_key: ['当前页', 'Number', '必选'],
-      page_size: ['每页数量', 'Number', '必选'],
+    data: {
+      vip_card_id: ["vip卡id", "Number", "必选"],
+      xnamespace: ['业务线', 'String', '必选']
     },
     isConsole: true,
     disabled: true,
   },
   {
-    //设置方法名字当别忘记加上【模块名字】：Open
-    mapFnName: 'updateOpenFilmPaiqiDate',
-    title: '更新排期',
-    path: '/api/account/film/paiqi-date',
+    mapFnName: "createVipOrder",
+    title: "创建VIP订单",
+    path: "/member/v1/order/submit",
     isRule: false,
-    params: {
-      film_id: ['电影id', 'Number', '必选'],
-      cinema_id: ['影院id', 'Number', '必选'],
+    data: {
+      business_code: ['业务编码', 'String', '必选'],
+      product_id: ['商品id', 'Number', '必选'],
+      notify_provider_id: ['notify_provider_id', 'Number', '可选'],
+      selected_card_list_json: ['已使用的卡券数据', 'array', '可选'],
+      selected_wallet_list_json: ['已使用的钱包数据', 'array', '可选'],
+      need_pay_price: ['需要支付的价格', 'Number', '可选']
     },
     isConsole: true,
     disabled: true,
-  },
-  {
-    //设置方法名字当别忘记加上【模块名字】：Open
-    mapFnName: 'removeOpenFilmAddress',
-    title: '删除我的配送地址',
-    path: '/api/account/film/paiqi-date',
-    isRule: false,
-    params: {
-      film_id: ['电影id', 'Number', '必选'],
-    },
-    isConsole: true,
-    disabled: true,
-  },
-  {
-    //设置方法名字当别忘记加上【模块名字】：Open
-    mapFnName: 'addOpenFilmcart',
-    title: '添加购物车',
-    path: '/api/account/film/paiqi-date',
-    isRule: false,
-    params: {
-      film_id: ['电影id', 'Number', '必选'],
-    },
-    isConsole: true,
-    disabled: true,
-  },
+  }
 ];

package/src/components/JfbBaseOpenVipDetail/Attr.js

@@ -8,39 +8,28 @@ export default {
   content: (data) => {
     return [
       {
-        label: '背景颜色:',
-        ele: 'xd-color',
-        valueKey: 'bgColor',
-        value: data.bgColor || '',
-        placeholder: '请输入占位框背景颜色',
-        groupKey:'content',
-      },
-      {
-        label: '选中路径:',
-        groupKey:'advanced',
-        className: 'input100',
+        label: '支付页面路径:',
         ele: 'xd-select-pages-path',
-        valueKey: 'select-pages-path',
-        value: data['select-pages-path'] || null,
+        valueKey: 'payPath',
+        groupKey:'advanced',
+        placeholder: '请选择支付页面路径',
+        value: data['payPath'] || null,
         setting: {
-          router: XdBus.getParentApi('getPagesTree')
+          router: XdBus.getParentApi('getPagesTree'),
         },
-      },
-      data.bgColor && {
-        label: '高度:',
-        ele: 'el-input',
-        groupKey:'style',
-        type: 'number',
-        valueKey: 'height',
-        value: data.height || 100,
-        placeholder: '请输入占位框高度，单位像素，默认：10px',
-        className: 'input60',
+        inline: false,
       },
       {
-        label: '', //label
+        label: '支付成功路径:',
+        ele: 'xd-select-pages-path',
+        valueKey: 'paySuccessPath',
         groupKey:'advanced',
-        ele: 'slot', //package 名称
-        slot: 'is_reference',
+        placeholder: '请选择支付成功路径',
+        value: data['paySuccessPath'] || null,
+        setting: {
+          router: XdBus.getParentApi('getPagesTree'),
+        },
+        inline: false,
       },
     ].filter(i=>i)
   },

package/src/components/JfbBaseOpenVipDetail/JfbBaseOpenVipDetail.vue

@@ -13,25 +13,38 @@
       <view class="jfb-base-open-vip-detail__edit-icon" @click="delEdit">删除</view>
     </view>
     <!-- #endif -->
-    <view class="jfb-base-open-vip-detail__body">
+    <view class="jfb-base-open-vip-detail__body" :style="[bodyStyle]">
       <view class="combo_section">
-        <view class="combo_section-title">套餐名称：年卡会员</view>
-        <xd-list-item label="套餐金额" paddingLR="40rpx">¥125.00</xd-list-item>
-        <xd-list-item label="套餐期限" paddingLR="40rpx">30天</xd-list-item>
+        <view class="combo_section-title">套餐名称：{{ vipInfo.product_name }}</view>
+        <xd-list-item label="套餐金额" paddingLR="40rpx">¥{{ $xdUniHelper.divisionFloatNumber(vipInfo.sale_price, 100) }}</xd-list-item>
+        <xd-list-item label="套餐期限" paddingLR="40rpx">{{ vipInfo.life_cycle_label }}</xd-list-item>
       </view>
 
       <view class="combo_section">
-        <xd-list-item label="套餐金额" paddingLR="40rpx">¥125.00</xd-list-item>
-        <xd-list-item label="平台优惠" paddingLR="40rpx">-¥125.00</xd-list-item>
+        <xd-list-item label="套餐金额" paddingLR="40rpx">¥{{ $xdUniHelper.divisionFloatNumber(vipInfo.user_pay_amount, 100) }}</xd-list-item>
+        <xd-list-item label="平台优惠" paddingLR="40rpx">-¥{{ $xdUniHelper.divisionFloatNumber(vipInfo.platform_discount_amount, 100) }}</xd-list-item>
+      </view>
+      
+      <view class="fixed_bottom" :style="[fixed_bottom]">
+        <view class="pay_btn" @click="p_createVipOrder">
+          立即支付
+          <xd-unit style="margin-left: 16rpx;"
+            :price="vipInfo.sale_price"
+            :isOld="false"
+            colorNew="#FFFFFF"
+          ></xd-unit>
+        </view>
+        <view class="plus_privacy">开通视为同意 <text @click.stop="handlePrivacy('privacy_service')"></text>《共享PLUS会员用户协议》</view>
       </view>
-
     </view>
   </view>
 </template>
 
 <script>
   import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
-  import XdListItem from "@/components/XdListItem/XdListItem"
+  import XdListItem from "@/components/CusListItem/CusListItem"
+  import XdUnit from "@/components/XdUnit/XdUnit.vue"
+  import XdButton from "@/components/XdButton/XdButton";
   import { jfbRootExec } from "@/utils/xd.event";
   import JfbBaseOpenVipDetailMixin from "./JfbBaseOpenVipDetailMixin";
   import { getContainerPropsValue } from "@/utils/xd.base";
@@ -41,17 +54,37 @@
     name: "JfbBaseOpenVipDetail",
     components: {
       XdFontIcon,
-      XdListItem
+      XdListItem,
+      XdButton,
+      XdUnit,
     },
     mixins: [
       componentsMixins, extsMixins, JfbBaseOpenVipDetailMixin
     ],
     data() {
       return {
-        //hideMask: true,
+        closeMask: true,
+        xnamespace: "",
+        notify_provider_id: "",
+
+        vip_card_id: "",
+        vipInfo: {},
         //todo
+        payPath: "",
+        paySuccessPath: "",
       }
     },
+    computed: {
+      bodyStyle(){
+        return {
+          minHeight: this.layoutInfo.bodyMinHeightRpx + "rpx",
+          '--main-color': this.mainColor
+        }
+      },
+      fixed_bottom() {
+        return this.fixedStyle({paddingBottom: 36, zIndex: 111})
+      },
+    },
     watch: {
       container(value, oldValue) {
         if (JSON.stringify(value) === JSON.stringify(oldValue)) return;
@@ -60,34 +93,58 @@
     },
     created() {
       this.init(this.container);
-
+      this.notify_provider_id = this.projectAttr.notify_provider_id;
       //todo
     },
     methods: {
       onJfbLoad(options) {
-
-        // jfbRootExec('baiduUserLogin', {
-
-        //   vm: this,//   data: {
-
-        //     account: 'gaoshiyong',//     password: '123456789',//     type: 3,//     ...options
-
-        //   }
-
-        // }).then().catch()
+        this.setNameSpace(options);
+        this.vip_card_id = options.vip_card_id;
+        this.p_getVipConfirm();
       },
       /**
        * @description 监听事件变化
        * @param container {object} 业务组件对象自己
        */
       init(container) {
+        this.payPath = getContainerPropsValue(container, 'content.payPath', {value: ""}).value;
+        this.paySuccessPath = getContainerPropsValue(container, 'content.paySuccessPath', {value: ""}).value;
+      },
+      p_getVipConfirm(){
+        jfbRootExec("getVipConfirm", {
+          vm: this,
+          data: {
+            vip_card_id: this.vip_card_id,
+            xnamespace: this.xnamespace
+          }
+        }).then(res => {
+          this.vipInfo = res;
+        })
+      },
+      p_createVipOrder(){
+        jfbRootExec("createVipOrder", {
+          vm: this,
+          data: {
+            business_code: this.xnamespace,
+            product_id: this.vipInfo.product_id,
+            notify_provider_id: this.notify_provider_id,
+            need_pay_price: this.vipInfo.user_pay_amount
+          }
+        }).then(res => {
+          if(res.need_pay_price > 0){
+            this.$xdUniHelper.redirectTo({
+              url: this.payPath + `?order_id=${res.pay_order_id}&main_order_id=${res.main_order_id}`
+            })
+          }else{
+            this.$xdUniHelper.redirectTo({
+              url: this.paySuccessPath + '?order_id=' + res.main_order_id
+            })
+          }
 
-        //this.bgcolor = getContainerPropsValue(container, 'content.bgcolor', '#fff');
-
-        //this.height = getContainerPropsValue(container, 'content.height', 10);
+        })
       },
       onJfbScroll(options) {
-        console.log('event.onJfbScroll', options)
+        // console.log('event.onJfbScroll', options)
       },
       onJfbReachBottom(options) {
         console.log('event.onJfbReachBottom', options)
@@ -135,6 +192,34 @@
           color: #999999;
         }
       }
+      .fixed_bottom{
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        padding: 36rpx;
+        box-sizing: border-box;
+        background-color: #FFFFFF;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        .pay_btn{
+          width: 600rpx;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          height: 80rpx;
+          background-color: var(--main-color);
+          color: #FFFFFF;
+          margin: 0 auto;
+          border-radius: 80rpx;
+        }
+        .plus_privacy{
+          font-size: 22rpx;
+          color: #999;
+          margin-top: 16rpx;
+        }
+      }
     }
   }
 </style>