Merge pull request 'chenxuelian' (#13) from chenxuelian into dev
Reviewed-on: http://git.hchyun.com/feashow/pupil/pulls/13
This commit is contained in:
clay
120
components/cityPicker/cityPicker.vue
Normal file
120
components/cityPicker/cityPicker.vue
Normal file
@@ -0,0 +1,120 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-picker :show="show" ref="uPicker" :columns="cityList" @confirm="confirm" @change="changeHandler"
|
||||
@cancel="cancel"></u-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { cityData } from '@/utills/city.js'
|
||||
export default {
|
||||
name: "cityPicker",
|
||||
props: {
|
||||
showPicker: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
cityData,
|
||||
//显示选择器
|
||||
show: false,
|
||||
// 打开选择器显示默认城市
|
||||
cityList: [],
|
||||
cityLevel1: [],
|
||||
cityLevel2: [],
|
||||
cityLevel3: []
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
showPicker: {
|
||||
handler(val) {
|
||||
console.log(val)
|
||||
this.show = this.showPicker
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
show: {
|
||||
handler(val) {
|
||||
if(val) {
|
||||
this.cityList = [],
|
||||
this.cityLevel1 = [],
|
||||
this.cityLevel2 = [],
|
||||
this.cityLevel3 = []
|
||||
this.initCityData();
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// 城市选择器初始化
|
||||
this.initCityData();
|
||||
},
|
||||
methods: {
|
||||
initCityData() {
|
||||
// 遍历城市js
|
||||
this.cityData.forEach((item1, index1) => {
|
||||
let temp2 = [];
|
||||
this.cityLevel1.push(item1.provinceName);
|
||||
|
||||
let temp4 = [];
|
||||
let temp3 = [];
|
||||
// 遍历市
|
||||
item1.cities.forEach((item2, index2) => {
|
||||
temp2.push(item2.cityName);
|
||||
// 遍历区
|
||||
item2.counties.forEach((item3, index3) => {
|
||||
temp3.push(item3.countyName);
|
||||
})
|
||||
temp4[index2] = temp3;
|
||||
temp3 = [];
|
||||
})
|
||||
this.cityLevel3[index1] = temp4;
|
||||
|
||||
this.cityLevel2[index1] = temp2;
|
||||
})
|
||||
// 选择器默认城市
|
||||
this.cityList.push(this.cityLevel1, this.cityLevel2[0], this.cityLevel3[0][0]);
|
||||
},
|
||||
// 选中时执行
|
||||
changeHandler(e) {
|
||||
const {
|
||||
columnIndex,
|
||||
index,
|
||||
indexs,
|
||||
value,
|
||||
values,
|
||||
// 微信小程序无法将picker实例传出来，只能通过ref操作
|
||||
picker = this.$refs.uPicker
|
||||
} = e;
|
||||
if (columnIndex === 0) { // 选择第一列数据时
|
||||
// 设置第二列关联数据
|
||||
picker.setColumnValues(1, this.cityLevel2[index]);
|
||||
// 设置第三列关联数据
|
||||
picker.setColumnValues(2, this.cityLevel3[index][columnIndex]);
|
||||
} else if (columnIndex === 1) { // 选择第二列数据时
|
||||
// 设置第三列关联数据
|
||||
picker.setColumnValues(2, this.cityLevel3[indexs[0]][index]);
|
||||
}
|
||||
},
|
||||
// 单击确认按钮时执行
|
||||
confirm(e) {
|
||||
// 输出数组 [省, 市, 区]
|
||||
console.log(e.value);
|
||||
this.$emit('confirm', e.value)
|
||||
// 隐藏城市选择器
|
||||
this.show = false;
|
||||
},
|
||||
cancel() {
|
||||
this.$emit('cancel')
|
||||
this.show = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
27
package-lock.json
generated
27
package-lock.json
generated
@@ -1,27 +0,0 @@
|
||||
{
|
||||
"name": "shitong-app",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"dependencies": {
|
||||
"uview-ui": "^2.0.35"
|
||||
}
|
||||
},
|
||||
"node_modules/uview-ui": {
|
||||
"version": "2.0.35",
|
||||
"resolved": "https://registry.npmmirror.com/uview-ui/-/uview-ui-2.0.35.tgz",
|
||||
"integrity": "sha512-OfMttN3XkHvQosXfd8bjz8ASTvypPoGzBWmQZBJ871bYMCA7t2bDFPlzjbxUj/5ykAjKnZ8zMUapSwSisVt99g==",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0"
|
||||
}
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"uview-ui": {
|
||||
"version": "2.0.35",
|
||||
"resolved": "https://registry.npmmirror.com/uview-ui/-/uview-ui-2.0.35.tgz",
|
||||
"integrity": "sha512-OfMttN3XkHvQosXfd8bjz8ASTvypPoGzBWmQZBJ871bYMCA7t2bDFPlzjbxUj/5ykAjKnZ8zMUapSwSisVt99g=="
|
||||
}
|
||||
}
|
||||
}
|
||||
116
pages.json
116
pages.json
@@ -47,30 +47,6 @@
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/report/news/news",
|
||||
"style": {
|
||||
"navigationBarTitleText": "行内新闻",
|
||||
"navigationBarTextStyle": "white",
|
||||
"navigationBarBackgroundColor": "#12CA64",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "pages/report/certifiedCj/certifiedCj",
|
||||
"style": {
|
||||
"navigationBarTitleText": "认证厂家",
|
||||
"navigationBarTextStyle": "white",
|
||||
"navigationBarBackgroundColor": "#12CA64",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "pages/detail/xwDetail/xwDetail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "行业新闻详情",
|
||||
"navigationBarTextStyle": "white",
|
||||
"navigationBarBackgroundColor": "#12CA64",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "pages/detail/productsDetail/productsDetail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "商品详情",
|
||||
@@ -78,15 +54,6 @@
|
||||
"navigationBarBackgroundColor": "#12CA64",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "pages/detail/certifiedCjDetail/certifiedCjDetail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "厂家信息",
|
||||
"navigationBarTextStyle": "white",
|
||||
"navigationBarBackgroundColor": "#12CA64",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}, {
|
||||
"path": "pages/my/bindCompony/bindCompony",
|
||||
"style": {
|
||||
@@ -104,26 +71,6 @@
|
||||
"navigationBarBackgroundColor": "#12CA64",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index/search/search",
|
||||
"style": {
|
||||
"navigationBarTitleText": "顶部搜索",
|
||||
"navigationBarTextStyle": "white",
|
||||
"navigationBarBackgroundColor": "#12CA64",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index/goods-category-search/category-index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "分类详情",
|
||||
"navigationBarTextStyle": "white",
|
||||
"navigationBarBackgroundColor": "#12CA64",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/my/memberCenter/memberCenter",
|
||||
"style": {
|
||||
@@ -134,6 +81,69 @@
|
||||
}
|
||||
}
|
||||
],
|
||||
"subPackages": [{
|
||||
"root": "packageSearch",
|
||||
"pages": [{
|
||||
"path": "search/search",
|
||||
"style": {
|
||||
"navigationBarTitleText": "顶部搜索",
|
||||
"navigationBarTextStyle": "white",
|
||||
"navigationBarBackgroundColor": "#12CA64",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "goods-category-search/category-index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "分类详情",
|
||||
"navigationBarTextStyle": "white",
|
||||
"navigationBarBackgroundColor": "#12CA64",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"root": "packageReport",
|
||||
"pages": [{
|
||||
"path": "news/news",
|
||||
"style": {
|
||||
"navigationBarTitleText": "行内新闻",
|
||||
"navigationBarTextStyle": "white",
|
||||
"navigationBarBackgroundColor": "#12CA64",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "certifiedCj/certifiedCj",
|
||||
"style": {
|
||||
"navigationBarTitleText": "认证厂家",
|
||||
"navigationBarTextStyle": "white",
|
||||
"navigationBarBackgroundColor": "#12CA64",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "xwDetail/xwDetail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "行业新闻详情",
|
||||
"navigationBarTextStyle": "white",
|
||||
"navigationBarBackgroundColor": "#12CA64",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "certifiedCjDetail/certifiedCjDetail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "厂家信息",
|
||||
"navigationBarTextStyle": "white",
|
||||
"navigationBarBackgroundColor": "#12CA64",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"tabBar": {
|
||||
"color": "#CCCCCC",
|
||||
"selectedColor": "#0EBB5B",
|
||||
|
||||
@@ -1,6 +1,100 @@
|
||||
<template>
|
||||
<view>
|
||||
创意需求
|
||||
<view class="content">
|
||||
<view class="top-tab">
|
||||
<u-tabs :list="tabsList" :scrollable="false" lineWidth="25" lineColor="#0A994A" color="#969696"
|
||||
:activeStyle="{color: '#15CA65', fontWeight: '400', transform: 'scale(1.05)', size:'20rpx'}"
|
||||
lineHeight="4" :current="tabCurrent" @change="tabChange"></u-tabs>
|
||||
</view>
|
||||
<u--form :model="needsPublishForm" ref="uNeedsForm" :labelStyle="formLabelStyle">
|
||||
<view style="margin-bottom: 20rpx;">
|
||||
<u-form-item label="姓名" borderBottom>
|
||||
<u-input v-model="needsPublishForm.name" :border="false" placeholder="请输入您的名称"
|
||||
placeholder-style="color:#CCCCCC" />
|
||||
</u-form-item>
|
||||
<u-form-item label="城市">
|
||||
<u-input v-model="needsPublishForm.city" :border="false" placeholder="请选择所在城市"
|
||||
placeholder-style="color:#CCCCCC" suffixIcon="arrow-right" suffixIconStyle="color: #969696"
|
||||
@focus="showCityPicker = true" @tap="showCityPicker = true" />
|
||||
<cityPicker :show-picker="showCityPicker" @cancel="showCityPicker = false" @confirm="getCityValue">
|
||||
</cityPicker>
|
||||
</u-form-item>
|
||||
</view>
|
||||
|
||||
<view style="margin-bottom: 20rpx;">
|
||||
<view v-if="tabCurrent === 1">
|
||||
<u-form-item label="品名" borderBottom>
|
||||
<u-input v-model="needsPublishForm.productName" :border="false" placeholder="请输入您的产品名称"
|
||||
placeholder-style="color:#CCCCCC" />
|
||||
</u-form-item>
|
||||
<u-form-item label="分类" borderBottom>
|
||||
<u-input v-model="needsPublishForm.productCategory" :border="false" placeholder="请选择分类"
|
||||
placeholder-style="color:#CCCCCC" suffixIcon="arrow-right" suffixIconStyle="color: #969696"
|
||||
@focus="showCategoryPicker = true" @click="showCategoryPicker = true" />
|
||||
<!-- <u-select v-model="showProductPicker" :list="productPickerList"></u-select> -->
|
||||
<u-picker :show="showCategoryPicker" :columns="categoryPickerList"
|
||||
@cancel="showCategoryPicker = false" @confirm="getCategoryValue"></u-picker>
|
||||
</u-form-item>
|
||||
</view>
|
||||
<u-form-item label="产品" borderBottom>
|
||||
<u-input v-model="needsPublishForm.product" :border="false" placeholder="请选择产品类型"
|
||||
placeholder-style="color:#CCCCCC" suffixIcon="arrow-right" suffixIconStyle="color: #969696"
|
||||
@focus="showProductPicker = true" @click="showProductPicker = true" />
|
||||
<!-- <u-select v-model="showProductPicker" :list="productPickerList"></u-select> -->
|
||||
<u-picker :show="showProductPicker" :columns="productPickerList" @cancel="showProductPicker = false"
|
||||
@confirm="getProductValue"></u-picker>
|
||||
</u-form-item>
|
||||
<u-form-item label="定位" borderBottom>
|
||||
<u-input v-model="needsPublishForm.position" :border="false" placeholder="请选择产品定位"
|
||||
placeholder-style="color:#CCCCCC" suffixIcon="arrow-right" suffixIconStyle="color: #969696"
|
||||
@focus="showPositionPicker = true" @click="showPositionPicker = true" />
|
||||
<u-picker :show=showPositionPicker :columns="positionPickerList"
|
||||
@cancel="showPositionPicker = false" @confirm="getPositionValue"></u-picker>
|
||||
</u-form-item>
|
||||
<view style="padding: 20rpx 15rpx;background-color: #fff;">
|
||||
<u-textarea v-model="needsPublishForm.describle" border="surround" placeholder="请输入具体描述(限120字)"
|
||||
:maxlength="120" placeholder-style="color:#CCCCCC"></u-textarea>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="tabCurrent === 1" style="margin-bottom: 20rpx;">
|
||||
<u-form-item label="上传图片" labelPosition="top">
|
||||
<view style="padding-left: 20rpx;margin-top: 20rpx;">
|
||||
<u-upload
|
||||
:fileList="fileList1"
|
||||
@afterRead="afterRead"
|
||||
@delete="deletePic"
|
||||
name="1"
|
||||
multiple
|
||||
:maxCount="10"
|
||||
></u-upload>
|
||||
</view>
|
||||
</u-form-item>
|
||||
</view>
|
||||
|
||||
<view style="background-color: #fff;">
|
||||
<u-form-item label="手机" borderBottom>
|
||||
<u--input placeholder="请输入手机号" :border="false" v-model="needsPublishForm.phone"
|
||||
placeholder-style="color:#CCCCCC"></u--input>
|
||||
</u-form-item>
|
||||
<u-form-item label="验证" borderBottom>
|
||||
<view style="display: flex;padding-right: 20rpx;align-items: center;">
|
||||
<u--input placeholder="请输入验证码" :border="false" v-model="needsPublishForm.invalidCode"
|
||||
placeholder-style="color:#CCCCCC"></u--input>
|
||||
<u-code ref="uCode" @change="codeChange" keep-running change-text="倒计时XS"
|
||||
@start="disabled = true" @end="disabled = false"></u-code>
|
||||
<u-button size="small" type="primary" @tap="getCode" :text="tips" color="#EEEEEE"
|
||||
:disabled="disabled" customStyle="color:#666666; width:160rpx;"></u-button>
|
||||
</view>
|
||||
</u-form-item>
|
||||
<view style="padding: 30rpx;background-color: #fff;">
|
||||
<u-button color="#0EBB5B" text="确定发布"></u-button>
|
||||
</view>
|
||||
<view style="padding: 20rpx;text-align: center;background-color: #fff;">
|
||||
<text
|
||||
style="font-size: 24rpx;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #C8C8C8;line-height: 28rpx;">承诺声明预留文字位置承诺声明预留文字位置</text>
|
||||
</view>
|
||||
</view>
|
||||
</u--form>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -8,15 +102,154 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
tabsList: [{
|
||||
name: '需求发布'
|
||||
}, {
|
||||
name: '创意发布'
|
||||
}],
|
||||
tabCurrent: 0,
|
||||
needsPublishForm: {
|
||||
city: null,
|
||||
position: null
|
||||
},
|
||||
formLabelStyle: {
|
||||
'font-size': '32rpx !important'
|
||||
},
|
||||
showCityPicker: false,
|
||||
showProductPicker: false,
|
||||
showPositionPicker: false,
|
||||
showCategoryPicker: false,
|
||||
seconds: 10,
|
||||
disabled: false,
|
||||
tips: '获取验证码',
|
||||
productPickerList: [
|
||||
['烘焙', '零食', '饮料']
|
||||
// {name: '烘焙', val: 'hongbei'}
|
||||
// {name: '零食', val: 'ls'}
|
||||
// {name: '饮料', val: 'yl'}
|
||||
],
|
||||
positionPickerList: [
|
||||
['无添加剂', '无添加剂', '无添加剂']
|
||||
],
|
||||
categoryPickerList: [
|
||||
['类别1', '类别', '类别']
|
||||
],
|
||||
fileList1: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
tabChange(data) {
|
||||
this.tabCurrent = data.index
|
||||
this.needsPublishForm = {}
|
||||
},
|
||||
changeCity(data) {
|
||||
this.needsPublishForm.city = data.data.join('')
|
||||
console.log('showCityPicker = true')
|
||||
},
|
||||
getCityValue(data) {
|
||||
this.showCityPicker = false
|
||||
this.needsPublishForm.city = data.join('/')
|
||||
},
|
||||
getProductValue(data) {
|
||||
this.showProductPicker = false
|
||||
this.needsPublishForm.product = data.value[0]
|
||||
},
|
||||
getPositionValue(data) {
|
||||
this.showPositionPicker = false
|
||||
this.needsPublishForm.position = data.value[0]
|
||||
},
|
||||
getCategoryValue(data) {
|
||||
this.showCategoryPicker = false
|
||||
this.needsPublishForm.productCategory = data.value[0]
|
||||
},
|
||||
getCode() {
|
||||
if (this.$refs.uCode.canGetCode) {
|
||||
// 模拟向后端请求验证码
|
||||
uni.showLoading({
|
||||
title: '正在获取验证码'
|
||||
})
|
||||
setTimeout(() => {
|
||||
uni.hideLoading();
|
||||
// 这里此提示会被this.start()方法中的提示覆盖
|
||||
uni.$u.toast('验证码已发送');
|
||||
// 通知验证码组件内部开始倒计时
|
||||
this.$refs.uCode.start();
|
||||
}, 2000);
|
||||
} else {
|
||||
uni.$u.toast('倒计时结束后再发送');
|
||||
}
|
||||
},
|
||||
codeChange(text) {
|
||||
this.tips = text;
|
||||
},
|
||||
// 删除图片
|
||||
deletePic(event) {
|
||||
this[`fileList${event.name}`].splice(event.index, 1)
|
||||
},
|
||||
// 新增图片
|
||||
async afterRead(event) {
|
||||
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
||||
let lists = [].concat(event.file)
|
||||
let fileListLen = this[`fileList${event.name}`].length
|
||||
lists.map((item) => {
|
||||
this[`fileList${event.name}`].push({
|
||||
...item,
|
||||
status: 'uploading',
|
||||
message: '上传中'
|
||||
})
|
||||
})
|
||||
for (let i = 0; i < lists.length; i++) {
|
||||
const result = await this.uploadFilePromise(lists[i].url)
|
||||
let item = this[`fileList${event.name}`][fileListLen]
|
||||
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
|
||||
status: 'success',
|
||||
message: '',
|
||||
url: result
|
||||
}))
|
||||
fileListLen++
|
||||
}
|
||||
},
|
||||
uploadFilePromise(url) {
|
||||
// return new Promise((resolve, reject) => {
|
||||
// let a = uni.uploadFile({
|
||||
// url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
|
||||
// filePath: url,
|
||||
// name: 'file',
|
||||
// formData: {
|
||||
// user: 'test'
|
||||
// },
|
||||
// success: (res) => {
|
||||
// setTimeout(() => {
|
||||
// resolve(res.data.data)
|
||||
// }, 1000)
|
||||
// }
|
||||
// });
|
||||
// })
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="less" scoped>
|
||||
.content {
|
||||
background-color: #F8F8F8;
|
||||
|
||||
.top-tab {
|
||||
background-color: #fff;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
/deep/.u-form-item__body__left__content__label {
|
||||
font-size: 32rpx !important;
|
||||
}
|
||||
|
||||
/deep/.u-form-item__body {
|
||||
padding: 13rpx 0 !important;
|
||||
}
|
||||
|
||||
/deep/.u-textarea {
|
||||
border-radius: 20rpx;
|
||||
border: 1px solid #EEEEEE;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,876 +0,0 @@
|
||||
<template>
|
||||
<view :style="{height: windowHeight + 'px', overflow:showMask? 'hidden':'auto'}">
|
||||
<!-- 顶部导航栏 -->
|
||||
<view class="top-search">
|
||||
<customer-searchbar ref="search" :readOnly="true" :search-bar-top="searchBarTop"
|
||||
:search-bar-height="searchBarHeight" @navigate="navigateToSearch" @back="goBack" />
|
||||
</view>
|
||||
<view :style="{marginTop: Number(searchBarTop + searchBarHeight + 2) + 'px',}">
|
||||
<view>
|
||||
<view class="category-view">
|
||||
<view class="left">
|
||||
<view v-for="(item,index) in categoryList" class="category-item"
|
||||
@click="changeSelectedCategory(index)">
|
||||
<view>
|
||||
<view class="icon-box">
|
||||
<image :src="item.icon" mode="aspectFit" class="icon"
|
||||
:style="{border: item.active?'2rpx #14CA65 solid':'0',}" />
|
||||
</view>
|
||||
<view class="name">
|
||||
<u-tag v-if="item.active" :text="item.name" bg-color="#14CA65" color="#fff"
|
||||
borderColor="#14CA65" shape="circle" />
|
||||
<text v-else class="no-active">{{item.name}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right" @click="exportView('showMask')">
|
||||
<tex style="margin-bottom: 10rpx;">全部</tex>
|
||||
<u-icon size="14" name="/static/category/fl_icon_qb.png"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 类别详情-->
|
||||
<view id="category-detail" class="category-detail" :style="{height: listDataHeight + 'px'}">
|
||||
<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view"
|
||||
:scroll-top="scrollTop">
|
||||
<view v-for="(item,index) in tabbar" :key="index" class="u-tab-item"
|
||||
:class="[menuCurrent==index ? 'u-tab-item-active' : '']" :data-current="index"
|
||||
@tap.stop="swichMenu(index)">
|
||||
<text class="title">{{item.name}}</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="category-last">
|
||||
<view class="category-tag-box">
|
||||
<scroll-view :scroll-x="true" class="left">
|
||||
<view v-for="(item,index) in tagsList" @click="changeSelectedTag(index)"
|
||||
class="category-tag">
|
||||
<view style="padding: 16rpx; border-radius: 10rpx;line-height: 32rpx;"
|
||||
:style="{color: index === tagCurrent ?'#14CA65':'#666', background: index === tagCurrent ?'#DBFFEB':'#EEEEEE'}">
|
||||
<text>{{item.name}}</text>
|
||||
</view>
|
||||
<!-- <u-tag v-if="index === tagCurrent" :text="item.name" bg-color="#DBFFEB" color="#14CA65" borderColor="#DBFFEB" shape="square" style="width: fit-content;"></u-tag> -->
|
||||
<!-- <u-tag v-else :text="item.name" bg-color="#EEEEEE" color="#666666" borderColor="#EEEEEE" shape="square" style="width: fit-content;"></u-tag> -->
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="right" @click="exportView('featureMask')">
|
||||
<u-icon size="10" name="/static/category/fl_icon_xl.png"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="category-order">
|
||||
<u-tabs :list="tabsList" :scrollable="false" lineWidth="30" lineColor="#0A994A"
|
||||
color="#969696"
|
||||
:activeStyle="{color: '#15CA65', fontWeight: '400', transform: 'scale(1.05)', size:'14px'}"
|
||||
lineHeight="4" :current="tabCurrent" @change="tabChange"></u-tabs>
|
||||
</view>
|
||||
<scroll-view scroll-y class="goods-list">
|
||||
<block v-for="(item,index) in tabbar" :key="index">
|
||||
<block v-if="index === menuCurrent">
|
||||
<block v-for="(item1,index1) in item.foods" :key="index1">
|
||||
<view class="goods-item">
|
||||
<view class="left">
|
||||
<view class="image">
|
||||
<image :src="item1.image" mode="scaleToFill"
|
||||
style="width: 150rpx;height: 100%;"></image>
|
||||
</view>
|
||||
<view class="tag">
|
||||
<view class="tag-content">
|
||||
<text>{{item.name}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="name">
|
||||
<text>{{item1.name}}</text>
|
||||
</view>
|
||||
<view class="describe">
|
||||
<text>{{item1.describe}}</text>
|
||||
</view>
|
||||
<view class="publish-date">
|
||||
<view class="publish-date-box">
|
||||
<view
|
||||
style="width: fit-content; display: inline-block;margin-right:6rpx;">
|
||||
<u-icon size="16" name="clock" color="#A3A3A3" />
|
||||
</view>
|
||||
<text style="margin-right: 6rpx;">发布日期</text>
|
||||
<text>{{item1.date}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tag">
|
||||
<view class="tag-content">
|
||||
<text>{{ item1.feature }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</block>
|
||||
</block>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="bg" bindtap='hideview'
|
||||
:style="{display: showMask || featureMask ? 'block':'none', marginTop: Number(searchBarTop + searchBarHeight + 4) + 'px', height: Number(windowHeight - searchBarTop - searchBarHeight - 4) + 'px',}"
|
||||
@click="showMask = false, featureMask = false"></view>
|
||||
<uni-transition ref="ani" mode-class="slide-top" custom-class="transfromClass" :show="showMask||featureMask">
|
||||
<view class="show" bindtap='hideview'
|
||||
:style="{display: showMask || featureMask ? 'block':'none', top: Number(searchBarTop + searchBarHeight + 4) + 'px',}">
|
||||
<view v-if="showMask" class="category-view-all">
|
||||
<view v-for="(item,index) in categoryList" @click="changeSelectedCategory(index)"
|
||||
style="width: 20%;margin-bottom: 20rpx;">
|
||||
<view class="category-item">
|
||||
<view class="icon-box">
|
||||
<image :src="item.icon" mode="aspectFit" class="icon"
|
||||
:style="{border: item.active?'2rpx #14CA65 solid':'0',}" />
|
||||
</view>
|
||||
<view class="name">
|
||||
<view v-if="item.active" class="active">
|
||||
<text>{{item.name}}</text>
|
||||
</view>
|
||||
<text v-else class="no-active">{{item.name}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="featureMask" class="category-view-all" style="align-content: start;">
|
||||
<view v-for="(item,index) in tagsList" @click="changeSelectedTag(index)" class="category-tag">
|
||||
<view style="padding: 16rpx; border-radius: 10rpx;line-height: 32rpx;"
|
||||
:style="{color: index === tagCurrent ?'#14CA65':'#666', background: index === tagCurrent ?'#DBFFEB':'#EEEEEE'}">
|
||||
<text>{{item.name}}</text>
|
||||
</view>
|
||||
<!-- <u-tag v-if="index === tagCurrent" :text="item.name" bg-color="#DBFFEB" color="#14CA65" borderColor="#DBFFEB" shape="square" style="width: fit-content;"></u-tag> -->
|
||||
<!-- <u-tag v-else :text="item.name" bg-color="#EEEEEE" color="#666666" borderColor="#EEEEEE" shape="square" style="width: fit-content;"></u-tag> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="arrow-up" @click="showMask = false, featureMask = false">
|
||||
<text style="margin-right: 4rpx;">点击收起</text>
|
||||
<u-icon size="15" name="arrow-up-fill"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</uni-transition>
|
||||
|
||||
<!-- <uni-popup ref="popup" type="center" :animation="false">中间弹出 Popup</uni-popup> -->
|
||||
<!-- <u-popup v-model="showMask" mode="top" border-radius="14">
|
||||
<view style="margin-top: 200rpx;">出淤泥而不染，濯清涟而不妖</view>
|
||||
</u-popup> -->
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
searchBarTop: 0, //搜索栏的外边框高度，单位px
|
||||
searchBarHeight: 0, //搜索栏的高度，单位px
|
||||
windowHeight: 1,
|
||||
listDataHeight: 1, // 剩余高度
|
||||
queryParam: '',
|
||||
showMask: false,
|
||||
featureMask: false,
|
||||
categoryList: [{
|
||||
name: '烘焙宝典',
|
||||
icon: '/static/category/sy_icon_hp.png',
|
||||
active: true
|
||||
},
|
||||
{
|
||||
name: '零食铺子',
|
||||
icon: '/static/category/sy_icon_ls.png',
|
||||
active: false
|
||||
},
|
||||
{
|
||||
name: '饮品大全',
|
||||
icon: '/static/category/sy_icon_yp.png',
|
||||
active: false
|
||||
},
|
||||
{
|
||||
name: '调味菜单',
|
||||
icon: '/static/category/sy_icon_tw.png',
|
||||
active: false
|
||||
},
|
||||
{
|
||||
name: '肉食荟萃',
|
||||
icon: '/static/category/sy_icon_rs.png',
|
||||
active: false
|
||||
},
|
||||
{
|
||||
name: '乳品手册',
|
||||
icon: '/static/category/sy_icon_np.png',
|
||||
active: false
|
||||
},
|
||||
{
|
||||
name: '果蔬地图',
|
||||
icon: '/static/category/sy_icon_gs.png',
|
||||
active: false
|
||||
},
|
||||
{
|
||||
name: '食界新贵',
|
||||
icon: '/static/category/sy_icon_sj.png',
|
||||
active: false
|
||||
},
|
||||
{
|
||||
name: '欢喜盒子',
|
||||
icon: '/static/category/sy_icon_hz.png',
|
||||
active: false
|
||||
},
|
||||
{
|
||||
name: '创意工具',
|
||||
icon: '/static/category/sy_icon_cy.png',
|
||||
active: false
|
||||
}
|
||||
],
|
||||
selectedCategory: 0,
|
||||
tabbar: [{
|
||||
"name": "蛋糕面包",
|
||||
"foods": [{
|
||||
"name": "牛角面包",
|
||||
"describe": "法国风味糖皮饼干牛角面包早餐食品",
|
||||
"image": "/static/category/fl_icon_qb.png",
|
||||
"date": '2022-12-04',
|
||||
'feature': '无防腐剂'
|
||||
},
|
||||
{
|
||||
"name": "牛角面包",
|
||||
"describe": "法国风味糖皮饼干牛角面包早餐食品",
|
||||
"image": "/static/category/fl_icon_qb.png",
|
||||
"date": '2022-12-04',
|
||||
'feature': '无防腐剂'
|
||||
},
|
||||
{
|
||||
"name": "牛角面包",
|
||||
"describe": "法国风味糖皮饼干牛角面包早餐食品",
|
||||
"image": "/static/category/fl_icon_qb.png",
|
||||
"date": '2022-12-04',
|
||||
'feature': '无防腐剂'
|
||||
},
|
||||
{
|
||||
"name": "牛角面包",
|
||||
"describe": "法国风味糖皮饼干牛角面包早餐食品",
|
||||
"image": "",
|
||||
"date": '2022-12-04',
|
||||
'feature': '无防腐剂'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "糕点卷酥",
|
||||
"foods": [{
|
||||
"name": "牛角面包",
|
||||
"describe": "法国风味糖皮饼干牛角面包早餐食品",
|
||||
"image": "/static/category/fl_icon_qb.png",
|
||||
"date": '2022-12-04',
|
||||
'feature': '无防腐剂'
|
||||
},
|
||||
{
|
||||
"name": "牛角面包",
|
||||
"describe": "法国风味糖皮饼干牛角面包早餐食品",
|
||||
"image": "/static/category/fl_icon_qb.png",
|
||||
"date": '2022-12-04',
|
||||
'feature': '无防腐剂'
|
||||
},
|
||||
{
|
||||
"name": "牛角面包",
|
||||
"describe": "法国风味糖皮饼干牛角面包早餐食品",
|
||||
"image": "/static/category/fl_icon_qb.png",
|
||||
"date": '2022-12-04',
|
||||
'feature': '无防腐剂'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "饼干曲奇",
|
||||
"foods": [{
|
||||
"name": "牛角面包",
|
||||
"describe": "法国风味糖皮饼干牛角面包早餐食品",
|
||||
"image": "/static/category/fl_icon_qb.png",
|
||||
"date": '2022-12-04',
|
||||
'feature': '无防腐剂'
|
||||
},
|
||||
{
|
||||
"name": "牛角面包",
|
||||
"describe": "法国风味糖皮饼干牛角面包早餐食品",
|
||||
"image": "/static/category/fl_icon_qb.png",
|
||||
"date": '2022-12-04',
|
||||
'feature': '无防腐剂'
|
||||
},
|
||||
{
|
||||
"name": "牛角面包",
|
||||
"describe": "法国风味糖皮饼干牛角面包早餐食品",
|
||||
"image": "/static/category/fl_icon_qb.png",
|
||||
"date": '2022-12-04',
|
||||
'feature': '无防腐剂'
|
||||
},
|
||||
{
|
||||
"name": "牛角面包",
|
||||
"describe": "法国风味糖皮饼干牛角面包早餐食品",
|
||||
"image": "/static/category/fl_icon_qb.png",
|
||||
"date": '2022-12-04',
|
||||
'feature': '无防腐剂'
|
||||
}
|
||||
]
|
||||
},
|
||||
],
|
||||
tabsList: [{
|
||||
name: '上架时间'
|
||||
}, {
|
||||
name: '点赞量'
|
||||
}],
|
||||
tagsList: [{
|
||||
name: '无添加剂'
|
||||
},
|
||||
{
|
||||
name: '无添加剂'
|
||||
},
|
||||
{
|
||||
name: '无添加剂'
|
||||
},
|
||||
{
|
||||
name: '无添加剂'
|
||||
},
|
||||
{
|
||||
name: '无添加剂'
|
||||
},
|
||||
{
|
||||
name: '无添加剂'
|
||||
},
|
||||
{
|
||||
name: '无添加剂无添加剂'
|
||||
},
|
||||
{
|
||||
name: '无添加剂'
|
||||
},
|
||||
{
|
||||
name: '无添加剂'
|
||||
},
|
||||
{
|
||||
name: '无添加剂无添加剂'
|
||||
}
|
||||
],
|
||||
scrollTop: 0, //tab标题的滚动条位置
|
||||
menuCurrent: 0, // 预设当前项的值
|
||||
menuHeight: 0, // 左边菜单的高度
|
||||
menuItemHeight: 0, // 左边菜单item的高度
|
||||
tabCurrent: 0, //分类详情 上架时间, // 左边菜单item的高度
|
||||
tagCurrent: 0, //分类详情 上架时间
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
|
||||
console.log(menuButtonInfo)
|
||||
this.searchBarTop = menuButtonInfo.top;
|
||||
this.searchBarHeight = menuButtonInfo.height;
|
||||
},
|
||||
onReady() {
|
||||
let that = this;
|
||||
uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
|
||||
success(res) { //成功回调函数
|
||||
// windowHeight
|
||||
that.windowHeight = res.windowHeight //windoHeight为窗口高度，主要使用的是这个
|
||||
let titleH = uni.createSelectorQuery().select("#category-detail"); //想要获取高度的元素名（class/id）
|
||||
titleH.boundingClientRect(data => {
|
||||
let pH = that.windowHeight;
|
||||
that.listDataHeight = pH - data.top //计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
|
||||
console.log(that.listDataHeight)
|
||||
}).exec()
|
||||
}
|
||||
})
|
||||
this.$refs.ani.init({
|
||||
duration: 200,
|
||||
timingFunction: 'linear',
|
||||
transformOrigin: '-100% -100%',
|
||||
translateY: Number(-this.searchBarTop - this.searchBarHeight - 4) + 'px',
|
||||
delay: 0
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
goSearch(param) {
|
||||
this.queryParam = param
|
||||
const index = this.recentRecordList.findIndex(item => {
|
||||
return item === param
|
||||
})
|
||||
if (index > -1) {
|
||||
this.recentRecordList.splice(index, 1)
|
||||
}
|
||||
this.recentRecordList.unshift(param)
|
||||
},
|
||||
changeSelectedCategory(index) {
|
||||
this.$set(this.categoryList, this.selectedCategory, {
|
||||
...this.categoryList[this.selectedCategory],
|
||||
active: false
|
||||
});
|
||||
this.$set(this.categoryList, index, {
|
||||
...this.categoryList[index],
|
||||
active: true
|
||||
});
|
||||
this.selectedCategory = index
|
||||
this.showMask = false
|
||||
},
|
||||
changeSelectedTag(index) {
|
||||
this.tagCurrent = index
|
||||
this.featureMask = false
|
||||
},
|
||||
toShowPop() {
|
||||
console.log('---pop')
|
||||
this.showMask = true
|
||||
// this.$refs.popup.open('top')
|
||||
},
|
||||
getImg() {
|
||||
return Math.floor(Math.random() * 35);
|
||||
},
|
||||
// 点击左边的栏目切换
|
||||
async swichMenu(index) {
|
||||
if (index == this.menuCurrent) return;
|
||||
this.menuCurrent = index;
|
||||
// 如果为0，意味着尚未初始化
|
||||
if (this.menuHeight == 0 || this.menuItemHeight == 0) {
|
||||
await this.getElRect('menu-scroll-view', 'menuHeight');
|
||||
await this.getElRect('u-tab-item', 'menuItemHeight');
|
||||
}
|
||||
// 将菜单菜单活动item垂直居中
|
||||
this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
|
||||
},
|
||||
// 获取一个目标元素的高度
|
||||
getElRect(elClass, dataVal) {
|
||||
new Promise((resolve, reject) => {
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query.select('.' + elClass).fields({
|
||||
size: true
|
||||
}, res => {
|
||||
// 如果节点尚未生成，res值为null，循环调用执行
|
||||
if (!res) {
|
||||
setTimeout(() => {
|
||||
this.getElRect(elClass);
|
||||
}, 10);
|
||||
return;
|
||||
}
|
||||
this[dataVal] = res.height;
|
||||
}).exec();
|
||||
})
|
||||
},
|
||||
exportView(str) {
|
||||
if (str === 'showMask') {
|
||||
this.showMask = true
|
||||
// 同时右平移到 100px,旋转 360 读
|
||||
// this.$refs.ani.step({
|
||||
// translateY: Number(-this.searchBarTop - this.searchBarHeight - 4) + 'px'
|
||||
// })
|
||||
// 开始执行动画
|
||||
this.$refs.ani.run()
|
||||
} else if (str === 'featureMask') {
|
||||
this.featureMask = true
|
||||
}
|
||||
},
|
||||
tabChange(selectTab) {
|
||||
console.log(selectTab)
|
||||
this.tabCurrent = selectTab.index;
|
||||
},
|
||||
navigateToSearch() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/search/search'
|
||||
})
|
||||
},
|
||||
goBack() {
|
||||
uni.navigateBack()
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.top-search {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.category-view {
|
||||
height: 230rpx;
|
||||
background-color: #F6F6F6;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
||||
.left {
|
||||
width: calc(100% - 60rpx);
|
||||
padding: 32rpx;
|
||||
display: flex;
|
||||
overflow: auto;
|
||||
|
||||
// flex-direction: row;
|
||||
// flex-wrap: wrap;
|
||||
// align-items: center;
|
||||
|
||||
.category-item {
|
||||
margin-right: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
.icon-box {
|
||||
text-align: center;
|
||||
|
||||
.icon {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
padding: 4rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
width: 156rpx;
|
||||
text-align: center;
|
||||
|
||||
.no-active {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang-SC-Medium, PingFang-SC;
|
||||
font-weight: 500;
|
||||
color: #616161;
|
||||
line-height: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 60rpx;
|
||||
padding: 20rpx;
|
||||
background: #F6F6F6;
|
||||
border-left: 2rpx #F6F6F6 solid;
|
||||
box-shadow: -2px 0px 4px 0px rgba(218, 218, 218, 0.5);
|
||||
|
||||
font-size: 28rpx;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #343434;
|
||||
line-height: 34rpx;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.category-detail {
|
||||
display: flex;
|
||||
background-color: #F5F5F5;
|
||||
|
||||
.u-tab-view {
|
||||
width: 210rpx;
|
||||
height: 100%;
|
||||
|
||||
.u-tab-item {
|
||||
height: 90rpx;
|
||||
background: #f6f6f6;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 26rpx;
|
||||
color: #444;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
|
||||
.title {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #14CA65;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.u-tab-item-active {
|
||||
position: relative;
|
||||
color: #000;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
background: #fff;
|
||||
border: 2rpx solid #fff;
|
||||
border-radius: 25% 0 0 0;
|
||||
}
|
||||
|
||||
.u-tab-item-active::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border: 1rpx solid #14CA65;
|
||||
background-color: #14CA65;
|
||||
width: 1rpx;
|
||||
height: 14rpx;
|
||||
left: 27rpx;
|
||||
top: 37srpx;
|
||||
border-radius: 1rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.category-last {
|
||||
width: calc(100% - 206rpx);
|
||||
height: 100%;
|
||||
|
||||
.category-tag-box {
|
||||
background-color: #fff;
|
||||
height: 110rpx;
|
||||
display: flex;
|
||||
border-bottom: 1rpx solid #EEEEEE;
|
||||
|
||||
.left {
|
||||
width: calc(100% - 60rpx);
|
||||
padding: 12rpx;
|
||||
white-space: nowrap;
|
||||
overflow: auto;
|
||||
line-height: 90rpx;
|
||||
;
|
||||
|
||||
.category-tag {
|
||||
margin-right: 10rpx;
|
||||
width: fit-content;
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 60rpx;
|
||||
padding: 20rpx;
|
||||
background: #F6F6F6;
|
||||
border-left: 2rpx #F6F6F6 solid;
|
||||
box-shadow: -2px 0px 4px 0px rgba(218, 218, 218, 0.5);
|
||||
|
||||
font-size: 28rpx;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #343434;
|
||||
line-height: 34rpx;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.category-order {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
border-bottom: 1rpx solid #EEEEEE;
|
||||
}
|
||||
|
||||
.goods-list {
|
||||
background-color: #fff;
|
||||
height: calc(100% - 210rpx);
|
||||
|
||||
.goods-item {
|
||||
padding: 16rpx;
|
||||
margin-bottom: 10rpx;
|
||||
display: flex;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 2px 3px 0px rgba(169, 169, 169, 0.2);
|
||||
border-bottom: 1px solid #EEEEEE;
|
||||
|
||||
.left {
|
||||
width: 170rpx;
|
||||
position: relative;
|
||||
|
||||
.image {
|
||||
padding: 20rpx;
|
||||
height: calc(100% - 40rpx)
|
||||
}
|
||||
|
||||
.tag {
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
right: 0;
|
||||
float: right;
|
||||
|
||||
.tag-content {
|
||||
padding: 16rpx;
|
||||
border-radius: 25rpx 0 0 25rpx;
|
||||
line-height: 14rpx;
|
||||
background-color: #0DB658;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
width: fit-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
padding: 20rpx;
|
||||
height: calc(100% - 40rpx);
|
||||
|
||||
.name {
|
||||
font-size: 33rpx;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #E10707;
|
||||
line-height: 56rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.describe {
|
||||
font-size: 33rpx;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #3E3E3E;
|
||||
line-height: 37rpx;
|
||||
|
||||
word-break: break-all;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
/* 这里是超出几行省略 */
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.publish-date {
|
||||
color: #A3A3A3;
|
||||
font-size: 26rpx;
|
||||
line-height: 64rpx;
|
||||
|
||||
.publish-date-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.tag {
|
||||
.tag-content {
|
||||
padding: 16rpx;
|
||||
border-radius: 25rpx;
|
||||
line-height: 14rpx;
|
||||
background-color: #FDD96A;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
width: fit-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bg {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
width: 100%;
|
||||
background-color: black;
|
||||
z-index: 1001;
|
||||
-moz-opacity: 0.7;
|
||||
opacity: 0.70;
|
||||
filter: alpha(opacity=70);
|
||||
}
|
||||
|
||||
/deep/ .transfromClass {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1001;
|
||||
}
|
||||
.show {
|
||||
display: none;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
width: calc(100% - 20rpx);
|
||||
height: fit-content;
|
||||
padding: 20rpx 10rpx 0 10rpx;
|
||||
border: 1rpx solid #fff;
|
||||
background-color: #fff;
|
||||
border-radius: 0 0 20rpx 20rpx;
|
||||
z-index: 1002;
|
||||
overflow: auto;
|
||||
transition: all 3.4s;
|
||||
|
||||
.category-view-all {
|
||||
width: calc(100% - 20rpx);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
border-bottom: 1px solid #EEEEEE;
|
||||
height: 360rpx;
|
||||
overflow: auto;
|
||||
// transition: height 3.4s ease;
|
||||
|
||||
.category-item {
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// justify-content: center;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.icon-box {
|
||||
text-align: center;
|
||||
|
||||
.icon {
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
padding: 4rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
text-align: center;
|
||||
|
||||
.active {
|
||||
width: fit-content;
|
||||
font-size: 26rpx;
|
||||
text-align: center;
|
||||
padding: 6rpx;
|
||||
border-radius: 10rpx;
|
||||
line-height: 32rpx;
|
||||
color: #fff;
|
||||
background-color: #14CA65;
|
||||
}
|
||||
|
||||
.no-active {
|
||||
font-size: 26rpx;
|
||||
font-family: PingFang-SC-Medium, PingFang-SC;
|
||||
font-weight: 500;
|
||||
color: #616161;
|
||||
line-height: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.category-tag {
|
||||
margin-right: 10rpx;
|
||||
margin-bottom: 20rpx;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
|
||||
.arrow-up {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 28rpx;
|
||||
padding: 24rpx;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/deep/ .u-tag {
|
||||
flex: none;
|
||||
width: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -106,13 +106,13 @@
|
||||
//点击搜索框跳转到搜索页面
|
||||
toSearch() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/search/search'
|
||||
url: '../../packageSearch/search/search'
|
||||
})
|
||||
},
|
||||
//点击一级分类跳转到分类页
|
||||
toClassify() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/goods-category-search/category-index'
|
||||
url: '../../packageSearch/goods-category-search/category-index'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@@ -70,11 +70,11 @@
|
||||
//点击行内新闻时
|
||||
if (listIndex == 0) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/report/news/news'
|
||||
url: '../../packageReport/news/news'
|
||||
})
|
||||
} else if (listIndex == 2) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/report/certifiedCj/certifiedCj'
|
||||
url: '../../packageReport/certifiedCj/certifiedCj'
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
18464
utills/city.js
Normal file
18464
utills/city.js
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user