1、新增商城
2、新增自营
This commit is contained in:
@@ -0,0 +1,186 @@
|
||||
<template>
|
||||
<view>
|
||||
<top-bar></top-bar>
|
||||
<common-header></common-header>
|
||||
<category-bar></category-bar>
|
||||
<view class="w-1200 m-a">
|
||||
<u-swiper :list="list" :height="380" borderRadius="0"></u-swiper>
|
||||
<view class="bg-white p-40">
|
||||
<view v-for="(item, index) in configList" :key="index"
|
||||
class="my-20 flex flex-col justify-start items-start">
|
||||
<view v-for="(content, contentIndex) in item.contents" :key="contentIndex" class="mb-20 ">
|
||||
<el-checkbox @change="changeCheck(index, content, contentIndex)">
|
||||
<view class="flex flex-col justify-start items-start">
|
||||
<view class="flex justify-start items-center text-35 mb-20">
|
||||
<text>服务内容:{{ item.name }}</text>
|
||||
<text class="ml-35">
|
||||
业务编号:{{ content.code }}
|
||||
</text>
|
||||
<text class="ml-35">服务服务项目: {{ content.title }}</text>
|
||||
<text class="ml-35"> {{ content.amount }}元/次</text>
|
||||
</view>
|
||||
<view>备注: {{ item.remark }}</view>
|
||||
</view>
|
||||
</el-checkbox>
|
||||
</view>
|
||||
</view>
|
||||
<el-form ref="form" :model="form" label-width="200px">
|
||||
<view v-for="(item, index) in companyList" :key="index">
|
||||
<el-form-item label="考察对象(个人/企业全称):" required>
|
||||
<el-input v-model="companyList[index].name"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="考察对象(个人身份证/企业信用代码):">
|
||||
<el-input v-model="companyList[index].code"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="考察对象(个人/单位)所在地:">
|
||||
<el-input v-model="companyList[index].address"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="接收文件电子邮箱:">
|
||||
<el-input v-model="companyList[index].email"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="接收文件微信:">
|
||||
<el-input v-model="companyList[index].wechat"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="接收文件寄件地址">
|
||||
<el-input v-model="companyList[index].receiveAddress"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="申请人:">
|
||||
<el-input v-model="companyList[index].requestName"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系人:">
|
||||
<el-input v-model="companyList[index].contactName"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系方式:">
|
||||
<el-input v-model="companyList[index].contact"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="本次服务费用小计:">
|
||||
<view class="flex justify-between items-start mb-20 w-100p">
|
||||
<view class="flex justify-start items-center">
|
||||
<el-input v-model="amount" disabled/>
|
||||
<view class="ml-20">
|
||||
<el-button type="primary" @click.native="addCompany">增加考察对象
|
||||
</el-button>
|
||||
</view>
|
||||
<view class="ml-20">
|
||||
<el-button type="primary" plain @click.native="removeCompany(index)"
|
||||
class="ml-20"
|
||||
:disabled="companyList.length === 1">删除该对象
|
||||
</el-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</el-form-item>
|
||||
</view>
|
||||
</el-form>
|
||||
<view class="mt-40 flex justify-center items-center">
|
||||
<view class="flex justify-center items-center">
|
||||
<text>总价:</text>
|
||||
<text class="text-main font-bold text-35">{{ totalAmount }}元</text>
|
||||
</view>
|
||||
<view class="ml-35">客服联系方式: 0771-3923001</view>
|
||||
</view>
|
||||
<view class="mt-40 flex justify-center items-center">
|
||||
<el-button type="primary" :disabled="contentList.length === 0 || companyList.length === 0 || !companyList[0].name">立即支付
|
||||
</el-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<common-footer></common-footer>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "companyQuote",
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
{
|
||||
image: '/static/images/selfSupport/swiper.jpg',
|
||||
title: '昨夜星辰昨夜风，画楼西畔桂堂东'
|
||||
},
|
||||
],
|
||||
form: {},
|
||||
configList: [],
|
||||
checkList: [],
|
||||
contentList: [],
|
||||
companyList: [
|
||||
{
|
||||
name: '',
|
||||
code: '',
|
||||
address: '',
|
||||
email: '',
|
||||
wechat: '',
|
||||
receiveAddress: '',
|
||||
requestName: '',
|
||||
contactName: '',
|
||||
contact: '',
|
||||
}
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getConfigList() {
|
||||
const {rows} = await vk.callFunction({
|
||||
url: 'client/coop/config/pub/getList',
|
||||
data: {type: 0}
|
||||
})
|
||||
if (rows) {
|
||||
this.configList = rows.map(item => {
|
||||
item.contents.map(content => {
|
||||
content.selected = false
|
||||
})
|
||||
return item
|
||||
})
|
||||
}
|
||||
},
|
||||
changeCheck(itemIndex, content, contentIndex) {
|
||||
const index = this.contentList.indexOf(content._index)
|
||||
if (index === -1) {
|
||||
this.contentList.push(content._index)
|
||||
this.contentNameList.push(content.title)
|
||||
}
|
||||
else {
|
||||
this.contentList.splice(index, 1)
|
||||
this.contentNameList.splice(index, 1)
|
||||
}
|
||||
this.configList[itemIndex].contents[contentIndex].selected = index === -1
|
||||
},
|
||||
addCompany() {
|
||||
this.companyList.push({
|
||||
name: '',
|
||||
code: '',
|
||||
address: '',
|
||||
email: '',
|
||||
wechat: '',
|
||||
receiveAddress: '',
|
||||
requestName: '',
|
||||
contactName: '',
|
||||
contact: '',
|
||||
})
|
||||
},
|
||||
removeCompany() {
|
||||
this.companyList.splice(index, 1)
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getConfigList()
|
||||
},
|
||||
computed: {
|
||||
amount() {
|
||||
let tmpAmount = 0
|
||||
this.configList.forEach(item => {
|
||||
item.contents.forEach(content => {
|
||||
if (content.selected) {
|
||||
tmpAmount += parseFloat(content.amount)
|
||||
}
|
||||
})
|
||||
})
|
||||
return tmpAmount
|
||||
},
|
||||
totalAmount() {
|
||||
return this.amount * this.companyList.length
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<view>
|
||||
<top-bar></top-bar>
|
||||
<common-header></common-header>
|
||||
<category-bar></category-bar>
|
||||
<view class="w-1200 m-a">
|
||||
<u-swiper :list="list" :height="380" borderRadius="0"></u-swiper>
|
||||
<view class="bg-white p-40">
|
||||
<view v-for="(item, index) in configList" :key="index"
|
||||
class="my-20 flex flex-col justify-start items-start">
|
||||
<view v-for="(content, contentIndex) in item.contents" :key="contentIndex" class="mb-20 ">
|
||||
<el-checkbox @change="changeCheck(index, content, contentIndex)">
|
||||
<view class="flex flex-col justify-start items-start">
|
||||
<view class="flex justify-start items-center text-35 mb-20">
|
||||
<text>服务内容:{{ item.name }}</text>
|
||||
<text class="ml-35">
|
||||
业务编号:{{ content.code }}
|
||||
</text>
|
||||
<text class="ml-35">服务服务项目: {{ content.title }}</text>
|
||||
<text class="ml-35"> {{ content.amount }}元/次</text>
|
||||
</view>
|
||||
<view>备注: {{ item.remark }}</view>
|
||||
</view>
|
||||
</el-checkbox>
|
||||
</view>
|
||||
</view>
|
||||
<el-form ref="form" :model="form" label-width="200px">
|
||||
<view v-for="(item, index) in productList" :key="index">
|
||||
<el-form-item label="检测产品:" required>
|
||||
<el-input v-model="productList[index].name"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="检测内容">
|
||||
{{ contentNameList.join() }}
|
||||
</el-form-item>
|
||||
<el-form-item label="取样所在地">
|
||||
<el-input v-model="productList[index].address"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="接收文件电子邮箱:">
|
||||
<el-input v-model="productList[index].email"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="接收文件微信:">
|
||||
<el-input v-model="productList[index].wechat"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="接收文件寄件地址">
|
||||
<el-input v-model="productList[index].receiveAddress"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="申请人:">
|
||||
<el-input v-model="productList[index].requestName"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系人:">
|
||||
<el-input v-model="productList[index].contactName"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系方式:">
|
||||
<el-input v-model="productList[index].contact"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="本次服务费用小计:">
|
||||
<view class="flex justify-between items-start mb-20 w-100p">
|
||||
<view class="flex justify-start items-center">
|
||||
<el-input v-model="amount" disabled/>
|
||||
<view class="ml-20">
|
||||
<el-button type="primary" @click.native="addCompany">增加考察对象
|
||||
</el-button>
|
||||
</view>
|
||||
<view class="ml-20">
|
||||
<el-button type="primary" plain @click.native="removeCompany(index)"
|
||||
class="ml-20"
|
||||
:disabled="productList.length === 1">删除该对象
|
||||
</el-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</el-form-item>
|
||||
</view>
|
||||
</el-form>
|
||||
<view class="mt-40 flex justify-center items-center">
|
||||
<view class="flex justify-center items-center">
|
||||
<text>总价:</text>
|
||||
<text class="text-main font-bold text-35">{{ totalAmount }}元</text>
|
||||
</view>
|
||||
<view class="ml-35">客服联系方式: 0771-3923001</view>
|
||||
</view>
|
||||
<view class="mt-40 flex justify-center items-center">
|
||||
<el-button type="primary" :disabled="contentList.length === 0 || productList.length === 0 || !productList[0].name">立即支付
|
||||
</el-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<common-footer></common-footer>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "productQuote",
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
{
|
||||
image: '/static/images/selfSupport/swiper.jpg',
|
||||
title: '昨夜星辰昨夜风，画楼西畔桂堂东'
|
||||
},
|
||||
],
|
||||
form: {},
|
||||
configList: [],
|
||||
checkList: [],
|
||||
contentList: [],
|
||||
contentNameList: [],
|
||||
productList: [
|
||||
{
|
||||
name: '',
|
||||
code: '',
|
||||
address: '',
|
||||
email: '',
|
||||
wechat: '',
|
||||
receiveAddress: '',
|
||||
requestName: '',
|
||||
contactName: '',
|
||||
contact: '',
|
||||
}
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getConfigList() {
|
||||
const {rows} = await vk.callFunction({
|
||||
url: 'client/coop/config/pub/getList',
|
||||
data: {type: 1}
|
||||
})
|
||||
if (rows) {
|
||||
this.configList = rows.map(item => {
|
||||
item.contents.map(content => {
|
||||
content.selected = false
|
||||
})
|
||||
return item
|
||||
})
|
||||
}
|
||||
},
|
||||
changeCheck(itemIndex, content, contentIndex) {
|
||||
const index = this.contentList.indexOf(content._index)
|
||||
if (index === -1) {
|
||||
this.contentList.push(content._index)
|
||||
this.contentNameList.push(content.title)
|
||||
}
|
||||
else {
|
||||
this.contentList.splice(index, 1)
|
||||
this.contentNameList.splice(index, 1)
|
||||
}
|
||||
this.configList[itemIndex].contents[contentIndex].selected = index === -1
|
||||
},
|
||||
addCompany() {
|
||||
this.productList.push({
|
||||
name: '',
|
||||
code: '',
|
||||
address: '',
|
||||
email: '',
|
||||
wechat: '',
|
||||
receiveAddress: '',
|
||||
requestName: '',
|
||||
contactName: '',
|
||||
contact: '',
|
||||
})
|
||||
},
|
||||
removeCompany() {
|
||||
this.productList.splice(index, 1)
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getConfigList()
|
||||
},
|
||||
computed: {
|
||||
amount() {
|
||||
let tmpAmount = 0
|
||||
this.configList.forEach(item => {
|
||||
item.contents.forEach(content => {
|
||||
if (content.selected) {
|
||||
tmpAmount += parseFloat(content.amount)
|
||||
}
|
||||
})
|
||||
})
|
||||
return tmpAmount
|
||||
},
|
||||
totalAmount() {
|
||||
return this.amount * this.productList.length
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<view>
|
||||
<top-bar></top-bar>
|
||||
<common-header></common-header>
|
||||
<category-bar></category-bar>
|
||||
<view class="w-1200 m-a">
|
||||
<u-swiper :list="list" :height="380" borderRadius="0"></u-swiper>
|
||||
<view class="flex flex-col">
|
||||
<image src="/static/images/selfSupport/company.jpg" class="w-100p pointer" mode="widthFix"
|
||||
@click="navTo('/pages/index/self-support/companyQuote')"/>
|
||||
<image src="/static/images/selfSupport/product.jpg" class="w-100p pointer mt-20" mode="widthFix"
|
||||
@click="navTo('/pages/index/self-support/productQuote')"/>
|
||||
</view>
|
||||
</view>
|
||||
<common-footer></common-footer>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "selectType",
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
{
|
||||
image: '/static/images/selfSupport/swiper.jpg',
|
||||
title: '昨夜星辰昨夜风，画楼西畔桂堂东'
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
navTo(url) {
|
||||
vk.navigateTo(url);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,366 +1,207 @@
|
||||
<template>
|
||||
<view>
|
||||
<top-bar></top-bar>
|
||||
<common-header></common-header>
|
||||
<category-bar></category-bar>
|
||||
<view class="w-1200">
|
||||
<u-swiper :list="list" :height="380" borderRadius="0"></u-swiper>
|
||||
<view class="test">
|
||||
<text @click="navTo('/pages/index/self-support/self-support')">自营钢城</text>
|
||||
<text @click="navTo('/pages/index/server/server')">平台服务</text>
|
||||
<text @click="navTo('/pages/index/shop/shop')">特产商城</text>
|
||||
</view>
|
||||
<view class="tool-bar">
|
||||
<view class="search">
|
||||
<text>交易区域：</text>
|
||||
<el-cascader :options="options">
|
||||
<template slot-scope="{ node, data }">
|
||||
<span>{{ data.label }}</span>
|
||||
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
|
||||
</template>
|
||||
</el-cascader>
|
||||
<view>
|
||||
<top-bar></top-bar>
|
||||
<common-header></common-header>
|
||||
<category-bar></category-bar>
|
||||
<view class="w-1200">
|
||||
<u-swiper :list="list" :height="380" borderRadius="0"></u-swiper>
|
||||
<view class="test">
|
||||
<text class="pointer" @click="navTo('/pages/index/self-support/self-support')">自营钢城</text>
|
||||
<text class="pointer" @click="navTo('/pages/index/self-support/selectType')">平台服务</text>
|
||||
<text class="pointer" @click="navTo('/pages/index/shop/shop')">特产商城</text>
|
||||
</view>
|
||||
<view class="tool-bar">
|
||||
<view class="search">
|
||||
<text>交易区域：</text>
|
||||
<el-cascader :options="options" :props="{label: 'name', value: 'code'}" v-model="address"/>
|
||||
</view>
|
||||
<view class="buy-btn">
|
||||
<el-button type="primary" plain class="empty-bg-plain-btn" :disabled="address.length === 0">下单询价 ></el-button>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 合作单位/联营单位-->
|
||||
<view class="cooperate">
|
||||
<view class="title">合作单位/联营单位</view>
|
||||
<u-gap height="5" bg-color="#f3f3f3"/>
|
||||
<view class="flex justify-start items-start flex-wrap">
|
||||
<view class="w-25p pointer" v-for="(item, index) in companyList" :key="index">
|
||||
<view class="border bg-white flex flex-col justify-center items-center p-20">
|
||||
<image :src="item.businessCard.logo" class="logo"/>
|
||||
<span class="mt-20 line-1 w-100p text-center">
|
||||
主营: {{ item.businessCard.mainBusiness }}
|
||||
</span>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-gap height="5" bg-color="#f3f3f3"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="buy-btn">
|
||||
<u-button type="error" plain>下单询价</u-button>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 合作单位/联营单位-->
|
||||
<view class="cooperate">
|
||||
<view class="title">合作单位/联营单位</view>
|
||||
<u-gap height="5" bg-color="#f3f3f3" />
|
||||
<el-row class="wrap" type="flex" :gutter="0" justify="space-between">
|
||||
<el-col :span="6">
|
||||
<div class="grid-content bg-purple">
|
||||
<el-image class="image" src="https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/static/img/logo.d1f4a2b6.png" />
|
||||
<view class="comments">
|
||||
主营：架子管 扣件 建筑材料租赁
|
||||
</view>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="grid-content bg-purple">
|
||||
<el-image class="image" src="https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/static/img/logo.d1f4a2b6.png" />
|
||||
<view class="comments">
|
||||
主营：架子管 扣件 建筑材料租赁
|
||||
</view>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="grid-content bg-purple">
|
||||
<el-image class="image" src="https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/static/img/logo.d1f4a2b6.png" />
|
||||
<view class="comments">
|
||||
主营：架子管 扣件 建筑材料租赁
|
||||
</view>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="grid-content bg-purple">
|
||||
<el-image class="image" src="https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/static/img/logo.d1f4a2b6.png" />
|
||||
<view class="comments">
|
||||
主营：架子管 扣件 建筑材料租赁
|
||||
</view>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="grid-content bg-purple">
|
||||
<el-image class="image" src="https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/static/img/logo.d1f4a2b6.png" />
|
||||
<view class="comments">
|
||||
主营：架子管 扣件 建筑材料租赁
|
||||
</view>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="grid-content bg-purple">
|
||||
<el-image class="image" src="https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/static/img/logo.d1f4a2b6.png" />
|
||||
<view class="comments">
|
||||
主营：架子管 扣件 建筑材料租赁
|
||||
</view>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="grid-content bg-purple">
|
||||
<el-image class="image" src="https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/static/img/logo.d1f4a2b6.png" />
|
||||
<view class="comments">
|
||||
主营：架子管 扣件 建筑材料租赁
|
||||
</view>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="grid-content bg-purple">
|
||||
<el-image class="image" src="https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/static/img/logo.d1f4a2b6.png" />
|
||||
<view class="comments">
|
||||
主营：架子管 扣件 建筑材料租赁
|
||||
</view>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<u-gap height="5" bg-color="#f3f3f3" /><el-row class="wrap" type="flex" :gutter="0" justify="space-between">
|
||||
<el-col :span="6">
|
||||
<div class="grid-content bg-purple">
|
||||
<el-image class="image" src="https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/static/img/logo.d1f4a2b6.png" />
|
||||
<view class="comments">
|
||||
主营：架子管 扣件 建筑材料租赁
|
||||
</view>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="grid-content bg-purple">
|
||||
<el-image class="image" src="https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/static/img/logo.d1f4a2b6.png" />
|
||||
<view class="comments">
|
||||
主营：架子管 扣件 建筑材料租赁
|
||||
</view>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="grid-content bg-purple">
|
||||
<el-image class="image" src="https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/static/img/logo.d1f4a2b6.png" />
|
||||
<view class="comments">
|
||||
主营：架子管 扣件 建筑材料租赁
|
||||
</view>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="grid-content bg-purple">
|
||||
<el-image class="image" src="https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/static/img/logo.d1f4a2b6.png" />
|
||||
<view class="comments">
|
||||
主营：架子管 扣件 建筑材料租赁
|
||||
</view>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="grid-content bg-purple">
|
||||
<el-image class="image" src="https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/static/img/logo.d1f4a2b6.png" />
|
||||
<view class="comments">
|
||||
主营：架子管 扣件 建筑材料租赁
|
||||
</view>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="grid-content bg-purple">
|
||||
<el-image class="image" src="https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/static/img/logo.d1f4a2b6.png" />
|
||||
<view class="comments">
|
||||
主营：架子管 扣件 建筑材料租赁
|
||||
</view>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="grid-content bg-purple">
|
||||
<el-image class="image" src="https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/static/img/logo.d1f4a2b6.png" />
|
||||
<view class="comments">
|
||||
主营：架子管 扣件 建筑材料租赁
|
||||
</view>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="grid-content bg-purple">
|
||||
<el-image class="image" src="https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/static/img/logo.d1f4a2b6.png" />
|
||||
<view class="comments">
|
||||
主营：架子管 扣件 建筑材料租赁
|
||||
</view>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<u-gap height="5" bg-color="#f3f3f3" />
|
||||
<el-row class="wrap" type="flex" :gutter="0" justify="space-between">
|
||||
<el-col :span="6">
|
||||
<div class="grid-content bg-purple">
|
||||
<el-image class="image" src="https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/static/img/logo.d1f4a2b6.png" />
|
||||
<view class="comments">
|
||||
主营：架子管 扣件 建筑材料租赁
|
||||
</view>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="grid-content bg-purple">
|
||||
<el-image class="image" src="https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/static/img/logo.d1f4a2b6.png" />
|
||||
<view class="comments">
|
||||
主营：架子管 扣件 建筑材料租赁
|
||||
</view>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="grid-content bg-purple">
|
||||
<el-image class="image" src="https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/static/img/logo.d1f4a2b6.png" />
|
||||
<view class="comments">
|
||||
主营：架子管 扣件 建筑材料租赁
|
||||
</view>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="grid-content bg-purple">
|
||||
<el-image class="image" src="https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/static/img/logo.d1f4a2b6.png" />
|
||||
<view class="comments">
|
||||
主营：架子管 扣件 建筑材料租赁
|
||||
</view>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="grid-content bg-purple">
|
||||
<el-image class="image" src="https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/static/img/logo.d1f4a2b6.png" />
|
||||
<view class="comments">
|
||||
主营：架子管 扣件 建筑材料租赁
|
||||
</view>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="grid-content bg-purple">
|
||||
<el-image class="image" src="https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/static/img/logo.d1f4a2b6.png" />
|
||||
<view class="comments">
|
||||
主营：架子管 扣件 建筑材料租赁
|
||||
</view>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="grid-content bg-purple">
|
||||
<el-image class="image" src="https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/static/img/logo.d1f4a2b6.png" />
|
||||
<view class="comments">
|
||||
主营：架子管 扣件 建筑材料租赁
|
||||
</view>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="grid-content bg-purple">
|
||||
<el-image class="image" src="https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/static/img/logo.d1f4a2b6.png" />
|
||||
<view class="comments">
|
||||
主营：架子管 扣件 建筑材料租赁
|
||||
</view>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<u-gap height="5" bg-color="#f3f3f3" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- 现货市场 end -->
|
||||
<gap height="50"/>
|
||||
<common-footer></common-footer>
|
||||
</view>
|
||||
<!-- 现货市场 end -->
|
||||
<gap height="50"/>
|
||||
<common-footer></common-footer>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UGap from "@/uni_modules/vk-uview-ui/components/u-gap/u-gap.vue";
|
||||
import UGap from "@/uni_modules/vk-uview-ui/components/u-gap/u-gap.vue";
|
||||
import provinces from "@/uni_modules/vk-uview-ui/libs/address/provinces.json";
|
||||
import citys from "@/uni_modules/vk-uview-ui/libs/address/citys.json";
|
||||
|
||||
export default {
|
||||
components: {UGap},
|
||||
data() {
|
||||
return {
|
||||
list: [{
|
||||
image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
|
||||
title: '昨夜星辰昨夜风，画楼西畔桂堂东'
|
||||
},
|
||||
{
|
||||
image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
|
||||
title: '身无彩凤双飞翼，心有灵犀一点通'
|
||||
},
|
||||
{
|
||||
image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
|
||||
title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
|
||||
}
|
||||
],
|
||||
options: [{
|
||||
value: 'zhinan',
|
||||
label: '广西',
|
||||
children: [{
|
||||
value: 'shejiyuanze',
|
||||
label: '南宁市',
|
||||
children: [{
|
||||
value: 'yizhi',
|
||||
label: '良庆区'
|
||||
}, {
|
||||
value: 'fankui',
|
||||
label: 'XXX'
|
||||
}, {
|
||||
value: 'xiaolv',
|
||||
label: 'XXX'
|
||||
}, {
|
||||
value: 'kekong',
|
||||
label: 'XXX'
|
||||
}]
|
||||
}, {
|
||||
value: 'daohang',
|
||||
label: '北海市',
|
||||
children: [{
|
||||
value: 'cexiangdaohang',
|
||||
label: 'XXX'
|
||||
}, {
|
||||
value: 'dingbudaohang',
|
||||
label: 'XXX'
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
console.log(options);
|
||||
if (options && options.menu) {
|
||||
this.currMenu = options.menu
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
menuSelect(e) {
|
||||
this.currMenu = e
|
||||
},
|
||||
navTo(url) {
|
||||
vk.navigateTo(url);
|
||||
}
|
||||
}
|
||||
}
|
||||
export default {
|
||||
components: {UGap},
|
||||
data() {
|
||||
return {
|
||||
address: [],
|
||||
list: [{
|
||||
image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
|
||||
title: '昨夜星辰昨夜风，画楼西畔桂堂东'
|
||||
},
|
||||
{
|
||||
image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
|
||||
title: '身无彩凤双飞翼，心有灵犀一点通'
|
||||
},
|
||||
{
|
||||
image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
|
||||
title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
|
||||
}
|
||||
],
|
||||
options: [{
|
||||
value: 'zhinan',
|
||||
label: '广西',
|
||||
children: [{
|
||||
value: 'shejiyuanze',
|
||||
label: '南宁市',
|
||||
children: [{
|
||||
value: 'yizhi',
|
||||
label: '良庆区'
|
||||
}, {
|
||||
value: 'fankui',
|
||||
label: 'XXX'
|
||||
}, {
|
||||
value: 'xiaolv',
|
||||
label: 'XXX'
|
||||
}, {
|
||||
value: 'kekong',
|
||||
label: 'XXX'
|
||||
}]
|
||||
}, {
|
||||
value: 'daohang',
|
||||
label: '北海市',
|
||||
children: [{
|
||||
value: 'cexiangdaohang',
|
||||
label: 'XXX'
|
||||
}, {
|
||||
value: 'dingbudaohang',
|
||||
label: 'XXX'
|
||||
}]
|
||||
}]
|
||||
}],
|
||||
companyList: []
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
if (options && options.menu) {
|
||||
this.currMenu = options.menu
|
||||
}
|
||||
this.getCompanyList()
|
||||
this.options = provinces.map(item => {
|
||||
item.children = [];
|
||||
return item
|
||||
})
|
||||
this.options.forEach((province, index) => {
|
||||
citys[index].forEach(city => {
|
||||
this.options[index].children.push(city)
|
||||
})
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
menuSelect(e) {
|
||||
this.currMenu = e
|
||||
},
|
||||
navTo(url) {
|
||||
vk.navigateTo(url);
|
||||
},
|
||||
async getCompanyList() {
|
||||
const {rows} = await vk.callFunction({
|
||||
url: 'client/user/pub/getCompany',
|
||||
data: {isCoop: 1}
|
||||
})
|
||||
this.companyList = rows
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.w-1200 {
|
||||
width: 1200px;
|
||||
margin: 20px auto;
|
||||
.w-1200 {
|
||||
width: 1200px;
|
||||
margin: 20px auto;
|
||||
background-color: #fff;
|
||||
.test{
|
||||
height: 50px;
|
||||
color: #ffffff;
|
||||
font-size: 18px;
|
||||
background-color: #bf2b28;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text{
|
||||
margin: 0 20px;
|
||||
}
|
||||
}
|
||||
.tool-bar{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
font-size: 16px;
|
||||
.search{
|
||||
|
||||
.test {
|
||||
height: 50px;
|
||||
color: #ffffff;
|
||||
font-size: 18px;
|
||||
background-color: #bf2b28;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.cooperate{
|
||||
.title{
|
||||
text-align: center;
|
||||
color: #bf2b28;
|
||||
font-size: 28px;
|
||||
line-height: 3em;
|
||||
}
|
||||
.wrap{
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.grid-content{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
flex-direction: column;
|
||||
.comments{
|
||||
line-height: 2em;
|
||||
|
||||
text {
|
||||
margin: 0 20px;
|
||||
}
|
||||
}
|
||||
.bg-purple{
|
||||
border-top: 1px solid #f3f3f3;
|
||||
border-right: 1px solid #f3f3f3;
|
||||
.image{
|
||||
width: 140px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tool-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
font-size: 16px;
|
||||
|
||||
.search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.cooperate {
|
||||
.title {
|
||||
text-align: center;
|
||||
color: #bf2b28;
|
||||
font-size: 28px;
|
||||
line-height: 3em;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.grid-content {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
flex-direction: column;
|
||||
|
||||
.comments {
|
||||
line-height: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-purple {
|
||||
border-top: 1px solid #f3f3f3;
|
||||
border-right: 1px solid #f3f3f3;
|
||||
|
||||
.image {
|
||||
width: 140px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
</style>
|
||||
|
||||
+91
-239
@@ -1,259 +1,111 @@
|
||||
<template>
|
||||
<view>
|
||||
<top-bar></top-bar>
|
||||
<common-header></common-header>
|
||||
<category-bar></category-bar>
|
||||
<view class="w-1200">
|
||||
<u-swiper :list="list" :height="380" borderRadius="0"></u-swiper>
|
||||
<view class="tool-bar">
|
||||
<view class="search">
|
||||
<text>地区：</text>
|
||||
<el-cascader :options="options">
|
||||
<template slot-scope="{ node, data }">
|
||||
<span>{{ data.label }}</span>
|
||||
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
|
||||
</template>
|
||||
</el-cascader>
|
||||
<view>
|
||||
<top-bar></top-bar>
|
||||
<common-header></common-header>
|
||||
<category-bar></category-bar>
|
||||
<view class="w-1200 m-a">
|
||||
<view class="page-nav">
|
||||
<el-breadcrumb separator=">">
|
||||
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>
|
||||
<navigator style="display: inline-block;" url="/pages/index/shop/shop">特产商城</navigator>
|
||||
</el-breadcrumb-item>
|
||||
<el-breadcrumb-item class="text-main">{{ info.name }}</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</view>
|
||||
<view class="bg-white p-40 flex justify-start items-start">
|
||||
<el-carousel height="400px" class="album">
|
||||
<el-carousel-item v-for="(item, index) in info.album" :key="index">
|
||||
<image :src="item" class="album-item" mode="aspectFill"/>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
<view class="ml-35 flex flex-col justify-start items-start flex-1">
|
||||
<view class="font-bold text-40 mb-20">{{ info.name }}</view>
|
||||
<view class="flex flex-col justify-start items-start flex-1">
|
||||
<text>产品介绍:</text>
|
||||
<view class="desc p-20 mt-20">{{ info.desc }}</view>
|
||||
</view>
|
||||
<view class="flex justify-between items-center w-100p mt-20">
|
||||
<view class="flex justify-start items-center">
|
||||
<text>零售价:</text>
|
||||
<text class="font-bold text-main">￥{{ info.amount }}</text>
|
||||
</view>
|
||||
<view class="flex justify-end is-center">
|
||||
<el-button type="danger" round class="add-to-cart-btn">加入购物车</el-button>
|
||||
<el-button type="primary" round class="ml-35">立即购买</el-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mt-40">
|
||||
<view class="intro-title">商品介绍</view>
|
||||
<view class="intro bg-white" v-html="info.content"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="buy-btn">
|
||||
<image src="https://oss.wsdns.cn/20231204/bcc976f4396e437abf19deb11c1f06b4.png" mode="widthFix" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="tool-bar">
|
||||
<view class="item">分类：</view>
|
||||
<view class="item">全部</view>
|
||||
<view class="item">果蔬农产品</view>
|
||||
<view class="item">特产食品粮油肉蛋禽</view>
|
||||
<view class="item">茶类</view>
|
||||
<view class="item">酒类</view>
|
||||
<view class="item">工艺类</view>
|
||||
<view class="item">旅游户外商用</view>
|
||||
<view class="item">日用美容洗涤</view>
|
||||
<view class="item">电子产品</view>
|
||||
</view>
|
||||
<!-- 现货市场 end -->
|
||||
<gap height="50"/>
|
||||
<common-footer></common-footer>
|
||||
</view>
|
||||
|
||||
<view class="goods-list">
|
||||
<el-row class="wrap" type="flex" :gutter="10" justify="space-between">
|
||||
<el-col :span="5">
|
||||
<div class="grid-content bg-purple" @click="navTo('/pages/goods-detail/goods-detail?id=1')">
|
||||
<image src="http://jyx.gxwebsoft.com/uploads/20210828/0d9c23898f9c922fd96983f974d3fe84.jpg" mode="aspectFit" />
|
||||
<view class="comments">
|
||||
<view class="goods-name">
|
||||
<el-tag
|
||||
type="danger"
|
||||
size="mini">
|
||||
自营
|
||||
</el-tag>
|
||||
商品名称
|
||||
</view>
|
||||
<view class="goods-price">￥139.00</view>
|
||||
</view>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<div class="grid-content bg-purple">
|
||||
<image src="http://jyx.gxwebsoft.com/uploads/20210828/0d9c23898f9c922fd96983f974d3fe84.jpg" mode="aspectFit" />
|
||||
<view class="comments">
|
||||
<view class="goods-name">商品名称</view>
|
||||
<view class="goods-price">￥139.00</view>
|
||||
</view>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<div class="grid-content bg-purple">
|
||||
<image src="http://jyx.gxwebsoft.com/uploads/20210828/0d9c23898f9c922fd96983f974d3fe84.jpg" mode="aspectFit" />
|
||||
<view class="comments">
|
||||
<view class="goods-name">商品名称</view>
|
||||
<view class="goods-price">￥139.00</view>
|
||||
</view>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<div class="grid-content bg-purple">
|
||||
<image src="http://jyx.gxwebsoft.com/uploads/20210828/0d9c23898f9c922fd96983f974d3fe84.jpg" mode="aspectFit" />
|
||||
<view class="comments">
|
||||
<view class="goods-name">商品名称</view>
|
||||
<view class="goods-price">￥139.00</view>
|
||||
</view>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="grid-content bg-purple">
|
||||
<image src="http://jyx.gxwebsoft.com/uploads/20210828/0d9c23898f9c922fd96983f974d3fe84.jpg" mode="aspectFit" />
|
||||
<view class="comments">
|
||||
<view class="goods-name">商品名称</view>
|
||||
<view class="goods-price">￥139.00</view>
|
||||
</view>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<div class="grid-content bg-purple">
|
||||
<image src="http://jyx.gxwebsoft.com/uploads/20210828/0d9c23898f9c922fd96983f974d3fe84.jpg" mode="aspectFit" />
|
||||
<view class="comments">
|
||||
<view class="goods-name">商品名称</view>
|
||||
<view class="goods-price">￥139.00</view>
|
||||
</view>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:total="1000">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</view>
|
||||
<!-- 现货市场 end -->
|
||||
<gap height="50"/>
|
||||
<common-footer></common-footer>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UGap from "@/uni_modules/vk-uview-ui/components/u-gap/u-gap.vue";
|
||||
|
||||
export default {
|
||||
components: {UGap},
|
||||
data() {
|
||||
return {
|
||||
list: [{
|
||||
image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
|
||||
title: '昨夜星辰昨夜风，画楼西畔桂堂东'
|
||||
},
|
||||
{
|
||||
image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
|
||||
title: '身无彩凤双飞翼，心有灵犀一点通'
|
||||
},
|
||||
{
|
||||
image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
|
||||
title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
|
||||
}
|
||||
],
|
||||
options: [{
|
||||
value: 'zhinan',
|
||||
label: '广西',
|
||||
children: [{
|
||||
value: 'shejiyuanze',
|
||||
label: '南宁市',
|
||||
children: [{
|
||||
value: 'yizhi',
|
||||
label: '良庆区'
|
||||
}, {
|
||||
value: 'fankui',
|
||||
label: 'XXX'
|
||||
}, {
|
||||
value: 'xiaolv',
|
||||
label: 'XXX'
|
||||
}, {
|
||||
value: 'kekong',
|
||||
label: 'XXX'
|
||||
}]
|
||||
}, {
|
||||
value: 'daohang',
|
||||
label: '北海市',
|
||||
children: [{
|
||||
value: 'cexiangdaohang',
|
||||
label: 'XXX'
|
||||
}, {
|
||||
value: 'dingbudaohang',
|
||||
label: 'XXX'
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
console.log(options);
|
||||
if (options && options.menu) {
|
||||
this.currMenu = options.menu
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
menuSelect(e) {
|
||||
this.currMenu = e
|
||||
components: {UGap},
|
||||
data() {
|
||||
return {
|
||||
info: {
|
||||
name: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
navTo(url) {
|
||||
vk.navigateTo(url);
|
||||
onLoad(options) {
|
||||
if (options && options.id) {
|
||||
this.getInfo(options.id)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
navTo(url) {
|
||||
vk.navigateTo(url);
|
||||
},
|
||||
async getInfo(id) {
|
||||
this.info = await vk.callFunction({
|
||||
url: 'client/goods/list/pub/getDetail',
|
||||
data: {id}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.w-1200 {
|
||||
width: 1200px;
|
||||
margin: 20px auto;
|
||||
background-color: #fff;
|
||||
.test{
|
||||
height: 50px;
|
||||
color: #ffffff;
|
||||
font-size: 18px;
|
||||
background-color: #bf2b28;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text{
|
||||
margin: 0 20px;
|
||||
<style lang="scss" scoped>
|
||||
.album {
|
||||
width: 500px;
|
||||
|
||||
.album-item {
|
||||
width: 500px;
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
.tool-bar{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
font-size: 16px;
|
||||
.search{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.wrap{
|
||||
flex-wrap: wrap;
|
||||
|
||||
.desc {
|
||||
background-color: #F5E2E3;
|
||||
}
|
||||
.goods-list{
|
||||
width: 1200px;
|
||||
margin: 20px auto;
|
||||
.grid-content{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
flex-direction: column;
|
||||
.comments{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
line-height: 2em;
|
||||
.goods-name{
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.goods-price{
|
||||
color: #bf2b28;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bg-purple{
|
||||
border-top: 1px solid #f3f3f3;
|
||||
border-right: 1px solid #f3f3f3;
|
||||
image{
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
.add-to-cart-btn{
|
||||
background-color: #FF7300;
|
||||
}
|
||||
.pagination{
|
||||
width: 1200px;
|
||||
margin: 20px auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.intro-title{
|
||||
background-color: #EF0021;
|
||||
padding: 10px 20px;
|
||||
color: white;
|
||||
width: 120px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.intro{
|
||||
border-top: 1px solid #F95F6E;
|
||||
}
|
||||
</style>
|
||||
|
||||
+187
-234
@@ -1,259 +1,212 @@
|
||||
<template>
|
||||
<view>
|
||||
<top-bar></top-bar>
|
||||
<common-header></common-header>
|
||||
<category-bar></category-bar>
|
||||
<view class="w-1200">
|
||||
<u-swiper :list="list" :height="380" borderRadius="0"></u-swiper>
|
||||
<view class="tool-bar">
|
||||
<view class="search">
|
||||
<text>地区：</text>
|
||||
<el-cascader :options="options">
|
||||
<template slot-scope="{ node, data }">
|
||||
<span>{{ data.label }}</span>
|
||||
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
|
||||
</template>
|
||||
</el-cascader>
|
||||
<view>
|
||||
<top-bar></top-bar>
|
||||
<common-header></common-header>
|
||||
<category-bar></category-bar>
|
||||
<view class="w-1200">
|
||||
<u-swiper :list="list" :height="380" borderRadius="0"></u-swiper>
|
||||
<view class="tool-bar">
|
||||
<view class="search">
|
||||
<text>地区：</text>
|
||||
<el-cascader :options="options" :props="{label: 'name', value: 'code'}" v-model="address"/>
|
||||
</view>
|
||||
<view class="buy-btn">
|
||||
<image src="https://oss.wsdns.cn/20231204/bcc976f4396e437abf19deb11c1f06b4.png" mode="widthFix"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tool-bar">
|
||||
<view class="item">分类：</view>
|
||||
<view class="item">全部</view>
|
||||
<view class="item" v-for="(item, index) in categoryList" :key="index">{{ item.name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="buy-btn">
|
||||
<image src="https://oss.wsdns.cn/20231204/bcc976f4396e437abf19deb11c1f06b4.png" mode="widthFix" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="tool-bar">
|
||||
<view class="item">分类：</view>
|
||||
<view class="item">全部</view>
|
||||
<view class="item">果蔬农产品</view>
|
||||
<view class="item">特产食品粮油肉蛋禽</view>
|
||||
<view class="item">茶类</view>
|
||||
<view class="item">酒类</view>
|
||||
<view class="item">工艺类</view>
|
||||
<view class="item">旅游户外商用</view>
|
||||
<view class="item">日用美容洗涤</view>
|
||||
<view class="item">电子产品</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="goods-list">
|
||||
<el-row class="wrap" type="flex" :gutter="10" justify="space-between">
|
||||
<el-col :span="5">
|
||||
<div class="grid-content bg-purple" @click="navTo('/pages/goods-detail/goods-detail?id=1')">
|
||||
<image src="http://jyx.gxwebsoft.com/uploads/20210828/0d9c23898f9c922fd96983f974d3fe84.jpg" mode="aspectFit" />
|
||||
<view class="comments">
|
||||
<view class="goods-name">
|
||||
<el-tag
|
||||
type="danger"
|
||||
size="mini">
|
||||
自营
|
||||
</el-tag>
|
||||
商品名称
|
||||
</view>
|
||||
<view class="goods-price">￥139.00</view>
|
||||
</view>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<div class="grid-content bg-purple">
|
||||
<image src="http://jyx.gxwebsoft.com/uploads/20210828/0d9c23898f9c922fd96983f974d3fe84.jpg" mode="aspectFit" />
|
||||
<view class="comments">
|
||||
<view class="goods-name">商品名称</view>
|
||||
<view class="goods-price">￥139.00</view>
|
||||
</view>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<div class="grid-content bg-purple">
|
||||
<image src="http://jyx.gxwebsoft.com/uploads/20210828/0d9c23898f9c922fd96983f974d3fe84.jpg" mode="aspectFit" />
|
||||
<view class="comments">
|
||||
<view class="goods-name">商品名称</view>
|
||||
<view class="goods-price">￥139.00</view>
|
||||
</view>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<div class="grid-content bg-purple">
|
||||
<image src="http://jyx.gxwebsoft.com/uploads/20210828/0d9c23898f9c922fd96983f974d3fe84.jpg" mode="aspectFit" />
|
||||
<view class="comments">
|
||||
<view class="goods-name">商品名称</view>
|
||||
<view class="goods-price">￥139.00</view>
|
||||
</view>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="grid-content bg-purple">
|
||||
<image src="http://jyx.gxwebsoft.com/uploads/20210828/0d9c23898f9c922fd96983f974d3fe84.jpg" mode="aspectFit" />
|
||||
<view class="comments">
|
||||
<view class="goods-name">商品名称</view>
|
||||
<view class="goods-price">￥139.00</view>
|
||||
</view>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<div class="grid-content bg-purple">
|
||||
<image src="http://jyx.gxwebsoft.com/uploads/20210828/0d9c23898f9c922fd96983f974d3fe84.jpg" mode="aspectFit" />
|
||||
<view class="comments">
|
||||
<view class="goods-name">商品名称</view>
|
||||
<view class="goods-price">￥139.00</view>
|
||||
</view>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:total="1000">
|
||||
</el-pagination>
|
||||
</div>
|
||||
<view class="goods-list">
|
||||
<el-row class="wrap" type="flex" :gutter="10" justify="space-between">
|
||||
<el-col :span="4" v-for="(item, index) in goodsList" :key="index">
|
||||
<div class="grid-content bg-purple pointer"
|
||||
@click="navTo(`/pages/index/shop/detail?id=${item._id}`)">
|
||||
<image :src="item.cover" mode="aspectFill"/>
|
||||
<view class="comments">
|
||||
<view class="goods-name">
|
||||
{{ item.name }}
|
||||
</view>
|
||||
<view class="goods-price">￥{{ item.amount }}</view>
|
||||
</view>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:total="1000">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</view>
|
||||
<!-- 现货市场 end -->
|
||||
<gap height="50"/>
|
||||
<common-footer></common-footer>
|
||||
</view>
|
||||
<!-- 现货市场 end -->
|
||||
<gap height="50"/>
|
||||
<common-footer></common-footer>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UGap from "@/uni_modules/vk-uview-ui/components/u-gap/u-gap.vue";
|
||||
import provinces from "@/uni_modules/vk-uview-ui/libs/address/provinces.json";
|
||||
import citys from "@/uni_modules/vk-uview-ui/libs/address/citys.json";
|
||||
|
||||
export default {
|
||||
components: {UGap},
|
||||
data() {
|
||||
return {
|
||||
list: [{
|
||||
image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
|
||||
title: '昨夜星辰昨夜风，画楼西畔桂堂东'
|
||||
},
|
||||
{
|
||||
image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
|
||||
title: '身无彩凤双飞翼，心有灵犀一点通'
|
||||
},
|
||||
{
|
||||
image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
|
||||
title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
|
||||
}
|
||||
],
|
||||
options: [{
|
||||
value: 'zhinan',
|
||||
label: '广西',
|
||||
children: [{
|
||||
value: 'shejiyuanze',
|
||||
label: '南宁市',
|
||||
children: [{
|
||||
value: 'yizhi',
|
||||
label: '良庆区'
|
||||
}, {
|
||||
value: 'fankui',
|
||||
label: 'XXX'
|
||||
}, {
|
||||
value: 'xiaolv',
|
||||
label: 'XXX'
|
||||
}, {
|
||||
value: 'kekong',
|
||||
label: 'XXX'
|
||||
}]
|
||||
}, {
|
||||
value: 'daohang',
|
||||
label: '北海市',
|
||||
children: [{
|
||||
value: 'cexiangdaohang',
|
||||
label: 'XXX'
|
||||
}, {
|
||||
value: 'dingbudaohang',
|
||||
label: 'XXX'
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
console.log(options);
|
||||
if (options && options.menu) {
|
||||
this.currMenu = options.menu
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
menuSelect(e) {
|
||||
this.currMenu = e
|
||||
components: {UGap},
|
||||
data() {
|
||||
return {
|
||||
categoryList: [],
|
||||
goodsList: [],
|
||||
list: [
|
||||
{
|
||||
image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
|
||||
title: '昨夜星辰昨夜风，画楼西畔桂堂东'
|
||||
},
|
||||
{
|
||||
image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
|
||||
title: '身无彩凤双飞翼，心有灵犀一点通'
|
||||
},
|
||||
{
|
||||
image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
|
||||
title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
|
||||
}
|
||||
],
|
||||
options: [],
|
||||
address: []
|
||||
};
|
||||
},
|
||||
navTo(url) {
|
||||
vk.navigateTo(url);
|
||||
onLoad(options) {
|
||||
if (options && options.menu) {
|
||||
this.currMenu = options.menu
|
||||
}
|
||||
this.options = provinces.map(item => {
|
||||
item.children = [];
|
||||
return item
|
||||
})
|
||||
this.options.forEach((province, index) => {
|
||||
citys[index].forEach(city => {
|
||||
this.options[index].children.push(city)
|
||||
})
|
||||
})
|
||||
this.getCategoryList()
|
||||
this.getGoodsList()
|
||||
},
|
||||
methods: {
|
||||
menuSelect(e) {
|
||||
this.currMenu = e
|
||||
},
|
||||
navTo(url) {
|
||||
vk.navigateTo(url);
|
||||
},
|
||||
getCategoryList() {
|
||||
vk.callFunction({
|
||||
url: 'client/goods/category/pub/getList'
|
||||
}).then(res => {
|
||||
this.categoryList = res.rows
|
||||
})
|
||||
},
|
||||
getGoodsList() {
|
||||
vk.callFunction({
|
||||
url: 'client/goods/list/pub/getList'
|
||||
}).then(res => {
|
||||
this.goodsList = res.rows
|
||||
})
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.w-1200 {
|
||||
width: 1200px;
|
||||
margin: 20px auto;
|
||||
background-color: #fff;
|
||||
.test{
|
||||
height: 50px;
|
||||
color: #ffffff;
|
||||
font-size: 18px;
|
||||
background-color: #bf2b28;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text{
|
||||
margin: 0 20px;
|
||||
}
|
||||
}
|
||||
.tool-bar{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
font-size: 16px;
|
||||
.search{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.wrap{
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.goods-list{
|
||||
width: 1200px;
|
||||
margin: 20px auto;
|
||||
.grid-content{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 1200px;
|
||||
margin: 20px auto;
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
flex-direction: column;
|
||||
.comments{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
line-height: 2em;
|
||||
.goods-name{
|
||||
font-size: 16px;
|
||||
|
||||
.test {
|
||||
height: 50px;
|
||||
color: #ffffff;
|
||||
font-size: 18px;
|
||||
background-color: #bf2b28;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.goods-price{
|
||||
color: #bf2b28;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
justify-content: center;
|
||||
|
||||
text {
|
||||
margin: 0 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bg-purple{
|
||||
border-top: 1px solid #f3f3f3;
|
||||
border-right: 1px solid #f3f3f3;
|
||||
image{
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
|
||||
.tool-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
font-size: 16px;
|
||||
|
||||
.search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.pagination{
|
||||
width: 1200px;
|
||||
margin: 20px auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.goods-list {
|
||||
width: 1200px;
|
||||
margin: 20px auto;
|
||||
|
||||
.grid-content {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
flex-direction: column;
|
||||
|
||||
.comments {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
line-height: 2em;
|
||||
|
||||
.goods-name {
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.goods-price {
|
||||
color: #bf2b28;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bg-purple {
|
||||
border-top: 1px solid #f3f3f3;
|
||||
border-right: 1px solid #f3f3f3;
|
||||
|
||||
image {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
width: 1200px;
|
||||
margin: 20px auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user