|
|
@@ -2,43 +2,19 @@
|
|
|
<view class="container">
|
|
|
<view class="header-box">
|
|
|
<view class="search-box">
|
|
|
- <u-search
|
|
|
- v-model="searchForm.keyword"
|
|
|
- :clearabled="true"
|
|
|
- placeholder="搜索您想要的内容"
|
|
|
- @search="onSearchConfirm"
|
|
|
- @custom="onSearchConfirm"
|
|
|
- ></u-search>
|
|
|
+ <u-search v-model="searchForm.keyword" :clearabled="true" placeholder="搜索您想要的内容"
|
|
|
+ @search="onSearchConfirm" @custom="onSearchConfirm"></u-search>
|
|
|
</view>
|
|
|
<view class="tab-box" style="padding: 40rpx 0 35rpx;">
|
|
|
- <u-tabs
|
|
|
- name="label"
|
|
|
- :list="searchType"
|
|
|
- :is-scroll="true"
|
|
|
- v-model="searchForm.typeCurrent"
|
|
|
- @change="onSearchTypeChange"
|
|
|
- font-size="32"
|
|
|
- inactive-color="#000000"
|
|
|
- bg-color="'rgb(141, 204, 255)'"
|
|
|
- active-color="#ffffff"
|
|
|
-
|
|
|
- :bar-style="{'background-color': '#2979ff'}"
|
|
|
- :active-item-style="{'background-color': '#2979ff', 'border-radius':'30rpx'}"
|
|
|
- :gutter="40"
|
|
|
- height="55"
|
|
|
- :show-bar="false"
|
|
|
- duration="0"
|
|
|
- ></u-tabs>
|
|
|
+ <u-tabs name="label" :list="searchType" :is-scroll="true" v-model="searchForm.typeCurrent"
|
|
|
+ @change="onSearchTypeChange" font-size="32" inactive-color="#000000" bg-color="'rgb(141, 204, 255)'"
|
|
|
+ active-color="#ffffff" :bar-style="{'background-color': '#2979ff'}"
|
|
|
+ :active-item-style="{'background-color': '#2979ff', 'border-radius':'30rpx'}" :gutter="40"
|
|
|
+ height="55" :show-bar="false" duration="0"></u-tabs>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <u-empty
|
|
|
- mode="data"
|
|
|
- v-if="list.length === 0"
|
|
|
- iconSize="120"
|
|
|
- textSize="58"
|
|
|
- text="暂无数据"
|
|
|
- margin-top="400"
|
|
|
- >
|
|
|
+ <!-- <view class="header-content"></view> -->
|
|
|
+ <u-empty mode="data" v-if="list.length === 0" iconSize="120" textSize="58" text="暂无数据" margin-top="400">
|
|
|
</u-empty>
|
|
|
<view class="list-box">
|
|
|
<view class="list-item-box" v-for="item in list" :key="item.id" @click="onItem(item)">
|
|
|
@@ -89,16 +65,27 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
- import { ref } from 'vue'
|
|
|
- import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
|
|
|
- import { query, byId } from '@/api/order.js'
|
|
|
- import { msgError, msgSuccess } from '@/utils/common'
|
|
|
-
|
|
|
+ import {
|
|
|
+ ref
|
|
|
+ } from 'vue'
|
|
|
+ import {
|
|
|
+ onLoad,
|
|
|
+ onReachBottom,
|
|
|
+ onPullDownRefresh
|
|
|
+ } from '@dcloudio/uni-app'
|
|
|
+ import {
|
|
|
+ query,
|
|
|
+ byId
|
|
|
+ } from '@/api/order.js'
|
|
|
+ import {
|
|
|
+ msgError,
|
|
|
+ msgSuccess
|
|
|
+ } from '@/utils/common'
|
|
|
+
|
|
|
const searchInputStyle = {
|
|
|
backgroundColor: '#E5E5E5'
|
|
|
}
|
|
|
- const searchType = [
|
|
|
- {
|
|
|
+ const searchType = [{
|
|
|
label: '全部',
|
|
|
value: null
|
|
|
},
|
|
|
@@ -130,7 +117,7 @@
|
|
|
pageNumber: 1,
|
|
|
pageSize: 10
|
|
|
})
|
|
|
-
|
|
|
+
|
|
|
const list = ref([
|
|
|
// {
|
|
|
// id: '01',
|
|
|
@@ -143,6 +130,7 @@
|
|
|
// status: 1
|
|
|
// },
|
|
|
])
|
|
|
+
|
|
|
function onItem(order) {
|
|
|
if (order.status === '2') {
|
|
|
uni.showToast({
|
|
|
@@ -176,18 +164,19 @@
|
|
|
uni.hideLoading()
|
|
|
})
|
|
|
}
|
|
|
+
|
|
|
function onPay(order) {
|
|
|
wx.requestPayment({
|
|
|
- timeStamp: order.prepay.timeStamp,
|
|
|
- nonceStr: order.prepay.nonceStr,
|
|
|
- package: order.prepay.package,
|
|
|
- signType: order.prepay.signType,
|
|
|
- paySign: order.prepay.paySign,
|
|
|
- success (res) {
|
|
|
+ timeStamp: order.prepay.timeStamp,
|
|
|
+ nonceStr: order.prepay.nonceStr,
|
|
|
+ package: order.prepay.package,
|
|
|
+ signType: order.prepay.signType,
|
|
|
+ paySign: order.prepay.paySign,
|
|
|
+ success(res) {
|
|
|
msgSuccess('支付成功')
|
|
|
onSearch()
|
|
|
},
|
|
|
- fail (res) {
|
|
|
+ fail(res) {
|
|
|
// console.log('支付失败', res)
|
|
|
const errMsg = res.errMsg
|
|
|
if (errMsg.indexOf('fail cancel')) {
|
|
|
@@ -196,20 +185,20 @@
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
function onSearchConfirm() {
|
|
|
searchForm.value.pageNumber = 1
|
|
|
pageNum.value = 1
|
|
|
onSearch()
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
function onSearchClear() {
|
|
|
searchForm.value.keyword = null
|
|
|
searchForm.value.pageNumber = 1
|
|
|
pageNum.value = 1
|
|
|
onSearch()
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
function onSearch() {
|
|
|
loadMoreStatus.value = 'more'
|
|
|
query(searchForm.value).then(res => {
|
|
|
@@ -221,12 +210,12 @@
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
function onSearchTypeChange(val) {
|
|
|
searchForm.value.type = searchType[val].value
|
|
|
onSearchConfirm()
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
// 前往发票申请
|
|
|
function onToInvoiceApplication() {
|
|
|
uni.navigateTo({
|
|
|
@@ -251,7 +240,7 @@
|
|
|
uni.stopPullDownRefresh()
|
|
|
})
|
|
|
})
|
|
|
-
|
|
|
+
|
|
|
onReachBottom(async () => {
|
|
|
if (loadMoreStatus.value === 'noMore') {
|
|
|
uni.showToast({
|
|
|
@@ -274,7 +263,7 @@
|
|
|
list.value.push(...res.data)
|
|
|
loadMoreStatus.value = 'more'
|
|
|
visualLoadMore.value = false
|
|
|
- }
|
|
|
+ }
|
|
|
} else {
|
|
|
loadMoreStatus.value = 'noMore'
|
|
|
visualLoadMore.value = true
|
|
|
@@ -286,22 +275,24 @@
|
|
|
}
|
|
|
})
|
|
|
})
|
|
|
-
|
|
|
+
|
|
|
onLoad(() => {
|
|
|
onSearch()
|
|
|
})
|
|
|
</script>
|
|
|
<style>
|
|
|
- ::v-deep(.u-tab-item){
|
|
|
+ ::v-deep(.u-tab-item) {
|
|
|
margin-right: 20rpx;
|
|
|
}
|
|
|
- ::v-deep(.u-empty){
|
|
|
+
|
|
|
+ ::v-deep(.u-empty) {
|
|
|
height: auto !important;
|
|
|
}
|
|
|
</style>
|
|
|
<style lang="scss" scoped>
|
|
|
$certificate-width: 220rpx;
|
|
|
$certificate-height: 300rpx;
|
|
|
+
|
|
|
.container {
|
|
|
height: 100vh;
|
|
|
width: 100vw;
|
|
|
@@ -311,20 +302,24 @@
|
|
|
background: -o-linear-gradient(90deg, rgb(141, 204, 255) 10%, rgb(247, 247, 247) 30%);
|
|
|
background: -ms-linear-gradient(90deg, rgb(141, 204, 255) 10%, rgb(247, 247, 247) 30%);
|
|
|
background: linear-gradient(180deg, rgb(141, 204, 255) 10%, rgb(247, 247, 247) 30%);
|
|
|
-
|
|
|
+
|
|
|
+ $header-bg-color: #8dccff;
|
|
|
+ // $transition-duration: 0.4s;
|
|
|
.header-box {
|
|
|
- padding: 0 20rpx;
|
|
|
- // background-color: rgb(141, 204, 255);
|
|
|
+ padding: 0 20px;
|
|
|
+ // 应用顶部磁吸效果
|
|
|
@include topMagnet();
|
|
|
+ // 初始状态：透明背景
|
|
|
+ background-color: $header-bg-color;
|
|
|
}
|
|
|
-
|
|
|
.search-box {
|
|
|
padding-top: 10rpx;
|
|
|
+
|
|
|
// margin-bottom: 20rpx;
|
|
|
::v-deep(.u-search) {
|
|
|
// background-color: #e5e5e5;
|
|
|
border-radius: 50rpx;
|
|
|
-
|
|
|
+
|
|
|
.u-action {
|
|
|
width: 18%;
|
|
|
background-color: $uni-color-primary;
|
|
|
@@ -338,9 +333,10 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.list-box {
|
|
|
padding: 0 20rpx;
|
|
|
+
|
|
|
.list-item-box {
|
|
|
padding: 40rpx 20rpx;
|
|
|
margin: 35rpx 0;
|
|
|
@@ -348,51 +344,67 @@
|
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
|
|
background-color: #fff;
|
|
|
border-radius: 20rpx;
|
|
|
- &:first-child{
|
|
|
- padding: 0 20rpx 40rpx;
|
|
|
+
|
|
|
+ &:first-child {
|
|
|
+ // padding: 0 20rpx 40rpx;
|
|
|
+ margin-top: 0;
|
|
|
}
|
|
|
+
|
|
|
&:active {
|
|
|
background-color: $uni-bg-color-hover;
|
|
|
}
|
|
|
+
|
|
|
.title-box {
|
|
|
font-size: 28rpx;
|
|
|
font-weight: bold;
|
|
|
margin-bottom: 20rpx;
|
|
|
@include text-overflow()
|
|
|
}
|
|
|
+
|
|
|
.main-box {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
// padding-left: 20rpx;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
.info-box {
|
|
|
// width: 50%;
|
|
|
width: 100%;
|
|
|
flex: 1 1 auto;
|
|
|
+
|
|
|
.info-item-box {
|
|
|
display: flex;
|
|
|
font-size: 22rpx;
|
|
|
color: $uni-text-color-grey;
|
|
|
line-height: 40rpx;
|
|
|
+
|
|
|
.label {
|
|
|
+ flex: 0 0 auto;
|
|
|
// width: 80rpx;
|
|
|
margin-right: 10rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.price-box {
|
|
|
- flex: 0 0 auto;
|
|
|
+ // flex: 0 0 auto;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
display: flex;
|
|
|
align-items: flex-end;
|
|
|
text-align: right;
|
|
|
color: $uni-color-error;
|
|
|
font-size: $uni-title-font-size-3;
|
|
|
font-weight: bold;
|
|
|
+
|
|
|
.button {
|
|
|
background-color: #CCCCCC;
|
|
|
color: $uni-text-color-inverse;
|
|
|
padding: 6rpx 25rpx;
|
|
|
border-radius: $uni-card-border-radius;
|
|
|
}
|
|
|
+
|
|
|
.error {
|
|
|
background-color: $uni-color-error;
|
|
|
}
|
|
|
@@ -400,11 +412,12 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.buttom-block {
|
|
|
- height: 100rpx;
|
|
|
+ height: 100rpx;
|
|
|
padding-bottom: env(5rpx + safe-area-inset-bottom, 0);
|
|
|
}
|
|
|
+
|
|
|
.bottom-box {
|
|
|
text-align: center;
|
|
|
font-size: $uni-title-font-size-2;
|
|
|
@@ -412,6 +425,7 @@
|
|
|
position: fixed;
|
|
|
bottom: 0;
|
|
|
width: 100%;
|
|
|
+
|
|
|
.button {
|
|
|
width: 100%;
|
|
|
height: 100rpx;
|
|
|
@@ -419,6 +433,7 @@
|
|
|
color: $uni-color-primary;
|
|
|
letter-spacing: 2rpx;
|
|
|
border: 1rpx solid #E9E9E9;
|
|
|
+
|
|
|
&:active {
|
|
|
background-color: $uni-bg-color-hover;
|
|
|
}
|
littleblue55