pet_uni/pages/CardDetail/index.vue

<template>
	<HeaderNav title="付款权益卡" :is-back="true"></HeaderNav>
	<view class="body-background" :style="{
		backgroundImage:'url('+staticImage.wallpaperBgImage+')'
		}"></view>
	<view class="app-wallpaper">
    <view class="detail-box-container">
      <view class="detail-box-top">
        <view class="card-padding">
          <view class="card-container row" :style="{backgroundImage:'url('+staticImage.cardDetailCard+')'}">
            <view class="card-container-background col-12"></view>
            <view class="card-container-background-main row">
              <view class="card-col row" >

                <view class="card-right">
                  <view class="card-title">{{ cardDetail.title }}</view>
                  <view class="card-desc-container">
                    <view class="card-desc">
                      <view class="card-desc-text">{{ cardDetail.profile }}</view>
                      <view class="card-desc-background"></view>
                    </view>
                  </view>
                  <view class="card-content-container row">
                    <view class="card-avatar">
                      <image class="img" mode="aspectFit" :src="staticImage.dogImage"/>
                    </view>
                    <view class="card-content">
                      <view class="card-content-top">
                          {{ cardDetail.illustrate }}
                      </view>
                      <view class="card-content-bottom">
                          {{ cardDetail.que_illustrate }}
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="top-shadow">

        </view>
      </view>
      <view class="detail-box-bottom">
        <view class="coupons-list">
          <view class="coupons-item-container" :style="{
					backgroundImage:'url('+(staticImage.couponsBackground)+')'
					}">
            <view class="coupons-item row">
              <view class="coupons-left ">
                <view class="coupons-big-title-group row">
                  <view class="coupons-big-title">{{cardDetail.deduction}}</view>
                  <view class="coupons-big-desc">元</view>
                </view>
                <view class="coupons-cause">
                  {{cardDetail.min_price}}
                </view>
              </view>
              <view class="coupons-right col row">
                <view class=" row">
                  <view class="coupons-title-group col-12 row">
                    <view class="coupons-title">
                      {{cardDetail.coupons_title}}
                    </view>
                    <view class="coupons-btn">
                      {{cardDetail.coupons_number}}张
                    </view>
                  </view>
                  <view class="coupons-desc col-12">满{{ cardDetail.min_price }}元使用仅限线上预约下单使用</view>
                </view>
                <view class="coupons-gq " >
                  <image class="img" :src="staticImage.couponsGQ" mode="aspectFill" />
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
	</view>
  <view class="footer-menu row">
    <view class="foot-menu-checkbox-group row col">
      <view class="foot-menu-checkbox" >
        <u-checkbox
            shape="circle"
            size="28"
            custom-style="margin-top:0;margin-bottom:0;"
            icon-size="24"
            active-color="#4DC3B8"
            :checked="readInfo"
            @change="readInfo = !readInfo"
        ></u-checkbox>
      </view>
      <view class="foot-menu-title">
        <text @click="readInfo = !readInfo">我已阅读并同意</text><text class="foot-menu-url" @click="showAgreement">《付费权益卡协议》</text>
      </view>
    </view>
    <view>
      <MzButton
          title="立即购买"
          button-color="#4DC3B8"
          font-color="#FFFFFF"
          button-width="200rpx"
          @click="readInfo ? cardPay() :$u.toast('请先同意协议')"
      >
      </MzButton>
    </view>
  </view>
  <uv-popup ref="agreement" mode="bottom" round="20rpx" closeable safeAreaInsetTop safeAreaInsetBottom custom-style="position:relative;">
    <view class="title row" style="position:absolute;justify-content: center;width:100%;top:20rpx;left:0;">
      <view class="value col" style="position: relative;text-align: center;">

        <!--        <u-text text="协议内容" size="38" color="#191919"></u-text>-->
        <view class="" style="position: relative;display:inline-block;">
          <view style="color:#191919;font-size:38rpx;display:inline-block;position: relative;z-index: 2;">协议内容</view>
          <view class="background" style="width:100%;height:50%;position: absolute;bottom:0;left:0;background-color:rgba(227, 191, 119, 0.6);display:inline-block;z-index:1;"></view>
        </view>
      </view>
    </view>
    <view style="padding:30rpx;max-height:700rpx;overflow: auto;">
      <u-parse :content="PayCardPolicy"></u-parse>
    </view>
  </uv-popup>
	<!-- <RightNav></RightNav> -->
