|
@@ -1,106 +1,197 @@
|
|
|
<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 class="create-order">
|
|
|
+ <div class="hui-flex" v-if="!isCreate">
|
|
|
+ <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">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span class="color-red">{{scope.row.price}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
</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 class="order-box">
|
|
|
+ <div class="title" style="border: none;">优惠券</div>
|
|
|
+ <div class="content contents">
|
|
|
+ <div :class="returnCouponClass(item) ?'coupon-card' :'coupon-card disabled'"
|
|
|
+ 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 v-else>
|
|
|
- <span>{{item.discount*100}}</span>
|
|
|
- <span class="symbol">折</span>
|
|
|
+ <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>
|
|
|
- <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 class="icon-check">
|
|
|
+ <i class="el-icon-check"></i>
|
|
|
</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 class="create-order-submit">
|
|
|
+ <div class="create-order-price">
|
|
|
+ <div v-if="isCount" class="color-red">
|
|
|
+ 正在计算...
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <div>
|
|
|
+ <span>应付费用:</span>
|
|
|
+ <span class="color-red">¥</span>
|
|
|
+ <span class="color-red">{{countPriceData.totalFee}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="discount-num">
|
|
|
+ <span class="color-red">减 ¥ <span>{{minus}}</span></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <el-button type="primary" size="medium" :disabled="isCount" @click="submit" :loading="loading">
|
|
|
+ 创建订单
|
|
|
+ </el-button>
|
|
|
</div>
|
|
|
- <el-button type="primary" size="medium">创建订单</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="hui-flex" v-else>
|
|
|
+ <el-result icon="success" title="订单创建成功" :subTitle="subTitle">
|
|
|
+ <template slot="extra">
|
|
|
+ <el-button size="small" @click="lookOrder">查看订单</el-button>
|
|
|
+ </template>
|
|
|
+ </el-result>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import {
|
|
|
- getServeById
|
|
|
+ getServeById,
|
|
|
+ countPriceAPI,
|
|
|
+ createOreder
|
|
|
} from '@/api/serve'
|
|
|
import {
|
|
|
getCouponListByQuery
|
|
|
} from '@/api/discount'
|
|
|
+ import {
|
|
|
+ getServeDepartmentById
|
|
|
+ } from '@/api/system'
|
|
|
+
|
|
|
export default {
|
|
|
props: ['serveId'],
|
|
|
data() {
|
|
|
return {
|
|
|
tableData: [],
|
|
|
coupon: [],
|
|
|
- couponChecked: []
|
|
|
+ couponChecked: [],
|
|
|
+ isCount: false,
|
|
|
+ countPriceData: {
|
|
|
+ productCoupon: [],
|
|
|
+ totalFee: 0
|
|
|
+ },
|
|
|
+ productData: {},
|
|
|
+ loading: false,
|
|
|
+ isCreate: false,
|
|
|
+ subTitle: '',
|
|
|
+ isStacking: false
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
this.init();
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ minus() {
|
|
|
+ let data = this.countPriceData.productCoupon || [];
|
|
|
+ let num = 0;
|
|
|
+ for (var i = 0; i < data.length; i++) {
|
|
|
+ num += data[i].minus
|
|
|
+ }
|
|
|
+ return num;
|
|
|
+ }
|
|
|
+ },
|
|
|
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;
|
|
|
+ let data = res.data;
|
|
|
+ this.productData = data;
|
|
|
+ this.tableData = [data];
|
|
|
+ this.countPrice();
|
|
|
+ getCouponListByQuery({
|
|
|
+ userId: this.$store.getters.user.userId,
|
|
|
+ productLevelId: data.productLevelId,
|
|
|
+ state: 1
|
|
|
+ }).then(node => {
|
|
|
+ if (node.state) {
|
|
|
+ this.coupon = node.data;
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
+ returnCouponClass(item) {
|
|
|
+ if (item.threshold > this.productData.price) return false; //大于满减。
|
|
|
+ if (this.couponChecked.findIndex(node => node.id === item.id) > -1) return true; //已选择的返回true
|
|
|
+ if (this.couponChecked.length === 0) return true; //未选择优惠券时都能选择。
|
|
|
+ if (this.isStacking && item.overlayUse === 0) return false; //叠加时不能选择不能叠加优惠券。
|
|
|
+ if (this.isStacking && item.overlayUse === 1) return true; //叠加时能选择叠加优惠券。
|
|
|
+ },
|
|
|
checkCoupon(item) {
|
|
|
+ if (!this.returnCouponClass(item)) return;
|
|
|
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);
|
|
|
+ this.isStacking = this.couponChecked.length > 0 ? this.couponChecked[0].overlayUse === 1 : false; //是否可叠加
|
|
|
+ this.countPrice();
|
|
|
+ },
|
|
|
+ countPrice() {
|
|
|
+ this.isCount = true;
|
|
|
+ let couponIds = this.couponChecked.map(node => node.id).join(',') || -1;
|
|
|
+ countPriceAPI(this.productData.id, couponIds).then(res => {
|
|
|
+ if (res.state) {
|
|
|
+ this.countPriceData = res.data;
|
|
|
+ }
|
|
|
+ this.isCount = false;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ submit() {
|
|
|
+ this.loading = true;
|
|
|
+ let couponIds = this.couponChecked.map(node => node.id).join(',') || -1;
|
|
|
+ createOreder(this.productData.id, this.$store.getters.organization.id, couponIds).then(res => {
|
|
|
+ this.loading = false;
|
|
|
+ if (res.state) {
|
|
|
+ this.$message.success('操作成功');
|
|
|
+ this.subTitle = '订单编号:' + res.data.orderNo;
|
|
|
+ this.isCreate = true;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ lookOrder() {
|
|
|
+ getServeDepartmentById(this.productData.productLevelId).then(res => {
|
|
|
+ if (res.state) {
|
|
|
+ let orderPath = '/work/serve/list/' + res.data.sign;
|
|
|
+ this.$router.push(orderPath);
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
},
|
|
|
}
|
|
@@ -141,6 +232,22 @@
|
|
|
padding-right: 5px;
|
|
|
}
|
|
|
|
|
|
+ &.disabled {
|
|
|
+ .coupon-card-box {
|
|
|
+ opacity: 0.6;
|
|
|
+ cursor: unset;
|
|
|
+
|
|
|
+ &:hover,
|
|
|
+ &.active {
|
|
|
+ border-color: $--border-color-lighter;
|
|
|
+
|
|
|
+ .icon-check {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
.coupon-card-box {
|
|
|
background: #fff;
|
|
|
padding: 15px;
|
|
@@ -151,7 +258,10 @@
|
|
|
border: 1px solid $--border-color-lighter;
|
|
|
overflow: hidden;
|
|
|
|
|
|
- &:hover,
|
|
|
+ &:hover {
|
|
|
+ border-color: $--color-primary;
|
|
|
+ }
|
|
|
+
|
|
|
&.active {
|
|
|
border-color: $--color-primary;
|
|
|
|