提交测试版

src/pages/everyday-donation/index.vue

@@ -72,7 +72,7 @@
                         <span class="border-circle" @click="showRandom = true">随喜</span>
                     </li>
                     <li v-for="(spec, index) in data.spec" :key="index">
-                        <span class="border-circle" :class="[Number(spec.money) === priceUnit && 'active']" @click="onPriceUnit(spec)">{{spec.money}}元</span>
+                        <span class="border-circle" :class="[Number(spec.money) === priceUnit && 'active', isDisabled(spec)]" @click="onPriceUnit(spec)">{{spec.money}}元</span>
                     </li>
                 </ul>
                 <div class="auto-donate">
@@ -103,14 +103,17 @@
                     <span>选择行善金额</span>
                 </div>
                 <ul class="spec brick-spec">
-                    <li class="random">
+                    <li class="random" v-if="onlySpecs && onlySpecs.length == 0">
                         <span class="border-circle" :class="[is_assign && 'active']" @click="onCustomeBrike">{{data.rule_btn}}</span>
                         <van-stepper v-model="buy_quantity" step="1" v-if="is_assign" />
                     </li>
                     <li v-for="(spec, index) in data.spec" :key="index">
                         <span 
                             class="border-circle" 
-                            :class="[Number(spec.money) === priceUnit && !is_assign &&  'active']"
+                            :class="[
+                                Number(spec.money) === priceUnit && !is_assign &&  'active',
+                                isDisabled(spec),
+                            ]"
                             @click="onPriceUnit(spec)"
                         >{{spec.spec_name}} {{spec.donate_number * Number(data.price)}}元</span>
                     </li>
@@ -135,7 +138,7 @@
                     <safe-area>
                         <div class='next-group'>
                             <span class="total">合计：<em>￥{{priceTotal}}</em></span>
-                            <button class="next" @click="onToPay">下一步</button>
+                            <button class="next" :disabled="!priceUnitId" @click="onToPay">下一步</button>
                         </div>
                     </safe-area>
                 </div>
@@ -169,7 +172,11 @@ export default {
         for(let i in query){
             query[i] = query[i].toString()
         }
+        console.log(query)
+        let onlySpecs = query.spec_ids ? query.spec_ids.split(',').map(v => Number(v)) : null;
+
         return {
+            onlySpecs,
             showRandom: false, // 随喜
             documentTitle: title,
             query,
@@ -215,6 +222,11 @@ export default {
         
     },
     methods: {
+        isDisabled(spec){
+            const { id } = spec;
+            if(!this.onlySpecs) return false;
+            return !this.onlySpecs.includes(id) ? 'spec-disabled': ''
+        },
         getSelectedSpec() {
             if(this.query.goods_type === '2'){
                 // 随喜
@@ -245,7 +257,10 @@ export default {
             }
             await this.getDynamicDataByGoodsId(goods_id);
             this.data = response;
-            this.priceUnit = this.data.spec[0].donate_number * Number(this.data.price)
+            if(!this.onlySpecs){
+                this.priceUnit = this.data.spec[0].donate_number * Number(this.data.price)
+                this.priceUnitId = this.data.spec[0].id;
+            }
         },
         async getDynamicDataByGoodsId(goods_id){
             const res = await getDynamicData(1, goods_id);
@@ -360,6 +375,10 @@ export default {
                     background: #f5f5f5;
                 }
             }
+            span.spec-disabled{
+                pointer-events: none;
+                opacity: 0.6;
+            }
         }
         li{
             text-align: center;
@@ -373,9 +392,14 @@ export default {
                 user-select: none;
                 color: #666;
                 &:active{
-                    background: #f5f5f5;
+                    background: rgba($primary-color, 0.1);
                 }
             }
+            span.spec-disabled{
+                pointer-events: none;
+                background: #f9f9f9;
+                color: #aaa;
+            }
         }
     }
     .brick-spec{
@@ -559,4 +583,4 @@ export default {
 		}
 	}
 }
-</style>
+</style>