Skip to content

A
Athena
Commit 371aa0f5 authored by 华国豪's avatar 华国豪 🙄
Browse files
Options

绑定数据

parent 9c3c265d
Hide whitespace changes
Inline Side-by-side
Showing with 217 additions and 46 deletions
src/App.vue
View file @ 371aa0f5
......@@ -76,6 +76,12 @@ body,html{
}
.el-scrollbar__wrap{
overflow: auto !important;
width: 100%;
height: 100%
}
.el-scrollbar__view{
width: 100%;
height: 100%;
}
.page-component-up {
background-color: #fff;
......
src/components/IntegralMall/IntegralMall.vue
View file @ 371aa0f5
......@@ -50,7 +50,7 @@
<el-row class="tit">
<div>
<img src="../../assets/img/ps/shafa.png" alt="">
<p>家纺家饰</p>
<p>{{item.typeName}}</p>
</div>
</el-row>
<commodity2 :data="item"/>
......
src/components/IntegralMall/block/commodity2.vue
View file @ 371aa0f5
......@@ -12,6 +12,9 @@
.commodity2 .commodity2_left .l_img{
position: relative;
height: 480px;
align-items: center;
display: flex;
background-color: #c1c1c1;
}
.commodity2 .commodity2_left .l_img .see_all{
position: absolute;
......@@ -29,7 +32,8 @@
cursor: pointer;
}
.commodity2 .commodity2_left .l_img img{
height: 480px;
/* height: 480px; */
width: 100%;
}
.commodity2 .commodity2_right .r_item{
height: 240px;
......@@ -37,10 +41,12 @@
border: 1px solid rgba(236, 236, 236, 1);
border-right: none;
border-top: none;
cursor: pointer;
}
.commodity2 .commodity2_right .r_item>div img{
max-height: 150px;
margin: 15px 0;
max-width: 80%;
}
.commodity2 .commodity2_right .r_item p{
font-size: 12px
......@@ -49,24 +55,29 @@
color: #FF0101;
padding-top: 10px
}
.commodity2 .r_item_img_box{
height: 175px;
}
</style>
<template>
<el-row class="commodity2">
<el-col :span="5" class="commodity2_left">
<div class="l_img">
<img src="../../../assets/img/img-01.png" alt="">
<span class="see_all">查看全部 ></span>
<img :src="data.list[0].Images.split(',')[0]" alt="">
<span class="see_all" @click="goList(data.typeId)">查看全部 ></span>
</div>
</el-col>
<el-col :span="19" class="commodity2_right">
<el-row>
<template v-for="item in list">
<template v-for="item in data.list">
<el-col :span="6" class="r_item">
<div>
<img src="../../../assets/img/img-01.png" alt="">
<div @click="goDetail(item.Id)">
<div class="r_item_img_box">
<img :src="item.Images.split(',')[0]" alt="">
</div>
<p>{{item.name}}</p>
<p>¥ {{item.Price}}积分</p>
</div>
<p>洁丽雅 纯棉清新格纹面巾3条装</p>
<p>¥ 299,900积分</p>
</el-col>
</template>
</el-row>
......@@ -82,6 +93,15 @@ export default {
return{
list: [1,2,3,4,5,6,7,8]
}
},
methods:{
//跳转详情页面
goDetail: function (id) {
this.$router.push({ path: 'productDetail', query: {id: id}})
},
goList: function (type) {
this.$router.push({path: 'productList', query: {type: type}})
}
}
}
</script>
src/components/IntegralMall/productDetail.vue
View file @ 371aa0f5
......@@ -24,7 +24,8 @@
}
.pd_top_info_left ._img_item_box{
display: flex;
justify-content: space-between;
/* justify-content: space-between; */
margin-top: 9px;
}
.pd_top_info_left ._img_item_box>div{
width: 82px;
......@@ -36,6 +37,10 @@
display: flex;
justify-content: center;
align-items: center;
margin-right: 10px;
}
.pd_top_info_left ._img_item_box>div:nth-child(5){
margin-right: 0;
}
.pd_top_info_left ._img_item_box>div>img{
max-height: 82px;
......@@ -153,25 +158,33 @@
.pd_bottom_detail{
margin-top: 30px;
}
.pd_bottom_detail_right {
padding: 20px;
background-color: white;
}
.pd_bottom_detail_right img{
max-width: 100%;
}
</style>
<template>
<el-row class="productDetail">
<el-row class="productDetail" v-loading="loading">
<div class="w1180">
<el-row>
<el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
<el-breadcrumb-item :to="{ path: '/IntegralMall' }">积分商城</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/productList' }">商城列表</el-breadcrumb-item>
<el-breadcrumb-item>商品详情</el-breadcrumb-item>
<el-breadcrumb-item>商品详情-{{detail.name}}</el-breadcrumb-item>
</el-breadcrumb>
</el-row>
<el-row class="pd_top_info" :gutter="40">
<el-col :span="10" class="pd_top_info_left">
<div class="_img_box">
<img :src="imgList[activeIndex]" alt="">
<img :src="detail.imgArr[activeIndex]" ></img>
<!-- <img-zoom :src="detail.imgArr[activeIndex]" :bigsrc="detail.imgArr[activeIndex]" :configs="configs"></img-zoom> -->
</div>
<div class="_img_item_box">
<template v-for="(item, index) in imgList">
<template v-for="(item, index) in detail.imgArr">
<div :class="{'_active': activeIndex === index}" @click="activeIndex = index">
<img :src="item" alt="">
</div>
......@@ -179,23 +192,24 @@
</div>
</el-col>
<el-col :span="14" class="pd_top_info_right">
<p class="_tit">小米（MI）小米手环3 心率监测 来电 微信提醒</p>
<p class="_sub_tit">防水计步器 50米防水 20天续航 运动时长、里程记录</p>
<p class="_price">售价<span class="jifen">¥ <span>2400</span> 积分</span> <span class="yishou">已售 <span>350</span></span></p>
<p class="_tit">{{detail.name}}</p>
<p class="_sub_tit">{{detail.packing}}</p>
<p class="_price">售价<span class="jifen">¥ <span>{{detail.price}}</span> {{detail.priceUnit === 1 ? '现金' : '积分'}}</span> <span class="yishou">已售 <span>99</span></span></p>
<div class="_colors">
<span class="_colors_name">颜色</span>
<template v-for="(item, index) in colors">
<!-- <template v-for="(item, index) in colors">
<span class="_colors_item" :class="{'_active': colorsIndex === index}" @click="colorsIndex = index">{{item}}</span>
</template>
</template> -->
<span class="">无</span>
</div>
<div class="_numbers">
<span class="_numbers_name">数量</span>
<el-input-number v-model="numbers" :min="1" :max="99" size="mini"></el-input-number>
<el-input-number v-model="numbers" :min="1" :max="detail.quota === 0 ? '' : detail.quota" size="mini"></el-input-number>
</div>
<div class="_yunfei">
<span class="_yunfei_name">运费</span>
<div>
<p>包邮</p>
<p>{{detail.logistic}}</p>
<p>由<span>印象之旅</span>发货，并提供服务</p>
</div>
</div>
......@@ -207,13 +221,20 @@
</div>
</el-col>
</el-row>
<el-row class="pd_bottom_detail">
<el-row class="pd_bottom_detail" :gutter="20">
<el-col :span="5">
<detailsLeftHot/>
</el-col>
<el-col :span="19">
<el-col :span="19" class="pd_bottom_detail_right">
<el-row>
<div v-html="detail.description">
</div>
<div>
<template v-for="item in detail.deImgArr">
<img :src="item" alt="">
</template>
</div>
</el-row>
</el-col>
</el-row>
......@@ -222,12 +243,16 @@
</template>
<script>
import detailsLeftHot from '@/components/IntegralMall/block/detailsLeftHot'
import imgZoom from 'vue2.0-zoom'
export default {
components:{
detailsLeftHot,
imgZoom,
},
data(){
return {
id: 0,
loading: false,
numbers: 1,
activeIndex: 0,
colorsIndex: 0,
......@@ -238,18 +263,54 @@ export default {
require('../../assets/img/nll.jpg'),
require('../../assets/img/img-02.png')
],
detail: {
imgArr: [],
deImgArr: [],
},
colors: [
'黑色',
'红色',
'白色'
]
],
configs: {
width:650,
height:350,
maskWidth:100,
maskHeight:100,
maskColor:'red',
maskOpacity:0.2
}
}
},methods:{
//获取详情
getDetail: function () {
this.loading = true;
this.apiJavaPost(
"/api/goodsMarket/getGoodsDetail",
{goodId: this.id},
res => {
this.loading = false;
if (res.data.resultCode === 1) {
let detail = res.data.data
let imgArr = detail.images.split(',')
let deImgArr = detail.descripImg.split(',')
detail.imgArr = imgArr
detail.deImgArr = deImgArr
this.detail = detail
} else {
this.Error(res.data.message);
}
},
null
);
},
PlacingOrder: function (id) {
this.$router.push({name: 'confirOrder', query: { id: id, num: this.numbers}})
}
},mounted(){
this.getDetail()
},created(){
this.id = this.$route.query.id
}
}
</script>
src/components/IntegralMall/productList.vue
View file @ 371aa0f5
......@@ -93,7 +93,6 @@
margin-top: 30px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.productList .list_item .list_item_box{
padding: 12px 20px;
......@@ -101,10 +100,18 @@
font-size: 12px;
background-color: white;
margin-bottom: 15px;
margin-right: 10px;
cursor: pointer;
}
.productList .list_item .list_item_box .img_box{
width: 178px;
width: 188px;
height: 146px;
display: flex;
align-items: center;
justify-content: center;
}
.productList .list_item .list_item_box:nth-child(5n) {
margin-right: 0;
}
.productList .list_item .list_item_box .img_box img{
max-width: 178px;
......@@ -142,7 +149,7 @@
}
</style>
<template>
<div class="productList">
<div class="productList" v-loading="loading">
<div class="w1180">
<div>
<el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
......@@ -154,8 +161,8 @@
<el-row class="tabs">
<span class="_name">分类</span>
<div class="tabs_box">
<template v-for="(item, index) in typeList">
<span :class="{'_active': typeListIndex === index}" @click="typeListIndex = index">{{item.name}}</span>
<template v-for="(item, index) in goodsTypeManagerList">
<span :class="{'_active': typeListIndex === item.id}" @click="typeListIndex = item.id, getList()">{{item.name}}</span>
</template>
</div>
</el-row>
......@@ -169,8 +176,8 @@
</el-row>
<el-row>
<div class="paxu">
<span :class="{'_active': paxuIndex === 1}" @click="paxuIndex = 1">综合排序</span>
<span :class="{'_active': paxuIndex === 2}" @click="paxuIndex = 2">积分排序
<span :class="{'_active': paxuIndex === 1}" @click="paxuIndex = 1, getList()">综合排序</span>
<span :class="{'_active': paxuIndex === 2}" @click="paxuIndex = 2, getList()">积分排序
<span class="caret-wrapper" @click.stop="ascFunc">
<i class="sort-caret ascending" :class="{'ascActive': asc === 1}"></i>
<i class="sort-caret descending" :class="{'desActive': asc === 2}"></i>
......@@ -179,14 +186,18 @@
</div>
</el-row>
</div>
<div class="list_item">
<div class="list_item_box" v-for="item in dataList">
<div class="list_item" >
<div class="list_item_box" v-for="item in dataList" :key="item.id" @click="goDetail(item.id)">
<div class="img_box">
<img src="../../assets/img/img-01.png" alt="">
<img :src="item.images.split(',')[0]" alt="">
</div>
<p class="_name">夏新养生煲</p>
<p class="_num">¥ 299,900积分</p>
</div>
<p class="_name">{{item.name}}</p>
<p class="_num">¥ {{item.price}}积分</p>
</div>
</div>
<div class="empty-data" v-if="dataList.length<1">
<i class="iconfont icon-kong"></i>
很抱歉，你想要的信息我们真的找不到了
</div>
<!-- 分页 -->
<el-row class="_pagination">
......@@ -194,7 +205,7 @@
:current-page.sync="currentPage"
:page-size="msg.pageSize"
layout="total, prev, pager, next"
:total="Count"
:total="total"
@current-change="handleCurrentChange"
></el-pagination>
</el-row>
......@@ -212,11 +223,13 @@ export default {
typeListIndex: 0,
activeName: 'first',
currentPage: 1,
totalCount: 1,
total: 1,
Count: 1,
msg: {
ranks: '',
type: '',
pageSize: 15,
pageIndex: 1,
pageSize: 25,
},
typeList: [
{
......@@ -296,9 +309,57 @@ export default {
name: '红烧肉',
}
],
dataList: [1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,71,2,3,4,5,6],
dataList: [],
goodsTypeManagerList: [],
loading: false,
}
},methods:{
//跳转详情页面
goDetail: function (id) {
this.$router.push({ path: 'productDetail', query: {id: id}})
},
// 获取列表
getList: function () {
this.msg.type = this.typeListIndex === 0 ? '' : this.typeListIndex
this.loading = true;
this.apiJavaPost(
"/api/goodsMarket/getGoodsList",
this.msg,
res => {
this.loading = false;
if (res.data.resultCode === 1) {
this.dataList = res.data.data.pageData
this.total = res.data.data.count;
} else {
this.dataList = [];
if (res.data.message !== '暂无数据'){
this.Error(res.data.message);
}
}
},
null
);
},
// 获取商品类型
getGoodsTypeManager: function () {
this.apiJavaPost(
"/api/IntegralManager/goodsTypeManager",
{ reqType: "find" },
res => {
if (res.data.resultCode === 1) {
this.goodsTypeManagerList.push({
id: 0,
name: '全部'
})
this.goodsTypeManagerList.push(...res.data.data)
} else {
this.Error(res.data.message);
}
},
null
);
},
// 积分排序 （1“DESC”：降序；2 "ASC":升序）默认为空
ascFunc: function () {
if (!this.asc) {
this.asc = 1
......@@ -307,12 +368,19 @@ export default {
}else if (this.asc === 2) {
this.asc = null
}
this.msg.ranks = this.asc ? (this.asc === 1 ? 'ASC' : 'DESC') : ''
this.getList()
},
handleCurrentChange(val) {
// 翻页
}
},mounted(){
this.getGoodsTypeManager();
this.getList();
},created(){
if (this.$route.query.type) {
this.msg.type = this.typeListIndex = parseInt(this.$route.query.type)
}
}
}
......
src/components/global/newHead.vue
View file @ 371aa0f5
......@@ -266,7 +266,7 @@
</li>
<!-- 活动中心 -->
<li :class="{_active: navActive === 9}">
<div @click="handleSelect('/', 9), navActive = 9">
<div @click="handleSelect('/IceCreamTask', 9), navActive = 9">
<span>活动中心</span>
<span class="__splice">|</span>
</div>
......
src/router.js
View file @ 371aa0f5
......@@ -2,7 +2,7 @@ import Vue from "vue";
import Router from "vue-router";
import index from "./views/index";
import login from "./views/login";
import IceCreamTask from "./components/taskPage/IceCream/IceCreamTask";
Vue.use(Router);
export default new Router({
......@@ -160,6 +160,14 @@ export default new Router({
title: "商城列表-印象之旅~感动与世界同步"
}
},
{
path: "/productList/:type",
name: "productList",
component: resolve => require(["@/components/IntegralMall/productList"], resolve),
meta: {
title: "商城列表-印象之旅~感动与世界同步"
}
},
{
path: "/productDetail",
name: "productDetail",
......@@ -493,6 +501,14 @@ export default new Router({
]
},
{
path: "/IceCreamTask",
name: "IceCreamTask",
component: IceCreamTask,
meta: {
title: "印象之旅~感动与世界同步",
headerShow: 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