xioayue
/
why_in_h5
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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

master
wanghongjun 2 years ago
parent
fe9fc8e467
commit
2026c12166
5 changed files with 760 additions and 9 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 16
      pages.json
  2. 38
      pages/user/index.vue
  3. 350
      pages/user/order/buyOrder.vue
  4. 350
      pages/user/order/byOrder.vue
  5. 15
      store/modules/user.js

16
pages.json
View File

@ -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" :

38
pages/user/index.vue
View File

@ -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>
@ -225,11 +225,35 @@
})
},
//我的认证
mycertinfo(){
this.$navTo('pages/user/mycertinfo/mycertinfo')
},
//我的认证
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() {

350
pages/user/order/buyOrder.vue
View File

@ -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>

350
pages/user/order/byOrder.vue
View File

@ -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>

15
store/modules/user.js
View File

@ -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)

Write Preview
Loading…
Cancel
Save