wyk/juipvue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始提交

Browse Source
This commit is contained in:
wanyongkang
2020-10-04 10:30:08 +08:00
commit 3193537726
441 changed files with 171716 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

250
src/components/sell/coupon.vue Normal file
View File

@@ -0,0 +1,250 @@
<template>
<div>
<div class="heior_box">
<el-button size="small" type="primary" icon="el-icon-plus" @click="add">新建优惠券</el-button>
<div class="search-box">
<!-- <el-select v-model="value" placeholder="请选择" size="small">
<el-option label="全部状态" value="0"></el-option>
<el-option label="未开始" value="1"></el-option>
<el-option label="进行中" value="2"></el-option>
<el-option label="已结束" value="3"></el-option>
<el-option label="已失效" value="4"></el-option>
</el-select>-->
<el-input v-model="searchModel.keyWord" placeholder="请输入套餐名称/标题" clearable size="small">
<el-button slot="append" icon="el-icon-search" @click="get"></el-button>
</el-input>
</div>
</div>
<el-table :data="retData.Data" row-key="Id" border size="medium" :height="$getHeight(110)">
<el-table-column prop="Name" label="优惠券名称"></el-table-column>
<el-table-column prop="CouponType" label="类型">
<template slot-scope="scope">{{scope.row.CouponType==1?"满减券":"折扣券"}}</template>
</el-table-column>
<el-table-column prop="CouponValue" label="优惠内容">
<template
slot-scope="scope"
>{{scope.row.CouponType==1?"减"+scope.row.CouponValue+"元":scope.row.CouponValue+"折"}}</template>
</el-table-column>
<el-table-column label="已领取">
<template slot-scope="scope">{{scope.row.GrantCount}}</template>
</el-table-column>
<!-- <el-table-column prop="UseCount" label="已使用" width="80"></el-table-column> -->
<el-table-column label="使用日期" width="240">
<template slot-scope="scope">
<div
v-if="scope.row.DateRule==1&&scope.row.StartDate&&scope.row.EndDate"
>{{scope.row.StartDate.DateFormat('yyyy-MM-dd')}}至{{scope.row.EndDate.DateFormat('yyyy-MM-dd')}}</div>
<div v-else-if="scope.row.DateRule==2">领取当天起{{scope.row.ValidDay}}天内有效</div>
<div v-else>领取次日起{{scope.row.ValidDay}}天内有效</div>
</template>
</el-table-column>
<el-table-column label="操作" width="220">
<template slot-scope="scope">
<span class="handel cursor edit" @click="give(scope.row)">发放</span>
<span class="handel cursor edit" @click="edit(scope.row)">编辑</span>
<router-link :to="{name:'couponused',query:{couponId:scope.row.Id,couponName:scope.row.Name}}">
<span class="handel cursor edit">明细</span>
</router-link>
<!-- <span class="handel cursor edit" v-if="scope.row.Disabled==0" @click="disabled(scope.row)">使失效</span> -->
</template>
</el-table-column>
</el-table>
<div class="block">
<el-pagination
v-if="retData.Data.length>0"
@current-change="get"
:page-size="50"
layout="total,prev, pager, next"
:total="retData.TotalCount"
></el-pagination>
</div>
<el-dialog title="优惠券维护" :visible.sync="showDialog" width="680px">
<el-form :model="currentModel" :rules="rules" ref="inputForm" label-width="100px">
<el-form-item prop="CouponType" label="优惠券类型">
<el-radio-group v-model="currentModel.CouponType">
<el-radio :label="1">满减券</el-radio>
<el-radio :label="2">折扣券</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item prop="Name" label="优惠券名称">
<el-input v-model="currentModel.Name" size="small"></el-input>
</el-form-item>
<el-form-item prop="CouponValue" label="优惠内容">
<div v-if="currentModel.CouponType==1">
<el-input v-model="currentModel.CouponValue" placeholder="请输入优惠券金额" size="small">
<el-button slot="append">元</el-button>
</el-input>
</div>
<div class="discount-box" v-else>
<el-input v-model="currentModel.CouponValue" placeholder="请输入优惠券折扣（1-10）" size="small">
<el-button slot="append">折</el-button>
</el-input>
</div>
</el-form-item>
<el-form-item prop="isLimitAmount" label="使用门槛">
<el-radio-group v-model="isLimitAmount">
<el-radio :label="0">无门槛</el-radio>
<el-radio :label="1">
<el-input
v-model="currentModel.AllowMinAmount"
size="small"
placeholder="请输入满xx元后方可使用"
></el-input>
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item prop="DateRule" label="使用时间">
<el-radio-group v-model="currentModel.DateRule">
<el-radio :label="1">
特定时间段
<el-date-picker
size="small"
v-model="dateRange"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-radio>
<el-radio :label="2">
领取当日起
<el-input v-model="currentModel.ValidDay" size="small" />天内可用
</el-radio>
<el-radio :label="3">
领取次日起
<el-input v-model="currentModel.ValidDay" size="small" />天内可用
</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="resetForm">取 消</el-button>
<el-button type="primary" @click="save()">确定</el-button>
</span>
</el-dialog>
<userDrawer ref="userDrawer" @select="onSelect"></userDrawer>
</div>
</template>
<script>
var that = null;
export default {
components: {
userDrawer: () => import("@/components/common/userDrawer")
},
data() {
return {
showDialog: false,
optype: 1, //1:新建 2：编辑
retData: { TotalCount: 0, Data: [] },
searchModel: {
PageIndex: 1,
keyWord: ""
},
currentModel: {
CouponType: 1,
DateRule: 1,
ValidDay: 0,
CouponValue: 0,
AllowMinAmount: 0,
StartDate: null,
EndDate: null
},
giveModel:{
CouponId:0,
UserId:0
},
isLimitAmount: 0,
dateRange: [],
rules: {}
};
},
created() {
this.$store.commit("setCurrentNav", "优惠券管理");
this.get(1);
},
methods: {
get(page) {
if (Number.isInteger(page)) {
this.searchModel.PageIndex = page;
}
this.$api.get("sells/v1/coupon/Page", this.searchModel).then(res => {
this.retData = res;
});
},
add() {
this.optype = 1;
this.showDialog = true;
},
edit(item) {
this.optype = 2;
this.showDialog = true;
this.currentModel = clone(item);
if (item.AllowMinAmount > 0) this.isLimitAmount = 1;
else this.isLimitAmount = 0;
},
save() {
this.currentModel.StartDate = this.dateRange[0];
this.currentModel.EndDate = this.dateRange[1];
if (this.isLimitAmount == 0) this.currentModel.AllowMinAmount = 0;
if (this.optype == 1) {
this.$api.post("sells/v1/coupon/Post", this.currentModel).then(res => {
this.resetForm();
this.get();
});
} else {
this.$api.post("sells/v1/coupon/put", this.currentModel).then(res => {
this.resetForm();
this.get();
});
}
},
resetForm() {
this.$refs["inputForm"].resetFields();
this.showDialog = false;
},
disabled(item) {
this.$api.post("sells/v1/coupon/Disabled?id=" + item.Id).then(res => {
this.get();
});
},
give(row) {
this.giveModel.CouponId=row.Id;
this.$refs["userDrawer"].show();
},
onSelect(item) {
this.giveModel.UserId=item.Id;
this.$confirm("确定要赠送吗？").then(_ => {
this.$api.post("sells/v1/coupon/give", this.giveModel).then(res => {
this.get();
})
})
}
}
};
</script>
<style scoped>
.xeBtnDefault {
outline: medium;
color: #666;
background: #fafbfc;
border: 1px solid #e5e7eb;
}
.btnMid {
display: inline-block;
width: 90px;
height: 36px;
padding: 0;
text-align: center;
line-height: 36px;
border-radius: 2px;
cursor: pointer;
font-size: 14px;
}
.el-radio {
padding: 5px 0;
}
</style>

