b2894lxlx/jjx-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1、新增商城

Browse Source 
2、新增自营
This commit is contained in:
b2894lxlx
2023-12-04 14:04:17 +08:00
parent 74e87c1339
commit a92aec2c29
30 changed files with 1447 additions and 834 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/index/shop/detail.vue
+91 -239
View File
@@ -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>
pages/index/shop/shop.vue
+187 -234
View File
@@ -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>