初始上传
This commit is contained in:
95
addon/pc/source/os/components/BreadCrumbs.vue
Executable file
95
addon/pc/source/os/components/BreadCrumbs.vue
Executable file
@@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<el-breadcrumb class="app-breadcrumb" separator="/">
|
||||
<transition-group name="breadcrumb">
|
||||
<el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
|
||||
<span v-if="index == 0">
|
||||
<i class="el-icon-s-home"></i>
|
||||
</span>
|
||||
<span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{ item.meta.title }}</span>
|
||||
<a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
|
||||
</el-breadcrumb-item>
|
||||
<el-breadcrumb-item key="ext_item" v-if="hasExtItem">
|
||||
<slot name="ext_item"></slot>
|
||||
</el-breadcrumb-item>
|
||||
</transition-group>
|
||||
</el-breadcrumb>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { compile } from "path-to-regexp"
|
||||
|
||||
export default {
|
||||
props: {
|
||||
hasExtItem: false
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
levelList: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$route() {
|
||||
this.getBreadcrumb()
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getBreadcrumb()
|
||||
},
|
||||
methods: {
|
||||
getBreadcrumb() {
|
||||
// only show routes with meta.title
|
||||
let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
|
||||
const first = matched[0]
|
||||
|
||||
if (!this.isHome(first)) {
|
||||
matched = [{ path: "/index", meta: { title: "首页" } }].concat(matched)
|
||||
}
|
||||
|
||||
this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
|
||||
},
|
||||
isHome(route) {
|
||||
const name = route && route.name
|
||||
if (!name) {
|
||||
return false
|
||||
}
|
||||
return name.trim().toLocaleLowerCase() === "index".toLocaleLowerCase()
|
||||
},
|
||||
pathCompile(path) {
|
||||
const { params } = this.$route
|
||||
var toPath = compile(path)
|
||||
return toPath(params)
|
||||
},
|
||||
handleLink(item) {
|
||||
const { redirect, path } = item
|
||||
if (redirect) {
|
||||
this.$router.push(redirect)
|
||||
return
|
||||
}
|
||||
this.$router.push(this.pathCompile(path))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.app-breadcrumb.el-breadcrumb {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
margin: 10px auto 1px auto;
|
||||
width: 100%;
|
||||
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
line-height: 30px;
|
||||
border-color: #eae9e9;
|
||||
|
||||
.el-breadcrumb__item {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.no-redirect {
|
||||
color: #97a8be;
|
||||
cursor: text;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
91
addon/pc/source/os/components/GoodsRecommend.vue
Executable file
91
addon/pc/source/os/components/GoodsRecommend.vue
Executable file
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<div class="goods-recommend" v-loading="loading">
|
||||
<h4>商品精选</h4>
|
||||
<ul v-if="list.length">
|
||||
<li v-for="(item, index) in list" :key="index" @click="$util.pushToTab({ path: '/sku/' + item.sku_id })">
|
||||
<div class="img-wrap"><img :src="$img(item['sku_image'], { size: 'mid' })" @error="imageError(index)" /></div>
|
||||
<div class="price">￥{{ item.discount_price }}</div>
|
||||
<p class="sku-name">{{ item.goods_name }}</p>
|
||||
<div class="info-wrap"></div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { goodsRecommend } from '../api/goods/goods';
|
||||
export default {
|
||||
name: 'goods_recommend',
|
||||
props: {
|
||||
page: {
|
||||
type: [Number, String],
|
||||
default: 1
|
||||
},
|
||||
pageSize: {
|
||||
type: [Number, String],
|
||||
default: 5
|
||||
}
|
||||
},
|
||||
data: () => {
|
||||
return {
|
||||
loading: true,
|
||||
list: []
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getGoodsRecommend();
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['defaultGoodsImage'])
|
||||
},
|
||||
methods: {
|
||||
getGoodsRecommend() {
|
||||
goodsRecommend({
|
||||
page: this.page,
|
||||
page_size: this.pageSize
|
||||
})
|
||||
.then(res => {
|
||||
if (res.code == 0) this.list = res.data.list;
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(res => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
imageError(index) {
|
||||
this.list[index].sku_image = this.defaultGoodsImage;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.goods-recommend {
|
||||
border: 1px solid #eeeeee;
|
||||
h4 {
|
||||
margin: 10px;
|
||||
}
|
||||
ul {
|
||||
li {
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
.price {
|
||||
color: $base-color;
|
||||
font-size: 16px;
|
||||
}
|
||||
.sku-name {
|
||||
font-size: $ns-font-size-sm;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
&:hover {
|
||||
color: $base-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
124
addon/pc/source/os/components/message/goodsItem.vue
Executable file
124
addon/pc/source/os/components/message/goodsItem.vue
Executable file
@@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<div class="goods-info">
|
||||
<div class="goods-box">
|
||||
<div class="goods-img">
|
||||
<img :src="goodsInfo.sku_image ? $util.img(goodsInfo.sku_image) : $util.img(defaultGoodsImage)" alt />
|
||||
</div>
|
||||
<div class="goods-desc">
|
||||
<div class="text-hidden-two-row">{{goodsInfo.sku_name}}</div>
|
||||
<div class="text-hidden-two-row"> <span class="sale-num">库存：{{goodsInfo.stock}}</span> <span class="sale-num">销量：{{goodsInfo.sale_num}}</span>
|
||||
</div>
|
||||
<div class="price-box">
|
||||
<span class="sale-num price-num">¥{{goodsInfo.price}}</span>
|
||||
<span @click="jump_shop()">查看商品<i class="el-icon-arrow-right"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
goodsSkuDetail
|
||||
} from "@/api/goods/goods"
|
||||
import {
|
||||
mapGetters
|
||||
} from "vuex"
|
||||
export default {
|
||||
name: "goods_item",
|
||||
props: {
|
||||
skuId: 0,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
goodsInfo: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(["defaultGoodsImage"])
|
||||
},
|
||||
created() {
|
||||
if (!this.skuId) return;
|
||||
this.getGoodsInfo();
|
||||
},
|
||||
methods: {
|
||||
sendMessage() {
|
||||
this.$emit("sendMessage")
|
||||
},
|
||||
jump_shop() {
|
||||
this.$util.pushToTab('/sku/' + this.goodsInfo.sku_id);
|
||||
},
|
||||
getGoodsInfo() {
|
||||
goodsSkuDetail({
|
||||
sku_id: this.skuId
|
||||
}).then((res) => {
|
||||
if (res.code >= 0) {
|
||||
this.goodsInfo = res.data.goods_sku_detail
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.goods-info {
|
||||
padding: 0 10px;
|
||||
border: 1px solid #eee;
|
||||
box-sizing: border-box;
|
||||
border-radius: 10px;
|
||||
background-color: #eee;
|
||||
width: 350px;
|
||||
|
||||
.goods-box {
|
||||
display: flex;
|
||||
border-bottom: 1px solid #eee;
|
||||
margin: 10px 0;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
box-sizing: border-box;
|
||||
background-color: white;
|
||||
|
||||
.goods-img {
|
||||
overflow: hidden;
|
||||
width: 80px;
|
||||
border-radius: 4px;
|
||||
height: 80px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.goods-desc {
|
||||
width: 250px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
font-size: 15px;
|
||||
|
||||
.price {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.sale-num {
|
||||
font-size: 13px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.price-num {
|
||||
color: #F94460;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.price-box {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
|
||||
span:last-child {
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
color: $base-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
146
addon/pc/source/os/components/message/orderItem.vue
Executable file
146
addon/pc/source/os/components/message/orderItem.vue
Executable file
@@ -0,0 +1,146 @@
|
||||
<template>
|
||||
<div class="goods-info">
|
||||
<div class="goods-box">
|
||||
<div class="goods-img">
|
||||
<img :src="orderInfo.order_goods[0].sku_image ? $util.img(orderInfo.order_goods[0].sku_image) : $util.img(defaultGoodsImage)"
|
||||
alt />
|
||||
</div>
|
||||
<div class="goods-desc">
|
||||
<div class="text-hidden-two-row">{{orderInfo.order_name}}</div>
|
||||
<div>订单状态：{{orderInfo.order_status_name}}</div>
|
||||
<div class="flex-box"> <span class="ns-text-color">¥{{orderInfo.order_money}}</span> <span>{{orderInfo.delivery_type_name}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- v-if="canSend" -->
|
||||
<div class="more text-center">
|
||||
<div class="order-num">订单号：{{orderInfo.order_no }}</div>
|
||||
<div @click="jumo_order()" class="see-order">
|
||||
查看订单<i class="el-icon-arrow-right"></i>
|
||||
</div>
|
||||
<!-- <el-breadcrumb-item :to="{ path: '/member/order_detail?order_id=' + orderId }">订单详情</el-breadcrumb-item> -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
apiOrderDetail
|
||||
} from "@/api/order/order"
|
||||
import {
|
||||
mapGetters
|
||||
} from "vuex"
|
||||
export default {
|
||||
name: "orderItem",
|
||||
props: {
|
||||
orderId: 0,
|
||||
canSend: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
orderInfo: {
|
||||
order_status_name: '',
|
||||
delivery_type_name: '',
|
||||
order_money: '',
|
||||
order_goods: [{
|
||||
sku_image: ''
|
||||
}]
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(["defaultGoodsImage"])
|
||||
},
|
||||
created() {
|
||||
if (!this.orderId) return;
|
||||
this.getOrderInfo()
|
||||
},
|
||||
methods: {
|
||||
sendMessage() {
|
||||
this.$emit("sendMessage")
|
||||
},
|
||||
jumo_order() {
|
||||
this.$util.pushToTab('/member/order_detail?order_id=' + this.orderId)
|
||||
},
|
||||
getOrderInfo() {
|
||||
apiOrderDetail({
|
||||
order_id: this.orderId
|
||||
}).then((res) => {
|
||||
if (res.code >= 0) {
|
||||
this.orderInfo = res.data
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.goods-info {
|
||||
padding: 0 10px;
|
||||
border: 1px solid #eee;
|
||||
box-sizing: border-box;
|
||||
border-radius: 10px;
|
||||
background-color: #eee;
|
||||
width: 350px;
|
||||
|
||||
.goods-box {
|
||||
display: flex;
|
||||
border-bottom: 1px solid #eee;
|
||||
margin: 10px 0;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
box-sizing: border-box;
|
||||
background-color: white;
|
||||
|
||||
.goods-img {
|
||||
overflow: hidden;
|
||||
width: 80px;
|
||||
border-radius: 4px;
|
||||
height: 80px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.goods-desc {
|
||||
width: 250px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.text-hidden-two-row {
|
||||
color: #000000;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.flex-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.price {
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.more {
|
||||
margin: 10px 0 5px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.order-num {
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.see-order {
|
||||
align-items: center;
|
||||
color: $base-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
1583
addon/pc/source/os/components/message/servicerMessage.vue
Executable file
1583
addon/pc/source/os/components/message/servicerMessage.vue
Executable file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user