vibe-coding-cn/yshop/yshop-drink-uniapp/pages/index/index.vue

<template>
 <layout>
	<view class="container">
			<view class="banner">
				<uv-swiper class="bg" height="250" imgMode="aspectFill" keyName="image" :list="listAds" indicatorMode="dot" indicatorStyle="bottom"></uv-swiper>
			</view>
			<view class="content">
				<view  class="flex justify-between font-size-sm  p-2 content-user" v-if="isLogin">
					<view class="flex align-center">
						<image :src="member.avatar ? member.avatar : '/static/images/logo.png'" class="rounded-circle" style="width:100rpx;height: 100rpx;"></image>
						<view  class="flex flex-column content-user-text ml-1">
							<text class="font-weight-bolder">{{ member.nickname }}</text>
							<view class="flex justify-between font-size-smaller mt-2">
								<view><text class="text-color-assist font-size-20">卡券:</text><text>{{member.couponCount}}</text></view>
								<view><text class="text-color-assist font-size-20">积分:</text><text>{{member.integral}}</text></view>
							</view>
						</view>	
					</view>
					<view class="flex align-center">
						<view class="bg-white py-1 px-2 content-user-login" >{{ member.cardId > 0 ? member.cardName : '普通会员' }}</view>
					</view>
				</view>
				<view  class="flex justify-between font-size-sm  p-2 content-user" v-else>
					<view class="flex align-center">
						<view><image src="/static/images/logo.png"  class="rounded-circle" style="width:100rpx;height: 100rpx;"></image></view>
						<text class="ml-1">加入意象会员,享受更多优惠</text>
					</view>
					<view class="flex align-center">
						<view class="bg-white py-1 px-2 content-user-login" @tap="login">前往登陆</view>
					</view>
				</view>
				<view class="content-user2 flex" style="">
					<view class="p-3 bg-white rounded" style="width: 350rpx;" @tap="goScan">
						<view style="position: relative;">
							<view style="position: absolute;top:0;left:0;;"><image src="/static/images/100.jpg" style="width:300rpx;height: 300rpx;"></image></view>
							<veiw style="position: relative;top:40rpx;">
								<view class="flex flex-column justify-center align-center" >
									<view class=" flex">
										<text class="font-size-medium font-weight-bold ">堂食点餐</text>
										<uv-icon size="10" color="#059825" name="play-right-fill"></uv-icon>
									</view>
									<view class="text-color-assist" style="font-size: 22rpx;">扫码享用美食</view>
								</view>
							</veiw>
						</view>
					</view>
					<view class="flex flex-column ml-1" style="width: 350rpx;">
						<view class="p-1 bg-white rounded" > 
							<view style="position: relative;width:300rpx;height: 150rpx;" @tap="takeout">
								<view style="position: absolute;top:0;left:0;">
									<image src="/static/images/300.jpg" mode="aspectFit" style="width:300rpx;height: 150rpx;"></image>
								</view>
								<veiw style="position: relative; top:20rpx" class="">
									<view class="flex flex-column pl-1" >
										<view class=" flex">
											<text class="font-size-medium font-weight-bold ">外卖到家</text>
											<uv-icon size="10" color="#059825" name="play-right-fill"></uv-icon>
										</view>
										<view class="text-color-assist" style="font-size: 22rpx;">美食送到家</view>
									</view>
								</veiw>
							</view>
						</view>
						<view class="p-1 bg-white mt-1 rounded">
							<view style="position: relative;width:300rpx;height: 150rpx;" @tap="takein">
								<view style="position: absolute;top:0;left:0;">
									<image src="/static/images/200.jpg"  mode="aspectFit" style="width:300rpx;height: 150rpx;"></image>
								</view>
								<veiw style="position: relative;top:20rpx">
									<view class="flex flex-column pl-1" >
										<view class=" flex">
											<text class="font-size-medium font-weight-bold ">到店取餐</text>
											<uv-icon size="10" color="#059825" name="play-right-fill"></uv-icon>
										</view>
										<view class="text-color-assist" style="font-size: 22rpx;">下单免排队</view>
									</view>
								</veiw>
							</view>
						</view>
					</view>
				</view>
			
				<view class="coupon-warp" v-if="isLogin">
				  <view class="coupon-box">
					<view class="coupon-top">
					  <view class="title">
						<image class="img" src="https://b2c.yixiang.co/static/home/title-coupon.png" />
						<view class="text-color-assist">好券天天领不停</view>
					  </view>
					  <view class="btn-more" @tap="toDetail('/pages/components/pages/coupons/coupons',4)">查看更多</view>
					</view>
					<view class="coupon-list coupon-flex">
					 <view class="coupon-item" v-for="(item, index) in notCoupons" :key="index">
					   <view class="coupon-left">
						 <view class="discount">
						   <view class="unit pre-unit">
							￥
						   </view>
						   2
						 </view>
						 <view class="type" >
						   <text v-if="item.type == 1">自取</text>
						   <text v-else-if="item.type == 2">外卖</text>
						   <text v-else>通用</text>
						 </view>
					   </view>
					   <view class="coupon-right">
						 <view class="info">
						   <view class="tip">
							 满{{item.least}}减{{item.value}}
						   </view>
						 </view>
						 <view class="button get-coupon"  v-if="item.isReceive == 0" @tap="receive(item, index)">
						   领取
						 </view>
						 <view class="button get-coupon"  v-else>
						   已领取
						 </view>
					   </view>
					 </view>
				
					</view>
				  </view>
				</view>
				
				<view class="member-news">
					<view class="header">
						<view class="title">活动抢先知</view>
					</view>
					<view class="list">
						<view class="item" v-for="(item,index) in listNews" :key="index" @tap="goNews(item.id)">
							<image :src="item.picUrl"></image>
							<view class="title">{{ item.title }}</view>
						</view>
					</view>
				</view>
			
		</view>
	</view>
 </layout>
