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

修改app视频列表显示问题

Browse Source
This commit is contained in:
cc_zbp 2023-05-17 11:25:41 +08:00
parent d5b5703f72
commit 9491da8d31
6 changed files with 1884 additions and 1647 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

597
components/zbpSwiper.vue
View File

@ -1,321 +1,320 @@
<template> <template>
<view class="zbp-head-wrapper"> <view class="zbp-head-wrapper">
<view class="color-lump"></view> <view class="color-lump"></view>
<view class="bg-img"> <view class="bg-img">
<img :src="bgColor" alt=""> <img :src="bgColor" alt="">
</view> </view>
<view class="site-box flex_a_c_j_sb"> <view class="site-box flex_a_c_j_sb">
<view class="place_wrapper flex_a_c" @click="selectLocation"> <view class="place_wrapper flex_a_c" @click="selectLocation">
<view class="iconfont icon-weizhi"></view> <view class="iconfont icon-weizhi"></view>
<view class="town_name">{{recommend_address}}</view> <view class="town_name">{{recommend_address}}</view>
</view> </view>
<navigator url="/pages/chat/customer_list/index?type=0" hover-class="none"> <navigator url="/pages/chat/customer_list/index?type=0" hover-class="none">
<view class="iconfont icon-xiaoxi" style="color:#fff;"></view> <view class="iconfont icon-xiaoxi" style="color:#fff;"></view>
</navigator> </navigator>
</view> </view>
<!-- 搜索栏 --> <!-- 搜索栏 -->
<navigator url="/pages/columnGoods/goods_search/index" hover-class="none" class="search_content flex_a_c_j_sb"> <navigator url="/pages/columnGoods/goods_search/index" hover-class="none" class="search_content flex_a_c_j_sb">
<view class="flex_a_c"> <view class="flex_a_c">
<view class="iconfont icon-sousuo"></view> <view class="iconfont icon-sousuo"></view>
<input type="text" v-model="keyword" placeholder="搜索产品或店铺"> <input type="text" v-model="keyword" placeholder="搜索产品或店铺">
</view> </view>
<button class="search_btn">搜索</button> <button class="search_btn">搜索</button>
</navigator> </navigator>
<!-- 轮播图 --> <!-- 轮播图 -->
<view class="supply_chains-head"> <view class="supply_chains-head">
<swiper class="swiper l_center" @change="swiperChange" :indicator-dots="swiper.indicatorDots" <swiper class="swiper l_center" @change="swiperChange" :indicator-dots="swiper.indicatorDots"
:autoplay="swiper.autoplay" :interval="swiper.interval" :duration="swiper.duration" :autoplay="swiper.autoplay" :interval="swiper.interval" :duration="swiper.duration"
indicator-active-color="#fff"> indicator-active-color="#fff">
<block v-for="(item,index) in swiper['url']" :key="index"> <block v-for="(item,index) in swiper['url']" :key="index">
<swiper-item class="swi_item"> <swiper-item class="swi_item">
<u--image radius="15" :showLoading="true" :src="item.img" width="694.74rpx" height="242.11rpx" <u--image radius="15" :showLoading="true" :src="item.img" width="694.74rpx" height="242.11rpx"
mode="aspectFill"> mode="aspectFill">
</u--image> </u--image>
</swiper-item> </swiper-item>
</block> </block>
</swiper> </swiper>
</view> </view>
<u-picker :defaultIndex="[0,0]" :show="showPicker" ref="uPicker" :columns="columnData" @confirm="confirm" <u-picker :defaultIndex="[0,0]" :show="showPicker" ref="uPicker" :columns="columnData" @confirm="confirm"
@cancel="showPicker = false" @change="changeHandler" keyName="name"></u-picker> @cancel="showPicker = false" @change="changeHandler" keyName="name"></u-picker>
</view> </view>
</template> </template>
<script> <script>
import { import {
getArea, getArea,
getStreet getStreet
} from '@/api/article.js'; } from '@/api/article.js';
import { import {
getIndexData, getIndexData,
getDiy getDiy
} from '@/api/api.js' } from '@/api/api.js'
import {getGeocoder } from '@/api/store.js'; import { getGeocoder } from '@/api/store.js';
import {
mapGetters
} from 'vuex'
export default {
props: {
isSelectPlace: {
type: Boolean,
default: false
}
},
data() {
return {
showPicker: false,
styleConfig: [],
columnData: [],
homeCombData:[],
keyword: '',
recommend_address: '',
bgColor: '',
swiper: {
url: [{
img: ''
}],
indicatorDots: true, // 显示面板指示点
vertical: false, // 滑动方向是否为纵向
autoplay: true, // 是否自动切换
interval: 2000, // 自动切换时间间隔
duration: 400 // 滑动动画时长
},
}
},
// computed: mapGetters(['location']),
watch: {},
created() {
//#ifdef APP
this.selfLocation()
//#endif
// const loca = JSON.parse(this.location)
// this.street = loca.address_component.street
this.getBanner()
this.Area()
},
methods: {
selectLocation() {
this.isSelectPlace ? this.showPicker = true : ''
},
confirm(e) {
this.showPicker = false
this.$emit('selectPlce', e)
},
changeHandler(e) {
const {
columnIndex,
value,
values,
index,
picker = this.$refs.uPicker
} = e;
if (columnIndex === 0) {
getStreet({
area_code: value[0]['code']
}).then(res => {
picker.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);
});
},
selfLocation() {
let self = this
uni.getLocation({
type: 'gcj02',
success: (res) => {
let latitude, longitude;
latitude = res.latitude.toString();
longitude = res.longitude.toString();
this.latitude = res.latitude
this.longitude = res.longitude
getGeocoder({
lat: latitude,
long: longitude
}).then(res => {
console.log(res)
this.detaile_address = res.data.address;
this.location_address = res.data.address;
this.recommend_address = res.data.formatted_addresses.recommend.length > 4 ? res.data.formatted_addresses.recommend.slice(0,7) + '...' : res.data.formatted_addresses.recommend
}).catch(err => {
uni.showToast({
title: err,
icon: 'none'
})
})
},
fail: (res) => {
uni.showToast({
title: res,
icon: 'none',
duration: 1000
});
},
});
},
swiperChange(e) {
let {
current,
source
} = e.detail;
if (source === 'autoplay' || source === 'touch') {
this.bgColor = this.swiper.url[e.detail.current]['img']
}
},
// 对象转数组
objToArr(data) {
let obj = Object.keys(data).sort();
let m = obj.map(key => data[key]);
return m;
},
async getBanner(id) {
let that = this;
const { import { mapGetters } from 'vuex'
data export default {
} = await getDiy({ props: {
id: 0 isSelectPlace: {
}) type: Boolean,
that.styleConfig = that.objToArr(data.value); default: false
/* 循环数组得到数据*/ }
that.styleConfig.forEach((item, index, arr) => { },
if (item.name == 'headerSerch' || item.name == 'homeComb') { data() {
if (item.name == 'homeComb') { return {
that.swiper.url = item.swiperConfig.list showPicker: false,
} styleConfig: [],
} columnData: [],
}) homeCombData: [],
this.bgColor = this.swiper.url[0].img keyword: '',
}, recommend_address: '',
} bgColor: '',
} swiper: {
url: [{
img: ''
}],
indicatorDots: true, // 显示面板指示点
vertical: false, // 滑动方向是否为纵向
autoplay: true, // 是否自动切换
interval: 2000, // 自动切换时间间隔
duration: 400 // 滑动动画时长
},
}
},
// computed: mapGetters(['location']),
watch: {},
created() {
//#ifdef APP
this.selfLocation()
//#endif
// const loca = JSON.parse(this.location)
// this.street = loca.address_component.street
this.getBanner()
this.Area()
},
methods: {
selectLocation() {
this.isSelectPlace ? this.showPicker = true : ''
},
confirm(e) {
this.showPicker = false
this.$emit('selectPlce', e)
},
changeHandler(e) {
const {
columnIndex,
value,
values,
index,
picker = this.$refs.uPicker
} = e;
if (columnIndex === 0) {
getStreet({
area_code: value[0]['code']
}).then(res => {
picker.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);
});
},
selfLocation() {
let self = this
uni.getLocation({
type: 'gcj02',
success: (res) => {
let latitude, longitude;
latitude = res.latitude.toString();
longitude = res.longitude.toString();
this.latitude = res.latitude
this.longitude = res.longitude
getGeocoder({
lat: latitude,
long: longitude
}).then(res => {
console.log(res)
this.detaile_address = res.data.address;
this.location_address = res.data.address;
this.recommend_address = res.data.formatted_addresses.recommend.length > 4 ? res.data
.formatted_addresses.recommend.slice(0, 7) + '...' : res.data.formatted_addresses.recommend
}).catch(err => {
uni.showToast({
title: err,
icon: 'none'
})
})
},
fail: (res) => {
uni.showToast({
title: res,
icon: 'none',
duration: 1000
});
},
});
},
swiperChange(e) {
let {
current,
source
} = e.detail;
if (source === 'autoplay' || source === 'touch') {
this.bgColor = this.swiper.url[e.detail.current]['img']
}
},
// 对象转数组
objToArr(data) {
let obj = Object.keys(data).sort();
let m = obj.map(key => data[key]);
return m;
},
async getBanner(id) {
let that = this;
const {
data
} = await getDiy({
id: 0
})
that.styleConfig = that.objToArr(data.value);
/* 循环数组得到数据*/
that.styleConfig.forEach((item, index, arr) => {
if (item.name == 'headerSerch' || item.name == 'homeComb') {
if (item.name == 'homeComb') {
that.swiper.url = item.swiperConfig.list
}
}
})
this.bgColor = this.swiper.url[0].img
},
}
}
</script> </script>
<style lang="scss"> <style lang="scss">
.zbp-head-wrapper { .zbp-head-wrapper {
position: relative; position: relative;
padding-top: 78.95rpx; padding-top: 78.95rpx;
overflow: hidden; overflow: hidden;
.color-lump { .color-lump {
z-index: 1; z-index: 1;
position: absolute; position: absolute;
bottom: -86px; bottom: -86px;
left: 50%; left: 50%;
transform: translate(-50%, 0); transform: translate(-50%, 0);
width: 102%; width: 102%;
height: 133px; height: 133px;
border-radius: 30px 30px 0 0; border-radius: 30px 30px 0 0;
background-color: #fff; background-color: #fff;
} }
.bg-img { .bg-img {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
top: 0; top: 0;
/* #ifdef MP || APP-PLUS */ /* #ifdef MP || APP-PLUS */
z-index: -1; z-index: -1;
/* #endif */ /* #endif */
/* #ifdef H5 */ /* #ifdef H5 */
z-index: 0; z-index: 0;
/* #endif */ /* #endif */
z-index: 0; z-index: 0;
filter: blur(0); filter: blur(0);
overflow: hidden; overflow: hidden;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
filter: blur(30rpx); filter: blur(30rpx);
transform: scale(1.5); transform: scale(1.5);
} }
} }
.site-box { .site-box {
margin: 0 auto; margin: 0 auto;
width: 694.74rpx; width: 694.74rpx;
height: 66.67rpx; height: 66.67rpx;
margin-bottom: 26.32rpx; margin-bottom: 26.32rpx;
position: relative; position: relative;
// 位置 // 位置
.place_wrapper { .place_wrapper {
color: #fff; color: #fff;
margin-right: 24.56rpx; margin-right: 24.56rpx;
font-size: 31.58rpx; font-size: 31.58rpx;
.town_name { .town_name {
margin-left: 10.53rpx; margin-left: 10.53rpx;
} }
} }
.iconfont { .iconfont {
font-size: 35.09rpx; font-size: 35.09rpx;
} }
} }
.my-main { .my-main {
transition: background-color .5s ease; transition: background-color .5s ease;
} }
.search_content { .search_content {
margin: 0 auto; margin: 0 auto;
width: 694.74rpx; width: 694.74rpx;
height: 61.4rpx; height: 61.4rpx;
padding: 2px 2px 2px 21.05rpx; padding: 2px 2px 2px 21.05rpx;
border-radius: 100px; border-radius: 100px;
background: #fff; background: #fff;
margin-bottom: 17.54rpx; margin-bottom: 17.54rpx;
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
.icon-sousuo { .icon-sousuo {
font-size: 26.32rpx; font-size: 26.32rpx;
font-weight: bold; font-weight: bold;
color: #c8c7c6; color: #c8c7c6;
margin-right: 17.54rpx; margin-right: 17.54rpx;
} }
.search_btn { .search_btn {
color: #fff; color: #fff;
width: 105.26rpx; width: 105.26rpx;
height: 52.63rpx; height: 52.63rpx;
line-height: 52.63rpx; line-height: 52.63rpx;
background: #f84221; background: #f84221;
border-radius: 100px; border-radius: 100px;
font-size: 28.07rpx; font-size: 28.07rpx;
} }
} }
.supply_chains-head { .supply_chains-head {
margin-bottom: 17.54rpx; margin-bottom: 17.54rpx;
position: relative; position: relative;
z-index: 2; z-index: 2;
.swiper { .swiper {
width: 694.74rpx; width: 694.74rpx;
height: 242.11rpx; height: 242.11rpx;
margin: 0 auto; margin: 0 auto;
.swi_item { .swi_item {
width: 100%; width: 100%;
height: 242.11rpx; height: 242.11rpx;
} }
} }
} }
} }
</style> </style>

