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

上传

master
前端-胡立永 2 months ago
parent
e01ca1c945
commit
a8c02298a6
7 changed files with 130 additions and 220 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +24
    -10
      components/base/tabbar.vue
  2. +16
    -5
      components/product/productItem.vue
  3. +40
    -19
      components/user/productList.vue
  4. +9
    -4
      pages/index/category.vue
  5. +37
    -181
      pages/index/index.vue
  6. +3
    -0
      pages/index/order.vue
  7. +1
    -1
      uni.scss

+ 24
- 10
components/base/tabbar.vue View File

@ -39,19 +39,33 @@
"title": "首页", "title": "首页",
key : 'home', key : 'home',
}, },
// {
// "selectedIconPath": "/static/image/tabbar/member-a.png",
// "iconPath": "/static/image/tabbar/member.png",
// "pagePath": "/pages/index/member",
// "title": "会员",
// key : 'member',
// },
// {
// "selectedIconPath": "/static/image/tabbar/cart-a.png",
// "iconPath": "/static/image/tabbar/cart.png",
// "pagePath": "/pages/index/cart",
// "title": "购物车",
// key : 'cart',
// },
{ {
"selectedIconPath": "/static/image/tabbar/member-a.png",
"iconPath": "/static/image/tabbar/member.png",
"pagePath": "/pages/index/member",
"title": "会员",
key : 'member',
"selectedIconPath": "/static/image/tabbar/home-a.png",
"iconPath": "/static/image/tabbar/home.png",
"pagePath": "/pages/index/category",
"title": "分类",
key : 'category',
}, },
{ {
"selectedIconPath": "/static/image/tabbar/cart-a.png",
"iconPath": "/static/image/tabbar/cart.png",
"pagePath": "/pages/index/cart",
"title": "购物车",
key : 'cart',
"selectedIconPath": "/static/image/tabbar/home-a.png",
"iconPath": "/static/image/tabbar/home.png",
"pagePath": "/pages/index/order",
"title": "订单",
key : 'order',
}, },
{ {
"selectedIconPath": "/static/image/tabbar/center-a.png", "selectedIconPath": "/static/image/tabbar/center-a.png",


+ 16
- 5
components/product/productItem.vue View File

@ -1,5 +1,6 @@
<template> <template>
<view class="item" @click="$emit('click')">
<view class="item" @click="$emit('click')"
:style="{width}">
<view class="item-image"> <view class="item-image">
<image :src="item.image && <image :src="item.image &&
item.image.split(',')[0]" mode="aspectFill"> item.image.split(',')[0]" mode="aspectFill">
@ -7,7 +8,8 @@
</view> </view>
<view class="info"> <view class="info">
<view class="title">
<view class="title"
:style="{width : titleWidth}">
{{ item.title }} {{ item.title }}
</view> </view>
<view class="desc"> <view class="desc">
@ -41,7 +43,13 @@
props: { props: {
item: { item: {
default: {} default: {}
}
},
width : {
default : '100%',
},
titleWidth : {
default : '100px'
},
}, },
data() { data() {
return { return {
@ -60,7 +68,6 @@
align-items: center; align-items: center;
margin-bottom: 20rpx; margin-bottom: 20rpx;
display: flex; display: flex;
width: 100%;
box-sizing: border-box; box-sizing: border-box;
border-bottom: 1rpx solid #00000012; border-bottom: 1rpx solid #00000012;
@ -80,10 +87,14 @@
padding: 20rpx; padding: 20rpx;
color: #555; color: #555;
flex: 1; flex: 1;
.title { .title {
width: 300rpx;
font-size: 28rpx; font-size: 28rpx;
font-weight: 900; font-weight: 900;
overflow:hidden; //超出的文本隐藏
text-overflow:ellipsis; //溢出用省略号显示
white-space:nowrap; //溢出不换行
} }
.desc { .desc {


+ 40
- 19
components/user/productList.vue View File

@ -1,34 +1,41 @@
<template> <template>
<view class="list"> <view class="list">
<view class="item" <view class="item"
v-for="(item, index) in 10"
@click="$utils.navigateTo('/pages_order/product/productDetail?id=123')"
v-for="(item, index) in list"
@click="$utils.navigateTo('/pages_order/product/productDetail?id=' + item.id)"
:key="index"> :key="index">
<image <image
class="image" class="image"
src="https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg" mode=""></image>
:src="item.image &&
item.image.split(',')[0]" mode=""></image>
<view class="info"> <view class="info">
<view class="title"> <view class="title">
桌布租赁
{{ item.title }}
</view> </view>
<view class="price">
<text>￥58</text>元/起
<view style="display: flex;align-items: flex-end;">
<view class="price">
<text>￥{{ item.price }}</text>/件
</view>
<view class="oldPrice">
<text>￥{{ item.oldPrice }}</text>/件
</view>
</view> </view>
<view class="favorable">
<!-- <view class="favorable">
<view class="t"> <view class="t">
限时优惠 限时优惠
</view> </view>
<view class="p"> <view class="p">
￥48 ￥48
</view> </view>
</view>
</view> -->
<view class="num"> <view class="num">
已售卖5000+件 已售卖5000+件
</view> </view>
</view> </view>
<view class="btn"> <view class="btn">
<uv-icon name="shopping-cart"
color="#fff"></uv-icon>
购买
<!-- <uv-icon name="shopping-cart"
color="#fff"></uv-icon> -->
</view> </view>
</view> </view>
</view> </view>
@ -37,6 +44,11 @@
<script> <script>
export default { export default {
name:"productList", name:"productList",
props : {
list : {
default : []
},
},
data() { data() {
return { return {
@ -56,6 +68,7 @@
position: relative; position: relative;
width: 300rpx; width: 300rpx;
padding: 20rpx; padding: 20rpx;
// padding-bottom: 50rpx;
background-color: #fff; background-color: #fff;
border-radius: 20rpx; border-radius: 20rpx;
margin-top: 20rpx; margin-top: 20rpx;
@ -68,18 +81,25 @@
border-radius: 20rpx; border-radius: 20rpx;
} }
.info{ .info{
font-size: 26rpx;
font-size: 24rpx;
.title{ .title{
font-size: 30rpx;
font-size: 28rpx;
overflow:hidden; //超出的文本隐藏
text-overflow:ellipsis; //溢出用省略号显示
white-space:nowrap; //溢出不换行
} }
.price{ .price{
color: #D03F25;
color: $uni-color;
margin-top: 6rpx; margin-top: 6rpx;
text{ text{
font-size: 34rpx;
font-size: 30rpx;
font-weight: 900; font-weight: 900;
} }
} }
.oldPrice{
color: #888;
text-decoration: line-through;
}
.favorable{ .favorable{
display: flex; display: flex;
background-image: url(/static/image/product/favorable.png); background-image: url(/static/image/product/favorable.png);
@ -100,11 +120,12 @@
} }
} }
.btn{ .btn{
position: absolute;
right: 20rpx;
bottom: 20rpx;
padding: 10rpx;
border-radius: 50%;
padding: 10rpx 20rpx;
border-radius: 10rpx;
font-size: 24rpx;
color: #fff;
margin-left: auto;
width: fit-content;
background-color: $uni-color; background-color: $uni-color;
} }
} }


+ 9
- 4
pages/index/category.vue View File

@ -23,12 +23,16 @@
v-for="(item, index) in list" v-for="(item, index) in list"
:key="index" :key="index"
:item="item" :item="item"
width="350rpx"
titleWidth="350rpx"
@click="$utils.navigateTo('/pages_order/product/productDetail?id=' + item.id)" @click="$utils.navigateTo('/pages_order/product/productDetail?id=' + item.id)"
/> />
</view> </view>
</uv-vtabs-item> </uv-vtabs-item>
</uv-vtabs> </uv-vtabs>
</view> </view>
<tabber select="category" />
</view> </view>
</template> </template>
@ -37,10 +41,12 @@
import productItem from '@/components/product/productItem.vue'; import productItem from '@/components/product/productItem.vue';
import mixinsList from '@/mixins/list.js' import mixinsList from '@/mixins/list.js'
import { mapState } from 'vuex' import { mapState } from 'vuex'
import tabber from '@/components/base/tabbar.vue'
export default { export default {
mixins : [mixinsList], mixins : [mixinsList],
components: { components: {
productItem, productItem,
tabber,
}, },
data() { data() {
return { return {
@ -71,13 +77,13 @@
<style scoped lang="scss"> <style scoped lang="scss">
.page{ .page{
/deep/ .uv-vtabs{ /deep/ .uv-vtabs{
height: calc(100vh - 220rpx) !important;
height: calc(100vh - 470rpx) !important;
} }
/deep/ .uv-vtabs__bar{ /deep/ .uv-vtabs__bar{
height: calc(100vh - 220rpx) !important;
height: calc(100vh - 470rpx) !important;
} }
/deep/ .uv-vtabs__content{ /deep/ .uv-vtabs__content{
height: calc(100vh - 220rpx) !important;
height: calc(100vh - 470rpx) !important;
} }
.search { .search {
@ -102,7 +108,6 @@
color: #333; color: #333;
.list{ .list{
margin: 0 auto; margin: 0 auto;
width: 100%;
} }
} }

+ 37
- 181
pages/index/index.vue View File

@ -1,9 +1,9 @@
<template> <template>
<view class="page"> <view class="page">
<navbar bgColor="#88D259" />
<navbar />
<view class="bg-color"></view>
<!-- <view class="bg-color"></view> -->
<view class="page-title"> <view class="page-title">
<!-- {{ configList.index_title }} --> <!-- {{ configList.index_title }} -->
@ -11,9 +11,9 @@
style="width: 240rpx;" style="width: 240rpx;"
mode="widthFix"></image> --> mode="widthFix"></image> -->
<image :src="configList.index_img"
<!-- <image :src="configList.index_img"
style="width: 240rpx;" style="width: 240rpx;"
mode="widthFix"></image>
mode="widthFix"></image> -->
</view> </view>
<view class="search"> <view class="search">
@ -32,11 +32,11 @@
keyName="image"></uv-swiper> keyName="image"></uv-swiper>
</view> </view>
<view class="notice">
<!-- <view class="notice">
<uv-notice-bar fontSize="32rpx" <uv-notice-bar fontSize="32rpx"
@click="$utils.navigateTo('/pages_order/home/notice')" @click="$utils.navigateTo('/pages_order/home/notice')"
:text="notice"></uv-notice-bar> :text="notice"></uv-notice-bar>
</view>
</view> -->
<view class="menu"> <view class="menu">
<uv-grid :border="false" :col="4" > <uv-grid :border="false" :col="4" >
@ -53,108 +53,14 @@
<image :src="configList.qd_image" mode="widthFix" /> <image :src="configList.qd_image" mode="widthFix" />
</view> </view>
<view class="commodity"
@click="$utils.navigateTo('/pages/index/category')">
<view class="box">
<view class="top">
<view class="top-text">
<view>Experience the product</view>
<view>体验产品 ___ _</view>
</view>
</view>
<view class="centre">
<view class="boxs"
:key="index"
@click.stop="$utils.navigateTo('/pages_order/product/productDetail?id=' + item.id)"
v-for="(item, index) in riceProductList">
<view class="box-text">
<view>{{ item.title }}</view>
<view>{{ item.sku }}</view>
<text class="text1">{{ item.price }}</text>
<text class="text2">原价{{ item.oldPrice }}</text>
</view>
<view class="box-img">
<image :src="item.image &&
item.image.split(',')[0]" mode="aspectFill"></image>
</view>
</view>
</view>
</view>
</view>
<view class="commodity"
@click="$utils.navigateTo('/pages/index/category')">
<view class="box">
<view class="top">
<view class="top-text">
<view>Conventional product</view>
<view>常规产品 ___ _</view>
</view>
</view>
<view class="centre">
<view class="boxs"
:key="index"
@click.stop="$utils.navigateTo('/pages_order/product/productDetail?id=' + item.id)"
v-for="(item, index) in commonProductList">
<view class="box-text">
<view>{{ item.title }}</view>
<view>{{ item.sku }}</view>
<view class="text3">会员价 ￥<text>{{ item.vipPrice }}</text> </view>
<view class="text4">零售价￥{{ item.price }}</view>
</view>
<view class="box-img">
<image :src="item.image &&
item.image.split(',')[0]" mode="aspectFill"></image>
</view>
</view>
</view>
</view>
<view class="label">
<text>推荐宝贝</text>
</view> </view>
<view class="commodity">
<view class="box">
<view class="top">
<view class="top-text">
<view>News trends</view>
<view>新闻动态 ___ _</view>
</view>
<view class="top1"
@click="$utils.navigateTo('/pages_order/home/journalism')"
>
更多
</view>
</view>
<view class="centre">
<view class="boxs"
:key="index"
@click="$utils.navigateTo('/pages_order/home/newsDetail?id=' + item.id)"
v-for="(item, index) in newList"
>
<view class="images">
<image :src="item.image &&
item.image.split(',')[0]" mode="aspectFill"></image>
</view>
<view class="box-fone">
<view>{{ item.title }}</view>
<view>{{ item.title }}</view>
</view>
</view>
</view>
</view>
<view style="position: 20rpx;">
<productList :list="list"/>
</view> </view>
<view class="qr">
<view class="scan">扫码关注公众号</view>
<view class="qr-scan">
<image :src="configList.down_image" mode="aspectFill"></image>
</view>
<view class="qr-bottom">
<view
@click="saveImage(configList.down_image)"
>保存公众号二维码图片</view>
</view>
</view>
<PrivacyAgreementPoup /> <PrivacyAgreementPoup />
<customerServicePopup ref="customerServicePopup"/> <customerServicePopup ref="customerServicePopup"/>
@ -169,57 +75,28 @@
import tabber from '@/components/base/tabbar.vue' import tabber from '@/components/base/tabbar.vue'
import { mapState } from 'vuex' import { mapState } from 'vuex'
import customerServicePopup from '@/components/config/customerServicePopup.vue' import customerServicePopup from '@/components/config/customerServicePopup.vue'
import productList from '@/components/user/productList.vue'
import mixinsList from '@/mixins/list.js'
export default { export default {
mixins : [mixinsList],
components: { components: {
tabber, tabber,
PrivacyAgreementPoup, PrivacyAgreementPoup,
customerServicePopup, customerServicePopup,
productList,
}, },
data() { data() {
return { return {
notice: '', notice: '',
bannerList: [], bannerList: [],
baseList: [ baseList: [
// {
// image: '/static/image/home/0.png',
// title: '关于我们',
// path: '/pages_order/home/introduce',
// },
// {
// image: '/static/image/home/1.png',
// title: '产品介绍',
// },
// {
// image: '/static/image/home/2.png',
// title: '促销活动',
// },
// {
// image: '/static/image/home/3.png',
// title: '商城',
// },
// {
// image: '/static/image/home/4.png',
// title: '邀请好友',
// },
// {
// image: '/static/image/home/5.png',
// title: '新闻中心',
// path: '/pages_order/home/journalism',
// },
// {
// image: '/static/image/home/6.png',
// title: '企业合作',
// },
// {
// image: '/static/image/home/7.png',
// title: '联系我们',
// },
], ],
productList: [], productList: [],
keyword: '', keyword: '',
commonProductList : [],//常规产品 commonProductList : [],//常规产品
riceProductList : [],//体验产品 riceProductList : [],//体验产品
newList : [],//新闻列表 newList : [],//新闻列表
mixinsListApi : 'getClassShopPageList',
} }
}, },
computed: {}, computed: {},
@ -231,17 +108,17 @@
onShow() { onShow() {
this.getBanner() this.getBanner()
this.getRiceNoticeList() this.getRiceNoticeList()
this.getRiceCommonProductList()
this.getRiceProductList()
this.getRiceNewsList()
// this.getRiceCommonProductList()
// this.getRiceProductList()
// this.getRiceNewsList()
this.getRiceIconList() this.getRiceIconList()
}, },
onPullDownRefresh() { onPullDownRefresh() {
this.getBanner() this.getBanner()
this.getRiceNoticeList() this.getRiceNoticeList()
this.getRiceCommonProductList()
this.getRiceProductList()
this.getRiceNewsList()
// this.getRiceCommonProductList()
// this.getRiceProductList()
// this.getRiceNewsList()
}, },
methods: { methods: {
// 搜素 // 搜素
@ -352,7 +229,7 @@
top: 0; top: 0;
left: 0; left: 0;
height: 550rpx; height: 550rpx;
background: linear-gradient(to bottom, #88D259, #88D259, #fff);
background: linear-gradient(to bottom, #E3441A, #E3441A, #fff);
} }
.page-title { .page-title {
@ -433,6 +310,20 @@
width: 100%; width: 100%;
} }
} }
.label{
margin: 20rpx 0;
padding: 30rpx;
background-color: #fff;
display: flex;
justify-content: space-between;
text{
font-weight: 900;
}
.more{
color: $uni-color;
}
}
.commodity { .commodity {
display: flex; display: flex;
@ -588,40 +479,5 @@
} }
} }
.qr {
margin-top: 40rpx;
.scan {
text-align: center;
font-size: 28rpx;
color: #A2A2A2;
}
.qr-scan {
margin: 20rpx auto;
width: 400rpx;
height: 400rpx;
image {
height: 100%;
width: 100%;
}
}
.qr-bottom {
display: flex;
font-size: 28rpx;
color: #A2A2A2;
justify-content: space-around;
padding-bottom: 20rpx;
view {
border: 2rpx solid #A2A2A2;
padding: 20rpx;
border-radius: 45rpx;
}
}
}
} }
</style> </style>

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

@ -83,6 +83,7 @@
</view> </view>
</view> </view>
<tabber select="order" />
</view> </view>
</template> </template>
@ -90,9 +91,11 @@
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import mixinsList from '@/mixins/list.js' import mixinsList from '@/mixins/list.js'
import mixinsOrder from '@/mixins/order.js' import mixinsOrder from '@/mixins/order.js'
import tabber from '@/components/base/tabbar.vue'
export default { export default {
mixins : [mixinsList, mixinsOrder], mixins : [mixinsList, mixinsOrder],
components : { components : {
tabber,
}, },
computed : { computed : {
}, },


+ 1
- 1
uni.scss View File

@ -12,7 +12,7 @@
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件 * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
*/ */
/* 颜色变量 */ /* 颜色变量 */
$uni-color: #A3D250;
$uni-color: #E3441A;
/* 行为相关颜色 */ /* 行为相关颜色 */
$uni-color-primary: #007aff; $uni-color-primary: #007aff;


Write Preview
Loading…
Cancel
Save