160 lines
3.5 KiB
Vue
160 lines
3.5 KiB
Vue
<template>
|
|
<view class="receive-view">
|
|
<view class="item flex ai-center" :class="{'active':selectIndex===index}" v-for="(item,index) in list"
|
|
@click="tapItem(index)">
|
|
<image class="select" :src="webUrl+'/20220613104953149068.png'" mode="scaleToFill" v-if="selectIndex===index" />
|
|
|
|
<view class="content">
|
|
<view class="base flex ai-center">
|
|
<view>{{item.realName}}</view>
|
|
<view class="phone">{{item.phone}}</view>
|
|
</view>
|
|
|
|
<view class="address more-t">{{item.province}}{{item.city}}{{item.district}}{{item.detail}}</view>
|
|
</view>
|
|
|
|
<image class="default" :src="webUrl+'/20220613104939432841.png'" mode="scaleToFill" v-if="item.isDefault===1" />
|
|
</view>
|
|
|
|
<button class="btn-receive" type="default" @click="receive">确认领取</button>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getAddressList
|
|
} from "@/api/user";
|
|
import {
|
|
takePrize
|
|
} from "@/api/luck";
|
|
export default {
|
|
data() {
|
|
return {
|
|
webUrl: this.$VUE_APP_RESOURCES_URL,
|
|
id: null, //领奖记录ID
|
|
list: [], //收货地址列表
|
|
selectIndex: 0
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
this.id = option.id;
|
|
this.fetchList();
|
|
},
|
|
methods: {
|
|
fetchList() {
|
|
getAddressList({
|
|
page: 1,
|
|
limit: 999
|
|
}).then(res => {
|
|
if (res.success) {
|
|
this.list = res.data;
|
|
if (this.list.length) {
|
|
for (let i = 0; i < this.list.length; i++) {
|
|
if (this.list[i].isDefault === 1) this.selectIndex = i;
|
|
}
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
tapItem(index) {
|
|
this.selectIndex = index;
|
|
},
|
|
|
|
receive() {
|
|
takePrize(this.id, this.list[this.selectIndex].id).then(res => {
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: res.data,
|
|
success: () => {
|
|
if (res.success) {
|
|
setTimeout(() => {
|
|
uni.navigateBack();
|
|
}, 3000)
|
|
}
|
|
}
|
|
})
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
icon: "error",
|
|
title: err.msg
|
|
})
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.receive-view {
|
|
padding: 40rpx;
|
|
|
|
.active {
|
|
box-shadow: 0px 6px 12px rgba(191, 189, 197, 0.6);
|
|
}
|
|
|
|
.item {
|
|
position: relative;
|
|
height: 172rpx;
|
|
margin-bottom: 32rpx;
|
|
padding: 24rpx 20rpx 28rpx 0;
|
|
background: #fff;
|
|
border-radius: 12rpx;
|
|
|
|
.content {
|
|
margin-left: 24rpx;
|
|
|
|
.base {
|
|
color: #080F1A;
|
|
font-size: 28rpx;
|
|
line-height: 40rpx;
|
|
font-weight: bold;
|
|
|
|
.phone {
|
|
margin-left: 18rpx;
|
|
}
|
|
}
|
|
|
|
.address {
|
|
width: 100%;
|
|
height: 70rpx;
|
|
margin-top: 12rpx;
|
|
font-size: 24rpx;
|
|
line-height: 40rpx;
|
|
color: #999999;
|
|
}
|
|
}
|
|
|
|
.select {
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
.default {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 72rpx;
|
|
height: 36rpx;
|
|
}
|
|
|
|
}
|
|
|
|
.btn-receive {
|
|
position: fixed;
|
|
bottom: 80rpx;
|
|
left: 0;
|
|
width: 686rpx;
|
|
height: 80rpx;
|
|
margin: 0 32rpx;
|
|
border-radius: 40rpx;
|
|
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.16);
|
|
background: #FF564A;
|
|
color: #fff;
|
|
font-size: 30rpx;
|
|
line-height: 80rpx;
|
|
}
|
|
}
|
|
</style>
|