jufubao-base 1.0.232-beta3 → 1.0.232-beta4

package/src/components/JfbBaseLogin/JfbBaseLogin.vue

@@ -17,7 +17,8 @@
     </view>
     <!-- #endif -->
     <view class="jfb-base-login__body" :style="{
-      '--agreement-align': agreementAlign
+      '--agreement-align': agreementAlign,
+      '--main-color': mainColor,
     }">
 
       <view v-if="showLogo === 'Y'" class="logo-wrap" :style="{
@@ -108,15 +109,13 @@
             class="_item"
             :class="{ active: accountLoginType === 'phone' }"
             @click="setAccountLoginType('phone')"
-            >验证码登录<text :style="{ background: mainColor }"></text
-          ></view>
+            >验证码登录</view>
           <view
             v-if="pwdLogin"
             class="_item"
             :class="{ active: accountLoginType === 'pwd' }"
             @click="setAccountLoginType('pwd')"
-            >密码登录<text :style="{ background: mainColor }"></text
-          ></view>
+            >密码登录</view>
         </view>
         <view :style="loginFormStyle">
           <xd-form
@@ -1269,11 +1268,21 @@ export default {
             color: #383838;
             font-size: 36rpx;
 
-            text {
+            // text {
+            //   position: absolute;
+            //   height: 6rpx;
+            //   width: 90rpx;
+            //   border-radius: 6rpx;
+            //   left: 50%;
+            //   bottom: 0;
+            //   transform: translateX(-50%);
+            // }
+            &::after {
+              content: ' ';
               position: absolute;
               height: 6rpx;
               width: 90rpx;
-              border-radius: 6rpx;
+              background-color: var(--main-color);
               left: 50%;
               bottom: 0;
               transform: translateX(-50%);

package/src/components/JfbBaseOpenVip/Attr.js

@@ -8,39 +8,241 @@ export default {
   content: (data) => {
     return [
       {
-        label: '背景颜色:',
-        ele: 'xd-color',
-        valueKey: 'bgColor',
-        value: data.bgColor || '',
-        placeholder: '请输入占位框背景颜色',
+        label: '共享PLUS会员用户协议:',
+        ele: 'xd-site-news',
+        valueKey: 'notices',
         groupKey:'content',
-      },
-      {
-        label: '选中路径:',
-        groupKey:'advanced',
-        className: 'input100',
-        ele: 'xd-select-pages-path',
-        valueKey: 'select-pages-path',
-        value: data['select-pages-path'] || null,
+        value: data.notices || {type: 'privacy'},
+        className: 'input70',
         setting: {
-          router: XdBus.getParentApi('getPagesTree')
+          config: {
+            sort: true,
+            maxlen: 100,
+            action: 'aliyun',
+            size: 5,
+            tipsformet: '上传文件格式：@imageType@，不超过@size@MB.',
+            uploadType: 'aliyun',
+            type: ['jpg', 'png', 'jpeg']
+          },
         },
-      },
-      data.bgColor && {
-        label: '高度:',
-        ele: 'el-input',
-        groupKey:'style',
-        type: 'number',
-        valueKey: 'height',
-        value: data.height || 100,
-        placeholder: '请输入占位框高度，单位像素，默认：10px',
-        className: 'input60',
+        handleCustom({action, data}) {
+          if (data && data.params) {
+            //当一个插件中出现多个内容分类时候需要设置code值，在页面引用时候（容器id + code）进行拼接获取数据列表
+            data.params = Object.assign({}, data.params, {code: 'privacy_service'});
+          }
+
+          //获取返回参数(场景类型名称为必填)
+          let loading = { close(){}}
+
+          //获取显示内容
+          if (action === 'screen') {
+            XdBus.getParentApi('getOptionsSettingList')({setting_id: 'edtix_bucket_content_tip'})
+              .then(res => {
+                loading.close();
+                data.cb(res['list'])
+              })
+              .catch(error => {
+                console.error(error);
+                loading.close();
+              });
+
+          }
+
+          //获取返回参数(广告位高度必选项)
+          if (action === 'getNewsInfo') {
+            XdBus.getParentApi('cmsGetPublishEditxContent')(data.params)
+              .then(res => {
+                loading.close()
+                data.cb({list: res.list, selectId: res.selected})
+              })
+              .catch(error => {
+                loading.close()
+                console.error(error);
+              });
+          }
+
+          //获取产品业务线列表
+          if (action === 'namespace') {
+            XdBus.getParentApi('getOptionsNamespaces')({})
+              .then(res => {
+                loading.close()
+                data.cb(res['list'])
+              })
+              .catch(error => {
+                loading.close()
+                console.error(error);
+              });
+          }
+
+          //使用内容分类
+          if (action === 'cmsPublishEditxContent') {
+            loading = XdBus.getParentApi('loading')({});
+            XdBus.getParentApi('cmsPublishEditxContent')(data.params)
+              .then(res => {
+                console.log('cmsPublishEditxContent', res)
+                loading.close();
+                data.cb(res)
+              })
+              .catch(error => {
+                loading.close();
+                console.error(error);
+              });
+          }
+
+          //位置列表
+          if (action === 'getListPostion') {
+            loading = XdBus.getParentApi('loading')({});
+            XdBus.getParentApi('getListNewsPosition')(data.params)
+              .then(res => {
+                loading.close();
+                data.cb(res)
+              })
+              .catch(error => {
+                loading.close();
+                console.error(error);
+              });
+          }
+
+          //位置创建
+          if (action === 'addPostion') {
+            loading = XdBus.getParentApi('loading')({});
+            XdBus.getParentApi('addNewsPosition')(data.params)
+              .then(res => {
+                loading.close();
+                data.cb(true)
+              })
+              .catch(error => {
+                console.error(error);
+                loading.close();
+                data.cb(false)
+              });
+          }
+
+          //位置编辑
+          if (action === 'editPostion') {
+            loading = XdBus.getParentApi('loading')({});
+            XdBus.getParentApi('updateNewsPosition')(data.params)
+              .then(res => {
+                loading.close();
+                data.cb(true)
+              })
+              .catch(error => {
+                console.error(error);
+                loading.close();
+                data.cb(false)
+              });
+          }
+
+          //位置删除
+          if (action === 'deleltePostion') {
+            loading = XdBus.getParentApi('loading')({});
+            XdBus.getParentApi('deleteNewsPosition')(data.params)
+              .then(res => {
+                loading.close();
+                data.cb(true)
+              })
+              .catch(error => {
+                console.error(error);
+                loading.close();
+                data.cb(false)
+              });
+          }
+
+          //获取广告位内容列表
+          if (action === 'getListContent') {
+            loading = XdBus.getParentApi('loading')({});
+            XdBus.getParentApi('getListNewsContent')(data.params)
+              .then(res => {
+                loading.close();
+                data.cb(res)
+              })
+              .catch(error => {
+                loading.close();
+                console.error(error);
+              });
+          }
+
+          //广告内容创建
+          if (action === 'addContent') {
+            loading = XdBus.getParentApi('loading')({});
+            XdBus.getParentApi('addNewsContent')(data.params)
+              .then(res => {
+                loading.close();
+                data.cb(true)
+              })
+              .catch(error => {
+                console.error(error);
+                loading.close();
+                data.cb(false)
+              });
+          }
+
+          //广告内容编辑
+          if (action === 'editContent') {
+            loading = XdBus.getParentApi('loading')({});
+            XdBus.getParentApi('updateNewsContent')(data.params)
+              .then(res => {
+                loading.close();
+                data.cb(true)
+              })
+              .catch(error => {
+                console.error(error);
+                loading.close();
+                data.cb(false)
+              });
+          }
+
+          //广告内容删除
+          if (action === 'deleteContent') {
+            loading = XdBus.getParentApi('loading')({});
+            XdBus.getParentApi('deleteNewsContent')(data.params)
+              .then(res => {
+                loading.close();
+                data.cb(true)
+              })
+              .catch(error => {
+                console.error(error);
+                loading.close();
+                data.cb(false)
+              });
+          }
+
+          //内容发布
+          if (action === 'publish') {
+            loading = XdBus.getParentApi('loading')({});
+            console.log('publish', data.params)
+            XdBus.getParentApi('cmsPublishContent')(data.params)
+              .then(res => {
+                loading.close();
+                data.cb(res)
+              })
+              .catch(error => {
+                loading.close();
+                console.error(error);
+              });
+          }
+
+          //通知页面进行刷新
+          if (action === 'update') {
+            loading = XdBus.getParentApi('loading')({});
+            XdBus.getParentApi('getXdBusUpdateView')('onUpdateView', {});
+            loading.close()
+          }
+        },
+        inline: false,
+        notice: '',
       },
       {
-        label: '', //label
+        label: '支付跳转路径:',
+        ele: 'xd-select-pages-path',
+        valueKey: 'payPath',
         groupKey:'advanced',
-        ele: 'slot', //package 名称
-        slot: 'is_reference',
+        placeholder: '请选择支付跳转路径',
+        value: data['payPath'] || null,
+        setting: {
+          router: XdBus.getParentApi('getPagesTree'),
+        },
+        inline: false,
       },
     ].filter(i=>i)
   },

package/src/components/JfbBaseOpenVip/JfbBaseOpenVip.vue

@@ -13,31 +13,103 @@
       <view class="jfb-base-open-vip__edit-icon" @click="delEdit">删除</view>
     </view>
     <!-- #endif -->
-    <view class="jfb-base-open-vip__body">
-      <view>测试插件( {{containerId}} )</view>
+    <view class="jfb-base-open-vip__body" :style="[bodyStyle]">
+      <!-- 用户信息 -->
+      <view class="u_header">
+        <view class="u_avatar"></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>
+          <view class="u_sub">
+            <view>138****7353</view>
+          </view>
+        </view>
+        <view class="buy_btn" @click="showDrawer=true">立即续费</view>
+      </view>
+
+      <!-- plus会员权益 -->
+      <view class="vip_info">
+        <view class="vip_box">
+          <view class="vip_box-left">
+            <view class="vip_box-title">PLUS会员</view>
+            <view>开通享受更多权益</view>
+          </view>
+          <view class="vip_logo"></view>
+        </view>
+        <view class="vip_banner">
+          <view class="banner_item" v-for="i in 4" :key="i">
+            <view class="banner_img"></view>
+            <view class="banner_text">生日祝福</view>
+          </view>
+        </view>
+        <view class="vip_good">
+          <view class="vip_good-title">
+            <text class="_text">4大特权</text>
+            <view class="line"></view>
+          </view>
+          <view class="good_list">
+            <view class="good_item" v-for="i in 4" :key="i">
+              <view class="good_title">
+                <view class="good_title-tag">特权福利1</view>
+                <view>生日祝福</view>
+              </view>
+              <view class="good_cont">平台会在生日当天为用户发放专属的生日祝福</view>
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <xd-vip-list @handlePrivacy="handlePrivacy"></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-down-drawer>
+
     </view>
   </view>
 </template>
 
 <script>
   import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import XdButton from "@/components/XdButton/XdButton";
+  import XdVipList from "./XdVipList.vue";
+  import XdDownDrawer from "@/components/XdDownDrawer/XdDownDrawer.vue"
   import { jfbRootExec } from "@/utils/xd.event";
   import JfbBaseOpenVipMixin from "./JfbBaseOpenVipMixin";
   import { getContainerPropsValue } from "@/utils/xd.base";
   import componentsMixins from "@/mixins/componentsMixins";
   import extsMixins from "@/mixins/extsMixins";
+
   export default {
     name: "JfbBaseOpenVip",
     components: {
-      XdFontIcon
+      XdFontIcon,
+      XdButton,
+      XdVipList,
+      XdDownDrawer
     },
     mixins: [
       componentsMixins, extsMixins, JfbBaseOpenVipMixin
     ],
     data() {
       return {
+        //hideMask: true,
 
+        showDrawer: false,
         //todo
+        payPath: "",
+      }
+    },
+    computed: {
+      bodyStyle(){
+        return {
+          minHeight: this.layoutInfo.bodyMinHeightRpx + "rpx",
+          '--main-color': this.mainColor
+        }
       }
     },
     watch: {
@@ -69,10 +141,14 @@
        * @param container {object} 业务组件对象自己
        */
       init(container) {
-
-        //this.bgcolor = getContainerPropsValue(container, 'content.bgcolor', '#fff');
-
-        //this.height = getContainerPropsValue(container, 'content.height', 10);
+        this.payPath = getContainerPropsValue(container, 'content.payPath', {value: ""}).value;
+      },
+      handlePrivacy(code){
+        let params = `page_id=${this.pageAttr["page_id"]}`;
+        params = `${params}&container_id=${this.containerId}${code}`;
+        this.$xdUniHelper.navigateTo({
+          url: `/pages/content/content?${params}`
+        })
       },
       onJfbScroll(options) {
         console.log('event.onJfbScroll', options)
@@ -105,7 +181,183 @@
 
   .jfb-base-open-vip {
     &__body{
+      .u_header{
+        display: flex;
+        align-items: center;
+        padding: 24rpx 40rpx;
+        margin: 20rpx;
+
+        .u_avatar{
+          width: 120rpx;
+          height: 120rpx;
+          background-color: #f00;
+          border-radius: 120rpx;
+          margin-right: 24rpx;
+        }
+        .u_info{
+          flex:1;
+          &-top{
+            display: flex;
+            align-items: center;
+            .vip_name{
+              font-size: 28rpx;
+              color: #333333;
+            }
+            .vip_level{
+              padding: 4rpx 16rpx;
+              border-radius: 24rpx;
+              font-size: 24rpx;
+              background-color: #FFE6C4;
+              color: #615850;
+              margin-left: 8rpx;
+              &.plus{
+                background: linear-gradient(180deg, #615243 0%, #2D2824 100%);
+                color: #FFEFD7;
+              }
+            }
+          }
+          .u_sub{
+            margin-top: 24rpx;
+          }
+        }
+        .buy_btn{
+          width: 146rpx;
+          height: 60rpx;
+          background-color: var(--main-color);
+          color: #fff;
+          border-radius: 60rpx;
+          line-height: 60rpx;
+          text-align: center;
+          font-size: 24rpx;
+        }
+      }
+
+      .vip_info{
+        padding: 20rpx;
+        .vip_box{
+          width: 100%;
+          height: 184rpx;
+          border-radius: 24rpx;
+          background: linear-gradient(90deg, #E8A841 0%, #FAD48E 100%);
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 40rpx;
+          box-sizing: border-box;
+
+          &-left{
+            font-size: 24rpx;
+            font-weight: 400;
+            color: #FFFFFF;
+            display: flex;
+            align-self: stretch;
+            flex-direction: column;
+            justify-content: space-between;
+          }
+          &-title{
+            font-size: 32rpx;
+            font-weight: bold;
+          }
+          .vip_logo{
+            width: 104rpx;
+            height: 104rpx;
+            background-color: #E8A841;
+          }
+        }
 
+        .vip_banner{
+          display: flex;
+          padding: 16rpx;
+          margin: 20rpx 0;
+          justify-content: space-around;
+          .banner_item{
+            display: flex;
+            align-items: center;
+            flex-direction: column;
+            .banner_img{
+              width: 108rpx;
+              height: 108rpx;
+              border-radius: 108rpx;
+              background-color: #EBB963;
+            }
+            .banner_text{
+              color: #333333;
+              font-size: 24rpx;
+              font-weight: 500;
+              margin-top: 16rpx;
+            }
+          }
+        }
+
+        .vip_good{
+          background-color: #FFFFFF;
+          border-radius: 24rpx;
+          overflow: hidden;
+          &-title{
+            height: 110rpx;
+            line-height: 110rpx;
+            font-size: 36rpx;
+            font-weight: 500;
+            text-align: center;
+            color: #000000;
+            border-bottom: 1px solid #FAFAFA;
+            position: relative;
+            .line{
+              position: absolute;
+              left: 50%;
+              top: 50%;
+              transform: translate(-50%, -50%);
+              width: 280rpx;
+              height: 1px;
+              background-color: #000000;
+            }
+            ._text{
+              position: relative;
+              z-index: 10;
+              background-color: #fff;
+              padding: 0 24rpx;
+            }
+          }
+          .good_item{
+            padding: 32rpx 46rpx;
+            border-bottom: 1px solid #FAFAFA;
+            &:last-child{
+              border-bottom: none;
+            }
+            .good_title{
+              display: flex;
+              align-items: center;
+              font-size: 28rpx;
+              font-weight: 500;
+              color: #666666;
+
+              &-tag{
+                padding: 8rpx 16rpx;
+                border-radius: 8rpx;
+                font-size: 22rpx;
+                line-height: 1;
+                background: linear-gradient(90deg, #FCD083 0%, #FFDEAD 100%);
+                color: #915714;
+                margin-right: 16rpx;
+              }
+            }
+            .good_cont{
+              font-size: 28rpx;
+              color: #BBBBBB;
+              font-size: 400;
+              margin-top: 16rpx;
+            }
+          }
+        }
+      }
+      .drawer_title{
+        height: 100rpx;
+        line-height: 100rpx;
+        text-align: center;
+        font-size: 28rpx;
+        color: #333333;
+        font-weight: 500;
+      }
     }
   }
 </style>