290
src/components/sell/coupon_add.vue Normal file
View File

@@ -0,0 +1,290 @@
<template>
<div class="couponbox">
<el-alert
title="优惠券说明"
type="info"
description=" 优惠券总量为用户领取、定向发放、兑换码兑换、支付有礼发放、运营计划发放所产生的优惠券数量，具体数量可在效果数据中查看。"
show-icon
></el-alert>
<div class="baseInfo">
<h2 class="title">基本信息</h2>
<section class="creat_item">
<label for="title" class="lable">
优惠券名称
<span class="star">*</span>
</label>
<input
type="text"
v-model="couponModel.Name"
placeholder="优惠券名称，不超过10个字"
maxlength="10"
autocomplete="off"
/>
</section>
<section class="creat_item flex">
<div class="lable">
优惠券类型
<span class="star">*</span>
</div>
<div class="flex">
<el-radio v-model="couponModel.CouponType" :label="1">满减优惠券</el-radio>
<el-radio v-model="couponModel.CouponType" :label="2">折扣优惠券</el-radio>
</div>
</section>
<section class="creat_item flex">
<div class="lable">
使用门槛
<span class="star">*</span>
</div>
<div>
<el-radio v-model="limitAmount" :label="0">无门槛使用</el-radio>
<el-radio v-model="limitAmount" :label="1">
<span>满</span>
<input type="text" placeholder="输入金额" v-model="couponModel.AllowMinAmount" class="input_price" />
<span>元使用</span>
</el-radio>
</div>
</section>
<section class="creat_item flex">
<div class="lable">
优惠内容
<span class="star">*</span>
</div>
<div>
<div v-if="couponModel.CouponType==1">
减
<input type="text" v-model="couponModel.CouponValue" placeholder="请输入优惠券金额" />元
</div>
<div class="discount-box" v-else >
打
<input type="text" v-model="couponModel.CouponValue" />折
</div>
</div>
</section>
<section class="creat_item flex">
<label for="count" class="lable">
发行量
<span class="star">*</span>
</label>
<div>
<input
type="text"
v-model="couponModel.TotalCount"
autocomplete="off"
placeholder="最多多少张张"
/>张
<br />
<div class="grayTip">优惠券创建后，发行量只能增加不能减少，请谨慎设置</div>
</div>
</section>
<section class="creat_item flex">
<label for="range" class="lable">
适用商品
<span class="star">*</span>
</label>
<div>
<el-radio v-model="couponModel.UseRange" :label="1">全部商品可用</el-radio>
<el-radio v-model="couponModel.UseRange" :label="2">指定商品可用</el-radio>
<div v-if="couponModel.UseRange==2">
<el-button type="primary" @click="$refs['productSelector'].show()">选择课程</el-button>
<el-table
:data="products"
style="width: 100%;margin-bottom: 20px;"
row-key="ResourceId"
border
>
<el-table-column label="课程图片" width="180">
<template slot-scope="scope">
<img :src="scope.row.ResourceImage" style="width:50px;height:25px;" />
</template>
</el-table-column>
<el-table-column prop="ResourceName" label="课程名称" width="180"></el-table-column>
<el-table-column prop="Price" label="价格"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-link type="primary" @click="remove(scope.row)">移除</el-link>
</template>
</el-table-column>
</el-table>
</div>
</div>
</section>
<section class="choose_time creat_item">
<div class="lable">
使用时间
<span class="star">*</span>
</div>
<div>
<div class="flex">
<el-radio v-model="couponModel.DateRule" :label="1">
<el-date-picker
v-model="dateRange"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-radio>
</div>
<div class="up-down-margin">
<el-radio v-model="couponModel.DateRule" :label="2">
<label for="time_way_two">领取当日起</label>
<input type="text" v-model="couponModel.ValidDay" class="input_price" />
<span>天内可用</span>
</el-radio>
</div>
<div>
<el-radio v-model="couponModel.DateRule" :label="3">
<label for="time_way_three">领取次日起</label>
<input type="text" v-model="couponModel.ValidDay " class="input_price" />
<span>天内可用</span>
</el-radio>
</div>
</div>
</section>
</div>
<div class="popuInfo use-way-box">
<h2 class="title">领用规则</h2>
<section class="creat_item flex">
<div class="lable">
领取次数限制
<span class="star">*</span>
</div>
<div>
<el-radio v-model="isLimit" :label="0">不限次数</el-radio>
<el-radio v-model="isLimit" :label="1">每人限领</el-radio>
<el-input v-if="isLimit==1" v-model="couponModel.GetLimitCount"></el-input>
</div>
</section>
<!-- <section class="creat_item">
<label for="can_share" class="lable lable-top">分享设置</label>
<el-checkbox v-model="checked">优惠券允许分享给好友领取</el-checkbox>
</section>-->
<section class="creat_item">
<label for="can_use_activity" class="lable lable-top">活动叠加限制</label>
<el-checkbox v-model="couponModel.IsOverlay" :true-label="1" :false-label="0">优惠券仅原价购买商品时可用，不可与其他营销活动叠加使用</el-checkbox>
</section>
<section class="creat_item activity-overlay">
<label for="can_use_activity" class="lable lable-top">公开设置</label>
<el-checkbox v-model="couponModel.IsOpen" :true-label="1" :false-label="0">用户可在商品详情页领取</el-checkbox>
</section>
</div>
<el-button @click="add">保存</el-button>
</div>
</template>
<script>
var that = null;
export default {
components: {
},
data() {
return {
isLimit: 0,
limitAmount:0,
dateRange: [],
couponModel: {
CouponType: 1,
DateRule: 1,
UseRange:1
},
products: []
};
},
watch: {
saoma: function() {}
},
created() {},
methods: {
get() {
this.$api.get("sells/v1/coupon/get").then(res => {
if (res.Data) this.couponModel = res.Data;
});
},
add() {
this.couponModel.StartDate = this.dateRange[0];
this.couponModel.EndDate = this.dateRange[1];
this.couponModel.Resource = this.products;
if (this.isLimit == 0) this.couponModel.LimitCount = -1;
this.$api.post("sells/v1/coupon/Post", this.couponModel).then(res => {
this.$router.push({ name: "coupon" });
});
},
selectCourse(data) {
var model = data.map(m => {
return {
ResourceId: m.Id,
ResourceImage: m.Cover,
ResourceName: m.Name,
ResourceType: 1,
Price: m.Price
};
});
this.products.push(...model);
},
selectLive(data) {
var model = data.map(m => {
return {
ResourceId: m.Id,
ResourceImage: m.Cover,
ResourceName: m.Name,
ResourceType: 2,
Price: m.Price
};
});
this.products.push(...model);
},
selectPackage(data) {
var model = data.map(m => {
return {
ResourceId: m.Id,
ResourceImage: m.Cover,
ResourceName: m.Name,
ResourceType: 3,
Price: m.Price
};
});
this.products.push(...model);
},
remove(item) {
var index = this.products.indexOf(item);
this.products.splice(index, 1);
}
}
};
</script>
<style scoped>
.couponbox {
padding: 20px;
}
.creat_item {
margin-bottom: 28px;
}
.lable {
width: 200px;
float: left;
}
.star {
color: red;
font-size: 20px;
}
input {
padding-left: 5px;
width: 240px;
height: 36px;
-webkit-border-radius: 2px;
border-radius: 2px;
border: 1px solid #eee;
margin-right: 10px;
}
.grayTip {
font-size: 12px;
color: #999999;
text-align: left;
margin-top: 10px;
}
</style>

