Skip to content

G
groupPurchase-miniapp
Commit 259481ea authored by 张娇（东信）'s avatar 张娇（东信）
Browse files
Options

预售顶部修改

parent 9692c86a
Hide whitespace changes
Inline Side-by-side
Showing with 81 additions and 123 deletions
src/pages/assistingAgriculture/index/presale.vue
View file @ 259481ea
...@@ -17,31 +17,7 @@ ...@@ -17,31 +17,7 @@
/> />
</view> </view>
</Search> </Search>
<view class="container"> <view class="bck-img">
<view class="top">
<!-- <Search-->
<!-- style="position: fixed; top: 0; width: 100%"-->
<!-- :backgroundBox="backgroundBox"-->
<!-- :backIcon="backIcon"-->
<!-- >-->
<!-- <view class="searchBox" :style="{ border }">-->
<!-- <image-->
<!-- class="magnifyingGlass"-->
<!-- src="../../../static/index/magnifyingGlass.png"-->
<!-- mode="aspectFit|aspectFill|widthFix"-->
<!-- />-->
<!-- <input-->
<!-- type="text"-->
<!-- class="text"-->
<!-- @confirm="toSearch"-->
<!-- placeholder="输入商品名称"-->
<!-- @input="updateModelValue"-->
<!-- @keyup.enter="toSearch"-->
<!-- @focus="toSearch"-->
<!-- />-->
<!-- </view>-->
<!-- </Search>-->
</view>
<view class="nav"> <view class="nav">
<wd-swiper <wd-swiper
:list="swiperList" :list="swiperList"
...@@ -54,109 +30,99 @@ ...@@ -54,109 +30,99 @@
imageMode="aspectFill" imageMode="aspectFill"
></wd-swiper> ></wd-swiper>
</view> </view>
<view class="sort"> </view>
<view style="display: flex; flex-direction: row"> <view class="sort">
<view <view style="display: flex; flex-direction: row">
class="borderClass" <view
@tap="chooseTab(index, item.categoryId)" class="borderClass"
v-for="(item, index) in sortList" @tap="chooseTab(index, item.categoryId)"
:key="index" v-for="(item, index) in sortList"
> :key="index"
<img :src="item.imgUrl" style="width: 48rpx; height: 48rpx" /> >
<view class="sort-text">{{ item.categoryName }}</view> <img :src="item.imgUrl" style="width: 48rpx; height: 48rpx" />
</view> <view class="sort-text">{{ item.categoryName }}</view>
</view> </view>
</view> </view>
</view>
<view>
<view> <view>
<scroll-view class="tabs" show-scrollbar="false" scroll-x :scroll-with-animation="true">
<text
@tap="chooseBTab(index, item.categoryId)"
v-for="(item, index) in tabsData"
:key="index"
class="text"
:class="light === index ? 'light' : ''"
>
{{ item.categoryName }}
</text>
</scroll-view>
</view>
<view class="tab-list" v-for="(item, index) in buyList" :key="index" @tap="toDetail(item)">
<img
class="buy-list"
:src="item.img"
style="width: 670rpx; height: 670rpx; border-radius: 16rpx"
/>
<view> <view>
<scroll-view class="tabs" show-scrollbar="false" scroll-x :scroll-with-animation="true"> <text class="retail-price">零售价：￥{{ item.oriPrice }}/盒</text>
<text <text class="presale-price">预售价：￥{{ item.price }}/盒</text>
@tap="chooseBTab(index, item.categoryId)"
v-for="(item, index) in tabsData"
:key="index"
class="text"
:class="light === index ? 'light' : ''"
>
{{ item.categoryName }}
</text>
</scroll-view>
</view> </view>
<view class="tab-list" v-for="(item, index) in buyList" :key="index" @tap="toDetail(item)"> <view>
<img <img
class="buy-list" class="buy-img"
:src="item.img" src="/static/assistingAgriculture/presale/img6.png"
style="width: 670rpx; height: 670rpx; border-radius: 16rpx" style="
position: sticky;
width: 284rpx;
height: 128rpx;
float: right;
margin-top: -80rpx;
margin-right: 16rpx;
"
/> />
<view> </view>
<text class="retail-price">零售价：￥{{ item.oriPrice }}/盒</text> </view>
<text class="presale-price">预售价：￥{{ item.price }}/盒</text> </view>
</view> <view class="waterfall">
<view> <view class="wt-left wt-list">
<img <view class="wt-item" v-for="(item, index) in buyList" :key="index" @tap="toDetail(item)">
class="buy-img" <view class="item-img">
src="/static/assistingAgriculture/presale/img6.png" <image :src="item.img" mode="widthFix" style="border-radius: 16rpx"></image>
<image
class="presale-img"
src="/static/assistingAgriculture/presale/presale.png"
style=" style="
position: sticky; width: 132rpx;
width: 284rpx; height: 64rpx;
height: 128rpx; z-index: 10;
float: right; margin-left: 18rpx;
margin-top: -80rpx; top: -70rpx;
margin-right: 16rpx; left: -19rpx;
" "
/> />
<image
class="preview-img"
src="/static/assistingAgriculture/presale/preview.png"
style="width: 264rpx; height: 40rpx; z-index: 9; top: -70rpx"
/>
<text class="pre-text">预计9月15日发货</text>
</view> </view>
</view> <!-- 介绍部分 -->
</view> <view class="introduce-section">
<view class="waterfall"> <text class="title">{{ item.prodName }}</text>
<view class="wt-left wt-list"> <view class="tags-box">
<view class="wt-item" v-for="(item, index) in buyList" :key="index" @tap="toDetail(item)"> <text class="good-detail">{{ item.detail }}</text>
<view class="item-img"> <text class="introduction">{{ item.introduction }}</text>
<image :src="item.img" mode="widthFix" style="border-radius: 16rpx"></image>
<image
class="presale-img"
src="/static/assistingAgriculture/presale/presale.png"
style="
width: 132rpx;
height: 64rpx;
z-index: 10;
margin-left: 18rpx;
top: -70rpx;
left: -19rpx;
"
/>
<image
class="preview-img"
src="/static/assistingAgriculture/presale/preview.png"
style="width: 264rpx; height: 40rpx; z-index: 9; top: -70rpx"
/>
<text class="pre-text">预计9月15日发货</text>
</view> </view>
<!-- 介绍部分 --> <view class="price-info">
<view class="introduce-section"> <text class="good-price">￥{{ item.price }}</text>
<text class="title">{{ item.prodName }}</text> <img class="add" src="/static/assistingAgriculture/presale/add.png" />
<view class="tags-box">
<text class="good-detail">{{ item.detail }}</text>
<text class="introduction">{{ item.introduction }}</text>
</view>
<view class="price-info">
<text class="good-price">￥{{ item.price }}</text>
<img class="add" src="/static/assistingAgriculture/presale/add.png" />
</view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<!-- 购物车悬浮按钮 -->
<!--<view class="cart-floating" @tap="toCart">
<wd-badge :modelValue="subscript">
<img
class="shop-car"
src="/static/assistingAgriculture/presale/cart.png"
style="width: 40rpx; height: 40rpx"
/>
</wd-badge>
</view>-->
<fab position="2" :cartCount="subscript" /> <fab position="2" :cartCount="subscript" />
</template> </template>
...@@ -190,7 +156,7 @@ const params = { ...@@ -190,7 +156,7 @@ const params = {
}; };
const subscript = ref(0); const subscript = ref(0);
const tabsList = ref([]); const tabsList = ref([]);
const backgroundBox = ref(''); const backgroundBox = ref('#71C456');
const border = ref(''); const border = ref('');
onMounted(async () => { onMounted(async () => {
getPresale(); getPresale();
...@@ -299,7 +265,7 @@ onPageScroll((e) => { ...@@ -299,7 +265,7 @@ onPageScroll((e) => {
backgroundBox.value = '#fff'; backgroundBox.value = '#fff';
border.value = '1rpx solid gray'; border.value = '1rpx solid gray';
} else { } else {
backgroundBox.value = ''; backgroundBox.value = '#71C456';
border.value = ''; border.value = '';
} }
}); });
...@@ -309,20 +275,12 @@ onPageScroll((e) => { ...@@ -309,20 +275,12 @@ onPageScroll((e) => {
page { page {
background: #f3f3f3; background: #f3f3f3;
} }
.container { .bck-img {
margin-top: -120rpx; background: linear-gradient(180deg, #71c456 0%, rgba(129, 159, 81, 0) 100%);
.top {
width: 100%;
height: 440rpx;
background: linear-gradient(180deg, #71c456 0%, rgba(243, 243, 243, 0) 100%);
border-radius: 0rpx 0rpx 0rpx 0rpx;
overflow: hidden;
}
} }
.nav { .nav {
width: 710rpx; width: 710rpx;
margin-left: 18rpx; margin-left: 18rpx;
margin-top: -300rpx;
} }
.nav-img { .nav-img {
width: 710rpx; width: 710rpx;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment