t

src/pagesHouse/components/indexDtl/header/index.jsx

@@ -19,7 +19,7 @@ export default class List extends Component {
   getData = (curObj) => {
     this.setState({
       curObj,
-      navVal: curObj.vr_key ? 'hp' : 'ld'
+      navVal: curObj.vr_key ? 'hp' : curObj.video ? 'video' : 'ld'
     })
   }
 
@@ -66,7 +66,16 @@ export default class List extends Component {
 
   renderNav () {
     const {  curObj, navVal } = this.state
-    let navArr = curObj.vr_key ? [{name: '航拍', val: 'hp'}, {name: '楼栋图', val: 'ld'}, {name: '图片', val: 'tp'}] : [{name: '楼栋图', val: 'ld'}, {name: '图片', val: 'tp'}]
+
+    const baseNavItems = [{name: '楼栋图', val: 'ld'}, {name: '图片', val: 'tp'}]
+    let navArr = [...baseNavItems]
+    if (curObj.video) {
+      navArr.unshift({name: '视频', val: 'video'})
+    }
+    if (curObj.vr_key) {
+      navArr.unshift({name: '航拍', val: 'hp'})
+    }
+
     const curItems = navArr.map((item, index) => {
       return (
         <View className={navVal === item.val ? 'op cur' : 'op'} key={index} onClick={this.navClick.bind(this, item)}>{item.name}</View>
@@ -155,6 +164,23 @@ export default class List extends Component {
           </Navigator>
           : ''
         }
+        {
+          navVal === 'video'
+          ?
+          <View className='sh-img'>
+            <Video
+              className="img"
+              src={curObj.video}
+              controls={true}
+              autoplay={false}
+              initialTime='0'
+              id='video'
+              loop={false}
+              muted={false}
+            />
+          </View>
+          : ''
+        }
         {
           navVal === 'ld'
           ?

src/pagesHouse/components/indexDtl/header/index.scss

@@ -54,66 +54,97 @@
     text-align: center;
     position: absolute;
     bottom: 20px;
-    left: 50%;
-    &.t2 {
-      .main {
-        width: 180px;
-      }
-      .bg, .content {
-        width: 180px;
-        margin-left: -90px;
-      }
-    }
+    width: 70%;
+    left: 15%;
+    height: 50px;
+    line-height: 50px;
+    // background-color: #fff;
+    text-align: center;
     .main {
       display: inline-block;
-      width: 260px;
-      height: 50px;
-    }
-    .bg {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      margin-left: -130px;
-      z-index: 1;
-      width: 260px;
-      height: 50px;
-      background: #000;
-      opacity: .6;
+      background: rgba(0, 0, 0, .5);
       border-radius: 20px;
+      overflow: hidden;
     }
     .content {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      margin-left: -130px;
-      z-index: 2;
-      width: 260px;
-      height: 50px;
-      color: #fff;
-      font-size: 24px;
-      border-radius: 20px;
       display: flex;
-      justify-content: center;
-      align-items: center;
       .op {
-        display: inline-block;
-        vertical-align: middle;
-        border-radius: 10px;
-        width: 80px;
-        height: 40px;
-        margin-right: 10px;
-        line-height: 40px;
-        text-align: center;
-        font-size: 22px;
-        &:last-child {
-          margin-right: 0;
-        }
+        padding: 0 20px;
+        height: 50px;
+        line-height: 50px;
+        color: #fff;
+        font-size: 24px;
+        border-radius: 20px;
         &.cur {
           background: $mainColor;
         }
       }
     }
   }
+  // .sh-nav {
+  //   text-align: center;
+  //   position: absolute;
+  //   bottom: 20px;
+  //   left: 50%;
+  //   &.t2 {
+  //     .main {
+  //       width: 180px;
+  //     }
+  //     .bg, .content {
+  //       width: 180px;
+  //       margin-left: -90px;
+  //     }
+  //   }
+  //   .main {
+  //     display: inline-block;
+  //     width: 260px;
+  //     height: 50px;
+  //   }
+  //   .bg {
+  //     position: absolute;
+  //     bottom: 0;
+  //     left: 0;
+  //     margin-left: -130px;
+  //     z-index: 1;
+  //     width: 260px;
+  //     height: 50px;
+  //     background: #000;
+  //     opacity: .6;
+  //     border-radius: 20px;
+  //   }
+  //   .content {
+  //     position: absolute;
+  //     bottom: 0;
+  //     left: 0;
+  //     margin-left: -130px;
+  //     z-index: 2;
+  //     width: 260px;
+  //     height: 50px;
+  //     color: #fff;
+  //     font-size: 24px;
+  //     border-radius: 20px;
+  //     display: flex;
+  //     justify-content: center;
+  //     align-items: center;
+  //     .op {
+  //       display: inline-block;
+  //       vertical-align: middle;
+  //       border-radius: 10px;
+  //       width: 80px;
+  //       height: 40px;
+  //       margin-right: 10px;
+  //       line-height: 40px;
+  //       text-align: center;
+  //       font-size: 22px;
+  //       &:last-child {
+  //         margin-right: 0;
+  //       }
+  //       &.cur {
+  //         background: $mainColor;
+  //       }
+  //     }
+  //   }
+  // }
   .sh-img {
     width: 100%;
     height: 500px;

src/pagesHouse/produceType.jsx

@@ -152,7 +152,7 @@ class Index extends Component {
                                       : ''
                                     }
                                   </View>
-                                  <View onClick={this.linkVrHandle.bind(this, three)} className="sa-right">
+                                  <View className="sa-right">
                                     <View className="op">
                                       <View className="k">户型</View>
                                       <View className="v t2">{htObj[two.house_type_val]}</View>
@@ -167,7 +167,7 @@ class Index extends Component {
                                       <View className="op">
                                         <View className="k2">户型VR</View>
                                         <View className="v">
-                                          <View className="scoped-vr-btn">VR看房</View>
+                                          <View className="scoped-vr-btn" onClick={this.linkVrHandle.bind(this, three)}>VR看房</View>
                                         </View>
                                       </View>
                                       :
@@ -176,6 +176,23 @@ class Index extends Component {
                                         <View className="v">待收集</View>
                                       </View>
                                     }
+                                    {
+                                      three.house_video
+                                      ?
+                                      <View className="scoped-video">
+                                        <Video
+                                          className="sv-v"
+                                          src={three.house_video}
+                                          controls={true}
+                                          autoplay={false}
+                                          initialTime='0'
+                                          id='video'
+                                          loop={false}
+                                          muted={false}
+                                        />
+                                      </View>
+                                      : ''
+                                    }
                                   </View>
                                 </View>
                                 {

src/pagesHouse/produceType.scss

@@ -51,6 +51,7 @@
 
 .sht-ops {
   margin-bottom: 20px;
+  position: relative;
   .at-noticebar {
     margin: -6px 20px 0;
   }
@@ -145,7 +146,21 @@
   color: #fff;
   padding: 6px 20px;
   text-align: center;
-  font-size: 26px;
+  font-size: 24px;
   display: inline-block;
-  border-radius: 10px;
+  border-radius: 6px;
+}
+
+
+.scoped-video {
+  position: absolute;
+  right: 20px;
+  top: 40px;
+  width: 180px;
+  height: 120px;
+  z-index: 999;
+  .sv-v {
+    width: 180px;
+    height: 120px;
+  }
 }

src/pagesMore/center/uploadRoom2.jsx

@@ -8,7 +8,7 @@ import './uploadRoom2.scss'
 
 import qiniuUploader from '@utils/qiniuUploader'
 import { TaroCropper } from 'taro-cropper'
-import { arrToObj } from '@utils'
+import { arrToObj, convertFileName } from '@utils'
 
 class Index extends Component {
 
@@ -50,6 +50,7 @@ class Index extends Component {
       curProductTypeName: '',
       productHouseList: [],
       custObj: {},
+      uploadProgressObj: {},
     }
   }
   config = {
@@ -363,7 +364,8 @@ class Index extends Component {
         qiniuUploader.upload(f.tempFilePath, (suc) => {
           formObj.video = suc.fileURL
           that.setState({
-            formObj
+            formObj,
+            uploadProgressObj: {},
           })
         }, (error) => {
           console.error('error: ' + JSON.stringify(error));
@@ -371,11 +373,17 @@ class Index extends Component {
           // 此项为qiniuUploader.upload的第四个参数options。若想在单个方法中变更七牛云相关配置，可以使用上述参数。如果不需要在单个方法中变更七牛云相关配置，则可使用 null 作为参数占位符。推荐填写initQiniu()中的七牛云相关参数，然后此处使用null做占位符。
           // 若想自定义上传key，请把自定义key写入此处options的key值。如果在使用自定义key后，其它七牛云配置参数想维持全局配置，请把此处options除key以外的属性值置空。
           // 启用options参数请记得删除null占位符
+
+          // 楼盘视频 E 开头 户型视频 A 开头，房源视频 H 开头
           {
-            key: `${userInfo.phone}-${+new Date()}${f.tempFilePath.split('.').length > 0 ? '.'+f.tempFilePath.split('.')[1] : ''}`,
+            // key: `${userInfo.phone}-${+new Date()}${f.tempFilePath.split('.').length > 0 ? '.'+f.tempFilePath.split('.')[1] : ''}`,
+            key: 'H'+convertFileName(f.tempFilePath, 'onlyName'),
           },
           // null,
           (progress) => {
+              that.setState({
+                uploadProgressObj: progress
+              })
               console.log('上传进度', progress.progress);
               console.log('已经上传的数据长度', progress.totalBytesSent);
               console.log('预期需要上传的数据总长度', progress.totalBytesExpectedToSend);
@@ -513,11 +521,12 @@ class Index extends Component {
     const { addr1, addr2, addr3, formObj } = this.state
     return (
       <View className={formObj.id ? 'scoped-addr-box dis' : 'scoped-addr-box'}>
-        <Input type="number" disabled={formObj.id} value={addr1} onInput={this.changeAddrInput.bind(this, 'addr1')}  className="i" placeholder="__" />
+        {/* disabled={formObj.id} */}
+        <Input type="number"  value={addr1} onInput={this.changeAddrInput.bind(this, 'addr1')}  className="i" placeholder="__" />
         <View className='t'>栋座</View>
-        <Input type="number" disabled={formObj.id} value={addr2} onInput={this.changeAddrInput.bind(this, 'addr2')}  className="i" placeholder="__" />
+        <Input type="number" value={addr2} onInput={this.changeAddrInput.bind(this, 'addr2')}  className="i" placeholder="__" />
         <View className='t'>单元</View>
-        <Input type="number" disabled={formObj.id} value={addr3} onInput={this.changeAddrInput.bind(this, 'addr3')}  className="i" placeholder="__" />
+        <Input type="number" value={addr3} onInput={this.changeAddrInput.bind(this, 'addr3')}  className="i" placeholder="__" />
         <View className='t'>室号</View>
       </View>
     )
@@ -550,11 +559,12 @@ class Index extends Component {
     const { hType1, hType2, hType3, formObj } = this.state
     return (
       <View className={formObj.id ? 'scoped-addr-box dis' : 'scoped-addr-box'}>
-        <Input type="number" value={hType1} disabled={formObj.id} onInput={this.changeAddrInput.bind(this, 'hType1')}  className="i" placeholder="__" />
+         {/* disabled={formObj.id} */}
+        <Input type="number" value={hType1} onInput={this.changeAddrInput.bind(this, 'hType1')}  className="i" placeholder="__" />
         <View className='t'>室</View>
-        <Input type="number" value={hType2} disabled={formObj.id} onInput={this.changeAddrInput.bind(this, 'hType2')}  className="i" placeholder="__" />
+        <Input type="number" value={hType2} onInput={this.changeAddrInput.bind(this, 'hType2')}  className="i" placeholder="__" />
         <View className='t'>厅</View>
-        <Input type="number" value={hType3} disabled={formObj.id} onInput={this.changeAddrInput.bind(this, 'hType3')}  className="i" placeholder="__" />
+        <Input type="number" value={hType3} onInput={this.changeAddrInput.bind(this, 'hType3')}  className="i" placeholder="__" />
         <View className='t'>卫</View>
       </View>
     )
@@ -570,9 +580,9 @@ class Index extends Component {
     const { sRate1, sRate2, formObj } = this.state
     return (
       <View className={formObj.id ? 'scoped-floor-height-box dis' : 'scoped-floor-height-box'}>
-        <Input type="number" disabled={formObj.id} value={sRate1} onInput={this.changeAddrInput.bind(this, 'sRate1')}  className="i" placeholder="__" />
+        <Input type="number" value={sRate1} onInput={this.changeAddrInput.bind(this, 'sRate1')}  className="i" placeholder="__" />
         <View className='t'>梯</View>
-        <Input type="number" disabled={formObj.id} value={sRate2} onInput={this.changeAddrInput.bind(this, 'sRate2')}  className="i" placeholder="__" />
+        <Input type="number" value={sRate2} onInput={this.changeAddrInput.bind(this, 'sRate2')}  className="i" placeholder="__" />
         <View className='t'>户</View>
       </View>
     )
@@ -581,9 +591,9 @@ class Index extends Component {
     const { formObj } = this.state
     return (
       <View className={formObj.id ? 'scoped-floor-height-box dis' : 'scoped-floor-height-box'}>
-        <Input type="number" disabled={formObj.id} value={formObj.floor} onInput={this.changeFormObjInput.bind(this, 'floor')}  className="i" placeholder="所在楼层" />
+        <Input type="number" value={formObj.floor} onInput={this.changeFormObjInput.bind(this, 'floor')}  className="i" placeholder="所在楼层" />
         <View className='t'>/</View>
-        <Input type="number" disabled={formObj.id} value={formObj.storeys} onInput={this.changeFormObjInput.bind(this, 'storeys')}  className="i" placeholder="总楼层" />
+        <Input type="number" value={formObj.storeys} onInput={this.changeFormObjInput.bind(this, 'storeys')}  className="i" placeholder="总楼层" />
         <View className='t'>层</View>
       </View>
     )
@@ -1002,7 +1012,13 @@ class Index extends Component {
         </View>
         <View className='scoped-has-right'>
           <View className="scoped-box">
-            <View className="sb-title">房源视频</View>
+            <View className="sb-title">房源视频
+              {
+                uploadProgressObj && uploadProgressObj.progress
+                ? <View className="s">上传进度：{uploadProgressObj.progress}%</View>
+                : ''
+              }
+            </View>
             <View className="scoped-img">
               {
                 formObj.video

src/pagesMore/center/uploadRoom2.scss

@@ -62,10 +62,10 @@
   background: #fff;
   display: flex;
   height: 90px;
-  &.dis {
-    background-color: #f2f2f2;
-    border-radius: 10px;
-  }
+  // &.dis {
+  //   background-color: #f2f2f2;
+  //   border-radius: 10px;
+  // }
   // border-bottom: 1PX solid #f2f2f2;
   .i {
     flex: 3;
@@ -93,10 +93,10 @@
   display: flex;
   height: 90px;
   z-index: 2;
-  &.dis {
-    background-color: #f2f2f2;
-    border-radius: 10px;
-  }
+  // &.dis {
+  //   background-color: #f2f2f2;
+  //   border-radius: 10px;
+  // }
   .i {
     flex: 2;
     font-size: 28px;

src/utils/index.js

@@ -87,3 +87,25 @@ export function comGetTime(date = new Date(), onlyDate = true) {
   milli = milli > 100 ? milli : milli > 10 ? '0' + milli : '00' + milli
   return onlyDate ? `${year}-${month}-${day}` : `${year}${month}${day}${hour}${minute}${second}${milli}`
 }
+
+
+
+export function convertFileName (oldFileName, type) {
+  const lastDotIndex = oldFileName.lastIndexOf('.')
+  if (lastDotIndex === -1) {
+    return ''
+  }
+  const now = new Date();
+  const year = now.getFullYear();
+  const month = String(now.getMonth() + 1).padStart(2, '0');
+  const day = String(now.getDate()).padStart(2, '0');
+  const hours = String(now.getHours()).padStart(2, '0');
+  const minutes = String(now.getMinutes()).padStart(2, '0');
+  const seconds = String(now.getSeconds()).padStart(2, '0');
+  const randomNum = Math.floor(Math.random() * 9000) + 1000;
+  if (type === 'onlyName') {
+    return `${year}${month}${day}${hours}${minutes}${seconds}-${randomNum}`
+  } else {
+    return `${year}${month}${day}${hours}${minutes}${seconds}-${randomNum}${oldFileName.substring(lastDotIndex)}`
+  }
+}