min-shenze-applet-master/pages/home/index.vue

<template>
	<block>
		<!-- z-paging插件：具体使用文档请看https://z-paging.zxlee.cn/ -->
		<z-paging
			auto-show-back-to-top
			back-to-top-bottom="300rpx"
			:auto="false"
			:paging-style="{ paddingBottom: 'constant(safe-area-inset-bottom)', paddingBottom: 'env(safe-area-inset-bottom)' }"
			ref="paging"
			v-model="dataList"
			@query="queryList"
		>
			<view class="homeIdx o-plr-24">
				<view class="l-flex-between o-mt-20">
					<view class="l-flex-RC">
						<u-icon name="map" class="c-color-8"></u-icon>
						<text class="c-color-8 u-line-1">{{ GETT_clientStatus.storeName }}</text>
					</view>
					<u-icon @click="toScan" name="scan" class="c-color-8" size="28"></u-icon>
				</view>
				<view class="o-mb-20" style="color: #ce2929;">图片仅供参考，具体以实物为准。</view>
				<view class="">
					<view class="l-flex-between l-flex-w">
						<view v-for="item in dataList" style="width:48%;" class="l-re l-boxShadow o-mb-20 c-bg-f o-plr-10 o-pb-10 o-pt-66 c-radius-10">
							<view class="l-flex-center">
								<u--image
									:width="GETT_miniProduct.includes(item.imgId) ? '200rpx' : '250rpx'"
									:height="GETT_miniProduct.includes(item.imgId) ? '200rpx' : '250rpx'"
									@click="goodsClick(item)"
									mode="aspectFit"
									:lazy-load="true"
									:fade="true"
									duration="450"
									:src="item.imgUrl"
								>
									<view slot="error" style="font-size: 24rpx;">加载失败</view>
								</u--image>
							</view>
							<view class="">
								<view class="o-mtb-10 c-color-8">{{ item.imgName }}</view>
								<view class="l-flex-between o-mb-10">
									<text class="c-text-12 c-color-MR">￥{{ item.goodsPrice }}</text>
									<!-- 如果优惠券总金额大于0，则显示预估到手价 -->
									<view v-if="GETT_home_totalCoupon > 0" class="estiPriceCon c-text-12 c-color-f l-flex-RC">
										<view class="estiPriceTxt c-text-12 o-ptb-10 o-plr-14">预估到手</view>
										<view class="estiPrice c-text-12 o-ptb-10 o-plr-14">￥{{ item.estiPrice }}</view>
									</view>
								</view>
							</view>
							<u-button v-if="item.showType !== 1" @click="addCart(item)" throttleTime="300" type="primary" shape="circle" size="normal" text="加入购物车"></u-button>
							<view
								:style="[headerStyle(item)]"
								class="l-ab l-flex-between o-w o-ptb-10 o-plr-10"
								style="left: 0;top: 0;
								border-top-right-radius: 10rpx;
								border-top-left-radius: 10rpx;"
							>
								<text class="c-text-12">{{ item.flavorName }}</text>
								<view class="l-flex-RC">
									<image
										class="o-mr-6"
										v-if="item.flavor.includes(1)"
										style="width: 30rpx;height: 30rpx;"
										src="/static/images/home/flavor/icon_milk.png"
										mode=""
									></image>
									<image
										class="o-mr-6"
										v-if="item.flavor.includes(2)"
										style="width: 30rpx;height: 30rpx;"
										src="/static/images/home/flavor/icon_strawberry.png"
										mode=""
									></image>
									<image
										class="o-mr-6"
										v-if="item.flavor.includes(3)"
										style="width: 30rpx;height: 30rpx;"
										src="/static/images/home/flavor/icon_orange.png"
										mode=""
									></image>
									<image
										class="o-mr-6"
										v-if="item.flavor.includes(4)"
										style="width: 30rpx;height: 30rpx;"
										src="/static/images/home/flavor/icon_melon.png"
										mode=""
									></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<template #bottom>
				<view v-show="totalNums !== 0" class="l-boxShadow c-bg-f l-flex-between o-plr-24 o-ptb-20" style="width: 100%;height: 100rpx;">
					<view @click="toTabCar" class="l-re">
						<u-badge absolute :offset="[0, 0]" :value="totalNums"></u-badge>
						<u-icon size="40" name="shopping-cart"></u-icon>
					</view>
					<view class="c-color-1 c-text-16">
						合计:
						<text class="c-text-16 c-color-MR">￥{{ totalPrice }}</text>
					</view>
					<view>
						<u-button
							v-if="GETT_loginInfos.phone"
							@click="toPayPop"
							throttleTime="2000"
							type="primary"
							shape="circle"
							size="normal"
							:text="`去支付(${totalNums})`"
						></u-button>
						<u-button
							v-else
							open-type="getPhoneNumber"
							@getphonenumber="getPhone"
							type="primary"
							shape="circle"
							size="normal"
							:text="`去支付(${totalNums})`"
						></u-button>
					</view>
				</view>
				<!-- 底部导航栏-占位符解决上拉刷新没显示加载更多的问题 -->
				<k-tabbar :fixed="false" :placeholder="false" :safeAreaInsetBottom="false" />
			</template>
		</z-paging>
		<!-- 支付弹窗 -->
		<k-payPop ref="kPayPopRef"></k-payPop>
		<!-- 支付提示弹窗 -->
		<u-modal @confirm="payShow = false" :show="payShow" title="提示" :content="payContent"></u-modal>
		<!-- 优惠券弹窗 -->
		<k-coupon ref="kCouponRef"></k-coupon>
		<!-- 领取优惠券弹窗 -->
		<u-overlay :show="coupPopShow">
			<view class="coupPopCon l-fixed o-w o-plr-100">
				<view class="coupPop l-boxShadow c-radius-10 o-w o-pb-50">
					<view class="headerCon o-w c-text-c c-text-b c-text-18 o-ptb-40" style="color: #926135;">送你一张优惠券</view>
					<!-- <view v-else class="headerCon o-w c-text-c c-text-b c-text-18 o-ptb-40" style="color: #926135;">你已领取优惠券</view> -->
					<view class="o-w c-text-c c-text-12 o-ptb-20" style="color: #926135;">每个用户只可领取一次</view>
					<view class="content o-w l-flex-center o-pt-30">
						<view class="contentCon c-text-c o-pb-20">
							<text class="c-text-40 c-text-b" style="color: #926135;">{{ GETT_home_coupon.split('J')[1] }}</text>
							<text class="rmbCls c-text-14 c-color-f o-ptb-10 o-plr-10" style="color: #926135;">元</text>
						</view>
					</view>
					<view class="o-w l-flex-center c-text-12 o-ptb-30" style="color: #926135;">全场商品满0.01元使用</view>
					<view class="o-w l-flex-center"><view @click="getCoupon" class="immedCls c-text-c c-color-f o-ptb-20">立即领取</view></view>
				</view>
				<view class="o-w l-flex-center o-mt-20"><u-icon @click="hideCoupPop" size="26" color="#fff" name="close-circle"></u-icon></view>
			</view>
		</u-overlay>
		<view v-if="showToast" class="l-flex-center l-fixed" style="width: 100vw;height: 100vh;z-index: 9999;">
			<view class="c-text-c c-text-16 c-color-f o-ptb-20 o-plr-50" style="background-color: #585858;border-radius: 10rpx;">
				<view style="line-height: 26px;">
					此券每人限领一张
				</view>
				<view style="line-height: 26px;">
					您已领取过，不能再领！
				</view>
			</view>
		</view>
	</block>
