app
<template>
<div>
<!-- 1头部 -->
<div class="header">
<!-- 1.0 导航栏头部 -->
<div class="head-top">
<div class="section">
<div class="left-box">
<span>l乐购买买买</span>
<a target="_blank" href="#"></a>
<a target="_blank" href="#"></a>
</div>
<div id="menu" class="right-box">
<span v-show="!isLogin">
<router-link to="/login" class="">登录</router-link>
<strong>|</strong>
<a href="" class="">注册</a>
<strong>|</strong>
</span>
<span v-show="isLogin">
<router-link to="/VipCenter" class="">会员中心</router-link>
<strong>|</strong>
<a>退出</a>
<strong>|</strong>
</span>
<router-link to="/shopcart" class="">
<i class="iconfont icon-cart"></i>购物车(
<span id="shoppingCartCount">
<span>{{this.$store.getters.getBuyCount}}</span>
</span>)</router-link>
</div>
</div>
</div>
<!-- 2.0 导航条 -->
<div class="head-nav">
<div class="section">
<div id="menu2" class="nav-box menuhd">
<ul>
<li class="index">
<a href="#" class="">
<span class="out" style="top: 0px;">首页</span>
</a>
</li>
<li class="news">
<a href="#" class="">
<span class="out" style="top: 0px;">每日精选</span>
</a>
</li>
<li class="photo">
<a href="#" class="">
<span class="out" style="top: 0px;">秒杀专区</span>
</a>
</li>
<li class="video">
<a href="#" class="">
<span class="out" style="top: 0px;">l乐购超市</span>
</a>
</li>
<li class="down">
<a href="#" class="">
<span class="out" style="top: 0px;">会员权益</span>
</a>
</li>
<li class="goods">
<router-link to="/goodslist" class="router-link-exact-active ">
<span class="out" style="top: 0px;">购物商城</span>
</router-link>
</li>
</ul>
</div>
<div class="search-box">
<div class="input-box">
<input id="keywords" name="keywords" type="text" onkeydown="if(event.keyCode==13){};" placeholder="输入关健字" x-webkit-speech="">
</div>
<a href="javascript:;">
<i class="iconfont icon-search"></i>
</a>
</div>
</div>
</div>
</div>
<!-- 2.中间组件 -->
<!-- 2.0 中间部分-路由 -->
<router-view></router-view>
<!-- 3.底部 -->
<div class="footer">
<div class="section">
<div class="foot-nav">
<a href="">关于我们</a>
<strong>|</strong>
<a href="">联系我们</a>
<strong>|</strong>
<a href="">联系客服</a>
<strong>|</strong>
<a href="">合作招商</a>
<strong>|</strong>
<a href="">商家帮助</a>
<strong>|</strong>
<a href="">营销中心</a>
<strong>|</strong>
<a href="">隐私政策</a>
</div>
<div class="foot-box">
<div class="copyright">
<p>版权所有 乐购买买买 </p>
<p>公司地址： 联系电话：</p>
<p class="gray">Copyright © 2009-2018 itcast Corporation,All Rights Reserved.</p>
</div>
<div class="service">
<p>周一至周日 9:00-24:00</p>
<a href="#">
<i class="iconfont icon-phone"></i>在线客服</a>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { bus } from "./common/common.js";
//导入JQ
import $ from "jquery";
//把导入的Jquery挂在window
window.$ = $;
window.jQuery = $;
export default {
data() {
return {
isLogin: false
}
},
created() {
bus.$on("loginSuccess", () => {
this.isLogin = true
});
},
mounted() {
$("#menu2 li a").wrapInner('<span class="out"></span>');
$("#menu2 li a").each(function() {
$('<span class="over">' + $(this).text() + "</span>").appendTo(
this
);
});
$("#menu2 li a").hover(
function() {
$(".out", this)
.stop()
.animate({ top: "48px" }, 300); // move down - hide
$(".over", this)
.stop()
.animate({ top: "0px" }, 300); // move down - show
},
function() {
$(".out", this)
.stop()
.animate({ top: "0px" }, 300); // move up - show
$(".over", this)
.stop()
.animate({ top: "-48px" }, 300); // move up - hide
}
);
}
};
</script>
<style>
/* nav的的CSS */
@import "./statics/site/jqurey_plugins/hoverNav/css/style.css";
/* 自己的css */
@import "./statics/site/css/style.css";
</style>
main.js
import Vue from 'vue'
import App from './App.vue'
//轮播图element插件
import ElementUI from 'element-ui'
//图片懒加载
import VueLazyload from 'vue-lazyload'
// import lkj from '../test'
//集成
//Element 插件
Vue.use(ElementUI)
import 'element-ui/lib/theme-chalk/index.css';
//懒加载图片
Vue.use(VueLazyload, {
loading: require('./statics/site/images/01.gif')
})
//导入路由
import router from './router'
//导入过滤器
import './filters/index.js'
//导入vuex 数据仓库
import store from './store/index.js'
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
router
import Vue from 'vue'
import VueRouter from 'vue-router'
import {bus} from "../common/common.js"
Vue.use(VueRouter)
//导入组件
//1.商品列表部分
import goodslist from '../components/goods/goodslist.vue'
//2.商品详情部分
import goodsinfo from '../components/goods/goodsinfo.vue'
import shopcart from '../components/shopcart/shopcart.vue'
import order from '../components/order/order.vue'
import login from '../components/account/login.vue'
import pay from '../components/pay/pay.vue'
import paySuccess from '../components/pay/paySuccess.vue'
import VipCenter from '../components/VipCenter/Vipcenter.vue'
import theOrder from '../components/VipCenter/theOrder.vue'
import checkOrder from '../components/VipCenter/checkOrder.vue'
//设置网络请求部分放这里,方便后期维护
import axios from 'axios'
//把axios放到vue的原型中
Vue.prototype.$axios = axios
axios.defaults.baseURL = 'http://47.106.148.205:8899/'
axios.defaults.withCredentials=true
//创建路由对象
const router = new VueRouter({
routes:[
{path:'/',redirect:'/goodslist'},
{name:'goodslist',path:'/goodslist',component:goodslist},
{path:'/goodsinfo/:goodsid',component:goodsinfo},
{path:'/shopcart',component:shopcart},
{path:'/login',component:login},
{path:'/order',meta:{needLogin : true},component:order},
{path:'/pay',meta:{needLogin : true},component:pay},
{path:'/paySuccess',meta:{needLogin : true},component:paySuccess},
{path:'/VipCenter',meta:{needLogin : true},component:VipCenter},
{path:'/theOrder',meta:{needLogin : true},component:theOrder},
{path:'/checkOrder',meta:{needLogin : true},component:checkOrder}
]
})
router.beforeEach((to,from,next) =>{
//先保存进来的地址的信息,要判断先除开login进来的
if(to.fullPath !='/login'){
//保存地址
localStorage.setItem('lastVisitPath',to.fullPath)
}
//验证登陆判断
if(to.meta.needLogin){
const url = `site/account/islogin`
axios.get(url).then(response =>{
if(response.data.code === 'logined'){
//登陆成功也要隐藏,调用自定义属性
bus.$emit('loginSuccess')
next()
}else{
router.push({path:'/login'})
}
})
}else{
next()
}
})
//es6导出
export default router
filters
import Vue from 'vue'
//导入改时间的插件moment
import moment from 'moment'
//定义全局过滤器
Vue.filter('dateFmt',(input,formatString='YYYY-MM-DD')=>{
return moment(input).format(formatString)
})
store
//引入
import Vue from 'vue'
import Vuex from 'vuex'
//集成
Vue.use(Vuex)
//按需导入
import {addLocalGoods,getTotalCount,updateLocalGoods,deleteGoods,deleteLocalGoodsById} from '../common/localStorageTool.js'
//创建空白仓库
const store = new Vuex.Store({
state:{//要操作的数据
buyCount : 0
},
getters:{ // 从仓库往外取东西
getBuyCount:state=>{
return state.buyCount > 0 ? state.buyCount : getTotalCount()
//从新调用统计商品的方法
}
},
mutations:{ //同往仓库中操作数据
addGoods(state,goods){
// state.buyCount += goods.count
//改为调用存储到本地的方法
state.buyCount = addLocalGoods(goods)
},
updateGoods(state,goods){
state.buyCount = updateLocalGoods(goods)
},
deleteGoodsById(state,goodsId){
state.buyCount = deleteLocalGoodsById(goodsId)
}
}
})
//导出到
export default store
common.js
import Vue from 'vue'
const bus = new Vue()
//导出
export {bus}
localStorageTool.js
const KEY = 'goods'
//先取出本地已有的数据
//1.封装一个获取本地数据的的函数,要么有数据,要么就是一个空的对象
const getLocalGoods = () => {
return JSON.parse(localStorage.getItem(KEY) || '{}')
}
//2.统计本地最新的商品的总数
const getTotalCount =() =>{
//2.1获取本地数据
const localGoods = getLocalGoods()
// console.log(localGoods);
//2.2取数数组里面的所有商品的key值,相加,则为所有商品的总数
let totalCount = 0
for(const key in localGoods){
totalCount += localGoods[key]
// console.log(totalCount)
}
return totalCount
}
//3.把goods中的商品存储的本地
const addLocalGoods = goods => {
//3.1先获取本地数据
const localGoods = getLocalGoods()
console.log(localGoods);
//先判断有没有商品id这个值
if(localGoods[goods.goodsId]){
localGoods[goods.goodsId] += goods.count
}else{
localGoods[goods.goodsId] = goods.count
}
// console.log(localGoods,localGoods[goods.goodsId]);
localStorage.setItem(KEY,JSON.stringify(localGoods))
return getTotalCount()
}
const updateLocalGoods = goods=>{
//1.获取本地数量数,调用方法
const localGoods = getLocalGoods()
//更新
localGoods[goods.goodsId] = goods.count
//保存本地
localStorage.setItem(KEY,JSON.stringify(localGoods))
//返回数据
return getTotalCount()
}
//根据id删除商品
const deleteLocalGoodsById = goodsId =>{
//1.获取本地数量数,调用方法
const localGoods = getLocalGoods()
//删除
delete localGoods[goodsId]
//保存数据到本地
localStorage.setItem(KEY,JSON.stringify(localGoods))
//从新计算总和
return getTotalCount()
}
//按需导出
export {addLocalGoods,getTotalCount,getLocalGoods,updateLocalGoods,deleteLocalGoodsById}
login.vue
<template>
<div>
<div class="section">
<div class="location">
<span>当前位置：</span>
<a href="/index.html">首页</a> >
<a href="/login.html">会员登录</a>
</div>
</div>
<div class="section">
<div class="wrapper">
<div class="bg-wrap">
<div class="nav-tit">
<a class="selected" href="javascript:;">账户登录</a>
<i>|</i>
<a href="/register.html">免费注册</a>
</div>
<div id="loginform" name="loginform" class="login-box">
<div class="input-box">
<input id="txtUserName" name="txtUserName" type="text" placeholder="用户名/手机/邮箱" maxlength="50" v-model="user_name">
</div>
<div class="input-box">
<input id="txtPassword" name="txtPassword" type="password" placeholder="输入登录密码" maxlength="16" v-model="password">
</div>
<div class="btn-box">
<input id="btnSubmit" name="btnSubmit" type="submit" value="立即登录" @click="login">
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import {bus} from '../../common/common.js'
export default {
data(){
return{
user_name:'',
password:''
}
},
methods:{
login(){
const url = `site/account/login`
this.$axios.post(url,{user_name:this.user_name,password:this.password}).then(response =>{
if(response.data.status === 0 ){
//登陆成功,跳转到在登陆判断哪里设置保存的地址
this.$router.push({path:localStorage.getItem('lastVisitPath')})
console.log(localStorage.getItem('lastVisitPath'));
//触发公共bus自定义事件
bus.$emit('loginSuccess')
}
})
}
}
}
</script>
goodsinfo.vue
<template>
<div>
<div class="section">
<div class="location">
<span>当前位置：</span>
<a href="/index.html">首页</a> >
<a href="/goods.html">购物商城</a>
<a href="/goods/42/1.html">商品详情</a>
</div>
</div>
<div v-if="goodsData.goodsinfo" class="section">
<div class="wrapper clearfix">
<div class="wrap-box">
<div class="left-925">
<div class="goods-box clearfix">
<!-- 图片放大镜代码 -->
<div class="pic-box">
<div class="magnifier" id="magnifier1">
<div class="magnifier-container">
<div class="images-cover"></div>
<!--当前图片显示容器-->
<div class="move-view"></div>
<!--跟随鼠标移动的盒子-->
</div>
<div class="magnifier-assembly">
<div class="magnifier-btn">
<span class="magnifier-btn-left"><</span>
<span class="magnifier-btn-right">></span>
</div>
<!--按钮组-->
<div class="magnifier-line">
<ul class="clearfix animation03">
<li v-for="item in goodsData.imglist" :key='item.id'>
<div class="small-img">
<img :src="item.original_path" />
</div>
</li>
</ul>
</div>
<!--缩略图-->
</div>
<div class="magnifier-view"></div>
<!--经过放大的图片显示容器-->
</div>
</div>
<!-- 商品详细代码 -->
<div class="goods-spec">
<h1>{{goodsData.goodsinfo.title}}</h1>
<p class="subtitle">{{goodsData.goodsinfo.sub_title}}</p>
<div class="spec-box">
<dl>
<dt>货号</dt>
<dd id="commodityGoodsNo">{{goodsData.goodsinfo.goods_no}}</dd>
</dl>
<dl>
<dt>市场价</dt>
<dd>
<s id="commodityMarketPrice">¥{{goodsData.goodsinfo.market_price}}</s>
</dd>
</dl>
<dl>
<dt>销售价</dt>
<dd>
<em id="commoditySellPrice" class="price">¥{{goodsData.goodsinfo.sell_price}}</em>
</dd>
</dl>
</div>
<div class="spec-box">
<dl>
<dt>购买数量</dt>
<dd>
<div class="stock-box">
<el-input-number v-model="goodsCount" :min="1" :max="goodsData.goodsinfo.stock_quantity" ></el-input-number>
</div>
<span class="stock-txt">
库存
<em id="commodityStockNum">{{goodsData.goodsinfo.stock_quantity}}</em>件
</span>
</dd>
</dl>
<dl>
<dd>
<div id="buyButton" class="btn-buy">
<button class="buy">立即购买</button>
<button @click="addToShopCart" ref="addToShopCartRef" class="add">加入购物车</button>
</div>
</dd>
</dl>
</div>
</div>
</div>
<!-- 评论部分内容 -->
<div id="goodsTabs" class="goods-tab bg-wrap">
<div id="tabHead" class="tab-head" style="position: static; top: 517px; width: 925px;">
<ul>
<li @click="isShowIntroduction = true">
<a href="javascript:;" :class="{selected :isShowIntroduction}">商品介绍</a>
</li>
<li @click="isShowIntroduction = false">
<a href="javascript:;" :class="{selected : !isShowIntroduction}">商品评论</a>
</li>
</ul>
</div>
<div v-if="isShowIntroduction" class="tab-content entry" style="display: block;">
<p v-html="goodsData.goodsinfo.content"></p>
</div>
<div v-if="!isShowIntroduction" class="tab-content" style="display: block;">
<!-- 发布评论部分 -->
<div class="comment-box">
<div id="commentForm" name="commentForm"
class="form-box">
<div class="avatar-box">
<i class="iconfont icon-user-full"></i>
</div>
<div class="conn-box">
<div class="editor">
<textarea id="txtContent" ref="txtContentRef" sucmsg=" " datatype="*10-1000" nullmsg="请填写评论内容！"></textarea>
<span class="Validform_checktip"></span>
</div>
<div class="subcon">
<input id="btnSubmit" name="submit" type="submit" value="提交评论" class="submit" @click="postComment">
<span class="Validform_checktip"></span>
</div>
</div>
</div>
<!-- 查看评论部分 -->
<ul id="commentList" class="list-box">
<p v-if="commentInfo.totalcount === 0" style="margin: 5px 0px 15px 69px; line-height: 42px; text-align: center; border: 1px solid rgb(247, 247, 247);">暂无评论，快来抢沙发吧！</p>
<li v-for="item in commentInfo.message" :key="item.id">
<div class="avatar-box">
<i class="iconfont icon-user-full"></i>
</div>
<div class="inner-box">
<div class="info">
<span>{{item.user_name}}</span>
<span>{{item.reply_time | dateFmt}}</span>
</div>
<p>{{item.content}}</p>
</div>
</li>
</ul>
<!-- 分页部分 -->
<div class="page-box" style="margin: 5px 0px 0px 62px;">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageIndex"
:page-sizes="[5, 10, 15, 100]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="commentInfo.totalcount">
</el-pagination>
</div>
</div>
</div>
</div>
</div>
<!-- 右边商品列表 -->
<div class="left-220">
<div class="bg-wrap nobg">
<div class="sidebar-box">
<h4>推荐商品</h4>
<ul class="side-img-list">
<li v-for="item in goodsData.hotgoodslist" :key="item.id">
<div class="img-box">
<router-link :to="'/goodsinfo/'+item.id" class="">
<img :src="item.img_url">
</router-link>
</div>
<div class="txt-box">
<router-link :to="'/goodsinfo/'+item.id" class="">{{item.title}}</router-link>
<span>{{item.add_time | dateFmt}}</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 被动画元素 -->
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter">
<div ref="animateDivRef" v-show="isShow" v-if="goodsData.imglist" class="animateDiv">
<img :src="goodsData.imglist[0].original_path" alt="">
</div>
</transition>
</div>
</template>
<style scoped>
/* 放大镜插件 */
@import "../../statics/site/jqurey_plugins/jqimgzoom/css/magnifier.css";
.animateDiv {
position: absolute;
top: 0px;
left: 0px;
width: 50px;
height: 50px;
}
.animateDiv img {
width: 100%;
height: 100%;
}
</style>
<script>
//导入放大镜的插件
import "../../statics/site/jqurey_plugins/jqimgzoom/js/magnifier.js";
// 导入affix
import { Affix } from "iview";
export default {
components: { Affix },
data() {
return {
goodsData: [],
goodsCount: 1, //商品数量
isShowIntroduction: true,
pageIndex: 1, //当前第几页，默认是1
pageSize: 5, //每页显示的条数，默认是10
commentInfo: [],
addToShopCartOffset: null, //加入购物车按钮的偏移量【开始】
shoppingCartCountOffset: null, //购买数量的偏移量【结束】
isShow: false
};
},
created() {
this.goodsinfo();
this.getCommentInfoData();
},
watch: {
$route: function(newValue, oldValue) {
// 重新获取数据
this.goodsinfo();
this.getCommentInfoData();
}
},
updated() {
//放大镜中的JQ激活代码
$("#magnifier1").imgzoon({ magnifier: "#magnifier1" });
},
methods: {
//商品介绍的请求
goodsinfo() {
const url = `site/goods/getgoodsinfo/${this.$route.params.goodsid}`;
this.$axios.get(url).then(response => {
this.goodsData = response.data.message;
setTimeout(() => {
//获取动画的偏移量
this.addToShopCartOffset = $(this.$refs.addToShopCartRef).offset();
//设置动画元素的位置
$(this.$refs.animateDivRef).offset(this.addToShopCartOffset);
//获取动画结束时候的偏移量
this.shoppingCartCountOffset = $("#shoppingCartCount").offset();
console.log(this.shoppingCartCountOffset)
}, 200);
});
},
//获取验证码的请求
getCommentInfoData() {
const url = `site/comment/getbypage/goods/${
this.$route.params.goodsid
}?pageIndex=${this.pageIndex}&pageSize=${this.pageSize}`;
this.$axios.get(url).then(response => {
this.commentInfo = response.data;
});
},
handleSizeChange(pageSize) {
this.pageSize = pageSize;
this.pageIndex = 1;
this.getCommentInfoData();
},
handleCurrentChange(pageIndex) {
this.pageIndex = pageIndex;
this.getCommentInfoData();
},
//提交评论部分
postComment() {
const textContent = this.$refs.txtContentRef;
console.log(txtContent);
if (textContent.value.trim().length === 0) {
this.$message({
message: "评论不能为空!",
type: "warning"
});
return;
}
//发起评论请求
this.$axios
.post(
`site/validate/comment/post/goods/${this.$route.params.goodsid}`,
{ commenttxt: textContent.value }
)
.then(response => {
if (response.data.status === 0) {
//先请空文本框你面的内容
txtContent.value = "";
this.$message({
message: "评论成功",
type: "success"
});
//从新加载第一页数据
this.pageIndex = 1;
this.getCommentInfoData();
}
});
},
//加入购物车
addToShopCart() {
this.isShow = true;
const goods = {
goodsId:this.$route.params.goodsid,
count:this.goodsCount
}
this.$store.commit('addGoods',goods)
},
beforeEnter: function(el) {
el.style.left = `${this.addToShopCartOffset.left}px`;
el.style.top = `${this.addToShopCartOffset.top}px`;
el.style.transform = `scale(1)`;
},
// 此回调函数是可选项的设置
// 与 CSS 结合时使用
enter: function(el, done) {
el.style.transition = `all 0.5s`;
el.offsetHeight;
el.style.left = this.shoppingCartCountOffset.left+'px';
el.style.top = this.shoppingCartCountOffset.top+'px';
el.style.transform = `scale(0.5)`;
done();
},
afterEnter: function(el) {
this.isShow = false;
}
}
};
</script>
goodslist.vue
<template>
<div>
<!-- 1.顶部面包屑 -->
<div class="section">
<div class="location">
<span>当前位置：</span>
<a href="#/" class="router-link-active">首页</a> >
<a href="#/site/goodslist" class="router-link-exact-active router-link-active">购物商城</a>
</div>
</div>
<!-- 2.topData内容 -->
<!-- 2.1左边列表部分渲染 -->
<div class="section">
<div class="wrapper">
<div class="wrap-box">
<div class="left-220" style="margin: 0px;">
<div class="banner-nav">
<ul>
<li v-for="item in topData.catelist" :key="item.id">
<h3>
<i class="iconfont icon-arrow-right"></i>
<span>{{item.title}}</span>
<p>
<span v-for="subitem in item.subcates" :key="subitem.id">
{{subitem.title}}
</span>
</p>
</h3>
<div class="item-box">
<dl>
<dt>
<a href="/goods/40.html">{{item.title}}}</a>
</dt>
<dd>
<a v-for="subitem in item.subcates" :key="subitem.id" href="/goods/43.html">{{subitem.title}}</a>
<!-- <a href="/goods/43.html">摄影摄像</a>
<a href="/goods/43.html">存储设备</a> -->
</dd>
</dl>
</div>
</li>
</ul>
</div>
</div>
<!--2.2幻灯片部分-->
<div class="left-705">
<div class="banner-img">
<div id="focus-box" class="focus-box">
<el-carousel height='341px' arrow="always">
<el-carousel-item v-for="item in topData.sliderlist" :key="item.id">
<img :src="item.img_url">
</el-carousel-item>
</el-carousel> </div>
</div>
</div>
<!--2.3右边列表部分渲染 -->
<div class="left-220">
<ul class="side-img-list">
<li v-for="(item,index) in topData.toplist" :key="item.id">
<div class="img-box">
<label>{{index + 1}}</label>
<img :src="item.img_url">
</div>
<div class="txt-box">
<a href="/goods/show-98.html">{{item.title}}</a>
<span>{{item.add_time | dateFmt}}</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 3.商品列表部分 -->
<div class="section" v-for="item in goodsList" :key="item.level1cateid">
<div class="main-tit">
<h2>{{item.catetitle}}</h2>
<p>
<a v-for="subitem in item.level2catelist" :key="subitem.subcateid" href="/goods/43.html">{{subitem.subcatetitle}}</a>
<a href="/goods/40.html">更多
<i>+</i>
</a>
</p>
</div>
<div class="wrapper clearfix">
<div class="wrap-box">
<ul class="img-list">
<li v-for="subitem in item.datas" :key="subitem.artID">
<router-link :to="'/goodsinfo/'+subitem.artID" class="">
<div class="img-box">
<img v-lazy="subitem.img_url">
</div>
<div class="info">
<h3>{{subitem.artTitle}}</h3>
<p class="price">
<b>{{subitem.market_price}}</b>元</p>
<p>
<strong>库存 {{subitem.stock_quantity}}</strong>
<span>市场价：
<s>{{subitem.sell_price}}</s>
</span>
</p>
</div>
</router-link>
</li>
</ul>
</div>
</div>
</div>
</div>
</template>
<style scoped>
/* 给轮播图设置样式 */
.el-carousel__container img {
width: 100%;
height: 100%;
}
</style>
<script>
//1.发起请求
//2.页面渲染
// import axios from "axios";
//导入这个已经在main里面做了处理
export default {
data() {
return {
topData: {},
goodsList:{}
};
},
created() {
this.getTopData();
this.getGoodsGroupData()
},
methods: {
// 轮播图那一部分的请求
getTopData() {
const url = `site/goods/gettopdata/goods`;
this.$axios.get(url).then(response => {
this.topData = response.data.message;
})
},
// 商品列表部分请求
getGoodsGroupData(){
const url = `site/goods/getgoodsgroup`
this.$axios.get(url).then(response=>{
this.goodsList = response.data.message
})
}
}
};
</script>
order.vue
<template>
<div>
<div class="section">
<div class="location">
<span>当前位置：</span>
<a href="/index.html">首页</a> >
<a href="/cart.html">购物车</a>
</div>
</div>
<div class="section">
<div class="wrapper">
<div class="bg-wrap">
<!--购物车头部-->
<div class="cart-head clearfix">
<h2>
<i class="iconfont icon-cart"></i>我的购物车</h2>
<div class="cart-setp">
<ul>
<li class="first active">
<div class="progress">
<span>1</span>
放进购物车
</div>
</li>
<li class="active">
<div class="progress">
<span>2</span>
填写订单信息
</div>
</li>
<li class="last">
<div class="progress">
<span>3</span>
支付/确认订单
</div>
</li>
</ul>
</div>
</div>
<!--购物车头部-->
<div class="cart-box">
<h2 class="slide-tit">
<span>1、收货地址</span>
</h2>
<div id="orderForm" name="orderForm" url="">
<el-form :model="order" :rules="rules" ref="orderForm" label-width="150px" class="orm-box address-info">
<el-form-item label="收件人姓名" prop="accept_name" style="width:500px">
<el-input v-model="order.accept_name"></el-input>
</el-form-item>
<el-form-item label="所属地区" prop="area">
<v-distpicker :province='order.area.province.value' :city='order.area.city.value' :area='order.area.area.value' @selected='onSelected'></v-distpicker>
</el-form-item>
<el-form-item label="详细地址" prop="address" style="width:500px">
<el-input v-model="order.address"></el-input>
</el-form-item>
<el-form-item label="手机号码" prop="mobile" style="width:500px">
<el-input v-model="order.mobile"></el-input>
</el-form-item>
<el-form-item label="电子邮箱" style="width:500px">
<el-input v-model="order.email"></el-input>
</el-form-item>
<el-form-item label="邮政编码" style="width:500px">
<el-input v-model="order.post_code"></el-input>
</el-form-item>
</el-form>
<h2 class="slide-tit">
<span>2、支付方式</span>
</h2>
<ul class="item-box clearfix">
<!--取得一个DataTable-->
<li>
<label>
<el-radio v-model="order.payment_id" label="6">在线支付</el-radio>
<em>手续费：0.00元</em>
</label>
</li>
</ul>
<h2 class="slide-tit">
<span>3、配送方式</span>
</h2>
<ul class="item-box clearfix">
<!--取得一个DataTable-->
<li>
<label>
<el-radio-group v-model="order.express_id">
<el-radio label="1" @change="order.expressMoment=20">顺丰
<em>费用：20.00元</em>
</el-radio>
<el-radio label="2" @change="order.expressMoment=10">圆通
<em>费用：10.00元</em>
</el-radio>
<el-radio label="3" @change="order.expressMoment=8">韵达
<em>费用：8.00元</em>
</el-radio>
</el-radio-group>
<span class="Validform_checktip"></span>
</label>
</li>
</ul>
<h2 class="slide-tit">
<span>4、商品清单</span>
</h2>
<div class="line15"></div>
<table width="100%" border="0" align="center" cellpadding="8" cellspacing="0" class="cart-table">
<tbody>
<tr>
<th colspan="2" align="left">商品信息</th>
<th width="84" align="left">单价</th>
<th width="84" align="center">购买数量</th>
<th width="104" align="left">金额(元)</th>
</tr>
<tr v-for="item in goodsList" :key="item.id">
<td width="68">
<a target="_blank" href="/goods/show-89.html">
<img :src='item.img_url' class="img">
</a>
</td>
<td>
<a target="_blank" href="/goods/show-89.html">小米（Mi）小米Note 16G双网通版</a>
</td>
<td>
<span class="red">
￥{{item.sell_price}}
</span>
</td>
<td align="center">{{item.buycount}}</td>
<td>
<span class="red">
￥{{item.sell_price * item.buycount}}
</span>
</td>
</tr>
</tbody>
</table>
<div class="line15"></div>
<h2 class="slide-tit">
<span>5、结算信息</span>
</h2>
<div class="buy-foot clearfix">
<div class="left-box">
<dl>
<dt>订单备注(100字符以内)</dt>
<dd>
<textarea name="message" class="input" style="height:35px;" v-model="order.message">
</textarea>
</dd>
</dl>
</div>
<div class="right-box">
<p>
商品
<label class="price">{{totalCount}}</label> 件 商品金额：￥
<label id="goodsAmount" class="price">{{totalPrice}}</label> 元
</p>
<p>
运费：￥
<label id="expressFee" class="price">{{order.expressMoment}}</label> 元
</p>
<p class="txt-box">
应付总金额：￥
<label id="totalAmount" class="price">{{getTotalAmount}}</label>
</p>
<p class="btn-box">
<a class="btn button" href="/cart.html">返回购物车</a>
<input id="btnSubmit" @click="goOrder" name="btnSubmit" type="submit" value="确认提交" class="btn submit">
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import VDistpicker from "v-distpicker";
export default {
components: { VDistpicker },
computed:{ //计算属性
getTotalAmount(){
this.order.goodsAmount = this.order.expressMoment + this.totalPrice
return this.order.expressMoment + this.totalPrice
}
},
data() {
return {
order: {
area: {
// 所属地区
province: {
code: "440000",
value: "广东省"
},
city: {
code: "440300",
value: "深圳市"
},
area: {
code: "440306",
value: "宝安区"
}
},
accept_name:'刘德华',
address: '中粮商务公园', // 详细地址
mobile: '13812345678', // 手机号码
email: 'meilaoban@126.com', // 电子邮箱
post_code: '518101', //邮政编码
payment_id: '6', //支付方式，在线支付
express_id: '1', //快递方式 1 顺丰 2 圆通 3 韵达
expressMoment:20, // 快递费用
message:'请快点发货',
goodsAmount: 0 //商品总额
},
rules: {
accept_name: [
{
required: true,
message: "姓名不能为空噢!",
trigger: "blur"
}
],
area: [
{
required: true,
message: "请选择所属区域",
trigger: "blur"
}
],
address: [
{
required: true,
message: "地址不能为空噢!",
trigger: "blur"
}
],
mobile: [
{
required: true,
message: "手机号码不能为空噢!",
trigger: "blur"
}
]
},
radio: "6",
radio2: 3,
goodsList: [], //商品列表信息
totalCount: 0, //总件数
totalPrice: 0 //总价格
};
},
created() {
this.getGoodsList();
},
methods: {
getGoodsList() {
const url = `site/validate/order/getgoodslist/${
this.$route.query.ids
}`;
//获取本地数据
const localGoods = JSON.parse(
localStorage.getItem("goods") || "{}"
);
//把地址栏上的id值赋值给goods
this.order.goodsids = this.$route.query.ids
//把结算几个反倒对象中去
const cargoodsobj ={}
const ids = this.order.goodsids.split(',')
ids.forEach(key=>{
//遍历取得新的数量
cargoodsobj[key]=localGoods[key]
})
this.order.cargoodsobj=cargoodsobj
//发起请求
this.$axios.get(url).then(response => {
//这里算出总价格,总数量
response.data.message.forEach(goods => {
goods.buycount = localGoods[goods.id];
this.totalCount += goods.buycount;
this.totalPrice += goods.buycount * goods.sell_price;
});
this.goodsList = response.data.message;
});
},
onSelected(data){
this.order.area = data
},
goOrder(){
this.$refs.orderForm.validate((valid)=>{
if(valid){
const url = 'site/validate/order/setorder'
this.$axios.post(url,this.order).then(response=>{
if(response.data.status === 0){
this.$router.push({path:'/pay',query:{orderid:response.data.message.orderid}})
console.log(response.data.message.orderid);
//删除本地已经下单的商品
const ids = this.order.goodsids.split(',')
ids.forEach(id=>{
this.$store.commit('deleteGoodsById',id)
})
}
})
}else{
this.$message.error('信息必须填写完整!')
}
})
}
}
};
</script>
pay.vue
<template>
<div>
<div class="section">
<div class="location">
<span>当前位置：</span>
<a href="/index.html">首页</a> >
<a href="javascript:;">支付中心</a>
</div>
</div>
<div class="section">
<div class="wrapper">
<div class="bg-wrap">
<div class="nav-tit pay">
<a href="javascript:;" class="selected">支付中心</a>
</div>
<div class="form-box payment">
<div class="el-row">
<div class="el-col el-col-16">
<div class="el-row">
<div class="el-col el-col-12">
<dl class="form-group">
<dt>订 单 号：</dt>
<dd>{{orderInfo.order_no}}</dd>
</dl>
</div>
<div class="el-col el-col-12">
<dl class="form-group">
<dt>收货人姓名：</dt>
<dd>{{orderInfo.accept_name}}</dd>
</dl>
</div>
</div>
<div class="el-row">
<div class="el-col el-col-12">
<dl class="form-group">
<dt>送货地址：</dt>
<dd>{{orderInfo.area}},{{orderInfo.address}}
</dd>
</dl>
</div>
<div class="el-col el-col-12">
<dl class="form-group">
<dt>手机号码：</dt>
<dd>{{orderInfo.mobile}}</dd>
</dl>
</div>
</div>
<div class="el-row">
<div class="el-col el-col-12">
<dl class="form-group">
<dt>支付金额：</dt>
<dd>{{orderInfo.order_amount}} 元</dd>
</dl>
</div>
<div class="el-col el-col-12">
<dl class="form-group">
<dt>支付方式：</dt>
<dd>在线支付</dd>
</dl>
</div>
</div>
<div class="message">
<span>备 注：</span>
<span>{{orderInfo.message}}</span>
</div>
</div>
<div class="el-col el-col-8">
<div id="container2">
<dzh-qrcode :url="url" img_url="https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=37a542f55ada81cb5aeb8b9f330fbb73/d6ca7bcb0a46f21f24c2f452fd246b600c33ae39.jpg"></dzh-qrcode>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import DZHQRCode from 'dzh-qrcode'
export default {
components: { 'dzh-qrcode': DZHQRCode },
data() {
return {
orderInfo: [],
tiemid: -1,
url: ""
};
},
created() {
this.getOrderInfo();
this.getOrderStatus();
},
beforeDestroy() {
clearInterval(this.tiemid);
},
methods: {
//页面渲染部分
getOrderInfo() {
//先看看有没有支付成功,有就跳转.
const url = `site/validate/order/getorder/${
this.$route.query.orderid
}`;
this.$axios.get(url).then(response => {
//发起请求.要是后台回来的数据为2就是支付成功了,要是支付成功了就要跳转到支付成功的页面
if (response.data.message[0].status === 2) {
this.$router.push({path:"/paySuccess"})
} else {
//反之就渲染页面,发起对某笔订单进行支付的请求
this.orderInfo = response.data.message[0]
this.url = `http://47.106.148.205:8899/site/validate/pay/alipay/${
this.$route.query.orderid
}`
}
});
}, //轮询订单状态,弄一个计时器,定时请求看看有没有支付成功,要是支付成功就跳转得到成功页面
getOrderStatus() {
this.tiemid = setInterval(() => {
const url = `site/validate/order/getorder/${this.$route.query.orderid}`
this.$axios.get(url).then(response => {
if (response.data.message[0].status === 2) {
this.$router.push({ path: "/paySuccess" });
}
});
}, 3000);
}
}
};
</script>
paySuccess.vue
<template>
<div class="center">
<div class="el-row">
<div class="el-col el-col-24">
<div class="comp">
<div class="goodsinfo routeanimate">
<div class="section">
<div class="location">
<span>当前位置：</span>
<a href="/index.html">首页</a> >
<a href="javascript:;">支付中心</a>
</div>
</div>
<div class="section">
<div class="wrapper">
<div class="bg-wrap">
<div class="nav-tit pay">
<a href="javascript:;" class="selected">支付中心</a>
</div>
<div class="msg-tips">
<div class="icon">
<i class="iconfont icon-check"></i>
</div>
<div class="info">
<strong>订单已支付成功！</strong>
<p>您可以点击这里进入
<a href="/user/center/index.html">会员中心</a>查看订单状态！</p>
<p>如有其它问题，请立即与我们客服人员联系。</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
shopcart.vue
<template>
<div>
<div class="section">
<div class="location">
<span>当前位置：</span>
<a href="/index.html">首页</a> >
<a href="/cart.html">购物车</a>
</div>
</div>
<div class="section">
<div class="wrapper">
<div class="bg-wrap">
<!--购物车头部-->
<div class="cart-head clearfix">
<h2>
<i class="iconfont icon-cart"></i>我的购物车</h2>
<div class="cart-setp">
<ul>
<li class="first active">
<div class="progress">
<span>1</span>
放进购物车
</div>
</li>
<li>
<div class="progress">
<span>2</span>
填写订单信息
</div>
</li>
<li class="last">
<div class="progress">
<span>3</span>
支付/确认订单
</div>
</li>
</ul>
</div>
</div>
<!--购物车头部-->
<!--商品列表-->
<div class="cart-box">
<input id="jsondata" name="jsondata" type="hidden">
<table width="100%" align="center" class="cart-table" border="0" cellspacing="0" cellpadding="8">
<tbody>
<tr>
<th width="48" align="center">
<a>选择</a>
</th>
<th align="left" colspan="2">商品信息</th>
<th width="84" align="left">单价</th>
<th width="104" align="center">数量</th>
<th width="104" align="left">金额(元)</th>
<th width="54" align="center">操作</th>
</tr>
<tr v-for="(item,index) in goodsList" :key="item.id">
<td width="48" align="center">
<el-switch v-model="item.isSelected" active-color="#409eff" inactive-color="#555555">
</el-switch>
</td>
<td align="left" colspan="2">
<div style="display:flex;align-items:center;"><img :src="item.img_url" alt="" style="width: 50px; height: 50px; margin-right: 10px;">
<span>{{item.title}}</span>
</div>
</td>
<td width="84" align="left">{{item.sell_price}}</td>
<td width="104" align="center">
<inputnumber :initCount="item.buycount" :goodsId="item.id" @goodsCountChange="getChangedGoods" />
</td>
<td width="104" align="left">{{item.sell_price * item.buycount}}</td>
<td width="54" align="center">
<a @click ="deleteGoods(item.id,index)">删除</a>
</td>
</tr>
<tr v-if="goodsList.length === 0 ">
<td colspan="10">
<div class="msg-tips">
<div class="icon warning">
<i class="iconfont icon-tip"></i>
</div>
<div class="info">
<strong>购物车没有商品！</strong>
<p>您的购物车为空，
<a href="/index.html">马上去购物</a>吧！</p>
</div>
</div>
</td>
</tr>
<tr>
<th align="right" colspan="8">
已选择商品
<b class="red" id="totalQuantity">{{getTotalCount}}</b> 件 商品总金额（不含运费）：
<span class="red">￥</span>
<b class="red" id="totalAmount">{{getTotalPrice}}</b>元
</th>
</tr>
</tbody>
</table>
</div>
<!--/商品列表-->
<!--购物车底部-->
<div class="cart-foot clearfix">
<div class="right-box">
<button class="button" @click="continueBuy">继续购物</button>
<button class="submit" @click="goToOrder">立即结算</button>
</div>
</div>
<!--购物车底部-->
</div>
</div>
</div>
</div>
</template>
<script>
import { getLocalGoods } from "../../common/localStorageTool.js";
import inputnumber from "../subcomponents/inputnumber.vue";
export default {
//局部注册
components: { inputnumber },
data() {
return {
goodsList: [],
value2: true
}
},
computed: {
//商品总数
getTotalCount() {
let totalCount = 0;
this.goodsList.forEach(goods => {
if (goods.isSelected) {
totalCount += goods.buycount;
}
});
console.log( this.goodsList);
return totalCount;
},
getTotalPrice() {
let totalPrice = 0;
this.goodsList.forEach(goods => {
if (goods.isSelected) {
totalPrice += goods.sell_price * goods.buycount;
}
});
return totalPrice;
}
},
created() {
this.getGoodsListData();
},
methods: {
getGoodsListData() {
//1.获取商品列表,返回的是一个对象 {87:1,88:3}
const localGoods = getLocalGoods();
// console.log(localGoods);
//2.获取对象中的key,放到数组中去
const keys = Object.keys(localGoods);
//3.判断,要是获取的key值为0则是没有数据,打断
if (keys.length === 0) return;
//发起请求,获取数据,渲染.
const url = `site/comment/getshopcargoods/${keys.join(",")}`;
this.$axios.get(url).then(response => {
response.data.message.forEach(goods => {
// console.log(goods, localGoods[goods.id]);
goods.buycount = localGoods[goods.id];
goods.isSelected = true;
});
this.goodsList = response.data.message;
});
},
getChangedGoods(updateGoods) {
this.goodsList.forEach(goods => {
if (goods.id === updateGoods.goodsId) {
goods.buycount = updateGoods.count;
}
})
const goods = {
goodsId : updateGoods.goodsId,
count : updateGoods.count
}
this.$store.commit('updateGoods',goods)
},
//删除商品,导入ID,下标
deleteGoods(goodsId,index){
this.goodsList.splice(index,1)
//在调用mutations的deleteGoodsById
this.$store.commit('deleteGoodsById',goodsId)
},
//继续购物
continueBuy(){
this.$router.push({name:'goodslist'})
},
goToOrder(){
const ids = []
this.goodsList.forEach(goods =>{
if(goods.isSelected){
ids.push(goods.id)
}
})
if(ids.length ===0){
this.$message({
message:'至少要选择一个商品结算啦!',
type:"warning"
})
return
}
//然后要跳转到下订单页面组件去
this.$router.push({path:'/order',query:{ids:ids.join(',')}})
}
}
};
</script>
inputnumber.vue
<template>
<div>
<div class="left" @click="substrict">-</div>
<div class="middle">{{count}}</div>
<div class="right" @click="add">+</div>
</div>
</template>
<script>
export default {
data(){
return {
count:1
}
},
props:{
initCount:Number,
goodsId:Number
},
created(){
this.count = this.initCount
},
methods:{
substrict(){
if(this.count <=1)
return
this.count--
this.notify()
},
add(){
this.count++
this.notify()
},
notify(){
//子组件的值传给父组件
const updateGoods = {
goodsId:this.goodsId,
count: this.count
}
console.log(updateGoods);
//点击自定义事件,传递载荷
this.$emit('goodsCountChange',updateGoods)
}
}
};
</script>
<style scoped>
.left,.middle,.right{
display: inline-block;
border: 1px solid rgba(92,92,92,0.3);
width:30px;
height: 30px;
text-align: center;
line-height: 30px;
}
.middle{
width:35px;
}
</style>
checkOrder.vue
<template>
<div class="center">
<div class="el-row">
<div class="el-col el-col-24">
<div class="comp">
<div class="tmpl routeanimate">
<div class="section">
<div class="location">
<span>当前位置：</span>
<a href="/index.html">首页</a> >
<a href="#/site/member/center" class="">会员中心</a>>
<a href="#/site/member/orderlist" class="">我的订单</a>
</div>
</div>
<div class="section clearfix">
<div class="left-260">
<div class="bg-wrap">
<div class="avatar-box">
<a href="/user/center/avatar.html" class="img-box">
<i class="iconfont icon-user-full"></i>
</a>
<h3>
ivanyb
</h3>
<p>
<b>注册会员</b>
</p>
</div>
<div class="center-nav">
<ul>
<li>
<h2>
<i class="iconfont icon-order"></i>
<span>订单管理</span>
</h2>
<div class="list">
<p>
<router-link to="/theOrder" class="">
<i class="iconfont icon-arrow-right"></i>交易订单</router-link>
</p>
</div>
</li>
<li>
<h2>
<i class="iconfont icon-user"></i>
<span>账户管理</span>
</h2>
<div class="list">
<p>
<a href="#/site/member/center" class="">
<i class="iconfont icon-arrow-right"></i>账户资料</a>
</p>
<p>
<a href="#/site/member/center" class="">
<i clrouter-linkss="iconfont icon-router-linkrrow-right"></i>头像设置</a>
</p>
<p>
<a href="#/site/member/center" class="">
<i class="iconfont icon-arrow-right"></i>修改密码</a>
</p>
<p>
<a href="javascript:void(0)">
<i class="iconfont icon-arrow-right"></i>退出登录</a>
</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="right-auto">
<div class="bg-wrap" style="min-height: 765px;">
<div class="sub-tit">
<a href="javascript:void(0)" class="add">
<i class="iconfont icon-reply"></i>返回</a>
<ul>
<li class="selected">
<a href="javascript:;">查看订单</a>
</li>
</ul>
</div>
<div class="order-progress">
<ul>
<li class="first active">
<div class="progress">下单</div>
<div class="info">2017-10-25 21:38:15</div>
</li>
<li class="">
<div class="progress">已付款</div>
<div class="info">2017-10-25 21:38:15</div>
</li>
<li class="">
<div class="progress">已经发货</div>
<div class="info">2017-10-25 21:38:15</div>
</li>
<li class="last">
<div class="progress">已完成</div>
<div class="info">2017-10-25 21:38:15</div>
</li>
</ul>
</div>
<div class="form-box accept-box form-box1" v-if="order.orderinfo">
<dl class="head form-group">
<dd>
订单号：{{order.orderinfo.order_no}}
<router-link :to="'/pay?orderid='+order.orderinfo.id" class="btn-pay">去付款</router-link>
<!---->
</dd>
</dl>
<dl class="form-group">
<dt>订单状态：</dt>
<dd>
{{order.orderinfo.statusName}}
</dd>
</dl>
<dl class="form-group">
<dt>快递单号：</dt>
<dd>
</dd>
</dl>
<dl class="form-group">
<dt>支付方式：</dt>
<dd>{{order.orderinfo.paymentTitle}}</dd>
</dl>
</div>
<div class="table-wrap" v-if="this.order.orderinfo">
<table width="100%" border="0" cellspacing="0" cellpadding="5" class="ftable">
<tbody>
<tr>
<th align="left">商品信息</th>
<th width="60%">名称</th>
<th width="10%">单价
</th>
<th width="10%">数量</th>
<th width="10%">金额</th>
</tr>
<tr v-for="item in order.goodslist" :key="item.id">
<td width="60">
<img :src="item.imgurl" class="img">
</td>
<td align="left">
<a target="_blank" href="/goods/show-92.html">{{item.goods_title}}</a>
</td>
<td align="center">
<s>￥{{item.goods_price}}</s>
<p>￥{{item.real_price}}</p>
</td>
<td align="center">{{item.quantity}}</td>
<td align="center">￥{{item.real_price * item.quantity}}</td>
</tr>
<tr>
<td colspan="7" align="right">
<p>商品金额：
<b class="red">￥{{goods_price}}</b> + 运费：
<b class="red">￥{{this.order.orderinfo.express_fee}}</b>
</p>
<p style="font-size: 22px;">应付总金额：
<b class="red">￥{{goods_amount}}</b>
</p>
</td>
</tr>
</tbody>
</table>
</div>
<div class="form-box accept-box" v-if="this.order.orderinfo">
<dl class="head form-group">
<dd>收货信息</dd>
</dl>
<dl class="form-group">
<dt>顾客姓名：</dt>
<dd>{{this.order.orderinfo.accept_name}}</dd>
</dl>
<dl class="form-group">
<dt>送货地址：</dt>
<dd>{{this.order.orderinfo.area}} {{this.order.orderinfo.address}} </dd>
</dl>
<dl class="form-group">
<dt>联系电话：</dt>
<dd>{{this.order.orderinfo.mobile}}</dd>
</dl>
<dl class="form-group">
<dt>电子邮箱：</dt>
<dd>{{this.order.orderinfo.email}}</dd>
</dl>
<dl class="form-group">
<dt>备注留言：</dt>
<dd>{{this.order.orderinfo.message}}</dd>
</dl>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return{
order:[],
goods_price:0,//商品金额
goods_amount:0//总价格
}
},
created(){
this.getorderdetial()
},
methods:{
getorderdetial(){
const url = `site/validate/order/getorderdetial/${this.$route.query.ids}`
this.$axios.get(url).then(response=>{
response.data.message.goodslist.forEach(goods=>{
this.goods_price += goods.real_price * goods.quantity
})
this.goods_amount = this.goods_price + response.data.message.orderinfo.express_fee
this.order = response.data.message
})
}
}
}
</script>
theOrder.vue
<template>
<div class="center">
<div class="el-row">
<div class="el-col el-col-24">
<div class="comp">
<div class="tmpl routeanimate">
<div class="section">
<div class="location">
<span>当前位置：</span>
<a href="/index.html">首页</a> >
<a href="#/site/member/center" class="">会员中心</a>>
<a href="#/site/member/orderlist" class="router-link-exact-active ">我的订单</a>
</div>
</div>
<div class="section clearfix">
<div class="left-260">
<div class="bg-wrap">
<div class="avatar-box">
<a href="/user/center/avatar.html" class="img-box">
<i class="iconfont icon-user-full"></i>
</a>
<h3>
ivanyb
</h3>
<p>
<b>注册会员</b>
</p>
</div>
<div class="center-nav">
<ul>
<li>
<h2>
<i class="iconfont icon-order"></i>
<span>订单管理</span>
</h2>
<div class="list">
<p>
<router-link to="/theOrder" class="router-link-exact-active ">
<i class="iconfont icon-arrow-right"></i>交易订单</router-link>
</p>
</div>
</li>
<li>
<h2>
<i class="iconfont icon-user"></i>
<span>账户管理</span>
</h2>
<div class="list">
<p>
<a href="#/site/member/center" class="">
<i class="iconfont icon-arrow-right"></i>账户资料</a>
</p>
<p>
<a href="#/site/member/center" class="">
<i clrouter-linkss="iconfont icon-router-linkrrow-right"></i>头像设置</a>
</p>
<p>
<a href="#/site/member/center" class="">
<i class="iconfont icon-arrow-right"></i>修改密码</a>
</p>
<p>
<a href="javascript:void(0)">
<i class="iconfont icon-arrow-right"></i>退出登录</a>
</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="right-auto">
<div class="bg-wrap" style="min-height: 765px;">
<div class="sub-tit">
<ul>
<li class="selected">
<a href="/user/order-list.html">交易订单</a>
</li>
</ul>
</div>
<div class="table-wrap">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="ftable">
<tbody>
<tr>
<th width="16%" align="left">订单号</th>
<th width="10%">姓名</th>
<th width="12%">订单金额</th>
<th width="11%">下单时间</th>
<th width="10%">状态</th>
<th width="12%">操作</th>
</tr>
<tr v-for="item in goodsList.message" :key="item.id">
<td>{{item.order_no}}</td>
<td align="left">{{item.accept_name}}</td>
<td align="left">
<strong style="color: red;">￥{{item.order_amount}}</strong>
<br> {{item.paymentTitle}}
</td>
<td align="left">{{item.add_tiem | dateFmt('YYYY-MM-DD')}}</td>
<td align="left">
{{item.statusName}}
</td>
<td align="left">
<router-link :to="'/checkOrder/?ids='+item.id" class=" ">查看订单</router-link>
<br>
<router-link :to="'/pay?orderid='+ item.id" class="btn-pay">去付款</router-link>
<br>
<a href="javascript:void(0)">|取消</a>
<br>
</td>
</tr>
</tbody>
</table>
<div class="page-foot">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageIndex"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="goodsList.totalcount">
</el-pagination>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return{
goodsList:[],
pageIndex: 1,
pageSize: 10,
}
},
created(){
this.userorderlist()
},
methods:{
userorderlist(){
const url = `site/validate/order/userorderlist?pageIndex=${this.pageIndex}&pageSize=${this.pageSize}`
this.$axios.get(url).then(response=>{
this.goodsList = response.data
})
},
handleSizeChange(pageIndex){
this.pageIndex = pageIndex
this.userorderlist()
},
handleCurrentChange(pageSize){
this.pageIndex = pageSize
this.userorderlist()
}
}
}
</script>
Vipcenter.vue
<template>
<div class="center">
<div class="el-row">
<div class="el-col el-col-24">
<div class="comp">
<div class="tmpl routeanimate">
<div class="section">
<div class="location">
<span>当前位置：</span>
<a href="/index.html">首页</a> >
<a href="/user/center/index.html">会员中心</a>
</div>
</div>
<div class="section clearfix">
<div class="left-260">
<div class="bg-wrap">
<div class="avatar-box">
<a href="/user/center/avatar.html" class="img-box">
<i class="iconfont icon-user-full"></i>
</a>
<h3>
ivanyb
</h3>
<p>
<b>注册会员</b>
</p>
</div>
<div class="center-nav">
<ul>
<li>
<h2>
<i class="iconfont icon-order"></i>
<span>订单管理</span>
</h2>
<div class="list">
<p>
<router-link to="/theOrder" class="">
<i class="iconfont icon-arrow-right"></i>交易订单</router-link>
</p>
</div>
</li>
<li>
<h2>
<i class="iconfont icon-user"></i>
<span>账户管理</span>
</h2>
<div class="list">
<p>
<a href="#/site/member/center" class="router-link-exact-active ">
<i class="iconfont icon-arrow-right"></i>账户资料</a>
</p>
<p>
<a href="#/site/member/center" class="router-link-exact-active ">
<i clrouter-linkss="iconfont icon-router-linkrrow-right"></i>头像设置</a>
</p>
<p>
<a href="#/site/member/center" class="router-link-exact-active ">
<i class="iconfont icon-arrow-right"></i>修改密码</a>
</p>
<p>
<a href="javascript:void(0)">
<i class="iconfont icon-arrow-right"></i>退出登录</a>
</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="right-auto">
<div class="bg-wrap" style="min-height: 765px;">
<div class="sub-tit">
<ul>
<li class="selected">
<a href="javascript:;">个人中心</a>
</li>
</ul>
</div>
<div class="center-head clearfix">
<div class="img-box">
<i class="iconfont icon-user-full"></i>
</div>
<div class="list-box">
<h3>欢迎您~ ivanyb</h3>
<ul>
<li>组别：注册会员</li>
<li>手机：13987654321</li>
<li>Email:ivanyb1@qq.com</li>
</ul>
</div>
</div>
<div class="center-info clearfix"></div>
<div class="center-tit">
<span>
<a href="/user/order-list.html">更多..</a>
</span>
<h3>
<i class="iconfont icon-order"></i>我的订单</h3>
</div>
<div class="center-info clearfix">
<ul>
<li>已完成订单：0个</li>
<li>待完成订单：2个</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
package.json
{
"name": "szhmqd21_vue",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve --open",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.18.0",
"dzh-qrcode": "^1.0.4",
"element": "^0.1.4",
"element-ui": "^2.4.6",
"iview": "^3.1.0",
"jquery": "^3.3.1",
"moment": "^2.22.2",
"v-distpicker": "^1.0.17",
"vue": "^2.5.17",
"vue-lazyload": "^1.2.6",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.0.1",
"@vue/cli-plugin-eslint": "^3.0.1",
"@vue/cli-service": "^3.0.1",
"vue-template-compiler": "^2.5.17"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
vue.config.js
module.exports = {
lintOnSave: false,
baseUrl: './',
productionSourceMap: false,
// configureWebpack: {
// externals: {
// vue: 'Vue'
// }
// }
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