36
config/app.js
View File

@ -8,26 +8,26 @@ let httpApiTwo
let httpApiThree let httpApiThree
// 网络接口修改此字符 小程序域名要求https // 网络接口修改此字符 小程序域名要求https
// let httpApi = 'http://192.168.31.110:8324' //测试 // let httpApi = 'http://192.168.31.110:8324' //测试
// httpApi = 'https://shop.lihaink.cn' //生产 httpApi = 'https://shop.lihaink.cn' //生产
// httpApi = 'http://192.168.0.222:8324' //生产 // httpApi = 'http://192.168.0.222:8324' //生产
// httpApiTwo = 'https://nk.lihaink.cn' //生产 httpApiTwo = 'https://nk.lihaink.cn' //生产
if (process.env.NODE_ENV === "development") { // if (process.env.NODE_ENV === "development") {
httpApi = "https://crmeb-test.shop.lihaink.cn" // httpApi = "https://crmeb-test.shop.lihaink.cn"
// #ifdef MP-WEIXIN // // #ifdef MP-WEIXIN
httpApiTwo = "http://cms.com" // httpApiTwo = "http://cms.com"
httpApiThree = 'http://ceshi-oa.lihaink.cn' // httpApiThree = 'http://ceshi-oa.lihaink.cn'
// #endif // // #endif
// #ifdef H5 // // #ifdef H5
// httpApiTwo = "baseUrl" // h5跨域配置 // // httpApiTwo = "baseUrl" // h5跨域配置
httpApiTwo = "https://nk.lihaink.cn" // h5跨域配置 // httpApiTwo = "https://nk.lihaink.cn" // h5跨域配置
// httpApiThree = 'baseUrlTest' // h5跨域配置 // // httpApiThree = 'baseUrlTest' // h5跨域配置
// #endif // // #endif
} else if (process.env.NODE_ENV === 'production') { // } else if (process.env.NODE_ENV === 'production') {
httpApi = 'https://shop.lihaink.cn' // 生产 // httpApi = 'https://shop.lihaink.cn' // 生产
httpApiTwo = 'https://nk.lihaink.cn' // 生产 // httpApiTwo = 'https://nk.lihaink.cn' // 生产
httpApiThree = 'http://ceshi-oa.lihaink.cn' //生产 // httpApiThree = 'http://ceshi-oa.lihaink.cn' //生产
} // }
// 聊天接口修改此字符 小程序聊天要求wss 例如：wss://mer.crmeb.net // 聊天接口修改此字符 小程序聊天要求wss 例如：wss://mer.crmeb.net
// let wsApi = 'ws://192.168.3.20:8324' // let wsApi = 'ws://192.168.3.20:8324'

