377 lines
8.9 KiB
Vue
377 lines
8.9 KiB
Vue
<template>
|
||
<view class="content">
|
||
<!-- 占位符导航栏 -->
|
||
<navseat :opacity='opacity' :title='titlename' :titleshow='true'></navseat>
|
||
<view class="onecontent">
|
||
<view class="onecontentabsolute"></view>
|
||
</view>
|
||
<view class="towcontent">
|
||
<view class="towcontentone">
|
||
<image class="towcontentoneimage" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/mrmd1.png"
|
||
mode="aspectFill"></image>
|
||
<view class="towcontentonebox">
|
||
<image class="towcontentoneboximage"
|
||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/mrmd2.png" mode="aspectFill">
|
||
</image>
|
||
<view class="towcontentoneboxswiper">
|
||
<swiper class="swiper" circular :autoplay='true' :vertical='true' display-multiple-items="4"
|
||
:interval="'3000'">
|
||
<swiper-item class="swiperitem" v-for="(item,index) in orderfindWiningUserlist"
|
||
:key="index">
|
||
<view class="swiper-item">{{item.userName}}* 免单{{item.orderAmount}}元订单号：{{item.orderNo}}
|
||
</view>
|
||
</swiper-item>
|
||
|
||
</swiper>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="towcontentoness">
|
||
<view class="towcontentonebox_box">
|
||
订单数：{{total}}
|
||
</view>
|
||
<view class="towcontentonebox">
|
||
<view class="towcontentoneboxswiper">
|
||
<view class="swiper-item" style="margin-bottom: 32rpx;">
|
||
<view class="swiper_itemone">
|
||
免单状态
|
||
</view>
|
||
<view class="swiper_itemtow">
|
||
订单号
|
||
</view>
|
||
<view class="swiper_itemthere">
|
||
金额
|
||
</view>
|
||
</view>
|
||
<view class="swiperitem" v-for="(item,index) in ordermineWinnerList" :key="index">
|
||
<view class="swiper-item" style="margin-top: 32rpx;">
|
||
<view class="swiper_itemone">
|
||
{{item.isRefund == true ? '已免单':'待免单'}}
|
||
</view>
|
||
<view class="swiper_itemtow">
|
||
{{item.orderNo}}
|
||
</view>
|
||
<view class="swiper_itemthere">
|
||
{{item.orderAmount}}元
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- <swiper class="swiper" circular :autoplay='true' :vertical='true' interval="3000"
|
||
display-multiple-items="4">
|
||
<swiper-item class="swiperitem" v-for="(item,index) in orderfindWiningUserlist"
|
||
:key="index">
|
||
<view class="swiper-item">
|
||
<view class="swiper_itemone">
|
||
{{item.orderAmount}}元
|
||
</view>
|
||
<view class="swiper_itemtow">
|
||
{{item.orderNo}}
|
||
</view>
|
||
<view class="swiper_itemthere">
|
||
{{item.isRefund == true ? '已免单':'待免单'}}
|
||
</view>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="towcontenttow">
|
||
注：每笔订单完成后30天内均有机会获得免单
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
forEach
|
||
} from 'lodash';
|
||
import navseat from '@/components/navseat.vue'
|
||
export default {
|
||
components: {
|
||
navseat
|
||
},
|
||
data() {
|
||
return {
|
||
titlename: '',
|
||
opacity: false,
|
||
orderfindWiningUserlist: [],
|
||
ordermineWinnerList: [],
|
||
form: {
|
||
address: '', //地址
|
||
type: '', //品类
|
||
orderBy: '', //1.理我最近 2.销量优先 3.价格优先
|
||
other: '', //附近1KM 1选中 0不选中
|
||
page: 1, //页数
|
||
size: 10, //页容量
|
||
status: 'loadmore'
|
||
},
|
||
total:0
|
||
};
|
||
},
|
||
onLoad(e) {
|
||
this.orderfindWiningUser()
|
||
this.ordermineWinnerEvent()
|
||
let _this = this
|
||
uni.getStorage({
|
||
key: 'itemData',
|
||
success: function(res) {
|
||
_this.titlename = res.data.name
|
||
}
|
||
});
|
||
},
|
||
onReachBottom() {
|
||
this.ordermineWinnerEvent()
|
||
},
|
||
onPageScroll(e) {
|
||
if (e.scrollTop <= 44) { //搜索导航栏
|
||
this.opacity = false
|
||
} else {
|
||
this.opacity = true
|
||
}
|
||
},
|
||
methods: {
|
||
|
||
cut(str, firstStr, lastStr) {
|
||
let start = str.indexOf(firstStr);
|
||
let end = str.lastIndexOf(lastStr);
|
||
return str.slice(start, end + 1); //slice方法截取的部分不包括第二参数所在位置
|
||
},
|
||
|
||
async ordermineWinnerEvent() {
|
||
let res = await this.api.ordermineWinner({
|
||
userId: uni.getStorageSync('userInfo').id,
|
||
page: this.form.page,
|
||
size: this.form.size
|
||
})
|
||
if(res.code ==0){
|
||
this.total = res.data.total
|
||
if(this.form.page==1){
|
||
this.ordermineWinnerList = res.data.list
|
||
}else{
|
||
this.ordermineWinnerList.push(...res.data.list)
|
||
}
|
||
this.form.page = ++this.form.page;
|
||
}
|
||
},
|
||
async orderfindWiningUser() {
|
||
let res = await this.api.orderfindWiningUser()
|
||
this.orderfindWiningUserlist = res.data.map((i) => {
|
||
i.userName = i.userName.slice(0, 1)
|
||
return i
|
||
})
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
page {
|
||
background: #F9F9F9;
|
||
}
|
||
|
||
.content {
|
||
.onecontent {
|
||
width: 100%;
|
||
height: 684.19rpx;
|
||
position: relative;
|
||
background: linear-gradient(96deg, #F9F2D9 0%, #FBE1DA 100%);
|
||
|
||
.onecontentabsolute {
|
||
position: absolute;
|
||
top: 0;
|
||
height: 534.19rpx;
|
||
width: 100%;
|
||
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/mrmd.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
|
||
.towcontent {
|
||
position: relative;
|
||
padding: 0 28rpx;
|
||
width: 100%;
|
||
margin-top: -100rpx;
|
||
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(249, 242, 217, 0.77) 10%, #F5DFDF 100%);
|
||
|
||
.towcontentone {
|
||
position: relative;
|
||
width: 100%;
|
||
background: linear-gradient(180deg, rgba(255, 241, 204, 0.77) 0%, rgba(255, 255, 255, 0.56) 40%, #FFFFFF 100%);
|
||
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
||
border: 2rpx solid #FFFFFF;
|
||
padding: 32rpx 24rpx;
|
||
|
||
.towcontentoneimage {
|
||
position: absolute;
|
||
top: -30rpx;
|
||
left: 50%;
|
||
transform: translatex(-50%);
|
||
width: 118rpx;
|
||
height: 46rpx;
|
||
}
|
||
|
||
.towcontentonebox {
|
||
width: 100%;
|
||
|
||
.towcontentoneboximage {
|
||
width: 171.63rpx;
|
||
height: 37.24rpx;
|
||
}
|
||
|
||
.towcontentoneboxswiper {
|
||
width: 100%;
|
||
padding-top: 24rpx;
|
||
overflow: hidden;
|
||
|
||
.swiper {
|
||
height: 242rpx;
|
||
|
||
.swiperitem {
|
||
height: 40rpx;
|
||
|
||
.swiper-item {
|
||
display: block;
|
||
height: 40rpx;
|
||
text-align: left;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
.towcontentoness {
|
||
margin-top: 48rpx;
|
||
width: 100%;
|
||
background: rgba(255, 255, 255, 0.96);
|
||
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
||
padding: 38rpx 48rpx;
|
||
|
||
.towcontentonebox_box {
|
||
margin: 0 auto;
|
||
text-align: center;
|
||
width: 262rpx;
|
||
height: 58rpx;
|
||
line-height: 58rpx;
|
||
background: #FFA436;
|
||
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.towcontentonebox {
|
||
width: 100%;
|
||
|
||
.towcontentoneboximage {
|
||
width: 171.63rpx;
|
||
height: 37.24rpx;
|
||
}
|
||
|
||
.swiper-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.swiper_itemone {
|
||
width: 25%;
|
||
text-align: center;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.swiper_itemtow {
|
||
width: auto;
|
||
text-align: center;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.swiper_itemthere {
|
||
width: 25%;
|
||
text-align: center;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
.towcontentoneboxswiper {
|
||
width: 100%;
|
||
// height: 242rpx;
|
||
padding-top: 24rpx;
|
||
overflow: hidden;
|
||
|
||
.swiper {
|
||
height: 230rpx;
|
||
|
||
.swiperitem {
|
||
height: 40rpx;
|
||
|
||
.swiper-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.swiper_itemone {
|
||
width: 25%;
|
||
text-align: center;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.swiper_itemtow {
|
||
width: auto;
|
||
text-align: center;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.swiper_itemthere {
|
||
width: 25%;
|
||
text-align: center;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
.towcontenttow {
|
||
margin-top: 32rpx;
|
||
padding-bottom: 144rpx;
|
||
text-align: center;
|
||
width: 100%;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
</style> |