mkm/nk-shop2.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

界面优化

Browse Source
This commit is contained in:
jia 2023-09-05 10:07:29 +08:00
parent 91f47b8021
commit 6c2bf15dd0
2 changed files with 789 additions and 882 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
pages/index/index.vue
View File

@ -37,78 +37,6 @@
</view> </view>
<view class="goodslist"> <view class="goodslist">
<WaterfallsFlow :wfList='cateGoods' /> <WaterfallsFlow :wfList='cateGoods' />
<!-- <view class="goods">
<view v-for="(item,index) in cateGoods" :key="index">
<view :class="[index%2==0?'goods_item':'goods_items']" @click="gogogo(item)">
<view class="kk" v-if="index%2==0">
<image :src="item.image[0]" mode="aspectFit" style="width:'365rpx';height:251rpx">
</image>
</view>
<view style="width:'365rpx';height:336rpx" v-else>
<image :src="item.image[0]" mode="aspectFit" style="width:'365rpx';height:336rpx">
</image>
</view>
<view class="goods_item_img" v-if="item.video_link.length>0">
<image src="@/static/images/sp.png" mode="aspectFit"></image>
</view>
<view class="botm">
<view class="title">{{item.title}}</view>
<view class="goods_info flex_a_c">
<view class="l_info flex_a_c">
<image :src="(item.author && item.author.avatar) || '/static/images/f.png'"
mode="aspectFit" class="g_img"></image>
<view class="g_name">{{item.author && item.author.nickname}}</view>
</view>
<view class="nice_box" @click.stop="giveStart(item)">
<text class="iconfont"
:class="item.relevance_id ? 'icon-shoucang1' : 'icon-dianzan'"></text>
<text class="collect">{{item.count_start}}</text>
</view>
</view>
</view>
</view>
</view>
</view> -->
<!--<view class="goods">
<view v-for="(item,i) in cateGoods" :key="i" v-if='i%2!=0'>
<view class="goods_item" @click="gogogo(item)">
<view style="height: 251rpx;">
<u--image :src="item.image[0]" width="356rpx" height="251rpx" :showLoading="true"
lazyLoad fade duration="450">
<template v-slot:loading>
<u-loading-icon color="#f5f5f5"></u-loading-icon>
</template>
</u--image>
</view>
<view class="goods_item_img" v-if="item.video_link.length>0">
<image src="@/static/images/sp.png" mode="aspectFit"></image>
</view>
<view class="botm">
<view class="title">{{item.title}}</view>
<view class="goods_info flex_a_c">
<view class="l_info flex_a_c">
<image :src="(item.author && item.author.avatar) || '/static/images/f.png'"
mode="aspectFit" class="g_img"></image>
<view class="g_name">{{item.author && item.author.nickname}}</view>
</view>
<view class="nice_box" @click.stop="giveStart(item)">
<text class="iconfont"
:class="item.relevance_id ? 'icon-shoucang1' : 'icon-dianzan'"></text>
<text class="collect">{{item.count_start}}</text>
</view>
</view>
</view>
</view>
</view>
</view>
-->
</view> </view>
<view class="empty_wrapper" v-if="emptyShow"> <view class="empty_wrapper" v-if="emptyShow">
<u-empty :show="emptyShow" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty> <u-empty :show="emptyShow" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
@ -226,7 +154,6 @@
this.getCateList() this.getCateList()
this.cateGoods = [] this.cateGoods = []
this.getGoods() this.getGoods()
this.Area() this.Area()
uni.stopPullDownRefresh() uni.stopPullDownRefresh()
}, },
@ -257,7 +184,6 @@
onReachBottom() { onReachBottom() {
if (this.status == 'nomore') return; if (this.status == 'nomore') return;
this.status = 'loading'; this.status = 'loading';
this.where.page = ++this.where.page; this.where.page = ++this.where.page;
this.getGoods() this.getGoods()
}, },
@ -479,6 +405,7 @@
graphicLstApi(this.where).then(res => { graphicLstApi(this.where).then(res => {
this.cateGoods.push(...res.data.list) this.cateGoods.push(...res.data.list)
if (res.data.list.length < this.where.limit) this.status = 'nomore' if (res.data.list.length < this.where.limit) this.status = 'nomore'
if (this.where.page == 1 && res.data.list.length <= 0) this.emptyShow = true if (this.where.page == 1 && res.data.list.length <= 0) this.emptyShow = true
@ -513,6 +440,7 @@
this.cateGoods = [] this.cateGoods = []
this.where.category_id = item.category_id this.where.category_id = item.category_id
this.emptyShow = false this.emptyShow = false
this.status = 'loadmore'
this.where.page = 1 this.where.page = 1
this.getGoods(item) this.getGoods(item)
this.street_id = item.id this.street_id = item.id

181
pages/supply_chains/supply_chains.vue
View File

@ -5,7 +5,8 @@
<view class="site-box flex_a_c_j_sb" :style="{'background-color':backColor}"> <view class="site-box flex_a_c_j_sb" :style="{'background-color':backColor}">
<view :class="['place_wrapper','flex_a_c',isFshow?'sitebox':'']" @click="selectLocation"> <view :class="['place_wrapper','flex_a_c',isFshow?'sitebox':'']" @click="selectLocation">
<view :class="['iconfont','icon-weizhi',isFshow?'sitebox':'']" style="color:#000;margin-left: 20rpx;"> <view :class="['iconfont','icon-weizhi',isFshow?'sitebox':'']"
style="color:#000;margin-left: 20rpx;">
</view> </view>
<view class="town_name" style="color:#000;">{{street}}</view> <view class="town_name" style="color:#000;">{{street}}</view>
</view> </view>
@ -18,20 +19,13 @@
</view> </view>
<zbpSwiper <zbpSwiper :isSelectPlace="true" :town="street" :streetname="street" :location_Arr="locationArr"
:isSelectPlace="true" @change="dchange">
:town="street"
:streetname="street"
:location_Arr="locationArr"
@change="dchange"
>
</zbpSwiper> </zbpSwiper>
<view class="list"> <view class="list">
<navigator <navigator hover-class="none"
hover-class="none" :url="`/pages/nongKe/supply_chain/supplier?type_id=10&street_id=${street_id}`">
:url="`/pages/nongKe/supply_chain/supplier?type_id=10&street_id=${street_id}`"
>
<view class="list-m"> <view class="list-m">
<image src="@/static/images/f6.png" mode="aspectFit"></image> <image src="@/static/images/f6.png" mode="aspectFit"></image>
<view class="list-title"> <view class="list-title">
@ -80,10 +74,7 @@
</view> </view>
<view class="list-con"> <view class="list-con">
<view <view class="list-con-left" @tap="navgo('/pages/nongKe/specialty/index')">
class="list-con-left"
@tap="navgo('/pages/nongKe/specialty/index')"
>
<!-- <view class="list-con-title"> <!-- <view class="list-con-title">
<view class="con-titlea"> <view class="con-titlea">
名优特产 名优特产
@ -95,11 +86,7 @@
<image src="@/static/images/f5.png" mode="aspectFit"></image> <image src="@/static/images/f5.png" mode="aspectFit"></image>
</view> </view>
<view class="list-con-right"> <view class="list-con-right">
<view <view class="con-right" style="margin-bottom: 20rpx" @click="navaction(1)">
class="con-right"
style="margin-bottom: 20rpx"
@click="navaction(1)"
>
<!-- <view class="list-con-title"> <!-- <view class="list-con-title">
<view class="con-titlea"> <view class="con-titlea">
当地美食 当地美食
@ -130,24 +117,12 @@
<WaterfallsFlow :wfList="cateGoods" /> <WaterfallsFlow :wfList="cateGoods" />
</view> </view>
<view class="empty_wrapper" v-if="emptyShow"> <view class="empty_wrapper" v-if="emptyShow">
<u-empty <u-empty :show="emptyShow" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
:show="emptyShow"
mode="list"
icon="http://cdn.uviewui.com/uview/empty/list.png"
></u-empty>
</view> </view>
</view> </view>
<u-picker <u-picker :defaultIndex="[0, 0]" :show="showPicker" ref="uPicker" :columns="columnData" @confirm="confirm"
:defaultIndex="[0, 0]" @cancel="showPicker = false" @change="changeHandler" keyName="name"></u-picker>
:show="showPicker"
ref="uPicker"
:columns="columnData"
@confirm="confirm"
@cancel="showPicker = false"
@change="changeHandler"
keyName="name"
></u-picker>
<u-loadmore :status="status" v-if="cateGoods.length >= where.limit" /> <u-loadmore :status="status" v-if="cateGoods.length >= where.limit" />
<view class="location" v-if="isshow"> <view class="location" v-if="isshow">
@ -158,41 +133,41 @@
</template> </template>
<script> <script>
import mTabbar from '@/components/m-tabbar/m-tabbar.vue' import mTabbar from '@/components/m-tabbar/m-tabbar.vue'
import zbpSwiper from '@/components/zbpSwiper' import zbpSwiper from '@/components/zbpSwiper'
import easyLoadimage from '@/components/easy-loadimage/easy-loadimage.vue'; import easyLoadimage from '@/components/easy-loadimage/easy-loadimage.vue';
import WaterfallsFlow from '@/components/WaterfallsFlow/WaterfallsFlowo.vue' import WaterfallsFlow from '@/components/WaterfallsFlow/WaterfallsFlowo.vue'
import Cache from '@/utils/cache'; import Cache from '@/utils/cache';
import { import {
getSlideAPI getSlideAPI
} from '@/api/lihai.js' } from '@/api/lihai.js'
import { import {
graphicLstApi, graphicLstApi,
getTopicList, getTopicList,
graphicStartApi graphicStartApi
} from '@/api/community.js' } from '@/api/community.js'
import { import {
getIndexData, getIndexData,
getDiy, getDiy,
} from '@/api/api.js' } from '@/api/api.js'
import { import {
spuInfo spuInfo
} from '@/api/product.js'; } from '@/api/product.js';
import { import {
getGeocoder, getGeocoder,
merClassifly, merClassifly,
getProductHot getProductHot
} from '@/api/store.js'; } from '@/api/store.js';
import { import {
getArea, getArea,
getStreet getStreet
} from '@/api/article.js'; } from '@/api/article.js';
import { import {
Toast Toast
} from '@/libs/uniApi' } from '@/libs/uniApi'
export default { export default {
components: { components: {
mTabbar, mTabbar,
zbpSwiper, zbpSwiper,
@ -333,7 +308,7 @@ export default {
this.cateGoods.push(...res.data.list) this.cateGoods.push(...res.data.list)
}) })
} else { } else {
getProductHot(this.where.page,this.where.limit).then(res => { getProductHot(this.where.page, this.where.limit).then(res => {
this.cateGoods.push(...res.data.list) this.cateGoods.push(...res.data.list)
}) })
} }
@ -542,21 +517,21 @@ export default {
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
/deep/.color-lump { /deep/.color-lump {
display: none; display: none;
} }
page { page {
background: #f4f7fe; background: #f4f7fe;
// background: linear-gradient(180deg, #FFFFFF 0%, #F6F6F6 100%); // background: linear-gradient(180deg, #FFFFFF 0%, #F6F6F6 100%);
} }
.location { .location {
background-color: #f6f6f6; background-color: #f6f6f6;
width: 680rpx; width: 680rpx;
height: 150rpx; height: 150rpx;
@ -581,20 +556,20 @@ page {
font-size: 20rpx; font-size: 20rpx;
color: #5a5a5a; color: #5a5a5a;
} }
} }
.Circle_friends { .Circle_friends {
position: relative; position: relative;
padding: 0 0 87.72rpx 0; padding: 0 0 87.72rpx 0;
} }
.sitebox { .sitebox {
animation-name: fadeIn; animation-name: fadeIn;
animation-duration: 3s; animation-duration: 3s;
animation-fill-mode: forwards; animation-fill-mode: forwards;
} }
@keyframes fadeIn { @keyframes fadeIn {
from { from {
opacity: 0; opacity: 0;
} }
@ -602,9 +577,9 @@ page {
to { to {
opacity: 1; opacity: 1;
} }
} }
.site-box { .site-box {
width: 100%; width: 100%;
/* #ifdef MP || APP-PLUS */ /* #ifdef MP || APP-PLUS */
height: 160rpx; height: 160rpx;
@ -645,42 +620,42 @@ page {
font-size: 30rpx; font-size: 30rpx;
font-size: 35.09rpx; font-size: 35.09rpx;
} }
} }
.circle_friends_wrapper { .circle_friends_wrapper {
position: relative; position: relative;
z-index: 2; z-index: 2;
} }
/deep/.u-tabs__wrapper__nav__line { /deep/.u-tabs__wrapper__nav__line {
width: 46rpx; width: 46rpx;
} }
/deep/.u-tabs__wrapper__nav__item { /deep/.u-tabs__wrapper__nav__item {
padding: 0 0px; padding: 0 0px;
padding-right: 10rpx; padding-right: 10rpx;
} }
.search_wrapper { .search_wrapper {
width: 694.74rpx; width: 694.74rpx;
margin: 0 auto; margin: 0 auto;
} }
.tabs_wrapper { .tabs_wrapper {
width: 720rpx; width: 720rpx;
margin: 0 auto; margin: 0 auto;
margin-bottom: 21.05rpx; margin-bottom: 21.05rpx;
// margin-left: -20rpx; // margin-left: -20rpx;
} }
.empty_wrapper { .empty_wrapper {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.article_box { .article_box {
height: 100%; height: 100%;
width: 694.74rpx; width: 694.74rpx;
margin: 0 auto; margin: 0 auto;
@ -731,9 +706,9 @@ page {
} }
} }
} }
} }
.tabs_wrapper { .tabs_wrapper {
width: 723rpx; width: 723rpx;
margin: 0rpx auto; margin: 0rpx auto;
margin-bottom: 21.05rpx; margin-bottom: 21.05rpx;
@ -751,9 +726,9 @@ page {
margin-right: 7.02rpx; margin-right: 7.02rpx;
} }
} }
} }
.list { .list {
display: flex; display: flex;
padding: 12rpx; padding: 12rpx;
justify-content: space-between; justify-content: space-between;
@ -776,19 +751,22 @@ page {
position: relative; position: relative;
.titlea-con { .titlea-con {
position: absolute; width: 96rpx;
top: 20rpx; height: 100rpx;
color: #f4f7fe; color: #f4f7fe;
.titlea { .titlea {
margin-top: 12rpx; position: absolute;
top: 32rpx;
margin-left: 12rpx; margin-left: 12rpx;
font-size: 16rpx; font-size: 16rpx;
font-family: PingFang SC-Semibold, PingFang SC; font-family: PingFang SC-Semibold, PingFang SC;
} }
.titleb { .titleb {
margin-top: 6rpx; position: absolute;
bottom:8rpx;
font-size: 37rpx; font-size: 37rpx;
font-family: PingFang SC-Semibold, PingFang SC; font-family: PingFang SC-Semibold, PingFang SC;
font-weight: 600; font-weight: 600;
@ -824,10 +802,11 @@ page {
.list-title-info { .list-title-info {
// width: 98rpx; // width: 98rpx;
height: 30rpx; height: 30rpx;
line-height: 30rpx;
background: #ffffff; background: #ffffff;
padding: 2rpx 2rpx; padding: 2rpx 2rpx;
display: flex; display: flex;
font-size: 10rpx;
font-size: 18rpx; font-size: 18rpx;
font-family: PingFang SC-Medium, PingFang SC; font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
@ -856,9 +835,9 @@ page {
height: 100%; height: 100%;
} }
} }
} }
.list-con { .list-con {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-top: -10rpx; margin-top: -10rpx;
@ -935,9 +914,9 @@ page {
} }
} }
} }
} }
.list-bon { .list-bon {
width: 724rpx; width: 724rpx;
height: 128rpx; height: 128rpx;
margin: 0 auto; margin: 0 auto;
@ -947,10 +926,10 @@ page {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.goodslist { .goodslist {
margin: 0 auto; margin: 0 auto;
width: 725rpx; width: 725rpx;
} }
</style> </style>