TmOct5/ZhHealth
1
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

商城与首页基础页面

Browse Source
This commit is contained in:
唐明明
2021-12-31 17:01:34 +08:00
parent 04b1c5101e
commit 61fddf2d3a
85 changed files with 9544 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
pages/store/buy.vue Normal file
View File

@@ -0,0 +1,167 @@
<template>
<view class="content">
<!-- address -->
<view class="block address">
<uni-icons class="address-icon location" type="location-filled" size="24" color="#34CE98"></uni-icons>
<uni-icons class="address-icon arrows" type="right" size="20" color="#999"></uni-icons>
<view class="user"><text>唐明阳</text>18245180131</view>
<view class="city">黑龙江省哈尔滨市南岗区汉水路265号</view>
</view>
<!-- 订单产品 -->
<view class="block goods-box">
<view class="goods-item">
</view>
</view>
<!-- 订单信息 -->
<view class="block info-box">
<view class="info-item">
<view class="label">配送方式</view>
<view class="nowrap">快递</view>
</view>
<view class="info-item">
<view class="label">优惠金额</view>
<view class="nowrap">无优惠</view>
</view>
</view>
<!-- footer -->
<view class="order-footer">
<view class="total">总计：<text>￥1399.00</text></view>
<button class="btn">确认订单</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
goodsInfo : {},
expressPickerValue : 0,
addressId : '',
paramsId : '',
goodsNumber : ''
};
}
}
</script>
<style lang="scss" scoped>
.content{
background: $window-color;
min-height: 100vh;
overflow: hidden;
padding-bottom: $padding + 80;
box-sizing: border-box;
}
.block{
background: white;
margin: $margin;
border-radius: $radius;
}
// 地址管理
.address{
position: relative;
padding: $padding 80rpx $padding 90rpx;
font-size: $title-size-lg;
.user{
font-size: $title-size;
line-height: 40rpx;
color: $text-gray;
text{
color: black;
max-width: 200rpx;
display: inline-block;
margin-right: $margin/2;
}
}
.city{
padding-top: $padding/2;
font-size: $title-size-sm;
color: $text-gray;
line-height: 36rpx;
}
.address-icon{
position: absolute;
top: 50%;
&.location{
margin-top: -26rpx;
left: $margin - 10;
}
&.arrows{
margin-top: -20rpx;
right: $margin - 10;
}
}
}
// 订单信息
.info-box{
.info-item{
position: relative;
padding: $padding $padding $padding 200rpx;
font-size: $title-size-m;
min-height: 40rpx;
text-align: right;
.label{
position: absolute;
left: $margin;
top: $margin;
color: $text-gray;
}
&::after{
position: absolute;
left: $margin;
right: $margin;
content: " ";
height: 1rpx;
bottom: 0;
background: $border-color;
}
&:last-child::after{
display: none;
}
}
}
// footer
.order-footer{
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: $padding;
background: white;
border-radius: $radius $radius 0 0;
box-shadow: 0 0 10rpx 10rpx rgba($color: #000000, $alpha: .02);
z-index: 99;
display: flex;
.total{
line-height: 80rpx;
font-size: $title-size-lg;
font-weight: bold;
width: calc(100% - 300rpx - #{$margin});
color: $text-gray;
font-weight: normal;
@extend .nowrap;
text{
color: $text-price;
font-size: $title-size-lg;
font-weight: bold;
}
}
.btn{
margin-left: $margin;
width: 300rpx;
height: 80rpx;
padding: 0;
line-height: 80rpx;
font-size: $title-size-lg;
border-radius: 40rpx;
background: $main-color;
color: white;
font-weight: bold;
&::after{
display: none;
}
}
}
</style>

218
pages/store/goods.vue Normal file
View File

@@ -0,0 +1,218 @@
<template>
<view>
<!-- 产品封面 -->
<view class="goods-swiper">
<swiper :indicator-dots="false" @change="current = $event.detail.current + 1">
<swiper-item>
<view class="swiper-cover">
<image src="https://yanxuan-item.nosdn.127.net/ec5550bf450f6c65a9610a4c891e217b.jpg" mode="aspectFill" />
</view>
</swiper-item>
<swiper-item>
<view class="swiper-cover">
<image src="https://yanxuan-item.nosdn.127.net/dc27864b72701e31286ca2bf6f7bb245.jpg" mode="aspectFill" />
</view>
</swiper-item>
<swiper-item>
<view class="swiper-cover">
<image src="https://yanxuan-item.nosdn.127.net/d89f1f13c36c178843f3bd46783f5ad5.jpg" mode="aspectFill" />
</view>
</swiper-item>
</swiper>
<view class="swiper-pages">
{{current}}/3
</view>
</view>
<!-- 详情 -->
<view class="main">
<view class="title">学生奶 3.8g乳蛋白娟姗纯牛奶 250ml*10盒</view>
<view class="sub-title">1%英国珍稀牛种，优级口感与营养</view>
<view class="box-flex">
<view class="price">
<text>¥</text>59.9
</view>
<view class="sales">销量2w+</view>
</view>
<!-- <view class="">
优惠券
</view> -->
<view class="hr">
<text>详情</text>
</view>
<view class="imgs">
<image src="https://yanxuan-item.nosdn.127.net/eb6eb62a213c1e76e0326f5d77a5e42b.jpg" mode="widthFix"></image>
<image src="https://yanxuan-item.nosdn.127.net/8e132a1d2abfc4ff32fad1cd276c3919.jpg" mode="widthFix"></image>
<image src="https://yanxuan-item.nosdn.127.net/7485537552e686ca160509b00366d669.jpg" mode="widthFix"></image>
<image src="https://yanxuan-item.nosdn.127.net/6fb77ef6204c5e8f695bf54332c74d23.jpg" mode="widthFix"></image>
<image src="https://yanxuan-item.nosdn.127.net/27b53bdb3f3131fffd6e50c42dc0468b.jpg" mode="widthFix"></image>
<image src="https://yanxuan-item.nosdn.127.net/7d579166b8dd4e32d23bb9b27a02d2e2.jpg" mode="widthFix"></image>
<image src="https://yanxuan-item.nosdn.127.net/ce118328a061c332bfe4b7748518b2d3.jpg" mode="widthFix"></image>
<image src="https://yanxuan-item.nosdn.127.net/ae47948c2759ac93baba75ee06d657be.jpg" mode="widthFix"></image>
<image src="https://yanxuan-item.nosdn.127.net/f46ccd3139cb9c80e583ab52cb8fb296.jpg" mode="widthFix"></image>
<image src="https://yanxuan-item.nosdn.127.net/0ee8478ae77fd561b30d1a5b2124fcd8.jpg" mode="widthFix"></image>
<image src="https://yanxuan-item.nosdn.127.net/a856fa0c20fd795aac7e9e6a196db901.jpg" mode="widthFix"></image>
<image src="https://yanxuan-item.nosdn.127.net/24926a19f720d8a942c44e228e3c6ec9.jpg" mode="widthFix"></image>
<image src="https://yanxuan-item.nosdn.127.net/c1db9a998a66646ce659db57b8c2ec6e.jpg" mode="widthFix"></image>
<image src="https://yanxuan-item.nosdn.127.net/a85e0b32e5790a287a95146f6fb266ed.jpg" mode="widthFix"></image>
<image src="https://yanxuan-item.nosdn.127.net/38c337287af16dce85634d870cb3db41.jpg" mode="widthFix"></image>
<image src="https://yanxuan-item.nosdn.127.net/6e4bdbf6c2945f1c8a3f62344f2056fe.jpg" mode="widthFix"></image>
<image src="https://yanxuan-item.nosdn.127.net/24460591cf09176f77082a86a8b03dae.jpg" mode="widthFix"></image>
<image src="https://yanxuan-item.nosdn.127.net/85d57e7b3c8e1cdcff5a19ce8f01ceaf.jpg" mode="widthFix"></image>
<image src="https://yanxuan-item.nosdn.127.net/2ebe43401d79a59c630ce086852f8d60.jpg" mode="widthFix"></image>
<image src="https://yanxuan-item.nosdn.127.net/026cfd7317a40ec2950183461c0e1ee1.jpg" mode="widthFix"></image>
<image src="https://yanxuan-item.nosdn.127.net/397bad0e51e14b64664c8e365aea3266.jpg" mode="widthFix"></image>
</view>
</view>
<!-- 立即购买 -->
<view class="footer">
<button type="default" hover-class="none" @click="buy">立即购买</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
current: 1
};
},
methods:{
buy(){
uni.navigateTo({
url: "./buy"
})
}
}
}
</script>
<style lang="scss">
.goods-swiper{
position: relative;
width: 100%;
padding-top: 110%;
background: $window-color;
&> swiper{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
.swiper-cover{
width: 100%;
height: 100%;
image{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
}
.swiper-pages{
position: absolute;
bottom:20rpx;
left: 0;
right: 0;
z-index: 9;
line-height: 90rpx;
text-align: center;
color: white;
font-size: $title-size-m;
text-shadow: 0 5rpx 5rpx rgba($color: #000000, $alpha: .02);
}
}
// 详情
.main{
position: relative;
z-index: 9;
margin-top: -20rpx;
background: white;
border-radius: $radius $radius 0 0;
box-shadow: 0 0 10rpx 10rpx rgba($color: #000000, $alpha: .02);
padding-bottom: ($padding*2) + 90;
.hr{
position: relative;
min-height: 1rpx;
margin: 0 $margin;
text-align: center;
text{
position: relative;
z-index: 1;
color: $text-gray;
font-size: $title-size-m;
background: white;
padding: 0 $padding;
}
&::after{
content: " ";
background: $border-color;
width: 100%;
height: 1rpx;
position: absolute;
left: 0;
top: 50%;
}
}
.title{
padding: $padding;
font-weight: bold;
font-size: $title-size + 14;
}
.sub-title{
padding: 0 $padding;
font-size: $title-size-m;
color: $text-gray;
}
.box-flex{
padding: $padding;
display: flex;
justify-content: space-between;
align-items: center;
.price{
font-weight: bold;
color: $text-price;
font-size: $title-size + 10;
text{
font-size: 80%;
margin-right: 10rpx;
}
}
.sales{
font-size: $title-size-m;
color: $text-gray;
}
}
.imgs{
image{
vertical-align: top;
width: 100%;
}
}
}
// 购买
.footer{
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: $padding;
z-index: 98;
background: white;
// linear-gradient(to top, white 86%, rgba(255,255,255,.0))
button{
background: $main-color;
color: white;
border-radius: $radius-lg;
height: 90rpx;
line-height: 90rpx;
font-weight: bold;
font-size: $title-size;
&::after{
display: none;
}
}
}
</style>

247
pages/store/index.vue Normal file
View File

@@ -0,0 +1,247 @@
<template>
<view class="content">
<!-- swiper -->
<view class="swiper">
<view class="swiper-box">
<swiper autoplay @change="swiperCount = $event.detail.current">
<swiper-item>
<image src="https://yanxuan.nosdn.127.net/static-union/163971170765382b.jpg" mode="aspectFill"></image>
</swiper-item>
<swiper-item>
<image src="https://yanxuan.nosdn.127.net/948240ec17accbb8bb2184bde9b62e8f.jpg" mode="aspectFill"></image>
</swiper-item>
</swiper>
<view class="swiper-pages">
<text class="pages-item" :class="{'show':swiperCount === 0}"></text>
<text class="pages-item" :class="{'show':swiperCount === 1}"></text>
</view>
</view>
</view>
<!-- 健康产品分类 -->
<!-- <view class="">
<view class="">（icon）10斤挑战</view>
<view class="">（icon）控卡主食</view>
<view class="">（icon）轻卡小食</view>
<view class="">（icon）肠胃呵护</view>
<view class="">（icon）燃力嗨吃</view>
</view> -->
<!-- 每日上新 -->
<view class="new-box">
<view class="title">上新精选</view>
<view class="news">
<view class="news-item" v-for="(item, index) in newGood" :key="index">
<view class="news-cover">
<image :src="item.cover" mode="aspectFill"></image>
</view>
<view class="news-title nowrap">{{item.name}}</view>
<view class="news-price nowrap">￥{{item.price.price_min}}</view>
</view>
</view>
</view>
<!-- 卡片区 -->
<!-- <view class="">
<view class="">（卡片）宝贝爱吃</view>
<view class="">（卡片）轻卡小食</view>
</view> -->
<!-- goods -->
<oct-goods
:lists="goodsArr"
color="#e6576b"
@onGoods="onGoods"
/>
</view>
</template>
<script>
export default {
data() {
return {
swiperCount: 0,
newGood : [
{
cover : "https://yanxuan-item.nosdn.127.net/0aabfb9974965f4983fcc71344022dc7.png",
name : "蜂蜜山楂条",
description : "酸甜软糯，松脆不粘牙",
price : {
price_min: 13
}
},{
cover : "https://yanxuan-item.nosdn.127.net/1b9003483b0c429403477cad336aa9d7.png",
name : "卤汁牛肉",
description : "松软蛋糕，浓醇奶香",
price : {
price_min: 39
}
},{
cover : "https://yanxuan-item.nosdn.127.net/ca123e1f1fac9af57df06a14d91e6417.png",
name : "东北开口松子",
description : "醇正松香，壳薄肉厚",
price : {
price_min: 42.8
}
},{
cover : "https://yanxuan-item.nosdn.127.net/b2aac81d1116fb3e4d2a747896064bdd.png",
name : "蓝莓果干",
description : "苹果汁浸泡，无蔗糖添加",
price : {
price_min: 19
}
}
],
goodsArr: [
{
goods_id : "",
cover : "https://yanxuan-item.nosdn.127.net/6d48e6ea51a06b1356ccda21497fdb14.png",
name : "茅台王子酒 金王子 53度 500毫升",
description : "酱香突出，优雅细腻",
price : {
price_min: 275
}
},{
goods_id : "",
cover : "https://yanxuan-item.nosdn.127.net/87357968bc1d8d8334557148d15296da.png",
name : "飞天53%vol 500ml贵州茅台酒（带杯）",
description : "茅台飘香，正品溯源",
price : {
price_min: 1499
}
},{
goods_id : "",
cover : "https://yanxuan-item.nosdn.127.net/57a95961e03552e8583d670431d68b92.png",
name : "赖茅酒 传承蓝 53度 500毫升*6瓶",
description : "传统酱香典范",
price : {
price_min: 2928
}
},{
goods_id : "",
cover : "https://yanxuan-item.nosdn.127.net/e83ebcf07e511c3ef24e2f2845ad0a28.jpg",
name : "开盖即食，冰糖银耳莲子羹 280克*9杯",
description : "开盖即食，清甜软糯",
price : {
price_min: 50
}
},{
goods_id : "",
cover : "https://yanxuan-item.nosdn.127.net/5a7e0c73b731f5c18941697dc7e1b522.jpg",
name : "奶油鸡蛋卷 150克（5袋）",
description : "香浓蛋味 入口即化",
price : {
price_min: 13.9
}
},{
goods_id : "",
cover : "https://balenciaga.dam.kering.com/m/611d17da66cdafac/Large-6801252104T1169_D.jpg",
name : "Hacker graffiti medium tote bag in canvas jacquard",
description : "Coming soon",
price : {
price_min: 13.9
}
}
]
};
},
methods:{
onGoods(val){
console.log(val)
uni.navigateTo({
url: "./goods"
})
}
}
}
</script>
<style lang="scss">
.content{
background: $window-color;
}
.new-box{
padding: 0 $padding;
.title{
font-size: $title-size-lg;
color: $text-color;
font-weight: bold;
}
.news{
margin: $margin/2 -10rpx 0;
display: flex;
.news-item{
margin: 0 10rpx;
width: calc(25% - 20rpx);
.news-cover{
position: relative;
width: 100%;
padding-top: 100%;
background-color: white;
border-radius: $radius-lg;
overflow: hidden;
image{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
.news-title{
margin-top: $margin/2;
font-size: $title-size-sm;
text-align: center;
color: $text-color;
line-height: 40rpx;
}
.news-price{
text-align: center;
font-size: $title-size-sm;
font-weight: bold;
color: $text-price;
line-height: 40rpx;
}
}
}
}
//
//
//
// swiper
.swiper{
background: linear-gradient(#FFF, #F3F6FB);
padding: $padding;
.swiper-box{
position: relative;
padding-top: 40%;
swiper,
image{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
image{
border-radius: $radius;
}
}
.swiper-pages{
position: absolute;
z-index: 9;
left: 0;
right: 0;
bottom: $margin - 10;
height: 7rpx;
text-align: center;
.pages-item{
vertical-align: top;
display: inline-block;
height: 7rpx;
width: 25rpx;
margin: 0 5rpx;
background: rgba($color: #fff, $alpha: .5);
&.show{
background: white;
}
}
}
}
</style>