fanfan
1 year ago
parent
c21e88f45e
commit
478be92ff3
@ -0,0 +1,46 @@ |
||||
import request from '@/utils/request' |
||||
|
||||
// api地址
|
||||
const api = { |
||||
data: 'sharp.home/data', |
||||
list: 'sharp.goods/list', |
||||
getImage: 'goods/getCommonConfig', |
||||
getImage: 'goods/getCommonConfig', |
||||
getImage: 'goods/getCommonConfig', |
||||
chartsGoodsJing: 'goods/chartsGoodsJing', |
||||
chartsGoodsList: "goods/chartsGoodsList", |
||||
brandList: 'goods/brandList', |
||||
charts: "goods/charts" |
||||
} |
||||
// 新品
|
||||
export const brandList = (data) => { |
||||
return request.get(api.brandList, data) |
||||
} |
||||
// 预售专区
|
||||
export const list = () => { |
||||
return request.get(api.list, {}, { |
||||
load: false |
||||
}) |
||||
} |
||||
// 秒杀活动首页
|
||||
export const data = () => { |
||||
return request.get(api.data, {}, { |
||||
load: false |
||||
}) |
||||
} |
||||
// 轮播
|
||||
export const getImage = (data) => { |
||||
return request.get(api.getImage, data) |
||||
} |
||||
// 排行精选
|
||||
export const chartsGoodsJing = (data) => { |
||||
return request.get(api.chartsGoodsJing, data) |
||||
} |
||||
// 排行精选商品
|
||||
export const chartsGoodsList = (data) => { |
||||
return request.get(api.chartsGoodsList, data) |
||||
} |
||||
// 排行类
|
||||
export const charts = (data) => { |
||||
return request.get(api.charts, data) |
||||
} |
||||
@ -0,0 +1,21 @@ |
||||
import request from '@/utils/request' |
||||
|
||||
// api地址
|
||||
const api = { |
||||
brandList: 'goods/brandList', |
||||
category: 'category/list', |
||||
getImage: 'goods/getCommonConfig', |
||||
} |
||||
|
||||
// 大牌
|
||||
export const brandList = (data) => { |
||||
return request.get(api.brandList, data) |
||||
} |
||||
// 分类
|
||||
export const category = (data) => { |
||||
return request.get(api.category, data) |
||||
} |
||||
// 轮播
|
||||
export const getImage = (data) => { |
||||
return request.get(api.getImage, data) |
||||
} |
||||
@ -1,195 +1,262 @@ |
||||
<template> |
||||
<view class="presale"> |
||||
<template> |
||||
<view class="presale"> |
||||
<view class="presale-hd"> |
||||
<view class="rule" @click="openPage()"></view> |
||||
</view> |
||||
</view> |
||||
<view class="presale-bd"> |
||||
<view class="tab"> |
||||
<u-tabs :list="list" :is-scroll="true" :show-bar="false" active-color="#FFFFFF" bg-color="rgba(255,255,255,0)" inactive-color="rgba(255,255,255,0.62)" v-model="current"></u-tabs> |
||||
<u-tabs :list="menuList" :is-scroll="true" :show-bar="false" active-color="#FFFFFF" |
||||
bg-color="rgba(255,255,255,0)" inactive-color="rgba(255,255,255,0.62)" v-model="current" |
||||
@change='onChosed'></u-tabs> |
||||
</view> |
||||
<view class="title"> |
||||
<image src="/static/news/newPresale-1.png"></image> |
||||
正在进行中 |
||||
<image src="/static/news/newPresale-1.png"></image> |
||||
</view> |
||||
<view class="list"> |
||||
<view class="item" v-for="i in 10" :key="i"> |
||||
<image class="pic" src="/static/home/phone.jpg"></image> |
||||
<view class="list" :isLoading="isLoading"> |
||||
<view class="item" v-for="(item,index) in goodList" :key="index"> |
||||
<image class="pic" :src="item.goods_image"></image> |
||||
<view class="info"> |
||||
<view class="t">一加Ace 2pro超值砍价手机全网通双卡双待</view> |
||||
<view class="d"><u-count-down :timestamp="timestamp" format="HH:mm:ss"></u-count-down><text>后失效</text></view> |
||||
<view class="t">{{item.goods_name}}</view> |
||||
<view class="d"> |
||||
<u-count-down :timestamp="timestamp" format="HH:mm:ss"></u-count-down><text>后失效</text> |
||||
</view> |
||||
<view class="p"> |
||||
<image src="/static/news/newPresale-2.png"></image> |
||||
<view class="s">预约价¥4189</view> |
||||
<view class="s">预约价¥{{item.goods_price_min}}</view> |
||||
<view class="n" @click="goPre(i)">去预约</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import img from "@/static/news/newPeople-bg.png" |
||||
export default { |
||||
data() { |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import img from "@/static/news/newPeople-bg.png" |
||||
import * as Api from '@/api/activity' |
||||
export default { |
||||
data() { |
||||
return { |
||||
timestamp: 24*3600*1000, |
||||
current: 0, |
||||
list: [{ |
||||
name: '精选好物' |
||||
}, { |
||||
name: '吹风机' |
||||
}, { |
||||
name: '空调' |
||||
}, { |
||||
name: '手机' |
||||
}, { |
||||
name: '洗衣机' |
||||
}, { |
||||
name: '冰箱' |
||||
}, { |
||||
name: '彩电' |
||||
}], |
||||
} |
||||
}, |
||||
methods: { |
||||
openPage() { |
||||
timestamp: 24 * 3600 * 1000, |
||||
current: 0, |
||||
isLoading: true, |
||||
goodList: [], |
||||
menuList: [], |
||||
list: [{ |
||||
name: '精选好物' |
||||
}, { |
||||
name: '吹风机' |
||||
}, { |
||||
name: '空调' |
||||
}, { |
||||
name: '手机' |
||||
}, { |
||||
name: '洗衣机' |
||||
}, { |
||||
name: '冰箱' |
||||
}, { |
||||
name: '彩电' |
||||
}], |
||||
} |
||||
}, |
||||
/** |
||||
* 生命周期函数--监听页面显示 |
||||
*/ |
||||
onShow(options) { |
||||
this.getListCharts() |
||||
}, |
||||
methods: { |
||||
getListgoodData(categoryId) { |
||||
let app = this; |
||||
let pamars = { |
||||
store_id: 10001, |
||||
categoryId: categoryId, |
||||
} |
||||
Api.chartsGoodsList(pamars) |
||||
.then(result => { |
||||
app.goodList = result.data.data; |
||||
}) |
||||
.finally(() => app.isLoading = false) |
||||
}, |
||||
onChosed(index) { |
||||
let app = this; |
||||
app.current = index; |
||||
app.getListgoodData(index != 0 ? app.menuList[index].category_id : '') |
||||
}, |
||||
// 分类 |
||||
getListCharts() { |
||||
let app = this |
||||
app.menuList = [] |
||||
let pamars = { |
||||
store_id: 10001 |
||||
} |
||||
Api.charts(pamars) |
||||
.then(result => { |
||||
let obj = { |
||||
name: '精选好物' |
||||
} |
||||
result.data.unshift(obj) |
||||
app.menuList = result.data; |
||||
app.getListgoodData('') |
||||
}) |
||||
.finally(() => app.isLoading = false) |
||||
}, |
||||
goDetail(orderId) { |
||||
uni.navigateTo({ |
||||
url: "/pages/activity/presaleRule" |
||||
url: '/pages/goods/detail?orderId=' + orderId |
||||
}) |
||||
}, |
||||
goPre(i){ |
||||
goDetailMore(categoryId, name) { |
||||
uni.navigateTo({ |
||||
url: "/pages/goods/detail?isPre=true" |
||||
url: '/pages/activity/charts?categoryId=' + categoryId + '&name=' + name |
||||
}) |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.presale{ |
||||
background: #ff7b79 url(@/static/news/newPresale-bg.jpg) center top no-repeat; |
||||
background-size: 100% auto; |
||||
overflow: hidden; |
||||
min-height: 100vh; |
||||
&-hd{ |
||||
position: relative; |
||||
height: 380rpx; |
||||
.rule{ |
||||
width: 100rpx; |
||||
height: 60rpx; |
||||
position: absolute; |
||||
right: 0; |
||||
top: 74rpx; |
||||
z-index: 2; |
||||
} |
||||
} |
||||
&-bd{ |
||||
width: 678rpx; |
||||
margin: 0 auto; |
||||
padding-bottom: 30rpx; |
||||
margin-top: 20rpx; |
||||
.title{ |
||||
width: 100%; |
||||
border-radius: 12rpx 12rpx 0 0; |
||||
height: 78rpx; |
||||
font-size: 28rpx; |
||||
font-weight: 500; |
||||
color: #FFFFFF; |
||||
border: 2px solid #fff; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
image{ |
||||
width: 32rpx; |
||||
height: 13rpx; |
||||
margin: 0 20rpx; |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.presale { |
||||
background: #ff7b79 url(@/static/news/newPresale-bg.jpg) center top no-repeat; |
||||
background-size: 100% auto; |
||||
overflow: hidden; |
||||
min-height: 100vh; |
||||
|
||||
&-hd { |
||||
position: relative; |
||||
height: 380rpx; |
||||
|
||||
.rule { |
||||
width: 100rpx; |
||||
height: 60rpx; |
||||
position: absolute; |
||||
right: 0; |
||||
top: 74rpx; |
||||
z-index: 2; |
||||
} |
||||
} |
||||
.list{ |
||||
background-color: #fff; |
||||
border-radius: 0 0 12rpx 12rpx; |
||||
overflow: hidden; |
||||
.item{ |
||||
padding: 45rpx 45rpx; |
||||
overflow: hidden; |
||||
border-top: 1px solid #F1F1F1; |
||||
&:first-child{ |
||||
border-top-color: #fff; |
||||
} |
||||
|
||||
&-bd { |
||||
width: 678rpx; |
||||
margin: 0 auto; |
||||
padding-bottom: 30rpx; |
||||
margin-top: 20rpx; |
||||
|
||||
.title { |
||||
width: 100%; |
||||
border-radius: 12rpx 12rpx 0 0; |
||||
height: 78rpx; |
||||
font-size: 28rpx; |
||||
font-weight: 500; |
||||
color: #FFFFFF; |
||||
border: 2px solid #fff; |
||||
display: flex; |
||||
image{ |
||||
width: 220rpx; |
||||
height: 220rpx; |
||||
margin-right: 10rpx; |
||||
align-items: center; |
||||
justify-content: center; |
||||
|
||||
image { |
||||
width: 32rpx; |
||||
height: 13rpx; |
||||
margin: 0 20rpx; |
||||
} |
||||
.info{ |
||||
flex: 1; |
||||
max-width: 400rpx; |
||||
.t{ |
||||
height: 80rpx; |
||||
line-height: 40rpx; |
||||
font-size: 32rpx; |
||||
font-weight: 500; |
||||
color: #626262; |
||||
word-break: break-all; |
||||
text-overflow: ellipsis; |
||||
overflow: hidden; |
||||
display: -webkit-box; |
||||
-webkit-box-orient: vertical; |
||||
-webkit-line-clamp: 2; |
||||
} |
||||
|
||||
.list { |
||||
background-color: #fff; |
||||
border-radius: 0 0 12rpx 12rpx; |
||||
overflow: hidden; |
||||
|
||||
.item { |
||||
padding: 45rpx 45rpx; |
||||
overflow: hidden; |
||||
border-top: 1px solid #F1F1F1; |
||||
|
||||
&:first-child { |
||||
border-top-color: #fff; |
||||
} |
||||
.d{ |
||||
display: flex; |
||||
align-items: center; |
||||
height: 60rpx; |
||||
font-size: 32rpx; |
||||
font-weight: 500; |
||||
color: #F94021; |
||||
text{ |
||||
color: #9E9E9E; |
||||
margin-left: 10rpx; |
||||
} |
||||
|
||||
display: flex; |
||||
|
||||
image { |
||||
width: 220rpx; |
||||
height: 220rpx; |
||||
margin-right: 10rpx; |
||||
} |
||||
.p{ |
||||
width: 396rpx; |
||||
height: 88rpx; |
||||
position: relative; |
||||
image{ |
||||
width: 396rpx; |
||||
height: 88rpx; |
||||
|
||||
.info { |
||||
flex: 1; |
||||
max-width: 400rpx; |
||||
|
||||
.t { |
||||
height: 80rpx; |
||||
line-height: 40rpx; |
||||
font-size: 32rpx; |
||||
font-weight: 500; |
||||
color: #626262; |
||||
word-break: break-all; |
||||
text-overflow: ellipsis; |
||||
overflow: hidden; |
||||
display: -webkit-box; |
||||
-webkit-box-orient: vertical; |
||||
-webkit-line-clamp: 2; |
||||
} |
||||
.s{ |
||||
width: 240rpx; |
||||
line-height: 88rpx; |
||||
position: absolute; |
||||
text-align: center; |
||||
left: 0; |
||||
top: 0; |
||||
z-index: 2; |
||||
font-size: 32rpx; |
||||
font-weight: 500; |
||||
color: #FF584D; |
||||
|
||||
.d { |
||||
display: flex; |
||||
align-items: center; |
||||
height: 60rpx; |
||||
font-size: 32rpx; |
||||
font-weight: 500; |
||||
color: #F94021; |
||||
|
||||
text { |
||||
color: #9E9E9E; |
||||
margin-left: 10rpx; |
||||
} |
||||
} |
||||
.n{ |
||||
width: 150rpx; |
||||
line-height: 88rpx; |
||||
text-align: center; |
||||
position: absolute; |
||||
right: 0; |
||||
top: 0; |
||||
z-index: 2; |
||||
font-size: 32rpx; |
||||
font-weight: 500; |
||||
color: #FFFFFF; |
||||
|
||||
.p { |
||||
width: 396rpx; |
||||
height: 88rpx; |
||||
position: relative; |
||||
|
||||
image { |
||||
width: 396rpx; |
||||
height: 88rpx; |
||||
} |
||||
|
||||
.s { |
||||
width: 240rpx; |
||||
line-height: 88rpx; |
||||
position: absolute; |
||||
text-align: center; |
||||
left: 0; |
||||
top: 0; |
||||
z-index: 2; |
||||
font-size: 32rpx; |
||||
font-weight: 500; |
||||
color: #FF584D; |
||||
} |
||||
|
||||
.n { |
||||
width: 150rpx; |
||||
line-height: 88rpx; |
||||
text-align: center; |
||||
position: absolute; |
||||
right: 0; |
||||
top: 0; |
||||
z-index: 2; |
||||
font-size: 32rpx; |
||||
font-weight: 500; |
||||
color: #FFFFFF; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
</style> |
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,523 @@ |
||||
<template> |
||||
<view class="container" :style="appThemeStyle"> |
||||
<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="appTheme.mainBg" :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.create_time }}</text> |
||||
</view> |
||||
<view class="item-top-right"> |
||||
<text class="state-text" :style="{{(item.pay_status == PayStatusEnum.PENDING.value?'color:#05C669':'color:#FF2F2F')}}">{{ item.state_text }}</text> |
||||
</view> |
||||
</view> |
||||
<!-- 商品列表 --> |
||||
<view class="goods-list" @click="handleTargetDetail(item.order_id)"> |
||||
<view class="goods-item" v-for="(goods, idx) in item.goods" :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></view> |
||||
<view class="goods-props clearfix"> |
||||
<view class="goods-props-item" v-for="(props, idx) in goods.goods_props" :key="idx"> |
||||
<text>{{ props.value.name }}</text> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<!-- 交易信息 --> |
||||
<view class="goods-trade"> |
||||
<view class="goods-price"> |
||||
<text class="unit">￥</text> |
||||
<text class="value">{{ goods.is_user_grade ? goods.grade_goods_price : goods.goods_price }}</text> |
||||
</view> |
||||
<view class="goods-num"> |
||||
<text>×{{ goods.total_num }}</text> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<!-- 订单合计 --> |
||||
<view class="order-total"> |
||||
<text>共{{ item.total_num }}件商品，总金额</text> |
||||
<text class="unit">￥</text> |
||||
<text class="money">{{ item.pay_price }}</text> |
||||
</view> |
||||
<!-- 订单操作 --> |
||||
<view v-if="item.order_status != OrderStatusEnum.CANCELLED.value" class="order-handle"> |
||||
<view class="btn-group clearfix"> |
||||
<!-- 未支付取消订单 --> |
||||
<block v-if="item.pay_status == PayStatusEnum.PENDING.value"> |
||||
<view class="btn-item" @click="onCancel(item.order_id)">取消</view> |
||||
</block> |
||||
<!-- 已支付进行中的订单 --> |
||||
<block v-if="item.order_status != OrderStatusEnum.APPLY_CANCEL.value"> |
||||
<block v-if="item.pay_status == PayStatusEnum.SUCCESS.value && item.delivery_status == DeliveryStatusEnum.NOT_DELIVERED.value"> |
||||
<view class="btn-item" @click="onCancel(item.order_id)">申请取消</view> |
||||
</block> |
||||
<!-- 订单核销码 --> |
||||
<block v-if="item.pay_status == PayStatusEnum.SUCCESS.value && item.delivery_type == DeliveryTypeEnum.EXTRACT.value |
||||
&& item.delivery_status == DeliveryStatusEnum.NOT_DELIVERED.value"> |
||||
<view class="btn-item active" @click="onExtractQRCode(item.order_id)"> |
||||
<text class="iconfont icon-qr-extract"></text> |
||||
<text class="m-l-10">核销码</text> |
||||
</view> |
||||
</block> |
||||
</block> |
||||
<!-- 已申请取消 --> |
||||
<view v-else class="f-28 col-8">取消申请中</view> |
||||
<!-- 未支付的订单 --> |
||||
<block v-if="item.pay_status == PayStatusEnum.PENDING.value"> |
||||
<view class="btn-item active" @click="onPay(item.order_id)">去支付</view> |
||||
</block> |
||||
<!-- 确认收货 --> |
||||
<block v-if="item.delivery_status == DeliveryStatusEnum.DELIVERED.value && item.receipt_status == ReceiptStatusEnum.NOT_RECEIVED.value"> |
||||
<view class="btn-item active" @click="onReceipt(item.order_id)">确认收货</view> |
||||
</block> |
||||
<!-- 订单评价 --> |
||||
<block v-if="item.order_status == OrderStatusEnum.COMPLETED.value && item.is_comment == 0"> |
||||
<view class="btn-item" @click="handleTargetComment(item.order_id)">评价</view> |
||||
</block> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</mescroll-body> |
||||
<!-- 核销二维码弹窗 --> |
||||
<u-popup v-model="showQRCodePopup" mode="center" border-radius="26" :closeable="true"> |
||||
<view class="qrcode-popup"> |
||||
<view class="title">自提核销二维码</view> |
||||
<view class="pop-content"> |
||||
<image v-if="qrcodeImage" class="image" :src="qrcodeImage"></image> |
||||
</view> |
||||
</view> |
||||
</u-popup> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import { |
||||
DeliveryStatusEnum, |
||||
DeliveryTypeEnum, |
||||
OrderStatusEnum, |
||||
PayStatusEnum, |
||||
ReceiptStatusEnum |
||||
} from '@/common/enum/order' |
||||
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins' |
||||
import { getEmptyPaginateObj, getMoreListData } from '@/core/app' |
||||
import * as OrderApi from '@/api/order' |
||||
|
||||
// 每页记录数量 |
||||
const pageSize = 15 |
||||
|
||||
// tab栏数据 |
||||
const tabs = [{ |
||||
name: `全部`, |
||||
value: 'all' |
||||
}, { |
||||
name: `待支付`, |
||||
value: 'payment' |
||||
}, { |
||||
name: `待发货`, |
||||
value: 'delivery' |
||||
}, { |
||||
name: `待收货`, |
||||
value: 'received' |
||||
}, { |
||||
name: `待评价`, |
||||
value: 'comment' |
||||
}] |
||||
|
||||
export default { |
||||
mixins: [MescrollMixin], |
||||
data() { |
||||
return { |
||||
// 枚举类 |
||||
DeliveryStatusEnum, |
||||
DeliveryTypeEnum, |
||||
OrderStatusEnum, |
||||
PayStatusEnum, |
||||
ReceiptStatusEnum, |
||||
|
||||
// 当前页面参数 |
||||
options: { dataType: 'all' }, |
||||
// tab栏数据 |
||||
tabs, |
||||
// 当前标签索引 |
||||
curTab: 0, |
||||
// 订单列表数据 |
||||
list: getEmptyPaginateObj(), |
||||
|
||||
// 上拉加载配置 |
||||
upOption: { |
||||
// 首次自动执行 |
||||
auto: true, |
||||
// 每页数据的数量; 默认10 |
||||
page: { size: pageSize }, |
||||
// 数量要大于4条才显示无更多数据 |
||||
noMoreSize: 4, |
||||
// 空布局 |
||||
empty: { |
||||
tip: '亲，暂无订单记录' |
||||
} |
||||
}, |
||||
// 控制onShow事件是否刷新订单列表 |
||||
canReset: false, |
||||
// 核销二维码弹窗 |
||||
showQRCodePopup: false, |
||||
// 核销二维码图片url (通过后端获取) |
||||
qrcodeImage: '', |
||||
} |
||||
}, |
||||
|
||||
/** |
||||
* 生命周期函数--监听页面加载 |
||||
*/ |
||||
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) { |
||||
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) => { |
||||
OrderApi.list({ dataType: app.getTabValue(), page: pageNo }, { load: false }) |
||||
.then(result => { |
||||
// 合并新数据 |
||||
const newList = app.initList(result.data.list) |
||||
app.list.data = getMoreListData(newList, app.list, pageNo) |
||||
resolve(newList) |
||||
}) |
||||
}) |
||||
}, |
||||
|
||||
// 初始化订单列表数据 |
||||
initList(newList) { |
||||
newList.data.forEach(item => { |
||||
item.total_num = 0 |
||||
item.goods.forEach(goods => { |
||||
item.total_num += goods.total_num |
||||
}) |
||||
}) |
||||
return newList |
||||
}, |
||||
|
||||
// 获取当前标签项的值 |
||||
getTabValue() { |
||||
return this.tabs[this.curTab].value |
||||
}, |
||||
|
||||
// 切换标签项 |
||||
onChangeTab(index) { |
||||
const app = this |
||||
// 设置当前选中的标签 |
||||
app.curTab = index |
||||
// 刷新订单列表 |
||||
app.onRefreshList() |
||||
}, |
||||
|
||||
// 刷新订单列表 |
||||
onRefreshList() { |
||||
this.list = getEmptyPaginateObj() |
||||
setTimeout(() => { |
||||
this.mescroll.resetUpScroll() |
||||
}, 120) |
||||
}, |
||||
|
||||
// 取消订单 |
||||
onCancel(orderId) { |
||||
const app = this |
||||
uni.showModal({ |
||||
title: '友情提示', |
||||
content: '确认要取消该订单吗？', |
||||
success(o) { |
||||
if (o.confirm) { |
||||
OrderApi.cancel(orderId) |
||||
.then(result => { |
||||
// 显示成功信息 |
||||
app.$toast(result.message) |
||||
// 刷新订单列表 |
||||
app.onRefreshList() |
||||
}) |
||||
} |
||||
} |
||||
}); |
||||
}, |
||||
|
||||
// 确认收货 |
||||
onReceipt(orderId) { |
||||
const app = this |
||||
uni.showModal({ |
||||
title: '友情提示', |
||||
content: '确认收到商品了吗？', |
||||
success(o) { |
||||
if (o.confirm) { |
||||
OrderApi.receipt(orderId) |
||||
.then(result => { |
||||
// 显示成功信息 |
||||
app.$success(result.message) |
||||
// 刷新订单列表 |
||||
app.onRefreshList() |
||||
}) |
||||
} |
||||
} |
||||
}); |
||||
}, |
||||
|
||||
// 获取核销二维码 |
||||
onExtractQRCode(orderId) { |
||||
const app = this |
||||
OrderApi.extractQrcode(orderId, { channel: app.platform }) |
||||
.then(result => { |
||||
app.qrcodeImage = result.data.qrcode |
||||
app.showQRCodePopup = true |
||||
}) |
||||
}, |
||||
|
||||
// 点击去支付 |
||||
onPay(orderId) { |
||||
this.$navTo('pages/checkout/cashier/index', { orderId }) |
||||
}, |
||||
|
||||
// 跳转到订单详情页 |
||||
handleTargetDetail(orderId) { |
||||
this.$navTo('pages/order/detail', { orderId }) |
||||
}, |
||||
|
||||
// 跳转到订单评价页 |
||||
handleTargetComment(orderId) { |
||||
this.$navTo('pages/order/comment/index', { orderId }) |
||||
} |
||||
|
||||
}, |
||||
|
||||
} |
||||
</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: 40rpx; |
||||
|
||||
.order-time { |
||||
color: #777; |
||||
} |
||||
|
||||
.state-text { |
||||
color: $main-bg; |
||||
} |
||||
} |
||||
|
||||
// 商品列表 |
||||
.goods-list { |
||||
|
||||
// 商品项 |
||||
.goods-item { |
||||
display: flex; |
||||
margin-bottom: 40rpx; |
||||
|
||||
// 商品图片 |
||||
.goods-image { |
||||
width: 180rpx; |
||||
height: 180rpx; |
||||
|
||||
.image { |
||||
display: block; |
||||
width: 100%; |
||||
height: 100%; |
||||
border-radius: 8rpx; |
||||
} |
||||
} |
||||
|
||||
// 商品内容 |
||||
.goods-content { |
||||
flex: 1; |
||||
padding-left: 16rpx; |
||||
padding-top: 16rpx; |
||||
|
||||
.goods-title { |
||||
font-size: 26rpx; |
||||
max-height: 76rpx; |
||||
} |
||||
|
||||
.goods-props { |
||||
margin-top: 14rpx; |
||||
height: 40rpx; |
||||
color: #ababab; |
||||
font-size: 24rpx; |
||||
overflow: hidden; |
||||
|
||||
.goods-props-item { |
||||
display: inline-block; |
||||
margin-right: 14rpx; |
||||
padding: 4rpx 16rpx; |
||||
border-radius: 12rpx; |
||||
background-color: #F5F5F5; |
||||
width: auto; |
||||
} |
||||
} |
||||
|
||||
|
||||
} |
||||
|
||||
// 交易信息 |
||||
.goods-trade { |
||||
padding-top: 16rpx; |
||||
width: 150rpx; |
||||
text-align: right; |
||||
color: $uni-text-color-grey; |
||||
font-size: 26rpx; |
||||
|
||||
.goods-price { |
||||
vertical-align: bottom; |
||||
margin-bottom: 16rpx; |
||||
|
||||
.unit { |
||||
margin-right: -2rpx; |
||||
font-size: 24rpx; |
||||
} |
||||
} |
||||
} |
||||
|
||||
} |
||||
|
||||
} |
||||
|
||||
// 订单合计 |
||||
.order-total { |
||||
font-size: 26rpx; |
||||
vertical-align: bottom; |
||||
text-align: right; |
||||
height: 40rpx; |
||||
margin-bottom: 30rpx; |
||||
|
||||
.unit { |
||||
margin-left: 8rpx; |
||||
margin-right: -2rpx; |
||||
font-size: 26rpx; |
||||
} |
||||
|
||||
.money { |
||||
font-size: 28rpx; |
||||
} |
||||
} |
||||
|
||||
// 订单操作 |
||||
.order-handle { |
||||
.btn-group { |
||||
|
||||
.btn-item { |
||||
border-radius: 10rpx; |
||||
padding: 8rpx 20rpx; |
||||
margin-left: 15rpx; |
||||
font-size: 26rpx; |
||||
float: right; |
||||
color: #383838; |
||||
border: 1rpx solid #a8a8a8; |
||||
|
||||
&:last-child { |
||||
margin-left: 0; |
||||
} |
||||
|
||||
&.active { |
||||
color: $main-bg; |
||||
border: 1rpx solid $main-bg; |
||||
} |
||||
} |
||||
|
||||
} |
||||
|
||||
} |
||||
|
||||
// 弹出层 - 核销二维码 |
||||
.qrcode-popup { |
||||
padding: 36rpx 30rpx; |
||||
|
||||
.title { |
||||
font-size: 30rpx; |
||||
margin-bottom: 26rpx; |
||||
font-weight: bold; |
||||
text-align: center; |
||||
} |
||||
|
||||
.pop-content { |
||||
min-height: 260rpx; |
||||
padding: 0 10rpx; |
||||
|
||||
.image { |
||||
display: block; |
||||
width: 510rpx; |
||||
height: 510rpx; |
||||
} |
||||
|
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,28 @@ |
||||
{ |
||||
"appid": "wxdcf7d5820d7530cd", |
||||
"compileType": "miniprogram", |
||||
"libVersion": "3.3.3", |
||||
"packOptions": { |
||||
"ignore": [], |
||||
"include": [] |
||||
}, |
||||
"setting": { |
||||
"coverView": true, |
||||
"es6": true, |
||||
"postcss": true, |
||||
"minified": true, |
||||
"enhance": true, |
||||
"showShadowRootInWxmlPanel": true, |
||||
"packNpmRelationList": [], |
||||
"babelSetting": { |
||||
"ignore": [], |
||||
"disablePlugins": [], |
||||
"outputPath": "" |
||||
} |
||||
}, |
||||
"condition": {}, |
||||
"editorSetting": { |
||||
"tabIndent": "auto", |
||||
"tabSize": 4 |
||||
} |
||||
} |
||||
@ -0,0 +1,7 @@ |
||||
{ |
||||
"description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html", |
||||
"projectname": "yanzong_qianduan", |
||||
"setting": { |
||||
"compileHotReLoad": true |
||||
} |
||||
} |
||||
Loading…
Reference in new issue