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