Pārlūkot izejas kodu

抽奖页面制作

lilei 4 gadi atpakaļ
vecāks
revīzija
ee903ce6c9
3 mainītis faili ar 67 papildinājumiem un 5 dzēšanām
  1. 1 1
      pagesA/luckDraw/myJp.vue
  2. 66 4
      pagesA/taskList/taskList.vue
  3. BIN
      static/tdsm.jpg

+ 1 - 1
pagesA/luckDraw/myJp.vue

@@ -77,7 +77,7 @@
 					 		<Address ref="applyAddress" @onConfirm="areaConfirm"></Address>
 					 	</u-form-item>
 					 	<u-form-item label="详细地址" required prop="receiveAddress">
-					 		<u-input type="textarea" :height="150" auto-height placeholder="请输入收货详细地址(最多100个字符)" :maxlength="100" v-model="form.receiveAddress" class="receiveAddress"/>
+					 		<u-input type="textarea" :height="100" auto-height placeholder="请输入收货详细地址(最多100个字符)" :maxlength="100" v-model="form.receiveAddress" class="receiveAddress"/>
 					 	</u-form-item>
 					 </u-form>
 				</view>

+ 66 - 4
pagesA/taskList/taskList.vue

@@ -1,6 +1,6 @@
 <template>
 	<view class="content">
-		<view class="task-list" v-for="(item,index) in 3" :key="index">
+		<view class="task-list" v-for="(item,index) in 4" :key="index">
 			<view class="task-l">
 				<u-image width="80rpx" height="80rpx" :src="`/static/taskIcon${index+1}.png`"></u-image>
 				<view class="task-l-info">
@@ -10,9 +10,21 @@
 			</view>
 			<view class="task-r">
 				<u-button size="medium" v-if="index==0" :custom-style="{padding:'6px 10px',width:'100%',background:'#989898',color:'#ffffff'}">已完成</u-button>
-				<u-button size="medium" v-else :custom-style="{padding:'6px 10px',width:'100%',background:'#02c9b2',color:'#ffffff'}">立即前往</u-button>
+				<u-button size="medium" v-else-if="index==1" open-type="share" :custom-style="{padding:'6px 10px',width:'100%',background:'#02c9b2',color:'#ffffff'}">立即分享</u-button>
+				<u-button size="medium" v-else @click="showYdao" :custom-style="{padding:'6px 10px',width:'100%',background:'#02c9b2',color:'#ffffff'}">立即前往</u-button>
 			</view>
 		</view>
+		
+		<u-popup v-model="showYd" mode="center" close-icon-color="#ffffff" closeable :border-radius="30" width="500rpx" height="550rpx">
+			<view class="lottery-content">
+				<view class="lottery-title">
+					<image src="/static/tdsm.jpg"></image>
+				</view>
+				<view @click="toViewZn" class="lottery-confrim-btn">
+					查看使用指南
+				</view>
+			</view>
+		</u-popup>
 	</view>
 </template>
 
@@ -20,11 +32,31 @@
 	export default {
 		data() {
 			return {
-				
+				showYd: false
 			}
 		},
 		methods: {
-			
+			showYdao(){
+				this.showYd = true
+			},
+			toViewZn(){
+				uni.redirectTo({
+					url: '/pages/userCenter/zhinan'
+				})
+			}
+		},
+		onShareAppMessage() {
+			return {
+			      title: '[乐色管家]年末活动来袭,幸福大转盘, 精彩好礼等你来抽!',
+			      path: '/pagesA/luckDraw/luckDraw',
+				  imageUrl:'/static/zp1.png'
+			    }
+		},
+		onShareTimeline() {
+			return {
+				title: '[乐色管家]年末活动来袭,幸福大转盘, 精彩好礼等你来抽!',
+				imageUrl:'/static/zp1.png'
+			}
 		}
 	}
 </script>
@@ -33,6 +65,36 @@
 	.content{
 		width: 100%;
 		padding: 0;
+		// 弹框提示
+		.lottery-content{
+			display: flex;
+			justify-content: center;
+			height: 100%;
+			position: relative;
+			background: url(../../static/lottery_winbg1.png) no-repeat center top;
+			background-size: 100% auto;
+			.lottery-confrim-btn{
+				width: 100%;
+				display: flex;
+				justify-content: center;
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				color: #21d5c0;
+				font-size: 32rpx;
+				border-top: 1px solid #eee;
+				padding: 30rpx 0;
+			}
+			.lottery-title{
+				padding: 100rpx 50rpx;
+				display: flex;
+				text-align: center;
+				image{
+					width: 450rpx;
+					height: 320rpx;
+				}
+			}
+		}
 	}
 	.task-list{
 		display: flex;

BIN
static/tdsm.jpg