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