|
@@ -0,0 +1,246 @@
|
|
|
+<template>
|
|
|
+ <div class="create-order hui-flex">
|
|
|
+ <div class="hui-flex-box">
|
|
|
+ <div class="order-box">
|
|
|
+ <div class="title">订单详情</div>
|
|
|
+ <div class="content">
|
|
|
+ <el-table :data="tableData">
|
|
|
+ <el-table-column label="商品名称" prop="name"></el-table-column>
|
|
|
+ <el-table-column label="数量" width="100">
|
|
|
+ <template>
|
|
|
+ x1
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="价格" prop="price" width="100"></el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="order-box">
|
|
|
+ <div class="title" style="border: none;">优惠券</div>
|
|
|
+ <div class="content contents">
|
|
|
+ <div class="coupon-card" v-for="(item,index) in coupon" :key="index" @click="checkCoupon(item)">
|
|
|
+ <div
|
|
|
+ :class="couponChecked.findIndex(node=>node.id === item.id) > -1 ? 'coupon-card-box active' :'coupon-card-box'">
|
|
|
+ <div class="price">
|
|
|
+ <div v-if="item.type === 1">
|
|
|
+ <span class="symbol">¥</span>
|
|
|
+ <span>{{item.couponAmount}}</span>
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <span>{{item.discount*100}}</span>
|
|
|
+ <span class="symbol">折</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="center-describe">
|
|
|
+ <div class="product">{{item.title}}</div>
|
|
|
+ <div class="sub-title">
|
|
|
+ <span>{{item.type === 1?`满${item.threshold}减${item.couponAmount}`:`满${item.threshold}可用,最高抵扣${item.mostConstraint}`}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="icon-check">
|
|
|
+ <i class="el-icon-check"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="create-order-submit">
|
|
|
+ <div class="create-order-price">
|
|
|
+ <div>
|
|
|
+ <span>应付费用:</span><span class="color-red">¥</span><span class="color-red">90.00</span>
|
|
|
+ </div>
|
|
|
+ <div class="discount-num">
|
|
|
+ <span class="color-red">减 ¥ 0.00</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-button type="primary" size="medium">创建订单</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ getServeById
|
|
|
+ } from '@/api/serve'
|
|
|
+ import {
|
|
|
+ getCouponListByQuery
|
|
|
+ } from '@/api/discount'
|
|
|
+ export default {
|
|
|
+ props: ['serveId'],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tableData: [],
|
|
|
+ coupon: [],
|
|
|
+ couponChecked: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init() {
|
|
|
+ getServeById(this.serveId).then(res => {
|
|
|
+ if (res.state) {
|
|
|
+ this.tableData = [res.data];
|
|
|
+ }
|
|
|
+ })
|
|
|
+ getCouponListByQuery({
|
|
|
+ userId: this.$store.getters.user.userId
|
|
|
+ }).then(res => {
|
|
|
+ if (res.state) {
|
|
|
+ this.coupon = res.data;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ checkCoupon(item) {
|
|
|
+ let index = this.couponChecked.findIndex(node => node.id === item.id);
|
|
|
+ if (index === -1) {
|
|
|
+ this.couponChecked.push(item);
|
|
|
+ } else {
|
|
|
+ this.couponChecked.splice(index, 1);
|
|
|
+ }
|
|
|
+ console.log(this.couponChecked);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .create-order {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: $--background-color-base;
|
|
|
+ padding: 15px;
|
|
|
+
|
|
|
+ .create-order-submit {
|
|
|
+ background: #fff;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: end;
|
|
|
+ padding: 15px;
|
|
|
+
|
|
|
+ .create-order-price {
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .discount-num {
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .coupon-card {
|
|
|
+ width: 50%;
|
|
|
+ margin-top: 10px;
|
|
|
+
|
|
|
+ &:nth-child(2n) {
|
|
|
+ padding-left: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(2n-1) {
|
|
|
+ padding-right: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .coupon-card-box {
|
|
|
+ background: #fff;
|
|
|
+ padding: 15px;
|
|
|
+ align-items: center;
|
|
|
+ display: flex;
|
|
|
+ position: relative;
|
|
|
+ cursor: pointer;
|
|
|
+ border: 1px solid $--border-color-lighter;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ &:hover,
|
|
|
+ &.active {
|
|
|
+ border-color: $--color-primary;
|
|
|
+
|
|
|
+ .icon-check {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .price {
|
|
|
+ color: $--color-danger;
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 24px;
|
|
|
+ text-align: center;
|
|
|
+ width: 100px;
|
|
|
+
|
|
|
+ .symbol {
|
|
|
+ margin: 0 3px;
|
|
|
+ font-size: $--font-size-base;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .center-describe {
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: auto;
|
|
|
+ padding-left: 20px;
|
|
|
+ text-align: left;
|
|
|
+
|
|
|
+ .product {
|
|
|
+ color: $--color-text-primary;
|
|
|
+ font-size: $--font-size-large;
|
|
|
+ font-weight: 550;
|
|
|
+ line-height: 14px;
|
|
|
+ padding-bottom: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-check {
|
|
|
+ color: #fff;
|
|
|
+ white-space: nowrap;
|
|
|
+ transform: rotate(45deg);
|
|
|
+ position: absolute;
|
|
|
+ top: -8px;
|
|
|
+ right: -15px;
|
|
|
+ background: #165dff;
|
|
|
+ width: 40px;
|
|
|
+ text-align: center;
|
|
|
+ height: 26px;
|
|
|
+ display: none;
|
|
|
+ align-items: flex-end;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-table__header {
|
|
|
+
|
|
|
+ th {
|
|
|
+ color: #606266;
|
|
|
+ background: #f4f4f5;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cell {
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .order-box {
|
|
|
+ background: #fff;
|
|
|
+ margin-bottom: 15px;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 22px;
|
|
|
+ padding: 12px 24px;
|
|
|
+ border-bottom: 1px solid $--border-color-light;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ padding: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .contents {
|
|
|
+ background: $--background-color-base;
|
|
|
+ padding: 0;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|