add OrderGoods component
This commit is contained in:
陈嘉涵
@@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<div class="van-order-goods-card">
|
||||
<van-card>
|
||||
<div slot="thumb">
|
||||
<img :src="data.img_url" />
|
||||
<span v-if="data.is_present" class="van-order-goods-card__present"></span>
|
||||
</div>
|
||||
<div class="van-card__row" slot="title">
|
||||
<h4 class="van-card__title">{{ data.title }}</h4>
|
||||
<span class="van-card__price">{{ price }}</span>
|
||||
</div>
|
||||
<template slot="desc">
|
||||
<div class="van-card__row">
|
||||
<p class="van-card__desc">{{ desc }}</p>
|
||||
<span class="van-card__num">x {{ data.num }}</span>
|
||||
</div>
|
||||
<div class="van-card__row">
|
||||
<div class="van-order-goods-card__tags">
|
||||
<span v-if="data.is_presale" class="van-order-goods-card__tag-green">预售</span>
|
||||
<span v-if="data.is_period_buy" class="van-order-goods-card__tag-red">周期购</span>
|
||||
</div>
|
||||
<van-button
|
||||
class="van-order-goods-card__message-button"
|
||||
v-if="hasMessage"
|
||||
@click="onClickMessageButton"
|
||||
>
|
||||
查看留言
|
||||
</van-button>
|
||||
</div>
|
||||
</template>
|
||||
</van-card>
|
||||
<van-cell class="van-order-goods-card__delivery" v-if="data.show_delivery_time" title="发货时间" :value="data.delivery_time" />
|
||||
<van-popup v-if="hasMessage" class="van-order-goods-card__message" v-model="showMessage" position="right">
|
||||
<h2>备注信息</h2>
|
||||
<ul>
|
||||
<li v-for="(value, key) in data.message">
|
||||
<label>{{ key }}</label>
|
||||
<a v-if="isURL(value)" :href="value">
|
||||
<img :src="value" />
|
||||
</a>
|
||||
<p v-else>{{ value }}</p>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="van-order-goods-card__button">
|
||||
<van-button size="large" @click="showMessage = false">查看订单详情</van-button>
|
||||
</div>
|
||||
</van-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Card from '../card';
|
||||
import Cell from '../cell';
|
||||
import Button from '../button';
|
||||
import Popup from '../popup';
|
||||
import { getTotalPrice } from './utils';
|
||||
|
||||
export default {
|
||||
name: 'van-order-goods-card',
|
||||
|
||||
components: {
|
||||
[Card.name]: Card,
|
||||
[Cell.name]: Cell,
|
||||
[Popup.name]: Popup,
|
||||
[Button.name]: Button
|
||||
},
|
||||
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
showMessage: false
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
price() {
|
||||
return getTotalPrice(this.data.pay_price, this.data.points_price);
|
||||
},
|
||||
desc() {
|
||||
return this.data.sku ? this.data.sku.filter(item => item.v).map(item => item.v).join(', ') : '';
|
||||
},
|
||||
hasMessage() {
|
||||
return this.data.message && Object.keys(this.data.message).length;
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClickMessageButton() {
|
||||
this.showMessage = true;
|
||||
},
|
||||
isURL(value) {
|
||||
return /^\s*http(s)*:\/\/.+/.test(value);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<div class="van-order-goods-empty">
|
||||
<img :src="icon" />
|
||||
<p>{{ message }}</p>
|
||||
<van-button @click="onClickButton">{{ buttonText }}</van-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Button from '../button';
|
||||
|
||||
export default {
|
||||
name: 'van-order-goods-empty',
|
||||
|
||||
components: {
|
||||
[Button.name]: Button
|
||||
},
|
||||
|
||||
props: {
|
||||
icon: String,
|
||||
message: String,
|
||||
buttonText: String
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClickButton() {
|
||||
history.back();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<div class="van-order-goods-header">
|
||||
<van-icon :name="icon" />
|
||||
<a :href="link">{{ title }}</a>
|
||||
<img v-if="badge" :src="badge" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Icon from '../icon';
|
||||
|
||||
export default {
|
||||
name: 'van-order-goods-header',
|
||||
|
||||
components: {
|
||||
[Icon.name]: Icon
|
||||
},
|
||||
|
||||
props: {
|
||||
title: String,
|
||||
icon: String,
|
||||
link: String,
|
||||
badge: String
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<van-cell class="van-order-goods-message" title="买家留言：">
|
||||
<textarea
|
||||
v-if="editable"
|
||||
:value="message"
|
||||
:class="{ 'van-order-goods-message-focused': textareaFocused }"
|
||||
placeholder="点击给商家留言"
|
||||
@focus="textareaFocused = true"
|
||||
@blur="textareaFocused = false"
|
||||
@input="onChange"
|
||||
/>
|
||||
<p v-else>{{ message }}</p>
|
||||
</van-cell>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Cell from '../cell';
|
||||
|
||||
export default {
|
||||
name: 'van-order-goods-message',
|
||||
|
||||
components: {
|
||||
[Cell.name]: Cell
|
||||
},
|
||||
|
||||
props: {
|
||||
message: String,
|
||||
editable: Boolean
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
textareaFocused: false
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChange(event) {
|
||||
this.$emit('change', event.target.value);
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
// 不可编辑的情况下，默认留言为"无"
|
||||
if (!this.editable && !this.message) {
|
||||
this.$emit('change', '无');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<van-cell
|
||||
class="van-order-goods-price"
|
||||
title="合计"
|
||||
:value="totalPrice"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Cell from '../cell';
|
||||
import { getTotalPrice } from './utils';
|
||||
|
||||
export default {
|
||||
name: 'van-order-goods-price',
|
||||
|
||||
components: {
|
||||
[Cell.name]: Cell
|
||||
},
|
||||
|
||||
props: {
|
||||
price: Number,
|
||||
points: Number,
|
||||
isPoints: Boolean
|
||||
},
|
||||
|
||||
computed: {
|
||||
totalPrice() {
|
||||
return getTotalPrice(this.price, this.points, this.isPoints);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<van-cell-group class="van-order-goods">
|
||||
<van-order-goods-header
|
||||
:title="shopName"
|
||||
:link="shopLink"
|
||||
:icon="headerIcon"
|
||||
:badge="headerBadge"
|
||||
/>
|
||||
<slot name="top"></slot>
|
||||
<van-order-goods-empty
|
||||
v-if="isEmpty"
|
||||
:icon="emptyIcon"
|
||||
:message="emptyMessage"
|
||||
:button-text="emptyButtonText"
|
||||
/>
|
||||
<div class="van-order-goods-list">
|
||||
<van-order-goods-card
|
||||
v-for="item in itemList"
|
||||
:data="item"
|
||||
:express-way="expressWay"
|
||||
:key="item.title + item.img_url"
|
||||
/>
|
||||
</div>
|
||||
<slot></slot>
|
||||
<template v-if="!isEmpty">
|
||||
<van-order-goods-message v-if="showMessage" :message="message" :editable="messageEditable" @change="onMessageChange" />
|
||||
<van-order-goods-price v-if="showTotalPrice" :price="price" :points="points" />
|
||||
</template>
|
||||
<slot name="bottom"></slot>
|
||||
</van-cell-group>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Header from './Header';
|
||||
import Empty from './Empty';
|
||||
import Message from './Message';
|
||||
import Price from './Price';
|
||||
import Card from './Card';
|
||||
import CellGroup from '../cell-group';
|
||||
|
||||
export default {
|
||||
name: 'van-order-goods',
|
||||
|
||||
components: {
|
||||
[Empty.name]: Empty,
|
||||
[Header.name]: Header,
|
||||
[Message.name]: Message,
|
||||
[Price.name]: Price,
|
||||
[Card.name]: Card,
|
||||
[CellGroup.name]: CellGroup
|
||||
},
|
||||
|
||||
model: {
|
||||
prop: 'message'
|
||||
},
|
||||
|
||||
props: {
|
||||
shopName: String,
|
||||
shopLink: String,
|
||||
message: String,
|
||||
price: Number,
|
||||
points: Number,
|
||||
expressWay: String,
|
||||
headerBadge: String,
|
||||
headerIcon: {
|
||||
type: String,
|
||||
default: 'shop'
|
||||
},
|
||||
emptyIcon: {
|
||||
type: String,
|
||||
default: '//b.yzcdn.cn/v2/image/wap/trade/new_order/empty@2x.png'
|
||||
},
|
||||
emptyMessage: {
|
||||
type: String,
|
||||
default: '当前没有可购买的商品，请重新选择'
|
||||
},
|
||||
emptyButtonText: {
|
||||
type: String,
|
||||
default: '返回重新选择'
|
||||
},
|
||||
showMessage: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showTotalPrice: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
messageEditable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
itemList: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
isEmpty() {
|
||||
return this.itemList.length === 0;
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onMessageChange(message) {
|
||||
this.$emit('input', message);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,13 @@
|
||||
/**
|
||||
* 拼接商品价格（金额和积分）
|
||||
*/
|
||||
export function getTotalPrice(price, points) {
|
||||
const arr = [];
|
||||
if (points) {
|
||||
arr.push(points + '积分');
|
||||
}
|
||||
if (price) {
|
||||
arr.push('¥' + (price / 100).toFixed(2));
|
||||
}
|
||||
return arr.join(' + ');
|
||||
}
|
||||
Reference in New Issue
Block a user