小程序：视频管理

htmldev/wxMini/pages/businessGoodsManage/businessGoodsManage.wxml

@@ -49,6 +49,7 @@
               bind:tap="jumpOrderDetail">
           <view class="top">
             <view>产品货号：12345678900</view>
+            <!-- 已上架 审核未通过 -->
             <view class="col-1">审核中</view>
           </view>
           <view class="middle">

htmldev/wxMini/pages/businessVideoManage/api/index.js

@@ -0,0 +1,47 @@
+const { request } = require('../../../api/request')
+/**
+ * 订单列表
+ * @param obj
+ * @returns {Promise}
+ */
+export const getOrderList = (obj) => request({
+  url: '/api/user/order/list',
+  method: 'POST',
+  data: {
+    'page': obj.pageNum,
+    'page_size': obj.pageSize,
+    'type': obj.type // 订单状态
+  },
+  showLoading: true
+})
+/**
+ * 订单删除
+ * @param id
+ * @returns {Promise | Promise<unknown>}
+ */
+export const postOrderDelete = (id) => request({
+  url: '/api/user/order/delete',
+  method: 'POST',
+  data: {
+    id
+  },
+  showLoading: true
+})
+
+export const postOrderDiffPay = (id) => request({
+  url: '/api/user/order/delete',
+  method: 'POST',
+  data: {
+    id
+  },
+  showLoading: true
+})
+
+export const postOrderCancel = (id) => request({
+  url: '/api/user/order/delete',
+  method: 'POST',
+  data: {
+    id
+  },
+  showLoading: true
+})

htmldev/wxMini/pages/businessVideoManage/businessVideoManage.js

