Skip to content

S
store-system
Commit bc444cb2 authored by 燕南天's avatar 燕南天
Browse files
Options

串接口

parent 79cd054e
Hide whitespace changes
Inline Side-by-side
Showing with 836 additions and 521 deletions
2code/web/h5_pro/config/index.js
View file @ bc444cb2
...@@ -13,7 +13,8 @@ module.exports = { ...@@ -13,7 +13,8 @@ module.exports = {
proxyTable: {}, proxyTable: {},
// Various Dev Server settings // Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST // host: 'localhost', // can be overwritten by process.env.HOST
host: '192.168.1.107', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: true, autoOpenBrowser: true,
errorOverlay: true, errorOverlay: true,
......
2code/web/h5_pro/src/api/home.js 0 → 100644
View file @ bc444cb2
import request from './request'
import qs from 'qs'
export function getAdvertList() {
return request({
url: '/h5/index/getAdvertList',
method: 'post',
})
}
export function getStoreList() {
return request({
url: 'h5/index/getStoreList',
method: 'post'
})
}
export function getWorkerList() {
return request({
url: '/h5/index/getWorkerList',
method: 'post'
})
}
2code/web/h5_pro/src/api/hostCfg.js 0 → 100644
View file @ bc444cb2
const host = "http://192.168.1.100:8080/store-system"
export default host
\ No newline at end of file
2code/web/h5_pro/src/api/request.js 0 → 100644
View file @ bc444cb2
import axios from 'axios'
import host from './hostCfg'
// create an axios instance
const service = axios.create({
baseURL: host, // api的base_url
timeout: 5000, // request timeout
headers: {'Content-Type':'application/x-www-form-urlencoded'}
})
console.log('请求地址：'+process.env.BASE_API);
// request interceptor
service.interceptors.request.use(config => {
return config
}, error => {
alert('请求拦截，出现错误了')
})
// respone interceptor
service.interceptors.response.use(
response => response.data,
error => {
alert('响应拦截出现错误了')
})
export default service
2code/web/h5_pro/src/api/shopList.js 0 → 100644
View file @ bc444cb2
import request from './request'
import qs from 'qs'
export function searchShopResult(data) {
return request({
url: '/h5/index/searchShopResult',
method: 'post',
data:qs.stringify(data)
})
}
// 陕西省id写死 610000
export function getCityList(data) {
return request({
url: '/pca/getCityList',
method: 'post',
data:qs.stringify(data)
})
}
export function getAreaList(data) {
return request({
url: '/pca/getAreaList',
method: 'post',
data:qs.stringify(data)
})
}
export function getDataDictsStore() {
return request({
url: '/h5/config/getDataDictsStore',
method: 'post'
})
}
2code/web/h5_pro/src/api/workerList.js 0 → 100644
View file @ bc444cb2
import request from './request'
import qs from 'qs'
export function searchWorkerResult(data) {
return request({
url: '/h5/index/searchWorkerResult',
method: 'post',
data:qs.stringify(data)
})
}
export function getDataDictsHight() {
return request({
url: '/h5/config/getDataDictsHight',
method: 'post',
})
}
export function getDataDictsAge() {
return request({
url: '/h5/config/getDataDictsAge',
method: 'post',
})
}
2code/web/h5_pro/src/router/index.js
View file @ bc444cb2
...@@ -6,6 +6,8 @@ import ShopList from '@/views/shopList/index.vue' ...@@ -6,6 +6,8 @@ import ShopList from '@/views/shopList/index.vue'
import WorkerList from '@/views/workerList/index.vue' import WorkerList from '@/views/workerList/index.vue'
import ShopDetails from '@/views/shopDetails/index.vue' import ShopDetails from '@/views/shopDetails/index.vue'
import WebView from '@/views/webView/index.vue'
Vue.use(Router) Vue.use(Router)
export default new Router({ export default new Router({
...@@ -29,6 +31,11 @@ export default new Router({ ...@@ -29,6 +31,11 @@ export default new Router({
path: '/shopDetails', path: '/shopDetails',
name: 'shopDetails', name: 'shopDetails',
component: ShopDetails component: ShopDetails
},
{
path: '/webView',
name: 'webView',
component: WebView
} }
] ]
}) })
2code/web/h5_pro/src/views/home/components/HBanner.vue
View file @ bc444cb2
<template> <template>
<swiper :options="swiperOption"> <swiper :options="swiperOption">
<swiper-slide v-for="(item,index) in data" :key="index"> <swiper-slide v-for="(item,index) in data" :key="index">
<img :src="item.url" :alt="item.href" :data-href="item.href" @click="toWebview"> <img :src="item.advertPicUrl" :alt="item.advertPicUrl" @click="toWebview(item)">
</swiper-slide> </swiper-slide>
<div class="swiper-pagination swiper-pagination-bullets" slot="pagination"></div> <div class="swiper-pagination swiper-pagination-bullets" slot="pagination"></div>
...@@ -22,9 +22,10 @@ export default { ...@@ -22,9 +22,10 @@ export default {
}; };
}, },
methods: { methods: {
toWebview(e) { toWebview(item) {
const href = e.target.dataset.href; // const href = e.target.dataset.href;
alert("跳转到：" + href); // window.location.href = href;
this.$router.push({ name: 'webView', params: { html:item.advertContent, title:item.advertTitle}})
} }
} }
}; };
......
2code/web/h5_pro/src/views/home/components/HShopList.vue
View file @ bc444cb2
...@@ -2,11 +2,11 @@ ...@@ -2,11 +2,11 @@
<div class="shop-list-wrapper"> <div class="shop-list-wrapper">
<div class="list-item"> <div class="list-item">
<div class="img"> <div class="img">
<img :src="data.url" alt=""> <img :src="data.storeHomePic" alt="">
</div> </div>
<div class="item-infro"> <div class="item-infro">
<div class="name" >{{data.title}}</div> <div class="name" >{{data.storeName}}</div>
<div class="details">{{data.infro}}</div> <div class="details">{{data.storePosition}}</div>
</div> </div>
</div> </div>
</div> </div>
......
2code/web/h5_pro/src/views/home/components/HStaff.vue
View file @ bc444cb2
<template> <template>
<div class="staff-item"> <div class="staff-item">
<img :src="data.src" alt=""> <img :src="data.workerHomePic" alt="">
<div class="infro">{{data.bref}}</div> <div class="infro">{{data.workerName}}</div>
</div> </div>
</template> </template>
......
2code/web/h5_pro/src/views/home/index.vue
View file @ bc444cb2
...@@ -3,11 +3,11 @@ ...@@ -3,11 +3,11 @@
<c-header title="首页" noBack="1"></c-header> <c-header title="首页" noBack="1"></c-header>
<h-banner :data="bannerData"></h-banner> <h-banner :data="bannerData"></h-banner>
<h-item-title title="精选商家" href="/shopList"></h-item-title> <h-item-title title="精选商家" href="/shopList"></h-item-title>
<h-shop-list v-for="(item,index) in shopListData" :key="index" @click.native="toShopDetails(item.id)" :data="item"></h-shop-list> <h-shop-list v-for="(item,index) in shopListData" :key="index" @click.native="toShopDetails(item.storeId)" :data="item"></h-shop-list>
<h-item-title title="闪亮之星" href="/workerList"></h-item-title> <h-item-title title="闪亮之星" href="/workerList"></h-item-title>
<div class="staff-wrapper"> <div class="staff-wrapper">
<h-staff v-for="(item,index) in staffData" :key="index" @click.native="toDetails(item.id)" :data="item"></h-staff> <h-staff v-for="(item,index) in staffData" :key="index" @click.native="toDetails(item.workerId)" :data="item"></h-staff>
</div> </div>
</div> </div>
...@@ -20,102 +20,69 @@ import HShopList from "./components/HShopList"; ...@@ -20,102 +20,69 @@ import HShopList from "./components/HShopList";
import HItemTitle from "./components/HItemTitle"; import HItemTitle from "./components/HItemTitle";
import HStaff from "./components/HStaff"; import HStaff from "./components/HStaff";
import * as home from "../../api/home";
import axios from "axios";
export default { export default {
components: { CHeader, HBanner, HShopList, HItemTitle, HStaff }, components: { CHeader, HBanner, HShopList, HItemTitle, HStaff },
data() { data() {
return { return {
bannerData: [ bannerData: [],
{
url: "1", shopListData: [],
href: "111"
}, staffData: []
{
url: "2",
href: "222"
}
],
shopListData: [
{
id: "1",
url: "12",
title: "123",
infro: "312321"
},
{
id: "2",
url: "12",
title: "123",
infro: "312321"
}
],
staffData: [
{
id: "1",
url: "1",
bref: "1"
},
{
id: "2",
url: "2",
bref: "2"
},
{
id: "1",
url: "1",
bref: "1"
},
{
id: "2",
url: "2",
bref: "2"
},
{
id: "1",
url: "1",
bref: "1"
},
{
id: "2",
url: "2",
bref: "2"
},
{
id: "1",
url: "1",
bref: "1"
},
{
id: "2",
url: "2",
bref: "2"
},
{
id: "1",
url: "1",
bref: "1"
}
]
}; };
}, },
beforeMount() {
this.getPageData();
},
methods: { methods: {
toShopDetails(id) { toShopDetails(id) {
this.$router.push({ name: 'shopDetails', params: { id: id }}) this.$router.push({ name: "shopDetails", params: { id: id } });
}, },
toDetails(id) { toDetails(id) {
alert(id); alert(id);
},
getPageData(cb) {
const getAdvertList = () => {
home.getAdvertList().then(res => {
this.bannerData = res.data;
});
};
const getStoreList = () => {
home.getStoreList().then(res => {
this.shopListData = res.data;
});
};
const getWorkerList = () => {
home.getWorkerList().then(res => {
this.staffData = res.data;
});
};
axios.all([getAdvertList(), getStoreList(),getWorkerList()]).then((s, f) => {
cb ? cb() : "";
});
} }
} }
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@r:100rem; @r: 100rem;
.staff-wrapper{ .staff-wrapper {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
padding: 0 30/@r; padding: 0 30 / @r;
} }
</style> </style>
......
2code/web/h5_pro/src/views/shopList/components/MoreShop.vue
View file @ bc444cb2
...@@ -16,19 +16,15 @@ ...@@ -16,19 +16,15 @@
<div class="item-content"> <div class="item-content">
<div class="select-wrapper"> <div class="select-wrapper">
<label>市区：</label> <label>市区：</label>
<select> <select v-model="CID" @change="chooseCityFun">
<option value="">1</option> <option v-for="(item,idx) in CData" :key="idx" :value="item.codeC">{{item.name}}</option>
<option value="">2</option>
<option value="">3</option>
</select> </select>
</div> </div>
<div class="select-wrapper"> <div class="select-wrapper">
<label>县区：</label> <label>县区：</label>
<select> <select v-model="AID">
<option value="">1</option> <option v-for="(item,idx) in AData" :key="idx" :value="item.codeA">{{item.name}}</option>
<option value="">2</option>
<option value="">3</option>
</select> </select>
</div> </div>
</div> </div>
...@@ -38,17 +34,19 @@ ...@@ -38,17 +34,19 @@
<div class="choose-item"> <div class="choose-item">
<div class="title">价格区间</div> <div class="title">价格区间</div>
<div class="price-content"> <div class="price-content">
<div class="price-item">100-200</div>
<div class="price-item">200-300</div> <div class="price-item" v-for="(item,idx) in priceData" :key="idx">
<div class="price-item">100-200</div> <input type="radio" :id="item.dataDictItemId" name="choose_price" :value="item" v-model="priceItem">
<div class="price-item">200-300</div> <label :for="item.dataDictItemId"><span>{{item.itemValue}}</span></label>
<div class="price-item">自定义</div> </div>
</div> </div>
<div class="other-price"> <div class="other-price" v-if="priceItem.dataDictItemId=='ownID'">
<input type="text" placeholder="最小价格"> <input type="number" maxlength="4" placeholder="最小价格" v-model="minPrice">
<span>~</span> <span>~</span>
<input type="text" placeholder="最大价格"> <input type="number" maxlength="4" placeholder="最大价格" v-model="maxPrice">
</div> </div>
</div> </div>
...@@ -60,155 +58,297 @@ ...@@ -60,155 +58,297 @@
</template> </template>
<script> <script>
import axios from "axios";
import {
getCityList,
getAreaList,
getDataDictsStore
} from "../../../api/shopList";
export default { export default {
props:[], props: [],
data(){ data() {
return { return {
show:false show: false,
} CData: [],
CID: "",
AData: [],
AID: "",
priceData: [],
priceItem: "",
minPrice: "",
maxPrice: ""
};
},
methods: {
taggleModelFun() {
this.getChooseData(() => {
this.show = !this.show;
});
}, },
methods:{
taggleModelFun(){ handleCancle() {
this.show = !this.show this.CData = [];
}, this.CID = "";
this.AData = [];
handleCancle(){ this.AID = "";
this.show = !this.show this.priceData = [];
}, this.priceItem = "";
handleConfirm(){ this.minPrice = "";
this.$emit('emitSuccess',{name:'jiangqi',age:28}) this.maxPrice = "";
} this.show = !this.show;
},
// 获取选择数据
getChooseData(cb) {
this.getCData(() => {
this.getPriceData(() => {
cb ? cb() : "";
});
});
},
// 获取市区下拉数据
getCData(cb) {
this.AData = [];
this.AID = "";
getCityList({ codeP: "610000" }).then(res => {
this.CData = res.data;
cb ? cb() : "";
});
},
chooseCityFun() {
getAreaList({ codeC: this.CID }).then(res => {
this.AData = res.data;
});
},
// 获取价格选择区间
getPriceData(cb) {
getDataDictsStore().then(res => {
const obj = {
dataDictItemId: "ownID",
itemValue: "自定义"
};
let arr = res.data;
arr.push(obj);
this.priceData = arr;
cb ? cb() : "";
});
},
handleConfirm() {
const param = {
cityId: this.CID,
countyId: this.AID,
consumeInterval:
this.priceItem.dataDictItemId == "ownID"
? `${this.minPrice}-${this.maxPrice}`
: this.priceItem.itemValue
};
this.$emit("emitSuccess", param);
} }
} }
};
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@r:100rem; @r: 100rem;
.more-shop{ .more-shop {
.choose-btn{ .choose-btn {
font-size: 24/@r; font-size: 24 / @r;
color: #fff; color: #fff;
background: #ca0c16; background: #ca0c16;
position: fixed; position: fixed;
bottom: 40/@r; bottom: 40 / @r;
right: 40/@r; right: 40 / @r;
padding: 10/@r; padding: 10 / @r;
border-radius: 8/@r; border-radius: 8 / @r;
z-index: 10000; z-index: 10000;
}
.choose-content {
&.active {
.bg {
display: block;
}
.content {
right: 0;
opacity: 1;
}
} }
.choose-content{ .bg {
&.active{ position: fixed;
.bg{ top: 0;
display: block; left: 0;
} width: 100%;
.content{ height: 100%;
right: 0; background: rgba(0, 0, 0, 0.5);
opacity: 1; z-index: 10001;
} display: none;
}
.content {
position: fixed;
top: 0;
right: -550 / @r;
width: 550 / @r;
height: 100%;
background: #fff;
z-index: 10001;
opacity: 0;
transition: all 0.3s;
.header {
font-size: 32 / @r;
text-align: center;
position: relative;
line-height: 80 / @r;
background: #ca0c16;
color: #fff;
.cancle,
.confirm {
position: absolute;
top: 0;
} }
.bg{ .cancle {
position: fixed; left: 0;
top: 0; padding-left: 20 / @r;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .5);
z-index: 10001;
display: none;
} }
.content{ .confirm {
position: fixed; right: 0;
top: 0; padding-right: 20 / @r;
right: -550/@r; }
width: 550/@r; }
height: 100%;
background: #fff; .body {
z-index: 10001; padding: 0 20 / @r;
opacity: 0; .choose-item {
transition: all .3s; margin-bottom: 20 / @r;
.header{ .title {
font-size: 32/@r; font-size: 28 / @r;
text-align: center; line-height: 70 / @r;
border-bottom: solid 1px #dedede;
padding-left: 20 / @r;
}
.item-content {
font-size: 24 / @r;
.select-wrapper {
line-height: 60 / @r;
margin-top: 20 / @r;
label {
color: #666;
}
select {
border: none;
background: none;
outline: none;
height: 60 / @r;
line-height: 60 / @r;
border: solid 1px #dedede;
width: 400 / @r;
border-radius: 8 / @r;
}
}
}
.price-content {
display: flex;
flex-wrap: wrap;
font-size: 24 / @r;
margin-top: 20 / @r;
.price-item {
position: relative;
display: inline-block;
margin-right: 20 / @r;
margin-bottom: 20 / @r;
border-radius: 8 / @r;
overflow: hidden;
// 自定义多选框的样式
label {
margin: 0;
cursor: pointer;
font-size: 28 / @r;
color: #555;
position: relative; position: relative;
line-height: 80/@r; span {
background: #ca0c16; font-size: 28 / @r;
color: #fff; color: #999;
.cancle, display: inline-block;
.confirm{ width: 100%;
position: absolute; height: 100%;
top:0; text-align: center;
} line-height: 80 / @r;
.cancle{ position: absolute;
left: 0; left: 0;
padding-left: 20/@r;
} -webkit-touch-callout: none; /* iOS Safari */
.confirm{ -webkit-user-select: none; /* Chrome/Safari/Opera */
right: 0; -khtml-user-select: none; /* Konqueror */
padding-right: 20/@r; -moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
not supported by any browser */
} }
} }
input:focus {
outline: none;
}
input[type="radio"] + label::before,
input[type="checkbox"] + label::before {
margin: 0;
content: "\a0"; /*不换行空格*/
display: inline-block;
width: 200 / @r;
padding: 20 / @r 0;
background: #fafafa;
}
input[type="radio"]:checked + label::before,
input[type="checkbox"]:checked + label::before {
margin: 0;
content: "\a0";
background: #de4b4b;
}
.body{ input[type="radio"]:checked + label,
padding: 0 20/@r; input[type="checkbox"]:checked + label {
.choose-item{ span {
margin-bottom:20/@r; color: #fff;
.title{
font-size: 28/@r;
line-height: 70/@r;
border-bottom: solid 1px #dedede;
padding-left: 20/@r;
}
.item-content{
font-size: 24/@r;
.select-wrapper{
line-height: 60/@r;
margin-top: 20/@r;
label{
color: #666;
}
select{
border: none;
background: none;
outline: none;
height: 60/@r;
line-height: 60/@r;
border:solid 1px #dedede;
width: 400/@r;
border-radius: 8/@r;
}
}
}
.price-content{
display: flex;
flex-wrap: wrap;
font-size: 24/@r;
margin-top: 20/@r;
.price-item{
padding: 20/@r;
border: solid 1px #dedede;
border-radius: 8/@r;
margin: 10/@r;
}
}
.other-price{
font-size: 24/@r;
line-height: 60/@r;
margin-left: 10/@r;
margin-top: 10/@r;
input{
display: inline-block;
border: solid 1px #dedede;
border-radius: 8/@r;
width: 200/@r;
height: 60/@r;
text-align: center;
}
}
} }
}
input[type="radio"],
input[type="checkbox"] {
position: absolute;
clip: rect(0, 0, 0, 0);
outline: none;
}
}
}
.other-price {
font-size: 24 / @r;
line-height: 60 / @r;
margin-left: 10 / @r;
margin-top: 10 / @r;
input {
display: inline-block;
border: solid 1px #dedede;
border-radius: 8 / @r;
width: 200 / @r;
height: 60 / @r;
text-align: center;
} }
}
} }
}
} }
}
} }
</style> </style>
2code/web/h5_pro/src/views/shopList/components/SItem.vue
View file @ bc444cb2
<template> <template>
<div class="item"> <div class="item">
<div class="img"> <div class="img">
<img :src="data.src" alt=""> <img :src="data.storeHomePic" alt="">
</div> </div>
<div class="item-infro"> <div class="item-infro">
<div class="title">{{data.title}}</div> <div class="title">{{data.storeName}}</div>
<div class="infro">{{data.infro}}</div> <div class="infro">{{data.storePosition}}</div>
<div class="adress">{{data.adress}}</div> <div class="adress">管理员：{{data.administratorsName}}</div>
</div> </div>
</div> </div>
</template> </template>
......
2code/web/h5_pro/src/views/shopList/index.vue
View file @ bc444cb2
...@@ -10,46 +10,37 @@ ...@@ -10,46 +10,37 @@
import CHeader from '@/components/CHeader' import CHeader from '@/components/CHeader'
import SItem from './components/SItem' import SItem from './components/SItem'
import MoreShop from './components/MoreShop' import MoreShop from './components/MoreShop'
import * as shopList from "../../api/shopList"
export default { export default {
components:{CHeader,SItem,MoreShop}, components:{CHeader,SItem,MoreShop},
data(){ data(){
return { return {
shopListData:[ shopListData:[]
{
id:'1',
url:'111',
title:'1111',
infro:'1111111',
adress:'111111'
},
{
id:'2',
url:'222222',
title:'22222222',
infro:'222222222',
adress:'22222222222'
},
{
id:'3333333',
url:'33333333333333',
title:'333333333333333',
infro:'3333333333333',
adress:'33333333333333333333'
}
]
} }
}, },
beforeMount(){ beforeMount(){
this.getPageData({})
}, },
methods:{ methods:{
toDetails(id){ toDetails(id){
this.$router.push({ name: 'shopDetails', params: { id: id }}) this.$router.push({ name: 'shopDetails', params: { id: id }})
}, },
handleChooseSuccess(data){ handleChooseSuccess(data){
alert('参数'+JSON.stringify(data)) alert('参数'+JSON.stringify(data))
this.$refs.chooseMore.handleCancle() this.getPageData(data,()=>{
this.$refs.chooseMore.handleCancle()
})
},
getPageData(data,cb){
shopList.searchShopResult(data).then(res=>{
this.shopListData = res.data
cb?cb():''
})
} }
} }
} }
......
2code/web/h5_pro/src/views/webView/index.vue 0 → 100644
View file @ bc444cb2
<template>
<div class="page-wrapper">
<c-header :title="title"></c-header>
<div class="web-view-content" v-html="html"></div>
</div>
</template>
<script>
import CHeader from "@/components/CHeader";
export default {
components:{CHeader},
data(){
return{
html:'',
title:''
}
},
beforeMount(){
this.html = this.$route.params.html
this.title = this.$route.params.title
}
}
</script>
<style lang="less" scoped>
@r:100rem;
.web-view-content{
background: #ff0;
padding: 20/@r;
*{
font-size: inherit!important;
}
}
</style>
2code/web/h5_pro/src/views/workerList/components/MoreWorker.vue
View file @ bc444cb2
...@@ -14,17 +14,16 @@ ...@@ -14,17 +14,16 @@
<div class="choose-item"> <div class="choose-item">
<div class="title">年龄区间</div> <div class="title">年龄区间</div>
<div class="price-content"> <div class="price-content">
<div class="price-item">100-200</div> <div class="price-item" v-for="(item,idx) in ageData" :key="idx">
<div class="price-item">200-300</div> <input type="radio" :id="item.dataDictItemId" name="choose_a" :value="item" v-model="ageItem">
<div class="price-item">100-200</div> <label :for="item.dataDictItemId"><span>{{item.itemValue}}</span></label>
<div class="price-item">200-300</div> </div>
<div class="price-item">自定义</div>
</div> </div>
<div class="other-price"> <div class="other-price" v-if="ageItem.dataDictItemId=='ownAgeID'">
<input type="text" placeholder="最小年龄"> <input type="text" placeholder="最小年龄" v-model="minAge">
<span>~</span> <span>~</span>
<input type="text" placeholder="最大年龄"> <input type="text" placeholder="最大年龄" v-model="maxAge">
</div> </div>
</div> </div>
...@@ -33,17 +32,17 @@ ...@@ -33,17 +32,17 @@
<div class="choose-item"> <div class="choose-item">
<div class="title">身高区间</div> <div class="title">身高区间</div>
<div class="price-content"> <div class="price-content">
<div class="price-item">100-200</div> <div class="price-item" v-for="(item,idx) in heightData" :key="idx">
<div class="price-item">200-300</div> <input type="radio" :id="item.dataDictItemId" name="choose_h" :value="item" v-model="heightItem">
<div class="price-item">100-200</div> <label :for="item.dataDictItemId"><span>{{item.itemValue}}</span></label>
<div class="price-item">200-300</div> </div>
<div class="price-item">自定义</div>
</div> </div>
<div class="other-price"> <div class="other-price" v-if="heightItem.dataDictItemId=='ownHeightID'">
<input type="text" placeholder="最小身高"> <input type="text" placeholder="最小身高" v-model="minHeight">
<span>~</span> <span>~</span>
<input type="text" placeholder="最大身高"> <input type="text" placeholder="最大身高" v-model="maxHeight">
</div> </div>
</div> </div>
...@@ -55,155 +54,277 @@ ...@@ -55,155 +54,277 @@
</template> </template>
<script> <script>
import { getDataDictsHight, getDataDictsAge } from "../../../api/workerList";
export default { export default {
props:[], props: [],
data(){ data() {
return { return {
show:false show: false,
}
heightData: [],
ageData: [],
heightItem: {},
ageItem: {},
minHeight: "",
maxHeight: "",
minAge: "",
maxAge: ""
};
},
methods: {
taggleModelFun() {
this.getChooseData(() => {
this.show = !this.show;
});
}, },
methods:{
taggleModelFun(){ handleCancle() {
this.show = !this.show this.heightData = [];
}, this.ageData = [];
handleCancle(){ this.heightItem = {};
this.show = !this.show this.ageItem = {};
},
handleConfirm(){ this.minHeight = "";
alert('确认') this.maxHeight = "";
}
this.minAge = "";
this.maxAge = "";
this.show = !this.show;
},
handleConfirm() {
const param = {
workerAge:
this.ageItem.dataDictItemId == "ownAgeID"
? `${this.minAge}-${this.maxAge}`
: this.ageItem.itemValue,
workerHeight:
this.heightItem.dataDictItemId == "ownHeightID"
? `${this.minHeight}-${this.maxHeight}`
: this.heightItem.itemValue
};
this.$emit("emitSuccess", param);
},
// 获取选择数据
getChooseData(cb) {
getDataDictsHight().then(res => {
const obj = {
dataDictItemId: "ownHeightID",
itemValue: "自定义"
};
let arr = res.data;
arr.push(obj);
this.heightData = arr;
getDataDictsAge().then(res => {
const obj = {
dataDictItemId: "ownAgeID",
itemValue: "自定义"
};
let arr = res.data;
arr.push(obj);
this.ageData = arr;
cb ? cb() : "";
});
});
} }
} }
};
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@r:100rem; @r: 100rem;
.more-shop{ .more-shop {
.choose-btn{ .choose-btn {
font-size: 24/@r; font-size: 24 / @r;
color: #fff; color: #fff;
background: #ca0c16; background: #ca0c16;
position: fixed; position: fixed;
bottom: 40/@r; bottom: 40 / @r;
right: 40/@r; right: 40 / @r;
padding: 10/@r; padding: 10 / @r;
border-radius: 8/@r; border-radius: 8 / @r;
z-index: 10000; z-index: 10000;
}
.choose-content {
&.active {
.bg {
display: block;
}
.content {
right: 0;
opacity: 1;
}
} }
.choose-content{ .bg {
&.active{ position: fixed;
.bg{ top: 0;
display: block; left: 0;
} width: 100%;
.content{ height: 100%;
right: 0; background: rgba(0, 0, 0, 0.5);
opacity: 1; z-index: 10001;
} display: none;
}
.content {
position: fixed;
top: 0;
right: -550 / @r;
width: 550 / @r;
height: 100%;
background: #fff;
z-index: 10001;
opacity: 0;
transition: all 0.3s;
.header {
font-size: 32 / @r;
text-align: center;
position: relative;
line-height: 80 / @r;
background: #ca0c16;
color: #fff;
.cancle,
.confirm {
position: absolute;
top: 0;
} }
.bg{ .cancle {
position: fixed; left: 0;
top: 0; padding-left: 20 / @r;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .5);
z-index: 10001;
display: none;
} }
.content{ .confirm {
position: fixed; right: 0;
top: 0; padding-right: 20 / @r;
right: -550/@r; }
width: 550/@r; }
height: 100%;
background: #fff; .body {
z-index: 10001; padding: 0 20 / @r;
opacity: 0; .choose-item {
transition: all .3s; margin-bottom: 20 / @r;
.header{ .title {
font-size: 32/@r; font-size: 28 / @r;
text-align: center; line-height: 70 / @r;
border-bottom: solid 1px #dedede;
padding-left: 20 / @r;
}
.item-content {
font-size: 24 / @r;
.select-wrapper {
line-height: 60 / @r;
margin-top: 20 / @r;
label {
color: #666;
}
select {
border: none;
background: none;
outline: none;
height: 60 / @r;
line-height: 60 / @r;
border: solid 1px #dedede;
width: 400 / @r;
border-radius: 8 / @r;
}
}
}
.price-content {
display: flex;
flex-wrap: wrap;
font-size: 24 / @r;
margin-top: 20 / @r;
.price-item {
position: relative;
display: inline-block;
margin-right: 20 / @r;
margin-bottom: 20 / @r;
border-radius: 8 / @r;
overflow: hidden;
// 自定义多选框的样式
label {
margin: 0;
cursor: pointer;
font-size: 28 / @r;
color: #555;
position: relative; position: relative;
line-height: 80/@r; span {
background: #ca0c16; font-size: 28 / @r;
color: #fff; color: #999;
.cancle, display: inline-block;
.confirm{ width: 100%;
position: absolute; height: 100%;
top:0; text-align: center;
} line-height: 80 / @r;
.cancle{ position: absolute;
left: 0; left: 0;
padding-left: 20/@r;
} -webkit-touch-callout: none; /* iOS Safari */
.confirm{ -webkit-user-select: none; /* Chrome/Safari/Opera */
right: 0; -khtml-user-select: none; /* Konqueror */
padding-right: 20/@r; -moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
not supported by any browser */
} }
} }
input:focus {
outline: none;
}
input[type="radio"] + label::before,
input[type="checkbox"] + label::before {
margin: 0;
content: "\a0"; /*不换行空格*/
display: inline-block;
width: 200 / @r;
padding: 20 / @r 0;
background: #fafafa;
}
.body{ input[type="radio"]:checked + label::before,
padding: 0 20/@r; input[type="checkbox"]:checked + label::before {
.choose-item{ margin: 0;
margin-bottom:20/@r; content: "\a0";
.title{ background: #de4b4b;
font-size: 28/@r; }
line-height: 70/@r;
border-bottom: solid 1px #dedede; input[type="radio"]:checked + label,
padding-left: 20/@r; input[type="checkbox"]:checked + label {
} span {
.item-content{ color: #fff;
font-size: 24/@r;
.select-wrapper{
line-height: 60/@r;
margin-top: 20/@r;
label{
color: #666;
}
select{
border: none;
background: none;
outline: none;
height: 60/@r;
line-height: 60/@r;
border:solid 1px #dedede;
width: 400/@r;
border-radius: 8/@r;
}
}
}
.price-content{
display: flex;
flex-wrap: wrap;
font-size: 24/@r;
margin-top: 20/@r;
.price-item{
padding: 20/@r;
border: solid 1px #dedede;
border-radius: 8/@r;
margin: 10/@r;
}
}
.other-price{
font-size: 24/@r;
line-height: 60/@r;
margin-left: 10/@r;
margin-top: 10/@r;
input{
display: inline-block;
border: solid 1px #dedede;
border-radius: 8/@r;
width: 200/@r;
height: 60/@r;
text-align: center;
}
}
} }
}
input[type="radio"],
input[type="checkbox"] {
position: absolute;
clip: rect(0, 0, 0, 0);
outline: none;
}
} }
}
.other-price {
font-size: 24 / @r;
line-height: 60 / @r;
margin-left: 10 / @r;
margin-top: 10 / @r;
input {
display: inline-block;
border: solid 1px #dedede;
border-radius: 8 / @r;
width: 200 / @r;
height: 60 / @r;
text-align: center;
}
}
} }
}
} }
}
} }
</style> </style>
2code/web/h5_pro/src/views/workerList/components/WStaff.vue
View file @ bc444cb2
<template> <template>
<div class="staff-item"> <div class="staff-item">
<img :src="data.src" alt=""> <img :src="data.workerHomePic" alt="">
<div class="infro">{{data.bref}}</div> <div class="infro">{{data.workerName}}</div>
</div> </div>
</template> </template>
......
2code/web/h5_pro/src/views/workerList/index.vue
View file @ bc444cb2
...@@ -2,122 +2,45 @@ ...@@ -2,122 +2,45 @@
<div class="page-wrapper"> <div class="page-wrapper">
<c-header title="人员列表"></c-header> <c-header title="人员列表"></c-header>
<div class="staff-wrapper"> <div class="staff-wrapper">
<w-staff v-for="(item,index) in staffData" :key="index" :data="item" @click.native="toWorkerDetails(item.id)"></w-staff> <w-staff v-for="(item,index) in staffData" :key="index" :data="item" @click.native="toWorkerDetails(item.workerId)"></w-staff>
</div> </div>
<more-worker></more-worker> <more-worker ref="chooseMore" @emitSuccess="handleChooseSuccess"></more-worker>
</div> </div>
</template> </template>
<script> <script>
import CHeader from "@/components/CHeader"; import CHeader from "@/components/CHeader";
import WStaff from "./components/WStaff"; import WStaff from "./components/WStaff";
import MoreWorker from "./components/MoreWorker" import MoreWorker from "./components/MoreWorker"
import * as workerList from "../../api/workerList"
export default { export default {
components: { CHeader, WStaff,MoreWorker }, components: { CHeader, WStaff,MoreWorker },
data() { data() {
return { return {
staffData: [ staffData: []
{
id: "1",
url: "1",
bref: "1"
},
{
id: "2",
url: "2",
bref: "2"
},
{
id: "1",
url: "1",
bref: "1"
},
{
id: "2",
url: "2",
bref: "2"
},
{
id: "1",
url: "1",
bref: "1"
},
{
id: "2",
url: "2",
bref: "2"
},
{
id: "1",
url: "1",
bref: "1"
},
{
id: "1",
url: "1",
bref: "1"
},
{
id: "2",
url: "2",
bref: "2"
},
{
id: "1",
url: "1",
bref: "1"
},
{
id: "2",
url: "2",
bref: "2"
},
{
id: "1",
url: "1",
bref: "1"
},
{
id: "1",
url: "1",
bref: "1"
},
{
id: "2",
url: "2",
bref: "2"
},
{
id: "1",
url: "1",
bref: "1"
},
{
id: "2",
url: "2",
bref: "2"
},
{
id: "1",
url: "1",
bref: "1"
},
{
id: "2",
url: "2",
bref: "2"
},
{
id: "1",
url: "1",
bref: "1"
}
]
}; };
}, },
beforeMount(){
this.getPageData({})
},
methods:{ methods:{
toWorkerDetails(id){ toWorkerDetails(id){
alert(id) alert(id)
},
getPageData(data,cb){
workerList.searchWorkerResult(data).then(res=>{
this.staffData = res.data
cb?cb():''
})
},
handleChooseSuccess(data){
alert('参数'+JSON.stringify(data))
this.getPageData(data,()=>{
this.$refs.chooseMore.handleCancle()
})
} }
} }
}; };
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment