websoft-uniapp/package/user/card-detail-merchant.vue

<template>
	<view class="page">
		<!-- 其他功能 -->
		<uni-card :border="false" :is-shadow="false" :padding="0">
			<view class="order-body web-cell web-cell-align-top">
				<view class="web-cell-content">
					<uv-cell-group :customStyle="{backgroundColor: '#ffffff'}" :border="false">
						<block v-for="(item,index) in list" :key="index">
							<uv-cell :title="item.merchantName" :label="item.shopType" isLink :url="`/package/booking/index?id=${item.merchantId}`" :cellStyle="{padding: '10px 0'}">
								<template v-slot:icon>
									<uv-avatar :src="item.image" fontSize="12" size="50" randomBgColor></uv-avatar>
								</template>
							</uv-cell>
						</block>
					</uv-cell-group>
				</view>
			</view>
		</uni-card>
		<!-- <view class="btn-bar">
			<uv-button class="save-user-profile"
				:customStyle="{background: 'linear-gradient(to right, #70b915, #008e04)',borderRadius: '30px',color: '#ffffff'}"
				text="添加收货地址" @click="add"></uv-button>
		</view> -->
		<!-- 登录组件 -->
		<ws-login ref="login" :logo="logo" @done="reload" />
	</view>
</template>

<script>
	import * as Api from '@/api/shop/userAddress';
	import * as MerchantApi from '@/api/shop/merchant';
	import regions from '@/api/regions-data.json';
	import {
		getWxOpenId
	} from '@/api/passport/login';
	import {
		openUrl
	} from '@/utils/common';
	import {
		useUserStore
	} from '@/store/modules/user';
	import {
		useCarStore
	} from '@/store/modules/car';

	const userStore = useUserStore();
	const carStore = useCarStore();

	export default {
		data() {
			return {
				sid: '',
				list: [],
				statusBarHeight: 104,
				isLogin: false,
				form: {
					name: '',
					phone: ''
				},
				// 表单数据
				formData: {},
				fields: {},
				logo: '',
				server: [],
				order: [],
				regions,
				rules: {
					// 对name字段进行必填验证
					name: {
						rules: [{
							required: true,
							errorMessage: '请输入收件人名称',
						}]
					},
					phone: {
						rules: [{
							required: true,
							format: 'number',
							errorMessage: '请输入正确的手机号码',
						}]
					},
					address: {
						rules: [{
							required: true,
							errorMessage: '请输入详情地址',
						}]
					},
					region: {
						rules: [{
							required: true,
							errorMessage: '请选择所在地区',
						}, {
							validateFunction: function(rule, value, data, callback) {
								console.log('value: ', value);
								if (value.length < 2) {
									callback('请至少勾选两个兴趣爱好')
								}
								return true
							}
						}]
					}

				}
			}
		},
		onLoad(o) {
			this.sid = o.sid
			this.reload()
		},
		methods: {
			async reload(e) {
				const app = this
				// 当前登录用户信息
				const userInfo = await userStore.fetchUserInfo();
				if (Object.keys(userInfo).length > 0) {
					app.isLogin = true
					app.userInfo = userInfo
				} else {
					app.isLogin = false
				}

				// 获取收货地址列表
				MerchantApi.pageMerchant({
					merchantIds: app.sid
				}).then(res => {
					app.list = res.list;
				})

				// 获取地区选择数据
				// this.regions = this.regions.map(d => {
				// 	console.log('d: ',d);
				// 	d.text = d.label
				// 	return d;
				// })
				// Api.getRegions().then(res => {
				// 	console.log('res: ',res);
				// })
			},
			navTo(item) {
				if (!this.isLogin) {
					this.$refs.login.open('bottom')
					return false;
				}
				openUrl(item);
			},
			// 弹出登录提示框
			openLogin() {
				if (!this.isLogin) {
					this.$refs.login.open('bottom')
					return false;
				}
			},
			onType(e){
				this.formData.type = e.detail.value;
			},
			onIsDefault(){
				this.formData.isDefault = !this.formData.isDefault;
			},
			// 选用该地址
			onAddres(item){
				carStore.setAddress(item)
				uni.navigateBack()
			},
			add() {
				this.formData = {}
				this.$refs.addForm.open('center')
			},
			openEdit(item) {
				this.formData = item
				this.$refs.addForm.open('center')
			},
			remove(item) {
				const app = this
				uni.showModal({
					title: '确定要删除吗?',
					success(o) {
						if (o.confirm) {
							uni.showLoading({
								title: '请求中.'
							})
							Api.removeUserAddress(item.id).then(res => {
								uni.showToast({
									title: '操作成功',
									icon: 'none'
								})
								app.$refs.addForm.close()
								app.reload()
							})
							app.reload()
						}
					}
				});

			},
			// 触发提交表单
			submit() {
				this.$refs.form.validate().then(res => {
					const saveOrUpdate = this.formData.id ? Api.updateUserAddress : Api.addUserAddress
					saveOrUpdate(this.formData).then(message => {
						uni.showToast({
							title: '保存成功',
							icon: 'success'
						})
						this.$refs.addForm.close()
						this.reload()
					}).catch((err) => {
						console.log(err);
					})
					console.log('表单数据信息：', res);
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			save() {
				Api.addUserAddress(this.form).then(msg => {
					uni.showToast({
						title: msg,
						icon: 'none'
					})
					this.$refs.addForm.close()
					this.reload()
				}).catch(() => {
					uni.showToast({
						title: '请检查您的网络.',
						icon: 'none'
					})
					uni.hideLoading()
					this.$refs.addForm.close()
					this.reload()
				})
			}
		}
	}
</script>
<style>
	page {
		background-size: 100%;
		background-repeat: no-repeat;
		background-color: #f0f2f5;
		width: 750rpx;
		overflow-x: hidden;
	}
</style>
<style lang="scss">
	.avatar {
		padding: 20px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 14px;
	}

	.save-user-profile {
		width: 700rpx;
		margin: 40rpx auto;
	}

	.add-address {
		width: 600rpx !important;
		margin: 40rpx auto;
	}

	.btn-bar {
		width: 700rpx;
		left: 25rpx;
		position: fixed;
		bottom: 30rpx;
		margin: auto;
		clear: both;
	}

	.title-bar {
		display: flex;

		.web-text-heading {
			margin-right: 20rpx;
		}

		.web-text-secondary {
			margin-right: 20rpx;
		}
	}
</style>