小程序：视频管理

htmldev/wxMini/README.md

@@ -18,11 +18,11 @@
   - [x] 发布 addNews 4
 - [x] 我的 mine 4
 - [x] 登录 login 4
-- 商户端 businessHome 4
-  - 产品管理 businessGoodsManage 6
+- [x] 商户端 businessHome 4
+  - [x] 产品管理 businessGoodsManage 6
     - 产品新增/编辑 businessGoodsEdit 16
-  - 视频管理 businessVideoManage 4
-    - 视频新增/编辑 businessVideoEdit 16
+  - [x] 视频管理 businessVideoManage 4
+    - [x] 视频新增/编辑 businessVideoEdit 16
   - 商户消息 businessLeavingAMessage 4
 
 ### TODO

htmldev/wxMini/pages/businessVideoEdit/businessVideoEdit.js

@@ -3,7 +3,9 @@ Page({
   /**
    * 页面的初始数据
    */
-  data: {},
+  data: {
+    form: {}
+  },
 
   /**
    * 生命周期函数--监听页面加载
@@ -59,5 +61,8 @@ Page({
    */
   onShareAppMessage() {
 
+  },
+  onSubmit(e) {
+    console.log(e.detail)
   }
 })

htmldev/wxMini/pages/businessVideoEdit/businessVideoEdit.json

@@ -1,3 +1,4 @@
 {
-  "usingComponents": {}
-}
+  "usingComponents": {},
+  "navigationBarTitleText": "视频发布"
+}

htmldev/wxMini/pages/businessVideoEdit/businessVideoEdit.scss

@@ -0,0 +1,164 @@
+.wrapper {
+  width: 100%;
+  padding-top: 30rpx;
+}
+
+.width-690 {
+  width: 690rpx;
+  margin: 0 auto;
+}
+
+form {
+  display: block;
+  width: 100%;
+}
+
+label {
+  display: flex;
+  align-items: center;
+
+  text {
+    line-height: 42rpx;
+    font-size: 28rpx;
+    color: rgba(51, 51, 51, 1);
+
+    &:nth-of-type(2) {
+      margin-left: 10rpx;
+      color: rgba(153, 153, 153, 1);
+    }
+  }
+}
+
+.photo {
+  .value {
+    width: 142rpx;
+    height: 91rpx;
+    margin: 30rpx 0 45rpx;
+    overflow: hidden;
+  }
+
+  image {
+    display: block;
+    width: 100%;
+    height: 100%;
+    background: pink;
+  }
+}
+
+.video {
+  .value {
+    margin-top: 43rpx;
+  }
+}
+
+.btn-upload-video {
+  width: 93rpx;
+  height: 94rpx;
+  background: pink;
+}
+
+.tip {
+  width: 100%;
+  padding-bottom: 20rpx;
+  margin-top: 40rpx;
+  line-height: 42rpx;
+  font-size: 24rpx;
+  color: rgba(153, 153, 153, 1);
+  border-bottom: 2rpx solid rgba(231, 231, 231, 1);
+}
+
+.name {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 40rpx 0 30rpx;
+
+  .value {
+    width: calc(100% - 84rpx);
+  }
+
+  input {
+    display: block;
+    width: 100%;
+    height: 44rpx;
+    font-size: 28rpx;
+    color: rgba(51, 51, 51, 1);
+    text-align: right;
+  }
+}
+
+.placeholder {
+  color: rgba(153, 153, 153, 1);
+}
+
+.describe {
+  position: relative;
+  left: 0;
+  top: 0;
+
+  textarea {
+    display: block;
+    width: 100%;
+    padding: 17rpx 21rpx;
+    min-height: 186rpx;
+    border-radius: 20rpx;
+    background: rgba(245, 245, 245, 1);
+    line-height: 38rpx;
+    font-size: 28rpx;
+    color: rgba(51, 51, 51, 1);
+  }
+}
+
+.words-limit {
+  position: absolute;
+  bottom: 17rpx;
+  right: 21rpx;
+  z-index: 1;
+  line-height: 28rpx;
+  font-size: 24rpx;
+  color: rgba(153, 153, 153, 1);
+}
+
+.type {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 22rpx 0 16rpx;
+  border-bottom: 2rpx solid rgba(231, 231, 231, 1);
+
+  .value {
+    width: 568rpx;
+    line-height: 42rpx;
+    font-size: 28rpx;
+    color: rgba(107, 133, 89, 1);
+    text-align: right;
+
+    &.placeholder {
+      color: rgba(153, 153, 153, 1);
+    }
+  }
+
+  .arrow {
+    width: 9rpx;
+    height: 15rpx;
+    background: pink;
+  }
+}
+
+button.btn-submit {
+  width: 627rpx;
+  height: 80rpx;
+  margin: 40rpx auto 0;
+  border-radius: 40rpx;
+  font-size: 36rpx;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 1);
+
+  &.edit {
+    background-color: rgba(46, 129, 255, 1);
+  }
+
+  &.send {
+    background-color: rgba(145, 179, 121, 1);
+  }
+}

htmldev/wxMini/pages/businessVideoEdit/businessVideoEdit.wxml

@@ -0,0 +1,58 @@
+<view class="wrapper">
+  <view class="width-690">
+    <form bind:submit="onSubmit">
+      <view class="photo">
+        <label>
+          <text>视频封面</text>
+          <text>(0/1)</text>
+        </label>
+        <view class="value">
+          <image src=""></image>
+        </view>
+      </view>
+      <view class="video">
+        <label>
+          <text>上传视频</text>
+        </label>
+        <view class="value">
+          <image class="btn-upload-video" src=""></image>
+        </view>
+        <view class="tip">请上传尺寸为375*375像素图片</view>
+      </view>
+      <view class="name">
+        <label>
+          <text>标题</text>
+        </label>
+        <view class="value">
+          <input
+            value=""
+            placeholder="输入视频标题"
+            placeholder-class="placeholder"></input>
+        </view>
+      </view>
+      <view class="describe">
+        <view class="value">
+          <textarea
+            value=""
+            placeholder="请输入视频简介"
+            placeholder-class="placeholder"
+            maxlength="{{200}}"
+            auto-height="{{true}}"></textarea>
+        </view>
+        <view class="words-limit">0/200</view>
+      </view>
+      <view class="type">
+        <label>
+          <text>视频类型</text>
+        </label>
+        <view class="value placeholder">请选择视频类型</view>
+        <image class="arrow" src=""></image>
+      </view>
+      <!-- 编 辑: edit 发 布: send-->
+      <button
+        class="btn-submit edit"
+        type="primary"
+        form-type="submit">编 辑</button>
+    </form>
+  </view>
+</view>