Skip to content

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

完善前台逻辑

parent 5be36c18
Hide whitespace changes
Inline Side-by-side
Showing with 545 additions and 10 deletions
2code/web/h5_pro/src/App.vue
View file @ f35fb4a2
...@@ -16,6 +16,7 @@ export default { ...@@ -16,6 +16,7 @@ export default {
*{ *{
padding: 0; padding: 0;
margin: 0; margin: 0;
// font-size: 24/@r;
} }
body,html { body,html {
font-family:'微软雅黑'; font-family:'微软雅黑';
......
2code/web/h5_pro/src/views/shopDetails/components/SInfroContent.vue 0 → 100644
View file @ f35fb4a2
<template>
<div class="wrapper">
<div class="title">{{title}}</div>
<div v-if="type==1" class="content" v-html="data"></div>
<slot></slot>
</div>
</template>
<script>
export default {
props:['title','data','type']
}
</script>
<style lang="less" scoped>
@r:100rem;
.wrapper{
padding: 30/@r;
padding-top: 0;
.title{
font-size: 28/@r;
color: #333;
margin-bottom: 20/@r;
&::before{
content: '1';
color: transparent;
display: inline-block;
width: 10/@r;
height: 28/@r;
border-radius: 10/@r;
background: #ff0000;
margin-right: 10/@r;
vertical-align: -6/@r;
}
}
.content{
min-height: 200/@r;
border-radius: 10/@r;
background: #f0f0f0;
padding: 20/@r;
}
}
</style>
2code/web/h5_pro/src/views/shopDetails/index.vue
View file @ f35fb4a2
...@@ -5,15 +5,40 @@ ...@@ -5,15 +5,40 @@
<div class="shop-name">商家名称{{id}}</div> <div class="shop-name">商家名称{{id}}</div>
<div class="address">西安市雁塔区110号，欢迎您的光临</div> <div class="address">西安市雁塔区110号，欢迎您的光临</div>
</div> </div>
<s-infro-content title="商家详情" :data="shopDetailsData" type='1'></s-infro-content>
<s-infro-content title="在线员工" type='2'>
<div class="employee-wrapper">
<div class="employee-item">
<div class="img"></div>
<div class="infro">个人简介：我是水水，漂亮贤惠，温柔大方，快来找我吧！我喜欢听音乐，打篮球，交朋友</div>
</div>
<div class="employee-item">
<div class="img"></div>
<div class="infro">个人简介：我是水水，漂亮贤惠，温柔大方，快来找我吧！我喜欢听音乐，打篮球，交朋友</div>
</div>
<div class="employee-item">
<div class="img"></div>
<div class="infro">个人简介：我是水水，漂亮贤惠，温柔大方，快来找我吧！我喜欢听音乐，打篮球，交朋友</div>
</div>
</div>
</s-infro-content>
</div> </div>
</template> </template>
<script> <script>
import CHeader from '@/components/CHeader' import CHeader from '@/components/CHeader'
import SInfroContent from './components/SInfroContent'
export default { export default {
components:{CHeader}, components:{CHeader,SInfroContent},
data(){ data(){
return { return {
id:'' id:'',
shopDetailsData:"<p style='font-size:14px;color:#666'>试试是这个对不对</p>"
} }
}, },
beforeMount(){ beforeMount(){
...@@ -26,14 +51,46 @@ export default { ...@@ -26,14 +51,46 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
@r:100rem; @r:100rem;
.shop-main-infro{ .shop-main-infro{
padding:30/@r;
.shop-name{ .shop-name{
font-size: 32/@r; font-size: 40/@r;
color: #333; color: #333;
} }
.address{ .address{
font-size: 28/@r; font-size: 24/@r;
color: #333; color: #666;
margin-top: 10/@r;
}
}
.employee-wrapper{
display:flex;
justify-content: space-between;
flex-wrap: wrap;
.employee-item{
border-radius: 10/@r;
overflow: hidden;
width: 330/@r;
height: 400/@r;
background: #f0f0f0;
margin-bottom: 30/@r;
.img{
height: 250/@r;
background: #ca0c16 ;
}
.infro{
padding: 10/@r;
font-size: 24/@r;
color: #666;
line-height: 40/@r;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
} }
} }
</style> </style>
2code/web/h5_pro/src/views/shopList/components/MoreShop.vue 0 → 100644
View file @ f35fb4a2
<template>
<div class="more-shop">
<div class="choose-btn" @click="taggleModelFun">筛选条件</div>
<div class="choose-content" :class="{active:show}">
<div class="bg" @click="handleCancle"></div>
<div class="content">
<div class="header">
<span class="cancle" @click="handleCancle">取消</span>
<span>筛选城市</span>
<span class="confirm" @click="handleConfirm">确定</span>
</div>
<div class="body">
<div class="choose-item">
<div class="title">地址选择</div>
<div class="item-content">
<div class="select-wrapper">
<label>市区：</label>
<select>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
</select>
</div>
<div class="select-wrapper">
<label>县区：</label>
<select>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
</select>
</div>
</div>
</div>
<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>
<div class="other-price">
<input type="text" placeholder="最小价格">
<span>~</span>
<input type="text" placeholder="最大价格">
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props:[],
data(){
return {
show:false
}
},
methods:{
taggleModelFun(){
this.show = !this.show
},
handleCancle(){
this.show = !this.show
},
handleConfirm(){
this.$emit('emitSuccess',{name:'jiangqi',age:28})
}
}
}
</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;
}
.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, .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 .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;
}
.cancle{
left: 0;
padding-left: 20/@r;
}
.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{
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;
}
}
}
}
}
}
}
</style>
2code/web/h5_pro/src/views/shopList/index.vue
View file @ f35fb4a2
...@@ -2,14 +2,16 @@ ...@@ -2,14 +2,16 @@
<div class="page-wrapper"> <div class="page-wrapper">
<c-header title="商家列表"></c-header> <c-header title="商家列表"></c-header>
<s-item v-for="(item,index) in shopListData" :key="index" :data="item" @click.native="toDetails(item.id)"></s-item> <s-item v-for="(item,index) in shopListData" :key="index" :data="item" @click.native="toDetails(item.id)"></s-item>
<more-shop ref="chooseMore" @emitSuccess="handleChooseSuccess"></more-shop>
</div> </div>
</template> </template>
<script> <script>
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'
export default { export default {
components:{CHeader,SItem}, components:{CHeader,SItem,MoreShop},
data(){ data(){
return { return {
shopListData:[ shopListData:[
...@@ -44,6 +46,10 @@ export default { ...@@ -44,6 +46,10 @@ export default {
methods:{ methods:{
toDetails(id){ toDetails(id){
this.$router.push({ name: 'shopDetails', params: { id: id }}) this.$router.push({ name: 'shopDetails', params: { id: id }})
},
handleChooseSuccess(data){
alert('参数'+JSON.stringify(data))
this.$refs.chooseMore.handleCancle()
} }
} }
} }
......
2code/web/h5_pro/src/views/workerList/components/MoreWorker.vue 0 → 100644
View file @ f35fb4a2
<template>
<div class="more-shop">
<div class="choose-btn" @click="taggleModelFun">筛选条件</div>
<div class="choose-content" :class="{active:show}">
<div class="bg" @click="handleCancle"></div>
<div class="content">
<div class="header">
<span class="cancle" @click="handleCancle">取消</span>
<span>筛选人员</span>
<span class="confirm" @click="handleConfirm">确定</span>
</div>
<div class="body">
<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>
<div class="other-price">
<input type="text" placeholder="最小年龄">
<span>~</span>
<input type="text" placeholder="最大年龄">
</div>
</div>
<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>
<div class="other-price">
<input type="text" placeholder="最小身高">
<span>~</span>
<input type="text" placeholder="最大身高">
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props:[],
data(){
return {
show:false
}
},
methods:{
taggleModelFun(){
this.show = !this.show
},
handleCancle(){
this.show = !this.show
},
handleConfirm(){
alert('确认')
}
}
}
</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;
}
.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, .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 .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;
}
.cancle{
left: 0;
padding-left: 20/@r;
}
.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{
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;
}
}
}
}
}
}
}
</style>
2code/web/h5_pro/src/views/workerList/index.vue
View file @ f35fb4a2
...@@ -4,13 +4,16 @@ ...@@ -4,13 +4,16 @@
<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.id)"></w-staff>
</div> </div>
<more-worker></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"
export default { export default {
components: { CHeader, WStaff }, components: { CHeader, WStaff,MoreWorker },
data() { data() {
return { return {
staffData: [ staffData: [
......
2code/web/mgt_pro/config/host.cfg.js
View file @ f35fb4a2
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
* @param prod==>正式上线环境 * @param prod==>正式上线环境
* */ * */
module.exports = { module.exports = {
sit:"http://192.168.1.104:8080/store-system",//毅豪本地 sit:"http://192.168.1.100:8080/store-system",//毅豪本地
// sit:"http://192.168.1.112:8080/store-system", // sit:"http://192.168.1.112:8080/store-system",
// ----------------------------------------------------------------- // -----------------------------------------------------------------
prod: "http:正式环境" prod: "http:正式环境"
......
2code/web/mgt_pro/config/index.js
View file @ f35fb4a2
...@@ -13,8 +13,8 @@ module.exports = { ...@@ -13,8 +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 host: '192.168.1.107', // can be overwritten by process.env.HOST
port: 9527, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined port: 9527, // 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,
......
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