|
@@ -0,0 +1,331 @@
|
|
|
|
+<template>
|
|
|
|
+ <view class="page-cont">
|
|
|
|
+ <view class="list">
|
|
|
|
+ <view>一等奖</view>
|
|
|
|
+ <view class="names">华为p30</view>
|
|
|
|
+ <view class="viewsDetail" @click="viewsDetail">查看详情</view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="list">
|
|
|
|
+ <view>三等奖</view>
|
|
|
|
+ <view class="names">20乐豆</view>
|
|
|
|
+ <view class="lingjiang" @click="lingjiang(0)">领奖</view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="list">
|
|
|
|
+ <view>一等奖</view>
|
|
|
|
+ <view class="names">华为p30</view>
|
|
|
|
+ <view class="lingjiang" @click="lingjiang(1)">领奖</view>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ <!-- 查看详情弹框 -->
|
|
|
|
+ <u-popup v-model="showViews" mode="center" close-icon-color="#ffffff" closeable :border-radius="30" width="500rpx" height="650rpx">
|
|
|
|
+ <view class="lottery-content">
|
|
|
|
+ <view class="lottery-title">物流信息</view>
|
|
|
|
+ <view class="lottery-form">
|
|
|
|
+ <view>
|
|
|
|
+ <view class="labes">收件人</view>
|
|
|
|
+ <view>李磊</view>
|
|
|
|
+ </view>
|
|
|
|
+ <view>
|
|
|
|
+ <view class="labes">联系电话</view>
|
|
|
|
+ <view>1379964646</view>
|
|
|
|
+ </view>
|
|
|
|
+ <view>
|
|
|
|
+ <view class="labes">收货地址</view>
|
|
|
|
+ <view>陕西省咸阳市某某街某某 某小区某某单元1100号</view>
|
|
|
|
+ </view>
|
|
|
|
+ <view>
|
|
|
|
+ <view class="labes">物流单号</view>
|
|
|
|
+ <view>
|
|
|
|
+ <!-- <text>暂未发货,如收货信息有误, 请联系13312345678</text> -->
|
|
|
|
+ <text>中国邮政(单号:16546464645)</text> <u-button @click="copyWlCode" size="mini">复制</u-button>
|
|
|
|
+ </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" height="450rpx">
|
|
|
|
+ <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" />
|
|
|
|
+ <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-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'
|
|
|
|
+export default {
|
|
|
|
+ components: {
|
|
|
|
+ Address
|
|
|
|
+ },
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ showViews: false, // 查看详情弹框
|
|
|
|
+ showAddr: false ,// 实物奖品,收货地址弹框
|
|
|
|
+ showLjLd: false, // 虚拟奖品领奖弹框
|
|
|
|
+ form: {
|
|
|
|
+ receiverName: '',
|
|
|
|
+ receiverPhone: '',
|
|
|
|
+ receiveAddress: '' // 详细地址
|
|
|
|
+ },
|
|
|
|
+ receiveAreas: '', //地址编码
|
|
|
|
+ areaName: '', //地址
|
|
|
|
+ areaInfo: {}, // 省市区
|
|
|
|
+ areaIdArr: [], // 省市区id数组
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ // 必须要在onReady生命周期,因为onLoad生命周期组件可能尚未创建完毕
|
|
|
|
+ onReady() {
|
|
|
|
+ this.$refs.uForm.setRules(this.rules);
|
|
|
|
+ },
|
|
|
|
+ onLoad(option) {
|
|
|
|
+ console.log(option,'option')
|
|
|
|
+ },
|
|
|
|
+ onUnload() {
|
|
|
|
+ this.form = {
|
|
|
|
+ receiverName: '',
|
|
|
|
+ receiverPhone: '',
|
|
|
|
+ receiveAddress: '' // 详细地址
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ // 获取用户收货地址
|
|
|
|
+ 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(){
|
|
|
|
+ this.showViews = true
|
|
|
|
+ },
|
|
|
|
+ // 领奖
|
|
|
|
+ lingjiang(type){
|
|
|
|
+ if(type){
|
|
|
|
+ this.showAddr = true
|
|
|
|
+ this.getAddress()
|
|
|
|
+ }else{
|
|
|
|
+ this.showLjLd = true
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ // 复制单号
|
|
|
|
+ copyWlCode(){
|
|
|
|
+ uni.setClipboardData({
|
|
|
|
+ data: 'hello',
|
|
|
|
+ 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
|
|
|
|
+ }
|
|
|
|
+ saveAddress(params).then(res=>{
|
|
|
|
+ if(res.status == 200) {
|
|
|
|
+ uni.showToast({
|
|
|
|
+ title: res.message,
|
|
|
|
+ icon: 'none'
|
|
|
|
+ })
|
|
|
|
+ this.showAddr = false
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</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;
|
|
|
|
+ }
|
|
|
|
+ .names{
|
|
|
|
+ width: 50%;
|
|
|
|
+ flex-grow: 1;
|
|
|
|
+ }
|
|
|
|
+ .lingjiang{
|
|
|
|
+ background-color: #ffaa00;
|
|
|
|
+ color: #FFFFFF;
|
|
|
|
+ width: 25%;
|
|
|
|
+ }
|
|
|
|
+ .viewsDetail{
|
|
|
|
+ background-color: #008273;
|
|
|
|
+ color: #FFFFFF;
|
|
|
|
+ width: 25%;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .lottery-content{
|
|
|
|
+ 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;
|
|
|
|
+ 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 50rpx 150rpx;
|
|
|
|
+ .receiveAddress{
|
|
|
|
+ width: 100%;
|
|
|
|
+ line-height: 1.5em;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ font-style: normal;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+</style>
|