97
src/components/sell/couponused.vue Normal file
View File

@@ -0,0 +1,97 @@
<template>
<div>
<div class="heior_box">
{{couponName}}
<div class="search-box"></div>
</div>
<el-table :data="retData.Data" row-key="Id" border size="medium" :height="$getHeight(100)">
<el-table-column prop="CreateTime" label="创建日期" width="180"></el-table-column>
<el-table-column prop="OrderNo" label="订单号" width="215"></el-table-column>
<el-table-column prop="UserName" label="用户" width="120"></el-table-column>
<el-table-column prop="ProductName" label="产品"></el-table-column>
<el-table-column prop="PackageName" label="套餐"></el-table-column>
<el-table-column prop="Accounts" label="账号">
<template slot-scope="scope">
<cutTip :text="scope.row.Accounts"></cutTip>
</template>
</el-table-column>
<el-table-column prop="OrderAmount" label="订单金额"></el-table-column>
<el-table-column prop="CouponAmount" label="优惠金额"></el-table-column>
<!-- <el-table-column label="操作" width="140px">
<template slot-scope="scope">
<span class="handel cursor edit" @click="Free(scope.row)">冻结</span>
</template>
</el-table-column> -->
</el-table>
<div class="block">
<el-pagination
v-if="retData.Data.length>0"
@current-change="get"
:current-page.sync="searchModel.PageIndex"
:page-size="50"
layout="total,prev, pager, next"
:total="retData.TotalCount"
></el-pagination>
</div>
</div>
</template>
<script>
var that = null;
export default {
components: {},
data() {
return {
retData: { TotalCount: 0, Data: [] },
couponName:'',
searchModel: {
PageIndex: 1,
keyWord: "",
CouponId: 0
}
}
},
created() {
this.$store.commit("setCurrentNav", "优惠券明细");
var couponId=this.$route.query.couponId;
this.couponName=this.$route.query.couponName;
this.get(couponId);
},
methods: {
get(couponId) {
if (Number.isInteger(couponId)) {
this.searchModel.CouponId = couponId;
}
this.$api
.get("course/v1/order/CouponOrders", this.searchModel)
.then(res => {
this.retData = res;
});
}
}
};
</script>
<style scoped>
.xeBtnDefault {
outline: medium;
color: #666;
background: #fafbfc;
border: 1px solid #e5e7eb;
}
.btnMid {
display: inline-block;
width: 90px;
height: 36px;
padding: 0;
text-align: center;
line-height: 36px;
border-radius: 2px;
cursor: pointer;
font-size: 14px;
}
.el-radio {
padding: 5px 0;
}
</style>