界面优化

This commit is contained in:
jia 2023-10-09 17:54:37 +08:00
parent 109678f53a
commit a258376e12
3 changed files with 121 additions and 750 deletions

View File

@ -1,653 +0,0 @@
<template>
<view class="gather">
<view v-if="isFshow">
<view class="site-box flex_a_c_j_sb" :style="{ 'opacity': backColor,}" @click="selectLocation">
<view :class="['place_wrapper', 'flex_a_c', isFshow ? 'sitebox' : '']" @click="selectLocation">
<view :class="['iconfont', 'icon-weizhi', isFshow ? 'sitebox' : '']" style=" margin-left: 20rpx">
</view>
<view class="town_name">{{ street }}</view>
</view>
<navigator url="/pages/chat/customer_list/index?type=0" hover-class="none">
<view :class="['iconfont', 'icon-xiaoxi', isFshow ? 'sitebox' : '']"></view>
</navigator>
</view>
</view>
<view class="" v-if="!isFshow">
<view class="site-box1 flex_a_c_j_sb">
<view class="place_wrapper flex_a_c" @click="selectLocation">
<view class="iconfont icon-weizhi"></view>
<view class="town_name">{{street}}</view>
</view>
<navigator url="/pages/chat/customer_list/index?type=0" hover-class="none">
<view class="iconfont icon-xiaoxi" style="color:#fff;"> </view>
</navigator>
</view>
</view>
<zbpSwiper :isSelectPlace="true" :location_Arr="locationArr" :town="street" @kkchange="kkchange"></zbpSwiper>
<u-empty :show="jurisdiction" mode="permission" :text="emptyText"
icon="http://cdn.uviewui.com/uview/empty/permission.png"></u-empty>
<view class="business com special_work" v-if="jurisdiction == false">
<view class="title project">
<view>更多功能</view>
<view v-if="!editFlag" class="edit" @click="editFlag = true">编辑</view>
<view v-else class="edit" @click="editComfirm">完成</view>
</view>
<view class="content">
<block v-if="nowMenuList.length > 0">
<u-transition v-for="(item, index) in nowMenuList" :key="item.name" show>
<view class="examine" @click="
editFlag ? removeMenu(item) : clickMenu(item.type, item.data)
">
<image class="icon_img" :src="item.icon" mode="aspectFit">
</image>
<u-icon v-if="editFlag" class="icon" name="minus-circle-fill" color="red"></u-icon>
<text class="text">{{ item.name }}</text>
</view>
</u-transition>
</block>
<view v-else-if="!editFlag" @click="editFlag = true"
style="text-align: center; width: 100%; color: #aaa">还没有应用,点我添加应用</view>
</view>
</view>
<view v-if="editFlag" class="business com special_work edit_card">
<view class="title project" style="padding: 0 28rpx">
<view>编辑功能</view>
<view class="edit2" @click="editComfirm">完成</view>
</view>
<view class="content">
<u-transition v-for="(item, index) in AllMenuList" :key="item.name" show>
<view class="examine" @click="pushMenu(item)">
<image class="icon_img" :src="item.icon" mode="aspectFit">
</image>
<u-icon class="icon" name="plus-circle-fill"></u-icon>
<text class="text">{{ item.name }}</text>
</view>
</u-transition>
</view>
</view>
<u-picker :defaultIndex="[0,0]" :show="showPicker" ref="uPicker" :columns="columnData" @confirm="confirm"
@cancel="showPicker = false" @change="changeHandler" keyName="name"></u-picker>
<!-- <m-tabbar native>
<template v-slot:tabbar_index_2>
<view class="custom_style">
<view class="custom_style_icon"></view>
</view>
</template>
</m-tabbar> -->
</view>
</template>
<script>
import Cache from '@/utils/cache';
import mTabbar from '@/components/m-tabbar/m-tabbar.vue'
import zbpSwiper from '@/components/zbpSwiper'
import {
getArea,
getStreet
} from '@/api/article.js';
import {
mapState,
mapGetters
} from 'vuex'
import {
getWorkArticleCount,
getSlideAPI
} from '@/api/article.js'
import {
getStoreList,
getUserInfo
} from '@/api/user.js'
import {
getGeocoder,
microSeachBarCode,
microEadtProduct
} from '@/api/store.js'
import {
Toast
} from '@/libs/uniApi';
import {
getDiy
} from '@/api/api.js';
// #ifdef APP-PLUS
import uniMP from '@/utils/uniMP.js';
// #endif
export default {
components: {
mTabbar,
zbpSwiper
},
data() {
return {
locationArr: ({}),
emptyText: '暂无可用应用',
jurisdiction: false, //
mer_id: '',
userInfoData: {
mer_info: {
type_id: 0
}
},
prefix: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/11/',
isShow: false,
bgColor: '',
isFshow: false,
street: '',
//
editFlag: false,
//
AllMenuList: [{
name: '商户平台',
icon: '/static/applet/shop_app.png',
data: '/pages/moreProject/moreProject',
type: 2,
},
{
name: '供销平台',
icon: '/static/applet/gx_app.png',
data: '__UNI__B5B1EDD',
type: 1,
},
],
nowMenuList: [],
street: '',
showPicker: false,
columnData: [],
bgColor: '',
isFshow: false,
backColor: 'rgba(252, 252, 252, 0)'
};
},
computed: {
...mapGetters(['userInfo', 'location', 'isLogin'])
},
created() {},
onLoad() {
this.Area()
this.initMenu();
},
onShow() {
if (this.isLogin) {
this.emptyText = '暂无可用应用'
this.jurisdiction = false
} else {
this.emptyText = '请登录'
this.jurisdiction = true
}
this.getUserInfo()
},
onPullDownRefresh() {
this.getUserInfo()
uni.stopPullDownRefresh()
},
beforeDestroy() {
//
this.$bus.$off('value-updated')
},
mounted() {
if (this.street.length <= 0) {
this.appLocation()
}
// #ifdef H5
//
window.addEventListener("scroll", this.scrolling);
// #endif
this.$bus.$on('value-updated', (newValue) => {
//
this.street = newValue.split(',')[0]
});
},
// #ifdef APP-PLUS
onPageScroll(e) {
const scrollTop = e.scrollTop;
if (scrollTop <= 20) {
this.backColor = 'rgba(252, 252, 252, 0)'
this.isFshow = false
} else if (20 < scrollTop && scrollTop <= 100) {
this.backColor = 'rgba(252, 252, 252, .5)'
this.isFshow = true
} else if (scrollTop > 100) {
this.backColor = 'rgba(252, 252, 252, 1)'
this.isFshow = true
}
},
// #endif
methods: {
scrolling() {
//
let scrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop;
//
let scrollStep = scrollTop - this.oldScrollTop;
// console.log("header ", scrollTop);
//
this.oldScrollTop = scrollTop;
//windowHeight
let windowHeight =
document.documentElement.clientHeight || document.body.clientHeight;
//scrollHeight
let scrollHeight =
document.documentElement.scrollHeight || document.body.scrollHeight;
//
if (scrollTop + windowHeight == scrollHeight) {
//
// console.log("header ");
}
if (scrollTop <= 20) {
this.backColor = 'rgba(252, 252, 252, 0)'
this.isFshow = false
} else if (20 < scrollTop && scrollTop <= 100) {
this.backColor = 'rgba(252, 252, 252, .5)'
this.isFshow = true
} else if (scrollTop > 100) {
this.backColor = 'rgba(252, 252, 252, 1)'
this.isFshow = true
}
},
//
initMenu() {
let now = uni.getStorageSync('gatherNowMenuList');
try {
this.nowMenuList = JSON.parse(now);
this.AllMenuList = this.AllMenuList.filter((item) => {
return this.nowMenuList.find(t => t.name == item.name)?.name != item.name;
})
} catch (e) {
this.nowMenuList = [];
}
},
clickMenu(e, data) {
switch (e) {
case 1:
this.getUniMp(data);
break;
case 2:
// this.getUniMp(data);
this.navigator(data);
break;
}
},
//
pushMenu(data) {
this.nowMenuList.push(data);
this.AllMenuList = this.AllMenuList.filter((item) => {
return item.name != data.name;
})
},
//
removeMenu(data) {
this.AllMenuList.push(data);
this.nowMenuList = this.nowMenuList.filter((item) => {
return item.name != data.name;
})
},
//
editComfirm() {
this.editFlag = false;
uni.setStorageSync('gatherNowMenuList', JSON.stringify(this.nowMenuList));
},
getUniMp(appid) {
console.log('点击供销平台');
// #ifdef APP-PLUS
uniMP.loadMP(appid);
return;
// #endif
uni.showToast({
icon: 'none',
title: 'H5不支持打开小程序'
})
},
changeHandler(e) {
const {
columnIndex,
value,
values,
index,
picker = this.$refs.uPicker
} = e;
if (columnIndex === 0) {
getStreet({
area_code: value[0]['code']
}).then(res => {
this.$refs.uPicker.setColumnValues(1, res.data);
});
}
},
Area() {
getArea({
city_code: 510500
}).then(res => {
this.$refs.uPicker.setColumnValues(0, res.data);
this.Street(res.data[0]['code']);
});
},
Street(code) {
getStreet({
area_code: code
}).then(res => {
this.$refs.uPicker.setColumnValues(1, res.data);
});
},
selectLocation() {
this.showPicker = true
},
confirm(e) {
this.street = e.value[1].name
this.$nextTick(() => {
this.$bus.$emit('value-updated', e.value[1].name + ',' + e.value[1].code);
})
this.showPicker = false
},
appLocation() {
uni.getLocation({
type: 'wgs84',
timeout: '10',
success: (res) => {
// console.log(res)
this.isshow = false
let latitude, longitude;
latitude = res.latitude.toString();
longitude = res.longitude.toString();
getGeocoder({
lat: latitude,
long: longitude
}).then(res => {
let town = res.data.address_reference.town.title
let street_id = res.data.address_reference.town.id
this.street = res.data.address_component.street
this.$nextTick(() => {
this.$bus.$emit('value-updated', this.street + ',' +
street_id);
})
}).catch(err => {
this.isshow = false
uni.showToast({
title: err,
icon: 'none'
})
})
},
fail: (err) => {
this.isshow = false
}
});
},
kkchange(e) {
this.bgColor = e
},
navigator(url, t) {
// if (this.userInfoData.is_wsxx === 0 && t != '') return Toast("");
uni.navigateTo({
url: url
})
},
getUserInfo: function() {
let that = this;
getUserInfo().then(res => {
that.userInfoData = res.data;
// console.log(res.data.service);
if (res.data.service == null) {
// console.log('123');
this.isShow = false
} else {
this.isShow = true
this.mer_id = res.data.service.mer_id
}
if (!res.data.mer_info) {
that.$set(this, 'jurisdiction', false);
}
// console.log(that.userInfoData);
});
}
}
};
</script>
<style lang="scss" scoped>
.gather {
padding-bottom: 164.91rpx;
background: linear-gradient(180deg, #ffffff 0%, #f6f6f6 100%);
position: relative;
}
.sitebox {
animation-name: fadeIn;
animation-duration: 3s;
animation-fill-mode: forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.site-box1 {
width: 706rpx;
/* #ifdef MP || APP-PLUS */
height: 160rpx;
/* #endif */
/* #ifdef H5 */
height: 120rpx;
/* #endif */
margin-bottom: 26.32rpx;
position: absolute;
top: 45rpx;
left: 20rpx;
z-index: 999;
//
.place_wrapper {
color: #fff;
margin-right: 0rpx;
font-size: 30rpx;
.town_name {
margin-left: 21rpx;
}
}
.iconfont {
font-size: 35.09rpx;
}
}
.site-box {
width: 100%;
/* #ifdef MP || APP-PLUS */
height: 160rpx;
/* #endif */
/* #ifdef H5 */
height: 120rpx;
/* #endif */
margin-bottom: 26.32rpx;
position: absolute;
top: 0rpx;
position: fixed;
z-index: 999;
/* #ifdef MP || APP-PLUS */
padding-top: 75rpx;
/* #endif */
/* #ifdef H5 */
padding-top: 25rpx;
/* #endif */
// background-color: #e5e5e5;
background: url('@/static/images/bg2.png') no-repeat;
background-size: 100% 100%;
padding-right: 20rpx;
//
.place_wrapper {
color: #fff;
margin-right: 24.56rpx;
font-size: 30rpx;
opacity: 0;
.town_name {
margin-left: 21rpx;
}
}
.iconfont {
opacity: 0;
font-size: 30rpx;
font-size: 35.09rpx;
}
}
.top_box {
// padding-top: 180rpx;
background: linear-gradient(#36a2ff, #fff);
}
.com {
margin-left: 50%;
transform: translate(-50%);
}
.business {
width: 694.74rpx;
// margin-bottom: 175rpx;
}
.special_work {
// padding: 17.54rpx;
width: 694.74rpx;
margin-top: 52.63rpx;
border-radius: 17.54rpx;
// box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.16);
.title {
font-size: 31.58rpx;
font-weight: 700;
margin-bottom: 38.6rpx;
}
.project {
display: flex;
justify-content: space-between;
align-items: flex-end;
.edit {
font-size: 26rpx;
font-weight: 400;
&::after {
content: ">";
margin-left: 10rpx;
}
}
.edit2 {
font-size: 26rpx;
font-weight: 400;
}
}
.content {
display: flex;
align-content: center;
flex-wrap: wrap;
// justify-content: space-between;
.examine {
margin-bottom: 35rpx;
width: 173.68rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
// margin: 0 0 33.33rpx 33.33rpx !important;
.icon_img {
width: 83.16rpx;
height: 83.16rpx;
}
.icon {
position: absolute;
top: -5rpx;
right: 25rpx;
}
.text {
font-size: 26.32rpx;
margin-top: 21.05rpx;
color: #000;
}
}
.text {
font-size: 29.82rpx;
color: #a4a4a4;
}
}
.cont_jus {
margin-top: 56.14rpx;
justify-content: flex-start;
&:first-child {
// margin-right: 33rpx;
}
.examine {
margin-right: 48rpx;
&:first-child {
margin-right: 48rpx;
}
}
}
}
.edit_card {
background-color: #fff;
padding-top: 28rpx;
}
</style>

View File

@ -74,7 +74,7 @@
常用工具
<view class=""></view>
</view>
<view class="tools-two">
<view class="tools-two" v-if="isgShow&&userInfoData.mer_info.setting_status==1">
<view class="" v-for="(item,k) in typelist" :key='k' @click="navation(item)">
<view class="tools-two-img">
<image :src="item.image" mode=""></image>
@ -82,6 +82,14 @@
<view class="tools-two-title"> {{item.name}}</view>
</view>
</view>
<view class="tools-two" v-else>
<view class="" @click="byset">
<view class="tools-two-img">
<image src="@/static/images/index11.png" mode=""></image>
</view>
<view class="tools-two-title"> 商家设置</view>
</view>
</view>
</view>
@ -347,7 +355,7 @@
import retuntop from '@/components/content-top/index.vue';
import {
setAdminOrderRemark
setAdminOrderRemark
} from "@/api/admin";
import {
merstreet,
@ -458,7 +466,7 @@ setAdminOrderRemark
loadend: false,
loading: false,
loadTitle: '加载更多',
isgShow: false,
emptyShow: false,
productList: [],
userid: '',
@ -497,7 +505,6 @@ setAdminOrderRemark
this.getUserInfo()
this.list1()
this.Fheight = uni.getSystemInfoSync().windowHeight + 'px';
},
@ -771,9 +778,45 @@ setAdminOrderRemark
},
//
byset() {
if (this.userid) {
if (this.userInfoData.mer_info.mer_settlement_agree_status == 0) {
if (this.codenote.length == 0) {
this.isFshow = true
this.countDown()
} else {
if (this.codenote[0].status == 0) {
uni.showModal({
title: '申请正在审核中,请勿重复提交'
})
} else {
this.isFshow = true
this.countDown()
}
}
} else {
uni.navigateTo({
url: '/pages/product/basicSet?mer_id=' + this.userInfoData
.service
.mer_id
})
}
} else {
this.isAuto = true;
this.isShowAuth = true
}
},
//
logout() {
this.$refs.popup1.open()
},
@ -856,7 +899,14 @@ setAdminOrderRemark
this.userid = res.data.uid
this.userInfoData = res.data
this.merchantData.phone = res.data.phone
if (res.data.service == null) {
// console.log('123');
this.isgShow = false
} else {
this.isgShow = true
}
if (res.data.mer_info.length == 0) {
uni.showModal({
title: '暂无商户信息'
@ -893,10 +943,10 @@ setAdminOrderRemark
})
}
setAdminOrderRemark(that.userInfoData.service.mer_id, that.refundInfo.order_id, {
remark:that.refundInfo.remark
remark: that.refundInfo.remark
}).then(
res => {
this.refundMark =false;
this.refundMark = false;
this.$util.Tips({
title: res.message,
@ -925,7 +975,22 @@ setAdminOrderRemark
})
}
if (this.userid) {
if (this.userInfoData.mer_info.setting_status == 1) {
if (this.userInfoData.mer_info.mer_settlement_agree_status == 0) {
if (this.codenote.length == 0) {
this.isFshow = true
this.countDown()
} else {
if (this.codenote[0].status == 0) {
uni.showModal({
title: '申请正在审核中,请勿重复提交'
})
} else {
this.isFshow = true
this.countDown()
}
}
} else {
switch (item.type) {
case 1:
uni.switchTab({
@ -975,53 +1040,12 @@ setAdminOrderRemark
}
} else {
if (this.userInfoData.mer_info.mer_name) {
if (this.userInfoData.mer_info.mer_settlement_agree_status == 0) {
if (this.codenote.length == 0) {
this.isFshow = true
this.countDown()
} else {
if (this.codenote[0].status == 0) {
uni.showModal({
title: '申请正在审核中,请勿重复提交'
})
} else {
this.isFshow = true
this.countDown()
}
}
} else {
uni.navigateTo({
url: url
})
}
} else {
uni.showModal({
title: '提示',
content: '请完成商户设置后,再进行本次操作',
success: function(res) {
if (res.confirm) {
uni.navigateTo({
url: '/pages/product/basicSet?mer_id=' + this.userInfoData
.service
.mer_id
})
} else if (res.cancel) {
console.log('用户点击取消');
}
}
})
}
}
} else {
this.isAuto = true;
@ -1181,7 +1205,8 @@ setAdminOrderRemark
.merchantsSettled {
height: 100%;
padding-top: 160rpx;
padding-top: 100rpx;
}
.merchantsSettled .title {
@ -1238,7 +1263,7 @@ setAdminOrderRemark
}
.merchantsSettled .list .item {
padding: 50rpx 0 20rpx;
padding: 30rpx 0 10rpx;
position: relative;
margin: 0 20px;
@ -1379,6 +1404,7 @@ setAdminOrderRemark
background: #E3E3E3;
margin-top: 25px;
pointer-events: none;
margin-bottom: 100px;
}
.merchantsSettled .submitBtn.on {
@ -1526,7 +1552,7 @@ setAdminOrderRemark
height: 100%;
background-color: #d9d9d9;
text-align: center;
padding-top: 20rpx;
padding-top: 80rpx;
.content-top_txt {
font-size: 18rpx;
@ -1553,7 +1579,7 @@ setAdminOrderRemark
.left-content-right {
padding-left: 30rpx;
position: relative;
padding-top: 20rpx;
padding-top: 80rpx;
.content-right-one {
display: flex;

View File

@ -62,8 +62,7 @@
<text class="text">商户设置</text>
</view>
<view class="examine"
@click="navigator(`/pages/product/list/index?mer_id=${mer_id}`,2)">
<view class="examine" @click="navigator(`/pages/product/list/index?mer_id=${mer_id}`,2)">
<image class="icon_img" src="@/static/images/index7.png" mode="aspectFit">
</image>
<text class="text">商品管理</text>
@ -137,7 +136,6 @@
</view>
<view class="content ">
<view class="examine"
@click="navigator(`/pages/users/supply_procurement/index?type_id=12&isDetail=1&product_type=98&cate_id=${userInfoData.mer_info.category_id}`)">
<image class="icon_img" src="@/static/images/index4.png" mode="aspectFit"></image>
@ -424,9 +422,9 @@
<emptyPage title="暂无信息"></emptyPage>
</view>
<view class="settlementAgreement" v-if="isFshow">
<view class="setAgCount" style="width: 100%;height: 100%;">
<view class="setAgCount" style="width: 100%;height: 100% ;padding-top:120rpx ;">
<!-- <i class="icon iconfont icon-cha" @click="recuo"></i> -->
<view class="" style="width: 60rpx;height: 60rpx; position: absolute;right: 30rpx; top:20rpx"
<view class="" style="width: 60rpx;height: 60rpx; position: absolute;right: 30rpx; top:60rpx"
@click="recuo">
<image src="@/static/images/close.png" mode="aspectFit" style="width: 60rpx;height: 60rpx;"></image>
</view>
@ -720,7 +718,7 @@
this.isFshow = false
}
},
logout(){
logout() {
uni.switchTab({
url: '/pages/index/index'
})