123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407 |
- <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>
|