142 lines
3.8 KiB
Vue
142 lines
3.8 KiB
Vue
<route lang="json5" type="home">
|
|
{
|
|
style: {
|
|
navigationStyle: 'custom',
|
|
navigationBarTitleText: '奶茶活动',
|
|
navigationBarBackgroundColor:'#FFF',
|
|
},
|
|
}
|
|
</route>
|
|
|
|
<template>
|
|
<scroll-view scroll-y class="page-wrapper">
|
|
<view class="nav-btn" @click="toOrder">我的订单</view>
|
|
<view class="wrapper flex flex-col flex-items-center box-border">
|
|
<view v-for="(item,key) in productList" :key="key">
|
|
<brand :products="item" :brandName="key"/>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import brand from './components/brand';
|
|
import { getProductList, goPay, login } from '../../api/ycnc'
|
|
import { onMounted, ref, provide, unref } from 'vue';
|
|
// import { getQueryString , isIOS, isAndroid } from '../../utils/utils';
|
|
import useCode from './hooks/useCode';
|
|
import usePay from './hooks/usePay';
|
|
|
|
const productList = ref([]);
|
|
const authCode = ref('');
|
|
|
|
const handleBuy = (productData) => {
|
|
pay(productData)
|
|
}
|
|
|
|
const goDetail = (productData) => {
|
|
const {ProductId} = productData
|
|
uni.navigateTo({
|
|
url:`/pages/ycnc/detail?product_id=${ProductId}`
|
|
})
|
|
}
|
|
|
|
const pay = (productData) => {
|
|
const {ProductId,voucherAmount} = productData
|
|
console.log('商品数据',productData);
|
|
const params = {
|
|
product_id:ProductId
|
|
}
|
|
goPay({params}).then(res => {
|
|
const {order_no,notify_url} = res;
|
|
const {payFunc} = usePay();
|
|
payFunc({order_no,notify_url,TranAmt:voucherAmount})
|
|
}).catch(err => {
|
|
console.log(err);
|
|
})
|
|
}
|
|
|
|
provide('custom-events',{
|
|
handleBuy,
|
|
goDetail
|
|
})
|
|
|
|
const toOrder = () => {
|
|
uni.navigateTo({
|
|
url:'/pages/ycnc/order'
|
|
})
|
|
};
|
|
|
|
onMounted(async ()=>{
|
|
queryProducts();
|
|
// let testToken = import.meta.env.VITE_TEST_TOKEN
|
|
// window.localStorage.setItem('token',testToken)
|
|
const token = window.localStorage.getItem('token') || '';
|
|
if(!token){
|
|
console.log('进入登录过程');
|
|
const code = await useCode();
|
|
authCode.value = code
|
|
const {token} = await login({params:{code:unref(authCode)}});
|
|
window.localStorage.setItem('token',token);
|
|
}
|
|
});
|
|
|
|
function handleData(arg,args){
|
|
return arg.reduce((total,current) =>{
|
|
const flag = current.brandFlag;
|
|
const flagData = args.filter(item => item.brandFlag === flag)
|
|
if(Array.isArray(total[flag])){
|
|
total[flag].push(...flagData)
|
|
}else{
|
|
total[flag] = [...flagData]
|
|
}
|
|
return total
|
|
},{})
|
|
}
|
|
|
|
//查询品牌，商品接口
|
|
const queryProducts = () => {
|
|
const params = {GID:'4894651'}
|
|
getProductList({params}).then(res => {
|
|
const {milkList,
|
|
milkVoucherList} = res
|
|
productList.value = handleData(milkList,milkVoucherList);
|
|
}).catch(err=>{
|
|
console.log(err);
|
|
})
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang='scss'>
|
|
.page-wrapper{
|
|
// width: 100vw;
|
|
// height: 100vh;
|
|
width:100%;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
}
|
|
.nav-btn{
|
|
position: absolute;
|
|
right: 0;
|
|
top:42rpx;
|
|
width: 42rpx;
|
|
height: 132rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 16rpx 0rpx 0rpx 16rpx;
|
|
font-weight: normal;
|
|
font-size: 22rpx;
|
|
color: #4BB8FF;
|
|
writing-mode: vertical-lr;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.wrapper{
|
|
width:100%;
|
|
min-height:100vh;
|
|
background: url('/static/ycnc/bg.png') no-repeat;
|
|
background-size:cover;
|
|
padding-top:750rpx;
|
|
}
|
|
</style> |