123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897 |
- <template>
- <view>
- <view class="headerGetbg"></view>
- <view class="home-content">
- <form @submit="save">
- <!-- <view class="main"> -->
- <view class="bgf mar-24 home-content-top">
- <view class="br box-pack-between" style="padding: 32rpx 0 25rpx 0;">
- <text>活动信息</text>
- <view class="flex-y-center" v-if="id">
- <view @click="del" class="flex-y-center ft28" style="color: #999999;">
- <image src="/saomaDiancan/static/images/del2.png" class="list-icon" mode=""></image> 删除
- </view>
- </view>
- </view>
- <view>
- <view class="box-pack-between ft32 item">
- <text class="item_name ft28">活动类型<text style="color:red">*</text></text>
- <view class="flex-center ft28">
- <input :value="info.title" placeholder="请填写活动标题" name="title" />
- </view>
- </view>
- </view>
- <view class="box-pack-between ft32 item flex-y-center">
- <text class="item_name ft28">活动类型<text style="color:red">*</text></text>
- <picker class="ft28" :range="game_list" range-key="name" @change="bindGame">
- <view class="flex-y-center">
- <!-- <view v-if="game_index<=-1">{{game_name}}</view> -->
- <view >{{game_list[0].name}}</view>
- <text class="iconfont icon-prev"></text>
- </view>
- </picker>
- </view>
- </view>
- <!-- <view v-if="game_index!=2" class="home-content-top" style="padding-bottom: 20rpx;">
- <view class="box-pack-between ft32 item">
- <text class="ft28">奖品设置 <text style="color:red">*</text></text>
- <view class="add-home flex-center ft24" @click="open">
- 添加
- </view>
- </view>
- <view class="item-bg" v-if="prize.length>0">
- <view class="box-pack-between mar64 flex-y-center" v-for="(item,index) of prize" :key='index'>
- <view class="flex-y-center flex-grow-1 pdr-20">
- <text style="margin-right: 10rpx;">{{item.name}}/<text
- class="col-num">{{item.num}}张</text>/<text class="col-num">
- {{item.rate}}%</text></text>
- </view>
- <image class="item-del" @click="delScene" :data-index='index'
- src="../../static/images/del.png" mode=""></image>
- </view>
- </view>
- </view> -->
-
- <block v-if="game_index==2">
- <view class="home-content-top" style="padding-bottom: 20rpx;">
- <view class="box-pack-between ft32 item">
- <text class="ft28">奖品列表 </text>
- </view>
- <view class="box-pack-between ft32 item">
- <text class="item_name ft28">转盘ID</text>
- <view class="flex-center ft28">
- <input :value="info.content.dial_id" placeholder="请输入转盘ID" name="dial_id" />
- </view>
- </view>
- <view class="box-pack-between ft32 item">
- <text class="item_name ft28">旋转时间(秒)</text>
- <view class="flex-center ft28">
- <input :value="info.content.rotate_time" placeholder="请输入旋转时间(秒)" name="rotate_time" />
- </view>
- </view>
- <view class="box-pack-between ft32 item">
- <text class="item_name ft28">LED 数量</text>
- <view class="flex-center ft28">
- <input :value="info.content.led_num" placeholder="请输入LED 数量" name="led_num" />
- </view>
- </view>
- </view>
- <view class="home-content-top" v-for="(item,index) of content" :key='index'>
- <view class="box-pack-between ft32 item-li">
- <text class="item_name ft28">第{{index+1}}个灯奖项</text>
- <picker class="ft28" :range="coupon_list" range-key="name" @change="onCoupon"
- :data-index='index'>
- <view class="flex-y-center">
- <view v-if="!item.awards">请选择优惠劵类型</view>
- <view v-else>{{item.awards}}</view>
- <text class="iconfont icon-prev"></text>
- </view>
- </picker>
- </view>
- <view class="box-pack-between ft32 item-li">
- <text class="item_name ft28">概率</text>
- <view class="flex-center ft28">
- <input :value="item.probability" @input="getScene" :data-index="index"
- placeholder="请输入概率" />
- </view>
- </view>
- <view class="box-pack-between ft32 item-li">
- <text class="item_name ft28">数量</text>
- <view class="flex-center ft28">
- <input :value="item.num" @input="getNum" placeholder="请输入数量" :data-index="index" />
- </view>
- </view>
- <view class="box-pack-between ft32 item-li">
- <text class="item_name ft28">指定openid</text>
- <view class="flex-center ft28">
- <input :value="item.assign" @input="getOpenid" placeholder="请填写某音用户OPENID"
- :data-index="index" />
- </view>
- </view>
- </view>
- </block>
- <view class="home-content-top">
- <view class="br" style="padding: 32rpx 0 25rpx 0;">
- <text>活动时间</text>
- </view>
- <view class="box-pack-between ft32 item">
- <text>开始时间<text style="color:red">*</text></text>
- <view class="flex-center ft24">
- <view class="model-item" :class="act_index==1?'act':''">
- <picker mode='date' :value="start" :start="startDate" :end="endDate"
- @change="bindDateChange1" data-index="1">
- <view class="flex-center">
- <text>{{start}}</text>
- <text class="iconfont icongengduo"></text>
- </view>
- </picker>
- </view>
- </view>
- </view>
- <view class="box-pack-between ft32 item">
- <text>结束时间<text style="color:red">*</text></text>
- <view class="flex-center ft24">
- <view class="model-item" :class="act_index2==2?'act':''">
- <picker mode='date' :value="end" :start="startDate" :end="endDate"
- @change="bindDateChange2" data-index="2">
- <view class="flex-center">
- <text>{{end}}</text> <text class="iconfont icongengduo"></text>
- </view>
- </picker>
- </view>
- </view>
- </view>
- </view>
- <view class="home-content-top">
- <view class="br" style="padding: 32rpx 0 25rpx 0;">
- <text>活动说明</text>
- </view>
- <view class="box-pack-between ft32 descps ">
- <textarea :value='info.explain' placeholder-class="desc-placeholder" maxlength="200"
- placeholder="请输入内容(选填)" name='explain' />
- </view>
- </view>
- <view class="bottom-bar">
- <button form-type="submit" type="2" class="btn1 flex-center">
- 确定
- </button>
- </view>
- <!-- </view> -->
- </form>
- </view>
- <zx-uni-popup ref="popup" type="center">
- <view class="games-model">
- <form @submit="sure">
- <view class="title">
- 设置奖品
- </view>
- <view class="flex-y-center item">
- <view style="min-width: 150rpx;">名称
- <text class="red">*</text>
- </view>
- <view class="border-b flex-grow-1">
- <input name="name" type="text" maxlength="30" />
- </view>
- </view>
- <view class="flex-y-center item" @click="bindCoupon">
- <view style="min-width: 100rpx;">奖品<text class="red">*</text></view>
- <view class="flex-y-center box-pack-between flex-grow-1 ft28">
- <text></text>
- <view class="flex-y-center">
- <text>{{coupon_title}}</text>
- <text class="iconfont icon-prev"></text>
- </view>
- </view>
- </view>
- <view class="flex-y-center item">
- <view style="min-width: 100rpx;">数量<text class="red">*</text></view>
- <view class="border-b flex-grow-1">
- <input name="num" :value="num" type="number" value="" />
- </view>
- </view>
- <view class="flex-y-center item">
- <text style="min-width: 100rpx;"> 概率<text class="red">*</text></text>
- <view class="border-b flex-grow-1">
- <input name="probability" :value="probability" type="digit" value="" />
- </view>
- <text>%</text>
- </view>
- <text class="ft20 red">*所填写的奖品概率总和不能超过100,未中奖的概率 = 100 - 所填写的奖品概率的总和</text>
- <button class="btn flex-center" form-type="submit">确定</button>
- </form>
- </view>
- </zx-uni-popup>
- </view>
- </template>
- <script>
- import zxUniPopup from '@/components/zx-uni-popup/uni-popup.vue'
- export default {
- components: {
- zxUniPopup,
- },
- data() {
- return {
-
- game_list: [
- // {
- // name: "刮刮卡",
- // },
- // {
- // name: "大转盘",
- // },
- {
- name: "实体大转盘",
- }
- ],
- game_index: 2,
- game_name: "请选择小游戏类型",
- game_id: "",
- prize: [],
- coupon_title: "",
- num: "",
- coupon_id: "",
- startDate: "2020-10-01",
- endDate: "2030-10-01",
- start: "请选择开始时间",
- end: "请选择结束时间",
- act_index: 0,
- act_index2: 0,
- info: {},
- id: "",
- coupon_name: "请选择优惠劵类型",
- coupon_list: [],
- coupon_index: -1,
- content: [{
- awards: "请选择优惠劵类型",
- probability: "",
- num: "",
- assign: "",
- },
- {
- awards: "请选择优惠劵类型",
- probability: "",
- num: "",
- assign: "",
- },
- {
- awards: "请选择优惠劵类型",
- probability: "",
- num: "",
- assign: "",
- }, {
- awards: "请选择优惠劵类型",
- probability: "",
- num: "",
- assign: "",
- }, {
- awards: "请选择优惠劵类型",
- probability: "",
- num: "",
- assign: "",
- }, {
- awards: "请选择优惠劵类型",
- probability: "",
- num: "",
- assign: "",
- }, {
- awards: "请选择优惠劵类型",
- probability: "",
- num: "",
- assign: "",
- }, {
- awards: "请选择优惠劵类型",
- probability: "",
- num: "",
- assign: "",
- }, {
- awards: "请选择优惠劵类型",
- probability: "",
- num: "",
- assign: "",
- }, {
- awards: "请选择优惠劵类型",
- probability: "",
- num: "",
- assign: "",
- }, {
- awards: "请选择优惠劵类型",
- probability: "",
- num: "",
- assign: "",
- }, {
- awards: "请选择优惠劵类型",
- probability: "",
- num: "",
- assign: "",
- }, {
- awards: "请选择优惠劵类型",
- probability: "",
- num: "",
- assign: "",
- }, {
- awards: "请选择优惠劵类型",
- probability: "",
- num: "",
- assign: "",
- }, {
- awards: "请选择优惠劵类型",
- probability: "",
- num: "",
- assign: "",
- }, {
- awards: "请选择优惠劵类型",
- probability: "",
- num: "",
- assign: "",
- },
- ]
- }
- },
- onLoad(e) {
- if (e.id) {
- this.id = e.id;
- uni.setNavigationBarTitle({
- title: "编辑活动"
- })
- }
- // this.coupon();
- },
- onShow() {
- uni.$on("handleFun", res => {
- console.log(res, "res")
- this.coupon_title = res.title;
- this.coupon_id = res.coupon_id;
- this.number = res.num;
- // 清除监听
- uni.$off('handleFun');
- })
- },
- methods: {
- coupon(e) {
- this.request({
- url: "coupon/lists",
- data: {
- token: uni.getStorageSync("token"),
- page: 1,
- limit: 100,
- },
- }).then(res => {
- console.log(res, "res")
- if (res.code === '200') {
- for (let i of res.data.list) {
- i.name = i.type == 1 ? '[' + i.title + ']' + '满减劵' + ':满' + Number(i.cut_price) + '减' +
- Number(i.full_price) :
- i.type == 2 ? '[' + i.title + ']' + '折扣劵' + ':折扣' + Number(i.discount) : '[' + i
- .title + ']' + '礼品劵:' + i.gift;
- // item.name=item.type==3?'['+item.title+']'+'礼品劵'+
- }
- console.log(res.data.list, "res.data.list")
- this.coupon_list = res.data.list;
- if (this.id) {
- this.http();
- }
- }
- }).catch((res) => {});
- },
- http(e) {
- let url = "lottery/detail";
- this.request({
- url,
- data: {
- id: this.id
- },
- }).then(res => {
- console.log(res, "res")
- if (res.code === "200") {
- this.info = res.data.detail;
- this.start = res.data.detail.start_time;
- this.end = res.data.detail.end_time;
- this.game_index = res.data.detail.type == 2 ? 1 : res.data.detail.type == 3 ? 2 : 0;
- if (res.data.detail.type == 3) {
- for (let i of res.data.detail.content.data) {
- for (let j of this.coupon_list) {
- if (i.awards == j.id) {
- i.awards = j.name;
- i.id = j.id
- }
- }
- }
- this.content = res.data.detail.content.data;
- // this.content[index].awards = this.coupon_list[e.detail.value].name;
- // this.content[index].id = this.coupon_list[e.detail.value].id;
- } else {
- this.prize = res.data.detail.content;
- }
- }
- });
- },
- del() {
- uni.showModal({
- title: '提示',
- content: '是否要删除?',
- showCancel: true,
- cancelText: '取消',
- confirmText: '确定',
- success: res => {
- if (res.confirm) {
- this.request({
- url: 'lottery/del',
- data: {
- id: this.info.id,
- },
- }).then(res => {
- console.log(res, "res")
- if (res.code === 200 || res.code === "200") {
- uni.showToast({
- title: "删除成功",
- icon: "none",
- })
- setTimeout(() => {
- uni.navigateBack()
- }, 2e3)
- }
- }).catch(() => {
- uni.showToast({
- title: res.message,
- icon: "none",
- })
- });
- }
- },
- fail: () => {},
- complete: () => {}
- });
- },
- bindDateChange1(e) {
- this.act_index = e.currentTarget.dataset.index;
- this.start = e.target.value;
- },
- bindDateChange2(e) {
- this.act_index2 = e.currentTarget.dataset.index;
- this.end = e.target.value;
- },
- bindGame(e) {
- console.log(e.detail.value, "e.detail.value")
- // this.game_index = e.detail.value;
- // this.game_id = this.game_list[e.detail.value].id;
- },
- onCoupon(e) {
- var index = e.currentTarget.dataset.index;
- this.content[index].awards = this.coupon_list[e.detail.value].name;
- this.content[index].id = this.coupon_list[e.detail.value].id;
- },
- getScene(e) {
- var index = e.currentTarget.dataset.index;
- this.content[index].probability = e.detail.value
- },
- getNum(e) {
- var index = e.currentTarget.dataset.index;
- this.content[index].num = e.detail.value
- },
- getOpenid(e) {
- var index = e.currentTarget.dataset.index;
- this.content[index].assign = e.detail.value
- },
- bindCoupon() {
- uni.navigateTo({
- url: "./CouponList"
- })
- },
- sure(e) {
- if (!this.coupon_title || !e.detail.value.num || !e.detail.value.probability) {
- uni.showToast({
- title: "必选项不能为空",
- icon: 'none'
- })
- return
- }
- if (e.detail.value.probability > 100) {
- uni.showToast({
- title: "概率不能大于100",
- icon: 'none'
- })
- return
- }
- if (e.detail.value.num > Number(this.number)) {
- uni.showToast({
- title: "数量不能大于优惠劵数量",
- icon: 'none'
- })
- return
- }
- let sum = this.prize.reduce((acc, curVal) => acc + Number(curVal.probability), 0);
- if ((sum + Number(e.detail.value.probability)) > 100) {
- uni.showToast({
- title: "奖品合计概率不能超过100%",
- icon: 'none'
- })
- return
- }
- if (this.prize.length > 0) {
- let hasGoodStudentType = this.prize.some((v, i) => v.coupon_id == this.coupon_id)
- console.log(hasGoodStudentType); // true
- if (hasGoodStudentType) {
- uni.showToast({
- title: "已有此优惠劵",
- icon: 'none'
- })
- return
- }
- }
- this.prize.push({
- coupon_id: this.coupon_id,
- coupon_title: this.coupon_title,
- name: e.detail.value.name,
- num: e.detail.value.num,
- rate: e.detail.value.probability,
- })
- this.probability = "";
- this.coupon_title = "";
- this.$refs.popup.close();
- },
- open() {
- if (this.prize.length > 8) {
- uni.showToast({
- title: "奖品已超限制长度",
- icon: 'none'
- })
- return
- }
- this.$refs.popup.open();
- },
- delScene(e) {
- var index = Number(e.currentTarget.dataset.index);
- this.prize.splice(index, 1);
- },
- save(e) {
- let data = e.detail.value;
- data.type = this.game_index == 1 ? 2 : this.game_index == 2 ? 3 : 1;
- data.token = uni.getStorageSync("token");
- data.time = this.start + " - " + this.end;
- if (data.type == 3) {
- let content = [];
- for (let i of this.content) {
- content.push({
- awards: i.id,
- probability: i.probability,
- num: i.num,
- assign: i.assign
- })
- }
- data.content = JSON.stringify(content);
- } else {
- data.content = JSON.stringify(this.prize);
- }
- if (this.id) {
- data.id = this.id;
- }
- let a = ((Date.parse(new Date(this.start))) / 1000); //开始的时间戳
- let b = ((Date.parse(new Date(this.end))) / 1000); //结束的时间戳
- // console.log(isNaN(a), "aad")
- if (isNaN(a)) {
- uni.showToast({
- title: '请选择开始时间',
- icon: 'none',
- duration: 2000
- });
- return false
- }
- if (isNaN(b)) {
- uni.showToast({
- title: '请选择结束时间',
- icon: 'none',
- duration: 2000
- });
- return false
- }
- if (a > b) {
- uni.showToast({
- title: '开始时间不能大于结束时间哦',
- icon: 'none',
- duration: 2000
- });
- return false
- }
- if (this.prize.length <= 0 && this.game_index != 2) {
- uni.showToast({
- title: "请选择奖品",
- icon: 'none'
- })
- return false
- }
- if (!data.title) {
- uni.showToast({
- title: "必填项不能为空",
- icon: 'none'
- })
- return false
- }
- this.request({
- url: "lottery/save",
- data,
- }).then(res => {
- console.log(res, "res")
- if (res.code === '200') {
- console.log(res)
- uni.showToast({
- title: "提交成功",
- icon: 'none',
- duration: 1000
- })
- setTimeout(() => {
- uni.navigateBack({
- delta: 1
- })
- }, 1500)
- }
- }).catch((err) => {
- console.log(err)
- uni.showToast({
- title: err.message,
- icon: 'none',
- duration: 2000
- })
- })
- }
- }
- }
- </script>
- <style lang="scss">
- page {
- background: #F1F1F1;
- }
- .home-content {
- width: 690rpx;
- opacity: 1;
- border-radius: 14rpx;
- box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(204, 215, 230, 0.08);
- margin: 0 auto;
- position: relative;
- .home-content-top {
- width: 100%;
- opacity: 1;
- background: #ffffff;
- border-radius: 14rpx;
- box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(204, 215, 230, 0.08);
- padding: 0 24rpx;
- margin-top: 24rpx;
- }
- }
- .list-icon {
- width: 29rpx;
- height: 29rpx;
- margin-right: 6rpx;
- }
- .mar64 {
- margin-bottom: 60rpx;
- }
- .item-bg .mar64:last-child {
- margin-bottom: 0rpx;
- }
- .col-num {
- color: #007AFF;
- }
- .item_name {
- -webkit-box-flex: 0;
- -webkit-flex: none;
- flex: none;
- width: 176rpx;
- }
- .content {
- word-wrap: break-word;
- word-break: break-all;
- }
- .pdr-20 {
- padding-right: 20rpx;
- }
- .item {
- padding: 32rpx 0rpx;
- }
- .item input {
- text-align: right;
- }
- .upimg {
- width: 126rpx;
- height: 126rpx;
- }
- .add-home {
- color: #FFFFFF;
- width: 126rpx;
- height: 54rpx;
- background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
- border-radius: 8rpx;
- box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.2);
- }
- .item-bg {
- // width: 670rpx;
- /* height: 298rpx; */
- background: #f6f8fe;
- border-radius: 12rpx;
- margin: 0 auto;
- font-size: 28rpx;
- font-family: PingFang SC, PingFang SC-Regular;
- font-weight: 400;
- color: #333333;
- padding: 36rpx 32rpx;
- }
- .item-del {
- width: 40rpx;
- height: 40rpx;
- min-width: 40rpx;
- }
- .item-bg-32 {
- margin-right: 32rpx;
- }
- .mgr57 {
- margin-bottom: 57rpx;
- }
- .item-li {
- padding: 20rpx 0;
- text-align: right;
- .item_name {
- text-align: left;
- }
- }
- .games-model {
- background: #FFFFFF;
- width: 500rpx;
- padding: 0rpx 40rpx 40rpx 40rpx;
- border-radius: 12rpx;
- .title {
- text-align: center;
- padding: 20rpx 0;
- }
- .item {
- padding: 20rpx 0;
- .border-b input {
- margin-left: 10rpx;
- text-align: center;
- }
- }
- .red {
- color: red;
- }
- .btn {
- margin: 0 auto;
- color: #FFFFFF;
- width: 250rpx;
- height: 60rpx;
- background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
- border-radius: 8rpx;
- box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.2);
- margin-top: 30rpx;
- }
- }
- .model-item {
- text-align: center;
- font-size: 28rpx;
- color: #999;
- position: relative;
- padding: 10rpx 0;
- text-align: center;
- border-radius: 8rpx;
- }
- .act {
- color: #000;
- }
- .descps textarea {
- padding-top: 20rpx;
- width: 100%;
- }
- .bottom-bar {
- width: 100%;
- background: none;
- margin-top: 100rpx;
- }
- .btn1 {
- height: 98rpx;
- background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
- border-radius: 8rpx;
- box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.2);
- opacity: 1;
- font-size: 32rpx;
- color: #FFFFFF;
- margin: 0 auto;
- margin-bottom: 32rpx;
- }
- .ft32 {
- font-size: 28rpx;
- }
- </style>
|