Skip to content

B
buildingAgricultureSharing-miniapp
Commit d731e99a authored by 周俊涛（东信）'s avatar 周俊涛（东信）
Browse files
Options

Merge branch 'master' of…

Merge branch 'master' of http://gitlab.platform.xinhuaapp.com/pengjiani/buildingAgricultureSharing-miniapp
parents c97ac13f 140a604e
Hide whitespace changes
Inline Side-by-side
Showing with 877 additions and 3 deletions
src/components/index/OtherSearch.vue
View file @ d731e99a
......@@ -36,7 +36,6 @@ function back() {
border-radius: 16rpx 16rpx 16rpx 16rpx;
opacity: 0.8;
margin: 0 auto;
margin-top: 44rpx;
display: flex;
align-items: center;
padding-left: 20rpx;
......
src/pages.json
View file @ d731e99a
......@@ -32,6 +32,18 @@
"style": {
"navigationBarTitleText": "预售"
}
},
{
"path": "pages/detail/detail",
"style": {
"navigationBarTitleText": "详情页"
}
},
{
"path": "pages/cart/cart",
"style": {
"navigationBarTitleText": "购物车"
}
}
],
"globalStyle": {
......
src/pages/cart/cart.vue 0 → 100644
View file @ d731e99a
<template>
<view class="shopping">
<view class="order-form">
<view class="order-form-view">
<view class="trade-information">
<view class="trade-checkbox"></view>
<view class="store">店铺</view>
<view class="trade-name">杨家黄焖鸡</view>
</view>
<view class="commodity-information">
<view class="commodity-checkbox"></view>
<img class="commodity-picture" src="/src/static/assets/fruit.png" alt="" />
<view class="commodity-name">招牌黄焖鸡+米饭（土豆+生菜）</view>
<view class="label">约1000克</view>
<view class="price-information">
<text class="price-symbol">￥</text>
<text class="price-integer">28</text>
<text class="price-decimals">.8</text>
</view>
<view class="quantity-commodity">
<view class="anniu-jian">-</view>
<view class="anniu-shuliang">1</view>
<view class="anniu-jia">+</view>
</view>
</view>
</view>
<view class="order-form-view">
<view class="trade-information">
<view class="trade-checkbox"></view>
<view class="store">店铺</view>
<view class="trade-name">杨家黄焖鸡</view>
</view>
<view class="commodity-information">
<view class="commodity-checkbox"></view>
<img class="commodity-picture" src="/src/static/assets/fruit.png" alt="" />
<view class="commodity-name">招牌黄焖鸡+米饭（土豆+生菜）</view>
<view class="label">约1000克</view>
<view class="price-information">
<text class="price-symbol">￥</text>
<text class="price-integer">28</text>
<text class="price-decimals">.8</text>
</view>
<view class="quantity-commodity">
<view class="anniu-jian">-</view>
<view class="anniu-shuliang">1</view>
<view class="anniu-jia">+</view>
</view>
</view>
</view>
<view class="commodity-information">
<view class="commodity-checkbox"></view>
<img class="commodity-picture" src="/src/static/assets/fruit.png" alt="" />
<view class="commodity-name">招牌黄焖鸡+米饭（土豆+生菜）</view>
<view class="label">约1000克</view>
<view class="price-information">
<text class="price-symbol">￥</text>
<text class="price-integer">28</text>
<text class="price-decimals">.8</text>
</view>
<view class="quantity-commodity">
<view class="anniu-jian">-</view>
<view class="anniu-shuliang">1</view>
<view class="anniu-jia">+</view>
</view>
</view>
</view>
</view>
<view class="final-statement">
<view class="final-statement-checkbox"></view>
<text class="check-all">全选</text>
<view class="total">
合计：
<text class="total-price-symbol">￥</text>
<text class="total-price-integer">28</text>
<text class="total-price-decimals">.8</text>
</view>
<view class="final-price-button">去结算(28.8)</view>
</view>
</template>
<script setup>
const value = ref < boolean > true;
</script>
<style lang="scss" scoped>
page {
background: #f3f3f3;
height: 100%;
}
.shopping {
width: 710rpx;
height: auto;
// overflow: hidden;
}
.order-form {
width: 750rpx;
height: auto;
border-radius: 16rpx;
padding: 20rpx;
}
.order-form-view {
width: 710rpx;
height: auto;
overflow: hidden;
border-radius: 16rpx;
margin-top: 20rpx;
background: #ffffff;
}
.trade-information {
margin-left: 20rpx;
display: flex;
}
.trade-checkbox {
width: 32rpx;
height: 32rpx;
margin-top: 30rpx;
border-radius: 50%;
}
.store {
width: 91rpx;
height: 27rpx;
border-radius: 8rpx;
font-size: 20rpx;
background: #f12a2a;
text-align: center;
line-height: 27rpx;
margin-left: 22rpx;
margin-top: 33rpx;
color: #ffffff;
}
.trade-name {
width: 280rpx;
height: 28rpx;
font-size: 28rpx;
line-height: 28rpx;
margin-top: 32rpx;
margin-left: 11rpx;
color: #333333;
}
.xunhuan-view {
width: 710rpx;
border-radius: 16rpx;
margin-top: 20rpx;
margin-left: 20rpx;
background: #ffffff;
}
.commodity-information {
width: 670rpx;
height: auto;
overflow: hidden;
display: flex;
border-radius: 16rpx;
padding: 20rpx;
margin-top: -23rpx;
background: #ffffff;
}
.commodity-checkbox {
width: 32rpx;
height: 32rpx;
margin-top: 84rpx;
border-radius: 50%;
background-color: #eb1818;
}
.commodity-picture {
width: 170rpx;
height: 170rpx;
border-radius: 12rpx;
margin-left: 22rpx;
margin-top: 19rpx;
}
.commodity-name {
width: 397rpx;
height: 28rpx;
font-size: 26rpx;
line-height: 28rpx;
color: #333333;
margin-left: 23rpx;
margin-top: 31rpx;
}
.label {
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;
}
.price-information {
width: 88rpx;
height: 36rpx;
font-size: 32rpx;
line-height: 32rpx;
color: #f12a2a;
margin-left: -130rpx;
margin-top: 156rpx;
}
.price-symbol {
font-weight: 400;
font-size: 24rpx;
}
.price-integer {
font-weight: 400;
font-size: 36rpx;
}
.price-decimals {
font-weight: 400;
font-size: 24rpx;
}
.quantity-commodity {
display: flex;
width: 134rpx;
height: 45rpx;
border-radius: 23rpx;
background: #ffffff;
box-sizing: border-box;
border: 1px solid #999999;
margin-top: 153rpx;
margin-left: 213rpx;
}
.anniu-jian {
width: 42rpx;
height: 45rpx;
line-height: 37rpx;
text-align: center;
font-size: 24rpx;
border-radius: 23rpx 0rpx 0rpx 23rpx;
}
.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;
}
.anniu-jia {
width: 42rpx;
height: 45rpx;
line-height: 37rpx;
text-align: center;
font-size: 24rpx;
border-radius: 0rpx 23rpx 23rpx 0rpx;
}
.final-statement {
width: 750rpx;
height: 92rpx;
margin-top: 100rpx;
display: flex;
background: #fbfbfb;
}
.final-statement-checkbox {
width: 32rpx;
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;
}
.check-all {
width: 48rpx;
height: 24rpx;
font-size: 24rpx;
line-height: 24rpx;
color: #333333;
margin-top: 34rpx;
margin-left: 21rpx;
}
.total {
width: 184rpx;
height: 36rpx;
font-weight: 400;
font-size: 28rpx;
margin-left: 20rpx;
margin-top: 25rpx;
color: #333333;
display: flex;
}
.total-price-symbol {
font-weight: 400;
font-size: 28rpx;
margin-left: -20rpx;
color: #f12a2a;
}
.total-price-integer {
font-weight: 400;
font-size: 36rpx;
margin-top: -6rpx;
color: #f12a2a;
}
.total-price-decimals {
font-weight: 400;
font-size: 24rpx;
margin-top: 6rpx;
color: #f12a2a;
}
.final-price-button {
width: 192rpx;
height: 74rpx;
border-radius: 37rpx;
line-height: 74rpx;
text-align: center;
margin-top: 9rpx;
margin-left: 210rpx;
background: linear-gradient(90deg, #f74040 0%, #eb1818 100%);
font-size: 28rpx;
color: #ffffff;
}
</style>
src/pages/detail/detail.vue 0 → 100644
View file @ d731e99a
<template>
<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="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>
<!-- 详情图-->
<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="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>
</template>
<script setup>
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>
.container {
position: relative;
left: 0rpx;
top: -45rpx;
opacity: 1;
}
.top {
width: 750rpx;
height: 128rpx;
margin-top: 40rpx;
background: #ffffff;
}
.nav {
width: 750rpx;
}
.pre-icon {
display: flex;
margin-top: -108rpx;
}
.right-icon {
margin-left: -20px;
margin-top: 19px;
}
.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;
}
.right-text {
left: -60rpx;
position: relative;
width: 300rpx;
height: 48rpx;
font-family: Source Han Sans;
font-size: 28rpx;
font-weight: normal;
line-height: 28rpx;
letter-spacing: 0em;
font-variation-settings: 'opsz' auto;
font-feature-settings: 'kern' on;
color: #ffffff;
float: right;
margin-top: -30rpx;
}
.detail {
width: 750rpx;
height: 178rpx;
border-radius: 16rpx;
background: #ffffff;
position: relative;
top: 10px;
}
.detail-title {
width: 277 * 2rpx;
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;
padding-top: 20rpx;
padding-left: 20rpx;
}
.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;
}
.share-img {
float: right;
margin-right: 80rpx;
width: 28rpx;
height: 28rpx;
}
.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;
}
.evaluate {
width: 750rpx;
height: 88rpx;
border-radius: 16rpx;
background: #ffffff;
margin-top: 30rpx;
}
.evaluate {
display: flex;
align-items: center;
justify-content: space-between;
}
.evaluate-num {
flex-direction: column;
align-items: 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;
font-weight: normal;
line-height: 32rpx;
letter-spacing: 0em;
font-variation-settings: 'opsz' auto;
font-feature-settings: 'kern' on;
color: #3d3d3d;
margin-left: 340rpx;
}
.wd-icon {
position: relative;
top: 4rpx;
}
.detail-info {
width: 750rpx;
height: 1168px;
border-radius: 16rpx;
background: #ffffff;
margin-top: 20rpx;
position: relative;
z-index: 9;
}
.info-title {
width: 64rpx;
height: 32rpx;
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;
}
.info-img {
width: 710rpx;
height: 1168rpx;
border-radius: 16rpx;
position: relative;
margin-top: 40rpx;
margin-left: 20rpx;
}
.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;
}
.sort {
width: 750rpx;
height: 186rpx;
}
.borderClass {
width: 96rpx;
height: 96rpx;
margin-top: 40rpx;
margin-left: 40rpx;
}
.sort-text {
font-size: 22rpx;
font-weight: 500;
line-height: 24rpx;
text-align: center;
letter-spacing: 0em;
color: #3d3d3d;
width: 176rpx;
margin-left: -70rpx;
}
.btn {
margin-top: -90rpx;
margin-left: 400rpx;
}
</style>
src/pages/index/building.vue
View file @ d731e99a
......@@ -138,6 +138,7 @@ page {
.top {
width: 750rpx;
height: 128rpx;
margin-top: 40rpx;
background: #ffffff;
}
.nav {
......
src/pages/index/presale.vue
View file @ d731e99a
......@@ -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>
......@@ -58,11 +58,83 @@
</view>
</view>
</view>
<view class="waterfall">
<view class="wt-left wt-list">
<view
class="wt-item"
v-for="(good, index) in LeftList"
:key="index"
@click="ToDetail(good.id)"
>
<view class="item-img">
<image :src="good.image" mode="widthFix"></image>
<image
class="presale-img"
src="/static/presale/presale.png"
style="width: 132rpx; height: 64rpx; z-index: 10; margin-left: 18rpx"
/>
<image
class="preview-img"
src="/static/presale/preview.png"
style="width: 264rpx; height: 40rpx; z-index: 9"
/>
<text class="pre-text">预计9月15日发货</text>
</view>
<!-- 介绍部分 -->
<view class="introduce-section">
<text class="title">{{ good.name }}</text>
<view class="tags-box">
<text class="good-detail">{{ good.detail }}</text>
<text class="introduction">{{ good.introduction }}</text>
<text class="good-price">￥{{ good.price }}</text>
</view>
</view>
</view>
</view>
<view class="vt-right wt-list">
<view
class="wt-item"
v-for="(good, index) in RightList"
:key="index"
@click="ToDetail(good.id)"
>
<view class="item-img">
<image :src="good.image" mode="widthFix"></image>
<image
class="presale-img"
src="/static/presale/presale.png"
style="width: 132rpx; height: 64rpx; z-index: 10"
/>
<image
class="preview-img"
src="/static/presale/preview.png"
style="width: 264rpx; height: 40rpx; margin-left: 80rpx; z-index: 9"
/>
<text class="pre-text">预计9月15日发货</text>
</view>
<!-- 介绍部分 -->
<view class="introduce-section">
<text class="title">{{ good.name }}</text>
<view class="tags-box">
<text class="good-detail">{{ good.detail }}</text>
<text class="introduction">{{ good.introduction }}</text>
<text class="good-price">￥{{ good.price }}</text>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 购物车悬浮按钮 -->
<view class="cart-floating">
<img @tap="toCart" src="/static/presale/cart.png" style="width: 48rpx; height: 46rpx" />
</view>
</template>
<script setup>
import OtherSearch from '../../components/index/OtherSearch.vue';
import { ref } from 'vue';
const current = ref(0);
const light = ref(0);
const sortList = ref([
......@@ -101,6 +173,71 @@ const shopList = ref([
{ img: '/static/presale/img7.png', price: '29.9', text: '应季好物' },
{ img: '/static/presale/img7.png', price: '29.9', text: '应季好物' },
]);
// 声明需要的数据
const data = reactive({
leftList: [], // 左边列图片
rightList: [], // 右边列图片
leftHeight: 0, // 左边列高度
rightHeight: 0, // 右边列高度
columnWidth: 0, // 列宽度
});
// 总商品数据列表
const goodList = ref([
{
id: 1,
name: '这是一个商品',
image: '/static/presale/buy.png',
introduction: '商品简介商品简介',
price: 69.9,
},
{
id: 2,
name: '商品二',
image: '/static/presale/img7.png',
introduction: '商品简介商品简介',
price: 69.9,
},
{
id: 3,
name: '商品三',
image: '/static/assets/fruit.png',
introduction: '商品简介商品简介',
price: 69.9,
},
{
id: 4,
name: '商品四',
image: '/static/presale/buy.png',
introduction: '商品简介商品简介',
price: 69.9,
},
{
id: 5,
name: '商品五',
image: '/static/presale/buy.png',
introduction: '商品简介商品简介',
price: 69.9,
},
]);
// 左侧数据列表
const LeftList = ref([]);
// 右侧数据列表
const RightList = ref([]);
// 将商品信息列表分为左侧右侧两个部分
for (let i = 0; i < goodList.value.length; i++) {
if (i % 2 === 0) {
LeftList.value.push(goodList.value[i]);
} else {
RightList.value.push(goodList.value[i]);
}
}
// 点击商品 跳转详情
function ToDetail(id) {
console.log('点击了商品', id);
}
function handleClick(e) {
console.log(e);
}
......@@ -110,6 +247,18 @@ function onChange(e) {
const choice = (index) => {
light.value = index;
};
function toCart() {
// TODO: 跳转到筑农严选
xma.navigateTo({
url: '/pages/cart/cart',
});
}
function toDetail() {
// TODO: 跳转到筑农严选
xma.navigateTo({
url: '/pages/detail/detail',
});
}
</script>
<style lang="scss" scoped>
......@@ -128,7 +277,7 @@ page {
.nav {
width: 710rpx;
margin-left: 18rpx;
margin-top: -270rpx;
margin-top: -300rpx;
}
.nav-img {
width: 710rpx;
......@@ -226,10 +375,93 @@ page {
color: #b3b3b3;
}
.presale-price {
left: 20rpx;
display: block;
margin-left: 60rpx;
font-size: 30rpx;
font-weight: bold;
color: #ffffff;
position: relative;
z-index: 9;
}
.waterfall {
display: flex;
flex-direction: row;
width: 710rpx;
justify-content: center;
overflow: hidden;
margin-top: 10rpx;
margin-left: 30rpx;
}
.wt-list {
width: 360rpx;
display: flex;
flex-direction: column;
margin-right: 10rpx;
}
.wt-item {
border-radius: 8px 8px 8px 8px;
margin-bottom: 15rpx;
background-color: #ffffff;
}
.item-img image {
width: 100%;
}
/* 商品介绍 */
.introduce-section {
background: #ffffff;
padding: 20rpx 30rpx;
border-radius: 0 0 08px 8px;
margin-top: -20rpx;
height: 110rpx;
}
.introduce-section .title {
font-size: 32rpx;
color: #303133;
height: 50rpx;
line-height: 50rpx;
}
.introduce-section .tags-box {
display: flex;
align-items: center;
height: 30rpx;
font-size: 24rpx;
color: #909399;
}
.good-price {
position: relative;
margin-top: 70rpx;
margin-left: -200rpx;
color: #fa5151;
font-size: 28rpx;
}
.preview-img {
margin-left: 100rpx;
display: block;
margin-top: -48rpx;
position: relative;
z-index: 10;
}
.pre-text {
float: right;
margin-top: -40rpx;
font-size: 11px;
font-weight: normal;
line-height: 14px;
color: #ffffff;
}
.cart-floating {
position: fixed;
right: 20rpx;
bottom: 100rpx;
width: 80rpx;
height: 80rpx;
z-index: 99;
}
</style>
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