feat: 增加界面

2021-11-25 21:13:38 +08:00
parent 52c1603176
commit 29da9c7746
33 changed files with 1896 additions and 870 deletions
@@ -1,5 +1,5 @@
 <template>
-    <div class="goods-detail" v-if="data">
+    <div class="goods-detail" v-if="data" :style="{paddingBottom: paddingBottom + 'px'}">
        <swiper class="swiper-container" :options="swiperOption">
            <swiper-slide>
                <div style="height: 100vw;" class="picture">
@@ -14,28 +14,32 @@
                <span>已有{{data.sales || 0}}人参与</span>
            </div>
        </div>
+        <div class="divider"></div>
+        <div class="panel">
+            <div class="panel-head">
+                <span class="title">详情</span>
+            </div>
+            <div v-html="data.content" class="goods-content"></div>
+        </div>
+        <div class="divider"></div>
        <div class="support">
            <div class="support-head">
-                <span class="label">供养者</span>
+                <span class="label">感恩功德</span>
                <ul class="external">
-                    <li class="active">实时</li>
-                    <li>月榜</li>
-                    <li>总榜</li>
+                    <li :class="[listType === lType.id && 'active']" v-for="lType in listTypes" :key="lType.id" @click="getPayRecords(lType)">{{lType.name}}</li>
                </ul>
            </div>
            <div>
-                <user-merit></user-merit>
-                <user-merit></user-merit>
-                <user-merit></user-merit>
-                <user-merit></user-merit>
+                <user-merit v-for="pay in payList" :key="pay.id" :data="pay"></user-merit>
            </div>
        </div>
-        <div class="detail-button-group">
-            <button class="merit-button" @click="showSpec = true">{{data.pay_name}}</button>
-        </div>

-        <van-popup v-model="showSpec" position="bottom" closeable :style="{ height: 'auto' }" :close-on-click-overlay="false" :close-on-popstate="true">
-            <div class="caret-spec">
+        <fixed-bottom ref="fixedBottom">
+            <button class="merit-button" @click="showSpec = true">{{data.pay_name}}</button>
+        </fixed-bottom>
+
+        <van-popup v-model="showSpec" position="bottom" closeable :style="{ height: 'auto' }" safe-area-inset-bottom :close-on-click-overlay="false" :close-on-popstate="true">
+            <div class="caret-spec" >
                <div class="head">
                    <span>参与流程： </span>
                    <ul class="step-inline">
@@ -46,12 +50,12 @@
                </div>
                <transition>
                    <template>
-                        <select-spec v-if="current === 0" v-model="spec_id" :data="data"></select-spec>
-                        <fill-information v-if="current === 1" :data="data"></fill-information>
+                        <select-spec v-if="current === 0" v-model="spec_id" :number.sync="quantity" :data="data"></select-spec>
+                        <fill-information v-if="current === 1" :data="data" @change="onDreamInfoChange"></fill-information>
                    </template>
                </transition>
                <div class="next-group">
-                    <span class="total">合计：￥289</span>
+                    <span class="total">合计：￥{{priceTotal}}</span>
                    <button class="next" @click="onNextStep">下一步</button>
                </div>
            </div>
@@ -62,7 +66,7 @@
 <script>
 import 'swiper/css/swiper.css'
 import { swiper, swiperSlide } from 'vue-awesome-swiper'
-import { getGoodsDetail } from '@/api'
+import { getGoodsDetail, getOrderCompare } from '@/api';
 import SelectSpec from './components/select-spec.vue'
 import FillInformation from './components/fill-information.vue';

