微信小程序企业版带视频播放商品详情页面设计制作开发教程

本文给大家带来的是微信小程序企业版带视频播放商品详情页面设计制作开发教程，制作好以后效果图如下：

一、wxml页面代码如下：

<!--内容开始-->
<view class="cont">
  <!--<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{imgUrls}}">
      <swiper-item>
        <image src="{{item.photo}}" class="slide-image" width="100%" height="180" />
      </swiper-item>
    </block>
  </swiper>-->

<!--视频组件src资源地址，binderror为监听错误信息-->
<view class="hei">
  <video class='video' src="{{src}}"  enable-danmu   controls  danmu-list="{{danmuList}}" 
bindplay='bindplay'  bindpause='bindpause' bindended='bindend' bindtimeupdate="bindtimeupdate"
  ></video>
</view>


  <!--<image class="tp_image" src="{{itemData.LunBoProductImageUrl[0]}}"></image>-->
  <view class="title">{{itemData.ProductName}}</view>
  <view class="gmxx">
    <view><span class="jiage">￥：{{itemData.Price}}</span> <span class="c6 fl_r font_14" style='color:#ccc'>库存：{{itemData.StockCount}}</span> </view>
    <view class="font_14 c6">品牌：佳名珠宝（云南省著名商标）</view>
    <view class="font_14 c6">共享：返还积分</view>
    <view class="font_14 c6">支付：微信支付,线下</view>

  </view>
</view>

<!--弹窗-->
<view class="drawer_screen" bindtap="setModalStatus" data-status="0" wx:if="{{showModalStatus}}"></view>
<view animation="{{animationData}}" class="drawer_attr_box" wx:if="{{showModalStatus}}">
<view class="close_icon" bindtap="setModalStatus" data-status="0">×</view>
  <view class="drawer_attr_content">
    <view class="text_center">
         <image class="drawer_image" src="../../images/car.png" ></image>
         <view class="mingcheng">
             <view>天使之爱</view>
             <view style="font-size:29rpx;color:red">￥2000</view>
             <view  style="font-size:26rpx;color:#ccc">库存：10</view>
         </view>
    </view>
    <!--<view>
        <text class="cun">尺寸</text>
   </view>-->
<view class="commodity_attr_list">
  <!--每组属性-->
  <view class="attr_box" wx:for="{{attrValueList}}" wx:for-item="attrValueObj" wx:for-index="attrIndex">
    <!--属性名-->
    <view class="attr_name">{{attrValueObj.attrKey}}</view>
    <!--属性值-->
    <view class="attr_value_box">
      <!--每个属性值-->
      <view class="attr_value {{attrIndex==firstIndex || attrValueObj.attrValueStatus[valueIndex]?(value==attrValueObj.selectedValue?'attr_value_active':''):'attr_value_disabled'}}" 
      bindtap="selectAttrValue" 
      data-status="{{attrValueObj.attrValueStatus[valueIndex]}}"
      data-value="{{value}}" 
      data-key="{{attrValueObj.attrKey}}"
       data-index="{{attrIndex}}"
      data-selectedvalue="{{attrValueObj.selectedValue}}"               wx:for="{{attrValueObj.attrValues}}"
         wx:for-item="value" 
         wx:for-index="valueIndex">{{value}}
      </view>
    </view>
  </view>
</view>
    <view class="shu">
        <text class="cun">购买数量</text>
       <view class="dian">
        <view class="stepper">

       <!-- 减号 -->
       <text class="{{minusStatuses[index]}}" data-alpha-beta="0" bindtap="changeNum">-</text>
       <!-- 数值 -->
       <view class="nownum">{{buynum}}</view>
       <!-- 加号 -->
       <text class="normal" data-alpha-beta="1" bindtap="changeNum">+</text>
      </view>
      </view>
   </view>
   <view class="tcl" bindtap="bindBtnBuy">
立即购买
</view>
  </view>
</view>




<!--图文详情头部-->
<view>
<view class="swiper-tab">
  <view class="bre swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">图文详情</view>
  <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">产品参数</view>