</template>

<script setup>
import {
  ref
} from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import {
  menuAds,
  getNews
} from '@/api/market'
import {
  getWechatConfig
} from '@/api/order'
import {
  couponReceive,
  couponIndexApi
} from '@/api/coupon'
import { storeToRefs } from 'pinia'
import { useMainStore } from '@/store/store'
// #ifdef H5
import * as jweixin from 'weixin-js-sdk'
// #endif
//
const main = useMainStore()
const { member,store, isLogin} = storeToRefs(main)
//const store = ref(main.store)
const listAds = ref([])
const listNews = ref([])
const notCoupons = ref([])
// const isLogin = ref(main.isLogin)

const handGetListAds = async () => {
	let shop_id = store.id ? store.id : 0;
	let data = await menuAds({
		shop_id: shop_id
	});
	if (data) {
		listAds.value = data.list;
		uni.setStorage({
				key: 'isActive',
				data: data.isActive
			});
		if(data.list.length > 0){
			uni.setStorage({
					key: 'shopAd',
					data: data.list[0].image
			 });
			}
		}
}

const getNewsList = async () => {
	let data = await getNews({});
	//console.log('listNews:',data)
	if (data) {
		listNews.value = data;
	}
}

const getCoupons = async(type) => {
	let page = 1;
	let pagesize = 4;
	notCoupons.value = await couponIndexApi({page:page,pagesize:pagesize});
}

const takein = () => {
	main.SET_ORDER_TYPE('takein')
	main.DEL_DESK()
	uni.switchTab({
		url: '/pages/menu/menu'
	})
}

const takeout = () => {
	main.SET_ORDER_TYPE('takeout')
	main.DEL_DESK()
	uni.switchTab({
		url: '/pages/menu/menu'
	}) 
}

const selectShop = () => {
	uni.navigateTo({
		url: '/pages/components/pages/shop/shop'
	})
}

const goNews = (id) => {
	uni.navigateTo({
			url: '/pages/components/pages/mine/news?id=' + id
		})
}

