|
|
@@ -1,160 +1,134 @@
|
|
|
<!-- 奖品领取 -->
|
|
|
<template>
|
|
|
<s-layout title="奖品领取">
|
|
|
- <uni-data-checkbox v-model="state.radio" :wrap="true" :localdata="state.addressList"></uni-data-checkbox>
|
|
|
- <uni-forms
|
|
|
- v-if="state.radio === 9999"
|
|
|
- ref="addressFormRef"
|
|
|
- v-model="state.model"
|
|
|
- :rules="rules"
|
|
|
- validateTrigger="bind"
|
|
|
- labelWidth="160"
|
|
|
- labelAlign="left"
|
|
|
- border
|
|
|
- :labelStyle="{ fontWeight: 'bold' }"
|
|
|
- >
|
|
|
- <view class="bg-white form-box ss-p-x-30">
|
|
|
- <uni-forms-item name="name" label="收货人" class="form-item">
|
|
|
- <uni-easyinput v-model="state.model.name" placeholder="请填写收货人姓名" :inputBorder="false" placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"/>
|
|
|
- </uni-forms-item>
|
|
|
-
|
|
|
- <uni-forms-item name="mobile" label="手机号" class="form-item">
|
|
|
- <uni-easyinput v-model="state.model.mobile" type="number" placeholder="请输入手机号" :inputBorder="false" placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"/>
|
|
|
- </uni-forms-item>
|
|
|
-
|
|
|
- <uni-forms-item name="areaName" label="省市区" @tap="state.showRegion = true" class="form-item">
|
|
|
- <uni-easyinput v-model="state.model.areaName" disabled :inputBorder="false"
|
|
|
- :styles="{ disableColor: '#fff', color: '#333' }" placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal" placeholder="请选择省市区">
|
|
|
- <template v-slot:right>
|
|
|
- <uni-icons type="right" />
|
|
|
- </template>
|
|
|
- </uni-easyinput>
|
|
|
- </uni-forms-item>
|
|
|
-
|
|
|
- <uni-forms-item name="detailAddress" label="详细地址" :formItemStyle="{ alignItems: 'flex-start' }" :labelStyle="{ lineHeight: '5em' }" class="textarea-item">
|
|
|
- <uni-easyinput :inputBorder="false" type="textarea" v-model="state.model.detailAddress" placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal" placeholder="请输入详细地址" clearable/>
|
|
|
- </uni-forms-item>
|
|
|
+ <view class="ss-flex" style="justify-content: flex-end;">
|
|
|
+ <button class="refresh-btn ss-reset-button" type="warn" plain="true" @tap.stop="getAddressList">
|
|
|
+ <uni-icons type="reload" color="#ff3404" size="30"></uni-icons>
|
|
|
+ 刷 新
|
|
|
+ </button>
|
|
|
+ </view>
|
|
|
+ <view v-if="state.addressList.length">
|
|
|
+ <view class="address-item ss-flex ss-row-between ss-col-center border-bottom"
|
|
|
+ v-for="(item, index) in state.addressList"
|
|
|
+ :key="item.id"
|
|
|
+ @tap.stop="state.selectedIndex = index"
|
|
|
+ >
|
|
|
+ <view class="item-left">
|
|
|
+ <view class="area-text ss-flex ss-col-center">{{ item.areaName }}</view>
|
|
|
+ <view class="address-text">{{ item.detailAddress }}</view>
|
|
|
+ <view class="person-text"> {{ item.name }} {{ item.mobile }} </view>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <uni-icons
|
|
|
+ :type="index === state.selectedIndex ? 'checkbox-filled' : 'circle'"
|
|
|
+ :color="index === state.selectedIndex ? '#ff3404' : '#000000'"
|
|
|
+ size="28"
|
|
|
+ ></uni-icons>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- </uni-forms>
|
|
|
+ </view>
|
|
|
+
|
|
|
<su-fixed bottom :opacity="false" bg="" placeholder :noFixed="false" :index="10">
|
|
|
- <view class="footer-box ss-flex-col ss-row-between ss-p-20">
|
|
|
- <view class="ss-m-b-20">
|
|
|
- <button class="ss-reset-button save-btn ui-Shadow-Main" @tap="onSave">领取</button>
|
|
|
+ <view class="footer-box ss-flex-col ss-row-between">
|
|
|
+ <view class="ss-m-b-20 ss-flex">
|
|
|
+ <button
|
|
|
+ class="save-btn ss-reset-button ui-Shadow-Main"
|
|
|
+ @tap="sheep.$router.go('/pages/user/address/edit')"
|
|
|
+ >
|
|
|
+ 新增收货地址
|
|
|
+ </button>
|
|
|
+ <button class="ss-reset-button save-btn ui-Shadow-Main" @tap.stop="onSave">领取</button>
|
|
|
</view>
|
|
|
</view>
|
|
|
</su-fixed>
|
|
|
-
|
|
|
- <!-- 省市区弹窗 -->
|
|
|
- <su-region-picker :show="state.showRegion" @cancel="state.showRegion = false" @confirm="onRegionConfirm"/>
|
|
|
</s-layout>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
- import { ref, reactive, unref } from 'vue';
|
|
|
+ import { ref, reactive } from 'vue';
|
|
|
import sheep from '@/sheep';
|
|
|
- import { onLoad } from '@dcloudio/uni-app';
|
|
|
+ import { onLoad, onShow } from '@dcloudio/uni-app';
|
|
|
import _ from 'lodash-es';
|
|
|
- import { mobile } from '@/sheep/validate/form';
|
|
|
- import AreaApi from '@/sheep/api/system/area';
|
|
|
import AddressApi from '@/sheep/api/member/address';
|
|
|
+ import PrizeApi from '@/sheep/api/prizeDraw'
|
|
|
|
|
|
- const addressFormRef = ref(null);
|
|
|
const state = reactive({
|
|
|
- showRegion: false,
|
|
|
- model: {
|
|
|
- name: '',
|
|
|
- mobile: '',
|
|
|
- detailAddress: '',
|
|
|
- defaultStatus: false,
|
|
|
- areaName: '',
|
|
|
- },
|
|
|
- rules: {},
|
|
|
- radio: 0,
|
|
|
- addressList: [
|
|
|
- { text: '请选择收货地址', value: 0 },
|
|
|
- { text: '收货地址1', value: 1 },
|
|
|
- { text: '收货地址2', value: 2 },
|
|
|
- { text: '收货地址3', value: 3 },
|
|
|
- { text: '收货地址4', value: 4 },
|
|
|
- ],
|
|
|
+ selectedIndex: 0,
|
|
|
+ addressList: [],
|
|
|
});
|
|
|
|
|
|
- const rules = {
|
|
|
- name: {
|
|
|
- rules: [{ required: true, errorMessage: '请输入收货人姓名' }]
|
|
|
- },
|
|
|
- mobile,
|
|
|
- detailAddress: {
|
|
|
- rules: [{ required: true, errorMessage: '请输入详细地址' }]
|
|
|
- },
|
|
|
- areaName: {
|
|
|
- rules: [{ required: true, errorMessage: '请选择您的位置' }]
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 确认选择地区
|
|
|
- const onRegionConfirm = (e) => {
|
|
|
- state.model.areaName = `${e.province_name} ${e.city_name} ${e.district_name}`;
|
|
|
- state.model.areaId = e.district_id;
|
|
|
- state.showRegion = false;
|
|
|
- };
|
|
|
-
|
|
|
- // 获得地区数据
|
|
|
- const getAreaData = () => {
|
|
|
- if (_.isEmpty(uni.getStorageSync('areaData'))) {
|
|
|
- AreaApi.getAreaTree().then((res) => {
|
|
|
- if (res.code === 0) {
|
|
|
- uni.setStorageSync('areaData', res.data);
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
// 获取收货地址
|
|
|
const getAddressList = async () => {
|
|
|
const list = (await AddressApi.getAddressList()).data;
|
|
|
- state.addressList = [...list, { id: 9999, label: '使用新地址' }]
|
|
|
+ state.addressList = list.map(e => {
|
|
|
+ return { text: e.areaName, value: e.id, ...e }
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
// 保存收货地址
|
|
|
const onSave = async () => {
|
|
|
- // 参数校验
|
|
|
- const validate = await unref(addressFormRef)
|
|
|
- .validate()
|
|
|
- .catch((error) => {
|
|
|
- console.log('error: ', error);
|
|
|
- });
|
|
|
- if (!validate) {
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- // // 提交请求
|
|
|
- // const formData = {
|
|
|
- // ...state.model,
|
|
|
- // };
|
|
|
- // const { code } =
|
|
|
- // state.model.id > 0
|
|
|
- // ? await AddressApi.updateAddress(formData)
|
|
|
- // : await AddressApi.createAddress(formData);
|
|
|
- // if (code === 0) {
|
|
|
- // sheep.$router.back();
|
|
|
- // }
|
|
|
- };
|
|
|
+ if (!state.addressList || !state.addressList.length) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '请新增收货地址',
|
|
|
+ icon: 'none',
|
|
|
+ duration: 2000
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const address = state.addressList[state.selectedIndex]
|
|
|
+ if (!address || !Object.keys(address).length) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '请选择收货地址',
|
|
|
+ icon: 'none',
|
|
|
+ duration: 2000
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ const { code } = await PrizeApi.luckyLotteryRecordReceive({ id: receiveId.value, receiveInfo: JSON.stringify(address) })
|
|
|
+ if (code === 0) {
|
|
|
+ sheep.$router.back();
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
const receiveId = ref()
|
|
|
onLoad(async (options) => {
|
|
|
- console.log('==============================')
|
|
|
- // 获得地区数据
|
|
|
- getAreaData()
|
|
|
- // 获取收货地址列表
|
|
|
- await getAddressList()
|
|
|
-
|
|
|
- console.log(options, 'receive')
|
|
|
receiveId.value = options.id
|
|
|
- });
|
|
|
+ })
|
|
|
+
|
|
|
+ onShow(async () => {
|
|
|
+ // 获取收货地址列表
|
|
|
+ await getAddressList()
|
|
|
+ })
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
+ .address-item {
|
|
|
+ padding: 24rpx 30rpx;
|
|
|
+
|
|
|
+ .item-left {
|
|
|
+ width: 600rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .area-text {
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: $dark-9;
|
|
|
+ }
|
|
|
+
|
|
|
+ .address-text {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 48rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .person-text {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: $dark-9;
|
|
|
+ }
|
|
|
+ }
|
|
|
:deep() {
|
|
|
.uni-forms-item__label .label-text {
|
|
|
font-size: 28rpx !important;
|
|
|
@@ -205,20 +179,21 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ .refresh-btn {
|
|
|
+ width: 200rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ }
|
|
|
+
|
|
|
.footer-box {
|
|
|
+ width: 100vw;
|
|
|
.save-btn {
|
|
|
- width: 710rpx;
|
|
|
+ width: 100%;
|
|
|
height: 80rpx;
|
|
|
border-radius: 40rpx;
|
|
|
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
|
|
color: $white;
|
|
|
- }
|
|
|
-
|
|
|
- .cancel-btn {
|
|
|
- width: 710rpx;
|
|
|
- height: 80rpx;
|
|
|
- border-radius: 40rpx;
|
|
|
- background: var(--ui-BG);
|
|
|
+ margin: 0 20rpx;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
Xiao_123