@@ -74,7 +78,10 @@ export default {
        FillInformation
    },
    data(){
+
        return {
+            paddingBottom: 0,
+            fixedBottomHeight: 0,
            query: this.$route.query,
            showSpec: false,
            checked: false,
@@ -83,6 +90,8 @@ export default {
            value: '',
            spec_id: '',
            step: 0,
+            quantity: 1,
+            dreamInfo: null,
            swiperOption: {
                autoplay: 8000,
                initialSlide: 1,
@@ -91,23 +100,84 @@ export default {
                onSlideChangeEnd: swiper => {
                    console.log('onSlideChangeEnd', swiper.realIndex)
                }
+            },
+            listType: 1,
+            listTypes: [
+                { id: 1, name: '实时', },
+                { id: 2, name: '月榜', },
+                { id: 3, name: '总榜', },
+            ],
+            payList: [],
+        }
+    },
+    computed: {
+        priceUnit(){
+            const spec = this.data.spec.find(item => item.id === this.spec_id);
+            if(!spec){
+                return 0;
            }
+            return Number(spec.price)
+        },
+        priceTotal(){
+            if(this.is_auto){
+                return (parseInt(this.priceUnit * 100, 10) * this.quantity * 30) / 100
+            }
+            return (parseInt(this.priceUnit * 100, 10) * this.quantity) / 100;
        }
    },
    mounted(){
        this.getGoodsDetail('common');
    },
    methods: {
+        // dreamInfo: 心愿信息
+        onDreamInfoChange(dreamInfo){
+            this.dreamInfo = dreamInfo;
+        },
+        getSelectedSpec(){
+            const spec = this.data.spec.find(spec => spec.id === this.spec_id);
+            return spec;
+        },
        onNextStep(){
            this.current += 1;
-            if(this.current > 3){
-                this.current = 0
+            const selectedSpec = this.getSelectedSpec();
+
+            if(this.current > 1){
+                const { merit_name_id, dream } = this.dreamInfo;
+                this.$router.push({
+                    name: 'pay',
+                    query: {
+                        ...this.$route.query,
+                        is_auto: this.is_auto ? 1 : 0,
+                        spec_id: selectedSpec.id,
+                        friendly_time: this.number,
+                        quantity: this.quantity,
+                        title: this.data.name,
+                        subTitle: selectedSpec.spec_name,
+                        amount: this.priceTotal,
+                        // merit_name_id: ,
+                        dream,
+                        merit_name_id,
+                        is_customized: 0,
+                        from: 'common_goods', // 标识为通用商品
+                    }
+                })
            }
        },
        async getGoodsDetail(type){
            const { goods_id, temple_id } = this.$route.query;
            const response = await getGoodsDetail(type, goods_id, temple_id);
            this.data = response;
+            await this.getPayRecords({ id: 1});
+            this.$nextTick(() => {
+                this.paddingBottom = this.$refs.fixedBottom.getOffsetHeight()
+            })
+        },
+        // 获取感恩功德
+        async getPayRecords(lType){
+            this.listType = lType.id;
+            const res = await getOrderCompare(this.query.temple_id, this.listType, this.query.goods_id, 3 );
+            console.log('pay record', res)
+            this.payList = res.results;
        },
    }
 }
@@ -115,6 +185,14 @@ export default {

 <style lang="scss">
 .goods-detail{
+    .goods-content{
+        padding-left: .3rem;
+        padding-right: .3rem;
+        * {
+            max-width: 100%;
+            font-size: .35rem;
+        }
+    }
    .support{
        .support-head{
            padding: 0 .4rem;
@@ -155,6 +233,7 @@ export default {
            font-size: .5rem;
            padding-top: .2rem;
            color: #19282E;
+            line-height: 1.3;
        }
        .introduction{
            font-size: .37rem;
@@ -190,20 +269,23 @@ export default {
 		background: white;
 		border-top: .01rem solid #ddd;
        padding: .3rem;
-		.merit-button{
-			display: inline-block;
-			background: $primary-color;
-			color: white;
-			height: 1.2rem;
-			font-size: .37rem;
-            min-width: 60%;
-			padding: 0 .53rem;
-			border: .01rem solid $primary-color;
-            border-radius: .13rem;
-		}
+
 	}
+    .merit-button{
+        display: block;
+        background: $primary-color;
+        color: white;
+        height: 1.2rem;
+        font-size: .37rem;
+        min-width: 60%;
+        padding: 0 .53rem;
+        margin-top: .3rem;
+        margin-left: auto;
+        margin-right: auto;
+        border: .01rem solid $primary-color;
+        border-radius: .13rem;
+    }
    .caret-spec{
-        padding-bottom: 1.6rem;
        .head{
            display: flex;
            justify-content: space-between;
@@ -257,12 +339,8 @@ export default {
        .next-group{
            display: flex;
            justify-content: space-between;
-            padding: .4rem ;
-            position: absolute;
+            padding: .2rem .4rem ;
            background: white;
-            bottom: 0;
-            left: 0;
-            right: 0;
            align-items: center;
            border-top: 1px solid #ededed;
            .total{