jufubao-mall 2.0.33 → 2.0.35-beta1

package/src/components/JfbMallNetworkMedia/JfbMallNetworkMedia.vue

@@ -0,0 +1,1167 @@
+<template>
+  <view
+    class="jfb-mall-network-media"
+    @click="handleEditxSelect"
+    :class="{ editx : isEditx && active }"
+  >
+    <!--#ifdef H5-->
+    <view
+      class="jfb-mall-network-media__edit"
+      :class="{ editx : isEditx && active }"
+      v-if="isEditx && active"
+    >
+      <view class="jfb-mall-network-media__edit-icon" @click.stop="delEdit">
+        <xd-font-icon icon="iconshanchu-01" color="#fff" size="30"></xd-font-icon>
+      </view>
+    </view>
+    <!-- #endif -->
+    <view class="jfb-mall-network-media__body" :style="[gCompStyle]">
+      <view class="media-tab" v-if="cateOneList.length > 0">
+        <view class="media-tab-hold" :style="[holdTabStyleComp]" v-if="!isPreview"></view>
+        <view class="media-tab-cont" :style="[tabStyleComp]" :class="{isPreview:isPreview}">
+          <cus-tab
+            class="xd-tab"
+            item-padding="0 16rpx"
+            :bg-color="tabStyleComp.backgroundColor"
+            :scroll-with-animation="true"
+            :height="104"
+            :tab-index="oneCateIndex"
+            :spacing="fontSp"
+            :list="cateOneList"
+            :line-bottom="lineBottom"
+            :footer-style="navStyle"
+            :no-border="false"
+            :color="titleStyle.color"
+            :act-color="titleStyle.actColor"
+            :font-size="titleStyle.fontSize"
+            :act-font-size="titleStyle.actFontSize"
+            :font-weight="titleStyle.fontWeight"
+            :act-font-weight="titleStyle.actFontWeight"
+            :bgc-color="titleStyle.bgColor"
+            :act-bgc-color="titleStyle.actBgColor"
+            @onTab="handleCate"
+          ></cus-tab>
+        </view>
+      </view>
+      <view class="media-two" v-if="cateTwoList.length > 0" :style="[twoTabStyleComp]">
+        <scroll-view
+          :scroll-x="true"
+          :scroll-into-view="twoViewId"
+          :scroll-with-animation="true"
+        >
+          <view class="media-two-box">
+            <view
+              @click="handleCate(item)"
+              class="media-two-item"
+              :class="{active: item.category_id === twoCateId}"
+              v-for="item in cateTwoList"
+              :key="item.category_id"
+              :id="`index-${item.category_id}`"
+              :style="[twoTabStyleItemComp]"
+            >
+              <view :style="[twoCateId === item.category_id?twoTabActIconComp:twoTabIconComp,subTitleInIcon]">
+                <view>
+                  <image :src="item.category_icon" :alt="item.category_name"></image>
+                </view>
+              </view>
+              <view class="media-two-name-hold"></view>
+              <view :style="[twoCateId === item.category_id?twoTabActNameComp:twoTabNameComp]">{{item.category_name}}</view>
+              <view v-if="twoCateId === item.category_id">
+                <image :src="triangleIcon"></image>
+              </view>
+            </view>
+          </view>
+        </scroll-view>
+      </view>
+      <view class="media-content" v-if="hasProducts === 'Y'">
+        <view class="media-input" v-if="blessingData.length > 0">
+          <view
+            class="media-input-item"
+            v-for="item in blessingData"
+            :key="item.id"
+          >
+            <input
+              :maxlength="item.struct.maxlength||16"
+              :minlength="item.struct.minlength||0"
+              v-model="item.data"
+              placeholder-style="color: #ccc"
+              :placeholder="item.value || item.struct.placeholder" />
+            <view
+              class="media-input-tip"
+              v-if="item.struct && item.struct.explain"
+            >{{item.struct.explain}}</view>
+          </view>
+        </view>
+        <view class="media-three" v-if="cateThreeList.length > 0">
+          <scroll-view
+            :scroll-x="true"
+            :scroll-into-view="threeViewId"
+            :scroll-with-animation="true"
+          >
+            <view class="media-three-box">
+              <view
+                @click="handleCate(item)"
+                class="media-three-item"
+                :class="{active: item.category_id === threeCateId}"
+                v-for="item in cateThreeList"
+                :key="item.category_id"
+                :id="`index-${item.category_id}`"
+              >
+                <view>{{item.category_name}}</view>
+                <view v-if="threeCateId === item.category_id"></view>
+              </view>
+            </view>
+          </scroll-view>
+        </view>
+        <view class="media-product" v-if="productList && productList.length > 0">
+          <view
+            class="media-product-item"
+            v-for="item in productList"
+            :key="item.product_id"
+            :class="{active: item.product_id === productId}"
+            @click="handleSelectProduct(item.product_id, item.shopId)"
+            :style="[productStyleComp]"
+          >
+            <view>{{item.list_title}}</view>
+            <view>
+              <cus-price type="two" :is-plus="isPlus" :show-price="item['show_prices']" ></cus-price>
+            </view>
+            <view v-if="item.product_id  === productId"></view>
+          </view>
+        </view>
+        <view class="media-product-nodata" v-if="productList && productList.length === 0">
+          <xd-no-data
+            icon-type="product"
+            :scale-size="2"
+            height="100%"
+          >当前暂无商品</xd-no-data>
+        </view>
+        <view class="media-detail" v-if="prodcutInfo">
+          <view>商品详情</view>
+          <view>
+            <xd-content-xss :key="prodcutContKey" v-if="prodcutInfo" :html="prodcutInfo"></xd-content-xss>
+          </view>
+        </view>
+      </view>
+      <view
+        class="media-no-data"
+        v-if="hasProducts === 'N'"
+        :style="[noDataCompStyle]"
+      >
+        <xd-no-data icon-type="product" :scale-size="2" height="100%">当前暂无商品</xd-no-data>
+      </view>
+      <view style="height: 120rpx"></view>
+      <view class="media-btn" :style="mediaBtnComp">
+        <view>
+          <view class="media-btn-index" @click="handleIndex">
+            <view v-if="showIndex === 'Y'"><xd-font-icon :icon="showIndexIcon" color="#999"></xd-font-icon></view>
+            <view v-if="showIndex === 'Y'">首页</view>
+          </view>
+          <view>
+            <xd-button
+              v-if="isSubmitStatus"
+              @click="handleSubmit"
+              type="primary"
+              size="small"
+              width="200rpx"
+            >{{nowBuyText}}</xd-button>
+            <xd-button
+              v-else
+              disabled
+              type="primary"
+              size="small"
+              width="200rpx"
+            >{{nowBuyText}}</xd-button>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import XdNoData from "@/components/XdNoData/XdNoData.vue";
+  import XdContentXss from "@/components/XdContentXss/XdContentXss.vue";
+  import XdUnit from "@/components/XdUnit/XdUnit.vue";
+  import CusPrice from "@/components/CusPrice/CusPrice.vue";
+  import XdButton from "@/components/XdButton/XdButton.vue";
+  import { jfbRootExec } from "@/utils/xd.event";
+  import JfbMallNetworkMediaMixin from "./JfbMallNetworkMediaMixin";
+  import {gCPVal, getContainerPropsValue} from "@/utils/xd.base";
+  import componentsMixins from "@/mixins/componentsMixins";
+  import extsMixins from "@/mixins/extsMixins";
+  import {Base64} from "js-base64";
+  import CusTab from "@/components/CusTab/CusTab.vue";
+  import getServiceUrl from "@/common/getServiceUrl";
+  import Color from "color";
+
+  export default {
+    name: "JfbMallNetworkMedia",
+    components: {
+      CusTab,
+      XdFontIcon,
+      XdContentXss,
+      XdUnit,
+      XdButton,
+      XdNoData,
+      CusPrice
+    },
+    mixins: [
+      componentsMixins, extsMixins, JfbMallNetworkMediaMixin
+    ],
+    computed:{
+      productStyleComp(){
+        return {
+          height: this.isShowDiscount === 'Y' ? '182rpx':'140rpx'
+        }
+      },
+      noDataCompStyle(){
+        let other = 104;//一级高度
+        if(this.cateTwoList.length > 0) other += 190 //二级分类高度
+        other += 80 //底部缝隙高度
+        other += 120 //底部高度
+        other += 32;
+        if(this.cateThreeList.length === 0)  other -= 80
+        return {
+          height: `calc(${this.layoutInfo.bodyMinHeightPx}px - ${other* this.$rpxNum}px)`
+        }
+      },
+      holdTabStyleComp(){
+        return {
+          backgroundColor: this.titleBgColor,
+          height: '56rpx',
+          padding: '24rpx'
+        }
+      },
+      tabStyleComp(){
+        let top = 0;
+        if(!this.isPreview)  top = this.layoutInfo.top;
+        return {
+          backgroundColor: this.titleBgColor,
+          top: top + 'rpx',
+        }
+      },
+      gCompStyle(){
+        return {
+          '--g-comp-radius': this.gStyleValue.radius * this.$rpxNum + 'px',
+          '--g-comp-style-radius-w': parseInt(this['subTitleRadius']) * this.$rpxNum + 'px'
+        }
+      },
+      isSubmitStatus(){
+        if(!this.isCanBuy) return false;
+        //为空不检查是否直接购买
+        if(this.blessingData.length === 0) return true
+
+        //有值根据后台数据返回是否需要检查是否购买
+        let flag = true;
+        this.blessingData.map(item=>{
+          if(item.struct && item.struct.required) {
+            if(!item.data) flag = false
+          }
+        });
+        return flag;
+      },
+      mediaBtnComp() {
+        return this.fixedStyle({ paddingBottom: 0, zIndex: 110 });
+      },
+      twoTabStyleComp(){
+        return {
+          backgroundColor: this.level2BgcColor
+        }
+      },
+      twoTabStyleItemComp(){
+        return {
+          marginRight: this.iconImageSp + 'rpx',
+        }
+      },
+
+      twoTabNameComp(){
+        let {color, fontSize, fontWeight,bgColor} = this.level2Name;
+        return {color, fontSize, fontWeight, backgroundColor: bgColor}
+      },
+      twoTabActNameComp(){
+        let {actColor, actFontSize, actFontWeight, actBgColor} = this.level2Name;
+        return {color:actColor, fontSize:actFontSize, fontWeight:actFontWeight,backgroundColor: actBgColor}
+      },
+
+      twoTabIconComp(){
+        let style = {  borderRadius: this['subTitleRadius']}
+        let border = 0;
+        if(typeof this['subTitleIconBorder'] === 'string' && this['subTitleIconBorder']) {
+          border = this['subTitleIconBorder'].split(' ')[0];
+        }
+        style['border'] = `${border} solid rgba(255,255,255,0.01)`;
+        return style
+      },
+      twoTabActIconComp(){
+        let style = {  borderRadius: this['subTitleRadius']}
+        style['border'] = this['subTitleIconBorder'];
+        return style
+      },
+      subTitleInIcon(){
+        let {iconWdith, iconBgColor} = this
+        return {
+          width: iconWdith + 'rpx',
+          height: iconWdith + 'rpx',
+          backgroundColor: iconBgColor
+        }
+      },
+    },
+    data() {
+      return {
+        isPreview: false,
+        closeMask: true,
+        triangleIcon:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAeCAYAAABXNvynAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAEASURBVFiFzZVBEYMwEEWZKkACUuKglYCESsABEiKhEpBQCZFQCa+HkhYYIBR22bwjh+XNn92folAAqDXmqgA4oLP22Azg+VBauyQBKn401j5JBukCPK19kgCBMU76HxepQX0zVJPPV6n54sykC/DK8viAekY23+MDuhXhYO03on8oUjhrzy+JdCN5vHwb080nZeabIc+UWW+GJWpL4X/SjQQsehm475CNtGfLVjvTHeLOFPYHZeGs1WDfoS3htWUlVmFKoyncCcvqSQONkqy8NMcq7FxpZI9MV9pAdr80+jub4sGWngZKoDWWjQSgWpN1yPfsUQJwmxPtTLXSePq03xLWohge5x8uAAAAAElFTkSuQmCC',
+        searchTimer:null,//搜索关键字截流
+        cateOneList: [],
+        cateTwoList:[],
+        cateThreeList:[],
+        productList:null,
+        productListOrg:[], //商品原生数据【预览模式使用】
+        parentId:0,
+        hasProducts: 'UNDEF', //是否有数据 'Y'=>有数据 N=>无 UNDEF=>未熟初始化
+        page_size: 51,
+        page_token: '1',
+        isPlus: false,
+
+        //内容
+        nowBuyText:'立即充值',
+        showIndex:'N', //是否展示首页链接
+        showIndexIcon:'iconshouye1',//首页图标样式
+        lineBottom:12, //分类样式距离底部距离
+        navStyle:'line-6-8-s',
+
+        //提交数据
+        productId: -1,//商品id
+        oneCateId:-1, //一级分类
+        oneCateIndex:0, //组件要求传入选中数据记录索引值
+        oneViewId:-1, //二级分类进入效果
+        twoCateId:-1, //二级分类
+        twoViewId:'', //二级分类进入效果
+        threeCateId: -1, //三级分类ID
+        threeViewId:'',
+
+
+        //划线价格
+        isShowDiscount:'N',//是否展示划线价格
+        differ:10,
+        isCanBuy: false, //是否可以购买
+
+
+        //地址栏参数
+        addressPid: '',
+        addressTwoId:'',
+
+        //内容
+        prodcutInfo:'',
+        prodcutContKey:'prodcutContKey',
+
+        //表单配置信息
+        blessingData: [],
+        weixinBtnBug: false,
+
+        //一级菜单
+        titleBgColor:'', //背景颜色
+        titleStyle:{}, //文字样式
+        fontSp:1,//间距
+
+        //二级导航
+        level2BgcColor:'#f8f8f8',
+        iconImageSp:16,//间距
+        level2Name:{},
+        subTitleRadius:'40rpx', //圆角
+        subTitleIconBorder:0, //边框样式
+        iconBgColor:'', //背景颜色
+        iconWdith: 96, //icon大小
+
+        //
+        productInfoPath:null
+
+      }
+    },
+    watch: {
+      container(value, oldValue) {
+        if (JSON.stringify(value) === JSON.stringify(oldValue)) return;
+        if (this.$configProject['isPreview']) this.init(value)
+      },
+      isShowDiscount(){
+        this.productList = this.filterProdcutData(this.productListOrg);
+      }
+    },
+    created() {
+      this.isPreview = this.$configProject['isPreview'];
+      this.init(this.container);
+    },
+    methods: {
+      async onJfbLoad(options) {
+        this.setNameSpace(options);
+        //参数设置
+        if(options.pid) this.addressPid = Number(options.pid);
+        if(options.cateId) this.addressTwoId =  Number(options.cateId);
+        if(this.$configProject['isPreview']) {
+          this.addressPid = 157696
+        }
+        await this.getCategoryList();
+      },
+
+
+      /**
+       * @description 监听事件变化
+       * @param container {object} 业务组件对象自己
+       */
+      init(container) {
+        let categoryParentType = gCPVal(container, 'categoryParentType', 'root');
+        if(categoryParentType === 'root') this.parentId = 0;
+        else {
+          let categoryParent = gCPVal(container, 'categoryParent', '');
+          if(!categoryParent)  this.parentId = 0;
+          else this.parentId = categoryParent;
+        }
+
+        this.xnamespace = gCPVal(container, 'xnamespace', this.projectAttr.business_code||this.xnamespace);
+        this.showIndex = gCPVal(container, 'showIndex', 'Y');
+        this.nowBuyText = gCPVal(container, 'nowBuyText', '立即充值');
+        let showIndexIcon = 'iconshouye1';
+        this.showIndex = gCPVal(container, 'showIndex', 'Y');
+        if(this.showIndex === 'Y') {
+          showIndexIcon = gCPVal(container, 'showIndexIcon', 'iconshouye1');
+        }
+        this.showIndexIcon = showIndexIcon;
+
+        this.isShowDiscount = gCPVal(container,'isShowDiscount', 'Y');
+        this.differ = gCPVal(container,'differ', 0);
+        this.navStyle = gCPVal(container, 'navStyle', 'line-6-8-s');
+
+        //一级分类
+        this.titleBgColor = gCPVal(container, 'titleBgColor', '#fff',{sKey:'titleBgColorStatus', fields:['titleBgColor']});
+        let defTitleStyle = {
+          color:'#333',
+          actColor: this.navStyle === 'tags'?'#fff':this.mainColor,
+          fontSize: '28',
+          actFontSize: '28',
+          fontWeight:'400',
+          actFontWeight: '400',
+          bgColor: this.navStyle === 'tags'?'rgba(0,0,0,0)':'#f8f8f8',
+          actBgColor:  this.navStyle === 'tags'?this.mainColor: 'rgba(0,0,0,0)'
+        }
+        this.titleStyle = gCPVal(container, 'titleStyle', [defTitleStyle],{sKey:'titleStyleStatus', fields:['titleStyle','titleColor'],isMerge: true});
+        this.fontSp = gCPVal(container, 'fontSp', [16],{sKey:'fontSpSpStatus', fields:['fontSp']});
+
+
+        //二级分类
+        this.level2BgcColor = gCPVal(container, 'level2BgcColor', ['#f8f8f8'],{sKey:'level2BgcColorStatus', fields:['level2BgcColor']});
+        this.level2Name = gCPVal(container, 'level2Name', [{
+          fontSize: '24',
+          actFontSize: '24',
+          color: '#333',
+          actColor:this.mainColor,
+          bgColor:'rgba(0,0,0,0)',
+          actBgColor:'rgba(0,0,0,0)',
+          fontWeight: '400',
+          actFontWeight: '400',
+        }],{sKey:'level2NameStatus', fields:['level2Name','level2Color'],isMerge: true});
+        this.subTitleIconBorder  = gCPVal(container, 'subTitleIconBorder', [{style:'solid', width: '2', color: this.mainColor}], {isBorder:true});
+        this.iconWdith = gCPVal(container, 'iconWdith', [96],{sKey:'iconWdithStatus', fields:['iconWdith']});
+        this.iconImageSp = gCPVal(container, 'iconImageSp', [16],{sKey:'iconImageSpStatus', fields:['iconImageSp']});
+        this.iconBgColor = gCPVal(container, 'iconBgColor', [100],{sKey:'iconBgColorStatus', fields:['iconBgColor']});
+        let defTitleRadius = 40*Number(this.iconWdith)/96 + 'rpx';
+        this.subTitleRadius = gCPVal(container, 'subTitleRadius', [defTitleRadius],{sKey:'subTitleRadiusStatus', fields:['subTitleRadius']})||0;
+
+
+        //高级
+        this.productInfoPath = gCPVal(container, "productInfoPath", {value: ""}).value;
+      },
+
+      //====分类数据=========
+      clearStatus(level){
+        if(level === 1) {
+          this.threeCateId = -1;
+          this.twoCateId = -1;
+
+        }
+        if(level === 2) {
+          this.threeCateId = -1
+        }
+        this.twoViewId = '';
+        this.threeViewId = ''
+        this.productList = null;
+        this.prodcutInfo = '';
+        this.productId = -1
+        this.shopId = -1;
+
+      },
+      getCategoryList(){
+        return new Promise((resolve)=>{
+          let params = {
+            xnamespace: this.xnamespace,
+            root_category_id: this.parentId,
+            level: 3,
+          };
+          jfbRootExec("getMallMediaCategoryTree", {
+            vm: this,
+            data: params
+          })
+            .then(res => {
+              //设置条件
+              this.cateOneList = res.items
+                .filter(item=>item.children.length > 0)
+                .map((item,index) => {
+                  item['name'] = item.category_name;
+                  item['id'] = item.category_id;
+                  item['level'] = 1;
+                  //页面传参中的一级分类否分存在
+                  if(this.addressPid && Number(this.addressPid) === item.category_id) {
+                    this.oneCateIndex = index;
+                  }
+                  item['category_icon'] = getServiceUrl(item['category_icon'], 'size3');
+
+                  //二级分类
+                  item.children = item.children.map(child => {
+                    child['category_icon'] = getServiceUrl(child['category_icon'], 'size3');
+                    child['level'] = 2;
+
+                    //三级分类
+                    if(child.children && child.children.length > 0) {
+                      child.children = child.children.map(three=>{
+                        three['category_icon'] = getServiceUrl(three['category_icon'], 'size3');
+                        three['level'] = 3;
+                        return three
+                      })
+                    }
+
+                    return child;
+                  });
+                  return item;
+                });
+
+              //第一次操作
+              if(this.cateOneList.length > 0) {
+                if(this.addressPid) {
+                  let curItemIndex = this.cateOneList.findIndex(item=>item.id === this.addressPid);
+                  if(curItemIndex === -1) this.handleCate(this.cateOneList[0]);
+                  else this.handleCate(this.cateOneList[curItemIndex ])
+                }
+                else this.handleCate(this.cateOneList[0]);
+              }
+
+              resolve()
+            })
+            .catch(err => {
+              this.$xdLog.catch(err);
+              resolve()
+            })
+        })
+      },
+      handleCate(cate){
+
+        let {level} = cate;
+        let idsMap = {
+          "1": "oneCateId",
+          "2": "twoCateId",
+          "3": "threeCateId"
+        }
+        let listMap = {
+          "1": "cateOneList",
+          "2": "cateTwoList",
+          "3": "cateThreeList"
+        }
+        let addressMap = {
+          "1": "addressPid",
+          "2": "addressTwoId",
+        }
+        let viewToMap = {
+          "2": 'twoViewId',
+          "3" : "threeViewId"
+        };
+        let curCateIdKey = idsMap[level];
+
+        //点击为相同分类
+        if(this[curCateIdKey] === cate.category_id) return;
+
+        //设置当前分类ID
+        this[curCateIdKey] = cate.category_id;
+
+        //使用动画
+        if(viewToMap[level]) {
+          setTimeout(()=>{
+            this[viewToMap[level]] = `index-${this[curCateIdKey]}`;
+          },100)
+        }
+
+
+        //层级小于三级处理
+        if(cate.level < 3) {
+          this.clearStatus(level);
+          let nextCateListKey = listMap[level+1];
+          this[nextCateListKey] = cate.children;
+
+          //有子级自动触发点击事件（操作第一个记录）
+          if(cate.children.length > 0) {
+            let nextCateKey = addressMap[level + 1];
+            //下一级为二级分类处理
+            if(nextCateKey !== undefined) {
+              if(this[nextCateKey]) {
+                let curItemIndex = cate.children.findIndex(item=>item.category_id === this[nextCateKey]);
+                if(curItemIndex === -1) this.handleCate(cate.children[0]);
+                else {
+                  let item = cate.children[curItemIndex]
+                  let nextViewToKey = viewToMap[level + 1];
+                  this.$nextTick(()=>{
+                    if(nextViewToKey) {
+                      this[nextViewToKey] = `index-${item.category_id}`;
+                    }
+                  })
+
+                  this.handleCate(item);
+                }
+              }
+
+              //无值使用第一个
+              else this.handleCate(cate.children[0]);
+            }
+            //下一级为三级分类处理
+            else {
+              if(cate.children.length >0) this.handleCate(cate.children[0]);
+              else this.getProductInfo();
+            }
+
+          }
+          //无数据
+          else this.getProductInfo();
+        }
+
+        //第三级分类处理
+        else {
+          //有子级自动触发点击事件（操作第一个记录）
+          this.getProductInfo(cate);
+        }
+
+      },
+      getProductInfo(item = null){
+        if(item === null) {
+          this.prodcutInfo = '';
+          this.hasProducts = 'N';
+        }
+        else {
+          this.hasProducts = 'Y';
+          this.getList(item);
+        }
+      },
+      //====分类数据=========
+
+      //==商品相关操作=======
+      async handleProductOperate(){
+        await this.getProductContent(this.productId);
+        await this.getProductBtns(this.productId);
+        await this.getProductForm(this.productId);
+        this.$xdHideLoading();
+      },
+
+      handleSelectProduct(i){
+        if(i === this.productId) return
+        this.productId = i;
+        this.$xdShowLoading({});
+        this.handleProductOperate()
+      },
+
+      getProductBtns(product_id){
+        return new Promise((resolve)=>{
+          jfbRootExec("getMallMediaProductBuyButton", {
+            vm: this,
+            data: {
+              product_id,
+              xnamespace: this.xnamespace,
+            }
+          }).then(res=>{
+            let isCanBuyItem = res['buttons'].filter(item=>{
+              return item.code === 'buy-now' && item.enabled === true;
+            });
+            this.isCanBuy = isCanBuyItem.length > 0;
+            resolve();
+          }).catch(err=>{
+            this.isCanBuy = false
+            resolve();
+          })
+        })
+
+      },
+
+      getProductForm(product_id){
+        return new Promise((resolve)=>{
+          jfbRootExec("getMallMediaProductForm", {
+            vm: this,
+            data: {
+              product_id,
+              xnamespace: this.xnamespace,
+            }
+          }).then(res=>{
+            this.blessingData = res['form_data']||[];
+            resolve()
+          }).catch(err=>{
+            this.blessingData = [];
+            console.error(err);
+            resolve()
+          })
+        })
+
+      },
+
+      getProductContent(product_id){
+        return new Promise((resolve)=>{
+          jfbRootExec("getMallMediaProductContent", {
+            vm: this,
+            data: {
+              product_id,
+              xnamespace: this.xnamespace,
+            }
+          }).then(res=>{
+            this.prodcutInfo = res.content;
+            this.prodcutContKey = Date.now();
+            resolve()
+          }).catch(err=>{
+            this.prodcutInfo = '';
+            this.prodcutContKey = Date.now();
+            resolve()
+          })
+        })
+
+      },
+
+      filterProdcutData(list = []){
+        return this.$xdUniHelper.cloneDeep(list)
+          .filter(item=>item.status === 'ok')
+          .map(item=>{
+            if(this.isShowDiscount === 'N') {
+              item['show_prices'] = item['show_prices'].filter(it=>{
+                return  it.t !== 'U'
+              })
+            }
+            return item;
+          });
+      },
+
+      getList(cate){
+        let data = {
+          xnamespace: this.xnamespace,
+          page_token: this.page_token,
+          page_size: this.page_size,
+          custom_category_id: cate.category_id,
+          is_remove_same_prefix_name: 'Y'
+        }
+
+        //设置是否展示划线价格
+        if(this.isShowDiscount==='Y') data.is_show_uprice = this.$xdUniHelper.multiplyFloatNumber(this.differ,100)
+        else data.is_show_uprice = -1
+        this.$xdShowLoading({});
+        jfbRootExec("getMallMediaProductList", {
+          vm: this,
+          data: data
+        }).then(res=>{
+          this.productListOrg = this.$xdUniHelper.cloneDeep(res.list);
+          this.productList = this.filterProdcutData(res.list);
+
+          //获取内容
+          if(this.productList.length > 0) {
+            let item = this.productList[0];
+            this.productId = item.product_id;
+            this.handleProductOperate()
+          }
+          else {
+            this.$xdHideLoading();
+            this.blessingData = [];
+            this.prodcutInfo = '';
+          }
+
+        }).catch(err=>{
+          this.$xdHideLoading();
+          this.productList = [ ]
+          this.prodcutInfo = '';
+        })
+      },
+      //==商品相关操作=======
+
+      handleSubmit(){
+        if(this.$configProject['isPreview']) return;
+        let params = {
+          namespace: this.xnamespace,
+          product: {
+            product_id: this.productId,
+            num: 1,
+            product_sku_id: 0,
+          }
+        }
+        this.$xdShowLoading({});
+        jfbRootExec("nowMallMediaBuyPay", {
+          vm: this,
+          data: params
+        }).then(res => {
+          this.$xdHideLoading();
+          if(!this.productInfoPath) console.warn('参数为空')
+          if(this.$configProject['isPreview'] || !this.productInfoPath) return;
+          this.$nextTick(() => {
+            let data = {...this.getFromData(),order_id: res.cart_order_id};
+            let dataStr = this.$xdUniHelper.jsonToParams(data);
+            this.$xdUniHelper.navigateTo({
+              url: this.productInfoPath + `?${dataStr}`
+            })
+          })
+        }).catch((err) => {
+          this.$xdHideLoading()
+          this.$xdLog.catch(err);
+        })
+      },
+      getFromData(){
+        //无form数据
+        if(this.blessingData.length === 0) return {};
+        let params = { product_id: this.productId}
+        this.blessingData.map(item=>{
+          params[item.id] = item['data'];
+        });
+        console.warn(JSON.stringify(params));
+        return {
+          blessing: Base64.encodeURI(JSON.stringify(params))
+        }
+      },
+
+      handleIndex(){
+        if(this.$configProject['isPreview'] || this.showIndex === 'N') return;
+        this.$xdUniHelper.redirectTo({
+          url: this.$settings.index
+        },false)
+      },
+
+      onJfbBack(options) {
+        console.log('event.onJfbBack', options)
+      },
+
+      onJfbCustomEvent({action, data}){
+        if(action === 'baseHeader@search'){
+          if(this.searchTimer) {
+            clearTimeout(this.searchTimer);
+            this.searchTimer = null;
+          }
+          this.searchTimer = setTimeout(()=>{
+            this.keyword = data;
+            this.getList();
+          },1000)
+        }
+      },
+    }
+  }
+
+</script>
+
+<style scoped lang="less">
+  @import "./JfbMallNetworkMediaLess.less";
+
+  .jfb-mall-network-media {
+    &__body{
+      .media-tab {
+        position: relative;
+        z-index: 1;
+        &-cont {
+          position: fixed;
+          left:0;
+          right: 0;
+
+          &.isPreview {
+            position: relative;
+          }
+        }
+      }
+      .media-two {
+        &-box {
+          display: flex;
+          justify-content: flex-start;
+          white-space: nowrap;
+          padding: 16rpx 0 30rpx 32rpx;
+        }
+        &-item {
+          margin-right: 16rpx;
+          padding: 0 16rpx 0;
+          position: relative;
+
+          & > view:first-child {
+            width: 96rpx;
+            height: 96rpx;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            & > view {
+              width: 100%;
+              height: 100%;
+              border-radius: var(--g-comp-style-radius-w);
+              overflow: hidden;
+              box-sizing: border-box;
+              border: 2rpx solid #fff;
+            }
+
+            & image {
+              max-width:100%;
+              max-height: 100%;
+            }
+          }
+          & > view:nth-child(3) {
+            position: absolute;
+            left: 0;
+            right: 0;
+            max-width: calc(100% + 32rpx);
+            bottom: 0;
+            overflow: hidden;
+            font-size: 24rpx;
+            word-break: break-all;
+            white-space: wrap;
+            font-weight: 400;
+            text-align: center;
+            height: 40rpx;
+            line-height: 40rpx;
+            border-radius: 30rpx;
+          }
+          & > view:nth-child(4) {
+            width: 42rpx;
+            height: 30rpx;
+            position: absolute;
+            bottom: -32rpx;
+            left: 50%;
+            transform: translateX(-50%);
+            display: flex;
+            justify-content: flex-start;
+            align-items: flex-start;
+            & > image {
+              width: 100%;
+              height: 100%;
+            }
+          }
+          &:last-child {
+            margin-right: 0;
+          }
+
+        }
+
+        &-name-hold {
+          height: 40rpx;
+          line-height: 40rpx;
+          margin-top: 8rpx;
+        }
+      }
+
+
+
+      .media-content {
+        margin: 0 16rpx 16rpx;
+        position: relative;
+        z-index: 0;
+      }
+
+      .media-no-data {
+        margin: 0 16rpx 16rpx;
+        background-color: #fff;
+        border-radius: 16rpx;
+      }
+
+      .media-input {
+        border-radius: 16rpx;
+        background: rgba(255, 255, 255, 1);
+        padding: 24rpx;
+
+        &-tip {
+          color: var(--g-theme-dangerColor);
+          line-height: 30rpx;
+          font-size: 24rpx;
+          margin-top: 16rpx;
+        }
+        &-item {
+          margin-bottom: 32rpx;
+          &:last-child {
+            margin-bottom: 0;
+          }
+
+          & > input {
+            padding: 20rpx;
+            background-color: #fff;
+            border: 1px solid #ccc;
+            height: 40rpx;
+            line-height: 40rpx;
+            border-radius: 16rpx;
+            font-size: 28rpx;
+          }
+
+        }
+      }
+
+      .media-three {
+        &-box {
+          display: flex;
+          justify-content: space-between;
+          white-space: nowrap;
+          min-width: fit-content;
+          box-sizing: border-box;
+          padding: 24rpx 0;
+        }
+        &-item {
+          flex-shrink: 0;
+          flex: 1;
+          text-align: center;
+          height: 56rpx;
+          line-height: 56rpx;
+          font-size: 28rpx;
+          font-weight: 500;
+          color: #999;
+          position: relative;
+          margin-right: 48rpx;
+
+          &:last-child {
+            margin-right: 0;
+          }
+
+          & > view:first-child {
+            line-height: 56rpx;
+          }
+          & > view:nth-child(2) {
+            background-color: var(--g-theme-mainColor);
+            height: 6rpx;
+            width: 60rpx;
+            position: absolute;
+            left: 50%;
+            bottom: 0;
+            transform: translateX(-50%);
+            border-radius: 6rpx;
+          }
+
+          &.active {
+            & > view:first-child {
+              color: #333;
+            }
+          }
+
+        }
+      }
+      .media-product-nodata {
+        padding: 24rpx;
+        border-radius: var(--g-comp-radius);
+        overflow: hidden;
+        background: rgba(255, 255, 255, 1);
+        margin-bottom: 24rpx;
+        height: 700rpx;
+      }
+      .media-product {
+        padding: 24rpx;
+        border-radius: var(--g-comp-radius);
+        overflow: hidden;
+        background: rgba(255, 255, 255, 1);
+        margin-bottom: 24rpx;
+        display: flex;
+        justify-content: flex-start;
+        align-content: center;
+        align-items: center;
+        flex-flow: wrap;
+
+
+
+        &-item {
+          width: calc((100% - 48rpx)/3);
+          flex-shrink: 0;
+          margin-right: 24rpx;
+          box-sizing: border-box;
+          padding: 16rpx;
+          border-radius: 16rpx;
+          background: linear-gradient(135deg, #FFFFFF 0%, #F5F5F5 100%);
+          box-shadow: 0 0 8rpx rgba(0,0,0,.1);
+          margin-top:24rpx;
+          position:relative;
+
+          &:nth-child(1),&:nth-child(2),&:nth-child(3) {
+            margin-top: 0;
+          }
+
+          &.active {
+            & > view:nth-child(3) {
+              position: absolute;
+              left: 0;
+              right: 0;
+              top:0;
+              bottom:0;
+              border: 6rpx solid var(--g-theme-mainColor);
+              border-radius: 16rpx;
+            }
+          }
+
+          & > view:first-child {
+            font-size: 28rpx;
+            color: #333;
+            height: 40rpx;
+            line-height: 40rpx;
+            overflow: hidden;
+            margin-bottom: 16rpx;
+            word-break: break-all;
+            word-wrap: break-word;
+            white-space: pre-line;
+          }
+
+          &:nth-child(3n) {
+            margin-right: 0;
+          }
+        }
+
+      }
+
+      .media-detail {
+        border-radius: var(--g-comp-radius);
+        overflow: hidden;
+        background: rgba(255, 255, 255, 1);
+        & > view:first-child {
+          padding: 0 24rpx;
+          line-height: 76rpx;
+          font-size: 28rpx;
+          height: 76rpx;
+          color: #333;
+          border-bottom: 1px solid #f8f8f8;
+        }
+        & > view:nth-child(2) {
+          padding: 24rpx;
+          /deep/ img{
+            max-width: 100% !important;
+            height: auto !important;
+          }
+          /deep/ *{
+            max-width: 100% !important;
+          }
+        }
+      }
+
+      .media-btn {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        background: #fff;
+        z-index: 1;
+
+        & > view {
+          padding: 16rpx 32rpx;
+          height: 84rpx;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          font-size: unit(28, rpx);
+        }
+
+        &-index {
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          flex-flow: wrap;
+          width: 60rpx;
+          & > view {
+            width: 100%;
+            flex-shrink: 0;
+            text-align: center;
+            font-size: 24rpx;
+            color: #999;
+          }
+        }
+      }
+    }
+  }
+</style>