界面优化

This commit is contained in:
jia 2023-09-25 14:49:39 +08:00
commit 16ca15803e
5 changed files with 1102 additions and 510 deletions

View File

@ -1,20 +1,5 @@
<template>
<view class="">
<!-- <view class="cloud_entrepot" :style="{'min-height': winHeight + 'px'}">
<view class="head-wrapper"></view>
<view class="town-title">{{town}}里海云仓</view>
<view class="body-wrapper">
<block v-for="(item,index) in cloudList" :key="index">
<navigator class="item"
:url="`/pages/nongKe/goods_list/index?cate_id=${item.category_id}&street=${street_code}&name=${item.category_name}`"
:style="{'background-image': `url(${item.background})`}">
<text class="item-title">{{item.category_name}}云仓服务</text>
<text>{{item.description}}</text>
<view class="chakan-btn">查看</view>
</navigator>
</block>
</view>
</view> -->
<view class="">
<view class="">
@ -25,24 +10,14 @@
width="50.82rpx" height="50.82rpx" @click='goBack'></u--image>
<u--image v-else :showLoading="true" src="/static/images/LHYC/PFH.png" width="50.82rpx"
height="50.82rpx" @click='goBack'></u--image>
<view class="head_tit" :style="{color:cloudList.length>0?'':'black'}">
<view class="head_tit" v-if="cloudList.length"
style="font-size: 40rpx;transform: skewX(-10deg);font-weight: bold;"
:style="{color:cloudList.length>0?'':'black'}">
{{town}}里海云仓
</view>
<view class="sl" :class="{actsl:showSelect}" @click="showSelect=!showSelect">
<u--image :showLoading="true" src="/static/images/GXSC/BSL.png" width="33.29rpx"
height="33.29rpx"></u--image>
</view>
</view>
<view class="" style="display: flex;align-items: center;">
<view style="display: flex;align-items: center;z-index: 999999;">
<u--image :showLoading="true" v-if="cloudList.length>0"
src="/static/images/LHYC/DWB.png" width="50.82rpx" height="50.82rpx"></u--image>
<u--image :showLoading="true" v-else src="/static/images/LHYC/DWB1.png" width="50.82rpx"
height="50.82rpx"></u--image>
<view class="town_name" :style="{color:cloudList.length>0?'':'black'}"
@click="showpick">{{street}}</view>
</view>
<view class="head_r" @click="showPop=true">
<view class="head_r" @click="showPop=true" v-if="cloudList.length>0">
<u--image v-if="cloudList.length>0" :showLoading="true" src="/static/images/LHYC/QB.png"
width="50.82rpx" height="50.82rpx"></u--image>
<u--image v-else :showLoading="true" src="/static/images/LHYC/QB1.png" width="50.82rpx"
@ -50,22 +25,9 @@
</view>
</view>
</view>
<view class="selected-list" :style="`top:${headtop}px`" :class="{actSel:showSelect}">
<div class="triangle-up"></div>
<view
@click="navgo(`/pages/nongKe/supply_chain/supplier?type_id=10&street_id=${street_code}&townName=${street}`)">
供销综合云市场 <text></text>
</view>
<view class="selected-li">
供销综合云商品 <text> <u--image style="margin-left: 40rpx;" :showLoading="true"
src="/static/images/GXSC/XZ.png" width="24.53rpx" height="24.53rpx"></u--image>
</text>
</view>
</view>
</view>
@ -80,7 +42,7 @@
<u--image :showLoading="true" src="/static/images/LHYC/FH.png" width="50.82rpx"
height="50.82rpx" @click='goBack'></u--image>
</view>
<view class="" style="font-size: 40rpx;transform: skewX(-10deg);">
<view class="" style="font-size: 40rpx;transform: skewX(-10deg);font-weight: 700;">
供销综合云市场
</view>
</view>
@ -285,8 +247,17 @@
</view>
</view>
<view class="empty" style="" v-if="cloudList.length<=0">
<view style="height: var(--status-bar-height);"></view>
<view style="padding: 10rpx;">
<view class="info">
@ -298,16 +269,21 @@
</view>
</view>
<!-- 多规格购物车 -->
<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse">
</authorize>
<view class="" :style="`height:${appInfo.bottom}px;background-color:white`">
<view class="" :style="`height:${appInfo.bottom}px;`">
</view>
</view>
<view class="">
<u-picker :defaultIndex="defaInd" :show="showPicker" ref="uPicker" :columns="columnData" @confirm="confirm"
@cancel="showPicker = false" @change="changeHandler" keyName="name"></u-picker>
@ -549,7 +525,11 @@
},
onPageScroll(e) {
let that = this
// if (e.scrollTop > 0) {
this.showtit = !Boolean(e.scrollTop)
// }
// console.log(e)
uni.createSelectorQuery()
.in(this)
.select('.content')
@ -786,7 +766,7 @@
},
navgo(url) {
uni.navigateTo({
uni.redirectTo({
url
})
},

File diff suppressed because it is too large Load Diff

View File

@ -4,70 +4,88 @@
<view class='productList' :style="viewColor">
<!-- 顶部 -->
<view class="top">
<view style="height: 10px;">
</view>
<view class="head_tit">
<view class="" style="display: flex;align-items: center;">
<view class="back" @click='backjJump()' style="margin-right: 17rpx;">
<view class="iconfont icon-xiangzuo" style="color: #333333;"></view>
</view>
<view class="" style="font-size: 40rpx;">
<u--image :showLoading="true" src="/static/images/LHYC/PFH.png" width="50.82rpx"
height="50.82rpx" @click='backjJump'></u--image>
<view class=""
style="font-size: 36.8rpx;font-weight: 700;transform: skewX(-10deg);margin-left: 20rpx;color: #F84221;">
供销综合云市场
</view>
<view style="margin-left: 20rpx;transition: 0.3s;" @click="showSelect=!showSelect"
<view class=""
@click="navGoto(`/pages/nongKe/cloud_entrepot/indexa?street=${street_id}&town=${street}`)"
style="font-size: 36.8rpx;font-weight: 700;transform: skewX(-10deg);margin-left: 60rpx;">
供销综合云商品
</view>
<!-- <view style="margin-left: 20rpx;transition: 0.3s;" @click="showSelect=!showSelect"
:class="{selects:showSelect}">
<u--image :showLoading="true" src="/static/images/GXSC/XL.png" width="33.29rpx"
height="33.29rpx"></u--image>
</view>
</view> -->
</view>
<view class="">
</view>
<!-- 搜索框 -->
<view style="position: relative;width: 289.14rpx;" v-if="showSerch">
<!-- <view style="position: relative;width: 289.14rpx;" v-if="showSerch">
<u-search borderColor="#FF6D20" bgColor="white" @change="test" :showAction="false"
placeholder="请输入..." v-model="sotreParam.keyword" @search="onInputConfirm"
class="serch_cls"></u-search>
<u--image @tap="searchSubmit" class="img_cls" :showLoading="true"
src="/static/images/GXSC/SSBT.png" width="115.65rpx" height="56.82rpx"></u--image>
</view>
</view> -->
<!-- 位置 -->
<view v-else style="display: flex;align-items: center;" @click="showPicker=!showPicker">
<!-- <view v-else style="display: flex;align-items: center;">
<u--image @tap="showSerch=!showSerch" style="margin-right: 30rpx;" :showLoading="true"
src="/static/images/GXSC/SS.png" width="49rpx" height="49rpx"></u--image>
<u--image @click="showPicker=!showPicker" :showLoading="true" src="/static/images/GXSC/DW1.png"
width="50.82rpx" height="50.82rpx"></u--image>
<view class="town_name">{{street}}</view>
</view> -->
</view>
<view class="sswz">
<view style="position: relative;width: 501.17rpx;">
<u-search borderColor="#FF6D20" bgColor="white" @change="test" :showAction="false"
placeholder="搜索店铺或者名称" v-model="sotreParam.keyword" @search="onInputConfirm"
class="serch_cls"></u-search>
<u--image @tap="searchSubmit" class="img_cls" :showLoading="true"
src="/static/images/GXSC/SSBT.png" width="115.65rpx" height="56.82rpx"></u--image>
</view>
<view style="display: flex;align-items: center;" @click="showPicker=!showPicker">
<u--image :showLoading="true" src="/static/images/GXSC/DW1.png" width="50.82rpx"
height="50.82rpx"></u--image>
<view class="town_name">{{street}}</view>
</view>
</view>
<view class="selected-list" :class="{actSel:showSelect}">
<!-- <view class="selected-list" :class="{actSel:showSelect}">
<div class="triangle-up"></div>
<view class="selected-li">
供销综合云市场 <text> <u--image style="margin-left: 40rpx;" :showLoading="true"
src="/static/images/GXSC/XZ.png" width="24.53rpx" height="24.53rpx"></u--image> </text>
</view>
<view class=""
@click="navGoto(`/pages/nongKe/cloud_entrepot/index?street=${street_id}&town=${street}`)">
@click="navGoto(`/pages/nongKe/cloud_entrepot/indexa?street=${street_id}&town=${street}`)">
供销综合云商品
</view>
</view> -->
<view class="flags">
</view>
</view>
<view class="content">
<view style="height: 10px">
<view class="" :style="`height:${headTop}px`">
</view>
<view class="hot_serch">
<text>热搜:</text>
<!-- <text>热搜:</text>
<text @click="hotSerchFn('小张副食')">小张副食</text>
<text @click="hotSerchFn('正新酒店')">正新酒店</text>
<text @click="hotSerchFn('麻辣鸡')">麻辣鸡</text>
<text @click="hotSerchFn('手撕椒麻鸡')">手撕椒麻鸡</text>
<text @click="hotSerchFn('手撕椒麻鸡')">手撕椒麻鸡</text> -->
</view>
<view class="menu_cls">
@ -356,6 +374,7 @@
defaInd: [0, 0],
columnData: [],
showSerch: false,
headTop: 0,
imgList: [
"/static/images/GXSC/BBY.png",
"/static/images/GXSC/NYSC.png",
@ -473,6 +492,19 @@
this.menuList = res.data
})
this.Area()
let that = this
setTimeout(() => {
uni.createSelectorQuery()
.in(this)
.select('.flags')
.boundingClientRect(rect => {
// console.log(this.cartTagInfo, 6666)
// that.cartTagInfo = rect
that.headTop = rect.top
console.log(that.headTop)
})
.exec();
}, 100)
},
computed: {
downMenus: function() {
@ -531,7 +563,7 @@
city_code: 510500
}).then(res => {
this.$refs.uPicker.setColumnValues(0, res.data);
// this.Street(res.data[0]['code']);
this.Street(res.data[0]['code']);
// console.log(res.data, 66666)
});
},
@ -587,10 +619,10 @@
},
test() {
if (this.sotreParam.keyword.length > 3) {
this.sotreParam.keyword.slice(0, 3)
this.sotreParam.keyword = this.sotreParam.keyword.slice(0, 3) + "..."
}
// if (this.sotreParam.keyword.length > 3) {
// this.sotreParam.keyword.slice(0, 3)
// this.sotreParam.keyword = this.sotreParam.keyword.slice(0, 3) + "..."
// }
// console.log(this.sotreParam.keyword.length)
},
hotSerchFn(keywords) {
@ -933,6 +965,7 @@
align-items: center;
box-sizing: border-box;
padding: 0 20rpx;
}
.productList {
@ -941,9 +974,7 @@
.top {
padding-top: var(--status-bar-height);
/* #ifdef H5 */
padding-top: 30rpx;
/* #endif */
// padding-top: 80rpx;
background-color: #F0F2F5;
position: fixed;
@ -954,6 +985,7 @@
.content {
padding: 20rpx;
padding-top: 0;
}
.menu_cls {
@ -1066,24 +1098,7 @@
}
.hot_serch {
color: #B3B3B3;
display: flex;
justify-content: space-around;
margin-top: 40rpx;
flex-wrap: wrap;
// margin-top: 50rpx;
// padding-top: 100rpx;
padding-top: var(--status-bar-height);
// margin-top: 10px;
/* #ifdef H5 */
padding-top: 50rpx;
/* #endif */
// margin-top: 200rpx;
text {
margin: 10rpx;
}
height: 20rpx;
}
.productList .search .input {
@ -1577,4 +1592,12 @@
.pop {
z-index: 1;
}
.sswz {
margin-top: 30rpx;
display: flex;
justify-content: space-between;
box-sizing: border-box;
padding: 0 20rpx;
}
</style>

View File

@ -15,7 +15,8 @@
<view class="back" @click='backjJump()' style="margin-right: 17rpx;">
<view class="iconfont icon-xiangzuo" style="color: #333333;"></view>
</view>
<view class="" style="font-size: 40rpx;">
<view class=""
style="font-size: 36.8rpx;font-weight: 700;transform: skewX(-10deg);margin-left: 20rpx;">
{{titName}}
</view>
</view>

BIN
static/images/LHYC/DWBG.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB