|
|
@@ -0,0 +1,260 @@
|
|
|
+<template>
|
|
|
+ <div class="orderInfo" @click="pay(info.orderStatus)">
|
|
|
+ <div class="orderInfo_top">
|
|
|
+ <div class="orderInfo_top_left">
|
|
|
+ {{ info.nickname }}
|
|
|
+ </div>
|
|
|
+ <div class="orderInfo_top_right">
|
|
|
+ {{ getLabelName(info.status, statusOfferPrice) }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="orderInfo_information">
|
|
|
+ <van-image :radius="6" width="80" height="80" :src="getImg(changeImgs(info.pic))" fit="cover" />
|
|
|
+ <div class="orderInfo_information_con">
|
|
|
+ <div class="orderInfo_information_con_name">{{ info.name }}</div>
|
|
|
+ <div class="orderInfo_information_con_time">剩余时长:{{ endTime }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="order">
|
|
|
+ <van-image :radius="6" width="80" height="80" :src="getImg(changeImgs(info.pic))" fit="cover" />
|
|
|
+
|
|
|
+ <div class="content">
|
|
|
+ <div class="name van-multi-ellipsis--l2">
|
|
|
+ {{ info.name }}
|
|
|
+ </div>
|
|
|
+ <div class="text" v-if="info.number">编号:{{ info.number }}</div>
|
|
|
+ <div class="flex1"></div>
|
|
|
+ <div class="price">¥{{ info.price }}</div>
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+ <div class="total-price">
|
|
|
+ <div class="total-price_left">{{ info.createdAt }}</div>
|
|
|
+ <div class="total-price_right">
|
|
|
+ <div class="total-price_right_one">实际支付</div>
|
|
|
+ <div class="total-price_right_two">¥{{ info.price }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="orderInfo_btn" v-if="info.status == 'ASKING'">
|
|
|
+ <!-- <div class="orderInfo_btn_one">23:59后可取消出价</div> -->
|
|
|
+ <div class="orderInfo_btn_two">不想买了</div>
|
|
|
+ </div>
|
|
|
+ <!--
|
|
|
+ <div class="btns">
|
|
|
+ <van-button color="@text3" @click.prevent="del" plain size="mini" round> 删除订单 </van-button>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import order from '../../mixins/order';
|
|
|
+import product from '../../mixins/product';
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ info: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {
|
|
|
+ return {};
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ orderStatus: 'NOT_PAID'
|
|
|
+ };
|
|
|
+ },
|
|
|
+ // setup() {
|
|
|
+ // const click = function () {
|
|
|
+ // // console.log('wyt6w');
|
|
|
+ // };
|
|
|
+
|
|
|
+ // return { click };
|
|
|
+ // },
|
|
|
+ mixins: [order, product],
|
|
|
+ computed: {
|
|
|
+ endTime() {
|
|
|
+ let newEndTime = this.dayjs(this.info.endTime).diff(this.dayjs(), 'second');
|
|
|
+ newEndTime =
|
|
|
+ Math.floor(newEndTime / 24 / 3600) +
|
|
|
+ '天' +
|
|
|
+ this.pad(parseInt(newEndTime / 3600) % 24, 2) +
|
|
|
+ '时' +
|
|
|
+ this.pad(parseInt(newEndTime / 60) % 60, 2) +
|
|
|
+ '分';
|
|
|
+ return newEndTime;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ pad(n, width, z) {
|
|
|
+ z = z || '0';
|
|
|
+ n = n + '';
|
|
|
+ return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
|
|
|
+ },
|
|
|
+ pay(orderStatus) {
|
|
|
+ if (orderStatus == this.orderStatus) {
|
|
|
+ this.$router.push({
|
|
|
+ path: '/domainSubmit',
|
|
|
+ query: {
|
|
|
+ domain: this.info.domainName,
|
|
|
+ pay: '1',
|
|
|
+ id: this.info.id,
|
|
|
+ price: this.info.price
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ delInit() {
|
|
|
+ this.$emit('delFn');
|
|
|
+ },
|
|
|
+ del() {
|
|
|
+ this.Dialog.confirm({
|
|
|
+ title: '确定删除吗?',
|
|
|
+ message: '删除此记录将消失'
|
|
|
+ }).then(() => {
|
|
|
+ this.$http
|
|
|
+ .post('/order/hide/', {
|
|
|
+ id: this.info.id
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ this.$toast.success('删除成功');
|
|
|
+ setTimeout(() => {
|
|
|
+ this.delInit();
|
|
|
+ }, 1000);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ // this.$http
|
|
|
+ // .post('/order/hide/', {
|
|
|
+ // id: this.info.id
|
|
|
+ // })
|
|
|
+ // .then(() => {
|
|
|
+ // this.$toast.success('删除成功');
|
|
|
+ // setTimeout(() => {
|
|
|
+ // this.delInit();
|
|
|
+ // }, 1000);
|
|
|
+ // });
|
|
|
+ },
|
|
|
+ likeProduct() {
|
|
|
+ if (!this.info.liked) {
|
|
|
+ this.$http.get(`/collection/${this.info.id}/like`).then(() => {
|
|
|
+ this.$emit('update:info', {
|
|
|
+ ...this.info,
|
|
|
+ liked: true,
|
|
|
+ likes: this.info.likes + 1
|
|
|
+ });
|
|
|
+ this.$toast.success('收藏成功');
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.$http.get(`/collection/${this.info.id}/unlike`).then(() => {
|
|
|
+ this.$emit('update:info', {
|
|
|
+ ...this.info,
|
|
|
+ liked: false,
|
|
|
+ likes: this.info.likes - 1
|
|
|
+ });
|
|
|
+ this.$toast.success('取消收藏');
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+.orderInfo {
|
|
|
+ background: @bg;
|
|
|
+ border-radius: 12px;
|
|
|
+ color: @text0;
|
|
|
+ padding: 12px 10px;
|
|
|
+ margin: 16px 16px 0;
|
|
|
+ display: block;
|
|
|
+
|
|
|
+ .orderInfo_top {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 24px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ color: #000000;
|
|
|
+
|
|
|
+ .status {
|
|
|
+ color: #3ab200;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .orderInfo_information {
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 16px;
|
|
|
+
|
|
|
+ .orderInfo_information_con {
|
|
|
+ margin-left: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 24px;
|
|
|
+
|
|
|
+ .orderInfo_information_con_name {
|
|
|
+ color: #000000;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .orderInfo_information_con_time {
|
|
|
+ font-weight: 400;
|
|
|
+ color: #939599;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.total-price {
|
|
|
+ height: 24px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ .total-price_left {
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #c8c9cc;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .total-price_right {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .total-price_right_one {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 24px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .total-price_right_two {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #3ab200;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.orderInfo_btn {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 32px;
|
|
|
+
|
|
|
+ .orderInfo_btn_one {
|
|
|
+ width: 162px;
|
|
|
+ height: 32px;
|
|
|
+ background: rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 16px;
|
|
|
+ color: #939599;
|
|
|
+ }
|
|
|
+
|
|
|
+ .orderInfo_btn_two {
|
|
|
+ width: 100px;
|
|
|
+ height: 32px;
|
|
|
+ background: #000000;
|
|
|
+ border-radius: 16px;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|