|
@@ -0,0 +1,310 @@
|
|
|
+<template>
|
|
|
+<div class="container normal-panel">
|
|
|
+ <span style="font-size:12px;color:#3874f6;text-decoration: underline;cursor: pointer;" @click="$router.back()">返回</span>
|
|
|
+ <el-tag style="margin-left: 15px" size="small" >{{selectProduct.brandname}}</el-tag>
|
|
|
+ <div class="product-detail container flex-align-stretch" style="width: 100%;flex-wrap:nowrap">
|
|
|
+ <div>
|
|
|
+ <el-image style="width:400px;height:400px;margin-right:30px" :src="actImage?actImage.url:''" fit="contain" />
|
|
|
+ <div class="flex-align-stretch column">
|
|
|
+ <el-image class="thumImage mt-10" :class="item.attachmentid === actImage.attachmentid?'act':''" v-for="item in selectProduct.attinfos" :key="item.index" :src="item.url" @click="actImage = item" fit="contain" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style="flex:1;">
|
|
|
+ <p class="productName normal-margin">
|
|
|
+ <el-tag class="inline-16" @click="actTradefield = item.tradefield" v-for="(item,index) in tradefield" :key="index" size="small" :effect="actTradefield === item.tradefield ? 'dark' : 'plain'">{{item.tradefield}}
|
|
|
+ </el-tag>
|
|
|
+ {{selectProduct.itemname}}
|
|
|
+ </p>
|
|
|
+ <p style="color:#888;margin-bottom:10px">编码: {{selectProduct.itemno}}</p>
|
|
|
+ <p class="normal-margin">价格: <span class="product-price">¥{{selectProduct.gradeprice}}</span> <span class="text-throughline">¥{{selectProduct.marketprice}}</span></p>
|
|
|
+ <div class="line normal-margin"></div>
|
|
|
+ <p class="normal-margin">型号: {{selectProduct.model || '--'}}</p>
|
|
|
+ <div>
|
|
|
+ <p class="normal-margin">规格: {{selectProduct.spec || '--'}}</p>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <p class="normal-margin">标准: {{selectProduct.standards || '--'}}</p>
|
|
|
+ </div>
|
|
|
+ <div v-if="selectProduct.itemextend">
|
|
|
+ <p class="normal-margin">材质: {{selectProduct.itemextend.length? selectProduct.itemextend[0].material?selectProduct.itemextend[0].material:'--' :'--'}}</p>
|
|
|
+ </div>
|
|
|
+ <div class="flex-align-center" style="margin-bottom:15px">
|
|
|
+ <p>数量: </p>
|
|
|
+ <el-input-number v-model="count" :min="selectProduct.orderminqty" :step="selectProduct.orderaddqty" @change="changeQty" size="small" label="描述文字"></el-input-number>
|
|
|
+ <span style="color:#888;font-size: 14px;margin-left: 10px">起订量:{{selectProduct.orderminqty}}</span>
|
|
|
+ <span style="color:#888;font-size: 14px;margin-left: 10px">增量:{{selectProduct.orderaddqty}}</span>
|
|
|
+ <span style="color:#888;font-size: 14px;margin-left: 10px">装箱数:{{selectProduct.packqty}}</span>
|
|
|
+ <span style="color:#888;font-size: 14px;margin-left: 10px">库存:
|
|
|
+ <template v-if="usertype === 0 || usertype === 1">
|
|
|
+ <span>{{ selectProduct.cansaleqty }}</span>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <span v-if="selectProduct.stockstatus === '紧缺'" style="color: red">{{selectProduct.stockstatus}}</span>
|
|
|
+ <span v-else-if="selectProduct.stockstatus === '充足'" style="color: green">{{selectProduct.stockstatus}}</span>
|
|
|
+ <span v-else>{{selectProduct.stockstatus}}</span>
|
|
|
+ </template>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="type">
|
|
|
+ <div class="content" style="max-height:300px;width:850px;overflow-y:scroll;margin-bottom: 10px;">
|
|
|
+<!-- <p class="inline-16">更多:</p>-->
|
|
|
+ <el-tag class="inline-16" style="margin-top: 5px;margin-bottom: 5px;width: 120px" @click="typeClick(item)" v-for="(item,index) in detail" :key="index" size="small" :effect="selectProduct.itemno == item.itemno ? 'dark' : 'plain'">
|
|
|
+ {{item.spec?item.spec.length >14?item.spec.substring(0,13)+'...':item.spec:item.spec}}
|
|
|
+ </el-tag>
|
|
|
+<!-- <span style="color: #4f7bfd;width: 100px" @click="typeClick(item)" v-for="(item,index) in detail" :key="index">
|
|
|
+ {{item.model}}
|
|
|
+ </span>-->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+<!-- <div class="type">
|
|
|
+ <div class="content normal-margin">
|
|
|
+ <p class="inline-16">领域:</p>
|
|
|
+ <el-tag class="inline-16" @click="actTradefield = item.tradefield" v-for="(item,index) in tradefield" :key="index" size="small" :effect="actTradefield === item.tradefield ? 'dark' : 'plain'">{{item.tradefield}}
|
|
|
+ </el-tag>
|
|
|
+ </div>
|
|
|
+ </div>-->
|
|
|
+ <div style="width: 700px;background: #f6f6f6;margin-bottom: 20px" v-if="selectProduct.itemextend">
|
|
|
+ <el-row :gutter="20" style="margin-left: 10px" v-if="selectProduct.itemextend.length">
|
|
|
+ <el-col :span="8" style="margin-top: 10px; " v-if="selectProduct.itemextend[0].device">
|
|
|
+ <span class="search__label">装置:</span>
|
|
|
+ <span class="tab-color">{{selectProduct.itemextend[0].device}}</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8" style="margin-top: 10px" v-if="selectProduct.itemextend[0].prodline">
|
|
|
+ <span class="search__label">产线:</span>
|
|
|
+ <span class="tab-color">{{selectProduct.itemextend[0].prodline}}</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8" style="margin-top: 10px" v-if="selectProduct.itemextend[0].specalnote">
|
|
|
+ <span class="search__label">特殊说明:</span>
|
|
|
+ <span class="tab-color">{{selectProduct.itemextend[0].specalnote}}</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8" style="margin-top: 10px" v-if="selectProduct.itemextend[0].pressure">
|
|
|
+ <span class="search__label">压力等级:</span>
|
|
|
+ <span class="tab-color">{{selectProduct.itemextend[0].pressure}}</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8" style="margin-top: 10px" v-if="selectProduct.itemextend[0].butterflyplatedrive">
|
|
|
+ <span class="search__label">蝶板驱动:</span>
|
|
|
+ <span class="tab-color">{{selectProduct.itemextend[0].butterflyplatedrive}}</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8" style="margin-top: 10px" v-if="selectProduct.itemextend[0].connection">
|
|
|
+ <span class="search__label">连接形式:</span>
|
|
|
+ <span class="tab-color">{{selectProduct.itemextend[0].connection}}</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8" style="margin-top: 10px;margin-bottom: 10px" v-if="selectProduct.itemextend[0].valveplatematerial">
|
|
|
+ <span class="search__label">阀板材质:</span>
|
|
|
+ <span class="tab-color">{{selectProduct.itemextend[0].valveplatematerial}}</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8" style="margin-top: 10px;margin-bottom: 10px" v-if="selectProduct.itemextend[0].actuatortype">
|
|
|
+ <span class="search__label">执行器类型:</span>
|
|
|
+ <span class="tab-color">{{selectProduct.itemextend[0].actuatortype}}</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8" style="margin-top: 10px;margin-bottom: 20px" v-if="selectProduct.itemextend[0].actuatorbrand">
|
|
|
+ <span class="search__label">执行器品牌:</span>
|
|
|
+ <span class="tab-color">{{selectProduct.itemextend[0].actuatorbrand}}</span>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <el-button class="normal-margin" type="primary" style="width:200px" icon="el-icon-shopping-cart-full" @click="addCart" :disabled="usertype === 0 || usertype === 1">加入购物车</el-button>
|
|
|
+ <div style="display:flex">
|
|
|
+ <p>相关链接: </p>
|
|
|
+ <div>
|
|
|
+ <div v-for="item in selectProduct.technicalinfo" :key="item.index">
|
|
|
+ <a class="file-link" :href="item.url">{{item.document}}</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: '',
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ detail: '',
|
|
|
+ count: 0,
|
|
|
+ selectProduct: '',
|
|
|
+ actImage:{},
|
|
|
+ tradefield:[],
|
|
|
+ actTradefield:'',
|
|
|
+ usertype:"",
|
|
|
+ length:"",
|
|
|
+ param: {
|
|
|
+ "id": "20220926142403",
|
|
|
+ "content": {
|
|
|
+ "pageNumber": 1,
|
|
|
+ "pageSize": 999999,
|
|
|
+ "sa_itemgroupid":'',
|
|
|
+ "sys_enterpriseid":''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ this.getDetail()
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.usertype = JSON.parse(sessionStorage.getItem('active_account')).usertype
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async getDetail () {
|
|
|
+ this.param.content.sa_itemgroupid = this.$route.query.id
|
|
|
+ if (this.$route.query.sys_enterpriseid) {
|
|
|
+ this.param.content.sys_enterpriseid = this.$route.query.sys_enterpriseid
|
|
|
+ } else {
|
|
|
+ delete this.param.content.sys_enterpriseid
|
|
|
+ }
|
|
|
+ let res = await this.$api.requested(this.param)
|
|
|
+ res.code === 0 ?this.$message.error(res.msg): ''
|
|
|
+ this.detail = res.data
|
|
|
+ this.selectProduct = this.detail ? this.detail[0] : ''
|
|
|
+ this.actImage = this.detail ? this.detail[0].attinfos ? this.detail[0].attinfos[0]:{} : {}
|
|
|
+ this.tradefield = this.detail ? this.detail[0].tradefield : []
|
|
|
+ this.actTradefield = this.detail?this.detail[0].tradefield?this.detail[0].tradefield[0].tradefield:'':''
|
|
|
+ this.count = this.detail[0].orderminqty
|
|
|
+
|
|
|
+ },
|
|
|
+ countChange (num) {
|
|
|
+ this.count = num
|
|
|
+ },
|
|
|
+ changeQty(num){
|
|
|
+ let a = num - this.selectProduct.orderminqty
|
|
|
+ let b = a / this.selectProduct.orderaddqty
|
|
|
+
|
|
|
+ if (b < 1) {
|
|
|
+ this.$nextTick(e=>{
|
|
|
+ this.count = this.selectProduct.orderminqty + this.selectProduct.orderaddqty
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.$nextTick(e=>{
|
|
|
+ this.count = this.selectProduct.orderminqty + this.selectProduct.orderaddqty * b.toFixed(0)
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ typeClick (data) {
|
|
|
+ console.log(data,"切换")
|
|
|
+ this.selectProduct = data
|
|
|
+ this.actImage = data.attinfos[0]
|
|
|
+ this.actTradefield = data.tradefield[0].tradefield
|
|
|
+ this.count = data.orderminqty
|
|
|
+ console.log(this.count)
|
|
|
+ },
|
|
|
+
|
|
|
+ async addCart () {
|
|
|
+ let res = await this.$api.requested({
|
|
|
+ "id": 20220924095102,
|
|
|
+ "content": {
|
|
|
+ "sa_brandid": this.$route.query.brandid, //品牌id
|
|
|
+ "itemid": this.selectProduct.itemid, //货品id
|
|
|
+ "qty": this.count, //数量
|
|
|
+ "itemno": this.selectProduct.itemno, //货品编号
|
|
|
+ "tradefield":this.actTradefield
|
|
|
+ },
|
|
|
+ })
|
|
|
+ this.tool.showMessage(res)
|
|
|
+ }
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.product-detail{
|
|
|
+ height: calc(100vh - 210px);
|
|
|
+ overflow-y: scroll;
|
|
|
+ width: 900px;
|
|
|
+}
|
|
|
+.productName{
|
|
|
+ font-size: 1.75rem !important;
|
|
|
+ color: #333 !important;
|
|
|
+}
|
|
|
+.line{
|
|
|
+ border-bottom: 1px dashed #e3e5ea;
|
|
|
+}
|
|
|
+.border-left {
|
|
|
+ border-left:1px solid #e3e5ea
|
|
|
+}
|
|
|
+.product-price {
|
|
|
+ font-size: 1.25rem !important;
|
|
|
+ color: red;
|
|
|
+}
|
|
|
+.product-itemno{
|
|
|
+ font-size: 12px;
|
|
|
+ color:#888;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+.text-throughline{
|
|
|
+ font-size: 14px;
|
|
|
+ text-decoration: line-through;
|
|
|
+ color:#999
|
|
|
+}
|
|
|
+.product-detail p{
|
|
|
+ font-size: 14px;
|
|
|
+ color:#888 ;
|
|
|
+}
|
|
|
+.productName{
|
|
|
+ font-size: 1.75rem !important;
|
|
|
+ color: #333 !important;
|
|
|
+}
|
|
|
+.line{
|
|
|
+ border-bottom: 1px dashed #e3e5ea;
|
|
|
+}
|
|
|
+.border-left {
|
|
|
+ border-left:1px solid #e3e5ea
|
|
|
+}
|
|
|
+.product-price {
|
|
|
+ font-size: 1.25rem !important;
|
|
|
+ color: red;
|
|
|
+}
|
|
|
+.product-itemno{
|
|
|
+ font-size: 12px;
|
|
|
+ color:#888;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+.text-throughline{
|
|
|
+ font-size: 14px;
|
|
|
+ text-decoration: line-through;
|
|
|
+ color:#999
|
|
|
+}
|
|
|
+.thumImage{
|
|
|
+ width:100px;
|
|
|
+ height:100px;
|
|
|
+ margin-right:30px;
|
|
|
+ border:1px solid #f1f2f3;
|
|
|
+ cursor: pointer;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.column{
|
|
|
+ flex-direction: row;
|
|
|
+}
|
|
|
+.act{
|
|
|
+ border:1px solid #607d8b;
|
|
|
+}
|
|
|
+.file-link{
|
|
|
+ font-size: 12px;
|
|
|
+ margin-bottom:16px;
|
|
|
+ color:#3848f6
|
|
|
+}
|
|
|
+.file-link a{
|
|
|
+ text-decoration: none;
|
|
|
+ margin-left:10px;
|
|
|
+ color:#999
|
|
|
+}
|
|
|
+.file-link:hover{
|
|
|
+ color:#4F7BFD;
|
|
|
+ text-decoration: underline;
|
|
|
+}
|
|
|
+.tab-color{
|
|
|
+ color: #ec2121;
|
|
|
+ font-size: 15px;
|
|
|
+ /*font-weight: bold;*/
|
|
|
+
|
|
|
+}
|
|
|
+</style>
|