修改了收费介绍中的价格

This commit is contained in:
zhangyong 2024-07-12 14:29:07 +08:00
parent 543dbd1414
commit 5b0b14b1f9
3 changed files with 95 additions and 27 deletions

BIN
dist.zip

Binary file not shown.

View File

@ -8,7 +8,8 @@
<div class="box box1">
<div class="top">
<h4>全托</h4>
<span><em>500</em></span>
<span><em>380</em></span>
<p>加急件1000元</p>
<button type="button" value="500" @click="goToLink()" style="display: none;">立即购买</button>
</div>
<ul>
@ -77,12 +78,14 @@
<div class="box box2">
<div class="top">
<h4>写材料+代理</h4>
<span><em :value="basePrice21 + additionalOptionsPrice2">{{ basePrice21 + additionalOptionsPrice2 }}</em></span>
<p :value="basePrice22 + additionalOptionsPrice2">加急件{{ basePrice22 + additionalOptionsPrice2 }}</p>
<div class="btnlist">
<!-- <span><em :value="basePrice21 + additionalOptionsPrice2">{{ basePrice21 + additionalOptionsPrice2 }}</em></span>
<p :value="basePrice22 + additionalOptionsPrice2">加急件{{ basePrice22 + additionalOptionsPrice2 }}</p> -->
<span><em>{{ totalPrice21 }}</em></span>
<p>加急件{{ totalPrice22 }}</p>
<!-- <div class="btnlist">
<button type="button" class="btn box2btn1" :value="basePrice21 + additionalOptionsPrice2" @click="goToLink()" style="display: none;">普件购买</button>
<button type="button" class="btn box2btn2" :value="basePrice22 + additionalOptionsPrice2" @click="goToLink()" style="display: none;">加急购买</button>
</div>
</div> -->
</div>
<ul>
<!-- 1 -->
@ -136,13 +139,13 @@
</li>
<!-- 11 -->
<li>
<input type="checkbox" id="chec1" value="100" v-model="additionalOptions2"
<input type="checkbox" id="chec1" value="50" v-model="additionalOptions2.chec1"
@change="updateTotalPrice2">
<p>安装包100元</p>
<p>安装包50元</p>
</li>
<!-- 12 -->
<li>
<input type="checkbox" id="chec2" value="50" v-model="additionalOptions2"
<input type="checkbox" id="chec2" value="50" v-model="additionalOptions2.chec2"
@change="updateTotalPrice2">
<p>系统演示视频文件50元</p>
</li>
@ -151,8 +154,9 @@
<div class="box box3">
<div class="top">
<h4>写材料</h4>
<span><em :value="basePrice3 + additionalOptionsPrice3">{{ basePrice3 + additionalOptionsPrice3 }}</em></span>
<button type="button" :value="basePrice3 + additionalOptionsPrice3" @click="goToLink()" style="display: none;">立即购买</button>
<!-- <span><em :value="basePrice3 + additionalOptionsPrice3">{{ basePrice3 + additionalOptionsPrice3 }}</em></span> -->
<span><em>{{ totalPrice3 }}</em></span>
<!-- <button type="button" :value="basePrice3 + additionalOptionsPrice3" @click="goToLink()" style="display: none;">立即购买</button> -->
</div>
<ul>
<!-- 1 -->
@ -196,13 +200,13 @@
</li>
<!-- 9 -->
<li>
<input type="checkbox" id="chec3" value="100" v-model="additionalOptions3"
<input type="checkbox" id="chec3" value="50" v-model="additionalOptions3.chec3"
@change="updateTotalPrice3">
<p>安装包100元</p>
<p>安装包50元</p>
</li>
<!-- 10 -->
<li>
<input type="checkbox" id="chec4" value="50" v-model="additionalOptions3"
<input type="checkbox" id="chec4" value="50" v-model="additionalOptions3.chec4"
@change="updateTotalPrice3">
<p>系统演示视频文件50元</p>
</li>
@ -252,11 +256,17 @@ export default {
data() {
return {
basePrice1: 500,
basePrice21: 400,
basePrice22: 500,
additionalOptions2: [],
basePrice3: 200,
additionalOptions3: [],
basePrice21: 300,
basePrice22: 1000,
additionalOptions2: {
chec1: false,
chec2: false,
},
basePrice3: 180,
additionalOptions3: {
chec3: false,
chec4: false,
},
}
@ -268,20 +278,67 @@ export default {
getButtonValue(event) {
// value
console.log(event.target.value);
}
},
// updateTotalPrice2() {
// //
// this.additionalOptions2 = this.additionalOptions2.concat(this.additionalOptions3);
// this.additionalOptions2 = this.additionalOptions2.concat(this.additionalOptions4);
// },
// updateTotalPrice3() {
// //
// this.additionalOptions3 = this.additionalOptions3.concat(this.additionalOptions4);
// this.additionalOptions3 = this.additionalOptions3.concat(this.additionalOptions5);
// }
updateTotalPrice2() {
let price = 0;
if (this.additionalOptions2.chec1) price += 50;
if (this.additionalOptions2.chec2) price += 50;
this.additionalOptions2.total = price;
},
updateTotalPrice3() {
let price = 0;
if (this.additionalOptions3.chec3) price += 50;
if (this.additionalOptions3.chec4) price += 50;
this.additionalOptions3.total = price;
},
},
// mounted() {
// this.dianji();
// },
computed: {
additionalOptionsPrice2() {
//
return this.additionalOptions2.reduce((total, option) => total + parseInt(option), 0);
totalPrice21() {
return this.basePrice21 + (this.additionalOptions2.total || 0);
},
additionalOptionsPrice3() {
//
return this.additionalOptions3.reduce((total, option) => total + parseInt(option), 0);
totalPrice22() {
return this.basePrice22 + (this.additionalOptions2.total || 0);
},
totalPrice3() {
return this.basePrice3 + (this.additionalOptions3.total || 0);
},
// additionalOptionsPrice2() {
// //
// return this.additionalOptions2.reduce((total, option) => total + parseInt(option), 0);
// },
// additionalOptionsPrice3() {
// //
// return this.additionalOptions3.reduce((total, option) => total + parseInt(option), 0);
// },
// totalPrice21() {
// //
// return this.basePrice21 + this.additionalOptionsPrice2;
// },
// totalPrice22() {
// //
// return this.basePrice22 + this.additionalOptionsPrice2;
// },
// totalPrice3() {
// //
// return this.basePrice3 + this.additionalOptionsPrice3;
// }
},
@ -397,6 +454,7 @@ text-align: center;
font-size: 18px;
cursor: pointer;
}
.box .top p,
.box2 .top p {
text-align: center;
font-size: 14px;

View File

@ -178,7 +178,7 @@
<el-table-column prop="距离下架" label="距离下架" />
</el-table>
<button>去购买</button>
<button class="goBuy">去购买</button>
<el-pagination
class="pagination"
@size-change="handleSizeChange"
@ -190,6 +190,7 @@
:total="total"
></el-pagination>
</div>
<!-- 今日特价软著 -->
<div class="content222" v-if="currentModule === 'mod2'">
<el-table
:data="tableData"
@ -811,16 +812,25 @@ input::-webkit-input-placeholder {
color: #3fa1d3;
}
.center .box3 .content111 {
position: relative;
margin-bottom: 30px;
}
.center .box3 .content111 .table {
margin-bottom: 50px;
}
.center .box3 .content111 .goBuy {
position: absolute;
left: 0;
bottom: 0;
padding: 8px 12px;
border: none;
background-color: #fa7c38;
color: #FFF;
}
.center .box3 .content111 .pagination {
display: flex;
justify-content: end;
margin-right: 30px;
}
</style>