新增买入 卖出订单列表页面

pages.json

@@ -300,6 +300,22 @@
     		"enablePullDownRefresh" : false
     	}
     },
+    {
+    	"path" : "pages/user/order/buyOrder",
+    	"style" :
+    	{
+    		"navigationBarTitleText" : "卖出订单",
+    		"enablePullDownRefresh" : false
+    	}
+    },
+    {
+    	"path" : "pages/user/order/byOrder",
+    	"style" :
+    	{
+    		"navigationBarTitleText" : "买入订单",
+    		"enablePullDownRefresh" : false
+    	}
+    },
     {
     	"path" : "pages/targetdata/publicdata",
     	"style" :

pages/user/index.vue

@@ -52,14 +52,14 @@
 		  <view class="item-name"> 我的认证</view>
 	  </view>
 	  <!-- 买入订单 -->
-	  <view class="order-navbar-item">
+	  <view class="order-navbar-item" @click="byOrder">
 		  <view class="item-icon">
 			<text class="iconfont icon-daifukuan"></text>
 		  </view>
 		  <view class="item-name"> 买入订单</view>
 	  </view>
 	  <!-- 卖出订单 -->
-	  <view class="order-navbar-item">
+	  <view class="order-navbar-item" @click="buyOrder">
 		  <view class="item-icon">
 			<text class="iconfont icon-qpdingdan"></text>
 		  </view>
@@ -229,7 +229,31 @@
       mycertinfo(){
         this.$navTo('pages/user/mycertinfo/mycertinfo')
       },
-	  
+      // 卖出订单
+      buyOrder(){
+        if (this.validateVerify()) {
+          this.$navTo('pages/user/order/buyOrder')
+        } else {
+          this.$error('未完成机构认证，请前往认证后查看')
+        }
+      },
+      // 买入订单
+      byOrder(){
+        if (this.validateVerify()) {
+          this.$navTo('pages/user/order/byOrder')
+        } else {
+          this.$error('未完成机构认证，请前往认证后查看')
+        }
+      },
+      validateVerify()
+      {
+        let isliCode = uni.getStorageSync("isliCode")
+        let userType = uni.getStorageSync("userType")
+        if (userType === "0" || isliCode == "undefined" || isliCode == undefined || isliCode == "") {
+          return false
+        }
+        return true
+      },
 
       // 跳转到登录页
       handleLogin() {

pages/user/order/buyOrder.vue

@@ -0,0 +1,350 @@
+<template>
+    <view class="container">
+      <mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ native: true }" @down="downCallback" :up="upOption" @up="upCallback">
+
+        <!-- tab栏 -->
+        <u-tabs :list="tabs" :is-scroll="false" :current="curTab" active-color="#FA2209" :duration="0.2" @change="onChangeTab" />
+
+        <!-- 订单列表 -->
+        <view class="order-list">
+          <view class="order-item" v-for="(item, index) in list.data" :key="index">
+
+            <view class="item-top">
+              <view class="item-top-left">
+                <text class="order-time">订单号：{{ item.batchcode }}</text>
+              </view>
+              <view class="item-top-right">
+                <text class="state-text">{{item.state_text}}</text>
+              </view>
+            </view>
+            <!-- 商品列表 -->
+            <view class="goods-list" >
+              <view class="goods-item" v-for="(goods, idx) in item.order_detail" :key="idx">
+                <!-- 商品图片 -->
+                <view class="goods-image">
+                  <image class="image" :src="goods.goods_image" mode="scaleToFill"></image>
+                </view>
+                <!-- 商品信息 -->
+                <view class="goods-content">
+                  <view class="goods-title">
+                    <text class="twoline-hide">{{ goods.goods_name }}</text>
+                    <text class="twoline-hide">
+                      <text class="twoline-hide-price">
+                        单价：
+                        <text class="twoline-hide-icon">￥</text>
+                        {{ goods.price }}
+                      </text>
+                    </text>
+                    <text class="twoline-hide">
+                      <text class="twoline-hide-price">
+                        购买年限： {{ goods.transaction_count }}年
+                      </text>
+                    </text>
+                    <text class="twoline-hide">
+                      <text class="twoline-hide-price">
+                        交易佣金：
+                        <text class="twoline-hide-icon">￥</text>
+                        {{ goods.service_charge }}
+                        <text class="twoline-hide-sum">
+                          合计：￥{{goods.money}}
+                        </text>
+                      </text>
+                    </text>
+                  </view>
+                </view>
+                <!-- 委托方等信息 -->
+                <view class="goods-props clearfix">
+                  <view class="goods-props-item">委托方：{{goods.entrust_name}}</view>
+                  <view class="goods-props-item">
+                    <text>交易方式：{{goods.goods_entrust=="1"?'转让':'授权'}}</text>
+                  </view>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </mescroll-body>
+    </view>
+</template>
+
+<script>
+  import * as OrderApi from '@/api/order'
+  import { checkLogin } from '@/core/app'
+  import { getEmptyPaginateObj, getMoreListData } from '@/core/app'
+  import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue'
+  import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins'
+
+  // 每页记录数量
+  const pageSize = 15
+
+  // tab栏数据
+  const tabs = [
+    {name: `全部`,value: 'all',key: ''},
+    {name: `待付款`,value: 'payment',key: 1},
+    {name: `待交付`,value: 'delivery',key: 2},
+    {name: `已中止`,value: 'hasabort',key: '3,4'},
+    {name: `已关闭`,value: 'hasclosed',key: 5},
+  ]
+  export default {
+    name: "buyOrder",
+    components: {
+      MescrollBody
+    },
+    mixins: [MescrollMixin],
+    data() {
+      return {
+        // 当前页面参数
+        options: { dataType: 'all' },
+        // tab栏数据
+        tabs,
+        // 当前标签索引
+        curTab: 0,
+        // 订单列表数据
+        list: getEmptyPaginateObj(),
+        // 上拉加载配置
+        upOption: {
+          // 首次自动执行
+          auto: true,
+          // 每页数据的数量; 默认10
+          page: { size: pageSize },
+          // 数量要大于4条才显示无更多数据
+          noMoreSize: 4,
+          // 空布局
+          empty: {
+            tip: '暂无订单记录'
+          }
+        },
+        // 控制onShow事件是否刷新订单列表
+        canReset: false,
+      }
+    },
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad(options) {
+      // 初始化当前选中的标签
+      this.initCurTab(options)
+      // 注册全局事件订阅: 是否刷新订单列表
+      uni.$on('syncRefresh', canReset => {
+        this.canReset = canReset
+      })
+    },
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow() {
+      this.canReset && this.onRefreshList()
+      this.canReset = false
+    },
+    /**
+     * 生命周期函数--监听页面的卸载
+     */
+    onUnload() {
+      // 卸载全局事件订阅
+      uni.$off('syncRefresh')
+    },
+    methods: {
+      // 初始化当前选中的标签
+      initCurTab(options) {
+        // 判断是否已登录
+        this.isLogin = checkLogin()
+        if(!this.isLogin){
+          uni.navigateTo({
+            url:"/pages/login/index"
+          })
+        }
+        // 登录成功后才可以操作
+        const app = this
+        if (options.dataType) {
+          const index = app.tabs.findIndex(item => item.value == options.dataType)
+          app.curTab = index > -1 ? index : 0
+        }
+      },
+      /**
+       * 上拉加载的回调 (页面初始化时也会执行一次)
+       * 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
+       * @param {Object} page
+       */
+      upCallback(page) {
+        const app = this
+        // 设置列表数据
+        app.getOrderList(page.num)
+            .then(list => {
+              const curPageLen = list.data.length
+              const totalSize = list.data.total
+              app.mescroll.endBySize(curPageLen, totalSize)
+            })
+            .catch(() => app.mescroll.endErr())
+      },
+      // 获取订单列表
+      getOrderList(pageNo = 1) {
+        const app = this
+        return new Promise((resolve, reject) => {
+          let status = app.tabs[app.curTab].key
+          let isliCode = uni.getStorageSync("isliCode")
+          let data = {
+            offset:0,
+            limit:pageSize,
+            order_status: status,
+            user_role: 1,
+            user_isli: isliCode,
+            page:pageNo,
+            pageSize:pageSize,
+          }
+          OrderApi.ordquery(data)
+              .then(result => {
+                // 按格式封装
+                let nlist = {data:result.data,total:result.count,current_page:pageNo}
+                // 合并新数据
+                const newList = app.initList(nlist)
+                console.log(newList,"newlist")
+                app.list.data = getMoreListData(newList, app.list, pageNo)
+                resolve(newList)
+              })
+        })
+      },
+      // 初始化订单列表数据
+      initList(newList) {
+        newList.data.forEach(item => {
+          item.total_num = item.order_detail.length
+          item.state_text = this.showStateText(item.staus)
+        })
+        return newList
+      },
+      // 订单状态
+      showStateText(state){
+        let state_txt="";
+        if(state=="1"){
+          state_txt="待付款"
+        }else if(state =="2" ){
+          state_txt="待付款"
+        } else if(state=="3"){
+          state_txt="已终止"
+        } else if(state == "4"){
+          state_txt="已终止"
+        }else{
+          state_txt="已关闭"
+        }
+        return state_txt;
+      },
+
+      // 获取当前标签项的值
+      getTabValue() {
+        return this.tabs[this.curTab].value
+      },
+      // 切换标签项
+      onChangeTab(index) {
+        console.log(this.list)
+        const app = this
+        // 设置当前选中的标签
+        app.curTab = index
+        // 刷新订单列表
+        app.onRefreshList()
+      },
+
+      // 刷新订单列表
+      onRefreshList() {
+        this.list = getEmptyPaginateObj()
+
+        setTimeout(() => {
+          this.mescroll.resetUpScroll()
+        }, 120)
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+// 项目内容
+.order-item {
+  margin: 20rpx auto 20rpx auto;
+  padding: 30rpx 30rpx;
+  width: 94%;
+  box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
+  border-radius: 16rpx;
+  background: #fff;
+}
+
+// 项目顶部
+.item-top {
+  display: flex;
+  justify-content: space-between;
+  font-size: 26rpx;
+  margin-bottom: 20rpx;
+
+  .order-time {
+    color: #777;
+  }
+
+  .state-text {
+    color: $uni-text-color-active;
+  }
+}
+
+// 商品列表
+.goods-list {
+
+  // 商品项
+  .goods-item {
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: 40rpx;
+    border-top: 1rpx #777 solid;
+
+    // 商品图片
+    .goods-image {
+      width: 180rpx;
+      height: 180rpx;
+      flex-basis: calc(33.33% - 10rpx);
+      margin-right: 10rpx;
+
+      .image {
+        display: block;
+        width: 100%;
+        height: 100%;
+        border-radius: 8rpx;
+      }
+    }
+
+    // 商品内容
+    .goods-content {
+      padding-left: 16rpx;
+      padding-top: 16rpx;
+      flex-basis: calc(66.66% - 10rpx);
+      margin-right: 10rpx;
+
+      .goods-title {
+        font-size: 26rpx;
+        max-height: 76rpx;
+      }
+
+      .twoline-hide-price{
+        font-size: 20rpx;
+        color: #979082;
+
+        .twoline-hide-icon{
+          color: #0b0b0b;
+          font-weight: bold;
+        }
+        .twoline-hide-sum{
+          color: red;
+          margin-left: 25%;
+        }
+      }
+
+    }
+
+    // 委托方等信息
+    .goods-props {
+      float: left;
+      height: 30rpx;
+      font-size: 20rpx;
+      margin-top: 10rpx;
+      flex-basis: 100%;
+      color: $uni-text-color-grey;
+    }
+  }
+
+}
+
+</style>

pages/user/order/byOrder.vue

@@ -0,0 +1,350 @@
+<template>
+  <view class="container">
+    <mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ native: true }" @down="downCallback" :up="upOption" @up="upCallback">
+
+      <!-- tab栏 -->
+      <u-tabs :list="tabs" :is-scroll="false" :current="curTab" active-color="#FA2209" :duration="0.2" @change="onChangeTab" />
+
+      <!-- 订单列表 -->
+      <view class="order-list">
+        <view class="order-item" v-for="(item, index) in list.data" :key="index">
+
+          <view class="item-top">
+            <view class="item-top-left">
+              <text class="order-time">订单号：{{ item.batchcode }}</text>
+            </view>
+            <view class="item-top-right">
+              <text class="state-text">{{item.state_text}}</text>
+            </view>
+          </view>
+          <!-- 商品列表 -->
+          <view class="goods-list" >
+            <view class="goods-item" v-for="(goods, idx) in item.order_detail" :key="idx">
+              <!-- 商品图片 -->
+              <view class="goods-image">
+                <image class="image" :src="goods.goods_image" mode="scaleToFill"></image>
+              </view>
+              <!-- 商品信息 -->
+              <view class="goods-content">
+                <view class="goods-title">
+                  <text class="twoline-hide">{{ goods.goods_name }}</text>
+                  <text class="twoline-hide">
+                    <text class="twoline-hide-price">
+                      单价：
+                      <text class="twoline-hide-icon">￥</text>
+                      {{ goods.price }}
+                    </text>
+                  </text>
+                  <text class="twoline-hide">
+                    <text class="twoline-hide-price">
+                      购买年限： {{ goods.transaction_count }}年
+                    </text>
+                  </text>
+                  <text class="twoline-hide">
+                    <text class="twoline-hide-price">
+                      交易佣金：
+                      <text class="twoline-hide-icon">￥</text>
+                      {{ goods.service_charge }}
+                      <text class="twoline-hide-sum">
+                        合计：￥{{goods.money}}
+                      </text>
+                    </text>
+                  </text>
+                </view>
+              </view>
+              <!-- 委托方等信息 -->
+              <view class="goods-props clearfix">
+                <view class="goods-props-item">委托方：{{goods.entrust_name}}</view>
+                <view class="goods-props-item">
+                  <text>交易方式：{{goods.goods_entrust=="1"?'转让':'授权'}}</text>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </mescroll-body>
+  </view>
+</template>
+
+<script>
+import * as OrderApi from '@/api/order'
+import { checkLogin } from '@/core/app'
+import { getEmptyPaginateObj, getMoreListData } from '@/core/app'
+import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue'
+import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins'
+
+// 每页记录数量
+const pageSize = 15
+
+// tab栏数据
+const tabs = [
+  {name: `全部`,value: 'all',key: ''},
+  {name: `待付款`,value: 'payment',key: 1},
+  {name: `待交付`,value: 'delivery',key: 2},
+  {name: `已中止`,value: 'hasabort',key: 4},
+  {name: `已关闭`,value: 'hasclosed',key: 5},
+]
+export default {
+  name: "buyOrder",
+  components: {
+    MescrollBody
+  },
+  mixins: [MescrollMixin],
+  data() {
+    return {
+      // 当前页面参数
+      options: { dataType: 'all' },
+      // tab栏数据
+      tabs,
+      // 当前标签索引
+      curTab: 0,
+      // 订单列表数据
+      list: getEmptyPaginateObj(),
+      // 上拉加载配置
+      upOption: {
+        // 首次自动执行
+        auto: true,
+        // 每页数据的数量; 默认10
+        page: { size: pageSize },
+        // 数量要大于4条才显示无更多数据
+        noMoreSize: 4,
+        // 空布局
+        empty: {
+          tip: '暂无订单记录'
+        }
+      },
+      // 控制onShow事件是否刷新订单列表
+      canReset: false,
+    }
+  },
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+    // 初始化当前选中的标签
+    this.initCurTab(options)
+    // 注册全局事件订阅: 是否刷新订单列表
+    uni.$on('syncRefresh', canReset => {
+      this.canReset = canReset
+    })
+  },
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+    this.canReset && this.onRefreshList()
+    this.canReset = false
+  },
+  /**
+   * 生命周期函数--监听页面的卸载
+   */
+  onUnload() {
+    // 卸载全局事件订阅
+    uni.$off('syncRefresh')
+  },
+  methods: {
+    // 初始化当前选中的标签
+    initCurTab(options) {
+      // 判断是否已登录
+      this.isLogin = checkLogin()
+      if(!this.isLogin){
+        uni.navigateTo({
+          url:"/pages/login/index"
+        })
+      }
+      // 登录成功后才可以操作
+      const app = this
+      if (options.dataType) {
+        const index = app.tabs.findIndex(item => item.value == options.dataType)
+        app.curTab = index > -1 ? index : 0
+      }
+    },
+    /**
+     * 上拉加载的回调 (页面初始化时也会执行一次)
+     * 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
+     * @param {Object} page
+     */
+    upCallback(page) {
+      const app = this
+      // 设置列表数据
+      app.getOrderList(page.num)
+          .then(list => {
+            const curPageLen = list.data.length
+            const totalSize = list.data.total
+            app.mescroll.endBySize(curPageLen, totalSize)
+          })
+          .catch(() => app.mescroll.endErr())
+    },
+    // 获取订单列表
+    getOrderList(pageNo = 1) {
+      const app = this
+      return new Promise((resolve, reject) => {
+        let status = app.tabs[app.curTab].key
+        let isliCode = uni.getStorageSync("isliCode")
+        let data = {
+          offset:0,
+          limit:pageSize,
+          order_status: status,
+          user_role: 2,
+          user_isli: isliCode,
+          page:pageNo,
+          pageSize:pageSize,
+        }
+        OrderApi.ordquery(data)
+            .then(result => {
+              // 按格式封装
+              let nlist = {data:result.data,total:result.count,current_page:pageNo}
+              // 合并新数据
+              const newList = app.initList(nlist)
+              console.log(newList,"newlist")
+              app.list.data = getMoreListData(newList, app.list, pageNo)
+              resolve(newList)
+            })
+      })
+    },
+    // 初始化订单列表数据
+    initList(newList) {
+      newList.data.forEach(item => {
+        item.total_num = item.order_detail.length
+        item.state_text = this.showStateText(item.staus)
+      })
+      return newList
+    },
+    // 订单状态
+    showStateText(state){
+      let state_txt="";
+      if(state=="1"){
+        state_txt="待付款"
+      }else if(state =="2" ){
+        state_txt="待交付"
+      } else if(state=="3"){
+        state_txt="待结算"
+      } else if(state == "4"){
+        state_txt="已终止"
+      }else{
+        state_txt="已关闭"
+      }
+      return state_txt;
+    },
+
+    // 获取当前标签项的值
+    getTabValue() {
+      return this.tabs[this.curTab].value
+    },
+    // 切换标签项
+    onChangeTab(index) {
+      console.log(this.list)
+      const app = this
+      // 设置当前选中的标签
+      app.curTab = index
+      // 刷新订单列表
+      app.onRefreshList()
+    },
+
+    // 刷新订单列表
+    onRefreshList() {
+      this.list = getEmptyPaginateObj()
+
+      setTimeout(() => {
+        this.mescroll.resetUpScroll()
+      }, 120)
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+// 项目内容
+.order-item {
+  margin: 20rpx auto 20rpx auto;
+  padding: 30rpx 30rpx;
+  width: 94%;
+  box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
+  border-radius: 16rpx;
+  background: #fff;
+}
+
+// 项目顶部
+.item-top {
+  display: flex;
+  justify-content: space-between;
+  font-size: 26rpx;
+  margin-bottom: 20rpx;
+
+  .order-time {
+    color: #777;
+  }
+
+  .state-text {
+    color: $uni-text-color-active;
+  }
+}
+
+// 商品列表
+.goods-list {
+
+  // 商品项
+  .goods-item {
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: 40rpx;
+    border-top: 1rpx #777 solid;
+
+    // 商品图片
+    .goods-image {
+      width: 180rpx;
+      height: 180rpx;
+      flex-basis: calc(33.33% - 10rpx);
+      margin-right: 10rpx;
+
+      .image {
+        display: block;
+        width: 100%;
+        height: 100%;
+        border-radius: 8rpx;
+      }
+    }
+
+    // 商品内容
+    .goods-content {
+      padding-left: 16rpx;
+      padding-top: 16rpx;
+      flex-basis: calc(66.66% - 10rpx);
+      margin-right: 10rpx;
+
+      .goods-title {
+        font-size: 26rpx;
+        max-height: 76rpx;
+      }
+
+      .twoline-hide-price{
+        font-size: 20rpx;
+        color: #979082;
+
+        .twoline-hide-icon{
+          color: #0b0b0b;
+          font-weight: bold;
+        }
+        .twoline-hide-sum{
+          color: red;
+          margin-left: 25%;
+        }
+      }
+
+    }
+
+    // 委托方等信息
+    .goods-props {
+      float: left;
+      height: 30rpx;
+      font-size: 20rpx;
+      margin-top: 10rpx;
+      flex-basis: 100%;
+      color: $uni-text-color-grey;
+    }
+  }
+
+}
+
+</style>

store/modules/user.js

@@ -3,7 +3,7 @@ import storage from '@/utils/storage'
 import * as LoginApi from '@/api/login'
 
 // 登陆成功后执行
-const loginSuccess = (commit, { token, user }) => {
+const loginSuccess = (commit, { token, user }, userObj = {}) => {
   // 过期时间30天
   const expiryTime = 30 * 86400
   // 保存tokne和userId到缓存
@@ -11,6 +11,16 @@ const loginSuccess = (commit, { token, user }) => {
   uni.setStorageSync("accountId",user.accountId)
   storage.set(ACCESS_TOKEN, token, expiryTime)
   storage.set("cuser",user)
+  storage.set("isliCode",userObj.isliCode)
+  let userType = user.userType
+  if (userType == "个人") {
+    userType = 0
+  } else if (userType == "企业") {
+    userType = 1
+  } else if (userType == "服务商") {
+    userType = 2
+  }
+  storage.set("userType",userType)
   // 记录到store全局变量
   commit('SET_TOKEN', token)
   commit('SET_ACCOUNT_ID', user.accountId)
@@ -43,7 +53,8 @@ const user = {
 			  console.log("login ret:",response)
             const result = response.data
 			console.log("user rest:",result)
-            loginSuccess(commit, result)
+            let userObj = JSON.parse(decodeURIComponent(escape(window.atob(result.token.split(".")[1].replace(/-/g, "+").replace(/_/g, "/")))));
+            loginSuccess(commit, result, userObj)
             resolve(response)
           })
           .catch(reject)