</template>

<script>
	import {
		imghost
	} from '@/config/host.js'
	import HeaderNav from '@/components/HeaderNav/Index.vue';
	import FooterNav from '@/components/FooterNav/Index.vue';
	import RightNav from '@/components/RightNav/Index.vue';
	import MzButton from '../../components/MzButton/Index.vue';
	import api from '@/utils/functions.js';
  import {cardDetail} from "../../api/card";
  import {cardOrder} from "@/api/order";
  import {getConfig} from "@/api/other";
	export default {
		components: {
			HeaderNav,
			FooterNav,
			RightNav,
			MzButton
		},
		data() {
			return {
        id:'',
				title: 'Hello',
				loading: true,
        readInfo:false,
				staticImage: {
					screenActiveImg: imghost + '/screen-active.png',
					cardBackground: imghost + '/order-card-background.png',
					wallpaperBgImage:imghost +'/card-detail-background.png',
					dogImage:imghost+'/index-user-title-dog.png',
          cardDetailCard:imghost+'/card-detail-card.png',
          couponsBackground:imghost+'/card-detail-coupons.png',
				},
				indexBanner: [{
					image: imghost + '/banner.png',
					url: '',
				}],
				user: {
					avatar: imghost + '/banner.png',
					nickname: '清晨的风',
					coupons: 221,
					id: 88685
				},
				isTop: false,
				pagePadding: 100,
				petImage: imghost + '/pet_avatar1.jpeg',
          cardDetail:{},
				orderCardList:[
					{
						title:'成都市武侯区丰德国际4栋...',
						tags:['刷毛','洗澡'],
						do_time:'2023/05/03 15—17时',
						create_time:'2023/03/03 15:23:22',
					},
					{
						title:'成都市武侯区丰德国际4栋...',
						tags:['刷毛','洗澡'],
						do_time:'2023/05/03 15—17时',
						create_time:'2023/03/03 15:23:22',
					},
				],
        couponsList: [{
          price: '57',
          title: '57元抵扣券',
          cause: '满0.01使用',
          coupons_number:10,
          time: '满0.01元使用仅限线上预约下单使用',
          is_timeout: false,
        }],
        PayCardPolicy:'',
			}
		},
		onLoad(options) {
      this.id = options.id;
      this.getCardDetail();
		},
		methods: {
      showAgreement(){
        getConfig('PayCardPolicy').then(res => {
          this.PayCardPolicy = res.data.PayCardPolicy;
        })
        this.$refs.agreement.open();
      },
      cardPay(){
        cardOrder(this.id).then(data => {
          api.payment(data.data).then(res => {
            // api.success('支付成功');
            uni.redirectTo({url:'/pages/Order/done?type=card'});
          }).catch(err => {
            api.error('支付失败')
          })
        });
      },
      getCardDetail(){
        cardDetail({
          id:this.id
        }).then((res) => {
          this.cardDetail = res.data
        })
      },
        pay(){
            cardOrder(this.id).then(data => {
                console.log(data);
            });



            // uni.requestPayment({
            //     "provider": "wxpay",
            //     "orderInfo": {
            //         "appid": "wx499********7c70e",  // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
            //         "noncestr": "c5sEwbaNPiXAF3iv", // 随机字符串
            //         "package": "Sign=WXPay",        // 固定值
            //         "partnerid": "148*****52",      // 微信支付商户号
            //         "prepayid": "wx202254********************fbe90000", // 统一下单订单号
            //         "timestamp": 1597935292,        // 时间戳（单位：秒）
            //         "sign": "A842B45937F6EFF60DEC7A2EAA52D5A0" // 签名，这里用的 MD5/RSA 签名
            //     },
            //     success(res) {},
            //     fail(e) {}
            // })
        }
		},
		onPageScroll(res) {
			if(res.scrollTop <= 20){
				uni.$emit('isTop', true);
			}else{
				uni.$emit('isTop', false);
			}
		},
		created() {
			this.pagePadding = (api.navHeight().navPaddingTop +
				api.navHeight().navHeight + (api.navHeight().headerPadding * 2))
		}
	}
</script>

<style lang="scss">
	@import './components/index.scss';
</style>