|
|
@@ -1,361 +0,0 @@
|
|
|
-<template>
|
|
|
- <view>
|
|
|
- <view v-if="pageLoad">
|
|
|
- <view class="goods-info" v-if="goodsData">
|
|
|
- <view class="poi-info">
|
|
|
- <view class="img"></view>
|
|
|
- <view class="name">{{ storeData.poi_name }}</view>
|
|
|
- </view>
|
|
|
- <view class="goods-body">
|
|
|
- <view class="img"><image :src="orderData.img" mode="widthFix"></image></view>
|
|
|
- <view class="body-info">
|
|
|
- <view class="goods-name">{{ goodsData.product_name }}</view>
|
|
|
- <view class="price">
|
|
|
- <view class="price-left">
|
|
|
- <view class="pay-price">{{$dialog.formatMoney(orderData.price,true)}}</view>
|
|
|
- <view class="line-price">{{$dialog.formatMoney(orderData.line_price,true)}}</view>
|
|
|
- <view class="sale">{{$dialog.disFormat(orderData.price,orderData.line_price)}}折</view>
|
|
|
- </view>
|
|
|
- <view class="price-right">x {{orderData.number}}</view>
|
|
|
- </view>
|
|
|
- <view class="goods-safe">
|
|
|
- <view class="safe-item"><image src="/static/image/check.png"></image>过期退</view>
|
|
|
- <view class="safe-item"><image src="/static/image/check.png"></image>随时退</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="order-mobile">
|
|
|
- <view class="name">联系方式（选填）</view>
|
|
|
- <view class="mobile-input">
|
|
|
- <view class="input-left">
|
|
|
- <input type="number" v-model="mobile" class="input" placeholder="输入手机号码（仅限于商家确认）" />
|
|
|
- </view>
|
|
|
- <view class="input-right"><button type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" size="mini">一键填写</button></view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="order-buy-read" @click="openRule(1)">
|
|
|
- <view class="name">购买须知</view>
|
|
|
- <view class="right"><image src="/static/image/right-black.png"></image></view>
|
|
|
- </view>
|
|
|
- <view class="order-pay-btn" v-if="orderData">
|
|
|
- <view class="pay-group">
|
|
|
- <view class="pay-money">
|
|
|
- <text>实付</text>
|
|
|
- {{orderData?$dialog.formatMoney(orderData.price,true):'0.00'}}
|
|
|
- </view>
|
|
|
- <view class="pay-btn">
|
|
|
- {{orderData.life_goods_id}}
|
|
|
- <pay-button-sdk
|
|
|
- :mode="2"
|
|
|
- :goods-type="2"
|
|
|
- :goods-id="orderData.life_goods_id"
|
|
|
- :order-id="orderData.order_sn"
|
|
|
- bind:getgoodsinfo="getGoodsInfo"
|
|
|
- bind:placeorder="userLogin"
|
|
|
- bind:error="onErrors"
|
|
|
- bind:pay="onPay"
|
|
|
- ></pay-button-sdk>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- <button type="primary" :disabled="disabled" @click="payOrder">立即支付 </button> -->
|
|
|
- <view class="safe-height"></view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="" v-else>
|
|
|
- <view class="skeleton">
|
|
|
- <view class="skeleton-line max animate" style="height: 200upx;"></view>
|
|
|
- <view class="skeleton-line animate"></view>
|
|
|
- <view class="skeleton-line min animate"></view>
|
|
|
- <view class="skeleton-line min animate"></view>
|
|
|
- <view class="skeleton-line max animate" style="height: 200upx;"></view>
|
|
|
- <view class="skeleton-line max animate" style="height: 200upx;"></view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <uni-popup ref="rulepopup" type="bottom" border-radius="10px 10px 0 0" background-color="#ffffff">
|
|
|
- <view class="service-popup popup-height" v-if="goodsData">
|
|
|
- <view class="title" @click="openRule(2)">购买须知 <view class="close"><image src="/static/image/close.png"></image></view></view>
|
|
|
- <view class="rule-list">
|
|
|
- <view class="rule-item">
|
|
|
- <view class="icon"><image src="/static/image/rule-date.png"></image></view>
|
|
|
- <view class="item-top">
|
|
|
- <view class="name">可用日期</view>
|
|
|
- <view class="desc">
|
|
|
- <span class="mix-item" v-if="goodsData.use_date_type==1">
|
|
|
- 自购买之日起{{ goodsData.day_duration }}天有效
|
|
|
- </span>
|
|
|
- <span class="mix-item" v-if="goodsData.use_date_type==2">
|
|
|
- 有效期：{{ $dialog.dateFormat(goodsData.use_time_start,'yyyy-MM-dd') }}至{{ $dialog.dateFormat(goodsData.use_time_end,'yyyy-MM-dd') }}
|
|
|
- </span>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="rule-item">
|
|
|
- <view class="icon"><image src="/static/image/rule-time.png"></image></view>
|
|
|
- <view class="item-top">
|
|
|
- <view class="name">可用时间</view>
|
|
|
- <view class="desc" v-if="goodsData.can_no_use_date==1">商家营业时间可用</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="rule-item">
|
|
|
- <view class="icon"><image src="/static/image/rule-rule.png"></image></view>
|
|
|
- <view class="item-top">
|
|
|
- <view class="name">预约规则</view>
|
|
|
- <view class="desc" v-if="goodsData.booking_type==1">无需预约，高峰期可能需要排队</view>
|
|
|
- <view class="desc" v-if="goodsData.booking_type==2">
|
|
|
- 需要提前<span>{{ goodsData.booking_date }}</span>{{ goodsData.booking_unit==1?'天':'小时' }}预约
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="rule-item">
|
|
|
- <view class="icon"><image src="/static/image/rule-refund.png"></image></view>
|
|
|
- <view class="item-top">
|
|
|
- <view class="name">退款政策<view class="tips">随时退/过期退</view></view>
|
|
|
- <view class="desc">随时退款：未核销的商品支持随时申请退款；过期自动退：商品若在有效时间内未核销使用，到期之后系统将自动发起退款</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </uni-popup>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-var app;
|
|
|
-import * as Api from "@/static/api/order.js";
|
|
|
-var loadingPayBtn = false
|
|
|
-export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- pageLoad:true,
|
|
|
- orderData:null,
|
|
|
- goodsData:null,
|
|
|
- storeData:null,
|
|
|
- orderSn:"",
|
|
|
- mobile:"",
|
|
|
- loadingPayBtn:0
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad({order}) {
|
|
|
- app = this;
|
|
|
- app.orderSn = order;
|
|
|
- app.getOrderDetail()
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.$scope.getGoodsInfo = this.getGoodsInfo;
|
|
|
- this.$scope.userLogin = this.userLogin;
|
|
|
- this.$scope.onErrors = this.onErrors;
|
|
|
- this.$scope.onPay = this.onPay;
|
|
|
- },
|
|
|
- methods: {
|
|
|
- getPhoneNumber(e){
|
|
|
- var detail = e.detail;
|
|
|
- Api.mobile(detail).then((res)=>{
|
|
|
- if (res.code == 0) {
|
|
|
- return app.$dialog.showSuccess(res.msg)
|
|
|
- }
|
|
|
- app.mobile = res.data.mobile;
|
|
|
- })
|
|
|
- },
|
|
|
- openRule(type){
|
|
|
- if (type == 1) {
|
|
|
- app.$refs.rulepopup.open()
|
|
|
- } else {
|
|
|
- app.$refs.rulepopup.close()
|
|
|
- }
|
|
|
- },
|
|
|
- onErrors(e){
|
|
|
- console.log("错误",e)
|
|
|
- if (app.loadingPayBtn == 1) {
|
|
|
- // app.payOrder()
|
|
|
- return ;
|
|
|
- }
|
|
|
- loadingPayBtn ++;
|
|
|
- },
|
|
|
- getGoodsInfo(event){
|
|
|
- console.log("getGoodsInfo",event)
|
|
|
- const { goodsId } = event.detail;
|
|
|
- // return new Promise(resolve => {
|
|
|
- // // 在此处开发者可以进行商品数据请求，获取商品信息
|
|
|
- // // 然后将商品信息传入 resolve 函数
|
|
|
- // resolve({
|
|
|
- // minLimits: 1,
|
|
|
- // maxLimits: 2,
|
|
|
- // dateRule: '周一至周日可用',
|
|
|
- // relationType: 1,
|
|
|
- // validation: {
|
|
|
- // phoneNumber: {
|
|
|
- // required: true // 手机号是否必填
|
|
|
- // }
|
|
|
- // },
|
|
|
- // // 在 bind:getgoodsinfo 返回的 promise 的 resolve 函数中新增 marketingVersion 字段
|
|
|
- // marketingVersion: 2,
|
|
|
- // });
|
|
|
- // })
|
|
|
- return new Promise(resolve => {
|
|
|
- resolve({
|
|
|
- currentPrice: parseInt(app.orderData.price),
|
|
|
- goodsName: app.goodsData.product_name,
|
|
|
- goodsPhoto: app.goodsData.image_list[0].url,
|
|
|
- goodsLabels: [
|
|
|
- {type: 'EXPIRED_RETURNS'}, // 过期退
|
|
|
- {type: 'REFUND_ANYTIME'}, // 随时退
|
|
|
- ],
|
|
|
- minLimits: 1,
|
|
|
- maxLimits: 2,
|
|
|
- dateRule: '周一至周日可用',
|
|
|
- relationType: 1,
|
|
|
- validation: {
|
|
|
- phoneNumber: {
|
|
|
- required: false // 手机号是否必填, 为 true则必填，false选填，默认选填
|
|
|
- }
|
|
|
- },
|
|
|
- extra: {},
|
|
|
- tradeOption:{
|
|
|
- life_trade_flag :1, // 0：非融合链路（默认值） 1：走融合链路（标准融合/完全融合）
|
|
|
- is_use_tag:false // 泛知识是否接入交易规则，true：接入 false：不接入（默认值）
|
|
|
- },
|
|
|
- // 在 bind:getgoodsinfo 返回的 promise 的 resolve 函数中新增 marketingVersion 字段
|
|
|
- marketingVersion: 2,
|
|
|
- });
|
|
|
- });
|
|
|
- },
|
|
|
- userLogin(event) {
|
|
|
- console.log("userLogin",event)
|
|
|
- return new Promise((resolve, reject) => {
|
|
|
- tt.login({
|
|
|
- success(e){
|
|
|
- console.log("登录成功",e)
|
|
|
- resolve()
|
|
|
- },
|
|
|
- fail: () => reject()
|
|
|
- });
|
|
|
- });
|
|
|
- },
|
|
|
- onPay(event){
|
|
|
- console.log("onpay",event)
|
|
|
- const { status, outOrderNo, result } = event.detail;
|
|
|
- console.log(status, outOrderNo, result)
|
|
|
- if (status === 'success') {
|
|
|
- const { code } = result;
|
|
|
- if (code === 0) {
|
|
|
- // 继续支付成功
|
|
|
- } else {
|
|
|
- // 继续支付失败（超时、取消、关闭）
|
|
|
- }
|
|
|
- } else {}
|
|
|
- },
|
|
|
- payOrder(){
|
|
|
- Api.toPay({order:app.orderSn,mobile:app.mobile}).then((res)=>{
|
|
|
- if (res.code == 0) {
|
|
|
- return app.$dialog.showSuccess(res.msg)
|
|
|
- }
|
|
|
- uni.requestPayment({
|
|
|
- orderInfo:res.data.pay,
|
|
|
- service:5,
|
|
|
- success(resp){
|
|
|
- if (resp.code == 0) { // res.code=0时，才表示支付成功
|
|
|
- app.$dialog.showSuccess("支付成功","none",function(){
|
|
|
- uni.navigateTo({
|
|
|
- url:"/pages/order/detail?order="+app.orderSn
|
|
|
- })
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- fail(resp) {
|
|
|
- app.$dialog.showSuccess("支付失败，可再次重试","none",function(){
|
|
|
- uni.navigateTo({
|
|
|
- url:"/pages/order/detail?order="+app.orderSn
|
|
|
- })
|
|
|
- });
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
- },
|
|
|
- getOrderDetail(){
|
|
|
- app.pageLoad = false
|
|
|
- Api.confirm({order:app.orderSn}).then((res)=>{
|
|
|
- app.pageLoad = true
|
|
|
- if (res.code && res.code == 0) {
|
|
|
- return app.$dialog.showSuccess(res.msg)
|
|
|
- }
|
|
|
- app.orderData = res.data;
|
|
|
- app.goodsData = res.data.product;
|
|
|
- app.storeData = res.data.poi;
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
-page{background-color: #f8f8f8;}
|
|
|
-.order-mobile{margin-top: 20upx;padding: 0 20upx;background-color: #fff;}
|
|
|
-.order-mobile .name{padding: 20upx 0;font-size: 28upx;color: #333;font-weight: bold;border-bottom: 2upx solid #f8f8f8;}
|
|
|
-.order-mobile .mobile-input{padding: 20upx 0;display: flex;align-items: center;justify-content: space-between;gap: 20upx;}
|
|
|
-.order-mobile .mobile-input .input-left{flex: 1;}
|
|
|
-.order-mobile .mobile-input .input-left .input{font-size: 24upx;width: 100%;}
|
|
|
-.order-buy-read{background-color: #fff;margin-top: 20upx;padding: 20upx;display: flex;align-items: center;justify-content: space-between;font-size: 28upx;}
|
|
|
-.order-buy-read .right image{width: 40upx;height: 40upx;}
|
|
|
-.order-pay-btn{
|
|
|
- background-color: #fff;
|
|
|
- padding: 20upx;
|
|
|
- position: fixed;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- .safe-height{
|
|
|
- height: env(safe-area-inset-bottom);
|
|
|
- width: 100%;
|
|
|
- background-color: #fff;
|
|
|
- }
|
|
|
- .pay-group{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- .pay-money{
|
|
|
- font-size: 32upx;
|
|
|
- color: #f00;
|
|
|
- font-weight: bold;
|
|
|
- text{
|
|
|
- font-size: 24upx;
|
|
|
- font-weight: normal;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.goods-info{background-color: #fff;padding: 0 20upx;margin-top: 20upx;}
|
|
|
-.goods-info .poi-info{display: flex;align-items: center;font-size: 28upx;color: #666;padding: 20upx 0;border-bottom: 2upx solid #f8f8f8;}
|
|
|
-.goods-info .goods-safe{display: flex;align-items: center;font-size: 24rpx;color: #999;gap: 40upx;}
|
|
|
-.goods-info .goods-safe .safe-item{display: flex;align-items: center;}
|
|
|
-.goods-info .goods-safe image{width: 30upx;height: 30upx;margin-right: 10upx;}
|
|
|
-.goods-body{padding: 20upx 0;display: flex;align-items: flex-start;}
|
|
|
-.goods-body .img{height: 200upx;overflow: hidden;}
|
|
|
-.goods-body .img image{width: 200upx;border-radius: 10upx;}
|
|
|
-.goods-body .body-info{flex: 1;margin-left: 20upx;}
|
|
|
-.goods-body .goods-name{font-size: 28upx;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
|
|
|
-.goods-body .price{display: flex;align-items: center;margin: 20upx 0;}
|
|
|
-.goods-body .price .price-left{display: flex;align-items: center;}
|
|
|
-.goods-body .price .pay-price{color: #FF4747;font-size: 32rpx;font-weight: bold;margin-right: 10upx;}
|
|
|
-.goods-body .price .line-price{color: #999999;font-size: 22rpx;text-decoration-line: line-through;margin-right: 10upx;}
|
|
|
-.goods-body .price .sale{background-color: #FDEBE5;border: 4rpx;font-size: 22rpx;color: #FF4747;padding: 10rpx;}
|
|
|
-.goods-body .price .price-right{margin-left: auto;margin-right: 20upx;font-size: 24upx;padding: 10upx;color: #666;}
|
|
|
-
|
|
|
-.service-popup.popup-height{height: 60vh;}
|
|
|
-.service-popup.popup-white{background-color: #fff;margin-top: 20upx;}
|
|
|
-.service-popup.popup-white .title{border-bottom: 2upx solid #f8f8f8;}
|
|
|
-.service-popup .title{line-height: 80upx;font-size: 32rpx;color: #333;font-weight: bold;padding: 0 20upx;display: flex;align-items: center;}
|
|
|
-.service-popup .title .close{margin-left: auto;margin-right: 0;display: flex;align-items: center;justify-content: center;}
|
|
|
-.service-popup .title .close image{width: 40upx;height: 40upx;}
|
|
|
-.service-popup.popup-white .rule-list{padding-bottom: 20upx;}
|
|
|
-
|
|
|
-.service-popup .rule-item{display: flex;margin-top: 40upx;align-items: start;padding: 0 20upx;}
|
|
|
-.service-popup .rule-item image{width: 50upx;height: 50upx;}
|
|
|
-.service-popup .rule-item .item-top{margin-left: 20upx;}
|
|
|
-.service-popup .rule-item .name{font-size: 28rpx;color: #333;font-weight: bold;margin-bottom: 10upx;display: flex;align-items: center;}
|
|
|
-.service-popup .rule-item .name .tips{color: #333;border: 2upx solid #ddd;border-radius: 5upx;font-size: 22rpx;font-weight: normal;margin-left: 40upx;background-color: #fff;padding: 5upx 10upx;}
|
|
|
-.service-popup .rule-item .desc{color: #999;font-size: 24rpx;line-height: 40upx;}
|
|
|
-</style>
|
Zory