//const coupons = () => { 
// 	if(!isLogin) {
// 		uni.navigateTo({url: '/pages/components/pages/login/login'})
// 		return
// 	}
// 	uni.navigateTo({
// 		url: '/pages/components/pages/coupons/coupons?current=4'
// 	})
// }

const goScore = () => { 
	uni.navigateTo({
		url: '/pages/components/pages/scoreproduct/list'
	})
}

const toDetail = (page,index) => {
	uni.navigateTo({
		url: page + '?current=' + index
	})
}

const getNewPath = (path) => {
	const tempPath = decodeURIComponent(path);
	const strList = tempPath.split("?scene=");
	const scene = encodeURIComponent(strList[1]);
	const newPath = strList[0] +"?scene=" + scene;
	
	return newPath;
}

// 领取优惠券
const receive = async(coupon,index) => {
	let data = await couponReceive({id:coupon.id});
	if (data) {
		uni.showToast({
			title: '开领取成功',
			icon: 'success'
		})
		
		getCoupons()
	}
}

const goScan = async() => {
// #ifdef  MP-WEIXIN
	uni.scanCode({
		success: function (res) {
			const newPath = getNewPath(res.path);
			uni.navigateTo({
				url: '/' + newPath
			})
		},
		fail: function (res) {
			console.log('扫码失败：', res);
		}
	});
	// #endif
	
	// #ifdef  H5
	let config = await getWechatConfig();
	jweixin.config({
		 debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
	      appId: config.appId, // 必填，公众号的唯一标识
	      timestamp: config.timestamp, // 必填，生成签名的时间戳
	      nonceStr: config.nonceStr, // 必填，生成签名的随机串
	      signature: config.signature, // 必填，签名
	      jsApiList: [
	        'scanQRCode'
	      ] ,
	 }
	);
	jweixin.ready(function() {
		jweixin.scanQRCode({
			 needResult: 1,
			 success: function(res) {
			  //alert(res.resultStr)
			  console.log('sanc:',res)
			  location.href = res.resultStr
			 }
		})
		
	})
	
	// #endif
}

const invite = () => {
	// uni.showToast({
	// 	title: '开发中......',
	// 	icon: 'error'
	// })
	uni.navigateTo({
		url: '/pages/components/pages/due/index'
	})
}

const login = () => {
	uni.navigateTo({
		url: '/pages/components/pages/login/login'
	})
}




onLoad(() => {
 // main.init()
  handGetListAds()
  getNewsList()
	  
  if(isLogin.value){
	  getCoupons()
  }
  
})

</script>

<style lang="scss">

	
	
/* #ifdef H5 */
page {
	height: auto;
	min-height: 100%;
}
/* #endif */
page {
	//background-color: #ffffff!important;
}
.banner {
	position: relative;
	width: 100%;
	//height: 300rpx;
	
	.bg {
		width: 100%;
		height: 330rpx;
	}
	
	.intro {
		position: absolute;
		top: calc(50rpx + var(--status-bar-height));
		left: 40rpx;
		color: #FFFFFF;
		display: flex;
		flex-direction: column;
		
		.greet {
			font-size: $font-size-lg;
			margin-bottom: 10rpx;
		}
		
		.note {
			font-size: $font-size-sm;
		}
	}
}

.content {
	padding: 0 20rpx;
}
.content-user {
	background-color: #ffffff;position: relative;top:-56rpx;border-radius: 18rpx;
}
.content-user-text {
	font-size: 24rpx;color: #282828;
}
.content-user-login {
	color:#ffffff;border-radius: 40rpx;font-size: 20rpx;border: solid;background-color: #fa850d;
}

.content-user2 {
	position: relative;top:-70rpx;border-radius: 18rpx;padding: 30rpx 0;
}


