Browse Source

指定门店的票详情页以及门店地址页

DELL 3 years ago
parent
commit
2130558067

+ 1 - 1
src/components/area-picker/area-picker.vue

@@ -32,7 +32,7 @@
 		},
 		data() {
 			return {
-				value: [],//所选下标
+				value: [0,0,0],//所选下标
 				provinceRes: [],//省
 				cityRes: [],//市
 				areaRes: [],//区

+ 0 - 1
src/packageGoods/goods/list.vue

@@ -157,7 +157,6 @@
 				this.pageList()
 			},
 		},
-		
 		onReachBottom() {
 			if(this.total < this.pageNum * 20) return ;
 			this.status = 'loading';

+ 0 - 2
src/packageOperate/address/index.vue

@@ -44,8 +44,6 @@
 				<image class="center-img" src="https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/v2/nodata_5.png" mode="scaleToFill"></image>
 				<view class="center-font">暂无收货地址</view>
 			</view>
-			<!-- <u-empty text="活动为空" mode="order" /> -->
-		
 		</view>
 		<!-- 底部操作按钮 -->
 		<view class="footer-fixed">

+ 208 - 0
src/packagePrize/address/index.vue

@@ -0,0 +1,208 @@
+<template>
+	<view>
+		<!-- #ifdef MP-ALIPAY -->
+		<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="使用范围" leftIconSize="0">
+		</u-navbar>
+		<!-- #endif -->
+		<!-- #ifndef MP-ALIPAY -->
+		<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="使用范围"></u-navbar>
+		<!-- #endif -->
+
+		<view class="address-wrap">
+			<view class="header-title" @click="selectAddress">
+				<view class="adderss-select">
+					{{ confirm ? confirm : '所有地区' }}
+				</view>
+				<view class="adderss-select-icon">
+					<u-icon name="arrow-right" color="#999" size="12"></u-icon>
+				</view>
+			</view>
+			<view class="content">
+				<view class="address-box" v-for="(item,index) in list" :key="index">
+					<text class="store-name" selectable="true">{{item.name}}</text>
+					<view class="store-address">
+						<text>地址:{{item.addressAll}}</text>
+						<view @click="copyDeliveryFlowId(item.addressAll)">复制</view>
+					</view>
+				</view>
+			</view>
+			<u-loadmore :line="true" v-if="list.length>10" :status="status" :loading-text="'努力加载中'" :nomore-text="'已经到底了'" />
+		</view>
+		<view class="flex empty" v-if="!list.length">
+			<view class="center">
+				<image class="center-img"
+					src="https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/v2/nodata_5.png" mode="scaleToFill">
+				</image>
+				<view class="center-font">暂无门店</view>
+			</view>
+		</view>
+
+		<address-popup :address-show="addressShow" @cancel="cancel" @confirmAddress="confirmAddress" />
+	</view>
+</template>
+
+<script>
+	import $http from '@/utils/request.js'
+	import AddressPopup from '../components/address-popup/address-popup.vue'
+	export default {
+		components: {
+			AddressPopup
+		},
+		data() {
+			return {
+				list: [],
+				couponId: null,
+				addressShow: false,
+				confirm: '',
+				info: {},
+				total: 0,
+				pageNum: 1,
+				status: 'nomore',//上拉刷新状态
+			};
+		},
+		onLoad(options) {
+			this.couponId = options.couponId
+			this.pageList()
+		},
+		methods: {
+			pageList() {
+				this.pageNum = 1
+				this.total = 0
+				this.list = []
+				this.getList()
+			},
+			getList() {
+				uni.showLoading({
+					title: '加载中'
+				});
+				$http.post(`/api/v1/mp/user/mine/coupon/channel/list?pageNum=${this.pageNum}&pageSize=20`, { ...this.info, couponId: this.couponId }).then(
+					res => {
+						uni.hideLoading();
+						if (res.code == 0) {
+							this.list = res.rows
+							this.list.forEach(item=>{
+								item.addressAll = `${item.province} ${item.city} ${item.area} ${item.address}`
+							})
+							this.total = res.total
+						}
+					}).catch(() => {
+					uni.hideLoading();
+				})
+			},
+			selectAddress() {
+				this.addressShow = true
+			},
+			cancel() {
+				this.addressShow = false
+			},
+			confirmAddress(obj) {
+				this.info = {
+					provinceId: obj.provinceId,
+					cityId: obj.cityId,
+				}
+				this.confirm = obj.cityShow
+				this.addressShow = false
+				this.pageList()
+			},
+			copyDeliveryFlowId(data) {
+				uni.setClipboardData({data});
+			},
+		},
+		onReachBottom() {
+			if(this.total < this.pageNum * 20) return ;
+			this.status = 'loading';
+			++this.pageNum
+			if(this.total < this.pageNum * 20) this.status = 'nomore';
+				else this.status = 'loading';
+			this.getList()
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	.address-wrap {
+
+		.header-title {
+			background-color: #fff;
+			padding: 0 20rpx;
+			display: flex;
+			height: 90rpx;
+			box-shadow: 0 5rpx 5rpx #ececec;
+			line-height: 90rpx;
+
+			.adderss-select {
+				margin-right: 10rpx;
+				font-size: 30rpx;
+			}
+
+			.adderss-select-icon {
+				display: inline-block;
+				margin-top: 34rpx;
+			}
+		}
+
+		.content {
+			margin: 20rpx 10rpx;
+			padding: 0 25rpx;
+			border-radius: 12rpx;
+			background-color: #fff;
+
+			.address-box {
+				width: 100%;
+				padding: 30rpx 0;
+				border-bottom: 2rpx solid #dadbde;
+
+				.store-name {
+					font-size: 30rpx;
+					color: #000;
+					margin-bottom: 15rpx;
+				}
+
+				.store-address {
+					
+					text {
+						font-size: 24rpx;
+						color: #999;
+					}
+
+					view {
+						margin-left: 8rpx;
+						background-color: rgba(153, 153, 153, .1);
+						display: inline-block;
+						width: 80rpx;
+						height: 40rpx;
+						line-height: 34rpx;
+						text-align: center;
+						font-size: 24rpx;
+						border-radius: 8rpx;
+					}
+				}
+			}
+
+			.address-box:last-child {
+				border-bottom: none;
+			}
+		}
+
+	}
+
+	.empty {
+		height: 60vh;
+
+		.center {
+			text-align: center;
+
+			&-img {
+				width: 228rpx;
+				height: 320rpx;
+			}
+
+			&-font {
+				font-size: 30rpx;
+				font-weight: 400;
+				color: #999999;
+				margin-bottom: 250rpx;
+			}
+		}
+	}
+</style>

+ 91 - 0
src/packagePrize/components/address-popup/address-popup.vue

@@ -0,0 +1,91 @@
+<template>
+	<view>
+		<u-popup :show="addressShow" @close="cancel">
+			<view class="flex warp">
+				<view class="warp-left" @click="cancel"> 取消 </view>
+				<view class="warp-right" @click="setArea"> 确定 </view>
+			</view>
+			<picker-view style="height: 500rpx; text-align: center; line-height: 68rpx;" :value="value" @change="bindChange">
+				<picker-view-column>
+					<view v-for="(item,index) in provinceRes" :key="index">{{item.areaName}}</view> 
+				</picker-view-column>
+				<picker-view-column>
+					<view v-for="(item,index) in cityRes" :key="index">{{item.areaName}}</view> 
+				</picker-view-column>
+			</picker-view>
+		</u-popup>
+	</view>
+</template>
+
+<script>
+	import $http from '@/utils/request.js'
+	export default {
+		name: "area-picker",
+		props: {
+			addressShow: {
+				type: [Boolean],
+				default: false
+			},
+		},
+		data() {
+			return {
+				value: [0,0],//所选下标
+				provinceRes: [],//省
+				cityRes: [],//市
+			};
+		},
+		mounted() {
+			this.getArea()
+		},
+		methods: {
+			//切换
+			bindChange(e){
+				if(e.detail.value[0] != this.value[0]){
+					this.cityRes = this.provinceRes[e.detail.value[0]].cityList
+					this.value = [e.detail.value[0],0]
+					return
+				}else{
+					this.value = e.detail.value
+					return
+				}
+			},
+			//确定修改
+			setArea() {
+				let confirmObj = {
+					province: this.provinceRes[this.value[0]].areaName,
+					provinceId: this.provinceRes[this.value[0]].areaId,
+					city: this.cityRes[this.value[1]].areaName,
+					cityId: this.cityRes[this.value[1]].areaId,
+					cityShow: `${ this.provinceRes[this.value[0]].areaName } / ${ this.cityRes[this.value[1]].areaName  }`
+				}
+				this.$emit('confirmAddress', confirmObj)
+			},
+			getArea() {
+				$http.post('/api/v1/mp/admin/area/tree/list', {}).then(res=>{
+					res.data.unshift({areaId:null,areaName:'所有地区',cityList:[{areaId:null,areaName:''}]})
+					this.provinceRes = res.data
+					this.cityRes = res.data[0].cityList
+				})
+			},
+			cancel() {
+				this.$emit('cancel')
+			},
+		},
+	}
+</script>
+
+<style lang="scss">
+	.warp {
+		justify-content: space-between;
+		padding: 15px;
+		
+		&-left {
+			 color: #909193;
+			 font-size: 30rpx;
+		}
+		&-right {
+			 color: #3c9cff;
+			 font-size: 30rpx;
+		}
+	}
+</style>

+ 60 - 24
src/packagePrize/coupon/detail.vue

@@ -1,12 +1,13 @@
 <template>
 	<view>
 		<!-- #ifdef MP-ALIPAY -->
-		<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="优惠券详情" leftIconSize="0"></u-navbar>
+		<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="优惠券详情" leftIconSize="0">
+		</u-navbar>
 		<!-- #endif -->
 		<!-- #ifndef MP-ALIPAY -->
 		<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="优惠券详情"></u-navbar>
 		<!-- #endif -->
-		
+
 		<view class="detail">
 			<!-- 优惠券信息 -->
 			<view class="flex detail-item">
@@ -31,28 +32,40 @@
 					</view>
 					<view class="content-right flex">
 						<view class="title ells-one">{{ info.title }}</view>
-						<view class="desc">适用范围:{{ info.useAreaDesc || '-' }}</view>
-						<view class="desc">使用期限:{{ $parseTime(info.validStart, '{y}.{m}.{d}') }} ~ {{ $parseTime(info.validEnd, '{y}.{m}.{d}') }}</view>
+						<view class="desc"
+							v-if="info.type && JSON.parse(info.type).value == 2 && info.useArea && JSON.parse(info.useArea).value == 1">
+							适用范围:点击查看</view>
+						<view class="desc"
+							v-else-if="info.type && JSON.parse(info.type).value == 2 && info.useArea && JSON.parse(info.useArea).value == 2">
+							适用范围:点击查看</view>
+						<view class="desc" v-else>适用范围:{{ info.useAreaDesc || '-' }}</view>
+						<view class="desc">使用期限:{{ $parseTime(info.validStart, '{y}.{m}.{d}') }} ~
+							{{ $parseTime(info.validEnd, '{y}.{m}.{d}') }}</view>
 					</view>
 				</view>
 			</view>
-			
+
 			<!-- 间隔 -->
 			<view class="detail-interval flex">
 				<view class="detail-interval__left"></view>
 				<view class="detail-interval__line"></view>
 				<view class="detail-interval__right"></view>
 			</view>
-				
+
 			<!-- 二维码 -->
-			<view class="flex detail-code" v-if = "info && info.useArea && JSON.parse(info.useArea).value  != 4">
+			<view class="flex detail-code" v-if="info && info.useArea && JSON.parse(info.useArea).value  != 4">
 				<canvas style="width: 220px;height: 220px;" canvas-id="couponQrcode" id="couponQrcode"></canvas>
 			</view>
-			
+			<!-- 范围 -->
+			<view class="detail-explain" v-if="info && info.useArea && JSON.parse(info.useArea).value  == 1">
+				<view class="txt">使用范围:</view>
+				<view class="txt detail">共{{info.channelTotal}}家门店可使用 <view class="detail-address" @click="toAddress">立即查看</view>
+				</view>
+			</view>
 			<!-- 说明 -->
 			<view class="detail-explain">
 				<view class="txt">使用说明:</view>
-				<view class="txt">{{ info.description }}</view>
+				<view class="txt detail">{{ info.description }}</view>
 			</view>
 		</view>
 	</view>
@@ -92,6 +105,12 @@
 					uni.hideLoading();
 				})
 			},
