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 = {
proxyTable: {},
// 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
autoOpenBrowser: 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'
import WorkerList from '@/views/workerList/index.vue'
import ShopDetails from '@/views/shopDetails/index.vue'
import WebView from '@/views/webView/index.vue'
Vue.use(Router)
export default new Router({
......@@ -29,6 +31,11 @@ export default new Router({
path: '/shopDetails',
name: 'shopDetails',
component: ShopDetails
},
{
path: '/webView',
name: 'webView',
component: WebView
}
]
})
2code/web/h5_pro/src/views/home/components/HBanner.vue
View file @ bc444cb2
<template>
<swiper :options="swiperOption">
<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>
<div class="swiper-pagination swiper-pagination-bullets" slot="pagination"></div>
......@@ -22,9 +22,10 @@ export default {
};
},
methods: {
toWebview(e) {
const href = e.target.dataset.href;
alert("跳转到：" + href);
toWebview(item) {
// const href = e.target.dataset.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 @@
<div class="shop-list-wrapper">
<div class="list-item">
<div class="img">
<img :src="data.url" alt="">
<img :src="data.storeHomePic" alt="">
</div>
<div class="item-infro">
<div class="name" >{{data.title}}</div>
<div class="details">{{data.infro}}</div>
<div class="name" >{{data.storeName}}</div>
<div class="details">{{data.storePosition}}</div>
</div>
</div>
</div>
......
2code/web/h5_pro/src/views/home/components/HStaff.vue
View file @ bc444cb2
<template>
<div class="staff-item">
<img :src="data.src" alt="">
<div class="infro">{{data.bref}}</div>
<img :src="data.workerHomePic" alt="">
<div class="infro">{{data.workerName}}</div>
</div>
</template>
......
2code/web/h5_pro/src/views/home/index.vue
View file @ bc444cb2
......@@ -3,11 +3,11 @@
<c-header title="首页" noBack="1"></c-header>
<h-banner :data="bannerData"></h-banner>
<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>
<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>
......@@ -20,102 +20,69 @@ import HShopList from "./components/HShopList";
import HItemTitle from "./components/HItemTitle";
import HStaff from "./components/HStaff";
import * as home from "../../api/home";
import axios from "axios";
export default {
components: { CHeader, HBanner, HShopList, HItemTitle, HStaff },
data() {
return {
bannerData: [
{
url: "1",
href: "111"
},
{
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"
}
]
bannerData: [],
shopListData: [],
staffData: []
};
},
beforeMount() {
this.getPageData();
},
methods: {
toShopDetails(id) {
this.$router.push({ name: 'shopDetails', params: { id: id }})
this.$router.push({ name: "shopDetails", params: { id: id } });
},
toDetails(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>
<style lang="less" scoped>
@r:100rem;
.staff-wrapper{
display: flex;
flex-wrap: wrap;
padding: 0 30/@r;
@r: 100rem;
.staff-wrapper {
display: flex;
flex-wrap: wrap;
padding: 0 30 / @r;
}
</style>
......
2code/web/h5_pro/src/views/shopList/components/MoreShop.vue
View file @ bc444cb2
......@@ -16,19 +16,15 @@
<div class="item-content">
<div class="select-wrapper">
<label>市区：</label>
<select>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<select v-model="CID" @change="chooseCityFun">
<option v-for="(item,idx) in CData" :key="idx" :value="item.codeC">{{item.name}}</option>
</select>
</div>
<div class="select-wrapper">
<label>县区：</label>
<select>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<select v-model="AID">
<option v-for="(item,idx) in AData" :key="idx" :value="item.codeA">{{item.name}}</option>
</select>
</div>
</div>
......@@ -38,17 +34,19 @@
<div class="choose-item">
<div class="title">价格区间</div>
<div class="price-content">
<div class="price-item">100-200</div>
<div class="price-item">200-300</div>
<div class="price-item">100-200</div>
<div class="price-item">200-300</div>
<div class="price-item">自定义</div>
<div class="price-item" v-for="(item,idx) in priceData" :key="idx">
<input type="radio" :id="item.dataDictItemId" name="choose_price" :value="item" v-model="priceItem">
<label :for="item.dataDictItemId"><span>{{item.itemValue}}</span></label>
</div>
</div>
<div class="other-price">
<input type="text" placeholder="最小价格">
<div class="other-price" v-if="priceItem.dataDictItemId=='ownID'">
<input type="number" maxlength="4" placeholder="最小价格" v-model="minPrice">
<span>~</span>
<input type="text" placeholder="最大价格">
<input type="number" maxlength="4" placeholder="最大价格" v-model="maxPrice">
</div>
</div>
......@@ -60,155 +58,297 @@
</template>
<script>
import axios from "axios";
import {
getCityList,
getAreaList,
getDataDictsStore
} from "../../../api/shopList";
export default {
props:[],
data(){
return {
show:false
}
props: [],
data() {
return {
show: false,
CData: [],
CID: "",
AData: [],
AID: "",
priceData: [],
priceItem: "",
minPrice: "",
maxPrice: ""
};
},
methods: {
taggleModelFun() {
this.getChooseData(() => {
this.show = !this.show;
});
},
methods:{
taggleModelFun(){
this.show = !this.show
},
handleCancle(){
this.show = !this.show
},
handleConfirm(){
this.$emit('emitSuccess',{name:'jiangqi',age:28})
}
handleCancle() {
this.CData = [];
this.CID = "";
this.AData = [];
this.AID = "";
this.priceData = [];
this.priceItem = "";
this.minPrice = "";
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>
<style lang="less" scoped>
@r:100rem;
.more-shop{
.choose-btn{
font-size: 24/@r;
color: #fff;
background: #ca0c16;
position: fixed;
bottom: 40/@r;
right: 40/@r;
padding: 10/@r;
border-radius: 8/@r;
z-index: 10000;
@r: 100rem;
.more-shop {
.choose-btn {
font-size: 24 / @r;
color: #fff;
background: #ca0c16;
position: fixed;
bottom: 40 / @r;
right: 40 / @r;
padding: 10 / @r;
border-radius: 8 / @r;
z-index: 10000;
}
.choose-content {
&.active {
.bg {
display: block;
}
.content {
right: 0;
opacity: 1;
}
}
.choose-content{
&.active{
.bg{
display: block;
}
.content{
right: 0;
opacity: 1;
}
.bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
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{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .5);
z-index: 10001;
display: none;
.cancle {
left: 0;
padding-left: 20 / @r;
}
.content{
position: fixed;
top: 0;
right: -550/@r;
width: 550/@r;
height: 100%;
background: #fff;
z-index: 10001;
opacity: 0;
transition: all .3s;
.header{
font-size: 32/@r;
text-align: center;
.confirm {
right: 0;
padding-right: 20 / @r;
}
}
.body {
padding: 0 20 / @r;
.choose-item {
margin-bottom: 20 / @r;
.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 {
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;
line-height: 80/@r;
background: #ca0c16;
color: #fff;
.cancle,
.confirm{
position: absolute;
top:0;
}
.cancle{
left: 0;
padding-left: 20/@r;
}
.confirm{
right: 0;
padding-right: 20/@r;
span {
font-size: 28 / @r;
color: #999;
display: inline-block;
width: 100%;
height: 100%;
text-align: center;
line-height: 80 / @r;
position: absolute;
left: 0;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-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{
padding: 0 20/@r;
.choose-item{
margin-bottom:20/@r;
.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"]:checked + label,
input[type="checkbox"]:checked + label {
span {
color: #fff;
}
}
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>
2code/web/h5_pro/src/views/shopList/components/SItem.vue
View file @ bc444cb2
<template>
<div class="item">
<div class="img">
<img :src="data.src" alt="">
<img :src="data.storeHomePic" alt="">
</div>
<div class="item-infro">
<div class="title">{{data.title}}</div>
<div class="infro">{{data.infro}}</div>
<div class="adress">{{data.adress}}</div>
<div class="title">{{data.storeName}}</div>
<div class="infro">{{data.storePosition}}</div>
<div class="adress">管理员：{{data.administratorsName}}</div>
</div>
</div>
</template>
......
2code/web/h5_pro/src/views/shopList/index.vue
View file @ bc444cb2
......@@ -10,46 +10,37 @@
import CHeader from '@/components/CHeader'
import SItem from './components/SItem'
import MoreShop from './components/MoreShop'
import * as shopList from "../../api/shopList"
export default {
components:{CHeader,SItem,MoreShop},
data(){
return {
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'
}
]
shopListData:[]
}
},
beforeMount(){
this.getPageData({})
},
methods:{
toDetails(id){
this.$router.push({ name: 'shopDetails', params: { id: id }})
},
handleChooseSuccess(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 @@
<div class="choose-item">
<div class="title">年龄区间</div>
<div class="price-content">
<div class="price-item">100-200</div>
<div class="price-item">200-300</div>
<div class="price-item">100-200</div>
<div class="price-item">200-300</div>
<div class="price-item">自定义</div>
<div class="price-item" v-for="(item,idx) in ageData" :key="idx">
<input type="radio" :id="item.dataDictItemId" name="choose_a" :value="item" v-model="ageItem">
<label :for="item.dataDictItemId"><span>{{item.itemValue}}</span></label>
</div>
</div>
<div class="other-price">
<input type="text" placeholder="最小年龄">
<div class="other-price" v-if="ageItem.dataDictItemId=='ownAgeID'">
<input type="text" placeholder="最小年龄" v-model="minAge">
<span>~</span>
<input type="text" placeholder="最大年龄">
<input type="text" placeholder="最大年龄" v-model="maxAge">
</div>
</div>
......@@ -33,17 +32,17 @@
<div class="choose-item">
<div class="title">身高区间</div>
<div class="price-content">
<div class="price-item">100-200</div>
<div class="price-item">200-300</div>
<div class="price-item">100-200</div>
<div class="price-item">200-300</div>
<div class="price-item">自定义</div>
<div class="price-item" v-for="(item,idx) in heightData" :key="idx">
<input type="radio" :id="item.dataDictItemId" name="choose_h" :value="item" v-model="heightItem">
<label :for="item.dataDictItemId"><span>{{item.itemValue}}</span></label>
</div>
</div>
<div class="other-price">
<input type="text" placeholder="最小身高">
<div class="other-price" v-if="heightItem.dataDictItemId=='ownHeightID'">
<input type="text" placeholder="最小身高" v-model="minHeight">
<span>~</span>
<input type="text" placeholder="最大身高">
<input type="text" placeholder="最大身高" v-model="maxHeight">
</div>
</div>
......@@ -55,155 +54,277 @@
</template>
<script>
import { getDataDictsHight, getDataDictsAge } from "../../../api/workerList";
export default {
props:[],
data(){
return {
show:false
}
props: [],
data() {
return {
show: false,
heightData: [],
ageData: [],
heightItem: {},
ageItem: {},
minHeight: "",
maxHeight: "",
minAge: "",
maxAge: ""
};
},
methods: {
taggleModelFun() {
this.getChooseData(() => {
this.show = !this.show;
});
},
methods:{
taggleModelFun(){
this.show = !this.show
},
handleCancle(){
this.show = !this.show
},
handleConfirm(){
alert('确认')
}
handleCancle() {
this.heightData = [];
this.ageData = [];
this.heightItem = {};
this.ageItem = {};
this.minHeight = "";
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>
<style lang="less" scoped>
@r:100rem;
.more-shop{
.choose-btn{
font-size: 24/@r;
color: #fff;
background: #ca0c16;
position: fixed;
bottom: 40/@r;
right: 40/@r;
padding: 10/@r;
border-radius: 8/@r;
z-index: 10000;
@r: 100rem;
.more-shop {
.choose-btn {
font-size: 24 / @r;
color: #fff;
background: #ca0c16;
position: fixed;
bottom: 40 / @r;
right: 40 / @r;
padding: 10 / @r;
border-radius: 8 / @r;
z-index: 10000;
}
.choose-content {
&.active {
.bg {
display: block;
}
.content {
right: 0;
opacity: 1;
}
}
.choose-content{
&.active{
.bg{
display: block;
}
.content{
right: 0;
opacity: 1;
}
.bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
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{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .5);
z-index: 10001;
display: none;
.cancle {
left: 0;
padding-left: 20 / @r;
}
.content{
position: fixed;
top: 0;
right: -550/@r;
width: 550/@r;
height: 100%;
background: #fff;
z-index: 10001;
opacity: 0;
transition: all .3s;
.header{
font-size: 32/@r;
text-align: center;
.confirm {
right: 0;
padding-right: 20 / @r;
}
}
.body {
padding: 0 20 / @r;
.choose-item {
margin-bottom: 20 / @r;
.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 {
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;
line-height: 80/@r;
background: #ca0c16;
color: #fff;
.cancle,
.confirm{
position: absolute;
top:0;
}
.cancle{
left: 0;
padding-left: 20/@r;
}
.confirm{
right: 0;
padding-right: 20/@r;
span {
font-size: 28 / @r;
color: #999;
display: inline-block;
width: 100%;
height: 100%;
text-align: center;
line-height: 80 / @r;
position: absolute;
left: 0;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-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{
padding: 0 20/@r;
.choose-item{
margin-bottom:20/@r;
.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"]:checked + label::before,
input[type="checkbox"]:checked + label::before {
margin: 0;
content: "\a0";
background: #de4b4b;
}
input[type="radio"]:checked + label,
input[type="checkbox"]:checked + label {
span {
color: #fff;
}
}
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>
2code/web/h5_pro/src/views/workerList/components/WStaff.vue
View file @ bc444cb2
<template>
<div class="staff-item">
<img :src="data.src" alt="">
<div class="infro">{{data.bref}}</div>
<img :src="data.workerHomePic" alt="">
<div class="infro">{{data.workerName}}</div>
</div>
</template>
......
2code/web/h5_pro/src/views/workerList/index.vue
View file @ bc444cb2
......@@ -2,122 +2,45 @@
<div class="page-wrapper">
<c-header title="人员列表"></c-header>
<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>
<more-worker></more-worker>
<more-worker ref="chooseMore" @emitSuccess="handleChooseSuccess"></more-worker>
</div>
</template>
<script>
import CHeader from "@/components/CHeader";
import WStaff from "./components/WStaff";
import MoreWorker from "./components/MoreWorker"
import * as workerList from "../../api/workerList"
export default {
components: { CHeader, WStaff,MoreWorker },
data() {
return {
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"
}
]
staffData: []
};
},
beforeMount(){
this.getPageData({})
},
methods:{
toWorkerDetails(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