</template>
<script>
// 导入登录方法
import appLogin from '@/common/login.js';
// 导入优惠券弹窗
import kCoupon from '@/components/common/k-coupon/index.vue';
// 导入支付弹窗
import kPayPop from '@/components/common/k-payPop/index.vue';
// 导入接口
import { API_selectProductList, API_getPhone, API_getOpenid, API_getConpon,API_setDingYue } from '@/common/api.js';
// 引入辅助函数
import { mapGetters } from 'vuex';
// 引入底部导航栏
import kTabbar from '@/components/common/k-tabbar/k-tabbar.vue';
// 引入商品数据
import goodsList from '@/static/images/home/goods.js';
export default {
	components: {
		kTabbar,
		kPayPop,
		kCoupon
	},
	data() {
		return {
			showToast:false,
			// 领取优惠券弹窗显示
			coupPopShow: false,
			// 用来解决单个商品购买联动问题
			copyData: [],
			// 支付提示弹窗
			payShow: false,
			payContent: false,
			// z-paging插件的主数据，用作列表渲染
			dataList: []
		};
	},
	computed: {
		// 获取vuex中购物车的数据
		$S_tabbar_shopCarts() {
			return this.$M_GS('common', '$S_tabbar_shopCarts');
		},
		// 使用辅助函数
		...mapGetters([
			'GETT_clientStatus',
			'totalNums',
			'totalPrice',
			'isGetUserInfo',
			'GETT_loginInfos',
			'GETT_clientId',
			'GETT_miniProduct',
			'GETT_home_coupon',
			'GETT_home_couponList',
			'GETT_home_totalCoupon',
			'GETT_home_hasReceCoup'
		]),
		headerStyle() {
			return function(row) {
				let headerSye = {};
				switch (row.flavorName) {
					case '牛奶味':
						headerSye = {
							color: '#fff',
							backgroundColor: '#c8e5ec'
						};
						break;
					case '草莓味':
						headerSye = {
							color: '#fe796d',
							backgroundColor: '#fff5f4'
						};
						break;
					case '香橙味':
						headerSye = {
							color: '#fdd08f',
							backgroundColor: '#fff5e6'
						};
						break;
					case '蜜瓜味':
						headerSye = {
							color: '#a3d5f1',
							backgroundColor: '#ebf8ff'
						};
						break;
					case '混合口味':
						headerSye = {
							color: '#ccd77e',
							backgroundColor: '#f5f7e5'
						};
						break;
				}
				return headerSye;
			};
		}
	},
	methods: {
		// 点击隐藏优惠券弹窗
		hideCoupPop() {
			// 储存优惠券（控制弹窗的显示）
			this.$M_Cm('MUTA_SETCOUPON', '');
			this.coupPopShow = false;
		},
		// 初始化页面
		init(val) {
			if (val) {
				// 重新刷新页面数据
				this.$refs.paging.refresh();
			} else {
				// 空列表
				this.$refs.paging.complete([]);
			}
		},
		// 生成优惠券
		async getCoupon() {
			// 关闭弹窗
			this.coupPopShow = false;
			const param = {
				wxId: this.GETT_loginInfos.id,
				flag: this.GETT_home_coupon
			};
			const res = await API_getConpon(param, {
				catch: true
			});
			if(res.data === 1){
				this.showToast = true;
				setTimeout(()=>{
					this.showToast = false;
				},3000);
			}
			// 获取优惠券列表
			const hasCoupList = await this.$M_Dp('ACTI_SETCOUPONLIST');
			if (hasCoupList) {
				setTimeout(() => {
					// 先清空列表
					this.$refs.paging.complete([]);
					this.hideCoupPop();
					// 重新刷新页面数据
					this.$refs.paging.refresh();
				}, 200);
			}
		},
		// 点击商品
		goodsClick(row) {
			let curGoods = {};
			if (this.copyData.length > 0) {
				this.copyData.forEach(item => {
					if (item.imgId === row.imgId) {
						curGoods = uni.$u.deepClone(item);
					}
				});
			}
			this.$M_Cm('MUTA_SINGSHOPCARTS', curGoods);
			this.$M_Go(`/otherPages/home/singleBye/index`);
		},
		// 获取手机号
		async getPhone(e) {
			const { code } = e.detail;
			// 如果用户点击允许获取手机号
			if (!!code) {
				let param = {
					code,
					id: this.GETT_loginInfos.id
				};
				// 调用获取手机号的接口
				let res = await API_getPhone(param);
				// 把手机号信息存到vuex里面
				await this.$M_Cm('MUTA_GETOPENID', res);
			}
			this.toPayPop();
		},
		// 点击支付按钮
		toPayPop() {
			// 规定支付的商品数量不能超过5
			if (this.totalNums > 5) {
				this.payContent = '支付商品的数量不能超过5件，请到购物车页面减少数量后，重新支付！！！';
				this.payShow = true;
				return;
			}
			//询问是否订阅取餐通知
			this.dingyue();
			const payParam = {
				shopCarts: this.$S_tabbar_shopCarts,
				clientId: this.GETT_clientId,
				id: this.GETT_loginInfos.id
			};
			// 如果有优惠券要提醒用户去选择优惠券
			if (this.GETT_home_couponList.length > 0) {
				uni.showModal({
					title: '提示',
					confirmText: '去使用',
					cancelText: '不使用',
					confirmColor: '#3c9cff',
					content: `当前可使用优惠券${this.GETT_home_couponList.length}张。`,
					success: modelRes => {
						if (modelRes.confirm) {
							// 打开优惠券弹窗
							this.$refs.kCouponRef.popOpen(this.GETT_home_couponList, payParam, 1, this.totalPrice);
						} else {
							// 显示支付弹窗
							this.$refs.kPayPopRef.popOpen(payParam, 1);
						}
					}
				});
			} else {
				// 显示支付弹窗
				this.$refs.kPayPopRef.popOpen(payParam, 1);
			}
		},
		//询问是否订阅取餐通知
		dingyue(){
			var that = this;
			wx.requestSubscribeMessage({
				tmplIds: ['NVmdaK4MwygT63ME830pwM6wZt4eufxhBr6jlQ2XXJ4'],
			      success(res) {
					var status = res.NVmdaK4MwygT63ME830pwM6wZt4eufxhBr6jlQ2XXJ4;
					if(status=='accept'){
						//通知后台该用户订阅了消息
						var id = that.GETT_loginInfos.id;
						console.log('id=', id);
						API_setDingYue( {id:id} ).then(res => {
							console.log('res', res);
						});
					}
			        console.log('授权成功');
				}
			})
		},
		// 方式二、直接下小程序首页扫码的
		// 点击扫码图标
		toScan() {
			// 只允许通过相机扫码
			uni.scanCode({
				onlyFromCamera: true,
				success: async codeRes => {
					// 初始化vuxe中优惠券数据
					this.$M_Cm('MUTA_SETCOUPON', '');
					this.$M_Cm('MUTA_SETCOUPONLIST', []);
					// 如果扫的是小程序码
					if (codeRes.scanType === 'WX_CODE') {
						// 获取到机器码和优惠券
						const clientIdAndCoup = codeRes.path.split('=')[1];
						// 获取机器码
						const clientId = clientIdAndCoup.split('-')[0];
						// 获取优惠券
						const coupon = clientIdAndCoup.split('-')[1];
						// 如果扫描的小程序有机器编码
						if (clientId) {
							// 登录
							const appLoginData = await appLogin({ clientId, flag: coupon }, true);
							if (appLoginData) {
								// // 重新刷新页面数据
								this.$refs.paging.refresh();
							} else {
								// 如果有机器联系人
								if (this.GETT_clientStatus.contactName) {
									// 并且弹窗
									this.contactDailog();
								} else {
									// 如果没有用户信息，提示用户重新扫码
									this.scanCodeDialog();
								}
							}
						} else {
							// 如果有机器联系人
							if (this.GETT_clientStatus.contactName) {
								// 并且弹窗
								this.contactDailog();
							} else {
								// 如果没有用户信息，提示用户重新扫码
								this.scanCodeDialog();
							}
						}
					}
					// 如果扫的是二维码
					else if (codeRes.scanType === 'QR_CODE') {
						let clientId = codeRes.result;
						// 如果扫描的小程序有机器编码
						if (clientId) {
							// 登录
							const appLoginData = await appLogin({ clientId, flag: '' }, true);
							if (appLoginData) {
								// // 重新刷新页面数据
								this.$refs.paging.refresh();
							} else {
								// 如果有机器联系人
								if (this.GETT_clientStatus.contactName) {
									// 并且弹窗
									this.contactDailog();
								} else {
									// 如果没有用户信息，提示用户重新扫码
									this.scanCodeDialog();
								}
							}
						} else {
							// 如果有机器联系人
							if (this.GETT_clientStatus.contactName) {
								// 并且弹窗
								this.contactDailog();
							} else {
								// 如果没有用户信息，提示用户重新扫码
								this.scanCodeDialog();
							}
						}
					} else {
						// 如果扫描的是其他码，提示用户重新扫码
						this.scanCodeDialog();
					}
				}
			});
		},
		// 扫描小程序码弹窗提示
		scanCodeDialog() {
			uni.showModal({
				title: '提示',
				confirmText: '确定',
				confirmColor: '#3c9cff',
				content: '请扫描机器上的小程序码或二维码！！！',
				success: modelRes => {
					if (modelRes.confirm) {
						// 直接跳转扫码界面
						this.toScan();
					}
				}
			});
		},
		// 联系人弹窗
		contactDailog() {
			// 如果没有机器编码就提示联系管理员
			uni.showModal({
				title: '当前设备处于关机状态，请联系机主后重新扫码。',
				confirmText: '拨打电话',
				confirmColor: '#3c9cff',
				content: `联系人：${this.GETT_clientStatus.contactName}，联系电话：${this.GETT_clientStatus.contactPhone}`,
				success: modelRes => {
					if (modelRes.confirm) {
						uni.makePhoneCall({
							phoneNumber: this.GETT_clientStatus.contactPhone
						});
					}
				}
			});
		},
		// 点击支付按钮
		toTabCar() {
			this.$M_Dp('ACTI_TABIDX', 1);
		},
		// 获取小程序个人信息
		getUserInfo() {
			return new Promise((resolve, reject) => {
				uni.getUserProfile({
					desc: '用户我的页面展示效果',
					success: res => {
						if (res.errMsg === 'getUserProfile:ok') {
							const { nickName, avatarUrl } = res.userInfo;
							let param = {
								nickName,
								avatarUrl
							};
							this.$M_Cm('MUTA_AVATARNICK', param);
							resolve(true);
						} else {
							resolve(false);
						}
					},
					fail: err => {
						resolve(false);
					}
				});
			});
		},
		// 点击加入购物车
		async addCart(row) {
			// 增加用户体验
			uni.showLoading({
				title: '请稍等'
			});
			setTimeout(() => {
				uni.hideLoading();
			}, 200);
			// 看有vuex没有小程序个人信息，没有调用微信接口获取
			let isGetUserInfo = true;
			if (!this.isGetUserInfo) {
				isGetUserInfo = await this.getUserInfo();
			}
			if (!isGetUserInfo) {
				return;
			}
			// 加入购物车初始状态都是选中状态
			row['isCheck'] = true;
			// 获取vuxe购物车数据
			let shopCarts = this.$S_tabbar_shopCarts;
			// 如果不存在imgId这个属性，则创建
			if (!shopCarts[row['imgId']]) {
				// 给优惠码和优惠价的列表添加一个0值
				row.codeList.push(0);
				row.discountList.push(0);
				// 用$M_Extend继承row创建新对象并赋值给shopCarts的属性
				shopCarts[row['imgId']] = this.$M_Extend(row, {
					nums: 1
				});
			} else {
				// 如果存在imgId这个属性，则数量+1，总数totalPrice=价格goodsPrice*数量nums
				let nums = shopCarts[row['imgId']]['nums'] + 1;
				// $M_Big用来计算总数量的方法（具体用法请看common）
				row['totalPrice'] = this.$M_Big(row['goodsPrice'])
					.mul(nums)
					.toNumber();
				// 给优惠码和优惠价的列表添加一个0值
				row.codeList.push(0);
				row.discountList.push(0);
				shopCarts[row['imgId']] = this.$M_Extend(row, {
					nums
				});
			}
			// 修改vuex购物车数据
			this.$M_Dp('ACTI_SHOPCARTS', shopCarts);
		},
		// z-paging插件分页的方法
		async queryList(pageNo, pageSize) {
			// 如果是关机状态
			if (!this.GETT_clientStatus.startStatus) {
				this.$refs.paging.complete([]);
				// 如果是扫码进来的肯定会有机器的联系方式
				if (this.GETT_clientStatus.contactName) {
					// 并且弹窗
					this.contactDailog();
				} else {
					// 如果没有用户信息，提示用户重新扫码
					this.scanCodeDialog();
				}
				return;
			}
			// 如果存在优惠券要弹出优惠券窗口
			if (!!this.GETT_home_coupon) {
				this.coupPopShow = true;
			}
			let param = {
				clientId: this.GETT_clientId,
				size: pageSize,
				current: pageNo
			};
			// 发起获取商品类表请求
			API_selectProductList(param).then(res => {
				const { records } = res;
				if (records.length > 0) {
					goodsList.forEach(item => {
						records.forEach(item1 => {
							// 给前台数据赋值接口数组
							if (item1.no === item.imgId) {
								// 商品id
								item1.imgId = item.imgId;
								// 商品名字
								item1.imgName = item.imgName;
								// 商品图片
								item1.imgUrl = item.imgUrl;
								// 单价
								item1.goodsPrice = item1.rmbPrice;
								// 总价格
								item1.totalPrice = item1.rmbPrice;
								// 购物车对应商品是否选中
								item1.isCheck = true;
								// 优惠码
								item1.codeList = [];
								// 优惠价格
								item1.discountList = [];
								// 商品口味
								item1.flavorName = item.flavorName;
								item1.flavor = item.flavor;
								// 商品数量
								item1.nums = 1;
							}
							// 根据优惠券总数，计算出每件商品的预估到手价
							if (this.GETT_home_totalCoupon > 0) {
								// 预估到手价
								const estiPrice = this.$M_Big(item1.rmbPrice)
									.sub(this.GETT_home_totalCoupon)
									.toNumber();
								// 预估到手价最低也只能是0
								if (estiPrice <= 0) {
									item1.estiPrice = 0.01;
								} else {
									item1.estiPrice = estiPrice;
								}
							}
						});
					});
				}
				// this.$refs.paging.complete(records);
				// this.copyData = uni.$u.deepClone(records);
				
				var data = this.copyData;
				for(var i=0;i<records.length;i++){
					data.push(records[i]);
				}
				this.$refs.paging.complete(data);
				this.copyData = data;
				console.log('data=', data);
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.homeIdx {
	.estiPriceCon {
		.estiPriceTxt {
			position: relative;
			color: #ff9900;
			background-color: #fff5f4;
			border-right: 1px solid #fff;
		}

		.estiPrice {
			background-color: #f15c34;
			border-top-right-radius: 10rpx;
			border-bottom-right-radius: 10rpx;
		}
	}
}

.coupPopCon {
	left: 0;
	top: 10vh;
	height: 100vh;
	z-index: 10071;

	.coupPop {
		background-color: #ffedd8;

		.headerCon {
			border-bottom: 2rpx dashed #d59035;
		}

		.content {
			.contentCon {
				width: 60%;
				border-bottom: 2rpx solid #d59035;

				.rmbCls {
					// background-color: #926135;
					border-radius: 50%;
				}
			}
		}

		.immedCls {
			width: 60%;
			background-color: #ff4b4a;
			border-radius: 40rpx;
		}
	}
}
</style>