250 lines
7.7 KiB
Vue
250 lines
7.7 KiB
Vue
<template>
|
||
<view class="content">
|
||
|
||
<image src="" style="width: 100%; height: 100%; background-color: bisque; position: absolute;" mode=""></image>
|
||
|
||
<view class="center" @click="openReceivePop"
|
||
style="width: 386rpx; height: 102rpx; background-color: #0877FF; border-radius: 16rpx; position: absolute; bottom: 200rpx;">
|
||
<text style="font-size: 35rpx; color: white;">免费领取</text>
|
||
</view>
|
||
|
||
<view class="center" @click="openRecordPop"
|
||
style="width: 386rpx; height: 80rpx; border-radius: 16rpx; position: absolute; bottom: 100rpx;">
|
||
<text style="font-size: 30rpx; color: black;">领取记录</text>
|
||
</view>
|
||
|
||
|
||
<!-- 领奖弹窗 -->
|
||
<uni-popup ref="receivePop" type="center">
|
||
<view class="column"
|
||
style="width: 600rpx; height: 1250rpx; background-color: #F5F5F5; border-radius: 16rpx; align-items: center; font-size: 25rpx;">
|
||
|
||
<text style="font-size: 35rpx; font-weight: 600; color: black; margin-top: 40rpx;">恭喜您获得赠礼</text>
|
||
|
||
<text style="font-size: 25rpx; color: black; margin-top: 10rpx;">填写地址和产品信息，送货上门</text>
|
||
|
||
<view class="column"
|
||
style="width: 550rpx; background-color: white; align-items: center;margin-top: 20rpx;border-radius: 16rpx; padding-bottom: 20rpx;">
|
||
|
||
<text style="font-size: 25rpx; color: black; margin-top: 10rpx;">—— 收货地址填写 ——</text>
|
||
|
||
<view class="row" style="width: 100%; justify-content: center; margin-top: 20rpx;">
|
||
<text style="margin-left: 60rpx;">姓名</text>
|
||
<input v-model="name" type="text"
|
||
style="border-bottom: 0.86px solid #000; margin-left: 50rpx; width: 350rpx;" />
|
||
</view>
|
||
|
||
<view class="row" style="width: 100%; justify-content: center; margin-top: 20rpx;">
|
||
<text>联系方式</text>
|
||
<input v-model="phone" type="text"
|
||
style="border-bottom: 0.86px solid #000; margin-left: 50rpx; width: 350rpx;" />
|
||
</view>
|
||
|
||
<view class="row" style="width: 100%; justify-content: center; margin-top: 20rpx;">
|
||
<text>工作单位</text>
|
||
<input v-model="workUnit" type="text"
|
||
style="border-bottom: 0.86px solid #000; margin-left: 50rpx; width: 350rpx;" />
|
||
</view>
|
||
|
||
<view class="row" style="justify-content: center; margin-top: 20rpx;">
|
||
<text style="margin-top: 20rpx;">收货地址</text>
|
||
<textarea v-model="address" placeholder="" :auto-height="false" :maxlength="-1"
|
||
style="height: 50px;border-bottom: 0.86px solid #000; width: 350rpx;margin-left: 50rpx;" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="column"
|
||
style="width: 550rpx; background-color: white; align-items: center;margin-top: 20rpx;border-radius: 16rpx; padding-bottom: 20rpx;">
|
||
|
||
<text style="font-size: 25rpx; color: black; margin-top: 40rpx;">—— 产品信息填写 ——</text>
|
||
|
||
<view class="row" style="width: 100%; justify-content: center; margin-top: 20rpx;">
|
||
<text style="margin-left: 60rpx;">型号</text>
|
||
<input v-model="model" type="text"
|
||
style="border-bottom: 0.86px solid #000; margin-left: 50rpx; width: 350rpx;" />
|
||
</view>
|
||
|
||
<view class="row" style="width: 100%; justify-content: center; margin-top: 20rpx;">
|
||
<text>出品编号</text>
|
||
<input v-model="number" type="text"
|
||
style="border-bottom: 0.86px solid #000; margin-left: 50rpx; width: 350rpx;" />
|
||
</view>
|
||
|
||
<view class="row" style="width: 100%; justify-content: center; margin-top: 20rpx;">
|
||
<text>出品年月</text>
|
||
<input v-model="createTime" type="text"
|
||
style="border-bottom: 0.86px solid #000; margin-left: 50rpx; width: 350rpx;" />
|
||
</view>
|
||
|
||
<view class="" style="width: 100%; margin-top: 40rpx;">
|
||
<view class="center" @click="seleImg"
|
||
style="width: 150rpx; height:150rpx; background-color: gainsboro; margin-left: 30rpx; position: relative;">
|
||
|
||
<text style="position: absolute;">+</text>
|
||
|
||
<image style="position: absolute;" v-if="imagePath" :src="imagePath" mode="aspectFit">
|
||
</image>
|
||
|
||
</view>
|
||
</view>
|
||
|
||
<text style="font-size: 22rpx; margin-top: 20rpx;width: 90%;">拍摄并上传清晰的产品铭牌信息用于辅助审核，通过后立即发货</text>
|
||
</view>
|
||
|
||
<view class="center"
|
||
style="width: 356rpx; height: 100rpx; background-color: #0877FF; margin-top: 40rpx; border-radius: 16rpx;">
|
||
<text style="font-size: 30rpx; color: white;">提交</text>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
|
||
|
||
<!-- 领取记录 -->
|
||
<uni-popup ref="recordPop" type="center">
|
||
|
||
<view class="column"
|
||
style="width: 604rpx; height: 598rpx; background-color: #F5F5F5; border-radius: 16rpx; align-items: center;">
|
||
|
||
<view class="row"
|
||
style="width: 90%; justify-content: space-between; align-items: center; margin-top: 30rpx;">
|
||
<view class="" style="width: 30rpx;">
|
||
|
||
</view>
|
||
|
||
<text style="font-size: 35rpx; font-weight: 600; color: black;">领取记录</text>
|
||
|
||
<image src="/static/ic_close.png" @click="closeRecordPop()" style="width: 30rpx; height: 30rpx;"
|
||
mode=""></image>
|
||
</view>
|
||
|
||
<view class="column"
|
||
style="width: 100%; height: 460rpx; margin-top: 30rpx; overflow-y: auto; font-size: 25rpx; align-items: center;">
|
||
|
||
|
||
<view class="column" v-for="(item,index) in recordList"
|
||
style="width: 90%; height: 180rpx; margin-bottom: 10rpx; position: relative; background-color: white; padding: 10rpx; border-radius: 16rpx;">
|
||
|
||
<view class="row" style="justify-content: space-between; margin-top: 20rpx;">
|
||
<view class="row">
|
||
<text>{{item.name}}</text>
|
||
<text style="margin-left: 20rpx;">{{item.phone}}</text>
|
||
</view>
|
||
<text>{{item.time}}</text>
|
||
</view>
|
||
|
||
<text style="margin-top: 20rpx;">{{item.address}}</text>
|
||
|
||
</view>
|
||
|
||
|
||
</view>
|
||
|
||
|
||
|
||
</view>
|
||
|
||
|
||
</uni-popup>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
imagePath: '',
|
||
name: "",
|
||
phone: "",
|
||
workUnit: "",
|
||
address: "",
|
||
createTime: "",
|
||
number: "",
|
||
model: "",
|
||
recordList: [{
|
||
name: "苏家辉",
|
||
time: "2025-5-25",
|
||
address: "江苏省徐州市睢宁县xx小区xx花园20-601",
|
||
phone: "13025555555"
|
||
},
|
||
{
|
||
name: "苏家辉",
|
||
time: "2025-5-25",
|
||
address: "江苏省徐州市睢宁县",
|
||
phone: "13025555555"
|
||
},
|
||
{
|
||
name: "苏家辉",
|
||
time: "2025-5-25",
|
||
address: "江苏省徐州市睢宁县",
|
||
phone: "13025555555"
|
||
},
|
||
{
|
||
name: "苏家辉",
|
||
time: "2025-5-25",
|
||
address: "江苏省徐州市睢宁县",
|
||
phone: "13025555555"
|
||
},
|
||
{
|
||
name: "苏家辉",
|
||
time: "2025-5-25",
|
||
address: "江苏省徐州市睢宁县",
|
||
phone: "13025555555"
|
||
}
|
||
]
|
||
}
|
||
},
|
||
onLoad() {
|
||
|
||
},
|
||
methods: {
|
||
|
||
openReceivePop() {
|
||
this.$refs.receivePop.open();
|
||
},
|
||
|
||
closeReceivePop() {
|
||
this.$refs.receivePop.close();
|
||
},
|
||
|
||
openRecordPop() {
|
||
this.$refs.recordPop.open();
|
||
},
|
||
|
||
closeRecordPop() {
|
||
this.$refs.recordPop.close();
|
||
},
|
||
|
||
seleImg() {
|
||
uni.chooseImage({
|
||
count: 1, // 最多可选择图片数量，默认9
|
||
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图
|
||
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机
|
||
success: function(res) {
|
||
// 返回选定照片的本地文件路径列表
|
||
this.imagePath = res.tempFilePaths[0];
|
||
|
||
console.log('选择的图片路径:', tempFilePaths);
|
||
// 这里可以处理图片上传或预览
|
||
},
|
||
fail: function(err) {
|
||
console.log('选择图片失败:', err);
|
||
}
|
||
});
|
||
}
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.content {
|
||
width: 100%;
|
||
height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
}
|
||
</style> |