+			//地址
+			toAddress() {
+				uni.navigateTo({
+					url:`/packagePrize/address/index?couponId=${this.info.couponId}`,
+				})
+			},
 			// 二维码生成工具
 			couponQrCode() {
 				new qrCode('couponQrcode', {
@@ -113,42 +132,42 @@
 		background-color: #FFFFFF;
 		border-radius: 10rpx;
 		overflow: hidden;
-		
+
 		// 优惠券信息
 		&-item {
 			padding: 30rpx 0 30rpx;
 			background-color: #fff;
-			
+
 			.content {
 				width: 100%;
 				height: 184rpx;
 				justify-content: flex-start;
-				
+
 				&-left {
 					width: 210rpx;
 					height: 100%;
 					margin-right: 20rpx;
-					
+
 					image {
 						width: 100%;
 						height: 100%;
 					}
-					
+
 					.price {
 						position: absolute;
 						color: #fff;
-						
+
 						text:first-child {
 							font-size: 70rpx;
 							padding-right: 20rpx;
 						}
-						
+
 						text:last-child {
 							font-size: 40rpx;
 						}
 					}
 				}
-				
+
 				&-right {
 					flex: 1;
 					align-items: flex-start;
@@ -156,7 +175,7 @@
 					justify-content: space-between;
 					height: 100%;
 					padding: 24rpx 0;
-					
+
 					.title {
 						font-size: 32rpx;
 						line-height: 32rpx;
@@ -164,7 +183,7 @@
 						overflow: hidden;
 						font-weight: bold;
 					}
-					
+
 					.desc {
 						font-size: 24rpx;
 						line-height: 24rpx;
@@ -180,7 +199,7 @@
 			width: 100%;
 			height: 30rpx;
 			margin-bottom: 10rpx;
-			
+
 			&__left {
 				position: absolute;
 				left: -15rpx;
@@ -189,13 +208,13 @@
 				background: #F9F7F5;
 				border-radius: 50%;
 			}
-			
+
 			&__line {
 				height: 1px;
 				background-color: #F9F7F5;
 				width: 90%;
 			}
-			
+
 			&__right {
 				position: absolute;
 				right: -15rpx;
@@ -205,19 +224,36 @@
 				border-radius: 50%;
 			}
 		}
-		
+
 		// 二维码
 		&-code {
 			width: 100%;
 			height: 460rpx;
 			margin-bottom: 20rpx;
 		}
-		
+
 		// 说明
 		&-explain {
 			font-size: 26rpx;
 			padding: 0 34rpx 34rpx;
 
+			.detail {
+				margin-left: 20rpx;
+
+				&-address {
+					margin-left: 20rpx;
+					display: inline-block;
+					width: 150rpx;
+					height: 40rpx;
+					color: #FE9E48;
+					border: 2rpx solid #FE9E48;
+					text-align: center;
+					line-height: 36rpx;
+					font-size: 24rpx;
+					border-radius: 8rpx;
+				}
+			}
+
 			.txt {
 				line-height: 40rpx;
 			}

+ 3 - 1
src/packagePrize/prize/index.vue

@@ -105,7 +105,9 @@
 						</view>
 						<view class="content-right flex">
 							<view class="title ells-one">{{ item.title }}</view>
-							<view class="desc">适用范围:{{ item.useAreaDesc || '-' }}</view>
+							<view class="desc" v-if="item.type && JSON.parse(item.type).value == 2 && item.useArea && JSON.parse(item.useArea).value == 1">适用范围:点击查看</view>
+							<view class="desc" v-else-if="item.type && JSON.parse(item.type).value == 2 && item.useArea && JSON.parse(item.useArea).value == 2">适用范围:点击查看</view>
+							<view class="desc" v-else>适用范围:{{ item.useAreaDesc || '-' }}</view>
 							<view class="desc">使用期限:{{ $parseTime(item.validStart, '{y}.{m}.{d}') }} ~ {{ $parseTime(item.validEnd, '{y}.{m}.{d}') }}</view>
 						</view>
 					</view>

+ 3 - 0
src/pages.json

@@ -122,6 +122,9 @@
 				},
 				{
 					"path": "purchase/index"
+				},
+				{
+					"path": "address/index"
 				}
 			]
 		},