Augcl
/
rice-front
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

上传

master
前端-胡立永 4 months ago
parent
9237b7bfb2
commit
1e258722e6
8 changed files with 193 additions and 218 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +83
    -0
      components/product/productItem.vue
  2. +6
    -6
      pages.json
  3. +15
    -115
      pages/index/category.vue
  4. +4
    -2
      pages/index/index.vue
  5. +0
    -3
      pages/index/order.vue
  6. +49
    -10
      pages_order/components/product/submit.vue
  7. +4
    -4
      pages_order/components/product/submitUnitSelect.vue
  8. +32
    -78
      pages_order/product/productDetail.vue

+ 83
- 0
components/product/productItem.vue View File

@ -0,0 +1,83 @@
<template>
<view class="item"
@click="$emit('click')">
<view class="item-image">
<image
:src="item.image || 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg'"
mode="aspectFill"></image>
</view>
<view class="info">
<view class="title">
小青蛙大米
</view>
<view class="desc">
500g每罐*2罐
</view>
<view class="price">
￥19.9
</view>
</view>
</view>
</template>
<script>
export default {
props : {
item : {
default : {}
}
},
data() {
return {
}
},
methods: {
}
}
</script>
<style scoped lang="scss">
.item {
padding: 10rpx 20rpx;
align-items: center;
margin-bottom: 20rpx;
display: flex;
width: 100%;
box-sizing: border-box;
.item-image {
width: 140rpx;
height: 140rpx;
flex-shrink: 0;
image{
height: 100%;
width: 100%;
border-radius: 20rpx;
}
}
.info {
padding: 20rpx;
color: #555;
flex: 1;
.title{
font-size: 28rpx;
font-weight: 900;
}
.desc{
font-size: 22rpx;
color: #777;
margin-top: 10rpx;
}
.price{
text-align: right;
color: #f40;
font-size: 30rpx;
font-weight: 900;
}
}
}
</style>

+ 6
- 6
pages.json View File

@ -23,12 +23,12 @@
"navigationBarTitleText": ""
}
},
{
"path": "pages/index/cart",
"style": {
"navigationBarTitleText": ""
}
},
// {
// "path": "pages/index/cart",
// "style": {
// "navigationBarTitleText": ""
// }
// },
{
"path" : "pages/index/member",
"style" :


+ 15
- 115
pages/index/category.vue View File

@ -1,6 +1,6 @@
<template>
<view class="page">
<navbar/>
<navbar title="商品列表" leftClick @leftClick="$utils.navigateBack" />
<view class="category">
<uv-vtabs
@ -10,36 +10,28 @@
:barItemBadgeStyle="{right:'20px',top:'12px'}"
@change="change">
<uv-vtabs-item>
<view class="category-title">
租赁
</view>
<view class="list">
<view class="item" v-for="(item,index) in list" :key="index"
@click="$utils.navigateTo('/pages_order/product/productDetail?id=123')">
<view class="item-image">
<image
:src="item.image"
mode="aspectFill"></image>
</view>
<view class="item-unit">
<text class="text">{{item.unit}}</text>
</view>
</view>
<productItem
v-for="(item, index) in 10"
:key="index"
:item="item"
@click="$utils.navigateTo('/pages_order/product/productDetail?id=123')"
/>
</view>
</uv-vtabs-item>
</uv-vtabs>
</view>
<tabber select="1" />
</view>
</template>
<script>
import tabber from '@/components/base/tabbar.vue'
import productItem from '@/components/product/productItem.vue';
import mixinsList from '@/mixins/list.js'
export default {
mixins : [mixinsList],
components: {
tabber,
productItem,
},
data() {
return {
@ -54,45 +46,6 @@
name : '桌布'
},
],
list : [
{
unit : '100*50*60',
image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg',
},
{
unit : '100*50*60',
image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg',
},
{
unit : '100*50*60',
image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg',
},
{
unit : '100*50*60',
image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg',
},
{
unit : '100*50*60',
image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg',
},
{
unit : '100*50*60',
image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg',
},
{
unit : '100*50*60',
image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg',
},
{
unit : '100*50*60',
image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg',
},
{
unit : '100*50*60',
image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg',
},
],
chain: false,
value: 0
}
},
@ -117,74 +70,21 @@
<style scoped lang="scss">
.page{
/deep/ .uv-vtabs{
height: calc(100vh - 360rpx) !important;
height: calc(100vh - 220rpx) !important;
}
/deep/ .uv-vtabs__bar{
height: calc(100vh - 360rpx) !important;
height: calc(100vh - 220rpx) !important;
}
/deep/ .uv-vtabs__content{
height: calc(100vh - 360rpx) !important;
height: calc(100vh - 220rpx) !important;
}
}
.category {
font-size: 30rpx;
color: #333;
.category-title{
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 120rpx;
&::before,
&::after {
position: absolute;
top: 50%;
content: '';
width: 10%;
border-top: 2rpx solid black;
}
&::before {
left: 25%;
}
&::after {
right: 25%;
}
}
.list{
display: flex;
flex-wrap: wrap;
margin: 0 auto;
width: 490rpx;
.item {
padding: 10rpx 20rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 20rpx;
.item-image {
width: 120rpx;
height: 120rpx;
image{
height: 100%;
width: 100%;
border-radius: 50%;
}
}
.item-unit {
font-size: 24rpx;
margin-top: 15rpx;
color: #555;
}
}
.gap {
padding: 0 30rpx;
}
width: 100%;
}
}

