liangxin/xdd-uniapp-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat：抽奖2.0（查漏补缺）

Browse Source
This commit is contained in:
LinCyJang
2026-04-30 02:04:25 +08:00
parent 6cb403c5d5
commit c3c0483625
10 changed files with 515 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pkg-video/views/county-claim-address.vue
+92 -68
View File
@@ -1,9 +1,9 @@
<template>
<view class="claim-page">
<view class="custom-header" :style="{ paddingTop: `${statusBarHeight}px` }">
<!-- <view class="custom-header" :style="{ paddingTop: `${statusBarHeight}px` }">
<view class="header-inner">
<view class="header-back" @click="goBack">
<text class="header-back-icon">‹</text>
<u-icon name="arrow-left" size="24" color="#333" class="header-back-icon"></u-icon>
</view>
<view class="header-title">填写收货地址</view>
<view class="header-right">
@@ -11,25 +11,27 @@
<view class="ring"></view>
</view>
</view>
</view>
</view> -->
<scroll-view class="page-body" scroll-y :style="{ paddingTop: `calc(${statusBarHeight}px + 88rpx)` }">
<view class="section-title">奖品信息</view>
<scroll-view class="page-body" scroll-y >
<view class="card prize-card">
<view class="prize-image-wrap">
<image class="prize-image" :src="prizeImage" mode="aspectFill" />
</view>
<view class="prize-info">
<view class="prize-name">{{ form.prizeName || '神秘奖品' }}</view>
<view class="prize-desc">颜色随机</view>
<view class="prize-code">抽奖码：{{ form.ticketCode || '--' }}</view>
<view class="section-title">奖品信息</view>
<view class="prize-content">
<view class="prize-image-wrap">
<image class="prize-image" :src="prizeImage" mode="aspectFill" />
</view>
<view class="prize-info">
<view class="prize-name">{{ form.prizeName || '神秘奖品' }}</view>
<view class="prize-desc">颜色随机</view>
<view class="prize-code">抽奖码：{{ form.ticketCode || '--' }}</view>
</view>
</view>
</view>
<view class="card form-card">
<view class="form-row">
<text class="label">收货人</text>
<input v-model="form.realName" class="input" placeholder="张三" placeholder-style="color:#999;" />
<input v-model="form.realName" class="input" placeholder="请填写收货人" placeholder-style="color:#b2b2b2;" />
</view>
<view class="form-row">
<text class="label">手机号码</text>
@@ -38,8 +40,8 @@
class="input"
type="number"
maxlength="11"
placeholder="12345678910"
placeholder-style="color:#999;"
placeholder="请填写收货手机号"
placeholder-style="color:#b2b2b2;"
/>
</view>
<view class="form-row">
@@ -53,12 +55,12 @@
@callback="onCityChange"
/>
</view>
<text class="iconfont icon-dizhi locate-icon" @click="getCurAddressFn"></text>
<image class="locate-icon" :src="`${webUrl}/home/dingwei.png`" mode="aspectFit" @click="getCurAddressFn"></image>
</view>
</view>
<view class="form-row no-border">
<text class="label">详细地址</text>
<input v-model="form.detail" class="input" placeholder="请填写具体地址" placeholder-style="color:#999;" />
<input v-model="form.detail" class="input" placeholder="请填写具体地址" placeholder-style="color:#b2b2b2;" />
</view>
<view class="analysis-box">
@@ -87,7 +89,7 @@
<view class="popup-panel auth-panel" @click.stop>
<view class="popup-close" @click="closePopup">×</view>
<view class="popup-icon-wrap">
<text class="popup-icon">🪪</text>
<image class="popup-realname-icon" :src="webUrl + '/home/shiming.png'" mode="aspectFit" />
</view>
<view class="popup-title">实名认证</view>
<view class="popup-desc">根据平台活动规则，领取电子数码产品需要进行实名认证</view>
@@ -101,7 +103,7 @@
<view class="popup-panel success-panel" @click.stop>
<view class="popup-close" @click="closePopup">×</view>
<view class="popup-icon-wrap">
<text class="popup-icon">🎉</text>
<image class="popup-success-icon" :src="webUrl + '/home/qingzhu.png'" mode="aspectFit" />
</view>
<view class="popup-title">提交成功</view>
<view class="popup-desc">奖品将在7个工作日内寄出</view>
@@ -125,6 +127,7 @@ export default {
components: { CitySelect },
data() {
return {
webUrl: this.$VUE_APP_RESOURCES_URL,
statusBarHeight: 20,
district: [],
addressText: '',
@@ -139,12 +142,13 @@ export default {
prizeName: '',
prizeType: '',
prizeTypeName: '',
prizeImage: '',
ticketCode: '',
realName: '',
phone: '',
detail: ''
},
showRealnamePopup: true,
showRealnamePopup: false,
showSubmitSuccessPopup: false,
userInfo: {},
realnameStatus: 0,
@@ -154,7 +158,7 @@ export default {
},
computed: {
prizeImage() {
return 'https://img2.baidu.com/it/u=1255257059,3076495012&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800'
return this.form.prizeImage || ''
}
},
onLoad(options) {
@@ -163,14 +167,17 @@ export default {
this.form.prizeName = decodeURIComponent(options.prizeName || '')
this.form.prizeType = decodeURIComponent(options.prizeType || '')
this.form.prizeTypeName = decodeURIComponent(options.prizeTypeName || '')
this.form.prizeImage = decodeURIComponent(options.prizeImage || '')
this.form.ticketCode = decodeURIComponent(options.ticketCode || '')
this.getCityList()
this.fetchRealnameStatus()
},
onShow() {
const done = uni.getStorageSync('countyClaimAuthDone')
if (done && this.waitSubmitAfterRealname) {
const needAutoSubmit = uni.getStorageSync('countyClaimNeedAutoSubmit')
if (done && (this.waitSubmitAfterRealname || needAutoSubmit)) {
uni.removeStorageSync('countyClaimAuthDone')
uni.removeStorageSync('countyClaimNeedAutoSubmit')
this.fetchRealnameStatus().then(() => {
this.submitPhysicalClaim()
})
@@ -406,7 +413,7 @@ export default {
<style scoped lang="less">
.claim-page {
min-height: 100vh;
background: #f5f6f8;
background: #F0F0F0;
}
.custom-header {
@@ -415,7 +422,6 @@ export default {
left: 0;
width: 100%;
z-index: 20;
background: #fff;
}
.header-inner {
@@ -480,9 +486,9 @@ export default {
}
.section-title {
color: #999;
font-size: 26rpx;
margin: 10rpx 4rpx 16rpx;
color: #9b9b9b;
font-size: 28rpx;
margin-bottom: 18rpx;
}
.card {
@@ -492,14 +498,17 @@ export default {
}
.prize-card {
display: flex;
align-items: center;
padding: 24rpx;
}
.prize-content {
display: flex;
align-items: center;
}
.prize-image-wrap {
width: 140rpx;
height: 140rpx;
width: 182rpx;
height: 182rpx;
border-radius: 16rpx;
border: 2rpx solid #f0f0f0;
margin-right: 24rpx;
@@ -520,28 +529,28 @@ export default {
}
.prize-name {
font-size: 32rpx;
font-size: 30rpx;
font-weight: 700;
color: #333;
color: #2f2f2f;
margin-bottom: 12rpx;
}
.prize-desc,
.prize-code {
font-size: 24rpx;
color: #999;
margin-top: 6rpx;
font-size: 28rpx;
color: #9c9c9c;
margin-top: 8rpx;
}
.form-card {
padding: 10rpx 24rpx 24rpx;
padding: 0 24rpx 24rpx;
}
.form-row {
min-height: 100rpx;
min-height: 92rpx;
display: flex;
align-items: center;
border-bottom: 2rpx dashed #eee;
border-bottom: 2rpx dashed #e5e5e5;
}
.form-row.no-border {
@@ -549,9 +558,10 @@ export default {
}
.label {
width: 150rpx;
color: #333;
width: 180rpx;
color: #262626;
font-size: 28rpx;
font-weight: 600;
}
.input {
@@ -568,7 +578,7 @@ export default {
.city-select {
flex: 1;
color: #999;
color: #b2b2b2;
font-size: 28rpx;
}
@@ -577,23 +587,24 @@ export default {
}
.locate-icon {
color: #666;
font-size: 36rpx;
width: 42rpx;
height: 42rpx;
margin-left: 20rpx;
flex-shrink: 0;
}
.analysis-box {
background: #f8f8f8;
border-radius: 16rpx;
padding: 20rpx;
margin-top: 10rpx;
padding: 20rpx 20rpx 16rpx;
margin-top: 20rpx;
}
.analysis-textarea {
width: 100%;
height: 100rpx;
height: 110rpx;
color: #333;
font-size: 26rpx;
font-size: 30rpx;
}
.analysis-actions {
@@ -612,7 +623,7 @@ export default {
.btn-clear {
color: #BD3124;
border: 2rpx solid #BD3124;
padding: 6rpx 28rpx;
padding: 6rpx 32rpx;
margin-right: 20rpx;
background: transparent;
}
@@ -621,7 +632,7 @@ export default {
color: #fff;
background: #BD3124;
border: 2rpx solid #BD3124;
padding: 6rpx 30rpx;
padding: 6rpx 32rpx;
}
.btn-recognize.disabled {
@@ -629,8 +640,8 @@ export default {
}
.tips {
color: #666;
font-size: 22rpx;
color: #2f2f2f;
font-size: 24rpx;
line-height: 1.5;
margin: 20rpx 10rpx;
}
@@ -640,19 +651,19 @@ export default {
left: 0;
right: 0;
bottom: 0;
background: #f5f6f8;
padding: 20rpx 40rpx calc(20rpx + env(safe-area-inset-bottom));
padding: 24rpx 40rpx calc(30rpx + env(safe-area-inset-bottom));
}
.submit-btn {
height: 90rpx;
border-radius: 45rpx;
height: 92rpx;
border-radius: 46rpx;
background: #BD3124;
color: #fff;
text-align: center;
line-height: 90rpx;
font-size: 32rpx;
font-weight: 500;
line-height: 92rpx;
font-size: 40rpx;
font-weight: 700;
letter-spacing: 18rpx;
}
.popup-mask {
@@ -667,26 +678,28 @@ export default {
}
.popup-panel {
width: 100%;
width: 540rpx;
height: 550rpx;
background: #fff;
border-radius: 24rpx;
padding: 40rpx 32rpx 32rpx;
padding: 40rpx 32rpx;
position: relative;
box-sizing: border-box;
}
.popup-title {
text-align: center;
color: #222;
font-size: 34rpx;
color: #333;
font-size: 50rpx;
font-weight: 700;
}
.popup-desc {
color: #666;
font-size: 26rpx;
font-size: 28rpx;
line-height: 1.6;
text-align: center;
margin-top: 14rpx;
margin-top: 30rpx;
}
.popup-close {
@@ -695,12 +708,13 @@ export default {
top: 16rpx;
width: 44rpx;
height: 44rpx;
border: 2rpx solid #111;
border: 4rpx solid #333;
border-radius: 50%;
font-size: 32rpx;
line-height: 38rpx;
text-align: center;
color: #111;
color: #333;
font-weight: 700;
}
.popup-icon-wrap {
@@ -712,11 +726,21 @@ export default {
font-size: 54rpx;
}
.popup-realname-icon {
width: 92rpx;
height: 92rpx;
}
.popup-success-icon {
width: 92rpx;
height: 92rpx;
}
.popup-actions {
display: flex;
align-items: center;
justify-content: center;
margin-top: 30rpx;
margin-top: 120rpx;
}
.popup-btn {