数据看板页面以及产品列表页面和编辑客户信息页面基础代码编写

This commit is contained in:
liu.xiaofeng@ebiz-digits.com
2024-01-03 15:16:11 +08:00
parent 7a9a0767f1
commit cec63933d7
3 changed files with 134 additions and 220 deletions

View File

@@ -64,23 +64,65 @@
<p style="font-size: 18px;line-height: 35px;font-weight: bold;">项目成员分配</p>
<p style="color: #a7a7a7;font-size: 14px;">数据截止日期2024-03-30</p>
</div>
<div style="margin-top: 10px;margin-bottom: 5px;background: rgba(255, 87, 83, 1);line-height: 30px;display: flex;align-items: center;color: #fff;font-size: 14px;">
<div style="margin-top: 10px;margin-bottom: 3px;background: rgba(255, 87, 83, 0.7);line-height: 30px;display: flex;align-items: center;color: #fff;font-size: 14px;">
<span style="width: 18%;display: flex;justify-content: center;">成员</span>
<span style="width: 22%;display: flex;justify-content: center;">角色</span>
<span style="width: 30%;display: flex;justify-content: center;">累计标保()</span>
<span style="width: 30%;display: flex;justify-content: center;">受理标保()</span>
</div>
<div>
<div v-for="item in dataList2" style="background: rgba(251, 235, 230, 0.44);margin-bottom: 1px;line-height: 30px;display: flex;align-items: center;color: #333;font-size: 13px;">
<span style="width: 18%;display: flex;justify-content: center;">{{item.name}}</span>
<span style="width: 22%;display: flex;justify-content: center;">{{item.role}}</span>
<span style="width: 30%;display: flex;justify-content: center;">{{item.value1}}</span>
<span style="width: 30%;display: flex;justify-content: center;">{{item.value2}}</span>
</div>
</div>
</div>
<div style="margin: 10px;padding: 10px;background: #fff;border-radius: 5px;">
<div style="border-bottom: 1px dashed #666;padding-bottom: 15px;">
<p style="font-size: 18px;line-height: 35px;font-weight: bold;">项目数据统计</p>
<p style="color: #a7a7a7;font-size: 14px;">数据截止日期2024-03-30</p>
</div>
<div style="margin-top: 10px;margin-bottom: 3px;background: rgba(255, 87, 83, 0.7);line-height: 30px;display: flex;align-items: center;color: #fff;font-size: 14px;">
<span style="width: 25%;display: flex;justify-content: center;">小组</span>
<span style="width: 25%;display: flex;justify-content: center;">组长</span>
<span style="width: 25%;display: flex;justify-content: center;">获客人数</span>
<span style="width: 25%;display: flex;justify-content: center;">获客率</span>
</div>
<div>
<div style="background: rgba(251, 235, 230, 0.44);margin-bottom: 1px;line-height: 30px;display: flex;align-items: center;color: #333;font-size: 13px;">
<span style="width: 50%;display: flex;justify-content: center;">项目合并</span>
<span style="width: 25%;display: flex;justify-content: center;">890</span>
<span style="width: 25%;display: flex;justify-content: center;">89%</span>
</div>
</div>
<div>
<div v-for="(item,index) in dataList3" :key="index" style="background: rgba(251, 235, 230, 0.44);margin-bottom: 1px;line-height: 30px;display: flex;align-items: center;color: #333;font-size: 13px;">
<span style="width: 25%;display: flex;justify-content: center;">{{item.name}}</span>
<span style="width: 25%;display: flex;justify-content: center;">{{item.role}}</span>
<span style="width: 25%;display: flex;justify-content: center;">{{item.value1}}</span>
<span style="width: 25%;display: flex;justify-content: center;">{{item.value2}}</span>
</div>
</div>
</div>
</div>
<div v-if="tabActive == 'productList'">
<div>产品列表</div>
<div v-for="(item,index) in dataList4" @click="goProductDetail(item.productCode)" :key="index" style="background: #fff;border-radius: 5px;margin: 5px;display: flex;padding: 5px;">
<img :src="item.productImageUrl" style="display: inline-block;width: 35%;border-radius: 5px;"/>
<div style="display: inline-block;width: 65%;padding-left: 10px;">
<p style="font-size: 16px;">{{item.productName}}</p>
<p style="font-size: 14px;color: #bdbdbd;margin-top: 20px;">{{item.productDesc}}</p>
</div>
</div>
</div>
</div>
</template>
<script>
import { Tab, Tabs, Search, DropdownMenu, DropdownItem, Circle } from 'vant'
import { getList } from '@/api/ebiz/product/product.js'
export default {
components: {
[Tab.name]: Tab,
@@ -156,13 +198,32 @@ export default {
{name:'累计承保人数(人)',value:'9569'},
{name:'累计承保件数(件)',value:'262'},
],
dataList2:[
{name:'张大大',role:'项目经理',value1:'15,000.00',value2:'15,000.00'},
{name:'张大大',role:'项目经理',value1:'15,000.00',value2:'15,000.00'},
{name:'张大大',role:'项目经理',value1:'15,000.00',value2:'15,000.00'},
{name:'张大大',role:'项目经理',value1:'15,000.00',value2:'15,000.00'},
{name:'张大大',role:'项目经理',value1:'15,000.00',value2:'15,000.00'},
{name:'张大大',role:'项目经理',value1:'15,000.00',value2:'15,000.00'},
{name:'张大大',role:'项目经理',value1:'15,000.00',value2:'15,000.00'},
],
dataList3:[
{name:'A组',role:'李艾',value1:'600',value2:'60'},
{name:'A组',role:'李艾',value1:'600',value2:'60'},
{name:'A组',role:'李艾',value1:'600',value2:'60'},
{name:'A组',role:'李艾',value1:'600',value2:'60'},
{name:'A组',role:'李艾',value1:'600',value2:'60'},
{name:'A组',role:'李艾',value1:'600',value2:'60'},
{name:'A组',role:'李艾',value1:'600',value2:'60'},
],
dataList4:[],
}
},
created() {
},
mounted(){
this.getProductList()
},
methods: {
goCustomerDetail(data){
@@ -173,6 +234,33 @@ export default {
},
})
},
getProductList(){
let params = {
type: 'app'
}
getList(params).then(res=>{
if(res.result == '0') {
this.dataList4 = this.dataList4.concat(res.productList)
this.dataList4 = this.dataList4.concat(res.productList)
this.dataList4 = this.dataList4.concat(res.productList)
this.dataList4 = this.dataList4.concat(res.productList)
} else {
this.$toast(res.resultMessage)
}
})
},
goProductDetail(productCode) {
localStorage.productDetailCode = productCode
this.$jump({
flag: 'h5',
extra: {
url: location.origin + `/#/product/ProductDetail/${productCode}`
},
routerInfo: {
path: `/product/ProductDetail/${productCode}`
}
})
},
},
computed: {
text() {