From e37e45cfe1123928dba5d9c5a427b0ee497b7ad6 Mon Sep 17 00:00:00 2001 From: zhangzengfei <zhangzengfei@smartai.com> Date: 星期二, 23 八月 2022 03:21:32 +0800 Subject: [PATCH] 修复算法配置的字段内容 --- src/views/productDetail/components/PayCard.vue | 599 +++++++++++++++++++++++++---------------------------------- 1 files changed, 250 insertions(+), 349 deletions(-) diff --git a/src/views/productDetail/components/PayCard.vue b/src/views/productDetail/components/PayCard.vue index 8177742..0080558 100644 --- a/src/views/productDetail/components/PayCard.vue +++ b/src/views/productDetail/components/PayCard.vue @@ -1,16 +1,16 @@ <template> <div class="PayCard"> <div class="imageArea" v-if="data.pics.length"> - <img class="activeImg" :src="'/httpImage/' + activeImg.url" /> + <ImageShow class="activeImg" :src="activeImg.url" /> <div class="imgList"> - <img + <ImageShow v-for="(item, index) in data.pics" class="preImg" - :src="'/httpImage/' + item.url" + :src="item.url" :key="index" alt="" :class="{ active: activeImg.index == index }" - @click="selectImg(index, item.url)" + @click.native="selectImg(index, item.url)" /> </div> </div> @@ -19,226 +19,34 @@ <div class="title"> <div class="name">{{ data.productName }}</div> <div class="tagList"> - <span class="tag" v-for="(name, index) in labels" :key="index">{{ + <!-- <span class="tag" v-for="(name, index) in labels" :key="index">{{ name - }}</span> + }}</span> --> + <span class="tag red" v-if="data.productType == 1">杞欢</span> + <span class="tag orange" v-if="data.productType == 4">搴旂敤</span> + <span class="tag lightBlue" v-if="data.productType == 3">SDK</span> + <span class="tag" v-if="data.productType == 2">杞‖涓�浣�</span> + <span class="tag blue" v-if="data.productType == 5">浜у搧瀵嗛挜</span> </div> </div> <div class="des">{{ data.description }}</div> <div class="typeVersion"> <div class="label">鍨嬪彿:</div> - <div class="typeVersionContent">{{ data.productModel }}</div> + <div class="typeVersionContent"> + {{ data.productModel ? data.productModel : "-" }} + </div> <div class="label">鐗堟湰:</div> - <div class="typeVersionContent">{{ data.productVersion }}</div> + <div class="typeVersionContent"> + {{ data.productVersion ? data.productVersion : "-" }} + </div> </div> - <div class="price"> + <!-- <div class="price"> <div class="label">浠锋牸</div> - <div class="number">锟{ data.priceBase }}.00</div> - </div> - <!-- - <div class="row"> - <div class="label">璐拱鏁伴噺</div> - <el-input-number - v-model="cartItem.devCount" - :disabled="data.productType == 5" - size="small" - :min="1" - label="鎻忚堪鏂囧瓧" - ></el-input-number> - </div> - - <div class="row"> - <div class="label">鏈嶅姟鏃堕暱</div> - <el-button-group class="serviceYearOpt"> - <el-button - type="default" - size="small" - :class="cartItem.timeLength == 1 ? 'selected' : ''" - @click="selectYear(1)" - >涓�骞�</el-button - > - <el-button - type="default" - size="small" - :class="cartItem.timeLength == 2 ? 'selected' : ''" - @click="selectYear(2)" - >涓ゅ勾</el-button - > - <el-button - type="default" - size="small" - :class="cartItem.timeLength == 3 ? 'selected' : ''" - @click="selectYear(3)" - >涓夊勾</el-button - > - </el-button-group> - </div> - - <div class="row"> - <div class="label">閰嶇疆妯″潡</div> - <div class="check-component"> - <div class="check-list"> - <div - class="check-item" - v-for="(item, index) in cartItem.modules" - :key="index + 'c'" - :style="isSmartCalDot ? { cursor: 'default' } : {}" - :class="item.selected ? 'selected' : ''" - @click="selectModel(index)" - > - {{ item.moduleName }} - </div> - </div> - <div class="checked-list"> - <div class="label">宸查��</div> - <div class="list"> - <div - class="checked-item" - v-for="(item, index) in cartItem.modules" - v-show="item.selected" - :key="index + 'd'" - > - {{ item.moduleName }} - </div> - </div> - </div> - </div> - </div> - - <div class="row"> - <div class="label">璇锋眰鐮�</div> - <el-input - type="textarea" - autosize - placeholder="璇疯緭鍏ヨ姹傜爜" - v-model="cartItem.requestCode" - > - </el-input> - </div> - - <div class="row"> - <div class="label">閫氶亾鏁伴噺</div> - <el-input-number - v-model="cartItem.chCount" - @change="handleChangeCh" - :disabled="!data.hasChUnitPrice" - size="small" - :min="1" - :max="16" - label="鎻忚堪鏂囧瓧" - ></el-input-number> - <span class="desText">鏈�澶ф敮鎸�16璺�</span> - </div> - - <div class="row"> - <div class="label">鎺堟潈鏁伴噺</div> - <el-input-number - v-model="cartItem.chCount" - @change="handleChangeCh" - :disabled="!data.hasChUnitPrice" - size="small" - :min="1" - :max="16" - label="鎻忚堪鏂囧瓧" - ></el-input-number> - <span class="desText">鏈�澶ф敮鎸�16璺�</span> - <el-input-number - v-model="cartItem.authCount" - @change="handleChangeAuth" - :disabled="!data.hasAuthPrice" - size="small" - :min="this.cartItem.chCount" - label="鎻忚堪鏂囧瓧" - ></el-input-number> - <span class="desText">鍙敮鎸佺殑杞璺暟</span> - </div> - - <div class="row"> - <div class="label">閰嶇疆绠楁硶</div> - <div class="check-component"> - <div class="check-list"> - <div - class="check-item" - v-for="(item, index) in cartItem.sdks" - :key="index + 'c'" - :class="item.selected ? 'selected' : ''" - @click="selectAlgorithm(index)" - > - {{ item.sdkName }} - </div> - </div> - <div class="checked-list"> - <div class="label">宸查��</div> - <div class="list"> - <div - class="checked-item" - v-for="(item, index) in cartItem.sdks" - v-show="item.selected" - :key="index + 'd'" - > - {{ item.sdkName }} - </div> - </div> - </div> - </div> - </div> - - <div class="row"> - <div class="label">鑺墖鏋舵瀯</div> - <el-select - v-model="cartItem.targetPlatform" - placeholder="璇烽�夋嫨浣跨敤鑺墖" - style=" - width: 329px; - height: 40px; - border-color: #ddd; - border-radius: 0; - " - > - <el-option - v-for="item in data.productBaseDetail && - data.productBaseDetail.platforms" - style="font-size: 12px" - :key="item.id" - :label="item.id" - :value="item.id" - :title="item.name" - ></el-option> - </el-select> - </div> - - <div class="row"> - <div class="label">璁惧ID</div> - <el-select - collapse-tags - multiple - :multiple-limit="cartItem.devCount" - v-model="cartItem.devIdList" - placeholder="璇烽�夋嫨璁惧ID" - :popper-append-to-body="false" - style=" - width: 329px; - height: 40px; - border-color: #ddd; - border-radius: 0; - " - > - <el-option - v-for="item in devList" - style="font-size: 12px" - :key="item.id" - :label="item.id" - :value="item.id" - :title="item.id" - > - <span class="option-lt" :title="item.id">{{ item.id }}</span> - <span class="option-rt" :title="item.name">{{ item.name }}</span> - </el-option> - </el-select> + <div class="number">锟{ this.totalMoney }}.00</div> </div> --> - <div class="row"> + <!-- <div class="row"> <div class="label">璐拱鏁伴噺</div> <el-input-number v-model="cartItem.devCount" @@ -274,12 +82,9 @@ >涓夊勾</el-button > </el-button-group> - </div> + </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"> @@ -312,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" @@ -338,21 +134,8 @@ <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.chCount" - @change="handleChangeCh" - :disabled="!data.hasChUnitPrice" - size="small" - :min="1" - :max="16" - label="鎻忚堪鏂囧瓧" - ></el-input-number> - <span class="desText">鏈�澶ф敮鎸�16璺�</span> <el-input-number v-model="cartItem.authCount" @change="handleChangeAuth" @@ -368,9 +151,10 @@ class="row" v-if=" data.productBaseDetail && - data.productBaseDetail.hasPriceBase && - data.productType != 5 && - !isSmartCalDot + data.productBaseDetail.hasPriceBase && + data.productType != 5 && + !isSmartCalDot && + cartItem.sdks.length > 0 " > <div class="label">閰嶇疆绠楁硶</div> @@ -386,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 @@ -405,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" @@ -425,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" @@ -440,16 +213,41 @@ class="row" v-if=" data.productType != 2 && - data.productType != 1 && - data.productType != 5 + data.productType != 1 && + data.productType != 5 && + data.productType == 3 && + (cartItem.targetPlatform.includes('x86') || cartItem.targetPlatform.includes('X86')) " > + <div class="label">鏄惧崱鍨嬪彿</div> + <el-select + v-model="cartItem.vGpu" + style=" + width: 329px; + height: 40px; + border-color: #ddd; + border-radius: 0; + " + placeholder="璇烽�夋嫨鏄惧崱鍨嬪彿" + > + <el-option + v-for="item in data.productBaseDetail && data.productBaseDetail.vGpus" + style="font-size: 12px" + :key="item.id" + :label="item.id" + :value="item.id" + :title="item.name" + ></el-option> + </el-select> + </div> + + <div class="row" v-if="data.productType != 2 && data.productType != 1 && data.productType != 5"> <div class="label">璁惧ID</div> + <!-- :multiple-limit="cartItem.devCount" --> <el-select collapse-tags multiple - :multiple-limit="cartItem.devCount" v-model="cartItem.devIdList" placeholder="璇烽�夋嫨璁惧ID" :popper-append-to-body="false" @@ -475,32 +273,43 @@ </div> <div class="btns"> - <div class="button addCar">鍔犲叆璐墿杞�</div> - <div class="button pay">绔嬪嵆璐拱</div> + <!-- <div class="button addCar">鍔犲叆璐墿杞�</div> --> + <div class="button pay" @click="confirmNow">绔嬪嵆瀹夎</div> </div> </div> + + <ConfirmOrder v-if="showOrder" :orderId="orderId" @close="showOrder = false"></ConfirmOrder> </div> </template> <script> -import { findDevListByUser } from "@/api/device"; -import { getReleaseProduct } from "@/api/product"; +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 }, created() { - 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 { - data: this.dataInfo.data, - labels: this.dataInfo.labels, + data: {}, + labels: [], cartItem: { id: "", productName: "", @@ -517,7 +326,7 @@ timeLength: 1, totalPrice: 0, isAdded: false, - requestCode: "", + requestCode: "" }, timeLength: 1, isSmartCalDot: false, @@ -526,133 +335,144 @@ baseProductList: [], activeImg: { index: 0, - url: "", + url: "" }, - }; + showOrder: false, + orderId: "" + } + }, + computed: { + totalMoney() { + let modulesPrice = 0 + this.cartItem.moduleIds.forEach((id) => { + this.data.modulePriceSet.forEach((module) => { + if (module.moduleId === id) { + modulesPrice += module.modulePrice + } + }) + }) + + let priceSingle = + this.data.priceBase + + this.data.authPrice * this.cartItem.authCount + + this.data.chUnitPrice * this.cartItem.chCount + + modulesPrice + + console.log(this.data) + + 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) { - console.log("-----"); - console.log(this.isSmartCalDot); 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) { @@ -661,19 +481,72 @@ 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 = [ + { + activateCode: this.cartItem.requestCode, + authCount: this.cartItem.authCount, + chCount: this.cartItem.chCount, + devCount: this.cartItem.devCount, + devIdList: this.cartItem.devIdList, + moduleIds: this.cartItem.moduleIds, + productId: this.cartItem.id, + productPrice: this.cartItem.totalPrice, + quantity: 1, + sdkIds: this.cartItem.sdkIds, + serveYear: this.cartItem.timeLength, + targetPlatform: this.cartItem.targetPlatform, + 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 + }).then((res) => { + if (res.success) { + this.orderId = res.data.orderId + + if (this.totalMoney == 0) { + resumePay({ orderId: this.orderId, payMethod: 5 }).then((res) => { + if (res.success) { + this.$router.push({ + path: "/personalCenter", + query: { + id: 0 + } + }) + this.$notify({ + type: "success", + message: "鎴愬姛璇曠敤", + duration: 2500, + offset: 57 + }) + } + }) + return + } else { + this.showOrder = true + } + } + }) + } + } +} </script> <style lang="scss" scoped> @@ -735,6 +608,26 @@ padding: 2px 5px; border: 1px solid #ff5033; color: #ff5033; + + &.red { + color: #ff4f32; + border-color: #ff4f32; + } + + &.orange { + color: #ff9500; + border-color: #ff9500; + } + + &.lightBlue { + color: #00bee7; + border-color: #00bee7; + } + + &.blue { + color: #0064ff; + border-color: #0064ff; + } } } } @@ -871,6 +764,14 @@ border: 1px solid #c0c5cc; border-radius: 0; } + + .el-tag { + margin-top: 0; + } + + .el-select__tags-text { + color: #999; + } } } @@ -899,4 +800,4 @@ } } } -</style> \ No newline at end of file +</style> -- Gitblit v1.8.0