From 2e4133d2bbb0f4626cf336f3e456783b9fb7867e Mon Sep 17 00:00:00 2001 From: zhangzengfei <zhangzengfei@smartai.com> Date: 星期四, 04 八月 2022 02:40:08 +0800 Subject: [PATCH] 优化部分样式 --- src/views/productDetail/components/PayCard.vue | 288 +++++++++++++++++++++++--------------------------------- 1 files changed, 119 insertions(+), 169 deletions(-) diff --git a/src/views/productDetail/components/PayCard.vue b/src/views/productDetail/components/PayCard.vue index c1019b3..0080558 100644 --- a/src/views/productDetail/components/PayCard.vue +++ b/src/views/productDetail/components/PayCard.vue @@ -84,10 +84,7 @@ </el-button-group> </div> --> - <div - class="row" - v-if="data.productBaseDetail && data.productBaseDetail.hasModulePrice" - > + <div class="row" v-if="data.productBaseDetail && data.productBaseDetail.hasModulePrice"> <div class="label">閰嶇疆妯″潡</div> <div class="check-component"> <div class="check-list"> @@ -120,19 +117,10 @@ <div class="row" v-if="data.productType == 5"> <div class="label">璇锋眰鐮�</div> - <el-input - type="textarea" - autosize - placeholder="璇疯緭鍏ヨ姹傜爜" - v-model="cartItem.requestCode" - > - </el-input> + <el-input type="textarea" autosize placeholder="璇疯緭鍏ヨ姹傜爜" v-model="cartItem.requestCode"> </el-input> </div> - <div - class="row" - v-if="data.productBaseDetail && data.productBaseDetail.hasAuthPrice" - > + <div class="row" v-if="data.productBaseDetail && data.productBaseDetail.hasAuthPrice"> <div class="label">閫氶亾鏁伴噺</div> <el-input-number v-model="cartItem.chCount" @@ -146,10 +134,7 @@ <span class="desText">鏈�澶ф敮鎸�16璺�</span> </div> - <div - class="row" - v-if="data.productBaseDetail && data.productBaseDetail.hasAuthPrice" - > + <div class="row" v-if="data.productBaseDetail && data.productBaseDetail.hasAuthPrice"> <div class="label">鎺堟潈鏁伴噺</div> <el-input-number v-model="cartItem.authCount" @@ -166,10 +151,10 @@ class="row" v-if=" data.productBaseDetail && - data.productBaseDetail.hasPriceBase && - data.productType != 5 && - !isSmartCalDot && - cartItem.sdks.length > 0 + data.productBaseDetail.hasPriceBase && + data.productType != 5 && + !isSmartCalDot && + cartItem.sdks.length > 0 " > <div class="label">閰嶇疆绠楁硶</div> @@ -185,10 +170,7 @@ {{ item.sdkName }} </div> </div> - <div - class="checked-list" - v-if="data.productType != 3 && data.productType != 4" - > + <div class="checked-list" v-if="data.productType != 3 && data.productType != 4"> <div class="label">宸查��</div> <div class="list"> <div @@ -204,14 +186,7 @@ </div> </div> - <div - class="row" - v-if=" - data.productType != 2 && - data.productType != 1 && - data.productType != 5 - " - > + <div class="row" v-if="data.productType != 2 && data.productType != 1 && data.productType != 5"> <div class="label">鑺墖鏋舵瀯</div> <el-select v-model="cartItem.targetPlatform" @@ -224,8 +199,7 @@ " > <el-option - v-for="item in data.productBaseDetail && - data.productBaseDetail.platforms" + v-for="item in data.productBaseDetail && data.productBaseDetail.platforms" style="font-size: 12px" :key="item.id" :label="item.id" @@ -239,11 +213,10 @@ class="row" v-if=" data.productType != 2 && - data.productType != 1 && - data.productType != 5 && - data.productType == 3 && - (cartItem.targetPlatform.includes('x86') || - cartItem.targetPlatform.includes('X86')) + data.productType != 1 && + data.productType != 5 && + data.productType == 3 && + (cartItem.targetPlatform.includes('x86') || cartItem.targetPlatform.includes('X86')) " > <div class="label">鏄惧崱鍨嬪彿</div> @@ -258,8 +231,7 @@ placeholder="璇烽�夋嫨鏄惧崱鍨嬪彿" > <el-option - v-for="item in data.productBaseDetail && - data.productBaseDetail.vGpus" + v-for="item in data.productBaseDetail && data.productBaseDetail.vGpus" style="font-size: 12px" :key="item.id" :label="item.id" @@ -269,14 +241,7 @@ </el-select> </div> - <div - class="row" - v-if=" - data.productType != 2 && - data.productType != 1 && - data.productType != 5 - " - > + <div class="row" v-if="data.productType != 2 && data.productType != 1 && data.productType != 5"> <div class="label">璁惧ID</div> <!-- :multiple-limit="cartItem.devCount" --> @@ -313,37 +278,33 @@ </div> </div> - <ConfirmOrder - v-if="showOrder" - :orderId="orderId" - @close="showOrder = false" - ></ConfirmOrder> + <ConfirmOrder v-if="showOrder" :orderId="orderId" @close="showOrder = false"></ConfirmOrder> </div> </template> <script> -import { findDevListByUser } from "@/api/device"; -import { getReleaseProduct } from "@/api/product"; -import { resumeOrder } from "@/api/shopcart"; -import ConfirmOrder from "@/views/productDetail/components/ConfirmOrder"; -import { resumePay } from "@/api/order"; +import { findDevListByUser } from "@/api/device" +import { getReleaseProduct } from "@/api/product" +import { resumeOrder } from "@/api/shopcart" +import ConfirmOrder from "@/views/productDetail/components/ConfirmOrder" +import { resumePay } from "@/api/order" export default { props: { - dataInfo: {}, + dataInfo: {} }, components: { - ConfirmOrder, + ConfirmOrder }, created() { - this.data = this.dataInfo.data; - this.labels = this.dataInfo.labels; - this.cartItem.id = this.data.id; - this.getDevList(); + this.data = this.dataInfo.data + this.labels = this.dataInfo.labels + this.cartItem.id = this.data.id + this.getDevList() if (this.dataInfo.data.pics.length > 0) { - this.activeImg.url = this.dataInfo.data.pics[0].url; + this.activeImg.url = this.dataInfo.data.pics[0].url } - this.getInfo(); + this.getInfo() }, data() { return { @@ -365,7 +326,7 @@ timeLength: 1, totalPrice: 0, isAdded: false, - requestCode: "", + requestCode: "" }, timeLength: 1, isSmartCalDot: false, @@ -374,155 +335,144 @@ baseProductList: [], activeImg: { index: 0, - url: "", + url: "" }, showOrder: false, - orderId: "", - }; + orderId: "" + } }, computed: { totalMoney() { - let modulesPrice = 0; + let modulesPrice = 0 this.cartItem.moduleIds.forEach((id) => { this.data.modulePriceSet.forEach((module) => { if (module.moduleId === id) { - modulesPrice += module.modulePrice; + modulesPrice += module.modulePrice } - }); - }); + }) + }) let priceSingle = this.data.priceBase + this.data.authPrice * this.cartItem.authCount + this.data.chUnitPrice * this.cartItem.chCount + - modulesPrice; + modulesPrice - console.log(this.data); + console.log(this.data) - return priceSingle * this.cartItem.devCount * this.cartItem.timeLength; - }, + return priceSingle * this.cartItem.devCount * this.cartItem.timeLength + } }, methods: { getInfo() { getReleaseProduct({ productType: this.data.productType }) .then((res) => { - this.cartItem.id = this.data.id; - this.cartItem.productName = this.data.productName; - this.cartItem.authCount = 0; - this.cartItem.chCount = 0; - this.cartItem.devCount = 1; - this.cartItem.timeLength = 1; - this.cartItem.priceBase = this.data.priceBase; - this.cartItem.authPrice = this.data.authPrice; - this.cartItem.chUnitPrice = this.data.chUnitPrice; - this.cartItem.targetPlatform = ""; - this.cartItem.devIdList = []; - this.cartItem.totalPrice = 0; - this.cartItem.isAdded = false; - this.cartItem.modules = []; - this.cartItem.sdks = []; - this.cartItem.moduleIds = []; - this.cartItem.sdkIds = []; - this.cartItem.hasAuthPrice = false; - this.cartItem.hasChUnitPrice = false; - this.baseProductList = res.data.menus; + this.cartItem.id = this.data.id + this.cartItem.productName = this.data.productName + this.cartItem.authCount = 0 + this.cartItem.chCount = 0 + this.cartItem.devCount = 1 + this.cartItem.timeLength = 1 + this.cartItem.priceBase = this.data.priceBase + this.cartItem.authPrice = this.data.authPrice + this.cartItem.chUnitPrice = this.data.chUnitPrice + this.cartItem.targetPlatform = "" + this.cartItem.devIdList = [] + this.cartItem.totalPrice = 0 + this.cartItem.isAdded = false + this.cartItem.modules = [] + this.cartItem.sdks = [] + this.cartItem.moduleIds = [] + this.cartItem.sdkIds = [] + this.cartItem.hasAuthPrice = false + this.cartItem.hasChUnitPrice = false + this.baseProductList = res.data.menus - let curProdObj = this.baseProductList.find( - (item) => item.id === this.data.id - ); - if (!curProdObj) return; - this.cartItem.hasAuthPrice = this.data.hasAuthPrice = - curProdObj && curProdObj.hasAuthPrice; + let curProdObj = this.baseProductList.find((item) => item.id === this.data.id) + if (!curProdObj) return + this.cartItem.hasAuthPrice = this.data.hasAuthPrice = curProdObj && curProdObj.hasAuthPrice if (curProdObj.hasAuthPrice) { - this.cartItem.authCount = 1; + this.cartItem.authCount = 1 } - this.cartItem.hasChUnitPrice = this.data.hasChUnitPrice = - curProdObj && curProdObj.hasChUnitPrice; + this.cartItem.hasChUnitPrice = this.data.hasChUnitPrice = curProdObj && curProdObj.hasChUnitPrice if (curProdObj.hasChUnitPrice) { - this.cartItem.chCount = 1; + this.cartItem.chCount = 1 } - this.isSmartCalDot = - this.data.productBaseDetail.name == "鏅鸿兘璁$畻鑺傜偣"; + this.isSmartCalDot = this.data.productBaseDetail.name == "鏅鸿兘璁$畻鑺傜偣" this.cartItem.modules = curProdObj.modules && curProdObj.modules.map((item) => ({ id: item.id, moduleName: item.moduleName, - modulePrice: this.data.modulePriceSet.find( - (obj) => obj.moduleId === item.id - ).modulePrice, - selected: this.isSmartCalDot, - })); + modulePrice: this.data.modulePriceSet.find((obj) => obj.moduleId === item.id).modulePrice, + selected: this.isSmartCalDot + })) this.cartItem.sdks = curProdObj.sdks && curProdObj.sdks.map((item) => ({ id: item.id, sdkName: item.sdkName, - selected: this.data.productType == 3 ? true : false, - })); + selected: this.data.productType == 3 ? true : false + })) this.cartItem.sdks.forEach((sdk) => { if (sdk.selected) { - this.cartItem.sdkIds.push(sdk.id); + this.cartItem.sdkIds.push(sdk.id) } - }); + }) }) .catch((err) => { this.$notify({ type: "error", message: err, duration: 2500, - offset: 57, - }); - }); + offset: 57 + }) + }) }, selectYear(year) { - this.timeLength = year; - this.cartItem.timeLength = year; + this.timeLength = year + this.cartItem.timeLength = year }, selectModel(index) { if (this.isSmartCalDot) { - return; + return } - this.cartItem.modules[index].selected = - !this.cartItem.modules[index].selected; + this.cartItem.modules[index].selected = !this.cartItem.modules[index].selected this.cartItem.modules.forEach((item) => { if (item.selected && this.cartItem.moduleIds.indexOf(item.id) < 0) { - this.cartItem.moduleIds.push(item.id); + this.cartItem.moduleIds.push(item.id) } if (!item.selected && this.cartItem.moduleIds.indexOf(item.id) >= 0) { - this.cartItem.moduleIds.splice( - this.cartItem.moduleIds.indexOf(item.id), - 1 - ); + this.cartItem.moduleIds.splice(this.cartItem.moduleIds.indexOf(item.id), 1) } - }); + }) }, handleChangeCh() { if (this.cartItem.authCount < this.cartItem.chCount) { - this.cartItem.authCount = this.cartItem.chCount; + this.cartItem.authCount = this.cartItem.chCount } }, selectAlgorithm(index) { - this.cartItem.sdks[index].selected = !this.cartItem.sdks[index].selected; + this.cartItem.sdks[index].selected = !this.cartItem.sdks[index].selected this.cartItem.sdks.forEach((item) => { if (item.selected && this.cartItem.sdkIds.indexOf(item.id) < 0) { - this.cartItem.sdkIds.push(item.id); + this.cartItem.sdkIds.push(item.id) } if (!item.selected && this.cartItem.sdkIds.indexOf(item.id) >= 0) { - this.cartItem.sdkIds.splice(this.cartItem.sdkIds.indexOf(item.id), 1); + this.cartItem.sdkIds.splice(this.cartItem.sdkIds.indexOf(item.id), 1) } - }); + }) }, getDevList() { findDevListByUser() .then((res) => { - this.devList = res.data.menus; + this.devList = res.data.menus }) .catch((err) => { - console.log(err); - }); + console.log(err) + }) }, handleChangeAuth() { if (this.cartItem.authCount < this.cartItem.chCount) { @@ -531,16 +481,16 @@ type: "warning", message: "鎺堟潈鏁伴噺涓嶈兘灏忎簬閫氶亾鏁伴噺", duration: 2500, - offset: 57, - }); - this.byChecked = false; + offset: 57 + }) + this.byChecked = false } else { - this.byChecked = true; + this.byChecked = true } }, selectImg(index, url) { - this.activeImg.index = index; - this.activeImg.url = url; + this.activeImg.index = index + this.activeImg.url = url }, confirmNow() { let products = [ @@ -557,19 +507,19 @@ sdkIds: this.cartItem.sdkIds, serveYear: this.cartItem.timeLength, targetPlatform: this.cartItem.targetPlatform, - vGpu: this.cartItem.vGpu, - }, - ]; + vGpu: this.cartItem.vGpu + } + ] resumeOrder({ // orderMoney: this.numeral(this.totalMoney).value(), orderMoney: 0, payMethod: 0, products, status: 0, - userId: JSON.parse(sessionStorage.getItem("userInfo")).id, + userId: JSON.parse(sessionStorage.getItem("userInfo")).id }).then((res) => { if (res.success) { - this.orderId = res.data.orderId; + this.orderId = res.data.orderId if (this.totalMoney == 0) { resumePay({ orderId: this.orderId, payMethod: 5 }).then((res) => { @@ -577,26 +527,26 @@ this.$router.push({ path: "/personalCenter", query: { - id: 0, - }, - }); + id: 0 + } + }) this.$notify({ type: "success", message: "鎴愬姛璇曠敤", duration: 2500, - offset: 57, - }); + offset: 57 + }) } - }); - return; + }) + return } else { - this.showOrder = true; + this.showOrder = true } } - }); - }, - }, -}; + }) + } + } +} </script> <style lang="scss" scoped> @@ -850,4 +800,4 @@ } } } -</style> \ No newline at end of file +</style> -- Gitblit v1.8.0