qianwanlai/lailab-toolbox-uniapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v2.2.2 2022-10-25

Browse Source 
1.实现抽奖页面创建加入界面

2.实现抽奖页面创建后台逻辑
This commit is contained in:
qianwanlai
2022-10-25 22:01:26 +08:00
parent b2dd6e7725
commit 527da5d671
3 changed files with 177 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/subpages/choujiangzhushou/choujiangzhushou.vue
+129 -51
View File
@@ -3,25 +3,25 @@
<!-- 奖品图片 -->
<view class="gift-show">
<image class="gift-img" :src="picUrl" mode="aspectFill"></image>
<button class="btn-switch">换</button>
<button class="btn-switch" @tap="changeImage()">换</button>
</view>
<!-- 奖品名称 -->
<view class="item gift-name">
<text class="item-tip name-tip">奖品名称</text>
<input class="item-input name" type="text" placeholder="请输入名称" />
<input class="item-input name" @input="bindAwardName" type="text" placeholder="请输入名称" />
</view>
<!-- 奖品数量 -->
<view class="item gift-count">
<text class="item-tip count-tip">奖品数量</text>
<view class="item-input">
<input class=" count" type="number" maxlength="2" placeholder="数量" />
<input class=" count" @input="bindAwardNum" type="number" maxlength="2" placeholder="数量" />
<text class="item-tip count-unit">个</text>
</view>
</view>
<!-- 奖品说明 -->
<view class="item gift-info">
<text class="item-tip info-tip">奖品说明</text>
<input class="item-input" type="text" placeholder="请输入奖品说明" />
<input class="item-input" @input="bindAwardDetail" type="text" placeholder="请输入奖品说明" />
</view>
<!-- 开奖方式 -->
<view class="item open-type">
@@ -36,9 +36,9 @@
<!-- 开奖设置 -->
<view class="item open-setting" v-if="typeIndex!=2">
<block v-if="typeIndex==0">
<text class="item-tip info-tip">开奖时间</text>
<text class="item-etip info-tip">开奖时间</text>
<view class="uni-list picker-date">
<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDataChange">
<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
<view class="uni-input">{{date}}</view>
</picker>
</view>
@@ -52,7 +52,7 @@
<!-- 通过人数开奖 -->
<text class="item-tip count-tip">开奖人数</text>
<view class="item-input">
<input class=" count" type="number" maxlength="2" placeholder="数量" />
<input class=" count" @input="bindNeedUsers" type="number" maxlength="2" placeholder="数量" />
<text class="item-tip count-unit">个</text>
</view>
</block>
@@ -66,52 +66,35 @@
</view>
</view>
<!-- 发起抽奖 -->
<button class="gift-start">发起抽奖</button>
<button class="gift-start" @tap="start()">发起抽奖</button>
<!-- 分享抽奖 -->
<button class="gift-share" v-if="isCreate" open-type="share">分享抽奖</button>
</view>
</template>
<script>
const app = getApp();
export default {
data() {
const currentDate = this.getDate({
format: true
})
});
const currenTime = this.getTime();
return {
picUrl: 'https://www.lailab.cn/miniprogram/image/other/image_tool_bayinhe.jpg',
picUrl: app.globalData.website + '/image/other/image_tool_choujiangzhushou.jpg',
sharePicUrl: app.globalData.website + '/image/share/image_tool_choujiangzhushou.jpg',
awardName: '',
awardNum: 1,
awardDetail: '',
openType: ['按时间自动开奖', '按人数自动开奖', '发起者手动开奖'],
typeIndex: 0,
date: currentDate,
time: currenTime,
isCreate: true,
giftList: [
{
name: '我的抽奖1',
open: true
},
{
name: '我的抽奖2',
open: false
},
{
name: '我的抽奖3',
open: true
},
{
name: '我的抽奖4',
open: false
},
{
name: '我的抽奖5',
open: true
},
{
name: '我的抽奖6',
open: false
},
]
openNeedUsers: 1,
awardId: '',
isCreate: false,
giftList: []
}
},
computed: {
@@ -123,15 +106,96 @@
}
},
methods: {
bindOpentypeChange: function(e) {
this.typeIndex = e.detail.value;
changeImage() {
const that = this;
wx.chooseImage({
count: 1, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
sourceType: ['album'], //从相册选择
success(res) {
that.picUrl = res.tempFilePaths[0];
}
})
},
bindDataChange: function(e) {
// 获取奖品名称
bindAwardName: function(e) {
this.awardName = e.detail.value;
},
// 获取奖品数量
bindAwardNum: function(e) {
this.awardNum = e.detail.value;
},
// 获取奖品详情
bindAwardDetail: function(e) {
this.awardDetail = e.detail.value;
},
// 绑定抽奖方式
bindOpentypeChange: function(e) {
this.typeIndex = Number(e.detail.value);
},
// 绑定日期选择
bindDateChange: function(e) {
this.date = e.detail.value;
},
// 绑定时间选择
bindTimeChange: function(e) {
this.time = e.detail.value;
},
// 绑定所需用户数量
bindNeedUsers: function(e) {
this.openNeedUsers = Number(e.detail.value);
},
// 发起抽奖
start() {
const that = this;
const openDateTime = this.date + ' ' + this.time;
const startDateTime = this.getDate() + ' ' + this.getTime();
let rst = {
openId: app.globalData.openId,
awardImage: this.picUrl,
awardName: this.awardName,
awardNum: this.awardNum,
awardDetail: this.awardDetail,
openType: this.typeIndex,
startDateTime: startDateTime,
openDateTime: openDateTime,
openNeedUsers: this.openNeedUsers,
};
uni.showLoading({
title: '抽奖创建中...',
icon: 'loading'
})
uni.request({
url: app.globalData.website + '/tools/choujiangzhushou/addAwardInfo.php',
method: 'POST',
data: rst,
success(res) {
if (res.data.err == 1) {
uni.hideLoading();
uni.showToast({
title: '抽奖创建成功',
icon: 'success'
})
that.awardId = res.data.result[0].id;
if (that.awardId != '') {
that.isCreate = true;
}
} else if (res.data.err == 0) {
uni.hideLoading();
uni.showToast({
title: '抽奖创建失败',
icon: 'error'
})
}
},
fail(res) {
uni.showModal({
title: '错误',
content: res.errMsg
})
}
})
},
getDate(type) {
const date = new Date();
let year = date.getFullYear();
@@ -157,10 +221,18 @@
}
},
onShareAppMessage() {
return {
title: '参与抽奖',
path: '/pages/subpages/choujiangzhushou/jiaruchoujiang',
imageUrl: this.picUrl
if (this.isCreate) {
return {
title: '参与 ' + this.awardName + 'x' + this.awardNum + ' 抽奖',
path: `/pages/subpages/choujiangzhushou/jiaruchoujiang?awardId=${this.awardId}`,
imageUrl: (this.picUrl == (app.globalData.website + '/image/other/image_tool_choujiangzhushou.jpg') ?
this.sharePicUrl : this.picUrl)
}
} else {
uni.showToast({
title: '创建失败',
icon: 'error'
})
}
}
}
@@ -193,12 +265,14 @@
/* 更换图片 */
.btn-switch {
height: 40px;
width: 40px;
border: 0;
border-radius: 20px;
height: 50px;
width: 50px;
background-color: pink;
color: white;
border-radius: 10px;
line-height: 40px;
text-align: center;
background-color: #f6f7f9;
color: black;
position: absolute;
top: 20px;
right: 20px;
@@ -269,7 +343,7 @@
.picker-time {
margin-right: 10px;
}
/* 发起抽奖 */
/* 分享抽奖 */
.gift-start,
@@ -283,10 +357,12 @@
font-weight: bold;
box-shadow: 0 0 10px orangered;
}
.gift-share {
background-color: dodgerblue;
box-shadow: 0 0 10px dodgerblue;
}
/* 抽奖历史 */
.gift-history {
max-height: 150px;
@@ -295,12 +371,14 @@
border-radius: 20px;
/* padding: 0 10px 0 10px; */
}
.history-tip {
display: block;
width: 100%;
padding: 10px 0;
border-bottom:3px solid white ;
border-bottom: 3px solid white;
}
.item-history {
margin: 0;
padding: 0;
pages/subpages/choujiangzhushou/jiaruchoujiang.vue
+41 -5
View File
@@ -2,9 +2,9 @@
<view class="container">
<!-- 奖品展示 -->
<view class="gift-show">
<image class="gift-img" :src="picUrl"></image>
<text class="gift-name">奖品:精美老八x8</text>
<text class="gift-open">10月23日 11:00 自动开奖</text>
<image class="gift-img" :src="picUrl" mode="aspectFill"></image>
<text class="gift-name">奖品:{{awardName}}x{{awardNum}}</text>
<text class="gift-open">{{openType==0?openDateTime + ' ':(openType==1?'满' + openNeedUsers + '人':'')}}自动开奖</text>
</view>
<!-- 操作视图 -->
<view class="action-view">
@@ -26,12 +26,48 @@
</template>
<script>
const app = getApp();
export default {
data() {
return {
picUrl: 'https://www.lailab.cn/miniprogram/image/other/image_tool_bayinhe.jpg'
picUrl: 'https://www.lailab.cn/miniprogram/image/other/image_tool_bayinhe.jpg',
awardName: 'test',
awardNum: 100,
openType: 0,
openDateTime: '2000-01-01 00:00',
}
},
onLoad(option) {
// console.log(option);
// uni.showModal({
// title: "欢迎加入",
// content: "id为"+option.awardId,
// })
const that = this;
uni.request({
url: app.globalData.website + '/tools/choujiangzhushou/getAwardInfo.php',
method: 'POST',
data: {
awardId: option.awardId
},
success(res) {
if(res.data.result.length > 0){
const rst = res.data.result[0];
that.picUrl = rst.awardImage;
that.awardName = rst.awardName;
that.awardNum = rst.awardNum;
that.openDateTime = rst.openDateTime;
that.openType = rst.openType;
that.openNeedUsers = rst.openNeedUsers;
}else {
uni.showToast({
title:'加入失败',
icon: 'error'
})
}
}
})
},
methods: {
},
@@ -60,7 +96,7 @@
/* 奖品图片展示 */
.gift-img {
width: 100%;
height: 400px;
height: 350px;
}
/* 奖品名称 */