uniapp-h5/src/pages/ycnc/detail.vue

<route lang="json5" type="page">
    {
      style: {
        navigationStyle: 'custom',
        navigationBarTitleText: '商品详情',
        navigationBarBackgroundColor:'#FFF',
      },
    }
</route>

<template>
    <view class="w-full h-full flex flex-col">
        <scroll-view scroll-y class="w-full h-full overflow-y-auto flex-1">
            <view class="container">
                <image class="banner" :src="detailObj.main_image"></image>
                <view class="detail flex flex-col flex-justify-between">
                    <view class="proname">{{ detailObj.name }}</view>
                    <view class="num">
                        <text class="price">￥{{ detailObj.price }}</text>
                        <text class="ori">{{ detailObj.show_price }}</text>
                    </view>
                </view>
                <view class="desc" v-html="detailObj.description">
                    
                </view>
                <!-- <view class="desc">
                    <div class="big">购买须知</div>
                    <div class="small">【有效期】</div>
                    <p class="prog">
                        代金券到账后，10天有效，逾期视为自动放弃，不退不补。
                    </p>
                </view> -->
            </view>
        </scroll-view>
        <view class="pay-container">
            <view class="pay-btn" @click="toPay">
                立即支付
            </view>
        </view>
    </view>
</template>

<script setup>
    import { onMounted, reactive, ref, unref } from 'vue';
    import { onLoad } from '@dcloudio/uni-app';
    import { queryDetail, goPay, login } from '../../api/ycnc';
    import usePay from './hooks/usePay';
    import useCode from './hooks/useCode';

    const id = ref('')
    const authCode = ref('');

    const detailObj = reactive({})

    onLoad((options) => {
        const {product_id} = options;
        id.value = product_id
    })

    onMounted(() => {
      getDetail()
    })

    const getDetail = () => {
        const params = {
            product_id:unref(id)
        }
        queryDetail({params}).then(res => {
            Object.assign(detailObj,res)
        })
    }

    const toPay = async () => {
        const token = window.localStorage.getItem('token') || '';
        if(!token){
            const code = await useCode();
            authCode.value = code
            const {token} = await login({params:{code:unref(authCode)}});
            window.localStorage.setItem('token',token);
        } 
        const params = {
            product_id:unref(id)
        }
        goPay({params}).then(res => {
            const {order_no,notify_url,sign,plain_text} = res;
            const {payFunc} = usePay();
            payFunc({order_no,notify_url,TranAmt:detailObj.price,MerName:detailObj.brand,sign,plain_text})
        }).catch(err => {
            console.log(err);
        })
    }
</script>

<style lang='scss' scoped>
.banner{
    width: 100%;
    height:600rpx;
    display: block;
    box-sizing: border-box;
}
.detail{
    width: 694rpx;
    // height: 138rpx;
    border-bottom: 2rpx solid rgba(0,0,0,0.04);
    margin: 0 auto;
    box-sizing: border-box;
    padding:25rpx 0;
    .proname{
        font-weight: bold;
        font-size: 30rpx;
        color: #333333;
        margin-bottom:16rpx;
    }
    .price{
        font-weight: 700;
        font-size: 28rpx;
        color: #EA0000;
        margin-right:18rpx;
    }
    .ori{
        font-weight: 400;
        font-size: 28rpx;
        color: #A5A5A5;
        text-decoration: line-through;
    }
}
.desc{
    width: 694rpx;
    margin:0 auto;
    padding-top:44rpx;
    padding-bottom:24rpx;
    //旧版
    &:deep(.big-title) {
        font-weight: bold;
        font-size: 40rpx;
        color: #3D3D3D;
        margin-bottom:16rpx;
    }
    &:deep(.small-area) {
        margin-bottom:16rpx;
    }
    &:deep(.small-title){
        font-weight: 400;
        font-size: 32rpx;
        color: #333333;
        margin-bottom:16rpx;
    }
    &:deep(.small-content){
        font-weight: 400;
        font-size: 28rpx;
        color: #4D4D4D;
        line-height: 1.6;
    }
    //新版
    &:deep(.big){
        font-weight: bold;
        font-size: 40rpx;
        color: #3D3D3D;
        margin-bottom:16rpx;
    }
    &:deep(.small){
        font-weight: 400;
        font-size: 32rpx;
        color: #333333;
        margin-bottom:16rpx;
    }
    &:deep(.prog){
        font-weight: 400;
        font-size: 28rpx;
        color: #4D4D4D;
        margin-bottom:16rpx;
        line-height: 1.6;
    }
}
.pay-container{
    width:100%;
    height:138rpx;
    border-top:1px solid rgba(0,0,0,0.1);
}
.pay-btn{
    width: 600rpx;
    height: 88rpx;
    background: #EA0000;
    border-radius: 54rpx 54rpx 54rpx 54rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 32rpx;
    color: #FFFFFF;
    margin:25rpx auto;
}
</style>