@@ -1,63 +1,355 @@
+const { getOrderList, postOrderDelete, postOrderDiffPay, postOrderCancel } = require('./api/index')
+
 Page({
 
   /**
    * 页面的初始数据
    */
-  data: {},
+  data: {
+    tabs: [
+      {
+        name: '全部',
+        value: '0'
+      },
+      {
+        name: '已发布',
+        value: '1'
+      },
+      {
+        name: '未发布',
+        value: '2'
+      }
+    ],
+    active: '0', // 顶部菜单栏默认选中，订单状态：(0全部1待支付2待出发3进行中4已结束)
+    current: 0, // 轮播图默认选中
+    pageSize: 20,
+    originScrollViewData: [],
+    booDeleteOrder: false,
+    booLock: false,
+    refresherThreshold: 60, // 自定义下拉刷新阈值
+    booCancelOrder: false,
+    booPayment: false,
+    itemData: {} // 当前选中的订单
+  },
+  // 下拉刷新加锁
+  freshing: false,
+  timer: null,
 
   /**
    * 生命周期函数--监听页面加载
    */
-  onLoad(options) {
-
+  onLoad: function (options) {
+    this.setOriginScrollViewData()
   },
 
   /**
    * 生命周期函数--监听页面初次渲染完成
    */
-  onReady() {
+  onReady: function () {
 
   },
 
   /**
    * 生命周期函数--监听页面显示
    */
-  onShow() {
+  onShow: function () {
 
   },
 
   /**
    * 生命周期函数--监听页面隐藏
    */
-  onHide() {
+  onHide: function () {
 
   },
 
   /**
    * 生命周期函数--监听页面卸载
    */
-  onUnload() {
+  onUnload: function () {
+    clearTimeout(this.timer)
+  },
+  bindCallBack() {
+    this.onRefresh({ detail: { dy: this.data.refresherThreshold } })
+  },
+  jumpOrderDetail(e) {
+    const { orderId } = e.currentTarget.dataset
+    wx.navigateTo({
+      url: '/pages/orderDetail/orderDetail?orderId=' + orderId
+    })
+  },
+  setOriginScrollViewData() {
+    const temp = []
+    for (let i = 0; i < this.data.tabs.length; i++) {
+      temp.push({
+        finished: false, // 所有数据是否加载完
+        isRefresh: false, // 是否下拉刷新
+        isFetchLock: false, // 接口调用加锁
+        pageNum: 0,
+        list: [],
+        scrollY: 0,
+        isFirst: true // 是否首次获取列表
+      })
+    }
 
+    this.setData({
+      originScrollViewData: temp
+    }, () => {
+      // this.fetOrderList()
+    })
   },
+  changeTabs(e) {
+    const value = e.currentTarget.dataset.value
+    const index = this.data.tabs.findIndex(item => item.value === value)
+    const temp = this.data.originScrollViewData[index]
 
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh() {
+    this.setData({
+      active: value,
+      current: index
+    }, () => {
+      if (temp.isFirst) {
+        // this.fetOrderList()
+      }
+    })
+  },
+  handleSwiper(e) {
+    const { current, source } = e.detail
+    const item = this.data.tabs[current]
+    if (source) {
+      this.setData({
+        active: item.value
+      }, () => {
+        const temp = this.data.originScrollViewData[current]
+        if (temp.isFirst) {
+          // this.fetOrderList()
+        }
+      })
+    }
+  },
+  async fetOrderList() {
+    const that = this
+    const _tab = that.data.tabs.findIndex(item => item.value === that.data.active)
+    const temp = that.data.originScrollViewData[_tab]
+
+    if (Object.prototype.toString.call(temp) !== '[object Object]') {
+      return
+    }
+
+    if (temp.finished) {
+      return
+    }
 
+    if (temp.isFetchLock) {
+      return
+    }
+
+    that.setData({
+      ['originScrollViewData[' + _tab + '].isFetchLock']: true,
+      ['originScrollViewData[' + _tab + '].pageNum']: temp.pageNum + 1
+    })
+    try {
+      const { status, data, msg } = await getOrderList({
+        pageNum: that.data.originScrollViewData[_tab].pageNum,
+        pageSize: that.data.pageSize,
+        type: that.data.tabs[_tab].value
+      })
+      if (status) {
+        const { list } = data
+        if (Array.isArray(list)) {
+          const arr = list.map(item => {
+            return {
+              ...item,
+              created_at: item.created_at.replace(/(.*)(:\d{2})/, '$1')
+            }
+          })
+          const _list = temp.isRefresh
+            ? [].concat(arr)
+            : that.data.originScrollViewData[_tab].list.concat(arr)
+
+          that.setData({
+            ['originScrollViewData[' + _tab + '].list']: _list,
+            ['originScrollViewData[' + _tab + '].finished']: list.length < 10,
+            ['originScrollViewData[' + _tab + '].isRefresh']: false,
+            ['originScrollViewData[' + _tab + '].isFetchLock']: false,
+            ['originScrollViewData[' + _tab + '].isFirst']: false
+          })
+        }
+      } else {
+        wx.showToast({
+          title: msg,
+          icon: 'none'
+        })
+      }
+    } catch (e) {}
+    if (that.freshing) {
+      that.freshing = false
+    }
+  },
+  onRefresh(e) {
+    const { dy } = e.detail
+    if (dy < this.data.refresherThreshold || this.freshing) {
+      return
+    }
+    const _tab = this.data.tabs.findIndex(item => item.value === this.data.active)
+    this.freshing = true
+    // 这里设置延时的目的：页面数据不足一屏时，更好的展示下拉刷新动画
+    this.timer = setTimeout(() => {
+      clearTimeout(this.timer)
+      this.setData({
+        ['originScrollViewData[' + _tab + '].pageNum']: 0,
+        pageSize: 20,
+        ['originScrollViewData[' + _tab + '].finished']: false,
+        ['originScrollViewData[' + _tab + '].isRefresh']: true,
+        ['originScrollViewData[' + _tab + '].isFetchLock']: false
+      }, () => {
+        // this.fetOrderList()
+      })
+    }, 1000)
   },
+  showDeleteOrder(e) {
+    const { item } = e.currentTarget.dataset
 
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom() {
+    this.setData({
+      booDeleteOrder: true,
+      itemData: item
+    })
+  },
+  hideDeleteOrder() {
+    this.setData({
+      booDeleteOrder: false,
+      itemData: {}
+    })
+  },
+  async confirmDeleteOrder() {
+    const { id } = this.data.itemData
 
+    this.setData({
+      booLock: true
+    })
+    try {
+      const { status, msg } = await postOrderDelete(id)
+      let _msg = ''
+      if (status) {
+        _msg = '订单删除成功'
+        // 更新全部：去除各个列表中有相同id的
+        const originScrollViewData = this.data.originScrollViewData
+        for (let i = 0; i < originScrollViewData.length; i++) {
+          const _list = originScrollViewData[i].list
+          const _delIndex = _list.findIndex(item => item.id === id)
+          if (_delIndex > -1) {
+            _list.splice(_delIndex, 1)
+            this.setData({
+              ['originScrollViewData[' + i + '].list']: _list
+            })
+          }
+        }
+
+        this.hideDeleteOrder()
+      } else {
+        _msg = msg
+      }
+      wx.showToast({
+        title: _msg,
+        icon: 'none'
+      })
+    } catch (err) {}
+    this.setData({
+      booLock: false
+    })
   },
+  showPayment(e) {
+    const { item } = e.currentTarget.dataset
 
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage() {
+    this.setData({
+      itemData: item,
+      booPayment: true
+    })
+  },
+  hidePayment() {
+    this.setData({
+      booPayment: false,
+      itemData: {}
+    })
+  },
+  async handleOrderDiffPay() {
+    const { order_number, id } = this.data.itemData
 
+    this.setData({
+      booLock: true
+    })
+
+    try {
+      const { status, data, msg } = await postOrderDiffPay(order_number)
+      if (status) {
+        const { time_stamp, nonce_str, sign_type, pay_sign } = data.pay_data
+        wx.requestPayment({
+          timeStamp: time_stamp,
+          nonceStr: nonce_str,
+          package: data.pay_data.package,
+          signType: sign_type,
+          paySign: pay_sign,
+          success(res) {
+            if (res.errMsg === 'requestPayment:ok') {
+              wx.redirectTo({
+                url: '/pages/orderDetail/orderDetail?orderId=' + id
+              })
+            } else {
+              wx.showToast({
+                title: '支付出错，请重试~',
+                icon: 'none'
+              })
+            }
+          },
+          fail(err) {
+            console.log(err)
+          }
+        })
+      } else {
+        wx.showToast({
+          title: msg,
+          icon: 'none'
+        })
+      }
+    } catch (err) {}
+    this.setData({
+      booLock: false
+    })
+  },
+  showCancelOrder(e) {
+    const { item } = e.currentTarget.dataset
+
+    this.setData({
+      itemData: item,
+      booCancelOrder: true
+    })
+  },
+  hideCancelOrder() {
+    this.setData({
+      booCancelOrder: false,
+      itemData: {}
+    })
+  },
+  async confirmCancelOrder() {
+    const { id } = this.data.itemData
+    this.setData({
+      booLock: true
+    })
+    try {
+      const { status, msg } = await postOrderCancel(id)
+      if (status) {
+        this.hideCancelOrder()
+        wx.redirectTo({
+          url: '/pages/orderCancel/orderCancel?orderId=' + id
+        })
+      } else {
+        wx.showToast({
+          title: msg,
+          icon: 'none'
+        })
+      }
+    } catch (err) {}
+    this.setData({
+      booLock: false
+    })
   }
 })

htmldev/wxMini/pages/businessVideoManage/businessVideoManage.json

@@ -1,3 +1,8 @@
 {
-  "usingComponents": {}
-}
+  "usingComponents": {
+    "van-loading": "@vant/weapp/loading/index",
+    "van-popup": "@vant/weapp/popup/index"
+  },
+  "navigationBarTitleText": "视频管理",
+  "backgroundColor": "#F6F6F6"
+}

htmldev/wxMini/pages/businessVideoManage/businessVideoManage.scss

@@ -0,0 +1,195 @@
+.nav-wrap {
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 10;
+  width: 100%;
+
+  .nav {
+    width: 100%;
+    background: rgba(255, 255, 255, 1);
+    font-size: 0;
+  }
+
+  .nav-item {
+    display: inline-block;
+    width: 150rpx;
+    text-align: center;
+  }
+
+  text {
+    position: relative;
+    left: 0;
+    top: 0;
+    display: inline-block;
+    height: 98rpx;
+    line-height: 98rpx;
+    color: rgba(51, 51, 51, 1);
+    font-size: 28rpx;
+  }
+
+
+  text.active {
+    font-weight: 500;
+    color: rgba(107, 133, 89, 1);
+  }
+
+  text.active:after {
+    position: absolute;
+    left: -15rpx;
+    right: -15rpx;
+    bottom: 0;
+    content: '';
+    height: 4rpx;
+    background: rgba(107, 133, 89, 1);
+  }
+}
+
+.main {
+  position: absolute;
+  left: 0;
+  top: 98rpx;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  background: #F6F6F6;
+}
+
+.pulldown-wrapper,
+.pullup-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 60px;
+}
+
+.van-loading__text {
+  color: #969799;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.list {
+  width: 690rpx;
+  min-height: 370rpx;
+  border-radius: 24rpx;
+  overflow: hidden;
+  margin: 30rpx auto 0;
+  background: rgba(255, 255, 255, 1);
+  box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.1);
+}
+
+.top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 65rpx;
+  padding: 0 30rpx 0 25rpx;
+  border-bottom: 1rpx solid rgba(231, 231, 231, 1);
+
+  view {
+    line-height: 38rpx;
+    font-size: 24rpx;
+    color: rgba(51, 51, 51, 1);
+  }
+
+  .col-1 {
+    color: rgba(255, 141, 26, 1);
+  }
+
+  .col-2 {
+    color: rgba(145, 179, 121, 1);
+  }
+
+  .col-3 {
+    color: rgba(212, 48, 48, 1);
+  }
+}
+
+.middle {
+  display: flex;
+  padding: 32rpx 19rpx 34rpx;
+  border-bottom: 1rpx solid rgba(231, 231, 231, 1);
+}
+
+.photo-wrap {
+  width: 132rpx;
+  height: 134rpx;
+  border-radius: 12rpx;
+  overflow: hidden;
+
+  image {
+    display: block;
+    width: 100%;
+    height: 100%;
+    background: pink;
+  }
+}
+
+.name-wrap {
+  width: calc(100% - 132rpx);
+  padding-left: 21rpx;
+
+  .name {
+    width: 100%;
+    line-height: 46rpx;
+    font-size: 24rpx;
+    color: rgba(51, 51, 51, 1);
+    word-break: break-all;
+    word-wrap: break-word;
+  }
+
+  .box {
+    display: flex;
+    align-items: center;
+    margin-top: 33rpx;
+  }
+
+  .stock,
+  .price {
+    line-height: 36rpx;
+    font-size: 24rpx;
+    color: rgba(153, 153, 153, 1);
+  }
+
+  .price {
+    margin-left: 20rpx;
+  }
+}
+
+.bottom {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 23rpx 21rpx 21rpx;
+
+  button {
+    width: 127rpx;
+    height: 58rpx;
+    margin-left: 34rpx;
+    border-radius: 29rpx;
+    border: 2rpx solid rgba(153, 153, 153, 1);
+    font-size: 24rpx;
+    color: rgba(153, 153, 153, 1);
+
+    &:nth-of-type(1) {
+      margin-left: 0;
+    }
+  }
+
+  button[type="default"] {
+    background-color: transparent;
+  }
+}
+
+button.btn-jump[type="primary"] {
+  width: 627rpx;
+  height: 80rpx;
+  margin: 0 auto;
+  border-radius: 40rpx;
+  background-color: rgba(145, 179, 121, 1);
+  font-size: 36rpx;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 1);
+}

htmldev/wxMini/pages/businessVideoManage/businessVideoManage.wxml

@@ -0,0 +1,193 @@
+<!-- 顶部导航 -->
+<view class="nav-wrap">
+  <scroll-view
+    class="nav"
+    scroll-x>
+    <view bindtap="changeTabs"
+          class="nav-item"
+          data-value="{{item.value}}"
+          wx:for="{{tabs}}"
+          wx:key="value">
+      <text class="{{item.value === active ? 'active' : ''}}">{{item.name}}</text>
+    </view>
+  </scroll-view>
+</view>
+
+  <!-- 内容区 -->
+<view class="main">
+  <swiper style="height:100%"
+          current="{{current}}"
+          bindchange="handleSwiper">
+    <swiper-item wx:for="{{originScrollViewData}}"
+                 wx:key="index">
+      <scroll-view scroll-y
+                   style="height:100%;"
+                   refresher-enabled="{{true}}"
+                   refresher-threshold="{{refresherThreshold}}"
+                   refresher-default-style="none"
+                   refresher-background="#FFF"
+                   refresher-triggered="{{item.isRefresh}}"
+                   bindrefresherpulling="onRefresh"
+                   bindscrolltolower="fetOrderList">
+        <!-- 下拉刷新 -->
+        <view slot="refresher" class="pulldown-wrapper">
+          <van-loading
+            wx:if="{{item.isRefresh}}"
+            size="24px"
+            type="spinner">加载中...
+          </van-loading>
+          <view wx:if="{{!item.isRefresh}}" class="van-loading">
+            <text class="van-loading__text">下拉刷新</text>
+          </view>
+        </view>
+
+        <view class="list"
+              wx:for="{{[1]}}"
+              wx:for-item="order"
+              wx:key="id"
+              data-order-id="{{order.id}}"
+              bind:tap="jumpOrderDetail">
+          <view class="top">
+            <view>发布时间：2022.10.12</view>
+            <view class="col-1">审核中</view>
+          </view>
+          <view class="middle">
+            <view class="photo-wrap">
+              <image src=""></image>
+            </view>
+            <view class="name-wrap">
+              <view class="name">村长讲故事：第十一期</view>
+              <view class="box">
+                <view class="stock">观看量：23</view>
+              </view>
+            </view>
+          </view>
+          <view class="bottom">
+            <button type="default">删除视频</button>
+            <button type="default" style="color: rgba(107, 133, 89, 1);">编辑视频</button>
+          </view>
+        </view>
+
+        <view class="list-bitmap" wx:if="{{item.finished && item.list.length < 1}}">
+          <image src="{{tools.imgFilter('/common/Order_page_default@2x.png')}}"></image>
+          <text>暂无订单</text>
+        </view>
+
+        <!-- 上拉加载 -->
+        <view class="pullup-wrapper" wx:if="{{!item.isRefresh}}">
+          <van-loading
+            wx:if="{{!item.finished}}"
+            size="24px"
+            type="spinner">加载中...
+          </van-loading>
+          <view wx:if="{{item.finished && item.list.length > 0}}" class="van-loading">
+            <text class="van-loading__text">没有更多了</text>
+          </view>
+        </view>
+        <button
+          class="btn-jump"
+          type="primary">上传视频</button>
+      </scroll-view>
+    </swiper-item>
+  </swiper>
+</view>
+
+  <!-- 弹窗：删除订单二次确认 -->
+<van-popup
+  custom-class="customer-van-model"
+  show="{{ booDeleteOrder }}"
+  bind:close="hideDeleteOrder">
+  <view class="customer-van-model_body">
+    <view class="content">订单删除后将无法恢复，您也无法再对它进行投诉。</view>
+  </view>
+  <view class="customer-van-model_footer">
+    <button class="customer-van-model_cancel"
+            hover-class="none"
+            type="default"
+            bind:tap="hideDeleteOrder">取消
+    </button>
+    <button class="customer-van-model_confirm"
+            hover-class="none"
+            type="primary"
+            disabled="{{booLock}}"
+            bind:tap="confirmDeleteOrder">确定
+    </button>
+  </view>
+</van-popup>
+
+  <!-- 弹窗：取消订单二次确认 -->
+<van-popup
+  custom-class="customer-van-model"
+  show="{{ booCancelOrder }}"
+  bind:close="hideCancelOrder">
+  <view class="customer-van-model_body">
+    <view class="content cancel-order" wx:if="{{itemData.order_status === 5}}">
+      <text wx:for="{{'司机车辆已安排，订单取消将'}}" wx:for-index="index" wx:key="index">{{item}}</text>
+      <text wx:for="{{'扣除定金'}}" wx:for-index="idx" wx:key="idx" style="color:#FD6600;">{{item}}</text>
+    </view>
+    <view class="content" wx:else>确认取消订单吗？</view>
+  </view>
+  <view class="customer-van-model_footer">
+    <button class="customer-van-model_cancel"
+            hover-class="none"
+            type="default"
+            disabled="{{booLock}}"
+            bind:tap="confirmCancelOrder">仍要取消
+    </button>
+    <button class="customer-van-model_confirm"
+            hover-class="none"
+            type="primary"
+            bind:tap="hideCancelOrder">继续用车
+    </button>
+  </view>
+</van-popup>
+  <!--弹窗：补价-->
+<van-popup
+  custom-class="customer-van-popup customer-van-popup-diff-price"
+  show="{{ booPayment }}"
+  close-on-click-overlay="{{false}}"
+  round
+  position="bottom"
+  bind:close="hidePayment">
+  <view style="right:0;top:0;"
+        class="close-icon"
+        bind:tap="hidePayment">
+    <image class="image" src="{{tools.imgFilter('/common/Popup_bus_icon_close@2x.png')}}"></image>
+  </view>
+  <view class="title">补价</view>
+  <view class="customer-van-popup-diff-price-body">
+    <view class="alert">
+      <view>根据商定的实际需支付金额，调整订单总金额及增付相应定金。平台定价系统升级前，暂时需人工调整合理价格，敬请谅解~
+      </view>
+    </view>
+    <view class="amount">
+      <view class="label">
+        <view>订单总金额</view>
+        <view>(调整后)</view>
+      </view>
+      <view class="value">{{tools.fen2Yuan(itemData.order_price)}}元</view>
+    </view>
+    <view class="diff-price">
+      <text class="label">¥</text>
+      <text class="value">{{tools.fen2Yuan(itemData.order_diff_price)}}</text>
+    </view>
+    <view class="diff-price-text">需增付定金</view>
+    <view class="wechat">
+      <view class="name">
+        <image class="logo"
+               src="{{tools.imgFilter('/createOrder/Popup_defray_logo_wechat@2x.png')}}"></image>
+        <text>微信支付</text>
+      </view>
+      <image class="checked"
+             src="{{tools.imgFilter('/createOrder/Reason_btn_check@2x.png')}}"></image>
+    </view>
+  </view>
+  <button class="customer-picker_footer"
+          style="background-color: #FD6600;"
+          hover-class="none"
+          type="primary"
+          disabled="{{booLock}}"
+          bind:tap="handleOrderDiffPay">立即支付
+  </button>
+</van-popup>
+<wxs src="../../components/wxs/index.wxs" module="tools"></wxs>