|
|
@@ -5,8 +5,8 @@
|
|
|
</div>
|
|
|
<div class="content-wrap">
|
|
|
<div class="content-line cl-title">
|
|
|
- <span class="code text-ellipse inline-block">sddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</span>
|
|
|
- <div class="focus-wrap inline-block">
|
|
|
+ <span class="code text-ellipse inline-block">{{commodity.code}}</span>
|
|
|
+ <div class="focus-wrap inline-block" :class="{'active': isFocus}">
|
|
|
<i class="iconfont icon-shoucang"></i>
|
|
|
<span>店铺关注</span>
|
|
|
</div>
|
|
|
@@ -17,37 +17,69 @@
|
|
|
<span>数量:</span>
|
|
|
</div>
|
|
|
<ul>
|
|
|
- <li class="text-ellipse inline-block price-level">
|
|
|
- <p><span>$</span>159.00</p>
|
|
|
- <span>1+</span>
|
|
|
- </li>
|
|
|
- <li class="text-ellipse inline-block price-level">
|
|
|
- <p><span>$</span>159.00</p>
|
|
|
- <span>1+</span>
|
|
|
+ <li class="text-ellipse inline-block price-level" v-for="price in priceLevel1">
|
|
|
+ <p><span>{{isRMB ? '¥' : '$'}}</span>
|
|
|
+ {{isRMB ? price.rMBPrice : price.uSDPrice}}
|
|
|
+ </p>
|
|
|
+ <span>{{price.start}}+</span>
|
|
|
</li>
|
|
|
- <li class="text-ellipse inline-block price-level">
|
|
|
+ </ul>
|
|
|
+ <i :class="`iconfont icon-arrow-${isMore ? 'up' : 'down'}`" @click="isMore = !isMore" v-if="priceLevel2.length"></i>
|
|
|
+ </div>
|
|
|
+ <div class="content-line cl-price2" v-if="priceLevel2.length && isMore">
|
|
|
+ <ul>
|
|
|
+ <li class="text-ellipse inline-block price-level" v-for="price in priceLevel2">
|
|
|
<p><span>$</span>159.00</p>
|
|
|
<span>1+</span>
|
|
|
</li>
|
|
|
</ul>
|
|
|
- <i class="iconfont icon-arrow-down"></i>
|
|
|
</div>
|
|
|
- <div class="content-line cl-price2">
|
|
|
+ <div class="content-line link cl-price2">
|
|
|
<ul>
|
|
|
- <li class="text-ellipse inline-block price-level">
|
|
|
- <p><span>$</span>159.00</p>
|
|
|
- <span>1+</span>
|
|
|
+ <nuxt-link :to="`/mobile/shop/${storeInfo.uuid}`" tag="li" class="text-ellipse inline-block price-level">
|
|
|
+ <i class="iconfont icon-shouye-copy"></i>
|
|
|
+ <p>店铺</p>
|
|
|
+ </nuxt-link>
|
|
|
+ <li class="text-ellipse inline-block price-level" @click="showStoreInfo = true">
|
|
|
+ <i class="iconfont icon-kefu1"></i>
|
|
|
+ <p>联系卖家</p>
|
|
|
</li>
|
|
|
- <li class="text-ellipse inline-block price-level">
|
|
|
- <p><span>$</span>159.00</p>
|
|
|
- <span>1+</span>
|
|
|
+ <li class="text-ellipse inline-block price-level" :class="{'active': component.attach && component.attach != '1'}" @click="goAttach(component.attach)">
|
|
|
+ <i class="iconfont icon-pdf"></i>
|
|
|
+ <p>数据手册</p>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="params-wrap">
|
|
|
+ <p>产品参数</p>
|
|
|
+ <ul v-if="component.properties && component.properties.length">
|
|
|
+ <li v-for="prop in component.properties" v-if="prop.property">
|
|
|
+ <span class="inline-block" v-text="prop.property.labelCn"></span>
|
|
|
+ <span class="inline-block text-ellipse" v-text="prop.value"></span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <div class="com-none-state" v-else>
|
|
|
+ <p>卖家上传的产品暂无参数,请 <b @click="showStoreInfo = true">联系卖家</b> 了解具体详情</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="mobile-modal" v-if="showStoreInfo" @touchmove="preventTouchMove($event)">
|
|
|
+ <div class="mobile-modal-box">
|
|
|
+ <div class="mobile-modal-header">联系方式<i @click="showStoreInfo = false" class="icon-guanbi iconfont"></i></div>
|
|
|
+ <div class="mobile-modal-content">
|
|
|
+ <div v-if="checkInfo(storeInfo.enterprise.enAddress)">商家地址：{{storeInfo.enterprise.enAddress}}</div>
|
|
|
+ <!--<div class="content-line link-url">在线咨询</div>-->
|
|
|
+ <div v-if="checkInfo(storeInfo.enterprise.enTel)">致电：<a :href="'tel:' + storeInfo.enterprise.enTel" target="_blank" class="content-line link-url">{{storeInfo.enterprise.enTel}}</a></div>
|
|
|
+ <div v-if="checkInfo(storeInfo.enterprise.enEmail)">邮件：<a :href="'mailto:' + storeInfo.enterprise.enEmail" target="_blank" class="content-line link-url">{{storeInfo.enterprise.enEmail}}</a></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <remind-box :title="remindText" :timeoutCount="remindCount"></remind-box>
|
|
|
+ <login-box @onLoginBoxClose="showLoginBox = false" v-if="showLoginBox" :url="url"></login-box>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
+ import {RemindBox, LoginBox} from '~components/mobile/common'
|
|
|
export default {
|
|
|
layout: 'mobile',
|
|
|
fetch({ store, route }) {
|
|
|
@@ -55,9 +87,71 @@
|
|
|
store.dispatch('shop/findCommodityOnBatchInfo', route.params)
|
|
|
])
|
|
|
},
|
|
|
+ components: {
|
|
|
+ RemindBox,
|
|
|
+ LoginBox
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ isMore: false,
|
|
|
+ showStoreInfo: false,
|
|
|
+ remindText: '',
|
|
|
+ remindCount: 1,
|
|
|
+ url: '',
|
|
|
+ showLoginBox: false
|
|
|
+ }
|
|
|
+ },
|
|
|
computed: {
|
|
|
commodity () {
|
|
|
return this.$store.state.shop.storeInfo.commodity.data
|
|
|
+ },
|
|
|
+ isRMB () {
|
|
|
+ return this.commodity.currencyName === 'RMB'
|
|
|
+ },
|
|
|
+ commodityPrices () {
|
|
|
+ return this.commodity.prices
|
|
|
+ },
|
|
|
+ priceLevel1 () {
|
|
|
+ return this.commodityPrices.length > 3 ? this.commodityPrices.slice(0, 3) : this.commodityPrices
|
|
|
+ },
|
|
|
+ priceLevel2 () {
|
|
|
+ return this.commodityPrices.length > 3 ? this.commodityPrices.slice(3, this.commodityPrices.length) : []
|
|
|
+ },
|
|
|
+ isFocus () {
|
|
|
+ console.log(this.$store.state.shop.storeInfo)
|
|
|
+ return this.$store.state.shop.storeInfo.focusList.data === 'true'
|
|
|
+ },
|
|
|
+ storeInfo () {
|
|
|
+ return this.$store.state.shop.storeInfo.store.data
|
|
|
+ },
|
|
|
+ component () {
|
|
|
+ return this.$store.state.shop.storeInfo.component.data
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ checkInfo: function (str) {
|
|
|
+ return str && str.trim() !== ''
|
|
|
+ },
|
|
|
+ goAttach: function (url) {
|
|
|
+ if (this.user.logged) {
|
|
|
+ if (url && url !== '1') {
|
|
|
+ window.open(url)
|
|
|
+// window.location.href = url
|
|
|
+ } else {
|
|
|
+ if (!url) {
|
|
|
+ this.onRemind('该产品暂无数据手册')
|
|
|
+ } else {
|
|
|
+ this.onRemind('数据手册地址错误')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.url = this.$route.fullPath
|
|
|
+ this.showLoginBox = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onRemind: function (str) {
|
|
|
+ this.remindText = str
|
|
|
+ this.remindCount++
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -76,10 +170,9 @@
|
|
|
}
|
|
|
}
|
|
|
.content-wrap {
|
|
|
- -webkit-box-shadow: 0 -3px 7px 0px rgba(143, 141, 141, 0.25);
|
|
|
- -moz-box-shadow: 0 -3px 7px 0px rgba(143, 141, 141, 0.25);
|
|
|
- box-shadow: 0 -3px 7px 0px rgba(143, 141, 141, 0.25);
|
|
|
- height: 3rem;
|
|
|
+ -webkit-box-shadow: 0 0 7px 0 rgba(143, 141, 141, 0.25);
|
|
|
+ -moz-box-shadow: 0 0 7px 0 rgba(143, 141, 141, 0.25);
|
|
|
+ box-shadow: 0 0 7px 0 rgba(143, 141, 141, 0.25);
|
|
|
.content-line {
|
|
|
height: 1.04rem;
|
|
|
border-bottom: .01rem solid #d9d9d9;
|
|
|
@@ -88,7 +181,7 @@
|
|
|
.code {
|
|
|
font-size: .3rem;
|
|
|
font-weight: bold;
|
|
|
- max-width: 6.22rem;
|
|
|
+ width: 6.22rem;
|
|
|
padding-right: .3rem;
|
|
|
border-right: .01rem solid #e1e1e1;
|
|
|
line-height: .76rem;
|
|
|
@@ -128,10 +221,11 @@
|
|
|
}
|
|
|
}
|
|
|
&.cl-price1 {
|
|
|
- padding: .18rem .18rem .2rem;
|
|
|
+ padding: .1rem .18rem 0;
|
|
|
.fl {
|
|
|
font-size: .24rem;
|
|
|
text-align: center;
|
|
|
+ margin-top: .08rem;
|
|
|
.price-tag {
|
|
|
width: .69rem;
|
|
|
height: .34rem;
|
|
|
@@ -146,7 +240,7 @@
|
|
|
ul {
|
|
|
display: inline-block;
|
|
|
li {
|
|
|
- width: 2.04rem;
|
|
|
+ width: 1.96rem;
|
|
|
}
|
|
|
}
|
|
|
i {
|
|
|
@@ -154,14 +248,83 @@
|
|
|
}
|
|
|
}
|
|
|
&.cl-price2 {
|
|
|
+ padding-top: .1rem;
|
|
|
ul {
|
|
|
text-align: center;
|
|
|
li {
|
|
|
- width: 2.3rem;
|
|
|
+ width: 2.83rem;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ &.link {
|
|
|
+ padding-top: .18rem;
|
|
|
+ ul {
|
|
|
+ li {
|
|
|
+ width: 33%;
|
|
|
+ &.active {
|
|
|
+ i {
|
|
|
+ color: #d81e06;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ i {
|
|
|
+ font-size: .39rem;
|
|
|
+ &.icon-kefu1 {
|
|
|
+ font-size: .44rem;
|
|
|
+ position: relative;
|
|
|
+ top: -.05rem;
|
|
|
+ & + p {
|
|
|
+ margin-top: -.07rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ font-size: .2rem;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .params-wrap {
|
|
|
+ background: #f4f4f4;
|
|
|
+ padding: .29rem .23rem;
|
|
|
+ p {
|
|
|
+ font-size: .26rem;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: .24rem;
|
|
|
}
|
|
|
+ ul {
|
|
|
+ border-left: .01rem solid #d9d9d9;
|
|
|
+ border-top: .01rem solid #d9d9d9;
|
|
|
+ background: #fff;
|
|
|
+ font-size: .24rem;
|
|
|
+ li {
|
|
|
+ border-bottom: .01rem solid #d9d9d9;
|
|
|
+ span {
|
|
|
+ border-right: .01rem solid #d9d9d9;
|
|
|
+ height: .67rem;
|
|
|
+ line-height: .67rem;
|
|
|
+ text-align: center;
|
|
|
+ &:first-child {
|
|
|
+ width: 25%;
|
|
|
+ }
|
|
|
+ &:last-child {
|
|
|
+ width: 75%;
|
|
|
+ text-align: left;
|
|
|
+ padding: 0 .15rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .com-none-state {
|
|
|
+ padding: .2rem 0;
|
|
|
+ background: transparent;
|
|
|
+ b {
|
|
|
+ color: #3c7cf5;
|
|
|
+ font-weight: normal;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
yangc