59
pages/home/index.vue
View File

@ -5,8 +5,7 @@
<zbpSwiper></zbpSwiper> <zbpSwiper></zbpSwiper>
<view class="tabs_wrapper"> <view class="tabs_wrapper">
<u-tabs :list="tabsData.list" @click="tabsChange" :activeStyle="tabsData.activeStyle" <u-tabs :list="tabsData.list" @click="tabsChange" lineColor="#F84221" keyName="cate_name"></u-tabs>
:inactiveStyle="tabsData.inactiveStyle" lineHeight="0" keyName="cate_name"></u-tabs>
</view> </view>
<view class="goods"> <view class="goods">
@ -53,29 +52,12 @@
<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 { import { getSlideAPI } from '@/api/lihai.js'
getSlideAPI import { graphicLstApi, getTopicList, graphicStartApi } from '@/api/community.js'
} from '@/api/lihai.js' import { getIndexData, getDiy } from '@/api/api.js'
import { import { getGeocoder, merClassifly } from '@/api/store.js';
graphicLstApi, import { getArea, getStreet } from '@/api/article.js';
getTopicList, import { Toast } from '@/libs/uniApi'
graphicStartApi
} from '@/api/community.js'
import {
getIndexData,
getDiy
} from '@/api/api.js'
import {
getGeocoder,
merClassifly
} from '@/api/store.js';
import {
getArea,
getStreet
} from '@/api/article.js';
import {
Toast
} from '@/libs/uniApi'
export default { export default {
components: { components: {
mTabbar, mTabbar,
@ -99,18 +81,7 @@
}, },
tabsData: { tabsData: {
list: [], list: [],
tabsActive: 0, tabsActive: 0
activeStyle: {
color: '#fff',
fontWeight: 'bold',
borderRadius: '100px',
backgroundColor: '#F84221',
padding: '15.79rpx 21.05rpx'
},
inactiveStyle: {
color: '#000',
padding: '15.79rpx 21.05rpx',
}
}, },
where: { where: {
category_id: 0, category_id: 0,
@ -232,7 +203,12 @@
this.tabsData.tabsActive = item.index this.tabsData.tabsActive = item.index
if (item.index == 1) { if (item.index == 1) {
uni.navigateTo({ uni.navigateTo({
url: '/pages/short_video/nvueSwiper/index?id=' + '136' // #ifdef MP || H5
url: '/pages/short_video/nvueSwiper/index?id=' + this.cateGoods[0].community_id
// #endif
// #ifdef APP
url: `/pages/short_video/appSwiper/index?id=${this.cateGoods[0].community_id}`
// #endif
}) })
} }
}, },
@ -420,13 +396,8 @@
.tabs_wrapper { .tabs_wrapper {
width: 694.74rpx; width: 694.74rpx;
margin: 0 auto; margin: 38.6rpx auto;
margin-top: 0;
margin-bottom: 21.05rpx; margin-bottom: 21.05rpx;
::v-deep .u-tabs__wrapper__nav__item {
padding: 0 !important;
}
} }
.empty_wrapper { .empty_wrapper {

7
pages/plant_release/index.vue
View File

@ -1,5 +1,10 @@
<template> <template>
<view :style="viewColor" style="padding-top: 180rpx; "> <!-- #ifdef MP -->
<view :style="viewColor" style="padding-top: 180rpx;">
<!-- #endif -->
<!-- #ifdef APP || H5 -->
<view :style="viewColor" style="padding-top: 80rpx;">
<!-- #endif -->
<form @submit="formSubmit" report-submit='true'> <form @submit="formSubmit" report-submit='true'>
<view class="release_content"> <view class="release_content">
<view v-if="community_app_switch.length == 2" class="release_tab acea-row"> <view v-if="community_app_switch.length == 2" class="release_tab acea-row">

2830
pages/short_video/appSwiper/index.nvue
View File

File diff suppressed because it is too large Load Diff

2
pages/supply_chains/supply_chains.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<view class="Circle_friends"> <view class="Circle_friends">
<view class="circle_friends_wrapper"> <view class="circle_friends_wrapper">
<zbpSwiper></zbpSwiper> <zbpSwiper :isSelectPlace="true" @selectPlce="selectPlce"></zbpSwiper>
<view class="shop_wrapper"> <view class="shop_wrapper">
<navigator class="l_yun" hover-class="none" <navigator class="l_yun" 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}`">