.member-news {
	position: relative;
	top:-70rpx;
	width: 100%;
	margin-bottom: 30rpx;
	background-color: #ffffff;
	padding: 0 20rpx 30rpx 30rpx;
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 0;
		
		.title {
			font-size: $font-size-lg;
			font-weight: bold;
		}
		
		.iconfont {
			font-size: 52rpx;
			color: $text-color-assist;
		}
	}
	
	.list {
		width: 100%;
		display: flex;
		flex-direction: column;
		
		.item {
			width: 100%;
			height: 240rpx;
			position: relative;
			margin-bottom: 10rpx;
			
			image {
				width: 100%;
				height: 100%;
				border-radius: 8rpx;
			}
			
			.title {
				position: relative;
				font-size: 32rpx;
				font-weight: 500;
				width: 100%;
				top: -70rpx;
				left: 16rpx;
				color: #ffffff;
			}
		}
	}
}



.coupon-warp{
	position: relative;
	top:-70rpx;
	width: 100%;
	margin-bottom: 30rpx;
	background-color: #ffffff;
  //padding: 0 34rpx;
}
.coupon-box {
  padding: 24rpx;
  background: linear-gradient( 180deg, #FBECDB 0%, #FFFFFF 100%);
  border-radius: 15rpx;
  .coupon-top{
  display: flex;
  justify-content: space-between;
    margin-bottom: 20rpx;
  .title{
    flex: 1;
    display: flex;
    font-size: 24rpx;
    color: #988E83;
    align-items: center;
    .img{
      width: 121rpx;
      height: 28rpx;
      margin-right: 10rpx;
    }
  }
  .btn-more{
    font-size: 24rpx;
    color: #999;
    padding-right: 30rpx;
    background: url("https://b2c.yixiang.co/static/images/icon-arrow.png") no-repeat right center / 20rpx 20rpx;
  }
}

  ::v-deep .coupon-list {
    .item {
      margin-top: 24rpx;
      display: block;

      &:first-child {
        margin-top: 0;
      }
    }

    .coupon-item {
      width: 100%;
      height: 160rpx;
      background: url('https://b2c.yixiang.co/static/images/canvas/bg-coupon-l.png') no-repeat;
      background-size: 100% 100%;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .discount {
        display: flex;
        align-items: baseline;
        font-size: 68rpx;
        line-height: 64rpx;
        font-weight: bold;

        .unit {
          font-size: 32rpx;
        }
      }

      .info {
        font-size: 38rpx;

        .type {
          font-size: 32rpx;
          font-weight: bold;
          color: #333333;
          line-height: 45rpx;
        }

        .tip {
          font-size: 24rpx;
          //white-space: nowrap;
        }
      }

      .button {
        width: 144rpx;
        height: 64rpx;
        border-radius: 8rpx;
        background: #ee6d46;
        font-size: 24rpx;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .disable {
        background: #666666;
      }

      .expired {
        background: #999999;
      }

      .coupon-left {
        width: 206rpx;
        display: flex;
        justify-content: center;
      }

      .coupon-right {
        flex: 1;
        display: flex;
        padding: 0 32rpx;
        justify-content: space-between;
        align-items: center;
      }
    }

    &.coupon-flex {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .item:nth-child(2) {
        margin-top: 0;
      }

      .coupon-item {
        width: 309rpx;
        height: 120rpx;
        background-image: url('https://b2c.yixiang.co/static/images/canvas/bg-coupon-m.png');

        .coupon-left {
          width: 138rpx;
          flex-direction: column;
          align-items: center;

          .type {
            font-size: 20rpx;
            font-weight: bold;
            line-height: 28rpx;
          }
        }

        .coupon-right {
          flex-direction: column;
          padding: 0;
        }

        .discount {
          font-size: 32rpx;
          line-height: 45rpx;

          .unit {
            font-size: 24rpx;
          }
        }

        .info {
          .tip {
            font-size: 20rpx;
            line-height: 36rpx;
            margin-bottom: 9rpx;
          }
        }

        .button {
          width: 100rpx;
          height: 32rpx;
          border-radius: 16rpx;
          font-size: 20rpx;
        }
      }
    }

   
  }
}

</style>