Skip to content

B
buildingAgricultureSharing-miniapp
Commit bea7aa2b authored by 张娇（东信）'s avatar 张娇（东信）
Browse files
Options

详情页页面实现

parent 476c550e
Hide whitespace changes
Inline Side-by-side
Showing with 260 additions and 264 deletions
src/pages/detail/detail.vue
View file @ bea7aa2b
<template> <template>
<view class="shopping"> <view class="container">
<view class="order-form"> <!-- 顶部搜索框-->
<view class="order-form-view"> <view class="top">
<view class="dianming-view"> <OtherSearch background="rgba(255, 255, 255, 0.8)" backIcon="black"></OtherSearch>
<view class="dianming-checkbox"></view> </view>
<view class="leixing">店铺</view> <!-- 图片-->
<view class="dianming">杨家黄焖鸡</view> <view class="nav">
</view> <img class="main-img" src="/static/detail/img2.png" style="width: 750rpx; height: 668rpx" />
<view class="pre-icon">
<view class="shangpin-view"> <img
<view class="commodity-checkbox"></view> class="left-icon"
<img class="shangpin-tu" src="/src/static/assets/shangpin.png" alt="" /> src="/static/detail/img4.png"
<view class="shangpin-name">招牌黄焖鸡+米饭（土豆+生菜）</view> style="width: 248rpx; height: 100rpx; position: relative"
<view class="biaoqian">约1000克</view> />
<view class="jiage-view"> <img
<text class="jiage-fuhao">￥</text> class="right-icon"
<text class="shangpin-zhengshu">28</text> src="/static/detail/img3.png"
<text class="shangpin-xiaoshu">.8</text> style="width: 546rpx; height: 62rpx"
</view> />
<view class="anniu-view">
<view class="anniu-jian">-</view>
<view class="anniu-shuliang">1</view>
<view class="anniu-jia">+</view>
</view>
</view>
</view> </view>
<view class="order-form-view"> <view class="pre-text">
<view class="dianming-view"> <text class="left-text">预售</text>
<view class="dianming-checkbox"></view> <text class="right-text">预计9月15日发货</text>
<view class="leixing">店铺</view> </view>
<view class="dianming">杨家黄焖鸡</view> </view>
</view> <!--详情-->
<view class="detail">
<view class="shangpin-view"> <view class="detail-title">筑农散养虫子土鸡(未下蛋小母鸡)1.5kg</view>
<view class="commodity-checkbox"></view> <view class="detail-int">
<img class="shangpin-tu" src="/src/static/assets/shangpin.png" alt="" /> 这是商品简介这是商品简介这是商品简介这是商品简介这是商品 简介这是商品简介这是商品简介
<view class="shangpin-name">招牌黄焖鸡+米饭（土豆+生菜）</view> </view>
<view class="biaoqian">约1000克</view> <img class="share-img" src="/static/detail/share.png" />
<view class="jiage-view"> <text class="share-text">分享</text>
<text class="jiage-fuhao">￥</text> </view>
<text class="shangpin-zhengshu">28</text> <view class="evaluate">
<text class="shangpin-xiaoshu">.8</text> <view class="evaluate-num">
</view> <text class="env">评价（0）</text>
<view class="anniu-view"> <text class="num">好评率（100%）</text>
<view class="anniu-jian">-</view> <wd-icon name="arrow-right" size="32rpx" style="margin-top: 2rpx"></wd-icon>
<view class="anniu-shuliang">1</view>
<view class="anniu-jia">+</view>
</view>
</view>
</view> </view>
<view class="shangpin-view"> </view>
<view class="commodity-checkbox"></view> <!-- 详情图-->
<img class="shangpin-tu" src="/src/static/assets/shangpin.png" alt="" /> <view class="detail-info">
<view class="shangpin-name">招牌黄焖鸡+米饭（土豆+生菜）</view> <text class="info-title">详情</text>
<view class="biaoqian">约1000克</view> <img class="info-img" src="/static/detail/detail-img.png" />
<view class="jiage-view"> <img class="info-img" src="/static/detail/detail-img.png" />
<text class="jiage-fuhao">￥</text> </view>
<text class="shangpin-zhengshu">28</text> <!-- 底部-->
<text class="shangpin-xiaoshu">.8</text> <view class="detail-bottom">
<view class="sort">
<view class="bottom" style="display: flex; flex-direction: row">
<view class="borderClass" v-for="(item, index) in sortList" :key="index">
<img :src="item.img" style="width: 40rpx; height: 40rpx" />
<view class="sort-text">{{ item.text }}</view>
</view>
</view> </view>
<view class="anniu-view"> <view class="btn">
<view class="anniu-jian">-</view> <wd-button type="warning" size="small" style="margin-right: 10rpx">加入购物车</wd-button>
<view class="anniu-shuliang">1</view> <wd-button type="error" size="small">立即购买</wd-button>
<view class="anniu-jia">+</view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<view class="jieshuan">
<view class="jieshuan-checkbox"></view>
<text class="checkbox-miaosu">全选</text>
<view class="heji">
合计：
<text class="heji-jiage-fuhao">￥</text>
<text class="heji-shangpin-zhengshu">28</text>
<text class="heji-shangpin-xiaoshu">.8</text>
</view>
<view class="jieshuan-anniu">去结算(28.8)</view>
</view>
</template> </template>
<script setup> <script setup>
const value = ref < boolean > true; import OtherSearch from '../../components/index/OtherSearch.vue';
import { ref } from 'vue';
// 图片
const swiperList = ref([
'../../static/detail/img2.png',
'../../static/detail/img2.png',
'../../static/detail/img2.png',
]);
// 底部
const sortList = ref([
{ img: '/static/detail/img7.png', text: '店铺' },
{ img: '/static/detail/img8.png', text: '客服' },
{ img: '/static/detail/img6.png', text: '购物车' },
]);
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
page { .container {
background: #f3f3f3; position: relative;
height: 100%; left: 0rpx;
top: -45rpx;
opacity: 1;
} }
.shopping { .top {
width: 710rpx;
height: auto;
padding: 20rpx;
}
.order-form {
width: 750rpx; width: 750rpx;
height: auto; height: 128rpx;
border-radius: 16rpx; margin-top: 40rpx;
padding: 20rpx;
background: #ffffff; background: #ffffff;
} }
.order-form-view { .nav {
width: 710rpx; width: 750rpx;
height: auto;
border-radius: 16rpx;
background: #ffffff;
} }
.dianming-view { .pre-icon {
margin-left: 20rpx;
display: flex; display: flex;
margin-top: -108rpx;
} }
.dianming-checkbox { .right-icon {
width: 32rpx; margin-left: -20px;
height: 32rpx; margin-top: 19px;
margin-top: 30rpx;
border-radius: 50%;
background-color: #eb1818;
} }
.leixing { .left-text {
width: 91rpx; position: relative;
height: 27rpx; width: 80rpx;
border-radius: 8rpx; height: 48rpx;
font-size: 20rpx; font-family: Source Han Sans;
background: #f12a2a; font-size: 40rpx;
text-align: center; font-weight: 500;
line-height: 27rpx; line-height: 48rpx;
margin-left: 22rpx; letter-spacing: 0em;
margin-top: 33rpx; font-variation-settings: 'opsz' auto;
font-feature-settings: 'kern' on;
color: #ffffff; color: #ffffff;
margin-left: 80rpx;
margin-top: -70rpx;
display: block;
} }
.dianming { .right-text {
width: 280rpx; left: -60rpx;
height: 28rpx; position: relative;
width: 300rpx;
height: 48rpx;
font-family: Source Han Sans;
font-size: 28rpx; font-size: 28rpx;
font-weight: normal;
line-height: 28rpx; line-height: 28rpx;
margin-top: 32rpx; letter-spacing: 0em;
margin-left: 11rpx; font-variation-settings: 'opsz' auto;
color: #333333; font-feature-settings: 'kern' on;
color: #ffffff;
float: right;
margin-top: -30rpx;
} }
.xunhuan-view { .detail {
width: 710rpx; width: 750rpx;
// padding-bottom: 40rpx; height: 178rpx;
border-radius: 16rpx; border-radius: 16rpx;
margin-top: 20rpx;
margin-left: 20rpx;
background: #ffffff; background: #ffffff;
position: relative;
top: 10px;
} }
.shangpin-view { .detail-title {
width: 710rpx; width: 277 * 2rpx;
height: 200rpx;
display: flex;
border-radius: 16rpx;
padding: 20rpx;
}
.commodity-checkbox {
width: 32rpx;
height: 32rpx; height: 32rpx;
margin-top: 84rpx; font-family: Source Han Sans;
border-radius: 50%;
background-color: #eb1818;
}
.shangpin-tu {
width: 170rpx;
height: 170rpx;
border-radius: 12rpx;
margin-left: 22rpx;
margin-top: 19rpx;
}
.shangpin-name {
width: 397rpx;
height: 28rpx;
font-size: 26rpx;
line-height: 28rpx;
color: #333333;
margin-left: 23rpx;
margin-top: 31rpx;
}
.biaoqian {
width: 125rpx;
height: 40rpx;
border-radius: 8rpx;
background: #f2f2f2;
font-size: 24rpx;
line-height: 40rpx;
text-align: center;
color: #333333;
margin-left: -400rpx;
margin-top: 81rpx;
}
.jiage-view {
width: 88rpx;
height: 36rpx;
font-size: 32rpx; font-size: 32rpx;
font-weight: 500;
line-height: 32rpx; line-height: 32rpx;
color: #f12a2a; letter-spacing: 0em;
margin-left: -130rpx; font-variation-settings: 'opsz' auto;
margin-top: 156rpx; font-feature-settings: 'kern' on;
color: #3d3d3d;
padding-top: 20rpx;
padding-left: 20rpx;
} }
.jiage-fuhao { .detail-int {
font-weight: 400; width: 336 * 2rpx;
height: 64rpx;
font-family: Source Han Sans;
font-size: 24rpx; font-size: 24rpx;
font-weight: normal;
line-height: 32rpx;
letter-spacing: 0em;
font-variation-settings: 'opsz' auto;
font-feature-settings: 'kern' on;
color: #abaaaa;
padding-top: 10rpx;
padding-left: 20rpx;
} }
.shangpin-zhengshu { .share-img {
font-weight: 400; float: right;
font-size: 36rpx; margin-right: 80rpx;
width: 28rpx;
height: 28rpx;
} }
.shangpin-xiaoshu { .share-text {
font-weight: 400; float: right;
font-size: 24rpx; width: 44rpx;
height: 22rpx;
font-family: Source Han Sans;
font-size: 22rpx;
font-weight: bold;
line-height: 22rpx;
letter-spacing: 0em;
font-variation-settings: 'opsz' auto;
font-feature-settings: 'kern' on;
color: #3d3d3d;
margin-right: -80rpx;
margin-top: 2rpx;
} }
.anniu-view { .evaluate {
display: flex; width: 750rpx;
width: 134rpx; height: 88rpx;
height: 45rpx; border-radius: 16rpx;
border-radius: 23rpx;
background: #ffffff; background: #ffffff;
box-sizing: border-box; margin-top: 30rpx;
border: 1px solid #999999;
margin-top: 153rpx;
margin-left: 213rpx;
} }
.anniu-jian { .evaluate {
width: 42rpx; display: flex;
height: 45rpx; align-items: center;
line-height: 37rpx; justify-content: space-between;
text-align: center;
font-size: 24rpx;
border-radius: 23rpx 0rpx 0rpx 23rpx;
} }
.anniu-shuliang {
width: 50rpx; .evaluate-num {
height: 45rpx; flex-direction: column;
line-height: 45rpx; align-items: center;
text-align: center;
font-size: 24rpx;
border-left: 1px solid #999999;
border-right: 1px solid #999999;
} }
.anniu-jia { .env {
width: 42rpx; width: 148rpx;
height: 45rpx; height: 32rpx;
line-height: 37rpx; font-family: Source Han Sans;
text-align: center; font-size: 32rpx;
font-weight: 500;
line-height: 32rpx;
letter-spacing: 0em;
font-variation-settings: 'opsz' auto;
font-feature-settings: 'kern' on;
color: #3d3d3d;
margin-left: 20rpx;
}
.num {
width: 200rpx;
height: 32rpx;
font-family: Source Han Sans;
font-size: 24rpx; font-size: 24rpx;
border-radius: 0rpx 23rpx 23rpx 0rpx; font-weight: normal;
line-height: 32rpx;
letter-spacing: 0em;
font-variation-settings: 'opsz' auto;
font-feature-settings: 'kern' on;
color: #3d3d3d;
margin-left: 340rpx;
} }
.jieshuan { .wd-icon {
position: relative;
top: 4rpx;
}
.detail-info {
width: 750rpx; width: 750rpx;
height: 92rpx; height: 1168px;
margin-top: 15%; border-radius: 16rpx;
display: flex; background: #ffffff;
background: #fbfbfb; margin-top: 20rpx;
position: relative;
z-index: 9;
} }
.jieshuan-checkbox { .info-title {
width: 32rpx; width: 64rpx;
height: 32rpx; height: 32rpx;
margin-top: 28rpx; font-family: Source Han Sans;
margin-left: 23rpx; font-size: 32rpx;
border-radius: 50%; font-weight: bold;
background-color: #eb1818; line-height: 32rpx;
} letter-spacing: 0em;
.wd-checkbox__shape { font-variation-settings: 'opsz' auto;
width: var(--wot-checkbox-size, 44rpx) !important; font-feature-settings: 'kern' on;
height: var(--wot-checkbox-size, 44rpx) !important; color: #3d3d3d;
} position: relative;
.checkbox-miaosu { top: 20rpx;
width: 48rpx; left: 20rpx;
height: 24rpx;
font-size: 24rpx;
line-height: 24rpx;
color: #333333;
margin-top: 34rpx;
margin-left: 21rpx;
} }
.heji { .info-img {
width: 184rpx; width: 710rpx;
height: 36rpx; height: 1168rpx;
font-weight: 400; border-radius: 16rpx;
font-size: 28rpx; position: relative;
margin-top: 40rpx;
margin-left: 20rpx; margin-left: 20rpx;
margin-top: 25rpx;
color: #333333;
display: flex;
} }
.heji-jiage-fuhao { .detail-bottom {
font-weight: 400; width: 750rpx;
font-size: 28rpx; height: 216rpx;
margin-left: -20rpx; border-radius: 16rpx 16px 0rpx 0rpx;
color: #f12a2a; background: #ffffff;
box-shadow: 0rpx -8rpx 20rpx 0rpx rgba(0, 0, 0, 0.12);
position: relative;
z-index: 10;
} }
.heji-shangpin-zhengshu { .sort {
font-weight: 400; width: 750rpx;
font-size: 36rpx; height: 186rpx;
margin-top: -6rpx;
color: #f12a2a;
} }
.heji-shangpin-xiaoshu { .borderClass {
font-weight: 400; width: 96rpx;
font-size: 24rpx; height: 96rpx;
margin-top: 6rpx; margin-top: 40rpx;
color: #f12a2a; margin-left: 40rpx;
} }
.jieshuan-anniu { .sort-text {
width: 192rpx; font-size: 22rpx;
height: 74rpx; font-weight: 500;
border-radius: 37rpx; line-height: 24rpx;
line-height: 74rpx;
text-align: center; text-align: center;
margin-top: 9rpx; letter-spacing: 0em;
margin-left: 210rpx; color: #3d3d3d;
background: linear-gradient(90deg, #f74040 0%, #eb1818 100%); width: 176rpx;
font-size: 28rpx; margin-left: -70rpx;
color: #ffffff; }
.btn {
margin-top: -90rpx;
margin-left: 400rpx;
} }
</style> </style>
src/pages/index/presale.vue
View file @ bea7aa2b
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
</view> </view>
<view class="sort"> <view class="sort">
<view style="display: flex; flex-direction: row"> <view style="display: flex; flex-direction: row">
<view class="borderClass" @tap="toBuilding" v-for="(item, index) in sortList" :key="index"> <view class="borderClass" @tap="toDetail" v-for="(item, index) in sortList" :key="index">
<img :src="item.img" style="width: 48rpx; height: 48rpx" /> <img :src="item.img" style="width: 48rpx; height: 48rpx" />
<view class="sort-text">{{ item.text }}</view> <view class="sort-text">{{ item.text }}</view>
</view> </view>
...@@ -253,6 +253,12 @@ function toCart() { ...@@ -253,6 +253,12 @@ function toCart() {
url: '/pages/cart/cart', url: '/pages/cart/cart',
}); });
} }
function toDetail() {
// TODO: 跳转到筑农严选
xma.navigateTo({
url: '/pages/detail/detail',
});
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
......
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