</view>
<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">

  <!-- 图文详情 -->
  <swiper-item>
    <view class="p_all">
      <video wx:if="{{!!itemData.VID}}" style="width:100%" controls src='{{itemData.videoPath}}'></video>
      <!-- <image class="tp_image" src="{{itemData.LunBoProductImageUrl[0]}}"></image> -->
      <view class="tw_text">{{itemData.Contents}}</view>
    </view>
  </swiper-item>

  <!-- 产品参数 -->
  <swiper-item>
        <view class="p_all">
      <view class="canshu df">
        <view class="name">商品名称：</view>
        <view class="df_1 c3">{{itemData.ProductName}}</view>
      </view>
      <view class="canshu df">
        <view class="name">商品编号：</view>
        <view class="df_1 c3">{{itemData.ProductNumber}}</view>
      </view>
      <view class="canshu df">
        <view class="name">分类：</view>
        <view class="df_1 c3">{{itemData.ModelName}}</view>
      </view>
      <view class="canshu df">
        <view class="name">售后：</view>
        <view class="df_1 c3">签收之日48小时无条件退货</view>
      </view>
    </view>
  </swiper-item>
</swiper>
</view>

<!---底部开始-->
<view class="footfixed tc">
  <view class="fl_l w60">
    <view class="tcl" bindtap="setModalStatus" data-status="1">立刻购买</view>
  </view>
  </view>

二、wxss样式文件代码如下：

/* pages/index/detail.wxss */
.swiper-item{
  display: block;
  height: 150px;
}
.slide-image{ 
  width: 100%; 
  height: 150px;
}
.video{
width: 100%;
height: 400rpx;

}
.hei{
  height: 400rpx;
}
.ad{
    width: 100%;
    background: rgba(0,0,0,.6);
    padding: 3% 0;
    display: inline-table;
    position: fixed;
    z-index: 9999;
    display: none;
}
.ad .text-title{
    font-size: 14px;
    color: #fff;
    width: 60%;
    text-align: center;
    float: left;
    line-height: 15px;

}
.ad .button_icon{
    border-radius: 20px;
    background: #fd9d21;
    width: 20%;
    text-align: center;
    font-size: 14px;
    color: #fff;
    padding: 5px 10px;
    float: left;

}
.ad .cl_button{
    width: 16px;
    height: 16px;
    float: right;
    margin: 8px 10px;
}
.cont{
  width: 100%;
  background: #fff;
  margin-bottom: 10px;
}
.tp_image{
  width: 100%;
  height:910rpx;
}
.cont .title{
  font-size: 15px;
  color: #333;
  line-height:20px;
  margin:0;
  max-height:40px;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  padding: 5% 5% 0 5%;
  font-weight: 700
}
.gmxx{
  padding:1% 5% 5% 5%;
  line-height: 25px;
}
.gmxx .jiage{
  font-size: 15px;
  color: #dd2727;
  padding-top: 10px;
}
.icon_kf{
  width: 20px;
  height: 20px;
  display: inline-block;
  margin-top: 5px;

}
.ke{
text-align: center
}
.l_h15{
  line-height: 15px;
  text-align: center;
}
.dbtext{
  line-height: 15px;
  color: #666;
  font-size: 12px;
}

.canshu{
  border-bottom: 1px solid #eee;
  font-size: 14px;
  line-height: 23px;
  width: 100%;
  padding: 2% 0;
}
.canshu .name{
   width: 80px;
   color: #999;
   font-size: 28rpx;

}
.canshu span{
   color: #333;
}
.swiper-tab{  
    width: 100%;  
    border-bottom: 2rpx solid #eee;  
    text-align: center;  
    line-height: 80rpx;
    background: #fff;
    font-size: 14px;
    }  