+ 4
- 2
pages/index/index.vue View File

@ -36,7 +36,8 @@
<image src="../../static/image/home/8.png" mode="aspectFill" />
</view>
<view class="commodity">
<view class="commodity"
@click="$utils.navigateTo('/pages/index/category')">
<view class="box">
<view class="top">
<view class="top-text">
@ -60,7 +61,8 @@
</view>
</view>
<view class="commodity">
<view class="commodity"
@click="$utils.navigateTo('/pages/index/category')">
<view class="box">
<view class="top">
<view class="top-text">


+ 0
- 3
pages/index/order.vue View File

@ -83,14 +83,11 @@
</template>
<script>
import tabber from '@/components/base/tabbar.vue'
import { mapGetters } from 'vuex'
export default {
components : {
tabber,
},
computed : {
...mapGetters(['userShop']),
},
data() {
return {


+ 49
- 10
pages_order/components/product/submit.vue View File

@ -1,6 +1,6 @@
<template>
<view class="submit">
<view class=""
<!-- <view class=""
@click="$emit('share')">
<uv-icon
size="40rpx"
@ -17,10 +17,20 @@
<view class="">
购物车
</view>
</view>
<view class="btn"
</view> -->
<!-- <view class="btn"
@click="$emit('submit')">
{{ submiitTitle }}
</view> -->
<view class="submit-btn"
@click="$emit('submit')">
<view class="l">
加入购物车
</view>
<view class="r">
{{ submiitTitle }}
</view>
</view>
</view>
</template>
@ -57,21 +67,50 @@
justify-content: center;
align-items: center;
font-size: 24rpx;
.btn{
background: $uni-color;
// .btn{
// background: $uni-color;
// width: 600rpx;
// height: 80rpx;
// color: #fff;
// border-radius: 40rpx;
// font-size: 28rpx;
// }
// view{
// width: 100rpx;
// margin: 0 10rpx;
// display: flex;
// justify-content: center;
// align-items: center;
// flex-direction: column;
// }
.submit-btn{
width: 600rpx;
height: 80rpx;
color: #fff;
border-radius: 40rpx;
font-size: 28rpx;
}
view{
width: 100rpx;
margin: 0 10rpx;
margin: 20rpx auto;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
border: 1rpx solid $uni-color;
overflow: hidden;
.l{
flex: 1;
display: flex;
justify-content: center;
align-items: center;
color: $uni-color;
}
.r{
background: $uni-color;
flex: 1;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
}
}
</style>

+ 4
- 4
pages_order/components/product/submitUnitSelect.vue View File

@ -47,7 +47,7 @@
</view>
<!-- 规格 -->
<view class="submit-unit">
<!-- <view class="submit-unit">
<view class="title">
规格选择
</view>
@ -59,7 +59,7 @@
{{ item.title }}
</view>
</view>
</view>
</view> -->
@ -77,7 +77,7 @@
<view class="submit-btn">
<view class="l"
@click="addCart">
加入租赁车
加入购物车
</view>
<view class="r"
@click="orderPay">
@ -105,7 +105,7 @@
},
props : {
submiitTitle : {
default : '立即租赁',
default : '立即购买',
type : String,
},
detail : {


+ 32
- 78
pages_order/product/productDetail.vue View File

@ -1,66 +1,37 @@
<template>
<view class="page">
<navbar title="商品详情" leftClick @leftClick="$utils.navigateBack" />
<navbar
bgColor="transparent"
style="position: absolute;"
leftClick @leftClick="$utils.navigateBack" />
<view class="swipe">
<uv-swiper
:list="productDetail.image.split(',')"
indicator
height="350rpx"></uv-swiper>
height="520rpx"></uv-swiper>
</view>
<view class="info">
<view class="title">
桌布租赁
</view>
<view class="info-line">
<view class="price">
￥<text>45.9</text>起
<view class="">
<view class="title">
三只青蛙低GI大米
</view>
<view class="num">
已售1000+
<image src="../static/product/like.png" mode=""></image>
<view class="desc">
三只青蛙低GI大米500g每罐
</view>
</view>
<view class="tips">
<view class="tip">
专业设备
</view>
<view class="tip">
科学流程
<view class="">
<view class="price">
￥<text>9.9</text>起
</view>
<view class="tip">
质量保证
<view class="oldPrice">
￥<text>45.9</text>起
</view>
</view>
</view>
<view class="info-unit">
<uv-cell title="是否有桌布" isLink>
<template #icon>
<text class="text">桌布</text>
</template>
</uv-cell>
<uv-cell title="请选择规格" isLink>
<template #icon>
<text class="text">规格</text>
</template>
</uv-cell>
<uv-cell>
<template #icon>
<text>上门取件·送货上门</text>
</template>
</uv-cell>
</view>
<view class="content">
<view class="title">
商品详情
</view>
<uv-parse :content="productDetail.content"></uv-parse>
</view>
<uv-parse :content="productDetail.content"></uv-parse>
<!-- 分享和租赁按钮 -->
<submit
@ -112,37 +83,27 @@
.info{
padding: 30rpx;
background-color: #fff;
display: flex;
justify-content: space-between;
.title{
font-size: 34rpx;
font-weight: 900;
}
.info-line{
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 30rpx;
.price{
font-size: 28rpx;
color: $uni-color;
text{
font-size: 34rpx;
}
}
.num{
font-size: 24rpx;
image{
width: 24rpx;
height: 24rpx;
}
}
.price{
font-size: 34rpx;
color: $uni-color;
font-weight: 900;
text-align: right;
}
.tips{
display: flex;
font-size: 20rpx;
margin-top: 30rpx;
.tip{
margin-right: 40rpx;
}
.oldPrice{
font-size: 26rpx;
color: #999;
text-align: right;
text-decoration: line-through;
}
.desc{
font-size: 26rpx;
color: #777;
}
}
.info-unit{
@ -158,12 +119,5 @@
font-size: 26rpx;
}
}
.content{
background-color: #fff;
margin-top: 20rpx;
.title{
padding: 30rpx;
}
}
}
</style>

Write Preview
Loading…
Cancel
Save