This commit is contained in:
weipengfei 2024-02-23 14:42:42 +08:00
commit 4aa3b0745f
2 changed files with 229 additions and 131 deletions

View File

@ -1,7 +1,7 @@
<template> <template>
<view class="empty-box"> <view class="empty-box">
<image src="/static/images/empty-box.png"></image> <image src="/static/images/empty-box.png"></image>
<view class="txt">{{title}}</view> <view class="txt" :style="{color:color}">{{title}}</view>
</view> </view>
</template> </template>
@ -15,31 +15,36 @@
// +---------------------------------------------------------------------- // +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com> // | Author: CRMEB Team <admin@crmeb.com>
// +---------------------------------------------------------------------- // +----------------------------------------------------------------------
export default{ export default {
props: { props: {
title: { title: {
type: String, type: String,
default: '暂无记录', default: '暂无记录',
}, },
color: {
type: String,
default: "#999"
}
}, },
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.empty-box{ .empty-box {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-top: 200rpx; margin-top: 200rpx;
image{
image {
width: 414rpx; width: 414rpx;
height: 240rpx; height: 240rpx;
} }
.txt{
.txt {
font-size: 26rpx; font-size: 26rpx;
color: #999; color: #999;
} }
} }
</style> </style>

View File

@ -4,45 +4,65 @@
<view class="fixed-head"> <view class="fixed-head">
<view class="tool-bar"> <view class="tool-bar">
<view class='iconfont icon-xiangzuo' @tap='goBack'></view> <view class='iconfont icon-xiangzuo' @tap='goBack'></view>
<view class="v-input" style="width: 90%;margin-right: 40rpx;">
<u--input v-model="keyword" placeholder="搜索商品名称" prefixIcon="search" shape="circle"
:custom-style="{'background-color':'#fff',width:'100%',height:'70rpx'}"
prefixIconStyle="font-size: 22px;color: #909399" @input="search">
<template slot="suffix">
<u-button type="success" text="搜索" size="mini" shape="circle"
color="linear-gradient(to right, #F84221, #FF6C20)"
:customStyle="{height:'50rpx','font-size':'32rpx!important'}"
@click="search"></u-button>
</template>
</u--input>
</view>
</view> </view>
</view> </view>
<view class='header'> <view class='header'>
<!-- <image mode="widthFix" class="presellBg" :src="domain+'/static/diy/presell_title'+keyColor+'.png'" alt=""> --> <!-- <image mode="widthFix" class="presellBg" :src="domain+'/static/diy/presell_title'+keyColor+'.png'" alt=""> -->
<image mode="widthFix" class="presellBg" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/home_img/nongzinongju_bg.webp" alt=""> <image mode="widthFix" class="presellBg"
src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/home_img/nongzinongju_bg.webp"
alt="">
</view> </view>
<view class="main_count"> <view class="main_count">
<view class='list'> <view class='list' v-if="presellList.length != 0">
<block v-for="(item,index) in presellList" :key='index'> <block v-for="(item,index) in presellList" :key='index'>
<view class='item acea-row row-between-wrapper' @tap='goDetails(item)'> <view class='item acea-row row-between-wrapper' @tap='goDetails(item)'>
<view class='pictrue'> <view class='pictrue'>
<image :src='item.product.image'></image> <image :src='item.product.image'></image>
</view> </view>
<view class='text acea-row row-column-around' style="justify-content: space-between;display: flex;flex-direction: column;height: 100%;padding: 20rpx 0;"> <view class='text acea-row row-column-around'
style="justify-content: space-between;display: flex;flex-direction: column;height: 100%;padding: 20rpx 0;">
<view class='name line1'>{{item.store_name}}</view> <view class='name line1'>{{item.store_name}}</view>
<view class="card_price"> <view class="card_price">
<text class="card_small">¥</text> <text class="card_small">¥</text>
<text>{{item.price}}</text> <text>{{item.price}}</text>
</view> </view>
<view class="card_bottom" > <view class="card_bottom">
<view class="card_left" style="white-space: pre-wrap;" v-html="item.store_info"> <view class="card_left" style="white-space: pre-wrap;" v-html="item.store_info">
</view> </view>
<view class="card_right" >立即采购</view> <view class="card_right">立即采购</view>
</view> </view>
</view> </view>
</view> </view>
</block> </block>
</view> </view>
</view>
</view> <block v-if="presellList.length == 0">
<uni-popup ref="tipspopupRef"> <emptyPage title="暂无记录~" color="#f1f1f1"></emptyPage>
<view class="popup_ref"> </block>
<image class="p_icon" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/7b63620240205163923734.png"></image> </view>
<view class="p_item1">非常抱歉</view> </view>
<view class="p_item2">供销农资春节期间暂停发货年后恢复购买~</view> <uni-popup ref="tipspopupRef">
</view> <view class="popup_ref">
</uni-popup> <image class="p_icon" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/7b63620240205163923734.png">
</image>
<view class="p_item1">非常抱歉</view>
<view class="p_item2">供销农资春节期间暂停发货年后恢复购买~</view>
</view>
</uni-popup>
<!-- <home></home> --> <!-- <home></home> -->
<!-- #ifndef H5 --> <!-- #ifndef H5 -->
<passwordPopup></passwordPopup> <passwordPopup></passwordPopup>
@ -60,6 +80,7 @@
// +---------------------------------------------------------------------- // +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com> // | Author: CRMEB Team <admin@crmeb.com>
// +---------------------------------------------------------------------- // +----------------------------------------------------------------------
import emptyPage from '@/components/emptyPage.vue';
import { import {
getSeckillIndexTime, getSeckillIndexTime,
getPresellList getPresellList
@ -68,20 +89,32 @@
// #ifndef H5 // #ifndef H5
import passwordPopup from '@/components/passwordPopup'; import passwordPopup from '@/components/passwordPopup';
// #endif // #endif
import { configMap } from "@/utils"; import {
import { mapGetters } from "vuex"; configMap
import { HTTP_REQUEST_URL } from '@/config/app'; } from "@/utils";
import { Toast } from '../../../libs/uniApi.js'; import {
mapGetters
} from "vuex";
import {
HTTP_REQUEST_URL
} from '@/config/app';
import {
Toast
} from '../../../libs/uniApi.js';
export default { export default {
computed: configMap({statusBarHeight:0},mapGetters(['viewColor','keyColor'])), computed: configMap({
statusBarHeight: 0
}, mapGetters(['viewColor', 'keyColor'])),
components: { components: {
// #ifndef H5 // #ifndef H5
passwordPopup, passwordPopup,
// #endif // #endif
home home,
emptyPage
}, },
data() { data() {
return { return {
keyword: '', //
domain: HTTP_REQUEST_URL, domain: HTTP_REQUEST_URL,
topImage: '', topImage: '',
presellList: [], presellList: [],
@ -108,9 +141,9 @@ import { Toast } from '../../../libs/uniApi.js';
// #ifdef MP // #ifdef MP
onShareAppMessage: function() { onShareAppMessage: function() {
wx.showShareMenu({ wx.showShareMenu({
withShareTicket: true, withShareTicket: true,
menus: ['shareAppMessage', 'shareTimeline'] menus: ['shareAppMessage', 'shareTimeline']
}) })
return { return {
title: '预售活动', title: '预售活动',
path: 'pages/activity/presell/index', path: 'pages/activity/presell/index',
@ -119,32 +152,41 @@ import { Toast } from '../../../libs/uniApi.js';
onShareTimeline: function() { onShareTimeline: function() {
return { return {
title: '预售活动', title: '预售活动',
query: { query: {
key: '' key: ''
}, },
imageUrl: '' imageUrl: ''
} }
}, },
// #endif // #endif
onLoad() { onLoad() {
this.getPresellProductList(); this.getPresellProductList();
}, },
methods: { methods: {
goBack: function() { goBack: function() {
uni.navigateBack(); uni.navigateBack();
}, },
//
search() {
var that = this;
that.loadend = false;
that.page = 1;
that.presellList = [];
that.getPresellProductList();
},
getPresellProductList: function() { getPresellProductList: function() {
var that = this; var that = this;
var data = { var data = {
page: that.page, page: that.page,
limit: that.limit, limit: that.limit,
// type: that.active keyword: that.keyword
}; };
if (that.loadend) return; if (that.loadend) return;
if (that.pageloading) return; if (that.pageloading) return;
this.pageloading = true this.pageloading = true
getPresellList(data).then(res => { getPresellList(data).then(res => {
// console.log(res);
var presellList = res.data.list; var presellList = res.data.list;
var loadend = presellList.length < that.limit; var loadend = presellList.length < that.limit;
that.page++; that.page++;
@ -158,7 +200,7 @@ import { Toast } from '../../../libs/uniApi.js';
}, },
settimeList: function(item, index) { settimeList: function(item, index) {
var that = this; var that = this;
that.active = index that.active = index
that.type = that.active; that.type = that.active;
that.loadend = false; that.loadend = false;
that.page = 1; that.page = 1;
@ -167,7 +209,7 @@ import { Toast } from '../../../libs/uniApi.js';
that.getPresellProductList(); that.getPresellProductList();
}, },
goDetails(item) { goDetails(item) {
// if(!item.type) return this.$refs.tipspopupRef.open(); // type // if(!item.type) return this.$refs.tipspopupRef.open(); // type
uni.navigateTo({ uni.navigateTo({
url: '/pages/activity/presell_details/index?id=' + item.product_presell_id url: '/pages/activity/presell_details/index?id=' + item.product_presell_id
}) })
@ -186,23 +228,28 @@ import { Toast } from '../../../libs/uniApi.js';
.container { .container {
min-height: 100vh; min-height: 100vh;
// background-color: var(--view-theme); // background-color: var(--view-theme);
background-color: #fd552a; background-color: #fd552a;
} }
.noCommodity{
.noCommodity {
border-top: none; border-top: none;
} }
.flash-sale .header { .flash-sale .header {
width: 100%; width: 100%;
position: relative; position: relative;
} }
.flash-sale .main_count{
.flash-sale .main_count {
position: relative; position: relative;
// top: -150rpx; // top: -150rpx;
top: -50rpx; top: -50rpx;
} }
.flash-sale .header .presellBg { .flash-sale .header .presellBg {
width: 750rpx; width: 750rpx;
} }
.flash-sale .presellList { .flash-sale .presellList {
padding: 0 20rpx; padding: 0 20rpx;
bottom: 0; bottom: 0;
@ -213,23 +260,28 @@ import { Toast } from '../../../libs/uniApi.js';
line-height: 80rpx; line-height: 80rpx;
height: 80rpx; height: 80rpx;
} }
.flash-sale .presellList .priceTag { .flash-sale .presellList .priceTag {
width: 75rpx; width: 75rpx;
height: 70rpx; height: 70rpx;
} }
.flash-sale .presellList .priceTag image { .flash-sale .presellList .priceTag image {
opacity: 1; opacity: 1;
} }
.flash-sale .presellList .priceTag image { .flash-sale .presellList .priceTag image {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.flash-sale .timeList { .flash-sale .timeList {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin: 0 auto; margin: 0 auto;
} }
.flash-sale .timeList .item { .flash-sale .timeList .item {
font-size: 20rpx; font-size: 20rpx;
color: #666; color: #666;
@ -237,16 +289,20 @@ import { Toast } from '../../../libs/uniApi.js';
box-sizing: border-box; box-sizing: border-box;
width: 224rpx; width: 224rpx;
} }
.flash-sale .timeList .item .time { .flash-sale .timeList .item .time {
font-size: 26rpx; font-size: 26rpx;
color: #AAAAAA; color: #AAAAAA;
} }
.flash-sale .timeList .item.on .time { .flash-sale .timeList .item.on .time {
color: var(--view-theme); color: var(--view-theme);
font-weight: 700; font-weight: 700;
span{
span {
position: relative; position: relative;
&::after{
&::after {
content: ''; content: '';
display: inline-block; display: inline-block;
width: 100%; width: 100%;
@ -259,6 +315,7 @@ import { Toast } from '../../../libs/uniApi.js';
} }
} }
} }
.activity { .activity {
padding: 0 20rpx; padding: 0 20rpx;
border: 1px solid var(--view-theme); border: 1px solid var(--view-theme);
@ -267,6 +324,7 @@ import { Toast } from '../../../libs/uniApi.js';
line-height: 40rpx; line-height: 40rpx;
position: relative; position: relative;
} }
.activity:before { .activity:before {
content: ' '; content: ' ';
position: absolute; position: absolute;
@ -280,6 +338,7 @@ import { Toast } from '../../../libs/uniApi.js';
margin-bottom: -6rpx; margin-bottom: -6rpx;
border-left-color: #fff; border-left-color: #fff;
} }
.activity:after { .activity:after {
content: ' '; content: ' ';
position: absolute; position: absolute;
@ -293,9 +352,11 @@ import { Toast } from '../../../libs/uniApi.js';
margin-bottom: -6rpx; margin-bottom: -6rpx;
border-right-color: #fff; border-right-color: #fff;
} }
.flash-sale .list{
.flash-sale .list {
margin-top: 24rpx; margin-top: 24rpx;
} }
.flash-sale .list .item { .flash-sale .list .item {
height: 238rpx; height: 238rpx;
position: relative; position: relative;
@ -305,68 +366,82 @@ import { Toast } from '../../../libs/uniApi.js';
border-radius: 20rpx; border-radius: 20rpx;
padding: 0 25rpx; padding: 0 25rpx;
} }
.flash-sale .list .item .pictrue { .flash-sale .list .item .pictrue {
width: 200rpx; width: 200rpx;
height: 200rpx; height: 200rpx;
border-radius: 10rpx; border-radius: 10rpx;
} }
.flash-sale .list .item .pictrue image { .flash-sale .list .item .pictrue image {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 10rpx; border-radius: 10rpx;
} }
.flash-sale .list .item .text { .flash-sale .list .item .text {
width: 420rpx; width: 420rpx;
font-size: 30rpx; font-size: 30rpx;
color: #333; color: #333;
} }
.flash-sale .list .item .text .name { .flash-sale .list .item .text .name {
width: 100%; width: 100%;
color: #282828; color: #282828;
font-weight: bold; font-weight: bold;
font-size: 28rpx; font-size: 28rpx;
} }
.flash-sale .list .item .text .booking { .flash-sale .list .item .text .booking {
font-size: 30rpx; font-size: 30rpx;
color: #E93323; color: #E93323;
} }
.flash-sale .list .item .text .booking .count { .flash-sale .list .item .text .booking .count {
font-size: 24rpx; font-size: 24rpx;
color: #E93323; color: #E93323;
} }
.flash-sale .list .item .text .limit { .flash-sale .list .item .text .limit {
font-size: 22rpx; font-size: 22rpx;
color: #999; color: #999;
margin-bottom: 5rpx; margin-bottom: 5rpx;
} }
.flash-sale .list .item .text .limit .limitPrice { .flash-sale .list .item .text .limit .limitPrice {
margin-left: 10rpx; margin-left: 10rpx;
} }
.flash-sale .list .item .text .progress { .flash-sale .list .item .text .progress {
width: 392rpx; width: 392rpx;
height: 74rpx; height: 74rpx;
background-size: 100%; background-size: 100%;
margin-top: 16rpx; margin-top: 16rpx;
.presell_price{
.presell_price {
float: left; float: left;
width: 50%; width: 50%;
text-align: center; text-align: center;
line-height: 15px; line-height: 15px;
padding: 8rpx 0; padding: 8rpx 0;
.presell_text{
.presell_text {
display: block; display: block;
color: #FF4F00; color: #FF4F00;
font-size: 20rpx; font-size: 20rpx;
} }
.price{
.price {
font-size: 26rpx; font-size: 26rpx;
color: #FF4F00; color: #FF4F00;
text{
text {
font-weight: bold; font-weight: bold;
} }
} }
} }
.order_btn{
.order_btn {
float: left; float: left;
width: 50%; width: 50%;
text-align: center; text-align: center;
@ -374,29 +449,38 @@ import { Toast } from '../../../libs/uniApi.js';
font-size: 26rpx; font-size: 26rpx;
line-height: 76rpx; line-height: 76rpx;
} }
.unStartBtn{
.unStartBtn {
float: left; float: left;
width: 50%; width: 50%;
text-align: center; text-align: center;
color: #FFFFFF; color: #FFFFFF;
font-size: 20rpx; font-size: 20rpx;
padding: 8rpx 0; padding: 8rpx 0;
text{
text {
font-size: 22rpx; font-size: 22rpx;
} }
} }
} }
.tool-bar{
.tool-bar {
display: flex; display: flex;
align-items: center; align-items: center;
height: 40px; height: 40px;
.v-input /deep/.u-button__text {
font-size: 28rpx !important;
}
} }
.fixed-head{
.fixed-head {
position: absolute; position: absolute;
left: 0; left: 0;
top: var(--status-bar-height); top: var(--status-bar-height);
width: 100%; width: 100%;
z-index: 10; z-index: 10;
.icon-xiangzuo { .icon-xiangzuo {
margin-right: 40rpx; margin-right: 40rpx;
margin-left: 20rpx; margin-left: 20rpx;
@ -404,69 +488,78 @@ import { Toast } from '../../../libs/uniApi.js';
color: #fff; color: #fff;
} }
} }
.card_price{
font-size: 32rpx; .card_price {
color: #FF8056; font-size: 32rpx;
.card_small{ color: #FF8056;
font-size: 26rpx;
} .card_small {
} font-size: 26rpx;
.card_bottom{ }
display: flex; }
justify-content: space-between;
align-items: flex-end; .card_bottom {
overflow: hidden; display: flex;
width: 100%; justify-content: space-between;
// height: 140rpx; align-items: flex-end;
overflow: hidden;
.card_left{ width: 100%;
font-size: 24rpx; // height: 140rpx;
color: #616161;
width: 240rpx; .card_left {
// height: 96rpx; font-size: 24rpx;
display: -webkit-box; color: #616161;
-webkit-box-orient: vertical; width: 240rpx;
-webkit-line-clamp: 3; /* 指定显示三行 */ // height: 96rpx;
overflow: hidden; display: -webkit-box;
text-overflow: ellipsis; -webkit-box-orient: vertical;
} -webkit-line-clamp: 3;
.card_right{ /* 指定显示三行 */
flex-shrink: 0; overflow: hidden;
background-color: #FF593C; text-overflow: ellipsis;
width: 160rpx; }
height: 80rpx;
background: #FF593C; .card_right {
box-shadow: 0rpx 4rpx 8rpx 0rpx #FF5435; flex-shrink: 0;
border-radius: 84rpx; background-color: #FF593C;
margin-bottom: 8rpx; width: 160rpx;
display: flex; height: 80rpx;
justify-content: center; background: #FF593C;
align-items: center; box-shadow: 0rpx 4rpx 8rpx 0rpx #FF5435;
color: #fff; border-radius: 84rpx;
} margin-bottom: 8rpx;
} display: flex;
.popup_ref{ justify-content: center;
width: 583rpx; align-items: center;
height: 393rpx; color: #fff;
background: #fff; }
border-radius: 30rpx 30rpx 30rpx 30rpx; }
display: flex;
flex-direction: column; .popup_ref {
align-items: center; width: 583rpx;
justify-content: center; height: 393rpx;
color: #FF8056; background: #fff;
.p_icon{ border-radius: 30rpx 30rpx 30rpx 30rpx;
width: 250rpx; display: flex;
height: 140rpx; flex-direction: column;
} align-items: center;
.p_item1{ justify-content: center;
font-size: 30rpx; color: #FF8056;
padding: 30rpx 0;
} .p_icon {
.p_item2{ width: 250rpx;
font-size: 28rpx; height: 140rpx;
width: 380rpx; }
text-align: center;
} .p_item1 {
} font-size: 30rpx;
</style> padding: 30rpx 0;
}
.p_item2 {
font-size: 28rpx;
width: 380rpx;
text-align: center;
}
}
</style>