.swiper-tab-list{  
  font-size: 29rpx;  
    display: inline-block;  
    width: 49.5%;  
    color: #333; 
    

} 
.swiper-box{
  background: #fff;
} 
.on{ color: #dd2727;  
    border-bottom: 5rpx solid #dd2727;}  
  
.swiper-box{ display: block; height: 100%; width: 100%; overflow: hidden; }  
.tw_text{
  font-size: 28rpx;  
  color: #000;
  line-height: 25px;
}
.c3{
  font-size: 28rpx;
}
   .fl_l{
     font-weight: 700
   }
.footfixed {
display:block;
position:fixed;
bottom:0;
left:0;
/*background:red;*/
z-index:100;
width:100%;
font-size:14px;
border-top:1px solid #eee;
line-height:50px;
/*background: #dd2727;*/
font-weight: 700;
color: #000
}
.tcl{
  display:block;
position:fixed;
bottom:0;
left:0;
background:red;
z-index:100;
width:100%;
font-size:14px;
border-top:1px solid #eee;
line-height:50px;
/*background: #dd2727;*/
font-weight: 700;
color: snow;
text-align: center
}


/*弹窗*/
.drawer_screen {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.2;
  overflow: hidden;
  z-index: 1000;
  color: #fff;
}

.drawer_attr_box {
  width: 100%;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 2000;
  background: #fff;
}

.close_icon {
  width: 25rpx;
  height: 25rpx;
  line-height: 20rpx;
  font-size: 30rpx;
  position: absolute;
  right: 5rpx;
  top:5rpx;
  padding: 10rpx;
  color: #ccc;
  /*border: 1rpx solid #ccc;*/
  border-radius: 50%;
  text-align: center;
  background: #fff;
}


.drawer_attr_content {
  padding: 20rpx;
  /*height: 600rpx;*/
  overflow-y: scroll;
}
.text_center{
 width: 100%;
}
.mingcheng{
width: 60%;
display: inline-block;
font-size:35rpx;
line-height: 50rpx;
margin-left: 40rpx;
}
.drawer_image {
  width: 30%;
  height: 150rpx;
}

.drawer_desc{
    font-size:28rpx;
    margin:20rpx;
    height: 150rpx;  
    width: 100%;
}
.cun{
  margin: 5px;font-size:30rpx; 
  padding-left: 20rpx;
  width: 20%
}

.chi{
  width: 40%;
  height: 60rpx;
  text-align: center;
  line-height: 60rpx;
  border: 1px solid #999;
  display: inline-block;
  margin: 5px;
}
.btn {
  width: 80%;
  padding: 15rpx 0;
  border-radius: 10rpx;
  text-align: center;
}

.open_btn {
  margin: 40rpx 10%;
  border-radius: 10rpx;
  background: #20bb21;
  color: #fff;
}

/*数量*/
.dian{
  width: 70%;
  display: inline-block;
}
.shu{
  width: 100%;
    margin-top: 35rpx;
    margin-bottom: 160rpx;
}
.stepper {
  text-align: right;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 200rpx;
  overflow: hidden;
  margin-left: 250rpx;
border-radius:29rpx; 
  background: #FCFCFC
}
.stepper text {
  background-color: #fff;
  border: 1px solid #eee;
  border-radius:50%; 
  width: 26px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  font-weight: 900;
  color: #939393;
}
.stepper input {
  width: 30px;
  height: 25px;
  text-align: center;
  /*background-color: #f2f2f2;*/
  /*border-top:  1px solid #666;
  border-bottom:  1px solid #666;*/
}


/*分类选择*/
.title {
  padding: 10rpx 20rpx;
  margin: 10rpx 0;
  border-left: 4rpx solid #ccc;
}

/*全部属性的主盒子*/
.commodity_attr_list {
  background: #fff;
  padding: 0 20rpx;
  font-size: 26rpx;
  overflow: hidden;
  width: 100%;
}
/*每组属性的主盒子*/
.attr_box {
  width: 100%;
  overflow: hidden;
  border-bottom: 1rpx solid #ececec;
}
/*属性名*/
.attr_name {
  width: 20%;
  float: left;
  padding: 15rpx 0;
  font-size: 30rpx;
  margin-top:20rpx;
}
/*属性值*/
.attr_value_box {
  width: 80%;
  float: left;
  padding: 15rpx 0;
  overflow: hidden;
}
/*每个属性值*/
.attr_value {
  padding:10rpx 20rpx;
  float: left;
  /*padding: 0 20rpx;*/
  margin: 0 10rpx;
  border: 1rpx solid #ececec;
  font-size: 33rpx;
}
/*每个属性选中的当前样式*/
.attr_value_active {
  background: #dd2727;
  border-radius: 10rpx;
  color: #fff;
  /*padding: 0 20rpx;*/
  padding:10rpx 20rpx;

}
/*禁用属性*/
.attr_value_disabled {

  color: #ccc;
}
/*button*/
.btn-area {
  margin: 1.17647059em 15px 0.3em;
}

.btn {
  margin-top: 15px;
  background-color:#FFCC00;
  color: #fff;
}
.btn:first-child {
  margin-top: 0;
}

三、js页面代码如下：

//index.js  
//获取应用实例  
var app = getApp()
Page({
  data:{
      src: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',
    hiddenVideo: true,
    bannerApp:true,
    winWidth: 0,
    winHeight: 0,
    currentTab: 0, //tab切换  
    productId:0,
    itemData:{},
    buynum:1,
    imgUrls: [
      {'photo':'../../images/zs02.png'},
       {'photo':'../../images/zs02.png'},
    ],
    indicatorDots: true,
    autoplay: true,
    interval: 2000,
    duration: 1000,
    circular: true,
// 属性选择
      firstIndex: -1,
    //准备数据
    //数据结构：以一组一组来进行设定
    commodityAttr: [
      {
        priceId: 1,
        price: 35.0,
        "stock": 8,
        "attrValueList": [
          {
            "attrKey": "型号",
            "attrValue": "2"
          },
          {
            "attrKey": "颜色",
            "attrValue": "白色"
          },
          {
            "attrKey": "大小",
            "attrValue": "小"
          },
          {
            "attrKey": "尺寸",
            "attrValue": "1m"
          }
        ]
      },
      {
        priceId: 2,
        price: 35.1,
        "stock": 9,
        "attrValueList": [
          {
            "attrKey": "型号",
            "attrValue": "1"
          },
          {
            "attrKey": "颜色",
            "attrValue": "红色"
          },
          {
            "attrKey": "大小",
            "attrValue": "小"
          },
          {
            "attrKey": "尺寸",
            "attrValue": "2m"
          }
        ]
      },
      {
        priceId: 3,
        price: 35.2,
        "stock": 10,
        "attrValueList": [
          {
            "attrKey": "型号",
            "attrValue": "1"
          },
          {
            "attrKey": "颜色",
            "attrValue": "绿色"
          },
          {
            "attrKey": "大小",
            "attrValue": "大空军建军节"
          },
          {
            "attrKey": "尺寸",
            "attrValue": "1m"
          }
        ]
      },
      {
        priceId: 4,
        price: 35.2,
        "stock": 10,
        "attrValueList": [
          {
            "attrKey": "型号",
            "attrValue": "1"
          },
          {
            "attrKey": "颜色",
            "attrValue": "绿色"
          },
          {
            "attrKey": "大小",
            "attrValue": "大"
          },
          {
            "attrKey": "尺寸",
            "attrValue": "2m"
          }
        ]
      }
    ],
    attrValueList: []
  },
   bindplay:function(){//开始播放按钮或者继续播放函数
      console.log("开始播放")
    },
    bindpause:function(){//暂停播放按钮函数
      console.log("停止播放")
    },
    bindend:function(){//播放结束按钮函数
      console.log("播放结束")
    },
    bindtimeupdate:function(res){//播放中函数，查看当前播放时间等
      console.log(res)//查看正在播放相关变量
      console.log("播放到第"+res.detail.currentTime+"秒")//查看正在播放时间，以秒为单位
    },
  // 弹窗
   setModalStatus: function (e) {
    console.log("设置显示状态，1显示0不显示", e.currentTarget.dataset.status);
    var animation = wx.createAnimation({
      duration: 200,
      timingFunction: "linear",
      delay: 0
    })
    this.animation = animation
    animation.translateY(300).step()
    this.setData({
      animationData: animation.export()
    })
    if (e.currentTarget.dataset.status == 1) {
      this.setData(
        {
          showModalStatus: true
        }
      );
    }
    setTimeout(function () {
      animation.translateY(0).step()
      this.setData({
        animationData: animation
      })
      if (e.currentTarget.dataset.status == 0) {
        this.setData(
          {
            showModalStatus: false
          }
        );
      }
    }.bind(this), 200)
  },
  // 加减
  changeNum:function  (e) {
    var that = this;
    if (e.target.dataset.alphaBeta == 0) {
        if (this.data.buynum <= 1) {
            buynum:1
        }else{
            this.setData({
                buynum:this.data.buynum - 1
            })
        };
    }else{
        this.setData({
            buynum:this.data.buynum + 1
        })
    };
  },
  // 传值
  onLoad: function (option) {
        console.log( this.setData)      
    this.initNavHeight();
    this.setData({
      productId: option.productId,
      
    });
    this.loadProductDetail();
  },
// 属性选择
  onShow: function () {
    this.setData({
      includeGroup: this.data.commodityAttr
    });
    this.distachAttrValue(this.data.commodityAttr);
    // 只有一个属性组合的时候默认选中
    // console.log(this.data.attrValueList);
    if (this.data.commodityAttr.length == 1) {
      for (var i = 0; i < this.data.commodityAttr[0].attrValueList.length; i++) {
        this.data.attrValueList[i].selectedValue = this.data.commodityAttr[0].attrValueList[i].attrValue;
      }
      this.setData({
        attrValueList: this.data.attrValueList
      });
    }
  },
  /* 获取数据 */
  distachAttrValue: function (commodityAttr) {
    /**
      将后台返回的数据组合成类似
      {
        attrKey:'型号',
        attrValueList:['1','2','3']
      }
    */
    // 把数据对象的数据（视图使用），写到局部内
    var attrValueList = this.data.attrValueList;
    // 遍历获取的数据
    for (var i = 0; i < commodityAttr.length; i++) {
      for (var j = 0; j < commodityAttr[i].attrValueList.length; j++) {
        var attrIndex = this.getAttrIndex(commodityAttr[i].attrValueList[j].attrKey, attrValueList);
        // console.log('属性索引', attrIndex); 
        // 如果还没有属性索引为-1，此时新增属性并设置属性值数组的第一个值；索引大于等于0，表示已存在的属性名的位置
        if (attrIndex >= 0) {
          // 如果属性值数组中没有该值，push新值；否则不处理
          if (!this.isValueExist(commodityAttr[i].attrValueList[j].attrValue, attrValueList[attrIndex].attrValues)) {
            attrValueList[attrIndex].attrValues.push(commodityAttr[i].attrValueList[j].attrValue);
          }
        } else {
          attrValueList.push({
            attrKey: commodityAttr[i].attrValueList[j].attrKey,
            attrValues: [commodityAttr[i].attrValueList[j].attrValue]
          });
        }
      }
    }
    // console.log('result', attrValueList)
    for (var i = 0; i < attrValueList.length; i++) {
      for (var j = 0; j < attrValueList[i].attrValues.length; j++) {
        if (attrValueList[i].attrValueStatus) {
          attrValueList[i].attrValueStatus[j] = true;
        } else {
          attrValueList[i].attrValueStatus = [];
          attrValueList[i].attrValueStatus[j] = true;
        }
      }
    }
    this.setData({
      attrValueList: attrValueList
    });
  },
  getAttrIndex: function (attrName, attrValueList) {
    // 判断数组中的attrKey是否有该属性值
    for (var i = 0; i < attrValueList.length; i++) {
      if (attrName == attrValueList[i].attrKey) {
        break;
      }
    }
    return i < attrValueList.length ? i : -1;
  },
  isValueExist: function (value, valueArr) {
    // 判断是否已有属性值
    for (var i = 0; i < valueArr.length; i++) {
      if (valueArr[i] == value) {
        break;
      }
    }
    return i < valueArr.length;
  },
  /* 选择属性值事件 */
  selectAttrValue: function (e) {
    /*
    点选属性值，联动判断其他属性值是否可选
    {
      attrKey:'型号',
      attrValueList:['1','2','3'],
      selectedValue:'1',
      attrValueStatus:[true,true,true]
    }
    console.log(e.currentTarget.dataset);
    */
    var attrValueList = this.data.attrValueList;
    var index = e.currentTarget.dataset.index;//属性索引
    var key = e.currentTarget.dataset.key;
    var value = e.currentTarget.dataset.value;
    if (e.currentTarget.dataset.status || index == this.data.firstIndex) {
      if (e.currentTarget.dataset.selectedvalue == e.currentTarget.dataset.value) {
        // 取消选中
        this.disSelectValue(attrValueList, index, key, value);
      } else {
        // 选中
        this.selectValue(attrValueList, index, key, value);
      }

    }
  },
  /* 选中 */
  selectValue: function (attrValueList, index, key, value, unselectStatus) {
    // console.log('firstIndex', this.data.firstIndex);
    var includeGroup = [];
    if (index == this.data.firstIndex && !unselectStatus) { // 如果是第一个选中的属性值，则该属性所有值可选
      var commodityAttr = this.data.commodityAttr;
      // 其他选中的属性值全都置空
      // console.log('其他选中的属性值全都置空', index, this.data.firstIndex, !unselectStatus);
      for (var i = 0; i < attrValueList.length; i++) {
        for (var j = 0; j < attrValueList[i].attrValues.length; j++) {
          attrValueList[i].selectedValue = '';
        }
      }
    } else {
      var commodityAttr = this.data.includeGroup;
    }

    // console.log('选中', commodityAttr, index, key, value);
    for (var i = 0; i < commodityAttr.length; i++) {
      for (var j = 0; j < commodityAttr[i].attrValueList.length; j++) {
        if (commodityAttr[i].attrValueList[j].attrKey == key && commodityAttr[i].attrValueList[j].attrValue == value) {
          includeGroup.push(commodityAttr[i]);
        }
      }
    }

    attrValueList[index].selectedValue = value;

    this.setData({
      attrValueList: attrValueList,
      includeGroup: includeGroup
    });
        console.log(attrValueList);
    var count = 0;
    for (var i = 0; i < attrValueList.length; i++) {
      for (var j = 0; j < attrValueList[i].attrValues.length; j++) {
        if (attrValueList[i].selectedValue) {
          count++;
          break;
        }
      }
    }
    if (count < 2) {// 第一次选中，同属性的值都可选
      this.setData({
        firstIndex: index
      });
    } else {
      this.setData({
        firstIndex: -1
      });
    }
  },
  /* 取消选中 */
  disSelectValue: function (attrValueList, index, key, value) {
    var commodityAttr = this.data.commodityAttr;
    attrValueList[index].selectedValue = '';

    // 判断属性是否可选
    for (var i = 0; i < attrValueList.length; i++) {
      for (var j = 0; j < attrValueList[i].attrValues.length; j++) {
        attrValueList[i].attrValueStatus[j] = true;
      }
    }
    this.setData({
      includeGroup: commodityAttr,
      attrValueList: attrValueList
    });

    for (var i = 0; i < attrValueList.length; i++) {
      if (attrValueList[i].selectedValue) {
        this.selectValue(attrValueList, i, attrValueList[i].attrKey, attrValueList[i].selectedValue, true);
      }
    }
  },

   list:function(e){
    console.log(e.currentTarget.dataset.title)
    wx.navigateTo({
      url: '../order/pay?title='+e.currentTarget.dataset.title,
      success: function(res){
        // success
      },  
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })
  },

// 数据
  loadProductDetail:function(){
    var that = this;
    wx.request({
      url: app.d.hostUrl + '/ztb/productDetailsZBT/GetProductDetails',
      method:'post',
      data: {
        ProID: that.data.productId,
      },
      header: {
        'Content-Type':  'application/x-www-form-urlencoded'
      },
      success: function (res) {
        console.log(res)
        //--init data        
        var data = res.data.data[0];
        console.log(data);
        that.initProductData(data);
        that.setData({
          itemData:data,
        });
        //endInitData
      },
    });
  },


  initProductData: function(data){
    data["LunBoProductImageUrl"] = [];

    var imgs = data.LunBoProductImage.split(';');
    for(let url of imgs){
      url && data["LunBoProductImageUrl"].push(app.d.hostImg + url);
    }

    data.Price = data.Price/100;
    data.VedioImagePath = app.d.hostVideo + '/' +data.VedioImagePath;
    data.videoPath = app.d.hostVideo + '/' +data.videoPath;
  },
  addFavorites:function(e){//添加到收藏
    var that = this;
    console.log(this.data);
      wx.showToast({
                title: '已添加',
                icon: 'success',
                duration: 2000
        });
    wx.request({
      url: app.d.hostUrl + '/ztb/productZBT/AddCollectCategory',
      method:'post',
      data: {
        userID: app.d.userId,
        ProID: that.data.productId,
      },
      header: {
        'Content-Type':  'application/x-www-form-urlencoded'
      },
      success: function (res) {
        // //--init data        
        var data = res.data;
        console.log(data);
        wx.showToast({
            title: data.message,
            icon: 'success',
            duration: 2000
        });

        if(data.result == 'ok'){
          console.log('add to shope favs ok');
          //变成已收藏，但是目前小程序可能不能改变图片，只能改样式
          that.data.itemData.isCollect = true;
          console.log(that.data.itemData);
        }
      },
    });
  },
  bindBtnBuy:function(){//添加购物车，并且购买
    this.addShopCart('buy');
    console.log(buy);
  },

  addShopCart:function(act){ //添加到购物车
    var that = this;
    console.log(this.data);
    wx.request({
      url: app.d.hostUrl + '/ztb/shopCartZBT/AddShopCart',
      method:'post',
      data: {
        userID: app.d.userId,
        ProID: that.data.productId,
        buycount:1,
      },
      header: {
        'Content-Type':  'application/x-www-form-urlencoded'
      },
      success: function (res) {
        // //--init data        
        var data = res.data;
        console.log(data);
        
        if(data.result == 'ok'){
          // 不能跳转到下单页，因为没有购物车id
          // if(act == 'buy'){
          //   wx.navigateTo({
          //     url: '/pages/order/pay?productId='+that.data.productId+'&cartId='+data.message+'&buyCount=1;',
          //   });
          //   return;
          // }
          //console.log('add to shope card ok')
          if(act == 'buy'){
            wx.switchTab({
              url: '/pages/cart/cart'
            });
            return;
          }else{
            wx.showToast({
                title: '加入成功',
                icon: 'success',
                duration: 2000
            });
          }     
        }//endok
      },
    });
  },
  bindChange: function (e) {//滑动切换tab 
    var that = this;
    that.setData({ currentTab: e.detail.current });
  },
  initNavHeight:function(){////获取系统信息
    var that = this;
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          winWidth: res.windowWidth,
          winHeight: res.windowHeight
        });
      }
    });
  },
  bannerClosed:function(){
    this.setData({
      bannerApp:false,
    })
  },
  swichNav: function (e) {//点击tab切换
    var that = this;
    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.target.dataset.current
      })
    }
  },
    onShareAppMessage: function () {
    return {
      title: '微信小程序联盟',
      desc: '最具人气的小程序开发联盟!',
      path: '/page/user?id=123'
    }
  },
});

模板简介：该模板名称为【微信小程序企业版带视频播放商品详情页面设计制作开发教程】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。