Skip to content

H
hls-xcmg-vue-app
Commit e9b97610 authored by 李晓兵's avatar 李晓兵
Browse files
Options

'表格边框'

parent 8078359a
Hide whitespace changes
Inline Side-by-side
Showing with 303 additions and 263 deletions
src/pages/myInfo/my-info.vue
View file @ e9b97610
......@@ -48,23 +48,24 @@
</div>
</div>
<list-item :item-height="44" class="list">
<item @click.native="goReimburse">
<item @click.native="goReimburse" :show-arrow="true">
<img slot="left-icon" src="@/assets/myInfo/myRefund.png" class="left-icon" >
<div slot="name">我的还款</div>
</item>
<item>
<item :show-arrow="true">
<img slot="left-icon" src="@/assets/myInfo/repay.png" class="left-icon" >
<div slot="name">业务退款</div>
</item>
<item @click.native="goMyProduct">
<item @click.native="goMyProduct" :show-arrow="true">
<img slot="left-icon" src="@/assets/myInfo/collect.png" class="left-icon" >
<div slot="name">我的收藏</div>
<div slot="right-icon" class="right-icon">15</div>
</item>
<item @click.native="changeHelp">
<item @click.native="changeHelp" :show-arrow="true">
<img slot="left-icon" src="@/assets/myInfo/help.png" class="left-icon" >
<div slot="name">帮助与反馈</div>
</item>
<item>
<item :show-arrow="true">
<img slot="left-icon" src="@/assets/myInfo/about.png" class="left-icon" >
<div slot="name">关于徐工</div>
</item>
......
src/pages/myProductCollection/test.html
View file @ e9b97610
......@@ -5,6 +5,15 @@
<title>Title</title>
</head>
<body>
<table border=\"1\" cellpadding=\"0\" cellspacing=\"0\" height=\"126\" class=\"\" bordercolor=\"#000000\">\n\t<colgroup><col width=\"130\" style=\"width:97.5pt;\" /><col width=\"143\" style=\"width:107.25pt;\" /><col width=\"105\" style=\"width:78.75pt;\" /></colgroup>\n\t<tbody>\n\t\t<tr height=\"21\" style=\"height:15.75pt;\">\n\t\t\t<td class=\"et3\" height=\"21\" x:str=\"\" style=\"height:15.75pt;\">\n\t\t\t\t产品型号\n\t\t\t</td>\n\t\t\t<td class=\"et3\" x:str=\"\">\n\t\t\t\t<br />\n\t\t\t</td>\n\t\t\t<td class=\"et4\" x:num=\"2000\">\n\t\t\t\tZZJ装载机\n\t\t\t</td>\n\t\t</tr>\n\t\t<tr height=\"21\" style=\"height:15.75pt;\">\n\t\t\t<td class=\"et3\" height=\"21\" x:str=\"\" style=\"height:15.75pt;\">\n\t\t\t\t产品参数项\n\t\t\t</td>\n\t\t\t<td class=\"et3\" x:str=\"\">\n\t\t\t\t<br />\n\t\t\t</td>\n\t\t\t<td class=\"et4\" x:num=\"100\">\n\t\t\t\tZZJ336\n\t\t\t</td>\n\t\t</tr>\n\t\t<tr height=\"21\" style=\"height:15.75pt;\">\n\t\t\t<td class=\"et3\" height=\"21\" x:str=\"\" style=\"height:15.75pt;\">\n\t\t\t\t主机厂\n\t\t\t</td>\n\t\t\t<td class=\"et3\" x:str=\"\">\n\t\t\t\t<br />\n\t\t\t</td>\n\t\t\t<td class=\"et4\" x:num=\"100\">\n\t\t\t\t主机厂法人\n\t\t\t</td>\n\t\t</tr>\n\t\t<tr height=\"21\" style=\"height:15.75pt;\">\n\t\t\t<td class=\"et3\" height=\"21\" x:str=\"\" style=\"height:15.75pt;\">\n\t\t\t\t<span style=\"white-space:normal;\">厂商指导价</span><br />\n\t\t\t</td>\n\t\t\t<td class=\"et3\" x:str=\"\">\n\t\t\t\t<br />\n\t\t\t</td>\n\t\t\t<td class=\"et4\" x:num=\"100\">\n\t\t\t\t500000\n\t\t\t</td>\n\t\t</tr>\n\t\t<tr height=\"21\" style=\"height:15.75pt;\">\n\t\t\t<td class=\"et3\" height=\"21\" x:str=\"\" style=\"height:15.75pt;\">\n\t\t\t\t价格有效期至\n\t\t\t</td>\n\t\t\t<td class=\"et3\" x:str=\"\">\n\t\t\t</td>\n\t\t\t<td class=\"et4\" x:num=\"100\">\n\t\t\t\t2019/10/24\n\t\t\t</td>\n\t\t</tr>\n\t</tbody>\n</table>
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
</body>
</html>
src/pages/productQuery/product-detailed.vue
View file @ e9b97610
......@@ -13,7 +13,7 @@
<span>产品明细</span>
</div>
</h-header>
<Tab :tabNums="tabNum" @getTabNum="getTabNum" />
<Tab :tabNums="tabNum" @getTabNum="getTabNum"/>
<!-- 基本信息 -->
<h-content v-if="tabNum === 0">
<list-item :item-height="44" class="second-part">
......@@ -93,11 +93,14 @@
<div slot="name" class="font-color">主机厂</div>
<span slot="content"> {{ confgInfo.factory_bp_name }} </span>
</item>
<div v-html="confgInfo.product_properties"/>
<div class="table-wrap" v-html="confgInfo.product_properties"/>
</list-item>
</h-content>
<bottom-tab class="footer-button">
<tab-button :class="{bgcolor: bgc_flag}" class="butt" @click.native="goTrial(baseInfo.plan_price,baseInfo.price_date_to)"><img src="@/assets/productQuery/trial.png" alt=""> 试算</tab-button>
<tab-button :class="{bgcolor: bgc_flag}" class="butt"
@click.native="goTrial(baseInfo.plan_price,baseInfo.price_date_to)"><img
src="@/assets/productQuery/trial.png" alt=""> 试算
</tab-button>
<tab-button class="collect butt" @click.native="collect"><img :src="src" alt="">{{ text }}</tab-button>
</bottom-tab>
<div v-if="collect_flag" class="show-collect">
......@@ -108,190 +111,190 @@
</template>
<script>
import Tab from './tab'
export default {
name: 'ProDetailed',
components: {
Tab,
},
data () {
return {
text: '',
tabNum: 0,
picLists: [],
baseInfo: {},
show_text: '',
confgInfo: {},
detailInfo: {},
bgc_flag: true,
collect_flag: false,
}
},
computed: {},
watch: {
},
beforeRouteEnter (to, from, next) {
if (from.name === 'ProductList') {
next(vm => {
vm.tabNum = 0
vm.product_id = vm.$route.params.product_id
vm.baseMsg()
vm.detailMsg()
vm.confgMsg()
})
}
next()
},
created () {
import Tab from './tab'
},
activated () {
console.log('collect........', window.sessionStorage.getItem('collect_status'))
if (window.sessionStorage.getItem('collect_status') === 'Y') {
this.src = require('@/assets/productQuery/coll-success.png')
this.text = '取消收藏'
} else {
this.src = require('@/assets/productQuery/collect.png')
this.text = '收藏'
}
},
methods:
{
getTabNum (i) {
console.log(i)
this.tabNum = i
},
// 收藏
collect () {
console.log('collect', window.sessionStorage.getItem('collect_status'))
if (window.sessionStorage.getItem('collect_status') === 'Y') {
let vm = this
this.hlsPopup.showConfirm({
title: '提示',
content: '您确认取消收藏吗？',
onConfirm: data => {
console.log(data)
if (data) {
let url = $config.basePath + 'delete_collection'
let param = {
master: {
product_id: vm.product_id,
user_phone: window.localStorage.user_phone,
},
}
vm.$post(url, param).then(function (res) {
console.log('取消收藏。。。。。。。。', res)
if (res.result === 'S') {
window.sessionStorage.setItem('collect_status', 'N')
vm.show_text = '取消成功'
vm.collect_flag = true
vm.src = require('@/assets/productQuery/collect.png')
setTimeout(() => {
vm.text = '收藏'
vm.collect_flag = false
}, 1500)
}
})
}
},
})
} else {
this.show_text = '收藏成功'
this.collect_flag = true
console.log(this.collect_flag)
let vm = this
let url = $config.basePath + 'save_collection'
let param = {
master: {
product_id: vm.product_id,
user_phone: window.localStorage.user_phone,
},
}
vm.$post(url, param).then(function (res) {
console.log('收藏', res)
if (res.result === 'S') {
window.sessionStorage.setItem('collect_status', 'Y')
vm.src = require('@/assets/productQuery/coll-success.png')
setTimeout(() => {
vm.text = '取消收藏'
vm.collect_flag = false
}, 1500)
} else {
hlsPopup.showLongCenter(res.message)
}
})
}
},
// 基本信息查询
baseMsg () {
let vm = this
let url = $config.basePath + 'prd_product_info'
let param = {
product_id: vm.$route.params.product_id,
}
vm.$post(url, param).then(function (res) {
console.log('基本信息', res)
if (res.result === 'S') {
vm.baseInfo = res.info
} else {
hlsPopup.showLongCenter(res.message)
}
})
},
// 详情查询
detailMsg () {
let vm = this
let url = $config.basePath + 'prd_product_detial'
let param = {
product_id: vm.$route.params.product_id,
}
vm.$post(url, param).then(function (res) {
console.log('产品详情', res)
if (res.result === 'S') {
vm.detailInfo = res.info
// vm.picLists = res.lists
res.lists.forEach(item => {
item['url'] = process.env.filePath + 'attachment_id=' + item.product_attachment_id + '&access_token=' + window.localStorage.access_token
})
vm.picLists = res.lists
console.log('。。。。。。。。。。。。。。。', res.lists)
} else {
hlsPopup.showLongCenter(res.message)
}
})
},
// 配置查询
confgMsg () {
let vm = this
let url = $config.basePath + 'prd_product_conf'
let param = {
product_id: vm.$route.params.product_id,
}
vm.$post(url, param).then(function (res) {
console.log('配置信息', res)
if (res.result === 'S') {
vm.confgInfo = res.info
} else {
hlsPopup.showLongCenter(res.message)
}
})
},
// 试算price:产品参考价，date:有效日期
goTrial (price, date) {
this.$router.push({
name: 'FinancingTrial',
params: {
plan_price: price,
price_date_to: date,
},
})
},
},
}
export default {
name: 'ProDetailed',
components: {
Tab,
},
data() {
return {
text: '',
tabNum: 0,
picLists: [],
baseInfo: {},
show_text: '',
confgInfo: {},
detailInfo: {},
bgc_flag: true,
collect_flag: false,
}
},
computed: {},
watch: {},
beforeRouteEnter(to, from, next) {
if (from.name === 'ProductList' || from.name === 'MyProductList') {
next(vm => {
vm.tabNum = 0
vm.product_id = vm.$route.params.product_id
vm.baseMsg()
vm.detailMsg()
vm.confgMsg()
})
}
next()
},
created() {
},
activated() {
console.log('collect........', window.sessionStorage.getItem('collect_status'))
if (window.sessionStorage.getItem('collect_status') === 'Y') {
this.src = require('@/assets/productQuery/coll-success.png')
this.text = '取消收藏'
} else {
this.src = require('@/assets/productQuery/collect.png')
this.text = '收藏'
}
},
methods:
{
getTabNum(i) {
console.log(i)
this.tabNum = i
},
// 收藏
collect() {
console.log('collect', window.sessionStorage.getItem('collect_status'))
if (window.sessionStorage.getItem('collect_status') === 'Y') {
let vm = this
this.hlsPopup.showConfirm({
title: '提示',
content: '您确认取消收藏吗？',
onConfirm: data => {
console.log(data)
if (data) {
let url = $config.basePath + 'delete_collection'
let param = {
master: {
product_id: vm.product_id,
user_phone: window.localStorage.user_phone,
},
}
vm.$post(url, param).then(function (res) {
console.log('取消收藏。。。。。。。。', res)
if (res.result === 'S') {
window.sessionStorage.setItem('collect_status', 'N')
vm.show_text = '取消成功'
vm.collect_flag = true
vm.src = require('@/assets/productQuery/collect.png')
setTimeout(() => {
vm.text = '收藏'
vm.collect_flag = false
}, 1500)
}
})
}
},
})
} else {
this.show_text = '收藏成功'
this.collect_flag = true
console.log(this.collect_flag)
let vm = this
let url = $config.basePath + 'save_collection'
let param = {
master: {
product_id: vm.product_id,
user_phone: window.localStorage.user_phone,
},
}
vm.$post(url, param).then(function (res) {
console.log('收藏', res)
if (res.result === 'S') {
window.sessionStorage.setItem('collect_status', 'Y')
vm.src = require('@/assets/productQuery/coll-success.png')
setTimeout(() => {
vm.text = '取消收藏'
vm.collect_flag = false
}, 1500)
} else {
hlsPopup.showLongCenter(res.message)
}
})
}
},
// 基本信息查询
baseMsg() {
let vm = this
let url = $config.basePath + 'prd_product_info'
let param = {
product_id: vm.$route.params.product_id,
}
vm.$post(url, param).then(function (res) {
console.log('基本信息', res)
if (res.result === 'S') {
vm.baseInfo = res.info
} else {
hlsPopup.showLongCenter(res.message)
}
})
},
// 详情查询
detailMsg() {
let vm = this
let url = $config.basePath + 'prd_product_detial'
let param = {
product_id: vm.$route.params.product_id,
}
vm.$post(url, param).then(function (res) {
console.log('产品详情', res)
if (res.result === 'S') {
vm.detailInfo = res.info
// vm.picLists = res.lists
res.lists.forEach(item => {
item['url'] = process.env.filePath + 'attachment_id=' + item.product_attachment_id + '&access_token=' + window.localStorage.access_token
})
vm.picLists = res.lists
console.log('。。。。。。。。。。。。。。。', res.lists)
} else {
hlsPopup.showLongCenter(res.message)
}
})
},
// 配置查询
confgMsg() {
let vm = this
let url = $config.basePath + 'prd_product_conf'
let param = {
product_id: vm.$route.params.product_id,
}
vm.$post(url, param).then(function (res) {
console.log('配置信息', res)
if (res.result === 'S') {
vm.confgInfo = res.info
} else {
hlsPopup.showLongCenter(res.message)
}
})
},
// 试算price:产品参考价，date:有效日期
goTrial(price, date) {
this.$router.push({
name: 'FinancingTrial',
params: {
plan_price: price,
price_date_to: date,
},
})
},
},
}
</script>
<style lang='less' scoped>
#detailed {
.h-header-btn {
<style lang='less'>
#detailed {
.h-header-btn {
img {
width: 16px;
height: 16px;
......@@ -306,21 +309,24 @@ export default {
line-height: 24px;
}
}
.second-part {
.font-color {
font-family: PingFangSC-Regular;
font-size: 14px;
color: #656464;
letter-spacing: 0;
}
span {
font-family: PingFangSC-Regular;
font-size: 14px;
color: rgba(56,63,69,0.60);
letter-spacing: 0;
.second-part {
.font-color {
font-family: PingFangSC-Regular;
font-size: 14px;
color: #656464;
letter-spacing: 0;
}
span {
font-family: PingFangSC-Regular;
font-size: 14px;
color: rgba(56, 63, 69, 0.60);
letter-spacing: 0;
}
}
}
.equipment-list {
.equipment-list {
height: 40px;
line-height: 40px;
background-color: #fafafa;
......@@ -329,8 +335,9 @@ export default {
margin-left: 16px;
position: relative;
margin-top: -10px;
}
.equipment-list::before {
}
.equipment-list::before {
content: "";
display: block;
width: 4px;
......@@ -339,65 +346,88 @@ export default {
position: absolute;
left: -15px;
top: 10px;
}
.footer-button {
.butt {
width: 48%;
margin-left: 3px;
border: 1px solid #00469C;
border-radius: 4px;
}
img {
height: 19px;
width: 19px;
//margin-top: 2px;
margin-right: 3px;
}
.collect {
color: #00469C;
}
}
.bgcolor {
background: #00469C;
border: 1px solid #00469C;
border-radius: 4px;
font-family: PingFangSC-Semibold;
color: #FFFFFF;
}
.show-collect {
width: 240px;
height: 100px;
opacity: 0.7;
background: #383F45;
border-radius: 4px;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
p {
}
.footer-button {
.butt {
width: 48%;
margin-left: 3px;
border: 1px solid #00469C;
border-radius: 4px;
}
img {
height: 19px;
width: 19px;
//margin-top: 2px;
margin-right: 3px;
}
.collect {
color: #00469C;
}
}
.bgcolor {
background: #00469C;
border: 1px solid #00469C;
border-radius: 4px;
font-family: PingFangSC-Semibold;
font-size: 16px;
color: #FFFFFF;
margin-left: 8px;
}
img {
width: 16px;
height: 16px;
margin-left: -4px;
.show-collect {
width: 240px;
height: 100px;
opacity: 0.7;
background: #383F45;
border-radius: 4px;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
p {
font-family: PingFangSC-Semibold;
font-size: 16px;
color: #FFFFFF;
margin-left: 8px;
}
img {
width: 16px;
height: 16px;
margin-left: -4px;
}
}
.proPic {
width: 100%;
img {
width: 94%;
margin-left: 10px
}
}
.table-wrap{
table {
margin: 10px;
background-color: #fff !important;
td{
border:1px solid #ccc;
text-align: center;
vertical-align: middle;
span{
color:#000 !important;
}
}
}
}
}
.proPic {
width: 100%;
img {
width: 94%;
margin-left: 10px
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment