Skip to content

dev / baohui-jewelry-pro

Go to a project
Toggle navigation
Toggle navigation pinning
e36d71bf by simon
Options

默认提交

1 parent 97cfac9a
Inline Side-by-side
Showing 25 changed files with 442 additions and 136 deletions
<template>
<div id="app">
<router-view/>
<router-view class="router-view" />
<van-tabbar route v-model="active" @change="onTabbarChange()">
<van-tabbar-item to="/" icon="wap-home-o">首页</van-tabbar-item>
<van-tabbar-item icon="cluster-o">分类</van-tabbar-item>
<van-tabbar-item icon="balance-list-o">订单</van-tabbar-item>
<van-tabbar-item to="/favorite" icon="manager-o">我的</van-tabbar-item>
</van-tabbar>
</div>
</template>
<script>
import { Toast } from "vant";
export default {
data() {
return {
key: "value",
active: 0
};
},
methods: {
onTabbarChange() {
if (this.active != 0 && this.active != 3) {
Toast("该场景暂未开放，敬请期待");
}
}
}
};
</script>
<style lang="scss">
@import "@/styles/_support";
.van-tabbar-item--active {
// color: #e10f02 !important;
}
#app {
/* font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
......@@ -21,6 +52,10 @@
color: #333333;
}
.router-view {
margin-bottom: 80px;
}
body,
div {
border: 0;
......@@ -83,6 +118,10 @@ input {
position: relative;
}
.van-popup {
background-color: transparent !important;
}
// index页面
.page-index {
.van-swipe__indicator {
......@@ -111,7 +150,6 @@ input {
.van-tabs__wrap {
}
.van-tab {
}
}
</style>
......
module.exports = {
testListGet: '/xxx/xxx/list'
bannerList: "/banner/list", // get 轮播图
typeList: "/type/list", // get 类型列表
productList: "/product/list", // get 产品列表
productDetail: "/product/detail", // get 产品详情
storeDetail: "/store/detail", // get 获得店铺详情
productStore: "/product/store", // get 店铺产品列表
collectStore: "/collect/store", // get 收藏的店铺
collectProduct: "/collect/product", // get 收藏的产品
collectProductChange: "/collect/product/change", // POST 加入我的收藏--产品
collectStoreChange: "/collect/store/change", // POST 加入我的收藏--店铺
}
......
......@@ -11,7 +11,7 @@ function Toast(msg) {
// axios.defaults.baseURL = ""
// 服务器地址
let base = "https://ow.go.qudone.com";
let base = "https://ow.go.qudone.com/baohui_jewelry_api/h5";
if (location.href.indexOf("//k.wxpai.cn") > 0) {
base = "https://api.k.wxpai.cn/bizproxy"
}
......@@ -117,10 +117,17 @@ let formDataHeaders = {
export const httpGet = params => {
let {
url,
data
data,
sid = false,
} = params;
let headers = {}
if (sid) {
headers.sid = "";
}
return axios.get(`${base}${url}`, {
params: data
}, {
headers: headers
}).then(res => res.data.content);
}
......@@ -131,9 +138,16 @@ export const httpGet = params => {
export const httpPost = params => {
let {
url,
data
data,
sid = false,
} = params;
return axios.post(`${base}${url}`, data).then(res => res.data.content);
let headers = {}
if (sid) {
headers.sid = "";
}
return axios.post(`${base}${url}`, data, {
headers: headers
}).then(res => res.data.content);
}
......
import api from '@/api/api'
import {
httpGet,
httpPost
} from '@/api/fetch-api.js'
export default {
data() {
return {
key: 'value'
}
},
components: {},
methods: {
initData() {}
},
mounted() {},
created() {}
}
@import '@/styles/_support';
.comp{
}
.contact-us-comp{
@extend .bb;
padding: 64px 54px;
width: 588px;
height: 772px;
border-radius: 8px;
background-color: #ffffff;
}
.shop{
&-tit{
display: flex;
justify-content: space-between;
align-items: center;
}
&-icon {
width: 120px;
height: 120px;
border-radius: 120px;
border: solid 1px #333333;
}
&-desc{
margin-top: 4px;
}
&-qrcode{
text-align: center;
margin-top: 48px;
.qr{
width: 240px;
}
}
&-tips{
margin-top: 24px;
text-align: center;
color: #909090;
}
}
<template>
<div class="comp contact-us-comp">
<div class="shop">
<div class="shop-tit">
<div class="cTitle">宝汇珠宝有限公司</div>
<img class="shop-icon" src="https://kd.cdn.xyiyang.com/pro/zlzm/8dd50cc01c03400fb567fd165ddd5016.jpg" alt="">
</div>
<div class="shop-desc">
<div class="t1">电话：15818886669</div>
<div class="t1">地址：天河中山大道西</div>
<div class="t1">邮箱：88866999@qq.com</div>
</div>
<div class="shop-qrcode">
<img class="qr" src="@/assets/images/temp/qrcode.png" alt="">
</div>
<div class="shop-tips">
<div class="t1">长按识别以上微信二维码<br>添加店铺为好友即可进行询价</div>
</div>
</div>
</div>
</template>
<script src="./contact-us-comp.js"></script>
<style lang="scss" scoped>
@import "./contact-us-comp.scss";
</style>
import api from '@/api/api'
import {
httpGet,
httpPost
} from '@/api/fetch-api.js'
export default {
data() {
return {
key: 'value'
}
},
components: {},
methods: {
initData() {}
},
mounted() {},
created() {}
}
<template>
<div class="page">
<div class="app__bgc bgc"></div>
<div class="app__bg bg"></div>
<div class="app__content main">
<div class="top-space"></div>
<div class="content">
</div>
</div>
</div>
</template>
<script src="./demo.js"></script>
<style lang="scss" scoped>
@import "./demo.scss";
</style>
\ No newline at end of file
......@@ -16,13 +16,22 @@ import {
Lazyload,
Tab,
Tabs,
Sticky
Sticky,
Popup,
Tabbar,
TabbarItem,
Icon,
Toast
} from 'vant';
Vue.use(Swipe).use(SwipeItem);
Vue.use(Lazyload);
Vue.use(Tab).use(Tabs);
Vue.use(Sticky);
Vue.use(Popup);
Vue.use(Tabbar).use(TabbarItem);
Vue.use(Icon);
Vue.use(Toast);
new Vue({
......
import api from '../../api/api'
import api from '@/api/api'
import {
httpGet,
httpPost
} from '../../api/fetch-api.js'
} from '@/api/fetch-api.js'
export default {
data() {
......
@import './../../styles/support';
@import '@/styles/_support';
......
import api from '../../api/api'
import api from '@/api/api'
import {
httpGet,
httpPost
} from '../../api/fetch-api.js'
} from '@/api/fetch-api.js'
export default {
data() {
......
@import './../../styles/support';
@import '@/styles/_support';
.page {}
......
......@@ -18,14 +18,14 @@
</div>
<div class="content">
<div class="shop-list">
<div class="shop" v-for="(item,index) in 4" :key="index">
<div class="shop-icon"></div>
<div class="shop" v-for="(item,index) in 1" :key="index">
<img class="shop-icon" src="https://kd.cdn.xyiyang.com/pro/zlzm/8dd50cc01c03400fb567fd165ddd5016.jpg" alt="">
<div class="shop-detail">
<div class="cTitle shop-detail-title">xxx珠宝首饰有限公司</div>
<div class="cTitle shop-detail-title">宝汇珠宝有限公司</div>
<div class="shop-detail-desc">
<div class="t1">15012341234</div>
<div class="t1">广州市番禺区xx路宝汇珠宝交易中心888号</div>
<div class="t1">mail@baohui.com</div>
<div class="t1">15818886669</div>
<div class="t1">天河中山大道西</div>
<div class="t1">88866999@qq.com</div>
</div>
</div>
<div class="shop-btn-wrap">
......
import api from '../../api/api'
import api from '@/api/api'
import {
httpGet,
httpPost
} from '../../api/fetch-api.js'
} from '@/api/fetch-api.js'
export default {
data() {
return {
key: 'value',
images: [
'https://img.yzcdn.cn/vant/apple-1.jpg',
'https://img.yzcdn.cn/vant/apple-2.jpg'
]
page: 1,
size: 10,
total: 0,
typeCode: "",
bannerList: [],
typeList: [],
productList: [],
}
},
components: {},
methods: {
toProduct(item) {
this.$router.push({
path: "/product/detail"
path: "/product/detail",
query: {
c: item.productCode
}
})
},
toMyFavorite(){
toMyFavorite() {
this.$router.push({
path:"/favorite"
path: "/favorite"
})
},
// 请求banner列表
queryBannerList() {
httpGet({
url: api.bannerList,
data: {}
}).then((result) => {
this.bannerList = result && result.bannerImages || [];
})
},
// 请求type列表
queryTypeList() {
httpGet({
url: api.typeList,
data: {}
}).then((result) => {
this.typeList = result;
})
},
initData() {}
// 请求产品列表
queryProductList() {
httpGet({
url: api.productList,
data: {
page: this.page,
size: this.size,
typeCode: this.typeCode
}
}).then((result) => {
this.productList = result.list;
this.total = result.total;
console.log("this.productList:", this.productList);
})
},
initData() {
this.queryBannerList();
this.queryTypeList();
this.queryProductList();
}
},
mounted() {},
created() {}
created() {
this.initData();
}
}
......
......@@ -2,7 +2,9 @@
.page {}
.bgc {}
.bgc {
background-color: #f7f7f7;
}
// 轮播banner
.banner {
......@@ -29,9 +31,9 @@
&-item {
@extend .fcc;
// @extend .bb;
@extend .bb;
padding: 0 14px;
text-align: center;
// padding: 0 12px;
margin: 0 22px;
color: #ffffff;
width: 92px;
......@@ -54,7 +56,7 @@
background-color: #cccc99;
}
&-item-5 {
&-item-my {
background-color: #ffcc99;
}
}
......@@ -79,26 +81,30 @@
$itemWid: 330px;
.item {
background-color: #ffffff;
width: $itemWid;
// height: 440px;
background: #F8F8F8;
border-radius: 4px;
border-radius: 8px;
margin-bottom: 32px;
padding-bottom: 12px;
.image-wrap {
width: $itemWid;
height: $itemWid;
}
.image {
width: $itemWid;
height: $itemWid;
@include border-top-radius(8px);
}
.desc {
border-top: solid 1px #f7f7f7;
@extend .bb;
width: 325px;
padding: 4px 20px;
padding: 12px 20px;
font-size: 24px;
// line-height: 32px;
color: #333333;
// @include ellipsis(3);
@include ellipsis(1);
}
}
}
......
......@@ -8,26 +8,17 @@
<!-- 轮播banner -->
<div class="banner">
<van-swipe indicator-color="#ffcc00" class="swiper" :autoplay="3000">
<van-swipe-item v-for="(image, index) in images" :key="index">
<van-swipe-item v-for="(image, index) in bannerList" :key="index">
<img class="img" v-lazy="image" />
</van-swipe-item>
</van-swipe>
</div>
<!-- 类别选择 -->
<div class="sel">
<div class="sel-item sel-item-1">
黄金<br>首饰
<div v-for="(item,index) in typeList" :key="item.id" class="sel-item " :class="'sel-item-'+(index+1)">
{{ item.typeName }}
</div>
<div class="sel-item sel-item-2">
翡翠<br>玉石
</div>
<div class="sel-item sel-item-3">
钻石<br>宝石
</div>
<div class="sel-item sel-item-4">
K金<br>首饰
</div>
<div class="sel-item sel-item-5" @click="toMyFavorite">
<div class="sel-item sel-item-my" @click="toMyFavorite">
我的<br>收藏
</div>
</div>
......@@ -36,9 +27,11 @@
<div class="product">
<div class="product-title">-- 产品推荐 --</div>
<div class="product-list">
<div @click="toProduct(item)" v-for="(item,index) in 6" :key="index" class="item">
<img class="image" src="https://img.yzcdn.cn/vant/apple-1.jpg" alt="">
<div class="desc">黄金吊坠</div>
<div @click="toProduct(item)" v-for="(item,index) in productList" :key="index" class="item">
<div class="image-wrap">
<img class="image" :src="item.imageUrl" alt="">
</div>
<div class="desc">{{item.productName}}</div>
</div>
</div>
</div>
......
import api from '../../api/api'
import api from '@/api/api'
import {
httpGet,
httpPost
} from '../../api/fetch-api.js'
} from '@/api/fetch-api.js'
export default {
data() {
return {
key: 'value',
product: {},
store: {},
params: {},
imageUrls: [],
active: 0,
images: [
'https://img.yzcdn.cn/vant/apple-1.jpg',
'https://img.yzcdn.cn/vant/apple-2.jpg'
],
sticky: true,
}
},
......@@ -28,13 +28,40 @@ export default {
behavior: "smooth",
});
},
toShopDetail(){
// 进入店铺
toShopDetail() {
let c = this.store.storeCode || "";
if (c) {
this.$router.push({
path:"/shop/detail"
path: "/shop/detail",
query: {
c: c,
}
})
}
},
// 请求产品详情
queryProductDetail() {
let c = this.$route.query.c;
httpGet({
url: api.productDetail,
data: {
productCode: c,
}
}).then((result) => {
this.product = result.product || {};
this.store = result.store || {};
this.params = result.params || {};
this.imageUrls = result && result.product && result.product.imageUrls || [];
})
},
initData() {}
initData() {
this.queryProductDetail();
}
},
mounted() {},
created() {}
created() {
this.initData();
}
}
......
@import './../../styles/support';
@import '@/styles/_support';
.page {}
......
......@@ -18,7 +18,7 @@
<!-- banner -->
<div class="banner">
<van-swipe indicator-color="#ffcc00" class="swiper" :autoplay="3000">
<van-swipe-item v-for="(image, index) in images" :key="index">
<van-swipe-item v-for="(image, index) in imageUrls" :key="index">
<img class="img" v-lazy="image" />
</van-swipe-item>
</van-swipe>
......@@ -27,8 +27,8 @@
<!-- 功能导航 -->
<div class="func">
<div class="desc">
<div class="cTitle desc-title ">黄金吊坠 - 黄金饰品</div>
<div class="cFontGray desc-desc">商品关键词描述</div>
<div class="cTitle desc-title">{{product.productName}}</div>
<div class="cFontGray desc-desc">{{product.productBrief}}</div>
</div>
<div class="fav">
<div class="fav-icon">
......@@ -39,52 +39,37 @@
</div>
<!-- 店铺信息 -->
<div class="shop">
<div class="shop-icon"></div>
<img class="shop-icon" :src="store.logoImage" alt="">
<div class="shop-detail">
<div class="cTitle shop-detail-title">xxx珠宝首饰有限公司</div>
<div class="shop-detail-phone">15012341234</div>
<div class="cTitle shop-detail-title">{{store.storeName || "-"}}</div>
<div class="shop-detail-phone">{{store.storeMobile || "-"}}</div>
</div>
<div @click="toShopDetail" class="shop-btn">进入店铺</div>
</div>
<!-- 商铺详情 -->
<div class="detail" id="scroll1">
<div class="cTitle detail-title">商品详情</div>
<div class="cFontGray detail-desc">暂无详情介绍</div>
<div class="cFontGray detail-desc">{{product.description}}</div>
</div>
<!-- 商品参数 -->
<div class="parameter" id="scroll2">
<div class="cTitle parameter-title">商品参数 </div>
<div class="cFontGray parameter-table">
<div class="parameter-table-item">
<div class="label">label1</div>
<div class="val">val1</div>
</div>
<div class="parameter-table-item">
<div class="label">label2</div>
<div class="val">val12</div>
</div>
<div class="parameter-table-item">
<div class="label">label3</div>
<div class="val">val13</div>
<div v-if="params.length>0" class="cFontGray parameter-table">
<div v-for="item in params" :key="item.id" class="parameter-table-item">
<div class="label">{{item.paramName}}</div>
<div class="val">{{item.value}}</div>
</div>
<div class="parameter-table-item">
<!-- <div class="parameter-table-item">
<div class="label">label1</div>
<div class="val">val1</div>
</div> -->
</div>
<div class="parameter-table-item">
<div class="label">label2</div>
<div class="val">val12</div>
</div>
<div class="parameter-table-item">
<div class="label">label3</div>
<div class="val">val13</div>
</div>
</div>
<div v-else class="cFontGray detail-desc">无</div>
</div>
</div>
<!-- 返回顶部 -->
<div class="top-btn" @click="toTop">返回顶部</div>
<!-- <div class="top-btn" @click="toTop">返回顶部</div> -->
</div>
</div>
</template>
......
import api from '../../api/api'
import api from '@/api/api'
import {
httpGet,
httpPost
} from '../../api/fetch-api.js'
} from '@/api/fetch-api.js'
import ContactUsComp from '@/components/contact-us-comp/contact-us-comp.vue'
export default {
data() {
return {
key: 'value'
key: 'value',
contactUsVisible: true,
store: {},
storeCollect: 0,
page: 1,
size: 10,
total: 0,
productList: [],
}
},
components: {},
components: {
ContactUsComp
},
methods: {
onFavoriteHandler(){
toProduct(item) {
this.$router.push({
path: "/product/detail",
query: {
c: item.productCode
}
})
},
onContactUsHandler(){
onFavoriteHandler() {
// this./
},
onContactUsHandler() {
this.contactUsVisible = true;
},
initData() {}
// 店铺产品列表
queryProductStore() {
httpGet({
url: api.productStore,
data: {
page: this.page,
size: this.size,
storeCode: this.$route.query.c
}
}).then((result) => {
this.productList = result.list;
this.total = result.total;
// console.log("productList:", this.productList);
console.log("productList item:", this.productList[0]);
});
},
// 店铺详情
queryStoreDetail() {
httpGet({
url: api.storeDetail,
data: {
storeCode: this.$route.query.c
}
}).then((result) => {
this.store = result.store || {};
this.storeCollect = result.storeCollect || 0;
console.log("this.store:", this.store);
console.log("this.storeCollect:", this.storeCollect);
});
},
initData() {
this.queryStoreDetail();
this.queryProductStore();
}
},
mounted() {},
created() {
this.initData();
}
}
......
@import './../../styles/support';
@import '@/styles/_support';
.page {}
.bgc {
background-color: #f7f7f7;
}
.top {
width: $screenWidth;
// height: 300px;
......@@ -79,26 +84,30 @@
$itemWid: 330px;
.item {
background-color: #ffffff;
width: $itemWid;
// height: 440px;
background: #F8F8F8;
border-radius: 4px;
border-radius: 8px;
margin-bottom: 32px;
padding-bottom: 12px;
.image-wrap {
width: $itemWid;
height: $itemWid;
}
.image {
width: $itemWid;
height: $itemWid;
@include border-top-radius(8px);
}
.desc {
border-top: solid 1px #f7f7f7;
@extend .bb;
width: 325px;
padding: 4px 20px;
padding: 12px 20px;
font-size: 24px;
// line-height: 32px;
color: #333333;
// @include ellipsis(3);
@include ellipsis(1);
}
}
}
......
......@@ -17,13 +17,13 @@
</div>
</div>
<div class="shop">
<div class="shop-icon"></div>
<img class="shop-icon" :src="store.logoImage" alt="">
<div class="shop-detail">
<div class="shop-detail-title">xxx珠宝首饰有限公司</div>
<div class="shop-detail-title">{{store.storeName}}</div>
<div class="shop-detail-desc">
<div class="t1">15012341234</div>
<div class="t1">广州市番禺区xx路宝汇珠宝交易中心888号</div>
<div class="t1">mail@baohui.com</div>
<div class="t1">{{store.storeMobile}}</div>
<div class="t1">{{store.storeAddress}}</div>
<div class="t1">{{store.email}}</div>
</div>
</div>
<div class="shop-btn-wrap">
......@@ -37,26 +37,17 @@
<div class="product">
<div class="product-title">-- 全部商品 --</div>
<div class="product-list">
<div class="item">
<img class="image" src="https://img.yzcdn.cn/vant/apple-1.jpg" alt="">
<div class="desc">黄金吊坠</div>
</div>
<div class="item">
<img class="image" src="https://img.yzcdn.cn/vant/apple-1.jpg" alt="">
<div class="desc">黄金吊坠</div>
</div>
<div class="item">
<img class="image" src="https://img.yzcdn.cn/vant/apple-1.jpg" alt="">
<div class="desc">黄金吊坠</div>
</div>
<div class="item">
<img class="image" src="https://img.yzcdn.cn/vant/apple-1.jpg" alt="">
<div class="desc">黄金吊坠</div>
<div @click="toProduct(item)" v-for="item in productList" :key="item.id" class="item">
<img class="image" :src="item.imageUrl" alt="">
<div class="desc">{{item.productName}}</div>
</div>
</div>
</div>
</div>
</div>
<van-popup v-model="contactUsVisible">
<contact-us-comp></contact-us-comp>
</van-popup>
</div>
</template>
......