<template> <view class="page-cont"> <view class="list" v-for="(item,index) in list" :key="item.id"> <view class="no">奖品{{index+1}}</view> <view class="names">{{item.prizeType == 'GOODS'?item.prizeDesc:(item.prizeDesc+'乐豆')}}</view> <view class="lingjiang" v-if="item.state == 'WAIT_RECEIVE'" @click="lingjiang(item)">领奖</view> <view class="viewsDetail" v-else @click="viewsDetail(item)">查看详情</view> </view> <view style="padding:150rpx 30rpx 0;" v-if="list.length == 0"> <u-empty text="还没有奖品记录" :icon-size="80" mode="list"></u-empty> <!-- <view style="text-align: center;"> <u-button size="mini" @click="goBack">去抽奖</u-button> </view> --> </view> <Address ref="applyAddress" @onConfirm="areaConfirm"></Address> <!-- 查看详情弹框 --> <u-popup v-model="showViews" mode="center" close-icon-color="#ffffff" closeable :border-radius="30" width="500rpx"> <view class="lottery-content"> <view class="lottery-title">物流信息</view> <view class="lottery-form"> <view> <view class="labes">收件人</view> <view>{{curRevice.receiverName}}</view> </view> <view> <view class="labes">联系电话</view> <view>{{curRevice.receiverPhone}}</view> </view> <view> <view class="labes">收货地址</view> <view style="word-break: break-all;">{{curRevice.receiveAddress}}</view> </view> <view> <view class="labes">物流单号</view> <view> <view v-if="curRevice.state == 'WAIT_SEND_EXPRESS'">暂未发货,如收货信息有误, 请联系客服电话<text class="tell" @click="callPhone">{{kfPhone}}</text></view> <view v-else> {{curRevice.expressName}} <text class="tell">(单号:{{curRevice.expressNum}})</text> <u-button @click="copyWlCode" size="mini">复制</u-button> </view> </view> </view> </view> <view @click="showViews=false" class="lottery-confrim-btn"> 确定 </view> </view> </u-popup> <!-- 乐豆领取详情弹框 --> <u-popup v-model="showLjLd" mode="center" close-icon-color="#ffffff" closeable :border-radius="30" width="500rpx"> <view class="lottery-content"> <view class="lottery-title">欢迎领取</view> <view class="lottery-msg"> 您的奖励已计入乐豆余额,感谢参与! </view> <view @click="showLjLd=false" class="lottery-confrim-btn"> 我知道了 </view> </view> </u-popup> <!-- 收货地址详情弹框 --> <u-popup v-model="showAddr" mode="center" close-icon-color="#ffffff" closeable :border-radius="30" width="80%"> <view class="lottery-content"> <view class="lottery-title">收货信息</view> <view class="lottery-u-form"> <u-form :model="form" ref="uForm" :label-width="140" :error-type="['toast']"> <u-form-item label="收货人" required prop="receiverName"> <u-input placeholder="请输入收货人姓名" :maxlength="30" v-model="form.receiverName" /> </u-form-item> <u-form-item label="收货电话" required prop="receiverPhone"> <u-input placeholder="请输入收货电话" :maxlength="11" type="number" v-model="form.receiverPhone" /> </u-form-item> <u-form-item label="省市区" required prop="receiveAreasName"> <u-input v-model="areaInfo.label" placeholder="请选择省市区" @click="openAddress" type="select" /> </u-form-item> <u-form-item label="详细地址" :border-bottom="false" required prop="receiveAddress"> <!-- <u-input type="textarea" :height="100" auto-height placeholder="请输入收货详细地址(最多100个字符)" :maxlength="100" v-model="form.receiveAddress" class="receiveAddress"/> --> <textarea :auto-height="true" placeholder="请输入收货详细地址(最多100个字符)" :maxlength="100" v-model="form.receiveAddress" class="receiveAddress"/> </u-form-item> </u-form> </view> <view @click="wlSubmit" class="lottery-confrim-btn"> 确定 </view> </view> </u-popup> </view> </template> <script> import Address from '@/components/address.vue' import {findAddressBycustomerNo, saveAddress} from '@/api/receiveAddress.js' import { findWinPrize, receive } from '@/api/luckyDraw.js' export default { components: { Address }, data() { return { kfPhone:'', // 客服电话 showViews: false, // 查看详情弹框 showAddr: false ,// 实物奖品,收货地址弹框 showLjLd: false, // 虚拟奖品领奖弹框 form: { receiverName: '', receiverPhone: '', receiveAddress: '' // 详细地址 }, receiveAreas: '', //地址编码 areaName: '', //地址 areaInfo: {}, // 省市区 areaIdArr: [], // 省市区id数组 list: [], curRevice: null, fromPage: '' } }, // 必须要在onReady生命周期,因为onLoad生命周期组件可能尚未创建完毕 onReady() { this.$refs.uForm.setRules(this.rules); }, onLoad(option) { console.log(option,'option') this.getfindWinPrize() this.kfPhone = this.$store.state.vuex_kfMobile this.fromPage = option.fromPage // 开启分享 uni.showShareMenu({ withShareTicket: true, menus: ['shareAppMessage', 'shareTimeline'] }) }, onUnload() { this.form = { receiverName: '', receiverPhone: '', receiveAddress: '' // 详细地址 } }, methods: { goBack(){ if(this.fromPage == 'usercenter'){ uni.redirectTo({ url: '/pagesA/luckDraw/luckDraw' }) }else{ uni.navigateBack() } }, // 电话客服 callPhone () { uni.makePhoneCall({ phoneNumber: this.kfPhone }) }, getfindWinPrize(){ uni.showLoading({ mask: true, title: '正在加载...' }) findWinPrize().then(res => { if(res.status == 200){ this.list = res.data } uni.hideLoading() }) }, // 获取用户收货地址 getAddress() { findAddressBycustomerNo({}).then(res => { console.log(res) if (res.status == 200&&res.data.length) { this.form = res.data[0] if (this.form.receiveAreasName) { this.areaIdArr = this.form.receiveAreas.split(',') this.areaInfo.label = this.form.receiveAreasName.replace(/\,/g,'-') } this.$u.vuex("vuex_OrderAddress",this.form) } }) }, // 选择省区市 areaConfirm(e) { console.log('已选择的省市区', e) this.areaInfo = e this.areaIdArr = [ e.provinceCode, e.cityCode, e.areaCode ] }, openAddress(){ // 省市区回显参数为省市区id数组 this.$refs.applyAddress.open(this.areaIdArr) }, // 去抽奖 toLuckDraw() { uni.navigateBack() }, // 查看详情 viewsDetail(item){ this.curRevice = item if(item.prizeType == 'GOODS'){ this.showViews = true }else{ this.showLjLd = true } }, // 领奖 lingjiang(item){ this.curRevice = item if(item.prizeType == 'GOODS'){ this.showAddr = true this.getAddress() }else{ this.saveReceive() } }, // 复制单号 copyWlCode(){ uni.setClipboardData({ data: this.curRevice.expressNum, success: function () { console.log('success'); } }); }, // 保存物流信息 wlSubmit(){ this.$refs.uForm.validate(valid => { if (valid) { console.log('验证通过'); if (this.form.receiverName ==='') { uni.showToast({ title: '请输入收货人姓名', icon: 'none' }) return false } if (this.form.receiverPhone ==='') { uni.showToast({ title: '请输入收货电话', icon: 'none' }) return false } // 省市区 if(this.areaIdArr.length == 0){ uni.showToast({icon: 'none',title: '请选择省市区'}) return } if (this.form.receiveAddress ==='') { uni.showToast({ title: '请输入详细地址', icon: 'none' }) return false } let params = { receiverName: this.form.receiverName, receiverPhone: this.form.receiverPhone, receiveAreasName: this.areaInfo.label.replace(/\-/g,','), // 地址名称 receiveAreas: this.areaIdArr.join(','), receiveAddress: this.form.receiveAddress // 详细地址 } if(this.form.id) { params.id = this.form.id } // 更新收货地址 this.saveReceive(params) // 保存我的收货地址 // saveAddress(params).then(res=>{ // if(res.status == 200) { // // 保存领奖收货信息 // this.saveReceive(params) // } // }) } }); }, // 领奖 saveReceive(params){ let item = this.curRevice let isGoods = item.prizeType == 'GOODS' let data = { "luckyDrawWinNo": this.curRevice.luckyDrawWinNo } // 实物,发货地址 if(isGoods){ data.receiverName = params.receiverName data.receiverPhone = params.receiverPhone data.receiveAddress = params.receiveAreasName +' '+ params.receiveAddress } receive(data).then(res => { if(res.status == 200){ uni.showToast({ title: res.message, icon: 'none' }) if(isGoods){ this.showAddr = false }else{ this.showLjLd = true } this.list = [] this.getfindWinPrize() } }) } } } </script> <style lang="less"> .page-cont{ width: 100%; padding: 20rpx; .list{ display: flex; align-items: center; > view{ padding: 15rpx; color: #FFFFFF; background-color: #01c9b2; border-right: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF; text-align: center; } .no{ width: 150rpx; } .names{ width: 50%; flex-grow: 1; } .lingjiang{ background-color: #ffaa00; color: #FFFFFF; width: 25%; } .viewsDetail{ background-color: #008273; color: #FFFFFF; width: 25%; } } .tell{ color: #0A98D5; } .lottery-content{ height: 100%; background: url(../../static/lottery_winbg1.png) no-repeat center top; background-size: 100% auto; .lottery-confrim-btn{ width: 100%; display: flex; justify-content: center; font-size: 32rpx; border-top: 1px solid #eee; padding: 30rpx 0; color: #21d5c0; } .lottery-title{ padding: 20rpx 30rpx; text-align: center; color: #FFFFFF; font-size: 36rpx; font-weight: bold; } .lottery-form{ padding: 80rpx 30rpx 20rpx; > view{ display: flex; padding: 10rpx; .labes{ width: 150rpx; } >view{ &:last-child{ flex-grow: 1; width: 80%; color: #666; display: flex; align-items: center; text{ word-break: break-all; } } } } } .lottery-msg{ padding: 70rpx 60rpx; text-align: center; line-height: 42rpx; } .lottery-u-form{ padding: 50rpx; .receiveAddress{ width: 100%; line-height: 1.5em; box-sizing: border-box; font-style: normal; } } } } </style>